Menu

Découpage et Intégration d'une maquette

Introduction

Nous allons dans ce tuto voir comment découper une maquette et l’intégrer dans une page web

Découpage

  1. Sélection du calque
  2. Dupliquer les calques
  3. Création d'un nouveau document
  4. Afficher l’élément dans le nouveau document
  5. Rognage (suppression des parties vides dans notre image)
  6. Enregistrement (sous l’extension png24)
Répéter ses 6 étapes pour les 11 élément du maquette

Intégration


Dans cette partie nous allons diviser la page web en utilisant la balise <div> les 3 blocs principaux sont :

  • Header (entête de la page)
  • Container (corps de la page)
  • Footer (pied de la page)


Merci Pour votre Attention


Application Symfony2 Part 9 : Créer un Système de Pagination

Introduction :

Nous allons voir dans ce Tuto comment créer un system de pagination ( KnpPaginatorBundle ) pour gérer le nombre de film à afficher dans une page web.

Installation et Configuration du KnpPaginatorBundle : 

Nous allons rendre visite au site http://knpbundles.com/ ou il y a plus que 2700 bundles à utiliser et intégrer dans notre applicationDans la zone de recherche tapez KnpPaginatorBundle
http://knpbundles.com/KnpLabs/KnpPaginatorBundle

  1. Tapez cette ligne de commande dans CMD
    php composer.phar require knplabs/knp-paginator-bundle
  2. Copier la configuration dans fichier config.yml de votre application.
    knp_paginator: page_range: 5 # default page range used in pagination control default_options: page_name: page # page query parameter name sort_field_name: sort # sort field query parameter name sort_direction_name: direction # sort direction query parameter name distinct: true # ensure distinct results, useful when ORM queries are using GROUP BY statements template: pagination: KnpPaginatorBundle:Pagination:sliding.html.twig # sliding pagination controls template sortable: KnpPaginatorBundle:Pagination:sortable_link.html.twig # sort link template
  3. Activer le bundle dans Appkernel.php

    public function registerBundles() { return array( // ... new Knp\Bundle\PaginatorBundle\KnpPaginatorBundle(), // ... ); }
  4. Ajouter la fonction de pagination dans Controller

    public function indexAction() { $em = $this->getDoctrine()->getManager(); $request=$this->getRequest(); $listefilms = $em->getRepository('FilmoBundle:Film')->findAll(); $entities = $this->get('knp_paginator')->paginate(
    $listefilms,
    $request->query->get('page', 1)/*page number*/,
    6/*limit per page*/
    );
    return $this->render('FilmoBundle:Film:index.html.twig', array(
    'entities' => $entities, )); } Dans cette exemple nous allons appliquée le system de pagination à la $listeFilms pour afficher 6 films par page commençant par la page 1
  5. Implémenter le system de pagination dans View 

    {# display navigation #} <div class="navigation"> {{ knp_pagination_render(entities) }} </div>

Voici le vidéo de l'exemple :




Merci pour Votre Attention

x

Application Symfony2 : Part 8 Upload des fichier avec doctrine

Introduction 

Nous allons voir dans ce Tuto comment gérer l’upload des fichiers avec doctrine pour notre entité FILM

Mise à jour de l'entité Film et la base de données

Nous allons rendre visite au site Symfony.com et dans la zone de recherche tapez "upload file doctrine"
https://symfony.com/doc/2.7/cookbook/doctrine/file_uploads.html
Maintenant copier la variable path et les autres fonction dans votre entité Film
    /**
     * @ORM\Column(type="string", length=255, nullable=true)
     */
    public $path;

    public function getAbsolutePath()
    {
        return null === $this->path
            ? null
            : $this->getUploadRootDir().'/'.$this->path;
    }

    public function getWebPath()
    {
        return null === $this->path
            ? null
            : $this->getUploadDir().'/'.$this->path;
    }

    protected function getUploadRootDir()
    {
        // the absolute directory path where uploaded
        // documents should be saved
        return __DIR__.'/../../../../web/'.$this->getUploadDir();
    }

    protected function getUploadDir()
    {
        // get rid of the __DIR__ so it doesn't screw up
        // when displaying uploaded doc/image in the view.
        return 'uploads/films';
    }
  1. La variable path c’est le chemin de notre fichier 
  2. Changer le chemin d’upload dans fonction getUploadDir() uploads/films
  3. Maintenant nous allons ajouter un champ de type file dans FilmType.php
     ->add('file')
  4. Ajouter cette attribut à notre Entité film n'oublié pas les getters et setters et  les Use pour le cas des Assert et file.

    use Symfony\Component\Validator\Constraints as Assert;
    use Symfony\Component\HttpFoundation\File\UploadedFile;
    
    

         /**
         * @Assert\File(maxSize="6000000")
         */
        private $file;
    
        /**
         * Sets file.
         *
         * @param UploadedFile $file
         */
        public function setFile(UploadedFile $file = null)
        {
            $this->file = $file;
        }
    
        /**
         * Get file.
         *
         * @return UploadedFile
         */
        public function getFile()
        {
            return $this->file;
        }
  5. Ajouter Fonction upload() dans Entité Film 
    public function upload()
    {
        if (null === $this->getFile()) {
            return;
        }
    
        $this->getFile()->move(
            $this->getUploadRootDir(),
            $this->getFile()->getClientOriginalName()
        );
    
        $this->path = $this->getFile()->getClientOriginalName();
    
        $this->file = null;
    }
  6. Dans Controller il faut faire un appel à la fonction upload dans la fonction createAction()
    if ($form->isValid()) {
        $em = $this->getDoctrine()->getManager();
    
        $entity->upload();
    
        $em->persist($entity);
        $em->flush();
    }
  7. Maintenant nous devons faire un mise à jour de la base de données
    php app/console doctrine:schema:update --force

Affichage dans View 

  1. <img src="{{ asset('uploads/films/'~entity.path) }}" >

    Le tilde " ~ " c’est pour faire la concatenation


Merci pour Votre Attention