Category:

programmation

les meilleurs de la programmation avec Sen Dev Tech

ecrire un programme qui permet d’afficher tous les tables de multiplication de 1 à 12

by personne

Fiche de TP algorithme Langage C : écrire un programme qui permet d’afficher tous les tables de multiplication de 1 à 12.

				
					#include <stdio.h>

//ECRIRE un programme qui permet d'afficher tous les tables de multiplication de 1 à 12

int main(){
	
	int n, i, t;
	//n=le nombre pour la table
	//t = variable de controle pour aller d'une table a l'autre
	
	for(t=1; t<=12; t++){ //boucle pour imprimer les 12 tables
	
	printf("=== table %d ==== \n", t); // separateurs
	
	for(i=1; i<=12; i++){ //boucles pour imprimer une table t
		
		printf("%d * %d = %d", t, i, t*i);
		
		printf("\n");
	}//fin impression de la table t en cours
  }//fin impression des 12 tables
}
0 comment 28 views
0 FacebookTwitter

ecrire un programme qui permet de faire la permutation de deux nombre donner par l’utilisateur

by personne

Fiche de TP Algorithme Langage C : écrire un programme qui permet de faire la permutation de deux nombre donner par l’utilisateur.

				
					#include <stdio.h>

int main(){
	          //Déclaration des variable
int A,B;
        //Saisie des valeurs d'entrée des variables
printf("saisir la premiere valeur ");

scanf("%d",&A);

printf("saisir la seconde valeur ");

scanf("%d",&B);
       //Permutation de A et B
A=A+B;
B=A-B;
A=A-B;
    //Affichage des résultats de la permutation
printf("après permutation on a A est egal a : %d",A);

printf("\n");

printf("après permutation on a B est egal a : %d",B);

printf("\n");
return 0;
}
0 comment 18 views
0 FacebookTwitter

envoyer un e-mail en utilisant une seule ligne de code en HTML

by personne

On peut utiliser l’élément a pour transmettre notre adresse mail à nos utilisateurs et leur permettre de nous envoyer simplement un mail.

Pour permettre l’envoi d’un mail en HTML, on va placer indiquer en valeur de l’attribut href de notre élément a la valeur mailto : suivie de notre adresse email.

Lorsqu’un visiteur va cliquer sur notre lien, sa messagerie par défaut va automatiquement s’ouvrir. Par exemple, si vous avez un Windows, ce sera certainement l’application « Mail » qui va s’ouvrir. De plus, le champ destinataire sera automatiquement rempli avec notre adresse email.

				
					<a href="mailto:sendevtech.com" target="_blank">Envoyer un mail</a>

Dès qu’un visiteur clique sur le texte de notre lien, sa messagerie par défaut s’ouvre s’il en a configuré une :

1 comment 105 views
1 FacebookTwitter

javascript-array-methods

by personne

JavaScript Array Methods

pop() method:

cette méthode supprime le dernier élément d’un tableau et renvoie cet élément. 

				
					<script>
    let cities = ["thies", "dakar", "mbour", "Touba"];
    // supprime le dernier element du tableau
    let removeCity = cities.pop();

    console.log(cities);
    console.log(removeCity); //affiche l'element supprimé du tableau
</script>
reduce() method:

cette méthode exécute une fonction de réduction sur chaque élément du tableau et renvoie une seule valeur de sortie

				
					<script type="text/javascript">
	const numbers = [20, 10, 10, 12];
	const sum = numbers.reduce((x, y) => x + y, 0);
	console.log(sum);
</script>
foreach() method:

cette méthode exécute une fonction fournie pour chaque élément du tableau. 

				
					<script type="text/javascript">
	const words = ["html", "css", "js"];
	words.forEach(word => console.log(word));
</script>
find() method :

cette méthode renvoie la valeur du premier élément du tableau qui satisfait la fonction de test fournie .

				
					<script type="text/javascript">
	const numbers = [3, 4, 5, 7, 10, 56, 123];

	const found = numbers.find(element => element > 10);
	console.log(found);
</script>
findIndex() method :

