Nombreux sont ceux qui souhaiteraient mettre à la disposition des internautes quelques informations, leur C.V., présenter une association, un lieu géographique, leur passe temps... Mais comment faire ? Que doit-on savoir avant de se jeter à l'eau ?
L'objectif de ce cours est de fournir les connaissances de base pour se lancer dans la création d'un petit site internet dynamique, soit sous la forme d'un blog avec des articles publiés régulièrement, soit sous la forme d'un site plus traditionnel.
Le principe
Pour qu'un site soit accessible aux internautes en permanence, les pages HTML* ou PHP* qui le composent doivent être à disposition sur un serveur HTTP* connecté en permanence au réseau internet. Pour ne pas devoir laisser sa propre machine connectée, des hébergeurs* proposent leurs services. Une même machine peut alors héberger
plusieurs sites web (serveur mutualisé).
La création d'un site internet doit respecter les points importants suivants, les premiers étant plus théoriques et les suivants, plus du domaine pratique :
1. Choisir le type de site 2. Les besoins du site
3. Choisir un hébergeur* internet et souscrire à ses services. 4. Choix de la plate forme
5. Choisir le bon design 6. L'importance du contenu
7. Installer un logiciel de gestion de contenu (CMS*) sur son espace Web. 8. L'administration/référencement de son site.
CREER UN SITE
Définitions
● CMS (Content Management System) : Système de gestion de contenu. Logiciel
fonctionnant sur un serveur permettant d'éditer simplement du contenu (textes, images...) et sa mise en forme et permettant de le rendre public. Les logiciels les plus sophistiqués permettent à plusieurs utilisateurs de gérer le contenu en fonction de leurs droits, d'utiliser une chaîne de publication et d'organiser le contenu en rubriques, sous rubriques...
● FTP (File Transfer Protocol) : protocole de transfert de fichier. C'est un protocole de communication permettant l'échange de fichiers entre deux ordinateurs. Il
permet, grâce à un compte utilisateur et un mot de passe, de transférer des fichiers sur son espace web dédié chez l'hébergeur. Ce protocole est utilisé par des
logiciels spécifiques (clients et serveurs FTP) mais aussi par certains logiciel de composition de pages HTML.
● Hébergeur : Société commerciale ou association à but non lucratif proposant de
stocker sur ses ordinateurs des pages HTML ou des CMS* afin de les rendre accessibles en permanence aux internautes. La plupart des hébergeurs proposent aussi d'autres services comme la gestion d'une base de données ou l'exécution de scripts afin de permettre la mise en ligne de sites internet dynamiques.
● HTML (HyperText Markup Language) : Langage informatique de description
d'une page web. Il permet la mise en forme d'un contenu textuel ainsi que l'insertion d'images et de liens vers d'autres pages du même site ou celles d'un autre site. ● HTTP (HyperText Transfer Protocol) : protocole de transfert de pages HTML et
des médias qui les composent. A la différence du protocole FTP, le protocole HTTP ne permet le transfert des pages HTML que dans le sens site internet vers
navigateur web. Il permet donc la diffusion d'un site web tout en le protégeant des modifications. Ce protocole est utilisé par les navigateurs Web tel que Mozilla Firefox, Konqueror, Lynx, Opera ou Microsoft Internet Explorer.
● MySQL : Gestionnaire de base de données souvent disponible sur les serveurs
internet des hébergeurs et utilisé généralement par les CMS*.
● PHP (PHP Hypertext Preprocessor) : Langage de programmation souvent
disponible sur les serveurs internet des hébergeurs et utilisé généralement par les CMS*.
1. Choisir le type de site
Il y a deux types de base de sites Web:
● Le site Web, dit statique, présente le site comme le ferait une brochure imprimée. Il est idéal pour les sites dont les mises à jour sont peu fréquentes.
Site institutionnel : Présente votre entreprise, votre activité, vos valeurs, vos produits,vos services,votre implantation,vos offres&
● Le site Web, dit dynamique, est lié à une base de données à travers laquelle son contenu est mis à jour régulièrement.
Site marchand : Permet la vente de biens et de services à travers Internet. Il s'adresse au grand public et/ou à des entreprises. Il offre la consultation de vos produits, la commande et le paiement sécurisé en ligne.
Site social ou communautaire : Il s'adresse au grand public. Il offre une espace d'expression libre ou de discussion aux visiteurs: forum, blog,...
2. Les besoins du site
● Du temps et de la motivation : c'est une activité qui peut demander beaucoup de
temps : du temps de veille pour s informer et se documenter, du temps pour administrer et entretenir le site, du temps de synthèse et de publication&
● Un nom : définir son site, son thème ou ligne éditoriale, est une étape importante. Il convient de commencer par définir un bon nom pour son site, car une fois définit il le reste en générale pour la durée de vie du site. Pour des questions de
référencement dans les moteurs de recherche (google, yahoo,...), il peut être intéressant de choisir des mots-clés dans l adresse du site (URL). Ce conseil est à adapter dans la langue du contenu de votre site.
● Définir les besoins du site :
L espace de stockage
Dans la majorité des cas les hébergeurs proposent plusieurs Go de stockage ce qui est largement suffisant pour supporter vos publications pour de nombreuses
années (si textes et images). Si vous publiez des podcasts au format mp3, vous avez également largement de quoi vous satisfaire (pour quelques temps) avec les plus petites offres des meilleurs hébergeurs.
La bande passante
la bande passante. Tout dépend de ce que l'on veut mettre en ligne : mettre en ligne des pages de textes demandent beaucoup moins de bande passante que de la vidéo au de la musique en ligne. De même que le nombre de visiteurs que vous êtes susceptible d'accueillir: une centaine de visiteurs journaliers ou une gestion de 200 000 abonnés par jour ne nécessitera pas du tout le même besoin en bande passante.
Les bases de données
La majorité propose des solutions php/MySQL très simplement administrable au travers de la solution open source phpmyadmin. Vous aurez besoin d une seule base pour des sites dynamiques. Cependant plusieurs bases de données permettent d utiliser son hébergement pour d autres blogs ou projets internet. La gestion des domaines
Dans tous les cas, il est bon de réserver dés le début un nom de domaine si vous en avez trouvé un car les déménagements sous de nouvelles URL se révèlent souvent fastidieuses. Il est préférable de choisir un hébergeur qui vous permet de faire très simplement la gestion de vos domaines pour en acheter de nouveaux, créer des sous-domaines&
3. Choisir un hébergeur internet
Il existe des hébergeurs de plusieurs sortes allant du simple hébergeur gratuit au
prestataire haut de gamme garantissant une bande passante, assurant la sauvegarde de votre site... Compte tenu des besoins évoqués en préambule de ce document, nous allons voir deux types d'hébergeur :
● L'hébergement sous le domaine du prestataire ● L'hébergement avec nom de domaine personnel
La différence va se voir dans l'URL (c'est-à-dire l'adresse http) du site.
L'hébergement sous le domaine du prestataire.
La plupart des fournisseurs d'accès internet proposent gratuitement (ou plutôt « avec » l'abonnement de la connexion) l'hébergement de pages web personnelles. En utilisant ce service, l'adresse du site sera une sous adresse du fournisseur d'accès. En imaginant que l'on possède un compte "moncompte" chez le fournisseur d'accès "monfai", on peut
s'attendre à avoir une adresse du style : ● http://moncompte.monfai.fr/
● http://perso.monfai.fr/~moncompte/
● ...
Pour utiliser ce service, il faut, dans la majorité des cas, se rendre sur le site du
fournisseur d'accès et "activer votre espace web". Souvent, un certain délai (quelques heures) est nécessaire avant de pouvoir l'utiliser.
L'hébergement avec nom de domaine personnel
Si le fait d'avoir le nom du prestataire dans l'adresse du site pose problème (perte du site en cas de changement de fournisseur d'accès, « image » du site...), il est aussi possible de réserver un nom de domaine. Là encore, de nombreux prestataires spécialisés dans l'hébergement proposent ce service (ainsi que certains fournisseurs d'accès). Dans ce cas, un coup annuel est à prévoir pour l'hébergement ET pour le nom de domaine. Pour ce dernier, les tarifs changent en fonction de l'extension choisie (les derniers caractères du domaine .fr .com .org...). Pour connaître les tarifs (compter dans la plupart des cas moins de 40 euros par an), il suffit de visiter les sites de ces hébergeurs.
En voici quelques uns par ordre alphabétique: ● http://www.1and1.fr/ ● http://www.hosteur.com/ ● http://www.nuxit.com/ ● http://www.online.net/ ● http://www.ovh.com/ ● http://www.google.fr/search?q=hebergeur+internet
Dans certaines situations, il est possible de trouver un hébergement gratuit (hors nom de domaine). Par exemple, si le site à créer n'a pas un contenu commercial, les sites suivants peuvent être intéressants :
● http://www.apinc.org/
● http://www.lautre.net/ ● http://www.tuxfamily.org/
4. Choix de la plate forme
Il existe une multitude de solutions payantes ou open source pour mettre son site en ligne: par exemple, les préférées des bloggueurs sont DotClear et Wordpress pour les solution open source gratuite.
« goodies » puis « one-clic install » qui vous permettra de renseigner les informations nécessaires (la base de données à utiliser si vous l avez déjà créée sinon demander à la créer automatiquement en même temps que l installation du blog,
l administrateur du blog, mot de passe& ).
Les procédures d'installation de tels outils sont bien documentés, quelques exemples:
pour doclear: http://petit.dotclear.net/
pour wordpress: http://codex.wordpress.org/fr:Installer_WordPress
Les autres solutions open-source peuvent être comparées sur le site
www.cmsmatrix.org/matrix et les tester sur www.opensourcecms.com.
les autres alternatives
Vous pouvez bien sur opter pour une solution tout en un sans vous soucier
d installer le site par vous mêmes. Vous serez alors dépendant de la plateforme et ne pourrez pas personnaliser complétement votre site. Cependant cela reste une
solution simple pour les néophytes. Veillez seulement à réserver votre nom de domaine (plutôt que d avoir un nom.monservicedeblog.com).
5. Choisir le bon design
Il ne faut pas négliger une des parties la plus importante (sinon la plus intéressante) de la création d'un site, le design. Il s agit de l emballage, ce qui va sublimer le
contenu pour rendre la consultation du site agréable. On peut dire que l allure du site est en accord avec la personnalité de son auteur.
Malheureusement, on ne peut pas parier uniquement sur le contenu et risquer de faire fuir des lecteurs potentiels, attachés à l esthétique. De même que peaufiner son design va parfois jusqu'à caricaturer son site involontairement en fonction des
tendances, comme on peut le voir chez certains blogs à l aspect très (trop ?) Web 2.0
L aspect extérieur d un site Internet est au moins aussi important que son contenu. Même s il s agit d un design minimaliste ou épuré, cela reste la preuve que
son auteur fait en sorte que son site ressemble à quelque chose.
Un design et une interface utilisateur soigné et mûrement réfléchi fera revenir le lecteur, autant qu un contenu de qualité.
Il existe par exemple de très nombreux designs ou thème graphiques pour les sites web, l'avantage pour les blogs étants qu'un grand nombres de thèmes sont déjà disponibles pour celui qui veut les réutiliser et qui peuvent servir de base à une
sélection et adaptation personnelle de votre identité graphique.
Conseils généraux :
Exemple pour les blogs, mettre les catégories et menus principaux en avant par exemple en les mettant plus haut. Ainsi il est préférable de donner l'accès au
catégories et à la souscription (Mail et/ou RSS) en haut pour le mettre en avant. Les gadgets et autres choses spéciales devront se retrouver en dessous (en nombre limité pour éviter les surcharges).
6. L'importance du contenu
La règle numéro un est sans conteste d'avoir un site au réel contenu. Cela paraît tout simple mais il est primordial d'avoir un contenu utile et original. Cette règle ne
s'applique d'ailleurs pas qu'à Google mais à toute création de site pour lequel on cherche à créer du contenu intéressant pour le visiteur ! et plus le contenu sera important et de qualité (donc plus de mots-clés susceptibles de correspondre avec une recherche Google) et plus le nombre de visites augmentera ( PageRank indice calculé par l algorithme de classification de Google pour connaître la popularité de son site).
Mais pour cela, il est préférable que le contenu respecte les standards (W3C : World Wide Web Consortium http://www.w3.org/) afin d'optimiser la visibilité de son site pour son référencement.
Un lien pour approfondir sur l'importance du respecter des standards web:
http://openweb.eu.org/articles/pourquoi_standards/
7. Installer un logiciel de gestion de contenu (CMS*) sur son espace
Web
Pour installer un CMS sur son espace web, il faut tout d'abord le télécharger, le
décompresser puis le transférer par FTP*. Reste ensuite à le paramétrer puis à saisir le contenu (ce que vous souhaitez publier).
Rendez vous sur le site du CMS que vous avez choisi et téléchargez l'archive (fichier au format .tar.gz ou .zip) contenant le logiciel en question.
Ouvrez ce fichier avec l'utilitaire que votre système d'exploitation vous propose par défaut, en double cliquant dessus autrement dit. Extrayez son contenu dans un nouveau dossier de votre machine.
Ensuite, il faut transférer le contenu de ce dossier sur le serveur de l'hébergeur* par FTP*. L'outil le plus simple à utiliser est certainement FireFTP, un extension à Firefox que vous pouvez télécharger à cette adresse : http://extensions.geckozone.org/FireFTP
Cela ajoute l'option "FireFTP" au menu "outils" de Firefox après son redémarrage.
Lancez FireFTP, cliquez sur "manage accounts" puis "new". Remplissez en fonction des informations fournies par votre hébergeur.
Voici un tableau des valeurs à entrer suivant l'hébergeur. En cas de problème, une visite sur le page Assistance de l'hébergeur s'impose.
Hébergeur Adresse http Adresse publication (host)
Alice http://moncompte.chez.tiscali.fr/ ou http://www.chez.com/moncompte/
ftp://ftp.chez-alice.fr/ ou ftp://ftp.chez.com/
Cegetel http://moncompte.perso.cegetel.net/ ftp://ftp.perso.cegetel.net/ Club
Internet
http://perso.club-internet.fr/moncompte/
ftp://perso-ftp.club-internet.fr/
Free http://moncompte.free.fr/ ftp://ftpperso.free.fr/ Orange http://perso.orange.fr/moncompte/ ftp://perso-ftp.orange.fr/
Ne pas oublier d'entrer aussi son compte utilisateur (login) et son mot de passe (password).
Il est relativement simple de trouver ces paramètres sur le site de l'hébergeur ou dans le mail ou courrier reçu lors de votre adhésion.
Retrouvez ensuite le dossier contenu le logiciel dans la partie gauche puis transférer le dans la partie droite.
Attention ! Si lors de la première connexion FTP, il existe un dossier htdocs ou encore
www sur le serveur, il faut alors publier dans ce sous dossier (double cliquez dessus pour changer la destination du transfert)
Ensuite, vous devriez avoir accès à la page de paramétrage du logiciel en saisissant l'adresse de votre site dans votre navigateur web (voir adresse http dans le tableau ci-dessus). Il faut, bien sûr, se reporter à la documentation du logiciel installé.
Quelques CMS* faciles à utiliser :
CMSimple
Gestionnaire de contenu ne nécessitant pas de base de données : le stockage se fait dans un fichier.
http://www.cmsimple.fr/
Dotclear
Moteur de blog utilisant une base de données MySQL. Très complet grâce à un système de plugin (extensions) et de thèmes téléchargeables.
http://www.dotclear.net/
Wordpress
Moteur de blog utilisant une base de données MySQL. Très complet grâce à un système de plugin (extensions) et de thèmes téléchargeables.
http://www.wordpress-fr.net/
DokuWiki
Moteur simple ne nécessitant pas de base de données.
http://dokuwiki.fr/
Plus de logiciels libres...
Sur le site de framasoft : http://www.framasoft.net/ rubrique « site web »
8. L'administration/référencement de son site
Pour connaître l'efficacité de son site, il est important de mettre en place des outils qui permettent une analyse afin de détecter d'éventuels problèmes ou optimiser son fonctionnement.
On peut ainsi combiner des outils de statistiques « gratuits ». Par exemple, un pour en savoir plus sur le trafic en temps réels (statcounter) et un pour analyser
plus précisemment le trafic sur une période (google analytics). on trouve aussi xiti (http://www.xiti.com/) pour la mesure et l'audience de son site internet.
On peut aussi optimiser le référencement et la publicité de son site au travers de nombreux outils gratuits (google adsenses).
Le référencement d'un site permet aux internautes de retrouver un site sur internet en tapant quelques mots présents sur celui-ci.
Encore quelques moteurs de recherche permettent un référencement gratuit des sites. Le référencement est très vite fait mais il n'est pris en compte qu'après plusieurs semaines.
Voici quelques moteurs et l'adresse des pages de référencement. Il suffit d'entrer dans les formulaires l'adresse http du site à référencer.
● http://www.google.fr/intl/fr/addurl.html
● http://fr.search.yahoo.com/free/submit (nécessite un compte Yahoo)
● http://guide-voila.search.ke.voila.fr/ (choisir une rubrique, puis le lien Référencer) ● http://search.msn.fr/docs/submit.aspx
Lionel James et Jean-Pierre Morfin cours sous licence Creative Commons By
Fiche procédure
Créer un site
dynamique
Créer un site web en intranet c'est :
– écrire des pages Web (au format HTML) pour les placer dans un dossier (site Web). Cela peut se faire
soit de manière statique en utilisant un éditeur HTML (Dreamweaver, Frontpage, NVU, ...) ce qui peut difficilement être un travail collectif et demande quelques compétences techniques ;
soit de manière dynamique en utilisant un CMS (de l'anglais Content Management System = système de gestion de contenu ou SGC) : ce sont des systèmes qui permettent de mettre en ligne des contenus. Cela peut être des publications (articles) mais également plein d'autres choses (annuaires de lien, sondages, galerie d'images, etc. ) plus ou moins spécialisées avec gestion de flux de publication et différents statuts (auteur- administrateur). Le contenu du site Web est alors le fruit d'un travail collaboratif.
– mettre ce dossier à disposition des autres ordinateurs de l'intranet : c'est le rôle du serveur Web
1 – Définition :
Le terme serveur Web désigne :
- un ordinateur tenant le rôle de serveur informatique sur lequel fonctionne un logiciel serveur HTTP ; - le logiciel serveur HTTP lui-même.
Un serveur HTTP est un logiciel servant des requêtes respectant le protocole de communication client-serveur HyperText Transfer Protocol (HTTP), qui a été développé pour le World Wide Web. D'autres ressources du Web comme les fichiers à télécharger ou les flux audio ou vidéo sont en revanche fréquemment servies avec d'autres protocoles.
La plupart des ordinateurs utilisés comme serveur Web sont reliés à Internet et hébergent des sites Web du World Wide Web. Les autres serveurs se trouvent sur des intranets et hébergent des documents internes d'une entreprise, d'une administration, etc.
Les serveurs Web comportent donc un dossier contenant les fichiers (pages HTML, images,...) qui constituent les pages WEB d'un site.
Un site Web statique est un site ou chacune des pages est créée en HTML. Un ordinateur qui se connecte au serveur, demande une page. Celle ci lui est directement servie (elle est stockée toute prête sur le serveur) : Par opposition, un site Web dynamique est un site Web dont les pages sont générées dynamiquement à la demande.
Le contenu est obtenu (par exemple) en combinant l'utilisation d'un langage de scripts ou de programmation et une base de données. Il s'agit souvent de PHP pour le langage et MySQL pour la base de données.
Dans les sites dynamiques, le contenu (articles) est séparé de l'habillage (modèles ou squelette). Cette séparation contenu/présentation/logique est le credo des développements actuels. Les avantages sont donc loin d'être négligeables, et les possibilités de dynamisation évoluent de jour en jour. Les rédacteurs du contenu ne sont pas forcément habilités à publier leurs articles. L'administrateur quant à lui peut valider ou non les articles et changer l'habillage.
Demande de page Envoi de la page Web voulue Demande de page Lecture du contenu de la page Choix de la forme de page Calcul de la page Envoi de la page Client (navigateur) Serveur (serveur Web)
2 – Installation :
Comme nous aurons besoin d'une base de donnée Mysql, du langage PHP et d'un serveur Web nous allons installer EasyPhp qui regroupe ces trois éléments.
Pour le télécharger aller sur l'adresse : http://www.easyphp.org/
Pour l'installer il suffit de lancer le fichier téléchargé : EasyPHP-2.0b1-setup.exe et de valider les écrans suivants :
L'installation est terminée, un petit E est apparu à droite de votre barre des tâches : EasyPHP est donc lancé.
Vous pouvez le vérifier en ouvrant votre navigateur (IE ou Firefox) et en tapant l'adresse : http://localhost. La page de configuration d'EasyPHP doit apparaître.
Pour configurer ce logiciel il faut faire un clic droit sur cette icône en barre des tâches :
– l'option fichiers Log permet de lire les différents fichiers journaux d'événements des
services en cours d'utilisation
– l'option configuration permet de configurer les diverses composantes d'EasyPHP – l'option Web local ouvre la page de votre site Web
(contenu dans C:\Program Files\EasyPHP 2.0b1\www)
– les options arrêter et redémarrer permettent de relancer les serveurs après
modification de leurs configuration.
1 - Choix de la langue
2 - Écran de bienvenue
3 - Accord de licence
4 - Avertissements 5 - Choix du dossier d'installation 6 - Choix du dossier
« menu démarrer »
7 - Récapitulatif 8 – Copie des fichiers 9 – Fin d'installation et
3 – Configuration :
Le serveur Web Apache inclus dans EasyPHP fonctionne en mode local (http://localhost ou http://127.0.0.1), il n'est donc pas visible sur le réseau intranet. Pour être mis à disposition des autres ordinateurs du réseau, il faut indiquer à Apache d'écouter sur le réseau interne et de laisser passer les informations venant de votre poste.
Pour ce faire :
1 – faire un clic droit sur l'icône : et demander configuration Apache 2 – dans le fichier texte qui s'ouvre descendre jusqu'à la ligne 56 :
Listen 127.0.0.1:80 et rajouter Listen XXX.XXX.XXX.XXX:80 (où les XXX représentent les nombres de l'adresse IP de votre ordinateur (voir la petit fiche sur votre poste).
3 – enregistrer ce fichier et relancer les serveurs (clic droit sur l'icône : et redemarrer).
Maintenant vous devez pouvoir voir les sites des ordinateurs autour de vous en tapant l'adresse : http://PC-Hatinguais01 (pour le poste 01), http://PC-Hatinguais02 (pour le poste 02)...
Si on copiait des pages Web (sites téléchargés, sites capturés,...) dans le répertoire : C:\Program Files\EasyPHP 2.0b1\www de votre poste, ces pages seraient disponibles pour les autres ordinateurs du réseau.
Remarque : En double cliquant sur l'icône en barre des tâches
on ouvre l'écran de contrôle d'EasyPHP (qui montre si les serveurs sont bien en fonctionnement).
4 – Installation de SPIP avec le squelette EVA :
Notre serveur est opérationnel. Nous allons donc passer à la deuxième étape : l'installation d'EVA. Pour télécharger EVA-SPIP aller
sur l'adresse : http://spip-edu.edres74.net/
(ou utiliser GOOGLE pour chercher le site de diffusion d'Eva).
La page suivante s'ouvre,
En descendant tout en bas de page vous trouverez l'archive à télécharger :
Pour l'installer il faut dézipper cette archive et la recopier dans votre répertoire Web : C:\Program Files\EasyPHP 2.0b1\www
5 – Configuration de SPIP avec le squelette EVA :
Notre serveur est opérationnel. Nous allons donc passer à la deuxième étape : l'installation d'EVA.
Pour cela lancer votre navigateur (IE ou Firefox) et taper l'URL suivante :
http://localhost/eva-web-v2_3/ecrire
La page d'accueil s'affiche : Cliquer sur suivant
SPIP vous demande alors les paramètres de connexion à Mysql.
Dans notre cas, (comme nous n'avons encore aucune base de données dans notre gestionnaire Mysql)
– l'adresse de la base de données est localhost
– le login est : root
– laisser la case mot de passe vide
Si vous installez EVA-SPIP chez un fournisseur d'accès internet ces informations changent et doivent correspondre à ce que votre fournisseur vous a indiqué.
En cliquant sur suivant vous avez confirmation de la bonne connexion. Dans le cas contraire il faut revenir à la
page précédente et essayer un autre login ou mot de passe.
Il faut ensuite choisir une base de données : nous créerons une nouvelle base de données nommée spip
Là encore, l'écran suivant nous indique si tout se passe bien...
Le dernier écran nous demande divers identifiant :
– Signature ce que vous voulez ! – Votre adresse Email si vous le voulez ! –
Par contre pour les champs suivants il est impératif de mettre :
– Votre login : evadmin – Votre mot de passe evadmin
Voilà l'installation de SPIP est finie. Notre site peut commencer d'exister... Lorsque vous cliquez sur suivant,
le système vous demande votre login (evadmin) et votre mot de passe (evadmin).
Universit´e Bordeaux S´egalen Licence 2011/2012, 4`eme semestre
Conception de Sites Web Dynamiques : TD 6
Commentaires sur une page web avec PHP et MySQL
Une documentation de la cr´eation d’une base de donn´ees avec MySQL et EasyPHP et accessible sur http://www.labri.fr/∼preuter/cswd2012/mysql.pdf.
Pi`eges `a ´eviter tout au long des TD :
• V´erifiez que EasyPHP est bien d´emarr´e (pour avoir un serveur Apache).
• Les extensions des fichiers PHP doivent ˆetre toujours .php
• Tous vos fichiers PHP qui utilisent la base de donn´ees doivent inclure le fichier connect db.php en tout d´ebut de page.
• Votre dossier de travail doit ˆetre dans P:\ APP\www\cswd.
• Dans le navigateur, l’URL pour afficher vos fichiers .php doit toujours commencer par http:// et non pas par file://.
Exercice 6.1 Outils de travail
1. Reprenez votre ”feuille de triche” et mettez-le `a cˆot´e de vous. N’h´esitez pas `a le compl´eter sur une deuxi`eme page pendant ce TD.
2. Reprenez votre feuille de TD 5 et mettez-le ´egalement `a cˆot´e de vous.
3. Aujourd’hui, nous travaillons dans un dossier td6. N’oubliez pas que vos dossier de travail avec EasyPHP doivent ˆetre dans le dossier P:\ APP\www\cswd.
Exercice 6.2 Cr´eation d’une base de donn´ees MySQL Pour cet exercice, regarder le support du cours1.
1. Si vous ne l’avez pas encore fait lors de derniers TDs, cr´eez une base de donn´ees MySQL qui s’appelle base cswd.
Exercice 6.3 Cr´eation d’une table dans une base de donn´ees MySQL
1. Si vous ne l’avez pas encore fait lors de derniers TDs, cr´eez une nouvelle table livreor dans la base de donn´ees base cswd avec un champs INT qui s’appelle id avec les attributs cl´e primaire ainsi que ”auto-increment”, un champs TEXT qui s’appelle nom, et un autre champs TEXT qui s’appelle texte, ainsi qu’un champs DATETIME qui s’appelle date.
Exercice 6.4 Pages web XHTML statique Consid´erez la page web suivante :
Dans cette exercice, vous ´ecrirez le contenu du fichier XHTML saisir-commentaire.php de cette page web, et plus particuli`erement :
1. Le titre de la page (Commentez).
2. L’inclusion d’un ficher form.css qui permet de d´efinir la mise en forme. 3. Le titre de niveau 3 ”Saisir votre commentaire”.
4. Un formulaire qui renvoie vers la page enregistrer-commentaire.php avec la m´ethode get.
5. Une table avec les ´etiquettes et les champs d’entr´ees du texte (appel´e nom), d’une zone de texte (appel´ee commentaire) ainsi qu’un bouton qui envoie le formulaire.
Exercice 6.5 Evaluation d’un formulaire
1. Cr´eer un fichier avec Notepad++ qui s’appelle enregistrer-commentaire.php, r´ecup´erez les variables nom et commentaire du formulaire et stockez les dans des variables $nom et $commentaire. Affichez le contenu de ces variables, chaque variable sur une ligne.
2. Imaginez qu’un utilisateur aurait entr´e le nom ”Martin” et le commentaire ”Site internet tr`es ergonomique !”. Dans ce cas l`a, l’affectation d’une variable $sql contenant une requˆete pour ins´erer un enregistrement aurait ´et´e :
$sql = "INSERT INTO livreor ( id , nom , texte, date )
VALUES (’’, ’Martin’, ’Site internet tr`es ergonomique !’, NOW()); ";
Affectez la variable $sql pour que vous construisez une requˆete `a partir des donn´ees du formulaire. Notez que vous devez faire des concatenations de chaˆınes de caract`eres (vous ne pouvez pas faire de changement de contextes).
3. Ex´ecuter votre requˆete en utilisant l’instruction suivante :
$resultat = qdb($sql);
Afin d’avoir acc`es `a la fonction qdb, n’oubliez pas que tous vos fichiers qui utilisent la base de donn´ees doivent inclure le fichier connect db.php en tout d´ebut de page avec
4. Tester votre formulaire et v´erifiez si votre table livreor contient bien un nouvel enreg-istrement correspondant aux donn´ees saisies.
5. Tester votre formulaire avec un commentaire qui contient le caract`ere ’ (par exemple je l’aime).
6. Pourquoi vous obtenez un message d’erreur ? Afin de s´ecuriser vos formulaires, protegez ses donn´ees en ´echappant ses commentaires (apr`es la r´ecup´eration des donn´ees du formulaire, et avant la cr´eation de la requˆete SQL dans la variable $sql avec les instructions suivantes :
$nom = mysql_escape_string($nom);
$commentaire = mysql_escape_string($commentaire);
Exercice 6.6 Affichage des commentaires
Comme d´ej`a dans le TD 5, dans cet exercice, vous allez cr´eer une page permettant d’afficher tous les commentaires.
1. Cr´eer une page XHTML dans le fichier livreor.php qui permet d’afficher tous les enreg-istrement d’un livre d’or. Un exemple pour afficher tous les enregenreg-istrements (sans mise en forme) se trouve ci-dessous. Essayez cet exemple dans le corps de votre document XHTML. N’oubliez pas d’inclure le fichier connect db.php en tout d´ebut de page.
<?php
// ex´ecuter une requete MySQL $sql = "SELECT * FROM livreor;"; $resultat = qdb($sql);
// connaitre le nombre d’enregistrements $nombre_resultats = mysql_num_rows($resultat); // parcourir le tableau des enregistrements
while ($enregistrements = mysql_fetch_array($resultat)) { echo $enregistrements[’nom’]; echo $enregistrements[’texte’]; echo $enregistrements[’date’]; } ?>
2. Pour la mise en forme, utilisez des tables de 3 colonnes (nom, texte, date).
3. Cr´eer un lien hypertexte vers la page qui permet de saisir un nouveau commentaire.
Exercice 6.7 Evaluation de commentaires
Dans cet exercice, nous allons donner la possibilit´e aux visiteurs de votre site de donner une ´evaluation sur les commentaires dans le livre d’or.
1. Dans votre table MySQL s’appelant livreor, rajouter un nouveau champs INT qui s’appelle evaluation. Ce champs r´efletera par la suite le nombre d’avis positif moins le nombre d’avis n´egatifs.
2. Dans la table HTML de votre fichier livreor.php, rajoutez deux colonnes. Dans la premi`ere de ces colonnes, affichez la valeur de votre champs evaluation. Dans la deuxi`eme, affichez deux liens hypertextes qui permettent de renvoyer vers cette mˆeme page livreor.php, en y passant en param`etres la variable positif (resp. negatif) avec comme valeur l’identifiant iddu commentaire en question. Voici une illustration d’un aper¸cu de cet affichage.
3. Au debut de votre fichier livreor.php, v´erifiez si vous avez un param`etre GET de positif avec la fonction isset. Si oui, incr´ementez le champs ´evaluation du commentaire en question de 1 en construisant la requˆete n´ecessaire. Notez que par exemple, pour incr´em´enter le commentaire ayant l’identifiant 2, la requˆete serait :
$sql = "UPDATE livreor SET evaluation=evaluation+1 WHERE id=2;";
4. V´erifiez maintenant le param`etre negatif, et d´ecrementez l’´evaluation respectivement. 5. Remplacez les textes ”positif” et ”n´egatif” par des images (par example avec une pouce pointant vers le haut / pointant vers le bas).
6. Affichez la valeur du champs ´evaluation en couleur. Pour une valeur positif, prenez vert. Pour une valeur n´egatif, prenez rouge. Pour cela, d´efinissez 2 classes CSS dans la feuille de style, et appelez la bonne classe selon la valeur.
7. Trier l’affichage des commentaires par le champs evaluation par ordre d´ecroissant.
Exercice 6.8 Fonctions de mise en forme de date
1. Etudiez la fonction PHP date() sur le manuel de PHP (http://www.php.net/manual/fr). Essayez de trouver une meilleure mise en forme pour la date du commentaire post´ee, de type ”Lundi, 5 Mars, `a 10h00”. Pour cela, d´efinissez les deux tableaux suivants :
$jours = array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi") $mois = array("Janvier", "F´evrier", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Ao^ut", "Septembre", "Octobre", "Novembre", "D´ecembre");
Exercice 6.9 Site Web
R´eserver un espace WEB chez un hebergeur gratuit ou alors chez votre fournisseur d’acc`es `
a Internet (FAI) qui supporte le langage PHP et qui vous autorise d’utiliser au moins une base de donn´ees MySQL. Un exemple est olympe-network.com, mais il y en a peut-ˆetre d’autres plus int´eressants.
