Note De Synthèse · 2016. 3. 22. · Note De Synthèse Introduction Avant de commencer, je...

Note De Synthèse

Note de Synthèse du stage de première année de la formation BTS SIO

du 26 mai au 27 juin 2015 chez API webimage.

Boudieb Fatima BTS SIO 1ère année

1/24

Note De Synthèse

Sommaire

Note de Synthèse du stage de première année de la formation BTS SIO Introduction I- Contexte professionnel

Base Nouveaux outils

II-Nature du projet III- Réalisation

1)Préparation logicielle a)Symfony b) Doctrine

2) Conception de la base de données 3)La conception des fonctionnalités du site

Etude des fonctionnalités Application Habillage

L’espace Administrateur Étude des fonctionnalités Sécurisation de l’espace admin

Vérification entrées administrateur Ajout Favicon Responsive

Conclusion


2/24

Note De Synthèse

Introduction Avant de commencer, je souhaite remercier Api Apex, et plus

particulièrement M.Pelletier, pour son accueil. Lors de mes recherches de stage, je me suis tournée vers des entreprises

travaillant dans le milieu du développement web ou application.

Mon stage a eu lieu du 26 mai 2015 au 26 juin 2015. Je l'ai effectué chez Api Apex, une société dont le siège se situe 25 rue Michel Ange à Paris 16e.

Elle compte 3 employés, dont deux associés et un gérant. Ils réalisent des sites internet pour les professionnels, ils accompagnent et conseillent les entreprises tout au long du projet.

L'un des associés, Gregory Pelletier, est le développeur de la société, il travaille seul sur les parties techniques et s'occupe autant du graphisme que du développement dur des sites web.

Ma mission a été de créer un site web pour un client de Api Apex : Globe Echos. C'est une chaîne de télévision actuellement en développement accessible sur internet et par satellite. Elle demande une plate-forme web qui regrouperait des vidéos de sujets divers qu’elle hébergera sur le site Vimeo.

I-Contexte professionnel

Base

Je suis partie d'une maquette que m'a fournie M.Pelletier, qu'il a dessiné sur photoshop en partant du thème Summarize à disposition sur internet sur le site http://html.coolorize.com/summarize/html/ :


3/24

http://html.coolorize.com/summarize/html/d

http://html.coolorize.com/summarize/html/d

Note De Synthèse

La première version de la maquette qu'il a réalisée fut celle-ci :


4/24

Note De Synthèse

Qui est ensuite devenue :

Pour le design du site demandé, je me suis donc basée sur cette maquette, que j'ai reproduit en CSS.

Nouveaux outils

J'ai développé le site sous Symfony2, un framework PHP de création de sites web, accompagné de l'ORM Doctrine2, un ORM est un ensemble de classes visant à ce que l'utilisateur puisse manipuler ses tables de données comme si c'étaient des objets. Doctrine est l'ORM php le plus connu actuellement en php. Il conviendra de détailler ces deux outils dans la suite de ma note.

Le logiciel de codage que j'ai utilisé tout au long du projet est PHPStorm, l'équivalent d'Eclipse qu'on utilise dans notre formation, mais qui propose d'avantage de fonctionnalités comme l'intégration de git permettant d'effectuer des push/pull et autres tâches git dans phpStorm, un historique local permettant de basculer d'une version à l'autre d'une classe du projet…

Je me suis aussi essayée à un nouveau système d'exploitation, pour moi, pendant le stage: Linux Ubuntu, celui qu'utilise le développeur de la société.


5/24

Note De Synthèse

II-Nature du projet J'ai disposé de 5 semaines pour réaliser le site de Globe Echos. Il comprend une interface principale accessible à tous les utilisateurs, et une interface d'administration qui permet aux administrateurs néophytes de personnaliser le site par simples formulaires, dont l'accès est limité au personnel chargé de l'administration de GlobeEchos. A terme, cela ce présente comme suit:


6/24

Note De Synthèse

Puis un espace de connexion:

Et espace d'administration:


7/24

Note De Synthèse

III- Réalisation 1) Préparation logicielle

a ‐ Symfony

Durant la première semaine de stage, je me suis chargée de me familiariser avec Symfony2.7.

Pour cela j'ai utilisé la doc Symfony et j'ai suivi un tutoriel de Mathieu Nebra d'OpenClassRoom qu'on peut retrouver ici : http://openclassrooms.com/courses/developpez-votre-site-web-avec-le-framework-symfony2

