Tutoriel administration MySQL PHP rapide et facile

Bonjour tout le monde ! Aujourd'hui est un grand jour car vous allez enfin apprendre comment faire une administration de base de données MySQL en PHP complètement adaptable à vos besoin très facilement et rapidement grâce à PHPMyEdit.

Vous pourrez ainsi administrer votre gallerie AJAX ou encore votre application Google Map que l'on a abordé dans les derniers tutoriels.

Allez hop , on clique sur la suite !

C'est quoi PHPMyEdit ?

PHPMyEdit génère du code PHP pour afficher/éditer des tables MySQL en HTML. Il inclut de nombreuses options de manipulations de base de données (enregistrer,ajouter,voir,copier,supprimer), ordre d'affichage, filtres, liaisons de tables et bien plus.

Mais nous allons voir tout cela en détail grâce à un exemple concret.

Un exemple concret

Alors pour notre exemple, autant faire un truc utile, nous allons lier la galerie ajax à une base de donnée que nous allons créer ensemble grâce à l'outil SQL Designer.

On va faire simple pour notre galerie : chaque photo aura une description,un libellé, un fichier associé et fera partie d'une catégorie.

Tu peux faire mumuse avec l'admin en cliquant sur l'image ci dessous. (j'ai désactivé la suppression pour pas que tu fasses trop le fou)

Conception de la base de donnée

On va commencer par créer notre mini MCD (Modèle Conceptuel de Données) avec l'outil SQL Designer en ligne afin d'avoir le code SQL nécessaire à la création de la base.

Maintenant qu'on a notre MCD de fait, on va récupérer le code SQL (=Langage de requêtes structuré) qui nous interesse en faisant Import -> Generate MySQL Script. Mais comme je sais que vous êtes des flemmards voulez gagnez du temps, je vous refile direct le code SQL. Oui je sais je suis un peu trop sympa.

CREATE TABLE `photo` (
`id` INTEGER auto_increment ,
`libelle` VARCHAR (100)  default '',
`description` MEDIUMTEXT default '',
`fichier` VARCHAR (255)  NOT NULL default '',
`cat_id_categorie` INTEGER default '0',
PRIMARY KEY (`id`)
);

CREATE TABLE `categorie` (
`cat_id` INTEGER auto_increment ,
`cat_libelle` VARCHAR (30)  default '',
PRIMARY KEY (`cat_id`)
);

Création de la base de donnée

<< Génial on a un code SQL ! Merci beaucoup ! >>

Et bien non ce n'est pas terminé, petit padawan, maintenant il te faut créer cette base de donnée sur ton serveur/hébergeur.

Si tu travailles en local, je te conseille d'installer WAMP. C'est un serveur PHP 5 / MySQL que je trouve meilleur que EasyPHP.

Pour cela on va aller dans phpMyAdmin , on va créer notre base galerie_ajax puis on clique sur l'onglet SQL et on balance notre super code SQL et on clique sur éxécuter.

Et voilà, notre base est créee Passons maintenant à PHPMyEdit.

Installation de PHPMyEdit

On va commencer par télécharger PHPMyEdit amélioré (c'est une version modifiée par mes soins qui inclus l'upload d'images et quelqu'autres améliorations, ainsi que quelques traductions) puis on va le décompresser dans un repertoire galerie_ajax dans le repertoire PHPMyEdit .
Libre à vous de prendre la version officielle plus récente mais qui n'apporte pas vraiment de nouveautés. (et qui ne vous permettra pas de bien suivre ce tuto)

Création de l'arborescence

On va faire un truc propre, ca va être à peine plus long mais ca nous permettra par la suite de gagner plus de temps.

Voila à quoi de ressembler notre arborescence :

Dans admin, se trouveront les fichiers générés, vérifier donc que le dossier admin est bien en CHMOD 777, c'est à dire avec les droits d'écriture.

On décompresse ensuite phpMyEdit dans le repertoire lib(pour librairie).

Et on fait un repertoire galerie dans lequel nous mettrons les fichiers de notre galerie.

Enfin un repertoire upload qui recevra les images.

Création de l'administration

Nous allons maintenant générer en toute simplicité les fichiers nécessaires à notre panneau d'administration.

Tu ouvres ensuite ton navigateur et tu te rend à cette adresse:

http://TON SERVEUR/galerie_ajax/lib/phpMyEdit/phpMyEditSetup.php

Tu suis ensuite les étapes en remplissant les formulaires:

• se connecter à la base (si tu utilise WAMP en local : host : localhost , user : root , pas de mot de passe , base : galerie_ajax , table : categorie)
• selection de la base qu'on a créee précedemment (normalement galerie_ajax)
• on selectionne la table categorie
• tu spécifies quel champ est la clé primaire (=identifiant), dans notre cas c'est cat_id
• on laisse le nom par défaut (categorie)

Et voilà , votre fichier categorie.php est crée automatiquement dans le repertoire admin. Pour le voir il suffit de se rendre à cette adresse:

http://TON SERVEUR/galerie_ajax/admin/categorie.php

Ca ne marche pas pour l'instant mais c'est normal, nous devons d'abord crée nos fichiers de config et mise en page.

Il faut refaire ensuite la même manip avec cette fois ci comme nom de table photo afin de générer photo.php .

Création des fichiers de config et de mise en page

Nous allons crée 2 fichiers dans le repertoire lib .

Premièrement le fichier lib/config.php permettant la connexion à la base de donnée :

// Informations de connexion pr phpmyedit
$opts['hn'] = "localhost"; //ou la base est situee
$opts['un'] = "root"; // utilisateur
$opts['pw'] = ""; //mot de passe de la BDD
$opts['db'] = "galerie_ajax"; //nom BDD

//pr menu onglet
$tab_menu = ARRAY( 'categorie.php' => "Categorie" , 'photo.php' => "Photo" );

//connexion a la base de donnée
$db=MYSQL_CONNECT($opts['hn'],$opts['un'],$opts['pw']) or die("Impossible de se connecter à la base de données");
mysql_select_db($opts['db'],$db) or die("Impossible de selectionner la base") ;

Deuxiemement le fichier lib/fonctions_divers.php dans lequel nous allons déclarer 2 fonctions définissant le haut et le bas de chaque page de l'administration :

/////////////////////////
//pr admin
/////////////////////////
function haut_page($titre) {

global $tab_menu ;//pr recup du fichier config

?>

<!--specifique et necessaire  a l'upload de fichier-->
<script src="../lib/phpMyEdit/scripts/fileupload.js" type="text/javascript"></script>

<p id="tabs6"> </p>

<ul> //pour afficher les onglets
foreach ($tab_menu as $k => $v) {      					if(strstr($_SERVER['SCRIPT_FILENAME'],$k))
$current = "current"; //si c l'onglet actuel
else
$current = "";echo "
<li id="\"><a href="http://fardeen.biz/wp-admin/%5C%22$k%5C%22"><span>$v</span></a></li>
";
}

?></ul>
}

function bas_page() {

?>

}

Enfin tout ce qui concerne la mise en page et le graphisme est dans phpMyEdit/css/admin.css.

Premiers tests

Nous pouvons enfin voir un début de résultat qui nous a demandé des efforts surhumains en se rendant à cette adresse :

http://TON SERVEUR/galerie_ajax/admin/categorie.php

Tu peux maintenant ajouter, éditer et supprimer toutes tes catégories. Tu peux meme rechercher ! Et ce sans te galérer 4 heures (pour le menu en onglets, j'ai utilisé CSS tab designer )

Update 4 ans plus tard...

Pour passer la 1ère étape de configuration (c.à.d. quand on clique dans Submit et qu’il ne se passe rien), il faut remplacer dans le fichier phpMyEditSetup.php :
* $HTTP_POST_VARS par $_POST
* $HTTP_SERVER_VARS par $_SERVER

On va enregistrer 2 catégories (moi j'ai mis blonde et brune).

Personnalisation et options de PHPMyEdit

Comme on peut le voir dans la documentation de phpMyEdit, celui ci possède une pléthore d'options mais nous n'aborderons que les principales, je vous laisse le plaisir de vous documenter un peu pour le reste

Lier 2 tables

Bon alors quand on veut ajouter une photo , il faut rentrer la valeur de l'id de la catégorie à la main :

Pas très pratique... Nous allons donc remédier à ce problème.

On va éditer notre fichier photo.php et on va créer une liaison entre ce champ et la table categorie en modifiant légerement notre code comme suit:

//pr clé étrangere
//quel table en liaison
$opts['fdd']['cat_id_categorie']['values']['table'] = 'categorie';
//quel champ identifiant
$opts['fdd']['cat_id_categorie']['values']['column'] = 'cat_id';
//quel champ afficher pour le libelle
$opts['fdd']['cat_id_categorie']['values']['description'] = 'cat_libelle';
/*
//On peut même spécifier plus en détail ce qu'il y aura dans la liste Déroulante , ex : id.libelle
$opts['fdd']['cat_id_categorie']['values']['description']['columns'][0] = 'cat_id';
$opts['fdd']['cat_id_categorie']['values']['description']['columns'][1] = 'cat_libelle';
$opts['fdd']['cat_id_categorie']['values']['description']['divs'][0] = '.';  //caractère separateur
*/

Vous pouvez vérifier le résultat de photo.php.

Upload de fichier , création des miniatures et trigger

Pour le fichier, on voit que c'est un simple champ texte. On va donc le transformer en champ 'Parcourir...' afin de pouvoir selectionnez une image et l'envoyer sur le serveur. On en profitera également pour créer des miniatures de l'image envoyée en 2 formats, grâce à l'excellente classe PHP phpThumb, qui permet de générer des miniatures avec un choix d'options impressionnants. (J'ai intégré phpThumb dans cette version modifiée de phpMyEdit donc ca nous prendra une ligne de code pour la génération de miniatures )

//options du champ fichier
$opts['fdd']['fichier'] = array(
'name'     => 'Fichier',
'select'   => 'T',
'maxlen'   => 255,
'required' => false, //pr eviter erreur JS
'sort'     => true,
'input'      => 'F', //type fichier
'imagepath'  => "../upload/", //on definit le chemin ou sera mis l'image
'URL'        => '../upload/$key.$value', //permet de créer le lien sur le fichier , lorsqu'on regarde la liste des enregistrement, ($key permet d'avoir un nom de fichier unique)
'URLtarget'  => '_blank', //spécifie que ca l'ouvre ds une autre page,
'thumb_width' => array(100, 320), //on va créer 2 miniatures , dans 2 tailles differentes
'options'    => 'ACPVDFL',
'size|ACP'   => 60,
'help' => 'Ne pas mettre des photos trop cochonnes.  JPG uniquement.',
'sqlw'       => 'TRIM("$val_as")'
);

//TRIGGER = declencheur
//pr upload apres l'insertion
$opts['triggers']['insert']['after'] = 'triggers/uploader.php';
//ou avant la modification
$opts['triggers']['update']['before'] = 'triggers/uploader.php';
/*
on peut lancer un fichier avant un update par ex
$opts['triggers']['update']['before'] = 'action.php';
// Apres avoir annulé un ajout ou copie
$opts['triggers']['insert']['cancel'] = 'action.php';
//liste de declencheur
$opts['triggers']['update']['before'][1] = 'deuxieme_action.php';
$opts['triggers']['update']['before'][0] = 'premiere_action.php'
Plein d'autres possibilités dans la doc > http://platon.sk/projects/doc.php/phpMyEdit/html/configuration.triggers.html
*/

On obtient :

Et TADA! vous avez une administration fonctionnelle !

Les autres possibilités de PHPMyEdit

Le reste des joyeusetés je vous laisse le découvrir dans la documentation. Vous y découvrerez entres autres :

• les options générales qui vous permettent par exemple de logger les actions des utilisateurs, les CSS, les permissions...
• détail complet de toutes les options disponibles pour un champ
• les extensions disponibles pour PHPMyEdit, comme un calendrier, un editeur plus évolué ...
• une grande liste d'exemples d'utilisation
• et plein d'autres infos utiles

Liaison de la base de données avec la galerie AJAX

Afin de ne pas trop surcharger ce tutoriel et parcque j'ai la flemme pour ne pas trop s'éloigner du thème principal qui est la création d'une administration rapide, fonctionnelle et puissante , je ne détaillerai pas ici pour la liaison avec notre galerie AJAX que nous avions vu avec Mootools mais les fichiers site/galerie_ajax.php et site/recuperer_photo.php sont assez bien commentés donc je te laisse le loisir de voir les quelques changements que j'ai apporté pour lier la galerie à la base de données.

Et tu peux voir le résultat de notre galerie lié à notre base de données (dans l'idéal il faudrait des sous catégories mais bon c'est pas l'objectif de notre tuto) en cliquant sur l'image ci-dessous.

Conclusion

Comme je suis super sympa , je vous file une archive qui contient tout ce qu'on vient de voir, y a plus qu'a télécharger, décompresser et tester.

Voila , phpMyEdit n'a plus de secret pour vous, j'espère que ce tutoriel vous a plu, comme d'hab si vous avez remarques, questions, faites pas vos timides et lachez vos com'