Posted inProjets Web (sites, formulaires, blogs
)

CrĂ©ez votre propre moteur de recherche Texte & Images 🌐

No Comments
CrĂ©ez votre propre moteur de recherche Texte & Images 🌐

Salut les codeurs et bienvenue sur LM-Code ! 🎉 Aujourd’hui, nous allons rĂ©aliser un super projet : un moteur de recherche qui permet de chercher du texte sur Wikipedia et des images sur Unsplash. đŸ–Œïž Pour cela, nous allons utiliser HTML, CSS et JavaScript.

Le tout sera simple, amusant et interactif. Alors, mettez votre casquette de dĂ©veloppeur et plongeons dans le code ! 🚀

🚀 Étape 1 : PrĂ©parer votre environnement

Avant de commencer, assurez-vous d’avoir les outils suivants installĂ©s :

  1. Un Ă©diteur de code : Visual Studio Code, Sublime Text, ou autre.
  2. Un navigateur : Chrome, Firefox, etc.
  3. Connexion Internet pour les API.

Créez un fichier nommé navigateur.html et un autre nav.js.

đŸ–Œïž Étape 2 : Le fichier HTML (l’interface)

C’est ici que nous construisons l’interface utilisateur ! On utilise HTML et Bootstrap pour que tout soit joli sans effort. 💅

Voici le contenu du fichier navigateur.html :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recherche Texte et Images</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 50px;
            background-color: rgb(245, 251, 252);
            color: black;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
        .content {
            flex: 1;
        }
        .search-results, #search-result {
            margin-top: 20px;
        }
        #search-result {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 20px;
        }
        #search-result img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 5px;
        }
        #show-more-btn {
            display: none;
            margin-top: 20px;
        }
        .nav-tabs {
            margin-bottom: 20px;
        }
        footer {
            background-color: #f8f9fa;
            padding: 20px 0;
            text-align: center;
            border-top: 1px solid #ddd;
        }
        footer a {
            color: #007bff;
            text-decoration: none;
            margin: 0 10px;
        }
        footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <h3>Application de recherche de Texte Wikipédia et d'Images</h3>
                    <div id="image-container" class="mb-5 d-flex justify-content-center">
                        <img id="image" src="logo1.png" alt="Logo" class="img-fluid">
                    </div>

                    <!-- Formulaire de recherche -->
                    <form id="searchForm">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="searchQuery" placeholder="Entrez votre recherche">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="submit">Rechercher</button>
                            </div>
                        </div>
                    </form>

                    <!-- Onglets pour les résultats -->
                    <ul class="nav nav-tabs" id="resultTabs">
                        <li class="nav-item">
                            <a class="nav-link active" id="all-tab" href="#">Tous</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="images-tab" href="#">Images</a>
                        </li>
                    </ul>

                    <!-- RĂ©sultats -->
                    <div id="results" class="search-results">
                        <!-- Les résultats textuels apparaßtront ici -->
                    </div>

                    <div id="search-result" style="display: none;">
                        <!-- Les résultats d'images apparaßtront ici -->
                    </div>

                    <button id="show-more-btn" class="btn btn-secondary" style="display: none;">Voir plus</button>
                    
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <p>&copy; 2024 LM-Code. Tous droits réservés.</p>
        <p>
            <a href="https://lm-code.be">Site Web</a> | 
            <a href="https://www.youtube.com/@lm-codeOfficiel">Chaine Youtube</a> | 
            <a href="https://lm-code.be">LM-Code</a> 
        </p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="nav.js"></script>
</body>
</html>

🎉 Vous venez de crĂ©er l’interface ! Le formulaire est prĂȘt, les onglets sont en place, et le footer est lĂ  pour ajouter des liens vers vos pages.

đŸ’» Étape 3 : Le fichier JavaScript (la logique)

Dans ce fichier, nous ajoutons la logique pour :

  1. Rechercher du texte sur Wikipedia.
  2. Trouver des images via Unsplash.
  3. GĂ©rer les onglets.

Voici le contenu du fichier nav.js :

const allTab = document.getElementById("all-tab");
const imagesTab = document.getElementById("images-tab");
const resultsContainer = document.getElementById("results");
const imagesContainer = document.getElementById("search-result");
const showMoreBtn = document.getElementById("show-more-btn");

