Université Bordeaux Segalen Licence 3 MIASHS, semestre 6 (2015/2016) Conception de Sites Web Dynamiques : TD 7 Mise en page et site web adaptative (responsive web design) Version temporaire du 25 Mars 2016 Exercice 7.1 HTML/CSS : Introduction et installation de Bootstrap Dans cet exercice, nous allons mettre en forme une page web en nous reposons sur un exemple de mise en forme en responsive web design (conception de pages web adaptative), avec un exemple de bootstrap. 1. Rendez-vous sur http://getbootstrap.com/. 2. Découvrez les exemples dans le menu Getting started http://getbootstrap.com/getting-started. 3. Téléchargez la version bootstrap (compilé, non pas le code source) la plus récente sur http://getbootstrap.com/. Décompressez l archive dans votre dossier td7, et renommez le dossier bootstrap-dist-xxx en dist. 4. Dans votre dossier td7, rajoutez deux dossiers qui s appellent js et css. 5. Dans le dossier td7/js, téléchargez la bibliothèque JavaScript JQuery depuis l adresse https://jquery.com/, et plus précisément Download the compressed, production jquery 1.12.2 sur le lien http://code.jquery.com/jquery-1.12.2.min.js. 6. Depuis la page web du cours, copiez le code source de Hello World Bootstrap dans votre éditeur de texte Notepad++, et sauvegardez-le sous le nom hello-bootstrap.php dans votre dossier td7. 7. Voici votre arborescence attendue : cswd/ td7/ dist css fonts js js jquery-1.12.2.min.js css hello-bootstrap.php 8. Ouvrez votre fichier hello-bootstrap.php en passant par le serveur Apache (EasyPHP, Web local, ).
Exercice 7.2 Bootstrap : Une page avec quelques éléments 1. Dans la partie corps de votre fichier hello-bootstrap.php, encapsulez l intégralité de ce qui suit dans une balise div de la classe container : <div class="container"> </div> 2. Créez un titre h1 s appelant Lorem Ipsum. 3. Créez trois paragraphes p de faux texte depuis la page wikipedia. 4. Après ces trois paragraphes, depuis (CSS - Buttons), créez un bouton de type info avec le texte J ai compris. 5. Dans les Components, copier l exemple de menu Navs - Tabs au-dessus de votre titre h1. Appliquez la classe active pour Profile, et étudiez le comportement. 6. Encapsulez votre menu dans une barre de navigation Navbar - Fixed to top. 7. Modifier le type de votre menu à fixed to bottom, et ensuite virer l application de la classe navbar-fixed-bottom entièrement. Etudiez le comportement. 8. Après le bouton, rajoutez une List Group - Disabled Items, et créez des liens de votre choix (Wikipedia, Youtube, ). Exercice 7.3 Bootstrap : Système de grilles Etudiez le système de grille de Bootstrap (CSS - Grid System). Considérer un système de grille pour (CSS - Grid System - Ex: Mobile and desktop). <!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">première colonne</div> <div class="col-xs-6 col-md-4">deuxième colonne pour desktop</div> </div> 1. Utilisez cette grille. Mettez les éléments h1, p, et bouton à la première colonne, et le contenu de votre List Group à la deuxième colonne. Exercice 7.4 Bootstrap : plusieurs pages Copiez votre fichier hello-bootstrap.php en 3 pages home.php,profile.php et messages.php, et modifiez les liens dans les menus ainsi que le menu actif de chaque page. 2
1 Objectif Dans la suite de ce TD7, nous allons implémenter une gestion de membres pour un site Internet. Exercice 7.5 Création d une table de la base de données 1. Créer une table dans votre base de données qui s appelle membre avec les champs suivants : un champs INT qui s appelle id avec les attributs clé primaire ainsi que autoincrement (A I), un champs TEXT qui s appelle pseudo, et un champs TEXT qui s appelle motdepasse, un champs TEXT qui s appelle prenom, un champs TEXT qui s appelle nom, ainsi qu un champs TEXT qui s appelle email, un champs INT qui s appelle id categorie, ainsi qu un champs DATETIME qui s appelle dateinscrit. Table membre id pseudo motdepasse nom prenom email id categorie dateinscrit INT TEXT TEXT TEXT TEXT TEXT INT DATETIME 1 xabi Xabi Lagarde x.lagarde@live.fr 1 2010-03-21 18:32:31 2 skater Patxi Berthaud patxi33@free.fr 3 2011-08-06 23:22:17 2. Créer donc quelques enregistrement dans cette table. L interface phpmyadmin vous précise les requêtes INSERT après chaque insertion d enregistrement. Notez la requête INSERT dans le cadre ci-dessous, afin de l utiliser plus tard. Exercice 7.6 Création d une deuxième table de la base de données Dans cet exercice, on créera une table categorie qui permet de définir plusieurs categories de votre membre, de type étudiant, salarié, etc. Table categorie id nom INT TEXT 1 Etudiant 2 Salarié 3 Autre 1. Créer quelques enregistrement dans cette table, et notez la requête INSERT : 3
Exercice 7.7 Formulaire d inscription d un nouveau membre Dans cet exercice, nous créons le formulaire d inscription d un nouveau membre inscription.php. 1. Créer un formulaire qui renvoie vers la page enregistrer membre.php avec la méthode post: <form action="enregistrer_membre.php" method="post"> </form> 2. Dans le formulaire, permettez de renseigner les champs suivant : Un champ text étiqueté pseudo (donc avec la propriété name="pseudo" permettant de définir un pseudo pour le membre. Un champ password étiquettés motdepasse permettant de renseigner le mot de passe du membre. Un champs text étiqueté prenom permettant de définir le prénom du membre, et un champ text étiqueté nom permettant de définir le nom du membre, ainsi qu un champ text étiqueté email permettant de renseigner l email du membre. Pemettez également de renseigner la catégorie du membre, étiqueté categorie. Pour cela, vous allez créer un menu déroulant qui propose les choix possible. Créer ce menu déroulant à partir de votre table categorie. Le résultat devrait donc être : <select name="categorie"> <option value="1">etudiant</option> <option value="2">salarié</option> <option value="3">autre</option> </select> En dernier, rajouter un bouton submit étiquetté Valider permettant de soumettre votre formulaire. Exercice 7.8 Page d enregistrement du formulaire du membre renseigné avec PHP. Dans cet exercice, vous allez créer le fichier enregistrer membre.php qui affichera un récapitulatif de tous les valeurs du formulaire renseignées, et qui insérera les données dans la table membre de la base de données. 1. Récuperez les paramètres du formulaire avec la méthode $ POST en PHP, et stockez-les dans les variables $pseudo, $motdepasse, $email, $prenom, et $nom. 2. Affichez un récapitulatif des données en utilisant ces variables. 3. Afin d insérez les données dans votre table membres, nous allons utiliser l instruction MySQL INSERT. Afin d exécuter cette requête d une manière efficace et sécurisé, nous allons utiliser les instruction préparées de PDO. Ceci consiste à remplacer l exécution directe de la requête ($pdo->query($requete)) par deux instructions : 4
1. la préparation ($pdo->prepare($requete)) de la forme de la requête en mettant des points d interrogations à la place des données, et 2. l exécution ($pdo->execute(array())) de la requête en spécifiant un tableau de données qui remplacera les points d interrogations. <?php // exécuter une requete MySQL de type INSERT $requete="insert INTO membre (pseudo,motdepasse,nom,prenom,email,id_categorie,dateinscrit) VALUES (?,?,?,?,?,?, NOW())"; $reponse=$pdo->prepare($requete); $reponse->execute(array($pseudo, $motdepasse, $nom, $prenom, $email, $id_categorie));?> 4. Vérifiez que la requête INSERT correspond bien à celle de l exercice 8.1. 5. Rajoutez un lien hypertexte permettant de renvoyer à la page connexion.php. Exercice 7.9 Mise en forme du formulaire avec le Framework Bootstrap Dans cette exercice, nous allons utilisé la framework Bootstrap pour la mise en forme de votre formulaire inscription.php. 1. Copiez votre fichier inscription.php dans un fichier inscription bootstrap.php. 2. Utilisez le form builder sur http://minikomi.github.io/bootstrap-form-builder/. Reproduisez votre formulaire de l exercice 8.3. 3. En cliquant sur Render, examinez le code source de votre formulaire. 4. Copiez ce formulaire dans votre fichier inscription bootstrap.php, et éditez la propriété action ainsi que les étiquettes name des champs afin que cela concorde avec votre ancien fichier inscription.php. 5
6