Category:

blog-post

retrouvé ici les meilleurs articles sur la programmation

1- Le input type= »file »

définit un champ de sélection de fichier et un bouton « Parcourir » pour les téléchargements de fichiers. .

				
					<input type="file">

Résultat

2- Input Type Hidden

→ Le input type= »hidden » définit un champ de saisie caché (non visible pour un utilisateur).

→ Un champ caché permet aux développeurs Web d’inclure des données qui ne peuvent pas être vues ou modifiées par les utilisateurs lorsqu’un formulaire est soumis.

				
					<input type="hidden">

3-input type Month

→ Le input type= »month » permet à l’utilisateur de sélectionner un mois et une année.

				
					<input type="month">

Résultat

4- Input Type Number

→ Le input type= »number » définit un champ de saisie numérique.

				
					<input type="number">

Résultat

5- Input Type Range

→ Le input type= »range » définit un contrôle permettant de saisir un nombre dont la valeur exacte n’a pas d’importance (comme un curseur).

				
					<input type="range">

Résultat

6 – input type= »date »

->Les éléments input dont l’attribut type vaut date permettent de créer des champs où saisir des dates, via un champ texte dont la valeur est validée ou avec un sélecteur de date.

				
					<input type="date" name="" id="">

Résultat

0 comment 231 views

javascript-string-methods

by personne 27 décembre 2022

Bonjour et bienvenu dans ce post, aujourd’hui nous allons vous partager 8 méthodes de chaîne javascript les plus courantes avec des exemples.

N’oubliez surtout pas de le partager avec vos proches ou sur votre réseau.

1. length()
Cette méthode renvoie la longueur d’une chaîne :
Exemple:

				
					let str = "Hello World";
console.log(str.length); 
//valeur de sortie 11

2. indexOf()
Cette méthode recherche une valeur spécifiée dans une chaîne et renvoie la position de la correspondance :
Exemple:

				
					let str = "Hello World";
console.log(str.indexOf("World"));
 //valeur de sortie 6

3. substring()
Cette méthode extrait les caractères d’une chaîne entre deux indices spécifiés et renvoie la nouvelle sous-chaîne :
Exemple:

				
					let str = "Hello World";
console.log(str.substring(6, 11)); 
//valeur de sortie "World"

4. replace()
Cette méthode recherche une chaîne pour une valeur spécifiée et la remplace par une nouvelle valeur :
Exemple:

				
					let str = "Hello World";
console.log(str.replace("World", "there")); 
//valeur de sortie "Hello there"

5. charAt()
La méthode charAt() renvoie le caractère à l’index spécifié dans une chaîne:
Exemple:

				
					let str = 'Hello World';
console.log(str.charAt(0)) ; 
// valeur de sortie "H"

6. concat()
La méthode concat() combine deux ou plusieurs chaînes et renvoie une nouvelle chaîne:
Exemple :

				
					let str1 = 'Hello';
let str2 = 'World';
console.log(str1.concat(' ', str2)); 
// valeur de sortie "Hello World"

7. includes()
La méthode includes() vérifie si une chaîne contient une chaîne/caractère spécifié :
Exemple:

				
					let str = 'Hello World';
console.log(str.includes('World')) ; 
// valeur de sortie true

8. endsWith()
Cette méthode vérifie si une chaîne se termine par les caractères d’une chaîne spécifiée, renvoyant true ou false.
Exemple:

				
					let str = 'Hello World';
console.log(str.endsWith('orld')); 
// Sortie : vrai

Merci !

0 comment 227 views

les Bonnes Pratiques en Programmation

by personne 14 juillet 2023

#Les Bonnes Pratiques en Programmation

Introduction:

La programmation est une discipline en constante évolution, et adopter les bonnes pratiques est essentiel pour garantir la qualité, la maintenabilité et l’efficacité de votre code. Dans cet article, nous explorerons les principaux principes et techniques des bonnes pratiques en programmation qui vous aideront à devenir un développeur plus efficace et à produire un code de qualité.

I. Établir une structure claire :

L’une des premières étapes pour écrire un bon code consiste à établir une structure claire. Voici quelques recommandations à suivre :

Décomposer le code en fonctions ou méthodes logiques pour améliorer la lisibilité et la réutilisabilité.
Utiliser des noms de variables et de fonctions significatifs afin de faciliter la compréhension du code par les autres développeurs. Organiser les fichiers et les dossiers de manière cohérente pour permettre une navigation aisée dans le projet. .

II. Commenter et documenter votre code

La documentation est essentielle pour rendre votre code compréhensible et maintenable. Voici quelques conseils à suivre :

Ajouter des commentaires pour expliquer les parties complexes du code ou les décisions de conception. Utiliser des outils de génération de documentation, tels que Doxygen ou Javadoc, pour créer une documentation complète et lisible. Écrire des exemples d’utilisation pour aider les autres développeurs à comprendre comment utiliser votre code.

III. Éviter la duplication de code

La duplication de code est une pratique à éviter absolument.
Voici pourquoi :
1) La duplication rend le code plus difficile à maintenir et augmente les chances d’introduire des erreurs.

2) Au lieu de dupliquer du code, créez des fonctions ou des classes réutilisables pour éviter les répétitions inutiles.

3) Utilisez des bibliothèques ou des modules externes pour bénéficier du travail réalisé par d’autres développeurs.

IV. Effectuer des tests unitaires

Les tests unitaires sont essentiels pour garantir la qualité du code et faciliter les modifications ultérieures. Voici ce qu’il faut garder à l’esprit :

Écrivez des tests unitaires pour chaque fonction ou méthode afin de vérifier leur bon fonctionnement. Utilisez des frameworks de test, tels que JUnit pour Java, pour faciliter l’écriture et l’exécution des tests. Automatisez vos tests et exécutez-les régulièrement pour vous assurer que les modifications ultérieures ne cassent pas le code existant.

V. Gérer les erreurs et les exceptions

La gestion des erreurs et des exceptions est une partie essentielle de la programmation robuste. Voici quelques conseils à prendre en compte :

Utilisez des mécanismes de gestion d’exceptions appropriés pour capturer et traiter les erreurs. Évitez de masquer les erreurs en les attrapant sans effectuer de traitement approprié. Propagez les exceptions appropriées vers les niveaux supérieurs de l’application pour une gestion cohérente des erreurs

VI. Optimiser la performance lorsque cela est nécessaire :

Bien que la plupart du temps, l’optimisation prématurée ne soit pas recommandée, il est important de garder à l’esprit les performances de votre code. Identifiez les sections critiques et utilisez des algorithmes et des structures de données efficaces pour optimiser les performances lorsque cela est nécessaire.
Cependant, assurez-vous de mesurer les gains de performances réels avant d’apporter des modifications significatives à votre co

Conclusion:

En suivant ces bonnes pratiques en programmation, vous pouvez créer des logiciels de qualité supérieure, faciles à maintenir et évolutifs. Une structure claire, une documentation adéquate, l’évitement de la duplication de code, l’implémentation de tests unitaires et une gestion appropriée des erreurs sont autant d’éléments essentiels à intégrer dans votre flux de travail de développement.

En adoptant ces bonnes pratiques, vous contribuerez à améliorer la qualité de votre code et à faciliter la collaboration avec d’autres développeurs. Gardez à l’esprit que les bonnes pratiques en programmation évoluent avec le temps, donc restez ouvert aux nouvelles idées et aux nouvelles techniques pour continuer à développer vos compétences en tant que programmeur.

0 comment 414 views

php-crud-mysql-bootstrap-5-create-read-update-delete

by personne 2 septembre 2022

Dans ce didacticiel PHP CRUD, nous allons créer une application PHP CRUD entièrement fonctionnelle avec Bootstrap 5, PHP et MySQL.

PHP CRUD signifie Créer, Lire, Mettre à jour, Supprimer, ce qui est un moyen facile de mémoriser tous les composants nécessaires à une application de site Web entièrement dynamique. Nous allons utiliser des instructions MySQL appelées INSERT , SELECT , UPDATE et DELETE qui correspondent à la fonctionnalité CRUD.

Vous allez aussi apprendre à ajouter des données dans une basse de données, de supprimer un étudiant, ajouter un étudiant, de mettre à jour les informations d’un étudiant, de lister les étudiants ainsi que leurs détails. vous allez aussi apprendre à utiliser les classes Bootstrap, de faire la responsivités etc.

Pour un didacticiel vidéo complet de ce tutoriel application CRUD PHP, vous pouvez regarder la vidéo YouTube donnée. Nb: n’oubliez de visiter les autres vidéos disponible sur la chaine et n’oubliez pas aussi de vous abonner à la chaine pour

Avant de commencer, vous devez au préalable se rendre dans phpMyAdmin pour créer une base de données.

Ensuite nous passons directement à la création de notre fichier de configuration php qui nous permet de faire connecter la base de données récemment crée au niveau de phpmyadmin avec notre travail.

Créez un fichier avec le nom connect.php. copiez et collez les codes donnés dans votre fichier PHP. N’oubliez pas que vous devez créer un fichier avec une extension .php

				
					<?php 
 $con = mysqli_connect('localhost', 'root', '');
 	if (!$con) {
 		die("database connection failed" . mysqli_error($con));
 	}

 $select_db = mysqli_select_db($con, 'php_crud_app');
 	if (!$select_db) {
 		die("database selected failed" . mysqli_error($con));
 	}

 ?>

Ensuite Créez un fichier avec le nom navbar.php. qui nous permet de créer la barre de navigation entre les différentes pages qu’on va crée par la suite; copiez et collez les codes donnés dans votre fichier PHP. N’oubliez pas que vous devez créer un fichier avec une extension .php

				
					
<nav class="navbar navbar-expand-lg navbar-light bg-nav">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sen Dev Tech</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav m-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="view.php">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="index.php">Ajouter un Etudiant</a>
        </li>
    
      </ul>
      <span class="navbar-text">
        Profil Admin
      </span>
    </div>
  </div>
</nav>

Créez un fichier avec le nom index.php. copiez et collez les codes donnés dans votre fichier PHP.

				
					<?php 

require_once ('connect.php');
	if (isset($_POST) & !empty($_POST)) {
		$nom = ($_POST['nom']);
		$prenom = ($_POST['prenom']);
		$email = ($_POST['email']);
		$gender = $_POST['gender'];
		$age = $_POST['age'];

		$CreateSql = "INSERT INTO `etudiant` (first_name, 	last_name, email, gender, age)  VALUES('$nom', '$prenom', '$email', '$gender', '$age') ";
		$res = mysqli_query($con, $CreateSql) or die(mysqli_error($con));
		if ($res) {
			$message = "insertion reussi avec succès";
		}else{
			$erreur = "erreur d'insertion a la base";
		}
	}

 ?>


<!DOCTYPE html>
<html>
<head>
	<title>crud app php</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css" >

</head>
<body>
	<?php 	
		include 'navbar.php';
	 ?>

	<div class="container">
		<div class="row pt-4">
			<?php if (isset($message)) { ?>
				<div class="alert alert-success" role="alert">
					<?php echo $message; ?>
				</div> <?php } ?>

				<?php if (isset($erreur)) { ?>
				<div class="alert alert-danger" role="alert">
					<?php echo $erreur; ?>
				</div> <?php } ?>

			<form action="" method="POST" class="form-horizontal col-md-6 pt-4">
				<h2>Crud App by sen dev tech</h2>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Nom</label>
					<div class="col-sm-10">
						<input type="text" name="nom" placeholder="Nom" class="form-control" id="input1">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">prenom</label>
					<div class="col-sm-10">
						<input type="text" name="prenom" placeholder="prenom" class="form-control" id="input1">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Email</label>
					<div class="col-sm-10">
						<input type="email" name="email" placeholder="e-mail" class="form-control" id="input1">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Genre</label>
					<div class="col-sm-10">
						<label>
							<input type="radio" name="gender" id="optionsRadios" value="h" checked>
							H
						</label>
						<label>
							<input type="radio" name="gender" id="optionsRadios" value="f" checked>
							F
						</label>
						
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Age</label>
					<div class="col-sm-10">
						<select name="age" class="form-control">
							<option>Ton age</option>
							<option value="20">20</option>
							<option value="21">21</option>
							<option value="22">22</option>
							<option value="23">23</option>
							<option value="24">24</option>

						</select>
					</div>
				</div>

				<div class="pt-4">
					<input type="submit" value="submit" class="btn btn-primary m-3">
					<a href="view.php">
						<button class="btn btn-success m-3" type="button">
							voir la liste
						</button>
					</a>
				</div>
			</form>
		</div>
	</div>
	
	
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Créez un fichier avec le nom view.php. copiez et collez les codes donnés dans votre fichier PHP.

				
					<?php 
	require_once ('connect.php');
	$ReadSql = "SELECT * FROM `etudiant` ";

	$res = mysqli_query($con, $ReadSql);

 ?>


<!DOCTYPE html>
<html>
<head>
	<title>crud app php</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css" >

</head>
<body>

	<?php 	
		include 'navbar.php';
	 ?>
	
	<div class="container">
		<div class="row pt-4">
			<h2>crup app by sen dev tech</h2>

			<a href="index.php">
				<button class="btn btn-primary" type="">
					Ajouter un Etudiant
				</button>
			</a>
		</div>

		<table class="table table-striped mt-3">
			<thead>
				<tr>
					<th>id</th>
					<th>Nom complet</th>
					<th>email</th>
					<th>Age</th>
					<th>genre</th>
					<th>Actions</th>
				</tr>
			</thead>

			<tbody>
				<?php while ($r = mysqli_fetch_assoc($res)) {
				?>

				<tr>
					<th scope="row"><?php echo $r['id']; ?></th>
					<td><?php echo $r['first_name'] ." ". $r['last_name']; ?></td>
					<td><?php echo $r['email']; ?></td>
					<td><?php echo $r['age']; ?></td>
					<td><?php echo $r['gender']; ?></td>

					<td>
						<a href="update.php?id=<?php echo $r['id']; ?>" class="m-2">
							<i class="fa fa-edit fa-2x"></i>
						</a>
						<i class="fa fa-trash fa-2x red-icon"
						 data-bs-toggle="modal"
						 data-bs-target="#exampleModal<?php echo $r['id']; ?>">
						 	
						 </i>

						 <div class="modal fade" id="exampleModal<?php echo $r['id']; ?>" role="dialog">
						 	<div class="modal-dialog">
						 		<div class="modal-content">
						 			<div class="modal-body">
						 				<p>etes vous sur de vouloir supprimer cette etudiant ?</p>
						 			</div>
						 			<div class="modal-footer">
						 				<button type="button" class="btn btn-primary"
						 				data-bs-dismiss="modal">Annuler</button>
						 				<a href="delete.php?id=<?php echo $r['id']; ?>">
						 					<button class="btn btn-danger" type="button">Confirmer</button>
						 				</a>
						 			</div>
						 		</div>
						 	</div>
						 </div>
					</td>
				</tr>
			<?php } ?>
			</tbody>
		</table>


	</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Créez un fichier avec le nom update.php. copiez et collez les codes donnés dans votre fichier PHP. en effet, ce code nous permet de mettre à jour c’est à dire de modifier les données depuis notre base données

				
					<?php 

require_once ('connect.php');

	$id = $_GET['id'];
	$selSql = "SELECT * FROM `etudiant` WHERE id=$id";
	$res = mysqli_query($con, $selSql);
	$r = mysqli_fetch_assoc($res);

	if (isset($_POST) & !empty($_POST)) {
		$nom = ($_POST['nom']);
		$prenom = ($_POST['prenom']);
		$email = ($_POST['email']);
		$gender = $_POST['gender'];
		$age = $_POST['age'];

		$UpdateSql = "UPDATE `etudiant` SET first_name='$nom',	last_name='$prenom', email='$email', gender='$gender', age='$age'  WHERE id=$id ";

		$res = mysqli_query($con, $UpdateSql);
		if ($res) {
			header("location: view.php");
		}else{
			$erreur = "la mise à jour a échoué.";
		}
	}

 ?>


<!DOCTYPE html>
<html>
<head>
	<title>crud app php</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="style.css" >

</head>
<body>
	<?php 	
		include 'navbar.php';
	 ?>

	<div class="container">
		<div class="row pt-4">
				<?php if (isset($erreur)) { ?>
				<div class="alert alert-danger" role="alert">
					<?php echo $erreur; ?>
				</div> <?php } ?>

			<form action="" method="POST" class="form-horizontal col-md-6 pt-4">
				<h2>Crud App by sen dev tech</h2>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Nom</label>
					<div class="col-sm-10">
						<input type="text" name="nom" placeholder="Nom" 
						class="form-control" id="input1"
						value="<?php echo $r['first_name'] ?>">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">prenom</label>
					<div class="col-sm-10">
						<input type="text" name="prenom" placeholder="prenom" class="form-control" id="input1"
						value="<?php echo $r['last_name'] ?>">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Email</label>
					<div class="col-sm-10">
						<input type="email" name="email" placeholder="e-mail" class="form-control" id="input1"
						value="<?php echo $r['email'] ?>">
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Genre</label>
					<div class="col-sm-10">
						<label>
							<input type="radio" name="gender" id="optionsRadios" 
							value="h" <?php if($r['gender'] == 'h'){ echo "checked";} ?>>
							H
						</label>
						<label>
							<input type="radio" name="gender" id="optionsRadios" value="f" <?php if($r['gender'] == 'f'){ echo "checked";} ?>>
							F
						</label>
						
					</div>
				</div>

				<div class="form-group">
					<label for="input1" class="col-sm-2 control-label">Age</label>
					<div class="col-sm-10">
						<select name="age" class="form-control">
							<option>Ton age</option>
							<option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?>>20</option>

							<option value="21"  <?php if($r['age'] == '21'){ echo "selected";} ?>>21</option>

							<option value="22"  <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option>

							<option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option>

							<option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?>>24</option>

						</select>
					</div>
				</div>

				<div class="pt-4">
					<input type="submit" value="submit" class="btn btn-primary m-3">
					
				</div>
			</form>
		</div>
	</div>
	
	
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Créez un fichier avec le nom delete.php. copiez et collez les codes donnés dans votre fichier PHP.

				
					<?php 

require_once ('connect.php');

	$id = $_GET['id'];
	$DelSql = "DELETE FROM `etudiant` WHERE id=$id";

	$res = mysqli_query($con, $DelSql);
	if ($res) {
		header("Location: view.php");
	}else{
		echo "Failed to delete";
	}

 ?>

En fin nous allons créer un fichier avec le nom style.css qui nous permet de mettre en forme notre application et de bien organiser notre travail.

Alors copiez et collez les codes donnés dans votre fichier CSS. N’oubliez pas que vous devez créer un fichier avec une extension .css

				
					.bg-nav{
	box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
	background: #fff;
	z-index: 1000;
}
.navbar .navbar-brand{
	color: #0f056b;
	font-weight: bold;
}
.navbar-light .navbar-nav .nav-link {
    color: #666;
    font-weight: bold;
}
.navbar-light .navbar-nav .nav-link:hover{
    color: #fff;
    background: #0f056b;
    border-radius: 5px;
}
.navbar-text{
	color: #666;
    font-weight: bold;
}
.container{
	margin-top: 2rem;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
}
.red-icon{
	color: red;
	cursor: pointer;
}

C’est tout, maintenant vous avez réussi à créer votre Application de Gestion des étudiants en Bootstrap PHP et MySQL. Si votre code ne fonctionne pas ou si vous rencontrez des problèmes, veuillez suivre le tutoriel YouTube disponible ici : suivre la vidéo complète sur YouTube . C’est gratuit

0 comment 8k views

responsive-admin-dashboard-en-html-et-css

by personne 25 août 2022

Dans ce tutoriel je vous apprends à créer un Dashboard Admin tout responsive avec du HTML et CSS uniquement.

En effet vous allez découvrir dans cet article des notions solide pour créer une interface admin adaptée à votre besoin et vous allez aussi apprendre en profondeur HTML et CSS sur les animations, les grid, flex-box, comment créer un sidebar, un menu…

Dans un premier temps vous devez télécharger Fontawesome pour les icons ou bien utilisé le lien cdn cliquez ici , si vous avez de la connexion bien évidement.

Apres avoir télécharger les outils nécessaire nous allons maintenant créer notre Sidebar en premier :

				
					<div class="sidebar">
		<div class="sidebar-brand">
			<h2><span class="fa fa-user-o"> </span> Learn Programming</h2>
		</div>

		<div class="sidebar-menu">
			<ul>
				<li><a href="#" class="active"><span class="fa fa-home"></span><span>Accueil</span></a></li>
				<li><a href="#"><span class="fa fa-tasks"></span><span>Taches</span></a></li>
				<li><a href="#"><span class="fa fa-th-large"></span><span>Blog</span></a></li>
				<li><a href="#"><span class="fa fa-line-chart"></span><span>Statistiques</span></a></li>
				<li><a href="#"><span class="fa fa-address-book"></span><span>A-propos</span></a></li>
				<li><a href="#"><span class="fa fa-clipboard"></span><span>Projets</span></a></li>
				<li><a href="#"><span class="fa fa-money"></span><span>Bilans</span></a></li>
				<li><a href="#"><span class="fa fa-registered"></span><span>Enregistrement</span></a></li>
				<li><a href="#"><span class="fa fa-user"></span><span>Contact</span></a></li>
			</ul>
		</div>
	</div>

le code CSS de notre Sidebar:

				
					*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	list-style-type: none;
	text-decoration: none;
	font-family: 'verdana';
}
.sidebar{
	width: 300px;
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	background: #008ea1;
	z-index: 100;
	transition: width 300ms;
}
.sidebar-brand{
	height: 90px;
	padding: 1rem 0rem 1rem 2rem;
	color: #fff;
}
.sidebar-brand span{
	display: inline-block;
	margin-right: 1rem;
}
.sidebar-menu{
	margin-top: 1rem;
}
.sidebar-menu a{
	padding-left: 1rem;
	display: block;
	color: #fff;
	font-size: 1.1rem;
}
.sidebar-menu li{
	width: 100%;
	margin-bottom: 2rem;
	padding-left: 10%;
}
.sidebar-menu a span:first-child{
	padding-left: 1rem;
	font-size: 1.5rem;
}
.sidebar-menu a.active{
	background: #fff;
	padding-top: 1rem;
	padding-bottom: 1rem;
	color: #008ea1;
	border-radius: 30px 0px 0px 0px;
}
.content{
	transition: margin-left 300ms;
	margin-left: 22%;
}

NB: Apres la creation de notre sidebar, nous avons crée une div avec la classe content qui va englober notre contenu mais ce dernier est aussi accompagné d’une balise main. donc cela veut dire que tout le reste de notre code se trouve entre ces deux.

Pour plus de compréhension, vous pouvez aussi suivre la vidéo sur YouTube en cliquant ici

Creation de notre navbaar:

				
					<div class="content">
				<header>
					<p><label for="menu"><span class="fa fa-bars"></span></label><span class="accueil">Accueil</span></p>

					<div class="search-wrapp">
						<span class="fa fa-search"></span>
						<input type="search" name="" placeholder="recherche">
					</div>

					<div id="dropdown" class="user-wrapp">
						<div>
							<h4>Alassane</h4>
							<small>Admin</small>
						</div>
						<img decoding="async" src="images/pp.jpg" width="30" height="30" class="logo-admin">
						<div class="dropdown-content">
							<p>Profil</p>
							<p>Deconnexion</p>
						</div>
					</div>
				</header>

Remarque: si vous constatez bien le code, j’ai crée la div mais je ne les pas fermé; c’est à la fin du code global que vous allez le fermé.

Code CSS du navbar :

				
					header{
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	padding: 1rem;
	box-shadow: 2px 5px 15px 2px rgb(0 0 0 / 10%);
	position: fixed;
	left: 22%;
	width: calc(100% - 22%);
	top: 0;
	z-index: 100;
	transition: left 300ms;
}
.accueil{
	font-size: 1.5rem;
	padding-right: 1rem;
	margin-left: 15px;
	color: #008ea1;
}
.search-wrapp{
	border: 1px solid #008ea1;
	border-radius: 20px;
	height: 38px;
	display: flex;
	align-items: center;
	overflow-x: hidden;
}
.search-wrapp input{
	height: 100%;
	padding: .5rem;
	border: none;
	outline: none;
}
.search-wrapp span{
	display: inline-block;
	padding: 0rem 1rem;
	font-size: 1.5rem;
	color: #008ea1;
}
.user-wrapp{
	display: flex;
	align-items: center;
}
.user-wrapp img{
	border-radius: 50%;
	margin-right: 5rem;
}
.user-wrapp small{
	color: #ccc;
	display: inline-block;
}
.logo-admin{
	cursor: pointer;
}
#dropdown{
	position: relative;
	display: inline-block;
}
.dropdown-content{
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	height: 80px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 5px;
	z-index: 1;
}
#dropdown:hover .dropdown-content{
	display: block;
	cursor: pointer;
}
.dropdown-content p{
	padding: .5rem;
}

Ainsi je vais maintenant crée la balise main qui lui aussi va se fermé à la fin du code.

				
					<main>
					<div class="cards">
						 <div class="card-single">
						 	<div>
						 		<h2>2.000.000</h2>
						 		<small>Ventes</small>
						 	</div>
						 	<div>
						 		<span class="fa fa-shopping-cart"></span>
						 	</div>
						 </div>

						 <div class="card-single">
						 	<div>
						 		<h2>+30</h2>
						 		<small>Stock</small>
						 	</div>
						 	<div>
						 		<span class="fa fa-newspaper-o"></span>
						 	</div>
						 </div>


						 <div class="card-single">
						 	<div>
						 		<h2>58</h2>
						 		<small>Fournisseur</small>
						 	</div>
						 	<div>
						 		<span class="fa fa-outdent"></span>
						 	</div>
						 </div>

						 <div class="card-single">
						 	<div>
						 	<h2>20k</h2>
						 	<small>Communauté</small>
						 	</div>
						 	<div>
						 	<span class="fa fa-group"></span>
						 </div>

					 </div>
					</div>

code CSS des cards:

				
					
main{
	margin-top: 80px;
	background-color: #ebf6ff;
	padding: 2rem 1.5rem;
	min-height: calc(100vh);
}
.cards{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 2rem;
	margin-top: 1rem;
}
.card-single{
	display: flex;
	background-color: #fff;
	justify-content: space-between;
	padding: 2rem;
	border-radius: 10px;
	box-shadow: 2px 5px 10px 2px rgb(0 0 0 / 10%);
}
.card-single span:first-child{
	color: #f8e80c;
}
.card-single span:last-child{
	font-size: 2rem; 
}
.card-single small{
	color: grey;
}
.card-single:hover{
	background-color: #008ea1;
	color: #fff;
}

Nb: vous devez aussi savoir que le code est une continuité.

