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

https://github.com/babcha

https://fr.linkedin.com/in/bassem-abcha-2abaa2119

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 »

http://www.wampserver.com/

https://www.jetbrains.com/phpstorm/

http://getbootstrap.com/

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

https://getbootstrap.com/getting-started/#download

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 »

http://localhost/scolarite/EditEtudiant.php?code=1

41

<?php

$code=$_GET['code'];/* on récupère le paramètre de url qui s'appelle code*/

require_once("conn.php");

$ps=$pdo->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

Software

Transcript of Application web php5 html5 css3 bootstrap