Les formulaires et la transmission des données en PHP
Transcription
Les formulaires et la transmission des données en PHP
Les formulaires et la transmission des données en PHP Dans la partie "formulaire" du langage HTML, nous avons vu comment créer un formulaire avec le langage HTML. Pour ce cours, nous allons créer un exemple de système de news : Nous allons créer un formulaire composé de deux zone de texte (une zone de texte pour le pseudo, une zone de texte pour le titre de la news). ● Ensuite, nous allons créer un texterea dans lequel, nous mettrons une actualité. Cette page sera nommée news.php. ● Ensuite, nous devons ajouter une page que l'on nommera ajout.php. Cette page servira à envoyer les données saisies dans une base de données. ● Ensuite, les news s’afficheront grâce à une page liste de news nommée liste_news.php. ● La page où sera affiché la news s’appellera affichage_news.php. ● Nous allons aussi créer une page en css qui permettra de mettre en page notre formulaire de news ainsi que la liste des news. ● N’oubliez pas aussi qu’il faut créer une table news dans notre base de données nommée « toto » ● La page en css (style.css) /* Creation du formulaire de news */ .news { width:100%; } .titre_actu { font-family:Arial, Tahoma; text-align:center; font-size:2em; } .titre_zone_texte { float:left; width:30%; height:20px; font-family:Arial, Tahoma; } .zone_texte { float:right; width:70%; font-family:Arial, Tahoma; font-size:1em; } .bouton { width:100%; text-align:center; } /* Affichage toutes les news */ .toutes_news { width:100%; } .pseudo_toutes_news { float:left; width:30%; } .titre_toutes_news { float:right; width:70%; } Ici, je ne vous explique rien. C’est du langage CSS très facile. Reprenez le cours sur le CSS si vous ne le comprenez pas Le formulaire de news (news.php) : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Formulaire de création de news</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="titre_actu">Ecrire une actualité pour mon site</div> <form method="post" action="ajout.php"> <div class="news"> <div class="titre_zone_texte">Pseudo :</div> <div class="zone_texte"><input type="text" name="pseudo" size="50" maxlength="50"></div> <div class="titre_zone_texte">Titre de la news :</div> <div class="zone_texte"><input type="text" name="titre" size="100" maxlength="255"></div> <div class="titre_zone_texte">News :</div> <div class="zone_texte"><textarea name="news" rows="10" cols="60"></textarea></div> </div> <div class="bouton"><input type="submit" value="Valider"></div> </form> </body> </html> Ce code HTML permet l’affichage d’un formulaire permettant la saisie d’un pseudo, d’un titre et d’une actualité. Regardez bien l’action de ce formulaire. L’action de ce formulaire va se faire grâce à un fichier nommé ajout.php et qui va ajouter les données saisies dans notre base de donnés. Voici comment est codéce fichier ajout.php : Le fichier ajout.php (permettant d’inséer une news dans notre table news) : Dans ce code à la 2ème ligne, on insère le fichier de connexion à la base de donnés. On récupére les données saisies « pseudo », « titre » et « news » grâce à la commande POST. Un nouveau mot apparaît ici. C’est le terme isset. Il permet de savoir si la variable est définit ou non dans le formulaire précédent. Chaque valeur récupérée est transmise dans une variable. Attention, le nom de cette variable doit correspondre au nom de votre champ dans votre table de votre base de données. Ensuite, je teste pour chaque valeur transmise si elle n’est pas nulle ou vide. C’est la fonction empty qui me le permet. Si une des valeurs est vide, j’affiche un message. Ensuite, j’insère chaque valeur dans ma base de données grâce à la commande SQL Insert Into … Puis, je ferme la base de données et j’affiche un message pour dire que tout c’est bien passée. <?php include ('config.php'); if (isset($_POST['pseudo']) AND isset($_POST['titre']) AND isset($_POST['news'])) { $pseudo = htmlentities($_POST['pseudo']); $titre = htmlentities($_POST['titre']); $news = mysql_real_escape_string(stripslashes($_POST['news'])); $news = nl2br($news); if (empty($pseudo)) { echo ("Saisissez votre pseudo"); exit(); } if (empty($titre)) { echo ("Le titre ne peut être vide"); exit(); } if (empty($news)) { echo ("Saisissez une actualité pour votre site"); exit(); } mysql_query ("Insert INTO news VALUES ('', ' " .$pseudo. " ', ' " .$titre. " ', ' " .$news. " ' } mysql_close(); echo 'Merci d'avoir ajouter une news - Redirection automatique dans 5 secondes'; echo "<META HTTP-EQUIV='Refresh' CONTENT='5; URL=http://127.0.0.1/apprendre_le_php/news/news.php ?> L’affichage de tous les titres de news ainsi que leur auteur : (liste_news.php) : Ici,titre le de Entre la grâce news chaque de àchaque ainsi la commande variable, que news, le iltitre je faut SQL fais grâce mettre Select, un à lien la le hypertexte méthode je signe vais&afficher (et GET, qui commerciale) m’amènera le c’est-à-dire pseudo et traduit àque le la titre description c’est ende html valeur chaque par de seront &la news ; news. transmises que Ici,j’ai jesaisi vais dans grâce faire la barre passer au formulaire. d’adresse. l’identifiant Sur Bon voyons un peu plus le charabia suivant : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Affichage de toutes les actualités du site</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <?php include ('config.php'); $reponse = mysql_query ("SELECT * FROM news ORDER BY id"); while ($donnees = mysql_fetch_array($reponse)) { ?> <div class="toutes_news"> <div class="pseudo_toutes_news"><?php echo $donnees['pseudo'];?></div> <div class="titre_toutes_news"><a href="affichage_news.php?id=<?php echo $donnees['id'];?>&t </div> <?php } mysql_close(); ?> </body> </html> La commande a href est la commande permettant de créer un lien hypertexte. Je veux créer ce lien sur la page affichage_news.php mais je veux seulement afficher une news donc il me faut récupérer l’identifiant (id) de la news. En même temps, je peux récupérer le titre. On n’est pas obligé puisque l’identifiant est unique mais comme je veux vous montrer le & donc je récupére aussi le titre. Ensuite, j’affiche le titre de la news pour pouvoir faire le lien dessus. L’affichage de la news lorsque l’on clique sur le titre d’une news : (affichage_news.php) : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Affichage des news</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <?php $id_news = $_GET['id'];?> <?php include ('config.php'); $reponse = mysql_query ("SELECT * FROM news WHERE id='$id_news' "); while ($donnees = mysql_fetch_array($reponse)) { ?> <?php echo nl2br(htmlentities($donnees['news']));?> <?php } mysql_close(); ?> </body> </html> Ici dans ce code, je commence à récupérer l’identifiant transmise dans l’URL. Donc, je le récupère grâce à la méthode GET. Je lui assigne une variable nommée $id_news. Ensuite, grâce à la commande SELECT, je sélectionne l’’identifiant dont l’identifiant est égale à l’identifiant transmis et j’affiche grâce à la commande echo la news de ce même identifiant. Le fichier config.php (permettant la connexion à la base de données) : <?php mysql_connect("localhost", "root", ""); // Connexion à la base de données mysql_select_db("toto"); // Sélection de la base de données ?> Ce fichier est absolument nécessaire pour se connecter à la base de données. La table news : Dans PhpMyAdmin, construisez la table news de la manière suivante : Champs id pseudo titre news Voila,pouvez vous maintenant, faire un vous copier pouvez / coller essayer des codes d’insérer précédents. une news dans votre table. Le mieux, c’est de faire le code vous-même mais Ty IN va va lon