Conception et réalisation d?un système d'inscription en ligne dans les institutions universitaires: Cas de l'UCBC/Beni.

CHAPITRE TROISIEME : PRESENTATION DE L'APPLICATION

Ce présent chapitre a pour objectif majeur de présenter notre système final. C'est ainsi, la phase de réalisation de ce notre site web dynamique pour l'inscription ; une phase, qui a utilisé des technologies spécifiques. Ce chapitre est composé donc, de deux principales parties : la première partie présente les langages et outils logiciels utilisés lors du développement de ce présent système ; alors que la seconde partie, concerne les principales interfaces graphiques du site web.

III.1. Présentation des outils et logiciels utilisés

Lors du développement de ce présent système, nous avons utilisés les langages et outils logiciels suivants:

· HTML5 et CSS3

· Javascript

· PHP version 5

· Wampserver 2.1

· Mysql version 5.5.8

· Apache version 2.2.17

· Notpad ++

· SybasePowerDesigner version 16.5.0.3982

· Mozilla Firefox version 6.0.2 a. HTML5 et CSS3

HTML et CSS, deux langages indispensables et complémentaires pour la création des sites web, et créés de manière à être simples à utiliser. HTML, nous a aidé pour la description de nos pages avec l'utilisation des balises (tags), ainsi donc, le code HTML décrit l'information tandis que les instructions CSS définissent la manière dont cette information sera rendue. CSS nous a aidé donc, à compléter HTML en gérant l'apparence des pages web du système (agencement, positionnement, décoration, couleur, taille du texte,...).

Notre choix sur les versions 5 et 3 respectivement de HTML et CSS est pousser par le fait que ce sont les dernières versions de ces langages et comprennent toutes les balises et instructions des versions précédentes, ajoutées des nouvelles.

62

b. JavaScript

JavaScript est un langage de programmation de scripts, principalement utilisé dans les pages web interactives. Les fonctionnalités du JavaScript étant nombreuses, ce langage qui permet l'interactivité dans les formulaires d'une page nous a aidé pour:

- La modification de l'aspect de mes pages lors de la limitation du CSS,

- Les réponses aux actions du candidat qui veut s'inscrire,

- Les animations dans les pages,

- La récupération des informations à partir du serveur sans actualiser la page,...

c. WampServer

WampServer est une plateforme de développement Web de type WAMP (Windows Apache MySQL PHP), permettant de faire fonctionner localement (sans se connecter à un serveur externe) des scripts PHP. WampServer est juste un environnement comprenant deux serveurs (Apache et MySQL), un interpréteur de script (PHP), ainsi que PhpMyAdmin pour l'administration Web des bases MySQL.

