Crear un proyecto Zend Framework 2.1

Vamos a crear un proyecto con la nueva versión de Zend Framework 2.1 a través de composer, personalmente puedo decir que ahora este framework PHP me parece más cool.

Es necesario tomar en cuenta en tener la versión de nuestro PHP >= 5.3.3 por temas de namespaces y el composer.

Para esto vamos a ser lo más ordenado posible, estoy usando Ubuntu12.10 con un editor Sublime Text 2 y un terminal de comando.

estoy gratamente sorprendido por los nuevos cambios de Zend con la integración  frameworks front-end, y  la orientación modular explicita  que ahora es, y el fácil trabajo con Doctrine.

Paso 1: creando nuestra raíz para nuestros proyectos en Zend Framework2.1

Lo que haremos en este primer paso será crear una carpeta de proyectos para Zend Framework 2.1 en nuestro directorio personal. En mi caso la ruta será /home/johnny/, abrimos nuestro terminal y por defecto estaremos en nuestro directorio personal ya listo para crear nuestra carpeta raíz.

Y tendremos este resultado:

Paso 2: Descargando el Zend Framework Tool (ZFTool)

El ZfTool es una herramienta de gran utilidad para administrar nuestros módulos, crear proyectos, etc.

comparto este link para que vean las diferentes formas que  el portal de Zend enseña a usarlo.

http://framework.zend.com/manual/2.1/en/modules/zendtool.introduction.html 

Según el portal podemos descargar un archivo PHAR para generar nuestros proyectos, así que eso es lo que haremos.

Por nuestro terminal ingresamos a nuestra carpeta generada

Descargamos el archivo PHAR en nuestro directorio raíz:

El link de descarga es : https://packages.zendframework.com/zftool.phar 

Paso 3: generamos proyecto con zftool.phar

Ahora que descargamos el archivo zftool.phar abrimos nuestro terminal y ejecutaremos el comando:

php zftool.phar create project proyecto1

Al ejecutar el comando anterior, se generará una carpeta llamada proyecto1 ahí dentro estará nuestros archivos para nuestro respectivo proyecto.

También nos indica que a través del terminal ingresemos al directorio generado y que ejecutemos esa linea de comando:

php composer.phar install

Ahí observamos que se ha instalado Zend Framework 2.1 que por ahora es lo que nos interesa.

Paso 4: Configuramos nuestro Virtual Host para Zend Framework 2.1

1. sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/local.proyecto1.com
2. sudo gedit /etc/apache2/sites-available/local.proyecto1.com
3. sudo gedit /etc/hosts
4. sudo a2ensite local.proyecto1.com
5. sudo /etc/init.d/apache2 restart

El comando número 2 se debe configurar el archivo de tal manera indicándole donde está nuestro directorio algo así.

El comando número 3 debe quedar algo así:

Ahora vamos a un navegador y escribimos la dirección para ver nuestro proyecto.

Ahora levantamos el proyecto con un editor en este caso lo haré con Sublime Text 2

En la imagen anterior vemos que ahora si Zend Framework 2.1 es orientado a modulos y tiene el modulo Application por defecto, si queremos crear nuevos módulos lo haremos con el archivo zftool.phar pero ¿cómo?

Hay que recordar que nuestro archivo lo tenemos en la raíz de nuestro proyecto, así que haremos una copia de este archivo a nuestro "proyecto1" por terminal sería algo así:

Para constatar verificamos la versión y la lista te módulos que tenemos:

Paso 5: creamos módulos con ZFTool en Zend Framework 2.1

Esto ahora es super sencillo por el zftool.phar :

Por nuestro terminal entramos a la carpeta de nuestro proyecto "proyecto1" en nuestro caso

Ahí ejecutamos el comando:

php zftool.phar create module moduletest

En mis siguientes post haremos algo sencillo para la comunicación del modelo a la vista administrador por el controlador, en fin, existe un ejemplo en la pagina oficial del framework.

