Vous êtes sur la page 1sur 33

CBI - Producteur de productivit. Imm CBI, 29/30 Lot. Attaoufik, Sidi Marouf, 20190 Casablanca Maroc.

Ecole Hassania des Travaux Publics. KM 7, Route DEL JADIDA, B.P 8108, Oasis.

Rapport de stage de 1re anne


Filire Gnie Informatique.

Conception et ralisation dun site web de VOD (Video on demand) pour les ralisateurs et acteurs du cinma marocain.

Prsent par : Ossama BENBOUIDDA Responsable CBI : Monsieur Amine Mounir ALAOUI
Page 1 sur 33

1 mois Aout 2013

Remerciement :

On se croirait dans une mission de tl-ralit ou une interview tl avec ces remerciements, mais pourtant ils sont bien vridiques et ils sortent des fins fonds de mon cur. Je dis a parce que vers les fin juin, je navais toujours presque aucune piste de stage, vers les fin juin je fus perdu, vers les fin juin je nattendais que la fin de lanne scolaire pour honntement se dtacher de latmosphre pas du tout accueillante qui rgnait en classe durant ces temps-l ; En dautres termes, vers les fins juin, je fus seul dans une jungle quest la vie avec pour seul arme un rien. Arf parfois, jai tendance dramatiser les choses, mais pourtant du vrai existe dans ce que je viens de dire, donc voil lecteur et lectrice de ce rapport, je tiens tout dabord remercier ma famille, pre, mre, sur et frre qui nont cess de me rassurer durant toutes ces priodes de rien, qui nont jamais cess de me regnrer tout au long de mes 21 ans. Je remercie aussi mes amis, qui se font rares dans des moments pareils mais aussi en or, ce titre je cite mes deux meilleurs amis Souhail et Anass, mon ami et super collgue de classe Wail ELBATTARI, qui en avait un peu marre aussi de latmosphre et qui a bien vu ma situation des fin juin et ma aid trouver un stage chez Crdit du Maroc (Que jai refus dailleurs !). Pour lentreprise, bien sr que jy viens. Je tiens remercier mon vo isin monsieur BOUZACHAN qui sans lui, je naurai peut-tre pas eu une telle chance, srement jamais. Je remercierai beaucoup aussi monsieur Amine Mounir ALAOUI, le directeur gnral de la socit CBI qui ma adopt, fait de moi son fils et stagiaire et po ur avoir fait de sa personne mon propre encadrant. Je remercierai aussi et beaucoup lquipe CBI du 4me tage, qui se reconnatra srement : Monsieur Aziz LAGZOULI qui passait toujours pour me rconforter et me parler du monde, du tout et de rien, Mme Meriem qui nous prparait de temps autre du th, des crpes, nous sortait des blagues et nous faisait sortir de latmosphre entreprise (Et il faut lavouer, je ne me suis jamais senti en travail ! Il ny avait que le PC devant moi qui me faisait cette sensation, mme Facebook nest pas banni pour le monde, ctait de lhyper confiance qui rgnait dans lentreprise), le stagiaire ENCGiste Soufiane avec qui je me suis fait ami et bien bien davantage personnes qui ont t pour l dans ce monde professionnel (Que ce soit dans le rel ou dans le Gtalk ou Linkedin ou autre.) Je vous laccorde, a fait beaucoup de remerciements mais vous allez maccorder aussi quil ne faut oublier personne quand il sagit de ce genre de choses.

Page 2 sur 33

Table des illustrations :


Figure 1 : Organigramme de l'entreprise CBI ............................................................. 7 Figure 2 : Lhistoire de CBI au fil des annes ............................................................. 8 Figure 3 : Les domaines dactivit de CBI .................................................................. 8 Figure 4 : Principe de base dune requte HTTP. ..................................................... 13 Figure 5 : Exemple dun code en HTML. .................................................................. 13 Figure 6 : Comparatif entre les langages de programmation. ................................... 14 Figure 7 : Exemple de requte dans un ORM. ......................................................... 15 Figure 8 : Explication du procd dun ORM. ........................................................... 16 Figure 9 : Illustration de larchitecture MVC. ............................................................. 17 Figure 10 : Les types de design pattern qui existent de nos jours. ........................... 17 Figure 11 : Comparatif entre les framework PHP. .................................................... 19 Figure 12 : Benchmark des framework PHP............................................................. 19 Figure 13 : Explication du fonctionnement de CodeIgniter. ...................................... 20 Figure 14 : Intgration de Doctrine dans CodeIgniter. .............................................. 21 Figure 15 : Les tapes de cration dun site en gnral de nos jours. ...................... 22 Figure 16 : Le fuzzy search de Sublime Text. ........................................................... 24 Figure 17 : Prototype de linterface graphique du site. ............................................. 26 Figure 18 : Le code HTML du site au dbut.............................................................. 27 Figure 19 : Le header du site. ................................................................................... 27 Figure 20 : Le body du site (de la page daccueil). ................................................... 28 Figure 21 : Le footer du site. ..................................................................................... 28 Figure 22 : Page de liste des articles. ....................................................................... 29 Figure 23 : La fiche dun film ou dune srie. ............................................................ 29 Figure 24 : La page de tlchargement du site. ....................................................... 30 Figure 25 : Lorganisation du code dans le site. ....................................................... 30 Figure 26 : Les dossiers images, fiches et tout du site. ............................................ 31 Figure 27 : Limplmentation de CodeIgniter dans le site. ........................................ 31 Figure 28 : Le schma de la base de donnes. ........................................................ 32

