Créer et Styliser une Interface d'Administration en PHP avec Pagination

La gestion efficace de l’interface d’administration est cruciale pour tout site web.

Sans un index bien structuré, l’administration peut devenir chaotique et inefficace, impactant la productivité.

Cet article propose une méthode pour créer un index de zone admin robuste avec vérification de connexion, affichage des biens et pagination.

Table de matière

Créer l'index zone admin PHP Styliser l'index admin avec CSS Insertion des biens immobiliers Affichage biens immobiliers PHP Afficher images des biens Limiter requête SQL pour index Ajouter paramètre page URL Compter pages disponibles Implémenter pagination PHP Styliser pagination admin Résumé de l'index admin FAQ Conclusion

Formation PHP 8 : Atelier Complet Débutant

Réalisez votre projet web de A à Z sous PHP 8

Créer l'index zone admin PHP

Pour construire l’index de la zone admin, suivez ces étapes pour créer une page d’accueil simple mais fonctionnelle pour la zone d’administration. Voici une vue d’ensemble de ce que vous devez inclure dans cette section.

Fichier index.php

Voici un exemple de code pour index.php dans la zone admin :

				
					
 <?php
session_start();
 if (isset($_SESSION['pseudo'])) {
     $pseudo = $_SESSION['pseudo'];
 } else {

     header('location:../index.php');
 }
 ?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8540047b-348a-4c07-adfd-6eb9a251db7c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8540047b-348a-4c07-adfd-6eb9a251db7c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8540047b-348a-4c07-adfd-6eb9a251db7c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<!--<p><a href="../session-out.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Se déconnecter</a></p>-->
<article>
<div id="boxBricks">
<div class="bricks">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" width="" height="" data-lazy-src="ergonomie/images/01.jpg"><noscript><img decoding="async" src="ergonomie/images/01.jpg" alt="" width="" height=""></noscript>
<h4>Immeuble Basse Rue</h4>
</div>
</div>
</article>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

Vérification de la connexion :Le script vérifie si une variable de sessionpseudoest définie. Si oui, l’utilisateur est considéré comme connecté ; sinon, il est redirigé vers la page de connexion.
Affichage du contenu :Une fois la connexion vérifiée, la page affiche une section avec une image et un titre.

Ajoutez le CSS

Ajoutez le CSS pour styliser la section d’accueil de la zone admin. Voici un exemple de styles pour style.css :

				
					
 /*** BOXBRICKS ***/
#boxBricks .bricks {
width: 250px;
}
#boxBricks img {
width: 100%;
}

Résultat affiché :

Lorsque l’utilisateur accède à la page index.php dans la zone admin, il voit une image accompagnée d’un titre sous la section boxBricks. La page est accessible uniquement aux utilisateurs connectés, et ceux qui ne sont pas connectés sont redirigés vers la page de connexion.

Styliser l'index admin avec CSS

Pour mettre en forme l’index de la zone admin, vous allez vous concentrer sur l’amélioration de l’apparence et de l’ergonomie de la page à l’aide de CSS. Cela implique la création d’un design cohérent et professionnel pour l’interface d’administration. Voici comment procéder :

Ajoutez le CSS

				
					
 Dans le fichierstyle.css, ajoutez le code suivant pour styliser la page d'accueil de la zone admin
#boxBricks{
width: 80%;
justify-content: center;
display: flex;
flex-wrap: wrap;
}
#boxBricks .bricks {
width: 250px;
margin: 20px;
background-color: #ecf0f1;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#boxBricks .bricks:hover{
box-shadow: 3px 3px 3px #7f8f8d;
}
#boxBricks img {
width: 100%;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
#boxBricks h4{
text-align: center;
font-size: 13px;
letter-spacing: 1px;
margin-top: 5px;
text-transform: capitalize;
padding-bottom: 5px;
border-bottom: 1px dashed #7f8f8d;
}
/*** BOXBRICKS ***/

Résultat affiché :

