Rapport de projet Site web pour une association

Dimension: px
Commencer à balayer dès la page:

Download "Rapport de projet Site web pour une association"

Transcription

1 51, rue Barthélémy de Laffemas BP Valence Cedex 9 Rapport de projet Site web pour une association Année Bruno SABOT 1ère année DUT R&T Mathieu ROGER 2ème année DUT R&T Rapport réalisé avec LATEX

2 Table des matières Introduction 4 1 Analyse et outils du projet Description du projet Objectifs Cahier des charges Techniques et Outils utilisés PHP / MySQL FCKEditor Conception et Réalisation Le code La partie visiteur La partie administration Le design Les doléances du clients Nos compositions Conclusion 18 Glossaire 19 Annexe 19 A index.php de la partie visiteurs 20 B Page d affichage des photos 22 C Page d affichage des stages 24

3 TABLE DES MATIÈRES 3 D index.php de la partie administration 26 E Page d ajout de nouvelle photos 28 F Page d ajout d un nouveau stage 30

4 Table des figures 2.1 Arborescence du site visible par les visiteurs Arborescence du site d administration Maquette du site Première version du site Deuxième version du site

5 Introduction Le projet site web pour une association à été choisi après concertation avec les professeurs d informatique qui jugeaient nos précédentes idées trop difficiles à réaliser : tout d abord le codage d un portail de site Internet (installable facilement et totalement administrable par l utilisateur), un projet qui ressemblerait aux systèmes tels que Xoops ou Phpnuke, et ensuite un moteur de recherche, clairement de même type que Google ou Yahoo, avec la création d un bot 1 qui parcourait, seul, les pages Internet pour les référencer). Nous avons donc choisit de garder notre idée de base, qui consistait en un projet informatique, qui, pour plus de détails était de créer une application web et ainsi choisir la proposition de M. Duccini, qui proposait aux étudiants de réaliser un site Internet pour une association, les écuries de la Véore. Il existait d autres projets de site web, cependant, ceux-ci étaient des sites intranet, qui ne nécessitaient pas une mise en page agréable pour les utilisateurs et ils étaient destinés à un nombre de personnes limité. Nous décrirons tout d abord notre projet dans les grandes lignes, en définissant clairement les objectifs que nous devions atteindre à l issue de notre projet, en continuant avec le cahier des charges, les différentes contraintes qui nous étaient fixées, pour ensuite, expliquer quelles techniques de programmation, c est à dire les différents langages et quels outils extérieurs nous avons utilisés pour la conception du site, en les décrivant de manière concise, avec leurs applications et leurs moyens de fonctionnement. Enfin, nous verrons en détails nos méthodes de conception et de réalisation, la manière dont nous avons construit le site du projet, ce que nous avons du faire pour la mise en page, et comment nous avons procédé pour apprendre à l utilisateur comment administrer son site Internet.

6 1. Analyse et outils du projet 1.1 Description du projet Le projet réalisé par Bruno Sabot et Mathieu Roger a pour nom : «Site Web pour une association», comme le montre son nom, celui-ci a pour objectif de réaliser un site internet pour l association Les Ecuries de la Véore. Cette association est un centre équestre situé à Beaumont-Les-Valence appartenant à Virginie et Timothée MAURIN Objectifs Nous devons réaliser un site internet qui pourra être en grande partie administrable par une personne n ayant aucune connaissance technique dans les langages du Web (HTML 2 /PHP 3 /MySQL 4 ). Ce site doit être donc aisément administrable, grâce à une interface simple et intuitive. Celui-ci devra bien entendu être accessible de l extérieur, il a donc fallu se pencher aussi sur les différentes entreprises d hébergement et de nom de domaine existantes pour en sélectionner une avec un bon rapport qualité/prix. De manière plus technique, il nous a aussi fallu nous pencher sur le problème du langage de développement, nous avions au choix le couple PHP/MySQL ou Python 5 /MySQL. Après une courte réflexion nous avons opté pour PHP/MySQL Cahier des charges Après avoir défini avec le tuteur et M. Timothée MAURIN les différents objectifs du site, nous avons établi un rapide cahier des charges. Une fois le projet terminé M. Timothée MAURIN doit être capable d administrer le site seul. Ce projet ne doit poser aucun problème quelconque au professeur tuteur,

7 1. Analyse et outils du projet 7 M. Duccini. L interface d administration doit être intuitive et simple d utilisation. La sécurité doit être suffisamment présente afin que des personnes malintentionnées ne puissent pas modifier le site. Le site doit posséder conformément aux demandes de M. Timothée MAURIN un header 6, une partie droite réservée à des «publicités»pour ses produits de détentes ainsi qu une partie gauche réservée aux données du site en luimême. Celui-ci doit être dans les tons jaune et bleu roi, nous avons décidé de rendre ces couleurs plus pâles pour ne pas agresser l oeil et de manière à améliorer la lisibilité.

8 1. Analyse et outils du projet Techniques et Outils utilisés Dans cette partie nous allons détailler les différents outils utilisés pour la réalisation du projet. Nous avons utilisé le couple PHP/MySQL pour le développement du site, nous détaillerons dans les sous-parties les raisons de ce choix. Pour que le site soit aisément modifiable nous avons également recherché un éditeur WY- SIWYG 7 Nous avons opté pour l éditeur FCKEditor, nous expliquerons également plus tard le choix de cet éditeur. L ensemble du site a été programmé grâce à Vim pour Mathieu et Notepad++ pour Bruno, aucun outil d aide à la programmation n a été utilisé, pour plusieurs raisons : nous n avons pas le droit d installer des logiciels à l Iut, la majorité des éditeurs convenables sont payants, et la plupart d entre-eux ne sont pas compatibles avec le PHP ou le gèrent mal (Le logiciel ne gère pas les erreurs, ne donne pas les descriptions des fonctions,...) PHP / MySQL Nous avons choisi pour le développement du projet le langage PHP, nous l avons préféré à Python car celui-ci est plus souvent présent dans les offres d hébergement ce qui nous permet d avoir une plus grande compatibilité, de plus celuici à été créé principalement dans le but de coder des sites internet, contrairement à Python qui est principalement utilisé pour des applications classiques. Enfin nous maîtrisons mieux le PHP que le Python, de ce fait nous avons pu ainsi inclure plus de fonctions au site, et mieux gérer la partie administration notamment d un point de vue sécurité grâce à l utilisation des sessions. En ce qui concerne le système de base de données la question ne s est pas beaucoup posée car dans la majorité des offres d hébergement, seul MySQL est proposé, de ce fait nous sommes, en quelque sorte, contraints d utiliser ce système. Cela ne nous a pas beaucoup dérangé car comme nous avions déjà créé plusieurs sites en PHP/MySQL, nous connaissons donc assez bien ce système de base de données et nous n avons eu quasiment aucune difficulté à l utiliser.

