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.

  • Linda Mejia Laura

    GRAcias !!!!!!!!!!!!!!!!!!!!!!!!!
    por compartir este nuevo video
    en espera de mas videos o el deploy GRACIAS

    • Hola Laura, si tengo el tiempo suficiente, claro que haré el vídeo del deploy, saludos!!!

  • Zay Vehz

    OVED SUBE MAS TUTORIALES porfa de lo que sea con LARAVEL

    • Hola Zay, si tengo el tiempo suficiente, haré el vídeo del deploy que sera el último del taller, saludos!!!

  • Celpabu

    gracias por compartir el 11 videotutorial espero sigas con mas sobre el mismo proyecto veras q de la noche a la mañana tendras una lluvia de seguidores animo sigue adelante

    • Gracias Celpabu por seguir el taller, saludos!

  • Roberto Figuera Espinoza

    Muchisiiimasss gracias Oved me gusto mucho la dinámica del taller te felicito por saber explicar todo muy claramente… Espero que tengas el tiempo para hacer el deploy te lo agradeceremos muchisimo..

    • Gracias Roberto por seguir el taller, saludos!!!

  • Linda Mejia Laura

    LISTO POR FIN TERMINE CON EL TALLER … … PARA MI QUE SOY NUEVA EN ESTO, EL TALLER ME GUSTO , LA DINAMICA EXCELENTE… PUDE ENTENDER BASTANTE BIEN…
    AHORA SI EN ESPERA DEL DEPLOY

  • Alma Lopez

    he seguido todos tus videos, impresionante.. muy bien expicados, y entendibles espero continues subiendo mas talleres, o los impartas en el telmex hub………. pero tengo dos observacioines
    en el inicio del curso en la introducion se tiene la funcionalidad de ordenar por categorias….. pero en esta version final no tiene esa funcionalidad podrias ayudarnos como se hace????
    y otra cosa TAMBIEN haras el deploy???????????????????

    saludossssssssssss

    • Hola Alma, gracias por seguir el taller, con lo que vimos creo que sería fácil que implementaran la parte de las categorías, solo tienen que:

      Poner en el catálogo en cada producto un enlace a su categoría:

      route(‘category’, $producto->category->slug) }}

      Crear la petición en el router:
      Route::get(‘category/{slug}’, [
      ‘as’ => ‘category’,
      ‘uses’ => ‘StoreController@category’
      ]);

      Definir el método category en el StoreController:
      public function category($slug)
      {
      $productos = Category::where(‘slug’, $slug)->first()->products;
      return view(‘store.category’, compact(‘productos’));
      }

      Y por ultimo crear la vista category y ahí mostrar los productos de forma similar a como se muestran en el home, espero te sea de ayuda, respecto al deploy, se los sigo debiendo, saludos!!!

      • Alma Lopez

        AHH YA VI GRACIASS

        solo te falto comentar: que hay que agregar
        use AppCategory;

        en el STORECONTROLLER . porque si no no jalaaaaaaaaaaaaaa

        sigo esperando el DEPLOY…….
        sigo esperando el DEPLOY…….
        sigo esperando el DEPLOY…….

  • PERRITOS AYUDA

    A QUI…. CASUALLLLLLLLLLLLLLLLLLLLLLLLLLLLL

  • Celpabu

    esperando

  • Linda Mejia Laura

    mr oved quisiera solicitarle mas TALLERES

    SALUDOS

  • benito chuta

    Me gusto mucho el taller, ya en lo ultimo en los pedidos no me deja eliminar

    y me presenta el siguente error:

    MethodNotAllowedHttpException in RouteCollection.php line 219:

    in RouteCollection.php line 219

    at RouteCollection->methodNotAllowed(array(‘GET’, ‘HEAD’)) in RouteCollection.php line 206

    at RouteCollection->getRouteForMethods(object(Request), array(‘GET’, ‘HEAD’)) in RouteCollection.php line 158

    at RouteCollection->match(object(Request)) in Router.php line 750

    • Hola Benito, gracias por seguir el taller, probablemente el error este en el tipo de petición que haces, es decir, en los otros CRUDs, utilizábamos RESTfull, por lo que al eliminar un registro, la petición era de tipo DELETE, por lo que en nuestro código para eliminar un registro teníamos que poner lo siguiente:

      En Orders no usamos RESTfull por lo que no necesitamos ese input de tipo hidden y en routes tenemos que hacer la petición de tipo GET:

      Route::get(‘order/{id}’, [
      ‘as’ => ‘admin.order.destroy’,
      ‘uses’ => ‘OrderController@destroy’
      ]);

      Espero te sea de ayuda, saludos!

  • Nikon

    Hola estoy siguiendo tus vídeos y me encantan, muy bien explicado y aunque han pasado unos añitos son perfectamente válidos. ero tengo una consulta que hacerte.
    Me gustaría saber como mostrar los pedidos de un usuario en particular. Así cada usuario podría consultar su propio historial en su dashboard. Gracias.

  • Fredy Romero

    Hola OVEDFS quisiera saber como hacer para hacer lo que muestras en tu demo lo del filtrado por categorias… no se si podrias ayudarme con eso