Rapport de Stage - Réalisation d'une application web avec le Framework Code Igniter

Site web de repositoring de CVs avec le framework Code Igniter

Page 1 de 22

Zahim Anas

Titles you can't find anywhere else

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.












Zahim Anas

Table des matières Remerciments.................................... Remerciments............. .............................................. .............................................. .............................................4 ......................4 Glossaire................................................................................................................5 Introduction...................................... Introduction............... .............................................. .............................................. ..............................................6 .......................6 1 Présentation de de l'entreprise Acticiel...........................................................6 2 Objectifs du développement ................................................................…...….7 3 Description et méthodologie de travail...........................................................8 3.1

Méthodologie de travail...................... ................................. ....................... ....................... ...................... ...................... ............................................ .................................8

3.2

Mise en place de la base de données..................... ................................ ...................... ....................... ....................... ............................... ....................9

3.3

................................. ...................... ...................... ....................... ....................... ...................... ...................... ...................... .......................................... ...............................9 Site Web......................

3.3.1

La charte graphique....... graphique.............................. ............................................... .......................................9 ...............9

3.3.2

Les fonctionnalités du site............ site.................................... .............................................1 .....................100

4 Conception et réalisation....................................................................................10 4.1

................................ ....................... ....................... ...................... ...................... ........................................ .............................10 Langages et outils utilisés..................... 10

4.1.1

Xmind...........................................................................................10

4.1.2

PHP...............................................................................................11

4.1.2.1 Tidy............ Tidy................................... .............................................. .............................................. .....................................11 ..............11 4.1.2.2 SimpleXML SimpleXML...................... .............................................. ............................................... ....................................11 .............11 4.1.2.3 JSON.......... JSON................................. .............................................. .............................................. .....................................12 ..............12 4.1.2.4 Le Framework Code Igniter................................................... Igniter......................................................12 ...12 4.1.3

MySQL..........................................................................................13

4.1.4

jQuery...........................................................................................13

4.1.4.1 jQuery AutoComplete AutoComplete....................... .............................................. .........................................14 ..................14 4.1.4.2 jQuery TableSorter.. TableSorter......................... .............................................. .............................................1 ......................144 4.1.4.3 jQuery Accordion....... Accordion.............................. .............................................. .........................................15 ..................15 4.1.4.4 jqTransform...... jqTransform............................. ............................................... ............................................... ............................15 .....15 4.1.5

Google Visualization API............. API..................................... .............................................1 .....................155

4.1.6

(x)HTML/CSS.............................................................................15












Zahim Anas

6 Difficultés rencontrées........................................................................................20 6.1

................................ ....................... ....................... ........................................... ................................20 Problème d'encodage de caractères..................... 20

6.2

Perte de 30 000 enregistrements dans la base de données..........................................20 20

Conclusion................................... Conclusion............ .............................................. .............................................. ...................................................21 ............................21 Références.............. rences..................................... .............................................. .............................................. ..................................................22 ...........................22












Zahim Anas

Remerciements Je tiens à remercier tout particuli èrement :

•

La société Acticiel pour m'avoir accueilli pour ce stage;

•

JeanChristophe BOURROUX , mon ma î tre tre de stage pour sa disponibili té en cas de besoin;

•

Amine CHAOUKI, CHAOUKI, mon encadrant pour ce stage et chef du d éparte ment des services informatiques, qui m'a assist é et guidé au fur et à mesure de mon avancement dans l'application;

•

Mbark AKERKOUCH, AKERKOUCH, développeur web qui m'a aid é à fixer les bogues auxquels je n'arrivais pas à trouver une solution moim ême.












Zahim Anas

Glossaire BDD : Acronyme de Base De Données.

CSS : acronyme pour Cascading Style Sheets, langage utilisé pour décrire la mise en page et le style d'un document écrit en HTML (page web).

Framework : Ensemble de bibliothèques(classes) qui fournissent des services communs à une grande partie de logiciels, logiciels , un framework est mis à disposi tion du développeur afin de lui faire gagner du temps au lieu de coder des choses qu'il refait normalement sur tout ses projets

GNU/GPL : GNU General Public License, licence qui fixe les conditions l é GNU. gales de distribution des logiciels libres des projets GNU.

(x)HTML : acronyme pour eX e Xtensible HyperText Markup Language, format de données conçu pour représenter les pages web.

PHP : acronyme pour Hypertext PreP reProcessor, langage de programmation très utilisé dans le développement web.

XML : acronyme de « eX e Xtensible Markup Language », langage de balisage.

AJAX : acronyme de Asynchrone Javascript And Xml, est une technologie qui assure la communication client/serveur et viceversa via le protocole HTTP sur une page web sans avoir à la recharger.












1

Zahim Anas

Introduction

