0
28/10/2016 Application web : Gestion
Espace Etudiants
[PHP 5, HTML 5, CSS3,
BootStrap]
Bassem ABCHA : Ingénieur Génie
Lo...
1
AVANT DE COMMENCER :
- CHAQUE LIGNE DE CODE EST ACOMMPAGNEE PAR DES
COMMENTAIRES.
- CONCENTREZ-VOUS AUX COMMENTAIRES : S...
2
I) Partie 1
Environnement de travail :
 http://www.wampserver.com/
 https://www.jetbrains.com/phpstorm/
 http://getbo...
3
 Insérer des lignes : (a vos choix)
4
2) Création d’application PHP :
Nom de projet : « scolarite »
5
 Création page web dynamique :
On commence par la création d’un fichier PHP : « etudiant.php »
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 : co...
7
<?php
try
{
$strConnection = 'mysql:host=localhost;dbname=scolarite';
$pdo = new PDO($strConnection, 'root', '');
}
catc...
8
?>
 Afficher les données stockées dans la base
<?php
require_once ("conn.php"); //pour établir la connexion , require_o...
9
</table>
</body>
</html>
 Ajouter un fichier CSS pour bien structurer notre tableau :
On commence par la création d’un ...
10
Dans le dossier CSS , on va créer un fichier de style css : myStyle
Maintenant on va ajouter quelque lignes dans notre ...
11
?>
<!-- afficher les résultat dans un fichier html-->
<html>
<head>
<title> Les etudiants </title>
<link rel="styleshee...
12
Et voilà : Les ths de tableau ont été modifié
 Maintenant on va compléter le code :
.myTable{ /* pour créer la classe ...
13
.myTable td{ /* tt les éléments th qui se trouve à l'intérieur de l’élément qui utilisa la
classe myTable*/
padding: 10...
14
Et on la remplace par cette ligne
Et aussi au niveau de la balise table : on va utiliser la classe table offert par boo...
15
<?php }?>
</tbody>
</table>
</body>
</html>
 On va mettre notre tableau à l’intérieur d’un Div
 Et on va appliquer la...
16
fetch() récupérer ligne par ligne, donc chaque ligne(ligne cvd un étudiant avec ses
paramètres) sera stocké dans ps -->...
17
<!-- création tableau-->
<div class="col-md-6 col-xs-12">
<div class="panel panel-info" ><!-- on va utiliser un class q...
18
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
...
19
 Maintenant on va utiliser avec Bootstrap notre propre fiche de style : dans le head
<head>
<title> Les etudiants </ti...
20
margin: 10px; /* c'est l'espace entre l'élément et le précèdent */
border: 1px dotted gray;
background: white;
}
<?php
...
21
<tbody>
<!--charger tous les donner à partir de la base de données -->
<!-- //déclarer un variable étudiant "et" , ps->...
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 fichi...
23
fichier de connexion
$req = "SELECT * FROM etudiants";
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = ...
24
Et Voila
 Maintenant on va raffiner notre navigation on ajoutant un Barre de navigation on
utilisant Bootstrap
<div cl...
25
<li> <a href="etudiants.php"> Etudiants </a></li><!-- li : pour nous c'est le menu-->
<li> <a href="SaisieEtudiat.php">...
26
 Maintenant on va modifier notre feuille de style CSS par la suppression de code
existant et l’ajout d’un classe space...
27
 Maintenant notre tableau il va s’occuper la totalité de la page pas la moitié :
Col-md- 6 sa devient : 12
Dans le fic...
28
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css...
29
 Maintenant on va créer notre formulaire
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
30
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> <!-- attaché un
fichier CSS bootstrap pour notre p...
31
 Maintenant on va créer la page SaveEtudiant.php : pour enregistrer un étudiant dans
la base
On commence par un premie...
32
Remplir le formulaire et Clic sur save :
Voilà le lien là où le fichier est stocké.
 On revient à notre code et on com...
33
 On va continuer notre le code
<?php
/* tt d'abord on ait besoin de lire les données saisi*/
$nom=$_POST['nom'];/* réc...
34
 Appliquer un test
Clic Save
Et voilà l’étudiant a était ajouté ( coooooooooooooooooooooool nous somme
magnifiques)
Il...
35
Et l’image est stockée dans le dossier images
36
 Maintenant à la place d’afficher le nom de photo on va afficher la photo elle-même
Dans « etudiants.php »
<?php
requi...
37
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>
<!--charger tous les donner à partir de la...
38
3) Modifier et supprimer un étudiant
 On commence par ajouter les liens dans le fichier « etudiant.php »
<?php
require...
39
CSS-->
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</th...
40
Lorsque en clic sur Editer par exemple :
L’url nous donne : http://localhost/scolarite/EditEtudiant.php?code=1
Code = 1...
41
<?php
$code=$_GET['code'];/* on récupère le paramètre de url qui s'appelle code*/
require_once("conn.php");
$ps=$pdo->p...
42
 Maintenant pour que notre code soit propre on va ajouter une confirmation lors de la
suppression :
Affichage d’un mes...
43
?>
<!-- création tableau-->
<div class="col-md-12 col-xs-12">
<div class="panel panel-info spacer" ><!-- on va utiliser...
44
Voilà le message
 Maintenant on passe à la modification :
On va créer un nouveau fichier « EditEtudiant.php ».
C’est p...
45
<?php
$code=$_GET['code'];
require_once('conn.php');
$ps=$pdo->prepare("SELECT * FROM etudiants WHERE CODE=?");
$params...
46
<button type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Clic Edit : Voilà les informati...
47
<?php
/* tout d'abord on ait besoin de lire les données saisi*/
$code=$_GET['code'];
$nom=$_POST['nom'];/* récupérer le...
48
Clic Save : est voilà ( coooooooooool on a gagné la partie 3 – 0 pour nous :p :p :p)
 Maintenant on va ajouter des tes...
49
<?php
/* tt d'abord on ait besoin de lire les données saisi*/
$code=$_POST['code'];
$nom=$_POST['nom'];/* récupérer les...
50
/* revenir à la page qui affiche les etudiants*/
header("location:etudiants.php")
?>
Et voilà on a gardé la photo ( yes...
51
<?php
$code=$_GET['code'];
require_once('conn.php');
$ps=$pdo->prepare("SELECT * FROM etudiants WHERE CODE=?");
$params...
52
</label>
<input type="hidden" name="code" value="<?php echo($etudiant['CODE'])?>"
class="form-control"> <!-- input : ch...
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 (Sc...
54
1) Formulaire d’inscription
 Maintenant on va créer notre formulaire d’inscription
On commence par la création d’un no...
55
champ de texte, Type:password: offert par html5 -->
</div>
<div>
<button type="submit">Login</button>
</div>
</form>
</...
56
<?php
/*Connexion à la base de données */
require_once("conn.php");
/* tt d'abord on ait besoin de lire les données sai...
57
Clic login : et voilaaaaaa l’authentification fonctionne
Remarque : si vous avez rencontré des problèmes avec la foncti...
58
L’utilisateur qu’est authentifié on va le stocké dans une variable session qui s’appelle
[PROFILE] (dans notre cas)
On ...
59
 Maintenant on va créer un fichier « security.php » : pour appliquer le test de droit
d’accès
<?php
/* pour accéder à ...
60
61
62
 Maintenant vous pouvez effectuer des tests : allez vaziiiiiiiiiii
(Les filles occupez-vous de la cuisine kkkk )
63
 Maintenant on va ajouter la fonction Logout
On va commencer par la création de fichier « LogOut.php »
<?php
session_s...
64
 Maintenant on va appliquer des tests :
 Maintenant on va afficher l’utilisateur qui est authentifiés
Dans fichier « ...
65
On va effectuer un test : voilà le login d’user s’affiche.
66
 Maintenant on va modifier notre application : l’utilisateur normal (étudiant n’a pas le
droit de modifier et supprime...
67
 On va appliquer des tests : l’utilisateur Etudiant n’a pas le droit d’éditer, ajouter et supprimer
Au contraire de l’...
68
IV)Partie 4
1) Recherche des étudiants
 On commence par l’ajout de formulaire de recherche au niveau de notre applicat...
69
<thead> <!--c'est l'entête de tableau --->
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<t...
70
Et voilà s’affiche
 On va modifier encore le code pour effectuer des tests de recherche :
Au niveau de fichier « etudi...
71
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
...
72
<?php while($et = $ps->fetch()){ ?> <!-- j’ai fermé php pour que je
passes au html -->
<tr>
<td><?php echo($et['CODE'])...
73
2) Afficher les Etudiant page par page : La pagination
 Au niveau de la page « etudiant.php »
<?php
require_once("secu...
74
3 etudiant de la page courante*/
}
$ps = $pdo->prepare($req);//pour exécuter la requête, prepare = préparer une requête...
75
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
 On va appliquer un test
