Chapitre
Chapitre 44 ::
Réalisation
Réalisation
A. Présentation des outils :
Dans cette partie nous allons présenter notre environnement de travail, l’ensemble des
logiciels, outils et langages de programmations qui nous ont servis à développer cette
application :
I. Les logiciels et EDI (Environnement de Développent Intégré)
utilisés :
1. Macromedia Dreamweaver MX : C’est un logiciel créé par Macromedia (et géré
maintenant par Adobe) permettant la conception de sites web. Dreamweaver fonctionne en
mode WYSIWYG ou en mode code et dispose d'un client FTP permettant le transfert des
pages créées sur le serveur hébergeant le site web. Ce logiciel est très puissant d'utilisation
et nécessite une bonne formation pour pouvoir le maitriser. La partie Editeur de code du
logiciel permet la modification rapide du contenu des pages, de leur mise en forme, de
l'insertion d'images, de liens ou d'autres éléments habillant la page Web.
Voici ci-dessous l’interface de Dreamweaver :
Figure 2
2. Rational rose : Rational Rose est un outil orienté objet UML pour la conception de
logiciels destinés à la modélisation visuelle et la construction des composants
d'applications logicielles d'entreprise. Rational Rose documente le diagramme tel qu'il est
construit, puis génère le code dans le choix du concepteur du C + +, Visual Basic, Java,
Oracle8, CORBA ou data.
3. WAMP : WAMP est un acronyme qui signifie pour Windows, Apache, MySQL et PHP
(ou Perl ou Python). Il s'agit d'une plateforme de développement Web qui définit le
fonctionnement (Windows) Système de Serveur Web (Apache), base de données
(MySQL), et langage de script (PHP, Perl, ou Python).
4. MySQL : MySQL est un système de gestion de base de données (SGBD). Selon le
type d'application, sa licence est libre ou propriétaire. Il fait partie des logiciels de
gestion de base de données les plus utilisés au monde, autant par le grand public
(applications web principalement) que par des professionnels, en concurrence avec
Oracle et Microsoft SQL Server.
II. Les langages utilisés :
1. PHP : PHP: HyperText Preprocessor, c’est un langage principalement utilisé pour
produire des pages Web dynamiques via un serveur http.
Voici un schéma explicatif du fonctionnement ou le déroulement de l’exécution du
code PHP :
Figure 2 : principe de fonctionnement PHP
2. XHTML : HTML (eXtensible HyperText Markup Language), est un langage de
balisage servant à écrire des pages pour le World Wide Web. Conçu à l'origine comme
le successeur d'HTML, XHTML se fonde sur la syntaxe définie par XML, plus
récente, mais plus exigeante que celle définie par SGML sur laquelle repose HTML.
3. JavaScript : JavaScript est un langage de programmation de scripts principalement
utilisé dans les pages web interactives.
4. Ajax : Ajax est un acronyme pour Asynchronous JavaScript and XML (« XML et
Javascript asynchrones ») et désignant une solution informatique libre pour le
développement de pages dynamiques et d'applications Web.
5. JQuery : JQuery est une bibliothèque Javascript libre qui porte sur l'interaction entre
JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes
communes de Javascript. La première version date de janvier 2006. JQuery se présente
comme un unique fichier de 120 ko (19 ko dans sa version compressée).
6. CSS : CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage
informatique qui sert à décrire la présentation des documents HTML et XML.
III. Les outils de communication utilisés :
1. SVN : D’abord, qu’est-ce qu’un SVN? Rien de plus simple, il s’agit d’un gestionnaire
de versions. Pour être plus précis, il s’agit du système de gestion de versions. Il sert à
gérer les différentes versions des fichiers d’un projet. Cette sauvegarde permet de
récupérer les anciennes versions d’un fichier, de le restaurer si ce dernier à été
supprimé, de le récupérer s’il a été perdu. Bref, sur un serveur SVN, Vous aurez toutes
les versions de votre projet que vous aurez envoyez. Mais là ou l’utilisation d’un
serveur SVN prend tout son intérêt, c’est dans le cadre d’un projet « collaboratif ».
épargne tous les habituels transferts de fichier entre les différents participants dans le
but de gagner un temps précieux. SVN permet d’avoir continuellement une sauvegarde
à jour de notre projet mais nous autorise également à travailler sur votre projet depuis
différents PC.
2. Acrobat.com : Grâce aux espaces en ligne d'Acrobat.com, chaque personne
possédant un compte peut partager un ensemble de documents avec une personne ou
une équipe afin de travailler conjointement avec eux sur cet ensemble de documents. En
tant que propriétaire, vous contrôlez totalement le partage de l'espace de travail. Vous
décidez du niveau d'accès de chacun pour chacun des documents du projet. Vous
pouvez :
Partagez un ensemble de documents en un seul endroit.
Collaborez avec plusieurs personnes à la fois.
Partagez votre espace de travail en ligne.
B. Développement :
Dans cette partie, nous présentons les différentes interfaces de l’application :
Interface d’inscription étudiant :
En accédant à cette interface l’étudiant remplit la fiche d’inscription contenant les
informations personnelles nécessaires.
Les deux champs ‘Question secrète’ et ‘Réponse secrète’ sont utilisés dans le cas d’oublie de
mot de passe.
Figure: Interface inscription étudiant
*En cliquant sur chaque champ pour le remplir, un petit message s’affiche sous le champ,
pour indiquer des informations le concernant :
Figure
*Si un champ n’est pas rempli, en validant, un message d’erreur va s’afficher comme suit :
Figure
Interfaces validation inscriptions :
Suite au remplissage des fiches d’inscription, les préinscriptions sont envoyées à
l’administrateur qui se chargera de valider ou de refuser les inscriptions.
Grace à l’outil JQuery, en cliquant sur le symbole suivant , les informations de s’affiche
comme suit :
Figure: Validation des inscriptions professeurs
Interface de connexion :
Avant d’accéder à son espace personnel, l’étudiant ou le professeur doit s’authentifier en
saisissant son adresse e-mail et son mot de passe. Si l’adresse e-mail ou le mot de passe sont
incorrectes, un message d’erreur s’affiche, et ceci grâce à un test avec JQuery.
Figure: Interface connexion étudiant et professeur
Interface espace étudiant :
Dans cette partie, nous nous sommes intéressés à l’espace personnel de l’utilisateur. Cet
espace est un compte auquel, il peut accéder à distance, à tout instant et à partir de tout
ordinateur connecté au réseau Internet.
I. Espace Etudiant :
Voici un aperçu de l’interface étudiant après une authentification réussie :
Figure : Espace étudiant
*Pour se déconnecter de son espace personnel, il suffit de cliquer sur le lien en rouge
« déconnexion » qui figure devant le nom de l’utilisateur, en haut de la page.
Espace cours :
Pour accéder à l’espace cours, l’utilisateur clique sur le symbole et choisit la catégorie du
cours demandé. Il apparaitra un menu des cours (Réaliser avec l’outil JQuery) de la catégorie
choisit, et en cliquant sur le nom du cours, apparaitra juste en dessous la liste des td le
concernant.
Figure: Espace cours (étudiant).
Espace profil :
Par la suite, en cliquant sur , nous accédons au profil de l’étudiant contenant plusieurs
informations personnelles (adresse e-mail, classe, numéro de téléphone, nombre de visite et
date de la dernière visite).
Figure: Espace profil (étudiant)
Sur le profil, l’étudiant à aussi la possibilité d’ajouter un numéro de téléphone en cliquant sur
le lien devant le numéro de téléphone. Ill a aussi une possibilité de changer le mot de passe.
Interface de messagerie :
L’espace de l’étudiant comporte aussi un espace de messagerie. L’étudiant peut accéder à la
messagerie en cliquant sur et envoyer et recevoir des messages.
Figure: Espace messagerie 1
Pour créer un nouveau message, il faut cliquer sur le lien « nouveau message », remplir les
champs destinataire avec l’adresse e-mail et le sujet, puis le texte du message. L’étudiant à
aussi la possibilité d’envoyer avec le message des pièces jointes, jusqu’à 4 pièces jointes par
message.
Sur ce même espace l’étudiant recevra des messages. S’il y a de nouveaux messages, ils vont
apparaitre en rose avec l’adresse de l’expéditeur, sa photo, sinon les messages lus sont en
blanc. Si on veut supprimer le message, il faut cliquer sur la croix rouge à gauche.
Figure: Espace messagerie 2
Interface lire message :
Pour lire le message il suffit de cliquer sur le sujet qui est sous forme de lien, nous serons sur
l’interface de lecture du message choisit. Pour répondre au message il suffit de cliquer sur le lien
« Répondre » et nous aurons un menu déroulant pour la création d’un nouveau message.
Figure :Interface lecture de message
Espace évaluation :
Chaque étudiant dispose, sur son espace, d’un espace pour passer des tests d’évaluation en
ligne. En cliquant sur , l’étudiant accède à l’espace étudiant, il choisit le test à passer et
valide.
Figure: Espace test d’évaluation
En cliquant sur le bouton commencer, l’étudiant accède à l’interface de passation du test
d’évaluation choisit. Pour répondre aux questions du test. Ce sont des questions à choix
multiples (4 choix exactement). L’’étudiant doit répondre à la question sinon il ne pourra pas
accéder à la question d’après.
Figure: Interface passation test d’évaluation
Interface espaces étudiant :
L’espace professeur, pareil que celui de l’étudiant, le professeur peut consulter son profil avec la
possibilité de changer le mot de passe ou ajouter un nouveau numéro de téléphone, accéder à sa
boite de messagerie interne pour recevoir et envoyer des messages. Mais ce qui diffère entre les
deux, c’est l’espace cours et test d’évaluation. Voici ci-dessous un aperçu de l’espace cours qui
permet à l’enseignant de créer et consulter ses cours et de créer les td lié aux cours:
Figure: Espace cours (professeur)
Pour créer un cours, le prof doit passer sur son espace cours, cliquer sur le bouton créer cours, il
choisit la catégorie, les dates de débuts et fin du cours, choisir la classe qui a accès au cours et
enfin télécharge le cours puis confirme.
Figure: Espace créer cours
