CBI - Producteur de productivité.
Ecole Hassania des Travaux Publics.
Imm CBI, 29/30 Lot. Attaoufik, Sidi Maârouf, 20190 Casablanca – Casablanca – Maroc.
KM 7, Route D’EL JADIDA, B.P 8108, Oasis.
Rapport de stage de 1 ère année Filière Génie Informatique.
Conception et réalisation d’un site web de VOD
(Video on demand) pour les l es réalisateurs et acteurs du cinéma marocain.
Présenté 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 télé-réalité ou une interview télé avec ces remerciements, mais pourtant ils sont bien véridiques et ils sortent des fins fonds de mon cœur. Je dis ça parce que vers les fin juin, je n’avais toujours presque aucune piste de stage, vers les fin juin je fus perdu, vers les fin juin je n’attendais que la fin de l’année scolaire pour honnêtement se détacher de l’atmosphère pas du tout accueillante qui régnait en classe durant ces temps-là temps -là ; En d’autres termes, vers les fins juin, je fus seul dans une jungle qu’est la vie avec pour seul arme un rien. Arf parfois, j’ai tendance à dramatiser les 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 d’abord à remercier ma famille, père, mère, sœur et frère qui n’ont cessé de me rassurer durant toutes ces périodes de rien, qui qu i n’ont jamais cessé de me regénérer 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 m es deux meilleurs amis Souhail et Anass, mon ami et super collègue de classe Wail ELBATTARI, qui en avait un peu marre aussi de l’atmosphère et qui a bien vu ma situation des fin juin et m’a aidé à trouver trouver un stage chez Crédit du Maroc (Que j’ai refusé d’ailleurs !). Pour l’entreprise, bien sûr que j’y viens. Je tiens à remercier mon vo isin monsieur BOUZAÂCHAN qui sans lui, je n’aurai peut-être peut-être pas eu une telle chance, sûrement jamais. Je remercierai beaucoup beaucoup aussi monsieur Amine Mounir Mounir ALAOUI, le directeur général de la société CBI qui m’a adopté, fait de moi son fils et stagiaire et pour pour avoir fait de sa personne mon propre encadrant. Je remercierai aussi et beaucoup l’équipe CBI du 4 ème étage, qui se reconnaîtra sûrement : Monsieur Aziz LAGZOULI qui passait toujours pour me réconforter et me parler du monde, du tout et de rien, Mme Meriem qui nous préparait de temps à autre du thé, des crêpes, nous sortait des blagues et nous faisait sortir de l’atmosphère entreprise (Et il faut l’avouer, je ne me suis jamais senti en travail ! Il n’y avait que le PC devant moi qui me faisait cette sensation, sensation, même Facebook n’est pas banni pour le monde, c’était de l’hyper l’hyper confiance qui régnait dans l’entreprise), 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 réel ou dans le Gtalk ou Linkedin ou autre.) Je vous l’accorde, ça fait beaucoup de remerciements mais vous allez m’accorder aussi qu’il ne faut oublier personne quand il s’agit de ce genre de choses.
Page 2 sur 33
Table des illustrations : Figure 1 : Organigramme de l'entreprise CBI ............................................................. 7 Figure 2 : L’histoire de CBI au fil des années ............................................................. 8 Figure 3 : Les domaines d’activité de CBI .................................................................. 8 Figure 4 : Principe de base d’une requête HTTP. ..................................................... 13 Figure 5 : Exemple d’un code en HTML. .................................................................. 13 Figure 6 : Comparatif entre les langages de programmation. .......................... ............. ...................... ......... 14 Figure 7 : Exemple de requête dans un ORM. ......................................................... 15 Figure 8 : Explication du procédé d’un ORM. ........................................................... 16 Figure 9 : Illustration de l’architecture 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 : Intégration de Doctrine dans CodeIgniter. .............................................. 21 Figure 15 : Les étapes de création d’un site en général de nos jours....................... jours. ...................... 22 Figure 16 : Le fuzzy search de Sublime Text. .......................... ............. .......................... ........................... .................... ...... 24 Figure 17 : Prototype de l’interface graphique du site. ............................................. 26 Figure 18 : Le code HTML du site au début. .......................... ............. .......................... .......................... ...................... ......... 27 Figure 19 : Le header du site. ................................................................................... 27 Figure 20 : Le body du site (de la page d’accueil). ................................................... 28 Figure 21 : Le footer du site. ..................................................................................... 28 Figure 22 : Page de liste des articles.......................... ............ .......................... .......................... .......................... .................... ....... 29 Figure 23 : La fiche d’un film ou d’une série. ............................................................ 29 Figure 24 : La page de téléchargement du site. ....................................................... 30 Figure 25 : L’organisation du code dans le site. ....................................................... 30 Figure 26 : Les dossiers images, fiches et tout du site. ............................................ 31 Figure 27 : L’implémentation de CodeIgniter dans le site. ......................... ............ ......................... ............... ... 31 Figure 28 : Le schéma de la base de données. .......................... ............ ........................... .......................... ................. .... 32
Page 3 sur 33
Table des matières : Remerciement : .......................................................................................................... 2 Table des illustrations : ............................................................................................... 3 Table des matières : ................................................................................................... 4 Glossaire : .................................................................................................................. 5 I. Introduction : ............................................................................................................ 6 II. Présentation de l’entreprise d’accueil : ................................................................... 7 Métiers et services de CBI : .................................................................................................... ................................................................................................................. ............. 8 Métiers de CBI ............................................................................................................................ ................................................................................................................................. ..... 8 Services de CBI..................................................................... ............................................................................................................................... .......................................................... 11
III. Choix techniques et implémentation : .................................................................. 13 1.
Principe de base : ........................................................... ...................................................................................................................... ........................................................... 13
2.
Choix du langage de programmation programmation : ............................................................. ...................................................................................... ......................... 14
3.
Choix d’un outil de mapping objet-relationnel objet-relationnel : ....................................................................... 15
4.
Etudes et choix des frameworks PHP : ............................................................. ...................................................................................... ......................... 16
5.
Présentation de CodeIgniter CodeIgniter : .............................................................. ................................................................................................... ..................................... 20 1.
Principe général : .................................................................... ................................................................................................................... ............................................... 20
2.
Intégration de Doctrine : ................................................................... ....................................................................................................... .................................... 21
6.
Récapitulatif des technologies technologies utilisées : ......................................................... .................................................................................. ......................... 22
7.
Outils utilisés : ................................................................. ........................................................................................................................... .......................................................... 22 1.
Wampserver ............................................................... .......................................................................................................................... ........................................................... 22
2.
Sublime Text 2 : ...................................................................... ..................................................................................................................... ............................................... 23
IV. Présentation du projet : ....................................................................................... 26 1.
La charte graphique :.................................................................. ................................................................................................................. ............................................... 26
2.
Le code et son organisation :................................................................. ..................................................................................................... .................................... 30
3.
La modélisation de la base de données : ......................................................... .................................................................................. ......................... 31
Conclusion : .............................................................................................................. 33
Page 4 sur 33
Glossaire : HTML : Acronyme pour HyperText Markup Language, un langage de balisage conçu
pour le formatage et représentations des pages web. Sa dernière version HTML5 couplée à CSS3 et Javascript offre plus de possibilités : Notamment la géolocalisation (Les SIGs et topographes du monde voudront bien connaître ces fonctionnalités la), la possibilité de faire f aire des dessins avec la balise canvas (Faites des recherches, on fait maintenant des jeux avec ça même) et bien encore plus. API : Signifie « Application Programming Interface », ou « Interface de
programmation » en français. Une API est un ensemble de classes qui permet l’interopérabilité de plusieurs composants logiciels. Cache : Le cache est un mécanisme qui consiste à enregistrer temporairement sur le
disque dur des données provenant d’un site Internet de manière à pouvoir y accéder plus rapidement les fois suivantes. Plugin : Un plugin est un module d’extension qui permet d’ajouter des fonctionnalités
à un logiciel. correspondance Mapping : Le mapping est une opération qui consiste à mettre en correspondance des données issues de plusieurs modèles de données différents. Javascript : Abrégé parfois JS, est un langage de programmation de scripts côté
client mais parfois, très parfois côté serveur. Il sert à faire des vérifications des formulaires et des choses ‘’dynamiques’’ dont je ne saurai vous décrire en mots. Jquery : Une bibliothèque Javascript qui porte sur l’interaction entre Javascript et
HTML. Responsive design : On en parle beaucoup très récemment avec l’avènement des
smartphones et tablettes. Un design est di t responsive lorsqu’il s’adapte à l’écran, enfin même à la fenêtre du navigateur. Une sidebar on la cacherait pour un utilisateur de smartphone … 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 langage HTML. Sa dernière version CSS3 offre une très grande flexibilité. f lexibilité.
Page 5 sur 33
I. Introduction :
Contrairement à ce que quelques personnes pourraient penser (Mes collègues de classe à titre d’exemple), l’expérience du développement web de cet été me fut super enrichissante. Enrichissante dans la limite où ça m’a m ’a permis de toucher à un framework framework pour la première fois, en l’occurrence CodeIgniter et utiliser avec un ORM encore une fois, pour la première fois, Doctrine. D’ailleurs c’est mon intérêt pour le développement web qui m’a poussé à dire OUI pour le projet et aller vers l’avant. Ceci dit, en plus des remerciements (trop pompeux pour certains peut-être ?) que vous avez lu ci-dessus, du lexique informatique (Sans trop d’intérêt ?), je vais essayer de parcourir un peu en bref l’objectif de mon stage, sa réalisation et les difficultés qui ont été rencontrées dans ce dernier. Un IMDB ou un allociné marocain, possible ? Pour les gens du CBI, oui. Pour eux, il ne suffit pas d’avoir hollywood ou un festival cannes pour qu’il ait un site de la sorte. Leur motif : Grand nombre de réalisateurs et acteurs du cinéma marocain ont fait leur vœux de voir naître au monde un site pareil, avec non seulement les trailers, articles et tout, mais aussi les films et séries en téléchargement (Bien sûr avec paiement au préalable avec un système automatisé par SMS. On y reviendra par la suite), ceci dit, un site video on demand. Pour faire ce travail, t ravail, j’ai dû tout d’abord m’équiper m ’équiper des outils nécessaires (Logiciels et frameworks), je les parcours ici en bref, mais je vais les détailler après par la suite : WampServer, CodeIgniter, Doctrine, etc. Bien après ceci, j’ai commencé à faire une analyse des besoins en parlant avec mon encadrant. Resultat, un système d’articles, un autre pour la consultation des films et séries qui existent dans le site et le tout pouvant être tr ouvé ouvé à l’aide d’un formulaire de recherche. J’ai modélisé par la suite la base de données à l’aide d’access, implémenté grâce à phpmyadmin. Et en parallèle à tout ceci, j’ai étudié les différentes technologies MVC qui étaient à ma disposition afin d’utiliser d’utilis er celle qui me convient le plus. Toutes ces choses faites, j’ai fait après l’interface graphique du site, un peu simpliste, pas trop ‘’bootstrapé’’ (Depuis un template t emplate téléchargé et modifié) et implémenté les fonctionnalités qui étaient demandées (Listing des films, des séries, possibilité de téléchargement avec SMS et tout ça).
Page 6 sur 33
II. Présentation de l’entreprise d’accueil :
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'amélioration de leur performance. Depuis sa création en 1970, CBI a été guidée par une culture du changement et de l’innovation. Ses plus de 150 consultants se différencient par la synergie multi- compétences tant sur les volets métier que sur le volet technologique. L'offre solution de CBI intègre des activités complémentaires à savoir la bureautique, l’informatique, l'intégration systèmes et les télécommunications. Cette offre est constituée de produits de haute technologie leaders sur leurs marchés. Les équipes de CBI sont formées en permanence aux technologies les plus récentes et possèdent tous les atouts et l’enthousiasme pour vous accompagner dans vos projets pour plus de productivité. L’organigramme ci-dessous ci-dessous présente les différentes directions de CBI :
Figure 1 : Organigramme de l'entreprise CBI
Page 7 sur 33
L’histoire de CBI se confond avec celle des technologies de l’information au Maroc et dans le monde. CBI a pu ainsi s’adapter en permanence aux différen tes révolutions tant dans le secteur informatique que celui des télécommunications et comme ça initier dans notre pays les dernières évolutions technologiques. technologiques. Ci-dessous quelques années phares qui marquent l’historique de CBI :
Figure 2 : L’histoire de CBI au fil des années
Métiers et services de CBI :
CBI se distingue par sa couverture globale des besoins d’Entreprise en matière de Systèmes d’Information (SI). Aujourd’hui encore cette culture lui permet d’être à la pointe de la convergence numérique et d’offrir aux entreprises nationales et africaines des solutions globales intégrant dans une synergie parfaite les compétences de ses métiers et ses services.
Figure 3 : Les domaines d’activité de CBI
Métiers de CBI
Télécom
CBI TELECOMS s’est positionné comme le spécialiste dans la mise en place des solutions Réseau et Télécommunication. Par ses partenariats, CBI TELECOMS accompagne ses clients dans la mise en œuvre Page 8 sur 33
d’une véritable politique collaborative de la façon la plus efficiente possible. Précurseur Précurseur dans la mise en œuvre de nombreuses technologies, le Pôle a su ainsi développer une expérience inédite dans toutes les étapes de transport de l‘information, depuis son émission jusqu’à sa livraison et bien évidemment en prenant en compte les exigences des politiques de sécurité de ses clients.
Mission Mise en place des solutions réseaux et télécommunications
Accompagnement Accompagnement des clients dans la mise en œuvre d'une politique collaborative collaborative efficiente Expert dans toutes les étapes de transport, émission et livraison de l'information Solution Réseau
Routage & interconnexion (WAN) Switching & réseau local (LAN) Réseau sans fils (WIRELESS) Gestion centralisée des services (CHCP, DNS…) Sécurité
Sécurité d'accès (Firewall, UTM, VPN, IPS…) Prévention de la fuite des données Prévention d'instruction / Confidentialité des communication réseau (VPN) Filtrage mail / Web Authentification / Autorisation / Accounting Accounting Sécurité de poste de travail (Antivirus, Cryptage) Solutions opérateurs
Communication voix / Vidéo Service managés basé sur l'infogérance réseau des clients des opérateurs Routage et qualité de service opérateur Communication unifié
Téléphonie IP Messagerie unifié Visio conférence Affichage dynamique
Systèmes
CBI SYSTEMES a pour vocation de mettre à disposition de ses clients les meilleures Solutions répondant aux différents besoins suivants : • •
Poste utilisateur : Poste de travail, périphériques, client léger... Serveurs : Consolidation, clustering... Page 9 sur 33
• • •
Stockage Stockage : Optimisation, Systèmes de sauvegarde, Système d’archivage Virtualisation : Serveur, Applications, Stockage, Poste utilisateur Datacenter : Armoires, Systèmes de câblage, accessoires, onduleurs.
CBI Systèmes
S’assure par ailleurs, que ses produits produi ts & services fournissent un haut niveau d’efficacité et de rendement, valorisant de façon optimale l’infrastructure informatique de ses clients. M i s s i o n Dés réponses aux différents besoins affaires aux traitements disponibles et pérennités de l’information l’information Garantie d’un haut niveau d’efficacité et de rendement S o l u t i o n Poste utilisateurs Facility management Définition d’architecture matériel Déploiement Maintenance Support Serveur IBM : IBM système & Blade H P : Proliant CISCO : UCS Stockage C o n s o l i d a t io i o n : IBM SAN, DS8000, DS6x00, DS4x00, NAS Storewyze, V7000, EMC VNxe, VNX Système m anagem ent et s auveg arde : Sauvegarde / Restauration : Gestion de la continuité de service et de la vie des données. G e s ti t i o n d u s t o c k a g e : Gestion automatique des plateformes du stockage hétérogène A r c h i v a g e : données financières et archivage légal Virtualisation Citrix VMware PowerVM Datacenter Environnement DATACENTER : Armoire, système de cablage, accessoires, onduleur… CBI Cloud :
Page 10 sur 33
Externalisation et optimisation de la gestion des infrastructures Une palette de service et de modèle contractuel : Fourniture de puissance informatique dédié, ou stockage mutualisé. Proposition d’un environement environement (State of the art) pour les les offres IAAS, PAAS, SAAS
SOFTWARE
CBI SOFTWARE assure la mise en œuvre d’une infrastructure logicielle globale répondant à différentes problématiques de l’entreprise quant à la génération et la disponibilité de son information. Les principales solutions qui se proposent sont : • •
•
Customer Relationship Management (CRM) : Traçabilité, archivage, Workflow Décisionnel/ Business Intelligence: Datawarehouse, Reporting Contrôle de gestion/Calcul de coûts ; Business Information Management : Knowledge Management, G estion Électronique o Documentaire (GED); o ERP : ERP Global, ERP Finances/Trésorerie.
•
EDITIQUE
•
Expert de la Gestion du Document depuis 1970, CBI EDITIQUE a pu développer son savoir- faire en intégrant les enjeux de la gestion du document dans des Systèmes d’Information (SI) de plus en plus complexes. Par ailleurs, à travers sa présence sur les six plus grandes villes du Royaume, CBI EDITIQUE assure une plus large couverture géographique. •
DISTRIBUTION
CBI était la pionnière à identifier la tendance t endance de la miniaturisation miniaturisation et l’équipement léger, en introduisant les premiers PC portables au Maroc en partenariat avec Toshiba. En 2004, CBI s’est orienté vers la distribution, vu la valeur ajoutée 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 différentes missions et mettent à leur disposition toute leur expertise acquise lors des différents Page 11 sur 33
projets pilotés sur différents secteurs. CBI possèdent aussi une grande équipe technique afin de garantir un bon déploiement de ses solutions. Elle suggère aussi des formations à ses clients afin de garantir la mise à jour des connaissances de ses clients. Les services proposés par CBI se résument comme suit : • • • •
Conseil & Audit Intégration Formation Contrats de service
Page 12 sur 33
III. Choix techniques et implémentation : 1. Principe de base :
Lorsqu’un internaute demande à consulter une page d’un site Internet, il envoie une requête HTTP (pour « HyperText Transfer Protocol », ou « protocole de transfert hypertexte » en français) au serveur qui héberge le site, sous la forme d’une d’une URL tel que http://www.maroc.ma . Le serveur génère alors la page demandée et la retourne en réponse au navigateur du client, qui se charge de l’afficher : l’afficher :
Figure 4 : Principe de base d’une requête HTTP .
Le langage utilisé pour représenter une page est le HTML (pour « HyperText Markup Language », ou « langage de balisage hypertexte » en f rançais). Il permet de structurer les informations d’une façon logique. Dans l’exemple ci -dessous (Figure 5), on a un header avec un menu :
Figure 5 : Exemple d’un code en HTML.
La page est ensuite mise en forme par des feuilles de style CSS qui associent à des éléments des mises en forme particulières, pour colorer du texte par exemple. Ces feuilles déterminent le design du site. Si le site est statique, le serveur ne fait que délivrer des pages HTML dont le contenu ne change jamais. Si le site est dynamique, c’est-à-dire c’est -à-dire que le contenu des pages change en fonction de certains paramètres (comme le profil de la personne
Page 13 sur 33
connectée), alors il est nécessaire d’utiliser un langage de programmation pour déterminer les informations à renvoyer au client. 2. Choix du langage de programmation :
Il existe plusieurs langages de programmation utilisés pour créer des sites Internet Inter net dynamiques. Voici un tableau décrivant les avantages et inconvénients des principaux langages :
Figure 6 : Comparatif entre les langages de programmation.
Le PHP (pour « PHP: Hypertext Preprocessor », ou « PHP : Préprocesseur hypertexte ») est un langage très tr ès répandu dans le monde amateur, mais moins dans le monde professionnel, où il a parfois mauvaise réputation. En effet, ce langage permet beaucoup de libertés, ce qui peut conduire à un code qui devient difficilement diff icilement gérable s’il est mal utilisé. Certaines entreprises attachent à PHP une image d’amateurisme et de bidouille. Il y a en revanche une très grande communauté d’utilisateurs, ce qui induit de nombreuses sources d’informations disponibles sur Internet. D’autre part, un site PHP est très facilement fac ilement déployable et fonctionne avec tous les systèmes d’exploitation, que ce soit Mac, Linux ou Windows. Le développement d’applications web JEE (Java Enterprise Edition) se fait souvent avec le framework Struts. Cette infrastructure m’a semblé plutôt lourde l ourde à mettre en place dans le cadre de ce projet (Et encore il fallait l ’apprendre ce qui allait me coûter encore plus de temps et temps). Il fallait en effet que le développement commence commence plutôt rapidement après les phases d’analyse et de choix techniques. Il y a en revanche beaucoup de documentation documentation sur Internet du fait de la grande utilisati on de ce langage par les entreprises, et nombre de bibliothèques et d’outils sont disponibles. Pour utiliser cette infrastructure, un serveur d’application doit être mis en place, tel que GlassFish ou JBoss. ASP.Net, qui fait partie de la plateforme Microsoft .Net, possède possède de nombreuses API API mais aussi l’inconvénient de ne fonctionner que sur un serveur web IIS (pour « Internet Information Services »). Il faut cependant noter l’existence du projet [Mono] qui a pour but de porter les applications .Net sous Linux. Ruby On Rails est un framework web très jeune, car sa première version est sortie en 2004. D’après les témoignages que j’ai lus sur Internet, ce framework f ramework est assez Page 14 sur 33
long à prendre en main mais peut être très efficace. D’autre part, les API changent rapidement et certaines deviennent assez vite obsolètes car non maintenues. Etant donnés tous ces éléments et les contraintes relatives à ce projet, j’ai choisi d’utiliser le langage PHP, qui présente un bon compromis entre la rapidité de mise en place et les performances… performances …mais bien sûr aussi un bon compris aussi avec mes compétences. compétences. J’ai ensuite dû faire le choix de construire le site entièrement moi même ou d’utiliser un framework. J’ai donc fait des recherches sur ces outils ainsi sur des outils d’accès aux bases de données. 3. Choix d’un outil de mapping objet -relationnel -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 néanmoins les plus réputés et les plus utilisés. 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 récupérer les données en base : un objet correspond à un tuple de la base de données. Ainsi, lorsque l'objet est modifié, le tuple l'est aussi. D'autre part, il f aut que chaque classe redéfinisse certaines méthodes et / ou étende une classe de base. Ainsi, dans Doctrine 1.x chaque chaque classe doit hériter de Doctrine_Record Doctrine_Record et implémenter une méthode setTableDefinition() setTableDefinition() qui décrit la structure de l'objet dans la base de données. La version 2 de Doctrine utilise un autre patron de conception : Data Mapping. Cela consiste à faire correspondre deux modèles de données : le modèle objet et le modèle de la base de données. L'avantage est que l'on peut ainsi accéder aux donner sans connaître la structure de la base. Cette dernière version de Doctrine s'inspire beaucoup du framework [Hibernate], très réputé en Java. En effet, Doctrine possède son propre langage de requêtage, DQL (pour « Doctrine Query Language »), à l'instar d'Hibernate qui propose le langage HQL (pour « Hibernate Query Language »). Il permet de gérer la persistance des données d'une manière SQL orientée objet.
Figure 7 : Exemple de requête dans un ORM.
Dans l’exemple précédent (figure 7), on sélectionne tous les utilisateurs qui habitent à Berlin. Les champs figurant dans la requête, comme a.city, sont les propriétés des
Page 15 sur 33
objets et non les colonnes des tables SQL. Les résultats sont « hydratés », c’est-àc’est -àdire transformés en objets tels que définis dans les classes PHP (figure 8).
Figure 8 : Explication du procédé d’un ORM.
Après de nombreuses recherches sur Internet, il m'a paru évident évident que Doctrine, dans sa version 2, est le plus complet des ORM. De plus, il possède une communauté active et une documentation très bien rédigée. J'ai néanmoins passé du temps au début du stage pour trouver comment le l e configurer. Par rapport à sa dernière version 1, Doctrine 2 apporte :
30% de gain mémoire. 20% de gain de rapidité rapid ité d’exécution. L'utilisation d'annotations ou de fichiers XML pour décrire le mapping objet / base de données. En comparaison, Hibernate utilise des fichiers XML et JPA (pour « Java Persistence API ») utilise les annotations.
4. Etudes et choix des frameworks PHP :
Après avoir choisi le langage langage PHP pour le développement, développement, je me suis demandé s’il serait mieux de construire le site entièrement moi-même ou si un framework pourrait simplifier une partie du développement. 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 fonctionnalités déjà implémentées. Tous utilisent une architecture Modèle Vue Contrôleur (MVC, figure 9).
Figure 9 : Illustration de l’architecture MVC.
Avant de détailler, l’architecture MVC, je détaille un peu peu d’abord le design pattern, notion plus générale que l’architecture MVC. Alors pour le design pattern, et lorsque qu’on part faire un petit tour chez Wikipédia on a ceci :
Figure 10 : Les types de d esign pattern qui existent de nos jours.
Alors, vous comprendrez comprendrez avec moi que c’est toute une une théorie à part ; Oui essayez quand même de voir la diversité de design patterns qu’on y trouve. Page 17 sur 33
Je ne vais pas m’attarder trop là-dessus, 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 prévention d’un éventuel problème lors de la conception d’un logiciel. Enfin, on va dire c’est l’expérience et la pratique des programmeurs transmises sous forme d’une théorie à part. Pour ma part, et comme le savez maintenant très bien, j’ai bien, j’ai utilisé l’architecture MVC (Acronyme de Module-Vue-Contrôleur) Module -Vue-Contrôleur) comme design pattern du développement. Maintenant, passons un peu plus au particulier et donnons plus d’explications au dessin du schéma ci-dessus. Si vous avez déjà développé 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 rédigé, mal organisé, même avec l’indentation et tout le tralala qui va avec. Le problème ce n’est pas vous, c’est que plusieurs langages interagissent dans un seul et unique fichier fi chier et ceci crée plusieurs syntaxes à respecter mais aussi des problèmes : Quand faire la connexion avec BDD, cette variable elle sert à quoi etc… Et voilà, vous l’aurez compris encore une fois, l’architecture MVC est venu pour parer ce genre de problèmes et ce en regroupant les fonctions nécessaires d’une application donnée en trois catégorie : -
Modèle Vue Contrôleur
- Le modèle est pour l’application ce qu’est un microprocesseur pour un PC, tout doit passer par lui : Traitement des données, interactions avec la base de données, interactions avec les vues et les contrôleurs, etc. Il décrit en quelque sorte les données manipulées par l’application. - La vue est ce avec quoi l’utilisateur interagit, ce que voit l’utilisateur, pour mon cas, elle sera alors composée essentiellement du HTML. - Le contrôleur fait l’interaction entre l’utilisateur et l’application, il reçoit tous les événements de l’utilisateur et enclenche les actions à effectuer. C’est un peu barbu tout ça à prime abord, mais bon, une fois qu’ on met la main dans la patte, on s’y habitue très vite. J'ai concentré mes recherches sur les quatre frameworks les plus connus. La figure 30 présente leurs avantages et inconvénients :
Page 18 sur 33
Figure 11 : Comparatif entre les framework PHP.
Pour le choix du framework, f ramework, je me suis basé aussi sur le benchmark des frameworks PHP :
Figure 12 : Benchmark des framework PHP.
On constate que ces frameworks ont décollé fin 2005, en même temps que Ruby on Rails. CakePHP a longtemps été le plus utilisé, mais CodeIgniter a pris les devants début 2011. Yii est actuellement en train de cartonner et pourrait même finir par dépasser CodeIgniter dans les prochaines années (Oui d’après mon titre et mes lignes, vous l’aurez compris, j’ai choisi CodeIgniter ). De plus à tout ce qui est benchmark et comparaison, il faut noter que tous proposent : Un mécanisme d'internationalisation. Un système de cache, ce qui allège la charge du serveur et rend le chargement des pages plus rapide du côté utilisateur.
Page 19 sur 33
Des fonctionnalités très pratiques pour vérifier les données transmises via des formulaires.
La version actuelle de Symfony intègre l’ORM Propel par défaut, mais la prochaine version le remplacera par Doctrine 2. Mes critères principaux pour le choix d’un f ramework ont été la simplicité d’utilisation, d’ut ilisation, l’efficacité et la possibilité d’intégrer Doctrine Doctri ne 2. CodeIgniter est celui qui m’a le plus séduit (Oui, je sais que vous savez déjà ça). En plus des éléments précédents, il ne nécessite en effet que très peu de configuration et permet de personnaliser per sonnaliser tous les éléments du framework. 5. Présentation de CodeIgniter : 1. Principe général :
Voici un schéma qui présente le fonctionnement de CodeIgniter (figure 13):
Figure 13 : Explication du fonctionnement de CodeIgniter.
On accède à toutes les pages de l’application via la page index.php. C’est elle qui nous redirige ensuite vers le contrôleur demandé. Les URL ont la forme suivante : https://www.sitedefilm.com/controleur /methode/parametres. Après le lien du site, on trouve respectivement respectivement : Le nom du contrôleur à exécuter. Le nom de la méthode du contrôleur. Elle correspond à une action à réaliser. Les paramètres GET à passer en paramètre à la méthode.
Par exemple, l’URL pour accéder à l’interface de création des questionnaires, que nous verrons plus tard, est recherche /film/1, ce qui signifie qu’on exécute la méthode film() du contrôleur questionnaire qui se trouve dans le répertoire recherche, recherche, en lui passant en paramètre l’identifiant du questionnaire : 1. Sur le schéma ci-dessus, ci-dessus, c’est le routeur qui est chargé de décomposer l’URL 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 contrôleur trouvé, le système regarde si un fichier cache existe pour la page demandée, ce c e qui permet d’accélérer le chargement des pages lorsque leur contenu n’a pas changé. Si la page n’est pas en cache, la requête HTTP est sécurisée, de même que les données transmises par l’utilisateur (cf boîte « Sécurité »). Ensuite seulement le contrôleur demandé est exécuté. Dans son code il est notamment possible de faire appel :
A des modèles, pour accéder à des données. A des bibliothèques fournies par CodeIgniter, comme par exemple un système de sessions basé sur des cookies ou une bibliothèque d’ upload de fichiers. Il est aussi possible de créer ses propres bibliothèques. A des « helpers », qui sont des fonctions génériques pouvant être utilisées n’importe où dans l’application, par exemple pour faciliter la gestion des URL dans le code ou pour faciliter la gestion des dates. Là encore il est possible de créer ses propres helpers, et même de modifier ceux existants pour leur donner un comportement différent.
2. Intégration de Doctrine :
Doctrine 2 s’installe dans CodeIgniter comme une bibliothèque. Il faut donc créer une classe Doctrine dans un répertoire spécifique. Son constructeur doit inclure le fichier de configuration de la base de données ainsi que le chargeur de classe (ClassLoader) de CodeIgniter.
Figure 14 : Intégration de Doctrine dans CodeIgniter.
Le reste de la configuration se fait ensuite comme décrit dans la documentation de Doctrine. Il faut notamment renseigner le répertoire où sont stockées les classes utilisées dans l’application ainsi qu’un répertoire où seront générées des cla sses proxy. Ces classes ajoutent des comportements aux classes de base (les modèles) et sont notamment utilisées par Doctrine pour faire du lazy-loading, lazy- loading, c’est-à-dire c’est-à-dire extraire de la base de données le moins informations possible.
Page 21 sur 33
6. Récapitulatif des technologies utilisées :
La figure 15 fait apparaître les composants et les technologies utilisés pour la création du site de films, ainsi que leurs interactions.
Figure 15 : Les étapes de création d’un site en général de nos jours.
CodeIgniter, qui fonctionne selon une architecture MVC, pose la structure de base du site. Les modèles communiquent via la base de données MySQL soit directement via la bibliothèque de CodeIgniter, soit en passant par l’ORM Doctrine, qui permet de récupérer les tuples de la base de données sous forme d’objets dans le code PHP. Ceci est très pratique lorsqu’il s’agit de gérer des formulaires, car les associations entre les différentes tables sont très nombreuses. Les requêtes SQL qu’il aurait fallu écrire si je n’avais pas utilisé utilis é Doctrine auraient été très compliquées et sûrement moins optimisées. Les vues HTML sont générées par un serveur Apache, et l’utilisation de JavaScript dans les pages est assurée par le framework f ramework jQuery, qui permet de réaliser de belles présentations sans trop de lignes de code. 7. Outils utilisés : 1. Wampserver
Page 22 sur 33
Afin de pouvoir tester le site Internet sur mon ordinateur j’ai installé le logiciel « Wamp Server » [Wamp], qui est une plateforme de développement de type WAMP (pour Windows Apache MySQL PHP). Il existe un autre logiciel, Easy PHP, qui installe ces environnements de la même façon que Wamp W amp Server. Apache est un serveur serveur HTTP qui génère des pages pages web qui sont envoyées envoyées au navigateur. MySQL est un Système de Gestion de Bases de Données Relationnelles (SGBDR) (S GBDR) qui permet de stocker des données et d’exécuter des requêtes pour en extraire des tuples qui correspondent à un ou plusieurs critères. Wamp Server installe ainsi tous ces logiciels sur l’ordinateur, ce qui permet de développer et tester des applications web sans être connecté à Internet. Cette architecture est aussi possible sur les systèmes d’exploitation Linux et Mac. On parle alors respectivement de LAMP et MAMP. Cependant, les logiciels sont à installer séparément les uns des autres : il n’existe n’existe pas, à ma connaissance, de logiciel similaire à WAMP Server. 2. Sublime Text 2 :
Oui, ça ne faisait même pas beaucoup de temps que Notepad++ me suffisait largement,, puis j’ai commencé à entendre des louanges de Sublime text sur un largement groupe du web marocain sur Facebook, sur Facebook, et je l’ai essayé. Et le résultat : Sans aucun doute, le meilleur éditeur de texte qui existe à mon avis actuellement. Pourquoi ? Pour vraiment de maintes raisons. Alors première impression ? C’est beau…
Oui, il faut être un peu atteint, avoir avoir le le syndrome du programmeur (Non, ça n’existe pas, ce n’est pas la peine de googler ça) pour trouver un éditeur de code *beau*, mais bon…
Page 23 sur 33
Et c’est rapide en plus… plus…Et comparé comparé à d’autres éditeurs que j’ai pu tester, je trouve Sublime Text 2 vraiment réactif et réactif et il laisse toujours la main à l’utilisateur (même 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. pr ojet. La recherche recherche fonctionne un peu comme la « awesome bar » de Firefox. C’est-à-dire C’est -à-dire qu’on peut taper des bouts du chemin et avoir des suggestions correctes. Pour expliquer la chose d’une façon un peu plus algorithmique, c’est ce qu’on appelle le fuzzy search.
Figure 16 : Le fuzzy search de Sublime Text.
En ajoutant ‘:’ vous ouvrez le fichier en plaçant le curseur directement à la ligne voulue. C’est particulièrement utile lorsque vous repérez d’un coup d’œil dans Firebug le nom du fichier css à ouvrir et le numéro de ligne à modifier.
. Changer le layout de l’éditeur
Pour éditer plusieurs fichiers côte à côte, il suffit de choisir le nombre de colonnes souhaitées avec Alt+Maj+1, Alt+Maj+2, etc… Page 24 sur 33
. Édition multicurseurs (attention, c’est génial !)
Il y a plusieur s façons d’ajouter des curseurs : Ajouter un curseur sur la ligne suivante suivante (ou précédente) : Ctrl+Alt+Bas (ouCtrl+Alt+Haut) Ajouter un curseur à un endroit précis à la souris : Ctrl+Clic Zone rectangulaire : Tracer une zone avec le bouton milieu de la souris
. Multi Copier Coller
L’édition multicurseurs permet aussi de coller sur plusieurs lignes à la fois. fois .
Page 25 sur 33
IV. Présentation du projet : 1. La charte graphique :
Alors, vu la simplicité que présentait présentait le projet et la donnée des contraintes temporelles, on s’est vu moi et mon encadrant qu’il faut faire quelque chose de simple, avec un header, footer et un body assez simple, sans trop de sidebars. L’illustration de la figure f igure suivante peut vous donner une idée première sur ça :
Figure 17 : Prototype de l’interface graphique du site.
J’ai cherché au début à intégrer une solution photoshop. Grosso modo, à faire quelque chose à la main, un design à la main, puis faire l’intégration HTML et tout. Tâche qui semblait aisée mais qui ne fut pas du tout aisée du tout et qui m’a fait perdre du temps et malheureusement en vain (Alors que je manque de temps : 1 mois de stage). Et voilà, j’ai téléchargé un template (Open source, et j’insiste sur ça !) sur internet que j’ai modifié presque complètement, et quand je dis complè tement, même le code, j’ai fait en sorte qu’il soit plus HTML5 et donc qu’il ait plus de sens (En vue peut-être peut-être d’un futur référencement du site ?) et donc pour la partie code de la page web et de façon basique (avant l’intégration du PHP, CodeIgniter…), CodeIgniter…) , c’était comme ça :
Page 26 sur 33
Figure 18 : Le code HTML du site au début.
Pour le design, le design téléchargé mais trop modifié comme j’ai dit, ça donnait ceci : . Le header :
Figure 19 : Le header du site.
Là, normalement, vous devez me dire pourquoi ‘’Logodusitedefilms.ext’’, eh bien c’est parce que le nom de domaine à utiliser pour le site n’était toujours pas décidé. J’ai préféré comme ça faire une ébauche pour pouvoir continuer mon travail très à l’aise. . Le body (De la page d’accueil, index, juste pour l’exemple) :
Très basique et très intuitif, il contient deux blocs, un pour les derniers articles sur le site (Parce qu’il n’y aura pas que les films et séries dans le site. I l y aura aussi des articles, parfois people pour faire le buzz et tout), un autre qui présente un formulaire de recherche pas très complet mais en tout cas assez simple des films et séries sur le site (Le choix par catégorie est inclus aussi), la figure suivante vous illustre ça :
Page 27 sur 33
Figure 20 : Le body du site (de la page d’accueil).
J’aurai d’a d’ailleurs plus qu’adoré que le formulaire for mulaire 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 c’est ce qui vient après dans tout site web. Et bien le footer rappelait les liens de la navigation principale, présentait des liens vers les réseaux sociaux célèbres (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 résultat ? En photo.
Figure 21 : Le footer du site.
Bien maintenant, on se demande qu’estqu’est -ce qu’on aura si on cherche un film ou une série depuis le formulaire ou si on clique sur série, ou film ou bien articles. Eh bien, quelque chose de ba sique à la allociné. Lorsqu’on clique sur Articles, on a la liste des articles art icles qui s’affichent devant nous présent dans le site, un peu comme ça :
Page 28 sur 33
Figure 22 : Page de liste des articles.
Lorsqu’on clique sur un film ou une série, on avait une fiche comme comm e ça, pas pleine d’information et assez lisible :
Figure 23 : La fiche d’un film ou d’une série.
Bien sûr, en cliquant sur regarder le trailer (Dans une fenêtre chargée avec Jquery) on est supposés regarder le trailer du film en question. Idem pour je télécharge. La page de téléchargement est très simple aussi, elle demande à l’utilisateur un code à envoyer par sms selon l’id film/série et entrer un code d’activation pour télécharger 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 résultat en photos :
Page 29 sur 33
Figure 24 : La page de téléchargement du site.
2. Le code et son organisation :
Même si j’estime que cette partie n’est pas trop nécessaire puisque j’ai déjà parlé des outils utilisés et donc tout ce qui va venir ne sera que son application (Je l’estime pas nécessaire aussi parce qu’une remarque m’avait été donné dans un rapport f ait au premier semestre à l’l ’école: Evites de parler trop technique dans un rapport). Alors vues et contrôleurs étaient étaient rassemblés de cette façon-là :
Figure 25 : L’organisation du code dans le site.
Comprenez par pitié qu’il y a bien l’équivalent de ces fichiers dans les contrôleurs (Après tout, c’est du MVC, vous vous souvenez ?). Page 30 sur 33
Tout ce qui sort du code était mis comme le veut la règle de CodeIgniter dans un dossier assets, comme ça :
Figure 26 : Les dossiers images, fiches et tout du site.
Après, le code, c’était quelque quelque chose qui ressemblait à ça :
Figure 27 : L’implémentation de CodeIgniter dans le site.
Un peu barbu comme tout code au début, mais bon, c’est du CodeIgniter, il suffit de s’y faire un peu et de lire un peu partout les tutoriels présents sur internet. 3. La modélisation de la base de données :
Et oui, j’ai tout parcouru et j’ai failli fai lli oublier la chose avec laquelle j’ai commencé avec mon encadrant : La modélisation de la base de données. Vu les contraintes exigées, exigée s, j’avais proposé cette modélisation (faite à la hâte à l’aide d’access) qui fut validée validé e par mon encadrant, avec quelque petites modifications mineurs :
Page 31 sur 33
Figure 28 : Le schéma de la base de données.
Page 32 sur 33
Conclusion : Alors pour une première expérience expérience professionnelle dans dans ma vie au vrai sens du terme ce fut vraiment magnifique. magnifique . J’ai appris à travailler sous des conditions nouvelles, dans des contraintes temporelles et sans le tutorat d’un professeur et professeur et les contraintes concurrentielles. J’ai appris aussi à surmonter les difficultés qu’on rencontre dans la vie professionnelle : Difficultés humaines humain es et techniques. Les humaines, c’était par la patience, le sourire et le silence. Et les techniques c’était par la volonté et une bonne endurance. J’ai appris les étapes avec lesquelles on mène un projet web de nos jours ; du moins dans mon entreprise, car voyez-vous, je fais du développement web depuis un très bon moment et depuis toujours et je n’ai jamais vu le travail dispatché entre équipes avec délais et tout, je n’ai jamais travaillé et adopté quelque chose en l’issus de quelques journées (En l’occurrence l’occu rrence le framework CodeIgniter). J’ai appris (Oui décidemment j’ai appris beaucoup de choses) a rédiger un peu plus mieux mes rapports, enfin, un peu. Et puis voilà tout, je remercie toutes les personnes qui ont contribué à la réussite de cette expérience (Même les grands taxis qui me déplaçaient le matin :-D), ça fait un joyeux déluge tout ça et une belle expérience expérience de ma vie qui restera dans ma mémoire et la mémoire de ce rapport (Eh oui parce que je compte partager au monde ce rapport sur internet :-D ).
Page 33 sur 33
