Wishlist
Pada halaman detail produk kita akan melakukan beberapa aksi, salah satunya adalah memasukkan produk tersebut ke wishlist kita dengan mengklik tombol "hati". Fungsi wishlist hanya bisa diakses oleh user yang telah login.
Langkah-langkah untuk membuat wishlist :
- Buat migrations wishlist
- Buat model wishlist
- Buat Controller Wishlist
- Buat views wishlist dan koreksi views produkdetail.blade.php
- Koreksi HomepageController
- Koreksi menu dashboard
- Tambahkan route wishlist ke web.php
Sekarang kita mulai dengan menjalankan perintah untuk membuat model sekaligus migration dan controller. Buka terminal dan ketikkan perintah berikut kemudian tekan enter.
php artisan make:model Wishlist -crmSetelah proses selesai, akan terdapat 3 buah file baru yaitu:
- Migrations
- Model
- Controller
#1. Update file migrations
Buka file migrations _create_wishtlists_table.php kemudian koreksi isinya.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateWishlistsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('wishlist', function (Blueprint $table) {
$table->increments('id');
$table->integer('produk_id')->unsigned();
$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('wishlist');
}
}Setelah disimpan, kembali ke terminal dan jalankan perintah migrate kemudian tekan enter untuk mengeksekusi migrations tersebut.
php artisan migrate#2. Model Wishlist
Setelah selesai mengedit file migrations, selanjutnya kita perlu mengedit file model agar bisa menghandle transaksi database pada table wishlist sesuai yang telah kita buat di file migrations.
Buka file Wishlist.php dan update seperti berikut
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Wishlist extends Model
{
protected $table = 'wishlist';
protected $fillable = [
'produk_id',
'user_id',
];
public function produk () {
return $this->belongsTo('App\Produk', 'produk_id');
}
public function user () {
return $this->belongsTo('App\User', 'user_id');
}
}#3. Wishtlist Controller
Migrations dan model telah selesai kita update, sekarang kita lanjut untuk file controller-nya. Di dalam file controller kita hanya akan membuat fungsi untuk menyimpan wishlist sesuai produk yang dipilih dan menghapus wishlist tersebut. Jadi semisal proses "A" diklik tombol wishlist akan dicek oleh sistem, kalau belum ada dalam wishlist maka akan ditambahkan. Tetapi kalau sudah ada malah akan dihapus.
Buka file WishlistController.php dan update menjadi seperti berikut.
<?php
namespace App\Http\Controllers;
use App\Wishlist;
use Illuminate\Http\Request;
class WishlistController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
$itemuser = $request->user();
$itemwishlist = Wishlist::where('user_id', $itemuser->id)
->paginate(10);
$data = array('title' => 'Wishlist',
'itemwishlist' => $itemwishlist);
return view('wishlist.index', $data)->with('no', ($request->input('page', 1) - 1) * 10);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* 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',
]);
$itemuser = $request->user();
$validasiwishlist = Wishlist::where('produk_id', $request->produk_id)
->where('user_id', $itemuser->id)
->first();
if ($validasiwishlist) {
$validasiwishlist->delete();//kalo udah ada, berarti wishlist dihapus
return back()->with('success', 'Wishlist berhasil dihapus');
} else {
$inputan = $request->all();
$inputan['user_id'] = $itemuser->id;
$itemwishlist = Wishlist::create($inputan);
return back()->with('success', 'Produk berhasil ditambahkan ke wishlist');
}
}
/**
* Display the specified resource.
*
* @param \App\Wishlist $wishlist
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Wishlist $wishlist
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Wishlist $wishlist
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Wishlist $wishlist
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$itemwishlist = Wishlist::findOrFail($id);
if ($itemwishlist->delete()) {
return back()->with('success', 'Wishlist berhasil dihapus');
} else {
return back()->with('error', 'Wishlist gagal dihapus');
}
}
}#4. Views wishlist
Untuk file views silahkan buat 1 buah folder di dalam folder views dengan nama wishlist, kemudian dalam folder wishlist buah 1 buah file index.blade.php
@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h3 class="card-title">Wishlist</h3>
</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>No</th>
<th>Kode Produk</th>
<th>Nama Produk</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($itemwishlist as $wish)
<tr>
<td>
{{ ++$no }}
</td>
<td>
{{ $wish->produk->kode_produk }}
</td>
<td>
{{ $wish->produk->nama_produk }}
</td>
<td>
<form action="{{ route('wishlist.destroy', $wish->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>
{{ $itemwishlist->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
@endsectionHalaman wishlist ini digunakan untuk menampilkan daftar wishlist yang telah dibuat oleh user dan juga menghapusnya.
Setelah membuat file views wishlist/index.blade.php kita perlu mengoreksi file views produkdetail.blade.php pada bagian button wishtlist agar user bisa menambahkan wishlist cukup mengklik tombol tersebut.
Buka file homepage/produkdetail.blade.php dan koreksi pada bagian button "tambah ke wishlist".
@extends('layouts.template')
@section('content')
<div class="container">
<div class="row mt-4">
<div class="col col-lg-8 col-md-8">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
@foreach($itemproduk->images as $index => $image)
@if($index == 0)
<div class="carousel-item active">
<img src="{{ \Storage::url($image->foto) }}" class="d-block w-100" alt="...">
</div>
@else
<div class="carousel-item">
<img src="{{ \Storage::url($image->foto) }}" class="d-block w-100" alt="...">
</div>
@endif
@endforeach
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- deskripsi produk -->
<div class="col col-lg-4 col-md-4">
<div class="row">
<div class="col">
<div class="card">
<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
<span class="small">{{ $itemproduk->kategori->nama_kategori }}</span>
<h5>{{ $itemproduk->nama_produk }}</h5>
<!-- cek apakah ada promo -->
@if($itemproduk->promo != null)
<p>
Rp. <del>{{ number_format($itemproduk->promo->harga_awal, 2) }}</del>
<br />
Rp. {{ number_format($itemproduk->promo->harga_akhir, 2) }}
</p>
@else
<p>
Rp. {{ number_format($itemproduk->harga, 2) }}
</p>
@endif
<form action="{{ route('wishlist.store') }}" method="post">
@csrf
<input type="hidden" name="produk_id" value={{ $itemproduk->id }}>
<button type="submit" class="btn btn-sm btn-outline-secondary">
@if(isset($itemwishlist) && $itemwishlist)
<i class="fas fa-heart"></i> Tambah ke wishlist
@else
<i class="far fa-heart"></i> Tambah ke wishlist
@endif
</button>
</form>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="card">
<div class="card-body">
<button class="btn btn-block btn-primary">
<i class="fa fa-shopping-cart"></i> Tambahkan Ke Keranjang
</button>
<button class="btn btn-block btn-danger mt-4">
<i class="fa fa-shopping-basket"></i> Beli Sekarang
</button>
</div>
<div class="card-footer">
<div class="row mt-4">
<div class="col text-center">
<i class="fa fa-truck-moving"></i>
<p>Pengiriman Cepat</p>
</div>
<div class="col text-center">
<i class="fa fa-calendar-week"></i>
<p>Garansi 7 hari</p>
</div>
<div class="col text-center">
<i class="fa fa-money-bill"></i>
<p>Pembayaran Aman</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div class="card">
<div class="card-header">
Deskripsi
</div>
<div class="card-body">
{{ $itemproduk->deskripsi_produk }}
</div>
</div>
</div>
</div>
</div>
@endsection#5. Koreksi HomepageController
Agar bisa menampilkan apakah produk tersebut sudah dimasukkan ke wishlist atau belum, kita perlu melakukan sedikit koreksi pada file HomepageController.php terutama pada bagian function produkdetail($id).
public function produkdetail($id) {
$itemproduk = Produk::where('slug_produk', $id)
->where('status', 'publish')
->first();
if ($itemproduk) {
if (Auth::user()) {//cek kalo user login
$itemuser = Auth::user();
$itemwishlist = Wishlist::where('produk_id', $itemproduk->id)
->where('user_id', $itemuser->id)
->first();
$data = array('title' => $itemproduk->nama_produk,
'itemproduk' => $itemproduk,
'itemwishlist' => $itemwishlist);
} else {
$data = array('title' => $itemproduk->nama_produk,
'itemproduk' => $itemproduk);
}
return view('homepage.produkdetail', $data);
} else {
// kalo produk ga ada, jadinya tampil halaman tidak ditemukan (error 404)
return abort('404');
}
}Selain function produkdetail($id) kita perlu juga memasukkan model Wishlist dan juga Auth di bawah baris kode "use App\ProdukPromo;" dengan cara menambahkan baris kode berikut.
use App\Wishlist;
use Auth;Cukup untuk HomepageController.php selanjutnya kita akan menambahkan menu dashboard.
#6. Tambahkan menu item di menudashboard.blade.php
Buka file menudashboard.blade.php dan tambahkan menu item persis di bawah menu item Data Transaksi.
<li class="nav-item">
<a href="{{ route('wishlist.index') }}" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Wishlist</p>
</a>
</li>#7. Tambahkan route wishlist ke web.php
Terakhir kita perlu menambahkan route ke file web.php agar menu wishlist dapat diakses hanya oleh user yang telah login. Buka file web.php dan tambakan route persis di bawah route "Route::get('loadprodukasync/{id}', '[email protected]');"
// wishlist
Route::resource('wishlist', 'WishlistController');Selain itu kita perlu juga mengubah route ke '/home' kita arahkan ke '/admin'
Route::get('/home', function() {
return redirect('/admin');
});Untuk file web.php lengkapnya akan menjadi seperti berikut.
<?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('/', function () {
// return view('welcome');
// });
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/{id}', '[email protected]');
// route dashboard
Route::group(['prefix' => 'admin', 'middleware' => 'auth'], function() {
Route::get('/', '[email protected]');
// route kategori
Route::resource('kategori', 'KategoriController');
// route produk
Route::resource('produk', 'ProdukController');
// route data customer
Route::resource('customer', 'CustomerController');
// route transaksi
Route::resource('transaksi', 'TransaksiController');
// route profil
Route::get('profil', '[email protected]');
// route setting profil
Route::get('setting', '[email protected]');
// form laporan
Route::get('laporan', '[email protected]');
// proses laporan
Route::get('proseslaporan', '[email protected]');
// image
Route::get('image', '[email protected]');
// simpan image
Route::post('image', '[email protected]');
// hapus image by id
Route::delete('image/{id}', '[email protected]');
// upload image kategori
Route::post('imagekategori', '[email protected]');
// hapus image kategori
Route::delete('imagekategori/{id}', '[email protected]');
// upload image produk
Route::post('produkimage', '[email protected]');
// hapus image produk
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]');
// wishlist
Route::resource('wishlist', 'WishlistController');
});
Auth::routes();
// Route::get('/home', '[email protected]')->name('home');
// ubah route ke home menjadi admin
Route::get('/home', function() {
return redirect('/admin');
});Sekarang coba jalankan aplikasi laravel dengan php artisan serve kemudian klik salah satu produknya. Pada tombol tambahkan ke wishlist coba tekan, kalau diarahkan ke halaman login coba buat akun dulu di halaman register untuk mencoba menambahkan wishlist.
Perubahan apa saja yang kita buat dapat dilihat di sini : https://github.com/fadlur/larashop/commit/d7b086deefed34b40cc7f365521b4c1f8465f3e8
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
