Tutorial CRUD Laravel 8 dengan TailwindCSS

Tutorial CRUD Laravel 8 dengan TailwindCSS

Diperbaharui 16 Januari 2021 12:26 PM

Cara membuat CRUD laravel dengan tailwindcss? Create Read Update Delete di Laravel? Cara input, ubah, dan delete data di laravel? Berikut adalah tutorial crud di laravel 8 dengan tailwindcss.

Pada kasus kali ini laravel yang digunakan menggunakan laravel breeze, jika belum menginstallnya Anda bisa membaca artikel cara install tailwindcss di laravel 8 menggunakan laravel breeze. Untuk source code nya bisa Anda download pada link github di bawah.

Persiapan

Sebelum ke pembahasan utama mari siapkan terlebih dahulu konfigurasi awalnya.

1. Buka project laravel8-crud di text editor

2. Buka file .env dan ubah beberapa bagian menjadi seperti berikut :

APP_NAME="Laravel 8 CRUD"
DB_DATABASE=laravel8_crud
DB_USERNAME=susantokun
DB_PASSWORD=susantokun

3. Buat database dengan nama laravel8_crud kemudian lakukan migration dengan perintah berikut :

mysql -ususantokun -psusantokun
create database laravel8_crud;
exit;
php artisan migrate

4. Buat Controller, Model, dan Migrations dengan perintah berikut :

php artisan make:controller ArticleController -r
php artisan make:model Article -m

Keterangan :

  • Terdapat -r untuk membuat resource class secara otomatis seperti index, create, store, edit, update, show dan destroy
  • Terdapat -m untuk sekaligus membuat migrationnya

5. Buka database/migrations/xxx_create_articles_table.php dan tambahkan field title serta body seperti berikut :

public function up()
{
    Schema::create('articles', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('body');
        $table->timestamps();
    });
}

Kemudian jalankan perintah php artisan migrate untuk menambahkan tabel articles pada database.

6. Buka app/Models/Article.php dan tambahkan baris code berikut pada class Article :

protected $fillable = ['title', 'body'];

7. Buka routes/web.php dan masukkan kode berikut :

Route::resource('articles', ArticleController::class);

Jangan lupa untuk mengimport ArticleControllernya, jika Anda menggunakan vscode dan extention PHP Namespace Resolver maka cukup klik kanan pada tulisan ArticleController kemudian pilih Import Class atau Alt + Ctrl + I.

use App\Http\Controllers\ArticleController;

8. Sekarang ubah resources/views/layouts/app.blade.php menjadi seperti code berikut :

Keterangan :

  • Pada title terdapat code untuk membuat title website menjadi dinamis, jika terdapat variabel $title maka dibuat title dengan format [title] – [app.name]
  • Pada layouts app tidak terdapat pemanggilan javascript dikarenakan belum dibutuhkan.

Tutorial CRUD Laravel 8 dengan TailwindCSS

Pada artikel ini akan langsung dibahas semuanya dari mulai input data sampai dengan menghapus data. Jika persiapan sudah selesai maka Anda bisa lanjut ke tutorial inti nya seperti pada bahasan berikut.

Tutorial CRUD Input Data di Laravel 8 (Create)

1. Buka app/Http/Controllers/ArticleController.php dan ubah function create menjadi seperti berikut :

public function create()
{
    return view('articles.create', [
        'title'   => 'Create Article',
        'submit'  => 'Create',
        'article' => new Article(),
    ]);
}

Jangan lupa untuk mengimport model Article seperti pada kode berikut :

use App\Models\Article;

Sekarang coba buka laravel8-crud.test/articles/create maka akan tampil halaman kosong karena kita belum membuat views dari halaman create.

2. Masukkan kode berikut di resources/views/articles :