9 1. Analyse et outils du projet FCKEditor Pour mener à bien notre projet, nous avions besoin d un moyen simple de saisir du texte et de le formater en code HTML sans avoir aucune connaissance spécifique, nous désirions aussi que celui-ci ne nécessite aucune installation chez le client, de manière à ce que le client puisse le modifier de n importe quel poste informatique, il fallait aussi que celui-ci ressemble au niveau des fonctions et de l apparence aux éditeurs de texte classique tels que WORD, pour éviter que le client ne soit dépaysé et que la prise en main de l outil soit rapide. Bien sûr, celui-ci doit être compatible avec la majorité des explorateurs et surtout Internet Explorer et Mozilla Firefox. Nous ne l avons pas développé nous-même, par manque de temps et de connaissances, car la majorité de ces éditeurs utilisent des bibliothèques intégrées aux différents explorateurs et systèmes d exploitation. Il fallait aussi, bien entendu, que cet éditeur soit gratuit. Parmi ces exigences, plusieurs éditeurs correspondaient : TinyMCE, TET (Text Editor Tide), Xinha, Koivi et FCKEditor. Après les tests de ces différents éditeurs, notre choix a porté sur FCKEditor, car celui-ci a toutes ses fonctions disponibles sur la majorité des explorateurs et des systèmes d exploitation. De plus celui-ci est celui qui, à notre goût, fait le code HTML le plus propre : les balises sont, dans leurs grandes majorités, compatibles XHTML. De plus celui-ci permet d uploader 8 et de gérer des images et des fichiers flash 9, d insérer des tableaux, et de gérer les couleurs d arrière-plan des textes, ainsi que des formulaires. Nous avons décidé de désactiver cette dernière fonction car elle nécessite un minimum de connaissance en HTML, et nous avons jugé que celle-ci serait inutile pour le client.

10 2. Conception et Réalisation Nous allons maintenant nous pencher sur la réalisation du projet en lui-même, ainsi nous détaillerons la manière dont nous avons ordonné les différents fichiers et fonctions au sein de la partie publique ainsi que pour l interface d administration. Dans un second temps, nous expliquerons la réalisation de la charte graphique. 2.1 Le code Dans cette section, nous allons voir la manière dont nous avons ordonné les différentes sections du site : tant au niveau fonctions, qu au niveau de l arborescence. Nous allons, dans un premier temps, expliquer l architecture de la partie visible par tout le monde, puis, dans un second temps, nous nous pencherons sur la partie administration du site La partie visiteur Ci-dessous est présente l arborescence de la partie visible par les visiteurs : La génération des pages par PHP est faite par un mécanisme d inclusion, c est-à-dire que lorsqu on accède à la page d accueil, celle-ci regarde si la variable $ GET[ page ] 10 contient une valeur : si oui, elle appelle la page «$ GET[ page ].php» sinon, elle inclut la page «acceuil.php». La variable $ GET[ page ] est une méthode du protocole HTTP 11 qui consiste à faire passer la variable en clair dans la barre d adresse, ainsi, dans notre cas, si on veut accéder à la page «concours» l adresse sera : http ://projet.octera.info/?page=concours si le site est hébergé sur le serveur http ://projet.octera.info.

11 2. Conception et Réalisation 11 Fig. 2.1 Arborescence du site visible par les visiteurs Nous allons maintenant nous intéresser à l architecture du site et de ses différentes fonctions. Nous ne traiterons pas dans cette section le dossier «admin», celui-ci sera expliqué dans la partie suivante. Le dossier «includes» contient des fichiers textes formatés en HTML ; ceux-ci sont destinés à être inclus par : acceuil.php pour le fichier acceuil.txt reglement.php pour le fichier reglement.txt toutes les pages incluent dans le bandeau de droite le fichier pub.php, qui est déstiné à promouvoir les produits de bien-être vendus par le client activite.php inclut les autres fichiers suivant la variable act passée en pa-

12 2. Conception et Réalisation 12 ramètre, ainsi http ://projet.octera.info/?page=activite&act=pension inclut la page activite.php qui à son tour inclut le fichier pension.txt. Le dossier «photo», contient toutes les images du script photo.php, chaque image existe en deux exemplaires, le premier est une miniature de la photo, pour un chargement plus rapide, le second est la photo en elle-même. Le nom des photo est modifié comme suis : mini ou photo suivant s il s agit de la miniature ou la photo. le timestamp 12 du moment auquel la photo a été envoyée sur le serveur. l extension.jpg Le dossier «Userfiles/Images» contient les fichiers envoyés à l aide de FCKEditor sur le serveur. Les fichiers portent dans leur grande majorité le nom de la fonction qu ils exécutent, nous allons néanmoins expliquer le but des autres fichiers : Le fichier form.php contient le formulaire présent dans la page coordonnées Le fichier mail.php est le fichier appelé par ce formulaire pour l envoi du mail avec le contenu de ce mail Les deux fichiers.js sont des fichiers JavaScript pour la mise en place et la configuration du menu déroulant Le fichier connect.php est un fichier qui est inclut par les pages présentes dans la section «Gazette» qui permet de se connecter à la base de données La partie administration A l instar de la partie visiteur, la partie administration est aussi générée par un système d inclusions récursives, c est-à-dire que l on choisit la page que l on veut modifier, et le script nous donne toutes les modifications que l on peut effectuer, chaque modification (fonctions) est un fichier du dossier de la page. Ainsi si l on veut ajouter une entrée dans les concours, nous irons chercher le fichier add.php dans le dossier concours. Voici l arborescence du dossier d administration :

13 2. Conception et Réalisation 13 Fig. 2.2 Arborescence du site d administration Par souci de confort visuel les fichiers index.htm, denied.php et sessions.php ne sont pas marqués dans tous les dossiers mais leur présence est effective. Les fichiers index.htm, denied.php et sessions.php sont présents dans tous les dossiers, dans l objectif de prévenir toutes tentatives de hack 13. Le fichier index.htm permet que si quelqu un rentre dans le dossier sans avoir précisé le nom d un fichier, celui-ci montrera une page vierge au lieu du contenu du dossier. Le fichier sessions.php est inclut au début de chaque fichier de la partie d administration, il a pour but de vérifier si la personne est bien identifiée et, si ce n est pas le cas, il redirige vers le fichier denied.php qui nous le fait savoir et nous ramène

