symfonylogo

200 Symfony 2, plateforme développement web

En Février 2016 j’ai suivi une formation sur Symfony 3 … et depuis j’ai remarqué que très peu d’entreprises étaient passé à cette version. La raison principale reposant sur le fait que beaucoup d’applications on été développées dans la version 2.

Je vais donc vous présenter dans un premier temps cette version, en expliquant tout ce qu’il faut pour la faire fonctionner dans un environnement Windows.


Les outils nécessaires à Symfony 2

Pour pouvoir utiliser Symfony, nous allons télécharger l’application WampServeur qui permet d’utiliser 3 modules nécessaires à Symfony :

  • le langage Php,
  • la base de donnée mySQL,
  • le serveur Apache, qui permettra de visualiser sur votre ordinateur le site que vous allez créer, avant de le publier sur internet.

Pour le télécharger, vous pouvez récupérer une version à l’url suivante : Wamp

Une fois installée, il faut maintenant récupérer Symfony et pour cela aller sur GitHub à l’url suivante : Symfony. Télécharger la version 2.8 que vous trouverez grâce en sélectionnant l’option Branch et pour finir sélectionner Download Zip que vous trouverez dans l’option Clone or Download.

Pour finir, nous utiliserons aussi Composer, car la procédure proposée pour l’installation de Symfony ne fonctionne pas toujours lorsqu’on cherche à l’installer sous Windows. On trouvera composer à l’url suivante : Composer.

Les tests que j’ai fait l’ont été sous Windows 7 Pro, en sachant qu’avec la version 8 il semble qu’il y ait quelques problèmes d’activation du serveur Apache.

Avant d’installer le Serveur Wamp, il vous faudra aussi récupérer divers packages de Visual Studio en fonction de votre type de processeur de votre ordinateur (VC Studio 2008 [X86, X64], VC Studio 2010 SP1 [X86, X64], VC Studio 2012 Update 4 [X86/X64], VC Studio 2013 [X86/X64] et VC Studio 2015 update 4 [X86/X64]). Il faut noter que pour les versions après 2010, le choix X86 ou X64 se fait après avoir cliqué sur le lien qui est proposé.

Une fois Wamp installé, vous devez préciser dans le path où se trouve la version 5 de php que nous utiliserons. Puis vous installerez composer et vous décompresserez Symfony 2.8 dans le dossier www de wamp et nous pourrons enfin commencer notre premier site sous Symfony 2.

Première application Symfony 2

Pour générer notre première application web, nous allons nous positionner dans le dossier symfony et taper la commande suivante :

c:/wamp64/www/symfony-2.8>composer create-project symfony/framework-standard-edition c:/wamp64/www/films « 2.8.* »

Une fois que le site films aura été créé, il faut indiquer comment y accéder, pour cela il faut modifier deux fichiers :

  • avec le wamp serveur, on peut accéder au fichier httpd.conf dans lequel il faut ajouter les paramètres suivants :
<virtualHost *:80>
 ServerName films.local
 DocumentRoot /films/web
 DirectoryIndex app.php
 <Directory "/films/web">
    AllowOverride All
    Allow from All
  </Directory>
</VirtualHost>
VirtualHost
  • dans le fichier host qui se trouve sous windows/system32/drivers/etc, il faut ajouter l’ip du local host, vous devez editer le fichier en mode administrateur et ajouter la ligne suivante : 127.0.0.1     films.local

Créer notre premier Bundle.

Tout d’abord, si vous ne savez pas ce qu’est un bundle, je vous invite à cliquer sur le lien que je vous ai mis dans le titre. Ensuite nous pourrons passer à la création de ce bundle. Pour cela, vous devez taper la commande suivante :

c:/wamp64/www/films>php app/console generate:bundle – – namespace=Ens/filmsBundle – – format=yml. Une série de question vous sera posée, tapez entrée à chaque fois.

Une bonne habitude à avoir est de nettoyer le cache après avoir fait ce genre d’opération, pour cela il faut taper les commandes suivantes :

  • php app/console cache:clear –env=prod
  • php app/console cache:clear –env=dev

Les CSS et bootstrap

BootstrapIl s’agit là d’une partie que nous n’allons pas approfondir, il y a des livres et des sites qui sont consacrés au CSS. J’ai moi même écrit un article sur le CSS que je vous invite à lire si cela vous est étrangé. Au lieu de vous renvoyer sur un pavé comme celui que vous pouvez voir en image ici, je vous invite plutôt à regarder le code source de la page que vous trouverez sur http://www.getbootstrap.com, en cliquant sur Download, cherchez l’exemple using the framework en sélectionnant starter-template. Vous pouvez aussi sélectionner le css de maxcdn.bootstrapcdn.com en ajoutant le lien suivant : <link href= »https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css » rel= »stylesheet »>

