1
NERAUDEAU Laëtitia
PAQUET Charlène
Projet encadré par : Françoise Greffier
Rapport de Projet
Tutoriel pour le module « bases de la
programmation »
du semestre Starter Sciences et Techniques
Troisième année de Licence Informatique
Année universitaire
2011-2012
2
Sommaire
Remerciements………………………………………………………………………………………………..3
Introduction………………………………………...............................................................4
I) Contexte – Cahier des charges.........................................................................5
1) L’enjeu du projet – Objectif…………………………………………………………………5
2) Le produit déjà établi………………………………………………………………………….5
3) Le cahier des charges………………………………………………………………………….6
II) Développement…………………………………………………………………………………………….8
1) Les outils de développement………………………………………………………………8
2) L’architecture MVC………………………………………………………………………..…...8
3) La réalisation et la mise en place des idées…………………………..…….…..….9
a) Augmenter la taille des énoncés…………………………………………………………………………….9
b) Division entière…………………………………………………………………………………………………...10
c) Page (HTML) pour présenter les fichiers du code source………………………………………10
d) Bilan de l’étudiant……………………………………………………………………………………………….10
III) Bilan……..........................................................................................................12
1) Les difficultés techniques…………………………………………………………………..12
2) L’avancement du projet…………………………………………………………………….12
3) Les apports………………………………………………………………………………………..13
4) Les extensions possibles…………………………………………………………………….13
Conclusion………………………………………………………………………………………………………15
Netographie…………………………………………………………………………………………………….16
Annexes…………………………………………………………………………………………………………..17
1. Ajouter un exercice………………………………………………………………………………………………………….17
2. La calculette……………………………………………………………………………………………………………………..18
3. Bilan, code JAVA/PDL et bloc mémoire…………………………………………………………………………….19
4. Erreur lors d’une étape…………………………………………………………………………………………………….20
5. Fichier HTML / Arborescence des dossiers……………………………………………………………………….21
6. Code de la vue de la page Bilan………………………………………………………………………………………..22
Résumé………………….……………………………………………………………………………………….23
3
Remerciements
Nous tenions à remercier madame Françoise GREFFIER de nous avoir
guidées et encouragées tout au long de ce projet. Elle a su nous redonner
confiance en nos compétences et nous aider à concrétiser nos idées.
Nous remercions également monsieur Jean-Philippe JACQUET, auteur du
site Algorithmie et Programmation, que nous avons contacté afin d’avoir de
plus amples précisions sur son code et qui nous a répondu très
chaleureusement et de façon très appliquée.
Enfin, monsieur Jean-Michel CARICAND, ingénieur au LIFC, a été très
patient et nous a accordé de nombreuses heures pendant la première phase de
notre projet. Nous le remercions vivement pour sa gentillesse et sa générosité.
4
Introduction
La troisième année de la Licence Informatique dispensée au Laboratoire
d’Informatique de Franche-Comté (LIFC) inclut un module qui correspond à 6 crédits ECTS
sur les 60 de l’ensemble de la formation : le module Projet Tutoré.
Nous devions donc, en tant que binôme, faire une liste des sujets que nous trouvions
les plus intéressants parmi ceux proposés afin que la distribution de ceux-ci puisse se faire
en respectant les choix de chacun.
L’intitulé du sujet qui nous a été attribué est : Tutoriel pour le module « base de la
programmation » du semestre Starter Sciences et Techniques.
Ce sujet demandait des connaissances en Langage Web très prononcées afin de
reprendre un site web déjà bien établi et presque abouti. L’enjeu de ce projet était
important car il était destiné à permettre aux élèves de première année de s’améliorer
quant aux exercices d’algorithmie et de programmation du semestre Starter. C’est cet enjeu,
ainsi que la vivacité et la créativité d’esprit demandées qui nous ont plu et nous ont guidé
dans notre choix pour ce projet.
Notre mission a été d’apporter des améliorations et des extensions au tutoriel
développé l’an passé par l’étudiant Jean-Philippe JACQUET.
Le déroulement du projet s’est découpé en 3 phases :
Nous avons d’abord dû nous imprégner du sujet et évaluer l’investissement qu’il
représentait. Pour ce faire, nous nous sommes penchées sur le code mis à notre disposition
afin de le comprendre et d’assimiler l’organisation qu’avait mise en place monsieur
JACQUET. Après s’être rendues compte que, bien qu’il soit très bien indenté et élaboré, le
code n’était que très peu commenté, nous avons décidé de créer une aide pour les possibles
prochains développeurs du site. Cette phase nous a pris le plus clair de notre temps.
Ensuite, nous avons pu nous consacrer à la mise en place de nos idées et les
développer en suivant la logique de notre précédent développeur. Notre principale idée
était de créer un espace personnel sous la forme d’une page qui pourrait indiquer à l’élève le
nombre de ses erreurs, leurs types et lui indiquer où seraient ses défaillances. Nous avons
consacré à cette phase environ 4 semaines.
Le reste de notre temps a été consacré à la réalisation des présentations (diaporama
pour l’oral et rapport écrit).
Dans la première partie de ce rapport, nous donnerons des détails sur le sujet ainsi
que sur les attentes de notre encadrant et présenteront le travail déjà réalisé.
5
I) Contexte et cahier des charges
1) L’enjeu du projet et ses objectifs
Le semestre Starter ST (Sciences et Techniques) a été mis en place en 2002 afin de
permettre aux étudiants qui intègrent l’université d’acquérir une plus grande culture
scientifique et de pouvoir choisir de façon plus objective et plus raisonnée leur orientation.
Ce semestre propose 8 unités d’enseignement : l’algèbre, l’analyse, la physique, la chimie,
l’EEA (électronique), la mécanique, le C2I et l’informatique. Chaque étudiant doit suivre
chacun de ces cours pour valider son semestre.
Madame Françoise GREFFIER, tutrice de notre projet, est responsable du semestre
Starter ST et enseigne l’informatique au Starter ST en apprenant aux étudiants à créer des
petits programmes en Java et PDL. Elle a donc été confrontée aux problèmes que peuvent
rencontrer certains étudiants pendant son cours et a voulu trouver un moyen pour les aider
à progresser.
La plupart des étudiants qui suivent les cours du semestre Starter ST viennent
d’obtenir leur BAC qui, en général, est scientifique. Cependant, certains étudiants ont suivi
d’autres cursus, viennent d’un pays non-francophone ou arrivent au mois d’octobre ou
novembre, suite à une réorientation, et présentent alors de plus grandes difficultés que
d’autres étudiants.
Le projet prend ici toute son importance car il propose à ces étudiants des exercices
simples qui leur permettront, dans l’idéal, d’acquérir le même niveau que celui de leurs
camarades. C’est cela que nous proposait madame Françoise GREFFIER et qui nous a plu :
aider ces étudiants en leur proposant un site dynamique, facile d’accès et simple à utiliser.
Un site web, déjà encadré l’an passé par madame Françoise GREFFIER et élaboré
dans le cadre d’un module Projet de Licence professionnelle par Jean-Philippe JACQUET nous
a été présenté comme un chef d’œuvre et nous avons eu tout le loisir de l’observer ainsi que
son code source.
2) Le produit déjà établi
Notre prédécesseur a créé une application animée et très attractive en utilisant des
outils tels que le langage php, Javascript. Il a aussi suivi la méthode dite du MVC (Modèle-
Vue-Contrôleur) que nous n’avions jamais étudié jusqu’à présent.
L’exerciseur comporte une partie utilisateur et une partie administrateur (accessible
uniquement aux utilisateurs qui sont administrateurs en indiquant dans l’url
« /administrator »).
6
La partie administrateur est réservée aux professeurs et leur permet d’ajouter ou
modifier un exercice, un thème ou un sous-thème d’exercice. (voir annexe 1).
La partie utilisateur permet d’accéder aux exercices créés par les administrateurs.
Ceux-ci sont classés par thèmes, sous-thèmes et dans l’ordre que l’administrateur a choisi de
les faire apparaître.
Une fois qu’il a choisi son exercice, l’étudiant-utilisateur se trouve face à 4 étapes
pour résoudre le problème qui lui est posé : la première lui permet d’établir le nombre de
données dont il aura besoin ainsi que de donner un nom aux variables ou constantes ; la
deuxième lui demande d’initialiser ces données ; la troisième demande le calcul qui
permettra de résoudre le problème posé par l’intermédiaire d’une calculette (voir annexe
2) ; l’étape 4 permet de stocker le résultat dans une variable et de l’afficher.
Le déroulement de ces étapes est accompagné de l’affichage des codes Java et PDL
correspondant et d’un bloc mémoire permettant à l’étudiant d’assimiler de manière plus
spontanée le fonctionnement du programme (voir annexe 3).
À chaque étape, l’étudiant a droit à trois essais, représentés par des étoiles. Lorsqu’il
fait une erreur, une image lui indique où elle se situe, il est invité à tenter à nouveau de
répondre à la question et une étoile disparaît (voir annexe 4).
Si l’étudiant n’a pas réussi à répondre à la question au bout de 3 essais, la réponse lui est
donnée et il est invité à passer à l’étape suivante.
À la fin de chaque exercice, le nombre d’erreurs commises est affiché ainsi qu’un lien
pour choisir un nouvel exercice (voir annexe 3).
3) Le cahier des charges
Environ une semaine après que nous ayons pris connaissance de la distribution des
sujets de projet, nous avons organisé un rendez-vous avec Françoise GREFFIER afin de
connaître les tenants et aboutissants de notre mission.
Après nous avoir fait découvrir l’application déjà créée par Jean-Philippe JACQUET,
madame GREFFIER nous a confié les besoins et les envies qu’elle avait pour ce projet afin de
l’améliorer.
Nous devions, dans un premier temps, résoudre deux problèmes mineurs mais qui
avaient leur importance :
- augmenter la taille maximale des énoncés dans la partie administrateur. En
effet, madame GREFFIER s’était déjà trouvée face à un problème de restriction de mots pour
établir un énoncé.
- gérer d’une meilleure façon l’affichage d’un type de calcul dans la partie
7
code Java. Le problème ici se posait lors d’un exercice où les données étaient de type réel,
avec un résultat de type entier et pour une division. Dans un cas comme celui-ci, pour éviter
une erreur, on doit réaliser un transtypage (int) sur le calcul. Cette possibilité n’était pas
développée dans la version précédente.
La gestion de ces problèmes était destinée à nous aider à prendre le code en main et
devait se dérouler en une ou deux semaines.
N’ayant pas l’habitude d’utiliser l’architecture MVC et nous trouvant face à un code
très peu commenté, nous avons fait face un problème de taille : nous ne comprenions pas le
fonctionnement du code.
Après environ 5 semaines, nous sommes enfin venues à bout des demandes de
madame GREFFIER mais nous avions pris beaucoup de retard.
Madame Françoise GREFFIER nous a ensuite demandé de trouver des idées qui
pourraient permettre d’améliorer l’application, aussi bien pour les étudiants utilisateurs du
site internet que pour les futurs étudiants de Licence qui continueraient ce projet.
Nous avons donc eu l’idée de permettre à ces futurs développeurs de ne pas tomber
dans le même problème que nous et de créer un fichier html (incorporé dans la partie
administrateur du site) qui montre une arborescence du site et qui explique dans une
nouvelle page, à chaque clic sur un nom de fichier, le rôle de ce dernier.
Le choix de faire ces explications dans un fichier html a été proposé par madame
GREFFIER. C’est un choix judicieux, car il permet un affichage et une utilisation dynamique,
rapide et la modification de ce fichier sera très simple.
Dans la même optique d’aide aux développeurs, nous avons tenté de commenter un
minimum le code dans le style d’une JavaDoc.
Pour modifier la partie utilisateur, nous nous sommes inspirées du bilan affiché en fin
d’exercice. Notre idée était de créer une page personnelle pour chaque utilisateur. Cette
page permet à l’utilisateur de consulter le nombre total d’exercices faits, le nombre total
d’erreurs et de classer ces erreurs par catégories. Une conclusion en bas de cette page
indique à l’utilisateur quelle partie, quelle étape serait à réviser de préférence.
Une phrase d’encouragements pousserait l’étudiant à aller jusqu’au bout de ses
capacités.
8
II) Développement
1) Les outils de développement
Au cours de nos années universitaires, nous avons été amenées à élaborer un site
internet de "microblogging " (twitter-like) pour notre projet du module Langage Web. Nous
avons donc voulu utiliser les mêmes outils que ceux qui nous ont servi pendant ce projet.
Nous avons travaillé sous Windows et avons utilisé la plateforme de développement
web WampServer. WampServer est un environnement de développement très pratique car
il permet de travailler en mode local de manière simple. La navigation entre les pages se fait
instantanément et l’accès à la base de données est très facile grâce à PHPMyAdmin.
Figure 1 : Logo de WampServer
Nous avons utilisé un éditeur simple tel que ScitE pour créer ou modifier le code.
2) L’architecture MVC
Comme dit précédemment, tout le code créé par Jean-Philippe JACQUET utilisait une
architecture de type MVC (Modèle-Vue-Contrôleur). Cette structure, bien que nouvelle et
donc difficile à assimiler pour nous, est une méthode qui permet une clarté et une propreté
du code presque parfaite.
En effet, la méthode dite du MVC permet de séparer le code en trois parties bien
distinctes : - le modèle, où on va chercher les données dans la base.
- le contrôleur, qui permet une logique de contrôle, et une synchronisation des
données par rapport à la vue.
- la vue, qui correspond à la présentation, l’interface utilisateur.
Ainsi, chaque page, chaque interface est gérée dans 3 trois dossiers différents. Dans
notre cas, nos dossiers s’appellent : models, views et controllers.
9
Figure 2 : Architecture MVC
Nous nous sommes appliquées à nous renseigner sur cette méthode de
programmation et à respecter cette architecture afin de rester dans l’optique d’une bonne
compréhension du code.
Pour créer la page Bilan, nous avons donc dû créer 3 fichiers : un fichier
personal_area.php que nous avons placé dans le dossier models, un personal_area.php dans
controllers et nous avons créé un dossier personal_area dans le dossier views dans lequel
nous avons créé un fichier default.php afin de respecter l’arborescence du code déjà
présent.
3) La réalisation des améliorations et extensions
Dans un premier temps, nous nous sommes consacrées à la réalisation des
modifications que nous a demandées madame Françoise GREFFIER.
a) Augmenter la taille des énoncés
Nous avons commencé par chercher comment modifier la taille d’un énoncé. Celle-ci
était gérée par la base de données. Une table nommée exercice avait été créée et contenait
un attribut enonce_exercice. Le type de cet attribut étant, par défaut, TINYTEXT, nous
l’avons changé en LONGTEXT afin de permettre à madame GREFFIER d’obtenir une liberté
d’écriture dans ses énoncés.
Figure 3 : Agrandissement de la zone de saisie
10
b) Division entière
Une fois ce problème réglé, nous nous sommes penchées sur le problème de la
calculatrice. Nous devions mettre en place une condition qui nous permettrait, dans le cas
d’une division de type entier, d’effectuer un transtypage du calcul dans le code Java.
Pour cela, il fallait que nous testions la valeur du type du résultat attendue ainsi que
le calcul. Jean-Philippe JACQUET était passé par des variables $_SESSION qu’il avait
initialisées aux même valeurs que dans la base de données. Nous avons donc pu modifier le
code en utilisant ces variables.
c) Page (HTML) pour présenter les fichiers du code source
Lorsque ces modifications ont été mises en place, nous avons pu commencer la partie
création du projet : celle qui nous intéressait le plus.
Notre travail s’est divisé en deux parties : nous avons dû comprendre l’utilisation et
l’intérêt de tous les fichiers du code source pour l’incorporer dans le fichier html. Ensuite,
nous avons élaboré une nouvelle page contenant toutes les informations relatives aux
performances de chacun, et accessible à chaque instant par l’utilisateur.
L’arborescence du fichier html respecte celle des dossiers contenant le code source
de notre application. Cela permet une meilleure indexation et, ainsi, une recherche plus
rapide d’informations. Chaque fichier important est représenté par un lien vers une page qui
expliquera l’utilité et le fonctionnement de ce fichier. La fonction des fichiers d’importance
moyenne sera expliquée en une phrase et sera présentée sous forme d’info-bulle. (voir
annexe 5).
d) Bilan de l’étudiant
La nouvelle page, appelée « Mon Bilan », devait présenter les mêmes couleurs et
thèmes que le reste du site. L’utilisateur devait pouvoir y accéder facilement et elle devait
être simple à comprendre et compacte.
L’idée ayant tout de suite plu à madame Françoise GREFFIER, une maquette a été
élaborée avec elle dès les premiers jours de notre proposition afin de choisir l’organisation
Figure 4 : code source des modifications
11
et l’affichage des données.
Il est apparu qu’un tableau contenant le nombre d’erreurs aux différentes étapes
ainsi que les pourcentages correspondant étant la meilleure solution. Cela permettait à
l’utilisateur de mieux se rendre compte de ses performances ou lacunes et d’ainsi mieux
s’organiser pour s’améliorer.
L’utilisation des couleurs, dans une application à visée pédagogique, est appréciée
car elle permet de captiver l’attention et d’assimiler les informations plus rapidement. Nous
avons donc choisi de colorer les messages d’encouragements en fonction d’une performance
de l’étudiant. La phrase visant à pointer le sujet le moins acquis est en rouge pour montrer
une importance évidente.
La phrase d’encouragements change en fonction de nos performances en tant
qu’étudiant-utilisateur. Un ratio est calculé en fonction du nombre total d’erreurs et du
nombre total d’exercices. Si un étudiant, réussit à ne faire aucune faute parmi ses exercices,
son travail est déclaré comme parfait ; si un étudiant fait moins d’une faute tous les 2
exercices, son travail est qualifié d’excellent ; etc… (voir annexe 6).
Dans un souci d’esthétique et d’accessibilité, on a considéré que le lien qui
permettrait l’accès à cette page serait le mieux placé sur le pseudo de l’utilisateur. Cela
parait être le plus intuitif car utilisé dans la plupart des sites de microblogging. Dans le cas où
cela ne serait pas clair, une info-bulle s’affiche lorsqu’on passe la souris sur le lien et
l’utilisateur comprendra clairement ce qu’est la cible de ce lien.
Figure 5 : Page Bilan de l'utilisateur Françoise GREFFIER
Figure 6 : Info-bulle précisant sur quoi pointe le lien
12
II) Bilan
1) Les difficultés techniques
Dès les premiers jours où nous avons reçu le code de Jean-Philippe JACQUET, nous
nous sommes confrontées à des problèmes que nous n’avions jamais rencontrés jusqu’à
présent, à cause de notre mince expérience en Langage Web.
Les premiers jours furent difficiles car nous avions perdu l’habitude du langage php et
de l’utilisation des outils tels que WampServer et PHPMyAdmin.
Notre première difficulté a été de faire fonctionner le site web sur nos machines, en
mode local. Ce fut l’objet notre premier entretien avec monsieur Jean-Michel CARICAND qui
nous a accueillies avec sourire.
Le problème auquel nous étions confrontées était l’authentification. En effet, Jean-
Philippe JACQUET avait eu pour mission l’élaboration d’un site internet sécurisé et cassifié.
Notre authentification devait donc se faire par l’intermédiaire d’un CAS.
De plus, l’appel de la base de données se faisait par l’intermédiaire d’un mot de
passe.
Grâce à monsieur Jean-Michel CARICAND, nous avons compris notre erreur et l’avons
corrigée. Dans le fichier models/login.php, nous avons changé la connexion en root en
enlevant le mot de passe : $connect = mysql_connect("localhost", "root", "");
Pour l’authentification cassifiée, nous avons commenté les lignes de code
correspondant à la connexion par le CAS dans le fichier index.php et avons déclaré de
manière brute : $login = ‘fgreffie’;
De cette manière, l’authentification n’est plus nécessaire et nous pouvions tester
notre code de manière plus simple. Bien entendu, cette partie du code sera à changer lors
de la mise en ligne afin que l’application puisse fonctionner correctement.
2) L’avancement du projet
À cause d’une mauvaise organisation et d’évidentes lacunes au niveau de nos
connaissances en Javascript et au niveau de la méthode de programmation de type MVC,
nous avons pris beaucoup de retard par rapport à nos estimations et n’avons pas pu donner
naissance à toutes nos idées.
13
Cependant, nous avons quand même pu avancer et élaborer une nouvelle mission :
celle de permettre aux futurs développeurs de cette application de ne pas perdre autant de
temps que nous et d’ainsi pouvoir satisfaire les besoins des étudiants de façon plus précise.
Quant à la mission qui nous avait été confiée d’apporter de nouvelles idées au site,
nous en avions et avons choisi de donner naissance à celle qui nous est apparue comme la
plus intéressante. Le résultat est à la hauteur de nos espérances et nous sommes persuadées
que cela apportera de la motivation aux utilisateurs de l’exerciseur.
3) Les apports
Le développement de cette application a été pour nous très enrichissant pour
plusieurs raisons.
Tout d’abord, c’était la première fois que nous reprenions le code de quelqu’un. Nous
avons donc eu tout le loisir de nous apercevoir qu’un code non commenté, bien que
parfaitement indenté et élaboré, pouvait s’avérer très difficile à reprendre. Cela nous a fait
prendre conscience de l’importance de choisir judicieusement les noms de nos variables et
de nos fonctions.
Ensuite, cette application avait une visée pédagogique et a nécessité une vision
périphérique de la situation. En effet, pour choisir la forme de la page Bilan, nous avons dû
nous mettre dans la peau de l’étudiant-utilisateur de notre application et faire nos choix en
mettant en avant la convivialité, la facilité d’utilisation et l’amusement.
Malgré nos lacunes et notre retard, on peut aujourd’hui affirmer que nous avons
compris le principe de l’architecture MVC et que nous pourrons le réutiliser si besoin est.
Cette méthode est plus claire et plus ordonnée que ce que nous avions appris jusque là et il
est évident que nous aurions tout à gagner à la préférer à nos anciennes méthodes.
Grâce à ce projet, nous avons pu nous confronter à ce que pourrait être le monde du
travail, à ses demandes, ses délais et sa "pression".
Ce projet fut une réelle source d’enseignement.
4) Les extensions possibles
- Une première amélioration pourrait être d’intégrer une bande sonore qui
contiendrait la lecture de l’énoncé. Ceci pourrait permettre aux étudiants ayant une
mémoire auditive de mieux comprendre l’énoncé. Cela permettrait aussi aux étudiants
étrangers de mieux se familiariser avec notre langue.
14
- Un histogramme pourrait être intégré dans la page personnelle de chaque
utilisateur afin que celui-ci visualise mieux sa progression.
- Des erreurs trop vagues pourraient être explicitées si besoin. On imagine qu’un
utilisateur passerait sa souris sur un point d’interrogation (représentant une aide) qui lui
expliquerait de façon plus claire son erreur.
- On pourrait imaginer aussi que l’administrateur, lors de la création d’un exercice,
pourrait indiquer l’étape la plus intéressante de l’exercice. Ainsi, lorsqu’on indique à
l’utilisateur dans sa page personnelle ce qu’il doit réviser, on lui proposerait aussi un
exercice adapté.
15
Conclusion
Finalement, notre travail a consisté en une compréhension d’un code très abouti, en
une assimilation d’une architecture nouvelle et en l’apport d’idées à un projet déjà bien
élaboré.
L’exerciseur auquel nous avons eu à faire avait l’air de n’avoir rien à ajouter. Mais
c’est en se penchant un peu sur la question que nous nous sommes aperçues que les idées
d’améliorations venaient très vite.
Nous regrettons juste de ne pas avoir eu le temps de nous consacrer à la mise en
place de ces idées mais nous gagnons quand même car, bien qu’elle nous ait retardées dans
notre travail, travailler avec une architecture MVC nous a beaucoup appris et nous a permis
de nous perfectionner. Ce sont notre expérience et nos compétences qui en ressortent
grandies.
Cette expérience fut très enrichissante et nous sommes très heureuses d’avoir
participé au développement de cet exerciseur.
Nos améliorations pourront être mises en ligne pour la rentrée prochaine.
16
Netographie
Le site du zero et le PHP:
http://www.siteduzero.com/tutoriel-3-14668-concevez-votre-site-web-avec-php-et-
mysql.html
MVC :
http://julien-pauli.developpez.com/tutoriels/php/mvc-controleur/
JavaScript :
http://www.w3schools.com/
23
Résumé
Le but de ce projet est de créer des améliorations et extensions à un tutoriel existant
pour le module « bases de la programmation » du semestre Starter Sciences et Techniques.
Ce projet est entièrement orienté web.
Le but de cette application est de permettre à des étudiants en difficulté sur le
module « bases de la programmation » de rattraper leur retard en autonomie et en utilisant
les techniques Web. Une interface dynamique et animée est proposée dans le but
d’emmener les étudiants vers une bonne compréhension du déroulement d’un programme
JAVA.
Mots clés : tutoriel, pédagogie, JAVA, MVC, PHP, MySql, WampServer.