Après avoir appliqué ces styles, l’index de la zone admin aura un aspect amélioré avec les éléments bien alignés, des blocs de contenu bien espacés, et des effets visuels ajoutés au survol. Les titres sont centrés et bien formatés, tandis que les images sont ajustées pour s’adapter aux blocs avec un design cohérent.

Infos : Essayez de dupliquer ce div dans le fichier index.php de la zone admin pour assurer le bon fonctionnement du CSS :

Immeuble Basse Rue

Insertion des biens immobiliers

Dans cette section, vous allez insérer des données dans la table bien afin de stocker des informations sur les biens immobiliers. Chaque bien aura un identifiant unique (bienID), un nom (bien), et une image associée (image).

Vous allez insérer sept biens dans la base de données. Voici la vérification de l’enregistrement dans la base de données après l’insertion

Astuce Pratique : Pour capturer et vérifier les extensions d’image (.jpg, .jpeg, .png, etc.), vous pouvez utiliser la fonction pathinfo()

Affichage biens immobiliers PHP

Dans cette section, vous allez afficher tous les biens immobiliers stockés dans la base de données. Cela vous permettra de visualiser l’ensemble des biens dans l’interface d’administration.

Afficher les biens avec PHP

Utilisez PHP pour exécuter la requête et afficher les biens dans un tableau ou une grille sur votre page d’administration :

				
					
 <?php
session_start();
 if (isset($_SESSION['pseudo'])) {
     $pseudo = $_SESSION['pseudo'];
 } else {

     header('location:../index.php');
 }
 include('cnx/cnx.php');
 ?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8540047b-348a-4c07-adfd-6eb9a251db7c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8540047b-348a-4c07-adfd-6eb9a251db7c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8540047b-348a-4c07-adfd-6eb9a251db7c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<!--<p><a href="../session-out.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Se déconnecter</a></p>-->
<article>
<div id="boxBricks">
<?php
 $sql = 'SELECT * FROM bien ORDER BY bienID DESC';
 $req = $cnx->prepare($sql);
 $req->execute();
 while ($data = $req->fetch(PDO::FETCH_ASSOC)) {
     ?>
<div class="bricks">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"" height="" data-lazy-src="ergonomie/images/<?=$data['image'];? width="><noscript><img decoding="async" src="ergonomie/images/<?=$data['image'];? width="" height=""></noscript>" alt="<?=$data['bien'];?>">
<h4><?=$data['bien'];?></h4>
</div>
<?php
 }
 ?>
</div>
</article>
</body>
</html>

Connexion à la base de données :Incluez le fichier de connexion pour établir la connexion avec la base de données.
Récupération des données :Utilisez une requête SQL pour sélectionner tous les biens de la base de données, triés parbienIDdans l’ordre décroissant.
Affichage des données :Parcourez les résultats de la requête et affichez chaque bien dans un bloc avec une image et un titre.

Résultat d’affichage :

Le code génère une grille de biens immobiliers où chaque bien est affiché avec son image et son nom. Les blocs de biens sont stylisés en utilisant les règles CSS définies dans le fichier style.css.

Le résultat affiché sera une interface propre et organisée présentant chaque bien avec une image et un titre, permettant ainsi une visualisation claire de l’ensemble des biens stockés.

Infos : Assurez-vous que les images sont correctement liées et disponibles dans le répertoire spécifié pour que l’affichage soit complet.

Afficher images des biens

Dans cette section, vous allez vous assurer que les images des biens s’affichent correctement sur votre page d’administration. L’objectif est de vérifier que chaque bien est accompagné de l’image correspondante, et que celles-ci s’affichent de manière responsive et esthétique.

Étapes pour afficher correctement les images des biens :

Vérifiez les chemins des fichiers d’image

Assurez-vous que le chemin d’accès aux images est correct dans votre base de données et que les fichiers image sont bien stockés dans le répertoire spécifié.