Page 3 sur 33

Table des matires :


Remerciement : .......................................................................................................... 2 Table des illustrations : ............................................................................................... 3 Table des matires : ................................................................................................... 4 Glossaire : .................................................................................................................. 5 I. Introduction : ............................................................................................................ 6 II. Prsentation de lentreprise daccueil : ................................................................... 7
Mtiers et services de CBI : ................................................................................................................. 8 Mtiers de CBI ................................................................................................................................. 8 Services de CBI............................................................................................................................... 11

III. Choix techniques et implmentation : .................................................................. 13


1. 2. 3. 4. 5. 1. 2. 6. 7. 1. 2. Principe de base : ...................................................................................................................... 13 Choix du langage de programmation : ...................................................................................... 14 Choix dun outil de mapping objet-relationnel : ....................................................................... 15 Etudes et choix des frameworks PHP : ...................................................................................... 16 Prsentation de CodeIgniter : ................................................................................................... 20 Principe gnral : ................................................................................................................... 20 Intgration de Doctrine : ....................................................................................................... 21 Rcapitulatif des technologies utilises : .................................................................................. 22 Outils utiliss : ........................................................................................................................... 22 Wampserver .......................................................................................................................... 22 Sublime Text 2 : ..................................................................................................................... 23

IV. Prsentation du projet : ....................................................................................... 26


1. 2. 3. La charte graphique : ................................................................................................................. 26 Le code et son organisation :..................................................................................................... 30 La modlisation de la base de donnes : .................................................................................. 31

Conclusion : .............................................................................................................. 33

Page 4 sur 33

Glossaire :
HTML : Acronyme pour HyperText Markup Language, un langage de balisage conu pour le formatage et reprsentations des pages web. Sa dernire version HTML5 couple CSS3 et Javascript offre plus de possibilits : Notamment la golocalisation (Les SIGs et topographes du monde voudront bien connatre ces fonctionnalits la), la possibilit de faire des dessins avec la balise canvas (Faites des recherches, on fait maintenant des jeux avec a mme) et bien encore plus. API : Signifie Application Programming Interface , ou Interface de programmation en franais. Une API est un ensemble de classes qui permet linteroprabilit de plusieurs composants logiciels. Cache : Le cache est un mcanisme qui consiste enregistrer temporairement sur le disque dur des donnes provenant dun site Internet de manire pouvoir y accder plus rapidement les fois suivantes. Plugin : Un plugin est un module dextension qui permet dajouter des fonctionnalits un logiciel. Mapping : Le mapping est une opration qui consiste mettre en correspondance des donnes issues de plusieurs modles de donnes diffrents. Javascript : Abrg parfois JS, est un langage de programmation de scripts ct client mais parfois, trs parfois ct serveur. Il sert faire des vrifications des formulaires et des choses dynamiques dont je ne saurai vous dcrire en mots. Jquery : Une bibliothque Javascript qui porte sur linteraction entre Javascript et HTML. Responsive design : On en parle beaucoup trs rcemment avec lavnement des smartphones et tablettes. Un design est dit responsive lorsquil sadapte lcran, enfin mme la fentre du navigateur. Une sidebar on la cacherait pour un utilisateur de smartphone BDD : Acronyme de Base de Donnes. CSS : Acronyme pour Cascading Style Sheets, langage utilis pour dcrire la mise en page et le style dun document crit en langage HTML. Sa dernire version CSS3 offre une trs grande flexibilit.

Page 5 sur 33

I. Introduction :

Contrairement ce que quelques personnes pourraient penser (Mes collgues de classe titre dexemple), lexprience du dveloppement web de cet t me fut super enrichissante. Enrichissante dans la limite o a ma permis de toucher un framework pour la premire fois, en loccurrence CodeIgniter et utiliser avec un ORM encore une fois, pour la premire fois, Doctrine. Dailleurs cest mon intrt pour le dveloppement web qui ma pouss dire OUI pour le projet et aller vers lavant. Ceci dit, en plus des remerciements (trop pompeux pour certains peut-tre ?) que vous avez lu ci-dessus, du lexique informatique (Sans trop dintrt ?), je vais essayer de parcourir un peu en bref lobjectif de mon stage, sa ralisation et les difficults qui ont t rencontres dans ce dernier. Un IMDB ou un allocin marocain, possible ? Pour les gens du CBI, oui. Pour eux, il ne suffit pas davoir hollywood ou un festival cannes pour quil ait un site de la sorte. Leur motif : Grand nombre de ralisateurs et acteurs du cinma marocain ont fait leur vux de voir natre au monde un site pareil, avec non seulement les trailers, articles et tout, mais aussi les films et sries en tlchargement (Bien sr avec paiement au pralable avec un systme automatis par SMS. On y reviendra par la suite), ceci dit, un site video on demand. Pour faire ce travail, jai d tout dabord mquiper des outils ncessaires (Logiciels et frameworks), je les parcours ici en bref, mais je vais les dtailler aprs par la suite : WampServer, CodeIgniter, Doctrine, etc. Bien aprs ceci, jai commenc faire une analyse des besoins en parlant avec mon encadrant. Resultat, un systme darticles, un autre pour la consultation des films et sries qui existent dans le site et le tout pouvant tre trouv laide dun formulaire de recherche. Jai modlis par la suite la base de donnes laide daccess, implment grce phpmyadmin. Et en parallle tout ceci, jai tudi les diffrentes technologies MVC qui taient ma disposition afin dutiliser celle qui me convient le plus. Toutes ces choses faites, jai fait aprs linterface graphique du site, un peu simpliste, pas trop bootstrap (Depuis un template tlcharg et modifi) et implment les fonctionnalits qui taient demandes (Listing des films, des sries, possibilit de tlchargement avec SMS et tout a).