http://framework.zend.com/manual/2.1/en/user-guide/overview.html

Espero sus comentarios.

YUI Compressor con Symfony2.1

Hola, continuando con mi post anterior de instalar y configurar symfony2.1 con composer en Ubuntu12.10 http://johnny1402.blogspot.com/2013/01/crear-proyecto-con-symfony-21-en-ubuntu.html

Ahora vamos a instalar y configurar nuestro proyecto para que trabaje con YUI Compressor para optimizar la carga de nuestros javascript y css reduciendo el tamaño de nuestros archivos.

Recordemos el proyecto anterior que lo dejamos instalado y listo para empezar a trabajar.

Paso 1: Configuración online

Ingresamos en el icono del centro que dice "CONFIGURE" para obtener los datos de la configuración para guardarlo en nuestro archivo parameters.yml. Después de hacer click  se muestra un formulario y ahí ponemos los datos de nuestra conexión y nombre de la Base de datos (no es necesario que exista, esa se creará automáticamente cuando ejecutemos nuestro comando de Doctrine mas adelante), next, next y al final te dirá que no pudo guardar en tu archivo parameters.yml por un tema de permisos y te da la opción de copiar y pegar manualmente que es lo mejor y listo. Lo importante de este primer paso es que se aya generado un código de token por temas de seguridad que lo explicamos después.

Paso 2: Otro requisito es que tengamos instalado Java en nuestro sistema si no lo tienen es necesario instalarlo, en google encontrarás mucha información igual comparto algún link de ayuda http://www.ubuntu-guia.com/2012/04/instalar-oracle-java-7-en-ubuntu-1204.html  bien al final una vez que tengamos java en nuestro sistema, necesitamos instalar el YUI Compressor como siguiente paso.

sudo apt-get install yui-compressor

Listo ahora tenemos lo necesario para que nuestro servidor pueda comprimir nuestros assets (css, js).

Paso 3: Mostrando la forma por defecto

Vamos a revisar el archivo app/config/config.yml en la sección Assetic que está así:

La instalación de Symfony 2.1 tiene por defecto un Bundle dentro de la carpeta src/Acme/DemoBundle.  Aquí un Bundle bueno definir un Bundle no es precisamente el objetivo de este post pero para resumir  es un conjunto de archivos y carpetas que manejan una estructura lógica para desarrollar una funcionalidad en otras palabras es una especie de módulo  xD.

Ahí buscaremos el archivo layout.html.twig: src/Acme/DemoBundle/Resources/views/

En el navegador vemos el código que genera:

Este es el código fuente que me genera :

Abrimos ese archivo demo.css  y vemos el siguiente código:

En la imagen anterior vemos como genera el código con espacios en blanco,  en fin hace que el archivo sea más pesado y carga lenta en cierto grado.

Paso 4: Configurando YUI Compressor en Symfony2.1



Ahora configuremos los archivo necesarios para que funcione esto.
Abrimos el archivo app/config/config.yml en la sección Assetic lo ponemos de la siguiente forma:

Ahora Abrimos el layout.html.twig para agregar un bloque de tipo stylesheets para decirle que generé un archivo css comprimido con un nombre configurable. Esta parte debería quedar de la siguiente manera:

En la Imagen anterior se agrego el código del bloque stylesheets:


    {% block stylesheets %}
        {% stylesheets output='css/mistyle.css' filter='cssrewrite, yui_css' debug=false 'bundles/acmedemo/css/demo.css' -%}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %} 

El comando "output" le decimos que se generrará un archivo llamado "mistyle.css" con un códifo css comprimido en las siguientes lineas le pasamos nuestros archivos css original que usaremos, podrían ser uno o mas archivos css.

Terminado de explicar esta parte  nos vamos a nuestra consola y ejecutamos unos comandos para ejecutar el compresor.

php app/console cache:clear

php app/console assets:install web --symlink