C'est en cette fin d'ann ée universitaire 20092010, et plus exactement en mois de Juin, que j'ai pass é mon stage d'études au sein de la soci été Acti ciel, qui sera présentée en détails dans la partie qui suit. Et c'est gr âce à l'in térêt que je porte au d éveloppement web que j'ai pu d écrocher ce stage au sein de ma soci été d'acceuil.

J'essaierai de présenter dans ce rapport les objectifs de mon d éveloppe ment, ainsi que la m éthodologie de travail employée pour arriver aux r ésul tats voulus.

Ce rappor rapportt permettr permettra a donc donc de découvrir d'une façon globale la soci été Acticiel, mais surtout l'application web que j'ai r éalisé durant ce stage, les outils utilisés pour y arriver, tout en citant vers la fin de ce rapport les difficul tés rencontrées durant ce stage.

1.1 •

Présentation de l'entreprise Acticiel

Historique

En 2008, JeanChristophe Bourroux, fran çais résident au Maroc, expert inter national en nouvelles technologies et en logiciels libres, cr éa Acticiel. En Février 2010, deux jeunes acteurs du web marocain, Oussama Benham mou (éditeur du site N°1 de foot au Maroc, elbotola.com) et Mohammed El Ghaissani (éditeur de sites de cin éma) sont rentrés dans le capital. Acticiel est une startup marocaine, une Soci été de Services en Logiciels Libres – ou SS2L, Soci été de Services en Ing énierie Informatique sp écialisée dans les logiciels libres – dont les deux principales activit és sont l’intégration et le développement de solutions et de projets Open Source pour le Web,














Zahim Anas

Au Maroc, Acticiel accompagne les entreprises, les offices et les institutions du Royaume dans leur développement en ligne, et propose des offres cl és enmain, de sites internet, intranet, extranet et des solutions autour des logi ciels libres.

•

L'équipe

Acticiel est constitué d’une équipe de 3 développeurs, un infographiste, ainsi qu'un administrateur serveur, et qui s'occupe aussi des relations clients, autrement dit il joue le rôle d'un commercial.

2

Objectifs du développement

La préparation d'une base de donn ées exploitable de CVs à partir d'enre gistrements sous format XML était le premier objectif de ce d éveloppement. Après cela venait la cr éation d'une application web permettant la manipu lation de la base de donn ées créée( j'entend par manipulation tout ce qui est Recherche/Consultation/Modification/Suppression ) créée grâce au

Framework Code Igniter principalement, ainsi que d'autres outils qui seront détaillés par la suite dans ce m ême rapport.

Ce travail a été confié à ZAHIM Anas, étudiant en 1 ère année à l'Ecole Supé












3 3.1

Zahim Anas

Description et méthodologie de travail

Méthodologie du travail

Afin de toujours assurer un produit livrable au client, l' équipe au sein de la quelle j'ai dû m'intégrer se base sur les principes de la méthode agile, no tamment Scrum. La méthode agile Scrum consiste à focaliser les efforts d'une équipe sur des fonctionnalités définis au préable(ou par la suite). Ceci afin de livrer un logi ciel partiellement fonctionnel et enrichie au fur et à mesure. Le point fort de cette méthode est que le client est impliqu é dans toutes les phases du développement pour que le produit soit en final ce qu'il esp èrait. Le projet est divis é en fonctionnalités à finir dans une dur ée allant d'une se maine à un maximum de 2 mois, et chaque fonctionnalit é est divisée en plusieurs tâches, tout en prenant soin de bien s'assurer que la m ême fon tionnalité ne devra pas être modifié après suite à l'ajout d'une autre.












3.2

Zahim Anas

Mise en place de la base de donn ées

La base de donn ées fournise contenait des donn ées stockés en format HTML, donc inutilisables. Le but de ce travail est d'extraire ces donn ées, et de les stocker dans une base de donn ées relationnelle. relationnelle.

3.3 Site web 3.3.1

La charte graphique












3.3.2

Zahim Anas

Fonctionnalités du site

Le site sera dot é d'une page de recherche avanc ée de profils afin de permettre un acc ès aisé aux candidats. Après visualisation d'un profil, il sera possible de le modifier si on dispose des droits d'accès, sinon une connexion autant qu'administrateur s'impose. Une Une pa page ge de statis statistiq tique uess sera sera progr programm ammé afin afin d'av d'avoi oirr un peu peu plus plus d' inform informati ations ons sur sur le total total des des candi candida dats ts ainsi ainsi que que leurs leurs forma formatio tions, ns, expé riences. Toutes les fonctionnalités citées cidessus seront r éalisées grâce aux outils expliqués en détails dans la partie qui suit.

4

Conception et réalisation