Page 6 sur 33

II. Prsentation de lentreprise daccueil :

CBI, Premier acteur du conseil au Maroc pour les professionnels, se positionne avec une approche Producteur de Productivit pour accompagner les grandes entreprises dans l'amlioration de leur performance. Depuis sa cration en 1970, CBI a t guide par une culture du changement et de linnovation. Ses plus de 150 consultants se diffrencient par la synergie multi- comptences tant sur les volets mtier que sur le volet technologique. L'offre solution de CBI intgre des activits complmentaires savoir la bureautique, linformatique, l'intgration systmes et les tlcommunications. Cette offre est constitue de produits de haute technologie leaders sur leurs marchs. Les quipes de CBI sont formes en permanence aux technologies les plus rcentes et possdent tous les atouts et lenthousiasme pour vous accompagner dans vos projets pour plus de productivit. Lorganigramme ci-dessous prsente les diffrentes directions de CBI :

Figure 1 : Organigramme de l'entreprise CBI

Page 7 sur 33

Lhistoire de CBI se confond avec celle des technologies de linformation au Maroc et dans le monde. CBI a pu ainsi sadapter en permanence aux diffren tes rvolutions tant dans le secteur informatique que celui des tlcommunications et comme a initier dans notre pays les dernires volutions technologiques. Ci-dessous quelques annes phares qui marquent lhistorique de CBI :

Figure 2 : Lhistoire de CBI au fil des annes

Mtiers et services de CBI :


CBI se distingue par sa couverture globale des besoins dEntreprise en matire de Systmes dInformation (SI). Aujourdhui encore cette culture lui permet dtre la pointe de la convergence numrique et doffrir aux entreprises nationales et africaines des solutions globales intgrant dans une synergie parfaite les comptences de ses mtiers et ses services.

Figure 3 : Les domaines dactivit de CBI

Mtiers de CBI
Tlcom

CBI TELECOMS sest positionn comme le spcialiste dans la mise en place des solutions Rseau et Tlcommunication. Par ses partenariats, CBI TELECOMS accompagne ses clients dans la mise en uvre
Page 8 sur 33

dune vritable politique collaborative de la faon la plus efficiente possible. Prcurseur dans la mise en uvre de nombreuses technologies, le Ple a su ainsi dvelopper une exprience indite dans toutes les tapes de transport de linformation, depuis son mission jusqu sa livraison et bien videmment en prenant en compte les exigences des politiques de scurit de ses clients.

Mission Mise en place des solutions rseaux et tlcommunications Accompagnement des clients dans la mise en uvre d'une politique collaborative efficiente Expert dans toutes les tapes de transport, mission et livraison de l'information Solution Rseau Routage & interconnexion (WAN) Switching & rseau local (LAN) Rseau sans fils (WIRELESS) Gestion centralise des services (CHCP, DNS) Scurit Scurit d'accs (Firewall, UTM, VPN, IPS) Prvention de la fuite des donnes Prvention d'instruction / Confidentialit des communication rseau (VPN) Filtrage mail / Web Authentification / Autorisation / Accounting Scurit de poste de travail (Antivirus, Cryptage) Solutions oprateurs Communication voix / Vido Service manags bas sur l'infogrance rseau des clients des oprateurs Routage et qualit de service oprateur Communication unifi Tlphonie IP Messagerie unifi Visio confrence Affichage dynamique

Systmes

CBI SYSTEMES a pour vocation de mettre disposition de ses clients les meilleures Solutions rpondant aux diffrents besoins suivants : Poste utilisateur : Poste de travail, priphriques, client lger... Serveurs : Consolidation, clustering...
Page 9 sur 33

Stockage : Optimisation, Systmes de sauvegarde, Systme darchivage Virtualisation : Serveur, Applications, Stockage, Poste utilisateur Datacenter : Armoires, Systmes de cblage, accessoires, onduleurs.

CBI Systmes

Sassure par ailleurs, que ses produits & services fournissent un haut niveau defficacit et de rendement, valorisant de faon optimale linfrastructure informatique de ses clients. Mission Ds rponses aux diffrents besoins affaires aux traitements disponibles et prennits de linformation Garantie dun haut niveau defficacit et de rendement Solution Poste utilisateurs Facility management Dfinition darchitecture matriel Dploiement Maintenance Support Serveur IBM : IBM systme & Blade HP : Proliant CISCO : UCS Stockage Consolidation : IBM SAN, DS8000, DS6x00, DS4x00, NAS Storewyze, V7000, EMC VNxe, VNX Systme management et sauvegarde : Sauvegarde / Restauration : Gestion de la continuit de service et de la vie des donnes. Gestion du stockage : Gestion automatique des plateformes du stockage htrogne Archivage : donnes financires et archivage lgal Virtualisation Citrix VMware PowerVM Datacenter Environnement DATACENTER : Armoire, systme de cablage, accessoires, onduleur CBI Cloud :

Page 10 sur 33

Externalisation et optimisation de la gestion des infrastructures Une palette de service et de modle contractuel : Fourniture de puissance informatique ddi, ou stockage mutualis. Proposition dun environement (State of the art) pour le s offres IAAS, PAAS, SAAS

