Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial CRUD Laravel 8 untuk Pemula

6 min read

Tutorial Simple CRUD Laravel 8 untuk Pemula
Loading...

Tutorial CRUD Laravel 8 untuk Pemula. Seperti pada umumnya, untuk mempelajari hal baru dari Laravel 8 selalu dimulai dari mempelajari tutorial Create, Read, Update dan Delete (CRUD).

Melalui artikel ini, kamu akan belajar step by step membuat CRUD Laravel 8 yang simple dan mudah dipahami.

Selain itu, kamu juga bisa download source code yang tersedia di akhir artikel ini.

Oke, langsung saja kita mulai cara membuat CRUD Laravel 8.

Let’s Go!

Pengenalan Laravel 8

Taylor Otwell baru saja merilis Laravel 8 pada tanggal 8 September 2020.

Pada versi terbaru ini, Laravel 8 memberikan beberapa fitur baru dan dukungan LTS yang keren yang perlu kita ketahui. Selengkapnya bisa kamu baca melalui artikel di bawah ini:

Loading...

Baca Juga: Fitur dan Ulasan Laravel 8 yang Wajib Kamu Tahu

Sudah membacanya?

Kalau sudah pasti kamu sudah nggak sabar bagaimana membuat aplikasi dasar seperti insert, update dan delete di Laravel 8.

Nggak sulit!

… di sini kamu hanya perlu mengikuti beberapa langkah dasar menggunakan controller, model, route, bootstrap 4 dan blade.

Step #1 – Install Laravel 8

Ada 2 cara yang dapat dilakukan untuk menginstall Laravel 8. Pertama dengan Laravel Installer dan yang kedua dengan composer.

Cara 1: Menggunakan Laravel Installer

Loading...

Silahkan ketik command di bawah ini untuk menginstall Laravel terlebih dahulu:

composer global require laravel/installer

Kemudian buat project baru dengan ketik command berikut ini:

laravel new laravel8_crud

Cara 2: Menggunakan Composer

Ini adalah cara termudah yang biasa kita lakukan, cukup dengan ketik perintah berikut ini:

composer create-project --prefer-dist laravel/laravel laravel8_crud

Baca Juga:

Kemudian tunggu sampai installasi selesai.

Step #2 – Konfigurasi Database

Step kedua yaitu dengan mengatur database.

Loading...

Silahkan aktifkan web server yang kamu gunakan semisal XAMPP, Laragon, MAMP, Nginx dan lain-lain.

Kemudian buat database baru bernama db_laravel8_crud.

Setelah itu, buka file .env yang ada di dalam direktori blog/.env.

Ubah nama database, root, password dll yang sesuai dengan web server kamu lakukan.

Tips 1: Konfigurasi Database di XAMPP (Windows / Linux) dan Laragon (Windows)

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_laravel8_crud
DB_USERNAME=root
DB_PASSWORD=

Tips 2: Konfigurasi Database di MAMP (MAC Os)

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=db_laravel8_crud
DB_USERNAME=root
DB_PASSWORD=root

Save.

Loading...

Step #3 – Membuat Migration dan Model

Pada studi kasus kita kali ini akan menggunakan table posts sebagai contoh. Maka dari itu kita perlu membuat table sekaligus model-nya terlebih dahulu.

Silahkan ketik command di bawah ini:

php artisan make:model Post --migration

Kemudian buka folder migrations yang ada di direktori laravel8_crud/database/migrations.

Lalu modifikasi skema field table posts dengan kode di bawah ini:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Sudah selesai mengubah kodenya?

Jika sudah kita jalankan command di bawah ini agar field yang kita buat akan ter-migrasi ke database:

php artisan migrate

Step #4 – Membuat Resource Controller

Pada tahap ini kita akan membuat controller di Laravel 8.

Loading...
Loading...

Silahkan ketik command di bawah ini untuk membuat resource controller:

php artisan make:controller PostController --resource

Jika berhasil maka akan terdapat file PostController.php di dalam direktori app/Http/Controllers.

… di dalam PostController.php sudah tersedia beberapa function, yaitu:

  • index()
  • create()
  • store()
  • show()
  • edit()
  • destroy()

Sekarang kita modifikasi isi file tersebut seperti kode di bawah ini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;
 
