Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
[PHP] Système de "Portfolio" avec trie par catégorie
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Westiix" data-source="post: 6842566" data-attributes="member: 6708"><p style="text-align: center"><span style="color: rgb(0, 89, 179)">=========================================</span></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)"><span style="font-size: 18px">Introduction</span></span></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">=========================================</span></p> <p style="text-align: center"><span style="color: rgb(0, 89, 179)">Dans ce tutoriel, je vais vous apprendre à crée</span> <span style="color: rgb(0, 128, 255)"><strong>un système de portfolio avec trie par catégorie </strong>(de la création de la base de donnée à la création de class PHP pour gérer le système)</span> .</p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)">=========================================</span></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)"><span style="font-size: 18px">Requis</span></span></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)">=========================================</span></p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="color: rgb(0, 102, 51)">Pour ce tutoriel, vous aurez besoin :</span></strong></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)">- d'un éditeur de code HTML/PHP etc.. (NotePad++ peut très bien faire l'affaire, perso j'utilise</span> <strong><a href="https://www.sublimetext.com/" target="_blank"><span style="color: rgb(0, 179, 89)"><u>Sublime Text 3</u></span></a></strong><span style="color: rgb(0, 102, 51)">)</span></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)">- d'une plateforme de développement WEB (</span><strong><u><a href="http://www.wampserver.com/" target="_blank"><span style="color: rgb(0, 179, 89)">WampServer</span></a></u></strong><span style="color: rgb(0, 102, 51)"> ; </span><strong><u><a href="https://www.apachefriends.org/fr/index.html" target="_blank"><span style="color: rgb(0, 179, 89)">Xamp</span></a></u></strong><span style="color: rgb(0, 102, 51)"> etc... , perso j'utilise </span><u><strong><span style="color: rgb(0, 179, 89)">WampServer</span></strong></u><span style="color: rgb(0, 102, 51)">)</span></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)">- d'une base de donnée MYSQL</span></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)"></span></p> <p style="text-align: center"><span style="color: rgb(0, 102, 51)">Pour ce tutoriel, J'ai utilisé le css de bootstrap et le template </span><strong><u><a href="https://github.com/BlackrockDigital/startbootstrap-4-col-portfolio/archive/gh-pages.zip" target="_blank"><span style="color: rgb(0, 179, 89)">bootstrap portfolio</span></a></u></strong></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)">=========================================</span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)"><span style="font-size: 18px">Base de donnée</span></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)">=========================================</span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)"><strong>Commencé par crée notre base de donnée :</strong></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)">1) Rendez-vous sur </span><strong><span style="color: rgb(179, 0, 0)">votre phpMyAdmin</span></strong><span style="color: rgb(102, 0, 0)"> (pour ma part localhost/phpmyadmin/) et </span><strong><span style="color: rgb(179, 0, 0)">identifiez-vous</span></strong></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)">2) Crée une nouvelle base de donnée (pour ma part je vais mettre </span><strong><span style="color: rgb(179, 0, 0)">portfolio</span></strong><span style="color: rgb(102, 0, 0)">)</span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)"><img src="http://image.prntscr.com/image/a39d6306a4684dfdbb2d1c28a6f09c82.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)"></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)">3) Crée une nouvelle table et appelé la </span><span style="color: rgb(179, 0, 0)"><strong>categories</strong></span><span style="color: rgb(102, 0, 0)"> , avec 2 colonnes comme ci-dessous :</span></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/c7634558a82d4b56bd0209ce7ba28c38.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)">4) Crée une nouvelle table et appelé la </span><strong><span style="color: rgb(179, 0, 0)">creations </span></strong><span style="color: rgb(102, 0, 0)">, avec 4 colonnes comme ci-dessous :</span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)"><img src="http://image.prntscr.com/image/d534f19ddb7544bea767fa2c590154e6.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(102, 0, 0)">5) Insérer plusieurs entrés (catégories) </span><strong><span style="color: rgb(179, 0, 0)">via phpMyAdmin</span></strong><span style="color: rgb(102, 0, 0)"> dans</span><span style="color: rgb(179, 0, 0)"> <strong>la table categories</strong></span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 0)"><strong><img src="http://image.prntscr.com/image/6de6d744d37341d1a097838528c66332.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></strong></span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 0)"></span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 0)"><span style="color: rgb(102, 0, 0)">5) Insérer plusieurs entrés (creations) </span><strong>via phpMyAdmin</strong><span style="color: rgb(102, 0, 0)"> dans</span><strong> <strong>la table creations</strong></strong></span></p> <p style="text-align: center"></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">=========================================</span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)"><span style="font-size: 18px">Codons notre script</span></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">=========================================</span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">1) On commence par </span><strong><span style="color: rgb(179, 0, 89)">la connexion à la base de donnée</span></strong><span style="color: rgb(102, 0, 51)"> (pour le tuto, je le met tout en haut de la page, celle où il y aura les créations) :</span></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/d65545afd1a04223a9f33c0416062463.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: left">[PHP]<?php</p> <p style="text-align: left"> $pdo = new PDO('mysql:host=localhost;dbname=portfolio', 'root', 'root');</p> <p style="text-align: left">?>[/PHP]</p> <p style="text-align: left"></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">2) Pour nous facilité le travail, on va se crée </span><span style="color: rgb(179, 0, 89)"><strong>des class </strong></span><span style="color: rgb(102, 0, 51)">, </span><strong><span style="color: rgb(179, 0, 89)">une class qui se chargera de gérer les catégories </span></strong><span style="color: rgb(102, 0, 51)">et </span><strong><span style="color: rgb(179, 0, 89)">une class qui se chargera de gérer les créations</span></strong><span style="color: rgb(102, 0, 51)"> .</span></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"></p> <p style="text-align: center"><strong><span style="color: rgb(179, 0, 89)">Dans votre dossier class</span></strong><span style="color: rgb(102, 0, 51)"> (si vous n'en avez pas, je vous conseil de le crée pour bien s'y retrouver) , on va crée un nouveau fichier appelé </span><strong><span style="color: rgb(179, 0, 89)">categories.class.php </span></strong><span style="color: rgb(102, 0, 51)">et crée la structure de base de la class :</span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 89)"><strong><img src="http://image.prntscr.com/image/6e5ec8ca3469466db6e3900f8892a2e2.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></strong></span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 89)"></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">Dans cette class, on effectuera des requêtes à notre base de donnée donc</span><span style="color: rgb(179, 0, 89)"> <strong>il faut récupérer la connexion à notre base de donnée :</strong></span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 89)"><strong><img src="http://image.prntscr.com/image/4992da941c2c42d095a9e61d91aeca20.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></strong></span></p> <p style="text-align: left">[PHP]<?php</p> <p style="text-align: left"> class categories{</p> <p style="text-align: left"></p> <p style="text-align: left"> private $PDO;</p> <p style="text-align: left"></p> <p style="text-align: left"> /**</p> <p style="text-align: left"> * Récupère la connexion à notre base de donnée directement quand on instancie la class en faisant :</p> <p style="text-align: left"> * $categorie = new categories($pdo) | "$pdo" contiens la connexion à notre base de donnée, sur la page où on a crée la connexion à PDO</p> <p style="text-align: left"></p> <p style="text-align: left"> private $PDO récuperera notre connexion PDO via le constructeur de la class</p> <p style="text-align: left"> */</p> <p style="text-align: left"> public function __construct($pdo){</p> <p style="text-align: left"> $this->PDO = $pdo;</p> <p style="text-align: left"> }[/PHP]</p> <p style="text-align: left"></p><p></p><p style="text-align: center"><span style="color: rgb(179, 0, 89)"></span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 89)">On va crée <strong>une fonction qui permettra de récupérer la connexion à PDO</strong> , celle que l'on aura stocké dans "private $PDO;" via le constructeur de la class :</span></p> <p style="text-align: center"><span style="color: rgb(179, 0, 89)"><strong><img src="http://image.prntscr.com/image/67959566c28547aba68c6abfffcd4537.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></strong></span></p> <p style="text-align: left">[PHP]<?php</p> <p style="text-align: left"> class categories{</p> <p style="text-align: left"></p> <p style="text-align: left"> private $PDO;</p> <p style="text-align: left"></p> <p style="text-align: left"> /**</p> <p style="text-align: left"> * Récupère la connexion à notre base de donnée directement quand on instancie la class en faisant :</p> <p style="text-align: left"> * $categorie = new categories($pdo) | "$pdo" contiens la connexion à notre base de donnée, sur la page où on a crée la connexion à PDO</p> <p style="text-align: left"></p> <p style="text-align: left"> private $PDO récuperera notre connexion PDO via le constructeur de la class</p> <p style="text-align: left"> */</p> <p style="text-align: left"> public function __construct($pdo){</p> <p style="text-align: left"> $this->PDO = $pdo;</p> <p style="text-align: left"> }</p> <p style="text-align: left"></p> <p style="text-align: left"> /**</p> <p style="text-align: left"> * Permet de retourné l'instance PDO (connexion à la base de donnée) stocké dans notre "private $PDO;"</p> <p style="text-align: left"> */</p> <p style="text-align: left"> private function getPDO(){</p> <p style="text-align: left"> return $this->PDO;</p> <p style="text-align: left"> }</p> <p style="text-align: left"> }[/PHP]</p> <p style="text-align: left"></p> <p style="text-align: center"><span style="color: rgb(179, 0, 89)">Maintenant on rentre dans le vif du sujet, on va crée </span><strong><span style="color: rgb(179, 0, 89)">une fonction qui va s'occuper de récupérer nos catégories :</span></strong></p> <p style="text-align: center"><img src="http://image.prntscr.com/image/fdbc7e48e4bc4587971e83e2f36935b9.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p> <p style="text-align: left">[PHP]/**</p> <p style="text-align: left"> * Récupère toutes mes catégories sous forme de bouton (envoie des données par $_GET)</p> <p style="text-align: left"> *</p> <p style="text-align: left"> * Utilisation : getCategories('categorie');</p> <p style="text-align: left"> * Rendu de l'URL : mapage.php?categorie=X;</p> <p style="text-align: left"> *</p> <p style="text-align: left"> * Exemple : getCategories('type');</p> <p style="text-align: left"> * Rendu de l'URL : mapage.php?type=X;</p> <p style="text-align: left"> */</p> <p style="text-align: left"> public function getCategories($keyGET){</p> <p style="text-align: left"> $req = $this->getPDO()->query("SELECT * FROM categories"); // On récupère toutes nos catégories</p> <p style="text-align: left"> $nbCategories = $req->rowCount(); // On compte le nombre de ligne il y a (donc le nombre de catégories)</p> <p style="text-align: left"></p> <p style="text-align: left"> if($nbCategories > 0){</p> <p style="text-align: left"> // SI $nbCategories est SUPERIEUR à 0 , on affiche le bouton pour enlever le filtre (enlevé le $_GET)</p> <p style="text-align: left"></p> <p style="text-align: left"> // SI on a un $_GET['categorie'] dans l'URL (donc mapage.php?$keyGET=X) ALORS on affiche le bouton pour enlever le filtre actuel, sinon le bouton n'est pas générer</p> <p style="text-align: left"> if(isset($_GET[$keyGET]) && !empty($_GET[$keyGET])){</p> <p style="text-align: left"> echo "<a href='index.php' class='btn btn-warning' style='margin-bottom: 25px;'>Retour</a> ";</p> <p style="text-align: left"> }</p> <p style="text-align: left"></p> <p style="text-align: left"> // SI $nbCategories est SUPERIEUR à 0 (donc qu'il y a au moins 1 catégorie) , on affiche les boutons pour filtré les créations</p> <p style="text-align: left"> while ($infosCategories = $req->fetch()) {</p> <p style="text-align: left"> echo "<a href='?{$keyGET}={$infosCategories['name_categories']}' class='btn btn-primary' style='margin-bottom: 25px;'>Trié par {$infosCategories['name_categories']}</a> ";</p> <p style="text-align: left"> }</p> <p style="text-align: left"> }</p> <p style="text-align: left"> /*</p> <p style="text-align: left"> else {</p> <p style="text-align: left"> SI il y a aucune catégorie, on execute ce code (dans notre cas, sa ne sert à rien)</p> <p style="text-align: left"> }</p> <p style="text-align: left"> */</p> <p style="text-align: left"> }[/PHP]</p> <p style="text-align: left"></p> <p style="text-align: center"><strong><span style="color: rgb(179, 0, 89)">Dans votre dossier class</span></strong> <span style="color: rgb(102, 0, 51)">, </span><strong><span style="color: rgb(179, 0, 89)">dupliquer votre class categories.class.php</span></strong><span style="color: rgb(102, 0, 51)"> et </span><strong><span style="color: rgb(179, 0, 89)">renommer le fichier</span></strong> <strong><span style="color: rgb(102, 0, 51)">(celui que vous avez obtenu en dupliquant la class <strong>categories.class.php</strong>)</span></strong><span style="color: rgb(102, 0, 51)"> en </span><strong><span style="color: rgb(179, 0, 89)">creations.class.php</span></strong></p> <p style="text-align: center"><strong><span style="color: rgb(179, 0, 89)"></span></strong></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">Ensuite ouvrez-le, </span><strong><span style="color: rgb(179, 0, 89)">modifier le nom de la class</span></strong><span style="color: rgb(102, 0, 51)"> (dans le fichier) :</span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)"><img src="http://image.prntscr.com/image/5754816d94cc418cb0690e06c66accbe.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)"></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">Maintenant </span><strong><span style="color: rgb(179, 0, 89)">on efface la fonction qui concerne les catégories</span></strong><span style="color: rgb(102, 0, 51)"> (puisque la on est dans la class qui gères les créations) :</span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)"><img src="http://image.prntscr.com/image/7192a57556c34b2eb1fa6e2273f10d99.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)"></span></p> <p style="text-align: center"><span style="color: rgb(102, 0, 51)">Il y a plus cas </span><strong><span style="color: rgb(179, 0, 89)">crée la fonction qui récupères les créations</span></strong> :</p> <p style="text-align: left">[PHP]public function getCreations($keyGET){</p> <p style="text-align: left"> if(isset($_GET[$keyGET]) && !empty($_GET[$keyGET])){</p> <p style="text-align: left"> // Si le $_GET[$keyGET] existe dans l'URL et qu'il est remplit, on va vérifier que la catégorie existe bien</p> <p style="text-align: left"></p> <p style="text-align: left"> $recupGET = $this->getPDO()->prepare("SELECT * FROM categories WHERE name_categories = ?");</p> <p style="text-align: left"> $recupGET->execute(array($_GET[$keyGET]));</p> <p style="text-align: left"></p> <p style="text-align: left"> // On regarde si on a une ligne qui a pour name_categorie = $keyGET</p> <p style="text-align: left"> $retourCategorie = $recupGET->rowCount();</p> <p style="text-align: left"> if($retourCategorie === 1){</p> <p style="text-align: left"> // Si la catégorie existe, on continue notre script et on récupère les créations comportant le nom de la catégorie</p> <p style="text-align: left"> $recupCreationsCategorie = $this->getPDO()->prepare("SELECT * FROM creations WHERE categorie_creations = ?");</p> <p style="text-align: left"> $recupCreationsCategorie->execute(array($_GET[$keyGET]));</p> <p style="text-align: left"></p> <p style="text-align: left"> // On regarde combien il y a de création avec le nom de la catégorie passé en $_GET (dans l'URL)</p> <p style="text-align: left"> $nbCreationsCategorie = $recupCreationsCategorie->rowCount();</p> <p style="text-align: left"> if($nbCreationsCategorie > 0){</p> <p style="text-align: left"> // Si on a au moins 1 creations dans la catégorie passé en $_GET, on l'affiche</p> <p style="text-align: left"> </p> <p style="text-align: left"> // On fait une boucle pour afficher toutes les créations comportant le nom de la categorie passé en $_GET (dans l'URL)</p> <p style="text-align: left"> while ($infosCreationsCategorie = $recupCreationsCategorie->fetch()) {</p> <p style="text-align: left"> echo "<div class='col-md-2 portfolio-item'>";</p> <p style="text-align: left"> echo "<img class='img-responsive' src='{$infosCreationsCategorie['url_creations']}'>";</p> <p style="text-align: left"> echo "</div>";</p> <p style="text-align: left"> }</p> <p style="text-align: left"></p> <p style="text-align: left"> } else {</p> <p style="text-align: left"> // SI on a aucune creations de cette catégorie, on affiche un message disant qu'il n'y aucune création dans cette catégorie</p> <p style="text-align: left"> echo "<div class='alert alert-danger'>Aucune création dans cette catégorie pour le moment</div>";</p> <p style="text-align: left"> }</p> <p style="text-align: left"></p> <p style="text-align: left"> } else {</p> <p style="text-align: left"> // Si la catégorie n'existe pas, on affiche un message et redirige au bout de X secondes</p> <p style="text-align: left"> echo "<div class='alert alert-danger'></p> <p style="text-align: left"> <b>Cette catégorie n'existe pas !</b> <br /></p> <p style="text-align: left"> Vous allez etre rediriger dans <b>3 secondes</b> .</p> <p style="text-align: left"> </div>";</p> <p style="text-align: left"> echo "<meta http-equiv='refresh' content='3;url=index.php' />";</p> <p style="text-align: left"></p> <p style="text-align: left"> }</p> <p style="text-align: left"></p> <p style="text-align: left"> } else {</p> <p style="text-align: left"> // Si il y a aucun $_GET ALORS</p> <p style="text-align: left"></p> <p style="text-align: left"> $recupCreations = $this->getPDO()->query("SELECT * FROM creations");</p> <p style="text-align: left"></p> <p style="text-align: left"> // On regarde combien il y a de création avec le nom de la catégorie passé en $_GET (dans l'URL)</p> <p style="text-align: left"> $nbCreations = $recupCreations->rowCount();</p> <p style="text-align: left"> if($nbCreations > 0){</p> <p style="text-align: left"> while ($infosCreations = $recupCreations->fetch()) {</p> <p style="text-align: left"> echo "<div class='col-xs-2 portfolio-item'>";</p> <p style="text-align: left"> echo "<img class='img-responsive' src='{$infosCreations['url_creations']}'>";</p> <p style="text-align: left"> echo "</div>";</p> <p style="text-align: left"> }</p> <p style="text-align: left"> } else {</p> <p style="text-align: left"> // SI on a aucune creations, on affiche un message disant qu'il n'y aucune création</p> <p style="text-align: left"> echo "<div class='alert alert-danger'>Aucune création</div>";</p> <p style="text-align: left"> }</p> <p style="text-align: left"> }</p> <p style="text-align: left"> }[/PHP]</p> <p style="text-align: left"></p> <p style="text-align: center"><span style="color: #660033">On retourne </span><span style="color: #b30059"><strong>sur notre page où il y aura les catégories et les créations</strong> et <strong>tout en haut du code</strong>, </span><span style="color: #660033">on va inclure et instanciés nos class fraîchement crée :</span></p> <p style="text-align: center"><span style="color: #b30059"><img src="http://image.prntscr.com/image/50f263330dd9403e9abe3241ac2b7ebd.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </span></p><p>[PHP]<?php</p><p> // On crée une connexion vers notre base de donnée</p><p> $pdo = new PDO('mysql:host=localhost;dbname=portfolio', 'root', 'root');</p><p></p><p> // On demande a inclure notre class "categories"</p><p> require('class/categories.class.php');</p><p></p><p> // On demande a inclure notre class "creations"</p><p> require('class/creations.class.php');</p><p></p><p> // On instancie notre class "categories" en récupérant la connexion vers notre base de donnée</p><p> $categories = new categories($pdo);</p><p></p><p> // On instancie notre class "creations" en récupérant la connexion vers notre base de donnée</p><p> $creations = new creations($pdo);</p><p>?>[/PHP]</p><p></p><p style="text-align: center"><span style="color: #660033">Puis </span><strong><span style="color: #b30059">là où vous voulez afficher vos boutons </span></strong><span style="color: #660033">(pour filtré par catégorie) </span><strong><span style="color: #b30059">et vos créations</span></strong><span style="color: #660033">, il vous suffit de faire :</span></p> <p style="text-align: left">[PHP]<?php</p> <p style="text-align: left"> /* On récupère nos boutons pour filtré par catégories</p> <p style="text-align: left"> *</p> <p style="text-align: left"> *$keyGET = le nom du $_GET</p> <p style="text-align: left">Exemple :</p> <p style="text-align: left">$exKeyGET = 'type';</p> <p style="text-align: left">Resultat = $_GET['type'];</p> <p style="text-align: left"> */</p> <p style="text-align: left">$keyGET = 'categorie';</p> <p style="text-align: left"> $categories->getCategories($keyGET);</p> <p style="text-align: left"></p> <p style="text-align: left"> // On récupère nos créations</p> <p style="text-align: left"> $creations->getCreations($keyGET);</p> <p style="text-align: left">?>[/PHP]</p> <p style="text-align: left"></p> <p style="text-align: center"><strong><span style="color: #b30059">Voilà, c'est tout pour ce tutoriel !</span></strong></p> <p style="text-align: center"><strong><span style="color: #b30059"></span></strong></p> <p style="text-align: center"><strong><span style="color: #666600">=========================================</span></strong></p> <p style="text-align: center"><strong><span style="color: #666600"><span style="font-size: 18px">Résultat final</span></span></strong></p> <p style="text-align: center"><strong><span style="color: #666600">=========================================</span></strong></p> <p style="text-align: center"><strong><img src="http://image.noelshack.com/fichiers/2016/38/1474803632-tuto-rgfr-portfolio-westiix.gif" alt="" class="fr-fic fr-dii fr-draggable " style="" /> </strong></p></blockquote><p></p>
[QUOTE="Westiix, post: 6842566, member: 6708"] [CENTER][COLOR=rgb(0, 89, 179)]========================================= [SIZE=5]Introduction[/SIZE] ========================================= Dans ce tutoriel, je vais vous apprendre à crée[/COLOR] [COLOR=rgb(0, 128, 255)][B]un système de portfolio avec trie par catégorie [/B](de la création de la base de donnée à la création de class PHP pour gérer le système)[/COLOR] . [COLOR=rgb(0, 102, 51)]========================================= [SIZE=5]Requis[/SIZE] =========================================[/COLOR] [B][COLOR=rgb(0, 102, 51)]Pour ce tutoriel, vous aurez besoin :[/COLOR][/B] [COLOR=rgb(0, 102, 51)]- d'un éditeur de code HTML/PHP etc.. (NotePad++ peut très bien faire l'affaire, perso j'utilise[/COLOR] [B][URL='https://www.sublimetext.com/'][COLOR=rgb(0, 179, 89)][U]Sublime Text 3[/U][/COLOR][/URL][/B][COLOR=rgb(0, 102, 51)]) - d'une plateforme de développement WEB ([/COLOR][B][U][URL='http://www.wampserver.com/'][COLOR=rgb(0, 179, 89)]WampServer[/COLOR][/URL][/U][/B][COLOR=rgb(0, 102, 51)] ; [/COLOR][B][U][URL='https://www.apachefriends.org/fr/index.html'][COLOR=rgb(0, 179, 89)]Xamp[/COLOR][/URL][/U][/B][COLOR=rgb(0, 102, 51)] etc... , perso j'utilise [/COLOR][U][B][COLOR=rgb(0, 179, 89)]WampServer[/COLOR][/B][/U][COLOR=rgb(0, 102, 51)]) - d'une base de donnée MYSQL Pour ce tutoriel, J'ai utilisé le css de bootstrap et le template [/COLOR][B][U][URL='https://github.com/BlackrockDigital/startbootstrap-4-col-portfolio/archive/gh-pages.zip'][COLOR=rgb(0, 179, 89)]bootstrap portfolio[/COLOR][/URL][/U][/B] [COLOR=rgb(102, 0, 0)]========================================= [SIZE=5]Base de donnée[/SIZE] ========================================= [B]Commencé par crée notre base de donnée :[/B] 1) Rendez-vous sur [/COLOR][B][COLOR=rgb(179, 0, 0)]votre phpMyAdmin[/COLOR][/B][COLOR=rgb(102, 0, 0)] (pour ma part localhost/phpmyadmin/) et [/COLOR][B][COLOR=rgb(179, 0, 0)]identifiez-vous[/COLOR][/B] [COLOR=rgb(102, 0, 0)]2) Crée une nouvelle base de donnée (pour ma part je vais mettre [/COLOR][B][COLOR=rgb(179, 0, 0)]portfolio[/COLOR][/B][COLOR=rgb(102, 0, 0)]) [IMG]http://image.prntscr.com/image/a39d6306a4684dfdbb2d1c28a6f09c82.png[/IMG] 3) Crée une nouvelle table et appelé la [/COLOR][COLOR=rgb(179, 0, 0)][B]categories[/B][/COLOR][COLOR=rgb(102, 0, 0)] , avec 2 colonnes comme ci-dessous :[/COLOR] [IMG]http://image.prntscr.com/image/c7634558a82d4b56bd0209ce7ba28c38.png[/IMG] [COLOR=rgb(102, 0, 0)]4) Crée une nouvelle table et appelé la [/COLOR][B][COLOR=rgb(179, 0, 0)]creations [/COLOR][/B][COLOR=rgb(102, 0, 0)], avec 4 colonnes comme ci-dessous :[/COLOR] [COLOR=rgb(102, 0, 0)][IMG]http://image.prntscr.com/image/d534f19ddb7544bea767fa2c590154e6.png[/IMG][/COLOR] [COLOR=rgb(102, 0, 0)]5) Insérer plusieurs entrés (catégories) [/COLOR][B][COLOR=rgb(179, 0, 0)]via phpMyAdmin[/COLOR][/B][COLOR=rgb(102, 0, 0)] dans[/COLOR][COLOR=rgb(179, 0, 0)] [B]la table categories[/B] [B][IMG]http://image.prntscr.com/image/6de6d744d37341d1a097838528c66332.png[/IMG][/B] [COLOR=rgb(102, 0, 0)]5) Insérer plusieurs entrés (creations) [/COLOR][B]via phpMyAdmin[/B][COLOR=rgb(102, 0, 0)] dans[/COLOR][B] [B]la table creations[/B][/B][/COLOR] [COLOR=rgb(102, 0, 51)]========================================= [SIZE=5]Codons notre script[/SIZE] ========================================= 1) On commence par [/COLOR][B][COLOR=rgb(179, 0, 89)]la connexion à la base de donnée[/COLOR][/B][COLOR=rgb(102, 0, 51)] (pour le tuto, je le met tout en haut de la page, celle où il y aura les créations) :[/COLOR] [IMG]http://image.prntscr.com/image/d65545afd1a04223a9f33c0416062463.png[/IMG][/CENTER] [LEFT][PHP]<?php $pdo = new PDO('mysql:host=localhost;dbname=portfolio', 'root', 'root'); ?>[/PHP] [/LEFT] [CENTER][COLOR=rgb(102, 0, 51)]2) Pour nous facilité le travail, on va se crée [/COLOR][COLOR=rgb(179, 0, 89)][B]des class [/B][/COLOR][COLOR=rgb(102, 0, 51)], [/COLOR][B][COLOR=rgb(179, 0, 89)]une class qui se chargera de gérer les catégories [/COLOR][/B][COLOR=rgb(102, 0, 51)]et [/COLOR][B][COLOR=rgb(179, 0, 89)]une class qui se chargera de gérer les créations[/COLOR][/B][COLOR=rgb(102, 0, 51)] .[/COLOR] [B][COLOR=rgb(179, 0, 89)]Dans votre dossier class[/COLOR][/B][COLOR=rgb(102, 0, 51)] (si vous n'en avez pas, je vous conseil de le crée pour bien s'y retrouver) , on va crée un nouveau fichier appelé [/COLOR][B][COLOR=rgb(179, 0, 89)]categories.class.php [/COLOR][/B][COLOR=rgb(102, 0, 51)]et crée la structure de base de la class :[/COLOR] [COLOR=rgb(179, 0, 89)][B][IMG]http://image.prntscr.com/image/6e5ec8ca3469466db6e3900f8892a2e2.png[/IMG][/B] [/COLOR] [COLOR=rgb(102, 0, 51)]Dans cette class, on effectuera des requêtes à notre base de donnée donc[/COLOR][COLOR=rgb(179, 0, 89)] [B]il faut récupérer la connexion à notre base de donnée :[/B] [B][IMG]http://image.prntscr.com/image/4992da941c2c42d095a9e61d91aeca20.png[/IMG][/B][/COLOR][/CENTER] [LEFT][PHP]<?php class categories{ private $PDO; /** * Récupère la connexion à notre base de donnée directement quand on instancie la class en faisant : * $categorie = new categories($pdo) | "$pdo" contiens la connexion à notre base de donnée, sur la page où on a crée la connexion à PDO private $PDO récuperera notre connexion PDO via le constructeur de la class */ public function __construct($pdo){ $this->PDO = $pdo; }[/PHP] [/LEFT] [CENTER][COLOR=rgb(179, 0, 89)] On va crée [B]une fonction qui permettra de récupérer la connexion à PDO[/B] , celle que l'on aura stocké dans "private $PDO;" via le constructeur de la class : [B][IMG]http://image.prntscr.com/image/67959566c28547aba68c6abfffcd4537.png[/IMG][/B][/COLOR][/CENTER] [LEFT][PHP]<?php class categories{ private $PDO; /** * Récupère la connexion à notre base de donnée directement quand on instancie la class en faisant : * $categorie = new categories($pdo) | "$pdo" contiens la connexion à notre base de donnée, sur la page où on a crée la connexion à PDO private $PDO récuperera notre connexion PDO via le constructeur de la class */ public function __construct($pdo){ $this->PDO = $pdo; } /** * Permet de retourné l'instance PDO (connexion à la base de donnée) stocké dans notre "private $PDO;" */ private function getPDO(){ return $this->PDO; } }[/PHP] [COLOR=rgb(179, 0, 89)][/COLOR][/LEFT] [CENTER][COLOR=rgb(179, 0, 89)]Maintenant on rentre dans le vif du sujet, on va crée [/COLOR][B][COLOR=rgb(179, 0, 89)]une fonction qui va s'occuper de récupérer nos catégories :[/COLOR][/B] [IMG]http://image.prntscr.com/image/fdbc7e48e4bc4587971e83e2f36935b9.png[/IMG][/CENTER] [LEFT][PHP]/** * Récupère toutes mes catégories sous forme de bouton (envoie des données par $_GET) * * Utilisation : getCategories('categorie'); * Rendu de l'URL : mapage.php?categorie=X; * * Exemple : getCategories('type'); * Rendu de l'URL : mapage.php?type=X; */ public function getCategories($keyGET){ $req = $this->getPDO()->query("SELECT * FROM categories"); // On récupère toutes nos catégories $nbCategories = $req->rowCount(); // On compte le nombre de ligne il y a (donc le nombre de catégories) if($nbCategories > 0){ // SI $nbCategories est SUPERIEUR à 0 , on affiche le bouton pour enlever le filtre (enlevé le $_GET) // SI on a un $_GET['categorie'] dans l'URL (donc mapage.php?$keyGET=X) ALORS on affiche le bouton pour enlever le filtre actuel, sinon le bouton n'est pas générer if(isset($_GET[$keyGET]) && !empty($_GET[$keyGET])){ echo "<a href='index.php' class='btn btn-warning' style='margin-bottom: 25px;'>Retour</a> "; } // SI $nbCategories est SUPERIEUR à 0 (donc qu'il y a au moins 1 catégorie) , on affiche les boutons pour filtré les créations while ($infosCategories = $req->fetch()) { echo "<a href='?{$keyGET}={$infosCategories['name_categories']}' class='btn btn-primary' style='margin-bottom: 25px;'>Trié par {$infosCategories['name_categories']}</a> "; } } /* else { SI il y a aucune catégorie, on execute ce code (dans notre cas, sa ne sert à rien) } */ }[/PHP] [/LEFT] [CENTER][B][COLOR=rgb(179, 0, 89)]Dans votre dossier class[/COLOR][/B] [COLOR=rgb(102, 0, 51)], [/COLOR][B][COLOR=rgb(179, 0, 89)]dupliquer votre class categories.class.php[/COLOR][/B][COLOR=rgb(102, 0, 51)] et [/COLOR][B][COLOR=rgb(179, 0, 89)]renommer le fichier[/COLOR][/B] [B][COLOR=rgb(102, 0, 51)](celui que vous avez obtenu en dupliquant la class [B]categories.class.php[/B])[/COLOR][/B][COLOR=rgb(102, 0, 51)] en [/COLOR][B][COLOR=rgb(179, 0, 89)]creations.class.php [/COLOR][/B] [COLOR=rgb(102, 0, 51)]Ensuite ouvrez-le, [/COLOR][B][COLOR=rgb(179, 0, 89)]modifier le nom de la class[/COLOR][/B][COLOR=rgb(102, 0, 51)] (dans le fichier) : [IMG]http://image.prntscr.com/image/5754816d94cc418cb0690e06c66accbe.png[/IMG] Maintenant [/COLOR][B][COLOR=rgb(179, 0, 89)]on efface la fonction qui concerne les catégories[/COLOR][/B][COLOR=rgb(102, 0, 51)] (puisque la on est dans la class qui gères les créations) : [IMG]http://image.prntscr.com/image/7192a57556c34b2eb1fa6e2273f10d99.png[/IMG] Il y a plus cas [/COLOR][B][COLOR=rgb(179, 0, 89)]crée la fonction qui récupères les créations[/COLOR][/B] :[/CENTER] [LEFT][PHP]public function getCreations($keyGET){ if(isset($_GET[$keyGET]) && !empty($_GET[$keyGET])){ // Si le $_GET[$keyGET] existe dans l'URL et qu'il est remplit, on va vérifier que la catégorie existe bien $recupGET = $this->getPDO()->prepare("SELECT * FROM categories WHERE name_categories = ?"); $recupGET->execute(array($_GET[$keyGET])); // On regarde si on a une ligne qui a pour name_categorie = $keyGET $retourCategorie = $recupGET->rowCount(); if($retourCategorie === 1){ // Si la catégorie existe, on continue notre script et on récupère les créations comportant le nom de la catégorie $recupCreationsCategorie = $this->getPDO()->prepare("SELECT * FROM creations WHERE categorie_creations = ?"); $recupCreationsCategorie->execute(array($_GET[$keyGET])); // On regarde combien il y a de création avec le nom de la catégorie passé en $_GET (dans l'URL) $nbCreationsCategorie = $recupCreationsCategorie->rowCount(); if($nbCreationsCategorie > 0){ // Si on a au moins 1 creations dans la catégorie passé en $_GET, on l'affiche // On fait une boucle pour afficher toutes les créations comportant le nom de la categorie passé en $_GET (dans l'URL) while ($infosCreationsCategorie = $recupCreationsCategorie->fetch()) { echo "<div class='col-md-2 portfolio-item'>"; echo "<img class='img-responsive' src='{$infosCreationsCategorie['url_creations']}'>"; echo "</div>"; } } else { // SI on a aucune creations de cette catégorie, on affiche un message disant qu'il n'y aucune création dans cette catégorie echo "<div class='alert alert-danger'>Aucune création dans cette catégorie pour le moment</div>"; } } else { // Si la catégorie n'existe pas, on affiche un message et redirige au bout de X secondes echo "<div class='alert alert-danger'> <b>Cette catégorie n'existe pas !</b> <br /> Vous allez etre rediriger dans <b>3 secondes</b> . </div>"; echo "<meta http-equiv='refresh' content='3;url=index.php' />"; } } else { // Si il y a aucun $_GET ALORS $recupCreations = $this->getPDO()->query("SELECT * FROM creations"); // On regarde combien il y a de création avec le nom de la catégorie passé en $_GET (dans l'URL) $nbCreations = $recupCreations->rowCount(); if($nbCreations > 0){ while ($infosCreations = $recupCreations->fetch()) { echo "<div class='col-xs-2 portfolio-item'>"; echo "<img class='img-responsive' src='{$infosCreations['url_creations']}'>"; echo "</div>"; } } else { // SI on a aucune creations, on affiche un message disant qu'il n'y aucune création echo "<div class='alert alert-danger'>Aucune création</div>"; } } }[/PHP] [/LEFT] [CENTER][COLOR=#660033]On retourne [/COLOR][COLOR=#b30059][B]sur notre page où il y aura les catégories et les créations[/B] et [B]tout en haut du code[/B], [/COLOR][COLOR=#660033]on va inclure et instanciés nos class fraîchement crée :[/COLOR] [COLOR=#b30059][IMG]http://image.prntscr.com/image/50f263330dd9403e9abe3241ac2b7ebd.png[/IMG] [/COLOR][/CENTER] [PHP]<?php // On crée une connexion vers notre base de donnée $pdo = new PDO('mysql:host=localhost;dbname=portfolio', 'root', 'root'); // On demande a inclure notre class "categories" require('class/categories.class.php'); // On demande a inclure notre class "creations" require('class/creations.class.php'); // On instancie notre class "categories" en récupérant la connexion vers notre base de donnée $categories = new categories($pdo); // On instancie notre class "creations" en récupérant la connexion vers notre base de donnée $creations = new creations($pdo); ?>[/PHP] [CENTER][COLOR=#660033]Puis [/COLOR][B][COLOR=#b30059]là où vous voulez afficher vos boutons [/COLOR][/B][COLOR=#660033](pour filtré par catégorie) [/COLOR][B][COLOR=#b30059]et vos créations[/COLOR][/B][COLOR=#660033], il vous suffit de faire :[/COLOR][/CENTER] [LEFT][PHP]<?php /* On récupère nos boutons pour filtré par catégories * *$keyGET = le nom du $_GET Exemple : $exKeyGET = 'type'; Resultat = $_GET['type']; */ $keyGET = 'categorie'; $categories->getCategories($keyGET); // On récupère nos créations $creations->getCreations($keyGET); ?>[/PHP] [/LEFT] [CENTER][B][COLOR=#b30059]Voilà, c'est tout pour ce tutoriel ! [/COLOR] [COLOR=#666600]========================================= [SIZE=5]Résultat final[/SIZE] =========================================[/COLOR] [IMG]http://image.noelshack.com/fichiers/2016/38/1474803632-tuto-rgfr-portfolio-westiix.gif[/IMG] [/B][/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
[PHP] Système de "Portfolio" avec trie par catégorie
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut