Voilà du coup j’aimerais que l’affichage de citoyen soit visible pour tout le monde qu’il voient les mêmes citoyens moi aussi quand il y en a des nouveaux puis aussi pour les autres sections après j’aimerais juste m’expliquer psk il me manque juste ça que je sais pas comment régler avec Infinityfree
53 Réponse(s)
Salut ! Envoie-moi la partie de ton code où tu affiches les citoyens (sans tes mots de passe). Je vais te dire exactement quoi modifier pour que tout le monde voit la même liste en temps réel.
Sinon je te donne mon index complet ? Y’a zéro mot de passe dedans
Oui vas-y
Tient :
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SASP MDT</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- SIDEBAR -->
<div class="sidebar">
<div class="logo">
<img src="img/logo_sasp.png" alt="Logo SASP" id="logoSASP">
</div>
<ul class="nav">
<li data-section="dashboard" class="active">Accueil</li>
<li data-section="citoyens">Citoyens</li>
<li data-section="effectif">Effectifs</li>
<li data-section="poles">Pôle / spécialités</li>
<li data-section="ro">Rapport d'opération</li>
<li data-section="plaintes">Registre des plaintes</li>
<li data-section="armes">Registre des armes</li>
<li data-section="delits">Registre des délits</li>
<li data-section="bracelets">Registre des bracelets</li>
<li data-section="sabots">Registre des sabots</li>
<li data-section="vl">Véhicules en infraction</li>
<li data-section="photos">Photos / preuves</li>
<li data-section="interrogatoires">Mes interrogatoires</li>
<li data-section="ri">Mes rapports d'incident</li>
<li data-section="Liste">Liste des interrogatoires</li>
<li data-section="lri">Liste des rapports d'incident</li>
<li data-section="stats">Statistiques des agents</li>
</ul>
<div class="agent-info">
<div id="agentName">Nom Prénom</div>
<div class="bottom-text">R3 🪠WorldStory FA</div>
</div>
</div>
<!-- CONTENU PRINCIPAL -->
<div class="main">
<!-- ACCUEIL -->
<section id="dashboard" class="content-section active">
<h2>Informations Agent</h2>
<div class="form-agent">
<label>Prénom</label>
<input type="text" id="prenom">
<label>Nom</label>
<input type="text" id="nom">
<label>Date de naissance</label>
<input type="date" id="dateNaissance">
<label>Téléphone</label>
<input type="text" id="telephone">
<label>IBAN</label>
<input type="text" id="iban">
<label>Badge</label>
<input type="text" id="badge">
<button id="saveAgent">Modifier</button>
</div>
</section>
<!-- CITOYENS -->
<section id="citoyens" class="content-section">
<div class="citoyens-header">
<input type="text" class="citoyen-search" placeholder="Rechercher un citoyen...">
<button class="btn-encoder">Encoder un citoyen</button>
</div>
<div class="citoyens-container">
<div class="liste-citoyens" id="liste-citoyens"></div>
<div class="fiche-detail" id="fiche-detail">
<p>Sélectionnez un citoyen pour voir les détails</p>
</div>
</div>
</section>
</div>
<!-- OVERLAY ENCODER CITOYEN -->
<div id="citoyenOverlay" class="overlay hidden">
<div class="overlay-box">
<div class="overlay-header">
<div>
<h3>Encoder un citoyen</h3>
<p>Informations générales</p>
</div>
<button id="closeOverlay" class="close-btn">×</button>
</div>
<div class="overlay-content">
<!-- ✅ FORMULAIRE CORRIGÉ -->
<form id="citoyenForm" class="citoyen-form" action="ajouter_citoyen.php" method="POST">
<div class="form-grid">
<div>
<label>Prénom</label>
<input type="text" id="c_prenom" name="prenom" required>
</div>
<div>
<label>Nom</label>
<input type="text" id="c_nom" name="nom" required>
</div>
<div>
<label>Téléphone</label>
<input type="text" id="c_tel" name="telephone">
</div>
<div>
<label>Date de naissance</label>
<input type="date" id="c_naissance" name="naissance">
</div>
<div>
<label>Genre</label>
<select id="c_genre" name="genre">
<option>Sélectionnez</option>
<option>Homme</option>
<option>Femme</option>
</select>
</div>
<div>
<label>Email</label>
<input type="email" id="c_email" name="email">
</div>
<div>
<label>Poids</label>
<input type="text" id="c_poids" name="poids">
</div>
<div>
<label>Taille</label>
<input type="text" id="c_taille" name="taille">
</div>
<div>
<label>Adresse</label>
<input type="text" id="c_adresse" name="adresse">
</div>
<div>
<label>Ethnie</label>
<input type="text" id="c_ethnie" name="ethnie">
</div>
<div>
<label>Couleur des cheveux</label>
<input type="text" id="c_cheveux" name="cheveux">
</div>
<div>
<label>Couleur des yeux</label>
<input type="text" id="c_yeux" name="yeux">
</div>
<div>
<label>Appartenance</label>
<input type="text" id="c_appartenance" name="appartenance">
</div>
<div>
<label>Emploi</label>
<input type="text" id="c_emploi" name="emploi">
</div>
<div>
<label>Permis de conduire</label>
<select id="c_permis" name="permis">
<option>Non valable</option>
<option>Valable</option>
</select>
</div>
</div>
<div class="overlay-footer">
<!-- ✅ BOUTON SUBMIT -->
<button type="submit" class="submit-btn">Soumettre</button>
</div>
</form>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script>
</body>
</html>
Je vois ton code. Le souci est que ta page est une interface HTML statique : elle ne lit pas la base de données. Pour que tous les agents voient la même liste de citoyens en temps réel, il faut que la section <div id="liste-citoyens"></div> soit remplacée par du PHP qui interroge et affiche directement les citoyens depuis ta table MySQL
Avant de te montrer comment faire, j'ai besoin de savoir :
1. As-tu déjà un fichier db.php (ou autre) qui contient tes identifiants de connexion à InfinityFree (hôte, utilisateur, mot de passe, nom de la base) ?
2. Peux-tu me montrer ton fichier ajouter_citoyen.php pour voir comment tu insères actuellement les données ?
Je remarque aussi que tu as un <script src="js/app.js"></script> en bas de ton code.
- Est-ce que c’est dans app.js que tu fais les requêtes pour afficher ou envoyer des données à la base ?
- Si oui, attention : ne mets jamais tes identifiants MySQL directement dans un fichier js, car il est visible publiquement et exposerait ta base.
- La bonne pratique est de ne mettre les identifiants que dans un fichier PHP sécurisé côté serveur (db.php), et d’utiliser app.js uniquement pour faire des appels vers tes scripts PHP (via fetch ou AJAX).
Si tu me montres ces fichiers, je te guide étape par étape pour tout connecter correctement et sécurisé.
Ca c’est mon fichier ajouter_citoyen.php :
<?php
include 'config.php';
if(isset($_POST['nom'], $_POST['prenom'], $_POST['age'], $_POST['ville'])){
$nom = $conn->real_escape_string($_POST['nom']);
$prenom = $conn->real_escape_string($_POST['prenom']);
$age = intval($_POST['age']);
$ville = $conn->real_escape_string($_POST['ville']);
$sql = "INSERT INTO citoyens (nom, prenom, age, ville) VALUES ('$nom', '$prenom', $age, '$ville')";
if($conn->query($sql) === TRUE){
echo json_encode(["status" => "success"]);
} else {
echo json_encode(["status" => "error", "message" => $conn->error]);
}
}
echo json_encode(["status"=>"success"]);
?>
Et oui j’ai un fichier qui contient tout qui se nomme config.php
Super, c'est très clair. Ton ajouter_citoyen.php fonctionne bien et config.php contient sûrement tes identifiants de connexion. C'est parfait.
Le seul problème maintenant est que ton HTML n'affiche pas les citoyens parce qu'il ne fait pas la lecture dans la base.
Dans ton fichier HTML principal (celui que tu as envoyé), remplace cette ligne : <div class="liste-citoyens" id="liste-citoyens"></div>
Par ce code PHP qui lit et affiche tous les citoyens :
<div class="liste-citoyens" id="liste-citoyens">
<?php
include 'config.php';
$sql = "SELECT * FROM citoyens ORDER BY id DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '<div class="citoyen-item">';
echo '<strong>' . htmlspecialchars($row['prenom']) . ' ' . htmlspecialchars($row['nom']) . '</strong>';
echo '<br>Âge : ' . htmlspecialchars($row['age']);
echo '<br>Ville : ' . htmlspecialchars($row['ville']);
echo '</div><hr>';
}
} else {
echo '<p>Aucun citoyen enregistré.</p>';
}
$conn->close();
?>
</div>
ça doit normalement passer.
Ok c’est bon j’ai mis je vais voir
D'accord tiens moi informé si erreur envoie le message d'erreur complet
Y’a pas de message d’erreur mais quand je vais sur un autre navigateur la opéra et je vais sur safari avec mon site c’est écrit aucun citoyen enregistré donc jsp mais j’attend que mon pote reponden
Mon pote m’a dit que y’avait pas c’était écrit aucun citoyen enregistré
Ok vous avez déjà ajouté des citoyens dans la base de données ? vérifiez alors s'il y a des citoyens existants
Ah attend il m’a dit que il voyait le citoyen il vas me montré un screen
Si je change le nom prénom etc il vas le voir aussi ?
Oui oui il verra ça. Vous pouvez aussi m'envoyer le lien du site et je vérifie si vous voulez
Ok tenez http://saspmdt.free.nf/?i=2
Voici ce que je vois :
Nom Prénom
R3 🪐 WorldStory FA
Ah ça c’est en bas sa c’est rien faut que t’aille dans la Sidebar à gauche et normalement y’a toute les sections et tu vas dans citoyens
J'ai ajouté et ça passe tu peux vérifier.
Je ne vois pas le citoyen que vous avez ajoutée
Salut ! J’ai testé ton MDT sur plusieurs navigateurs, et en effet, les citoyens ne sont pas visibles ailleurs que sur celui où je les ai créés.
J’ai ouvert la console F12 → onglet “Application” → “Local Storage”.
J’ai trouvé une clé `citoyens` qui contient bien les données en JSON. Cela prouve que tes données sont stockées localement dans le navigateur et ne vont pas dans ta base MySQL sur InfinityFree.
Le problème vient donc certainement de ton fichier `js/app.js` :
- Il utilise probablement `localStorage.setItem()` pour sauvegarder les citoyens.
- Il lit avec `localStorage.getItem()` pour les afficher.
- Du coup, il ne fait pas de vrai appel vers `ajouter_citoyen.php` pour insérer en base, ou alors il ignore la réponse du serveur.
Pour corriger ça, j’ai besoin de consulter ton `js/app.js`.
Peux-tu m’envoyer le code de ce fichier (surtout la partie qui gère l’ajout et l’affichage des citoyens) ? Comme ça, je te montre exactement quoi modifier pour que tout soit synchronisé sur ta base de données et visible par tous.
C bon si je t’envoie tout le fichier ?
Pas de soucis
// --- NAVIGATION ET AGENT ---
const navItems = document.querySelectorAll('.nav li');
const sections = document.querySelectorAll('.content-section');
function activateSection(sectionId) {
sections.forEach(sec => sec.classList.remove('active'));
document.getElementById(sectionId).classList.add('active');
navItems.forEach(item => item.classList.remove('active'));
document.querySelector(`[data-section="${sectionId}"]`).classList.add('active');
}
navItems.forEach(item => item.addEventListener('click', () => activateSection(item.dataset.section)));
const fields = ['prenom','nom','dateNaissance','telephone','iban','badge'];
fields.forEach(f => {
const input = document.getElementById(f);
if (!input) return;
const saved = localStorage.getItem(f);
if (saved) input.value = saved;
});
function updateSidebarName() {
const prenom = localStorage.getItem('prenom') || "";
const nom = localStorage.getItem('nom') || "";
const nameBox = document.getElementById('agentName');
nameBox.textContent = (prenom || nom) ? `${prenom} ${nom}` : "Nom Prénom";
}
updateSidebarName();
document.getElementById('saveAgent').addEventListener('click', () => {
fields.forEach(f => {
const val = document.getElementById(f).value;
localStorage.setItem(f, val);
});
updateSidebarName();
alert("Informations sauvegardées !");
});
// --- OVERLAY ENCODAGE ---
const overlay = document.getElementById('citoyenOverlay');
const openBtn = document.querySelector('.btn-encoder');
const closeBtn = document.getElementById('closeOverlay');
const submitBtn = document.querySelector('.submit-btn');
openBtn.addEventListener('click', () => {
overlay.dataset.mode = 'ajout';
overlay.classList.remove('hidden');
});
closeBtn.addEventListener('click', () => overlay.classList.add('hidden'));
// --- LISTE CITOYENS ---
const listeCitoyens = document.getElementById('liste-citoyens');
const ficheDetail = document.getElementById('fiche-detail');
const rechercheInput = document.querySelector('.citoyen-search');
let citoyens = JSON.parse(localStorage.getItem('citoyens')) || [];
let currentEditIndex = null;
// --- AFFICHER LISTE ---
function afficherListe() {
listeCitoyens.innerHTML = '';
if (citoyens.length === 0) {
ficheDetail.innerHTML = '<p>Sélectionnez un citoyen pour voir les détails</p>';
return;
}
citoyens.forEach((citoyen, index) => {
const div = document.createElement('div');
div.className = 'citoyen-item';
div.textContent = `${citoyen.prenom} ${citoyen.nom} - ${citoyen.naissance}`;
div.addEventListener('click', () => afficherFicheDetail(index));
listeCitoyens.appendChild(div);
});
}
// --- AFFICHER FICHE DETAIL ---
function afficherFicheDetail(index) {
const citoyen = citoyens[index];
currentEditIndex = index;
// Couleur du rond PPA
const ppaColor = citoyen.appartenance && citoyen.appartenance.toLowerCase() === 'oui' ? 'green' : 'red';
ficheDetail.innerHTML = `
<div class="fiche-header">
<h3>${citoyen.prenom} ${citoyen.nom}</h3>
<span class="email"><${citoyen.email || 'N/A'}></span>
<div class="menu-3pts">â‹®
<div class="menu-options">
<button onclick="ouvrirModifier(${index})">Modifier infos</button>
<button onclick="modifierPhoto(${index})">Modifier photo</button>
<button onclick="ajouterPPA(${index})">Ajouter PPA Civil</button>
<button class="supprimer" onclick="supprimerFiche(${index})">Supprimer</button>
</div>
</div>
</div>
<small>Date de naissance: ${citoyen.naissance || 'N/A'}</small>
<p>Téléphone: ${citoyen.tel || 'N/A'}</p>
<p>Recensé(e) le: ${citoyen.recensement || 'N/A'}</p>
<div class="ligne"></div>
<img src="${citoyen.photo || 'img/profil.jpg'}" class="photo-profil">
<div class="infos-ligne">
<div class="info"><div class="titre">Poids</div><div class="valeur">${citoyen.poids || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Taille</div><div class="valeur">${citoyen.taille || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Sexe</div><div class="valeur">${citoyen.genre || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Couleur des yeux</div><div class="valeur">${citoyen.yeux || 'N/A'}</div><hr></div>
</div>
<div class="infos-ligne">
<div class="info"><div class="titre">Ethnie</div><div class="valeur">${citoyen.ethnie || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Emploi</div><div class="valeur">${citoyen.emploi || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Adresse</div><div class="valeur">${citoyen.adresse || 'N/A'}</div><hr></div>
</div>
<div class="infos-ligne">
<div class="info"><div class="titre">Permis</div><div class="valeur">${citoyen.permis || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Cheveux</div><div class="valeur">${citoyen.cheveux || 'N/A'}</div><hr></div>
<div class="info">
<div class="titre">PPA Civil</div>
<div class="valeur">
<span class="ppa-indicator" style="background-color: ${citoyen.appartenance === 'Oui' ? 'green' : 'red'};"></span>
</div>
<hr>
</div>
<div class="citoyen-bas-zone">
<div class="citoyen-boutons">
<button class="action-btn">Créer une convocation</button>
<button class="action-btn">Ecrire un ticket routier</button>
<button class="action-btn">Ecrire un rapport d'arrestation</button>
<button class="action-btn">Ecrire un dossier d'arrestation</button>
<button class="action-btn">Encoder une plainte</button>
<button class="action-btn">Encoder une déposition</button>
<button class="action-btn">Bracelet électronique</button>
<button class="action-btn">Demande de mandat d'arrêt</button>
</div>
<div class="citoyen-actions-droite">
<div class="actions-scroll">
<div class="action-categorie">
<div class="action-tab" data-type="convocation">Convocation</div>
<p class="action-resultat">Pas de convocation</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="ticket">Ticket routier</div>
<p class="action-resultat">Pas de ticket routier</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="rapport">Rapport d'arrestation</div>
<p class="action-resultat">Pas de rapport d'arrestation</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="dossier">Dossier d'arrestation</div>
<p class="action-resultat">Pas de dossier d'arrestation</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="plainte">Plainte</div>
<p class="action-resultat">Pas de plainte</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="deposition">Déposition</div>
<p class="action-resultat">Pas de déposition</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="bracelet">Bracelet électronique</div>
<p class="action-resultat">Pas de bracelet électronique</p>
</div>
</div>
</div>
</div>
`;
// Menu 3 points
const menu = ficheDetail.querySelector('.menu-3pts');
const options = ficheDetail.querySelector('.menu-options');
menu.onclick = () => options.style.display = options.style.display === 'block' ? 'none' : 'block';
// Onglets droite
const tabs = ficheDetail.querySelectorAll('.action-tab');
const results = ficheDetail.querySelectorAll('.action-resultat');
results.forEach((r, i) => r.style.display = i === 0 ? 'block' : 'none');
tabs.forEach((t, i) => {
if (i === 0) t.classList.add('active');
t.addEventListener('click', () => {
tabs.forEach(tab => tab.classList.remove('active'));
t.classList.add('active');
results.forEach((r, j) => r.style.display = i === j ? 'block' : 'none');
});
});
}
// --- OUVRIR MODIFIER ---
function ouvrirModifier(index) {
const c = citoyens[index];
document.getElementById('c_prenom').value = c.prenom;
document.getElementById('c_nom').value = c.nom;
document.getElementById('c_tel').value = c.tel;
document.getElementById('c_naissance').value = c.naissance;
document.getElementById('c_genre').value = c.genre;
document.getElementById('c_email').value = c.email;
document.getElementById('c_poids').value = c.poids;
document.getElementById('c_taille').value = c.taille;
document.getElementById('c_adresse').value = c.adresse;
document.getElementById('c_ethnie').value = c.ethnie;
document.getElementById('c_cheveux').value = c.cheveux;
document.getElementById('c_yeux').value = c.yeux;
document.getElementById('c_appartenance').value = c.appartenance;
document.getElementById('c_emploi').value = c.emploi;
document.getElementById('c_permis').value = c.permis;
overlay.dataset.mode = 'modifier';
overlay.classList.remove('hidden');
}
// --- MODIFIER PHOTO ---
function modifierPhoto(index) {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = e => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = () => {
citoyens[index].photo = reader.result;
localStorage.setItem('citoyens', JSON.stringify(citoyens));
afficherListe();
afficherFicheDetail(index);
};
reader.readAsDataURL(file);
};
input.click();
}
// --- AJOUTER PPA ---
function ajouterPPA(index) {
const val = prompt("Ajouter PPA Civil (Oui/Non) :");
if (!val) return;
citoyens[index].appartenance = val.toLowerCase() === 'oui' ? 'Oui' : 'Non';
localStorage.setItem('citoyens', JSON.stringify(citoyens));
afficherListe();
afficherFicheDetail(index);
}
// --- SUPPRIMER ---
function supprimerFiche(index) {
if (confirm("Supprimer ce citoyen ?")) {
citoyens.splice(index, 1);
localStorage.setItem('citoyens', JSON.stringify(citoyens));
afficherListe();
ficheDetail.innerHTML = '<p>Sélectionnez un citoyen pour voir les détails</p>';
}
}
// --- SOUMISSION FORMULAIRE ---
submitBtn.addEventListener('click', () => {
const citoyenData = {
prenom: document.getElementById('c_prenom').value,
nom: document.getElementById('c_nom').value,
tel: document.getElementById('c_tel').value,
naissance: document.getElementById('c_naissance').value,
genre: document.getElementById('c_genre').value,
email: document.getElementById('c_email').value,
poids: document.getElementById('c_poids').value,
taille: document.getElementById('c_taille').value,
adresse: document.getElementById('c_adresse').value,
ethnie: document.getElementById('c_ethnie').value,
cheveux: document.getElementById('c_cheveux').value,
yeux: document.getElementById('c_yeux').value,
appartenance: document.getElementById('c_appartenance').value,
emploi: document.getElementById('c_emploi').value,
permis: document.getElementById('c_permis').value,
recensement: new Date().toLocaleString(),
photo: 'img/profil.jpg'
};
if (overlay.dataset.mode === 'modifier' && currentEditIndex !== null) {
citoyens[currentEditIndex] = citoyenData;
} else {
citoyens.push(citoyenData);
}
localStorage.setItem('citoyens', JSON.stringify(citoyens));
afficherListe();
overlay.classList.add('hidden');
document.getElementById('citoyenForm').reset();
});
// --- RECHERCHE ---
rechercheInput.addEventListener('input', () => {
const filter = rechercheInput.value.toLowerCase();
listeCitoyens.querySelectorAll('.citoyen-item').forEach(item => {
const nomPrenom = item.textContent.toLowerCase();
item.style.display = nomPrenom.includes(filter) ? 'block' : 'none';
});
});
document.querySelectorAll('.category-header').forEach(header => {
header.addEventListener('click', () => {
const sections = header.nextElementSibling;
sections.classList.toggle('hidden'); // Affiche / cache les sections
const arrow = header.querySelector('.arrow');
arrow.textContent = sections.classList.contains('hidden') ? 'â–¼' : 'â–²';
});
});
document.querySelectorAll('.category-header').forEach(header => {
header.addEventListener('click', () => {
const sections = header.nextElementSibling;
sections.classList.toggle('hidden');
const arrow = header.querySelector('.arrow');
arrow.textContent = sections.classList.contains('hidden') ? 'â–¼' : 'â–²';
});
});
// --- INITIALISATION ---
document.addEventListener('DOMContentLoaded', afficherListe);
T’es encore réveiller ?
J'ai vu les problèmes. Tu veux que je t'envoie les solutions de manières détaillées (tu remplaceras où il faudra) ou directement le code du JS modifié avec les mises à jour ?
1 - Je vais t'envoyer le JS modifié. Crée une copie de ton JS tu mets le code existant dedans pour garder une trace. Voici ton nouveau code JS :
// --- NAVIGATION ET AGENT ---
const navItems = document.querySelectorAll('.nav li');
const sections = document.querySelectorAll('.content-section');
function activateSection(sectionId) {
sections.forEach(sec => sec.classList.remove('active'));
document.getElementById(sectionId).classList.add('active');
navItems.forEach(item => item.classList.remove('active'));
document.querySelector(`[data-section="${sectionId}"]`).classList.add('active');
}
navItems.forEach(item => item.addEventListener('click', () => activateSection(item.dataset.section)));
const fields = ['prenom','nom','dateNaissance','telephone','iban','badge'];
fields.forEach(f => {
const input = document.getElementById(f);
if (!input) return;
const saved = localStorage.getItem(f);
if (saved) input.value = saved;
});
function updateSidebarName() {
const prenom = localStorage.getItem('prenom') || "";
const nom = localStorage.getItem('nom') || "";
const nameBox = document.getElementById('agentName');
nameBox.textContent = (prenom || nom) ? `${prenom} ${nom}` : "Nom Prénom";
}
updateSidebarName();
document.getElementById('saveAgent').addEventListener('click', () => {
fields.forEach(f => {
const val = document.getElementById(f).value;
localStorage.setItem(f, val);
});
updateSidebarName();
alert("Informations sauvegardées !");
});
// --- OVERLAY ENCODAGE ---
const overlay = document.getElementById('citoyenOverlay');
const openBtn = document.querySelector('.btn-encoder');
const closeBtn = document.getElementById('closeOverlay');
const form = document.getElementById('citoyenForm');
openBtn.addEventListener('click', () => {
overlay.dataset.mode = 'ajout';
overlay.classList.remove('hidden');
});
closeBtn.addEventListener('click', () => {
overlay.classList.add('hidden');
form.reset();
});
// --- LISTE CITOYENS ---
const listeCitoyens = document.getElementById('liste-citoyens');
const ficheDetail = document.getElementById('fiche-detail');
const rechercheInput = document.querySelector('.citoyen-search');
let citoyens = [];
let currentEditIndex = null;
let currentEditId = null;
// --- CHARGER ET AFFICHER LISTE DEPUIS LA BASE ---
async function afficherListe() {
try {
const response = await fetch('get_citoyens.php');
if (!response.ok) throw new Error('Erreur réseau');
citoyens = await response.json();
listeCitoyens.innerHTML = '';
if (citoyens.length === 0) {
ficheDetail.innerHTML = '<p>Sélectionnez un citoyen pour voir les détails</p>';
return;
}
citoyens.forEach((citoyen, index) => {
const div = document.createElement('div');
div.className = 'citoyen-item';
div.textContent = `${citoyen.prenom} ${citoyen.nom} - ${citoyen.naissance}`;
div.addEventListener('click', () => afficherFicheDetail(index));
listeCitoyens.appendChild(div);
});
} catch (error) {
console.error('Erreur chargement citoyens:', error);
listeCitoyens.innerHTML = '<p>Erreur de chargement</p>';
}
}
// --- AFFICHER FICHE DÉTAIL ---
function afficherFicheDetail(index) {
const citoyen = citoyens[index];
currentEditIndex = index;
currentEditId = citoyen.id;
ficheDetail.innerHTML = `
<div class="fiche-header">
<h3>${citoyen.prenom} ${citoyen.nom}</h3>
<span class="email"><${citoyen.email || 'N/A'}></span>
<div class="menu-3pts">⋮
<div class="menu-options">
<button onclick="ouvrirModifier(${index})">Modifier infos</button>
<button onclick="modifierPhoto(${index})">Modifier photo</button>
<button onclick="ajouterPPA(${index})">Ajouter PPA Civil</button>
<button class="supprimer" onclick="supprimerFiche(${index})">Supprimer</button>
</div>
</div>
</div>
<small>Date de naissance: ${citoyen.naissance || 'N/A'}</small>
<p>Téléphone: ${citoyen.tel || 'N/A'}</p>
<p>Recensé(e) le: ${citoyen.recensement || 'N/A'}</p>
<div class="ligne"></div>
<img src="${citoyen.photo || 'img/profil.jpg'}" class="photo-profil">
<div class="infos-ligne">
<div class="info"><div class="titre">Poids</div><div class="valeur">${citoyen.poids || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Taille</div><div class="valeur">${citoyen.taille || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Sexe</div><div class="valeur">${citoyen.genre || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Couleur des yeux</div><div class="valeur">${citoyen.yeux || 'N/A'}</div><hr></div>
</div>
<div class="infos-ligne">
<div class="info"><div class="titre">Ethnie</div><div class="valeur">${citoyen.ethnie || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Emploi</div><div class="valeur">${citoyen.emploi || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Adresse</div><div class="valeur">${citoyen.adresse || 'N/A'}</div><hr></div>
</div>
<div class="infos-ligne">
<div class="info"><div class="titre">Permis</div><div class="valeur">${citoyen.permis || 'N/A'}</div><hr></div>
<div class="info"><div class="titre">Cheveux</div><div class="valeur">${citoyen.cheveux || 'N/A'}</div><hr></div>
<div class="info">
<div class="titre">PPA Civil</div>
<div class="valeur">
<span class="ppa-indicator" style="background-color: ${citoyen.appartenance === 'Oui' ? 'green' : 'red'};"></span>
</div>
<hr>
</div>
<div class="citoyen-bas-zone">
<div class="citoyen-boutons">
<button class="action-btn">Créer une convocation</button>
<button class="action-btn">Ecrire un ticket routier</button>
<button class="action-btn">Ecrire un rapport d'arrestation</button>
<button class="action-btn">Ecrire un dossier d'arrestation</button>
<button class="action-btn">Encoder une plainte</button>
<button class="action-btn">Encoder une déposition</button>
<button class="action-btn">Bracelet électronique</button>
<button class="action-btn">Demande de mandat d'arrêt</button>
</div>
<div class="citoyen-actions-droite">
<div class="actions-scroll">
<div class="action-categorie">
<div class="action-tab" data-type="convocation">Convocation</div>
<p class="action-resultat">Pas de convocation</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="ticket">Ticket routier</div>
<p class="action-resultat">Pas de ticket routier</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="rapport">Rapport d'arrestation</div>
<p class="action-resultat">Pas de rapport d'arrestation</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="dossier">Dossier d'arrestation</div>
<p class="action-resultat">Pas de dossier d'arrestation</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="plainte">Plainte</div>
<p class="action-resultat">Pas de plainte</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="deposition">Déposition</div>
<p class="action-resultat">Pas de déposition</p>
</div>
<div class="action-categorie">
<div class="action-tab" data-type="bracelet">Bracelet électronique</div>
<p class="action-resultat">Pas de bracelet électronique</p>
</div>
</div>
</div>
</div>
`;
// Menu 3 points
const menu = ficheDetail.querySelector('.menu-3pts');
const options = ficheDetail.querySelector('.menu-options');
menu.onclick = () => options.style.display = options.style.display === 'block' ? 'none' : 'block';
// Onglets droite
const tabs = ficheDetail.querySelectorAll('.action-tab');
const results = ficheDetail.querySelectorAll('.action-resultat');
results.forEach((r, i) => r.style.display = i === 0 ? 'block' : 'none');
tabs.forEach((t, i) => {
if (i === 0) t.classList.add('active');
t.addEventListener('click', () => {
tabs.forEach(tab => tab.classList.remove('active'));
t.classList.add('active');
results.forEach((r, j) => r.style.display = i === j ? 'block' : 'none');
});
});
}
// --- OUVRIR MODIFIER ---
function ouvrirModifier(index) {
const c = citoyens[index];
document.getElementById('c_prenom').value = c.prenom;
document.getElementById('c_nom').value = c.nom;
document.getElementById('c_tel').value = c.tel;
document.getElementById('c_naissance').value = c.naissance;
document.getElementById('c_genre').value = c.genre;
document.getElementById('c_email').value = c.email;
document.getElementById('c_poids').value = c.poids;
document.getElementById('c_taille').value = c.taille;
document.getElementById('c_adresse').value = c.adresse;
document.getElementById('c_ethnie').value = c.ethnie;
document.getElementById('c_cheveux').value = c.cheveux;
document.getElementById('c_yeux').value = c.yeux;
document.getElementById('c_appartenance').value = c.appartenance;
document.getElementById('c_emploi').value = c.emploi;
document.getElementById('c_permis').value = c.permis;
overlay.dataset.mode = 'modifier';
overlay.classList.remove('hidden');
}
// --- MODIFIER PHOTO ---
async function modifierPhoto(index) {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = async (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = async () => {
const formData = new FormData();
formData.append('id', citoyens[index].id);
formData.append('photo', file.name);
try {
const response = await fetch('modifier_photo.php', {
method: 'POST',
body: formData
});
await afficherListe();
afficherFicheDetail(index);
} catch (error) {
console.error('Erreur:', error);
}
};
reader.readAsDataURL(file);
};
input.click();
}
// --- AJOUTER PPA ---
async function ajouterPPA(index) {
const val = prompt("Ajouter PPA Civil (Oui/Non) :");
if (!val) return;
try {
const response = await fetch('modifier_ppa.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
id: citoyens[index].id,
appartenance: val.toLowerCase() === 'oui' ? 'Oui' : 'Non'
})
});
await afficherListe();
afficherFicheDetail(index);
} catch (error) {
console.error('Erreur:', error);
}
}
// --- SUPPRIMER ---
async function supprimerFiche(index) {
if (!confirm("Supprimer ce citoyen ?")) return;
try {
const response = await fetch('supprimer_citoyen.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ id: citoyens[index].id })
});
await afficherListe();
ficheDetail.innerHTML = '<p>Sélectionnez un citoyen pour voir les détails</p>';
} catch (error) {
console.error('Erreur:', error);
}
}
// --- SOUMISSION FORMULAIRE ---
form.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(form);
if (overlay.dataset.mode === 'modifier' && currentEditId !== null) {
formData.append('id', currentEditId);
}
try {
const url = overlay.dataset.mode === 'modifier' ? 'modifier_citoyen.php' : 'ajouter_citoyen.php';
const response = await fetch(url, {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.status === 'success') {
await afficherListe();
overlay.classList.add('hidden');
form.reset();
currentEditId = null;
} else {
alert('Erreur: ' + result.message);
}
} catch (error) {
console.error('Erreur:', error);
alert('Erreur de connexion');
}
});
// --- RECHERCHE ---
rechercheInput.addEventListener('input', () => {
const filter = rechercheInput.value.toLowerCase();
listeCitoyens.querySelectorAll('.citoyen-item').forEach(item => {
const nomPrenom = item.textContent.toLowerCase();
item.style.display = nomPrenom.includes(filter) ? 'block' : 'none';
});
});
// --- INITIALISATION ---
document.addEventListener('DOMContentLoaded', () => {
afficherListe();
});
2 - Remplace le code HTML qui affiche les citoyens par ce nouveau code :
<!-- CITOYENS -->
<section id="citoyens" class="content-section">
<div class="citoyens-header">
<input type="text" class="citoyen-search" placeholder="Rechercher un citoyen...">
<button class="btn-encoder">Encoder un citoyen</button>
</div>
<div class="citoyens-container">
<!-- DIV VIDE - Le JS va remplir ça -->
<div class="liste-citoyens" id="liste-citoyens">
<!-- Le contenu sera généré par JavaScript -->
</div>
<div class="fiche-detail" id="fiche-detail">
<p>Sélectionnez un citoyen pour voir les détails</p>
</div>
</div>
</section>
3 - Crée un fichier PHP nommé get_citoyens.php (c'est lui qui ira récupérer les citoyens en base de données et les enverra à ton JS). Voici le code de ce fichier PHP :
<?php
include 'config.php';
header('Content-Type: application/json');
$sql = "SELECT * FROM citoyens ORDER BY id DESC";
$result = $conn->query($sql);
$citoyens = [];
while($row = $result->fetch_assoc()) {
$citoyens[] = $row;
}
echo json_encode($citoyens);
$conn->close();
?>
Pour le code HTML le nouveau je doit tout changer par ça ?
Oui oui juste le code qui affiche les citoyens tu le remplaces par le nouveau.
Donc tout ça par le nouveau code ?
</div>
<div class="citoyens-container">
<div class="liste-citoyens" id="liste-citoyens">
<?php
include 'config.php';
$sql = "SELECT * FROM citoyens ORDER BY id DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '<div class="citoyen-item">';
echo '<strong>' . htmlspecialchars($row['prenom']) . ' ' . htmlspecialchars($row['nom']) . '</strong>';
echo '<br>Âge : ' . htmlspecialchars($row['age']);
echo '<br>Ville : ' . htmlspecialchars($row['ville']);
echo '</div><hr>';
}
} else {
echo '<p>Aucun citoyen enregistré.</p>';
}
$conn->close();
?>
</div>
<div class="fiche-detail" id="fiche-detail">
<p>Sélectionnez un citoyen pour voir les détails</p>
</div>
</div>
</section>
</div>
Oui oui tout ça par nouveau code
Ok je le fais on essaye si sa fonctionne et puis je vais aller dormir
Bah là quand j’encode un citoyen y’a rien qui se passe
D'accord ce qui est bon c'est qu'on a vu où est le souci. S'il y a d'autres problèmes on verra tout ça demain jusqu'à ce que ça fonctionne bien.
Ok merci à demain
Vérifie en base de données s'il y a un utilisateur qui a été ajouté.
On verra tout ça demain, cependant tiens mon whatsapp comme ça on règlera ce problème vite demain : +212602536165
Dans la table citoyens puis parcourir ?
oui oui vérifier si elles reçoit les données. Sinon je vois exactement le problème on verra ça demain
Salut 👋
Bonsoir oui ça vas et jsp vous pouvez aller regarder sinon le site http://saspmdt.free.nf/
Ecris moi sur whatsapp ainsi on va régler ça vite.
Vous avez pas un autre réseaux sociaux ? Instagram ?
Je n'utilise pas vraiment d'autres mais pas de soucis envoie ton insta. Je travaille plus avec les gens sur Whatsapp
Ou si tu peux partager ton dépot github aussi ça fera l'affaire et je clone le projet et je vois tout ce qui ne va pas
Mon insta : sho9.tt
Et mon github euh j’en ai pas je crois pas je doit faire quoi dit moi sur insta
En fait je voulais voir le projet complet tu enleves juste les infos de connexion à la base de données. Je veux voir l'architecture sinon le problème est simple à géré j'ai compris mais je dois avoir une vision d'ensemble. Sois tu zip et tu vois par mail, ou sur insta si possible. Ensuite où il faudra je vais ajuster ensuite je renvoie et tu testes.
Ecris moi ici sur insta mone_fame
Ok bah je met sur github je t’envoie sur insta
Je t’ai enviyer un msg insta
Répondre à ce sujet
Vous devez être connecté pour répondre à ce sujet.
Se connecter