MyLife MyWorld MyFreedom: Laravel 5.2 CRUD Sederhana : Bagian 1

Pada kesempatan kali ini kita akan membuat CRUD sederhana menggunakan laravel 5.2. Bagi kalian yang belum tahu laravel itu apa atau tidak mengerti bagaimana caranya menginstal laravel, kalian bisa mengunjungi postinganku mengenai instalasi laravel.

Hal yang perlu kalian siapkan adalah :

-- Laravel 5.2

-- Bootstrap 3
-- Jquery

Oke, mari kita mulai.

Tahap pertama
Disini kita akan mempersiapkan asset-asset dan struktur folder view yang akan kita butuhkan.

- Resources
--- views
----- students
------- index.blade.php
------- add.blade.php
------- edit.blade.php
------- delete.blade.php
----- templates
------- partials
--------- alerts.blade.php
--------- navbar.blade.php
------- default.blade.php
----- home.blade.php

File pertama yang akan kita buat adalah default.blade.php. Kita pasang dulu asset dari bootstrap, untuk memasangnya ada dua cara yang pertama lewat cdn dan yang kedua kita bisa mendownloadnya langsung di website reminya bootstrap. Bagaimana caranya memasang boostrap di laravel? Untuk kalian yang belum tahu silahkan kunjungi postinganku "Pengenalan Bootstrap untuk pemula".

Oke, kita lanjutkan ke file default.blade.php. Mari kita lihat dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CRUD</title>
    

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    @include('templates.partials.navbar')
    <div class="container">
        @yield('content')
    </div>
</body>
</html>

Bisa kita lihat diatas bahwa asset dari bootstrap saya panggil dengan cara lewat CDN. Dibagian body pada baris pertama saya ingin memanggil file navbar.blade.php dengan cara blade style. Baris kedua ada tag div dengan class container, class tersebut adalah bagian dari bootstrap dan untuk bagian @yield('content') disini adalah tempat dimana untuk menampung isi dari view-view utama yang akan kita butuhkan.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

File navbar.blade.php diatas kita biarkan dulu seperti itu, kita akan proses file tersebut nanti dibagian kedua dari postingan ini.

File terakhir yang kita butuhkan adalah home.blade.php. Kita tidak perlu membuat file baru untuk mendapatkannya, kita nantinya akan rename file welcome.blade.php yang ada di folder views, untuk sementara jangan direname biarkan saja dahulu. Kalian hanya merubah isi filenya dengan code dibawah ini.

@extends('templates.default')
@section('content')
    <h1>Hooray!!! Kita berhasil!!!</h1>
@stop

Apabila sudah selesai diubah, silahkan kalian coba dibrowser kesayangan dengan alamat seperti dibawah ini, project folder yang saya buat diberi nama crud.

http://localhost/crud/public

Tampilan diatas adalah hasil dari yang sudah kita buat, kalau masih belum berhasil silahkan dibaca lagi dari awal atau kalian tanyakan dibagian comment. Terimakasih.