14 2. Conception et Réalisation 14 au formulaire d identification. Nous allons maintenant voir de plus près le mécanisme de l interface d administration : Lorsqu on arrive sur l interface on se confronte à un formulaire de login 14, celui-ci permet que seules les personnes autorisées puissent accéder à la partie d administration. Une fois le login confirmé, nous arrivons à la liste des données que l on peut modifier, une fois la donnée choisie, par exemple «Concours» la page index.php inclut la page./concours/main.php. L adresse de la page devient donc http ://projet.octera.info/admin/index.php?page=concours. Ensuite on choisi la fonction «Ajouter un concours» le script concours.php inclut la page add.php ce qui nous donne l adresse suivante : http ://projet.octera.info/admin/index.php?page=concours&fct=add. Pour ce qui concerne la modification des activités, du bandeau de droite ainsi que de la page d accueil, toutes ces fonctions pointent vers le script./activite/- main.php qui prend en paramètre la page à modifier. Il envoie ensuite les données au fichier modpage.php qui les inscrit dans le fichier texte présent dans le dossier include. Le fichier login.php présent à la racine du dossier d administration permet de créer la session, alors que le fichier logout.php permet de la détruire. Le fichier functions.php contient quelques fonctions nécessaires au fonctionnement de l administration : connexion à la base de données, formatage de l heure et la date... Le FCKEditor est présent dans chaque page ou l on peut ajouter/modifier du contenu, sauf pour les sections photo et tarifs, où celui-ci est inutile. L éditeur est instancié 15 par quelques lignes de code qui font appel à d autres fichiers présents dans le dossier editor. Les fichiers de configuration de l éditeur sont présent à la racine du dossier d administration.

15 2. Conception et Réalisation Le design Point important d un site Internet, la mise en page a connu quelques modifications au cours du temps. Le client avait ses envies pour la mise en page de son site, nous avions quelques conseils Les doléances du clients La première consigne pour la mise en page du site, était de le réaliser avec une mise en page particulière. Ainsi, nous devions préparer un site avec une mise en page «verticale». Le site que nous devions réaliser se présentait sous un format vertical, comme décrit sur le schéma ci-dessous (Voir Figure 2.3), avec un espace de publicité. Fig. 2.3 Maquette du site Le haut de page (header) devait contenir l image d une prairie verdoyante, d après les souhaits de l intéressé. Il devait aussi figurer le nom du centre équestre, Les écuries de la Véore. Le client désirait un menu déroulant (menu). Il fallait donc placer le menu sous le haut de page, et utiliser une disposition horizontale. Les différents éléments du

16 2. Conception et Réalisation 16 menu se déroulent lors du survol. Les couleurs du menu doivent se marier avec le contenu du texte, sans pour autant n y laisser aucune distinction. Enfin, dans la partie principale du texte, une petite section devait prendre place sur la droite de l écran pour permettre à l utilisateur de mettre une publicité sur le site (pub). Le contenu du texte doit quant à lui contenir un maximum d informations sans qu il soit utile d utiliser la scroll-bar 16. Le client désirait aussi un site en accord avec les couleurs de son centre équestre. Nous devions donc utiliser le bleu roi et le jaune comme couleurs prédominantes du site Nos compositions La première proposition de mise en page a été le plus possible proche des souhaits du client. Nous avons tout de même pris le soin de changer le bleu roi et le jaune en leurs équivalents pastel, ce qui nous a permis d avoir des couleurs plus agréables pour le regard. Le deuxième choix de notre initiative a été de mettre un fond vert foncé, qui reprendrait les couleurs de l image du haut de page. La mise en page créée a été la plus proche possible des choix du client, comme il est montré sur la figure 2.4 Cependant, cette mise en page ne nous satisfaisait pas, et au contraire, nous ne l aimions pas du tout. Nous avons donc pris la liberté de créer une autre mise en page, qui serait plus proche de celle que nous pensions la meilleure pour un tel site. L ancienne mise en page était en effet trop colorée, c est principalement ce qui nous a décidé à proposer autre chose. Nous avons donc conçu la mise en page présente plus bas (Voir figure 2.5), qui s est révélée meilleure, puisque le client nous a confié le soin de changer l ancienne mise en page, pour la remplacer par notre nouvelle proposition.

17 2. Conception et Réalisation 17 Fig. 2.4 Première version du site Fig. 2.5 Deuxième version du site

18 Conclusion Le projet Site web pour une association a donc été une réalisation pour quelqu un qui ne connaît pas les langages informatiques d Internet, ne rencontre aucun soucis, mais il doit pouvoir administrer son site très aisément. Nous avons dû pour cela utiliser des langages informatiques particuliers, ainsi que des applications particulières qui devaient intervenir dans la facilité d édition du site par le client. Parmi nos tâches, nous avons choisi d utiliser une arborescence spécifique, qui résume le nombre de choix technologiques que nous avons dû effectuer. Cela nous permet de modifier le code du site avec facilité, et d ajouter avec aisance diverses fonctionnalités. Nous pouvons aussi parler de notre code puisque nous avons confronté quelques langages de programmation, et choisi le plus adapté. Enfin, nous avons pris la peine de prendre des initiatives vis-à-vis du cahier des charges, en proposant spontanément des solutions différentes au client. Le projet Site web pour une association nous a permit de nous confronter à quelques exigences d un client, mais nous a aussi appris à proposer des solutions technologiques à quelqu un, en nous justifiant dans nos choix. Ce projet a aussi été bénéfique d un point de vue conception. Nous avons ainsi pu appliquer les consignes du cours d informatique à propos de l organisation du temps de travail, en répartissant de manière convenable les temps d analyse, de codage et de vérification des erreurs.

19 GLOSSAIRE 19 Glossaire 1 Bot : programme informatique pouvant éxecuter une tâche en autonomie 2 HTML : HyperText Markup Language, langage de mise en page pour les pages Web 3 PHP : Vient de l acronyme récursif PHP : Hypertext Preprocessor, langage permettant un dynamisme côté serveur pour les sites internet, celui-ci permet notamment de tirer des informations de bases de données ainsi que nombreuses autres fonctions 4 MySQL : langage et système de gestion de bases de données 5 Python : Language de programmation interprété 6 Header : Partie supérieure du site réservée au nom du site ainsi qu à une image 7 WYSIWYG : What You See Is What You Get littéralement : Ce que vous voyez est ce que vous obtenez. 8 Uploader : Action d envoyer des fichiers sur un serveur distant 9 Flash : Format propriétaire d animation et de programme éxecuté chez le client 10 $ GET : Variable PHP qui permet de récupérer des données dans la barre d adresse 11 HTTP : HyperText Transfer Protocol : Protocole utilisé par les serveurs web pour envoyer au client une page internet. 12 Timestamp : Methode de stockage de l heure sur un ordinateur, c est un nombre qui compte le nombre de secondes passées depuis le 1 Janvier 1970 à 1 heure du matin GMT Hack : Action effectuer par une tierce personne, visant une machine, un site web,... en tentant de nuire à l intégrité de celui-ci, dans notre cas de modifier le contenu du site sans y avoir été autorisé. 14 Formulaire de login : formulaire permettant de s identifier auprès du site 15 Instancié : (Ici) placer dans la page 16 Scroll-bar : Ascenseur présent sur la droite de l explorateur

