Technique de dev apps Web 

:
- Codage a à z
- Composant prédéfinis : Framework – CMS(Wordpress)

Plan

- Introduction au framework
- Bootstrap
- Symfony

Introduction au framework

Introduction

Un framework signifie « cadre de travail ».

Un Framework est un ensemble de composants ou script prédéfinis afin de simplifier la

réalisation d’un projet informatique.

L’objectif :

- Simplifier le travail des développeurs (Les codeurs).

- Ne pas repartir de zéro à chaque nouveau projet.

Exemple de framework :

- Bootstrap : framework CSS

- Symfony : framework PHP
- Django : framework Python

Il existe des Framework pour :

- Développer une Apps Mobile : PhoneGap,Lonic , React Native.

- Un Jeu : Phaser
- Un site Web

Type des Frameworks

Il existe des frameworks côté serveur (désignés backend en anglais), et d'autres côté client
(désignés frontend en anglais)

Les avantages sont :

- La standardisation de la programmation
- La formalisation d’une architecture adaptée aux besoins de chaque entreprise (MVC).
- La rapidité 
Un CMS est un ensemble des fichiers qui vous permet de créer et gérer des sites web sans
avoir des connaissances en programmation. Donc même une personne qui est nulle en
programmation peut créer un site web en utilisant un CMS.

Exemple : WordPress – Prestashop

La différence entre un framework et un CMS est qu'un Framework est un ensembles des
scripts qui permet au développeur de gagner du temps pendant le développement de son
projet tandis qu'un CMS est un ensemble de fichiers qui permet de créer des sites web sans
avoir des connaissances en programmation

Modèle MVC :

Contrôleur en php : le kernel fait le chef d’orchestre

Vues en Twig

Modèle en Mysql : Utilisation de Doctrine

Organisation des fichiers :

- Deux rép pour développer : src(code PHP) et app(config,templates,etc…)

 Src /appBundle /Controller : les contrôleurs
 Src/appBundle/Entity : modèle
 Apps/ressources/views : les vues

Bootstrap

Introduction

Bootstrap est un framework CSS permettant de faciliter l'écriture de la mise en forme CSS
d'un site web.

Bootstrap a été écrit par deux développeurs Twitter : Mark Otto et Jacob Thornton ont écrit
bootstrap aux alentours de l'année 2010 puisque le projet a été rendu OpenSource en 2011.

Boostrap est un framework coté client.

Avantage : responsive, rapidité (dispose 12 colonnes), facile a manipuler,etc …

Pour utiliser le bootstrap, il faut avoir trois choses :

- PC/Navigateur / editText / Sript Bootstrap # CDN (Content Delivery NetWork)

Base CSS

Les bases en BootStrap :

Appel CSS dans le HTML :

Le dossier est séparé en trois sous-parties classiques :

• css (les fichiers de styles) ;
• js (les fichiers JavaScript) ;
• fonts (les icônes proposées par Bootstrap, que nous retrouverons un peu plus tard dans
notre apprentissage).

La grille :

La grille est une division de la page en 12 colonnes qui ont toutes la même largeur.

Elle est composée de lignes et colonnes.

Ligne: class=row
Colonnes: class=col-XX-*

Avec XX : xs, sm, md ou lg. Ce sont les formats qui modifient le comportement. * : de 1 à
12.

xs (pour afficher les colonnes dans les téléphones)

sm (pour afficher les colonnes dans  les tablettes)
md (pour afficher les colonnes dans les ordinateurs de bureau)
lg (pour afficher les colonnes dans les ordinateurs de bureau plus grands)

Exemples : col-xs-1 pour un élément de 1 colonne col-md-8 pour un élément de 8 colonnes

La grille de Bootstrap doit être placée dans un conteneur. Bootstrap propose les classes
container et container-fluid.

Container simple n'occupera pas tout l'espace de son parent, il aura une marge à gauche et à droite
et sera centré. Un container-fluid lui occupera par contre tout l'espace de son parent.

<div class="container">
</div>

Sauter des colonnes

Saut de colonne : <div class="col-lg-offset-6 col-lg-3">3 colonnes</div>

Imbrication d 'éléments

Div : division du document (Conteneur-Cadre)

