Création de la page pour la rédaction des articles

Vous êtes ici : Accueil >> Créer un site dynamique >> Création de la partie administration >> Création de la page pour la rédaction des articles

Création de la page pour la rédaction des articles

Nous allons maintenant créér la page qui va nous permettre la rédaction des articles ou autres. Nous allons nommer cette page "ajouter-page.php" et celle-ci sera enregistré dans la partie "admin" (comme d'hab. quoi ^^).

Editeur WYSIWYG

La création de cette page est un peut particulière car nous allons utiliser un éditeur WYSIWYG (What You See Is What You Get), en français « ce que vous voyez est ce que vous obtenez » pour rédiger le contenu de nos pages. Je vous invite donc à télécharger l'éditeur CKEditor (au moment de ce tutoriel, j'utilise la version 3.1). Une fois le téléchargement finit (format zip), dezippez le logiciel et placez le dossier CKEditor (avec tout son contenu^^) dans le dossier "creer-un-site-dynamique".

Revenons à notre page "ajouter-page.php".

Nous allons ajouter 1 nouvelle élément dans l'entête de notre page (entre <head> et </head>) permettant de faire appel au script de l'éditeur.

<head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
 <link href="../style.css" rel="stylesheet" type="text/css"/>
 <script type="text/javascript" src="../ckeditor/ckeditor.js"></script> 
 <title>Ajouter un article</title>
</head>

Comme d'habitude, nous avons besoin de créer des formulaires pour écrire et enregistrer nos données .. mais nous allons donc nous pencher quelques minutes sur 2 d'entres eux.

Intégration de CKEditor

Pour écrire notre contenu, nous partons d'un simple <textarea>:

<p>Contenu de la page :<br/>
 <textarea name="contenu" rows="10" cols="50" ><?php
if (!empty($_POST["contenu"])) {
echo stripcslashes(htmlspecialchars($_POST["contenu"],ENT_QUOTES));
}?></textarea></p>

Pour pouvoir afficher et utiliser notre éditeur WYSIWYG, nous allons juste ajouter un petit script sous notre <textarea> :

<script type="text/javascript">
CKEDITOR.replace( 'contenu' );
</script>

Ce petit bout de code Javascript va convertir notre "vilain" textarea en un superbe éditeur de texte en ligne ..magique...

Explication:

Pour convertir le textarea en éditeur WYSIWYG, nous utilisons simplement le nom de notre textarea (name="contenu") dans le code Javascript et le script CKEditor se charge du reste .. simple hein ..!

<p>Contenu de la page :<br/>
 <textarea name="contenu" rows="10" cols="50" ><?php
if (!empty($_POST["contenu"])) {
echo stripcslashes(htmlspecialchars($_POST["contenu"],ENT_QUOTES));
}?></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'contenu' );
</script>
</p>

Sélection des catégories

Comme vous le savez (du moins je l'espère ;)), cette page est destiné à la rédaction et de ce faite, nous devons pouvoir séléctionner la catégorie dans laquelle sera "rangé" l'article. Pour ce faire, nous allons créer une liste déroulante qui va nous permettre d'afficher et de sélectionner nos catégories.

<p>Catégorie :<br/>
  <select name="cat">
  <option value="">Selectionnez une catégorie</option>
  <?php
//On selectionne les catégories
$categorie = mysql_query("SELECT id,nom_categorie FROM CATEGORIES ORDER BY id ASC");
//On boucle et on affiche les données dans notre liste
while($affiche = mysql_fetch_array($categorie))
 {
echo '<option value="'.$affiche['id'].'">'.$affiche['nom_categorie'].'</option>';
 }	
?>
  </select>
</p>

Notre liste est donc généré dynamiquement à l'intérieure de la boucle while et les valeurs correspondent au identifiants (id) des catégories.

Le formulaire dans son intégralité

<?php 
if(isset($message_ok))
{
echo $message_ok;
}
?>
<form action="#ok" method="post">
<?php 
if(isset($alerte0))
{
echo $alerte0;
}
?>
<p>Titre de la page :<br/>
<input name="titre" size="65" value="<?php if (!empty($_POST["titre"])) { echo stripcslashes(htmlspecialchars($_POST["titre"],ENT_QUOTES)); } ?>" type="text"/>
</p>
<?php 
if(isset($alerte1))
{
echo $alerte1;
}
?>
<p>Description de la page :<br/>
<textarea name="description" rows="10" cols="50" ><?php
if (!empty($_POST["description"])) {
	echo stripcslashes(htmlspecialchars($_POST["description"],ENT_QUOTES));
}
?></textarea>
</p>
<?php 
if(isset($alerte2))
{
echo $alerte2;
}
?>
<p>Contenu de la page :<br/>
<textarea name="contenu" rows="10" cols="50" ><?php
if (!empty($_POST["contenu"])) {
	echo stripcslashes(htmlspecialchars($_POST["contenu"],ENT_QUOTES));
}
?></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'contenu' );
</script>
 
