Dashboard Produk Promo

Pada homepage kita juga akan menampilkan produk promo. Produk promo adalah produk pilihan yang diberi potongan harga sekian persen. Oleh karena itu kita harus membuat dashboard dan juga tabel baru untuk menampung kumpulan produk-produk promo ini

Langkah-langkahnya adalah :

  1. Buat migrations
  2. Buat model ProdukPromo
  3. Buat ProdukPromoController
  4. Buat views promo
  5. Tambahkan route di web.php
  6. Tambahkan function untuk load produk secara asynchronous
  7. Tambahkan menu di dashboard
  8. Pindahkan link jquery ke tag <head>

Sebagai langkah awal kita akan membuat model, controller dan migration sekaligus. Buka terminal dan jalankan perintah berikut kemudian tekan enter.

php artisan make:model ProdukPromo -crm

#1. Migrations

Buka file _create_produk_promos_table.php kemudian update kodenya

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateProdukPromosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('produk_promo', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('produk_id')->unsigned();
            $table->decimal('harga_awal', 16,2)->default(0);
            $table->decimal('harga_akhir', 16,2)->default(0);
            $table->integer('diskon_persen')->default(0);
            $table->decimal('diskon_nominal', 16,2)->default(0);
            $table->integer('user_id')->unsigned();
            $table->foreign('user_id')->references('id')->on('users');
            $table->foreign('produk_id')->references('id')->on('produk');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('produk_promo');
    }
}

#2. Model ProdukPromo

Dari migrations di atas sekarang kita koreksi file Model ProdukPromo.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class ProdukPromo extends Model
{
    protected $table = 'produk_promo';
    protected $fillable = [
        'produk_id',
        'harga_awal',
        'harga_akhir',
        'diskon_persen',
        'diskon_nominal',
        'user_id',
    ];

    public function produk() {
        return $this->belongsTo('App\Produk','produk_id');
    }

    public function user() {
        return $this->belongsTo('App\User','user_id');
    }
}

#3. Update Produk Promo Controller

Setelah model sekarang lengkapi ProdukPromoController.php

<?php

namespace App\Http\Controllers;

use App\ProdukPromo;
use App\Produk;
use Illuminate\Http\Request;

class ProdukPromoController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        $itempromo = ProdukPromo::orderBy('id','desc')->paginate(20);
        $data = array('title' => 'Produk Promo',
                    'itempromo'=>$itempromo);
        return view('promo.index', $data)->with('no', ($request->input('page', 1) - 1) * 20);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        // kita ambil data produk
        $itemproduk = Produk::orderBy('nama_produk', 'desc')
                            ->where('status', 'publish')
                            ->get();
        $data = array('title' => 'Form Produk Promo',
                    'itemproduk' => $itemproduk);
        return view('promo.create',$data);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'produk_id' => 'required',
            'harga_awal' => 'required',
            'harga_akhir' => 'required',
            'diskon_persen' => 'required',
            'diskon_nominal' => 'required',
        ]);
        // cek dulu apakah sudah ada, produk hanya bisa masuk 1 promo
        $cekpromo = ProdukPromo::where('produk_id', $request->produk_id)->first();
        if ($cekpromo) {
            return back()->with('error', 'Data sudah ada');
        } else {
            $itemuser = $request->user();
            $inputan = $request->all();
            $inputan['user_id'] = $itemuser->id;
            $itempromo = ProdukPromo::create($inputan);
            return redirect()->route('promo.index')->with('success', 'Data berhasil disimpan');
        }
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\ProdukPromo  $produkPromo
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {

    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\ProdukPromo  $produkPromo
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $itempromo = ProdukPromo::findOrFail($id);
        $data = array('title' => 'Detail Produk',
                    'itempromo' => $itempromo);
        return view('promo.edit', $data);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\ProdukPromo  $produkPromo
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'produk_id' => 'required',
            'harga_awal' => 'required',
            'harga_akhir' => 'required',
            'diskon_persen' => 'required',
            'diskon_nominal' => 'required',
        ]);
        $itempromo = ProdukPromo::findOrFail($id);
        // cek dulu apakah sudah ada, produk hanya bisa masuk 1 promo
        $cekpromo = ProdukPromo::where('produk_id', $request->produk_id)
                            ->where('id', '!=', $itempromo->id)
                            ->first();
        if ($cekpromo) {
            return back()->with('error', 'Data sudah ada');
        } else {
            $itemuser = $request->user();
            $inputan = $request->all();
            $inputan['user_id'] = $itemuser->id;
            $itempromo->update($inputan);
            return redirect()->route('promo.index')->with('success', 'Data berhasil diupdate');
        }
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\ProdukPromo  $produkPromo
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $itempromo = ProdukPromo::findOrFail($id);
        if ($itempromo->delete()) {
            return back()->with('success', 'Data berhasil dihapus');
        } else {
            return back()->with('error', 'Data gagal dihapus');
        }
    }
}

