Tutorial CRUD di laravel 7 (Tampil, Input, Edit, dan Hapus)

By Abdul Aziz 1 comment

Kali ini admin akan berbagi tutrial bagaimana cara menampilkan, menambah, edit dan hapus data di laravel 7 atau istilahnya tutorial CRUD dilaravel 7. Pada artikel sebelumnya admin sudah menjelaskan tentang bagaimana Cara Instalasi Laravel 7.

CRUD merupakan hal basic yang kita pelajari saat memulai sebuah bahasa pemrograman baru maupun framework dengan menggunakan database, Sehingga para programer mampu merabah dan mengembangkan aplikasi yang dibuat.

Jika kalian belum bisa instal laravel di komputer/laptop kalian silahkan baca Cara Install laravel 7

Kalao kalian sudah paham tentang cara instalasi laravel langsung saja kita ke cara pembuatan CRUD di laravel 7 .

Membuat Database di Mysql

Yang belum tahu bagaimana cara membuat database di mysql silahkan anda baca : Cara Membuat database di Mysql dan Cara Membuat Tabel di Database MySQL.

Query Membuat Database

mysql> create database latihan;
Query OK, 1 row affected (0.05 sec)

Membuat Koneksi Database

Setelah membuat database silahkan kalian buat koneksi databasenya dulu caranya kalian masuk kedalam folder laravel kalian kemudian cari file dengan nama .env kemudian silahkan kalian buka di text editor kalian lalu cari kode seperti dibawah ini edit sesuai dengan database kalian

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=latihan
DB_USERNAME=root
DB_PASSWORD=12345678

Membuat Migrasi

Kali ini kita akan membuat sebuah aplikasi sederhana untuk biodata. Jadi kita harus membuat migrasi untuk tabel "biodata". dengan menggunakan perintah php artisan di laravel 7 berikut ini perintahnya

php artisan make:migration create_biodata_table --create=biodata

setelah melakukan perintah diatas kalian akan menumukan file baru di folder "database/migrasi" dan silahkan kalian edit seperti kode dibawah ini untuk membuat sebuah tabel biodata

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateBiodataTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('biodata', function (Blueprint $table) {
            $table->id();
            $table->string('nama');
            $table->text('alamat');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('biodata');
    }
}

Setelah itu simpan kemudian silahkan jalankan perintah dibawah ini

php artisan migrate

Membuat Route Resource

silahkan kalian cari file dengan nama web.php yang ada di folder routes kemudian edit kodenya

Route::resource('biodata','BiodataController');

Membuat Controller dan Model

Pada langkah ini, sekarang kita harus membuat controller baru sebagai BiodataController. Jadi jalankan perintah di bawah ini dan buat controller baru.

php artisan make:controller BiodataController --resource --model=Biodata

setalh perintah diatas dijalankan anda akan menemukan file baru di folder "app/Http/Controllers/BiodataController.php".

Didalam file tersebut terdapat 7 perintah default dari laravel yaitu

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

silahkan anda buka file BiodataController.php kemudian edit seperti dibawah ini :

<?php
namespace App\Http\Controllers;
use App\Biodata;
use Illuminate\Http\Request;
class BiodataController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
       $biodata = Biodata::latest()->paginate(5);
        return view('biodata.index',compact('biodata'))->with('i', (request()->input('page', 1) - 1) * 5);
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('biodata.create');
    }
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'nama' => 'required',
            'alamat' => 'required',
        ]);
        Biodata::create($request->all());
        return redirect()->route('biodata.index')->with('success','Data berhasil di input');
    }
    /**
     * Display the specified resource.
     *
     * @param  \App\Biodata  $biodata
     * @return \Illuminate\Http\Response
     */
    public function show(Biodata $biodata)
    {
        return view('biodata.show',compact('biodata'));
    }
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Biodata  $biodata
     * @return \Illuminate\Http\Response
     */
    public function edit(Biodata $biodata)
    {
        return view('biodata.edit',compact('biodata'));
    }
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Biodata  $biodata
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Biodata $biodata)
    {
        $request->validate([
            'nama' => 'required',
            'alamat' => 'required',
        ]);
        $biodata->update($request->all());
        return redirect()->route('biodata.index')->with('success','biodata berhasil di update');
    }
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Biodata  $biodata
     * @return \Illuminate\Http\Response
     */
    public function destroy(Biodata $biodata)
    {
        $biodata->delete();
        return redirect()->route('biodata.index')->with('success','Biodata berhasil dihapus');
    }
}