El primero limpia la caché y el segundo generá los assets a nuestra carpeta Web para que se muestra en nuestro proyecto.

Ahora vayamos a nuestro navegador y vemos el mismo resultado

Pero vemos nuestro código fuente, si estamos en firefox Ctrl + U

Hacemos click en el archivo css generado para ver el contenido:

Configurando YUI Compressor para JavaScript

En el archivo app/config/config.yml agregamos la siguiente linea:

Ahora en nuestro archivo layout.html.twig crearemos el bloque de javascript para cargar todos nuestros scripts y decirle que todos estos los comprima a un solo archivo js.

Nos dirigimos a src/Acme/DemoBundle/Resources/public y vemos que no existe la carpeta js/ así que lo creamos y dentro de ella creamos un archivo js llamamo "demo.js" donde podremos un codigo de javascript  con espacios y comentarios.

En la imagen anterior vemos 5 lineas de código, veremos como al final solo se hace una sola linea eliminando espacios en blanco y los comentarios, etc.

Para seguir con la configuración agregamos nuestro bloque javascripts en nuestro layout.html.twig para decirle que generé otro archivo js llamado "myscript.js " en la carpeta web.

En la cosola estando en nuestra carpeta colegio ejecutamos nuevamente nuestros comandos:



php app/console cache:clear

php app/console assets:install web --symlink

Ahora vamos a nuestro sitio web http://local.colegio.com y vemos lo mismo, vayamos a nuestro código fuente:

Vemos que se ha generado una llamada a nuestro archivo "myscript.js" ahora hacemos click ahí para ver que contiene:

La idea de todo esto es que ustedes pueden utilizar cualquier librería JS o CSS para su bundle o sus propios scripts  y juntarle todo en un solo comprimido.

Cuando usen otras librerías JS o CSS usen las que no tengan el formato .min ya que el YUI Compressor se encargará de ello y ademas para esta forma es mejor usarla ya que podrás hacer los cambios que creas necesario y al final comprimirla.

Para mi próximo post sera crear una especie de theme con Boostrap de twitter para usar sus componentes y hacer que nuestro proyecto sea Responsive Design

Espero sus comentarios y responder si es que hay preguntas, Nos leemos.

Crear proyecto con Symfony 2.1 en Ubuntu 12.10

Hola, vamos a instalar y generar un proyecto con Symfony 2.1 en Ubuntu 12.10 con el composer, esta es una de las formas que nos enseña este framework php y me parece que es la más recomendada si vamos a trabajar con algún repositorio de sistemas de versión.

Tengo un Ubuntu 12.10 recién instalado con LAMP y como IDE trabajaré con Netbeans 7.2

Paso 1: Necesitaremos instalar git ya que el composer lo necesita para descargar, actualizar los archivos del gitHub.

sudo apt-get install git-core

Antes de pasar al paso siguiente quiero aclarar que es necesario que sepan configurar un virtualhost, en mi caso Netbeans crea un directorio de proyectos y es ahí donde trabajaré

Osea dentro de la carpeta NetbeansProjects estarán mis proyectos en sus respectivas carpetas.
Nota: Si no logras ver la carpeta trata de crear un proyecto nuevo con Netbeans New Project->PHP Application->Next->Finish   esto te creara la una carpeta PhpProject1 dentro de nuestra carpeta NetbeansProjects, lo importante para nuestro tutorial es que existe la carpeta NetbeansProjects las carpetas internas que acaba de generar Netbeans puedes borrarla y tendrás igual a la imagen que tengo aquí arriba.

Paso 2: Ahora pasamos a instalar composer en nuestra raiz que en este caso es en nuestra carpeta NetbeansProjects, quiero aclarar que puede ser cualquier ruta donde creas que es mejor para administrar tus proyectos. Para esto abrimos nuestro terminal y ejecutamos los siguientes comandos:

