CRUD Dengan 2 Tabel – Jawaban Laravel 7 Bag.1

By | Maret 23, 2020
0 Comment

MWI – CRUD Dengan 2 Tabel – Jawaban mengunakan Framework Laravel 7 dengan Operating System Linux Mint 19.3. Posisi yang dijalankan adalah posisi user biasa alias $

Install Laravel

Buka terminal dan pindahkan ke /var/www/html dengan perintah:

cd /var/www/html

lalu install Laravel versi 7 dengan perintah

composer create-project --prefer-dist laravel/laravel=7 quiz1

masuk ke folder project yang baru dibuat, dengan perintah

cd quiz1

buka hak akses dan hak milik dari folder storage, dengan perintah asumsi nama user muhidin dan user web www-data.

sudo chmod 775 -R storage
sudo chown muhidin:www-data -R storage

Buat Database

Buat database dengan nama quiz1 dengan perintah:

mysql -u root -p

masukan password mysql dan tekan ENTER, di prompt mysql berikan perintah membuat database

mysql> create database quiz1;

berikan perintah exit (atau tekan CTRL + D), untuk keluar dari mode mysql

mysql> exit;

buka editor misal vscode, dan sesuaikan file .env menjadi

APP_NAME="Quiz 1 Laravel"
APP_ENV=local
APP_KEY=base64:XsgrNTYPAm8pWCUvSU0MkwR+WQD6ws5ktEx8H7HTIaM=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=quiz1
DB_USERNAME=root
DB_PASSWORD=passwordDB

simpan dan lanjutkan dengan membuka terminal dengan menekan tombol CTRL + ‘ dan berikan perintah untuk membuat model jurusan dan peserta beserta tabelnya dengan perintah

php artisan make:model Jurusan -m
php artisan make:model Peserta -m

Buka file migrations dari Jurusan ada di database/migrations dan sesuaikan menjadi

<?php

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

class CreateJurusansTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
// ganti nama tabel
        Schema::create('jurusan', function (Blueprint $table) {
            $table->id();
//tambah field (kolom)
            $table->string('jurusan', 50)->nullable();
            $table->unsignedInteger('kapasitas')->nullable();
            $table->unsignedInteger('terisi')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
// Ketika rollback tabel akan ikut di hapus
        Schema::dropIfExists('jurusan');
    }
}

Lanjutkan untuk tabel peserta, menjadi

<?php

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

class CreatePesertasTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
//ganti nama tabel tanpa s dibelakang
        Schema::create('peserta', function (Blueprint $table) {
            $table->id();
// tambah kolom
            $table->string('nama', 100)->nullable();
            $table->enum('gender', ['L', 'P'])->default('L');
            $table->unsignedBigInteger('jurusan_id');
            $table->string('asalsekolah', 30)->nullable();
            $table->string('tempatlahir', 30)->nullable();
            $table->date('tanggallahir')->nullable();
            $table->timestamps();
// Jadikan berikan FK (Foreign Key)
            $table->foreign('jurusan_id')
                  ->references('id')->on('jurusan')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
// ketika rollback kembalikan semua
        Schema::dropIfExists('peserta');
        Schema::table('peserta', function (Blueprint $table) {
            $table->dropForeign('peserta_jurusan_id_foreign');
        });
    }
}

Lakukan migrate agar tabel terbentuk dengan kolom yang sudah diberikan diatas, dengan perintah

php artisan migrate

karena nama tabel diubah, berikan info tersebut di model Jurusan (app/Jurusan.php)

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Jurusan extends Model
{
    //berikan nama table
    public $table = 'jurusan';
    // ijinkan agar semua kolom dapat di isi dan simpan
    protected $guarded = [];
}

Lakukan hal yang sama untuk Model Peserta (app/Peserta.php)

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Peserta extends Model
{
    //berikan nama table
    public $table = 'peserta';
    // ijinkan agar semua kolom dapat di isi dan simpan
    protected $guarded = [];
}

Tampilan Depan

Untuk tampilan depan (menu) ambil dari file default saja, buka file welcome.php yang berada pada folder /resources/views/welcome.blade.php dan ubah menjadi

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    Quiz 1 Laravel
                </div>

                <div class="links">
// buat ketika pilihan jurusan di klik akan membuka route jurusan
                    <a href="{{ url('/jurusan') }}">Jurusan</a>
                    <a href="{{ url('/peserta') }}">Peserta Didik</a>
                </div>
            </div>
        </div>
    </body>
</html>

Jalankan browser http://localhost/quiz1/public/ dan hasilnya menjadi

Route – web.php

Buat route untuk jurusan dan peserta, buka file web.php yang ada di folder route dan ubah menjadi