Par exemple, si les images sont stockées dans le répertoire ergonomie/images/, assurez-vous que la colonne image de la table bien contient seulement le nom du fichier image

Modifier le code PHP pour afficher les images

Utilisez le code PHP pour afficher les images des biens en vous assurant que les chemins sont correctement définis :

				
					
 <div class="bricks">
<div data-bg="http://ergonomie/images/" class="imgBricks rocket-lazyload" style=""></div>
<!--<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"" height="" data-lazy-src="ergonomie/images/<?=$data['image'];? width="><noscript><img decoding="async" src="ergonomie/images/<?=$data['image'];? width="" height=""></noscript>" alt="<?=$data['bien'];?>">-->
<h4><?=$data['bien'];?></h4>
</div>
}

Assurez-vous que les images sont correctement mises en forme avec CSS

Pour garantir que les images sont bien dimensionnées et affichées correctement, ajoutez les styles suivants dans votre fichier CSS :

				
					
 /*** BOXBRICKS ***/
#boxBricks .imgBricks{
width: 100%;
height: 120px;
background-color: #000;
border-top-left-radius:5px;
border-top-right-radius:5px;
background-size: cover;
background-position: center;
}

Résultat affiché :

Le résultat affiché sera une grille où chaque bien est présenté avec une image correctement affichée en arrière-plan du bloc. Les images seront dimensionnées de manière uniforme et responsive, offrant une présentation esthétique et cohérente des biens immobiliers.

Limiter requête SQL pour index

Dans cette section, vous allez apprendre à limiter le nombre de résultats affichés à partir de la base de données. Cela peut être utile pour éviter de surcharger l’interface ou pour afficher un nombre limité de biens à la fois.

Étapes pour ajouter une limite à la requête SQL :

Modifier la Requête SQL avec LIMIT
Pour limiter le nombre de résultats retournés par la requête, vous pouvez utiliser la clause LIMIT dans SQL. Cela permet de définir combien de lignes seront sélectionnées.

				
					
 <?php