sudo apt-get install curl
cd /home/johnny/NetbeansProjects
curl -s http://getcomposer.org/installer | php

la primera linea es para asegurarnos que tengamos el curl instalado, despues de instalar ingresamos a nuestra raiz /home/johnny/NetbeansProjects y ejecutamos la tercera linea para instalar el composer.

Verificamos por el explorador de archivos y veremos que se desrcargo el archivo y está listo para generar mi proyecto en symfony :)

Paso 3: Pasamos a crear nuestro proyecto, en este caso lo llamare "colegio", en el terminal estamos en la raiz osea en la carpeta NetbeansProjects, ahí ejecutamos la siguiente linea:

php composer.phar create-project symfony/framework-standard-edition colegio/ 2.1.6

Es una sola linea que ejecuta el archivo que anteriormente descargamos, le damos la orden de generar un proyecto, le decimos que será en la carpeta colegio/ y el último parámetro es la versión del symfony

Paso 4: Por el terminal ingresamos a nuestra carpeta de proyecto y ahí necesitaremos ejecutar y hacer algunas acciones, así que ejecutamos estas lineas de comando:

curl -s http://getcomposer.org/installer | php
php composer.phar install

Esta parte es importante por que más adelante nos permitirá actualizar nuestro vendor, nuestros assets para nuestros futuros bundles.

Paso 5: Vamos a instalar algunas librerias que necesitará nuestro servidor web para que funcione bien y no tenga problemas.

para saber que tenemos o que nos falta solo es necesario ejecutar por el terminal.

php app/check.php

Ahí nos listará las cosas que faltan configurar o instalar
Lo que basicamente nos saldrá es que hay 2 tareas para configurar en los php.ini y 2 librerias para instalar:
Librerias:
sudo apt-get install php5-intl
sudo apt-get install php-apc

Configuración:
Vamos a moficiar los php.ini, hay que recordar que existen 2 archivos php.ini cuando lo utiliza apache y cuando lo utiliza la linea de comando, por ello modificaremos en ambos archivos.

los cambios serán así:
date.timezone = America/Lima
short_open_tag = Off

Busca cada una de estas lineas en tu php.ini y modificalos quedando de la manera anterior, estás son las rutas de los php.ini.

/etc/php5/cli/php.ini
/etc/php5/apache2/php.ini

Terminado estás configuraciones reinicias el servicio de apache:
sudo /etc/init.d/apache2 restart
ejecutas nuevamente

php app/check.php

Permisos:
Symfony pide que obligatoriamente le demos permisos a las carpetas de log y cache esto es muy importante y en su documentación nos brinda los comandos para ejecutar y los ejecutamos

sudo setfacl -R -m u:www-data:rwx -m u:johnny:rwx app/cache app/logs
sudo setfacl -dR -m u:www-data:rwx -m u:johnny:rwx app/cache app/logs

donde vean la palabra johnny cambien por tú usuario de ubuntu que están en sesión.

Listo ahora ya casi está listo, el siguiente paso es configurar un virtualHost para tu carpeta colegio.
Este tutorial no debería entrar en este tema de configurar, pero vamos hacer una excepción.
crearemos el dominio local.colegio.com para nuestro proyecto que tenemos.

1. sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/local.colegio.com
2. sudo gedit /etc/apache2/sites-available/local.colegio.com
3. sudo gedit /etc/hosts
4. sudo a2ensite local.colegio.com
5. sudo /etc/init.d/apache2 restart

El comando número 2 se debe configurar el archivo de tal manera indicandole donde está nuestro directorio algo así.

El comando número 3 debe quedar algo así:

Para finalizar abrimos el navegador y veremos nuestro proyecto corriendo perfectamente y listo para empezar a programar xD

Abriremos local.colegio.com/app_dev.php el entorno de desarrollo, en futuros tutos enseñaré como pasar de nuestro entorno dev a producción, limpiar caché, logs, crear bundle.

Espero sus comentarios...