Pour utiliser le css que vous avez modifié dans le fichier « src/ens/filmsBundle/Resources/views/Defaultindex.html.twig », taper le code suivant :

{% extends 'base.html.twig' %}
    {% block body %}
        Hello world !
    {% endblock %}
Hello world

Contrôleur et Vue

Le principe de MVC est appliqué ici, on retrouvera dans DefaultController.php l’appel de l’affichage du formulaire :

public function indexAction()
{
    return $this->render('EnsfilmsBundle:Default:index.html.twig');
}
DefaultController

Pour l’instant, on peut dire que la vue est des plus simplistes, avec un simple Hello world ! Cette vue est affichée sur le routage suivant, dans src/ens/filmsBundle/Resources/config/routing.yml :

ensfilms_homepage:
    path:
    defaults : {_controller: EnsfilmsBundle:Default:index}

Doctrine c’est magique !

Nous avons notre site, maintenant il faut pouvoir afficher des films. Faisons simple pour l’instant, on va afficher une simple liste grâce à Doctrine et à la console de symfony 2. Tout d’abord, nous allons créer la base avec une commande de console, en n’oubliant pas de définir le nom de la base dans le fichier parameters.yml que l’on trouvera dans le dossier appconfig. Faisons très simple, à la ligne database_name, saisir films. En commande dos, nous pouvons créer la base grâce à la ligne suivante :

c:/wamp64/www/films>php app/console doctrine:database:create

La base étant généré, on peut passer à la création de notre première table :

c:/wamp64/www/films>php app/console generate:doctrine:entity

Modele FilmsAprès cette première commande, il faut répondre à un premier paramètre avant de pouvoir saisir nos champs. Pour le shortcut name, saisir « EnsfilmsBundle:film ». Pour la suite, taper Entrée pour la conf. format et pour les champs, saisir les noms et types suivants :

  • Titre -> text,
  • Resume -> textarea,
  • Asn -> integer avec Asn pour Annee Sortie Nationale,
  • genre_id -> integer,
  • created_at -> date,
  • updated_at -> date.

Une fois ces champs saisis, on valide la création de la table avec la commande suivante :

c:/wamp64/www/films>php app/console doctrine:schema:update –force

Une vue qui nous parle

Notre table est crée, mais pour afficher son contenu, il faut en saisir au moins une ligne, voir deux si on voit grand ! Pour cela, on peut passer par le navigateur en tapant l’url http://localhost/phpmyadmin/index.php. Une fois dans la base, ajouter par requête un ou deux enregistrements.

Maintenant, nous pouvons améliorer l’affichage des films, le hello world du fichier src/ens/filmsBundle/Resources/views/index.html.twig :

{% extends 'base.html.twig' %}
    {% block body %}
    <table><tr><td>&nbs;</td></tr></table>
    <table class = "table table-striped">
      <thead>
        <th>#</th>
        <th>film</td>
      </thead>
      <tbody>
        {% for film in films %}
	<tr> 
          <th scope="row">{{ film.id }}</th>
          <td>{{ film.titre }}</td>
        </tr>
      {% endfor %}
    </tbody>
    </table>
{% endblock %}
index.html.twig

Cet affichage est rendu possible grâce à un accès a doctrine que l’on fait dans le contrôleur src/ens/filmsBundle/controller/DefaultController.php :

<?php namespace EnsfilmsBundleController; use SymfonyBundleFrameworkBundleControllerController; use AppBundleEntityFilm; class DefaultController extends Controller { public function indexAction() { $em = $this->getDoctrine()->getManager();
	  $films = $em->getRepository('EnsfilmsBundle:film')->findAll();
	  return $this->render('EnsfilmsBundle:Default:index.html.twig', array('films'=>$films));
	}
  }
DefaultController.php

Et voilà, maintenant si on tape l’url http://film.local/app_dev.php on devrait avoir notre liste de films.

Afficher le détail d’un enregistrement

Si vous avez affiché votre liste, il se peut que votre résumé soit un peu long, et l’affichage en est moins clair car on ne visualise pas forcément beaucoup de lignes sans être obligé d’utiliser la barre défilante verticale. Nous allons résoudre cela en réalisant un formulaire qui va détailler le film que nous sélectionnerons.

La première étape va consister à ajouter une route dans le fichier films/app/config/routing.yml

ensfilms_show:
	pattern:	/{id}/show
	defaults:	{_controller:	"EnsfilmsBundle:Default:show"}
