LARAVEL-crud

 

Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part II

 06 MAY, 2016

 LARAVEL

 HIRZI WIDYAN PUTRA

Tutorial ini adalah lanjutan sebelumnya, masih membahas mengenai CRUD karena sebelumnya kita baru menampilkan data, sekarang kita selesaikan Update, Delete dan Add data nya,

Langsung saja kita ke CrudController pada metode create, ikuti script nya seperti ini :

return view('add');

Buat route nya di routes.php :

Route::get('/add', 'CrudController@create');

Lalu buat view baru sesuai di metode create tadi dengan nama add.blade.php, Simpan view nya di resources/views lalu isi nya gini :

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial CRUD Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
  <form action="{{ url('store') }}" method="POST">
  {!! csrf_field() !!}
    <div class="row">
          <div class="input-field col s12">
            <input type="text" class="validate" name="judul">
            <label for="title">Judul</label>
          </div>
    </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea" name="isi"></textarea>
          <label for="textarea1">Isi</label>
        </div>
      </div>
      <button type="submit" class="btn btn-flat pink accent-3 waves-effect waves-light white-text right">Submit <i class="material-icons right">send</i></button>
  </form>
</div>

@endsection

Ingat ya di tag input nya ditambahkan name=”judul” maupun di tag textarea ditambahkan name=”isi”, kalo ga diisi / salah name nya, data ga akan masuk sob, pada tag form juga pastikan ditambahkan method=”POST”, action nya nanti adalah url tujuan kita untuk memproses tambah data.

Ket :

• {!! csrf_field() !!} mengamankan form inputan kita, jangan sampe ketinggalan sob

Jika sudah kita ke show.blade.php, paling bawah pada class fixed-action-btn di bagian tag link, tambahkan route add kita tadi jadi nya :

Sekarang kita coba klik ini :

Akan mengarahkan ke view add kita tadi. Hasil view nya seperti ini :

Udah tampil tapi belum bisa masukin data nya ke database, kok bisa? Kan kita belum buat proses sama route store nya :v yaudah kita ke route dulu buat route nya gini :

Route::post('/store', 'CrudController@store');

Route nya menggunakan post ya bukan get, karena kita mau ngirim data bukan ngedapetin data. Jika sudah, kita ke CrudController.php lagi, pada metode store yang teliti ya harus seperti ini :

$this->validate($request, [
      'judul' => 'required',
      'isi' => 'required'
]);

     $tambah = new Crud();
     $tambah->judul = $request['judul'];
     $tambah->isi = $request['isi'];
     $tambah->save();

     return redirect()->to('/');

Ket :