Keterangan create.blade.php :

  • <x-app-layout> berfungsi untuk memanggil app.blade.php karena sudah didaftarkan pada file app/View/Components/AppLayout.php
  • <x-slot name=”title”> berfungsi untuk menampilkan title dari halaman tersebut, variabel title telah didefinisikan pada function create
  • {{– alert –}} berfungsi untuk menampung kemudian menampilkan flash session, karena code menggunakan {!! session(‘success’) !!} maka yang ditampilkan dapat memuat kode html
  • @include(‘articles.form’) merupakan form input yang dibuat secara terpisah, karena e karena form create dan update isi nya sama.

Keterangan form.blade.php :

  • Karena form ini akan digunakan juga untuk bagian update data, maka pada value dimasukkan juga $article->title dengan kondisi old data atau data awal
  • @error(‘title’) berfungsi untuk menampilkan pesan error jika memang ada, sesuai dengan validasi yang telah dibuat pada controller

3. Buka app/Http/Controllers/ArticleController.php dan ubah function store menjadi code berikut :

public function store(Request $request)
{
    $request->validate([
        'title'    => 'required|string|max:255|unique:articles,title',
        'content'  => 'required',
    ]);

    Article::create([
        'title' => $request->title,
        'body'  => $request->content,
    ]);

    return redirect()->back()->with('success', 'Article <span class="italic font-medium">created</span> successfully.');
}

Keterangan :

  • Perhatikan ‘title’ => ‘required|string|max:255|unique:articles,title’, jika Anda belum tahu validasi tersebut menandakan isi dari title haruslah unik atau tidak boleh ada data yang sama
  • ‘body’ => $request->content, kenapa requestnya ke content? Karena e karena pada form.blade.php name yang dibuat adalah content
  • return redirect()->back()… berfungsi untuk redirect ke halaman yang sama dengan memuat flash session mesasge dengan nama success

Sekarang silakan coba untuk menginputkan data pada form create, dan lihat hasilnya.

CRUD Laravel Input Data

Cara Menampilkan Data Dari Database di Laravel 8 (Read)

Untuk bagian ini terdapat 2 bagian yaitu menampilkan seluruh data dan menampilkan secara spesifik.

Menampilkan Semua Data

1. Buka app/Http/Controllers/ArticleController.php dan ubah function index menjadi seperti berikut :

public function index(Request $request)
{
    $pagination = 5;
    $articles   = Article::orderBy('created_at', 'desc')->paginate($pagination);

    return view('articles.index', [
        'title'    => 'Articles',
        'articles' => $articles,
    ]);
}

Keterangan :

  • $pagination berfungsi untuk menampung jumlah data yang akan ditampikan
  • $articles adalah variabel untuk menampikan data dengan mengurutkan berdasarkan pembuatan data dibuat secara descending dan membuat paginasi dengan jumlah 5

2. Buat file resources/views/articles/index.blade.php kemudian masukkan code berikut :

3. Sekarang lihat laravel8-crud.test/articles maka data sudah ditampikan seperti pada gambar di bawah.

Cara Menampilkan Data di Laravel

Tambahan :

  • Pada nomor belum memuat nomor urut yang sesuai, jika ingin membuat nomor urut silakan baca artikel cara membuat nomor urut otomatis di laravel
  • Mungkin akan lebih bagus jika menambahkan fitur searching data, silakan baca artikel cara membuat searching pencarian di laravel
  • Tampilan dari paginationnya terasa kurang mantap, silakan baca artikel cara membuat pagination tailwindcss di laravel agar lebih mantap tampilannya.

Menampilkan Data Berdasarkan ID (Detail)

Pada artikel berikutnya akan saya berikan tutorial untuk menampilkan data berdasarkan slug, sehingga url menjadi lebih cakep.

1. Buka controller article dan ubah function show menjadi kode berikut :

public function show($id)
{
    $article = Article::findOrFail($id);
    return view('articles.show', [
        'title'   => 'Detail Article',
        'article' => $article,
    ]);
}

2. Buat file resources/views/articles/show.blade.php dan masukkan kode berikut :