Et voilà juste 3 étudiants par page
 ...
76
<?php
require_once("security.php");
?>
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'es...
77
$ps2=$pdo->prepare("SELECT COUNT(*) AS NB_ET FROM etudiants ");
$ps2->execute();
$ligne=$ps2->fetch(PDO::FETCH_ASSOC);/...
78
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau
" afficher le code de l'etudiant entre td et td, -->
<td...
79
 Maintenant même dans la recherche on a besoin de travailler avec la navigation :
On va ajouter juste une petite ligne...
80
<?php
require_once ("conn.php"); //pour établir la connexion , require_once c'est pour inclure le
fichier de connexion
...
81
<?php require_once("entete.php") ?>
<!-- formulaire de Recherche -->
<div class="col-md-12 col-xs-12 spacer">
<form met...
82
</div>
</div>
</body>
</html>
Merci à vous
Veuillez Trouvez le code complet
Su mon Github
Prochain SlideShare
Chargement dans…5
×

Application web php5 html5 css3 bootstrap

2 133 vues

Publié le

Tuto bien détaillé : Comment développer une application web en PHP 5

Publié dans : Logiciels
1 commentaire
1 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 133
Sur SlideShare
0
Issues des intégrations
0
Intégrations
0
Actions
Partages
0
Téléchargements
61
Commentaires
1
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Application web php5 html5 css3 bootstrap

  1. 1. 0 28/10/2016 Application web : Gestion Espace Etudiants [PHP 5, HTML 5, CSS3, BootStrap] Bassem ABCHA : Ingénieur Génie Logiciel Github : https://github.com/babcha LinkeDin: https://fr.linkedin.com/in/bassem-abcha-2abaa2119 Slideshare : http://fr.slideshare.net/bassemabcha
  2. 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. 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 »
  4. 4. 3  Insérer des lignes : (a vos choix)
  5. 5. 4 2) Création d’application PHP : Nom de projet : « scolarite »
  6. 6. 5  Création page web dynamique : On commence par la création d’un fichier PHP : « etudiant.php »
  7. 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. 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. 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>
  10. 10. 9 </table> </body> </html>  Ajouter un fichier CSS pour bien structurer notre tableau : On commence par la création d’un dossier : CSS
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. 29  Maintenant on va créer notre formulaire <!DOCTYPE html> <html> <head> <meta charset="utf-8">
  31. 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. 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. 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. 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. 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
  36. 36. 35 Et l’image est stockée dans le dossier images
  37. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
  47. 47. 46 <button type="submit">Save</button> </div> </form> </div> </div> </div> </body> </html> Clic Edit : Voilà les informations ont été récupérées  Maintenant on va ajouter le fichier « UpdateEdtudiant.php » : pour que l’action de « save » se fonctionne Presque le même code de fichier SaisieEtudiant.php
  48. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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"); ?>
  61. 61. 60
  62. 62. 61
  63. 63. 62  Maintenant vous pouvez effectuer des tests : allez vaziiiiiiiiiii (Les filles occupez-vous de la cuisine kkkk )
  64. 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. 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.
  66. 66. 65 On va effectuer un test : voilà le login d’user s’affiche.
  67. 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. 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. 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. 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. 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. 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. 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. 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. 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 }?>
  76. 76. 75 </tbody> </table> </div> </div> </div> </body> </html>  On va appliquer un test Et voilà juste 3 étudiants par page  Maintenant on va ajouter la navigation entre les pages :
  77. 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. 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. 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. 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. 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. 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>
  83. 83. 82 </div> </div> </body> </html> Merci à vous Veuillez Trouvez le code complet Su mon Github

×