#4. Views Promo

Buat folder dengan nama promo di dalam folder views. Kemudian buat 3 buah file :

# index.blade.php

Buat file dengan nama index.blade.php

@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
  <!-- table produk -->
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Produk</h4>
          <div class="card-tools">
            <a href="{{ route('promo.create') }}" class="btn btn-sm btn-primary">
              Baru
            </a>
          </div>
        </div>
        <div class="card-body">
          <form action="#">
            <div class="row">
              <div class="col">
                <input type="text" name="keyword" id="keyword" class="form-control" placeholder="ketik keyword disini">
              </div>
              <div class="col-auto">
                <button class="btn btn-primary">
                  Cari
                </button>
              </div>
            </div>
          </form>
        </div>
        <div class="card-body">
          @if ($message = Session::get('error'))
              <div class="alert alert-warning">
                  <p>{{ $message }}</p>
              </div>
          @endif
          @if ($message = Session::get('success'))
              <div class="alert alert-success">
                  <p>{{ $message }}</p>
              </div>
          @endif
          <div class="table-responsive">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th width="50px">No</th>
                  <th>Gambar</th>
                  <th>Kode</th>
                  <th>Harga Awal</th>
                  <th>Nama</th>
                  <th>Diskon</th>
                  <th>Harga Akhir</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @foreach($itempromo as $promo)
                <tr>
                  <td>
                  {{ ++$no }}
                  </td>
                  <td>
                    @if($promo->produk->foto != null)
                    <img src="{{ \Storage::url($promo->produk->foto) }}" alt="{{ $promo->produk->nama_produk }}" width='150px' class="img-thumbnail">
                    @endif
                  </td>
                  <td>
                  {{ $promo->produk->kode_produk }}
                  </td>
                  <td>
                  {{ $promo->produk->nama_produk }}
                  </td>
                  <td>
                  {{ number_format($promo->harga_awal, 2) }}
                  </td>
                  <td>
                  {{ number_format($promo->diskon_nominal, 2) }} ({{ $promo->diskon_persen }}%)
                  </td>
                  <td>
                  {{ number_format($promo->harga_akhir, 2) }}
                  </td>
                  <td>
                    <a href="{{ route('promo.edit', $promo->id) }}" class="btn btn-sm btn-primary mr-2 mb-2">
                      Edit
                    </a>
                    <form action="{{ route('promo.destroy', $promo->id) }}" method="post" style="display:inline;">
                      @csrf
                      {{ method_field('delete') }}
                      <button type="submit" class="btn btn-sm btn-danger mb-2">
                        Hapus
                      </button>                    
                    </form>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
            {{ $itempromo->links() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

# create.blade.php

Selanjutnya tambah 1 lagi dengan nama create.blade.php

@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col col-lg-6 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Form Produk</h3>
          <div class="card-tools">
            <a href="{{ route('promo.index') }}" class="btn btn-sm btn-danger">
              Tutup
            </a>
          </div>
        </div>
        <div class="card-body">
          @if(count($errors) > 0)
          @foreach($errors->all() as $error)
              <div class="alert alert-warning">{{ $error }}</div>
          @endforeach
          @endif
          @if ($message = Session::get('error'))
              <div class="alert alert-warning">
                  <p>{{ $message }}</p>
              </div>
          @endif
          @if ($message = Session::get('success'))
              <div class="alert alert-success">
                  <p>{{ $message }}</p>
              </div>
          @endif
          <form action="{{ route('promo.store') }}" method="post">
            @csrf
            <div class="form-group">
              <label for="produk_id">Produk</label>
              <select name="produk_id" id="produk_id" class="form-control">
                <option value="">Pilih Produk</option>
                @foreach($itemproduk as $produk)
                <option value="{{ $produk->id }}">{{ $produk->nama_produk }} - ({{ $produk->kode_produk }})</option>
                @endforeach
              </select>
            </div>
            <div class="form-group">
              <label for="harga_awal">Harga Awal</label>
              <input type="text" name="harga_awal" id="harga_awal" class="form-control" value={{ old('harga_awal') }}>
            </div>
            <div class="row">
              <div class="col">
                <div class="form-group">
                  <label for="diskon_persen">Diskon Persen</label>
                  <input type="text" name="diskon_persen" id="diskon_persen" class="form-control" value={{ old('diskon_persen') }}>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="diskon_nominal">Diskon Nominal</label>
                  <input type="text" name="diskon_nominal" id="diskon_nominal" class="form-control" value={{ old('diskon_nominal') }}>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="harga_akhir">Harga Akhir</label>
              <input type="text" name="harga_akhir" id="harga_akhir" class="form-control" value={{ old('harga_akhir') }}>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary">Simpan</button>
              <button type="reset" class="btn btn-warning">Reset</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  // cari nominal diskon
  $('#diskon_persen').on('keyup', function() {
    var harga_awal = $('#harga_awal').val();
    var diskon_persen = $('#diskon_persen').val();
    var diskon_nominal = diskon_persen / 100 * harga_awal;
    var harga_akhir = harga_awal - diskon_nominal;
    $('#diskon_nominal').val(diskon_nominal);
    $('#harga_akhir').val(harga_akhir);
  })
  // cari nominal persen
  $('#diskon_nominal').on('keyup', function() {
    var harga_awal = $('#harga_awal').val();
    var diskon_nominal = $('#diskon_nominal').val();
    var diskon_persen = diskon_nominal / harga_awal * 100;
    var harga_akhir = harga_awal - diskon_nominal;
    $('#diskon_persen').val(diskon_persen);
    $('#harga_akhir').val(harga_akhir);
  })
  // load produk detail
  $('#produk_id').on('change', function() {
    var id = $('#produk_id').val();
    $.ajax({
      url: '{{ URL::to('admin/loadprodukasync') }}/'+id,
      type: 'get',
      dataType: 'json',
      success: function (data,status) {
        if (status == 'success') {
          $('#harga_awal').val(data.itemproduk.harga);
        }
      },
      error : function(x,t,m) {
      }
    })
  })
</script>
@endsection

# edit.blade.php

Terakhir tambahkan 1 buah file dengan nama edit.blade.php

@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col col-lg-6 col-md-6">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Form Produk</h3>
          <div class="card-tools">
            <a href="{{ route('promo.index') }}" class="btn btn-sm btn-danger">
              Tutup
            </a>
          </div>
        </div>
        <div class="card-body">
          @if(count($errors) > 0)
          @foreach($errors->all() as $error)
              <div class="alert alert-warning">{{ $error }}</div>
          @endforeach
          @endif
          @if ($message = Session::get('error'))
              <div class="alert alert-warning">
                  <p>{{ $message }}</p>
              </div>
          @endif
          @if ($message = Session::get('success'))
              <div class="alert alert-success">
                  <p>{{ $message }}</p>
              </div>
          @endif
          <form action="{{ route('promo.update', $itempromo->id) }}" method="post">
            {{ method_field('patch') }}
            @csrf            
            <div class="row">
              <div class="col">
                <div class="form-group">
                  <label for="kode_produk">Kode Produk</label>
                  <input type="text" name="kode_produk" id="kode_produk" class="form-control" disabled value={{ $itempromo->produk->kode_produk }}>
                  <input type="hidden" name="produk_id" value={{$itempromo->produk_id}}>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="nama_produk">Nama Produk</label>
                  <input type="text" name="nama_produk" id="nama_produk" class="form-control" disabled value={{ $itempromo->produk->nama_produk }}>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="harga_awal">Harga Awal</label>
              <input type="text" name="harga_awal" id="harga_awal" class="form-control" value={{ $itempromo->harga_awal }}>
            </div>
            <div class="row">
              <div class="col">
                <div class="form-group">
                  <label for="diskon_persen">Diskon Persen</label>
                  <input type="text" name="diskon_persen" id="diskon_persen" class="form-control" value={{ $itempromo->diskon_persen }}>
                </div>
              </div>
              <div class="col">
                <div class="form-group">
                  <label for="diskon_nominal">Diskon Nominal</label>
                  <input type="text" name="diskon_nominal" id="diskon_nominal" class="form-control" value={{ $itempromo->diskon_nominal }}>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="harga_akhir">Harga Akhir</label>
              <input type="text" name="harga_akhir" id="harga_akhir" class="form-control" value={{ $itempromo->harga_akhir }}>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary">Update</button>
              <button type="reset" class="btn btn-warning">Reset</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  // cari nominal diskon
  $('#diskon_persen').on('keyup', function() {
    var harga_awal = $('#harga_awal').val();
    var diskon_persen = $('#diskon_persen').val();
    var diskon_nominal = diskon_persen / 100 * harga_awal;
    var harga_akhir = harga_awal - diskon_nominal;
    $('#diskon_nominal').val(diskon_nominal);
    $('#harga_akhir').val(harga_akhir);
  })
  // cari nominal persen
  $('#diskon_nominal').on('keyup', function() {
    var harga_awal = $('#harga_awal').val();
    var diskon_nominal = $('#diskon_nominal').val();
    var diskon_persen = diskon_nominal / harga_awal * 100;
    var harga_akhir = harga_awal - diskon_nominal;
    $('#diskon_persen').val(diskon_persen);
    $('#harga_akhir').val(harga_akhir);
  })
  // load produk detail
  $('#produk_id').on('change', function() {
    var id = $('#produk_id').val();
    $.ajax({
      url: '{{ URL::to('admin/loadprodukasync') }}/'+id,
      type: 'get',
      dataType: 'json',
      success: function (data,status) {
        if (status == 'success') {
          $('#harga_awal').val(data.itemproduk.harga);
        }
      },
      error : function(x,t,m) {
      }
    })
  })
</script>
@endsection

#5. Tambahkan route ke file web.php

Agar bisa kita akses, kita perlu menambahkan route ke file web.php. tambahkan 2 buah route persis di bawah Route::resource('slideshow', 'SlideshowController');

Route::delete('produkimage/{id}', '[email protected]');
  // slideshow
  Route::resource('slideshow', 'SlideshowController');
  // produk promo
  Route::resource('promo', 'ProdukPromoController');
  // load async produk
  Route::get('loadprodukasync/{id}', '[email protected]');
});

