retrouvé ici les meilleurs articles sur la programmation
blog-post
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
crud app php
crud app php
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
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 :
Learn Programming
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:
Accueil
Alassane
Admin
Profil
Deconnexion
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.
2.000.000
Ventes
+30
Stock
58
Fournisseur
20k
Communauté
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 :
Listes produits
modou
pathe
demba
modou
dmeba
mass
modou
dmeba
mass
modou
dmeba
mass
modou
dmeba
mass
modou
dmeba
mass
Clients fideles
Omar
Embulant
Omar
Embulant
Omar
Embulant
Omar
Embulant
Omar
Embulant
Legende
Riz
Mil
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
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 :
- ❮
- ❯
- Mai
2021
- Mo
- Tu
- We
- Th
- Fr
- Sa
- Su
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 27
- 28
- 29
- 30
- 31
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 :
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;
}
}
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 :
animate icon css
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;
}
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.
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..
3. Contenu modifiable
→ L’attribut contenteditable permet à l’utilisateur de modifier le contenu d’un élément.
je suis du texte à modifier
4. Lecture seule
→ L’attribut readonly spécifie qu’un champ de saisie est en lecture seule et ne peut pas être modifié..
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.
6. Mise au point automatique
→ L’attribut autofocus indique que l’élément particulier doit être focalisé sur le chargement de la page.
7. Vérification orthographique
→ L’attribut spellcheck définit si l’élément est vérifié pour les fautes d’orthographe.
verifié
8. Hidden
→ L’attribut Hidden précise si l’élément est visible ou non.
Je suis un developpeur
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..
10. Lecture automatique
→ L’attribut de lecture autoplay garantit que l’audio/vidéo commencera automatiquement à jouer dès qu’il sera chargé..