11 Panel de Administración 04 – Taller de desarrollo de una Tienda en Línea

Hola, bienvenido(a), al Post 11 del Taller de Desarrollo de una Tienda en línea con Bootstrap, Laravel 5.1 y la API de Paypal.

Continuamos desarrollando el Panel de Administración de nuestra tienda en línea.

Hoy vamos a finalizar el desarrollo de nuestro panel, crearemos la parte de Pedidos y pondremos unas restricciones de acceso al Panel, para que solo puedan ingresar los usuarios que hayan iniciado sesión y que tengan el rol de administrador:

Creamos nuestro controlador, esto lo hacemos desde la línea de comandos:

Para los pedidos no vamos a usar RESTful porque solo nos interesa ver el listado de pedidos, el detalle y poder eliminarlos.

Ahora registramos las peticiones que vamos a usar en nuestro router:

Necesitamos establecer las relaciones que existen entre nuestros recursos para poder simplificar las consultas, estas relaciones las establecemos en los modelos.

PEDIDOS

Para mostrar todos los pedidos recibidos usaremos el método index de nuestro controller, ahí obtenemos los pedidos ordenados por id de forma descendente y de 5 en 5 (para realizar la paginación), se los pasamos a la vista index:

Creamos en la carpeta admin dentro de views una carpeta llamada order y dentro el archivo index.blade.php, en el que mostraremos una tabla con todos nuestros pedidos:

Con esto nuestra vista index se vera así:

crud_orders_2
También necesitamos crear la vista parcial modal-detalle-pedido, esta vista contendrá el código de bootstrap para crear ventanas modales.

DETALLE DEL PEDIDO

Ahora para implementar el detalle de cada pedido vamos a usar javascript, mediante jquery haremos una petición al server para que nos devuelva todos los items de un pedido y los mostraremos en una ventana modal (usando bootstrap).

El código del botón “Ver detalle”, guardará los datos que necesitamos usar desde javascript: el id del pedido, el path a donde haremos la petición, el token, la clase btn-detalle-pedido (que nos permitirá ubicar cada botón) y otros datos necesarios para usar la ventana modal:

Creamos nuestro archivo javascript llamado main.js que guardaremos en la carpeta js dentro de admin en public, enlazamos este archivo desde nuestro template y el código que contendrá es el siguiente:

Cada vez que se de click en un botón “Ver detalle”, sucederá lo siguiente (usando javascript):

  • Se obtendrán todos los datos guardados en el botón
  • Se hará una petición al server vía Ajax, usando la función $.post de jquery
  • El server devolverá los items del pedido correspondiente en formato json
  • Crearemos el html necesario por cada item y lo agregaremos a la tabla contenida en la ventana modal
  • Mostraremos la ventana modal

El método getItems de nuestro controller es el que dará respuesta a la petición:

Así se vera el detalle de un pedido, mostrado en una ventana modal:

crud_orders

ACCESO AL PANEL (RESTRICCIONES)

Nuestra aplicación tiene 2 áreas a las que es necesario haber iniciado sesión para poder ingresar y son el Detalle de un pedido (front) y el Panel de administración (back), además para el panel es necesario que el usuario tenga el rol de administrador, por lo que para establecer estas restricciones modificaremos el Middleware auth, esto en el archivo Authenticate.php, quedando de la siguiente forma:

Vamos a aplicar el middleware auth a todas las peticiones del panel en nuestro router, además de establecer el namespace y un prefijo, para hacerlo agrupamos nuestra peticiones:

De esta forma si tratamos de entrar al panel y no hemos iniciado sesión, seremos redireccionados al formulario de login y si ya iniciamos sesión pero no tenemos el rol de administrador, seremos redireccionados al home y se nos mostrara un mensaje indicándonos que no tenemos acceso a esa sección.

En el siguiente vídeo puedes ver la explicación completa:

De esta forma hemos finalizado el desarrollo de nuestra tienda, tanto el front como el back, probablemente haga otro post sobre el deploy, (espero tener el tiempo suficiente).

Eso es todo para este post, compartanlo por favor y si es el ultimo les agradezco su tiempo, espero les haya sido de utilidad este taller y nos vemos en algún otro taller, suerte 🙂

Si les gusto el taller denle un like por favor a la página de facebook de linkdesigns.com.