routing.yml

La deuxième étape consiste à modifier légèrement la vue principale en ajoutant un lien sur le titre du film :

<!-- Menu -->
<a class="navbar-brand" href="/films/web/app_dev.php">Films</a>
...
<!--  Detail film -->
<td><<a href="{{ path('ensfilms_show', {'id':film.id}) }}"> {{ film.titre }} </a> </td>
...
Extrait de index.html.twig à mettre à jour

La troisième étape consiste à réaliser l’action qui nous permettra d’afficher le film qui nous intéresse :

...
public function showAction($id)
{
	$em = $this->getDoctrine()->getManager();
	$films = $em->getRepository('EnsfilmsBundle:film')->find($id);

	if ($film){
		throw $this->createNotFoundException('Impossible de trouver le film demandé');
	}

	return $this->render('EnsfilmsBundle:film:show.html.twig', array('film'=>$film);
}
...
DefaultController.php

Dans la quatrième et dernière étape, on affiche le détail du film dans films/src/ens/filmsBundle/resources/views/film/show.html.twig :

{% extends 'base.html.twig' %}
	{% block body %}
	<table><tr><td> </td></tr></table>
	<table class="table table-striped">
		<thead>
		  <th>#</th>
		  <th>Films</th>
		</thead>
		<tbody>
		 <tr>
			<td> {{ film.id }} </td>
			<td> {{ film.titre }} </td>
		  </tr>
		 <tr>
			<td> </td>
			<td> {{ film.resume }} </td>
		  </tr>		  		  
		</tbody>
	</table>
	<table><tr><td><a class="btn  btn-default" href="/films/web/app-dev.php">Retour à la liste des films</a></td></tr></table>
	{% endblock %}
show.html.twig

Formulaire de saisie, pour ne pas avoir à utiliser  phpMySql

...
public function addAction(Request $request)
{
	$film = new film();

	// Créé le FormBuilder grâce au service Form  Factory
	$formBuilder = $this->get('form.factory')->createBuilder('form', $film);

	// Ajout des champs de l'entité
	$formBuilder
	->add('Titre', 'text')
	->add('Resume', 'textarea')
	->add('Asn', 'integer')
	->add('genre_id', 'integer')
	->add('create_at', 'date')
	->add('update_at', 'date')
	->add('save', 'submit')
	;

	// Génération du formulaire 
	$form = $formBuilder->getForm();

	if ($form->handleRequest($request)->isValid())
	{
		$em = $this->getDoctrine()->getManager();
		$em->persist($film);
		$em->flush();
		return $this->redirect($this->generateUrl('ensfilms_show', array('id'=>$film->getId())));
	}

	return $this->render('EnsFilmsBundle:Film:add.html.twig', array('form'=>$form->createView()));
}
DefaultController.php

Ce formulaire est appelé selon la route indiquée dans le fichier de routage c:/wamp64/www/films/src/ens/filmsBundle/resources/config/routing.yml

ensfilms_add:
	path:	/add
	defaults	{_controller:EnsfilmsBundle:Default:add}
routing.yml

On ajoute le lien qui nous permettra d’ajouter un film dans le fichier films/src/ens/filmsBundle/resources/views/default/index.html.twig

<a href="{{ path('ensfilms_add' }}">Ajouter un film</a>

Pour finir, on n’oublie pas le formulaire qui accueillera le formBuilder généré grâce au CreateView

{% extends 'base.html.twig' %}
	{% block body %}
	<table><tr><td> </td></tr></table>
	<h2 class="page_header">Ajout film</h2>
	{{form_start(form)}}
	{{form_widget(form)}}
	{{form_end(form)}}
	{% endblock %}
add.html.twig

Il y aurait encore beaucoup de choses à dire sur ce sujet, mais pour ce premier article nous n’irons pas plus loin. Si vous avez bien suivi tout ça, vous aurez pu découvrir les bases de symfony 2.

Comme je suis sympa, je vais même vous mettre à disposition les sources de tout ce que je vous ai expliqué, vous pourrez les obtenir en cliquant sur le lien suivant : Symfony 2 – Chap 1 –  Liste – Création et détails d’un film

J’ai écris d’autres articles sur Symfony 2, pour les lire il faut que vous soyez inscrit avec une adresse mail valide. Une fois inscrit, je vous enverrai un mot de passe qui vous permettra de les consulter. Le deuxième article s’intitule : 210 Symfony 2, json et les filtres.

 

Cet article a été vu 14 fois

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

* Copy This Password *

* Type Or Paste Password Here *