Open in app

Sign in

Write

Sign in

Laravel 8 : CRUD Tutorial Example From Scratch

Muhammad Rifki Adam A
5 min readDec 15, 2022

--

Dalam tutorial ini, saya akan mempelajari bagaimana caranya melakukan proses CRUD(Create, Read, Update dan Delete) pada Laravel versi 8. Langsung saja, mari ikuti beberapa Langkah untuk membuat contoh tutorial aplikasi CRUDnya.

Langkah 1 : Install Laravel 8

  • Pada langkah pertama, kita perlu mendapatkan aplikasi versi Laravel 8. Maka kita perlu jalankan perintah dibawah ini untuk menginstal proyek Laravel versi 8.

composer create-project laravel/laravel:^⁸.0 learn-laravel

Langkah 2 : Konfigurasi Database

Pada langkah kedua, kita akan membuat konfigurasi database misalnya pada nama database, username, password dll yang ada di file .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=learn-laravel
DB_USERNAME=root
DB_PASSWORD=

Langkah 3: Buat Migrasi

  • Kita akan membuat contoh aplikasi posting. Jadi kita harus membuat migrasi terlebih dahulu untuk table “postingan” menggunakan perintah Laravel php artisan, jadi kita akan menjalankan perintah dibawah ini:

php artisan make:migration create_posts_table –create=posts

  • Setelah menjalankan perintah diatas, Maka akan terdapat file baru pada folder database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php. Kemudian tambahkan fileld table pada file tersebut.
public function up()
{
  Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->longText('description');
    $table->timestamps();
  });
}
  • Sekarang kita jalankan migrasi dengan perintah :

php artisan migrate

Langkah 4: Tambahkan Controller dan Model

  • Pada langkah ini, sekarang kita harus membuat controller baru sebagai PostController. Jadi kita akan menjalankan perintah dibawah ini :

php artisan make:controller PostController — resource — model=Post

  • Setelah menjalankan perintah diatas, maka akan ada perintah file baru “App/Http/Controllers/PostController.php”. Pada controller tersebut akan membuat 7 method secara default. Kemudian isikan kode dibawah ini pada file tersebut :
public function index()
{
  $posts = Post::latest()->paginate(5);
  return view('posts.index',compact('posts'))
    ->with('i', (request()->input('page', 1) - 1) * 5);
}

public function create()
{
  return view('posts.create');
}

public function store(Request $request)
{
  $request->validate([
  'title' => 'required',
  'description' => 'required',
  ]);
  Post::create($request->all());
  return redirect()->route('posts.index')
  ->with('success','Post created successfully.');
}

public function show(Post $post)
{
  return view('posts.show',compact('post'));
}

public function edit(Post $post)
{
  return view('posts.edit',compact('post'));
}

public function update(Request $request, Post $post)
{
  $request->validate([
  'title' => 'required',
  'description' => 'required',
  ]);
  $post->update($request->all());
  return redirect()->route('posts.index')
  ->with('success','Post updated successfully');
}

public function destroy(Post $post)
{
  $post->delete();
  return redirect()->route('posts.index')
    ->with('success','Post deleted successfully');
}
  • Kemudian pada file folder “App/Models/Post.php”, isikan kode dibawah ini :
protected $fillable = [
  'title', 'description',
];

Langkah 5: Tambahkan File Blade

  • Pada step kali ini, kita akan menambahkan file blade pada folder “resource/views/app/layout.blade.php”.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 CRUD Application - Muhammad Rifki Adam A</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />
</head>
<body style="background: #e2e2e2;">
  <div class="container">
    <div class="row">
      <div class="col-md-10 offset-1">
        @yield('content')
      </div>
    </div>
  </div>
</body>
</html>
  • “resources/views/posts/index.blade.php”
