Desain Laporan Penjualan

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.

Mau Bikin Aplikasi Web & Aplikasi Android?

Saya membuka jasa pembuatan aplikasi web dan android untuk aplikasi seperti toko online, monitoring (IoT), interface mesin absensi atau kasir

Silahkan kontak link di bawah ini untuk teknis dan harganya