Ecole Nationale D'ingénieurs Abderhamane Baba Touré (ENI-ABT)
Ecole Nationale D'ingénieurs Abderhamane Baba Touré (ENI-ABT)
Binôme:
Hamady Gackou
Responsable :
Sommaire
I. Introduction :...............................................4
II. Les divers planning et Remarques :...................5
III. Cahier de charges :........................................8
IV. Conception :.................................................9
V. Description de l’environnement de Travail :.....21
VI. Implémentation :...........................................26
I. Introduction :
Objectif :
L’objectif est de concevoir un système qui permettra aux apprenants d’une
discipline de passer facilement leur test sans avoir à se déplacer via des
questionnaires à choix multiples.
Importance du thème :
Le système permettra d’évaluer indépendamment plusieurs apprenants à
distance. La plateforme sera accéssible partout, chaque utilisateur peut passer
facilement son test dans son espace propre. Un administrateur pourra
facilement examiner le niveau de ses apprenants à distance.
Description du système :
Le système d’examen en ligne est un système à usage dédié pour l’évaluation
des apprenants. Le système contiendra deux parties : un coté administrateur
et un coté utilisateur (les apprenants). L’administrateur joue un rôle important
dans le fonctionnement du système, c’est lui qui s’occupe de la gestion. Il a la
possibilité d’ajouter ou d’enlever des questions, de modifier les paramètres de
l’utilisateur. Quant à l’utilisateur, il doit simplement créer un compte et passer
le test. Les questions seront des questionnaires à choix multiple, l’utilisateur
doit juste sélectionner les bonnes réponses parmi les options et gagner certains
points de score, dans le cas contraire il peut en perdre ou ne rien gagner
(susmentionné par l’administrateur en ajoutant des questions).
Résultat attendu :
Au final, on obtient un système d’examen en ligne, d’une part qui permettra
aux apprenants (utilisateurs du système) de passer leur test en ligne sans
rencontrer de difficultés et d’autre part qui permettra aux formateurs
d’examiner facilement à distance le niveau de leurs apprenants via des
questionnaires à choix multiples.
Environnement pratique :
Coté Front-end : Du coté Front-end nous allons utiliser le langage
informatique CSS et le langage de programmation de Brenden Eich (le
JavaScript). Comme Framework, nous allons utiliser Bootstrap.
Coté Back-end : Du coté Back-end nous allons utiliser le langage de
programmation PHP (HyperText Préprocesseur) et le XAMP. Le XAMP
contient à la fois un serveur virtuel APACHE et le SGBDR MYSQL, ce qui
nous permettra d’exécuter les scripts en PHP et les requêtes en SQL à
partir de la base de données.
Planning réel :
Remarques :
IV. Conception :
A. Dynamique du système :
1. Diagramme de cas d’utilisation du système :
2. Diagrammes de séquence :
La fonctionnalité passer test :
B. Statique du système :
1. Diagramme de classe du système :
Accueil utilisateur
Accueil administrateur :
Interface d’examination :
Après avoir présenté dans les parties précédentes les différentes étapes
d’analyse et de la conception, nous allons consacrer cette partie à décrire
l’environnement et les outils qui ont servi à la mise en œuvre de notre site
web.
Les serveurs :
Serveur apache :
Le serveur Web Apache est le serveur le plus répondu sur internet, il
s’agit d’une application fonctionnant à la base de systèmes d’exploitation
de type Unix, Mais il a désormais été porté sur de nombreux systèmes,
dont Microsoft Windows. C’est un serveur qui met des pages Web à
disposition d’un client, ces pages sont des fichiers au format HTML. Tout
développement de site web requiert un serveur web qui s’occupe de
traitement des requêtes des clients et l’exécution des programmes sur
les machines serveurs. Nous choisissons et présentons ce serveur par les
avantages qu’il offre et que nous allons détailler ci-après :
• C’est un serveur gratuit (peut être téléchargé à partir du site du groupe
Apache à l’adresse ‘http://www.apache.org’).
• Un niveau élevé de performances pour des besoins matériels modeste.
• Extensible, modulaire et configurable.
• robuste.
• Très portable contrairement à IIS (Internet Information Services) de
Microsoft qui tourne seulement sous Windows, le serveur Web apache
dispose d’une version pour chaque plate-forme (Linux, Windows, …).
MySQL : MySQL est un système de gestion de bases de données
Installer XAMPP :
XAMP sur le site www.XAMPP.org. Double cliquer sur l’exécutable
téléchargé. Sélectionner le répertoire d’installation et suivre la
procédure.
Lancer XAMP :
On ne peut pas proprement parler du lancement de XAMP, il s’agit en
fait de la mise en route du serveur apache et de serveur MySQL. A
l’installation, un raccourci vers xampp est créé dans le répertoire «
Démarrer /programmes/xampp ».
Phpmyadmin :
Phpmyadmin est une application web qui permet de gérer un serveur de
bases de données MySQL. Dans un environnement multiutilisateur, cette
interface écrite en PHP permet également de donner à un utilisateur un
accès à ses propres bases de données.
Utilisation de Phpmyadmin :
Pour accéder à Phpmyadmin, il faut d’abord démarrer le xampp puis le
serveur Apache et le MySQL. Après on peut l’accéder à partir de bouton
Admin à côté de MySQL. La page d’accueil de Phpmyadmin s’affiche dans
la fenêtre du navigateur, accompagner d’un champ de sélection de base
de données présente sur l’hôte MySQL par défaut, comme l’illustre la
figure suivante :
Le Java Script :
JavaScript est un langage de scripts incorporé aux balises Html,
permettant d’améliorer la présentation et l’interactivité des pages Web.
Il est plus simple à mettre en œuvre car c’est du code que vous ajoutez à
votre page écrite en Html, il est donc une extension du code Html des
pages Web en permettant d’exécuter des commandes du coté client,
c'est-à-dire au niveau du navigateur et non du serveur web.
Le langage PHP :
Fonctionnement de PHP :
Le serveur Web reconnaît de l’extension des fichiers, différente de celle
des pages HTML simples, si le document appelé par le client comporte du
code PHP. Le serveur Web lance l’interpréteur PHP. L’interpréteur PHP
traduit le document demandé et exécute le code source de la page ; les
commandes figurant dans la page interprétée et le résultat prennent la
forme d’une page HTML publiée à la place du code source dans le même
document. La page modifiée est envoyée au client pour y être affichée
par le navigateur. De cette façon, la page Web est créée
dynamiquement, c'est-à-dire au moment même où le client est en
dialogue avec le serveur.
Framework utilisé(Bootstrap) :
VI. Implémentation :
Dans cette partie d’implémentation, nous allons présenter le code source pour
les sections importantes du site.
Code source de l’accueil principal du site :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accueil Principal du site</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
html{
scroll-behavior: smooth;
}
body{
margin: 5px;
border-radius: 20px;
}
#principal{
background-image: url(images/accueilPrincipal.png);
background-repeat: no-repeat;
background-size: cover;
border-radius: 20px;
}
h1{
background-color: rgba(118, 112, 133, 0.823);
text-align: center;
font-weight: bold;
border-radius: 40px;
}
@keyframes animation {
0%{
opacity: 0.25;
transform: translateY(50px);
}
25%{
opacity: 0.5;
transform: translateX(-400px);
}
75%{
opacity:0.75;
transform: translateX(400px);
}
100%{
opacity: 1;
transform: translateY(0px);
}
}
h2{
text-align: center;
animation: animation ease 20s;
}
ul{
text-align: center;
padding: 20px;
}
li{
color: aliceblue;
list-style-type: none;
display: inline;
padding: 100px;
margin: auto;
color: rgb(237, 239, 243);
font-size: 4em;
font-weight: bold;
text-shadow: 5px 5px 5px rgb(199, 186, 186);
font-style: italic;
}
nav{
padding: 0;
margin: 0;
}
#welcome{
text-align: center;
font-weight: bold;
font-style: italic;
}
h6{
margin-left: 150px;
margin-bottom: 2px;
font-size: 1.5em;
font-weight: bold;
}
#premier{
margin-top: 80px;
}
.nom{
margin-left: 250px;
}
#dernier{
margin-bottom: 80px;
}
</style>
</head>
<body>
<header>
<h1>
Online Examination <br> System
</h1>
</header>
<main id="principal">
<nav>
<ul>
<div class="col-sm-12">
<li><a href="sideUser/index.php">User</a></li>
<li><a href="sideAdmin/index.php">Admin</a></li>
</div>
</ul>
</nav>
<div class="col-sm-12" id="trait1">
</div>
<h2 id="welcome">
Welcome to Online Exam !!
</h2>
<div class="col-sm-12" id="trait2">
</div>
<div>
<p id="premier">
<h6>Guided by :</h6>
<h6 class="nom">Dr Sidibé</h6>
</p>
<div class="col-sm-12" id="trait2">
</div>
<p id="dernier">
<h6>Presented by :</h6>
<h6 class="nom">Hamady Gackou</h6>
<h6 class="nom">Fatoumata Binta Keita</h6>
</p>
</div>
</main>
<footer>
</footer>
</body>
</html>
}
img{
width: 800px;
height: 300px;
float: left;
}
#select{
margin-top: 120px;
}
h2{
text-align: right;
font-style: italic;
margin-bottom: 120px;
}
h1{
text-align: right;
font-weight: bold;
}
span{
background-color: hsl(184, 40%, 72%);
}
button{
background-color: hsl(184, 40%, 72%);
width: 300px;
height: 50px;
padding: 30px;
margin: 40px;
border-radius: 10px;
font-size: 1em;
text-align: center;
font-weight: bold;
}
a:hover{
color: black;
}
</style>
<body>
<header>
<div>
<img src="../images/accueilUser.jpeg" alt="">
<h2>
<span>Accueil admin</span>
</h2>
<h1>
<span>Online Examination System </span>
</h1>
</div>
</header>
<main>
<div class="container-fluid"id="select">
<div class="row">
<div class="col-sm-4" >
<button><a href="examen.php">Gerer Examen</a></button>
</div>
<div class="col-sm-6" >
<button><a href="user.php">Gerer User</a></button>
</div>
<div class="col-sm-4" >
<button><a href="changeProfil.php">Changer profil</a></button>
</div>
<div class="col-sm-4">
<button><a href="changePasse.php">Changer mot de
passe</a></button>
</div>
<div class="col-sm-4" >
<button><a href="deconnecter.php">Se Deconnecter</a></button>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccueilUser</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<style>
body{
background-color: rgb(204,204,204);
}
img{
width: 600px;
height: 300px;
float: left;
}
#select{
margin-top: 150px;
}
h2{
text-align: right;
font-style: italic;
margin-bottom: 120px;
}
h1{
text-align: right;
}
span{
background-color: hsl(184, 40%, 72%);
}
button{
background-color: hsl(184, 40%, 72%);
width: 250px;
height: 60px;
padding: 20px;
margin: 40px;
border-radius: 10px;
font-size: 1em;
text-align: center;
font-weight: bold;
color: black;
}
a:hover{
color: black;
}
</style>
</head>
<body>
<header>
<div>
<img src="../images/accueilUser.jpeg" alt="">
<h2>
<span>Accueil User</span>
</h2>
<h1>
<span>Online Examination System </span>
</h1>
</div>
</header>
<main>
<div class="container-fluid"id="select">
<div class="row">
<div class="col-sm-6">
<button><a href="exam.php">Passer test</a></button>
</div>
<div class="col-sm-6">
<button><a href="changeProfil.php">Changer profil</a></button>
</div>
<div class="col-sm-6">
<button><a href="changePasse.php">Changer mot de
passe</a></button>
</div>
<div class="col-sm-6">
<button><a href="deconnecter.php"> Se deconnecter</a></button>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css">
<style>
body{
background-image:url("../images/accueilExamen.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
#select{
margin-top: 400px;
}
main{
margin-top: 150px;
}
h1{
text-align: center;
font-weight: bold;
color: white;
font-size: 3em;
}
button{
background-color: hsl(184, 40%, 72%);
width: 300px;
height: 50px;
padding: 30px;
margin: 30px;
border-radius: 10px;
font-size: 1em;
text-align: center;
font-weight: bold;
color: black;
font-weight: bold;
}
button{
background-color : white;
color : white;
}
a{
color : #000;
}
a{
font-size: 1.2em;
}
a:hover{
color: black;
}
</style>
<title>AccueilExamen</title>
</head>
<body>
<header>
<div>
<h1>
</footer>
</body>
</html>
include("../../inc/dbConnection.php");
if(isset($_POST['idexam']) or isset($_SESSION['idexam'])){
if(isset($_POST['idexam'])){
$idexam=htmlspecialchars($_POST['idexam']);
$rqte=$bdd->prepare("SELECT * FROM exam WHERE idexam = ?");
$rqte->execute(array($idexam));
while ($data = $rqte->fetch()){
$nb_data = count($data);
for($i = 0; $i < $nb_data; $i++);
{
$_SESSION['idexam'] = $data['idexam'];
$_SESSION['titre']=$data['titre'];
$_SESSION['date']=$data['date'];
$_SESSION['duree']=$data['duree'];
$_SESSION['nombrequestion']=$data['nombrequestion'];
$_SESSION['pointbonnereponse']=$data['pointbonnereponse'];
$_SESSION['pointmauvaisereponse']=$data['pointmauvaisereponse'];
$_SESSION['idadmin'] = $data['idadmin'];
}
}
}
elseif(isset($_SESSION['idexam'])){
$idexam=$_SESSION['idexam'];
$rqte=$bdd->prepare("SELECT * FROM exam WHERE idexam = ?");
$rqte->execute(array($idexam));
while ($data = $rqte->fetch()){
$nb_data = count($data);
for($i = 0; $i < $nb_data; $i++);
{
$_SESSION['idexam'] = $data['idexam'];
$_SESSION['titre']=$data['titre'];
$_SESSION['date']=$data['date'];
$_SESSION['duree']=$data['duree'];
$_SESSION['nombrequestion']=$data['nombrequestion'];
$_SESSION['pointbonnereponse']=$data['pointbonnereponse'];
$_SESSION['pointmauvaisereponse']=$data['pointmauvaisereponse'];
$_SESSION['idadmin'] = $data['idadmin'];
}
}
}
}
else{
header("Location : listeExamen.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/bootstrap.css">
<title>AccueilUser</title>
</head>
<style>
body{
background-image: url("../../images/accueilQuestion.jpeg");
background-size: cover;
}
#select{
margin-top: 100px;
}
h1{
text-align: center;
font-weight: bold;
font-size : 3em;
color: white;
}
button{
background-color: white;
width: 300px;
height: 50px;
padding: 35px;
margin: 70px;
border-radius: 10px;
font-size: 1em;
text-align: center;
font-weight: bold;
color: black;
font-weight: bold;
}
a{
color : #000;
}
a:hover{
color: black;
}
</style>
<body>
<header>
<div>
<h1>
Online Examination System
</h1>
</div>
</header>
<main>
<div class="container-fluid"id="select">
<div class="row">
<div class="col-sm-6" style="text-align:center;">
<button><a href="questionAjouter.php">Ajouter
question</a></button>
</div>
<div class="col-sm-6" style="text-align:center;">
<button><a href="listeQuestion.php">Voir Liste
Question</a></button>
</div>
<div class="col-sm-6" style="text-align:center;">
<button><a href="../listeExamen.php"> Retour</a></button>
</div>
<div class="col-sm-6" style="text-align:center;">
<button><a href="quitter.php">Quitter</a></button>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
include("../../../inc/dbConnection.php");
if(isset($_POST['idquestion']) or isset($_SESSION['idquestion'])){
if(isset($_POST['idquestion'])){
$idquestion=htmlspecialchars($_POST['idquestion']);
$rqte=$bdd->prepare("SELECT * FROM question WHERE idquestion = ?");
$rqte->execute(array($idquestion));
while ($data = $rqte->fetch()){
$nb_data = count($data);
for($i = 0; $i < $nb_data; $i++);
{
$_SESSION['idquestion'] = $data['idquestion'];
$_SESSION['titre']=$data['titre'];
$_SESSION['optionreponse']=$data['optionreponse'];
$_SESSION['idexam'] = $data['idexam'];
}
}
}
elseif(isset($_SESSION['idquestion'])){
$idquestion=$_SESSION['idquestion'];
$rqte=$bdd->prepare("SELECT * FROM question WHERE idquestion = ?");
$rqte->execute(array($idquestion));
while ($data = $rqte->fetch()){
$nb_data = count($data);
for($i = 0; $i < $nb_data; $i++);
{
$_SESSION['idquestion'] = $data['idquestion'];
$_SESSION['titre']=$data['titre'];
$_SESSION['optionreponse']=$data['optionreponse'];
$_SESSION['idexam'] = $data['idexam'];
}
}
}
}
else{
header("Location : listeExamen.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../../css/bootstrap.css">
<title>accueilOption</title>
</head>
<style>
body{
background-image: url("../../../images/accueilOption.jpeg");
background-size: cover;
}
#select{
margin-top: 100px;
}
h1{
text-align: center;
font-weight: bold;
font-size : 3em;
color: blue;
}
button{
background-color: white;
width: 250px;
height: 50px;
padding: 30px;
margin: 60px;
border-radius: 10px;
font-size: 1em;
text-align: center;
font-weight: bold;
color: black;
font-weight: bold;
}
a{
color : #000;
}
a:hover{
color: black;
}
</style>
<body>
<header>
<div>
<h1>
Online Examination System
</h1>
</div>
</header>
<main>
<div class="container-fluid" id="select">
<div class="row">
<div class="col-sm-6">
<button><a href="ajouterOption.php">Ajouter Option</a></button>
</div>
<div class="col-sm-6">
<button><a href="listeOption.php"> Voir Liste
Option</a></button>
</div>
<div class="col-sm-6" >
<button><a href="../listeQuestion.php"> Retour</a></button>
</div>
<div class="col-sm-6">
<button><a href="quitter.php"> quitter</a></button>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
</html>
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<style>
h1{
text-align : center;
font-size : 4em;
font-weight : bold;
color : black;
}
body{
backgrounD-image: url("../images/startTest.jpeg");
background-repeat: no-repeat;
background-size:cover;
}
a{
color : black;
font-weight : bold;
button {
margin-top :20px;
margin : 100px;
width : 250px;
padding : 10px;
font-size: 1.3em;
font-weight : bold;
background-color :white;
}
a :hover{
text-decoration :none;
color :green;
}
</style>
</head>
<body>
<h1>Online Examination System</h1>
<div class="container-fluid">
<div class="row" >
<div class="col-sm-6">
<button><a href="examination.php" >Start Test</a></button>
</div>
<div class="col-sm-6">
<button><a href="quitter.php">Quitter</a></button>
</div>
<div class="col-sm-6">
<button><a href="exam.php">Retour</a</button>
</div>
</div>
</div>
</body>
</html>
if($nb>=1){
header("Location:exam.php?error=existe");
}
$date=strtotime(date('Y/m/d'));
$res=$bdd->prepare("SELECT * FROM exam WHERE idexam =? ");
$res->execute(array($_SESSION['idexam']));
$d=strtotime($res->fetch()['date']);
if(isset($_POST['optionreponse'])){
$useroptionreponse=htmlspecialchars($_POST['optionreponse']);
$iduser=htmlspecialchars($_SESSION['iduser']);
$idexam=htmlspecialchars($_POST['idexam']);
$idquestion =htmlspecialchars($_POST['idquestion']);
$rqte1->execute(array($idquestion));
$rqte2=$bdd->prepare("SELECT * FROM exam WHERE idexam=?");
$rqte2->execute(array($idexam));
if($rqte1->fetch()['optionreponse']==$useroptionreponse){
$point=$rqte2->fetch()['pointbonnereponse'];
}
else{
$point=$rqte2->fetch()['pointmauvaisereponse'];
}
$re12=$bdd->prepare('SELECT COUNT(idexamuserquestionreponse) AS
nb_ide FROM examuserquestionreponse WHERE iduser=? AND idexam=? AND
idquestion=?');
$re12->execute(array( $iduser, $idexam,$idquestion ));
$columns = $re12->fetch();
$nb = $columns['nb_ide'];
if($nb==0){
$rqte=$bdd->prepare("INSERT INTO
examuserquestionreponse(useroptionreponse,point,iduser,idexam,idquestion)VALUE
S(?,?,?,?,?)");
$rqte->execute(array($useroptionreponse,$point,$iduser,
$idexam,$idquestion));
}
}
?>
<style>
body{
background-image:url(../images/test.jpeg);
background-repeat: no-repeat;
background-size: cover;
background-attachment :fixed;
}
h1{
font-weight : bold;
text-align : center;
background-attachment :fixed;
}
h3{
font-style:italic;
margin-left : 50px;
margin-top : 20px;
}
</style>
<h1 style="font-weight : bold; position:fixed; top:10px;
right :0px;">Online Examination System</h1>
<div style="margin-bottom:100px;">
<h3 style="font-weight : bold;position:fixed; color:red; top:80px;
right:20px;">
Attention le test a demarré !!
</h3>
</div>
<?php
if(isset($_SESSION['idexam'])){
$idexam=$_SESSION['idexam'];
include("../inc/dbConnection.php");
?>
<form class="form" id="<?php echo 'idform'.$a; ?>" method="POST"
style="font-weight:bold; color : black;" onsubmit="return sendData(this.id);"
>
</form>
<?php
}
else{
header("Location:exam.php");
}
?>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></
script>
<script type="text/javascript">
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examination</title>
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
</body>
</html>
IX. Conclusion :
X. Références bibliographiques :
Biddouille. (01/07/2005). Affiche une image de la base de données. Récupéré
sur beaussier/developpez.com/articles/php/mysql/db
Charles. (s.d.). L'affichage d'une images à partir de la base de données.
Récupéré sur askcodez.com
Holder, N. (28/05/2020). Système d'examen en ligne en PHP avec code source.
Récupéré sur quedulourd.com
OpenClassroom. (s.d.). Afficher une image de la base de données. Récupéré sur
Openclassrom.com