Layout en Ruby on rails con Bootstrap de Twitter

Vamos a desarrollar un controlado llamado "default" que contendrá la parte publica de nuestra aplicación. Para crearemos un layout llamado bootstrap usando el framework css Bootstrap de twitter

En  el enlace anterior podrán descargar los archivos y verán la documentación de la librería que nos ayudará en la aceleración dejando en segundo plano temas de css.

Para esto mi editor es Sublime Text 2 y tengo un proyecto generado llamado "support":

Paso 1: Creamos el archivo Layout.

Nos dirigimos a la carpeta app/views/layouts ahí crearemos un archivo que lo llamaré bootstrap.html.erb, con esto tenemos para el proyecto un nuevo layout llamado "bootstrap", en los futuros controladores que generes le agregaras una propiedad layout para asignarle el nombre del layout a cargarse siempre.

Paso 2: generamos un controlador y le asignamos el layout.

Abrimos un terminal y nos dirigimos a la carpeta del proyecto generado y ejecutamos el siguiente comando para generar un nuevo controlador que lo llamaré "default".


rails g controller default index


Al ejecutar esto, se generarán varios archivos y carpetas pero por ahora solo nos interesa los archivos controlador "default" y vista "index".

En la imagen anterior se observa el controlador con su respectiva vista, abrimos el controlador y vemos el método index que habíamos dicho por defecto en el comando anterior, sobre este método esta una linea  donde le decimos que este controlador se cargará el layout que deseemos.

Si queremos que todos los controladores carguen un layout que preparemos para un determinado proyecto hay que siempre agregar esa linea.

Paso 3: Preparamos el bootstrap de twitter con Ruby on Rails

Descargamos los archivos de bootstrap de su sitio web oficial: http://twitter.github.com/bootstrap/

Primero vamos a intentar solo con los archivos CSS los ubicaremos en la carpeta stylesheets de app/assets/stylesheets

El archivo que creamos en el paso 1  agregamos los css de la librería que descargamos, quedará de manera similar:

Paso 4: Usando Bootstrap en las vistas de los controladores

Ahora en la vista del default vamos a codificar puro HTML pero al estilo y reglas como las dice Bootstrap, invito a leer un poco sobre este muy buen framework de CSS.

 

Para que funcione copio el código HTML aquí, pero aconsejo que lean un poco de este framework:

   <!-- Contenedor de general-->
    <div class="container">
            <header>
                <!-- Title-->
                <div class="row">
                    <div class="span12">
                        <h1><a href="#">Twitter BootsTrap</a></h1>
                        <p>Trabajando con Twitter BootsTrap</p>
                    </div>
                </div>
                <!-- Fin del title-->
                <!-- Banner-->
                <div class="row">
                    <div class="span12">
                        <img src="http://lorempixel.com/1170/300/nature" alt="">
                    </div>
                </div>
                <!-- Fin del Banner-->
                <!-- Inicio del Menu-->
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container">
                            <ul class="nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Fin del Menu-->
            </header>
            <section class="row">
                <div class="span12">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/2" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/3" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/4" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <img src="http://lorempixel.com/260/180/sports/5" alt="" />
                                <h2>Lorem Ipsum</h2>
                                <p>Lorem ipsum dolorum</p>
                            </div>
                        </li>                       
                    </ul>
                </div>
            </section>
    </div>
    <!-- Fin del Contenedor-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Ahora solo queda explotar al máximo las ventajas que tendrán con este buena herramienta y poco a poco vamos tomando soltura para desarrollar nuestro proyecto y themes para diversos proyectos.

Crear un proyecto con Ruby on Rails

Hola, en mi anterior post instalamos Ruby on Rails en Ubuntu, ahora vamos a crear un proyecto, instalar un plugin en Netbeans, crear un controlador simple y mostrar un saludo.

Mi anterior post: Instalar Ruby on Rails en Ubuntu

