Read     Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part I

Tutorial CRUD Sederhana Laravel 5.2 dengan Materializecss Part I

Mumpung hari libur, jadi saya bisa nulis tutorial lagi nih :D Yap saya sekarang mau membahas tutorial CRUD Sederhana Laravel dengan Framework CSS Materialize css, kenapa ga dengan Bootstrap? Udah bosen sob :v sekalian ngenalin kalo Framework yang bagus ga cuman Bootstrap tapi banyak, misalnya Semantic UI, Materialize, dll

Ooiya, untuk instalasi Laravel nya saya skip saja karena sudah pernah saya bahas di tutor sebelum-sebelumnya buat yang belum tau bisa di cari post nya, dan sekarang kembali ke project.

Karena saya menggunakan css materialize jadi sobat bisa download dulu css nya disini, jika sobat tidak menggunakan materialize bisa saja di skip, dan silahkan menggunakan css yg lainnya. Pertama – tama ini adalah folder dari materialize yang saya download :

File laravel 5 materialize crud

Silahkan di copy paste semua folder nya ke dalam Project Laravel di folder Public, ingat ya didalam folder Public nya Laravel, hasil setelah di paste :

laravel sederhana crud

Buat Controller nya dengan nama CrudController.php, buat nya bisa manual atau lebih baik menggunakan artisan, belum tau artisan apa? Ayo jangan malas membaca, sudah saya jelaskan kok :v

Pastekan command line ini ke cmd nya :

php artisan make:controller CrudController --resource

Jika sudah, kita buka controller nya di app/Https/Controllers, buka CrudController.php nya, kita ke method index, untuk memanggil view kita :

return view('show');

Lalu buat routes.php nya, hapus route welcome ganti dengan route ini :

Route::get('/', 'CrudController@index');

Setelah itu kita coba buat desain nya dulu / view nya dengan ekstensi blade.php pastinya, silahkan sobat copy paste saja hasil yg sudah saya buat, ohiya naroh view nya di dalam folder resources/views ya, tapi sebelum saya buat, saya akan membagi view nya view utama, view untuk header dan view content blade templating, sudah saya jelaskan juga kok di post sebelumnya :v

Silahkan sobat ke folder resources/views dan buat folder baru dengan nama layouts, dan buat view nama nya index.blade.php, isi nya :

<!DOCTYPE html>
<html>
<head>
	<title>Gilacoding | CRUD Laravel 5.2 dengan Materializecss</title>
	<link rel="stylesheet" href="{{asset('css/materialize.min.css')}}">
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	@section('css')

    @show
</head>
<body>
@section('header')
    @include('layouts.header')
@show

<div class="container">
	@yield('content')
</div>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="{{asset('js/materialize.min.js')}}"></script>
<script type="text/javascript">
	(function($){
  $(function(){

    $('.button-collapse').sideNav();

  }); // end of document ready
})(jQuery); // end of jQuery name space
</script>
</body>
</html>

Untuk memanggil file css / js kita menggunakan {{ asset(‘dir/filenya/disini.css’) }} letakkan di dalam href nya.

Lalu header.blade.php buat di folder resources/views/layouts :

<nav class="pink accent-3" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Gilacoding</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="{{ url('/')}}">Home</a></li>
      </ul>

      <ul id="nav-mobile" class="side-nav">
        <li><a href="{{ url('/')}}">Home</a></li>
      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
  </nav>

Dan buat juga show.blade.php buat nya di folder resources/views aja :

@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>Judul nya disini</h5>

            <div class="divider"></div>
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,</p>
                
            <button class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></button>
            <button class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></button>
            <button class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></button>
		</div>
	</div>

	<div class="row">
		<div class="col s12">
			<h5>Judul nya disini</h5>

            <div class="divider"></div>
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,</p>
                
            <button class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></button>
            <button class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></button>
            <button class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></button>
		</div>
	</div>
	<div class="row">
		<div class="col s12">
			<h5>Judul nya disini</h5>

            <div class="divider"></div>
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,</p>
                
            <button class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></button>
            <button class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></button>
            <button class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></button>
		</div>
	</div>

</div>


<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">add</i>
    </a>
  </div>


@endsection

Okedeh sekarang coba di jalankan dulu sob,  hasil view yang kita buat seperti ini :

Laravel 5.2 with materializecss

Note : PASTIKAN TERKONEKSI DENGAN INTERNET YAA, karena Jquery dan Icon nya saya import dari luar sob.

Kita baru buat routing, view, dan controller nya sekarang kita lanjut ke database nya, buat dulu database nya dengan nama belajar-crud, dan setting koneksi nya di .env  jangan di .env.example ya setting seperti ini :

setting koneksi laravel 5.2

DB_PASSWORD saya kosongi karena database saya tidak menggunakan password, lanjut deh kita buat table nya dengan migration ya, hmm bisa aja sih langsung bikin di phpmyadmin table nya, jika sobat langsung buat nya di phpmyadmin, bisa di skip saja sob.

Note : Setelah setting .env, php artisan nya harus di restart. (wajibb!)

Kita mau buat table dengan nama crud, paste commandline ke cmd nya ya :

php artisan make:migration create_crud_table --create=crud

Lalu ke database/migrations, terdapat juga migration create_user dan create_password, hapus saja sob sisakan create_crud yang kita buat tadi, buka create_crud nya kita mau buat kolom table nya, dan paste di method up :

Schema::create('crud', function (Blueprint $table) {
            $table->increments('id');
            $table->string('judul');
            $table->text('isi');
});

Hasil :

laravel crud belajar dasar

Jika sudah dibuat migration nya, kita akan migrate atau push ke database kita table nya tadi dan pastikan sudah dihapus migration lainnya selain create_crud tadi ya, paste di cmd :

php artisan migrate

Hasil setelah di jalankan perintah cmd nya :

cmd laravel

Untuk memastikan table nya sudah masuk atau belum, kita cek dulu, di saya sih udah masuk.

laravel crud

Karena udah masuk kita langsung buat lagi model nya table crud. Caranya?

Paste lagi di command line nya :

php artisan make:model Crud

Kalo buat model nya berhasil, akan keluar command line Model created successfully.

Selanjutnya buka App/Crud.php, ikuti seperti ini :

laravel 5 crud dasar

Ket :

  • protected $table = 'crud'; adalah nama table nya
  • protected $primaryKey = 'id'; primary key dari table crud
  • protected $fillable = ['judul', 'isi']; isi kolom dari table crud
  • public $timestamps = false; ini di false kan jika sobat tidak menggunakan created_at dan updated_at otomatis.

Kita coba menampilkan data nya dulu dari database, karena kita belum buat add edit delete datanya jadi kita isi manual dulu di database nya ya contoh :

tampil data laravel

Sekarang kita sudah punya 1 data :

phpmyadmin laravel

Kita coba tampilkan data kita di show.blade.php, caranya kita ke CrudController dulu sob ke method index, ikuti script nya seperti ini :

laravel read

Setelah itu jangan lupa panggil model Crud nya dengan Use App\Crud; di paling atas ya dibawah namespace.

Ket :

  • Crud:: adalah Model yg kita buat tadi
  • orderBy('id', 'DESC') untuk mengurutkan tampilan nya berdasarkan id
  • paginate(14); kita akan menampilkan 14 data dan setelah itu akan otomatis membuat PAGING, yap dengan Laravel kita sangat mudah untuk membuat Paging nya sob

Kembali ke show.blade.php, kita mau menampilkan data nya dari database, class row yang kita ulang tadi dihapus saja sisakan 1 jadi nya script keseluruhan show.blade.php 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">
	@foreach($datas as $data)

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

            <div class="divider"></div>
            <p>{!!substr($data->isi,0,200)!!}...</p>
                
            <a class="btn btn-flat pink accent-3 waves-effect waves-light white-text">Readmore <i class="material-icons right">send</i></a>
            <a class="btn btn-flat purple darken-4 waves-effect waves-light white-text">Edit <i class="material-icons right">mode_edit</i></a>
            <a class="btn btn-flat red darken-4 waves-effect waves-light white-text">Delete <i class="material-icons right">delete</i></a>
		</div>
	</div>
	@endforeach

</div>


<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">add</i>
    </a>
  </div>


@endsection

Ket :

  • disitu terdapat foreach,fungsi nya buat ngelooping data dari database, ingat tutup @endforeach nya dibawah tutup div class row ya,
  • {!!substr($data->isi,0,200)!!} ini fungsi nya untuk meringkas data nya misalkan melebhi 200 huruf.

Hasilnya :

LARAVEL 5.2 CRUD MATERIALIZEcss

Tutorial kali ini sampai disini dulu, ntar Part berikut nya melanjutkan tentang ini lagi , saya mau Jum'atan dulu. mohon maaf jika terdapat kesalahan kata dan coding.

Ohiya, tutor kali ini mungkin banyak yang saya ringkas atau skip misal instalasi dan memanggil laravel, dll, karena sudah saya bahas sebelumnya jadi sobat bisa cari di previous post ya.

Jangan lupa untuk dipantau terus ya sob

Terimakasih

Top