• $tambah = new Crud(); artinya kita mau buat row baru dari model Crud dan variable tambah sebagai parameter nya.
• $tambah->judul , artinya ' table Crud kolom judul ' ini sesuaikan penulisan dengan yg ada di kolom database kita
• $request['judul']; kita request dengan name judul sesuai dengan name form di tag input kita tadi
• $tambah->save(); proses save ke database, jadi kita ga perlu lagi insert into blabla :v
• return redirect()->to('/); jika sudah menjalankan perintah diatas nya, dia akan redirect ke route index.

Sudah lagi sob? Apa masih ketinggalan? :v kalo udah tinggal kembali ke browser, refresh buka url add, lalu coba isi dan klik submit.

Hasilnya ……

Yap, Data pastinya berhasil masuk (karena sebelum saya publish, saya coba biar kalo ada error saya benerin dulu :v) , okedeh kita ke show.blade.php lagi, di bagian tag link readmore tambahkan link read gini :

<a href="{{ url('read', $data->id) }}" class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></a>

Ket :

• {{ url('read', $data->id) }} artinya kita akan ke url read dengan id contoh : http://localhost:8000/read/1 , 1 itu adalah ID nya data itu.

Tambah lagi route nya :

Route::get('/read/{id}', 'CrudController@show');

Pada CrudController metode show sudah terdapat variable $id, dan di route tadi juga ada {id}, emang kenapa? Ya karena kita mau nampilin data nya berdasarkan id yang kita pilih, lanjut ke metode show ini isi nya ikuti :

public function show($id)
    {
        $tampilkan = Crud::find($id);
        return view('tampil')->with('tampilkan', $tampilkan);
    }

Ket :

• Crud::find($id); artinya sama dengan select * from crud where id = $id, tapi dengan laravel lagi – lagi sangat singkat cukup menggunakan Find :v tapi setau saya ini hanya untuk ID kalo mau menampilkan berdasarkan kategori misal nya menggunakan Crud::where('kategori', 'Laravel')->first();

Sekarang buat lagi view nya simpan di resources/views dengan nama tampil.blade.php :

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial CRUD Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
	
	<div class="row">
		<div class="col s12">
			<h5>{{ $tampilkan->judul }}</h5>

            <div class="divider"></div>
            <p>{!! $tampilkan->isi !!}</p>
                
		</div>
	</div>

</div>

@endsection

Jika sudah lagi, coba di klik deh readmore nya mau nampilin yang mana, hasil nya :

Bisa dilihat pada url, kita nampilin data dengan id 1.

Ohya, kita sekalian aja nampilin dengan paging, caranya? Coba kita kurangi dulu batas paging nya di metode index pada CrudController, jadi 3 aja :

Lalu ke show.blade.php , taroh ini paling bawah sebelum @endsection :

{{ $datas->render() }}

Note : Variable yang di akan render sebagai paging , variable sebelum di foreach ya $datas bukan $data.

Hasil :

Kalo paging nya belum muncul? Berarti…. Data nya kurang dari 3, karena di controller tadi di set buat paging per 3 data jadi setelah data ke 4 paging nya akan muncul, misal sobat setting paging nya untuk 300 data ya buat aja dulu data nya sampe 301 data baru deh muncul paging nya :v

Sekarang apalagi? Edit data atau delete data dulu? Edit dulu aja deh,

Buat lagi route nya, kita langsung buat 2 route ya, 1 route untuk menampilkan data yg mau di edit ke form, lalu 1 nya untuk proses update nya sama seperti tambah tadi.

Route nya gini :

Route::get('/edit/{id}', 'CrudController@edit');
Route::post('/update/{id}', 'CrudController@update');

Semua nya menggunakan variable id, kenapa? Ya karena yang mau kita edit kan berdasarkan id, masa iya kita edit data A tapi data B C D ikut berubah.

Selanjutnya ke metode edit dan update, di CrudController, pada metode edit :

public function edit($id)
    {
        $tampiledit = Crud::where('id', $id)->first();
        return view('edit')->with('tampiledit', $tampiledit);
    }

Dan pada metode update :

public function update(Request $request, $id)
    {
        $update = Crud::where('id', $id)->first();
        $update->judul = $request['judul'];
        $update->isi = $request['isi'];
        $update->update();

        return redirect()->to('/');
    }

Buat baru edit.blade.php copy saja isi nya dari add.blade.php tapi pada form action nya dirubah pada tag input nya juga ditambahkan value, contoh nya seperti ini :

@extends('layouts.index')
@section('content')

<div class="section">
	<div class="card-panel purple darken-3 white-text">Tutorial CRUD Laravel 5.2 dengan Materializecss</div>
</div>

<div class="section">
  <form action="{{ url('update', $tampiledit->id) }}" method="POST">
    {!! csrf_field() !!}
    <div class="row">
          <div class="input-field col s12">
            <input type="text" class="validate" name="judul" value="{{ $tampiledit->judul }}">
            <label for="title">Judul</label>
          </div>
    </div>
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea" name="isi">{{ $tampiledit->isi }}</textarea>
          <label for="textarea1">Isi</label>
        </div>
      </div>
      <button type="submit" class="btn btn-flat pink accent-3 waves-effect waves-light white-text right">Submit <i class="material-icons right">send</i></button>
  </form>
</div>

@endsection

Simpan di tempat biasa.

Ket :

• {{ url('update', $tampiledit->id) }} artinya kita mau update data dengan id yang ditampilkan disitu, dapet id nya dari mana? Ya dari kita klik button edit tadi, kan semua data tadi memiliki id
• Lalu variable $tampiledit bisa nampilin data dari mana? Dari controller edit, kan sudah kita deklarasikan disitu, $tampiledit = crud::where blabla, artinya dia menampilkan data dari data yang sudah kita pilih.
• value="{{ $tampiledit->judul }}" agar text field kita saat terbuka langsung terisi data dari database. Kalau textarea kita cukup meletakkan di tengah-tengah antara tag buka dan tag tutup textarea seperti di script saya itu.

Kembali ke show.blade.php, pada link edit, tambahkan link edit seperti ini :

<a href="{{ url('edit', $data->id) }}" class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></a> 

Ket :

• Kayaknya tidak ada yang perlu dijelaskan disini :v

Coba klik data mana yang mau di edit? Saya mau edit data yang ke 4, hasil nya setelah saya klik :

Yap, langsung terisi sesuai dengan yang saya jelaskan tadi, setelah itu isi deh mau diganti apa aja :

Hasilnyaa…..

Okay, berhasil deh kita Create, Update, Read, Paging, Nyingkat data, tinggal Delete deh :v

Pada routes.php tambahin lagi route delete nya gini :

Route::get('/delete/{id}', 'CrudController@destroy');

Proses delete nya pada metode destroy :

public function destroy($id)
    {
        $hapus = Crud::find($id);
        $hapus->delete();

        return redirect()->to('/');
    }

Lalu di show.blade.php link delete nya :

<a href="{{ url('delete', $data->id) }}" onclick="return confirm('Yakin mau hapus data ini sob?')" class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></a>

Ket :

• Return confirm pada link delete fungsinya untuk memberikan alert kalo kita yakin / tidak mau delete data nya. Kan gawat kalo kita engga pake alert tiba – tiba ga sengaja ke klik link delete nya :v

Hasilnya setelah saya delete tersisa 1 data :

Artinya kita berhasil sudah CRUD + Materializecss + Paging + Nyingkat data + dll, salah kata, coding, maupun lainnya , saya minta maaf ya sob. Semoga tutorial saya bermanfaat, khusus nya buat yang baru belajar.

Ohya untuk yang mau download bisa didownload di :

Download

Pantau teruus, share dan terimakasih.

Nantikan tutorial lainnya sobat gilacoding.

 

Kunjungi juga : @banua.informatika