20 A. index.php de la partie visiteurs <?php i n c l u d e ( connect. php ) ; connect ( ) ; i f ( i s s e t ($ GET [ page ] ) ) $page=$ GET [ page ] ; e l s e $page= a c c u e i l ;?> <html> <head> <meta http equiv= Content Type content= t e x t /html ; c h a r s e t=i s o /> <link rel= s t y l e s h e e t type= t e x t / c s s href=. / s t y l e. c s s /> </head> <body> <script type= text/ j a v a s c r i p t > f u n c t i o n Go( ) return </ script> <script type= text/ j a v a s c r i p t src =./ exmplmenu var. js ></ script> <script type= text/ j a v a s c r i p t src =./menu com. js ></ script> <div class= wrap c l e a r f i x > <div class= header ><h1>les é c u r i e s de l a Véore</h1></div> <div class= menu id= nav ></div> <div class= c o n t a i n e r c l e a r f i x > <div class= news right c l e a r f i x id= news > <div class= news cnr top ><img src= images / c n r t l. g i f alt= corner width= 8 height= 8 class= cnr style= d i s p l a y : none /></div> <?php i n c l u d e (. / i n c l u d e s /pub. txt ) ;?> <div class= news cnr bottom ><img src= images / c n r b l. g i f

21 A. index.php de la partie visiteurs 21 alt= corner width= 8 height= 8 class= cnr style= d i s p l a y : none /></div> </ div> <div class= content > <?php i f ( i s f i l e (. /. $page.. php ) ) i n c l u d e (. /. $page.. php ) ; e l s e echo La page demandée n e x i s t e pas ;?> </ div> </ div> </ div> </body> </html>

22 B. Page d affichage des photos <?php i f ( i s s e t ($ GET [ num ] ) ) $num = $ GET [ num ] ; e l s e $num = 1 ; $nombreimagepage = 1 6 ; i f ( $ r e t o u r = mysql query ( SELECT COUNT( ) AS nb images FROM photo ) ) e l s e $ r e t o u r =0; $donnees = m y s q l f e t c h a r r a y ( $ r e t o u r ) ; $totalimage = $donnees [ nb images ] ; $nombrepages = c e i l ( $totalimage / $nombreimagepage ) ; i f ( $nombrepages==0) echo Pas de photo d i s p o n i b l e ; e l s e echo Page : ; for ( $ i = 1 ; $ i <= $nombrepages ; $ i++) echo <a href=? page=p h o t o s&num=. $ i. >. $ i. </a> ; $premierimage = ($num 1) $nombreimagepage ; echo <br /><br /> ; $ r e q a f f i m g = SELECT FROM photo ORDER BY id DESC LIMIT. $premierimage.,. $nombreimagepage ; i f ( $ a f f i m g=mysql query ( $ r e q a f f i m g ) ) $ i =0; $compt img =0; while ( $donnee=m y s q l f e t c h a r r a y ( $ a f f i m g ) ) i f ( $compt img >=4) $compt img =0; echo <br /><br /> ;

23 B. Page d affichage des photos 23 i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. jpg ) ) $ext =. jpg ; e l s e i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. png ) ) $ext =. png ; e l s e i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. g i f ) ) $ext =. g i f ; e l s e i f ( i s f i l e (. / photo / photo \. $donnee [ timeexec ]. \. jpeg ) ) $ext =. jpeg ; echo <a h r e f =./ photo / photo. $donnee [ timeexec ].. $ext. t a r g e t = blank ><img s r c =./ photo / mini. $donnee [ timeexec ].. jpg s t y l e = border : 2 px s o l i d #FFF; /></a> ; $compt img++; e l s e echo Erreur de chargement ;?>

24 C. Page d affichage des stages <?php?> <?php i f ($ GET [ h i s t o ]== 1 ) <script type= t e x t / j a v a s c r i p t > document. t i t l e = Ancien Stages ; </ script> <a href=? page=s t a g e >Voir l e s s t a g e s a v e n i r</a> $date=time ( ) ; $requete= SELECT FROM s t a g e s WHERE date <. $date. ORDER BY date ASC ; $requete=mysql query ( $requete ) ; while ( $r=m y s q l f e t c h a r r a y ( $requete ) )?> <f i e l d s e t> <legend> <b><?php echo $r [ 1 ] ;?> &nbsp ;</b> </ legend> <?php echo $r [ 2 ] ;?><br /><br /> Expire l e : <?php echo date ( d/m/y, $r [ 3 ] ) ;?> à <?php echo date ( H: i, $r [ 3 ] ) ;?> </ f i e l d s e t> <?php?> e l s e <script type= t e x t / j a v a s c r i p t > document. t i t l e = Stages à venir ; </ script> <a href=? page=s t a g e&h i s t o=1 >Voir l e s a n c i e n s s t a g e s</a> <?php $date=time ( ) ; $requete= SELECT FROM s t a g e s WHERE date >. $date. ORDER BY date ASC ; $requete=mysql query ( $requete ) ; while ( $r=m y s q l f e t c h a r r a y ( $requete ) )?>

25 C. Page d affichage des stages 25?> <f i e l d s e t> <legend> <b><?php echo $r [ 1 ] ;?> &nbsp ;</b> </ legend> <?php echo $r [ 2 ] ;?><br /><br /> Expire l e : <?php echo date ( d/m/y, $r [ 3 ] ) ;?> à <?php echo date ( H: i, $r [ 3 ] ) ;?> </ f i e l d s e t> <?php

26 D. index.php de la partie administration <?php s e s s i o n s t a r t ( ) ; $user= coucou ; $pass= coucou ; i n c l u d e (. / f u n c t i o n s. php ) ; mysqlconnect ( ) ; i f ( i s s e t ($ GET [ page ] ) ) $page=$ GET [ page ] ; e l s e $page= admin ;?> <html> <head> <meta http equiv= Content Type content= t e x t /html ; c h a r s e t=i s o /> <link rel= s t y l e s h e e t type= t e x t / c s s href=.. / s t y l e. c s s /> </head> <body topmargin= 5 > <center> <table class= cont cellpadding= 0 cellspacing= 0 > <tr><td class= header colspan= 2 ></td></ tr> <tr><td class= menu colspan= 2 style= text a l i g n : c e n t e r ; > Administration du s i t e</td></ tr> <tr> <td class= texte > <?php i f ( i s s e t ($ POST [ V a l ider ] ) ) i f ($ POST [ user ]==$user && $ POST [ password ]==$pass ) $ SESSION [ l o g i n ]=True ; e l s e

27 D. index.php de la partie administration 27 p r i n t blabla ; $ l o g i n=false ; i f ( (! s e s s i o n i s r e g i s t e r e d ( l o g i n ) ) ( $ SESSION [ l o g i n ]==False ) ) i n c l u d e (. / logon. php ) ; e l s e i f (! ( i s s e t ($ GET [ page ] ) ) ) i n c l u d e (. / admin. php ) ; e l s e i f ( f i l e e x i s t s (. /. $ GET [ page ].. php ) ) i n c l u d e (. /. $ GET [ page ].. php ) ; e l s e i n c l u d e (. / denied. php ) ;?> </td> <td class= pub > <?php i n c l u d e (.. / i n c l u d e s /pub. txt ) ;?> </td> </ tr> </ table> </ center> </body> </html>