4.1 Langages et outils utilisés Tous les outils et langages qui ont été utilisés pour la r éalisation de ce projet sont à code ouvert (Open Source), ce choix est d û au fait que ces derniers sont caract érisés par leurs: ➔ Accès libre; ➔ Performance, robustesse, mais sans n égliger la s écurité; ➔ Facilité de se documenter sur un outil ou un autre, vu que n'importe qui peut contribuer à l'enrichissement des docu mentations; ➔ Large communaut é d'entreaide, notamment sur les forums de discussions; ➔ Extensibilité; ➔ Portabilité. Vu que ces outils peuvent être utilisés indépen damment de la plateforme sur laquelle ils sont h ébergés. P.S : Le développement a eu lieu sous le syst ème d'exploitation Ubuntu 9.04












Zahim Anas

tionnalité du projet, ainsi que son degr é d'importance, ainsi que les d épen dences entre cellesci. Voici un exemple d'un diagramme r éalisé à l'aide de Xmind lors d'une étape donnée de la r éalisation du projet faisant objet de ce rapport :

4.1.2

PHP

PHP a été utilisé afin d'assurer le dynamisme du site web c ôté serveur. Plu sieurs extensions 4 et framework ont été utilisés dans ce projet, nous citons à titre d'exemple : 4.1.2.1 Tidy Cette extension pour PHP sert à valider du code code (x)HTML/XML, (x)HTML/XML, la validation consi consiste ste au fai faitt de rendr rendre e le code code (x)HT (x)HTML/ ML/XML XML compa compatib tible le av avec ec les standards imposés par le W3C 5. Mais elle a été surtout utilisé dans ce projet afin afin de rend rendre re la base base de donn données XML 'parsable' 6 par la librairie Sim pleXML . L'extension Tidy pour PHP se caract érise par sa simplicit é d'utilisation, mais surtout par son extr ême difficulté à être trouvée/installée. Voici un exemple de son utilisation dans un code PHP :

$tidy = new tidy; tidy; $tidy-> $tidy -> parseString( parseString (utf8_encode( utf8_encode ($reponse $reponse[['content' 'content'])); ]));

$tidy> $tidy > cleanRepair(); cleanRepair ();














Zahim Anas

sante et compl ète, et dotée de plusieurs fonctionnalit és … qui seront com plètement inutile pour ce projet. C'est grâce à SimpleXML que l'extraction des donn ées sous format XML a eu lieu. 4.1.2.3 JSON JSON pour « JavaScript Object Notation », est un format de repr ésentation de données, sous une forme nom/valeur. Il a été utilisé dans ce projet pour stocker les langues ainsi que les niveaux de maitrises pour chacune dans un seul champ dans la BDD.En voici un exemple : [{ "langue"::"Arabe" "langue" "Arabe",, "maitrise"::"(Lu, Parlé et Ecrit)" "maitrise" }, { "langue"::"Français" "langue" "Français",, "maitrise"::"(Lu, Parlé et Ecrit)"} "maitrise" Ecrit)"}

}]

4.1.2.4 Le framework CodeIgniter La majorité de la réalisation du site web a été faite grâce à ce framework. L'utilisation d'un framework est dû au fait qu'il propose des librairies/fonc











Site web de repositoring de CVs avec le framework Code Igniter •

Zahim Anas

Database Class : La classe de gestion de BDD de CodeIgniter g ère automatiquement la connexion à cette dernière une fois les identi fiants fournies. Voici un exemple de requ ête réalisé grâce à cette classe : $this-> $this ->db db-> ->distinct distinct(); (); $this-> $this ->db db-> ->select select(('*' '*'); ); $this-> $this ->db db-> ->order_by order_by(('ville_natale' , 'asc' 'asc'); ); $query = $this $this-> ->db db-> ->get get(('candidats' 'candidats'); ); //équiva //équ ivaut ut à $q $que uery ry = my mysql sql_q _que uery( ry(SEL SELECT ECT DI DISTI STINC NCT T * FR FROM OM ca cand ndida idats ts OR ORDE DER R BY `ville_natale` ASC);

•

à Inpu Inputt Clas Classs : Cette tte class lasse e sert faci facililite terr la récupération/vérification/sécurisation des donn ées entrées par un uti lisateur( dans un champ de recherche par exemple). Je l'ai utilis ée un peu peu pa part rtou outt da dans ns le site site web, web, mais mais surt surtou outt da dans ns la pa page ge de re cherche de profils.

•

Pagination Class : Automatise la gestion des liens du genre : « < 1 2

3

4 5 > »

. Elle a été utilisée dans la page page de r ésultats de re

cherche. Afin d' éviter de rentrer dans des d étails encore encore plus plus techniques, techniques, seules les les classes cidessus ont ét é cit ées, et les fonctions d'aide ont ét é omises aussi.












Zahim Anas

JQuery a été utilisé sur plusieurs parties du site dont la plus int éressante est celle du formulaire de recherche, dans laquel les villes varient selon le pays choisi(charg é grâce à la technologie AJAX).

