This document was uploaded by user and they confirmed that they have the permission to share
it. If you are author or own the copyright of this book, please report to us by using this DMCA
report form. Report DMCA
Avant de commencer Plusieurs questions doivent se poser avant de commencer, ces questions concernent en premier lieu la sécurité des données à envoyer et donc la confiance que vous allez devoir attribuer aux personnes qui vont pouvoir, modifier le site, insérer, supprimer et modifier des données. Dans le cas du site de Fiction Services, un accès par .htaccess sera suffisant si les mots de passe ce dernier sont cryptés. Nous mettrons la sécurité en place en dernier afin de ne pas avoir à valider le mot de passe à chaque nouvelle session. Sur un développement en ligne c’est par là qu’il faudra commencer. Le cas de Fiction service développé ici ne conviendra certainement pas un site communautaire, où chaque utilisateur est dûment identifié et possède des droits relatifs à son identification. Dans le cas présent chaque utilisateur “logué” pourra éditer l’ensemble du site.
Ce back-office que va t’il permettre à l’utilisateur? Dans le cas présent le cas est simple, l’utilisateur veut pouvoir mettre à jour ses pages web et le cas échéant en ajouter d’autres. Il veut pouvoir nommer ses pages pour apparaître de façon ciblée dans les moteurs de recherche. Il veut pouvoir éditer une page et revenir le lendemain pour la finir et la mettre en ligne. Il ne veut pas faire de code et aimerait un éditeur qui ressemblerait à un éditeur de texte pour éditer son site. Comment le construire? Pour l'éditeur nous allons utiliser fckeditor un éditeur gratuit simple et efficace qui remplit toutes les conditions requise. À télécharger via sourceforge. http://www.fckeditor.net/download
En ce qui concerne le contenu le plus simple est de le placer dans une base de données et de l’afficher à la demande. Ceci conviendra pour un site avec un petit trafic mais dès que le trafic augmentera la BDD risque de saturer un peu et cela pourrait engendrer un ralentissement du site. En plus des insertions dans la BDD, si l’on crée des documents html contenant uniquement le contenu de la partie document de la page, on peut y faire référence et l'afficher dans la page par un identifiant unique. include_once("pages/page0001.html"); Il va donc falloir créer une base de données et les éléments correspondants. Notre BDD se nommera fictServBDD elle contiendra les tables suivantes --------------------------------------------------------------------------------------------------fictServBDD.tabPages Champ
Définitions des champs de MySQL utilisés. type : int(100) int pour integer, signifie que ce champ ne pourra contenir que des chiffres. la valeur 100 qui suit est le nombre de caractères que peut contenir ce champ, ce champ peut donc contenir un chiffre composé de 100 caractères. type : smallint(2) smallint pour small integer, signifie que ce champ ne pourra contenir que des chiffres de 255 caractères maxi. Sa porté est toutefois réduite à 2 caractères maxi. type : tinyint(2) tinyint pour tiny integer, signifie que ce champ ne pourra contenir que des chiffres de 255 caractères maxi. Sa porté est toutefois réduite à 2 caractères maxi. type : varchar(255) varchar pour variable character field, signifie que ce champ ne pourra contenir que des séquences de 255 caractères maxi ce qui convient bien pour un chemin local. Il est donc positionné en valeur maximum à 255. type : text text pour texte, signifie que ce champ va contenir des données au format texte, MySQL va donc traiter les retours chariots comme tels dans les données. Sa quantité maximale est définie selon la doc en ligne comme étant aussi grande que possible. Son équivalent BLOB pour binary large object, ne traitera pas les données comme du texte mais comme du code. mediumtext va contenir moins de données. Interclassement : latin1_general_cs latin1_general_cs rattaché à texte, cela signifie que les données vont être stockées sous le format ISO-8859-1, le charset des pages HTML, ce qui convient parfaitement ici. Le _cs à la fin signifie que la sensibilité à la casse est activée pour ce champ. Le _ci son alter ego signifie que la sensibilité à la casse n'est pas activée. À ce propos prêtez toujours attention aux charsets des pages du site à interfacer avec la base de données. Il peut arriver des choses étranges aux données lorsque la table dans la BDD et la page n'ont pas le même charset. extra : auto_increment auto_increment rattaché à num, cela signifie qu'à chaque nouvelle insertion dans la table le champ num va contenir un numéro unique, attribué et incrémenté automatiquement. Null : oui Null : oui rattaché à visible, cela signifie qu'à chaque nouvelle insertion dans la table le champ visible devra contenir une valeur, si rien n'est spécifié la valeur par défaut a été attribuée à la valeur : 1. Dans le cas présent c'est la valeur qui va décider si une page est publiée, donc visible, ou non. On utilise habituellement les valeurs 0 pour non et 1 pour oui.
Selon l'utilitaire WAMP/easyPhp que vous utilisez vous trouverez l'URL dans le menu déroulant du démarrage rapide.
La page d'accueil de phpMyAdmin
Nous allons créer notre base de données. . Placez l'interclassement à latin1_general_cs pour la connexion MySQL et pour la nouvelle base de données. Éditez le champ nom à fictServBDD puis validez.
Si la base a été créée la requête doit s'afficher dans la page : requête SQL: CREATE DATABASE `fictServBDD` DEFAULT CHARACTER SET latin1 COLLATE latin1_general_cs;
Répétez la manipulation pour tabLiens avec un nombre de champs à 5 fictServBDD.tabLiens Champ
Type
Interclassement
Null
Extra
numLien
int(11)
Non
auto_increment
lien
text
latin1_general_cs
Non
defLien
text
latin1_general_cs
Non
titreHtm
mediumtext
latin1_general_cs
Non
chemin
varchar(255)
latin1_general_cs
Non
docVisible
smallint(2)
Non
Petit truc
Dans le cadre de gauche vous avez vos tables en liens. En cliquant sur l'icône vous accéderez au contenu de la table, quand il y en aura, en cliquant sur le texte vous accéderez à la structure de la table.
Table active : tabLiens Cliquez sur l'onglet Insérer dans la page. Dans le champ lien insérez index.php Dans le champ defLien insérez Index du site Dans le champ titreHtm insérez Index de Fiction Services Cliquez sur le bouton Exécuter. La requête doit s'afficher dans la page : Vous pouvez la copier et la coller dans un doc.php pour l'utiliser ultérieurement pour votre code PHP en remplaçant les valeurs insérées par des variables.
INSERT INTO `fictServBDD`.`tabLiens` ( `numLien` , `lien` , `defLien` `titreHtm` ) VALUES ( NULL , 'index.php' , 'Index du site', 'Index Fiction Services' ); La commande est relativement simple et se découpe en 4 sections qui fonctionnent en binôme.
Accès via php à MySQL Sauvegardez votre dossier miniSitePhp en le dupliquant ou en l’archivant (.zip, .rar, .dmg, .gzip, ...) Prenez l’habitude d’incrémenter et de sauvegarder tant que votre projet est en cours, cela vous permettra de revenir sur des phases différentes de votre projet et de son contenu. Vous aurez toujours la possibilité de faire le ménage lorsque le projet aura été mené à son terme. Créez un dossier login dans la racine du site Dans ce dossier créez un document index.php avec tous les entêtes HTML . À partir de ce document, l'utilisateur final pourra modifier une page de son site et en créer une. Nous allons d'abord nous connecter à la base de données. Les connexions vont se faire à partir de plusieurs pages nous avons donc tout intérêt à centraliser ces données dans un fichier et d'y faire appel au besoin. Créez un dossier php à la racine du site
Dans ce dossier créez un document vide connecteur.php.
Une fois nos constantes définies nous allons procéder à la connexion à la base. Nous allons ouvrir une connexion avec mysql_connect(). La syntaxe est la suivante : À la suite de : define(PASSE,"root"); $connexion = mysql_connect(SERVEUR,NOM,PASSE); // si la connexion n'a pas lieu if(!$connexion) { //on affiche un message d'erreur echo"Erreur Serveur :".SERVEUR." \n"; // et on arrête tout exit; } // si la sélection de la base n'a pas lieu if(!mysql_select_db (BASE, $connexion)) { //on affiche un message d'erreur echo"Erreur bdd :".BASE." \n"; // et on arrête tout exit; } // sinon la connexion a bien eu lieu Sauvegardez connecteur.php et revenez sur login/index.php
et insérez le code suivant après le tag :
Le document ne devrait pas produire de message en localhost.
Une fois que le connecteur est en place il va falloir utiliser cette connexion pour récupérer les données qui sont dans la base Une question d'ergonomie se pose. Pour afficher le choix des pages à modifier une liste déroulante est ce qui est de plus pratique. Cette liste déroulante ne va pas être associé à un bouton mais va envoyer automatiquement vers la page sélectionnée par le client. Pour ce faire nous allons utiliser le javaScript de DreamWeaver. Cette commande est accessible via le menu Comportements. Insérez tout d'abord un formulaire dans le haut du
Vous obtenez le code suivant
Insérez dans ce formulaire une liste via la commande liste/menu
<select name="selPage" onchange="MM_jumpMenu('parent',this,0)"> DreamWeaver a ajouté une fonction javaScript dans le head. <script type="text/JavaScript"> Il va falloir modifier un peu la liste en supprimant le selected et en attribuant une valeur numérique à chaque élément.
Il va falloir modifier également le javaScript en ajoutant aprés ".location=' une valeur pour la variable page ".location='?page= Attention à insérer ?page= après l'apostrophe mais avant les guillemets apostrophe guillemet eval(targ+".location='?page="+selObj.options Testez votre page sur localhost. On note toute fois que l'index étant sélectionné il n'est pas possible d'y accéder. Nous allons ré-écrire les données de la liste en PHP afin de pouvoir insérer la commande de sélection dans la liste. Cette commande de sélection sera celle qui correspondra à la valeur de page.
Pour utiliser cette valeur dans PHP il va falloir la récupérer : $page = $_GET['page'];
Au final nous allons récupérer les valeurs de la liste dans la base, donc dans un tableau. En créant un tableau dans la page et en y faisant référence nous allons pouvoir tester notre liste. Création du tableau : $tab_select = array("Faîtes un choix svp","One","Two","Three"); Utilisation de la boucle foreach foreach($tab_select as $elementListe){ //test echo "$elementListe "; } Dans cette liste nous avons besoin des valeurs texte pour le client et des valeurs numériques pour la variable $page. En utilisant une variable numérique, par exemple $n, nous allons à la fois pouvoir inscrire une valeur numérique et faire appel à cette valeur numérique comme index du tableau $elementListe. $n = 0; $selPages = ""; foreach($tab_select as $elementListe){ $selPages.= " \n"; $n++; } Le $n est incrémenté après l'attribution à la variable du contenu. La variable $selPages va être insérée dans la liste
Pour ce faire nous allons tester si $page est équivalente à $n. Si c'est le cas alors la valeur selected="selected" va être insérée dans l'élément \n"; }else{ $selPages.="\n"; } $n++; } Testez en localhost. La liste doit être sélectionnée sur la page active.
Une fois que cela fonctionne nous allons pouvoir récupérer les valeurs dans la base et les remplacer par nos valeurs en dur. Notez que la récupération des données va se servir de la valeur $page, elle devra donc être insérée après la déclaration de $page. Par contre la liste va utiliser les données issues de la récupération. La récupération va donc devoir être placée entre la déclaration de la variable $page et la fonction foreach.
La fonction mysql_query(); va lancer la requête en utilisant $connexion à cette fonction il faut associer une commande mySQL Nous voulons sélectionner dans la base tous les éléments de la table tabLiens mysql_query("SELECT * FROM tabLiens", $connexion); En associant cette requête à une variable nous pourrons y faire référence, $fetch_tabLiens = mysql_query("SELECT * FROM tabLiens", $connexion); En associant cette référence à une variable nous pourrons stocker les valeurs dans un tableau dans la page php avec mysql_fetch_object $recupere = mysql_fetch_object ($fetch_tabLiens); Stockage des données dans un nouveau tableau $tab_defLien[] $tab_defLien[]=$recupere->defLien;
Utilisation de while dans la récupération de données : if($fetch_tabLiens){ while ($recupere = mysql_fetch_object ($fetch_tabLiens)) { $tab_defLien[]=$recupere->defLien; } } print_r($tab_defLien); Pour afficher les données individuellement c'est un echo avec un index que nous allons utiliser. echo $tab_defLien[0]." "; //Va afficher la valeur du champ defLien 1;
echo $tab_defLien[1]." "; //Va afficher la valeur du champ defLien 2;
echo $tab_defLien[2]; //Va afficher la valeur du champ
defLien 3;
En testant la valeur d'une variable $page nous allons pouvoir savoir quel est le document actif. $page = $_GET['page']; Cette variable doit être supérieure à zéro puisque notre premier élément de numLien est égal à 1. if($page > 0){ $fetch_tabLiens = mysql_query("SELECT * FROM tabLiens", $connexion); if($fetch_tabLiens){ while ($recupere = mysql_fetch_object ($fetch_tabLiens)) { $tab_defLien[]=$recupere->defLien; } } }
Une fois que les données sont récupérées nous allons mettre à jour la liste : $n=0; $selPages = ""; foreach($tab_defLien as $elementListe){ if($n == $page ){ $selPages .= ""; }else{ $selPages.= " "; } $n++; } Le document avec le php et le formulaire :
}
Nous allons maintenant récupérer les valeurs des champs doc de la table tabPages sous forme de données. Ces données vont servir pour l'éditeur. La commande pour cela sera : mysql_db_query mysql_db_query(BASE," REQUÊTE") où REQUÊTE est une chaîne de caractères. Sélectionner tout de la table où num est égal à 1 "SELECT * FROM
`tabPages` WHERE `num` = 1"
Ce qui avec la variable $page donnera : SELECT * FROM
`tabPages` WHERE `num` = $page"
Comme toujours cette requête va être stockée dans une variable $req_tabPages =mysql_db_query(BASE,"SELECT * FROM
`tabPages` WHERE `num` = $page");
et nous allons associer cette variable à une requête MySQL mysql_fetch_row va retourner une ligne de résultat MySQL sous la forme d'un tableau numérique de chaînes qui correspond à la ligne récupérée, ou FALSE s'il n'y a plus de lignes. La ligne est retournée sous la forme d'un tableau. Chaque colonne est enregistrée sous la forme d'un tableau commençant à la position 0.
$fetch_tabPages = mysql_fetch_row($req_tabPages); En testant si $page existe cela donnera : if($page > 0){ $req_tabPages= mysql_db_query(BASE,"SELECT * FROM `tabPages` WHERE `num` = $page");
$fetch_tabPages = mysql_fetch_row($req_tabPages); } Une dernière chose à faire va être clore la connexion à la base pour libérer les ressources. Cette fonction se place bien entendu à la fin de toute requête. mysql_close($connexion); La récupération des données est en place dans le doc index.php
Fckeditor Fckeditor est un utilitaire gratuit et puissant et dont l'intégration se fait facilement. La version utilisée pour ce document ne correspond pas tout à fait à la version originale puisque certaines options ont été modifiées, conformément à la documentation. Nous nous attarderons pas sur la mise en place de l'éditeur toutefois les modifications apportées sont répertoriées et donc accessibles dans un document _doc-modifs_sjcpi.txt placé dans le dossier fckeditor. Fckeditor est placé dans un formulaire
Voilà pour l'éditeur. En testant cette page en localhost vous devriez pouvoir visualiser l'ensemble.
Envoi des données de l'éditeur Pour envoyer les données de l'éditeur vers le champ doc de la table tabPages nous allons éditer un nouveau document strictement php, CAD qui ne contiendra rien d'autre que du php. Ce document apparaîtra dans l'action du formulaire formEdit du document index.php. sous le nom de envoiData.php le document envoiData.php renverra vers le doc index.php avec les données mises à jour. Le document envoiData.php va utiliser les valeurs livrées avec fckeditor, et des personnalisations pour notre site. Ce doc étant réservé à l'admin il sera placé dans le dossier login. Créez un nouveau document et enregistrez le en tant que envoiData.php.
//données pour le site require_once("../php/connecteur.php"); $page = $_REQUEST['page']; // Données fckeditor : voir doc fckeditor/_docEd_sjcpi.php $URL = ''; if ( isset( $_POST ) ) $postArray = &$_POST ; else $postArray = &$HTTP_POST_VARS ; foreach ( $postArray as $sForm => $value ) { if ( get_magic_quotes_gpc() ) $postedValue =
La mise à jour de la table concernée se fait avec UPDATE sur les valeurs de $URL_Bdd C'est une requête mySQL qui est construite comme les autres. la table mise à jour est doc et le choix se fait via la valeur de num donc $page $requete = mysql_db_query(BASE,"UPDATE `fictServBDD`.`tabPages` SET `doc` = '$URL_Bdd' WHERE `tabPages`.`num` =$page LIMIT 1 "); et on ferme la connexion mysql_close($connexion);
Afin d'éviter que ce document soit appelé alors que $page est vide ou que sa valeur ne contient pas un nombre nous allons intégrer toute la séquence dans un if qui va tester si $page est un nombre.
insérez au début du document if(number_format($page)){ et insérez } en fin de document. La mise à jour de vos données devrait fonctionner. Vous remarquerez que le document appelé via le formulaire devient le document actif, ce qui n'est pas très élégant. Une possibilité serait d'insérer un lien de retour vers l'index. Une autre possibilité, plus élégante, va être de ré-appeler le document d'index via les entêtes HTPP header. PHP permet de substituer un document à un autre via header. Le code statut HTTP doit toujours être le premier à être envoyé au client, il doit donc être placé en tête de document. Si des valeurs ont déjà été transmises via htpp, apache va générer un message d'erreur.
Le type d'appel header que nous allons utiliser est Location Location demande une URI absolue comme argument de "Location:", pour générer cette URI nous allons utiliser les variables du serveur à notre disposition en les incluant dans des variables. $host=$_SERVER['HTTP_HOST']; Ensuite il faut finir cette chaîne avec la valeur du document à atteindre et tant qu'à faire la valeur de la page en cours. Cette valeur va s'insérer dans la condition de if(number_format($page))afin de ne générer la page de retour avec une valeur numérique pour $page. $extra="login/index.php?page=$page"; Il ne reste plus qu'à faire appel à header $host=$_SERVER['HTTP_HOST']; $extra="login/index.php?page=$page"; header ("Location: http://$host/$extra"); Pour tester ce document vous devrez y faire appel via index.php dans login en cliquant sur l'icône sauvegarder. Le document envoiData.php $value ) { if ( get_magic_quotes_gpc() ) $postedValue = stripslashes( $value ) ; else $postedValue = $value ; $URL.=$postedValue; } $extra="login/index.php?page=$page"; $URL_Bdd = addslashes( $URL) ; $requete = mysql_db_query(BASE,"UPDATE `fictServBDD`.`tabPages` SET `doc` = '$URL_Bdd' WHERE `tabPages`.`num` =$page LIMIT 1 ");
Il est aussi possible d'insérer des messages personnalisés en cas d'erreur. Ces messages seront envoyés vers index.php qui les traitera. Au lieu d'utiliser un if() nous allons utiliser un switch qui fonctionne un peu de la même façon mais est plus pratique à utiliser Pour tester la valeur numérique d'une variable $test $test = 2; switch ($test){ case 1: echo "test = 1"; break; case 2: echo "test = 2"; break; case 3: echo "test = 3"; break; }
Il peut aussi avoir une valeur par défaut. $test1 = "unix"; switch ($test1){ case "apple": echo "test = apple"; break; case "linux": echo "test = linux"; break; case "windows": echo "test = windows"; break; default: echo "test1 n'est pas apple, pas linux, pas windows."; }
Retour au document index.php le switch pour les messages d'erreur switch ($erreur){ case 1: echo $erreurRetour = "
Les données n'ont pas été mises à jour. Erreur de base de données.
Modifier les documents du site Nous avons tout ce qu'il faut pour mettre à jour le contenu des pages mais ce contenu n'est pas encore répercuté sur les pages du site. Le plus simple va être d'insérer une valeur numérique dans chaque page. Cette valeur va correspondre à l'index de la table tabPages Avec cette valeur nous pourrons faire appel à des données particulières dans la table. Le PHP devra être placé avant l'élément HTML xxx afin de pouvoir l'utiliser. Ouvrez le document index.php placé à la racine du site. Ce document va avoir l'identifiant 1 appelé sous le nom de $numPage. Comme nous allons faire des appels à la BDD nous avons besoin de notre connecteur. Il suffit de faire un appel vers la base pour récupérer les valeurs dont nous avons besoin. Cet appel va être ciblé sur le seul contenu de doc correspondant à l'index num dans la table tabPages.
`tabPages` where
?>
Pour finir placez vous dans le contenu du index.php et remplacez le contenu par
Avant d'appliquer cette modification à l'ensemble des pages du site nous allons centraliser l'action dans un document, ce qui facilitera les modifications ultérieures. Créez un nouveau document php vide de toute donnée et enregistrez le dans le dossier inclus en tant que contenu.php . revenez dans index.php et coupez toute la requête pour la coller dans contenu.php. contenu.php ne contient que ces données ci :
`tabPages` where
Dans index.php il suffit de faire un include_once vers le contenu.php . La variable $numPage doit être déclarée avant l'inclusion puisqu'elle sert dans le document inclus. Il suffit donc de placer ce code dans toutes les pages du site sans omettre l'affichage. Pour les documents contact et demandes seules les parties qui ne sont pas sous forme de formulaire vont être éditables. Les formulaires doivent rester en dur dans la page. Les index et noms des documents
Insertions des titres personnalisés Chaque page devrait avoir un titre modifiable, pour ce faire nous allons ajouter la requête vers la base dans le document contenu.php et nous allons remplacer le titre de chaque document par un affichage en php issu de la BDD. contenu.php $req_titre = mysql_db_query(BASE,"SELECT `titreHtm` FROM `tabLiens` WHERE `numLien`=$numPage"); $req_tabTitre = mysql_fetch_row($req_titre); Tous les 5 documents du site sont modifiés avec le titre dynamique :
echo $req_tabTitre[0]; ?>
Le site est en place, toutefois d'autres éléments devraient pouvoir être modifiés comme le titre HTML des documents et les intitulés des liens. De plus on devrait pouvoir rajouter des pages au site.