Partie 1. La page d'accueil

Le but de ce projet est de réaliser un site permettant de créer des listes de courses et de les partager.

Ce projet doit être réalisé sur un serveur web (type Apache) avec PHP, MySQL et phpMyAdmin. Ce projet a été testé avec les versions suivantes :

PHP 7.2 ou plus
phpMyAdmin 4.6.6
MySQL 5.7

Il doit fonctionner avec d'autres versions, mais demandera peut-être quelques adaptations.

Création de la page d'accueil

Bootstrap

Pour ce projet, nous allons utiliser Bootstrap, qui est une bibliothèque open source permettant la création rapide de pages Web. Bootstrap contient de nombreux éléments qui sont fréquemment utilisés (boutons, formulaires, boites de message ...) en développement Web. Parmi les avantages de Bootstrap :

création rapide d'une page harmonieuse
responsive (s'adapte à la taille de l'écran)
résultat compatible avec la plupart des navigateurs

Rendez-vous sur la page d'introduction à Bootstrap et récupérez le template situé dans la section Starter template.

Créez un fichier index.php à la racine de votre site et insérez-y le template Bootstrap. Assurez-vous que la page soit correctement chargée et affiche Hello, world!.

Ajoutez un titre et une description dans l'en-tête de la page.

Je recommande de prendre le temps de lire cette page Bootstrap concernant l'utilisation des marges avant de poursuivre.

Google font

Google propose une collection de polices de caractères conçues spécialement pour être importées dans des sites internet. Rendez-vous sur la page d'accueil de Google Fonts et sélectionnez la police Pacifico. Après la sélection, une petite boite de dialogue apparait en bas à droite avec une ligne à ajouter dans l'en-tête de votre page HTML. Ajoutez la ligne.

Créez un dossier css à la racine du site. Dans ce dossier, créez un fichier nommé liste2courses.css et y ajoutez la ligne suivante dans le fichier css :

.title { font-family: 'Pacifico', cursive; }

Vous avez maintenant une classe title qui va vous permettre de modifier la police des éléments utilisant cette classe. Dans la page d'accueil de votre site créez un titre centré dans la page avec la police que vous venez d'importer. A ce stade, votre page d'accueil doit ressembler à ça :

Formulaire

Créez dans le corps de votre page une division de 800 pixels maximum centrée sur la page :

<div  style="max-width:800px" class="mx-auto">
</div>

Insérez le titre et un formulaire conforme à l'illustration suivante en vous aidant de la documentation Bootstrap sur les formulaires :

Le formulaire ne devra pas être envoyé si le champ est vide. Le formulaire sera posté dans la page new.php avec la méthode POST.

Créez un script new.php à la racine du projet. Pour l'instant, assurez-vous simplement que les données du formulaire sont correctement reçues, nous traiterons les données plus tard.

Partie 2

Voir aussi

Dernière mise à jour : 05/03/2020