SOFTWARE

CBI SOFTWARE assure la mise en uvre dune infrastructure logicielle globale rpondant diffrentes problmatiques de lentreprise quant la gnration et la disponibilit de son information. Les principales solutions qui se proposent sont : Customer Relationship Management (CRM) : Traabilit, archivage, Workflow Dcisionnel/ Business Intelligence: Datawarehouse, Reporting Contrle de gestion/Calcul de cots ; Business Information Management : Knowledge Management, Gestion o lectronique o Documentaire (GED); ERP : ERP Global, ERP Finances/Trsorerie.

EDITIQUE

Expert de la Gestion du Document depuis 1970, CBI EDITIQUE a pu dvelopper son savoir- faire en intgrant les enjeux de la gestion du document dans des Systmes dInformation (SI) de plus en plus complexes. Par ailleurs, travers sa prsence sur les six plus grandes villes du Royaume, CBI EDITIQUE assure une plus large couverture gographique. DISTRIBUTION

CBI tait la pionnire identifier la tendance de la miniaturisation et lquipement lger, en introduisant les premiers PC portables au Maroc en partenariat avec Toshiba. En 2004, CBI sest orient vers la distribution, vu la valeur ajoute que pourrait apporter ce canal dans la commercialisation des produits. CBI Distribution a toff sa gamme de produits pour offrir ses clients un panel complet de PC portables, des routeurs, des switches, des accessoires divers, etc. Services de CBI Les consultants CBI accompagnent les entreprises dans le cadre des diffrentes missions et mettent leur disposition toute leur expertise acquise lors des diffrents
Page 11 sur 33

projets pilots sur diffrents secteurs. CBI possdent aussi une grande quipe technique afin de garantir un bon dploiement de ses solutions. Elle suggre aussi des formations ses clients afin de garantir la mise jour des connaissances de ses clients. Les services proposs par CBI se rsument comme suit : Conseil & Audit Intgration Formation Contrats de service

Page 12 sur 33

III. Choix techniques et implmentation :


1. Principe de base :
Lorsquun internaute demande consulter une page dun site Internet, il envoie une requte HTTP (pour HyperText Transfer Protocol , ou protocole de transfert hypertexte en franais) au serveur qui hberge le site, sous la forme dune URL tel que http://www.maroc.ma . Le serveur gnre alors la page demande et la retourne en rponse au navigateur du client, qui se charge de lafficher :

Figure 4 : Principe de base dune requte HTTP.

Le langage utilis pour reprsenter une page est le HTML (pour HyperText Markup Language , ou langage de balisage hypertexte en franais). Il permet de structurer les informations dune faon logique. Dans lexemple ci-dessous (Figure 5), on a un header avec un menu :

Figure 5 : Exemple dun code en HTML.

La page est ensuite mise en forme par des feuilles de style CSS qui associent des lments des mises en forme particulires, pour colorer du texte par exemple. Ces feuilles dterminent le design du site. Si le site est statique, le serveur ne fait que dlivrer des pages HTML dont le contenu ne change jamais. Si le site est dynamique, cest--dire que le contenu des pages change en fonction de certains paramtres (comme le profil de la personne

Page 13 sur 33

connecte), alors il est ncessaire dutiliser un langage de programmation pour dterminer les informations renvoyer au client.

2. Choix du langage de programmation :


Il existe plusieurs langages de programmation utiliss pour crer des sites Internet dynamiques. Voici un tableau dcrivant les avantages et inconvnients des principaux langages :

Figure 6 : Comparatif entre les langages de programmation.

Le PHP (pour PHP: Hypertext Preprocessor , ou PHP : Prprocesseur hypertexte ) est un langage trs rpandu dans le monde amateur, mais moins dans le monde professionnel, o il a parfois mauvaise rputation. En effet, ce langage permet beaucoup de liberts, ce qui peut conduire un code qui devient difficilement grable sil est mal utilis. Certaines entreprises attachent PHP une image damateurisme et de bidouille. Il y a en revanche une trs grande communaut dutilisateurs, ce qui induit de nombreuses sources dinformations disponibles sur Internet. Dautre part, un site PHP est trs facilement dployable et fonctionne avec tous les systmes dexploitation, que ce soit Mac, Linux ou Windows. Le dveloppement dapplications web JEE (Java Enterprise Edition) se fait souvent avec le framework Struts. Cette infrastructure ma sembl plutt lourde mettre en place dans le cadre de ce projet (Et encore il fallait lapprendre ce qui allait me coter encore plus de temps et temps). Il fallait en effet que le dveloppement commence plutt rapidement aprs les phases danalyse et de choix techniques. Il y a en revanche beaucoup de documentation sur Internet du fait de la grande utilisation de ce langage par les entreprises, et nombre de bibliothques et doutils sont disponibles. Pour utiliser cette infrastructure, un serveur dapplication doit tre mis en place, tel que GlassFish ou JBoss. ASP.Net, qui fait partie de la plateforme Microsoft .Net, possde de nombreuses API mais aussi linconvnient de ne fonctionner que sur un serveur web IIS (pour Internet Information Services ). Il faut cependant noter lexistence du projet [Mono] qui a pour but de porter les applications .Net sous Linux. Ruby On Rails est un framework web trs jeune, car sa premire version est sortie en 2004. Daprs les tmoignages que jai lus sur Internet, ce framework est assez

Page 14 sur 33

long prendre en main mais peut tre trs efficace. Dautre part, les API changent rapidement et certaines deviennent assez vite obsoltes car non maintenues. Etant donns tous ces lments et les contraintes relatives ce projet, jai choisi dutiliser le langage PHP, qui prsente un bon compromis entre la rapidit de mise en place et les performancesmais bien sr aussi un bon compris aussi avec mes comptences. Jai ensuite d faire le choix de construire le site entirement moimme ou dutiliser un framework. Jai donc fait des recherches sur ces outils ainsi sur des outils daccs aux bases de donnes.

3. Choix dun outil de mapping objet-relationnel :


Plusieurs outils de mapping objet-relationnel (ORM, pour Object-Relational Mapping ) sont disponibles pour PHP, tels que Propel, [Doctrine], PHPDataMapper ou encore PHPMyObject. Les deux premiers sont nanmoins les plus rputs et les plus utiliss. Ils sont respectivement soumis aux licences MIT et LGPL. Propel et les versions 1.x de Doctrine se basent sur le patron Active Record pour rcuprer les donnes en base : un objet correspond un tuple de la base de donnes. Ainsi, lorsque l'objet est modifi, le tuple l'est aussi. D'autre part, il faut que chaque classe redfinisse certaines mthodes et / ou tende une classe de base. Ainsi, dans Doctrine 1.x chaque classe doit hriter de Doctrine_Record et implmenter une mthode setTableDefinition() qui dcrit la structure de l'objet dans la base de donnes. La version 2 de Doctrine utilise un autre patron de conception : Data Mapping. Cela consiste faire correspondre deux modles de donnes : le modle objet et le modle de la base de donnes. L'avantage est que l'on peut ainsi accder aux donner sans connatre la structure de la base. Cette dernire version de Doctrine s'inspire beaucoup du framework [Hibernate], trs rput en Java. En effet, Doctrine possde son propre langage de requtage, DQL (pour Doctrine Query Language ), l'instar d'Hibernate qui propose le langage HQL (pour Hibernate Query Language ). Il permet de grer la persistance des donnes d'une manire SQL oriente objet.

Figure 7 : Exemple de requte dans un ORM.

Dans lexemple prcdent (figure 7), on slectionne tous les utilisateurs qui habitent Berlin. Les champs figurant dans la requte, comme a.city, sont les proprits des

Page 15 sur 33

objets et non les colonnes des tables SQL. Les rsultats sont hydrats , cest -dire transforms en objets tels que dfinis dans les classes PHP (figure 8).

Figure 8 : Explication du procd dun ORM.

Aprs de nombreuses recherches sur Internet, il m'a paru vident que Doctrine, dans sa version 2, est le plus complet des ORM. De plus, il possde une communaut active et une documentation trs bien rdige. J'ai nanmoins pass du temps au dbut du stage pour trouver comment le configurer. Par rapport sa dernire version 1, Doctrine 2 apporte : 30% de gain mmoire. 20% de gain de rapidit dexcution. L'utilisation d'annotations ou de fichiers XML pour dcrire le mapping objet / base de donnes. En comparaison, Hibernate utilise des fichiers XML et JPA (pour Java Persistence API ) utilise les annotations.

4. Etudes et choix des frameworks PHP :


Aprs avoir choisi le langage PHP pour le dveloppement, je me suis demand sil serait mieux de construire le site entirement moi-mme ou si un framework pourrait simplifier une partie du dveloppement. Il y a aujourd'hui un vaste choix de frameworks PHP.
Page 16 sur 33

Les frameworks apportent une architecture de base ainsi que des fonctionnalits dj implmentes. Tous utilisent une architecture Modle Vue Contrleur (MVC, figure 9).

Figure 9 : Illustration de larchitecture MVC.

Avant de dtailler, larchitecture MVC, je dtaille un peu dabord le design pattern, notion plus gnrale que larchitecture MVC. Alors pour le design pattern, et lorsque quon part faire un petit tour chez Wikipdia on a ceci :

Figure 10 : Les types de design pattern qui existent de nos jours.

Alors, vous comprendrez avec moi que cest toute une thorie part ; Oui essayez quand mme de voir la diversit de design patterns quon y trouve.

Page 17 sur 33

Je ne vais pas mattarder trop l-dessus, car je ne suis pas du tout un expert du domaine moi aussi (Vu que l je ne connais que la pratique MVC), mais grosso modo, un design pattern est un certain arrangement de modules qui sont l pour la prvention dun ventuel problme lors de la conception dun logiciel. Enfin, on va dire cest lexprience et la pratique des programmeurs transmises sous forme dune thorie part. Pour ma part, et comme le savez maintenant trs bien, jai utilis larchitecture MVC (Acronyme de Module-Vue-Contrleur) comme design pattern du dveloppement. Maintenant, passons un peu plus au particulier et donnons plus dexplications au dessin du schma ci-dessus. Si vous avez dj dvelopp un site web de A Z avec du HTML, CSS, Javascript, PHP et MYSQL, vous avez eu sans aucun doute un jour cette sensation que votre code est mal rdig, mal organis, mme avec lindentation et tout le tralala qui va avec. Le problme ce nest pas vous, cest que plusieurs langages interagissent dans un seul et unique fichier et ceci cre plusieurs syntaxes respecter mais aussi des problmes : Quand faire la connexion avec BDD, cette variable elle sert quoi etc Et voil, vous laurez compris encore une fois, larchitecture MVC est venu pour parer ce genre de problmes et ce en regroupant les fonctions ncessaires dune application donne en trois catgorie : Modle Vue Contrleur

