Les formulaires et la transmission des données en PHP

Inscription

276 tutoriels

Participer

Voir le livre d'or
Contact
Recommandez le site
Faire un lien

Shoutbox

pinokio007 :Chui nouvo

hassan :bj t le monde

friedoo :en form marine

friedoo :slt

sberro :SALUT

Partenaires

Forum informatique
Excalibur
emails rémunérés
Vente de vins
Revue de presse

Statistiques

276 tutoriels
9 commentaires
25 signatures
25 sites
89 définitions

Membres en ligne

Les formulaires et la transmission des données en PHP

Imprimer

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.dtd">
<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ées. Voici comment est codé ce fichier ajout.php :

Le fichier ajout.php (permettant d’insérer une news dans notre table news)

Dans ce code à la 2ème ligne, on insère le fichier de connexion à la base de données. 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, grâce à la commande SQL Select, je vais afficher le pseudo et le titre de chaque news que j’ai saisi grâce au formulaire. Sur le titre de chaque news, je fais un lien hypertexte qui m’amènera à la description de la news. Ici, je vais faire passer l’identifiant de la news ainsi que le titre grâce à la méthode GET, c’est-à-dire que c’est valeur seront transmises dans la barre d’adresse. Entre chaque variable, il faut mettre le signe & (é commerciale) traduit en html par & ;
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.dtd">
<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'];?>&titre=<?php echo $donnees['titre'];?>"><?php echo $donnees['titre'];?></a></div>
</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.dtd">
<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	Type	Taille	Extra	Clé primaire
id	INT		Auto_increment	*
pseudo	varchar	50
titre	varchar	50
news	longtext

Voila, maintenant, vous pouvez essayer d’insérer une news dans votre table. Le mieux, c’est de faire le code vous-même mais vous pouvez faire un copier / coller des codes précédents.

0 Commentaire(s)