Fardeen GHULAM Parrain de la mafia multimédia

19Jan/07127

Tutoriel administration MySQL PHP rapide et facile

phpmyedit 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)

tutoriel_admin_phpmyedit_resultat_final

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.

mcd_galerie_ajax

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 :

arbo_tutoriel_phpmyedit

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

phpmyedit_admin_premiere_etape

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 )

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 :

admin_phpmyedit_ecran1

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 :

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.

resultat_final_galerie_ajax_phpmyedit

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' :D

detente apres phpmyedit

Comments (127) Trackbacks (2)
  1. @Fardeen,

    Malheureusement cela ne change rien :( Je ne comprends pas, c’est comme si il n’y avait aucune action sur le bouton.. alors que si..
    mais maintenant que je regarde dans la source, je n’ai pas d’action au formulaire… le problème peut venir de là..
    humm.. c’est ennuyant !

  2. Hello,
    Bravo pour le tuto.
    Peux-tu me dire, ne connaissant pas PHP, comment on peut avoir l’option preview et next de slimbox.
    Merci,
    Ed

  3. salut tt monde,
    non d un dummies que je suis!!!
    j ai le meme probleme que sylvain

  4. Bonsoir,
    Excellent tutoriel. J’aurais aimé cependant quelques petites précisions supplementaires. Je souhaiterais l’adapter pour pouvoir uploader differents types de fichiers( pdf, doc …). Que dois- je modifier?
    De plus j’ai tester, et je n’arrive malheureusement pas à creer le liens vers le fichier je ne souhaite pas avoir de miniatures.
    L’emplacement ou devrai se trouver le liens reste vide.
    Si quelqu’un a une idée.

  5. bonjour,
    Idem tout le monde: très bon tuto. Par contre je ne comprends pas le code du fichier fonction_divers.php. Il y a des balise fermantes qui ne sont pas ouvertes.
    Les accolades pour les if et les point d’intérogation des php. Mais je ne suis pas du tout un spécialiset du php. Mais ca me met une erreur sur ce fichier.
    si vous avez une info sur ce sujet, merci

  6. toujours pas d’astuces pour faire des checkbox a la place de liste déroulante quand on lit 2 tables entre elles ??
    Ca me serait grandement utile si quelqu’un à la solution je suis prenneur, MERCI

  7. juste comme ça pour sylvain ( et pour les autres s’ils veulent) il est possible de passer par PhpMyEdit moyennant quelques changements et ça fonctionne plutot pas mal…
    J’ai juste un probleme en uploadant des images avec des espaces, le nom de l’image uploadé sur le serveur est bien changé en “_” mais dans la base de donnée l’espace reste dans le champ fichier ce qui pose un léger problème pour l’effet lightbox et autre lecture de miniature… (ce pb se règle d’ailleurs manuellement en changeant le nom dans le gestionnaire de photo)…

    Voila

  8. je parlais de PhpMyEdit derniere version bien sur (dsl g appuyé trop vite) :-D

  9. Bonjour,

    j’ai le même problème que Sylvain ci-dessus. Je n’arrive pas à utiliser la version modifiée de PHPMyEdit. J’arrive bien à utiliser la dernière version officielle mais je n’ai pas l’upload d’images.

    Est-ce qu’on pourrait (et je m’agenouille en ce moment devant mon écran) avoir un petit tutoriel pour nous expliquer comment amender la version officielle de PHPMyEdit pour qu’elle soit comme la tienne ?

    bien cordialement,

    Patrice

  10. @Patrice : Pourquoi tu veux la derniere version ? QU’apporte t-elle de plus ? Si la réponse est rien, tu peux utiliser la mienne alors :)

  11. Même problème que Sylvain (9 avril) avec la version modifiée…
    J’essaye la version officielle comme Patrice.
    Merci pour ce super tuto!

  12. Bonjour,
    Pas très éclairée en la matière, je souhaiterais avoir un tableau sur lequel il y aurait différents champs (jusque là tout va bien !) de différentes tables (c’est là que ça coince) d’une même base de données. De plus, il me faudrait un formulaire d’entrée d’information pour ce même tableau.Quelqu’un aurait il l’amabilité de m’aider ?
    En vous souhaitant une excellente journée
    Sandra

  13. Bonjour,
    Je suis ton tutoriel et j’ai un probleme quand j’arrive enfin a “premier test”, la page s’affiche , mais quand je veux entrer une nouvelle categorie, je reste bloque sur la meme page.
    Pourrais-tu m’eclairer sur se mystere sachant que mon niveau de php n’est pas tres bon (j’apprends!).
    Merci
    fred

  14. salut,

    j’essaie de faire ton tuto pour apprendre, malheureusement je suis bloqué au début… je crée l’arborescence comme tu le dis mais je l’ai faite depuis le bureau (je n’ai pas vu que tu dises ou la faire… si??)
    et lorsque je rentre http://TON SERVEUR/galerie_ajax/lib/phpMyEdit/phpMyEditSetup.php dans firefox, il ne trouve rien… d’ailleur c’est qui ce “ton serveur”??? et comment pourrait il savoir ou j’ai mis galerie_ajax/lib/phpMyEdit
    Je suis vraiment décu d’ etre bloqué; si tu peux me donner des explications… merci d’avance

  15. re-salut,

    j’ai essayer de mettre mon arborescence dans le rep “www” de wamp et de mettre le nom de serveur donné par phpMyadmin; j’ai eu un truc encourageant demandant de me logguer sur ma base de donnée mySql mais le bouton submit reste inactif… je c meme pas si cette fenetre est celle que je suis supposé avoir… :-(

    re’merci, flo

  16. Bonjour,

    Je viens de lire ton tuto vraiment bien fait et j’ai commencé à le mettre en place…
    Le hic, je travaille avec wamp et quand je veux me connecter a la base c’est impossible, rien ne se passe quand je clique sur submit … (j’utilise pourtant wamp sans mot de passe)
    L’adresse de mon fichier:
    http://localhost/galerie_ajax/lib/phpMyEdit/phpMyEditSetup.php

    En esperant que tu puisses m’aider.

    Merci d’avance
    Bérenger.

  17. bricoleur du dimanche, ton truc marche pas, comme la personne d’avant le precise, le clic sur le bouton submit ne donne rien

  18. bonjour
    apparemment le lien de téléchargement ne fonctionne pas
    http:///fardeen.biz/wp-content/uploads/tutoriel/galerie_ajax/phpMyEdit_fardeen_version.zip
    cordialement
    bravo pour votre boulot !
    francois

  19. Nice tout est parfait, sauf que j’ai acheter PHP Multi Form Generator (MFG), la redimension des images et des miniatures et parfaits, sauf qu’il n’ajoute pas l’image dans la db

    Merci de m’aider

  20. Super le Tuto
    mais au moment de phpmyedit.php rien ne se passe !!!!! il n’arrive a joindre la base !!! rien ne se passe

  21. Salut,
    Je partis de ton tuto pour faire l’admin de mon site. La seule différence au niveau de l’upload d’images, moi je voudrais uploader des fichiers PDF. J’ai donc utilisé cette classe de http://www.verot.net/php_class_upload.htm. Et voici le contenu de mon fichier triggers/uploader.php

    uploaded) {

    // yes, the file is on the server
    // now, we start the upload ‘process’. That is, to copy the uploaded file
    // from its temporary location to the wanted location
    // It could be something like $handle->Process(‘/home/www/my_uploads/’);
    $handle->Process(‘../../../upload/’);

    // we check if everything went OK
    if ($handle->processed) {
    // everything was fine !
    echo ”;
    echo ‘ file uploaded with success’;
    echo ‘ ‘ . round(filesize($handle->file_dst_pathname)/256)/4 . ‘KB’;
    echo ‘ link to the file just uploaded: file_dst_name . ‘”>’ . $handle->file_dst_name . ‘‘;
    echo ”;
    } else {
    // one error occured
    echo ”;
    echo ‘ file not uploaded to the wanted location’;
    echo ‘ Error: ‘ . $handle->error . ”;
    echo ”;
    }
    }
    ?>
    D’où peut provenir mon erreur, car mon fichier n’est pas uploadé.

    meilleures salutations

    • Verifie que cette fonction est bien appelée . Je crois me souvenir qu’il y avait un que c’etait un .js qui faisait ca.

      Bonne continuation sur rue89 :)

  22. super le tuto mais pour moi les noms des images ne s’enregistre pas dans la base et en plus quand je veux modifier les champ disparaissent !!!!
    moyen moyen !!!!!
    quelqu’un peut m’aider

  23. clair net et précis ce n’ est pas si souvent et en plus avec humour

    follow lke that!!!

  24. il y a une erreur qui se trouve ici :
    /////////////////////////
    02 //pr admin
    03 /////////////////////////
    04 function haut_page($titre) {
    05
    06 global $tab_menu ;//pr recup du fichier config
    07
    08 ?>
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20 //pour afficher les onglets
    21 foreach ($tab_menu as $k => $v) { if(strstr($_SERVER['SCRIPT_FILENAME'],$k))
    22 $current = “current”; //si c l’onglet actuel
    23 else
    24 $current = “”;echo ”
    25 $v
    26 “;
    27 }
    28
    29 ?>
    30 }
    31
    32 function bas_page() {
    33
    34 ?>
    35
    36 }

    dans mon navigateur j’ai cette message :
    Parse error: parse error in C:\wamp\www\galerie_ajax\lib\fonctions_divers.php on line 38
    si quelqu’un peut m’aide
    merci d’avance

  25. C’est un petit tutorial sympathique avec de belles photos et qui permet de se lancer. Merci pour ces efforts. Après comme toute mise en oeuvre il faut chercher un peu, c’est comme un puzzle système/php/mysql/…

  26. Bonjour,
    super tuto, j’ai un soucis de timeout, comment je peux le gérer ?


Leave a comment