[PHP] Système de "Portfolio" avec trie par catégorie

[Westiix]

=========================================
Introduction
=========================================
Dans ce tutoriel, je vais vous apprendre à crée un système de portfolio avec trie par catégorie (de la création de la base de donnée à la création de class PHP pour gérer le système) .

=========================================
Requis
=========================================

Pour ce tutoriel, vous aurez besoin :
- d'un éditeur de code HTML/PHP etc.. (NotePad++ peut très bien faire l'affaire, perso j'utilise

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

)
- d'une plateforme de développement WEB (

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

;

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

etc... , perso j'utilise WampServer)
- d'une base de donnée MYSQL

Pour ce tutoriel, J'ai utilisé le css de bootstrap et le template

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

=========================================
Base de donnée
=========================================
Commencé par crée notre base de donnée :
1) Rendez-vous sur votre phpMyAdmin (pour ma part localhost/phpmyadmin/) et identifiez-vous
2) Crée une nouvelle base de donnée (pour ma part je vais mettre portfolio)

3) Crée une nouvelle table et appelé la categories , avec 2 colonnes comme ci-dessous :

4) Crée une nouvelle table et appelé la creations , avec 4 colonnes comme ci-dessous :

5) Insérer plusieurs entrés (catégories) via phpMyAdmin dans la table categories

5) Insérer plusieurs entrés (creations) via phpMyAdmin dans la table creations

=========================================
Codons notre script
=========================================
1) On commence par la connexion à la base de donnée (pour le tuto, je le met tout en haut de la page, celle où il y aura les créations) :

<?php
    $pdo = new PDO('mysql:host=localhost;dbname=portfolio', 'root', 'root');
?>

2) Pour nous facilité le travail, on va se crée des class , une class qui se chargera de gérer les catégories et une class qui se chargera de gérer les créations .



Dans votre dossier class (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é categories.class.php et crée la structure de base de la class :

Dans cette class, on effectuera des requêtes à notre base de donnée donc il faut récupérer la connexion à notre base de donnée :

​

<?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;
        }

On va crée une fonction qui permettra de récupérer la connexion à PDO , celle que l'on aura stocké dans "private $PDO;" via le constructeur de la class :

​

<?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;
        }
    }

Maintenant on rentre dans le vif du sujet, on va crée une fonction qui va s'occuper de récupérer nos catégories :

/**
         * 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)
            }
            */
        }

Dans votre dossier class , dupliquer votre class categories.class.php et renommer le fichier (celui que vous avez obtenu en dupliquant la class categories.class.php) en creations.class.php

Ensuite ouvrez-le, modifier le nom de la class (dans le fichier) :

Maintenant on efface la fonction qui concerne les catégories (puisque la on est dans la class qui gères les créations) :

Il y a plus cas crée la fonction qui récupères les créations :​

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>";
                }
            }
        }

On retourne sur notre page où il y aura les catégories et les créations et tout en haut du code, on va inclure et instanciés nos class fraîchement crée :

​

<?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);
?>

Puis là où vous voulez afficher vos boutons (pour filtré par catégorie) et vos créations, il vous suffit de faire :​

<?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);
?>

Voilà, c'est tout pour ce tutoriel !

=========================================
Résultat final
=========================================

​

 

[AwH]

So PHP 5.3 @Rivals GTP

 

[Louki]

Sinon en CSS/JS c'est simple aussi

Merci du tuto, super ! Par contre, éviter de centrer les balises code :-p

 

[Westiix]

Sinon en CSS/JS c'est simple aussi

Merci du tuto, super ! Par contre, éviter de centrer les balises code ::

Merci

Oui j'ai corriger pour les balises code, je les ai toutes mises à gauche.