// Gestion des clics sur les onglets
allTab.addEventListener("click", function (e) {
    e.preventDefault();
    allTab.classList.add("active");
    imagesTab.classList.remove("active");
    resultsContainer.style.display = "block";
    imagesContainer.style.display = "none";
    showMoreBtn.style.display = "none";
});

imagesTab.addEventListener("click", function (e) {
    e.preventDefault();
    allTab.classList.remove("active");
    imagesTab.classList.add("active");
    resultsContainer.style.display = "none";
    imagesContainer.style.display = "grid";
    if (imagesContainer.children.length > 0) {
        showMoreBtn.style.display = "block";
    }
});

// Rechercher sur Wikipedia
async function searchWikipedia(query) {
    const url = `https://en.wikipedia.org/w/api.php?origin=*&action=query&list=search&srsearch=${encodeURIComponent(query)}&utf8=&format=json`;

    try {
        const response = await fetch(url);
        const data = await response.json();

        if (data.query.search.length > 0) {
            displayWikipediaResults(data.query.search, resultsContainer);
        } else {
            displayNoResultsMessage(resultsContainer, "Aucun résultat trouvé sur Wikipedia.");
        }
    } catch (error) {
        displayNoResultsMessage(resultsContainer, "Erreur lors de la recherche sur Wikipedia.");
    }
}

// Afficher les résultats Wikipedia
function displayWikipediaResults(results, container) {
    container.innerHTML = ""; // Nettoyer les résultats précédents
    let groupTitle = document.createElement("h3");
    groupTitle.textContent = "RĂ©sultats Wikipedia";
    container.appendChild(groupTitle);

    results.forEach(result => {
        const item = document.createElement("div");
        item.className = "result-item p-3 mb-2 bg-light border";
        item.innerHTML = `
            <h4><a href="https://en.wikipedia.org/?curid=${result.pageid}" target="_blank">${result.title}</a></h4>
            <p>${result.snippet}...</p>`;
        container.appendChild(item);
    });
}

// GĂ©rer les images Unsplash
const accessKey = "VOTRE_CLE_UNSPLASH";
let page = 1;

async function searchImages(query) {
    const url = `https://api.unsplash.com/search/photos?page=${page}&query=${query}&client_id=${accessKey}&per_page=12`;

    try {
        const response = await fetch(url);
        const data = await response.json();

        if (page === 1) {
            imagesContainer.innerHTML = "";
        }

        data.results.forEach(result => {
            const img = document.createElement("img");
            img.src = result.urls.small;
            const link = document.createElement("a");
            link.href = result.links.html;
            link.target = "_blank";
            link.appendChild(img);
            imagesContainer.appendChild(link);
        });

        if (data.results.length > 0) {
            showMoreBtn.style.display = "block";
        } else if (page === 1) {
            displayNoResultsMessage(imagesContainer, "Aucune image trouvée.");
        }
    } catch (error) {
        displayNoResultsMessage(imagesContainer, "Erreur lors de la recherche d'images.");
    }
}

// Lancer la recherche
document.getElementById("searchForm").addEventListener("submit", function (e) {
    e.preventDefault();
    const query = document.getElementById("searchQuery").value.trim();
    if (query) {
        resultsContainer.innerHTML = "";
        imagesContainer.innerHTML = "";
        searchWikipedia(query);
        searchImages(query);
    }
});

// Bouton "Voir plus"
showMoreBtn.addEventListener("click", function () {
    page++;
    searchImages(document.getElementById("searchQuery").value);
});

// GĂ©rer les erreurs
function displayNoResultsMessage(container, message) {
    container.innerHTML = `<div class="alert alert-danger">${message}</div>`;
}

🎉 Étape 4 : Testez votre projet !

  1. Ouvrez navigateur.html dans votre navigateur.
  2. Recherchez un mot-clé.
  3. Regardez la magie opĂ©rer avec les onglets « Tous » et « Images » ! đŸŽ©âœš

🚀 Prochaine Ă©tape

  • Ajoutez des fonctionnalitĂ©s comme :
    • Recherche avancĂ©e.
    • Pagination amĂ©liorĂ©e.
    • ThĂšmes sombres et clairs ! đŸŒ™â˜€ïž

Amusez-vous bien, et n’hĂ©sitez pas Ă  partager votre projet avec le monde 🌍. Retrouvez d’autres tutos sur LM-Code. đŸ’»

Télécharger le Projet

Comments

No comments yet. Why don’t you start the discussion?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *