Tutorial Laravel 6.x : Membuat CRUD Input Data Dengan Laravel

0
201
Advertisement

Pada tutorial sebelumnya kita berhasil membuat CRUD menampilkan data dari database dengan Laravel, maka kali ini tutorial Laravel 6x akan membahas membuat CRUD input data dengan Laravel.

- Advertisement -

Disini kita masih bermain-main dengan database dan table “kontaks” yang telah berhasil kita buat pada kasus sebelumnya. Dan berikut ini adalah langkah-langkahnya.

Menambahkan Tombol Tambah Pada File View
Untuk menginput data ke database MySQL dengan Laravel tidaklah terlalu sulit. Kebetulan pada tutorial sebelumnya kita telah berhasil membuat file controller pada folder “app/Http/Controllers/KontakController.php” dan kita telah membuat satu file view pada folder “respurces/views/kontak/index.blade.php”.

Nah, sekarang buka file index.blade.php pada folder “respurces/views/kontak/index.blade.php”, dan selanjutnya kita edit dan tambahkan kode sehingga isi dari file “respurces/views/kontak/index.blade.php” menjadi seperti berikut:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Daftar Kontak</div>
                @if($message = Session::get('status'))
                <div class="alert alert-success alert-dismissable">
                    <button aria-hidden="true" data-dismiss="alert" class="close" type="button">√ó</button>
                    <p>{{$message}}</p>
                </div>
                @endif
                <div class="card-body">
                    <a href="{{route('kontak.create')}}" class="btn btn-sm btn-success">Tambah</a>
                    <table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
					<thead>
                        <tr>
                            <th>No</th>
                            <th>Nama Lengkap</th>
                            <th>Email</th>
                            <th>Pekerjaan</th>
                            <th>Alamat</th>
                            <th>Aksi</th>
                        </tr>
					</thead>
					<tbody>  
                        <?php
                        $no=1;
                        ?>                  
                        @foreach($kontak as $row)
                        <tr>
                            <td>{{$no++}}</td>
                            <td>{{$row->nama_lengkap}}</td>
                            <td>{{$row->email}}</td>
                            <td>{{$row->pekerjaan}}</td>
                            <td>{{$row->alamat}}</td>
                            <td>
                                <a href="{{route('kontak.edit',$row->id)}}" class="btn btn-sm btn-success">Edit</a>
                                <form action="{{route('kontak.destroy',$row->id)}}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger">Hapus</button>
                                </form>                                
                            </td>
                        </tr>
                        @endforeach
					</tbody>
                </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Perhatikan pada file index.blade.php diatas, kita telah menambahkan sebuah tombol “Tambah”, serta melakukan beberapa perubahan pada tombol “Edit” dan tombol “Hapus”. Tombol tambah nantinya berguna untuk menampilkan form input data pada Laravel, tombol edit untuk melakukan edit data, sedangkan tombol hapus untuk menghapus data.

Dan mari kita coba jalankan project Laravel kita dengan perintah artisan berikut

php artisan serve

Kemudian buka web browser dan akses url berikut:

localhost:8000/kontak

Jika berjalan dengan baik maka akan ditampilkan halaman seperti berikut:

Tombol pada view Laravel

Menambahkan Method Create Pada Controller
Kemudian kita buka file controller pada folder “app/Http/Controllers/KontakController.php”, dan kita tambahkan potongan kode pada method create() seperti berikut.

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

Kode pada method create tersebut mengarahkan kita untuk membuka file view create.index.php pada folder “respurces/views/kontak/create.blade.php”. Nah selanjutnya kita buatkan file “create.blade.php” nya.

Membuat File View Tambah Data
Langkah selanjutnya adalah kita buatkan file view nya, yaitu create.blade.php pada folder “respurces/views/kontak/create.blade.php”.

Teman-teman buka jendela Terimanal/Command Proompt, kemudian gunakan perintah change directory (cd) dan arahkan project kerja ke folder “resources/views/kontak”, kemudian kita buatkan file view “create.blade.php” dengan perintah berikut:

touch create.blade.php

Kemudian, kita buka file view yang telah kita buat dan tambahkan kode, sehinga menjadi seperti berikut:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Tambah Data</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('kontak.store') }}">
                        @csrf

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">Nama Lengkap</label>

                            <div class="col-md-6">
                                <input id="nama_lengkap" type="text" class="form-control @error('nama_lengkap') is-invalid @enderror" name="nama_lengkap" value="{{ old('nama_lengkap') }}" required autocomplete="nama_lengkap" autofocus>

                                @error('nama_lengkap')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">E-Mail</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">Pekerjaan</label>

                            <div class="col-md-6">
                                <input id="pekerjaan" type="text" class="form-control @error('pekerjaan') is-invalid @enderror" name="pekerjaan" value="{{ old('pekerjaan') }}" required autocomplete="pekerjaan" autofocus>

                                @error('pekerjaan')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">Alamat</label>

                            <div class="col-md-6">
                                <textarea id="alamat" class="form-control @error('alamat') is-invalid @enderror" name="alamat" value="{{ old('alamat') }}" required autocomplete="alamat" autofocus></textarea>

                                @error('alamat')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>                

                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Simpan') }}
                                </button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Dan mari kita coba apa yang sudah kita buat, sekarang jalankan project laravel dengan perintah artisan berikut:

php artisan serve

Dan kita coba akses tombol Tambah, jika berjalan dengan baik maka akan ditampilkan form input data seperti berikut.

Form input data Laravel

Kemudian, perlu diperhatikan pada form tersebut kita mengarahkan action form nya menuju route(‘kontak.store’), sehingga kita perlu menambahkan method store() pada file controller “KontakController.php”.

Menambahkan Method Store Pada Controller
Mari kita buka kembali file controller “KontakController.php” pada folder “app/Http/Controllers/KontakController.php”, dan kita tambahkan beberapa potong kode pada method store() seperti berikut:

    public function store(Request $request)
    {
        //pertama cek validasi
        $this->validate($request,[
            'nama_lengkap'  => 'required',
            'email'         => 'required',
            'pekerjaan'     => 'required',
            'alamat'        => 'required'
        ]);

        //selanjutnya insert ke database
        DB::table('kontaks')->insert([
            'nama_lengkap'  => $request->nama_lengkap,
            'email'         => $request->email,
            'pekerjaan'     => $request->pekerjaan,
            'alamat'        => $request->alamat
        ]);

        //setelah berhasil insert di redirect
        return redirect('/kontak')->with('status','Data Kontak Berhasil Ditambahkan');
    }

Nah, sampai disini tahapan pembuatan CRUD Input Data Dengan Laravel sudah selesai, teman-teman bisa mencoba menambahkan satu record data seperti berikut:

form input data Laravel

Jika berjalan dengan baik maka record akan terinput kedatabase seperti berikut.

Data berhasil diinputkan laravel
Data berhasil diinputkan Laravel

Akhirnya tutorial Laravel 6.x membuat CRUD input data dengan Laravel selesai sampai disini. Semoga tutorial kali ini dapat membantu dan memberi manfaat. Pada tutorial selanjutnya akan kita bahas bagaimana membuat CRUD dengan Laravel dengan pembahasan edit dan update data ke database dengan Laravel. Terimakasih…

Selesai.

Advertisement
Previous articleTutorial Laravel 6.x : Seeding Database Dan Faker Pada Laravel
Next articleTutorial Laravel 6x : Membuat CRUD Edit dan Update Data Di Laravel
Tech News, Gadgets, Tutorial, IT Solution, Web Developer