Application web php5 html5 css3 bootstrap

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
?>

<html>
<head>
<title>
</title>
</head>
<body>

<table>
<thead> 
<tr>
<th>code</th><th>nom</th><th>email</th><th>Photo</th>
</tr>
</thead>
<tbody>


<?php while($et = $ps->fetch()){ ?> 
<tr>
<td><?php echo($et['CODE'])?></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

11
?>
<html>
<head>
<title> Les etudiants </title>
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> 
</head>
<body>
<table class="myTable">
<tr>
</tr>
</thead>
<tbody>


<?php while($et = $ps->fetch()){ ?> 
<tr>
<td><?php echo($et['CODE'])?></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 */
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*/
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
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"> 
</head>
<body>
<table class="table table-bordered">
<tr>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo($et['CODE'])?></td> <!-- "et : c'est un tableau " afficher le code
</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
?>
<html>
<head>
</head>
<body>
<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">
<tr>
</tr>
</thead>
<tbody>

16
<tr>
</tr>
<?php }?>
</tbody>
</table>
</div>
</body>
</html>
 Maintenant on va mettre la liste d’affichage dans un panneau on utilisant Bootstrap :
<?php
?>
<html>
<head>
</head>
<body>

17
<div class="col-md-6 col-xs-12">
<div class="panel panel-info" >
<div class="panel-heading">Liste des etudiants</div>
<div class="panel-body">Le contenue</div>
</div>
<table class="table table-responsive">
<tr>
</tr>
</thead>
<tbody>

<tr>
</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
?>
<html>
<head>
</head>
<body>
un div encadré)-->
<div class="panel-body">
<table class="table table-responsive">
<tr>
</tr>
</thead>
<tbody>

<?php while($et = $ps->fetch()){ ?> 
<tr>
<td><?php echo($et['CODE'])?></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>
fichier CSS bootstrap pour notre page Html-->
<link rel="stylesheet" type="text/css" href="CSS/myStyle.css"> 
</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*/
background: pink;
}
.myTable td{ /* tt les éléments th qui se trouve à l'intérieur de l'élément qui
utilisa la classe myTable*/

20
background: white;
}
<?php
?>
<html>
<head>
</head>
<body>
<div class="panel panel-info spacer" >
CSS-->
<tr>
</tr>
</thead>

21
<tbody>
passes au html -->
<tr>
</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> 
<li> <a href="etudiants.php"> Etudiants </a></li>
<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

23
?>
<html>
<head>
</head>
<body>

<?php require_once("entete.php")
?>
CSS-->
<tr>
</tr>
</thead>
<tbody>
passes au html -->
<tr>
</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">
<ul class="nav navbar-nav">

25
<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">
</head>
<body>
<?php require_once("entete.php")/* inclure un fichier entête*/
?>
<div class="container spacer"></div> 
<div class="panel panel-default"> 
<div class="panel-heading">Saisie des Etudiants</div>
Formulaire
</div>
</div>
</div>
</body>
</html>

29
 Maintenant on va créer notre formulaire
<!DOCTYPE html>
<html>
<head>

30
</head>
<body>
?>
<div class="container spacer col-md-6 col-xs-12 col-md-offset-3"> 
<div class="panel panel-default"> 
<form method="post" action="SaveEtudiant.php" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label">Nom</label>
<input type="text" name="nom" class="form-control"> 
</div>
<label class="control-label">Email</label>
<input type="text" name="email" class="form-control"> 
</div>
<label class="control-label">Photo</label>
<input type="file" name="photo" class="form-control"> 
</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
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
?>
<html>
<head>
</head>
<body>
?>
CSS-->
<tr>

37
</tr>
</thead>
<tbody>
ses paramétré) sera stocké dans ps -->
passes au html -->
<tr>
<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
?>
<html>
<head>
</head>
<body>
?>

39
CSS-->
<tr>
</tr>
</thead>
<tbody>
passes au html -->
<tr>
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);
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
?>
<html>
<head>
</head>
<body>

