Site icon SUSANTOKUN

Tutorial CRUD Laravel 8 dengan TailwindCSS

susantokun
Tutorial CRUD Laravel 8 dengan TailwindCSS

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 laravel-8-crud di text editor atau buat dari awal :

laravel new laravel-8-crud
cd laravel-8-crud
code .
composer require laravel/breeze --dev
php artisan breeze:install
npm install && npm run dev

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

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

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

mysql -ususantokun -psusantokun
create database laravel_8_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 :

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 :

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 laravel-8-crud.test/articles/create maka akan tampil pesan “View [articles.create] not found.” karena belum membuat views dari halaman create.

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

Keterangan create.blade.php :

Keterangan form.blade.php :

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 :

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

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 :

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

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

Tambahan :

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 :

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 :

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

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 :

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

laravel-8-crud youtube

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

Exit mobile version