//Déclarer les variables
$afficher = 2;
$numPage = 3;
//Définir le focus
$focus = ($numPage - 1)*$afficher;
$sql = "SELECT * FROM bien ORDER BY bienID DESC LIMIT $focus,$afficher";
$req = $cnx->prepare($sql);
$req->execute();
while($data = $req->fetch(PDO::FETCH_ASSOC)){
?>

Astuce pratique : La limite peut être ajustée selon vos besoins, et vous pouvez également utiliser la clause OFFSET pour paginer les résultats. Par exemple, LIMIT 5 OFFSET 5 vous permettra d’afficher les 5 biens suivants après les premiers.

Ajouter paramètre page URL

Pour gérer la pagination des résultats affichés sur votre page d’administration, vous pouvez ajouter un paramètre page à l’URL. Cela vous permettra de contrôler quelles données afficher sur chaque page, améliorant ainsi l’expérience utilisateur.

Étapes pour mettre en place un paramètre page dans l’URL :

Modifier la requête SQL pour la pagination

Ajoutez la clause LIMIT avec OFFSET dans votre requête SQL pour récupérer uniquement les résultats correspondant à la page demandée. Par exemple, si vous souhaitez afficher 2 biens par page, vous devrez ajuster la requête en fonction du numéro de la page.

				
					
 <?php
//Déclarer les variables
$afficher = 2;
 //Définir la variable numPage
 if (!isset($_GET['page']) || !ctype_digit($_GET['page']) || $_GET['page'] < 1) {
     $numPage = 1;
 } else {
     $numPage = $_GET['page'];
 }
 //Définir le focus
 $focus = ($numPage - 1) * $afficher;
 $sql = "SELECT * FROM bien ORDER BY bienID DESC LIMIT $focus,$afficher";
 $req = $cnx->prepare($sql);

Explication des étapes

Déclaration des variables

				
					
 $afficher = 2;

Cette variable détermine combien d’éléments (biens) seront affichés par page.

Définition de la page actuelle (numPage)

				
					
 //Définir la variable numPage
if(!isset($_GET['page']) || !ctype_digit($_GET['page']) || $_GET['page']<1){
$numPage = 1;
}else{
$numPage = $_GET['page'];
}

Ce bloc vérifie si le paramètre page dans l’URL est valide (existe, est un nombre entier, et est supérieur ou égal à 1). Si ce n’est pas le cas, il définit la page actuelle (numPage) à 1.

Correction du focus

				
					
 //Définir le focus
$focus = ($numPage - 1)*$afficher;

Ici, numPage est forcé à 3, ce qui semble être une erreur si vous voulez utiliser la valeur obtenue à partir de l’URL. focus est calculé pour déterminer l’offset à utiliser dans la requête SQL.

Requête SQL avec LIMIT et OFFSET

				
					
 $sql = "SELECT * FROM bien ORDER BY bienID DESC LIMIT $focus,$afficher";
$req = $cnx->prepare($sql);

Cette requête sélectionne les biens de la table bien, ordonnés par bienID en ordre décroissant, avec une limite sur le nombre de résultats et un offset calculé par $focus.

Compter pages disponibles

Pour compter le nombre total de pages disponibles, vous devez connaître le nombre total d’éléments (biens, dans ce cas) dans votre base de données et le nombre d’éléments que vous souhaitez afficher par page. Vous pouvez ensuite calculer le nombre total de pages en divisant le nombre total d’éléments par le nombre d’éléments par page et en arrondissant ce résultat au nombre entier supérieur.

Code complet en PHP pour compter le nombre total de pages disponibles

				
					
 <?php
//Déclarer les variablesde pagination
$afficher = 2;
//Compter le nombre total de biens
$sql ='SELECT bienID FROM bien';
$req =$cnx->prepare($sql);
$req->execute();
$count = $req->rowCount();
//Calculer le nombre de page maxi
$totalPage = ceil($count/$afficher);
//Définir la variable numPage
if(!isset($_GET['page']) || !ctype_digit($_GET['page']) || $_GET['page']<1){
$numPage = 1;
}elseif($_GET['page']>$totalPage){
$numPage = $totalPage;
}else{
$numPage = $_GET['page'];
}

//Définir le focus
$focus = ($numPage - 1)*$afficher;
$sql = "SELECT * FROM bien ORDER BY bienID DESC LIMIT $focus,$afficher";
$req = $cnx->prepare($sql);
$req->execute();
while($data = $req->fetch(PDO::FETCH_ASSOC)){
?>

Implémenter pagination PHP

Pour afficher la pagination, vous devrez générer des liens qui permettent à l’utilisateur de naviguer entre les différentes pages. Cela implique généralement de calculer le nombre total de pages disponibles et d’afficher des liens pour chaque page.

Voici comment vous pouvez mettre en place la pagination en PHP :

Étapes pour afficher la pagination

Calculer le nombre total de pages

Vous devez d’abord déterminer combien de pages seront nécessaires pour afficher tous les éléments.

Afficher les liens de pagination

Générer des liens pour chaque page afin que l’utilisateur puisse naviguer entre elles.

Code complet

Voici code complet qui inclut la connexion à la base de données, le calcul du nombre total de pages, l’affichage des éléments avec pagination, et l’affichage des liens de pagination.

				
					
 <?php
session_start();
 if (isset($_SESSION['pseudo'])) {
     $pseudo = $_SESSION['pseudo'];
 } else {
     header('location:../index.php');
 }
 include('cnx/cnx.php');
 ?>
<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.rll-youtube-player .play{--wpr-bg-8540047b-348a-4c07-adfd-6eb9a251db7c: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-8540047b-348a-4c07-adfd-6eb9a251db7c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"8540047b-348a-4c07-adfd-6eb9a251db7c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<!--<p><a href="../session-out.php" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Se déconnecter</a></p>-->
<article>
<div id="boxBricks">
<?php
 //Déclarer les variablesde pagination
 $afficher = 2;
 $afficherNumPage = 5;
 //Compter le nombre total de biens
 $sql = 'SELECT bienID FROM bien';
 $req = $cnx->prepare($sql);
 $req->execute();
 $count = $req->rowCount();
 //Calculer le nombre de page maxi
 $totalPage = ceil($count / $afficher);
 //Définir la variable numPage
 if (!isset($_GET['page']) || !ctype_digit($_GET['page']) || $_GET['page'] < 1) {
     $numPage = 1;
 } elseif ($_GET['page'] > $totalPage) {
     $numPage = $totalPage;
 } else {
     $numPage = $_GET['page'];
 }
 //Définir la pagination
 $pagination = '';
 for ($i = $numPage - $afficherNumPage;$i < $numPage;$i++) {
     if ($i > 0) {
         $pagination .= '<a href="index.php?page=&#039;.$i.&#039;" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">'.$i.'</a>';
     }
 }
 $pagination .= $numPage.'&nbsp;';
 for ($j = $numPage + 1;$j <= $totalPage;$j++) {
     $pagination .= '<a href="index.php?page=&#039;.$j.&#039;" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">'.$j.'</a> &nbsp;';
 }//Définir le focus
 $focus = ($numPage - 1) * $afficher;
 $sql = "SELECT * FROM bien ORDER BY bienID DESC LIMIT $focus,$afficher";
 $req = $cnx->prepare($sql);
 $req->execute();
 while ($data = $req->fetch(PDO::FETCH_ASSOC)) {
     ?>
<div class="bricks">
<div data-bg="http://ergonomie/images/" class="imgBricks rocket-lazyload" style=""></div>
<!--<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"" height="" data-lazy-src="ergonomie/images/<?=$data['image'];? width="><noscript><img decoding="async" src="ergonomie/images/<?=$data['image'];? width="" height=""></noscript>" alt="<?=$data['bien'];?>">-->
<h4><?=$data['bien'];?></h4>
</div>
<?php
 }
 ?>
</div>
<div id="pagination">
<p><?=$pagination;?></p>
</div>
</article>
</body>
</html>

Résultat d’affichage :

Le résultat affiché sera une page avec une grille de biens immobiliers. En bas de la liste, des liens de pagination permettent de naviguer entre les pages. Les liens de pagination s’ajustent en fonction de la page actuelle et du nombre total de pages, offrant ainsi une interface utilisateur fluide et fonctionnelle.

Question : Comment pouvez-vous styliser et mettre en forme les liens de pagination pour les rendre attrayants et fonctionnels sur une page web ?

Styliser pagination admin

Pour mettre en forme la pagination, vous pouvez utiliser du CSS pour styliser les liens de pagination et les rendre attrayants et faciles à utiliser. Voici un exemple de code CSS pour la pagination, ainsi que la mise en forme des éléments HTML associés.

CSS pour la Pagination

Ajoutez le CSS suivant à votre fichier style.css pour styliser la pagination :

				
					
 /**PAGINATION ****/
#pagination{
width: 75%;
background-color: rgba(255,255,255,0.1);
border-radius: 10px;
margin-top: 20px;
margin-bottom: 20px;
}
#pagination a , #pagination span {
display: inline-flex;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #2c3e50;
color: #ecf0f1;
padding: 4px;
font-size: 14px;
margin: 5px;
justify-content: center;
align-items: center;
transition: 0.5s;
}
#pagination a:hover{
text-decoration:none;
background-color: #7f8f8d;
}
#pagination span{
background-color: #7f8f8d;
}
/**PAGINATION ****/