class PostController extends Controller
{
    public function index()
    {
        /// mengambil data terakhir dan pagination 5 list
        $posts = Post::latest()->paginate(5);
        
        /// mengirimkan variabel $posts ke halaman views posts/index.blade.php
        /// include dengan number index
        return view('posts.index',compact('posts'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }
 
    public function create()
    {
        /// menampilkan halaman create
        return view('posts.create');
    }
 
    public function store(Request $request)
    {
        /// membuat validasi untuk title dan content wajib diisi
        $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);
        
        /// insert setiap request dari form ke dalam database via model
        /// jika menggunakan metode ini, maka nama field dan nama form harus sama
        Post::create($request->all());
        
        /// redirect jika sukses menyimpan data
        return redirect()->route('posts.index')
                        ->with('success','Post created successfully.');
    }
 
    public function show(Post $post)
    {
        /// dengan menggunakan resource, kita bisa memanfaatkan model sebagai parameter
        /// berdasarkan id yang dipilih
        /// href="{{ route('posts.show',$post->id) }}
        return view('posts.show',compact('post'));
    }
 
    public function edit(Post $post)
    {
        /// dengan menggunakan resource, kita bisa memanfaatkan model sebagai parameter
        /// berdasarkan id yang dipilih
        /// href="{{ route('posts.edit',$post->id) }}
        return view('posts.edit',compact('post'));
    }
 
    public function update(Request $request, Post $post)
    {
        /// membuat validasi untuk title dan content wajib diisi
        $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);
        
        /// mengubah data berdasarkan request dan parameter yang dikirimkan
        $post->update($request->all());
        
        /// setelah berhasil mengubah data
        return redirect()->route('posts.index')
                        ->with('success','Post updated successfully');
    }
 
    public function destroy(Post $post)
    {
        /// melakukan hapus data berdasarkan parameter yang dikirimkan
        $post->delete();
 
        return redirect()->route('posts.index')
                        ->with('success','Post deleted successfully');
    }
}

Save.

Step #5 – Modifikasi Model

Silahkan buka file app/Models/Post.php dan tambahkan fillable.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $fillable = [
        'title', 'content'
    ];
}

Step #6 – Menambahkan Route

Sakarang kita tambahkan route untuk mengakses resource controller Post.

Loading...

Buka routes/web.php dan tambahkan:

use App\Http\Controllers\PostController;
Route::resource('posts', PostController::class);

Simpan.

Step #7 – Membuat Halaman View

Pada step terakhir ini, kita akan membuat beberapa file view menggunakan bootstrap.

Adapun halaman view yang akan kita buat adalah:

  • template.blade.php
  • index.blade.php
  • create.blade.php
  • show.blade.php
  • edit.blade.php

Let’s go!

Silahkan buat file baru bernama template.blade.php di direktori resources/views.

Kemudian ketik kode berikut ini:

Loading...
<!DOCTYPE html>
<html>
<head>
    <title>Tutorial CRUD Laravel 8 untuk Pemula - Ilmucoding.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    @yield('content')
</div>

</body>
</html>

Kemudian buat folder baru di dalam views bernama posts.

1# posts/index.blade.php

@extends('template')

@section('content')
    <div class="row mt-5 mb-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2>Tutorial CRUD Laravel 8 untuk Pemula - Ilmucoding.com</h2>
            </div>
            <div class="float-right">
                <a class="btn btn-success" href="{{ route('posts.create') }}"> Create Post</a>
            </div>
        </div>
    </div>

    @if ($message = Session::get('success'))
    <div class="alert alert-success">
        <p>{{ $message }}</p>
    </div>
    @endif

    <table class="table table-bordered">
        <tr>
            <th width="20px" class="text-center">No</th>
            <th>Title</th>
            <th width="280px"class="text-center">Action</th>
        </tr>
        @foreach ($posts as $post)
        <tr>
            <td class="text-center">{{ ++$i }}</td>
            <td>{{ $post->title }}</td>
            <td class="text-center">
                <form action="{{ route('posts.destroy',$post->id) }}" method="POST">

                    <a class="btn btn-info btn-sm" href="{{ route('posts.show',$post->id) }}">Show</a>

                    <a class="btn btn-primary btn-sm" href="{{ route('posts.edit',$post->id) }}">Edit</a>

                    @csrf
                    @method('DELETE')

                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </table>

    {!! $posts->links() !!}

@endsection

2# posts/create.blade.php

@extends('template')

@section('content')
<div class="row mt-5 mb-5">
    <div class="col-lg-12 margin-tb">
        <div class="float-left">
            <h2>Create New Post</h2>
        </div>
        <div class="float-right">
            <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
        </div>
    </div>
</div>