43
?>
CSS-->
<tr>
</tr>
</thead>
<tbody>
passes au html -->
<tr>
height="100"></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=?");
/* 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>
</head>
<body>
?>
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-->
>
<form method="post" action="UpdateEtudiant.php" enctype="multipart/form-data">
<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>
<input type="text" name="nom" value="<?php echo($etudiant['NOM'])?>"
class="form-control"> 
</div>
<input type="text" name="email" value="<?php echo($etudiant['EMAIL'])?>"
class="form-control"> 
</div>
va faire un upload -->
<img src="images/<?php echo($etudiant['PHOTO'])?>" width="100"
height="100" >
</div>
<div>

46
</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*/
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*/
$ps=$pdo->prepare("UPDATE etudiants SET NOM=?,EMAIL=?,PHOTO=? WHERE code=?");
$params=array($nom,$email,$nomPhoto,$code);
?>

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
$code=$_POST['code'];
/* test sur la photo si on veut ajouter une nouvelle ou garder la mienne */
if($nomPhoto==""){
$ps=$pdo->prepare("UPDATE etudiants SET NOM=?,EMAIL=? WHERE code=?");/* on change pas la
photo*/
$params=array($nom,$email,$code);
}
else{
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=?");
$params=array($nom,$email,$nomPhoto,$code);
}

50
?>
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
require_once('conn.php');
$ps=$pdo->prepare("SELECT * FROM etudiants WHERE CODE=?");
/* 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>
</head>
<body>
?>
>
<form method="post" action="UpdateEtudiant.php" enctype="multipart/form-data">
<label class="control-label">CODE : <?php echo($etudiant['CODE'])?>

52
</label>
<input type="hidden" name="code" value="<?php echo($etudiant['CODE'])?>"
</div>
<input type="text" name="nom" value="<?php echo($etudiant['NOM'])?>"
</div>
<input type="text" name="email" value="<?php echo($etudiant['EMAIL'])?>"
</div>
va faire un upload -->
<img src="images/<?php echo($etudiant['PHOTO'])?>" width="100"
height="100" >
</div>
<div>
</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>
</head>
<body>
?>
>
<div class="panel-heading">Authentification</div>
<form method="post" action="Authentifier.php" >
<label class="control-label">Login:</label>
<input type="text" name="username" class="form-control"> 
</div>
<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 */
$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=?");
$params=array($login,$pass);
/* 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 */
$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=?");
$params=array($login,$pass);
/* 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");
?>

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">
<ul class="nav navbar-nav"> 
<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>



</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
?>
<?php
?>
<html>
<head>
</head>
<body>
?>

<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>
CSS-->

69
<tr>
</tr>
</thead>
<tbody>

<tr>
" afficher le code de l'etudiant entre td et td, -->
height="100"></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
?>

71
<?php
/* 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{
}
?>
<html>
<head>
</head>
<body>
<?php require_once("entete.php") ?>
<label class="control-label"> Mot Cle :</label>
<input type="text" name="motCle" value="<?php echo($mc) ?>"/button>
</div>
</form>
</div>
un div encadré)-->
CSS-->
<tr>
</tr>
</thead>
<tbody>
le résultat, fetch(): récupérer ligne par ligne, donc chaque ligne(ligne cvd un etudiant avec

72
passes au html -->
<tr>
height="100"></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
?>
<?php
$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........ */
existe ou non */
}
else{
$req = "SELECT * FROM etudiants LIMIT $size OFFSET $offset "; /* je veux afficher que les

74
3 etudiant de la page courante*/
}
?>
<html>
<head>
</head>
<body>
</div>
</form>
</div>
un div encadré)-->
CSS-->
<tr>
</tr>
</thead>
<tbody>
ses paramètre) sera stocké dans ps -->
passes au html -->
<tr>
height="100"></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
?>
<?php
/* pagination*/
/* on va définir le nombre d'élément par page*/
}
$page=0;
}
existe ou non */
}
else{
}
/* 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*/
}
?>
<html>
<head>
</head>
<body>
</div>
</form>
</div>
un div encadré)-->
CSS-->
<tr>
</tr>
</thead>
<tbody>
passes au html -->
<tr>

78
height="100"></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':''); ?>">
<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
?>

80
<?php
/* pagination*/
/* o va définir le nombre d'élément par page*/
}
$page=0;
}
existe ou non */
$req="SELECT * FROM etudiants WHERE NOM LIKE '%$mc%' LIMIT $size OFFSET $offset";
}
else{
}
/* 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*/
}
?>
<html>
<head>
</head>
<body>

81
</div>
</form>
</div>
un div encadré)-->
CSS-->
<tr>
</tr>
</thead>
<tbody>
passes au html -->
<tr>
height="100"></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':''); ?>">
<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

Application web php5 html5 css3 bootstrap

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Application web php5 html5 css3 bootstrap

Ähnlich wie Application web php5 html5 css3 bootstrap (20)

Application web php5 html5 css3 bootstrap