Résultat d’affichage

Le résultat affiché sera une section de pagination élégante et fonctionnelle :

Résumé de l'index admin

Voici un résumé sous forme de tableau pour le chapitre concernant la gestion et l’affichage des biens avec pagination :

Section	Description
Construire l’index de la zone admin	Créez la page d’accueil pour la zone admin, où les biens seront affichés. Incluez les éléments de base comme le header et le footer.
Mettre en forme l’index de la zone admin	Appliquez des styles CSS pour améliorer l’apparence de la page d’accueil admin. Assurez-vous que la mise en page est cohérente avec le design global.
Insérer les biens	Ajoutez les données des biens dans la base de données. Assurez-vous que les données sont correctement insérées pour un affichage ultérieur.
Afficher l’ensemble des biens	Récupérez et affichez tous les biens depuis la base de données. Assurez-vous que les informations sont correctement récupérées et affichées.
Ajouter une limite à notre requête SQL	Implémentez la pagination en limitant le nombre d’enregistrements affichés par page. Utilisez la clause LIMIT dans votre requête SQL.
Mettre en place un paramètre page dans l’URL	Ajoutez un paramètre page dans l’URL pour gérer la pagination. Permet aux utilisateurs de naviguer entre les différentes pages de biens.
Compter le nombre total de pages disponibles	Calculez le nombre total de pages nécessaires en fonction du nombre total de biens et du nombre d’éléments à afficher par page.
Afficher la pagination	Générer des liens de pagination permettant à l’utilisateur de naviguer entre les pages. Assurez-vous que les liens sont fonctionnels et bien stylisés.
Afficher correctement l’image des biens	Assurez-vous que les images des biens sont correctement affichées en utilisant les balises HTML appropriées et en vérifiant les chemins des images.

