Structure du projet

Organiser correctement les fichiers et les dossiers est essentiel pour maintenir un projet propre, modulaire et facile à gérer. Une bonne structure de projet facilite la navigation dans le code, la collaboration avec d'autres développeurs, et la maintenance à long terme. Voici comment vous pouvez structurer un projet simple pour une application web qui interagit avec une API REST.

Organisation des fichiers et dossiers

Pour un projet web typique, vous pouvez organiser vos fichiers et dossiers de la manière suivante :

front/
│
├── index.html
├── css/
│   └── styles.css
├── js/
│   └── script.js
└── assets/
    ├── images/
    └── fonts/

  • index.html : Le fichier principal HTML qui définit la structure de votre page web. C'est le point d'entrée de votre application.

  • css/ : Un dossier pour tous vos fichiers CSS. Cela permet de séparer les styles du contenu et de la logique.

    • styles.css : Le fichier principal CSS où vous définissez les styles pour votre application.

  • js/ : Un dossier pour tous vos fichiers JavaScript. Cela permet de séparer la logique de votre application du contenu et des styles.

    • script.js : Le fichier principal JavaScript où vous écrivez la logique pour interagir avec le DOM et l'API.

  • assets/ : Un dossier pour les ressources statiques comme les images et les polices. Cela permet de garder votre projet organisé et facile à naviguer.

    • images/ : Un sous-dossier pour stocker toutes les images utilisées dans votre projet.

    • fonts/ : Un sous-dossier pour stocker les fichiers de polices personnalisées.

Création des fichiers HTML, CSS et JavaScript

Voici comment vous pouvez créer et structurer chacun de ces fichiers :

  • index.html : Ce fichier contient la structure de base de votre page web. Il inclut des liens vers vos fichiers CSS et JavaScript.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food API Frontend</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1>Food API</h1>
        <div id="foods-list"></div>
        <form id="food-form">
            <input type="text" id="food-name" placeholder="Nom de l'aliment" required>
            <input type="text" id="food-type" placeholder="Type de l'aliment" required>
            <input type="text" id="food-emoji" placeholder="Emoji de l'aliment" required>
            <button type="submit">Ajouter Aliment</button>
        </form>
    </div>
    <script src="js/script.js"></script>
</body>
</html>
  • css/styles.css : Ce fichier contient les styles pour votre page web. Vous pouvez utiliser des sélecteurs pour cibler des éléments spécifiques et appliquer des styles.
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#foods-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.food-item {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background: #f9f9f9;
}

#food-form input, #food-form button {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#food-form button {
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}
  • js/script.js : Ce fichier contient le code JavaScript pour interagir avec le DOM et l'API. Vous pouvez utiliser fetch pour envoyer des requêtes à l'API et mettre à jour la page web en fonction des réponses.
document.addEventListener('DOMContentLoaded', function() {
    const foodsList = document.getElementById('foods-list');
    const foodForm = document.getElementById('food-form');

    async function fetchFoods() {
        try {
            const response = await fetch('http://localhost/Food/back/foods');
            const foods = await response.json();
            foodsList.innerHTML = '';
            foods.forEach(food => {
                const foodItem = document.createElement('div');
                foodItem.className = 'food-item';
                foodItem.innerHTML = `
                    <p>${food.emoji}</p>
                    <p>${food.name}</p>
                    <p>${food.type}</p>
                `;
                foodsList.appendChild(foodItem);
            });
        } catch (error) {
            console.error('Error fetching foods:', error);
        }
    }

    foodForm.addEventListener('submit', async function(event) {
        event.preventDefault();

        const name = document.getElementById('food-name').value;
        const type = document.getElementById('food-type').value;
        const emoji = document.getElementById('food-emoji').value;

        try {
            const response = await fetch('http://localhost/Food/back/foods', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ name, type, emoji })
            });

            if (response.ok) {
                fetchFoods();
                foodForm.reset();
            } else {
                console.error('Error adding food:', response.statusText);
            }
        } catch (error) {
            console.error('Error adding food:', error);
        }
    });

    fetchFoods();
});

En structurant votre projet de cette manière, vous pouvez facilement ajouter de nouvelles fonctionnalités, maintenir le code existant, et collaborer avec d'autres développeurs. Cette organisation vous permet également de séparer clairement les préoccupations, ce qui est une bonne pratique en développement logiciel.

Last modified: Saturday, 7 June 2025, 9:00 AM