Setelah halaman transaksi dan customer sudah kita buat, sekarang kita akan membuat halaman laporan penjualan. Kita cukup membuat 1 buah controller dan 2 buah file views.

# Buat Laporan Controller

Buka terminal dan jalankan perintah

php artisan make:controller LaporanController

tekan enter dan tunggu sampai file LaporanController.php selesai dibuat. Selanjutnya buka file LaporanController.php dan isi dengan kode berikut.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class LaporanController extends Controller
{
    public function index() {
        $data = array('title' => 'Form Laporan Penjualan');
        return view('laporan.index', $data);
    }

    public function proses() {
        $data = array('title' => 'Laporan Penjualan');
        return view('laporan.proses', $data);
    }
}

# Tambahkan route laporan

Buka file routes/web.php dan tambahkan route ke form laporan dan proses laporan.

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', '[email protected]');
Route::get('/about', '[email protected]');
Route::get('/kontak', '[email protected]');
Route::get('/kategori', '[email protected]');
Route::get('/kategori/{slug}', '[email protected]');
Route::get('/produk', '[email protected]');
Route::get('/produk/{slug}', '[email protected]');

Route::group(['prefix' => 'admin'], function() {
  Route::get('/', '[email protected]');
  // route kategori
  Route::resource('kategori', 'KategoriController');
  // route produk
  Route::resource('produk', 'ProdukController');
  // route customer
  Route::resource('customer', 'CustomerController');
  // route transaksi
  Route::resource('transaksi', 'TransaksiController');
  // profil
  Route::get('profil', '[email protected]');
  // setting profil
  Route::get('setting', '[email protected]');
  // form laporan
  Route::get('laporan', '[email protected]');
  // proses laporan
  Route::get('proseslaporan', '[email protected]');
});

Selanjutnya buat 2 buah file views.

# Buat file form laporan

Buat 1 buah folder baru di folder views dengan nama laporan. Pada folder laporan buat 1 buah file dengan nama index.blade.php dan isi dengan kode berikut.

@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col col-lg-4 col-md-4">
      <div class="card card-primary card-outline">
        <div class="card-header">
          <h3 class="card-title">Form Laporan</h3>
        </div>
        <div class="card-body">
          <form action="#">
            <div class="form-group">
              <label for="bulan">Bulan</label>
              <select name="bulan" id="bulan" class="form-control">
                <option value="1">Januari</option>
                <option value="2">Februari</option>
                <option value="3">Maret</option>
                <option value="4">April</option>
                <option value="5">Mei</option>
                <option value="6">Juni</option>
                <option value="7">Juli</option>
                <option value="8">Agustus</option>
                <option value="9">September</option>
                <option value="10">Oktober</option>
                <option value="11">Nopember</option>
                <option value="12">Desember</option>
              </select>
            </div>
            <div class="form-group">
              <label for="tahun">Tahun</label>
              <select name="tahun" id="tahun" class="form-control">
                @for($a = 2019; $a <= 2050; $a++)
                <option value="{{$a}}">{{$a}}</option>
                @endfor
              </select>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary">Buka Laporan</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

Kembali ke terminal lagi dan jalankan aplikasi dengan mengetik perintah berikut.

php artisan serve

Tekan enter kemudian akses pada halaman http://localhost:8000/admin/laporan

Tampilannya akan menjadi seperti gambar di bawah ini.

# Buat file proses laporan

Setelah form laporan kita buat, selanjutnya buat 1 buah file untuk menampilkan hasil laporan. Masih di folder laporan, buat 1 buah file lagi dengan nama proses.blade.php dan isi dengan kode berikut.

@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card card-primary card-outline">
        <div class="card-header">
          <h3 class="card-title">Laporan Penjualan</h3>
        </div>
        <div class="card-body">
          <h3 class="text-center">Periode Bulan Januari 2021</h3>
          <div class="row">
            <div class="col col-lg-4 col-md-4">
              <h4 class="text-center">Ringkasan Transaksi</h4>
              <table class="table table-bordered">
                <tbody>
                  <tr>
                    <td>Total Penjualan</td>
                    <td>Rp. 15.000.000</td>
                  </tr>
                  <tr>
                    <td>Total Transaksi</td>
                    <td>200 Transaksi</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="col col-lg-8 col-md-8">
              <h4 class="text-center">Rincian Transaksi</h4>
              <div class="table-responsive">
                <table class="table table-stripped">
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>Invoice</th>
                      <th>Subtotal</th>
                      <th>Ongkir</th>
                      <th>Diskon</th>
                      <th>Total</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Inv-01</td>
                      <td>100.000</td>
                      <td>27.000</td>
                      <td>0</td>
                      <td>127.000</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>Inv-02</td>
                      <td>100.000</td>
                      <td>27.000</td>
                      <td>0</td>
                      <td>127.000</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>Inv-03</td>
                      <td>100.000</td>
                      <td>27.000</td>
                      <td>0</td>
                      <td>127.000</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

Selanjutnya akses di halaman http://localhost:8000/admin/proseslaporan dan akan tampil seperti gambar

# Edit menu dashboard

Controller dan view telah kita buat, selanjutnya edit file menu dashboard agar bisa mengarah ke halaman form laporan. Buka file menudashboard.blade.php dan ubah pada bagian menu laporan -> penjualan menjadi seperti berikut.

<nav class="mt-2">
  <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <!-- Add icons to the links using the .nav-icon class
          with font-awesome or any other icon font library -->
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-th"></i>
        <p>
          Dashboard
        </p>
      </a>
    </li>
    <li class="nav-item has-treeview">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-folder-open"></i>
        <p>
          Produk
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="{{ route('produk.index') }}" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Produk</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="{{ route('kategori.index') }}" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Kategori</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item has-treeview">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-shopping-cart"></i>
        <p>
          Transaksi
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="{{ route('transaksi.index') }}" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Data Transaksi</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item has-treeview">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-folder"></i>
        <p>
          Data
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="{{ route('customer.index') }}" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Customer</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item has-treeview">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-list"></i>
        <p>
          Laporan
          <i class="right fas fa-angle-left"></i>
        </p>
      </a>
      <ul class="nav nav-treeview">
        <li class="nav-item">
          <a href="{{ URL::to('admin/laporan') }}" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Penjualan</p>
          </a>
        </li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="{{ URL::to('admin/profil') }}" class="nav-link">
        <i class="nav-icon fas fa-users"></i>
        <p>
          Profil
        </p>
      </a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link">
        <i class="nav-icon fas fa-sign-out-alt"></i>
        <p>
          Sign Out
        </p>
      </a>
    </li>
  </ul>
</nav>

Proses desain tampilan toko kita hampir selesai, masih ada 3 bagian lagi yaitu desain login, register dan reset password.