28 E. Page d ajout de nouvelle photos <a href= index. php >Retour à l index</a><br /><br /> <?php $timeexec=time ( ) ; $timeexec=s t r r e p l a c e (,, $timeexec ) ; i f ( i s s e t ($ POST [ submit ] ) ) i f ( $ FILES [ photo ] [ error ] > 0) $ e r r e u r = Erreur 3 : Erreur de t r a n s f e r t du f i c h i e r ; e l s e $ e x t e n s i o n s v a l i d e s = array ( jpg, jpeg, g i f, png, JPG ) ; $ e x t e n s i o n u p l o a d = s u b s t r ( s t r r c h r ( $ FILES [ photo ] [ name ],. ), 1 ) ; i f ( i n a r r a y ( $extension upload, $ e x t e n s i o n s v a l i d e s ) ) $nom =.. / photo / photo. $timeexec. ; switch ( $ FILES [ photo ] [ type ] ) case image/ jpeg : $nom = $nom.. jpg ; break ; case image/x ms bmp : $nom = $nom.. bmp ; break ; case image/ g i f : $nom = $nom.. g i f ; break ; case image/png : $nom = $nom.. png ; break ; d e f a u l t : d i e ( Extention de f i c h i e r i n c o r r e c t e ) ; $ r e s u l t a t = m o v e u p l o a d e d f i l e ( $ FILES [ photo ] [ tmp name ], $nom ) ; i f ( $ r e s u l t a t ) echo T r a n s f e r t r é u s s i <br> ; $ r e q a j o u t d b = INSERT INTO photo VALUES (,. $nom.,. $timeexec. ) ; i f ( mysql query ( $ r e q a j o u t d b ) ) echo photo correctement ajouté <br> ; e l s e echo Erreur ; i f ( i s f i l e (.. / photo / photo \. $timeexec. \. jpg ) ) $source = imagecreatefromjpeg (.. / photo / photo \. $timeexec. \. jpg ) ; e l s e i f ( i s f i l e (.. / photo / photo \. $timeexec. \. png ) ) $source = imagecreatefrompng (.. / photo / photo \. $timeexec. \. png ) ; e l s e i f ( i s f i l e (.. / photo / photo \. $timeexec. \. g i f ) ) $source = i m a g e c r e a t e f r o m g i f (.. / photo / photo \. $timeexec. \. g i f ) ; e l s e i f ( i s f i l e (.. / photo / photo \. $timeexec. \. jpeg ) ) $source =

29 E. Page d ajout de nouvelle photos 29 imagecreatefromjpeg (.. / photo / photo \. $timeexec. \. jpeg ) ; $ d e s t i n a t i o n = i m a g e c r e a t e t r u e c o l o r (100, ) ; $ l a r g e u r s o u r c e = imagesx ( $source ) ; $hauteur source = imagesy ( $source ) ; $ l a r g e u r d e s t i n a t i o n = imagesx ( $ d e s t i n a t i o n ) ; $ h a u t e u r d e s t i n a t i o n = imagesy ( $ d e s t i n a t i o n ) ; imagecopyresampled ( $ d e s t i n a t i o n, $source, 0, 0, 0, 0, $ l a r g e u r d e s t i n a t i o n, $ h a u t e u r d e s t i n a t i o n, $ l a r g e u r s o u r c e, $hauteur source ) ; imagejpeg ( $ d e s t i n a t i o n,.. / photo / mini \. $timeexec. \. jpg ) ; e l s e echo Erreur 1 : Erreur de t r a n s f e r t du f i c h i e r ; e l s e echo Erreur 2 : Erreur de v a l i d i t é du format de l image ; e l s e?> <form method= post action= index. php? page=photo&f c t=add enctype= multipart /form data > <input type= f i l e name= photo id= photo value= Photo /><br /> <input type= submit name= submit value= A j o u t e r l a photo /> </form>

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et

Plus en détail

INTRODUCTION CHAPITRE 1

INTRODUCTION CHAPITRE 1 CHAPITRE 1 INTRODUCTION Query, qu est-ce que c est?... 11 HTML, CSS, JavaScript, PHP : qui fait quoi?... 16 Un environnement de développement simple et gratuit... 19 Ce que vous allez apprendre... 20 9

Plus en détail

Développement de l interface Web du projet Hôpital

Développement de l interface Web du projet Hôpital Pôle informatique 2013/2014 École Nationale Supérieure des Mines de Saint-Étienne Développement de l interface Web du projet Hôpital Antoine Zimmermann antoine.zimmermann@emse.fr Le cahier des charges

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86

Plan du travail. 2014/2015 Cours TIC - 1ère année MI 86 Plan du travail Chapitre 1: Internet et le Web Chapitre 2: Principes d Internet Chapitre 3 : Principaux services d Internet Chapitre 4 : Introduction au langage HTML 2014/2015 Cours TIC - 1ère année MI

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Créer des pages WEB à l aide de KompoZer.

Créer des pages WEB à l aide de KompoZer. Document élève 1/14 Créer des pages WEB à l aide de KompoZer. Document élève 2/14 INTERNET : CREATION D UN SITE PRESENTATION Un site web (aussi appelé site internet par abus de langage) est un ensemble

Plus en détail

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1

le langage HTML Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 le langage HTML Maxime Morge Université Jean Monnet - ISEAG Maxime Morge L2 ECO - slide #1 Plan Pourquoi est-il nécessaire de connaître le langage HTML? Comment stucturer le contenu d une page? Données

Plus en détail

KompoZer. Td3. M r Castanet - Année scolaire 2007/2008 - page 1

KompoZer. Td3. M r Castanet - Année scolaire 2007/2008 - page 1 KompoZer Td3 M r Castanet - Année scolaire 2007/2008 - page 1 Exercice 1 Dans cet exercice, nous allons appréhender les méthodes pour transférer notre site chez un hébergeur. Mais nous déplacerons notre

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas

Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Initiation PHP-MySQL : HTML, HTTP, URL, PHP Vocabulaire, principes et premiers pas Olivier BOEBION 12/02/2004 1 Le point de départ 1.1 Et la lumière fut... A la fin des années 1980, Tim Berners-Lee travaillant

Plus en détail

Aide Utilisateur. Cellpass.fr

Aide Utilisateur. Cellpass.fr Aide Utilisateur Mise en place simple :... 2 Création d une ressource... 2 Installation du module... 5 Test fonction file OK... 7 temps de connexion < 1 seconde(s)... 7 Exemple d'installation PassUp pour

Plus en détail

Compte rendu de PHP MySQL : création d un formulaire de base de données