Kemudian silahkan anda buka file Biodata.php yang berada di folder "app" kemudian tambahkan kode seperti dibawah ini

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Biodata extends Model
{
    protected $fillable = [
    	'nama', 'alamat'
    ];
}

Menambahkan File Blade Untuk Tampilan

Setelah membuat controler dan model saatnya kita membuat sebuah tampilan CRUD. Sebelum membuat file blade layout kita buat dulu folder baru dengan nama "biodata" supaya file tertata dengan rapi dan tidak kocar kacir, taruh folder tersebut di folder "resources/views" langkah pertama kita buat layoutnya dulu, silahkan anda buat file baru beri nama "layout.blade.php" simpan di folder biodata lalu ketikan kode dibawah ini

<!DOCTYPE html>
<html>
<head>
	<title>CRUD LARAVEL 7</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
    @yield('content')
</div>
</body>
</html>

buat file lagi dengan nama index.blade.php kemudian ketikan kode dibawah ini :

@extends('biodata.layout')
 
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Belajar CRUD di Laravel 7</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-success" href="{{ route('biodata.create') }}"> Input Data</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>No</th>
            <th>Nama</th>
            <th>Alamat</th>
            <th width="280px">Action</th>
        </tr>
        @foreach ($biodata as $bio)
        <tr>
            <td>{{ ++$i }}</td>
            <td>{{ $bio->nama }}</td>
            <td>{{ $bio->alamat }}</td>
            <td>
                <form action="{{ route('biodata.destroy',$bio->id) }}" method="POST">
   
                    <a class="btn btn-info" href="{{ route('biodata.show',$bio->id) }}">Tampil</a>
    
                    <a class="btn btn-primary" href="{{ route('biodata.edit',$bio->id) }}">Edit</a>
   
                    @csrf
                    @method('DELETE')
      
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </form>
            </td>
        </tr>
        @endforeach
    </table>
  
    {!! $biodata->links() !!}
      
@endsection

buat file lagi dengan nama create.blade.php kemudian ketikan kode dibawah ini :

@extends('biodata.layout')
  
@section('content')
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>Tambah Biodata</h2>
        </div>
        <div class="pull-right">
            <a class="btn btn-primary" href="{{ route('biodata.index') }}"> Kembali</a>
        </div>
    </div>
</div>
   
@if ($errors->any())
    <div class="alert alert-danger">
        <strong>Maaf</strong> Data yang anda inputkan bermasalah.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
   
<form action="{{ route('biodata.store') }}" method="POST">
    @csrf
  
     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Nama:</strong>
                <input type="text" name="nama" class="form-control" placeholder="Nama">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Alamat:</strong>
                <textarea class="form-control" style="height:150px" name="alamat" placeholder="Alamat"></textarea>
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                <button type="submit" class="btn btn-primary">Simpan</button>
        </div>
    </div>
   
</form>
@endsection

buat file lagi dengan nama edit.blade.php kemudian ketikan kode dibawah ini :

@extends('biodata.layout')
   
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Edit Biodata</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('biodata.index') }}"> Kembali</a>
            </div>
        </div>
    </div>
   
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Edit Gagal</strong> Maaf ada kesalahan saat input data<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
  
    <form action="{{ route('biodata.update',$biodata->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>Nama:</strong>
                    <input type="text" name="nama" value="{{ $biodata->nama }}" class="form-control" placeholder="Nama">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Alamat:</strong>
                    <textarea class="form-control" style="height:150px" name="detail" placeholder="Detail">{{ $biodata->detail }}</textarea>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button type="submit" class="btn btn-primary">EDIT</button>
            </div>
        </div>
   
    </form>
@endsection

Yang terakhir buat fil dengan nama show.blade.php kemudian ketikan kode dibawah ini :

@extends('biodata.layout')
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2> Tampilkan Biodata </h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('biodata.index') }}"> Kembali</a>
            </div>
        </div>
    </div>
   
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Nama:</strong>
                {{ $biodata->nama }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Details:</strong>
                {{ $biodata->alamat }}
            </div>
        </div>
    </div>
@endsection

Setelah semua file sudah dibuat saatnya kita menjalankan aplikasi CRUD sederhana yang kita buat caranya silahkan kalaian buka terminalnya kembali ketikan perintah dibawah ini : php artisan servekemudian buka web browser kalian ketikan : http://localhost:8000/biodata

Sinauo.Com

Widget Atas Posting

Tutorial CRUD di laravel 7 (Tampil, Input, Edit, dan Hapus)

1 comment for "Tutorial CRUD di laravel 7 (Tampil, Input, Edit, dan Hapus)"