Code des deux tableaux et les statistiques :

				
					<div class="composant">
						<div class="ventes">
							<div class="case">
								<div class="header-case">
									<h2>Listes produits</h2>
									<button class="button">voir plus <span class="fa fa-arrow-right"></span></button>
								</div>
								<div class="body-case">
									<div class="tableau">
										<table width="100%">
											<thead>
												<tr>
													<td>modou</td>
													<td>pathe</td>
													<td>demba</td>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-one"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-two"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-three"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-four"></span>mass</td>
												</tr>
												<tr>
													<td>modou</td>
													<td>dmeba</td>
													<td><span class="status-produit color-five"></span>mass</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>


						<div class="stock">
							<div class="case">
								<div class="header-case">
									<h2>Clients fideles</h2>
								</div>

								<div class="body-case"> 
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>
									<div class="all-users">
										<div class="infos">
											<img loading="lazy" decoding="async" src="images/pp.jpg" width="30" height="30">
											<div>
												<h4>Omar</h4>
												<small>Embulant</small>
											</div>
										</div>

										<div class="user-contact">
											<span class="fa fa-facebook"></span>
											<span class="fa fa-whatsapp"></span>
											<span class="fa fa-phone"></span>
										</div>
									</div>

									
								</div>
								<button class="btn">voir plus <span class="fa fa-arrow-right"></span></button>
							</div>

						</div>


						<div class="statistiques">
							<div class="statistique-barre bar1"></div>
							<div class="statistique-barre bar2"></div>
							<div class="statistique-barre bar3"></div>
							<div class="statistique-barre bar4"></div>
							<div class="statistique-barre bar5"></div>
							<div class="statistique-barre bar6"></div>
							<div class="statistique-barre bar4"></div>
							<div class="statistique-barre bar5"></div>
							<div class="statistique-barre bar6"></div>
							<div class="statistique-barre bar4"></div>
							<div class="statistique-barre bar5"></div>
							<div class="statistique-barre bar6"></div>
						</div>


						<div class="legende">
							<h4>Legende</h4>
							<table>
								<tr>
									<td><span class="evolution color-one"></span>Riz</td>
								</tr>
								<tr>
									<td><span class="evolution color-two"></span>Mil</td>
								</tr>
							</table>
							<div class="txt-deco">
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
								tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
								quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
								</p>
							</div>
						</div>
					</div>

code CSS.

				
					.composant{
	margin-top: 3.5rem;
	display: grid;
	grid-gap: 2rem;
	grid-template-columns: 69% auto; 
}
.case{
	background-color: #fff;
	border-radius: 10px;
}
.header-case, .body-case{
	padding: .5rem
}
.header-case{
	display: flex;
	justify-content: space-between;
	align-items: center;

}
.header-case button{
	background-color: #008ea1;
	border-radius: 10px;
	color: #fff;
	font-size: .8rem;
	padding: .5rem 1rem;
	border: none;
	cursor: pointer;
}
.btn{
	background-color: #008ea1;
	border-radius: 10px;
	color: #fff;
	font-size: .8rem;
	padding: .5rem 1rem;
	border: none;
	cursor: pointer;
	margin-bottom: 1rem;
	margin-left: 5px;

}
table{
	border-collapse: collapse;
}
thead tr{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
thead td{
	font-weight: 700;
}
td{
	padding: .5rem 1rem;
}
td .status-produit{
	display: inline-block;
	height: 15px;
	width: 15px;
	margin-right: 1rem;
	border-radius: 50%;
}
.status-produit.color-one{
	background-color: #ec1c24;
}
.status-produit.color-two{
	background-color: #fff200;
}
.status-produit.color-three{
	background-color: #b83dba;
}
.status-produit.color-four{
	background-color: #00a8f3;
}
.status-produit.color-five{
	background-color: #b83dba;
}
tr td:last-child{
	display: flex;
	align-items: center;
}
.tableau{
	overflow-x: auto;
	width: 100%;
}
.all-users{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem .7rem;

}
.infos{
	display: flex;
	align-items: center;
}
.infos img{
	border-radius: 50%;
	margin-right: 1rem;
}
.user-contact span{
	font-size: 1.2rem;
	display: inline-block;
	margin-left: .5rem;
}
.fa-facebook{
	color: #4267B2;
	cursor: pointer;
}
.fa-whatsapp{
	color: #128C7E;
	cursor: pointer;
}
.fa-phone{
	color: #1DB954;
	cursor: pointer;
}
.fa-bars{
	cursor: pointer;
}
.statistiques{
	background-color: #fff;
	display: flex;
	height: 300px;
	align-items: flex-end;
}
.statistique-barre{
	flex-grow: 1;
	border: 1px solid #ccc;
	margin: 6px;
}
.bar1{
	height: 95%;
	background-color: #ec1c24;
}
.bar2{
	height: 55%;
	background-color: #00a8f3;
}
.bar3{
	height: 45%;
	background-color: #ec1c24;
}
.bar4{
	height: 85%;
	background-color: #00a8f3;
}
.bar5{
	height: 35%;
	background-color: #ec1c24;
}
.bar6{
	height: 95%;
	background-color: #00a8f3;
}
.legende{
	background-color: #fff;
	border-radius: 10px;
}
.legende h4{
	padding: 1rem;
}
td .evolution{
	display: inline-block;
	height: 15px;
	width: 15px;
	margin-right: 1rem;
	border-radius: 50%;
}
.evolution.color-one{
	background-color: #ec1c24;

}
.evolution.color-two{
	background-color: #00a8f3;
	
}
.txt-deco{
	padding: 1rem;
	font-weight: 500;
	color: grey;
}

Vous savez quand on vous créez votre admin vous aurez forcément besoin d’un calendrier pour pourvoir dater vos évènements et autres. ainsi nous avons à ce que vous en aurez besoin.

alors voici le code du calendrier :

				
					<div class="calendar">
						<div class="mois-annee">
							<ul>
								<li class="prev">&#10094;</li>
								<li class="next">&#10095;</li>
								<li>Mai <br /> <span>2021</span></li>
							</ul>
						</div>

						<ul class="mois">
							<li>Mo</li>
							<li>Tu</li>
							<li>We</li>
							<li>Th</li>
							<li>Fr</li>
							<li>Sa</li>
							<li>Su</li>
							
						</ul>

						<ul class="jours">
							<li>1</li>
							<li>2</li>
							<li>3</li>
							<li>4</li>
							<li>5</li>
							<li>6</li>
							<li>7</li>
							<li>8</li>
							<li>9</li>
							<li>10</li>
							<li>11</li>
							<li>12</li>
							<li>13</li>
							<li>14</li>
							<li>15</li>
							<li>16</li>
							<li>17</li>
							<li><span class="active">18</span></li>
							<li>19</li>
							<li>20</li>
							<li>21</li>
							<li>22</li>
							<li>23</li>
							<li>24</li>
							<li>25</li>
							<li>27</li>
							<li>28</li>
							<li>29</li>
							<li>30</li>
							<li>31</li>
							
						</ul>
					</div>
				</main>
		</div>

Nb: vous avez tous remarqué que c’est à la fin que j’ai fermé la balise main ainsi que la div qui contient la class content.

code CSS du calendrier :

				
					.calendar{
	padding-top: 2rem;

}
.mois-annee{
	padding: 70px 25px;
	width: 100%;
	background-color: #008ea1;
	text-align: center;
}
.mois-annee ul{
	margin: 0;
	padding: 0;
}
.mois-annee ul li{
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 3px;
}
.mois-annee .prev{
	float: left;
	padding-top: 10px;
}
.mois-annee .next{
	float: right;
	padding-top: 10px;
}
.mois{
	margin: 0;
	padding: 10px 0;
	background-color: #ddd;
}
.mois li{
	display: inline-block;
	width: 13%;
	color: #666;
	text-align: center;
}
.jours{
	padding: 10px 0;
	background-color: #eee;
	margin: 0; 
}
.jours li{
	display: inline-block;
	width: 13%;
	text-align: center;
	margin-bottom: 5px;
	font-size: 12px;
	color: #777;
}
.jours li .active{
	padding: 5px;
	background-color: #008ea1;
	color: #fff !important;
}

code de notre toggle barre, c’est à dire les trois barre à coté. Nb: vous devez le mettre en haut de votre code après la balise body :

				
					<input type="checkbox" name="" id="menu">

code css :

				
					#menu:checked ~ .sidebar{
	width: 60px;
}
#menu:checked ~ .sidebar .sidebar-brand, h2 span:last-child,
#menu:checked ~ .sidebar li a span:last-child{
	display: none;
}
#menu:checked ~ .content{
	margin-left: 60px;
}
#menu:checked ~ .content header{
	width: calc(100% - 60px);
	left: 60px; 
}