3. Sekarang klik pada action detail data dan hasilnya akan seperti gambar berikut :

Laravel CRUD Detail Data

Cara Mengubah Data di Laravel (Update)

1. Buka article controller ubah function edit menjadi seperti berikut :

public function edit($id)
{
    $article = Article::findOrFail($id);
    return view('articles.edit', [
        'title'   => 'Update Article',
        'submit'  => 'Update',
        'article' => $article,
    ]);
}

2. Buat file resources/views/articles/edit.blade.php dan masukkan code berikut :

Keterangan :

  • Kode edit hampir sama dengan code create hanya berbeda action menjadi update dan membawa identifier ($article = id) serta method put
  • Bagian form sudah dibuat pada bagian membuat create.

3. Sekarang buat action untuk update dengan mengganti function update menjadi seperti berikut :

public function update(Request $request, $id)
{
    $request->validate([
        'title'    => 'required|string|max:255|unique:articles,title,' . $id,
        'content'  => 'required',
    ]);

    $article = Article::findOrFail($id);
    $article->update([
        'title' => $request->title,
        'body'  => $request->content,
    ]);

    return redirect()->route('articles.index')->with('success', 'Article <span class="italic font-medium">updated</span> successfully.');
}

Keterangan :

Pada validation title ada perbedaan dengan validation title yang ada di store, karena ini adalah fungsi update maka validasi unik harus berbeda dari data sebelumnya, jika masih menggunakan validation dari store maka ketika diupdate tidak akan bisa karena terbaca tidak unik, ditambahkan variabel $id artinya meng-ignore (selain) dari $id yang awal.

4. Sekarang coba lakukan proses update data dan lihat hasilnya

Tutorial Update di Laravel

Cara Menghapus Data dari Database di Laravel (Delete)

1. Buka article controller dan ubah function destroy menjadi code berikut :

public function destroy($id)
{
    $article = Article::findOrFail($id);
    $article->delete();

    return redirect()->back()->with('success', 'Article <span class="italic font-medium">deleted</span> successfully.');
}

2. Buka resources/views/articles/index.blade.php dan ubah button delete menjadi seperti code berikut :

<form action="{{ route('articles.destroy', $article) }}"
  class="inline"
  method="post">
  @csrf
  @method('delete')
  <button type="submit"
    class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium tracking-wide text-white transition bg-red-500 border border-transparent rounded-full shadow select-none focus:border-red-600 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-500 focus:ring-opacity-30 disabled:opacity-50">
    <svg class="w-4 h-4 -mx-2"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor">
      <path fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
        clip-rule="evenodd" />
    </svg>
  </button>
</form>

Keterangan :

  • Bagian hapus data memerlukan method delete sehingga harus dibuat form
  • Pada artikel ini belum ada konfirmasi delete, seperti ketika tombol hapus di klik akan ada pertanyaan “apakah data ini benar akan dihapus?” ini sangatlah penting berhubung action yang digunakan adalah menghapus data. Silakan baca artikel cara membuat konfirmasi delete dengan sweet-alert2 di laravel dengan reactjs.

Sampai sini proses dari create, read, update, dan delete (crud) sudah selesai, silakan custom dan bereksplor agar lebih menguasainya.

Itulah artikel tentang tutorial crud di laravel 8 dengan tailwindcss v2 yang dapat saya sampaikan, semoga bermanfaat.

susantokun avatar
susantokun
Lahir di Bumi ini atas perjuangan Ayah dan Ibu yang senantiasa membuat dan mengeluarkan sehingga lahirlah Susanto pada tanggal 27 Maret 1996 di Cianjur - Jawa Barat.
Kebijakan Berkomentar :
1. Dilarang berkomentar yang mengandung SPAM, SARA, HOAX, PORNO.2. Mohon sertakan informasi detail saat terjadi error (pesan error, sreenshoot, code, logs, dsb.).