Toutefois, ses plugins ne font qu'enrichir ses fonctionnalit és, deux d'entres eux ont été utilisés dans ce site web à savoir : 4.1.4.1 jQuery Autocomplete Afin d'assister l'utilisateur lors de sa saisie dans un champ texte, une liste de suggestions lui est affich é selon ce que le visiteur est en train de taper, et cela en temps r éel.

4.1.4.2 jQuery TableSorter Ce plugin est implémenté dans la page de r ésultats de recherche, il permet de trier les r ésultats selon une colonne ou plus.












Zahim Anas

4.1.4.3 jQuery Accordion Utilisé dans la page des statistiques, le plugin jQuery Accordion permet d'afficher un bloc tout en prenant soin de cacher celui qui est visible avec un joli effet d'accord éon. Il est utilisé à des fins d'accessibilit é pour la page, vu qu'elle est charg ée de graphs/cartes. 4.1.4.4 JqTransform Afin de rendre les formulaires du site web plus « jolis », le plugin jqTransform a été utilisé afin d'assurer cette t âche. 4.1.5

Google© Visualization API API10

L'API Google© Visualization permet de cr éer des visualisations en se basant sur les données qu'on lui a fourni, 2 types(mais 4 vues diff érentes) de visuali sations ont été utilisés dans ce projet dans la page statistiques notamment : •

Geomap : C'est avec ce package que les visualisations pour les villes, et les pays ont été créés.

•

Corechart : le camembert ainsi que les graphiques à barres ont été réalisé à l'aide de ce package.

4.1.6

(x)HTML/CSS

Nul besoin de pr éciser que ces deux langages sont à la base de toute page web pr ésente sur internet (du moins une grande partie). Le (x)HTML a surtout été utilisé dans la partie vue/view du MVC11.











Site web de repositoring de CVs avec le framework Code Igniter ➔

Zahim Anas

content : contient tout le CV aspiré depuis Menara Jobs, dont voici un aperçu :

mrym ch

3 rue anqara appt 6 10000
Casablanca - Maroc

Date de naissance : 28/05/2008
Tél : 0668566655
Email :

[email protected]














Zahim Anas

Il reste à préciser que : • la base de donn ées initiale faisait presque 200Mo, apr ès extraction elle ne pesait pas plus de 30Mo.

5

Résultat final

➔

La page d'acceuil Contient tout d'abord un formulaire rapide de rechercher de profils, suivi de 3 profils tir és aléatoirement de la BDD.

➔

Recherche de profils :












Zahim Anas

10 résultats sont affichés par page, et peuvent être trié (sans avoir à rechar ger ger la pa page) ge) pa parr nom/p nom/prrénom, Date de naissance, Ville, téléphone ou bien même une combinaison de ces derniers. ➔

Consultation d'un profil :












Zahim Anas

Domaine de formation

Secteur d'acitivité

Pays13

Ville












6

Zahim Anas

Difficultés rencontrées

6.1 Problème d'encodage de caract ères Lors de la validation du contenu de la base de donn ées d'origine, l'exten sion Tidy de PHP crée des caract ères dit html entity , qui à cause d'eux l'a nalyse sémantique mantique (parsing) (parsing) devient devient impossibl impossible e pour SimpleXML, SimpleXML, ce qui rend l'importation impossible, ceci est d û au fait que la base de donn ées initiale n'est pas bien format ée, ce qui rend son exploitation tr ès difficile. Afin de remédier à ceci, plusieurs expressions r égulières ont été créées afin de supprimer tous les caract ères qui posent probl ème (la plupart étant des espaces blancs) qui sont incompatibles avec l'encodage UTF8.












Zahim Anas

Conclusion Ainsi, j'ai effectué mon stage de fin d'ann ée d'études en Génie informa tique au sein de l'entreprise Acticiel. Toutes les fontionnalités qui ont été fixé dès le départ, ou bien dont la plani fication a été ajoutée par la suite ont été réalisées, à part celle de la gesti gestion on des des versi versions ons,, vu qu'ell qu'elle e s'est s'est avéré complètemen tementt inutile inutile,, car car la gestion des versions vise tout d'abord la mise en disposition du code aux profits des autres participants au projet, or une seule personne s' était occu pé du projet, et il n'y aura qu'une seule version de la m ême application, rai son pour laquelle la fonctionnalité de la gestion gestion des des version versionss a été abon donnée.

éé è

û














Zahim Anas

Réf érences ➔

Documentation PHP, SimpleXML, Tidy : http://fr.php.net/

➔

Documentation MySQL : http://dev http://dev.mysql.com/doc/ .mysql.com/doc/refman/5.0 refman/5.0/fr/ /fr/

➔

Documentation CodeIgniter : http://codeigniter.com/user_guide/

Rapport de Stage - Réalisation d'une application web avec le Framework Code Igniter

Recommend Documents