- Le modle est pour lapplication ce quest un microprocesseur pour un PC, tout doit passer par lui : Traitement des donnes, interactions avec la base de donnes, interactions avec les vues et les contrleurs, etc. Il dcrit en quelque sorte les donnes manipules par lapplication. - La vue est ce avec quoi lutilisateur interagit, ce que voit lutilisateur, pour mon cas, elle sera alors compose essentiellement du HTML. - Le contrleur fait linteraction entre lutilisateur et lapplication, il reoit tous les vnements de lutilisateur et enclenche les actions effectuer. Cest un peu barbu tout a prime abord, mais bon, une fois quon met la main dans la patte, on sy habitue trs vite. J'ai concentr mes recherches sur les quatre frameworks les plus connus. La figure 30 prsente leurs avantages et inconvnients :

Page 18 sur 33

Figure 11 : Comparatif entre les framework PHP.

Pour le choix du framework, je me suis bas aussi sur le benchmark des frameworks PHP :

Figure 12 : Benchmark des framework PHP.

On constate que ces frameworks ont dcoll fin 2005, en mme temps que Ruby on Rails. CakePHP a longtemps t le plus utilis, mais CodeIgniter a pris les devants dbut 2011. Yii est actuellement en train de cartonner et pourrait mme finir par dpasser CodeIgniter dans les prochaines annes (Oui daprs mon titre et mes lignes, vous laurez compris, jai choisi CodeIgniter ). De plus tout ce qui est benchmark et comparaison, il faut noter que tous proposent : Un mcanisme d'internationalisation. Un systme de cache, ce qui allge la charge du serveur et rend le chargement des pages plus rapide du ct utilisateur.

Page 19 sur 33

Des fonctionnalits trs pratiques pour vrifier les donnes transmises via des formulaires.

La version actuelle de Symfony intgre lORM Propel par dfaut, mais la prochaine version le remplacera par Doctrine 2. Mes critres principaux pour le choix dun framework ont t la simplicit dutilisation, lefficacit et la possibilit dintgrer Doctrine 2. CodeIgniter est celui qui ma le plus sduit (Oui, je sais que vous savez dj a). En plus des lments prcdents, il ne ncessite en effet que trs peu de configuration et permet de personnaliser tous les lments du framework.

5. Prsentation de CodeIgniter :
1. Principe gnral : Voici un schma qui prsente le fonctionnement de CodeIgniter (figure 13):

Figure 13 : Explication du fonctionnement de CodeIgniter.

On accde toutes les pages de lapplication via la page index.php. Cest elle qui nous redirige ensuite vers le contrleur demand. Les URL ont la forme suivante : https://www.sitedefilm.com/controleur/methode/parametres.
Aprs le lien du site, on trouve respectivement : Le nom du contrleur excuter. Le nom de la mthode du contrleur. Elle correspond une action raliser. Les paramtres GET passer en paramtre la mthode.

Par exemple, lURL pour accder linterface de cration des questionnaires, que nous verrons plus tard, est recherche/film/1, ce qui signifie quon excute la mthode film() du contrleur questionnaire qui se trouve dans le rpertoire recherche, en lui passant en paramtre lidentifiant du questionnaire : 1. Sur le schma ci-dessus, cest le routeur qui est charg de dcomposer lURL en actions. Il est possible de modifier son comportement pour avoir des URL qui suivent une autre syntaxe.

Page 20 sur 33

Une fois le contrleur trouv, le systme regarde si un fichier cache existe pour la page demande, ce qui permet dacclrer le chargement des pages lorsque leur contenu na pas chang. Si la page nest pas en cache, la requte HTTP est scurise, de mme que les donnes transmises par lutilisateur (cf bote Scurit ). Ensuite seulement le contrleur demand est excut. Dans son code il est notamment possible de faire appel : A des modles, pour accder des donnes. A des bibliothques fournies par CodeIgniter, comme par exemple un systme de sessions bas sur des cookies ou une bibliothque dupload de fichiers. Il est aussi possible de crer ses propres bibliothques. A des helpers , qui sont des fonctions gnriques pouvant tre utilises nimporte o dans lapplication, par exemple pour faciliter la gestion des URL dans le code ou pour faciliter la gestion des dates. L encore il est possible de crer ses propres helpers, et mme de modifier ceux existants pour leur donner un comportement diffrent.

2. Intgration de Doctrine : Doctrine 2 sinstalle dans CodeIgniter comme une bibliothque. Il faut donc crer une classe Doctrine dans un rpertoire spcifique. Son constructeur doit inclure le fichier de configuration de la base de donnes ainsi que le chargeur de classe (ClassLoader) de CodeIgniter.

Figure 14 : Intgration de Doctrine dans CodeIgniter.

Le reste de la configuration se fait ensuite comme dcrit dans la documentation de Doctrine. Il faut notamment renseigner le rpertoire o sont stockes les classes utilises dans lapplication ainsi quun rpertoire o seront gnres des cla sses proxy. Ces classes ajoutent des comportements aux classes de base (les modles) et sont notamment utilises par Doctrine pour faire du lazy-loading, cest--dire extraire de la base de donnes le moins informations possible.

Page 21 sur 33

6. Rcapitulatif des technologies utilises :


La figure 15 fait apparatre les composants et les technologies utiliss pour la cration du site de films, ainsi que leurs interactions.

Figure 15 : Les tapes de cration dun site en gnral de nos jours.