Il dispose d'une interface d'administration permettant de gérer et d'administrer ses serveurs au travers d'un tray icon (icône près de l'horloge de Windows).

La grande nouveauté de WampServer 2 réside dans la possibilité d'y installer et d'utiliser n'importe quelle version de PHP, Apache ou MySQL en un clic.

d. Mysgl

MySQL est un système de gestion de base de données (SGBD). 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.

MySQL est un serveur de bases de données relationnelles SQL développé dans un souci de performances élevées en lecture, ce qui signifie qu'il est davantage orienté vers le service de données déjà en place que vers celui de mises à jour fréquentes et fortement sécurisées. Il est multi-threads et multi-utilisateurs.

63

Le couple PHP/MySQL est très utilisé par les sites Web et proposé par la majorité des hébergeurs Web. Plus de la moitié des sites Web fonctionnent sous Apache, qui est le plus souvent utilisé conjointement avec PHP et MySQL.

e. Apache

Apache est le serveur le plus répandu sur Internet. Il fonctionne principalement sur les systèmes d'exploitation UNIX (Linux, Mac OS X, Solaris, BSD et UNIX) et Windows. La version Windows n'est considérée comme stable que depuis la version 1.2 d'Apache. Apache est utilisé par de nombreux produits, dont WebSphere d'IBM, ainsi que par Oracle Corporation. Il est également supporté d'une façon ou d'une autre par les outils de développement Borland Delphi et Kylix, ainsi que par des CMS comme Drupal.

Apache est conçu pour prendre en charge de nombreux modules, lui donnant des fonctionnalités supplémentaires : interprétation du langage Perl, PHP, Python et Ruby, serveur proxy, Common Gateway Interface, Server Side Includes, réécriture d'URL, négociation de contenu, protocoles de communication additionnels, etc. Néanmoins, il est à noter que l'existence de nombreux modules Apache complexifie la configuration du serveur web. En effet, les bonnes pratiques recommandent de ne charger que les modules utiles : de nombreuses failles de sécurité, affectant uniquement les modules d'Apache sont régulièrement découverts.

Parmi les outils, aidant à la maintenance d'Apache, on trouve les fichiers de log qui peuvent s'analyser à l'aide de nombreux scripts et des logiciels libres tels qu'AWStats, Webalizer ou W3Perl. Plusieurs interfaces graphiques facilitent la configuration du serveur.

f. Notepad++

Notepad++ est un éditeur de texte générique codé en C++, qui intègre la coloration syntaxique de code source pour les langages et fichiers C, C++, Java, C#, XML, HTML, PHP, JavaScript, makefile, art ASCII, doxygen, .bat, MS fichier ini, ASP, Visual Basic/VBScript, SQL, Objective-C, CSS, Pascal, Perl, Python, R, MATLAB, Lua, TCL, Assembleur, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, PostScript et VHDL ainsi que pour tout autre langage informatique, car ce logiciel propose la possibilité de créer ses propres colorations syntaxiques pour un langage quelconque.

64

Ce logiciel, basé sur la composante Scintilla, a pour but de fournir un éditeur léger (aussi bien au niveau de la taille du code compilé que des ressources occupées durant l'exécution) et efficace. Il est également une alternative au bloc-notes de Windows (d'où le nom). Le projet est sous licence GPL. Il ne bloque pas le fichier en cours d'édition et détecte toute modification apportée à celui-ci par un autre programme (il propose de le recharger).Il a été codé par Don Ho, un informaticien basé à Paris diplômé de l'Université Paris VII - Diderot en 2000.

Ainsi donc, c'est bien ce logiciel qui nous a aidé dans l'édition de nos codes et balises (HTML, CSS, JavaScript, PHP et requêtes SQL), lors du développement de ce présent système.

g. SybasePowerDesigner

PowerAMC est un logiciel de conception créé par la société SDP, qui permet de modéliser les traitements informatiques et leurs bases de données associées. Créé par SDP sous le nom AMC*Designor, racheté par Powersoft, ce logiciel est produit par Sybase depuis le rachat par cet éditeur en 1995. Hors de France, la version internationale est commercialisée par Sybase sous la marque PowerDesigner.

Un logiciel permettant de réaliser tous les types de modèles informatiques ; reste un des seuls qui permet de travailler avec la méthode Merise. Ainsi, ce logiciel, nous a aidé dans la réalisation de nos modèles Merise. Il est à noter donc, que ce logiciel, permet d'améliorer la modélisation, les processus, le coût et la production d'applications.

h. Mozila FireFox

Mozilla Firefox est un navigateur Web libre et gratuit, développé et distribué par la Mozilla Foundation avec l'aide de milliers de bénévoles grâce aux méthodes de développement du logiciel libre/open source et à la liberté du code source. Firefox est à l'origine un programme dérivé du logiciel Mozilla (actuellement connu sous le nom de SeaMonkey), mais reprenant uniquement les fonctions de navigation de celui-ci. Ce logiciel multiplate-forme est compatible avec diverses versions de Windows, Mac OS X, GNU/Linux et Android. Il a été porté sur d'autres systèmes d'exploitation, ce qui est

65

rendu possible par la mise à disposition de son code source sous trois licences libres différentes en même temps (MPL, GPL et LGPL).

Ce logiciel a connu un succès croissant depuis sa sortie, dépassant 1,2 milliard de téléchargements en janvier 2010. Même si ce nombre ne reflète pas le nombre réel d'utilisateurs du logiciel, Firefox est rapidement devenu le principal concurrent d'Internet Explorer, le navigateur Web de Microsoft. Ce navigateur peut être personnalisé à partir d'une base épurée. En effet, plutôt que d'être fourni avec un nombre considérable d'options dans une distribution standard, Firefox accepte des centaines d'extensions et de thèmes graphiques, ce qui permet facilement à chaque utilisateur de le modifier à son goût.

La Mozilla Foundation, par l'intermédiaire de son moteur de rendu Gecko, promeut et suit dans ses logiciels les normes et standards ouverts, en priorité ceux du W3C. Ainsi, Mozilla Firefox supporte les standards du Web les plus basiques comme HTML, CSS, XHTML, XML, JavaScript, mais aussi DOM, MathML, XSL ou encore XPath. Ainsi, c'est ce logiciel qui nous a aidé lors du développement de notre système pour les multiples tests que nous avions à effectuer.

i. PHP5

Le PHP est un langage interprété qui a été conçu depuis son origine pour le Web. Il est aujourd'hui devenu le leader incontesté dans ce domaine pour différentes raisons : rapidité(le plus rapide du marché), stabilité (ne plante pas), scalabilité (quelques que soit le nombre d'internautes, il continue à exécuter les scripts), sécurité (PHP est un système très sûre).³⁷

Un langage interprété côté serveur, PHP ; nous a trop aidé dans le développement de notre système. Par exemple ce langage, nous a permis d'exécuter les requêtes Sql pour la sélection, l'insertion, la modification et la suppression dans la base de données, l'inclusion des portions des pages (en-tête, pied de page,...) dans un document HTML avec la fonction include0,...

C'est ce langage qui nous a aussi permis d'assurer la connexion à la base de données pour ainsi communiquer avec cette dernière.

37 Francois X. B. (2008). PHP Le Guide Complet. MicroApplication. 3^e Ed. Paris. Pp.20

66

En effet, PHP, propose plusieurs moyens de se connecter à une base de données MySQL.

· L'extension mysql_ : ce sont des fonctions qui permettent d'accéder à une base de données MySQL et donc de communiquer avec MySQL. Leur nom commence toujours par mysql_. Toutefois, ces fonctions sont vieilles et on recommande de ne plus les utiliser aujourd'hui.

· L'extension mysqli_ : ce sont des fonctions améliorées d'accès à MySQL. Elles proposent plus de fonctionnalités et sont plus à jour.

· L'extension PDO : c'est un outil complet qui permet d'accéder à n'importe quel type de base de données. On peut donc l'utiliser pour se connecter aussi bien à MySQL que PostgreSQL ou Oracle.

Pour ce travail, Nous avons utilisé PDO, car c'est cette méthode d'accès aux bases de données qui va devenir la plus utilisée dans les prochaines versions de PHP. D'autre part, le gros avantage de PDO est que vous pouvez l'utiliser de la même manière pour vous connecter à n'importe quel autre type de base de données.³⁸

Pour effectuer la connexion avec PDO, il faut d'abord l'activer, normalement il est activé par défaut. Pour le vérifier, on fait un clic gauche sur l'icône de WAMP dans la barre des tâches, puis on va dans le menu PHP / Extensions PHP et on vérifie que php_pdo_mysql est bien coché.

Figure N° 19 : Vérification de l'activation de l'extension

38 Mathieu N. (2011). Concevez votre site web avec PHP et MySQL. Creativecommons. Le site du zéro. Pp. 188

67

