PHP TP1 :
Les ressources :
Les images des articles sont téléchargeables ici
Toutes les images utilisées sont libres de droit et on été télécharger sur Pexels
Le brief :
Il s'agit de monter une page de site web, la page galerie. Cette production reprendra les différents sujets abordés
Mise en place du projet :
Créer un dossier nommée php-initiation dans le dossier htdocs ou www de votre émulateur de serveur Apache.
Mise en place de l'arborescence :
Mettre en place les dossiers et fichiers listés ci-dessous dans le dossier "php-initiayion"
- Créer un fichier index.php à la racine du dossier php-initiation
- Créer un dossier includes à la racine du dossier php-initiation
- Créer un dossier scss
- Créer un dossier css
Mise en place des includes
Créer les fichiers listés ci-dessous dans le dossier includes
- Créer un fichier _head.php*
- Créer un fichier _navbar.php**
* Mettre tous les éléments commun à toutes les pages du site (css, typo, meta balise, title, etc...) dans le fichier _head.php, penser au CDN (Content Delivery Network) de Bootstrap
** Mettre en place dans le fichier _navbar.php du code d'une navbar bootstrap
Mise en place du scss
Créer les fichiers listés ci-dessous dans le dossier scss
- Créer un fichier style.scss
- Créer un fichier _variables et l'inclure dans le fichier style.scss
Mettre en place les données
Créer un fichier data.php à la racine du dossier php-initiation
Créer un tableau associatif contenant les données suivantes :
$products=[
[
"id" => 1,
"name" => "T-shirt",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 10,
"image" => "pexels-leticia-ribeiro-2112648.jpg"
],
[
"id" => 2,
"name" => "Pantalon",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 20,
"image" => "pexels-mnz-1598507.jpg"
],
[
"id" => 3,
"name" => "Chaussure",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 30,
"image" => "pexels-web-donut-19090.jpg"
],
[
"id" => 4,
"name" => "Casquette",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 40,
"image" => "pexels-joshua-t-954254.jpg"
],
[
"id" => 5,
"name" => "Chaussette",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 50,
"image" => "pexels-karolina-grabowska-4495753.jpg"
],
[
"id" => 6,
"name" => "Pull",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 60,
"image" => "pexels-valeria-boltneva-12967.jpg"
],
[
"id" => 7,
"name" => "Veste",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 70,
"image" => "pexels-gustavo-fring-4894829.jpg"
],
[
"id" => 8,
"name" => "Short",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 80,
"image" => "pexels-josh-willink-69101.jpg"
],
[
"id" => 9,
"name" => "Jupe",
"description" => "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.",
"price" => 90,
"image" => "pexels-almada-studio-601316.jpg"
],
]
Créer une variable pour le titre et une variable pour le texte d'introduction.
<?php
$title = "Galerie";
$intro = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.";
?>
Mise en place du contenu
- Créer un fichier gallery.php à la racine du dossier php-initiation
- Modifier le menu de la navbar pour avoir un lien qui amène à la page "gallery.php"
- Mettre en place une structure html5 dans le fichier "gallery.php"
- Ajouter les includes "_head.php" et "_navbar.php" dans le fichier "gallery.php"
- Mettre en place vers la feuille de style minifiée.
- Ajouter un container Bootstrap dans la page "gallery.php" (https://getbootstrap.com/docs/5.2/layout/containers/)
- Mettre en place le titre des datas avec une balise h1
- Mettre en place l'introduction (la variable des datas) dans une balise p
- Mettre en place des "cards" Bootstrap pour afficher chacun des articles dans la page
- Mettre en place une card en se référant à la documentation officielle (https://getbootstrap.com/docs/5.2/components/card/#example)
- Faire des cards responsive en se référent à la documentation officelle (https://getbootstrap.com/docs/5.2/components/card/#using-grid-markup)
Remarques :
- Les boutons des cards ne redirige nulle part
- La page index n'a pas de contenu