Compte rendu de PHP MySQL : création d un formulaire de base de données REVILLION Joris Décembre 2009 3EI Compte rendu de PHP MySQL : création d un formulaire de base de données Objectifs : Le principal objectif de ce cours est de découvrir et de nous familiariser avec le

Plus en détail

Publier une Actualité ou un Evenement

Publier une Actualité ou un Evenement Site Web de l association des ingénieurs INSA de Lyon Publier une Actualité ou un Evenement Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP

Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec

Plus en détail

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

Plus en détail

La mise en page web, feuille de style, cadre.

La mise en page web, feuille de style, cadre. La mise en page web, feuille de style, cadre. L importance du navigateur, son rôle est de lire le code HTML et CSS afin d afficher un résultat visuel à l écran, le problème est que les navigateurs n affichent

Plus en détail

Programmation Web. Thierry Hamon

Programmation Web. Thierry Hamon 1/27 Programmation Web Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017 Bobigny

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

Support de cours et mode d emploi pour le CMS WordPress

Support de cours et mode d emploi pour le CMS WordPress pour le CMS WordPress Retrouvez notre le plan de formation sur http:///formation- cms- wordpress- creer- et- administrer- un- site- web.html Agence de communication la couleur du Zèbre - Mise à jour Août

Plus en détail

Initiation à Dreamweaver

Initiation à Dreamweaver Benjamin Godefroy Redouane Zarghoune Initiation à Dreamweaver SI28 Ecriture interactive et multimédia Automne 2004 Organisation du TD Préambule : Introduction au HTML Présentation de Dreamweaver Exercices

Plus en détail

Jusqu à 14 h : Open Questions! On vous explique ce que vous n avez pas compris lors de la première formation.

Jusqu à 14 h : Open Questions! On vous explique ce que vous n avez pas compris lors de la première formation. Bienvenue! Jusqu à 14 h : Open Questions! On vous explique ce que vous n avez pas compris lors de la première formation. Téléchargez les logiciels nécessaires pour cette formation : http ://formation-web.via.ecp.fr

Plus en détail

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows

TP 1 : HTML 4. EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows TP 1 : HTML 4 EXERCICE 1 : UN PREMIER DOCUMENT HTML Pour cet exercice, vous utiliserez l éditeur de texte standard de Windows : Bloc-notes ou bien EDIT en mode MS-DOS suivant votre ordinateur. Les utilisateurs

Plus en détail

Internet. Principes généraux Création de site web Langage HTML

Internet. Principes généraux Création de site web Langage HTML Internet Principes généraux Création de site web Langage HTML Internet Principes généraux L a n o t i o n d e r é s e a u Réseau : ensemble d interconnections permettant une communication Ex : réseau téléphonique,

Plus en détail

Fonctionnement du Site Web Dynamique:

Fonctionnement du Site Web Dynamique: Fonctionnement du Site Web Dynamique: Site Web Dynamique: Un site Web dynamique est en faite un site Web dont les pages qu'il contient peuvent être générées dynamiquement, c'est à dire à la demande de

Plus en détail

Documentation de CMS-gen

Documentation de CMS-gen Table des matières GÉNÉRALITÉ... 1 LA ZONE D'ADMINISTRATION... 2 LOGIN SUR LA ZONE D ADMINISTRATION... 2 EDITION DU CONTENU EN LIGNE... 3 LE MODE EDITION... 3 PUBLICATION... 3 SUPPRIMER DES MODIFICATIONS...

Plus en détail

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

Plus en détail

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL

NVU, Notepad++ (ou le bloc-note), MySQL, PhpMyAdmin. HTML, PHP, cas d utilisation, maquettage, programmation connaissances en HTML, PHP et SQL Prise en main de NVU et Notepad++ (conception d application web avec PHP et MySql) Propriétés Intitulé long Formation concernée Matière Présentation Description Conception de pages web dynamiques à l aide

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Introduction à Dreamweaver CS4

