TP Web Dynamique

Cette page va présenter les grandes lignes de ce que vous allez devoir réaliser en TP.

Première étape : Création de la base de données

Utilisez phpMyAdmin pour créer cette table. N’hésitez pas à utiliser les boutons présents en haut du visualiseur de code pour copier/coller le SQL.

Identifiez les tables qui sont mises en relation dans ce schéma de données, et déduisez le type de relation qui les uni.

Si vous avez bien compris la structure et la nature de la base de donnée présentée ci-dessus, vous devriez en déduire que le site va présenter des Films ! Je vous laisse choisir les films que vous voudrez insérer dans votre base. Je vous conseille pour cela d’utiliser les données du site alloCiné.

Création de la structure de l’application

La structure de l’application (à partir du répertoire www ou public_html de votre FTP) va ressembler à ça :

Capture d’écran 2014-05-27 à 17.41.11

Remarquez que le fichier index.php principal se situe dans le répertoire public. Pour accéder au site, vous devrez donc taper l’URL http://groupeN.r-t.dsi.uvsq.fr/public/
Nous verrons plus tard pourquoi.

Vous devriez avoir plusieurs fichiers à la base de votre site lorsque vous le visitez en FTP. Créez un répertoire nommé ‘exercices’ à la base de votre site et déplacez tous les fichiers à la base de votre site dans ce répertoire. Créez ensuite la structure telle que décrite ci-dessus.

Les répertoires css, js et fonts vont contenir les fichiers du framework Bootstrap que nous avons déjà vu. Vous pouvez les déplacer de l’endroit ou ils sont actuellement, ou alors les télécharger à nouveau en FTP.

Une fois la structure créée, repérer le répertoire app/views/layout. Layout est un mot anglais signifiant agencement, ou encore mise en page. Nous allons créer trois fichiers dans ce répertoire : footer.php, header.php, menu.php

Copiez et collez le code de chacun de ces fichiers :

 

 

 

Dans le fichier include.php, à la base de votre site, ajoutez le contenu suivant :

Ce fichier va être appelé, inclus, par toutes les pages du site. Il définit des chemins de base qui sont ROOT, la base de votre site, et APP, le répertoire app. L’utilisation de la constante DIRECTORY_SEPARATOR permet d’éviter d’avoir à utiliser le slash (/) lorsque l’on est sur unix ou mac et l’antislash (\) sous windows. Cette constante est capable de détecter le système d’exploitation sur lequel est installé le site.

Le fichier public/index.php ne va pas contenir grand chose. Son seul rôle va être de renvoyer le visiteur du site vers une page qui deviendra la page principale du site, public/films/index.php
Commençons tout de même par créer le contenu de public/index.php

Nous utilisons ici la fonction header qui permet de renvoyer un entête HTTP spécifique, ici un code 301, correspondant à une redirection. Le contenu de cet entête, ‘Location:…’ permet de spécifier vers quelle page sera effectuée la redirection.

Editez ensuite la page public/films/index.php

Si vous testez votre page (http://groupeN.r-t.dsi.uvsq.fr/public/) vous serez redirigés sur http://groupeN.r-t.dsi.uvsq.fr/public/films/index.php. Mais vous constaterez que la page n’est pas très belle. Pour la rendre un peu plus jolie, vous devez ajouter un fichier main.css dans le répertoire public/css/. Ajoutez-lui ce contenu :