La logique de Symfony est basée sur la séparation du code de par son architecture, le framework incite à bien organiser son code. Il offre des briques qu’on appelle “bundles” prêtes à être utilisées qui évitent au développeur de réinventer la roue ( comme le composant Formulaire par exemple).

Un projet Symfony se compose principalement de 3 dossiers: -app: Il contient la logique du site. Il s’agit du cache, de la configuration, des fichiers logs, etc. J’y ai aussi placé des vues qui sont communes à un certain nombre de pages du sites.


8/24

Note De Synthèse

-src: C’est dans ce répertoire que le développeur va passer la majorité de son temps. Il s’agit ici d’organiser son code en bundles eux mêmes suivant une organisation spéciale:

Ici, le dossier Controller contient les contrôleurs du projet. Ce sont des classes qui utilisent des services Symfony, des modèles et appellent la vue. Le dossier Entity contient les entités de la base de données que j’ai généré avec l’ORM Doctrine 2 dont j’expliquerai la nature ultérieurement. Les dossiers Form, Categories et Twitt sont 3 services personnels que j’ai créé pour les besoins du site. Enfin, Ressources est un dossier qui contient les vues, les images et les fichiers css. Tests, lui , est un dossier qui permet de faire des tests à l’aide de phpUnit, un programme qui teste les fonctionnalités du site créé et renvoie des erreurs ou un message de réussite en fonction de la validité des tests. Ce découpage permet d’organiser son code, et de séparer le php de l’html afin de s’octroyer une meilleure lisibilité dans le php (sans balises html qui gênent le code), et pour faciliter l’intervention du designer dans l’html sans code qu’il risquerait de ne pas comprendre . -web: Il contient tous les fichiers destinés aux visiteurs: images, css, javascript, etc. C’est en réalité le seul répertoire auquel auront accès les visiteurs, les fichiers .htaccess interdiront l’accès depuis l’extérieur dans les autres dossiers. -vendor:...

Les vues, appelées ausi templates, dont j’ai parlé précédemment, sont en twig. Le twig est un langage simple qui est conçu pour être compris par des néophites. En effet, le code est en html, et contient des balises twig pour le traitement des variables qu’on passe à la vue par le contrôleur vu précédemment également. Voici comment se présente une template:


9/24

Note De Synthèse

La template commence comme on peut le voir par un héritage. En effet, elle hérite d’une template dont le code est commun à toutes les pages de la partie Administrateur. Vous pouvez voir que le langage twig n’a rien de compliqué. Pour afficher une variable on utilise {{ variable }}, et pour effectuer une tache on utilise {% tâche %}... {% fintache %} Pour passer une variable au twig comme dit précédemment, j’utilise le contrôleur correspondant, comme cela:

<?php namespace GlobeEchosBundle\Controller; use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\Security\Core\Security; class SecurityController extends Controller { public function loginAction() { return $this->render('@GlobeEchos/Security/login.html.twig', array( // last username entered by the user 'last_username' => $session->get(Security::LAST_USERNAME), 'error' => $error, )); } }


10/24

Note De Synthèse

Le texte en rouge correspond au passage de variables.

b ‐ Ubuntu J’étais sous Ubuntu 14.3, et j’ai du configurer entièrement mon poste en installant php et ses extensions, lamp, mysql etc .. Le tout en console avec la commande “apt-get install”.

2) Conception de la base de données J’ai du étudier et créer la base de données correspondant aux besoins du

site. Le site regroupe des vidéos par catégories,et affiche des tweets choisis par l’administration. Il me faut donc une entité catégorie, une entité vidéo et une entité tweets, avec une jointure entre les entités vidéos et catégorie. Voici le MCD correspondant:

Dans l’entité vidéo les propriétés “home” et “main” sont deux booléens qui

indiqueront si une vidéo appartient en vidéo principale dans la page d’accueil et/ou en Side vidéo dans la page d’accueil.

Dans l’entité Category, la propriété “menu” est aussi un boolen, qui permet d’indiquer si oui on non une catégoroe apparait dans le menu.


11/24

Note De Synthèse

Une fois que le MC est réalisé, je génère les entités avec Doctrine. Pour cela,

j’utilise la console de phpstorm et tape php app/console doctrine:generate:entity

Cela m’accompagne dans la réalisation de l’entité, doctrine me demande d’entrer le nom de l’entité, et ensuite d’entrer les propriétés avec leurs types, en respectant des règles de nomenclature spécifiques.

Ensuite avec la commande php app/console doctrine:schema:update

j’enregistre les modification de la base de données, ainsi, doctrine va ajouter l’entité que je viens d’entrer dans la bdd. Doctrine nous génère les entités dans notre projet dont voici un aperçu:

<?php namespace GlobeEchosBundle\Entity; use Doctrine\ORM\Mapping as ORM; use Symfony\Component\Validator\Constraints as Assert; /** * Category * * @ORM\Table() * @ORM\Entity(repositoryClass="GlobeEchosBundle\Entity\CategoryRepository") */ class Category { /** * @var integer * * @ORM\Column(name="id", type="integer") * @ORM\Id * @ORM\GeneratedValue(strategy="AUTO") */ private $id; /** * @var string * * @ORM\Column(name="categoryWording", type="string", length=255) */ private $categoryWording;


12/24

Note De Synthèse

/** * @var boolean * * @ORM\Column(name="menu", type="boolean") */ private $menu; return $this; } /** * getters & setters * **/

Pour indiquer une jointure sous doctrine, il faut la préciser dans une annotation comme ceci:

* @ORM\ManyToMany(targetEntity="GlobeEchosBundle\Entity\Category", cascade={"persist"})

Doctrine va créer une table intermédiaire qui va faire la liaison entre les entités. Doctrine va gérer les bases de données tout seul, tandis que moi, j’utiliserai des objets video, category et tweet. Voilà l’uml de la base de données générée par Doctrine:


13/24

Note De Synthèse

3)La conception des fonctionnalités du site

Il s’agit ici de créer les fonctionnalités du site côté visiteurs comme le menu, l’affichage des vidéos enregistrées, etc… mais sans soucis de design.

a - Etude des fonctionnalités Il me faudra 3 pages:

● Accueil qui affichera la vidéo d’accueil et les vidéos de dernières news sur le côté

● Page qui liste les vidéos selon la catégorie ● Page qui affiche une vidéo sélectionnée avec une liste de vidéos associées

Les 3 pages auront en commun le menu, la liste de liens contact-conditions et temes etc, le bandeau contenant le logo du site et les liens des comptes de globeechos sur les réseaux sociaux, et enfin les tweets sélectionnés par l’administration.

b - Application Ce qui est commun aux 3 pages va se trouver dans un fichier base dont hériteront les 3 pages. En voici un aperçu:

<!DOCTYPE html> <html>

<head> <title>{% block title %}GlobeEchos{% endblock %}</title> {% block stylesheets %} <link rel="stylesheet" href="{{ asset('bundles/globeechos/css/globeechosStyle.css') }}" type="text/css" media="screen" /> {% endblock %} </head>

<body> {% block body %} <div class="content"> <div class="toplist"> <ul class="top"> <li class="liTop"><a href="" class="topUrl">About</a></li> <li class="liTop"><a href="" class="topUrl">Contact</a></li> <li class="liTop"><a href="" class="topUrl">Advertise</a></li> <li class="liTop"><a href="" class="topUrl">Terms & Conditions</a></li> <li class="liTop"><a href="" class="topUrl">Privacy</a></li> </ul> </div> <div class="menu"> ….. </div>


14/24

Note De Synthèse

<div class="banniere">....... </div> </div> <div class="bandeau"> {% block home %}{% endblock%} </div> <div class="main"> {%block main %}{% endblock %} </div> {% block side %}{% endblock%} {% endblock%} {% block javascripts %} {% endblock %} </div>

<div class="tweets"> {% for tweet in globeechos_twitter.listAction() %} <div class="blocktweet"> <blockquote class="twitter-tweet " lang="fr" data-cards="hidden"> <p lang="fr" dir="ltr">{{ tweet.text }}</p> — @globeechos <a href="https://twitter.com/BFMTV/status/{{ tweet.externalId }}">{{ tweet.date.format('Y-d-t') }}</a> </blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </div> {% endfor %}

</div> </body>

</html>

Puis je fais les liens, j’affiche les variables etc sur les pages filles, en voici un exemple et une capture:

{% extends '::base.html.twig' %} {% block title %}{{ parent() }}-Index{% endblock %} {% block stylesheets %}{{ parent() }}{% endblock %} {% block home %} {% endblock %} {% block main %} <iframe class="mainVideo" src="https://player.vimeo.com/video/{{ main_video.externalId }}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> {{ main_video.videoTitle }}  {% for video in videos %}  <a href="{{ path('globeechos_video', {'id': video.id}) }}"> <img class="miniatures" src="{{ video.thumbnail }}"/> </a>


15/24

Note De Synthèse

<a class="playv" href="{{ path('globeechos_video', {'id': video.id}) }}">{{ video.videoTitle }}</a> <a class="videoTitle" href="{{ path('globeechos_video', {'id': video.id}) }}">{{ video.videoTitle }}</a> { video.uploadDate.format('d/m/Y H\\hi') }} {% endfor %} {% endblock %}

Ce qui donne en premier lieu


16/24

Note De Synthèse

Habillage ● Page d’accueil

● Page d’une catégorie:

● Page d’une vidéo:


17/24

Note De Synthèse

L’espace Administrateur

Étude des fonctionnalités Il contient 3 pages:

● Une page Catégories qui permet d’ajouter/supprimer/modifier une catégorie

● Une page Videos qui permet d’ajouter/supprimer/modifier une vidéo ● Une page Tweets qui permet d’ajouter un tweet récupéré du compte

tweeter via l‘API tweeter, dans le site. Voici un exemple de page d’administrateur:


18/24

Note De Synthèse

Sécurisation de l’espace admin Les pages administrateur sont précédées de /admin Je n’ai donc qu’à sécuriser tout ce qui se précède de /admin. Pour ce faire, tout se passe dans le fichier security.yml de Symfony dans le dossier app/

Je créée un utilisateur d’identifiant “admin” à qui j’ai attribué un mot de passe encodé en sha1 dont le rôle est administrateur. J’ai placé l’arborescence /admin sous le parefeu appelé admin_area, ainsi un utilisateur non authentifié voulant accéder à /admin/listtweets par exemple, sera redirigé sur la page de login.

security: providers: in_memory: memory: users: admin: { password: ***************************, roles: 'ROLE_ADMIN'} firewalls: dev: pattern: ̂/(_(profiler|wdt|error)|css|images|js)/ security: false anonymous: ~ admin_area: pattern: ̂/admin


19/24

Note De Synthèse

anonymous: ~ logout: path: /admin/logout target: / form_login: check_path: /admin/login_check access_control: - { path: ̂/admin, roles: ROLE_ADMIN } encoders: Symfony\Component\Security\Core\User\User: algorithm: sha1 iterations: 1 encode_as_base64: false

Vérification entrées administrateur Il convient de vérifier les entrées de l’administrateur. Voici un exemple de vérification. Ici , je vérifie si la vidéo qu’ajoute l’administrateur existe ou non pour afficher un mesage d’erreur ou enregistrer normalement la vidéo.

public function addAction(Request $request) { $repository=$this->getDoctrine() ->getManager() ->getRepository('GlobeEchosBundle:Video'); $video=new Video(); $form = $this->createForm(new addVideo(), $video); $form->handleRequest($request); if ($form->isValid()) { $json = @file_get_contents('https://vimeo.com/api/oembed.json?url=https%3A//vimeo.com/' . $video->getExternalId()); if ($json==false) { $this->addFlash('danger', 'La vidéo n\'existe pas'); } else{


20/24

Note De Synthèse

$this->addFlash('info', 'nouvelle vidéo enregistrée'); $titre=$repository->getTitle($video); $video->setVideoTitle($titre['videoTitle']); $video->setUploadDate(new \DateTime()); $em = $this->getDoctrine()->getManager(); $em->persist($video); $em->flush(); return $this->redirectToRoute('globeechos_admin_updateVid',['id'=>$video->getId()]); } } return $this->render('GlobeEchosBundle:Admin:addVid.html.twig', array( 'video'=>$video, 'form'=>$form->createView(), )); }

Ajout Favicon Un favicon est l’icon du site que l’on retrouve notamment dans l’onglet près

du nom de la page et dans les favoris.

Pour cela, j’utilise le logo que l’on m’a fournit et grâce à des générateurs en ligne, je génère une multitude d’images de logo de tailles différentes et les balises qui permettent d’adapter l’icone à l’appareil utilisé (par exemple une icone dans le menu d’une tablette ou un mobile).

<link rel="apple-touch-icon" sizes="57x57" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-57x57.png') }} "> <link rel="apple-touch-icon" sizes="60x60" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-60x60.png') }}"> <link rel="apple-touch-icon" sizes="72x72" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-72x72.png') }}"> <link rel="apple-touch-icon" sizes="76x76" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-76x76.png') }}"> <link rel="apple-touch-icon" sizes="114x114" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-114x114.png') }}"> <link rel="apple-touch-icon" sizes="120x120" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-120x120.png') }}"> <link rel="apple-touch-icon" sizes="144x144" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-144x144.png') }}"> <link rel="apple-touch-icon" sizes="152x152" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-152x152.png') }}"> <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('bundles/globeechos/icon/apple-touch-icon-180x180.png') }}"> <link rel="icon" type="image/png" href="{{ asset('bundles/globeechos/icon/favicon-32x32.png') }}" sizes="32x32"> <link rel="icon" type="image/png" href="{{ asset('bundles/globeechos/icon/android-chrome-192x192.png') }}" sizes="192x192"> <link rel="icon" type="image/png" href="{{ asset('bundles/globeechos/icon/favicon-96x96.png') }}" sizes="96x96"> <link rel="icon" type="image/png" href="{{ asset('bundles/globeechos/icon/favicon-16x16.png') }}" sizes="16x16"> <link rel="manifest" href="{{ asset('bundles/globeechos/icon/manifest.json') }}"> <meta name="msapplication-TileColor" content="#2b5797"> <meta name="msapplication-TileImage" content="{{ asset('bundles/globeechos/icon/mstile-144x144.png') }}"> <meta name="theme-color" content="#ffffff">


