Comment mettre en avant un article en page d'accueil?

Suite à une question posé sur le forum sur la possibilité de pouvoir mettre "à la une", c'est à dire mettre en avant un article en page d'accueil, j'ai décidé de réaliser ce tutoriel pour ceux et celles que ça intéresseraient. La démonstration de ce tutoriel est consultable à l'adresse http://creer.ton.site.free.fr .

Cette réalisation va s'effectuer en 5 étapes :
1. Ajout d'un champ en base de données.
2. Modification de la page "ajouter-page.php" (partie admin).
3. Modification de la page "modifier-article.php" (partie admin).
4. Modification de la page d'accueil "index.php".
5. Modification du fichier "style.css".

Étape 1 :
Accédez à votre base de données et ajoutez un champ à la fin de la table CONTENU nommé A_LA_UNE de type ENUM et comme taille/valeurs '0','1' .

ALTER TABLE `CONTENU` ADD `A_LA_UNE` ENUM( '0', '1' ) CHARACTER SET latin1 COLLATE 
latin1_general_ci NOT NULL

Étape 2 :
Cette partie permet d'ajouter un petit formulaire lors de la création d'un nouvelle article, permettant de choisir si l'article doit être affiché à la une ou pas. Ouvrez la page nommé "ajouter-page.php" dans la partie administration puis recherchez les lignes :

<p>
<input name="Valider" value="Valider" type="submit"/>
<input name="Effacer" value="Effacer" type="reset"/>
</p>

Juste au dessus, ajoutez le code suivant :

<p>Article à la une ?:<br/>
<select name="a-la-une">
<option value="0">Non</option>
<option value="1">Oui</option>
</select>
</p>

Dans le traitement du formulaire, cherchez la ligne :

$date = date("Y-m-d");

...et ajoutez en dessous la ligne suivante :

$article_a_la_une = $_POST["a-la-une"];

Enfin, cherchez la ligne :

'".mysql_real_escape_string($date)."'

et modifiez par :

'".mysql_real_escape_string($date)."',
'".mysql_real_escape_string($article_a_la_une)."'

Etape 3 :
Ouvrez la page nommé "modifier-article.php" dans la partie administration puis recherchez les lignes :

$contenu=stripcslashes($affiche['texte']);

Ajoutez en dessous :

$article_a_la_une=$affiche['A_LA_UNE'];

Cherchez la partie :

<p>Contenu de la page :<br/>
<textarea name="contenu" rows="10" cols="50" ><?php echo $contenu;?></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'contenu' );
</script>
</p>

Ajoutez en dessous :

<p>Article à la une ?:<br/>
<select name="a-la-une">
<option value="0" <?php if($article_a_la_une=='0'){echo "selected='selected'";}?>>Non
</option>
<option value="1" <?php if($article_a_la_une=='1'){echo "selected='selected'";}?>>Oui
</option>
</select>

Explications :
Cette partie permet d'afficher le formulaire tout en sélectionnant automatiquement la réponse contenu dans la variable $article_a_la_une (Non ou Oui).

On remonte en haut de notre fichier dans la partie "Traitement du formulaire" pour chercher la ligne :

$categorie = $_POST["cat"];

Puis on ajoute en dessous :

$article_a_la_une = $_POST["a-la-une"];

Un petit peut plus bas dans la partie "enregistrement des données", cherchez la ligne :

texte='".mysql_real_escape_string($contenu)."'

et remplacez par :

texte='".mysql_real_escape_string($contenu)."', 
A_LA_UNE='".mysql_real_escape_string($article_a_la_une)."'

Ceci fait, enregistrez votre fichier et envoyez le sur votre serveur. Voilà, nous avons finit la partie permettant d'enregistrer et/ou de modifier les données en base de données.

Étape 4 :

Ouvrez le fichier nommé "index.php", sinon dit la page d'accueil pour les étourdits ^^. Dans ce tutoriel, l'objectif est d' afficher le ou les articles à metrre en avant au dessus de la partie qui permet d'afficher les cinq derniers articles.

Cherchez les lignes :

