Rikishi, proyecto final del Curso de Desarrollo de Aplicaciones Web Dinámicas

Última actualización el Lunes 14 de Febrero de 2011 02:45 Escrito por Carlos Domingo 13 de Febrero de 2011 19:38

Rikishi: carrito de la compra

Hace unas semanas acabé el Curso de Desarrollo de Aplicaciones Web Dinámicas de la UNED. El proyecto más importante, con el que más aprendí y el que más me costó, fue este de creación de una tienda de comercio electrónico.  

Ya había hecho, en gran medida, el diseño en css en otro trabajo.  Ahora, tenía que programar la funcionalidad en php. Me ha costado lo mío, pero estoy bastante contento con el resultado. 

Aunque en un principio intenté hacer la página "desde cero" luego vi que me sería muy complicado si no usaba algún framework de desarrollo. Así que elegí Symfony y desarrollé la página sobre esa base. En otro post analizaré mis impresiones sobre este framework, comparándolo con CodeIgniter (con el que me estoy familiarizando ahora). 

La página que creáramos para este trabajo tenía unos requisitos:

• Sistema de gestión de usuarios, con diferentes niveles de permisos.
• Pasarela de pago.
• Productos organizados por categorías y almacenados en una base de datos en MySql.
• Carrito de la compra.

Como metas personales intenté que la página fuera fácil de usar, limpia y que no dependiera de JavaScript para funcionar (aunque sí incluyera mejoras con este lenguaje). 

La portada es prácticamente la misma que en el diseño inicial:

Como veis, los nombres de producto y sus descripciones son un poco peculiares  . El interrogante que se repite tantas veces es la imagen por defecto cuando no hay ninguna foto asociada al producto mostrado. En una página real, pondría un "no hay imagen de este producto". En la portada se muestra el producto más reciente de cada una de las 6 categorías principales. 

Al hacer click en una categoría del menú superior (o del nombre de la categoría en la portada o el footer), el usuario pasa a la vista de categoría. Si la categoría seleccionada tiene otras subcategorías, se le muestran. De lo contrario, se le muestran los productos. 

Detalle del menú de la página

Vista de categoría principal

El nombre de la categoría enlaza a la misma

Se muestran los productos pertenecientes a la subcategoría

Cuando se selecciona un producto, se ven sus detalles completos (fotos, descripción detallada y características). 

Detalles del producto seleccionado 

Si se quiere comprar el producto, se puede añadir al carrito, para lo cual hay que iniciar sesión.

Pantalla de inicio de sesión

Una vez el usuario se ha autenticado, puede añadir más productos al carrito o revisarlo.

Se muestra un mensaje al usuario cuando añade un producto al carrito

Revisión del carrito

 La página cuenta con un sistema de búsqueda por AJAX, aunque si el usuario no dispone de JavaScript la búsqueda funciona igualmente:

Los resultados aparecen inmediatamente y son paginados 

Aunque no se incluía en los requisitos, creé una página de ejemplo de preguntas frecuentes, en la que los nombres de las preguntas son lo único que aparece inicialmente para facilitar su búsqueda. Cuando el usuario hace click en la pregunta que tiene, se despliega la respuesta. 

Las preguntas se despliegan con un efecto de JavaScript

Por otra parte, para insertar y editar productos, los administradores cuentan con un backend de acceso restringido: 

Panel de administración

En este caso, modifiqué el CSS por defecto de Symfony ligeramente para que fuera más acorde con el resto de la página, pero no gasté mucho tiempo en ello: lo importante era la funcionalidad en este caso.

El backend permite gestionar productos, categorías, ofertas, usuarios, etc. Filtra los productos y los pagina. Permite activarlos, borrarlos y editarlos fácilmente.  

Como veis, la página tiene bastantes cosas (aunque podría tener muchas más) y ha sido una buena manera de desarrollar en la práctica los conocimientos de PHP, MySQL y AJAX que había aprendido en la teoría del curso. 

| Más...