Upload
ossama-benbouidda
View
736
Download
0
Embed Size (px)
DESCRIPTION
Rapport de stage pour un stage d'initiation de l'EHTPfait au sein de l'entreprise CBI Maroc dans le développement web et ce sous le framework PHP CodeIgniter .
Citation preview
Page 1 sur 33
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 réalisateurs et acteurs du
cinéma marocain.
Présenté par : Ossama BENBOUIDDA 1 mois
Responsable CBI : Monsieur Amine Mounir ALAOUI Aout 2013
CBI - Producteur de productivité.
Imm CBI, 29/30 Lot. Attaoufik, Sidi
Maârouf, 20190 Casablanca –
Maroc.
Ecole Hassania des Travaux Publics.
KM 7, Route D’EL JADIDA, B.P
8108, Oasis.
Page 2 sur 33
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à ; 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 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 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 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 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 voisin monsieur
BOUZAÂCHAN qui sans lui, je n’aurai peut-être pas eu une telle chance, sûrement
jamais. Je remercierai beaucoup aussi monsieur Amine 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 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, même Facebook n’est pas banni pour le monde, c’était de 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 3 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. ...................... 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 4 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 : ...................................................................................... 14
3. Choix d’un outil de mapping objet-relationnel : ....................................................................... 15
4. Etudes et choix des frameworks PHP : ...................................................................................... 16
5. Présentation de CodeIgniter : ................................................................................................... 20
1. Principe général : ................................................................................................................... 20
2. Intégration de Doctrine : ....................................................................................................... 21
6. Récapitulatif des 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 5 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 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.
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 dit 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é.
Page 6 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 permis de toucher à un
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, j’ai dû tout d’abord 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 trouvé à 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 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é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 7 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 présente les différentes directions de CBI :
Figure 1 : Organigramme de l'entreprise CBI
Page 8 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érentes 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. Ci-dessous quelques années
phares qui marquent l’historique de CBI :
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
Figure 2 : L’histoire de CBI au fil des années
Page 9 sur 33
d’une véritable politique collaborative de la façon la plus efficiente possible.
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 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 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
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 10 sur 33
• 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 & services fournissent un haut niveau
d’efficacité et de rendement, valorisant de façon optimale l’infrastructure informatique
de ses clients.
Mission Dés réponses aux différents besoins affaires aux traitements disponibles et pérennités de l’information
Garantie d’un haut niveau d’efficacité et de rendement
Solution Poste utilisateurs
Facility management
Définition d’architecture matériel
Déploiement Maintenance Support
Serveur
IBM : IBM système & Blade
HP : Proliant
CISCO : UCS
Stockage Consolidation : IBM SAN, DS8000, DS6x00, DS4x00, NAS Storewyze, V7000, EMC VNxe, VNX Système management et sauvegarde : Sauvegarde / Restauration : Gestion de la continuité de service et de la vie des données. Gestion du stockage : Gestion automatique des plateformes du stockage hétérogène
Archivage : 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 11 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 (State of the art) pour 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, Gestion
o Électronique o Documentaire (GED);
• 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 de la 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 12 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 13 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 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 :
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 franç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 que le contenu des pages change en fonction de certains paramètres (comme le profil de la personne
Page 14 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
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 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
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 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 à 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
plutôt rapidement après les phases d’analyse 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 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 de nombreuses 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 est assez
Page 15 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…mais bien sûr aussi un bon compris aussi avec mes
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 :
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 faut que
chaque classe redéfinisse certaines méthodes et / ou étende une classe de base.
Ainsi, dans Doctrine 1.x chaque classe doit hériter de Doctrine_Record et
implémenter une méthode 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 16 sur 33
objets et non les colonnes des tables SQL. Les résultats sont « hydratés », 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 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 configurer.
Par rapport à sa dernière version 1, Doctrine 2 apporte :
30% de gain mémoire.
20% de gain de rapidité 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 PHP pour le 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 17 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 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 design pattern qui existent de nos jours.
Alors, vous comprendrez avec moi que c’est toute une théorie à part ; Oui essayez
quand même de voir la diversité de design patterns qu’on y trouve.
Page 18 sur 33
Je ne vais pas m’attarder 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
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 utilisé
l’architecture MVC (Acronyme de 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 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 19 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 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 20 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 framework ont été la simplicité d’utilisation,
l’efficacité et la possibilité d’intégrer Doctrine 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 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 :
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, en lui passant en paramètre l’identifiant du questionnaire : 1.
Sur le schéma 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 21 sur 33
Une fois le contrôleur trouvé, le système regarde si un fichier cache existe pour la
page demandée, ce 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 classes
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, c’est-à-dire
extraire de la base de données le moins informations possible.
Page 22 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é 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 jQuery, qui permet de réaliser de belles
présentations sans trop de lignes de code.
7. Outils utilisés :
1. Wampserver
Page 23 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 Server.
Apache est un serveur HTTP qui génère des pages web qui sont envoyées au
navigateur. MySQL est un Système de Gestion de Bases de Données Relationnelles
(SGBDR) 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 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
groupe du web marocain 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 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 24 sur 33
Et c’est rapide en plus…Et comparé à d’autres éditeurs que j’ai pu tester, je trouve
Sublime Text 2 vraiment 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.
La recherche fonctionne un peu comme la « awesome bar » de Firefox. 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 25 sur 33
. Édition multicurseurs (attention, c’est génial !)
Il y a plusieurs façons d’ajouter des curseurs :
Ajouter un curseur sur la ligne 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.
Page 26 sur 33
IV. Présentation du projet :
1. La charte graphique :
Alors, vu la simplicité que 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 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 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…), c’était
comme ça :
Page 27 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. Il 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 28 sur 33
Figure 20 : Le body du site (de la page d’accueil).
J’aurai d’ailleurs plus qu’adoré 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 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’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 basique à la allociné. Lorsqu’on clique sur Articles, on a
la liste des articles qui s’affichent devant nous présent dans le site, un peu comme
ça :
Page 29 sur 33
Figure 22 : Page de liste des articles.
Lorsqu’on clique sur un film ou une série, on avait une fiche comme ç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 30 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 fait
au premier semestre à l’école: Evites de parler trop technique dans un rapport).
Alors vues et contrôleurs é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 31 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 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 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, j’avais proposé cette modélisation (faite à la hâte à l’aide
d’access) qui fut validée par mon encadrant, avec quelque petites modifications
mineurs :
Page 32 sur 33
Figure 28 : Le schéma de la base de données.
Page 33 sur 33
Conclusion :
Alors pour une première expérience professionnelle dans ma vie au vrai sens du
terme ce fut vraiment magnifique. J’ai appris à travailler sous des conditions
nouvelles, dans des contraintes temporelles et sans le tutorat d’un professeur et les
contraintes concurrentielles.
J’ai appris aussi à surmonter les difficultés qu’on rencontre dans la vie
professionnelle : Difficultés humaines 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 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 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 ).