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 :
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)