Web Development — Membuat Toko Online menggunakan Laravel — Part 4

Membuat Toko Online menggunakan Laravel 5.8 — Part 4

https://business.tutsplus.com/tutorials/how-to-start-your-own-online-store--cms-26951

Assalamualaikum semua, apa kabar kalian, mudah-mudahan dalam kondisi sehat semua ya, pada kali ini saya akan melanjutkan pembuatan Toko Online menggunakan Laravel.

Bagi kalian yang belum mengikuti dari awal, kalian bisa mengikuti tutorial sebelumnya mengenai Web Development — Membuat Toko Online menggunakan Laravel — Part 3

Jika sudah mengikuti step sebelumnya, let’s go

Kali ini kita akan mulai Membuat Halaman Detail untuk halaman Website kita.

Pertama, kita ke route dan buat route nya untuk ke halamann detail

Route → web.php

Route::get('pesan/{id}', 'PesanController@index');

setelah itu kita buat controller nya

php artisan make:controller PesanController

di dalam controller nya kita ketikkan kode dibawah

app → Http → Controllers → PesanController.php

class PesanController extends Controller {
  public function __construct()
  {
     $this->middleware('auth');
  }
public function index($id)
  {
     $barang = Barang::where('id', $id)->first();
     return view('pesan.index', compact('barang'));
  }
}

lalu kita buat folder pesan di view

resources → views

setelah itu kita buat halaman index.blade.php didalam folder pesan

resources → views → pesan

sebelum kita ke halaman yang sudah kita buat alangkah baiknya mengedit Tombol Pesan dihalaman home.blade.php

resources →views →home.blade.php

<a href=”{{ url(‘pesan’)}}/{{ $barang->id}}” class=”btn btn-primary”><i class=”fas fa-shopping-cart”></i> Pesan</a>

jika sudah, maka kita langsung ke halaman index.blade.php yang ada di folder pesan dan isi kodingannya seperti dibawah

@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12">
<a href="{{ url('home')}}" class="btn btn-primary"><i class="fa fa-arrow-left"></i>Kembali</a>
</div>
<div class="col-md-12 mt-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{{ url('home')}}">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ $barang->nama_barang}}</li>
</ol>
</nav>
</div>
<div class="col-md-12 mt-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<img src="{{ url('uploads') }}/{{ $barang->gambar }}" class="rounded mx-auto d-block" width="100%" alt="">
</div>
<div class="col-md-6 mt-5">
<h2>{{ $barang->nama_barang}}</h2>
<table class="table">
<tbody>
<tr>
<td>Harga</td>
<td>:</td>
<td>Rp. {{ (number_format($barang->nama_harga))}}</td>
</tr>
<tr>
<td>Stok</td>
<td>:</td>
<td>{{ number_format($barang->stok) }}</td>
</tr>
<tr>
<td>Keterangan</td>
<td>:</td>
<td>{{ $barang->keterangan }}</td>
</tr>
<form action="" method="post">
<tr>
<td>Jumlah Pesan</td>
<td>:</td>
<td>
<input class="form-control" type="text" name="jumlah_pesan" required="">
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Masukkan Keranjang</button>
</td>
</tr>
</form>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection

sebelumnya kan kita sudah membuat tombol pesan pada halaman utama

Tampilan halaman utama

Sekarang, Jika kita klik salah satu tombol tersebut akan muncul seperti halaman berikut

Halaman Batik Hijau

Halaman Batik Merah

Halaman Batik Jepara

Halaman Detail akan menampilkan Informasi mengenai Batik yang kita jual.

Semoga kalian sukses mengikuti tutorial ini, untuk selanjutnya kita akan menyimpan data ke keranjang menggunakan Laravel pada Website ini.

Wassalamualaikum wr.wb