<?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!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::group(['prefix' => 'jurusan'], function () {
    Route::get('/', 'JurusanController@index');
    Route::get('/create', 'JurusanController@create');
    Route::post('/', 'JurusanController@store');
    Route::get('/{id}', 'JurusanController@edit');
    Route::put('/{id}', 'JurusanController@update');
    Route::delete('/{id}', 'JurusanController@destroy');
});

Route::group(['prefix' => 'peserta'], function () {
    Route::get('/', 'PesertaController@index');
    Route::get('/create', 'PesertaController@create');
    Route::post('/', 'PesertaController@store');
    Route::get('/{id}', 'PesertaController@edit');
    Route::put('/{id}', 'PesertaController@update');
    Route::delete('/{id}', 'PesertaController@destroy');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Controller Jurusan

Buat controller untuk Jurusan dengan nama JurusanController dengan perintah

php artisan make:controller JurusanController --resource --model=Jurusan

–resource akan membuat function yang butuhkan oleh Controller –model akan menymabungkan ke modelnya, ubah JurusanController.php yang ada pada folder /app/Http/Controller dan sesuaikan menjadi

<?php

namespace App\Http\Controllers;

use App\Jurusan;
use Illuminate\Http\Request;

class JurusanController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $jurusan = Jurusan::orderBy('id', 'ASC')->get();
        return view('jurusan.index', compact('jurusan'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('jurusan.add');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'jurusan' => 'required|string'
        ]);

        try {
            $jurusan = Jurusan::create([
                'jurusan' => $request->jurusan,
                'kapasitas' => $request->kapasitas,
                'terisi' => $request->terisi
            ]);
            return redirect('/jurusan')->with(['success' => '<strong>' . $request->jurusan . '</strong> Telah disimpan']);
        } catch(\Exception $e) {
            return redirect('/jurusan/create')->with(['error' => $e->getMessage()]);
        }
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Jurusan  $jurusan
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $jurusan = Jurusan::find($id);
        return view('jurusan.show', compact('jurusan'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Jurusan  $jurusan
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $jurusan = Jurusan::find($id);
        return view('jurusan.edit', compact('jurusan'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Jurusan  $jurusan
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $jurusan = Jurusan::find($id);
        $jurusan->update([
            'jurusan' => $request->jurusan,
            'kapasitas' => $request->kapasitas,
            'terisi' => $request->terisi
        ]);
        return redirect('/jurusan')->with(['success' => '<b>' . $request->jurusan . '</b> Diperbaharui']);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Jurusan  $jurusan
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $jurusan = Jurusan::find($id);
        $jurusan->delete();
        return redirect('/jurusan')->with(['success' => '<b>' . $jurusan->jurusan . '</b> Berhasil Dihapus']);
    }
}

CRUD

lanjutkan dengan menyiapkan css bootstrap yang diperlukan, gunakan perintah

composer require laravel/ui
php artisan ui bootstrap --auth
npm install
npm run dev

Read

buat folder baru dengan nama jurusan dan letakan pada folder resources/views. Lanjutkan dengan membuat file index.blade.php pada folder resources/views/jurusan dan isi filenya dengan

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-6">
                                <h3 class="card-title">Data Jurusan</h3>
                            </div>
                            <div class="col-md-6">
                                <a href="{{ url('/jurusan/create') }}" class="btn btn-primary btn-sm float-right"> Tambah Data</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {!! session('success') !!}
                            </div>
                        @endif
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr bgcolor="#ccc">
                                    <th>No</th>
                                    <th>Jurusan</th>
                                    <th>Kapasitas</th>
                                    <th>Terisi</th>
                                    <th width="188px">Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($jurusan as $no => $r)
                                <tr>
                                    <td>{{ $no+1 }}</td>
                                    <td>{{ $r->jurusan }}</td>
                                    <td>{{ $r->kapasitas }} Peserta</td>
                                    <td>{{ $r->terisi }} Peserta</td>
                                    <td>
                                        <form action="{{ url('/jurusan/' . $r->id) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="_method" value="DELETE" class="form-control">
                                            <a href="{{ url('/jurusan/' . $r->id . '/show') }}" class="btn btn-success btn-sm ">Tampil</a>
                                            <a href="{{ url('/jurusan/' . $r->id) }}" class="btn btn-warning btn-sm ">Edit</a>
                                            <button class="btn btn-danger btn-sm" onclick="return confirm('Yakin dihapus?')">Hapus</button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td class="text-center" colspan="5">Tidak ada data</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Jalankan dibrowser http://localhost/quiz1/public/jurusan dan cek hasilnya

Create

buat file baru dengan nama add.blade.php letakan dalam folder resources/views/jurusan dan isi dengan

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-judul">Tambah Data Jurusan</h3>
                    </div>
                    <div class="card-body">
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <form action="{{ url('/jurusan') }}" method="post">
                            @csrf
                            <div class="form-group">
                                <label for="">Nama Jurusan</label>
                                <input type="text" name="jurusan" class="form-control" placeholder="Masukkan Nama Jurusan" autofocus required>
                            </div>
                            <div class="form-group">
                                <label for="">Kapasitas</label>
                                <input type="number" name="kapasitas" class="form-control" placeholder="Kapasitas Kelas">
                            </div>
                            <div class="form-group">
                                <label for="">Terisi</label>
                                <input type="number" name="terisi" class="form-control" placeholder="Isi Kelas">
                            </div>
                            <div class="form-group">
                                <input type="reset">
                                <button class="btn btn-primary btn-md">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Silahkan dites, isi dengan data dan klik simpan kalau disaya hasilnya menjadi

Update

buat file edit.blade.php pada folder resources/view/jurusan dan isi dengan

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-judul">Edit Data Jurusan</h3>
                    </div>
                    <div class="card-body">
                        @if(session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <form action="{{ url('/jurusan/' . $jurusan->id) }}" method="post">
                            @csrf
                            <input type="hidden" name="_method" value="PUT" class="form-control">
                            <div class="form-group">
                                <label for="">Jurusan</label>
                                <input type="text" name="jurusan" class="form-control" value="{{ $jurusan->jurusan }}" placeholder="Masukkan Jurusan" autofocus required>
                            </div>
                            <div class="form-group">
                                <label for="">Kapasitas</label>
                                <input type="number" name="kapasitas" class="form-control" value="{{ $jurusan->kapasitas }}" placeholder="Kapasitas Kelas">
                            </div>
                            <div class="form-group">
                                <label for="">Terisi</label>
                                <input type="number" name="terisi" class="form-control" value="{{ $jurusan->terisi }}" placeholder="Isi Kelas">
                            </div>
                            <div class="form-group">
                                <input type="reset">
                                <button class="btn btn-primary btn-md">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

apabila diklik edit akan menampilkan seperti ini

Silahkan edit dan klik update akan muncul

Delete

Pekerjaan hapus sudah dikerjakan pada file JurusanController.php dengan nama fungsi Destroy, jika tombol Hapus diklik akan muncul peringatan seperti ini

Jika Ok diklik data akan terhapus, jika Cancel di klik data tidak jadi terhapus.

Bonus

Untuk file show.blade.php yang dibuat di folder resources/views/jurusan sebenarnya adalah bagian dari Read data, buatnya copy paste saja dari file edit.blade.php dan modifikasi menjadi seperti ini

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-judul">Edit Data Jurusan</h3>
                    </div>
                    <div class="card-body">
                        @if(session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <form action="#" method="get">
                            @csrf
                            <div class="form-group">
                                <label for="">Jurusan</label>
                                <input type="text" name="jurusan" class="form-control" value="{{ $jurusan->jurusan }}" autofocus readonly>
                            </div>
                            <div class="form-group">
                                <label for="">Kapasitas</label>
                                <input type="number" name="kapasitas" class="form-control" value="{{ $jurusan->kapasitas }}" readonly>
                            </div>
                            <div class="form-group">
                                <label for="">Terisi</label>
                                <input type="number" name="terisi" class="form-control" value="{{ $jurusan->terisi }}" readonly>
                            </div>
                            <div class="form-group">
                                <a href="{{ url('/jurusan') }}" class="btn btn-primary btn-md ">Kembali</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Jika dijalankan hasilnya menjadi

Source Code

Sebagai perbandingan jika ada yang sedikit berbeda bisa cek dan ambil souce code yang sudah saya siapkan di github, silahkan download disini

Lalu ikuti petunjuk yang ada disana atau ikuti langkah-langkah sebagai berikut:

Membuat CRUD menggunakan Larave 6.0 studi kasus tabel Buku pada Perpustakaan

clone repository dengan perintah
$ git clone https://github.com/muhidin/crud-laravel.git

pilih folder project
$ cd crud-laravel

buat database melalui perintah mysql
$ mysql -uroot -p

pada prompt mysql berikan perintah membuat database dengan nama crud-laravel
mysql> create database crud-laravel;

selesai, kembali ke prompt dengan ctrl + D alias exit
mysql> exit;

edit file .env dan sesuaikan dengan database yang disiapkan

Update composer dengan perintah
$ composer update

jalankan migrate agar tabel terbentuk
$ php artisan migrate

jalankan serve laravel atau langsung buka browser
$ php artisan serve

Demikian semoga bermanfaat dan sama seru ngoprek.

Penutup

Selamat berpraktek, akan diilanjutkan untuk data Peserta Didik, nanti jika ada yang menanyakan. Terima kasih dan sukses selalu untuk kita semua. (ms)

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.