2. 1
AVANT DE COMMENCER :
- CHAQUE LIGNE DE CODE EST ACOMMPAGNEE PAR DES
COMMENTAIRES.
- CONCENTREZ-VOUS AUX COMMENTAIRES : SONT TRES UTILES.
- LE TUTO CONTIENT DES CAPTURES ECRAN ET LE CODE DE CHAQUE
FICHIER PHP.
- ALLEZ ON COMMENCE
3. 2
I) Partie 1
Environnement de travail :
http://www.wampserver.com/
https://www.jetbrains.com/phpstorm/
http://getbootstrap.com/
1) Création base de données :
On va commencer par la création de notre Base
Nom de la base : « etudiants »
6. 5
Création page web dynamique :
On commence par la création d’un fichier PHP : « etudiant.php »
7. 6
Création de la connexion avec la base de données :
On commence par la création d’un fichier PHP pour la connexion : conn.php
- Il Ya deux techniques pour établir la connexion à la base de données :
La première est avec la fonction Mysql_connect(…) cette méthode n’est pas conseillé à cause
des faille de sécurité, ainsi elle fonctionne que avec MySQL pas avec les autre SGBD
La deuxième : celle qu’on va l’utiliser : allez on commence
8. 7
<?php
try
{
$strConnection = 'mysql:host=localhost;dbname=scolarite';
$pdo = new PDO($strConnection, 'root', '');
}
catch (PDOException $e){
$msg = 'ERREUR PDO dan' . $e->getMessage(); /*le point . Signifie la concaténation,
$e->getMessage() c'est le message d'erreur */
die ($msg);
}
?>
Maintenant on va inclure la connexion dans le fichier « etudiants.php »
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
9. 8
?>
Afficher les données stockées dans la base
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title>
</title>
</head>
<body>
<!-- création tableau-->
<table>
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les données à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient le
résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec ses
paramètres) sera stocké dans pc -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je passes au
html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- afficher le code de l'étudiant
entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
<?php }?>
</tbody>
11. 10
Dans le dossier CSS , on va créer un fichier de style css : myStyle
Maintenant on va ajouter quelque lignes dans notre fichier html pour attacher le fichier CSS
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
12. 11
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier CSS
pour notre page Html-->
</head>
<body>
<!-- création tableau-->
<table class="myTable"><!-- class : création d'une classe CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient le résultat,
fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec ses
paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- et : c'est un tableau " afficher le code
de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
<?php }?>
</tbody>
</table>
</body>
</html>
Maintenant on va créer notre fichier CSS : myStyle
.myTable{ /* pour créer la classe CSS on commence par le point . */
}
.myTable th{ /* tt les élément th qui se trouve à l'intérieur de 'élément qui utilisa la
classe myTable*/
padding: 10px; /* c'est l'espace entre le texte et le bordure */
margin: 10px; /* c'est l'espace entre l'élément et le précèdent */
border: 1px dotted gray;
background: pink;
}
13. 12
Et voilà : Les ths de tableau ont été modifié
Maintenant on va compléter le code :
.myTable{ /* pour créer la classe cSS on commence par le point . */
}
.myTable th{ /* tt les élément th qui se trouve à l'intérieur de l’élément qui utilisa la
classe myTable*/
padding: 10px; /* c'est l'espace entre le text et le bordure */
margin: 10px; /* c'est l'espace entre l'élément et le précèdent */
border: 1px dotted gray;
background: pink;
}
14. 13
.myTable td{ /* tt les éléments th qui se trouve à l'intérieur de l’élément qui utilisa la
classe myTable*/
padding: 10px; /* c'est l'espace entre le text et le bordure */
margin: 10px; /* c'est l'espace entre l'élément et le précèdent */
border: 1px dotted gray;
background: white;
}
3) Utilisation de bootstrap : Framework CSS
Télécharger le fichier bootstrap : https://getbootstrap.com/getting-started/#download
Copier le fichier bootstrap.min.css dans le dossier CSS
On revient à la page « etudiant.php » et on supprime la ligne qui utilise notre class cSS
15. 14
Et on la remplace par cette ligne
Et aussi au niveau de la balise table : on va utiliser la classe table offert par bootstrap
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS pour notre page Html-->
</head>
<body>
<!-- création tableau-->
<table class="table table-bordered">
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient le résultat,
fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec ses
paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau " afficher le code
de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
16. 15
<?php }?>
</tbody>
</table>
</body>
</html>
On va mettre notre tableau à l’intérieur d’un Div
Et on va appliquer la responsivité (responsive : l’interface s’affiche en fonction de l’écran)
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS pour notre page Html-->
</head>
<body>
<!-- création tableau-->
<div class="col-md-6 col-xs-12"> <!—md-6 : le tableau occupe que la moitié de la page : la
page est divisé en 12 colonne,,, xs-12 compatible avec les mobile-->
<table class="table table-responsive"><!-- class : création d'une classe CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient le résultat,
17. 16
fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec ses
paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau " afficher le code
de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</body>
</html>
Maintenant on va mettre la liste d’affichage dans un panneau on utilisant Bootstrap :
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS pour notre page Html-->
</head>
<body>
18. 17
<!-- création tableau-->
<div class="col-md-6 col-xs-12">
<div class="panel panel-info" ><!-- on va utiliser un class qui s'appelle Panel(c'est
un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">Le contenue</div>
</div>
<table class="table table-responsive"><!-- class : création d'une classe CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les données à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient le résultat,
fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec ses
paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau " afficher le code
de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</body>
</html>
Voici le panneau
Maintenant on va mettre notre tableau a l’intérieur de panneau(le Contenue) : on prend le
code de tableau qui affiche la liste et on le met entre le Div de contenue
19. 18
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS pour notre page Html-->
</head>
<body>
<!-- création tableau-->
<div class="col-md-6 col-xs-12">
<div class="panel panel-info" ><!-- on va utiliser un class qui s'appelle Panel(c'est
un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec
ses paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Et voilà la nouvelle Forme
20. 19
Maintenant on va utiliser avec Bootstrap notre propre fiche de style : dans le head
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
Modification Fichier css :
.spacer{ /* je viens d'ajouter un class spacer c'est pour garder l'espace entre le panneau et
la haut de la page
*/
margin-top: 20px;
}
.myTable{ /* pour créer la classe cSS on commence par le point . */
}
.myTable th{ /* tt les élément th qui se trouve à l'intérieur de l'élément qui
utilisa la classe myTable*/
padding: 10px; /* c'est l'espace entre le text et le bordure */
margin: 10px; /* c'est l'espace entre l'élément et le précèdent */
border: 1px dotted gray;
background: pink;
}
.myTable td{ /* tt les éléments th qui se trouve à l'intérieur de l'élément qui
utilisa la classe myTable*/
padding: 10px; /* c'est l'espace entre le text et le bordure */
21. 20
margin: 10px; /* c'est l'espace entre l'élément et le précèdent */
border: 1px dotted gray;
background: white;
}
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- création tableau-->
<div class="col-md-6 col-xs-12">
<div class="panel panel-info spacer" ><!-- on va utiliser un class qui s'appelle
Panel(c'est un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
22. 21
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec
ses paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Après l’ajout de class spacer voilà le résultat : mon div utilise 3 classes maintenant
(yesssssssssssssssss)
23. 22
II) Parti 2
1) création d’un entête de site
- l’entête de notre site est le Menu
On commence par la création d’un fichier php : « entete.php »
<div>
<ul> <!-- une liste-->
<li> <a href="etudiants.php"> Etudiants </a></li><!-- li : pour nous c'est le menu-->
<li> <a href="SaisieEtudiant.php"> Saisie les Etudiants</a> </li>
<li> <a href="logOut.php">Déconnecter</a></li>
</ul>
</div>
C’est juste une page html, mais il faut ajouter des navigations on utilisant le CSS
Aussi cet entête on va l’insérer dans chaque page
Aller on commence :
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
24. 23
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php")
?>
<!-- création tableau-->
<div class="col-md-6 col-xs-12">
<div class="panel panel-info spacer" ><!-- on va utiliser un class qui s'appelle
Panel(c'est un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec
ses paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><?php echo($et['PHOTO'])?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
25. 24
Et Voila
Maintenant on va raffiner notre navigation on ajoutant un Barre de navigation on
utilisant Bootstrap
<div class="nav navbar-inverse navbar-fixed-top"><!-- navbar: barre de navigation, inverse:
le blanc sur le noir, fixed : fixé en haut-->
<ul class="nav navbar-nav"> <!-- une liste-->
26. 25
<li> <a href="etudiants.php"> Etudiants </a></li><!-- li : pour nous c'est le menu-->
<li> <a href="SaisieEtudiat.php"> Saisie les Etudiants</a> </li>
<li> <a href="logOut.php">Deconnecter</a></li>
</ul>
</div>
Et Voila
27. 26
Maintenant on va modifier notre feuille de style CSS par la suppression de code
existant et l’ajout d’un classe spacer (pour le margin)
.spacer{ /* je viens d'ajouter un class spacer c'est pour garder l'espace entre le panneau et
la haut de la page*/
margin-top: 60px;
}
Et voilà le margin entre l’entête de site et le tableau
28. 27
Maintenant notre tableau il va s’occuper la totalité de la page pas la moitié :
Col-md- 6 sa devient : 12
Dans le fichier etudiants.php
2) Formulaire Ajout Etudiants :
Création fichier : SaisieEtudiant.php
29. 28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<?php require_once("entete.php")/* inclure un fichier entête*/
?>
<div class="container spacer"></div> <!-- container : offert par boot permet de définir un
div comme un container -->
<div class="panel panel-default"> <!-- default:un autre panneau avec un style diffèrent-->
<div class="panel-heading">Saisie des Etudiants</div><!-- heading:c'est l'entête-->
<div class="panel-body">
Formulaire
</div>
</div>
</div>
</body>
</html>
30. 29
Maintenant on va créer notre formulaire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
31. 30
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<?php require_once("entete.php")/* inclure un fichier entête*/
?>
<div class="container spacer col-md-6 col-xs-12 col-md-offset-3"> <!-- container : offert par
bootStrap permet de définir un div comme un container , col-md-6 : formulaire s'affiche sur
la moitié de la page , col-xs-12 : lorsque on diminue la page le formulaire prend la totalité
de la page, col-md-offset-3 : afficher le formulaire au milieu : décalage par 3 case-->
<div class="panel panel-default"> <!-- default:un autre panneau avec un style diffèrent --
>
<div class="panel-heading">Saisie des Etudiants</div><!-- heading: c’est l'entête-->
<div class="panel-body">
<form method="post" action="SaveEtudiant.php" enctype="multipart/form-data"><!--
action : l'action qui va être appeler lors de la validation de formulaire,
enctype="multipart/form-data" : pour uploader de fichiers ou photo -->
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Nom</label>
<input type="text" name="nom" class="form-control"> <!-- input : champ de
texte -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Email</label>
<input type="text" name="email" class="form-control"> <!-- input : champ
de texte -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Photo</label>
<input type="file" name="photo" class="form-control"> <!-- input file : on
va faire un uploade -->
</div>
<div>
<button type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Et voilà notre formulaire ( joliiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii )
32. 31
Maintenant on va créer la page SaveEtudiant.php : pour enregistrer un étudiant dans
la base
On commence par un premier test : pour voir l’emplacement de fichier de photos
<?php
/* tt d'abord on ait besoin de lire les données saisi*/
$nom=$_POST['nom'];/* récupérer les données de champ nom de formulaire*/
$email=$_POST['email'];
$nomPhoto=$_FILES['photo']['name'];/* name : permet de retourner le nom de fichier*/
$fichierTempo=$_FILES['photo']['tmp_name']; /* récupérer le fichier de serveur apache,
tmp_name:c'est le nom temporaire*/
echo($fichierTempo);/*afficher l'emplacement de fichier */
?>
33. 32
Remplir le formulaire et Clic sur save :
Voilà le lien là où le fichier est stocké.
On revient à notre code et on commence par la création d’un dossier images
qui va contenir nos images
34. 33
On va continuer notre le code
<?php
/* tt d'abord on ait besoin de lire les données saisi*/
$nom=$_POST['nom'];/* récupérer les données de champ nom de formulaire*/
$email=$_POST['email'];
$nomPhoto=$_FILES['photo']['name'];/* name : permet de retourner le nom de fichier*/
$fichierTempo=$_FILES['photo']['tmp_name']; /* récupérer le fichier de serveur apache,
tmp_name:c'est le nom temporaire*/
move_uploaded_file($fichierTempo,'./images/'.$nomPhoto); /* cvd : je vais déplacer le fichier
qui vient d'être envoyé , $fichierTempo: le nom de fichier, 'images/' : je le déplace vers ce
dossier , .$nomPhoto : le point est pour faire la concaténation de nom de photo avec le
chemin */
/* établir la connexion*/
require_once ('conn.php');
$ps=$pdo->prepare("INSERT INTO etudiants(NOM,EMAIL,PHOTO) VALUE (?,?,?)");
/* tableau pour stocké les informations envoyés*/
$params=array($nom,$email,$nomPhoto);
/* exécuter la requête*/
$ps->execute($params);
/* revenir à la page qui affiche les etudiants*/
header("location:etudiants.php")
?>
35. 34
Appliquer un test
Clic Save
Et voilà l’étudiant a était ajouté ( coooooooooooooooooooooool nous somme
magnifiques)
Ils sont enregistrés dans la base
37. 36
Maintenant à la place d’afficher le nom de photo on va afficher la photo elle-même
Dans « etudiants.php »
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php")
?>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info spacer" ><!-- on va utiliser un class qui s'appelle
Panel(c'est un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
38. 37
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec
ses paramétré) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
39. 38
3) Modifier et supprimer un étudiant
On commence par ajouter les liens dans le fichier « etudiant.php »
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php")
?>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info spacer" ><!-- on va utiliser un class qui s'appelle
Panel(c'est un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
40. 39
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec
ses paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
<td><a href="EditEtudiant.php?code=<?php
echo($et['CODE'])?>">Editer</a> </td>
<td><a href="SupprimeEtudiant.php?code=<?php
echo($et['CODE'])?>">Supprimer</a> </td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
41. 40
Lorsque en clic sur Editer par exemple :
L’url nous donne : http://localhost/scolarite/EditEtudiant.php?code=1
Code = 1 grâce à "SupprimeEtudiant.php?code=<?php echo($et['CODE'])?>">Supprimer</a>
Maintenant on va créer notre code de suppression
On commence par la création de fichier « SupprimeEtudiant.php »
42. 41
<?php
$code=$_GET['code'];/* on récupère le paramètre de url qui s'appelle code*/
require_once("conn.php");
$ps=$pdo->prepare("DELETE FROM etudiants WHERE CODE=?");
$params=array($code);
$ps->execute($params);
header("location:etudiants.php");
Clic Supprimer : l’étudiant a étais supprimer
43. 42
Maintenant pour que notre code soit propre on va ajouter une confirmation lors de la
suppression :
Affichage d’un message pour la suppression
Cela se fait avec le JavaScript
Au niveau de fichier etudiants.php
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php")
44. 43
?>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info spacer" ><!-- on va utiliser un class qui s'appelle
Panel(c'est un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec
ses paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'étudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
<td><a href="EditEtudiant.php?code=<?php
echo($et['CODE'])?>">Editer</a> </td>
<td><a onclick="return confirm('Etes-vous sur de supprimer
letudiant');" href="SupprimeEtudiant.php?code=<?php echo($et['CODE'])?>">Supprimer</a> </td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
45. 44
Voilà le message
Maintenant on passe à la modification :
On va créer un nouveau fichier « EditEtudiant.php ».
C’est presque le même code de la saisie.
Voici les lignes a ajouté.
46. 45
<?php
$code=$_GET['code'];
require_once('conn.php');
$ps=$pdo->prepare("SELECT * FROM etudiants WHERE CODE=?");
$params=array($code);
$ps->execute($params);
/* maintenant on va stocké le résultat de la requête dans étudiant*/
$etudiant=$ps->fetch(); /* fetch : il nous permet de récupérer une ligne */
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<?php require_once("entete.php")/* inclure un fichier entête*/
?>
<div class="container spacer col-md-6 col-xs-12 col-md-offset-3"> <!-- container : offert par
boot permet de définir un div comme un container , col-md-6 : formulaire s'affiche sur la
moitié de la page , col-xs-12 : lorsque on diminue la page le formulaire prend la totalité de
la page, col-md-offset-3 : afficher le formulaire au milieu : décalage par 3 case-->
<div class="panel panel-default"> <!-- default:un autre panneau avec un style diffèrent --
>
<div class="panel-heading">Saisie des Etudiants</div><!-- heading:c'est l'entête-->
<div class="panel-body">
<form method="post" action="UpdateEtudiant.php" enctype="multipart/form-data"><!--
action : l'action qui va être appeler lors de la validation de formulaire,
enctype="multipart/form-data" : pour l’uploade de fichier ou photo -->
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">CODE</label>
<input type="text" name="code" value="<?php echo($etudiant['CODE'])?>"
class="form-control"> <!—-value : récupérer les info de l’etudiant et le mettre dans la case-
->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Nom</label>
<input type="text" name="nom" value="<?php echo($etudiant['NOM'])?>"
class="form-control"> <!-- input : champ de texte -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Email</label>
<input type="text" name="email" value="<?php echo($etudiant['EMAIL'])?>"
class="form-control"> <!-- input : champ de text -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Photo</label>
<input type="file" name="photo" class="form-control"> <!-- input file : on
va faire un upload -->
<img src="images/<?php echo($etudiant['PHOTO'])?>" width="100"
height="100" >
</div>
<div>
48. 47
<?php
/* tout d'abord on ait besoin de lire les données saisi*/
$code=$_GET['code'];
$nom=$_POST['nom'];/* récupérer les données de champ nom de formulaire*/
$email=$_POST['email'];
$nomPhoto=$_FILES['photo']['name'];/* name : permet de retourner le nom de fichier*/
$fichierTempo=$_FILES['photo']['tmp_name']; /* récupérer le fichier de serveur apache,
tmp_name:c'est le nom temporaire*/
move_uploaded_file($fichierTempo,'./images/'.$nomPhoto); /* cvd : je vais déplacer le fichier
qui vient d'être envoyé , $fichierTempo: le nom de fichier, 'images/' : je le déplace vers ce
dossier , .$nomPhoto : le point est pour faire la concaténation de nom de photo avec le
chemin */
/* établir la connexion*/
require_once ('conn.php');
$ps=$pdo->prepare("UPDATE etudiants SET NOM=?,EMAIL=?,PHOTO=? WHERE code=?");
/* tableau pour stocké les informations envoyés*/
$params=array($nom,$email,$nomPhoto,$code);
/* exécuter la requête*/
$ps->execute($params);
/* revenir à la page qui affiche les etudiants*/
header("location:etudiants.php")
?>
49. 48
Clic Save : est voilà ( coooooooooool on a gagné la partie 3 – 0 pour nous :p :p :p)
Maintenant on va ajouter des tests de validation (au niveau de la photo lors de la
modification)
Au niveau de fichier « UpdateEtudiant.php »
Lors de la modification on veut garder la même photo mais on change juste les autres
informations
50. 49
<?php
/* tt d'abord on ait besoin de lire les données saisi*/
$code=$_POST['code'];
$nom=$_POST['nom'];/* récupérer les données de champ nom de formulaire*/
$email=$_POST['email'];
$nomPhoto=$_FILES['photo']['name'];/* name : permet de retourner le nom de fichier*/
/* test sur la photo si on veut ajouter une nouvelle ou garder la mienne */
require_once ('conn.php');
if($nomPhoto==""){
$ps=$pdo->prepare("UPDATE etudiants SET NOM=?,EMAIL=? WHERE code=?");/* on change pas la
photo*/
/* tableau pour stocké les informations envoyés*/
$params=array($nom,$email,$code);
/* exécuter la requête*/
$ps->execute($params);
}
else{
$fichierTempo=$_FILES['photo']['tmp_name']; /* récupérer le fichier de serveur apache,
tmp_name:c'est le nom temporaire*/
move_uploaded_file($fichierTempo,'./images/'.$nomPhoto); /* cvd : je vais déplacer le
fichier qui vient d'être envoyé , $fichierTempo: le nom de fichier, 'images/' : je le déplace
vers ce dossier , .$nomPhoto : le point est pour faire la concaténation de nom de photo avec
le chemin */
$ps=$pdo->prepare("UPDATE etudiants SET NOM=?,EMAIL=?,PHOTO=? WHERE code=?");
/* tableau pour stocké les informations envoyés*/
$params=array($nom,$email,$nomPhoto,$code);
/* exécuter la requête*/
$ps->execute($params);
}
51. 50
/* revenir à la page qui affiche les etudiants*/
header("location:etudiants.php")
?>
Et voilà on a gardé la photo ( yessssssssssssss)
Maintenant : le code de l’étudiant (autoIncrément) ne faut pas être modifiable :
On change type « text » par « hidden »
On affiche le code dans le label
52. 51
<?php
$code=$_GET['code'];
require_once('conn.php');
$ps=$pdo->prepare("SELECT * FROM etudiants WHERE CODE=?");
$params=array($code);
$ps->execute($params);
/* maintenant on va stocké la résultat de requête dans etudiant*/
$etudiant=$ps->fetch(); /* fetch : il nous permet de récupérer une ligne */
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<?php require_once("entete.php")/* inclure un fichier entête*/
?>
<div class="container spacer col-md-6 col-xs-12 col-md-offset-3"> <!-- container : offert par
boot permet de définir un div comme un container , col-md-6 : formulaire s'affiche sur la
moitié de la page , col-xs-12 : lorsque on diminue la page le formulaire prend la totalité de
la page, col-md-offset-3 : afficher le formulaire au milieu : décalage par 3 case-->
<div class="panel panel-default"> <!-- default:un autre panneau avec un style diffèrent --
>
<div class="panel-heading">Saisie des Etudiants</div><!-- heading:c'est l'entête-->
<div class="panel-body">
<form method="post" action="UpdateEtudiant.php" enctype="multipart/form-data"><!--
action : l'action qui va être appeler lors de la validation de formulaire,
enctype="multipart/form-data" : pour l’uploade de fichier ou photo -->
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">CODE : <?php echo($etudiant['CODE'])?>
53. 52
</label>
<input type="hidden" name="code" value="<?php echo($etudiant['CODE'])?>"
class="form-control"> <!-- input : champ de text -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Nom</label>
<input type="text" name="nom" value="<?php echo($etudiant['NOM'])?>"
class="form-control"> <!-- input : champ de text -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Email</label>
<input type="text" name="email" value="<?php echo($etudiant['EMAIL'])?>"
class="form-control"> <!-- input : champ de text -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Photo</label>
<input type="file" name="photo" class="form-control"> <!-- input file : on
va faire un upload -->
<img src="images/<?php echo($etudiant['PHOTO'])?>" width="100"
height="100" >
</div>
<div>
<button type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Et voilà : Le code s’affiche mais non modifiable
54. 53
III) Partie 3
On Commence par l’ajout d’une table « users » dans la base de données : Login, Mot de
passe et Rôle (Scolarité ou étudiant)
On va remplir le tableau (MD5 c’est un cryptage de mot de passe)
55. 54
1) Formulaire d’inscription
Maintenant on va créer notre formulaire d’inscription
On commence par la création d’un nouveau fichier « Login.php »
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<?php require_once("entete.php")/* inclure un fichier entête*/
?>
<div class="container spacer col-md-6 col-xs-12 col-md-offset-3"> <!-- container : offert par
boot permet de définir un div comme un container , col-md-6 : formulaire s'affiche sur la
moitié de la page , col-xs-12 : lorsque on diminue la page le formulaire prend la totalité de
la page, col-md-offset-3 : afficher le formulaire au milieu : décalage par 3 case-->
<div class="panel panel-default"> <!-- default:un autre panneau avec un style diffèrent --
>
<div class="panel-heading">Authentification</div><!-- heading:c'est l'entête-->
<div class="panel-body">
<form method="post" action="Authentifier.php" ><!-- action : l'action qui va être
appeler lors de la validation de formulaire-->
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Login:</label>
<input type="text" name="username" class="form-control"> <!-- input :
champ de texte -->
</div>
<div class="form-group"><!-- style formulaire offert par bootstrap -->
<label class="control-label">Pass:</label>
<input type="password" name="password" class="form-control"> <!-- input :
56. 55
champ de texte, Type:password: offert par html5 -->
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
http://localhost/scolarite/Login.php
Maintenant on va créer notre Action sur le bouton de formulaire : Authentifier.php
57. 56
<?php
/*Connexion à la base de données */
require_once("conn.php");
/* tt d'abord on ait besoin de lire les données saisi*/
$login=$_POST['username'];/* on va récupérer le nom de champ de la formulaire et l'envoyer
avec Post*/
$pass=md5($_POST['password']); /* fonction md5(): puisque on a crypté le mot de passe*/
/* le variable pdo : est créé dans le fichier conn.php*/
$ps=$pdo->prepare("SELECT * FROM users WHERE LOGIN=? AND PASSWORD=?");
/* tableau pour stocké les informations envoyés*/
$params=array($login,$pass);
/* exécuter la requête*/
$ps->execute($params);
/* Test d'existence de user*/
if($user=$ps->fetch())/* on va tenter de récupérer l'utilisateur , fetch: il récupère
l'enregistrement s'il existe donc il retourne vrai s'il existe et faux s'il n'existe pas*/
{
header("location:etudiants.php");/* redirection vers la page des etudiant*/
}
else{
header("location:Login.php");/*rester sur la mémé page */
}
?>
Maintenant on va tester : on utilisant l’utilisateur « admin »
On va saisir les données ( admin )
58. 57
Clic login : et voilaaaaaa l’authentification fonctionne
Remarque : si vous avez rencontré des problèmes avec la fonction « md5() » : vous
pouvez l’éliminer et le découcher au niveau de la base de données.
Le code devient comme ça :
$pass=$POST['password'];
2) Les Sessions : Très important
Pour sécuriser les droits d’accès on va utiliser les sessions
59. 58
L’utilisateur qu’est authentifié on va le stocké dans une variable session qui s’appelle
[PROFILE] (dans notre cas)
On commence par la page « Authentification.php »
<?php
/*Connexion à la base de données */
require_once("conn.php");
/* tt d'abord on ait besoin de lire les données saisi*/
$login=$_POST['username'];/* on va récupérer le non de champ dans la formulaire et l'envoyer
avec Post*/
$pass=md5($_POST['password']); /* fonction md5(): puisque on a crypté le mot de passe*/
/* le variable pdo : est créé dans le fichier conn.php*/
$ps=$pdo->prepare("SELECT * FROM users WHERE LOGIN=? AND PASSWORD=?");
/* tableau pour stocké les informations envoyés*/
$params=array($login,$pass);
/* exécuter la requête*/
$ps->execute($params);
/* Test d'existence de user*/
if($user=$ps->fetch()){/* on va tenter de récupérer l'utilisateur , fetch: il récupère
l'enregistrement s'il existe donc il retourne vrai s'il existe et faux s'il n'existe pas*/
/* Utilisation des sessions*/
session_start();/* démarrer la session*/
$_SESSION['PROFILE']=$user;/* pour accéder à la session d'utilisateur , création de
variable: [PROFIL] dans la quel je vais stocké la variable $user*/
header("location:etudiants.php");/* redirection vers la page des etudiant*/
}
else{
header("location:Login.php");/*rester sur la même page */
}
?>
60. 59
Maintenant on va créer un fichier « security.php » : pour appliquer le test de droit
d’accès
<?php
/* pour accéder à la page etudiant il faut s'authentifié */
session_start();
if(!(isset($_SESSION['PROFILE']))){/*isset() : nous permet de savoir que le variable existe
ou pas */
/* ! = si le variable n'existe pas*/
/* si le variable existe c bon , sinon on va le dirigé vers la page de login*/
header('location:Login.php');
}
?>
Maintenant on va inclure ce fichier au début de chaque page : « etudiant.php »,
« EditEtudiant.php »,
« SaisieEtudiant.php », « SaveEtudiant.php », « SupprimerEtudiant.php », tous les pages
Voilà le code : qu’il faut l’inclure pour appeler la page de sécurité
<?php
require_once("security.php");
?>
63. 62
Maintenant vous pouvez effectuer des tests : allez vaziiiiiiiiiii
(Les filles occupez-vous de la cuisine kkkk )
64. 63
Maintenant on va ajouter la fonction Logout
On va commencer par la création de fichier « LogOut.php »
<?php
session_start();
/* Maintenant on va détruire la session*/
session_destroy();
/* redirection vers page Authentification*/
header("location:Login.php");
?>
65. 64
Maintenant on va appliquer des tests :
Maintenant on va afficher l’utilisateur qui est authentifiés
Dans fichier « entéte.php » :
<div class="nav navbar-inverse navbar-fixed-top"><!-- navbar: barre de navigation, inverse:
le blanc sur le noir, fixed : fixé en haut-->
<ul class="nav navbar-nav"> <!-- une liste-->
<li> <a href="etudiants.php"> Etudiants </a></li><!-- li : pour nous c'est le menu-->
<li> <a href="SaisieEtudiant.php"> Saisie les Etudiants</a> </li>
<li> <a href="logOut.php">Deconnecter[<?php
echo((isset($_SESSION['PROFILE']))?($_SESSION['PROFILE']['LOGIN']):"")?>]</a></li><!--
l'utilisateur se trouve dans la session , la session s'appelle PROFILE et dans le profile
j'ai stocké l'utilisateur, ['LOGIN']: j'ai vais afficher le login -->
<!-- on a utilisé echo(isset) au lieu de if pour tester si le profil existe
ou pas pour afficher le login -->
<!-- " ?... :" = si est vrai j'affiche le login, ":" = équivalent a else{}
si non on affiche une chaine vide -->
<!--notre condition est cela : (isset($_SESSION['PROFILE']) -->
</ul>
</div>
Allez vaziii tester tous les rubriques de notre
application.
Je vous attends (5 min).
Je prends un café et je reviens.
67. 66
Maintenant on va modifier notre application : l’utilisateur normal (étudiant n’a pas le
droit de modifier et supprimer)
On commence par la création d’un script : « RoleScolarite.php » : pour définir les rôles de
chaque utilisateur.
<?php
if(!($_SESSION["PROFILE"]["ROLE"]=="SCOLARITE"))/*si le rôle de profile n'est égale pas à
scolarite */
{
header("location:$_SERVER[HTTP_REFERER]");/* je reste dans la même page*/
}
?>
Maintenant on va inclure ce dernier script dans les fichiers nécessaire :
require_once("RoleScolarite.php");
Dans les 5 fichiers : « SaisieEtudiant.php », « SaveEtudiant.php «, « SupprimerEtudiant.php »,
« UpdateEtudiant.php », « EditEtudiant.php »
68. 67
On va appliquer des tests : l’utilisateur Etudiant n’a pas le droit d’éditer, ajouter et supprimer
Au contraire de l’administrateur qui a le rôle SCOLARITE
(Allez, vous attendez quoi … appliquez-vous les Tests … il y a une chose qui ne fonctionne pas
… cherchez laquelle)
C’est la suppression : l’étudiant a le droit de supprimer mais cela est interdit
Réglez le problème si vous voulez
69. 68
IV)Partie 4
1) Recherche des étudiants
On commence par l’ajout de formulaire de recherche au niveau de notre application :
Au niveau de fichier « etudiant.php »
<?php
require_once("security.php");
?>
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php")
?>
<!-- formulaire de Recherche -->
<div class="col-md-12 col-xs-12 spacer">
<form method="get" action="etudiants.php" >
<div class="form-group">
<label class="control-label"> Mot CLé</label>
<input type="text" name="motCle"/>
<button type="submit">Chercher</button>
</div>
</form>
</div>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info spacer" ><!-- on va utiliser un class qui s'appelle
Panel(c'est un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
70. 69
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable etudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un etudiant avec
ses paramètres) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'etudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
<td><a href="EditEtudiant.php?code=<?php
echo($et['CODE'])?>">Editer</a> </td>
<td><a onclick="return confirm('Etes-vous sur de supprimer
letudiant');" href="SupprimeEtudiant.php?code=<?php echo($et['CODE'])?>">Supprimer</a> </td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
71. 70
Et voilà s’affiche
On va modifier encore le code pour effectuer des tests de recherche :
Au niveau de fichier « etudiant.php »
<?php
require_once("security.php");
?>
72. 71
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
/* je veux pas sélectionner tt les etudiants mais on va appliquer un test */
/* tester si un paramètre existe dans la requête*/
$mc="";
if(isset($_GET['motCle'])){/* si le paramètre motCle(envoyer par le formulaire de recherche)
existe ou non */
$mc=$_GET['motCle'];
$req="SELECT * FROM etudiants WHERE NOM LIKE '%$mc%'";
}
else{
$req = "SELECT * FROM etudiants";
}
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php") ?>
<!-- formulaire de Recherche -->
<div class="col-md-12 col-xs-12 spacer">
<form method="get" action="etudiants.php" >
<div class="form-group">
<label class="control-label"> Mot Cle :</label>
<input type="text" name="motCle" value="<?php echo($mc) ?>"/button>
</div>
</form>
</div>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info" ><!-- on va utiliser un class qui s'appelle Panel(c'est
un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable etudiant "et" , ps->fetch() : ps contient
le résultat, fetch(): récupérer ligne par ligne, donc chaque ligne(ligne cvd un etudiant avec
ses paramètres) sera stocké dans ps -->
73. 72
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'etudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
<td><a href="EditEtudiant.php?code=<?php
echo($et['CODE'])?>">Editer</a> </td>
<td><a onclick="return confirm('Etes-vous sur de supprimer
letudiant');" href="SupprimeEtudiant.php?code=<?php echo($et['CODE'])?>">Supprimer</a> </td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Maintenant on va tester :
Et voilà …..
74. 73
2) Afficher les Etudiant page par page : La pagination
Au niveau de la page « etudiant.php »
<?php
require_once("security.php");
?>
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
/* je veux pas sélectionner tt les etudiants mais on va appliquer un test */
/* tester si un paramètre existe dans la requête*/
$mc=""; /* initialiser le variable chaine vide*/
/* pagination*/
/* o va définir le nombre d'élément par page*/
$size=3;/* afficher 3 etudiant par page*/
/* récupérer la paramètre page : numéro de la page*/
if(isset($_GET['page'])){
$page=$_GET['page'];
}
else{ /* je donne un valeur par défaut pour la page*/
$page=0;
}
$offset=$size*$page; /* si la page est 0 donc size égale zéro, si égale 1........ */
if(isset($_GET['motCle'])){/* si le paramètre motCle(envoyer par le formulaire de recherche)
existe ou non */
$mc=$_GET['motCle'];
$req="SELECT * FROM etudiants WHERE NOM LIKE '%$mc%'";
}
else{
$req = "SELECT * FROM etudiants LIMIT $size OFFSET $offset "; /* je veux afficher que les
75. 74
3 etudiant de la page courante*/
}
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php") ?>
<!-- formulaire de Recherche -->
<div class="col-md-12 col-xs-12 spacer">
<form method="get" action="etudiants.php" >
<div class="form-group">
<label class="control-label"> Mot Cle :</label>
<input type="text" name="motCle" value="<?php echo($mc) ?>"/button>
</div>
</form>
</div>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info" ><!-- on va utiliser un class qui s'appelle Panel(c'est
un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable etudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un etudiant avec
ses paramètre) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'etudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
<td><a href="EditEtudiant.php?code=<?php
echo($et['CODE'])?>">Editer</a> </td>
<td><a onclick="return confirm('Etes vous sur de supprimer
l’étudiant');" href="SupprimeEtudiant.php?code=<?php echo($et['CODE'])?>">Supprimer</a> </td>
</tr>
<?php }?>
77. 76
<?php
require_once("security.php");
?>
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
/* je veux pas sélectionner tt les etudiants mais on va appliquer un test */
/* tester si un paramètre existe dans la requête*/
$mc=""; /* initialiser le variable chaine vide*/
/* pagination*/
/* on va définir le nombre d'élément par page*/
$size=3;/* afficher 3 etudiant par page*/
/* récupérer la paramètre page : numéro de la page*/
if(isset($_GET['page'])){
$page=$_GET['page'];
}
else{ /* je donne un valeur par défaut pour la page*/
$page=0;
}
$offset=$size*$page; /* si la page est 0 donc size égale zéro, si égale 1........ */
if(isset($_GET['motCle'])){/* si le paramètre motCle(envoyer par le formulaire de recherche)
existe ou non */
$mc=$_GET['motCle'];
$req="SELECT * FROM etudiants WHERE NOM LIKE '%$mc%'";
}
else{
$req = "SELECT * FROM etudiants LIMIT $size OFFSET $offset "; /* je veux afficher que les
3 etudiant de la page courante*/
}
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
/* nous avons besoin de connaitre le nombre des étudiants tt d'abord*/
78. 77
$ps2=$pdo->prepare("SELECT COUNT(*) AS NB_ET FROM etudiants ");
$ps2->execute();
$ligne=$ps2->fetch(PDO::FETCH_ASSOC);/*je vais récupérer la ligne mais au format tableau
associative FETCH_ASSOC */
$NBE=$ligne['NB_ET'];
/* maintenant on va connaitre le nombre de pages*/
if(($NBE % $size)==0){
$NbPages=floor($NBE / $size);
}
else {
/* nombre de page paire ou impaire pour savoir comment afficher les étudiants*/
$NbPages = floor($NBE / $size) + 1; /* division , floor : arrondir les virgules
après la division*/
}
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
<?php require_once("entete.php") ?>
<!-- formulaire de Recherche -->
<div class="col-md-12 col-xs-12 spacer">
<form method="get" action="etudiants.php" >
<div class="form-group">
<label class="control-label"> Mot Cle :</label>
<input type="text" name="motCle" value="<?php echo($mc) ?>"/button>
</div>
</form>
</div>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info" ><!-- on va utiliser un class qui s'appelle Panel(c'est
un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable etudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un etudiant avec
ses paramètre) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
79. 78
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'etudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
<td><a href="EditEtudiant.php?code=<?php
echo($et['CODE'])?>">Editer</a> </td>
<td><a onclick="return confirm('Etes vous sur de supprimer
letudiant');" href="SupprimeEtudiant.php?code=<?php echo($et['CODE'])?>">Supprimer</a> </td>
</tr>
<?php }?>
</tbody>
</table>
</div>
<div>
<ul class=" nav nav-pills">
<?php for($i=0;$i<$NbPages;$i++){?>
<li class="<?php echo(($i==$page)?'active':''); ?>"><!-- si la condition
est vérifier en fait appel à un classe active si non chaine est vide -->
<a href="etudiants.php?page=<?php echo ($i)?>"> page <?php echo
($i)?></a>
</li>
<?php }?>
</ul>
</div>
</div>
</div>
</body>
</html>
On va tester maintenant : Voilà la navigation entre les pages fonctionne ( Bravo pour
Vous )
80. 79
Maintenant même dans la recherche on a besoin de travailler avec la navigation :
On va ajouter juste une petite ligne ( LIMIT SiZE...)
<?php
require_once("security.php");
?>
81. 80
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
/* je veux pas sélectionner tt les etudiants mais on va appliquer un test */
/* tester si un paramètre existe dans la requête*/
$mc=""; /* initialiser le variable chaine vide*/
/* pagination*/
/* o va définir le nombre d'élément par page*/
$size=3;/* afficher 3 etudiant par page*/
/* récupérer la paramètre page : numéro de la page*/
if(isset($_GET['page'])){
$page=$_GET['page'];
}
else{ /* je donne un valeur par défaut pour la page*/
$page=0;
}
$offset=$size*$page; /* si la page est 0 donc size égale zéro, si égale 1........ */
if(isset($_GET['motCle'])){/* si le paramètre motCle(envoyer par le formulaire de recherche)
existe ou non */
$mc=$_GET['motCle'];
$req="SELECT * FROM etudiants WHERE NOM LIKE '%$mc%' LIMIT $size OFFSET $offset";
}
else{
$req = "SELECT * FROM etudiants LIMIT $size OFFSET $offset "; /* je veux afficher que les
3 etudiant de la page courante*/
}
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête
$ps->execute(); //exécuter la requête
/* nous avons besoin de connaitre le nombre des etudiant tt d'abord*/
if(isset($_GET['motCle']))
$ps2=$pdo->prepare("SELECT COUNT(*) AS NB_ET FROM etudiants WHERE NOM LIKE '%$mc%'");
else
$ps2=$pdo->prepare("SELECT COUNT(*) AS NB_ET FROM etudiants");
$ps2->execute();
$ligne=$ps2->fetch(PDO::FETCH_ASSOC);/*je vais récupérer la ligne mais au format tableau
associative FETCH_ASSOC */
$NBE=$ligne['NB_ET'];
/* maintenant on va connaitre le nombre de pages*/
if(($NBE % $size)==0){
$NbPages=floor($NBE / $size);
}
else {
/* nombre de page paire ou impaire pour savoir comment afficher les etudiants*/
$NbPages = floor($NBE / $size) + 1; /* division , floor : arrondir les virgules
après la division*/
}
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> <!-- attaché un fichier
CSS pour notre page Html-->
</head>
<body>
<!-- inclure un fichier-->
82. 81
<?php require_once("entete.php") ?>
<!-- formulaire de Recherche -->
<div class="col-md-12 col-xs-12 spacer">
<form method="get" action="etudiants.php" >
<div class="form-group">
<label class="control-label"> Mot Cle :</label>
<input type="text" name="motCle" value="<?php echo($mc) ?>"/button>
</div>
</form>
</div>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info" ><!-- on va utiliser un class qui s'appelle Panel(c'est
un div encadré)-->
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">
<table class="table table-responsive"><!-- class : création d'une classe
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable etudiant "et" , ps->fetch() : ps contient
le résultat, fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un etudiant avec
ses paramètre) sera stocké dans ps -->
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'etudiant entre td et td, -->
<td><?php echo($et['NOM'])?></td>
<td><?php echo($et['EMAIL'])?></td>
<td><img src="images/<?php echo($et['PHOTO'])?>" width="100"
height="100"></td>
<td><a href="EditEtudiant.php?code=<?php
echo($et['CODE'])?>">Editer</a> </td>
<td><a onclick="return confirm('Etes vous sur de supprimer
letudiant');" href="SupprimeEtudiant.php?code=<?php echo($et['CODE'])?>">Supprimer</a> </td>
</tr>
<?php }?>
</tbody>
</table>
</div>
<div>
<ul class=" nav nav-pills">
<?php for($i=0;$i<$NbPages;$i++){?>
<li class="<?php echo(($i==$page)?'active':''); ?>"><!-- si la
condition est vérifié en fait appelle à ma classe active si non la chaine est vide -->
<a href="etudiants.php?page=<?php echo($i)?>&motCle=<?php
echo($mc)?>"> page <?php echo ($i)?></a>
</li>
<?php }?>
</ul>
</div>