Auteur : Florian BURNEL

I. Présentation Les formulaires sont des éléments permettant à l’internaute d’interagir avec votre site web. Ils permettent à l’utilisateur de saisir des informations dans différents champs et une fois qu’il a finit il envoie les informations grâce au bouton d’envoie, qui en général est un input de type submit. En effet, un formulaire est constitué de balises input qui peuvent prendre différentes formes comme un champs de saisie simple sur une ligne mais aussi de balise select pour créer une liste déroulante ou la balise textarea pour créer une zone de texte paramétrable. Vous trouverez des explications sur les différents types d’input dans un autre tutoriel dédié à cela. II. Les balises du formulaire Le début du formulaire est représenté par la balise <form> et la fin </form>, il est important de les inclure dans une page car si vous avez plusieurs formulaires dans la même page il faut pouvoir les différencier. Dans cette balise on précise une ACTION, c’est-à-dire

I. Présentation Ce tutoriel a pour but de vous faire découvrir les différents types d’INPUT disponible en HTML. Pour rappel, les INPUT sont des éléments interactifs utilisés dans les formulaires qui permettre à l’utilisateur d’interagir avec le site web. Syntaxe : <input type=’nom_type’ name=’son_nom’> Syntaxe avec une valeur par défaut : <input type=’nom_type’ name=’son_nom’ value=’ok’> II. Input type « text » Ce type d’input crée un champ de saisie de texte d’une ligne dont on peut paramétrer la taille et la longueur maximale. III. Input type « password » Ce type est utilisé pour la saisie des mots de passe, tous les caractères saisis sont remplacés par un « rond ». IV. Input type « radio » Avec ce type d’input vous pouvez créer un bouton à cocher ou non par l’utilisateur, vous pouvez en mettre plusieurs, ce qui permettra à l’utilisateur de faire son choix parmi plusieurs options. Cependant, l’attribue name doit être égal pour tous les boutons radio

I. Présentation Dans ce tutoriel, nous allons apprendre à protéger notre base de données grâce à une authentification avec les outils MySql et la fonction Session en PHP (cette fiche). Le principe de la session PHP permet de sauvegarder des données inter-pages. Grâce à ceci, nous comparerons les données recueillies avec la liste des User enregistrés dans MySql et leur mot de passe pour vérifier que la session existe et est valable et L’utilisateur est correctement authentifié et le couple Login/Mot de passe existe. Nous commençons par un formulaire d’identification simple en HTML qui enverra les données à une page qui commencera la session et enregistrera les données reçu dans cette session. II. La page index.html Nous entrons le code suivant dans l’index.html : <FieldSet> <FORM action= »VerifId.php » method=POST> <Legend> Identification</Legend> <INPUT Type=Test Name= »Login » placeholder= »Login » required> <INPUT Type=Test Name= »Password » placeholder= »Passord » required> <INPUT Type=SUBMIT Value= »Log ! »> </FORM> </FieldSet> II. La page VerifId.php Le fichier VerifId.php aura pour but de débuter la session

I. Présentation Une session en PHP est utilisée pour que le serveur garde des informations sur le client pendant la période durant laquelle il visite le site. Entre le moment où il entre sur le site et le moment où il le quitte, il a effectué une session. Ces sessions PHP peuvent être utilisées pour sauvegarder des informations personnalisables entre les pages du site web. Les sessions en PHP sont un outil intéressant pour tout ce qui concerne la sauvegarde d’informations entres les pages web. Le passage de variables pour les utilisées entre plusieurs pages devient très simple avec les sessions PHP. II. Utilisation simple d’une session Dans ce tutoriel nous allons utiliser les sessions pour nous loguer sur un site. Nous allons pour commencer construire une simple formulaire qui enverra les infos (Login et mot de passe) III. La page index.html <FieldSet> <FORM action= »VerifId.php » method=POST> <Legend> Identification</Legend> <INPUT Type=Text Name= »Login » placeholder= »Login » required> <INPUT Type=Password Name= »Password » placeholder= »Password » required> <INPUT Type=SUBMIT