@extends('app.layout')
@section('content')
  <div class="card mt-5">
    <div class="card-header">
      <h2>Laravel 8 CRUD Example from scratch - Muhammad Rifki Adam A</h2>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-lg-12 mt-1 mr-1">
          <div class="float-right">
            <a class="btn btn-success" href="{{ route('posts.create') }}"> Create New Post</a>
          </div>
        </div>
      </div>
      <div class="row mt-2">
        <div class="col-lg-12">
          @if ($message = Session::get('success'))
            <div class="alert alert-success">
              <p>{{ $message }}</p>
            </div>
          @endif
        </div>
        <div class="col-lg-12">
          <table class="table table-bordered">
            <tr>
              <th>No</th>
              <th>Title</th>
              <th>Description</th>
              <th width="280px">Action</th>
            </tr>
            
             @foreach ($posts as $post)
            <tr>
              <td>{{ ++$i }}</td>
              <td>{{ $post->title }}</td>
              <td>{{ \Str::limit($post->description, 50) }}</td>
              <td>
                <form action="{{ route('posts.destroy',$post->id) }}" method="POST">
                  <a class="btn btn-info" href="{{ route('posts.show',$post->id) }}">Show</a>
                  <a class="btn btn-primary" href="{{ route('posts.edit',$post->id) }}">Edit</a>
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="btn btn-danger">Delete</button>
                </form>
              </td>
            </tr>
            @endforeach
          </table>
        {!! $posts->links() !!}
      </div>
     </div>
   </div>
</div>
@endsection
  • “resources/views/posts/create.blade.php”
@extends('app.layout')
@section('content')
<div class="card mt-5">
  <div class="card-header">
    <h2>Laravel 8 CRUD Example from scratch - Muhammad Rifki Adam A</h2>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-lg-12 mt-1 mr-1">
        <div class="float-right">
          <a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>
        </div>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-lg-12">
        @if ($message = Session::get('success'))
          <div class="alert alert-success">
            <p>{{ $message }}</p>
          </div>
        @endif
      </div>
    <div class="col-lg-12">
      @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>Description:</strong>
                  <textarea class="form-control" rows="6" name="description" placeholder="Description"></textarea>
              </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button type="submit" class="btn btn-success">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection
  • “resources/views/posts/edit.blade.php”
@extends('app.layout')
@section('content')
<div class="card mt-5">
  <div class="card-header">
    <h2>Laravel 8 CRUD Example from scratch - Muhammad Rifki Adam A</h2>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-lg-12 mt-1 mr-1">
        <div class="float-right">
          <a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>
        </div>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-lg-12">
        @if ($message = Session::get('success'))
          <div class="alert alert-success">
            <p>{{ $message }}</p>
          </div>
        @endif
      </div>
      <div class="col-lg-12">
        @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>Description:</strong>
                  <textarea class="form-control" style="height:150px" name="description" placeholder="Description">{{ $post->description }}</textarea>
              </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button type="submit" class="btn btn-success">Submit</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection
  • “resources/views/posts/show.blade.php”
@extends('app.layout')
@section('content')
<div class="card mt-5">
  <div class="card-header">
    <h2>Laravel 8 CRUD Example from scratch - Riefqi Adam</h2>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-lg-12 mt-1 mr-1">
        <div class="float-right">
          <a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>
        </div>
      </div>
    </div>
    <div class="row mt-2">
      <div class="col-lg-12">
        @if ($message = Session::get('success'))
          <div class="alert alert-success">
            <p>{{ $message }}</p>
          </div>
        @endif
      </div>
      <div class="col-lg-12">
        <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>Description:</strong>
            {{ $post->description }}
        </div>
       </div>
      </div>
     </div>
    </div>
  </div>
</div>
@endsection
  • Kemudian jalankan perintah dibawah ini :

php artisan serve

  • Sekarang buka url dibawah ini pada browser anda

http://127.0.0.1:8000/posts

Maka akan muncul list data tampilan seperti ini :

Tampilan data postingan

Selesai !!!

Laravel
Laravel Framework
Web Development
Website
PHP

--

--

Muhammad Rifki Adam A
Muhammad Rifki Adam A

Written by Muhammad Rifki Adam A

4 Followers
4 Following

I'm From Yogyakarta, Indonesia and I Interested in software interface development and web development

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams