ileauchiens/maquette_backoffice
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

correction des pages ajout categorie modifier categorie et ajout artcile.Intégration de ckedito dans ajout article

Browse Source
This commit is contained in:
ben
2025-12-05 12:26:25 +01:00
parent 80f859c514
commit 036c120f58
8 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
blog/categories/ajouter_categorie.html
View File

@@ -8,7 +8,7 @@
<style> <style>
body{ body{
background: #f4f6f9; background: #f4f6f981;
} }
.container{ .container{
@@ -20,7 +20,7 @@
<body> <body>
<div class="container"> <div class="container">
<h2 class="mb-4 text-center">Ajouter une catégorie</h2> <h2 class="mb-5 text-center">Ajouter une catégorie</h2>
<!--Erreur champ vide --> <!--Erreur champ vide -->
<div id="errorEmpty" class="alert alert-danger d-none">Le nom de catégorie est obligatoire.</div> <div id="errorEmpty" class="alert alert-danger d-none">Le nom de catégorie est obligatoire.</div>
@@ -34,8 +34,8 @@
<form id="addCategoryForm"> <form id="addCategoryForm">
<div class="mb-3"> <div class="mb-4">
<label class="form-label fw-bold">Nom de la catégorie *</label> <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
<input type="text" id="categoryName" class="form-control" placeholder="Actualité, chien, chat .." required></div> <input type="text" id="categoryName" class="form-control" placeholder="Actualité, chien, chat .." required></div>
<div class="mb-3"> <div class="mb-3">
@@ -44,7 +44,7 @@
</div> </div>
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="liste_categories.html" class="btn btn-danger w-50">Annuler</a> <a href="liste_categories.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>

51
blog/categories/articles/ajouter_article.html
View File

@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un article</title> <title>Ajouter un article</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<style> <style>
body { body {
@@ -19,7 +22,7 @@
<body> <body>
<div class="container"> <div class="container">
<h2 class="mb-4 text-center">Ajouter un article</h2> <h2 class="mb-5 text-center">Ajouter un article</h2>
<!--Erreur titre vide--> <!--Erreur titre vide-->
<div id="errorEmpty" class="alert alert-danger d-none">Le titre de l'article est obligatoire</div> <div id="errorEmpty" class="alert alert-danger d-none">Le titre de l'article est obligatoire</div>
@@ -35,15 +38,20 @@
<!--Succès ajout article--> <!--Succès ajout article-->
<div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div> <div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div>
<!--Image--> <!--Catégorie-->
<div class="mb-3"> <div class="mb-4">
<label class="form-label fw-bold">Image de l'article</label> <label class="form-label fw-bold">Catégorie de l'article</label>
<input type="file" id="articleImage" class="form-control" accept="image/*"> <select id="articleCategory" class="form-select">
</div> <option value="" selected disabled>Choisissez une catégorie</option>
<option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option>
<option value="boutique">Boutique</option>
</select>
<!--Titre--> <!--Titre-->
<div class="mb-3"> <div class="mb-4">
<label class="form-label fw-bold">Titre de l'article *</label> <label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article"> <input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article">
</div> </div>
@@ -53,16 +61,13 @@
<textarea id="articleContent" class="form-control" rows="5" placeholder="Entrez le contenu de l'article"></textarea> <textarea id="articleContent" class="form-control" rows="5" placeholder="Entrez le contenu de l'article"></textarea>
</div> </div>
<!--Catégorie--> <!--Image-->
<div class="mb-3"> <div class="mb-4">
<label class="form-label fw-bold">Catégorie de l'article</label> <label class="form-label fw-bold">Image de l'article</label>
<select id="articleCategory" class="form-select"> <input type="file" id="articleImage" class="form-control" accept="image/*">
<option value="" selected disabled>Choisissez une catégorie</option> </div>
<option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option>
<option value="boutique">Boutique</option>
</select>
</div> </div>
<!--Publié--> <!--Publié-->
@@ -73,7 +78,7 @@
<!--Boutons--> <!--Boutons-->
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="liste_articles.html" class="btn btn-danger w-50">Annuler</a> <a href="liste_articles.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Ajouter</button> <button type="submit" class="btn btn-primary w-50">Ajouter</button>
</div> </div>
</form> </form>
@@ -81,7 +86,13 @@
<script src="ajouter_article.js"></script> <script src="ajouter_article.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#articleContent'))
.catch(error => {
console.error(error);
});
</script>
</body> </body>
</html> </html>

3
blog/categories/articles/ajouter_article.js
View File

@@ -46,9 +46,6 @@ form.addEventListener('submit', function(e) {
} }
} }
// Succès
successMsg.classList.remove('d-none');
// Simuler enregistrement // Simuler enregistrement
titreExistants.push(titre); titreExistants.push(titre);

22
blog/categories/modifier_categorie.html
View File

@@ -8,7 +8,8 @@
<style> <style>
body { body {
background: #f4f6f9; background: #f4f6f981;
} }
.container { .container {
max-width: 600px; max-width: 600px;
@@ -19,7 +20,7 @@
<body> <body>
<div class="container"> <div class="container">
<h2 class="mb-4 text-center">Modifier une catégorie</h2> <h2 class="mb-5 text-center">Modifier une catégorie</h2>
<div id="errorMsg" class="alert alert-danger d-none">Veuillez ezmplir tous les champs obligatoires</div> <div id="errorMsg" class="alert alert-danger d-none">Veuillez ezmplir tous les champs obligatoires</div>
@@ -28,25 +29,20 @@
<form id="modifierCategorie"> <form id="modifierCategorie">
<div class="mb-3"> <div class="mb-4">
<label class="form-label fw-bold">Nom de la catégorie *</label> <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
<select id="categoryName" class="form-select" required> <input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie" required>
<option value="" selected disabled>— Choisir une catégorie —</option>
<option value="actualité">Actualité</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option>
<option value="boutique">Boutique</option>
</select>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label fw-bold">Description *</label> <label class="form-label fw-bold">Description (optionnel)</label>
<textarea id="categorieDescription" class="form-control" rows="4" placeholder="Entrez une description" required></textarea> <textarea id="categorieDescription" class="form-control" rows="4" placeholder="Entrez une description" required></textarea>
</div> </div>
<div class="d-flex gap-3 mt-4"> <div class="d-flex gap-3 mt-4">
<a href="liste_categories.html" class="btn btn-danger w-50">Annuler</a> <a href="liste_categories.html" class="btn btn-secondary w-50">Annuler</a>
<button type="submit" class="btn btn-primary w-50">Enregistrer</button> <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
</div> </div>

4
blog/categories/modifier_categorie.js
View File

@@ -1,6 +1,6 @@
const form = document.getElementById("modifierCatgorie"); const form = document.getElementById("modifierCategorie");
const nameField = document.getElementById("nomCategorie"); const nameField = document.getElementById("categoryName");
const descField = document.getElementById("categorieDescription"); const descField = document.getElementById("categorieDescription");
const errorMsg = document.getElementById("errorMsg"); const errorMsg = document.getElementById("errorMsg");
const successMsg = document.getElementById("successMsg"); const successMsg = document.getElementById("successMsg");

2
connexion/mot_de_passe_oublie/mot_de_passe_oublie.html
View File

@@ -11,7 +11,7 @@
<style> <style>
body { body {
background: #f2f4f7; background: #f4f6f981;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;

2
connexion/page_de_connexion/page_de_connexion.html
View File

@@ -10,7 +10,7 @@
/> />
<style> <style>
body { body {
background: #f2f4f7; background: #f4f6f981;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;

2
connexion/reinitialisation_mot_de_passe/reinitialisation_mot_de_passe.html
View File

@@ -11,7 +11,7 @@
<style> <style>
body { body {
background: #f2f4f7; background: #f4f6f981;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;