[Visto: 873 veces]

Te has preguntado como se podría trabajar en paralelo los diseñadores de html con los programadores, te dejo este espacio donde te explico como realizarlo!

Para iniciar este practica, es necesario que tengas instalado el gestor de componente de PHP llamado “composer”, puedes ingresar en su sitio oficial, y realizar la instalación del software, en la practica usaremos la plataforma Microsoft Windows 10.

Requisitos mínimos

  1. Instalar Visual studios code, IDE gratuito que te permitirá codificar.
  2. Instalar el gestor de componentes Composer.

Procedimiento

  1. Para comprobar que la instalación de composer se ha realizar ingrese el código siguiente:
    composer --version
  2. Crear una carpeta y dentro crear el archivo composer.json con las dependencias
    { 
         "name":"desarrolloweb/probando-composer",
    	“description”: “Proyecto inicial”,
    	"require":{
    		"mustache/mustache" : "2.*",
    		"kint-php/kint":"3.*"
    	}
         }
  3. Se puede apreciar que se esta elaborando un proyecto y a su vez se esta incorporando “mustache”, y “kint-php”, kint-php es una herramienta que te ayudará a visualizar las variables de una manera más visual.
  4. Ingresar en la carpeta y por linea de comandos ejecutar “composer install”
  5. Se creará el proyecto y se instalará las dependencias.
  6. Si deseas remover alguna dependencia, por línea de comantos y dentro de la carpeta del proyecto colocar
    composer remove kint-php/kint
  7. Luego crea un archivo index.php y coloca en él lo siguiente:
    <?php 
      require "vendor/autoload.php"; 
      $loader = new Mustache_Loader_FilesystemLoader(__DIR__.'/templates/'); 
      $mustache = new Mustache_Engine( [ 'loader' => $loader
            ]
        );
        $data = [
            'text'=>'Word',
            'isTrue'=>false
        ];
        echo $mustache->render('index',$data);
    
  8. Ahora debemos crear la plantilla de mustache, para ello crear una carpeta “templates” y en ella crear el archivo index.mustache con la siguiente información
    Hello {{text}} {{#isTrue}}, es verdad.{{/isTrue}}
  9. Notarás que la variable $data es transferida al template donde se puede apreciar los valores otorgados.

 

Resumen

  1. Para el uso de esta practica, se ha utilizado el componente de mustache para el lenguaje de PHP, pero tambien existe para otros lenguajes como Javascript, python, etc. Como se puede apreciar en su sitio web oficial de mustache https://mustache.github.io/
  2. Se puede encontrar un tutorial de mustache en la version 5, incluso presenta una herramienta para probar codigo en el mismo navegador.

Adicional

  1. Deseas una integración con wordpress?, tambien es posible realizarlo para ello se debe crear el template de wordpress y en la carpeta colocar los archivos que hemos visto.
  2. Estoy elaborando otra practica con video donde explicaré más a detalle acerca de este tema.

 

Motívame invitándome un café Invitame un café

 

Puntuación: 5 / Votos: 1