@if ($errors->any())
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('posts.store') }}" method="POST">
    @csrf

     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                <input type="text" name="title" class="form-control" placeholder="Title">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Content:</strong>
                <textarea class="form-control" style="height:150px" name="content" placeholder="Content"></textarea>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>

</form>
@endsection

3# posts/show.blade.php

@extends('template')

@section('content')
    <div class="row mt-5 mb-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2> Show Post</h2>
            </div>
            <div class="float-right">
                <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Title:</strong>
                {{ $post->title }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Content:</strong>
                {{ $post->content }}
            </div>
        </div>
    </div>
@endsection

4# posts/edit.blade.php

@extends('template')

@section('content')
    <div class="row mt-5 mb-5">
        <div class="col-lg-12 margin-tb">
            <div class="float-left">
                <h2>Edit Post</h2>
            </div>
            <div class="float-right">
                <a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
            </div>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Whoops!</strong> There were some problems with your input.<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('posts.update',$post->id) }}" method="POST">
        @csrf
        @method('PUT')

         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Title:</strong>
                    <input type="text" name="title" value="{{ $post->title }}" class="form-control" placeholder="Title">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Content:</strong>
                    <textarea class="form-control" style="height:150px" name="content" placeholder="Content">{{ $post->content }}</textarea>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </div>

    </form>
@endsection

Step 8# – Testing Program

Masih sama dengan laravel versi sebelumnya, untuk menjalankan aplikasi kita ketik command di bawah ini:

php artisan serve

Kemudian buka browser dan ketik URL berikut:

Loading...
http://127.0.0.1:8000/posts

Jika berhasil maka akan tampil halaman seperti ini:

Create, Read, Update, Delete (CRUD) Laravel 8

Klik tombol Create Post, maka akan muncul halaman seperti di bawah ini:

Halaman Tambah Data

Silahkan isi dengan judul dan content. Jika sudah, klik tombol Submit.

… dan untuk tampilan Detail, bisa klik tombol Show pada halaman index.

Hasilnya:

Create, Read, Update, Delete (CRUD) Laravel 8

Terakhir, ini halaman edit:

Halaman Edit Data

Penutup

Alhamdulillah, telah selesai tutorial CRUD sederhana menggunakan Laravel 8 pada saat ini.

Loading...

Kita telah banyak belajar tentang pengembangan Laravel 8, hal baru pada route, membuat model dan migration, membuat controller dan membuat view dan lain-lain.

Buat yang ingin download project ini, silahkan klik link di bawah ini:

Download Source Code

Catatan:

Insya Allah akan ada tutorial Laravel 8 lainnya yang akan kami posting di situs ilmucoding.com.

Mohon do’anya pembaca sekalian. Terima kasih banyak.

Loading...
Loading...

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

