Php Bitter Sweet Symfony!

Slide 1: php | Bitter Sweet Symfony! Desarrollo de una Micro-Red-Social con Symfony Ricard Luquero (rluquero@gmail.com) CTO de Construmatica.com (Grupo Intercom) Aldo Chiecchia (zimage@tiscali.it) Desarrollador web para Atrapalo.com

Slide 2: Presentación de la práctica Desarrollo de una micro-red-social presentando las principales características de Symfony

Slide 3: Sumario • Instalación y configuración • ¿Cómo va a ser nuestra MSN? • Creación del modelo de datos • Primeros pasos en el MVC

Slide 4: Punto de partida Esta práctica está basada en el • "My first symfony project" que puede encontrarse en la home de Symfony: http://www.symfony-project.org Esa práctica constituye una muy buena primera toma de contacto con Symfony. Nosotros vamos a repasarla realizando ciertas modificaciones para enriquecerla. Para conocer más al detalle el framework, aun más recomendable es el Tutorial de Askeet.

Slide 5: Instalación y configuración Es mucho más que recomendable la instalación de Symfony mediante PEAR, pero para nuestra práctica vamos a descargar la sandbox ya que nos interesa centrarnos en otros aspectos del framework. Symfony Home > Installation

Slide 6: Instalación y configuración (2) • Descargamos la sandbox • La descomprimimos en el root del webserver (Apache) • La renombramos como "msn" (micro-s...) • Validamos la ruta: http://localhost/msn/web, donde debería aparecernos algo parecido a esto:

Slide 7: Estructura del proyecto Es el momento de echar un vistazo a la estructura del proyecto. Prestamos especial atención a los directorios: /apps /apps/frontend /apps/frontend/modules /apps/frontend/templates /lib /lib/model /web

Slide 8: ¿Cómo va a ser nuestra MSN? Las expectativas en cuanto a la prestaciones de nuestra micro red no son muy altas, nos conformaremos con una aplicación que sea capaz de: • Mostrar el listado de usuarios • Mostrar la información de un usuario en particular • Ver las relaciones de amistad entre usuarios • Ver los mensajes que se envían los usuarios.

Slide 9: Creación del modelo de datos Lo que nos interesa en última instancia es disponer del modelo de datos en XML, así que podemos crearlo directamente o bien diseñarlo con alguna herramienta gráfica. Nosotros hemos optado por el uso de una herramienta gráfica si bien se ofrece el XML final para agilizar este paso. Para el diseño del modelo usaremos DBDesigner que puede descargarse de: http://www.fabforce.net/dbdesigner4/

Slide 10: Creación del modelo de datos (2) Durante el proceso necesitaremos transformar el 'ugly XML' de DBDesigner en un 'nice XML' listo para ser procesado por Symfony.

Slide 11: Creación del modelo de datos (3) Para poder realizar esta transformación diponemos de un pequeño script que deberemos copiar junto con la librería que requiere. (se pueden encontrar en el msn_pack.zip) /batch/create_schema.php /batch/lib/dbd2propel.xsl Es necesario que PHP disponga de la extensión XSL. • En Linux puede instalarse mediante: yum install php-xml / apt-get install php5-xsl • En Windows será necesasrio activar la extensión XSL de PHP si no está activada.

Slide 12: Creación del modelo de datos (4)

Slide 13: Creación del modelo de datos (4) Teniendo en cuenta que tenemos el archivo: /config/dbdesigner_msn.xml (creado con DBDesigner, pero puede encontrare en el msn_pack.zip) ejecutamos el script: php batchcreate_schema.php que nos creará el archivo: /config/schema.xml (disponible también en el msn_pack.zip) Nota: Debemos asegurarnos de haber eliminado el archivo: /config/schema.yml

Slide 14: Importación de los datos de prueba Preparamos un archivo con los datos de prueba para nuestra red: /data/fixtures/test_data.yml User: aldo: username: zim first_name: Aldo last_name: Chiecchia description: Desarrollador web para Atrapalo.com ... (disponible en el msn_pack.zip)

Slide 15: Ejecución del comando mágico En este momento disponemos del schema.xml y de los datos del juego de pruebas test_data.yml así que ya podemos ejecutar el comando mágico: symfony propel-build-all-load frontend

Slide 16: Creación de los módulos Para poder disponer de un módulo sobre el que trabajar y poder empezar a ver algo de nuestra aplicación deberemos crearlo con el comando que Symfony pone a nuestra disposición: symfony init-module frontend user

Slide 17: Configuración inicial del routing Necesitamos modificar la página principal de nuestra aplicación para que apunte al nuevo módulo que hemos creado. /apps/frontend/config/routing.yml homepage: url: / param: { module: user, action: index } Vacíamos la caché: symfony cc

Slide 18: Configuración de la home Renombramos el archivo indexSuccess.php a listSuccess.php y creamos una redirección interna de la acción "index" a la acción "list" ya que inicialmente mostraremos en la home el listado de usuarios de la red. Nuestra acción quedará así: /apps/frontend/modules/user/actions/actions.class.php public function executeIndex() { $this->forward('user', 'list'); } public function executeList() {}

Slide 19: Configuración de la home (2) Para poder ver que realmente estamos avanzando, vamos a editar el template que se muestra en la homepage de nuestra aplicación: /apps/modules/user/templates/listSuccess.php <h1>User list</h1> y revisitamos nuestra home.

