Posts

MENAMBAH DATA DAN MENAMPILKAN LIST DENGAN FLASH MESSAGES BOOTSTRAP

Assalamualaikum warahmatullahi wabarakatuh, pada artikel kali ini saya akan membahasa bagaimana sih cara menambahkan data dan menampilkan list data dengan menggunakan bootstrap flash alert. Disini saya akan menunjukkan bagaimana cara membuat success message

  1. Buat sebuah tabel dengan nama kategori atau sesuai keinginan teman-teman, berikut fieldnya
  1. Lalu buat Model, Controller dan View nya dengan menggunakan perintah php artisan

  1. Setelah itu buka folder resources > views > layouts lalu buka file app.blade.php lalu buat kodingan untuk menambahkan menu kategori pada halaman dashboard seperti dibawah ini

  1. Lalu buka folder routes > web.php buat kodingan dibawah ini agar nanti ketika di klik pergi ke halaman index
      Route::resource('/kategori', 'KategoriController');
  1. Buka KategoriController.php lalu buat kodingan pada fungsi index seperti dibawah ini, oh ya jangan lupa menambahkan model kategorinya
     <?php
         namespace App\Http\Controllers;
         use Illuminate\Http\Request;
         use App\Kategori;
         class KategoriController extends Controller
         {
       
             public function index()
             {
                 return view('kategori.index')-                 >withKategoris(Kategori::all());
             }
  1. Lalu pada model kategori buat kodingannya seperti dibawah ini agar tabel kategori yang ada di database bisa terpanggil
       <?php
         namespace App;
         use Illuminate\Database\Eloquent\Model;
         class Kategori extends Model
         {
            protected $primaryKey = 'id'; //or null
            protected $table = 'kategori';
            protected $fillable = ['id','name'];
        }
  1. Lalu coba refresh halaman browser web kita, maka akan terlihat seperti pada gambar dibawah ini

  1. selanjutnya buka file index.blade.php pada folder kategori, buat kodingan seperti dibawah ini

  1. Refresh halaman web project kita lalu coba klik menu kategori, makan akan muncul pemberitahuan bawah data pada tabel kategori tidak ditemukan karna belum terdapat data kategori

  1. Selanjutnya kita akan menambahkan mode card dalam halaman kategori tadi dengan cara buka file index kategori tadi, buat kodingan dibawah ini

lalu buka brower lalu refresh maka akan terlihat hasil seperti ini, jika belum perhatikan lagi kodingan dari langkah awal

  1. Lalu buka file KategoriController.php buat perintah pada function create() dan function store()
     public function create()
     {
        return view('kategori.add');
     }
  1. Setelah itu buat sebuah file baru pada folder resources > views > kategori dengan nama add.blade.php, lalu buat kodingan untuk tampilan add data kategori
@extends('layouts.app')
@section('content')
    <div class="card">
    <div class="card-header">
    <h2>
    Tambah Kategori
    </h2>
    </div>

    <div class="card-body">
    <form action="{{ route('kategori.store') }}" method="POST">
    @csrf
    <div class="form-group">
    <label for="name">Nama Kategori</label>
    <input type="text" name="name" id="name" class="form-control">
    </div>
    <div class="form-group">
    <input type="submit" value="Simpan" class="btn btn-primary">
    </div>
    </form>
    </div>
    </div>
@endsection
  1. selanjutnya kita buat validasi Request untuk Kategori pada terminal atau cmd

maka pada folder App > Http > Request akan ada file request dari kategori

  1. Lalu buka file KategoriRequest.php tadi ubah kodingan nya menjadi seperti dibawah ini
  1. Buka KategoriController.php lalu samakan kodingannya seperti dibawah ini

  1. Buka kembali file index.blade.php pada folder kategori lalu tambahkan kodingan pada @if ($kategoris->count() > 0) untuk menampilkan data kategori yang baru saja kita tambahkan
  1. Selanjutnya buka file app.blade.php pada folder layouts, lalu tambahkan kodingan berikut ini untuk menampilkan pemberitahuan data berhasil ditambahkan. 
  1. Save All lalu buka browser dan refresh halaman web project laravel maka akan tampil seperti dibawah ini

saat menambahkan data kategori muncul flash session sukses

Leave a Reply :

* Your email address will not be published.