Paso 1: Crear el proyecto con Ruby on Rails desde el terminal.

Vamos a crear un proyecto llamado "support" en la que más adelante implementaremos un sistema de ordenes de soporte, abrimos el terminal  o la ventana de consola y escribimos:

rails new /home/johnny/Documentos/support -d mysql

En la anterior linea de comando le indicamos a rails que genere un proyecto en la ruta puesta y como opción adicional le indicamos que sea con el motor mysql, esta última parte es opcional ya que por defecto lo genera con sqlite3.

Al terminar nos ubicamos el ruta que indicamos para crear el proyecto y veremos el directorio generado.

Paso 2: Iniciamos el servidor web de Ruby on Rails

Nos dirigimos nuevamente al terminal  ingresamos a la carpeta de nuestro proyecto, en mi caso será así:

cd /home/johnny/Documentos/support/

Ahora Ejecutamos el comando para iniciar el servidor.

rails s

EL terminal se mostrará algo como esto:

En esta anterior imagen se muestra que el servidor ya está iniciado y que puedes abrir el proyecto en tu http://localhost:3000/  

Paso 3: Instalar plugin Ruby on Rails en Netbeans

La versión que uso es la 7.1.2 y soporta muy bien, con el Netbeans 7.2.x no es posible instalar por ahora, este fix para instalar plugin en Netbeans lo encontré en los foros de  sitio web de Netbeans es solo unos cuantos pasos.

1) Ir a Tools -> Plugins -> Settings, click en Add
2) En el campo NAME escriba el nombre con el cual pueda reconocer el plugin que instales
3) En el campo URL escriba este url  http://nbruby.hron.me/updates/updates.xml
4) Click en OK

Paso 4: creamos el proyecto con Netbeans

Una vez instalado el plugin  vamos a crear un proyecto Netbeans con la opción de archivos existentes, la forma directa es posible hacerlo, pero ello implica que te pida instalar algunas gemas con netbeans es un tema que lo veremos en otro post. La idea de esto es levantar el proyecto con este IDE y disfrutar de sus opciones que algunos nos trae buena ventaja.

Click en Finish y vemos ahora el directorio del proyecto

Paso 5: Crear un controlador en Ruby on Rails

Abrimos otra ventana de terminal y nos dirigimos a la carpeta de nuestro proyecto, inmediatamente despues ejecutamos el comando para generar nuestro nuevo controlador

cd /home/johnny/Documentos/support/

rails g controller register index

Este ultimo comando tiene 4 palabras el segungo "g" es generate, la tercera palabra es indicarle el nombre del nuevo controlador en este caso "register" y la cuarta palabra es "index" esto creara una vista index.

Vemos en el directorio de Netbeans que se actualizó

Nos vamos a la carpeta config/routes.rb  y editamos  la linea 53 donde esta el root

ahí le indicamos que este será nuestro controlador por defecto.

A continuación ingresamos a la carpeta "Public" y eliminamos el archivo "index.html"

Al actualizar nuestro navegador observaremos que quizás nos muestre un error de conexión a la Base de datos Mysql que configuramos.

Para ello tenemos que hacer 2 cosas:

1. Configurar la conexión a la Base de datos esto está en la carpeta config/database.yml, este archivo tiene la configuración muestra 3 ambientes de trabajo, el que tenemos activado por defecto es el de "development" en la opción de password escribir el password de acceso a la Base de datos.

2. Ahora en el ambiente "development" el proyecto señala una Base de datos, evidentemente no existe así que tienes que crearla en tu administrador de MySQL.

Ahora vamos a editar nuestra vista con puro HTML para mostrar un mensaje en nuestra pantalla,

nos dirigimos  a la carpeta "views/register/index.html.erb"

Ahora volvemos al navegador y actualizamos nuestro navegador y observamos:

Espero que les sirva en algo, para mi próximo post será integrar con algún framework de css para trabajar de manera rápida algunas interfaces. saludos