Tableau 1 : résume les étapes essentielles pour gérer et afficher les biens avec une fonctionnalité de pagination sur une page web admin.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment créer un index pour la zone admin?

Pour créer un index de zone admin, commencez par créer un fichier index.php dans lequel vous vérifierez la session utilisateur pour garantir que seuls les utilisateurs connectés peuvent accéder. Utilisez du PHP pour vérifier la session, et du HTML/CSS pour structurer et styliser la page. Ajoutez un design cohérent en utilisant un fichier CSS externe pour améliorer l’apparence de la page.

Comment vérifier la connexion utilisateur en PHP?

Utilisez la fonction session_start() pour démarrer la session PHP. Vérifiez si une variable de session, par exemple $_SESSION[‘pseudo’], est définie. Si elle l’est, l’utilisateur est connecté; sinon, redirigez-le vers la page de connexion à l’aide de header(‘location:../index.php’). Cela sécurise votre zone admin en s’assurant que seuls les utilisateurs authentifiés accèdent à la page.

Comment afficher les biens immobiliers en PHP?

Pour afficher les biens immobiliers, connectez-vous à la base de données avec PDO ou MySQLi. Utilisez une requête SQL pour sélectionner les biens, puis parcourez les résultats avec un while pour générer du HTML qui affichera chaque bien avec son image et son nom. Assurez-vous que les chemins des images sont corrects pour que celles-ci s’affichent correctement sur la page.

Comment implémenter la pagination en PHP?

Implémentez la pagination en utilisant la clause LIMIT et OFFSET dans votre requête SQL. Comptez le nombre total de biens et divisez-le par le nombre d’éléments par page pour obtenir le nombre total de pages. Utilisez des liens dynamiques dans l’URL pour naviguer entre les pages, ajustant l’OFFSET en conséquence pour afficher les bons éléments.

Comment styliser la page admin avec CSS?

Stylisez votre page admin en ajoutant un fichier CSS qui définit les styles pour les éléments HTML. Utilisez des classes pour vos blocs de contenu, images, et liens de pagination, en appliquant des propriétés telles que la largeur, la marge, les couleurs de fond et les effets de survol pour améliorer l’ergonomie et l’apparence de votre interface d’administration.

Conclusion

En appliquant ces techniques, vous pouvez construire une interface d’administration sécurisée et attrayante. Quel aspect de votre zone admin mérite encore d’être amélioré?

Créer et Styliser une Interface d’Administration en PHP avec Pagination