</p>
<?php 
if(isset($alerte3))
{
echo $alerte3;
}
?>
<p>Catégorie :<br/>
<select name="cat">
<option value="">Selectionnez une catégorie</option>
<?php
//On selectionne les données
$categorie = mysql_query("SELECT id,nom_categorie FROM CATEGORIES ORDER BY id ASC");
 
while($affiche = mysql_fetch_array($categorie))
{
	echo '<option value="'.$affiche['id'].'">'.$affiche['nom_categorie'].'</option>';
}	
?>
</select>
</p>
<p>
<input name="Valider" value="Valider" type="submit"/>
<input name="Effacer" value="Effacer" type="reset"/>
</p>
</form>

Bon, pour me faciliter la tâche dans la rédaction de ce tutoriel, j'ai intégré directement "les alertes" dans le code

mais vous allez comprendre à quoi elles servent dans la partie traitement du formulaire ci-dessous ;).

Traitement et enregistrement des données

<?php
// on se connecte à la base de données
include('../connexion_bd.php');
 
mysql_connect("$nom_du_serveur","$nom_utilisateur","$passe");
mysql_select_db("$nom_de_la_base") or die('Impossible de s&eacute;lectionner une base de donn&eacute;e. Assurez vous d\'avoir correctement remplit les donn&eacute;es du fichier connexion_bd.php.');

//Traitement du formulaire
if(isset($_POST["Valider"]))
{
	$titre = htmlspecialchars(stripcslashes(trim($_POST["titre"])));
	$description = htmlspecialchars(stripcslashes($_POST["description"]));
	$contenu = stripcslashes($_POST["contenu"]);
	$categorie = $_POST["cat"];
 
	//Vérification du formulaire
	if(empty($titre)){
		$alerte0 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas saisie de titre.</div>';
	}
	else if(empty($description)){
		$alerte1 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas saisie de description.</div>';
	}
	else if(empty($contenu)){
		$alerte2 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas saisie de contenu.</div>';
	}
	else if(empty($categorie)){
		$alerte3 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas sélectionné de catégorie.</div>';
	}
	//Si tout est ok
	else
	{
		// on enregistre les données
		$result = mysql_query("INSERT INTO CONTENU VALUES ( '', '".mysql_real_escape_string($categorie)."', '".mysql_real_escape_string($titre)."', '".mysql_real_escape_string($description)."', '".mysql_real_escape_string($contenu)."' ) ");
		//Si il y a une erreur, on crie ^^
		if (!$result) {
			die('Requête invalide : ' . mysql_error());
		}
		else{
			//Si tout est ok, on informe le webmaster
			$message_ok = '<div class="erreur"><a name="ok"></a><b>Page enregistr&eacute;e avec succ&egrave;s!</b></div>';
		}
		//On ferme else
	}
	//On ferme if(isset($_POST["Valider"]))
}  ?>

Il n'y a pas grand chose à dire sur le traitement et l'enregistrement du formulaire puisque théoriquement vous le savez déja. Cependant, il est à noter que pour les besoins de ce tutoriel et les testes effectué sous Free.fr, j'ai besoin d'utiliser la fonction "stripcslashes" à la variable $contenu pour éviter l'apparition des antislashs... Il est donc possible, selon l'hébergeur que vous utilisez, que certaines fonctions génèrent de petites erreurs... il faudra donc "ajuster" le code en fonction du résultat obtenu.

La page "ajouter-page.php" dans son ensemble :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-fr">
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link href="../style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script> 
<title>Ajouter un article</title>
</head>
 
<body>
 
<div id="moncadre">
<?php include('menu.php');?>
 
<div class="cadrecentrale">
<h1>Ajouter un article</h1>
<?php 
// on se connecte à la base de données
include('../connexion_bd.php');
 
mysql_connect("$nom_du_serveur","$nom_utilisateur","$passe");
mysql_select_db("$nom_de_la_base") or die('Impossible de s&eacute;lectionner une base de donn&eacute;e. Assurez vous d\'avoir correctement remplit les donn&eacute;es du fichier connexion_bd.php.');
 