Slide 20: Dejando la home presentable Le damos algo de "vidilla" a la home mediante una plantilla obtenida en http://www.oswd.org/ • Copiamos el contenido de template_oswd/css/sytle.css* en nuestro /web/css/main.css • Copiamos el directorio template_oswd/img* y a /web/img eliminamos el directorio /web/images que venía con la sandbox. • Hacemos un "remix" con el template_oswd/index.htm* y el template principal de nuestra aplicación (/apps/frontend/templates/layout.php) conservando obviamente la línea: <?php echo $sf_data->getRaw('sf_content') ?> * todos estos archivos pueden encontrarse en el msn_pack.zip

Slide 21: Dejando la home presentable (2) Modoficamos ligeramente el layout.php para que sea capaz de redirigir a la home. /apps/modules/user/templates/listSuccess.php <h2><?php echo link_to('Micro-Social-Network', '@homepage'); ?></h2> <div id="menu"> <ul> <li><?php echo link_to('home', '@homepage', 'class=current'); ?></li> <li><a href="#">sign-in</a></li> <li><a href="#">login/logout</a></li> </ul> </div>

Slide 22: Dejando la home presentable (3) Revisamos como va quedando nuestra home: http://localhost/msn/web Bueno, estoy ya va tomando algo de forma, vamos a preparar ahora el listado de usuarios: • Recuperando el listado desde el action (controller) • Mostrando el listado desde el template (view)

Slide 23: Trabajando con el View / Controller /apps/frontend/modules/user/actions/actions.class.php $this->users = BaseUserPeer::doSelect(new Criteria()); /apps/frontend/modules/user/templates/listSuccess.php <ul> <?php foreach ($users as $user): ?> <li><?php echo link_to($user->getFirstName() . ' ' . $user- >getLastName(), 'user/show?id=' . $user->getId()); ?></li> <?php endforeach; ?> </ul>

Slide 24: El Model entra en acción Observamos que en la anterior acción el código relacionado con la obtenición del nombre de usuario no es el mas adecuado dentro de una estructura MVC, así que hacemos entrar en acción al model: /lib/model/User.php public function __toString () { return $this->getFirstName () . ' ' . $this->getLastName (); }

Slide 25: Paseo por el view.yml Nos damos un pequeño paseo por el view.yml para configurar el título y vor sus opciones. /apps/frontend/config/view.yml default: http_metas: content-type: text/html metas: title: MSN - Micro Social Network robots: index, follow description: symfony project keywords: symfony, project ....

Slide 26: Dando unos pasos más Lo que nos queda por ver es como trabajar más detalladamente con la estructura de Symfony. Los "slides" que quedan muestran únicamente el contenido de los 2 archivos que nos permiten disponer de algo más de interactividad en nuestras páginas. En el controlador de acciones añadiremos una nueva función: executeShow que muestra la información específica de usuarios y crearemos también un nuevo template para visualizar esa acción.

Slide 27: /apps/frontend/modules/user/actions/actions.class.php public function executeShow() { $userId = $this->getRequestParameter('id'); $this->user = UserPeer::retrieveByPk($userId); $this->forward404Unless($this->user); // Se obtienen todos los enviados al usuario (es decir donde él es el receptor) $c = new Criteria(); $c->add(MessagePeer::RECEIVER_ID, $userId); $c->addDescendingOrderByColumn(MessagePeer::CREATED_AT); $this->messages = MessagePeer::doSelect($c); (...)

Slide 28: /apps/frontend/modules/user/actions/actions.class.php (2) (...) // Se obtienen todas las relaciones en las que está el usuario, pero únicamente // las que han sido confirmadas $c = new Criteria(); $c->addJoin(RelationPeer::STATUS_ID, StatusPeer::ID); $criterion = $c->getNewCriterion(RelationPeer::REQUESTER_ID, $userId); $criterion->addOr($c->getNewCriterion(RelationPeer::RECEIVER_ID, $userId)); $criterion->addAnd($c->getNewCriterion(StatusPeer::NAME, 'accepted')); $c->add($criterion); $this->relations = RelationPeer::doSelect($c); }

Slide 29: /apps/frontend/modules/user/templates/showSuccess.php <h2>Profile</h2> <ul> <li><strong>First name:</strong> <?php echo $user->getFirstName(); ?></li> <li><strong>Last name:</strong> <?php echo $user->getLastName(); ?></li> <li><strong>Username:</strong> <?php echo $user->getUsername(); ?></li> <li><strong>Description:</strong><br/><?php echo $user->getDescription(); ?></li> </ul> (...)

Slide 30: /apps/frontend/modules/user/templates/showSuccess.php (2) (...) <h2>Friends</h2> <ul> <?php foreach ($relations as $relation): ?> <?php if ($relation->getRequesterId() == $user->getId()) $friend = $relation->getUserRelatedByReceiverId (); else $friend = $relation->getUserRelatedByRequesterId (); ?> <li><?php echo link_to ($friend, 'user/show?id=' . $friend->getId()); ?></li> <?php endforeach; ?> </ul> (...)

Slide 31: /apps/frontend/modules/user/templates/showSuccess.php (3) (...) <h2>Message area</h2> <ul> <?php foreach ($messages as $message): ?> <li> <?php echo $message->getContent(); ?><br/> <span class="date"><?php echo $message->getCreatedAt(); ?></span> - <?php echo link_to($message->getUserRelatedBySenderId(), 'user/show?id=' . $message->getSenderId(), 'class=grey'); ?> <br/><br/> </li> <?php endforeach; ?> </ul>

Slide 32: Conclusiones Hemos visto algunas de las funcionalidades básicas que ofrece Symfony, desde la generación de las clases asociadas a las tablas de la base de datos, pasando por el uso de Propel y las manera en la que podemos navegar por todas las relaciones entre objetos de forma fácil.

Slide 33: Créditos Este taller fue presentado en el marco de la primera Barcelona PHP Workshop en junio de 2008.