code pour gérer la responsivité avec les média queries :

				
					
@media only screen and (max-width: 960px){
	.cards{
		grid-template-columns: repeat(3, 1fr);
	}
	.recent-grid{
		grid-template-columns: 60% 40%;
	}
}
@media only screen and (max-width: 768px){
	.cards{
		grid-template-columns: 100%;
	}
	.composant{
		grid-template-columns: repeat(1, 1fr);
	}
	.search-wrapp{
		display: none;
	}
	.sidebar{
		left: -100% !important;
	}
	header p{
		display: flex;
		align-items: center;
	}
	header p label{
		display: flex;
		padding-right: 0rem;
		margin-right: 1rem;
		height: 40px;
		width: 40px;
		border-radius: 50%;
		color: #fff;
		align-items: center;
		justify-content: center !important;
		background-color: #008ea1; 
	}
	header p span{
		text-align: center;
		padding-right: 0rem;
	}
	.content{
		width: 100%;
		margin-left: 0rem !important;
	}
	header{
		width: 100% !important;
		left: 0 !important;
	}
	#menu:checked ~ .sidebar {
		left: 0 !important;
		z-index: 100;
		width: 45%;
	}
	#menu:checked ~ .sidebar li a{
		padding-left: 1rem;

	}
	#menu:checked ~ .sidebar .sidebar-brand,
	#menu:checked ~ .sidebar li{
			padding-left: 2rem;
			text-align: left;
	}
	#menu:checked ~ .sidebar .sidebar-brand, h2 span:last-child,
	#menu:checked ~ .sidebar li a span:last-child{
		display: inline;
	}
	#menu:checked ~ .content{
		margin-left: 0rem !important;
	}
}
@media only screen and (max-width: 560px){
	.cards{
		grid-template-columns: 100%;

	}
}
@media only screen and (max-width: 1200px){
	.sidebar{
		width: 60px;
	}
	.sidebar .sidebar-brand, h2 span:last-child,
	.sidebar li a span:last-child{
		display: none;
	}
	.content{
		margin-left: 60px;
	}
	.content header{
		width: calc(100% - 60px);
		left: 60px;
	}
}

10 comments 8k views

social-media-icon-hover-effect-using-html-css

by personne 6 septembre 2022

Salut les amis, aujourd’hui, dans ce blog, vous apprendrez à créer des icones des réseaux sociaux en HTML et CSS puis de créer des animations avec la propriété hover, rotation …

Vous pouvez aussi regarder la vidéo complète disponible sur ma chaine YouTube :

Tout d’abord, créez une page qui aura pour extension .html puis copiez le code et collez le :

				
					<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>animate icon css</title>
	<link rel="stylesheet" type="text/css"
        href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
 	<div class="container">
 		<div class="icons">
 			<ul>
 				<li><i class="fa fa-facebook"></i></li>
 				<li><i class="fa fa-whatsapp"></i></li>
 				<li><i class="fa fa-twitter"></i></li>
 				<li><i class="fa fa-instagram"></i></li>
 				<li><i class="fa fa-envelope"></i></li>
 				<li><i class="fa fa-bell"></i></li>
 			</ul>
 		</div>
 	</div>
