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:

php artisan make:controller Admin/OrderController --plain

1	php artisan make:controller Admin/OrderController --plain

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:

// Obtenemos todos los pedidos
Route::get('orders', [
    'as' => 'admin.order.index',
    'uses' => 'OrderController@index'
]);

// Eliminamos un pedido en base a su id
Route::delete('order/{id}', [
    'as' => 'admin.order.destroy',
    'uses' => 'OrderController@destroy'
]);

// Petición que se hará vía ajax
Route::post('order/get-items', [
    'as' => 'admin.order.getItems',
    'uses' => 'OrderController@getItems'
]);

// Obtenemos todos los pedidos

Route::get('orders', [

'as' => 'admin.order.index',

'uses' => 'OrderController@index'

]);

// Eliminamos un pedido en base a su id

Route::delete('order/{id}', [

'as' => 'admin.order.destroy',

'uses' => 'OrderController@destroy'

]);

// Petición que se hará vía ajax

Route::post('order/get-items', [

'as' => 'admin.order.getItems',

'uses' => 'OrderController@getItems'

]);

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

// Relación User -> Order
public function orders()
{
    return $this->hasMany('App\Order');
}

// Relación Order -> User
public function user()
{
    return $this->belongsTo('App\User');
}

// Relación Order -> OrderItem
public function order_items()
{
    return $this->hasMany('App\OrderItem');
}

// Relación OrderItem -> Order
public function order()
{
    return $this->belongsTo('App\Order');
}

// Relación OrderItem -> Product
public function product()
{
    return $this->belongsTo('App\Product');
}

// Relación Product -> OrderItem
public function order_item()
{
    return $this->hasOne('App\OrderItem');
}

// Relación User -> Order

public function orders()

{

return $this->hasMany('App\Order');

}

// Relación Order -> User

public function user()

{

return $this->belongsTo('App\User');

}

// Relación Order -> OrderItem

public function order_items()

{

return $this->hasMany('App\OrderItem');

}

// Relación OrderItem -> Order

public function order()

{

return $this->belongsTo('App\Order');

}

// Relación OrderItem -> Product

public function product()

{

return $this->belongsTo('App\Product');

}

// Relación Product -> OrderItem

public function order_item()

{

return $this->hasOne('App\OrderItem');

}

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:

public function index()
{
    $orders = Order::orderBy('id', 'desc')->paginate(5);
    return view('admin.order.index', compact('orders'));
}

public function index()

{

$orders = Order::orderBy('id', 'desc')->paginate(5);

return view('admin.order.index', compact('orders'));

}

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:

@extends('admin.template')

