Créer son site web DEUST TMIC
Plan Comment organiser son site Passer des paramètres en PHP Inserer du code javscript (exemple de menu) Mettre en place un WYSIWYG Editor Construire une interface de mise à jour
Comment organiser son site Son efficacité est aussi liée à son organisation interne (sa structure). Faites un schéma de la structure de votre site AVANT de commencer à réaliser les pages (arborescence des pages) sur un papier. Essayez d'imaginer des trajets type de visiteur dans votre site selon leur profil, leurs attentes Organisez votre site autour de quelques grands thèmes Utilisez des menus et sous menus spécifiques pour chaque grand thème Prenez le temps de réfléchir au contenu et aux libellés de chaque menu (mot couts et synthétques) N'hésitez pas a morceller vos contenus: un site avec des pages courtes est plus agréable a parcourir Avec votre logiciel graphique habituel (Paint, Gimp, PsP, Photoshop ...) redimentionnez et optimisez les images au format nécessaire. Préparer le référencement, le paramétrage d'une page (titre, description etc) Les polices avec sérif (comme le Times Roman) sont peu lisibles, Utilisez de préférences les polices "standard" du web: Arial, Verdana, Tahoma, Sans-Serif ...
Comment organiser son site Une bonne organisation pour une maintenance efficace : Penser à organiser ses fichiers
Passage de paramètres en PHP il est possible en PHP de passer des variables de différentes manières formulaire, session,cookies et également par l’URL : <?php // ceci est un exemple de passage de paramètres en php echo " <a href ='passage_parametre.php?num=1'>mademoiselle</a> <a href ='passage_parametre.php?num=2'>madame</a> <a href ='passage_parametre.php?num=3'>monsieur</a> "; if (isset ($_GET['num'])) { $num = ($_GET['num']); echo $num; } ?> attention le code est différent en fonction de la variable register_globals (par default à off)
Etape 1 : Inserer un menu javscript Utilisation du fichier menu.js <?php echo " <html> <head> <script language='javascript' src='menu.js'> </script> <style> <!-- .itemBorder { border: 3px solid gray } .itemText { text-decoration: none; color: #CC0000; font: 12px Arial; font-weight:Bold} .crazyBorder { border: 2px outset #FF6600 } .crazyText { text-decoration: none; color: #003366; font: 12px Arial} a { color: black; font-size: 10pt; font-family: Arial; text-decoration: none } --> </style> </head> "; echo "<body bgcolor='#FFFFFF'onLoad='writeMenus()'> </body>"; ?>
Etape 2 : Utiliser des fonctions debut_html et fin_html pour construire votre site Vous allez dans cette étape écrire et intégrer deux fonctions dire debut_html et fin_html qui reprendrons tout le contenu graphique de votre site. Pour ce faire vous allez transformer votre projet en l’intégrant dans un tableau pour gérer la mise en page comme par exemple : Menu ou graphisme… Contenu du site Variant en fonction de la page à afficher Menu Ou graphisme Auteur, mise à jour…
Etape 2 : utilisation de fonction La fonction debut_html s’occupera de l’affichage de la partie en rouge, tandis que la fonction fin_html s’occupera de la partie en bleu. La fin de la fonction debut_html devra se terminer par <td>, et la fonction debut_html devra quant à elle commencer par </td>. Entre ces deux fonctions vous pourrez alors afficher le contenu de la page correspondant au paramètre passer par l’URL cf transparent n°5. Si aucun paramètre n’est passé (pensez à le tester) dans ce cas afficher une page par défaut qui peut être soit une page d’erreur, soit en construction soit la page d’acceuil de votre site.
Etape 3 : Utiliser Tiny MCE Copier le répertoire Tiny MCE sur le serveur Dans l’entête du fichier, insérer le code de la diapo suivante Dans un formulaire utiliser le code suivant : On récupère les données comme pour un formulaire classique Lien vers la nouvelle version : http://tinymce.moxiecode.com/ <textarea name='texte' cols='70' rows='20' id='myarea1‘ class='mceEditor'>$texte_html</textarea>
Configuration Tiny MCE <head> <script language='javascript' type='text/javascript' src='/uraff/tinymce/jscripts/tiny_mce/tiny_mce.js'></script> <script language='javascript' type='text/javascript'> tinyMCE.init ({ mode : \"textareas\", theme : \"advanced\", language : \"fr\", content_css : \"../css/style.css\", theme_advanced_styles : \"Lien 1=lienrub;Lien 2=lien1\", // Theme specific setting CSS classes plugins : \"table,preview,zoom,print,paste,directionality,noneditable,contextmenu\", theme_advanced_buttons1_add : \"fontselect,fontsizeselect\", theme_advanced_buttons2_add : \"separator,preview,zoom,forecolor\", theme_advanced_buttons2_add_before: \"copy,paste,pastetext,pasteword,separator,separator\", theme_advanced_buttons3_add_before : \"tablecontrols,separator\", theme_advanced_buttons3_add : \"print,\", theme_advanced_toolbar_location : \"top\", theme_advanced_toolbar_align : \"center\", theme_advanced_statusbar_location : \"bottom\", content_css : \"example_full.css\", extended_valid_elements : \"hr[class|width|size|noshade]\", external_link_list_url : \"example_link_list.js\", external_image_list_url : \"example_image_list.js\", file_browser_callback : \"fileBrowserCallBack\", paste_use_dialog : false, theme_advanced_resizing : true, theme_advanced_resize_horizontal : false, theme_advanced_link_targets : \"_something=My somthing;_something2=My somthing2;_something3=My somthing3;\" }); </script> </head>
Projet Mettre en musique tout les outils que l’on a détaillés jusqu’à présent pour réaliser un site web. Vous devrez utiliser impérativement : un menu déroulant une base de donée contenant le contenu de votre site l’éditeur tinyMCE une mise en page au minima à l’aide d’un tableau Tout en s’appliquant sur le code, pensez notamment aux commentaires et à une construction bien structurée. Projet à rendre au plus tard à la date de la première soutenance.
Etape 0 Rien de plus simple, une page en html …
Etape1 On transforme la page html en php, puis on insert un menu javascript dont vous trouverez une aide sur le repertoire étape0
Etape 2 On fait un test pour insérer un éditeur WYSIWYG en l’occurrence TinyMCE dont vous trouverez un document pour vous aider à le mettre en place à l’@ vante : http://stockage.univ-brest.fr/~elies/DEUST/projet/ Vous pourrez également trouver des aides en lignes comme par exemple à l’@ suivante : http://blog.ludikreation.com/2010/02/13/tinymce-documentation-fr-pour-bien-demarrer/
Etape 3 On prend les deux étapes 1 et 2 pour en faire qu’une seule.
Etape 4 Afin de faciliter la maintenance et le développement de site à venir, il est souhaitable de bien organiser son site et de ranger les éléments par catégorie. Dans ce but, j’ai créer un répertoire include, dans lequel je vais placer tout les fichiers qui auront vocation à être inclus, et pour plus de clarté je les nomme fichier.inc.php Je créé alors un fichiers fonctions.inc.php dans lequel je vais placer toutes les fonctions dont j’aurais besoin pour mon projet. Pour un projet plus conséquent, n’hésitez pas à regrouper vos fonctions par « thèmes » dans plusieurs fichiers. Comme illustration, j’ai créer deux fonctions debut_html() et fin_html() . Le code de page.php se réduit alors à quelques lignes.
Etape 5 On reprend l’étape 4, à laquelle on rajoute un contenu en fonction de l’item sélectionné dans le menu par l’instruction switch. Lors du premier chargement, des notices apparaissent, essayer de comprendre pourquoi et faire en sorte qu’elles ne s’affichent plus.
Etape 6 Pour rendre le site modifiable via l’éditeur TinyMCE on se connecte à une base de donnée. Cette étape consiste à afficher le contenu de la base en fonction du num sectionné par le menu. La base site_web aura au minimum une table contenant 3 champs (numero, titre, contenu), faites attention au type à utiliser pour chacun des champs. Si vous utiliser la méthode vue en cours, il faudra rajouter deux fichier dans le répertoire include : connexion.inc.php parametre_connec.inc.php Puis vous affichez le contenu de la base pour num considéré en utilisant l’une des trois méthode vue en cours.
Etape 7 Reste à alimenter la base de donnée de manière dynamique. Pour ce faire, je vous propose une solution qui consiste à utiliser le même menu que pour l’affichage des données (dans un soucis de facilité de maintenance). L’astuce va consister à créer deux répertoires parallèles, un pour l’affichage du site (répertoire « public ») et le deuxième pour l’administration (répertoire « administration ») Il faudra penser à changer les chemins des différents fichiers include, et à changer le chemin du menu dans fonctions.inc.php, car il faut raisonner là ou est inclus le fichier.
Etape 8 Vous avez sans doute réussi à insérer des données dans la base et ainsi rendu votre site complètement dynamique. Essayez maintenant de modifier les données, et la ca ne marche pas car vous ne pouvez pas inserer des données si elles existe déjà. Il faut donc tester (variable booléenne $remplacer) pour savoir si des valeurs sont déjà présentent : Si non, inserer Si oui, remplacer en utilisant la requête utpdate $requete="UPDATE page SET titre='".$titre."',contenu='".$contenu."' WHERE numero = '".$num."'";