I. Présentation En HTML, il y a deux façons de nommer un élément, avec un ID ou avec une CLASS. Faisons le point sur ces deux attributs. II. Qu’est-ce qu’un ID ? Un ID permet de définir un élément dans une page HTML pour ensuite lui attribuer des propriétés CSS dans une feuille de style. Les ID ont aussi l’avantage de fonctionner avec du Javascript grâce à l’élément GetElementById, contrairement au Class qui ne peuvent pas être appelée par du Javascript. Un ID doit être unique dans une page, il ne doit pas y en avoir plusieurs avec le même nom dans une même page sinon cela serait incorrect. L’ID doit désigner un seul et unique élément. – Définir une ID dans une page HTML (Exemple avec l’élément div) : <div id=’nom’> … </div> – Attribuer des propriétés CSS à cet élément : #nom { Propriété1 ; Propriété2 ; } III. Qu’est-ce qu’une CLASS ? Une Class permet elle aussi

I. Présentation Ce tutoriel a pour objectif de vous faire découvrir l’utilisation du CSS à l’intérieur d’une page HTML. II. Première personnalisation Pour cela, dans un premier temps il faut créer une page HTML contenant une structure de page basique, avec en plus un titre de page (balise <title>) et un titre dans la page (balise <h1>). Cette page contiendra ceci : Ce qui nous donnera à l’affichage : Maintenant que nous avons mis en place la page HTML, nous allons y intégrer du CSS, c’est à dire des propriétés qui affecterons l’apparence des éléments de la page visés. Pour cela il faut insérer une balise <Style type= »text/css »> et </Style> pour la fermeture, dans la partie <HEAD> de la page HTML. Ensuite à l’intérieur de cette balise on insère les propriétés CSS que l’on souhaite. Par exemple, pour mettre le fond du Body en noir et le titre centré et en jaune, il faudra écrire ceci  : Ce qui nous

I. Présentation Pour importer une feuille de style dans une autre, ou même importer plusieurs feuilles de style dans une feuille on utilise la propriété CSS : @import. Selon la spécification du W3C il faut que cette propriété soit avant toutes les autres, autrement dit il faut la mettre au tout début de la page. II. La syntaxe @import @import url(« style.css »); Remplacez « style.css » vers le chemin vers votre feuille de style. Si vous souhaitez importer plusieurs feuilles de style, répétez cette ligne autant de fois que nécessaire afin de générer plusieurs appels consécutifs de feuilles de style. Il n’est pas possible d’importer plusieurs feuilles de style en une seule commande @import. Cette propriété est pratique car elle vous permet d’organiser vos styles dans différentes feuilles et d’avoir un meilleur contrôle de celle-ci et en plus de les utiliser indépendamment si vous en avez besoin.

I. Présentation La feuille de style est un document qui va permettre de définir les caractéristiques de mise en forme des éléments d’une page web sur laquelle elle est déclarée. Ce tutoriel explique comment appeler une feuille de style (CSS) dans une page HTML. II. Déclarer une feuille CSS En effet, la feuille de style doit être référencée dans la page web où elle doit  s’appliquer. Pour cela il faut ajouter un lien vers cette feuille de style dans le HEAD de votre page : <HEAD> <LINK rel= »stylesheet » type= »text/css » href= »lien_vers_la_feuille »> </HEAD> On notera l’utilisation de la base « LINK » ainsi que de préciser qu’il s’agit d’un type CSS. Enfin, l’option « href » comme dans le cadre d’un lien standard doit contenir le chemin vers votre feuille de style au format .css. – Exemple si la feuille s’appelle styles.css : <HEAD> <LINK rel= »stylesheet » type= »text/css » href= »styles.css »> </HEAD>

I. Présentation Dans ce tutoriel nous allons voir les bases sur le passage de paramètres entre page web par le PHP. Pour cela nous utiliserons deux méthode distinctes, la méthode POST et la méthode GET au travers de deux fichiers. Un fichier formulaire.html qui sera utilisé par l’utilisateur pour entrer des données et les envoyés pour les traiter. Un fichier enregistrement.php qui recevra puis traitera les données (les plus souvent, elles seront utilisées pour gérer une base de données). I. La méthode GET formulaire.html : Nous utilisons les balises suivante pour construire le formulaire : <FORM> </FORM> Nous y spécifions le fichier ou envoyé les données (action= »nomdufichier.php »). Les balises suivantes sont utilisées pour rentrer une nouvelle donnée: <INPUT> Celles-ci peuvent être de plusieurs type (texte, bouton radio, case a cocher, sélection dans une liste …). Nous y spécifions au minimum le type de donnée et son nom. Il ne faut pas oublier a la fin de notre formulaire le bouton