Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Cours HTML/PHP Cours HTML/PHP Cours HTML/PHP Pages Web Pages Web statiq ues Pri

Cours HTML/PHP Cours HTML/PHP Cours HTML/PHP Pages Web Pages Web statiq ues Principe de fonctionnement : L’utilisateur demande l’acc`es `a une page Web depuis son navigateur. Adresse tap´ee, clic sur un lien, utilisation d’un signet, etc ... Le navigateur envoie une demande `a un serveur Web. Le serveur Web lit le fichier demand´e sur le disque dur. Le serveur Web envoie le contenu du fichier au navigateur. Le navigateur affiche le contenu de la page. Pour l’affichage, il peut ´egalement demander le contenu d’autres fichier au serveur (ex : images). Cours HTML/PHP Pages Web Illustr ation Navigateur Web Poste client (4): contenu de index.html (3): contenu de index.html (2): accès à "index.html" (1): demande "index.html" Serveur Disque Serveur Web Cours HTML/PHP Pages Web Pages Web dyna miqu es Pages statiques : Pour changer le contenu, il faut ´editer le fichier. Id´ee : g´en´erer le contenu de la page au moment ou` elle est demand´ee, en fonction : du contenu d’une base de donn´ees ; de param`etres fournis avec la demande (ex : formulaires). Cours HTML/PHP Pages Web Pages Web Dyna miqu es : foncti onne ment L’utilisateur demande l’acc`es `a une page Web depuis son navigateur. Le navigateur transmet envoie une demande au serveur web comprenant : le nom de la page, qui correspond en fait `a un programme ; ´eventuellement un ensemble de param`etres. Cours HTML/PHP Pages Web Illustr ation (4.1): requêtes et résultats SGBD Serveur (5): contenu HTML (4): génération du contenu HTML (3): code source de index.php (2): accès à "index.php" (1): demande "index.php" + paramètres Module PHP Serveur Web Disque Serveur Poste client Navigateur Web Cours HTML/PHP Pages Web Quelq ues langa ges Langage s utilis ´es : Po ur le c o nt e n Cours HTML/PHP Pages Web Cr ´eati on de pages dyna miqu es Dans notre cadre, pour cr´eer une page dynamique, il faut : Cr´eer un programme PHP correspondant `a cette page. Plus pr´ecis´ement, ´ecrire le code source de ce programme. Le but de ce programme est de g´en´erer le contenu d’une page Web, i.e. du HTML. Cours HTML/PHP HTML Structure de base HTML : Princi pe Fichier texte contenant des informations de structuration. La structure est indiqu´ee `a l’aide de balises : Le nom de la balise indique le type de mise en forme `a appliquer. On met une balise ouvrante au d´ebut du morceau de texte concern´e : <nom balise>d´ebut du texte On met une balise fermante `a la fin du texte concern´e : f i n du texte</nom balise> ( ! au / ) Une balise ouvrante peut contenir des attributs de la forme nom="valeur" <nom balise nom1="val1" nom2="val2" . . . > texte Les attributs permettent de pr´eciser des informations Cours HTML/PHP HTML Structure de base Struct ure d’une page HTM L Une page HTML a la structu re suivant e : <html> <head> <title>t i t r e de l a page</title> </head> <body> Partie a ff i c h ´ee dans l e navigateur. </body> </html> Les commentaires (non affich´es) sont d´elimit´es par < ! - - et -->. Cours HTML/PHP HTML Structure de base Struct ure : parag raphe s et titres <p>texte</p> texte forme un paragraphe (saut de ligne avant et apr`es). <h1>texte</h1> texte est un titre important (paragraphe avec un affichage plus gros, en gras). <h2>texte</h2> texte est un titre moins important (affichage un peu moins gros). . . . <h6>texte</h6> texte est un petit titre. Cours HTML/PHP HTML Structure de base Exemple de documen t HTML <html> <head> <title> La page de Toto</ title> </head> <body> <h1>Toto</ h1> <h2>L’histo ire de Cours HTML/PHP HTML Structure de base Struct ure : styles simpl es <i>texte</i> ou <em>texte</em> : mettre texte en italique. <b>texte</b> ou <strong>texte</strong> : mettre texte en gras. <u>texte</u> : souligner texte. <big>texte</big> : mettre texte en plus grand. <small>texte</small> : mettre texte en plus petit. Cours HTML/PHP HTML Structure de base Struct ure : listes <ul> <li>entr´ee 1</li> <li>entr´ee 2</li> <li>entr´ee 3</li> < l i > . . . < / l i > </ul> <ol> <li>entr´ee 1</li> <li>entr´ee 2</li> <li>entr´ee 3</li> < l i > . . . < / l i > </ol> Cours HTML/PHP HTML Structure de base Struct ure : table aux <table> <tr> <td> case 1</t d> <td> case 2</t d> </tr> <tr> <td> case 3</t Cours HTML/PHP HTML Structure de base Struct ure : table aux - 2<table border="2"> <tr> <td> case 1</t d> <td> case 2</t d> </tr> <tr> <td> case 3</t Cours HTML/PHP HTML Structure de base Liens hyper texte s <a href="adresse web">texte</a> texte devient un lien cliquable. Lorsque l’on clique sur texte, on va `a l’adresse (URL) adresse web. <a href="http ://www.w3.org/TR/html401/">Documentation HTML</a> Le texte Documentation HTML est un lien vers la page web dont l’adresse est http ://www.w3.org/TR/html401/ Cours HTML/PHP HTML Structure de base Image s Inclure une image : <img src="adresse web image"> Pas de balise fermante pour <img> adresse web image : adresse web ou` chercher l’image. Cours HTML/PHP HTML Formulaires Formu laires : princi pe Objectifs : acc´eder `a une page (dynamique) en sp´ecifiant des param`etres ; permettre `a l’utilisateur de saisir ces param`etres. Comment : en utilisant des champs textuels, des listes d´eroulantes, des cases `a cocher ; `a chacun de des composants de saisie correspond un param`etre. Cours HTML/PHP HTML Formulaires Formu laires : balis e princi pale <form action="adresse web" method="POST" name="nom"> contenu formulaire </form> contenu formulaire : du texte contenant en particulier des balises repr´esentant les diff´erents composants de saisie ; adresse web : l’adresse de la page web dynamique `a laquelle on souhaite acc´eder via ce formulaire ; POST : la m´ethode de transmission des param`etres (on peut ´egalement mettre GET) ; nom : le nom du formulaire (optionnel). Cours HTML/PHP HTML Formulaires Formu laires : saisie de texte <input type="text" name="nom"> Cr´e´ee un champ de saisie pour une ligne de texte. nom est le nom du param`etre correspondant `a ce composant. On peut ajouter les attributs suivants : size="un nombre" : la taille du champ en caract`eres ; value="une valeur" : texte pr´e-saisi utile pour modifier des informations. On peut remplacer type="text" par type="password" si on veut afficher des * au lieu des lettres lors de la saisie. Pas de balise fermante. Cours HTML/PHP HTML Formulaires Formu laires : saisie d’un grand texte <textarea name="nom" rows="h" cols="l"> contenu pr´e s a i s i </textarea> Cr´e´ee un champ de saisie pour du texte sur plusieurs lignes. nom est le nom du param`etre correspondant `a ce composant. h est la hauteur du composant en nombre de lignes. l est la largeur du composant en nombre de caract`eres. le contenu pr´e saisi peut ˆetre vide et ne contient de balise. Cours HTML/PHP HTML Formulaires Formu laires : para m`et res cach ´es <input type="hidden" name="nom" value="val"> Permet de donner la valeur v a l au param`etre nom. Ce composant n’est pas affich´e. Utile pour sp´ecifier un identifiant dans un formulaire de modification des informations de la base. Pas de balise fermante Cours HTML/PHP HTML Formulaires Formu laires : liste d ´ero ulant e <selec t name= "nom" > <opt ion val ue= Cours HTML/PHP HTML Formulaires Formu laires : bout ons de soumi ssion <input type="submit" value="texte"> Cr´e´ee un bouton d´eclenchant le chargement de la page de destination (attribut action de la balise <form>). texte est un texte qui sera affich´e sur le bouton. <input type="reset" value="texte"> Cr´e´ee un bouton d´eclenchant la r´einitialisation du formulaire, en utilisant les valeurs pr´e saisies lorsqu’elles existent. texte est un texte qui sera affich´e sur le bouton. Cours HTML/PHP HTML Formulaires HTML : m ´eth odes de trans missi on de para metr es` Deux m´ethodes de transmission des param`etres GET Les param`etres sont encod´es avec l’adresse de la page : `a la fin de l’adresse, on ajoute le caract`ere ? puis pour chaque param`etre on ajoute nom=val les param`etres sont s´epar´es par le caract`ere & Utile pour sp´ecifier des param`etres dans un lien hypertexte. POST Les param`etres sont encod´es s´epar´ement de l’adresse web. Plus pratique pour les formulaires. Cours HTML/PHP PHP G´en´eralit´es PHP Un fichier PHP est le code source d’un programme. Ce programme a pour but de g´en´erer une page HTML. PHP est un langage imp´eratif proche du C. Cours HTML/PHP PHP G´en´eralit´es PHP : deux types de ”zon es” D´elimit´ees par < ? et ?> Zones entre < ? et ?> : code PHP `a ex´ecuter (similaire `a du code C). Zones `a l’ext´erieur de < ? et ?> : texte et balises qui seront recopi´es directement dans le contenu HTML g ´en´er´e. Cours HTML/PHP PHP G´en´eralit´es PHP : varia bles Le nom d’une variable commence par un $ $i, $utilisateur , $id, . . . Affectation comme en C : $i = valeur ; Les variables ne sont pas explicitement d´eclar´ees comme en C. Une variable existe d`es que l’on a fait une affectation dessus. Une variable peut contenir un nombre, une chaˆıne de caract`eres, un bool´een (en r´ealit´e un entier uploads/s1/ cours-html-css-et-php.pdf