SlideShare une entreprise Scribd logo
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
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
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 »
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 : 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
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
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>
9
</table>
</body>
</html>
 Ajouter un fichier CSS pour bien structurer notre tableau :
On commence par la création d’un dossier : CSS
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
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;
}
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;
}
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
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>
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,
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>
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
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
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 */
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>
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)
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
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>
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-->
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
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
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
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>
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 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 )
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 */
?>
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
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")
?>
34
 Appliquer un test
Clic Save
Et voilà l’étudiant a était ajouté ( coooooooooooooooooooooool nous somme
magnifiques)
Ils sont enregistrés dans la base
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
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>
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>
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
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>
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 »
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
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")
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>
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é.
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>
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
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")
?>
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
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);
}
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
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'])?>
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
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)
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 :
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
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 )
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
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 */
}
?>
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");
?>
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_start();
/* Maintenant on va détruire la session*/
session_destroy();
/* redirection vers page Authentification*/
header("location:Login.php");
?>
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.
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 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 »
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
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-->
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>
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");
?>
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 -->
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à …..
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
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 }?>
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 :
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*/
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>
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 )
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");
?>
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-->
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>
82
</div>
</div>
</body>
</html>
Merci à vous
Veuillez Trouvez le code complet
Su mon Github

Contenu connexe

Tendances

Conception et mise en place d'un site web dynamique de gestion de passation ...
Conception et mise en place d'un site web  dynamique de gestion de passation ...Conception et mise en place d'un site web  dynamique de gestion de passation ...
Conception et mise en place d'un site web dynamique de gestion de passation ...
Symphorien Niyonzima
 
Conception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTSConception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTS
FaissoilMkavavo
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
Kristen Le Liboux
 
Conception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-locationConception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-location
ALALSYSE
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Riadh K.
 
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Symphorien Niyonzima
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATSiwar GUEMRI
 
Rapportpfe
RapportpfeRapportpfe
Rapportpfe
BILEL TLILI
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
Houda TOUKABRI
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application Mobile
Rim ENNOUR
 
Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...
Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...
Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...
Zaineb Erraji
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
Rouâa Ben Hammouda
 
Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
Semah Mhamdi
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Mehdi Hamime
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
ENSET, Université Hassan II Casablanca
 
Présentation E-Learning
Présentation   E-LearningPrésentation   E-Learning
Présentation E-Learning
Ghribi Achref
 
Gestion de-soutenance
Gestion de-soutenanceGestion de-soutenance
Gestion de-soutenance
VatosoaRazafindrazak
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site Web
Harrathi Mohamed
 
Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8
ayoub damir
 

Tendances (20)

Conception et mise en place d'un site web dynamique de gestion de passation ...
Conception et mise en place d'un site web  dynamique de gestion de passation ...Conception et mise en place d'un site web  dynamique de gestion de passation ...
Conception et mise en place d'un site web dynamique de gestion de passation ...
 
Conception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTSConception et Réalisation Application Web Laravel PFE BTS
Conception et Réalisation Application Web Laravel PFE BTS
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
Conception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-locationConception et developpement d'une application mobile Android e-location
Conception et developpement d'une application mobile Android e-location
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
Conception d’une plateforme web d’e-Commerce au sein d’une entreprise commerc...
 
rapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSATrapport PFE ingénieur génie logiciel INSAT
rapport PFE ingénieur génie logiciel INSAT
 
Rapportpfe
RapportpfeRapportpfe
Rapportpfe
 
Fascicule de tp atelier développement web
Fascicule de tp atelier développement webFascicule de tp atelier développement web
Fascicule de tp atelier développement web
 
Projet Fin D'étude Application Mobile
Projet Fin D'étude Application MobileProjet Fin D'étude Application Mobile
Projet Fin D'étude Application Mobile
 
Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...
Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...
Mise en place d’un module de génération du Simpl-IS pour L’ERP ODOO (ex. Open...
 
Rapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learningRapport- Conception et réalisation d'une plateforme social learning
Rapport- Conception et réalisation d'une plateforme social learning
 
Présentation PFE
Présentation PFEPrésentation PFE
Présentation PFE
 
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
Ecole ESMA : Projet Fin de semestre - Application de gestion d'une école - Di...
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Présentation E-Learning
Présentation   E-LearningPrésentation   E-Learning
Présentation E-Learning
 
Gestion de-soutenance
Gestion de-soutenanceGestion de-soutenance
Gestion de-soutenance
 
Ma présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site WebMa présentation PFE : Application Android & Site Web
Ma présentation PFE : Application Android & Site Web
 
Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8
 

En vedette

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
Horacio Gonzalez
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
Yves Van Goethem
 
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
TelecomValley
 
PHP 5 pour les développeurs Java
PHP 5 pour les développeurs JavaPHP 5 pour les développeurs Java
PHP 5 pour les développeurs Java
Mehdi EL KRARI
 
Introduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINE
Introduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINEIntroduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINE
Introduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
Présentation symfony epita
Présentation symfony epitaPrésentation symfony epita
Présentation symfony epita
Noel GUILBERT
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
Atelier IHM Polytech Nice Sophia
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
ODC Orange Developer Center
 
IPW HTML course
IPW HTML courseIPW HTML course
IPW HTML course
Vlad Posea
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the web
Vlad Posea
 
Ce mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in ITCe mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in IT
Vlad Posea
 
Programarea calculatoarelor c2
Programarea calculatoarelor c2Programarea calculatoarelor c2
Programarea calculatoarelor c2
Vlad Posea
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTMLVlad Posea
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 
Linked Open Data in Romania
Linked Open Data in RomaniaLinked Open Data in Romania
Linked Open Data in Romania
Vlad Posea
 

En vedette (20)

ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Beautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenirBeautiful CSS : Structurer, documenter, maintenir
Beautiful CSS : Structurer, documenter, maintenir
 
CM processus agile
CM processus agileCM processus agile
CM processus agile
 
CM uml-diag-statiques
CM uml-diag-statiquesCM uml-diag-statiques
CM uml-diag-statiques
 
CM patterns
CM patternsCM patterns
CM patterns
 
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap2014.12.11 - TECH CONF #3 - Présentation Bootstrap
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
 
PHP 5 pour les développeurs Java
PHP 5 pour les développeurs JavaPHP 5 pour les développeurs Java
PHP 5 pour les développeurs Java
 
Introduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINE
Introduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINEIntroduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINE
Introduction au langage PHP (1ere partie) élaborée par Marouan OMEZZINE
 
Présentation symfony epita
Présentation symfony epitaPrésentation symfony epita
Présentation symfony epita
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
 
UML1
UML1UML1
UML1
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
IPW HTML course
IPW HTML courseIPW HTML course
IPW HTML course
 
Usability and accessibility on the web
Usability and accessibility on the webUsability and accessibility on the web
Usability and accessibility on the web
 
Ce mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in ITCe mă fac când o să fiu mare - optiuni pentru o cariera in IT
Ce mă fac când o să fiu mare - optiuni pentru o cariera in IT
 
Programarea calculatoarelor c2
Programarea calculatoarelor c2Programarea calculatoarelor c2
Programarea calculatoarelor c2
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
Linked Open Data in Romania
Linked Open Data in RomaniaLinked Open Data in Romania
Linked Open Data in Romania
 

Similaire à Application web php5 html5 css3 bootstrap

Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
IZZA Samir
 
Java Database Connectivity
Java Database ConnectivityJava Database Connectivity
Java Database Connectivity
Korteby Farouk
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
Abdoulaye Dieng
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
borhen boukthir
 
Comprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractibleComprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractible
Thierry Gayet
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
Bruno Bonnin
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
Mickael Perraud
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
Ines Ouaz
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
Bruno Bonnin
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
Manuel Adele
 
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Bruno Bonnin
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à SinatraRémi Prévost
 
Jump Camp - HTML5
Jump Camp - HTML5Jump Camp - HTML5
Jump Camp - HTML5
chaudavid
 
Mpdf 9
Mpdf 9Mpdf 9
Mpdf 9
Moez Moezm
 

Similaire à Application web php5 html5 css3 bootstrap (20)

Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
Cours Php
Cours PhpCours Php
Cours Php
 
Cours Php
Cours PhpCours Php
Cours Php
 
Java Database Connectivity
Java Database ConnectivityJava Database Connectivity
Java Database Connectivity
 
php2 : formulaire-session-PDO
php2 : formulaire-session-PDOphp2 : formulaire-session-PDO
php2 : formulaire-session-PDO
 
Cours php bac info
Cours php bac infoCours php bac info
Cours php bac info
 
Comprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractibleComprendre les scripts shell auto-extractible
Comprendre les scripts shell auto-extractible
 
Chap2
Chap2Chap2
Chap2
 
A la découverte de vue.js
A la découverte de vue.jsA la découverte de vue.js
A la découverte de vue.js
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
 
Examen principal- php - correction
Examen principal- php - correctionExamen principal- php - correction
Examen principal- php - correction
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Vue, j’avais pas vu !
Vue, j’avais pas vu !Vue, j’avais pas vu !
Vue, j’avais pas vu !
 
vue j'avais pas vu !!
vue j'avais pas vu !!vue j'avais pas vu !!
vue j'avais pas vu !!
 
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
Jug summer camp 2017 - Vue.js, même un dev java peut en faire !
 
Introduction à Sinatra
Introduction à SinatraIntroduction à Sinatra
Introduction à Sinatra
 
Jump Camp - HTML5
Jump Camp - HTML5Jump Camp - HTML5
Jump Camp - HTML5
 
Mpdf 9
Mpdf 9Mpdf 9
Mpdf 9
 

Application web php5 html5 css3 bootstrap

  • 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. 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 »
  • 4. 3  Insérer des lignes : (a vos choix)
  • 5. 4 2) Création d’application PHP : Nom de projet : « scolarite »
  • 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>
  • 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. 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
  • 36. 35 Et l’image est stockée dans le dossier images
  • 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>
  • 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. 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"); ?>
  • 61. 60
  • 62. 61
  • 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.
  • 66. 65 On va effectuer un test : voilà le login d’user s’affiche.
  • 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 }?>
  • 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. 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>
  • 83. 82 </div> </div> </body> </html> Merci à vous Veuillez Trouvez le code complet Su mon Github