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 ).