CodeIgniter, qui fonctionne selon une architecture MVC, pose la structure de base du site. Les modles communiquent via la base de donnes MySQL soit directement via la bibliothque de CodeIgniter, soit en passant par lORM Doctrine, qui permet de rcuprer les tuples de la base de donnes sous forme dobjets dans le code PHP. Ceci est trs pratique lorsquil sagit de grer des formulaires, car les associations entre les diffrentes tables sont trs nombreuses. Les requtes SQL quil aurait fallu crire si je navais pas utilis Doctrine auraient t trs compliques et srement moins optimises. Les vues HTML sont gnres par un serveur Apache, et lutilisation de JavaScript dans les pages est assure par le framework jQuery, qui permet de raliser de belles prsentations sans trop de lignes de code.

7. Outils utiliss :
1. Wampserver

Page 22 sur 33

Afin de pouvoir tester le site Internet sur mon ordinateur jai install le logiciel Wamp Server [Wamp], qui est une plateforme de dveloppement de type WAMP (pour Windows Apache MySQL PHP). Il existe un autre logiciel, Easy PHP, qui installe ces environnements de la mme faon que Wamp Server. Apache est un serveur HTTP qui gnre des pages web qui sont envoyes au navigateur. MySQL est un Systme de Gestion de Bases de Donnes Relationnelles (SGBDR) qui permet de stocker des donnes et dexcuter des requtes pour en extraire des tuples qui correspondent un ou plusieurs critres. Wamp Server installe ainsi tous ces logiciels sur lordinateur, ce qui permet de dvelopper et tester des applications web sans tre connect Internet. Cette architecture est aussi possible sur les systmes dexploitation Linux et Mac. On parle alors respectivement de LAMP et MAMP. Cependant, les logiciels sont installer sparment les uns des autres : il nexiste pas, ma connaissance, de logiciel similaire WAMP Server. 2. Sublime Text 2 : Oui, a ne faisait mme pas beaucoup de temps que Notepad++ me suffisait largement, puis jai commenc entendre des louanges de Sublime text sur un groupe du web marocain sur Facebook, et je lai essay. Et le rsultat : Sans aucun doute, le meilleur diteur de texte qui existe mon avis actuellement. Pourquoi ? Pour vraiment de maintes raisons. Alors premire impression ? Cest beau

Oui, il faut tre un peu atteint, avoir le syndrome du programmeur (Non, a nexiste pas, ce nest pas la peine de googler a) pour trouver un diteur de code *beau*, mais bon

Page 23 sur 33

Et cest rapide en plusEt compar dautres diteurs que jai pu tester, je trouve Sublime Text 2 vraiment ractif et il laisse toujours la main lutilisateur (mme pendant une recherche dans les dossiers). Il a quelques fonctions super pratiques par exemple :
. Rechercher un fichier

En tapant Ctrl+P, on effectue une recherche dans tous les fichiers du projet. La recherche fonctionne un peu comme la awesome bar de Firefox. Cest --dire quon peut taper des bouts du chemin et avoir des suggestions correctes. Pour expliquer la chose dune faon un peu plus algorithmique, cest ce quon appelle le fuzzy search.

Figure 16 : Le fuzzy search de Sublime Text.

En ajoutant : vous ouvrez le fichier en plaant le curseur directement la ligne voulue. Cest particulirement utile lorsque vous reprez dun coup dil dans Firebug le nom du fichier css ouvrir et le numro de ligne modifier.

. Changer le layout de lditeur

Pour diter plusieurs fichiers cte cte, il suffit de choisir le nombre de colonnes souhaites avec Alt+Maj+1, Alt+Maj+2, etc
Page 24 sur 33

. dition multicurseurs (attention, cest gnial !)

Il y a plusieurs faons dajouter des curseurs : Ajouter un curseur sur la ligne suivante (ou prcdente) : Ctrl+Alt+Bas (ouCtrl+Alt+Haut) Ajouter un curseur un endroit prcis la souris : Ctrl+Clic Zone rectangulaire : Tracer une zone avec le bouton milieu de la souris

. Multi Copier Coller

Ldition multicurseurs permet aussi de coller sur plusieurs lignes la fois.

Page 25 sur 33

IV. Prsentation du projet :


1. La charte graphique :
Alors, vu la simplicit que prsentait le projet et la donne des contraintes temporelles, on sest vu moi et mon encadrant quil faut faire quelque chose de simple, avec un header, footer et un body assez simple, sans trop de sidebars. Lillustration de la figure suivante peut vous donner une ide premire sur a :

Figure 17 : Prototype de linterface graphique du site.

Jai cherch au dbut intgrer une solution photoshop. Grosso modo, faire quelque chose la main, un design la main, puis faire lintgration HTML et tout. Tche qui semblait aise mais qui ne fut pas du tout aise du tout et qui ma fait perdre du temps et malheureusement en vain (Alors que je manque de temps : 1 mois de stage). Et voil, jai tlcharg un template (Open source, et jinsiste sur a !) sur internet que jai modifi presque compltement, et quand je dis compl tement, mme le code, jai fait en sorte quil soit plus HTML5 et donc quil ait plus de sens (En vue peut-tre dun futur rfrencement du site ?) et donc pour la partie code de la page web et de faon basique (avant lintgration du PHP, CodeIgniter), ctait comme a :

Page 26 sur 33

Figure 18 : Le code HTML du site au dbut.

Pour le design, le design tlcharg mais trop modifi comme jai dit, a donnait ceci :
. Le header :

Figure 19 : Le header du site.