Dans le cas où, on n'est pas en train d'utiliser WampServer, la configuration se fait en ouvrant le fichier de configuration de PHP (qui s'appelle généralement php.ini et en recherchant la ligne qui contient php_pdo_mysgl. On enlève le point-virgule devant s'il y en a un, pour activer l'extension.

Figure 20 : Autre manière de Configuration de l'extension PDO

Après avoir enlevé le point-virgule, on enregistre le fichier puis on redémarre PHP. Il suffit pour cela de relancer votre logiciel favori (WAMP, MAMP, XAMPP,...).

Voici donc comment on a fait pour se connecter à MySQL via PDO sur notre base

« RegistrationOnline » :

< ? php

$bdd =new PDO(`mysql:host=localhost;dbname=RegistrationOnline ',`root', `'); ?>

Comme nous le voyons, nous avons besoin de quatre renseignements³⁹ :

- Le nom de l'hôte : c'est l'adresse de l'ordinateur où MySQL est installé (comme une adresse IP). Comme MySQL est installé sur le même ordinateur que PHP, nous avons utilisé la valeur `localhost'. Néanmoins, il est possible que l'hébergeur web indique une autre valeur à renseigner (qui ressemblerait à ceci : sql.hebergeur.com). Dans ce cas, il faudra modifier cette valeur lorsqu'on enverra le site sur le Web ;

- La base : c'est le nom de la base de données à laquelle vous voulez vous connecter. Dans notre cas, la base s'appelle RegistrationOnline créée dans phpMyAdmin;

³⁹ Mathieu N. (2011). Concevez votre site web avec PHP et MySQL. Creativecommons. Le site du zéro. Pp. 190

68

- Le login : il permet de s'identifier. Pour le connaître, on doit se renseigner auprès de l'hébergeur. Le plus souvent (chez un hébergeur gratuit), c'est le même login utilisé pour le FTP. Par défaut, le login est le root ;

- Le mot de passe : Par défaut, il n'ya pas de mot de passe.

Lorsque le site sera en ligne, on aura sûrement un nom d'hôte différent ainsi qu'un login et un mot de passe pour la sécurité. Il faut donc, penser à changer cette ligne pour l'adapter à l'hébergeur en modifiant les informations.

III.2. Présentation des Interfaces graphiques

Ce présent système ainsi réalisé est organisé à cinq principaux Menus (Accueil, A propos, Admission, Students et Contact). Ces menus contiennent aussi des sous menus pour la bonne navigation dans le site du côté client comme du coté administrateur. La partie qui concerne notre système, se trouve dans le Menu « Admission » et du côté Administrateur. Voici quelques captures d'écran constituant notre système.

III.2.1. Du côté Client

a. Menu Accueil

Ce menu présente, une vue d'ensemble de notre système

69

Figure 21 : Interface de la page d'accueil de notre système.

b. Menu Admission

Ce menu constituant la grande partie de notre travail a à son sein plusieurs menus de navigation ; nous citons : Informations Inscription, Etapes Inscriptions, Identités étudiants, Adresses Etudiants, Choix du département, Téléchargement des documents et Mode payement. Il sied de signaler que pour passer d'une page à une autre, un bouton `suivant' permettant une bonne suite du processus d'inscription est incorporé dans chacune de ces pages citées ci-haut. Voici l'exemple de l'interface graphique `Adresses Etudiant' tirée de notre système :

70

Figure 22: Interface de la page qui permet d'entrer les adresses du candidat

71

c. Menu Contact

Ce menu contient les contacts de certains membres de l'UCBC et un formulaire qui permet à l'utilisateur d'envoyer facilement son message à l'administrateur pour plus d'informations à rapports avec le système ou même l'UCBC en général.

Figure 22: Interface de la page qui permet de faire le contact avec l'UCBC III.2.2. Du Côté Administrateur

Le côté administrateur contient à son tour plusieurs autres pages web pour permettre la mise à jour du système et la production de rapports. Pour avoir accès au côté administrateur, avec un compte administrateur ; il suffit de se connecter en entrant ses identifiants dans le petit formulaire qui se trouve à l'extrémité supérieure droite de chaque page de notre système.

Figure 24 : Rapport lancé par l'administrateur, présentant la liste des étudiants inscrits

dans le système

72

Ainsi, ce côté contient ; des pages comme : administrateur, ajout d'un autre administrateur, ajout d'une faculté, Production des rapports et envoie des messages aux abonnés. Voici, l'exemple d'une page constituant l'espace administrateur :

Figure N° 23 : Interface de la page d'administration du système
Voici, l'exemple d'interface d'un rapport produit par l'administrateur.

73