//On sélectionne les 5 dernières entrées
$result1 = mysql_query("SELECT id,titre,description FROM CONTENU ORDER BY id ASC LIMIT 
5");

Ajoutez au dessus :

//On sélectionne les données mis à la une
$article = mysql_query("SELECT id,titre,description FROM CONTENU WHERE A_LA_UNE='1'");
while($affiche_article = mysql_fetch_array($article))
{
//on voie si il y a quelque chose
if(mysql_num_rows($article) != 0){
//On affiche l'article à la une
echo '<div class="cadre">
<big class="alaune">A la une ...</big><br/>
<h2><a title="'.$affiche_article['titre'].'" 
href="page.php?id='.$affiche_article['id'].'">'.$affiche_article['titre'].'</a></h2>';
//On tronque la description pour inviter le lecteur à lire la suite	  
//longueur maximum de la description  
$max_caracteres=100;
// Test si la longueur du texte dépasse la limite
if (strlen($affiche_article['description'])>$max_caracteres)
{    
// Sélection du maximum de caractères
$affiche_article['description'] = substr($affiche_article['description'], 0, 
$max_caracteres);
// Récupération de la position du dernier espace (afin déviter de tronquer un mot)
$position_espace = strrpos($affiche_article['description'], " ");    
$affiche_article['description'] = substr($affiche_article['description'], 0, 
$position_espace);    
//Ajout des "...[Lire la suite]"
$affiche_article['description'] = $affiche_article['description'].'... 
[<a title="'.$affiche_article['titre'].'" href="page.php?id='.$affiche_article['id'].'">
Lire la suite</a>]';
}
//On affiche la description tronqué
echo ''.nl2br($affiche_article['description']).'
</div>';
}

Si vous utilisez l'url rewriting, vous devez modifier les lignes :

<a title="'.$affiche_article['titre'].'" href="page.php?id='.$affiche_article['id'].'">
'.$affiche_article['titre'].'</a>

et

<a title="'.$affiche_article['titre'].'" href="page.php?id='.$affiche_article['id'].'">
Lire la suite</a>

A ce stade avancé du tutoriel sur la création d'un site dynamique, vous savez normalement comment modifier ces 2 lignes ... alors je vous laisse faire .
Enregistrez le fichier et envoyez le sur votre serveur.

Etape 5 :

Cette étape permet uniquement d'associer une class CSS au titre "A la une" que l'on vient d'ajouter dans le code au dessus et qui correspondant à la ligne :

<big class="alaune">A la une ...</big>

Ouvrez le fichier "style.css" et ajoutez y le code suivant :

.alaune{
color:red;
font-size:30px;
font-weight:bold;
}

Enregistrez le fichier et envoyez le sur votre serveur. Voila, ce tutoriel est maintenant terminé. Si vous avez des questions, je vous invite à les poser directement sur le forum en suivant ce lien : Créer un cadre "à la une"

Catégorie Créer un site dynamique

Introduction à la création d'un site web dynamiqueStructure et mise en page du siteCréation de la base de donnéesCréation de la page d'accueil de l'administrationCréation et enregistrement des catégoriesModification et enregistrement des catégoriesSuppression des catégoriesModification et suppression des articles par catégoriesCréation de la page pour la rédaction des articlesModification et enregistrement des pagesSuppression des pagesMise en place du menuCréation de la page d'accueil du siteCréation de la page affichant les articlesCréation de la page catégorieNavigation du sitePagination des catégoriesProtection de l'administrationCréation d'un sitemap dynamiqueCréation d'un flux rss dynamiqueCréation d'un moteur de recherchesComment rendre la page d'accueil dynamique?Formulaire d'upload d'imagesComment créer un fil d'ariane pour notre site dynamique?Comment mettre en avant un article en page d'accueil?Intégration du formulaire d'upload CKFinder à l'éditeur CKEditorComment afficher des articles similairesComment rewriter notre site dynamique?Création du fichier contenant la fonction pour l'url rewritingDirective du fichier htaccessModification des liens et inclusion des fonctions