L, normalement, vous devez me dire pourquoi Logodusitedefilms.ext, eh bien cest parce que le nom de domaine utiliser pour le site ntait toujours pas dcid. Jai prfr comme a faire une bauche pour pouvoir continuer mon travail trs laise.
. Le body (De la page daccueil, index, juste pour lexemple) :

Trs basique et trs intuitif, il contient deux blocs, un pour les derniers articles sur le site (Parce quil ny aura pas que les films et sries dans le site. Il y aura aussi des articles, parfois people pour faire le buzz et tout), un autre qui prsente un formulaire de recherche pas trs complet mais en tout cas assez simple des films et sries sur le site (Le choix par catgorie est inclus aussi), la figure suivante vous illustre a :

Page 27 sur 33

Figure 20 : Le body du site (de la page daccueil).

Jaurai dailleurs plus quador que le formulaire de recherche soit fuzzy comme celui de Sublime Text, mais bon, peut-tre dans un autre projet par la suite.
. Le footer :

Oui, normalement ! Parce que cest ce qui vient aprs dans tout site web. Et bien le footer rappelait les liens de la navigation principale, prsentait des liens vers les rseaux sociaux clbres (Parce que les campagnes publicitaires de nos jours doivent et vraiment doivent passer par l), des informations pour le contact et tout mais aussi un disclaimer. Le rsultat ? En photo.

Figure 21 : Le footer du site.

Bien maintenant, on se demande quest-ce quon aura si on cherche un film ou une srie depuis le formulaire ou si on clique sur srie, ou film ou bien articles. Eh bien, quelque chose de basique la allocin. Lorsquon clique sur Articles, on a la liste des articles qui saffichent devant nous prsent dans le site, un peu comme a :

Page 28 sur 33

Figure 22 : Page de liste des articles.

Lorsquon clique sur un film ou une srie, on avait une fiche comm e a, pas pleine dinformation et assez lisible :

Figure 23 : La fiche dun film ou dune srie.

Bien sr, en cliquant sur regarder le trailer (Dans une fentre charge avec Jquery) on est supposs regarder le trailer du film en question. Idem pour je tlcharge. La page de tlchargement est trs simple aussi, elle demande lutilisateur un code envoyer par sms selon lid film/srie et entrer un code dactivation pour tlcharger le film (Du coup, on a vit les solutions allopass et compagnie qui marchaient pas beaucoup au Maroc selon mon encadrant). Encore une fois, le rsultat en photos :

Page 29 sur 33

Figure 24 : La page de tlchargement du site.

2. Le code et son organisation :


Mme si jestime que cette partie nest pas trop ncessaire puisque jai dj parl des outils utiliss et donc tout ce qui va venir ne sera que son application (Je lestime pas ncessaire aussi parce quune remarque mavait t donn dans un rapport fait au premier semestre lcole: Evites de parler trop technique dans un rapport). Alors vues et contrleurs taient rassembls de cette faon-l :

Figure 25 : Lorganisation du code dans le site.

Comprenez par piti quil y a bien lquivalent de ces fichiers dans les contrleurs (Aprs tout, cest du MVC, vous vous souvenez ?).
Page 30 sur 33

Tout ce qui sort du code tait mis comme le veut la rgle de CodeIgniter dans un dossier assets, comme a :

Figure 26 : Les dossiers images, fiches et tout du site.

Aprs, le code, ctait quelque chose qui ressemblait a :

Figure 27 : Limplmentation de CodeIgniter dans le site.

Un peu barbu comme tout code au dbut, mais bon, cest du CodeIgniter, il suffit de sy faire un peu et de lire un peu partout les tutoriels prsents sur internet.

3. La modlisation de la base de donnes :


Et oui, jai tout parcouru et jai failli oublier la chose avec laquelle jai commenc avec mon encadrant : La modlisation de la base de donnes. Vu les contraintes exiges, javais propos cette modlisation (faite la hte laide daccess) qui fut valide par mon encadrant, avec quelque petites modifications mineurs :

Page 31 sur 33

Figure 28 : Le schma de la base de donnes.

Page 32 sur 33

Conclusion :
Alors pour une premire exprience professionnelle dans ma vie au vrai sens du terme ce fut vraiment magnifique. Jai appris travailler sous des conditions nouvelles, dans des contraintes temporelles et sans le tutorat dun professeur et les contraintes concurrentielles. Jai appris aussi surmonter les difficults quon rencontre dans la vie professionnelle : Difficults humaines et techniques. Les humaines, ctait par la patience, le sourire et le silence. Et les techniques ctait par la volont et une bonne endurance. Jai appris les tapes avec lesquelles on mne un projet web de nos jours ; du moins dans mon entreprise, car voyez-vous, je fais du dveloppement web depuis un trs bon moment et depuis toujours et je nai jamais vu le travail dispatch entre quipes avec dlais et tout, je nai jamais travaill et adopt quelque chose en lissus de quelques journes (En loccurrence le framework CodeIgniter). Jai appris (Oui dcidemment jai appris beaucoup de choses) a rdiger un peu plus mieux mes rapports, enfin, un peu. Et puis voil tout, je remercie toutes les personnes qui ont contribu la russite de cette exprience (Mme les grands taxis qui me dplaaient le matin :-D), a fait un joyeux dluge tout a et une belle exprience de ma vie qui restera dans ma mmoire et la mmoire de ce rapport (Eh oui parce que je compte partager au monde ce rapport sur internet :-D ).

Page 33 sur 33