Pour améliorer le design de votre application, nous allons ajouter un layout de base et intégrer la bibliothèque graphique Tailwind CSS.
Créer un layout de base :
Créez un fichier layout.php pour un layout réutilisable :
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
<script src="<https://cdn.tailwindcss.com>"></script>
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-4">
<header class="mb-4">
<h1 class="text-3xl font-bold">Gestion des Utilisateurs</h1>
<nav>
<a href="index.php" class="text-blue-500 hover:underline">Inscription</a>
<a href="users.php" class="text-blue-500 hover:underline ml-4">Liste des Utilisateurs</a>
</nav>
</header>
<main>
<?php echo $content ?>
</main>
</div>
</body>
</html>
Dans index.php et users.php, utilisez le layout :
<?php ob_start(); ?>
<!-- code de la page, retirez le <html>, <head>, <body> -->
<?php
$title = "Titre de la page";
$content = ob_get_clean();
include 'layout.php';
Mise en page de base :
Utilisez les classes Tailwind CSS pour styliser les éléments de votre page index.php :
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold mb-4">Inscription Utilisateur</h2>
<form action="register.php" method="post" class="bg-white p-4 shadow-md rounded-lg">
<div class="mb-4">
<label for="username" class="block text-gray-700">Nom d'utilisateur:</label>
<input type="text" name="username" class="w-full p-2 border border-gray-300 rounded mt-1">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700">Email:</label>
<input type="email" name="email" class="w-full p-2 border border-gray-300 rounded mt-1">
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700">Mot de passe:</label>
<input type="password" name="password" class="w-full p-2 border border-gray-300 rounded mt-1">
</div>
<input type="submit" value="S'inscrire" class="bg-blue-500 text-white p-2 rounded mt-2">
</form>
</div>
Affichage des utilisateurs :
Utilisez également Tailwind CSS pour styliser la liste des utilisateurs dans users.php :
<div class="container mx-auto p-4">
<h2 class="text-2xl font-bold mb-4">Liste des Utilisateurs</h2>
<?php if ($result->num_rows > 0) : ?>
<table class='table-auto w-full bg-white shadow-md rounded-lg'>
<thead>
<tr>
<th class='px-4 py-2'>ID</th>
<th class='px-4 py-2'>Nom d'utilisateur</th>
<th class='px-4 py-2'>Email</th>
</tr>
</thead>
<tbody>
<?php while($row = $result->fetch_assoc()) : ?>
<tr>
<td class='border px-4 py-2'><?php echo $row["id"]; ?></td>
<td class='border px-4 py-2'><?php echo $row["username"]; ?></td>
<td class='border px-4 py-2'><?php echo $row["email"]; ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<?php else : ?>
<p class='text-red-500'>0 résultats</p>
<?php endif; ?>
</div>
Dans index.php :
<h2 class="text-2xl font-bold mb-4">Inscription Utilisateur</h2>
<form action="register.php" method="post" class="bg-white p-4 shadow-md rounded-lg">
<div class="mb-4">
<label for="username" class="block text-gray-700">Nom d'utilisateur:</label>
<input type="text" name="username" class="w-full p-2 border border-gray-300 rounded mt-1">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700">Email:</label>
<input type="email" name="email" class="w-full p-2 border border-gray-300 rounded mt-1">
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700">Mot de passe:</label>
<input type="password" name="password" class="w-full p-2 border border-gray-300 rounded mt-1">
</div>
<input type="submit" value="S'inscrire" class="bg-blue-500 text-white p-2 rounded mt-2">
</form>
En suivant ces étapes, vous aurez une application web simple et esthétique de gestion des utilisateurs, avec une base de données MySQL et un design modernisé grâce à Tailwind CSS. Continuez à explorer et à améliorer vos compétences en PHP et MySQL en ajoutant de nouvelles fonctionnalités et en perfectionnant le design de votre application. Bonne programmation ! 🚀