@section('content')
    <div class="container text-center">
        <div class="page-header">
            <h1>
                <i class="fa fa-shopping-cart"></i> PEDIDOS
            </h1>
        </div>
        
        <div class="page">
            
            <div class="table-responsive">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Ver Detalle</th>
                            <th>Eliminar</th>
                            <th>Fecha</th>
                            <th>Usuario</th>
                            <th>Subtotal</th>
                            <th>Envio</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($orders as $order)
                            <tr>
                                <td>
                                    <a 
                                        href="#" 
                                        class="btn btn-primary btn-detalle-pedido"
                                        data-id="{{ $order->id }}"
                                        data-path="{{ route('admin.order.getItems') }}"
                                        data-toggle="modal" 
                                        data-target="#myModal"
                                        data-token="{{ csrf_token() }}"
                                    >
                                        <i class="fa fa-external-link"></i>
                                    </a>
                                </td>
                                <td>
                                    {!! Form::open(['route' => ['admin.order.destroy', $order->id]]) !!}
        								<button onClick="return confirm('Eliminar registro?')" class="btn btn-danger">
        									<i class="fa fa-trash-o"></i>
        								</button>
        							{!! Form::close() !!}
                                </td>
                                <td>{{ $order->created_at }}</td>
                                <td>{{ $order->user->name . " " . $order->user->last_name }}</td>
                                <td>${{ number_format($order->subtotal,2) }}</td>
                                <td>${{ number_format($order->shipping,2) }}</td>
                                <td>${{ number_format($order->subtotal + $order->shipping,2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <hr>
            
            <?php echo $orders->render(); ?>
            
        </div>
    </div>
    
    @include('admin.partials.modal-detalle-pedido')
    
@stop

@extends('admin.template')

@section('content')

<h1>

<i class="fa fa-shopping-cart"></i> PEDIDOS

</h1>

</div>

<thead>

<tr>

<th>Ver Detalle</th>

<th>Eliminar</th>

<th>Fecha</th>

<th>Usuario</th>

<th>Subtotal</th>

<th>Envio</th>

<th>Total</th>

</tr>

</thead>

<tbody>

@foreach($orders as $order)

<tr>

<td>

href="#"

class="btn btn-primary btn-detalle-pedido"

data-id="{{ $order->id }}"

data-path="{{ route('admin.order.getItems') }}"

data-toggle="modal"

data-target="#myModal"

data-token="{{ csrf_token() }}"

</a>

</td>

<td>

{!! Form::open(['route' => ['admin.order.destroy', $order->id]]) !!}

</button>

{!! Form::close() !!}

</td>

<td>{{ $order->created_at }}</td>

<td>{{ $order->user->name . " " . $order->user->last_name }}</td>

<td>${{ number_format($order->subtotal,2) }}</td>

<td>${{ number_format($order->shipping,2) }}</td>

<td>${{ number_format($order->subtotal + $order->shipping,2) }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

<hr>

<?php echo $orders->render(); ?>

</div>

@include('admin.partials.modal-detalle-pedido')

@stop

Con esto nuestra vista index se vera así:

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

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Detalle del Pedido: </h4>
      </div>
      <div class="modal-body">
        
        <div class="table-responsive">
          <table class="table table-stripped table-bordered table-hover" id="table-detalle-pedido">
            <thead>
              <tr>
                <th>Imagen</th>
                <th>Producto</th>
                <th>Precio</th>
                <th>Cantidad</th>
                <th>Subtotal</th>
              </tr>
            </thead>
            <tbody>
              
            </tbody>  
          </table>
        </div>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<h4 class="modal-title" id="myModalLabel">Detalle del Pedido: </h4>

</div>

<thead>

<tr>

<th>Imagen</th>

<th>Producto</th>

<th>Precio</th>

<th>Cantidad</th>

<th>Subtotal</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>

</div>

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:

<a 
    href="#" 
    class="btn btn-primary btn-detalle-pedido"
    data-id="{{ $order->id }}"
    data-path="{{ route('admin.order.getItems') }}"
    data-toggle="modal" 
    data-target="#myModal"
    data-token="{{ csrf_token() }}"
>
    <i class="fa fa-external-link"></i>
</a>

href="#"

class="btn btn-primary btn-detalle-pedido"

data-id="{{ $order->id }}"

data-path="{{ route('admin.order.getItems') }}"

data-toggle="modal"

data-target="#myModal"

data-token="{{ csrf_token() }}"

</a>

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:

$(document).ready(function(){
    
    // Ver detalle de un Pedido
    $(".btn-detalle-pedido").on('click', function(e){
        e.preventDefault();
        
        var id_pedido = $(this).data('id');
        var path = $(this).data('path');
        var token = $(this).data('token');
        var modal_title = $(".modal-title");
        var modal_body = $(".modal-body");
        var loading = '<p><i class="fa fa-circle-o-notch fa-spin"></i> Cargando datos</p>';
        var table = $("#table-detalle-pedido tbody");
        var data = {'_token' : token, 'order_id' : id_pedido};
        
        modal_title.html('Detalle del Pedido: ' + id_pedido);
        table.html(loading);
        
        $.post(
            path,
            data,
            function(data){
        		console.log(data);
        		table.html("");
        		
                for(var i=0; i<data.length; i++){
                    
                    var fila = "<tr>";
                    fila += "<td><img src='" + data[i].product.image + "' width='30'></td>";
                    fila += "<td>" + data[i].product.name + "</td>";
                    fila += "<td>$ " + parseFloat(data[i].price).toFixed(2) + "</td>";
                    fila += "<td>" + parseInt(data[i].quantity) + "</td>";
                    fila += "<td>$ " + (parseFloat(data[i].quantity) * parseFloat(data[i].price)).toFixed(2) + "</td>";
                    fila += "</tr>";
                    
                    table.append(fila);
                }
            },
            'json'
        );
        
    });
    
});

$(document).ready(function(){

// Ver detalle de un Pedido

$(".btn-detalle-pedido").on('click', function(e){

e.preventDefault();

var id_pedido = $(this).data('id');

var path = $(this).data('path');

var token = $(this).data('token');

var modal_title = $(".modal-title");

var modal_body = $(".modal-body");

var loading = '<p><i class="fa fa-circle-o-notch fa-spin"></i> Cargando datos</p>';

var table = $("#table-detalle-pedido tbody");

var data = {'_token' : token, 'order_id' : id_pedido};

modal_title.html('Detalle del Pedido: ' + id_pedido);

table.html(loading);

$.post(

path,

data,

function(data){

console.log(data);

table.html("");

for(var i=0; i<data.length; i++){

var fila = "<tr>";

fila += "<td><img src='" + data[i].product.image + "' width='30'></td>";

fila += "<td>" + data[i].product.name + "</td>";

fila += "<td>$ " + parseFloat(data[i].price).toFixed(2) + "</td>";

fila += "<td>" + parseInt(data[i].quantity) + "</td>";

fila += "<td>$ " + (parseFloat(data[i].quantity) * parseFloat(data[i].price)).toFixed(2) + "</td>";

fila += "</tr>";

table.append(fila);

}

'json'

);

});

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:

public function getItems(Request $request)
{
    $items = OrderItem::with('product')->where('order_id', $request->get('order_id'))->get();
    return json_encode($items);
}

public function getItems(Request $request)

{

$items = OrderItem::with('product')->where('order_id', $request->get('order_id'))->get();

return json_encode($items);

}

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

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:

public function handle($request, Closure $next)
{
    if ($this->auth->guest()) {
        if ($request->ajax()) {
            return response('Unauthorized.', 401);
        } else {
            return redirect()->guest('auth/login');
        }
    }
    
    if($request->path() == 'order-detail') return $next($request);
    
    if(auth()->user()->type != "admin"){
        $message = 'Permiso denegado: Solo los administradores pueden entrar a esta sección';
        return redirect()->route('home')->with('message', $message);
    }

    return $next($request);
}

public function handle($request, Closure $next)

{

if ($this->auth->guest()) {

if ($request->ajax()) {

return response('Unauthorized.', 401);

} else {

return redirect()->guest('auth/login');

}

if($request->path() == 'order-detail') return $next($request);

if(auth()->user()->type != "admin"){

$message = 'Permiso denegado: Solo los administradores pueden entrar a esta sección';

return redirect()->route('home')->with('message', $message);

}

return $next($request);

}

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:

// Admin

Route::group(['namespace' => 'Admin', 'middleware' => ['auth:admin'], 'prefix' => 'admin'], function()
{
    Route::get('home', function(){
        return view('admin.index');
    });
    
    Route::resource('category', 'CategoryController');
    
    Route::resource('product', 'ProductController');
    
    Route::resource('user', 'UserController');
    
    Route::get('orders', [
        'as' => 'admin.order.index',
        'uses' => 'OrderController@index'
    ]);
    
    Route::get('order/{id}', [
        'as' => 'admin.order.destroy',
        'uses' => 'OrderController@destroy'
    ]);
    
    Route::post('order/get-items', [
        'as' => 'admin.order.getItems',
        'uses' => 'OrderController@getItems'
    ]);
});

// Admin

Route::group(['namespace' => 'Admin', 'middleware' => ['auth:admin'], 'prefix' => 'admin'], function()

{

Route::get('home', function(){

return view('admin.index');

});

Route::resource('category', 'CategoryController');

Route::resource('product', 'ProductController');

Route::resource('user', 'UserController');

Route::get('orders', [

'as' => 'admin.order.index',

'uses' => 'OrderController@index'

]);

Route::get('order/{id}', [

'as' => 'admin.order.destroy',

'uses' => 'OrderController@destroy'

]);

Route::post('order/get-items', [

'as' => 'admin.order.getItems',

'uses' => 'OrderController@getItems'

]);

});

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
- ovedfs
  
  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
- ovedfs
  
  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
- ovedfs
  
  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..
- ovedfs
  
  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
- ovedfs
  
  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
- ovedfs
  
  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