#6. Tambahkan function untuk load produk secara asynchronous

Karena kita perlu mengakses data produk secara asynchronous maka kita perlu menambahkan 1 buah function sesuai route yang kita tambahkan di file web.php. Buka file ProdukController.php kemudian tambahkan 1 buah function.

    public function loadasync($id) {
        $itemproduk = Produk::findOrFail($id);
        $respon = [
            'status' => 'success',
            'msg' => 'Data ditemukan',
            'itemproduk' => $itemproduk
        ];
        return response()->json($respon, 200);
    }

#7. Tambahkan menu promo ke menu dashboard

Buka file menudashboard.blade.php pada menu Produk tambahkan menu item di bawah menu item kategori.

      <li class="nav-item">
          <a href="{{ route('promo.index') }}" class="nav-link">
            <i class="far fa-circle nav-icon"></i>
            <p>Promo</p>
          </a>
        </li>

#8. Pindahkan link jquery ke tag <head>

Buka file dashboard.blade.php kemudian pindahkan link jquery yang tadinya berikut ke atas </head>

<!-- jQuery -->
<script src="{{ asset('js/jquery/jquery.min.js') }}"></script>

Setelah selesai semua, sekarang kembali ke terminal dan jalankan perintah berikut dan tekan enter.

php artisan serve

Akses halaman http://localhost:8000 dan login ke dashboard untuk membuka halaman dashboard produk promo.

Ringkasan file yang barusan kita buat ada di sini (https://github.com/fadlur/larashop/commit/7ea0c5790775b0cdcd1f4182c1dd766ff66b2d15)

Sebelumnya
Selanjutnya
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