//Traitement du formulaire
if(isset($_POST["Valider"]))
{
	$titre = htmlspecialchars(stripcslashes(trim($_POST["titre"])));
	$description = htmlspecialchars(stripcslashes($_POST["description"]));
	$contenu = stripcslashes($_POST["contenu"]);
	$categorie = $_POST["cat"];
 
	//Vérification du formulaire
	if(empty($titre)){
		$alerte0 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas saisie de titre.</div>';
	}
	else if(empty($description)){
		$alerte1 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas saisie de description.</div>';
	}
	else if(empty($contenu)){
		$alerte2 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas saisie de contenu.</div>';
	}
	else if(empty($categorie)){
		$alerte3 ='<div class="erreur"><a name="ok"></a>Vous n\'avez pas sélectionné de catégorie.</div>';
	}
	//Si tout est ok
	else
	{ 
		// on enregistre les données
		$result = mysql_query("INSERT INTO CONTENU VALUES ( '', '".mysql_real_escape_string($categorie)."', '".mysql_real_escape_string($titre)."', '".mysql_real_escape_string($description)."', '".mysql_real_escape_string($contenu)."' ) ");
		//Si il y a une erreur, on crie ^^
		if (!$result) {
			die('Requête invalide : ' . mysql_error());
		}
		else{
			//Si tout est ok, on informe le webmaster
			$message_ok = '<div class="erreur"><a name="ok"></a><b>Page enregistr&eacute;e avec succ&egrave;s!</b></div>';
		}
		//On ferme else
	}
	//On ferme if(isset($_POST["Valider"]))
}	
?>
<?php 
if(isset($message_ok))
{
echo $message_ok;
}
?>
<form action="#ok" method="post">
<?php 
if(isset($alerte0))
{
echo $alerte0;
}
?>
<p>Titre de la page :<br/>
<input name="titre" size="65" value="<?php if (!empty($_POST["titre"])) { echo stripcslashes(htmlspecialchars($_POST["titre"],ENT_QUOTES)); } ?>" type="text"/>
</p>
<?php 
if(isset($alerte1))
{
echo $alerte1;
}
?>
<p>Description de la page :<br/>
<textarea name="description" rows="10" cols="50" ><?php
if (!empty($_POST["description"])) {
	echo stripcslashes(htmlspecialchars($_POST["description"],ENT_QUOTES));
}
?></textarea>
</p>
<?php 
if(isset($alerte2))
{
echo $alerte2;
}
?>
<p>Contenu de la page :<br/>
<textarea name="contenu" rows="10" cols="50" ><?php
if (!empty($_POST["contenu"])) {
	echo stripcslashes(htmlspecialchars($_POST["contenu"],ENT_QUOTES));
}
?></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'contenu' );
</script>
 
</p>
<?php 
if(isset($alerte3))
{
echo $alerte3;
}
?>
<p>Catégorie :<br/>
<select name="cat">
<option value="">Selectionnez une catégorie</option>
<?php
//On selectionne les données
$categorie = mysql_query("SELECT id,nom_categorie FROM CATEGORIES ORDER BY id ASC");
 
while($affiche = mysql_fetch_array($categorie))
{
	echo '<option value="'.$affiche['id'].'">'.$affiche['nom_categorie'].'</option>';
}	
?>
</select>
</p>
<p>
<input name="Valider" value="Valider" type="submit"/>
<input name="Effacer" value="Effacer" type="reset"/>
</p>
</form>
 
</div>
 
<?php include('../footer.php');?>
 
</div>
 
</body>
 
</html>

Résultat de la mise en page avec CKEditor

Attention : cette page n'est pas prévue pour apporter des modifications à votre article suite à une première validation. A chaque fois que vous appuyez sur le bouton "Valider", c'est un nouvel article qui est créé..!
Pour éviter tout erreur, vous pouvez effectuer une redirection Javascript comme ci-dessous:

$message_ok = '<div class="erreur"><a name="ok"></a><b>Page enregistr&eacute;e avec succ&egrave;s!</b><br/> Vous allez être redirigé automatiquement d\'ici quelques secondes.</div>';
echo '<script>  function redirection(page) { window.location=page; }  setTimeout(\'redirection("voir-categorie.php?id='.$categorie.'")\',7000);  </script>';

Catégorie Créer un site dynamique

Commentaire sur : Création de la page pour la rédaction des articles

Signaler une erreur

Modification et suppression des articles par catégoriesCréation de la partie administration Modification et enregistrement des pages

Création de la page pour la rédaction des articles