<script type='text/javascript' id="soledad-pagespeed-header" data-cfasync="false">!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(n="undefined"!=typeof globalThis?globalThis:n||self).LazyLoad=t()}(this,(function(){"use strict";function n(){return n=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},n.apply(this,arguments)}var t="undefined"!=typeof window,e=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,o=t&&"classList"in document.createElement("p"),a=t&&window.devicePixelRatio>1,r={elements_selector:".lazy",container:e||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return n({},r,t)},u=function(n,t){var e,i="LazyLoad::Initialized",o=new n(t);try{e=new CustomEvent(i,{detail:{instance:o}})}catch(n){(e=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:o})}window.dispatchEvent(e)},l="src",s="srcset",f="sizes",d="poster",_="llOriginalAttrs",g="loading",v="loaded",b="applied",p="error",h="native",m="data-",E="ll-status",I=function(n,t){return n.getAttribute(m+t)},y=function(n){return I(n,E)},A=function(n,t){return function(n,t,e){var i="data-ll-status";null!==e?n.setAttribute(i,e):n.removeAttribute(i)}(n,0,t)},k=function(n){return A(n,null)},L=function(n){return null===y(n)},w=function(n){return y(n)===h},x=[g,v,b,p],O=function(n,t,e,i){n&&(void 0===i?void 0===e?n(t):n(t,e):n(t,e,i))},N=function(n,t){o?n.classList.add(t):n.className+=(n.className?" ":"")+t},C=function(n,t){o?n.classList.remove(t):n.className=n.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},M=function(n){return n.llTempImage},z=function(n,t){if(t){var e=t._observer;e&&e.unobserve(n)}},R=function(n,t){n&&(n.loadingCount+=t)},T=function(n,t){n&&(n.toLoadCount=t)},G=function(n){for(var t,e=[],i=0;t=n.children[i];i+=1)"SOURCE"===t.tagName&&e.push(t);return e},D=function(n,t){var e=n.parentNode;e&&"PICTURE"===e.tagName&&G(e).forEach(t)},V=function(n,t){G(n).forEach(t)},F=[l],j=[l,d],P=[l,s,f],S=function(n){return!!n[_]},U=function(n){return n[_]},$=function(n){return delete n[_]},q=function(n,t){if(!S(n)){var e={};t.forEach((function(t){e[t]=n.getAttribute(t)})),n[_]=e}},H=function(n,t){if(S(n)){var e=U(n);t.forEach((function(t){!function(n,t,e){e?n.setAttribute(t,e):n.removeAttribute(t)}(n,t,e[t])}))}},B=function(n,t,e){N(n,t.class_loading),A(n,g),e&&(R(e,1),O(t.callback_loading,n,e))},J=function(n,t,e){e&&n.setAttribute(t,e)},K=function(n,t){J(n,f,I(n,t.data_sizes)),J(n,s,I(n,t.data_srcset)),J(n,l,I(n,t.data_src))},Q={IMG:function(n,t){D(n,(function(n){q(n,P),K(n,t)})),q(n,P),K(n,t)},IFRAME:function(n,t){q(n,F),J(n,l,I(n,t.data_src))},VIDEO:function(n,t){V(n,(function(n){q(n,F),J(n,l,I(n,t.data_src))})),q(n,j),J(n,d,I(n,t.data_poster)),J(n,l,I(n,t.data_src)),n.load()}},W=["IMG","IFRAME","VIDEO"],X=function(n,t){!t||function(n){return n.loadingCount>0}(t)||function(n){return n.toLoadCount>0}(t)||O(n.callback_finish,t)},Y=function(n,t,e){n.addEventListener(t,e),n.llEvLisnrs[t]=e},Z=function(n,t,e){n.removeEventListener(t,e)},nn=function(n){return!!n.llEvLisnrs},tn=function(n){if(nn(n)){var t=n.llEvLisnrs;for(var e in t){var i=t[e];Z(n,e,i)}delete n.llEvLisnrs}},en=function(n,t,e){!function(n){delete n.llTempImage}(n),R(e,-1),function(n){n&&(n.toLoadCount-=1)}(e),C(n,t.class_loading),t.unobserve_completed&&z(n,e)},on=function(n,t,e){var i=M(n)||n;nn(i)||function(n,t,e){nn(n)||(n.llEvLisnrs={});var i="VIDEO"===n.tagName?"loadeddata":"load";Y(n,i,t),Y(n,"error",e)}(i,(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_loaded),A(t,v),O(e.callback_loaded,t,i),o||X(e,i)}(0,n,t,e),tn(i)}),(function(o){!function(n,t,e,i){var o=w(t);en(t,e,i),N(t,e.class_error),A(t,p),O(e.callback_error,t,i),o||X(e,i)}(0,n,t,e),tn(i)}))},an=function(n,t,e){!function(n){n.llTempImage=document.createElement("IMG")}(n),on(n,t,e),function(n){S(n)||(n[_]={backgroundImage:n.style.backgroundImage})}(n),function(n,t,e){var i=I(n,t.data_bg),o=I(n,t.data_bg_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage='url("'.concat(r,'")'),M(n).setAttribute(l,r),B(n,t,e))}(n,t,e),function(n,t,e){var i=I(n,t.data_bg_multi),o=I(n,t.data_bg_multi_hidpi),r=a&&o?o:i;r&&(n.style.backgroundImage=r,function(n,t,e){N(n,t.class_applied),A(n,b),e&&(t.unobserve_completed&&z(n,t),O(t.callback_applied,n,e))}(n,t,e))}(n,t,e)},rn=function(n,t,e){!function(n){return W.indexOf(n.tagName)>-1}(n)?an(n,t,e):function(n,t,e){on(n,t,e),function(n,t,e){var i=Q[n.tagName];i&&(i(n,t),B(n,t,e))}(n,t,e)}(n,t,e)},cn=function(n){n.removeAttribute(l),n.removeAttribute(s),n.removeAttribute(f)},un=function(n){D(n,(function(n){H(n,P)})),H(n,P)},ln={IMG:un,IFRAME:function(n){H(n,F)},VIDEO:function(n){V(n,(function(n){H(n,F)})),H(n,j),n.load()}},sn=function(n,t){(function(n){var t=ln[n.tagName];t?t(n):function(n){if(S(n)){var t=U(n);n.style.backgroundImage=t.backgroundImage}}(n)})(n),function(n,t){L(n)||w(n)||(C(n,t.class_entered),C(n,t.class_exited),C(n,t.class_applied),C(n,t.class_loading),C(n,t.class_loaded),C(n,t.class_error))}(n,t),k(n),$(n)},fn=["IMG","IFRAME","VIDEO"],dn=function(n){return n.use_native&&"loading"in HTMLImageElement.prototype},_n=function(n,t,e){n.forEach((function(n){return function(n){return n.isIntersecting||n.intersectionRatio>0}(n)?function(n,t,e,i){var o=function(n){return x.indexOf(y(n))>=0}(n);A(n,"entered"),N(n,e.class_entered),C(n,e.class_exited),function(n,t,e){t.unobserve_entered&&z(n,e)}(n,e,i),O(e.callback_enter,n,t,i),o||rn(n,e,i)}(n.target,n,t,e):function(n,t,e,i){L(n)||(N(n,e.class_exited),function(n,t,e,i){e.cancel_on_exit&&function(n){return y(n)===g}(n)&&"IMG"===n.tagName&&(tn(n),function(n){D(n,(function(n){cn(n)})),cn(n)}(n),un(n),C(n,e.class_loading),R(i,-1),k(n),O(e.callback_cancel,n,t,i))}(n,t,e,i),O(e.callback_exit,n,t,i))}(n.target,n,t,e)}))},gn=function(n){return Array.prototype.slice.call(n)},vn=function(n){return n.container.querySelectorAll(n.elements_selector)},bn=function(n){return function(n){return y(n)===p}(n)},pn=function(n,t){return function(n){return gn(n).filter(L)}(n||vn(t))},hn=function(n,e){var o=c(n);this._settings=o,this.loadingCount=0,function(n,t){i&&!dn(n)&&(t._observer=new IntersectionObserver((function(e){_n(e,n,t)}),function(n){return{root:n.container===document?null:n.container,rootMargin:n.thresholds||n.threshold+"px"}}(n)))}(o,this),function(n,e){t&&window.addEventListener("online",(function(){!function(n,t){var e;(e=vn(n),gn(e).filter(bn)).forEach((function(t){C(t,n.class_error),k(t)})),t.update()}(n,e)}))}(o,this),this.update(e)};return hn.prototype={update:function(n){var t,o,a=this._settings,r=pn(n,a);T(this,r.length),!e&&i?dn(a)?function(n,t,e){n.forEach((function(n){-1!==fn.indexOf(n.tagName)&&function(n,t,e){n.setAttribute("loading","lazy"),on(n,t,e),function(n,t){var e=Q[n.tagName];e&&e(n,t)}(n,t),A(n,h)}(n,t,e)})),T(e,0)}(r,a,this):(o=r,function(n){n.disconnect()}(t=this._observer),function(n,t){t.forEach((function(t){n.observe(t)}))}(t,o)):this.loadAll(r)},destroy:function(){this._observer&&this._observer.disconnect(),vn(this._settings).forEach((function(n){$(n)})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(n){var t=this,e=this._settings;pn(n,e).forEach((function(n){z(n,t),rn(n,e,t)}))},restoreAll:function(){var n=this._settings;vn(n).forEach((function(t){sn(t,n)}))}},hn.load=function(n,t){var e=c(t);rn(n,e)},hn.resetStatus=function(n){k(n)},t&&function(n,t){if(t)if(t.length)for(var e,i=0;e=t[i];i+=1)u(n,e);else u(n,t)}(hn,window.lazyLoadOptions),hn}));