Introduction à Dreamweaver CS4 Introduction à Dreamweaver CS4 Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur de site web de type «tel écrit tel écran» (cette formule remplaçant désormais dans la terminologie

Plus en détail

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles

228 Index DTD 22. feuilles de styles voir Propriétés CSS et styles Index A affichage, CSS 180 album photos, créer 83 arrière-plan, CSS 152 images 152 Attributs de balises HTML action 90 align 71 attributs communs 131 background 39 border 39, 70 cellpadding 70 cellspacing

Plus en détail

de survie du chef de projet

de survie du chef de projet KIT de survie du chef de projet 01 1 2 3 4 5 6 04 03 07 07 03 03 LE SERVEUR LE CLIENT TECHNOLOGIE WEB CLIENT LE SERVEUR WEB TECHNIQUES & CADRE DE TRAVAIL APPLICATIONS 101 LE SERVEUR Un serveur informatique

Plus en détail

Association UNIFORES 23, Rue du Cercler 87000 LIMOGES

Association UNIFORES 23, Rue du Cercler 87000 LIMOGES RAPPORT DE STAGE Association UNIFORES 23, Rue du Cercler 87000 LIMOGES LOHUES Théo BTS SIO 1 ère année Lycée suzanne valadon 2013-2014 Table des matières I. Présentation de l'entreprise...3 II. Description

Plus en détail

Bernard Lecomte. Débuter avec HTML

Bernard Lecomte. Débuter avec HTML Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.

Plus en détail

Publier un Carnet Blanc

Publier un Carnet Blanc Site Web de l association des ingénieurs INSA de Lyon Publier un Carnet Blanc Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008 Publication,

Plus en détail

SYSTÈMES D INFORMATIONS

SYSTÈMES D INFORMATIONS SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.

Plus en détail

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles

Plus en détail

PHP/MySQL. École Nationale Supérieure des Mines de Nancy 2nde Année

PHP/MySQL. École Nationale Supérieure des Mines de Nancy 2nde Année Bases de Données et Ingénierie des Systèmes d Information 1 PHP/MySQL École Nationale Supérieure des Mines de Nancy 2nde Année Table des matières I PHP 2 1 Les bases 2 1.1 Introduction........................................

Plus en détail

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement

Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.

Plus en détail

Formation PHP/MySQL. Pierre PATTARD. Avril 2005

Formation PHP/MySQL. Pierre PATTARD. Avril 2005 Formation PHP/MySQL Pierre PATTARD Julien BENOIT Avril 2005 Le PHP Langage interprété, côté serveur pages interprétées par le serveur web pas de compilation, code éditable avec un bloc notes. aucune différences

Plus en détail

1. Avec un script php. 2. En utilisant phpmyadmin

1. Avec un script php. 2. En utilisant phpmyadmin Université Lumière - Lyon 2 Master d Informatique M1 - Année 2006-2007 Programmation Web - TDs n 8 9 : PHP - Mysql L. Tougne (http ://liris.cnrs.fr/laure.tougne), 20/11/06 L objectif de ce TD est d utiliser

Plus en détail

Formation PHP débutant

Formation PHP débutant Formation PHP débutant Table des matières 1 Le principe de PHP 3 1.1 Langage côté serveur.................................. 3 1.2 Pour travailler..................................... 3 1.3 Langage de pré-processing...............................

Plus en détail

PHP/MYSQL. Web Dynamique

PHP/MYSQL. Web Dynamique PHP/MYSQL Web Dynamique ENSG Juin 2008 Qui suis-je? Guillaume Gautreau Responsable projets Systèmes d information à l ENPC guillaume@ghusse.com http://www.ghusse.com Ces 6 jours de formation Jour 1 : présentations,

Plus en détail

Réalisation d Applications Web Statiques

Réalisation d Applications Web Statiques Université Abdelmalek Essaâdi Faculté Polydisciplinaire - Tétouan Réalisation d Applications Web Statiques Mr. AZZOUZ Karim azzkimo@gmail.com 2013-2014 1 Plan Cours TP Exercices et TD Évaluation : * Devoir

Plus en détail

Guide d utilisation Plus de souplesse dans votre communication?

Guide d utilisation Plus de souplesse dans votre communication? Guide d utilisation Plus de souplesse dans votre communication? Un produit de la société Table des matières Table des matières... 2 Guide complet d utilisation... 3 Connexion à l administration i-flexo...

Plus en détail

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS

L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS L UTILISATION DU HTML POUR L ENVOI DE VOS COURRIELS Courrielleur privilégie l usage des courriels HTML pour les envois marketing. En effet, le HTML permet d organiser graphiquement l information de manière

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

Plus en détail

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL

L3 - Sites Web dynamiques : Mini-Wall MINI-WALL L3 - SITES WEB DYNAMIQUES MINI-WALL 1 Introduction L'objectif de ce TD est de mettre en place un mini "livre d'or", permettant à vos visiteurs de vous laisser des messages sur votre site. Une page affiche

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

Technologies Internet

Technologies Internet Technologies Internet Jean-François Ramiara FAD Réseau Pyramide 17/10/2012 Toulouse 1 Sommaire Internet Les origines d'internet Caractéristiques d'internet Les protocoles Les adresses IP Les noms de domaine

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

Plus en détail

Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework

Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework Modélisation PHP Orientée Objet pour les Projets Modèle MVC (Modèle Vue Contrôleur) Mini Framework L'objectif de ce document est de poser des bases de réflexion sur la modélisation d'un projet réalisé

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

Plus en détail

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La

Plus en détail

Bases de données et Sites Web. Li345

Bases de données et Sites Web. Li345 Bases de données et Sites Web. Li345 Remerciements à: Stéphane Gançarski et Philippe Rigaux. Ces transparents sont fortement inspirés du très bon livre : Pratique de MySQL et PHP, troisième édition Philippe

Plus en détail

PHP et les Bases de données - Généralités

PHP et les Bases de données - Généralités PHP et les Bases de données - Généralités Conception d une base de données Méthodes utilisées : MERISE, UML Modèle conceptuel des données MCD, Modèle logique MLD, Modèle Physique MPD. Ces aspects seront

Plus en détail

Action 1 : Découverte de l outil informatique. Action 2 : Environnement WINDOWS XP à Seven, Linux. Action 3 : Traitement de texte. Action 4 : Tableur.

Action 1 : Découverte de l outil informatique. Action 2 : Environnement WINDOWS XP à Seven, Linux. Action 3 : Traitement de texte. Action 4 : Tableur. Action 1 : Découverte de l outil informatique. Action 2 : Environnement WINDOWS XP à Seven, Linux. Action 3 : Traitement de texte. Action 4 : Tableur. Action 5 : Présentation de diaporama. Action 6 : Programmation

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

PHP & BD. PHP & Bases de données. Logiciels & matériels utilisés. Bases de données et Web

PHP & BD. PHP & Bases de données. Logiciels & matériels utilisés. Bases de données et Web PHP & Bases de données La quantité de données utilisée par certains sites web nécessite l'utilisation d'une base de données Il faut donc disposer d'un SGBD (mysql, postgresql, oracle, ) installé sur un

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

Comment installer wordpress. www.bxart.be wp niveau 1

Comment installer wordpress. www.bxart.be wp niveau 1 www.bxart.be wp niveau 1 Installation Introduction Wordpress est un CMS ce qui signifie : système de gestion de contenu (Content Management System). Il y a d autres CMS mais c est de loin le plus populaire.

Plus en détail

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail

Rapport de Conception

Rapport de Conception Rapport de Conception Métier : Développement Membres du groupe Granier Maxime Imbert Jérémy Lansac Ludovic Tionohoue Yann Axone Métiers consultés IHM Contenu cispmptut_rapportdeconception_developpement_20110111

Plus en détail

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information

Plus en détail

SITE I NTERNET. Conception d un site Web

SITE I NTERNET. Conception d un site Web SITE I NTERNET Conception d un site Web Conception de votre site Web Préambule Ce document a pour but de donner une méthode de travail afin de réaliser dans les meilleures conditions un site internet.

Plus en détail

Systèmes de Gestion de Contenu

Systèmes de Gestion de Contenu Introduction aux de site Web Master 1 CAWEB Page 1/7 Introduction Définition CMS Content Management Systems : logiciels de conception et de mise à jour dynamique de site web ou d'application multimédia

Plus en détail

Guide de réalisation d une campagne e-mail marketing

Guide de réalisation d une campagne e-mail marketing Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent La

Plus en détail

PROJET «EUROSCANNING»

PROJET «EUROSCANNING» PROJET «EUROSCANNING» Bruxelles, le 14 Mai 2007 Ce document est rédigé en réponse à la demande de Monsieur Xavier WEIL concernant la conception d'un site internet destiné à présenter et promouvoir la société

Plus en détail

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6

Légende. Conception de Sites Web dynamiques 2015. Résumé. Programme. Fonctionnement, p.ex. Règles du jeu 11/03/2015. Cours 5+6 Légende Conception de Sites Web dynamiques 2015 Cours 5+6 Patrick Reuter http://www.labri.fr/perso/preuter/cswd2015 Titre de la page h1, h2, h3 color: red; $a = 3; SELECT * FROM commentaires; HTML CSS

Plus en détail

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

Plus en détail

Le langage php. Serveur http est automatiquement lancé.

Le langage php. Serveur http est automatiquement lancé. Le langage php 1. Introduction aux langages serveurs : Il y a deux modes d exécution d une page HTML : Local : en cliquant sur le fichier, le navigateur Serveur http est automatiquement lancé. Navigateur

Plus en détail

PHP et mysql. Code: php_mysql. Olivier Clavel - Daniel K. Schneider - Patrick Jermann - Vivian Synteta Version: 0.9 (modifié le 13/3/01 par VS)

PHP et mysql. Code: php_mysql. Olivier Clavel - Daniel K. Schneider - Patrick Jermann - Vivian Synteta Version: 0.9 (modifié le 13/3/01 par VS) PHP et mysql php_mysql PHP et mysql Code: php_mysql Originaux url: http://tecfa.unige.ch/guides/tie/html/php-mysql/php-mysql.html url: http://tecfa.unige.ch/guides/tie/pdf/files/php-mysql.pdf Auteurs et

Plus en détail

Introduction à HTML. A. HTML et le web

Introduction à HTML. A. HTML et le web Introduction à HTML Isabelle Debled Renesson Marie-Dominique Devignes LORIA 1 2 1 Fonctionnement en mode client/serveur 1. Construction d une requête ex web : http://www.loria.fr/news CLIENT 5. Mise en

Plus en détail

Création d un forum en Php et Mysql

Création d un forum en Php et Mysql Birane SECK Création d un forum en Php et Mysql Cahier des charges : Nous allons mettre en place un espace membre assez classique à savoir un système que l on retrouve sur la majorité des sites Internet.

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript...

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Projet Web Tim Burton Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Par Omar EDDASSER L3 ISC parcours MIAGE Sous l enseignement

Plus en détail

L1 Option Programmation Web côté Serveur - Contrôle continu n 1

L1 Option Programmation Web côté Serveur - Contrôle continu n 1 L Option Programmation Web côté Serveur - Contrôle continu n Veuillez noircir les cases correspondantes à votre numéro d étudiant ( case/colonne). Si votre N est, il faut noircir le dans la ère colonne,

Plus en détail

REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL

REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL CAHIER DES CHARGES TECHNIQUE Client Fédération Algérienne de Football (FAF) Chef de projet WEBQAM Marine CHARLES Solution retenue WordPress multilingue

Plus en détail

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau SITE WEB Définition Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau Comment mon site est sur internet Je crée mon site sur mon ordinateur, en local.

Plus en détail

CFAD. Livret de la formule Webmaster. Qu est-ce qu un Webmaster? En tant Normal, il s agit de la personne responsable d un site.

CFAD. Livret de la formule Webmaster. Qu est-ce qu un Webmaster? En tant Normal, il s agit de la personne responsable d un site. CFAD Livret de la formule Webmaster Qu est-ce qu un Webmaster? En tant Normal, il s agit de la personne responsable d un site. Mais dans notre cas, nous allons considérer que le Webmaster et celui qui,

Plus en détail

Tout pour monter son site Web. IUFM de Bourgogne

Tout pour monter son site Web. IUFM de Bourgogne Tout pour monter son site Web IUFM de Bourgogne Pourquoi utiliser les technologies Web? Visible par toutes les plates-formes (PC, Mac, Unix ) Technologies simples et descriptives Contenu principalement

Plus en détail

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations

Plus en détail

Internet et applications dans l entreprise (4) PHP

Internet et applications dans l entreprise (4) PHP Licence professionnelle «Management des organisations» Option «Systèmes d information et Réseaux» Internet et applications dans l entreprise (4) PHP 2009-2010 PHP... 3 Balises PHP... 3 Variables, formatage

Plus en détail

CONECT Innovation & Entrepreneurship Plateform. Cahier des charges. Réalisé par : Haythem LABBASSI, DSI - CONECT IT

CONECT Innovation & Entrepreneurship Plateform. Cahier des charges. Réalisé par : Haythem LABBASSI, DSI - CONECT IT CONECT Innovation & Entrepreneurship Plateform Cahier des charges Réalisé par : Haythem LABBASSI, DSI - CONECT IT Confédération des Entreprises Citoyennes de Tunisie Adresse : 8 rue Imem Ibn Hanbal (par

Plus en détail

Créer gratuitement un blog WordPress

Créer gratuitement un blog WordPress Créer gratuitement un blog WordPress Jean-François Lac Sommaire WordPress.com ou WordPress.org?... 3 1 ère étape : trouver un hébergeur gratuit... 4 2 e étape : créer la base de données... 6 4 e étape

Plus en détail

Sécurité PHP. FaillesUpload

Sécurité PHP. FaillesUpload Sécurité PHP FaillesUpload Table des matières Introduction...... 3 L upload de fichiers......... 3 Protections coté client...... 4 Protections coté serveur... 5 1. Vérification du type de contenu......

Plus en détail

Dossier : la base de données

Dossier : la base de données Dossier : la base de données 1 Fournir les requêtes nécessaires à la création de la base de données présentée dans le document 7 Create table Demandeur ( Id INT NOT NULL, Civilite VARCHAR(5), Nom VARCHAR(15),

Plus en détail

Initiation au Web et à l HTML

Initiation au Web et à l HTML Initiation au Web et à l HTML Mathieu LACROIX, François RÉVERET, Antoine VACAVANT mathieu.lacroix@isima.fr françois.reveret@univ-bpclermont.fr antoine.vacavant@liris.cnrs.fr 2 et 3 Avril 2007 /40 Mathieu

Plus en détail

Initiation au Web et à l HTML

Initiation au Web et à l HTML Initiation au Web et à l HTML Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT marzais@llaic3.u-clermont1.fr mathieu.lacroix@isima.fr antoine.vacavant@liris.cnrs.fr 24 et 25 Avril 2006 /39 Thibault

Plus en détail

Administration de votre site web

Administration de votre site web Administration de votre site web WordPress Date de révision : 11/12/2012 1 Mestres All Dev, tous droits réservés, reproduction interdite. Sommaire Connexion... 3 Gestion des articles... 4 Créer un article...

Plus en détail

Rapport de Stage. Refonte du site de Mis Module de site de négoce Modification d un site de vente

Rapport de Stage. Refonte du site de Mis Module de site de négoce Modification d un site de vente Université de Montpellier II Institut Universitaire de Technologie Département Informatique Rapport de Stage Refonte du site de Mis Module de site de négoce Modification d un site de vente Stagiaire :

Plus en détail

mon site web via WordPress

mon site web via WordPress mon site web via WordPress Vocabulaire CMS : Content Management System WordPress fait partie de cette famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d applications

Plus en détail

ultisites S.A. module «services»

ultisites S.A. module «services» M ultisites S.A. module «services» TP N 3 : Installation du serveur WEB Nom : Prénom : Classe : Date : Appréciation : Note : Objectif : Être capable d'installer le serveur WEB, et de créer une page HTML

Plus en détail

Gestion d une école. FABRE Maxime FOUCHE Alexis LEPOT Florian

Gestion d une école. FABRE Maxime FOUCHE Alexis LEPOT Florian Gestion d une école FABRE Maxime 2015 Sommaire Introduction... 2 I. Présentation du projet... 3 1- Lancement de l application... 3 Fonctionnalités réalisées... 4 A. Le serveur... 4 1 - Le réseau... 4 2

Plus en détail