cette méthode renvoie l’indice du premier élément du tableau qui satisfait la fonction de test fournie ou renvoie -1 . 

				
					<script type="text/javascript">
	const numbers = [6, 11, 9, 100, 46];

	const indexFound = numbers.findIndex(element => element > 15);
	console.log(indexFound);
</script>
sort() method:

cette méthode trie les éléments d’un tableau dans un ordre spécifique (croissant ou décroissant) .

				
					<script type="text/javascript">
	let city = ["dakar", "thies", "matam", "bamako", "kidal"];

	// trie le tableau des villes par ordre croissant
	let sortedArray = city.sort();
	console.log(sortedArray);
</script>
push() method:

cette méthode ajoute zéro ou plusieurs éléments à la fin du tableau 

				
					<script type="text/javascript">
	let city = ["dakar", "thies", "louga"];

	// ajouter matam au tableau
	city.push("Matam");
	console.log(city);
</script>
filter() method:

cette méthode renvoie un nouveau tableau avec tous les éléments qui réussissent le test défini par la fonction donnée .

				
					<script type="text/javascript">
	const words = ["html", "javascript", "css", "php"];

	const longUse = words.filter(element => element.length > 4);
	console.log(longUse);
</script>
map() method :

cette méthode crée un nouveau tableau avec le résultat de l’appel d’une fonction pour chaque élément du tableau .

				
					<script type="text/javascript">
	const numbers = [2, 4, 5, 6, 9, 8];

	const doubled = numbers.map(x => x * 2);
	console.log(doubled);
</script>
concat() method :

cette méthode renvoie un nouveau tableau en fusionnant deux ou plusieurs valeurs/tableaux .

				
					<script type="text/javascript">
	let primeNumbers = [2, 3, 5, 7];
	let eventNumbers = [2, 3, 6, 8];
// rassemble les deux tableaux en un seul
	let joinedArray = primeNumbers.concat(eventNumbers);
	console.log(joinedArray);
</script>
0 comment 130 views
2 FacebookTwitter

nombre compris entre 0 et 100

by personne

Fiche de TP Algorithme Langage C : Ecrire un programme qui permet d’afficher les nombres compris entre 0 et 100 

				
					#include <stdio.h>

  int main(){
  	
  	int i;
  	
  	    for(i=0; i<=100; i++)
  	    
  	    printf("%d \n", i);
  }

NB : Dans cette exemple, nous allons utiliser les nombres compris entre 0 et 100 mais vous pouvez définir vos propres intervalles c’est à dire si aujourd’hui on m’a demandé les nombres compris entre 0 et 10 la je vais écrire le même programme mais je vais juste remplacer 100 par 10 au niveau de ma boucle. Donc la vous n’avez pas besoin de redéfinir le programme mais juste de changer la valeur

0 comment 14 views
0 FacebookTwitter

nombres impaires compris entre 0 et 50

by personne

Fiche de TP : Ecrire un programme en C qui permet d’afficher les nombres impaires compris entre 0 et 50

				
					#include <stdio.h>

  int main(){
  	
     int i;
     
       printf("voici les nombres impaires compris entre 0 et 50 \n",i);
       
      for(i=1; i<=50; i=i+2)
      
      printf("%d \t", i);
  }
0 comment 21 views
0 FacebookTwitter

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

by personne

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 908 views
0 FacebookTwitter

programme pour determiner une table de multiplication

by personne

Fiche de TP Algo Langage C: écrire un programme qui permet de déterminer la table de multiplication donné par l’utilisateur

				
					#include <stdio.h>

//ecrire un programme qui permet de determiner la table de multiplication donné par l'utilisateur
   int main(){
   	
   	int i, n;
   	
   	printf("donner un entier");
   	
   	 scanf("%d", &n);
   	 
   	   for(i=1; i<=10; i++)
   	   
   	   printf("%d * %d = %d \n", n, i, n*i);
   }
0 comment 27 views
0 FacebookTwitter

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

by personne

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;
	}
}
2 comments 1k views
0 FacebookTwitter

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

by personne

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 36 views
0 FacebookTwitter
Newer Posts
Older Posts

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More