(function () {

    var PenciLazy = new LazyLoad({
        elements_selector: '.penci-lazy',
        data_bg: 'bgset',
        class_loading: 'lazyloading',
        class_entered: 'lazyloaded',
        class_loaded: 'pcloaded',
        unobserve_entered: true
    });

    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

    var observer = new MutationObserver(function(mutations, observer) {
        PenciLazy.update();
    });

    observer.observe(document, {
        subtree: true,
        attributes: true
    });
})();
</script>
</body>
</html>

Maintenant nous allons créer notre fichier CSS qui nous permettra de faire les animations avec differentes propiete CSS.

copiez le code et collez le dans le fichier CSS que vous allez créer et n’oubliez pas aussi de le linker avec le fichier HTML si non ça ne marchera pas.

				
					*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
	user-select: none;
}
body{
	background-color: lightgray;
	margin: 10%;
	margin-left: 35%;
}
.icons{
	position: relative;
	right: 1em;
}
.icons ul li{
	position: relative;
	display: inline-block;
	font-size: 35px;
	margin: 0 12px;
}
.icons ul li .fa{
	padding: 10px;
	color: #fff;
	background: #0f056b;
	border-radius: 50%;
	transition: .3s;
}
.icons ul li .fa:hover{
	transform: scale(1.2) rotate(360deg);
	color: orange;
	background: transparent;
}

0 comment 362 views

top 10 des attributs HTML dont vous ignorez peut-être l’existence

by personne 26 septembre 2022

1. Saisie semi-automatique

→ Les attributs de saisie semi-automatique précisent si le navigateur est autorisé à aider à remplir les champs du formulaire ou non..

→ S’il est activé, il aidera les utilisateurs avec les options de remplissage automatique telles que l’e-mail, les numéros de téléphone, la nationalité, etc.

				
					<input name="Phone-number" id="Phone-number" autocomplete="off">

2. Télécharger

→ L’attribut Download sur une balise d’ancrage spécifie que le fichier/l’objet doit être téléchargé sur le stockage local lorsqu’un utilisateur clique sur le lien hypertexte..

				
					<a href="document.pdf" download>telecharger le document</a>

3. Contenu modifiable

→ L’attribut contenteditable permet à l’utilisateur de modifier le contenu d’un élément.

				
					<div contenteditable="true"> je suis du texte à modifier</div>

4. Lecture seule

→ L’attribut readonly spécifie qu’un champ de saisie est en lecture seule et ne peut pas être modifié..

				
						<input type="text" name="html" value="langage" readonly>

5. Accepter

→ La valeur de l’attribut accept est une chaîne qui définit les types de fichiers que l’entrée de fichier doit accepter.

				
					<input type="file" accept=".jpg, .png, .gif">

6. Mise au point automatique

→ L’attribut autofocus indique que l’élément particulier doit être focalisé sur le chargement de la page.

				
					<input type="text" autofocus>

7. Vérification orthographique

→ L’attribut spellcheck définit si l’élément est vérifié pour les fautes d’orthographe.

				
						<p contenteditable="true" spellcheck="true">verifié</p>

8. Hidden

→ L’attribut Hidden précise si l’élément est visible ou non.

				
						<p hidden>Je suis un developpeur</p>

9. Contrôles

→ L’attribut control spécifie si les contrôles audio vidéo doivent être affichés ou non sur le lecteur par défaut..

				
					<audio controls="">
	<source src="son.mp3" type="audio/mpeg">
</audio>

10. Lecture automatique

→ L’attribut de lecture autoplay garantit que l’audio/vidéo commencera automatiquement à jouer dès qu’il sera chargé..

				
					<video autoplay src="chemin de la video" poster="image.png"></video>

Merci …

1 comment 221 views

trucs et astuces pour un site Web reactif CSS

by personne 6 juillet 2023

Il existe de nombreuses techniques et approches différentes pour rendre un site Web réactif avec CSS, mais voici quelques conseils pour vous aider à démarrer :

✧ Utilisez les unités relatives :

Au lieu d’utiliser des unités fixes comme les pixels, utilisez des unités relatives comme em ou rem.
Cela permettra à la mise en page de s’ajuster en fonction de la taille de l’écran de l’utilisateur. .

✧ Utilisez une approche axée sur le mobile :

Commencez par concevoir le site Web pour la plus petite taille d’écran, puis ajoutez des styles pour les écrans plus grands. Cela garantit que le site Web a une belle apparence sur tous les appareils. .

✧ Utiliser la grille CSS :

La grille CSS ou CSS Grid est un puissant outil de mise en page qui peut vous aider à créer des conceptions réactives. Il vous permet de créer des mises en page basées sur une grille qui s’ajustent en fonction de la taille de l’écran de l’utilisateur.
Si vous allez cloner un site Web ou démarrer un nouveau site Web, essayez d’abord de créer son filaire de ligne-colonne sur papier, cela vous aidera toujours à coder avec une vitesse propre et rapide. .

✧ Minimiser l’utilisation du positionnement absolu :

Le positionnement absolu peut casser la mise en page sur des écrans plus petits. Utilisez plutôt le positionnement relatif ou flexbox pour positionner les éléments. .

✧ Utiliser les unités de la fenêtre :

Les unités de fenêtre vous permettent de spécifier des tailles en fonction de la taille de l’écran de l’utilisateur.
Par exemple, vous pouvez utiliser vw (viewport width) pour spécifier une largeur correspondant à un pourcentage de la largeur de l’écran de l’utilisateur. .

✧ Utilisez les requêtes média :

Les requêtes multimédias vous permettent de spécifier différentes règles CSS pour différents appareils. Par exemple, vous pouvez utiliser un média requête pour modifier la taille de la police ou la mise en page d’une page lorsqu’elle est affichée sur un écran plus petit.
conseil de pro, vous pouvez utiliser l’extension de visionneuse réactive dans votre navigateur pour suivre vos conceptions réactives.
extension responsive viewer .

MERCI !

0 comment 186 views

Newer Posts

Older Posts