Config.

php :

<?php
$servername = "localhost"; // L’adresse de votre serveur de base de don
nées (sur votre ordinateur)
$username = "root"; // Le nom d’utilisateur par défaut de MySQL a
vec XAMPP
$password = ""; // Le mot de passe par défaut de MySQL avec X
AMPP (vide)
$dbname = "Jxker"; // Le nom de la base de données que vous avez
créée

Try {
// Tente de se connecter à la base de données
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username,
$password);
// Définit le mode d’erreur de PDO sur Exception (pour une meilleur
e gestion des erreurs)
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// echo “Connexion réussie”; // Vous pouvez décommenter ceci pour t
ester la connexion une fois
} catch(PDOException $e) {
// En cas d’échec de connexion, affiche un message d’erreur
Echo "Connexion échouée: " . $e->getMessage();
}
?>

[Link] :

<?php
Include '[Link]'; // Inclut le fichier de connexion à la base de do
nnées

$marque_val = '';
$email_val = '';
$annee_val = '';
$kilometrage_val = '';
$prix_val = '';
$photo_src = ''; // Initialisation de photo_src à vide par défaut
$uploadOk = 1; // Variable pour vérifier si l'upload de la photo est OK
$photo_uploaded_successfully = false; // Initialisation de la variable
à false
$form_submission_success = false; // Nouvelle variable pour suivre le s
uccès global de l'enregistrement

If (isset($_POST['submit'])) { // Si le formulaire a été soumis

$marque = $_POST['marque'];
$email = $_POST['email'];
 $annee = $_POST['annee'];
$kilometrage = $_POST['kilometrage'];
$prix = $_POST['prix'];

// --- Gestion de l'upload de la photo ---

$target_dir = "uploads/"; // Dossier où les photos seront stockées
$target_file = ''; // Initialiser target_file pour éviter les notic
es

// Vérifier si un fichier a été sélectionné pour l'upload ET qu'il

n'y a pas d'erreur initiale (ex: taille trop grande avant même le trait
ement PHP)
If (isset($_FILES["photo"]) && $_FILES["photo"]["error"] == UPLOAD_
ERR_OK) {
$original_file_name = basename($_FILES["photo"]["name"]);
$target_file = $target_dir . $original_file_name;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXT
ENSION));

// Vérifier si le fichier image est une vraie image

$check = getimagesize($_FILES["photo"]["tmp_name"]);
If ($check !== false) {
// Le fichier est une image
} else {
Echo "<p style='color:red;'>Le fichier n'est pas une image.
</p>";
$uploadOk = 0;
}

// Vérifier si le fichier existe déjà (cela pourrait être une e

rreur ou une indication de renommage si vous le souhaitez)
If (file_exists($target_file)) {
Echo "<p style='color:red;'>Désolé, cette photo existe déjà
. Veuillez la renommer ou en choisir une autre.</p>";
$uploadOk = 0;
}

// Vérifier la taille du fichier (ici, 2MB = 2000000 bytes)

If ($_FILES["photo"]["size"] > 100000000) {
Echo "<p style='color:red;'>Désolé, votre fichier est trop
grand (max 2MB).</p>";
$uploadOk = 0;
}

// Autoriser certains formats de fichier

If ($imageFileType != "jpg" && $imageFileType != "png" && $imag
eFileType != "jpeg" && $imageFileType != "gif") {
Echo "<p style='color:red;'>Désolé, seuls les fichiers JPG,
JPEG, PNG & GIF sont autorisés.</p>";
 $uploadOk = 0;
}

// Tenter de déplacer le fichier si tout est OK jusqu'à présent

pour l'upload
If ($uploadOk == 1) {
If (move_uploaded_file($_FILES["photo"]["tmp_name"], $targe
t_file)) {
$photo_uploaded_successfully = true; // Le déplacement
a réussi
} else {
Echo "<p style='color:red;'>Désolé, il y a eu une erreu
r inconnue lors du téléchargement de votre fichier.</p>";
$photo_uploaded_successfully = false; // Le déplacement
a échoué
$target_file = ''; // Pas de chemin si le déplacement é
choue
}
} else {
// Si $uploadOk est 0 à cause d'une des validations, l'uplo
ad de la photo a échoué.
Echo "<p style='color:red;'>Désolé, la photo n'a pas pu êtr
e téléchargée à cause des erreurs ci-dessus.</p>";
$photo_uploaded_successfully = false;
$target_file = ''; // Pas de chemin si l'upload a échoué
}
} else {
// Aucune photo sélectionnée ou erreur d'upload initiale (UPLOA
D_ERR_NO_FILE, etc.)
// Considérer que l'opération pour la photo est un "succès" si
aucune photo n'est requise
$photo_uploaded_successfully = true;
$target_file = ''; // S'assurer que le chemin est vide si pas d
e photo
}

// Tenter l'insertion en base de données SEULEMENT si la photo a ét

é gérée avec succès (ou n'était pas présente)
If ($photo_uploaded_successfully) {
Try {
$stmt = $conn->prepare("INSERT INTO automobiles (marque, em
ail, annee, kilometrage, prix, photo_path) VALUES (?, ?, ?, ?, ?, ?)");
$stmt->execute([$marque, $email, $annee, $kilometrage, $pri
x, $target_file]);
Echo "<p style='color:green;'>Voiture ajoutée avec succès!
</p>";
$form_submission_success = true; // Indique un succès globa
l
 } catch (PDOException $e) {
// Gérer les erreurs d'insertion en base de données
Echo "<p style='color:red;'>Erreur lors de l'ajout de la vo
iture: " . $e->getMessage() . "</p>";
$form_submission_success = false;
// Garder les valeurs pour permettre à l'utilisateur de cor
riger
$marque_val = $_POST['marque'];
$email_val = $_POST['email'];
$annee_val = $_POST['annee'];
$kilometrage_val = $_POST['kilometrage'];
$prix_val = $_POST['prix'];
$photo_src = ''; // Pas d'aperçu de photo si l'insertion DB
échoue
}
} else {
// Si la photo n'a pas été uploadée avec succès, l'enregistreme
nt global échoue
$form_submission_success = false;
// Garder les valeurs dans le formulaire pour permettre la corr
ection
$marque_val = $_POST['marque'];
$email_val = $_POST['email'];
$annee_val = $_POST['annee'];
$kilometrage_val = $_POST['kilometrage'];
$prix_val = $_POST['prix'];
$photo_src = ''; // Pas d'aperçu de photo si l'upload échoue
}

// Logique pour l'affichage des détails à droite ET la réinitialisa

tion du formulaire
If ($form_submission_success) {
// Si succès, afficher les informations enregistrées à droite
// Note: Pour être strict, vous devriez les récupérer de la bas
e de données,
// mais pour une saisie directe, utiliser les valeurs POST est
acceptable ici.
$marque_val_display = $marque;
$email_val_display = $email;
$annee_val_display = $annee;
$kilometrage_val_display = $kilometrage;
$prix_val_display = $prix;
$photo_src_display = $target_file; // Le chemin du fichier uplo
adé avec succès

// Réinitialiser les variables du formulaire pour vider les cha

mps
$marque_val = '';
$email_val = '';
 $annee_val = '';
$kilometrage_val = '';
$prix_val = '';
$photo_src = ''; // Vider l'aperçu de la photo après succès

} else {
// Si échec, les champs du formulaire conservent les valeurs sa
isies par l'utilisateur
// Et la partie droite reste vide ou affiche l'état avant la te
ntative
$marque_val_display = '';
$email_val_display = '';
$annee_val_display = '';
$kilometrage_val_display = '';
$prix_val_display = '';
$photo_src_display = ''; // Pas d'aperçu pour l'affichage si éc
hec
}

} else {
// Premier chargement de la page (pas de soumission de formulaire)
// Les variables d'affichage restent vides
$marque_val_display = '';
$email_val_display = '';
$annee_val_display = '';
$kilometrage_val_display = '';
$prix_val_display = '';
$photo_src_display = '';
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ajouter des voitures – [Link]</title>
<link rel="stylesheet" href="[Link]">
<link rel="stylesheet" href="asset/frontawesome/css/[Link]">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="logo">[Link]</div>
<ul>
<li><a href="[Link]"><i class="fas fa-tachometer-
alt"></i>Tableau de bord</a></li>
<li class="active">Ajouter des voitures</li>
<li><a href="[Link]">Listes des voitures</a></li>
<li><a href="#">A propos</a></li>
</ul>
 </div>
<div class="main-content">
<h2>Ajouter des voitures</h2>
<div class="add-car-section">
<div class="add-car-form-container">
<form method="POST" action="" enctype="multipart/
form-data" id="addCarForm">
<label>Marque: <input type="text" name="marque"
value="<?php echo htmlspecialchars($marque_val); ?>" required onkeyu
p="updateDisplay()" ></label><br>
<label>Année: <input type="number" name="annee"
value="<?php echo htmlspecialchars($annee_val); ?>" required onkeyu
p="updateDisplay()"></label><br>
<label>Kilométrage: <input type="number" name="
kilometrage" value="<?php echo htmlspecialchars($kilometrage_val); ?>"
required onkeyup="updateDisplay()"></label><br>
<label>Email: <input type="email" name="email"
value="<?php echo htmlspecialchars($email_val); ?>" required onkeyu
p="updateDisplay()"></label><br>
<label>Prix: <input type="number" step="0.01" n
ame="prix" value="<?php echo htmlspecialchars($prix_val); ?>" required
onkeyup="updateDisplay()"></label><br>
<label>Photo: <input type="file" name="photo" i
d="photoInput" onchange="previewPhoto()"></label><br>
<input type="submit" name="submit" value="Valid
er">
</form>
</div>
<div class="added-car-details">
<h3>Détails de la voiture</h3>
<p>Marque: <span id="displayMarque"><?php echo html
specialchars($marque_val_display); ?></span></p>
<p>Années: <span id="displayAnnee"><?php echo htmls
pecialchars($annee_val_display); ?></span></p>
<p>Kilométrage: <span id="displayKilometrage"><?php
echo htmlspecialchars($kilometrage_val_display); ?></span></p>
<p>Email: <span id="displayEmail"><?php echo htmlsp
ecialchars($email_val_display); ?></span></p>
<p>Prix: <span id="displayPrix"><?php echo htmlspec
ialchars($prix_val_display); ?></span></p>
<div class="photo-display">
<img id="previewImage" src="<?php echo htmlspec
ialchars($photo_src_display); ?>" alt="Photo de la voiture" style="<?
php echo empty($photo_src_display) ? 'display:none;' : ''; ?>">
<span id="noPhotoText" style="<?php echo !
empty($photo_src_display) ? 'display:none;' : ''; ?>">Photo</span>
</div>
</div>
</div>
 </div>
</div>

<script>
// Cette fonction met à jour les informations affichées à droit
e du formulaire
// Note: Cette fonction s'exécute quand l'utilisateur tape dans
les champs.
// Les valeurs affichées ici sont temporaires et ne reflètent p
as le succès/échec de l'enregistrement.
Function updateDisplay() {
[Link]('displayMarque').innerText = docume
[Link]('input[name="marque"]').value;
[Link]('displayAnnee').innerText = documen
[Link]('input[name="annee"]').value;
[Link]('displayKilometrage').innerText = d
[Link]('input[name="kilometrage"]').value;
[Link]('displayEmail').innerText = documen
[Link]('input[name="email"]').value;
[Link]('displayPrix').innerText = document
.querySelector('input[name="prix"]').value;
}

// Cette fonction prévisualise la photo sélectionnée avant l'up

load
Function previewPhoto() {
Const photoInput = [Link]('photoInput');
Const previewImage = [Link]('previewImage'
);
Const noPhotoText = [Link]('noPhotoText');

If ([Link] && [Link][0]) {

Const reader = new FileReader(); // Objet pour lire le
contenu des fichiers
[Link] = function(e) {
[Link] = [Link]; // Définit la s
ource de l'image sur l'aperçu
[Link] = 'block'; // Affiche l'
image
[Link] = 'none'; // Cache le tex
te "Photo"
};
[Link]([Link][0]); // Lit le fi
chier comme une URL de données
} else {
// Si aucune photo n'est sélectionnée ou si elle est re
tirée
[Link] = '';
[Link] = 'none';
 [Link] = 'block';
}
}

// Ce bloc s'exécute APRÈS le chargement de la page et la soumi

ssion du formulaire
<?php if (isset($_POST['submit']) && $form_submission_success)
{ ?>
// Le formulaire a été soumis avec succès et l'enregistreme
nt est passé
// Réinitialise les champs du formulaire après le succès
[Link]('addCarForm').reset();
// Réinitialise l'aperçu de la photo (puisque le formulaire
est vide)
[Link]('previewImage').src = '';
[Link]('previewImage').[Link] = 'no
ne';
[Link]('noPhotoText').[Link] = 'blo
ck';

// Puisque la partie droite a déjà été mise à jour par PHP

avant le JS,
// il n'est pas nécessaire de la vider ici. Elle affiche le
s données enregistrées.

<?php } else if (isset($_POST['submit']) && !

$form_submission_success) { ?>
// Le formulaire a été soumis, mais l'enregistrement a écho
ué.
// On ne réinitialise PAS les champs, ils conservent les va
leurs saisies.
// On s'assure que la partie droite n'affiche RIEN (ou l'ét
at initial).
[Link]('displayMarque').innerText = '';
[Link]('displayAnnee').innerText = '';
[Link]('displayKilometrage').innerText = '
';
[Link]('displayEmail').innerText = '';
[Link]('displayPrix').innerText = '';
[Link]('previewImage').src = '';
[Link]('previewImage').[Link] = 'no
ne';
[Link]('noPhotoText').[Link] = 'blo
ck';

// Pour l'aperçu initial de la photo dans le formulaire si

l'utilisateur a sélectionné un fichier
// et que l'upload a échoué (pour qu'il puisse resélectionn
er)
 Const photoInputOnFail = [Link]('photoInpu
t');
Const previewImageOnFail = [Link]('preview
Image');
Const noPhotoTextOnFail = [Link]('noPhotoT
ext');

If ([Link] && [Link][0]) {

Const readerOnFail = new FileReader();
[Link] = function(e) {
[Link] = [Link];
[Link] = 'block';
[Link] = 'none';
};
[Link]([Link][0]);
}

<?php } else { ?>

// Premier chargement de la page ou après un rafraîchisseme
nt sans soumission
// Assurez-vous que la partie droite est vide
[Link]('displayMarque').innerText = '';
[Link]('displayAnnee').innerText = '';
[Link]('displayKilometrage').innerText = '
';
[Link]('displayEmail').innerText = '';
[Link]('displayPrix').innerText = '';
[Link]('previewImage').src = '';
[Link]('previewImage').[Link] = 'no
ne';
[Link]('noPhotoText').[Link] = 'blo
ck';
<?php } ?>

</script>
</body>
</html>

[Link] :

<?php
Include '[Link]'; // Inclut le fichier de connexion

If (isset($_GET['id'])) { // Si un ID est passé dans l'URL

$id = $_GET['id'];
$stmt = $conn->prepare("DELETE FROM automobiles WHERE id = ?"); //
Prépare la requête de suppression
 $stmt->execute([$id]); // Exécute la requête
Echo "Voiture supprimée avec succès!";

// Rediriger vers la page de liste après la suppression

Header('Location: [Link]');
Exit(); // Important pour arrêter l'exécution du script après la re
direction
} else {
Echo "Aucun ID de voiture spécifié pour la suppression.";
}
?>

[Link] :

<?php
Include '[Link]';

// --- Compteur de voitures ---

$countStmt = $conn->query("SELECT COUNT(*) AS total_cars FROM automobil
es");
$totalCars = $countStmt->fetch(PDO::FETCH_ASSOC)['total_cars'];

// --- Données pour le graphique (nombre de voitures par année) ---

// Récupère l'année et le compte des voitures pour chaque année, trié p
ar année
$graphDataStmt = $conn->query("SELECT annee, COUNT(*) AS car_count FROM
automobiles GROUP BY annee ORDER BY annee ASC");
$graphData = $graphDataStmt->fetchAll(PDO::FETCH_ASSOC);

// Prépare les données dans un format utilisable par [Link]

$graphLabels = []; // Années pour l'axe X
$graphValues = []; // Nombre de voitures pour l'axe Y
Foreach ($graphData as $data) {
$graphLabels[] = $data['annee'];
$graphValues[] = $data['car_count'];
}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tableau de Bord – [Link]</title>
<link rel="stylesheet" href="[Link]">
<script src=[Link]
</head>
<body>
 <div class="container">
<div class="sidebar">
<div class="logo">[Link]</div>
<ul>
<li class="active">Tableau de bord</li>
<li><a href="[Link]">Ajouter des voitures</a></li>
<li><a href="[Link]">Listes des voitures</a></li>
<li><a href="#">A propos</a></li>
</ul>
</div>
<div class="main-content">
<div class="dashboard-widgets">
<div class="widget car-count">
<span class="count-number">0<?php echo $totalCars;
?></span>
<p>Nombre des voitures Disponibles</p>
</div>
<div class="widget graph-container">
<canvas id="carsByYearChart"></canvas>
</div>
<div class="car-image">
<img src="voiture_sport.png" alt="Voiture"> </div>
</div>
</div>
</div>
<script>
// Code JavaScript pour créer le graphique avec [Link]
Const ctx = [Link]('carsByYearChart').getConte
xt('2d');
New Chart(ctx, {
Type: 'bar', // Type de graphique à barres
Data: {
Labels: <?php echo json_encode($graphLabels); ?>, // An
nées des voitures
Datasets: [{
Label: 'Nombre de voitures',
Data: <?php echo json_encode($graphValues); ?>, //
Compte des voitures par année
backgroundColor: 'rgba(75, 192, 192, 0.6)', // Coul
eur des barres
borderColor: 'rgba(75, 192, 192, 1)', // Couleur de
la bordure des barres
borderWidth: 1
}]
},
Options: {
Scales: {
Y: {
beginAtZero: true, // L'axe Y commence à zéro
 ticks: {
stepSize: 1 // Les tiques de l'axe Y sont d
es entiers (nombre de voitures)
}
}
},
Responsive: true,
maintainAspectRatio: false, // Permet de contrôler la t
aille du graphique via CSS
plugins: {
legend: {
display: false // Cache la légende si vous ne v
oulez qu'un seul dataset
}
}
}
});
</script>
</body>
</html>

[Link]

<?php
Include '[Link]';

// Pagination settings
$results_per_page = 3; // Nombre de voitures à afficher par page

// Déterminer le numéro de page actuel

If (isset($_GET['page']) && is_numeric($_GET['page'])) {
$page = $_GET['page'];
} else {
$page = 1; // Page par défaut
}

// Déterminer le point de départ pour la clause LIMIT de SQL

$offset = ($page - 1) * $results_per_page;

// --- Recherche (Search) ---

$search_query = '';
$start_year = '';
$end_year = '';
$sql_conditions = []; // Tableau pour stocker toutes les conditions WHE
RE
$params = []; // Tableau pour stocker tous les paramètres PDO
// 1. Recherche par mot-clé (marque)
If (isset($_GET['search']) && !empty(trim($_GET['search']))) {
$search_query = trim($_GET['search']);
$sql_conditions[] = "(marque LIKE ?)"; // Ajout d'une condition pou
r la marque
$params[] = "%$search_query%"; // Ajout du paramètre pour la marque
}

// 2. Recherche par intervalle d'années

If (isset($_GET['start_year']) && !empty(trim($_GET['start_year']))) {
$start_year = trim($_GET['start_year']);
// Validation simple pour s'assurer que c'est un nombre
If (is_numeric($start_year)) {
$sql_conditions[] = "annee ≥ ?"; // Ajout d'une condition pour
l'année de début
$params[] = $start_year;
}
}

If (isset($_GET['end_year']) && !empty(trim($_GET['end_year']))) {

$end_year = trim($_GET['end_year']);
// Validation simple pour s'assurer que c'est un nombre
If (is_numeric($end_year)) {
$sql_conditions[] = "annee <= ?"; // Ajout d'une condition pour
l'année de fin
$params[] = $end_year;
}
}

// Construire la clause WHERE complète

$where_clause = '';
If (!empty($sql_conditions)) {
$where_clause = " WHERE " . implode(" AND ", $sql_conditions); // C
ombine toutes les conditions avec AND
}

// Compter le nombre total d'enregistrements (avec toutes les condition

s de recherche)
$stmt_total = $conn->prepare("SELECT COUNT(*) AS total FROM automobiles
" . $where_clause);
$stmt_total->execute($params);
$total_results = $stmt_total->fetch(PDO::FETCH_ASSOC)['total'];
$total_pages = ceil($total_results / $results_per_page);

// Récupérer les résultats de la base de données avec LIMIT, OFFSET et

les conditions de recherche
// L'ID est toujours sélectionné car il est nécessaire pour les liens M
odifier/Supprimer.
$sql = "SELECT id, marque, email, annee, kilometrage, prix, photo_path
FROM automobiles" . $where_clause . " LIMIT ?, ?";
$stmt = $conn->prepare($sql);

// Ajouter les paramètres de pagination aux paramètres existants

$params[] = $offset;
$params[] = $results_per_page;

// Lier tous les paramètres

For ($i = 0; $i < count($params); $i++) {
// Les deux derniers paramètres de $params sont toujours $offset et
$results_per_page, qui sont INT
If ($i == count($params) - 2 || $i == count($params) - 1) {
$stmt->bindParam($i + 1, $params[$i], PDO::PARAM_INT);
} else {
$stmt->bindParam($i + 1, $params[$i]); // Les autres paramètres
(chaînes ou nombres pour les années)
}
}

$stmt->execute();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Listes des voitures - [Link]</title>
<link rel="stylesheet" href="[Link]">
<style>
/* Styles spécifiques pour le design de la page Listes des voit
ures */
.search-section {
Margin-bottom: 10px;
Padding: 15px;
Border: 1px solid #ddd;
Border-radius: 8px;
Background-color: #f9f9f9;
Display: flex; /* Utilisation de flexbox pour l'alignement
*/
Align-items: flex-end; /* Aligner les éléments en bas si le
urs hauteurs sont différentes */
Flex-wrap: wrap; /* Permettre aux éléments de passer à la l
igne si l'espace est insuffisant */
Gap: 10px; /* Espace entre les éléments */
}
.search-section .form-group {
Display: flex;
Flex-direction: column; /* Chaque groupe (label + input) en
colonne */
 }
.search-section label {
Margin-bottom: 5px; /* Espace sous le label */
Font-weight: bold;
}
.search-section input[type='text'],
.search-section input[type='number'] {
Padding: 8px;
Border: 1px solid #ccc;
Border-radius: 4px;
Width: 150px; /* Ajuster la largeur des champs de saisie */
}
.search-section input[type='submit'] {
Padding: 8px 15px;
Background-color: #83AE92; /* Bleu des boutons */
Color: white;
Border: none;
Border-radius: 4px;
Cursor: pointer;
Height: 38px; /* Ajuster la hauteur pour s'aligner avec les
champs */
}
.search-section input[type='submit']:hover {
Background-color: #02503A;
}

Table {
Width: 100%;
Border-collapse: collapse;
Margin-top: 20px;
}
Table th, table td {
Border: 1px solid #ddd;
Padding: 8px;
Text-align: center;
}
Table th {
Background-color: #f2f2f2;
}
Table img {
Max-width: 80px; /* Ajustez la taille de l'image dans le ta
bleau */
Height: auto;
Display: block;
Margin: auto; /* Centrer l'image si elle est petite */
}
.pagination {
Margin-top: 20px;
Text-align: center;
 }
.pagination a, .pagination span {
Display: inline-block;
Padding: 8px 16px;
Text-decoration: none;
Color: #007bff;
Border: 1px solid #ddd;
Margin: 0 4px;
Border-radius: 4px;
}
.pagination a:hover {
Background-color: #f2f2f2;
}
.pagination .current-page {
Background-color: #007bff;
Color: white;
Border: 1px solid #007bff;
}
.pagination .disabled {
Color: #ccc;
Pointer-events: none; /* Désactiver les clics */
Cursor: default;
}

/* Styles pour les boutons Modifier/Supprimer */

.action-buttons {
Display: flex;
Flex-direction: column; /* Aligner les boutons verticalemen
t */
Gap: 5px; /* Espace entre les boutons */
}
.action-buttons a {
Padding: 5px 10px;
Text-decoration: none;
Border-radius: 4px;
Text-align: center;
}
.action-buttons a:first-child { /* Modifier */
Background-color: #83AE92; /* Vert pour modifier */
Color: white;
}
.action-buttons a:last-child { /* Supprimer */
Background-color: #F4AA7D; /* Rouge pour supprimer */
Color: white;
}
.action-buttons a:hover {
Opacity: 0.9;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="logo">[Link]</div>
<ul>
<li><a href="[Link]">Tableau de bord</a></li>
<li><a href="[Link]">Ajouter des voitures</a></li>
<li class="active">Listes des voitures</li>
<li><a href="#">A propos</a></li>
</ul>
</div>
<div class="main-content">
<h2>Listes des voitures</h2>

<div class="search-section">
<form method="GET" action="[Link]" style="display: fl
ex; align-items: flex-end; gap: 10px; flex-wrap: wrap;">
<div class="form-group">
<label for="search_marque">Marque</label>
<input type="text" name="search" id="search_mar
que" placeholder="" value="<?php echo htmlspecialchars($search_query);
?>">
</div>

<div class="form-group">
<label for="start_year">Année</label>
<input type="number" name="start_year" id="star
t_year" placeholder="" value="<?php echo htmlspecialchars($start_year);
?>">
</div>

<div class="form-group">
<label for="end_year">Jusqu'au </label>
<input type="number" name="end_year" id="end_ye
ar" placeholder="" value="<?php echo htmlspecialchars($end_year); ?>">
</div>

<input type="submit" value="Recherche">

</form>
</div>

<?php
Echo "<table>
<thead>
<tr>
<th>Marque</th>
<th>Année</th>
<th>Kilométrage</th>
 <th>Prix</th>
<th>Photo</th>
<th>Actions</th>
</tr>
</thead>
<tbody>";

If ($stmt->rowCount() > 0) {
While ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
Echo "<tr>
<td>" . htmlspecialchars($row['marque']) .
"</td>
<td>" . htmlspecialchars($row['annee']) . "
</td>
<td>" . htmlspecialchars($row['kilometrage'
]) . "</td>
<td>" . htmlspecialchars($row['prix']) . "<
/td>
<td>";
If (!empty($row['photo_path']) && file_exist
s($row['photo_path'])) {
Echo "<img src='" . htmlspecialchars($row['phot
o_path']) . "' alt='Photo voiture'>";
} else {
Echo "N/A";
}
Echo " </td>
<td>
<div class='action-buttons'>
<a href='[Link]?id=" . htmlspec
ialchars($row['id']) . "'>Modifier</a>
<a href='[Link]?id=" . htmlspec
ialchars($row['id']) . "'>Supprimer</a>
</div>
</td>
</tr>";
}
} else {
// Le colspan doit correspondre au nombre de <th> affic
hés (Marque, Année, Kilométrage, Prix, Photo, Actions = 6 colonnes)
Echo "<tr><td colspan='6'>Aucune voiture trouvée.</
td></tr>";
}
Echo "</tbody>
</table>";

// Display pagination links - Positionné comme sur l'image

Echo "<div class='pagination'>";
 // Construire la chaîne de paramètres de recherche pour la
pagination
$pagination_search_params = '';
If (!empty($search_query)) {
$pagination_search_params .= "&search=" . urlencode($se
arch_query);
}
If (!empty($start_year)) {
$pagination_search_params .= "&start_year=" . urlencode
($start_year);
}
If (!empty($end_year)) {
$pagination_search_params .= "&end_year=" . urlencode($
end_year);
}

// Flèche gauche (Précédent)

If ($page > 1) {
Echo "<a href='[Link]?page=" . ($page - 1) . $paginat
ion_search_params . "'>&lt;</a> ";
} else {
Echo "<span class='disabled'>&lt;</span> "; // Pour dés
activer le bouton
}

For ($i = 1; $i <= $total_pages; $i++) {

If ($i == $page) {
Echo "<span class='current-page'>" . $i . "</span>
";
} else {
Echo "<a href='[Link]?page=" . $i . $pagination_s
earch_params . "'>" . $i . "</a> ";
}
}

// Flèche droite (Suivant)

If ($page < $total_pages) {
Echo "<a href='[Link]?page=" . ($page + 1) . $paginat
ion_search_params . "'>&gt;</a> ";
} else {
Echo "<span class='disabled'>&gt;</span> "; // Pour dés
activer le bouton
}
Echo "</div>";
?>
</div>
</div>
</body>
</html>
[Link] :

/* Styles généraux */
Body {
Font-family: Arial, sans-serif;
Margin: 0;
Padding: 0;
Background-color: #f4f4f4; /* Fond gris très clair */
Color: #333; /* Couleur de texte par défaut */
}

.container {
Display: flex; /* Utilise Flexbox pour la mise en page (sidebar + c
ontenu principal) */
Min-height: 100vh; /* La hauteur minimale est 100% de la hauteur de
la fenêtre */
}

/* Barre latérale (Sidebar) */

.sidebar {
Width: 250px;
Background-color: #e0f2e8; /* Vert clair comme sur la photo */
Padding: 20px;
Box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Petite ombre sur le côté
*/
Flex-shrink: 0; /* Empêche la barre latérale de rétrécir */
}

.sidebar .logo {
Font-size: 30px;
Font-weight: bold;
Margin-bottom: 45px;
Color: #333;
Text-align: center;
}

.sidebar ul {
List-style: none; /* Supprime les puces de liste */
Padding: 0;
Margin: 0;
}

.sidebar ul li {
Margin-bottom: 20px;
}
.sidebar ul li a {
Text-decoration: none; /* Supprime le soulignement des liens */
Color: #333;
Font-size: 18px;
Display: block;
Padding: 10px 0;
Transition: all 0.3s ease; /* Animation douce au survol */
}

.sidebar ul li a:hover {
Color: #28a745; /* Vert plus foncé au survol */
}

.sidebar ul [Link] {
Font-weight: bold;
Font-size: 25px;
Color: #f4AA7D; /* Vert plus foncé pour l’élément actif */
}

/* Contenu principal */
.main-content {
Flex-grow: 1; /* Prend tout l’espace restant */
Padding: 20px;
Background-color: #f4f4f4;
}

/* --- Tableau de bord ([Link]) --- */

.dashboard-widgets {
Display: flex; /* Utilise Flexbox pour aligner les éléments */
Justify-content: space-between; /* Espace équitablement les élément
s */
Align-items: center; /* Centre verticalement */
Margin-top: 20px;
Gap: 20px; /* Espace entre les éléments */
}

.widget {
Background-color: #fff;
Padding: 20px;
Border-radius: 8px;
Box-shadow: 0 2px 5px rgba(0,0,0,0.1);
Text-align: center;
}

.car-count {
Background-color: #83AE92; /* Vert clair pour le compteur */
Color: #FAFFF1; /* Texte vert foncé */
Border: 1px solid #c3e6cb;
Flex: 0 0 200px; /* Largeur fixe pour le compteur */
 Height: 150px;
Display: flex;
Flex-direction: column;
Justify-content: center;
Align-items: center;
}

.car-count .count-number {
Font-size: 48px;
Font-weight: bold;
Color: #FAFFF1 ; /* Vert éclatant */
Margin-bottom: 10px;
}

.car-count p {
Font-size: 18px;
Margin: 0;
}

.graph-container {
Flex: 1; /* Prend l’espace restant entre le compteur et l’image */
Max-width: 450px; /* Largeur max pour le graphique */
Height: 250px; /* Hauteur fixe pour le graphique */
Position: relative; /* Nécessaire pour le positionnement absolu si
besoin */
Background-color: #fff;
Padding: 15px;
Box-sizing: border-box; /* Inclut le padding dans la largeur/
hauteur */
}

.car-image {
Flex: 0 0 350px; /* Largeur fixe pour l’image de la voiture */
Text-align: center;
Overflow: hidden; /* Cache les parties de l’image qui dépassent */
Height: 250px; /* Hauteur similaire au graphique pour l’alignement
*/
Display: flex;
Justify-content: center;
Align-items: center;
}

.car-image img {
Max-width: 100%;
Height: auto;
Display: block; /* Supprime l’espace sous l’image */
}
/* --- Formulaires ([Link], [Link]) --- */
H2 {
Margin-bottom: 40px;
Color: #333;
}

Form {
Background-color: #e0f2e8;
Padding: 20px;
Border-radius: 8px;
Box-shadow: 0 2px 5px rgba(0,0,0,0.1);
/*Margin-top: 20px;*/
Max-width: 500px;
Margin-left: auto;
Margin-right: auto;
}

Form label {
Display: block;
Margin-bottom: 10px;
Font-weight: bold;
}

Form input[type="text"],
Form input[type="email"],
Form input[type="number"],
Form input[type="file"] {
Width: calc(100% - 22px);
Padding: 10px;
Margin-top: 5px;
Margin-bottom: 15px;
Border: 1px solid #ccc;
Border-radius: 4px;
Box-sizing: border-box;
}

Form input[type="submit"] {
Background-color: #83AE92; /* Vert foncé pour le bouton */
Color: white;
Padding: 10px 20px;
Border: none;
Border-radius: 5px;
Cursor: pointer;
Font-size: 16px;
Transition: background-color 0.3s ease;
}

Form input[type="submit"]:hover {
Background-color: #02503A; /* Vert encore plus foncé au survol */
}

/* --- Section Ajouter des voitures ([Link]) --- */

.add-car-section {
Display: flex;
Justify-content: space-between;
Align-items: flex-start; /* Aligne les éléments en haut */
Margin-top: 20px;
Gap: 20px; /* Espace entre les deux colonnes */
}

.add-car-form-container {
Flex: 1; /* Prend une part égale de l’espace */
Max-width: 500px; /* Limite la largeur du formulaire */
}

.add-car-details form { /* Réinitialise le style du formulaire pour cet

te section */
Margin: 0;
Box-shadow: none;
Background-color: transparent;
}

.added-car-details {
/*margin-top: 20px;*/
Flex: 1; /* Prend une part égale de l’espace */
Background-color: #fff;
Padding: 20px;
Border-radius: 8px;
Box-shadow: 0 2px 5px rgba(0,0,0,0.1);
Text-align: left;
}

.added-car-details h3 {
Margin-top: 0;
Color: #333;
}

.added-car-details p {
Margin-bottom: 10px;
Font-size: 16px;
}

.added-car-details span {
Font-weight: normal; /* Les valeurs ne sont pas en gras */
Color: #555;
}

.photo-display {
 Width: 100%;
Height: 200px;
Border: 2px dashed #ccc; /* Bordure en pointillés */
Display: flex;
Justify-content: center;
Align-items: center;
Margin-top: 10px;
Color: #aaa; /* Couleur du texte “Photo" */
Overflow: hidden; /* Cache ce qui dépasse si l’image est trop grand
e */
Background-color: #f9f9f9; /* Fond léger pour la zone de photo */
}

.photo-display img {
Max-width: 100%;
Max-height: 100%;
Object-fit: contain; /* L’image est contenue dans la boîte sans êtr
e coupée */
Display: none; /* Caché par défaut, affiché par JS si une photo est
là */
}

/* --- Tableau de liste ([Link]) --- */

Table {
Width: 100%;
Border-collapse: collapse; /* Les bordures des cellules fusionnent
*/
Margin-top: 20px;
Background-color: #fff;
Box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

Table th, table td {

Border: 1px solid #ddd; /* Bordure grise claire */
Padding: 10px;
Text-align: left;
}

Table th {
Background-color: #83AE92; /* Fond vert clair pour les en-têtes */
Color: #333;
Font-weight: bold;
}

Table tr:nth-child(even) { /* Style pour les lignes paires */

Background-color: #f9f9f9;
}

Table tr:hover { /* Style au survol des lignes */

 Background-color: #f1f1f1;
}

Table td img {
Display: block; /* Enlève l’espace sous l’image */
Max-width: 100px; /* Taille max des miniatures */
Height: auto;
Border-radius: 4px; /* Coins légèrement arrondis */
}

Table td a {
Margin-right: 10px;
Color: #007bff; /* Bleu pour les liens */
Text-decoration: none;
}

Table td a:hover {
Text-decoration: none; /*Souligné au survol */
background-color: #02503A;
}

/* --- Recherche et Pagination ([Link]) --- */

.search-pagination-container {
Display: flex;
Justify-content: space-between;
Align-items: center;
Margin-bottom: 20px;
Flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si l’é
cran est petit */
Gap: 15px; /* Espace entre les sections */
}

.search-form {
Display: flex;
Gap: 10px; /* Espace entre les champs de recherche */
Flex-wrap: wrap;
Align-items: center;
}

.search-form label {
Font-weight: bold;
Margin-right: 5px;
}

.search-form input[type="text"],
.search-form input[type="number"] {
Width: auto; /* Laisse le navigateur déterminer la largeur */
Padding: 8px;
Border: 1px solid #ccc;
 Border-radius: 4px;
Box-sizing: border-box;
}

.search-form button {
Background-color: #007bff; /* Bouton bleu pour la recherche */
Color: white;
Padding: 8px 15px;
Border: none;
Border-radius: 4px;
Cursor: pointer;
Transition: background-color 0.3s ease;
}

.search-form button:hover {
Background-color: #0056b3;
}

.pagination-nav {
Margin-left: auto; /* Pousse la pagination vers la droite */
}

.pagination {
Display: flex;
List-style: none;
Padding: 0;
Margin: 0;
Gap: 5px; /* Espace entre les numéros de page */
}

.pagination li a {
Text-decoration: none;
Padding: 8px 12px;
Border: 1px solid #ddd;
Border-radius: 4px;
Color: #007bff;
Transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination li a:hover {
Background-color: #e9ecef;
}

.pagination [Link] a {
Background-color: #007bff;
Color: white;
Border-color: #007bff;
}
/* Message de succès/erreur */
P[style*="color:green"], p[style*="color:red"] {
Padding: 10px;
Border-radius: 5px;
Margin-top: 15px;
Text-align: center;
Font-weight: bold;
}

P[style*="color:green"] {
Background-color: #d4edda;
Border-color: #c3e6cb;
Color: #155724;
}

P[style*="color:red"] {
Background-color: #f8d7da;
Border-color: #f5c6cb;
Color: #721c24;
}

[Link] :

<?php
Include '[Link]'; // Inclut le fichier de connexion

$car = null; // Variable pour stocker les informations de la voiture à

modifier
$message = ''; // Variable pour les messages de succès/erreur

If (isset($_GET['id'])) { // Si un ID est passé dans l'URL (pour récupé

rer la voiture)
$id = $_GET['id'];
$stmt = $conn->prepare("SELECT * FROM automobiles WHERE id = ?");
$stmt->execute([$id]);
$car = $stmt->fetch(PDO::FETCH_ASSOC); // Récupère les données de l
a voiture

If (!$car) {
$message = "<p style='color:red;'>Voiture non trouvée.</p>";
}
}

If (isset($_POST['submit'])) { // Si le formulaire de mise à jour a été

soumis
$id = $_POST['id']; // Récupère l'ID de la voiture depuis le champ
caché du formulaire
 $marque = $_POST['marque'];
$email = $_POST['email'];
$annee = $_POST['annee'];
$kilometrage = $_POST['kilometrage'];
$prix = $_POST['prix'];
$current_photo_path = $_POST['current_photo_path']; // Chemin de la
photo actuelle

$photo_path = $current_photo_path; // Par défaut, on garde l'ancien

ne photo
$uploadOk = 1;

// --- Gérer le nouvel upload de photo si une nouvelle photo est sé

lectionnée ---
If (isset($_FILES["photo"]) && $_FILES["photo"]["error"] == UPLOAD_
ERR_OK) { // Vérifie si un fichier a été téléchargé et s'il n'y a pas d
'erreur
$target_dir = "uploads/";
$original_file_name = basename($_FILES["photo"]["name"]);
$target_file = $target_dir . $original_file_name;
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXT
ENSION));

$check = getimagesize($_FILES["photo"]["tmp_name"]);
If ($check !== false) {
// Fichier est une image
} else {
$message = "<p style='color:red;'>Le nouveau fichier n'est
pas une image.</p>";
$uploadOk = 0;
}

// Vérifier la taille du fichier

If ($_FILES["photo"]["size"] > 10000000) {
$message = "<p style='color:red;'>Désolé, le nouveau fichie
r est trop grand (max 500KB).</p>";
$uploadOk = 0;
}

// Autoriser certains formats de fichier

If ($imageFileType != "jpg" && $imageFileType != "png" && $imag
eFileType != "jpeg" && $imageFileType != "gif") {
$message = "<p style='color:red;'>Désolé, seuls les fichier
s JPG, JPEG, PNG & GIF sont autorisés pour la nouvelle photo.</p>";
$uploadOk = 0;
}

If ($uploadOk == 1) {
 If (move_uploaded_file($_FILES["photo"]["tmp_name"], $targe
t_file)) {
$photo_path = $target_file; // Mettre à jour le chemin
de la photo
// Optionnel: supprimer l'ancienne photo si elle existe
et est différente
If (!empty($current_photo_path) && $current_photo_path
!= $photo_path && file_exists($current_photo_path)) {
Unlink($current_photo_path);
}
} else {
$message = "<p style='color:red;'>Désolé, il y a eu une
erreur lors du téléchargement de la nouvelle photo.</p>";
// On ne change pas $photo_path si l'upload échoue
}
}
}

// Si la voiture existe et qu'il n'y a pas eu d'erreurs d'upload bl

oquantes
If ($car && $uploadOk == 1) {
$stmt = $conn->prepare("UPDATE automobiles SET marque = ?, emai
l = ?, annee = ?, kilometrage = ?, prix = ?, photo_path = ? WHERE id =
?");
$stmt->execute([$marque, $email, $annee, $kilometrage, $prix, $
photo_path, $id]);
$message = "<p style='color:green;'>Voiture mise à jour avec su
ccès!</p>"; // Message de succès

// Recharger les données de la voiture après la mise à jour pou

r que le formulaire affiche les nouvelles valeurs
$stmt = $conn->prepare("SELECT * FROM automobiles WHERE id = ?
");
$stmt->execute([$id]);
$car = $stmt->fetch(PDO::FETCH_ASSOC);
} else if (!$car) {
$message = "<p style='color:red;'>Impossible de mettre à jour :
voiture non trouvée.</p>";
}
}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Modifier une voiture – [Link]</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="logo">[Link]</div>
<ul>
<li><a href="[Link]">Tableau de bord</a></li>
<li><a href="[Link]">Ajouter des voitures</a></li>
<li><a href="[Link]">Listes des voitures</a></li>
<li><a href="#">A propos</a></li>
</ul>
</div>
<div class="main-content">
<h2>Modifier une voiture</h2>
<?php echo $message; // Affiche les messages de succès/
erreur ?>

<?php if ($car): // Affiche le formulaire si une voiture a

été trouvée ?>
<form method="POST" action="" enctype="multipart/form-
data">
<input type="hidden" name="id" value="<?php echo htmlsp
ecialchars($car['id']); ?>">
<input type="hidden" name="current_photo_path" value="<
?php echo htmlspecialchars($car['photo_path']); ?>">

<label>Marque: <input type="text" name="marque" value="

<?php echo htmlspecialchars($car['marque']); ?>" required></label><br>
<label>Email: <input type="email" name="email" value="<?
php echo htmlspecialchars($car['email']); ?>" required></label><br>
<label>Année: <input type="number" name="annee" value="
<?php echo htmlspecialchars($car['annee']); ?>" required></label><br>
<label>Kilométrage: <input type="number" name="kilometr
age" value="<?php echo htmlspecialchars($car['kilometrage']); ?>" requi
red></label><br>
<label>Prix: <input type="number" step="0.01" name="pri
x" value="<?php echo htmlspecialchars($car['prix']); ?>" required></
label><br>

Photo actuelle:
<?php if (!empty($car['photo_path'])): ?>
<img src="<?php echo htmlspecialchar
s($car['photo_path']); ?>" width="150px" style="margin-bottom: 10px;
"><br>
<?php else: ?>
<p>Pas de photo actuelle.</p>
<?php endif; ?>
<label>Nouvelle Photo: <input type="file" name="photo"
id="photo"></label><br>
 <input type="submit" name="submit" value="Mettre à jour
">
</form>
<?php else: ?>
<p>Aucune voiture sélectionnée pour la modification ou
voiture introuvable.</p>
<?php endif; ?>
</div>
</div>
</body>
</html>