Web Development — Membuat Toko Online menggunakan Laravel — Part 3

Membuat Toko Online menggunakan Laravel 5.8 — Part 3

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 2

Jika sudah mengikuti step sebelumnya, let’s go

Kali ini kita akan mulai Menampilkan Data dari Database menggunakan Laravel untuk halaman Website kita.

Pertama, kita akan akan membuat HomeController dapat menampilkan data dari barang dengan cara berikut

app → Http → Controllers → HomeController.php

// tambahkan code dibawah untuk menghubungkan model
use App\Barang;
// ubah function index() seperti dibawah 
public function index()
{
  $barangs = Barang::paginate(20);
  return view(‘home’, compact(‘barangs’));
}

jangan lupa kalian buat folder uploads yang isinya adalah gambar batik, karena folder ini akan kita pakai untuk menaruh gambar pada atribute. bila kalian mau mengikuti gambar batik pada tutorial ini, kalian bisa download disini

File dan Folder yang ada didalam public

Lalu tambahkan link font awesome pada halaman app.blade.php

resources → views → layouts → app.blade.php

<! — font awesome →
<link rel=”stylesheet” href=”{{ asset(‘css/all.css’)}}” rel=”stylesheet”>

Karena saya sudah mendownload font-awesome, maka saya hanya mengambil file penting dalam folder font-awesome dan meletakkannya pada public.

bagi kalian yang belum tahu cara menggunakan font awesome, kalian bisa mengikuti tutorial Web Development Introduction — Membuat Web dengan Bootstrap.

setelah itu kalian bisa membuat data pada tabel barangs di database batik, tetapi untuk mengisi data pada attibute gambar, nama gambar harus sama dengan file yang ada didalam folder uploads

nama gambar pada database harus sesuai dengan nama gambar pada folder uploads

Setelah itu kita akan merubah codingan pada halaman home.blade.php

resources →views →home.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
   <div class="row justify-content-center">
      <div class="col-md-12 mb-4">
         <img src="{{ url('images/logo.png')}}" class="rounded mx-auto d-block" width="500" alt="">
      </div>
      @foreach($barangs as $barang)
      <div class="col-md-4">
         <div class="card">
            <img src="{{ url('uploads')}}/{{ $barang->gambar }}" class="card-img-top" alt="...">
           <div class="card-body">
             <h5 class="card-title">{{ $barang->nama_barang }}</h5>
              <p class="card-text">
              <strong>Harga :</strong> Rp. {{ number_format($barang->harga) }}
              <hr>
              <strong>Stok :</strong> {{ $barang->stok }}
              <br>
              <strong>Keterangan :</strong>
              <br>
              {{ $barang->keterangan}}
              </p>
              <a href="#" class="btn btn-primary"><i class="fas fa-shopping-cart"></i> Pesan</a>
           </div>
         </div>
      </div>
      @endforeach
   </div>
</div>
@endsection

Setelah itu kalian bisa langsung jalankan php artisan serve dan hasilnya seperti berikut

tampilan halaman home dengan data barang

Semoga kalian sukses mengikuti tutorial ini, untuk selanjutnya kita akan membuat halaman detail menggunakan Laravel pada Website ini.

Wassalamualaikum wr.wb