Container et container-fluid (responsive)

Principes :

1. La grille doit être contenu dans un container ou container-fluid.

2. contenair et container-fluid sont des blocs de regroupement de balises.

3. Le contenair laisse une marge à droite et à gauche.

4. Le contenair-fluid s’étale sur toute la fenêtre.

Imbrication d’éléments

Symfony

Symfony est donc un frammework(Coté serveur) PHP. Il existe d’autres comme : zend
Framework, CodeIgniter.

Iventeur : Fabien Potencier 2005

Avantages : Rapidité,flexibilité et des composants réutilisables

Le symfony est basée par :

- POO PHP
- MVC
- ORM

Outils :
 - Symfony 2.3 et Wamp avec PHP>= 5.3.2
- Composer : gestionnaire de librairie

L’architecture des fichiers:

- App : Ce répertoire contient tout ce qui concerne votre site web (configuration apps)
- Src : Votre code source(Bundle)
- Vendor : Ce repertoire contient toutes les bibliothèques externes
- Web : ce repertoire contient tous les fichiers destinés à vos visiteurs : js,img,css et
controleur

Bundle :

Un bundle permet de créer un sous ensemble de dossiers et sous-dossiers, une structure de

base prédéfinie. Un bundle permet d’organiser clairement le code en respectant l’architecture
MVC.

Creation bundle :

- Php app/console generate :bundle

- NameSpace : nomSite_ou_pseudo/nom_bundleBundle
- Format bundle :yml

On trouve le bundle dans le dossier : src

Test navigateur : http://127.0.0.1/Symfony/web/app_dev.php/hello/delo

Routeur :
Pour créer une page, il faut d'abord définir l'URL à laquelle elle sera accessible. Pour cela, il
faut créer la route de cette page.
Une route est l'URL (ex : /a-propos) pour votre page et pointe sur un contrôleur.
Le fichier route se trouve dans ressources /config /routing.yml

Un contrôleur : un contrôleur est une fonction PHP que vous écrivez pour construire votre
page. Vous prenez les requêtes d'information entrantes et les utilisez pour créer un objet
Symfony, lequel va prendre en charge le contenu HTML(TWIG).

Twig

- le moteur de template intégré dans le Framework Symfony (Vue)

- {{mavariable }} : affichage texte et variable (Concatenation ~)
- alors qu'en PHP il faudrait faire <?php echo $mavar; ?>.
{# … #} : commentaire
- {% commande %} : executer k’instruction

Doctrine2 :

- Est un ORM pour PHP

 - ORM :

L'objectif d'un ORM (pour Object-Relation Mapper, soit en français « lien ou mapping objet-
relation ») :

Objet (représentation d’une entité) et relation (lien entre les objets : 1 à 1 – 1 à n – n à n)

- Il s’agit d’une technique de programmation informatique qui permet de simplifier

l’accès à une base de données.
- Il se trouve entre un programme applicatif et une BDD pour simuler une bdd orienté
objet.
- Il représente des enregistrements (et leurs relations) sous forme d'objets.
- Principe : on associe une table (ou une requête) à une classe.
- Avantages : Accélération du temps de développement
- Création d’une entité (doctrine)

Pour créer une entité, on utilise la commande :

php app/console generate:doctrine:entity
il faut entrer le nom de l'entité sous le format : NomBundle:NomEntité

Exemple : cantestBundle : Article

Formulaire Symfony2 :

- est une fiche que l’utilisateur peut remplir.

- un formulaire se construit sur un objet existant, et son objectif est d’hydrater (remplir
les variables d’un objet) cet objet.
- Pour créer un formulaire, il nous faut deux choses :
 Un objet.
 Un constructeur de formulaire(FormBuilder) : est un moyen pour construire un
formulaire à partir de cet objet.
- Exemple :
//On crée un objet Article
$article = new Article();
//On crée le formBuilder
$formBuilder = $this->createFormBuilder($article);
//On ajoute les champs de l'entité
$formBuilder
->add('date','date')
->add('nombre','integer')
->add('titre','text');
//On génère le formulaire
$form = $formBuilder->getForm();
return $this-
>render('cantestBundle:Default:formulaire.html.twig',array('form'=>$form-
>createView()));