21/24

Note De Synthèse

Responsive J’ai rendu le site Responsive, c’est-à-dire qu’il s’adapte à la résolution des

écrans et de la fenêtre du navigateur. Le site est donc adapté aux mobiles et tablettes.

Pour cela, j’utilse notamment les media queries, qui permettent d’accorder une taille à un bloc par exemple en fonction de la résolution. Voici la syntaxe:


22/24

Note De Synthèse

@media screen and (max-width: 387px){ .imgPlay{ width:46%; margin-left: 11px; margin-top:4px; } .play{ width:12%; } .videoTitle { font-size:10pt; } div.menu { font-size: 100%; height:auto; box-shadow: 1px 1px 1px black; } .center { width:61%; } .mainVideo { margin-left:15%; } span.right { display:none; color: #0f5171; } div.side { width:50%; margin-left:25%; position:relative; } h1.title{ margin-left:25%; font-size:15pt; } .lastNews{ display: inline ; text-transform: uppercase; color:#0f5171; } p{ text-align: center; } div.main .videoByCat{ float:none; display:block; margin-left:auto; margin-right:auto; } }

@media screen and (min-width: 387px) and (max-width: 900px) { .imgPlay{ width:58%; } .videoTitle {font-size:10pt;} div.menu { font-size: 100%; height:auto; box-shadow: 1px 1px 1px black; } .center { width:61%; } .mainVideo {margin-left:15%; } span.right { display:none; color: #0f5171; } div.side { width:50%; margin-left:25%; } h1.title{ margin-left:25%; font-size:15pt; } .lastNews{ display: inline ; text-transform: uppercase; color:#0f5171; } p{ text-align: center;} div.main .videoByCat{ float:none; display:block; margin-left:auto; margin-right:auto; } } @media screen and (min-width:900px) and (max-width: 1525px) { .imgPlay{ width:58%; } .content { max-width: 1200px; } }


23/24

Note De Synthèse

Conclusion Apports de la mission Ce projet m’a premièrement permit de mettre en pratique et surtout d’approfondir les connaissances acquises cette année en terme de développement web. Il s’agissait du premier projet abouti que j’ai élaboré. J’ai appris à utiliser un framework, ce qui pourra m’être très bénéfique dans la poursuite de ma vie professionnelle.


24/24

Note De Synthèse · 2016. 3. 22. · Note De Synthèse Introduction Avant de commencer, je...

Documents

Transcript of Note De Synthèse · 2016. 3. 22. · Note De Synthèse Introduction Avant de commencer, je...