45 Replies to “Tutorial CRUD Laravel 8 untuk Pemula”

  1. Kalau kita ingin pakai css dan js secara lokal, simpan filenya dimana ya? dan untuk memanggilnya seperti apa caranya, karena saya panggil caranya seperti biasa, tidak mau terpanggil

    1. Simpan di public, Mas. Cara pemanggilannya juga sama. Menggunakan {{ asset(‘path’) }}

  2. maaf pak, untuk setup controllernya nanti bisa dijelasin ga ya? maksudnya kaya di breakdown gitu, ini buat apa dsb. jujur, masih bingung liatnya….

  3. mau tanya nih, kalo misal kita punya banyak tabel, apakah harus dibuatkan controller dan modelnya satu per satu, atau bisa disingkat saja dengan 1 controller untuk tiap action/responsibility dan 1 model? teruma kasih sudah menjawab

    1. Baiknya dibuat satu per satu aja agar lebih memudahkan manajemen jika aplikasi skalanya sudah besar…

  4. di step 7, command seharusnya php artisan serve. bukan php artisan migrate.

    terima kasih atas tutorialnya. sangat membantu

  5. selamat sore kak..
    alhamdulillah.
    ketika create post (mengisi title dan content) selanjutnya ketika di klik submit ada eror dengan perintah error

    (SQLSTATE[42S22]: Column not found: 1054 Unknown column ‘title’ in ‘field list’ (SQL: insert into `posts` (`title`, `content`, `updated_at`, `created_at`) values (asd, asda, 2020-12-22 09:17:34, 2020-12-22 09:17:34))

    mohon solusinya kak

  6. Alhamdulillah.
    Setelah saya run semua, ketika mengisi sebuah title and content terus di submit. Pas di klik Submit eror muncul kak. Mohon solusinya kak.thanks

  7. Terimkasih sebelumnya tutorialnya sangat membantu
    ada beberapa yg sebelumnya saya belum pahami terutama di *store*
    tapi alhamdulillah sudah ada pencerahan,

    ada 1 lagi yg belum itu ada di function index() karna menerapkan pagination yg saya belum paham dari mana munculnya mohon petunjuk dan refeensinya, apakan paginationnya bisa di modifikasi seperti loadmore ketika di scroll atau di klik?

    1. Untuk pagination ini sudah fungsi bawaan laravel mas dan metodenya seperti klik biasa.

      Untuk scroll dan klik loadmore untuk menggunakan metode terpisah.

  8. Halo, aku sudah coba dan sekarang sudah bisa di run tapi kenapa ya ada 2 pagination yang muncul, adakah yang tau caranya bagaimana agar yang muncul 1 pagination saja

  9. pas buka http://127.0.0.1:8000/posts ga muncul gambar yg di atas malah tulisan not found kenapa ya?

    1. Biasanya ini penyebabnya:

      1. Kurang memperhatikan apakah route sudah benar apa belum
      2. Belum mengaktifkan “php artisan serve”

  10. InvalidArgumentException
    View [posts.index] not found.

    saya erorr seperti ini, ada yang bisa bantu?

        1. Perhatikan nama folder di resources/views apa sudah benar apa belum.

          Stukturnya kan harus kaya gini:

          resources
          — views
          ——template.blade.php
          ——posts
          ———-index.blade.php
          ———-create.blade.php
          ———-edit.blade.php
          ———-show.blade.php

  11. Illuminate\Contracts\Container\BindingResolutionException
    Target class [App\Http\Controllers\PostController] does not exist.

  12. Mohon Bantuannya min, saya masih newbie min
    Undefined variable $posts (View: C:\xampp\htdocs\laravel8_crud\resources\views\posts\index.blade.php)

    1. Ini bisa jadi karena:

      1. di PostController.php belum ngelembar parameret variabel $posts ke view
      2. nama variabel tidak sama
      3. memang belum ditulis secara lengkap

  13. bagian routingnya udah bener kok dapet eror begini bang?
    BadMethodCallException
    Call to undefined method App\Models\Post::lastest()
    http://localhost:8000/posts


    <?php

    use Illuminate\Support\Facades\Route;

    /*
    |————————————————————————–
    | Web Routes
    |————————————————————————–
    |
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
    |
    */
    use App\Http\Controllers\PostController;
    Route::resource('posts', PostController::class);
    Route::get('/', function () {
    return view('welcome');
    });

    1. Ini bisa jadi karena nggak ditulis secara lengkap.

      Misal nulisnya begini:

      $posts = Post::latest()

      Harusnya kan begini:

      $posts = Post::latest()->paginate(5);

      Atau bisa tambahkan get, misalnya:

      $posts = Post::latest()->get();

  14. Terima kasih banyak bang buat tips crud laravel 8 kali ini, tapi setelah saya ikuti semua langkah di atas, kemudian pas buka http://127.0.0.1:8000/posts di browser tampilannya seperti ini saja:

    @extends(‘template’) @section(‘content’)
    Tutorial CRUD Laravel 8 untuk Pemula – Ilmucoding.com
    Create Post
    @if ($message = Session::get(‘success’))
    {{ $message }}

    @endif @foreach ($posts as $post) @endforeach
    No Title Action
    {{ ++$i }} {{ $post->title }}
    Show Edit @csrf @method(‘DELETE’) Delete
    {!! $posts->links() !!} @endsection

    Apakah CSS/Bootstrapnya belum terhubung atau kenapa ya bang?

    1. Udah ketemu bang, ternyata kurang fokus nih ngodingnya hehe

      Terima kasih banyak buat tutorialnya bang. Semoga sehat, sukses, dan berkah selalu ^_^

  15. Terimakasih tutorialnya sangat membantu saya sebagai pemula, ternyata memang ketelitian sangan di butuhkan saat ngodin, buat contoh yang tinggal salin saja saya masih lupa klik satu huruf yang membuat semuanya gagal, eh setelah saya bongkar lagi dan tau seluk beluknya haya kurang satu huruf saja heheheehehe,

    ilmunya sangant bermanfaat min

  16. mau nanya kalo SQLSTATE[42S02]: Base table or view not found: 1146 Table ‘db_laravel8_crud.posts’ doesn’t exist (SQL: select count(*) as aggregate from `posts`) gimana?

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.