Category Archives: laravel

[Dokumentasi] Langkah-langkah membuat project Laravel (step by step)

Untuk menggunakan laravel, lebih mudah apabila menggunakan composer. Jika anda belum menginstall composer, silahkan download dari situs resminya : https://getcomposer.com

1. Jika composer sudah terinstall, buka console / terminal / command prompt.
Pilih direktori lokasi project laravel akan disimpan, dengan mengetikkan perintah :
cd namadirektori

Ketik perintah berikut :
composer create-project laravel/laravel –prefer-dist test01

Jika berhasil, maka akan menghasilkan project seperti berikut :

2. Setup database MySQL di dalam file .env.
Buat database di dalam DBMS MySQL dengan nama mydb, lalu buka file .env dan lakukan konfigurasi berikut sesuai dengan konfigurasi database yang anda miliki.
// .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=mydb
DB_USERNAME=root
DB_PASSWORD=123456

Sekarang, migrasikan dua tabel yang disediakan oleh Laravel 5.5. Buka kembali console / command prompt / terminal,
Masuk ke direktori project yang telah dibuat tadi, dengan mengetikkan perintah :
cd namadirektoriproject

ketik perintah berikut :
php artisan migrate

Jika terjadi error :
IlluminateDatabaseQueryException  : SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

maka, ubah file AppServiceProvider.php di dalam direktori app/Providers dan di dalam method boot, set panjang / length dari default string:

use IlluminateSupportFacadesSchema;
public function boot()
{
    Schema::defaultStringLength(191);
}
//source : https://laravel-news.com/laravel-5-4-key-too-long-error

drop table user dan migrate, jalankan kembali perintah :
php artisan migrate

Jika berhasil, akan tampil pesan berikut :
C:Apache24htdocsdashboardtest01>php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table

3. Buat model dan juga file migrasi untuk tabel baru, sebagai contoh table Product.

Pada console / command prompt / terminal, ketik perintah berikut :
php artisan make:model Product -m

C:Apache24htdocsdashboardtest01>php artisan make:model Product -m
Model created successfully.
Created Migration: 2018_02_09_014429_create_products_table

Hasil eksekusi perintah tersebut, akan menghasilkan 2 file
    model Product.php.
    file migrasi create_products_table.
  
Kita perlu membuat skema tabel product dengan menambahkan field-field yang akan kita butuhkan. Buka direktor databasemigrationscreate_products_table.

// create_products_table

public function up()
{
    Schema::create(‘products’, function (Blueprint $table) {
       $table->increments(‘id’);
       $table->string(‘name’);
       $table->integer(‘price’);
       $table->timestamps();
    });
}

Pada console / command prompt / terminal, ketik perintah berikut :
php artisan migrate

C:Apache24htdocsdashboardtest01>php artisan migrate
Migrating: 2018_02_09_014429_create_products_table
Migrated:  2018_02_09_014429_create_products_table

Cek database anda, tabel product berhasil ditambahkan

4. Membuat satu view file untuk menambahkan data form dalam database.
Buat 1 folder dengan nama products di direktori resources/views
Di dalam direktori resources/views/products, buat 1 file php dengan nama create.blade.php, buat script seperti contoh berikut :

<!– create.blade.php –>

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″>
    <title>Laravel 5.6 CRUD Tutorial With Example From Scratch </title>
    <link rel=”stylesheet” href=”{{asset(‘css/app.css’)}}”>
  </head>
  <body>
    <div class=”container”>
      <h2>Create A Product</h2><br  />
      <form method=”post”>
        <div class=”row”>
          <div class=”col-md-4″></div>
          <div class=”form-group col-md-4″>
            <label for=”name”>Name:</label>
            <input type=”text” class=”form-control” name=”name”>
          </div>
        </div>
        <div class=”row”>
          <div class=”col-md-4″></div>
            <div class=”form-group col-md-4″>
              <label for=”price”>Price:</label>
              <input type=”text” class=”form-control” name=”price”>
            </div>
          </div>
        </div>
        <div class=”row”>
          <div class=”col-md-4″></div>
          <div class=”form-group col-md-4″>
            <button type=”submit” class=”btn btn-success” style=”margin-left:38px”>Add Product</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

5. Membuat satu controller dan melakukan route untuk menampilkan form Product
Pada console / command prompt / terminal, ketik perintah berikut :
php artisan make:controller ProductController –resource

C:Apache24htdocsdashboardtest01>php artisan make:controller ProductController –resource
Controller created successfully.

Hasil eksekusi perintah tersebut akan menghasilkan 1 file controller dengan nama ProductController.php yang memiliki semua fungsi CRUD.

Sekarang kita akan melakukan konfigurasi routing pada file web.php di dalam direktori routes. Tambahkan code berikut :
// web.php

Route::resource(‘products’,’ProductController’);

Pada console / command prompt / terminal, ketik perintah berikut :
php artisan route:list

C:Apache24htdocsdashboardtest01>php artisan route:list
+——–+———–+————————-+——————+————————————————+————–+
| Domain | Method    | URI                     | Name             | Action                                         | Middleware   |
+——–+———–+————————-+——————+————————————————+————–+
|        | GET|HEAD  | /                       |                  | Closure                                        | web          |
|        | GET|HEAD  | api/user                |                  | Closure                                        | api,auth:api |
|        | GET|HEAD  | products                | products.index   | AppHttpControllersProductController@index   | web          |
|        | POST      | products                | products.store   | AppHttpControllersProductController@store   | web          |
|        | GET|HEAD  | products/create         | products.create  | AppHttpControllersProductController@create  | web          |
|        | GET|HEAD  | products/{product}      | products.show    | AppHttpControllersProductController@show    | web          |
|        | PUT|PATCH | products/{product}      | products.update  | AppHttpControllersProductController@update  | web          |
|        | DELETE    | products/{product}      | products.destroy | AppHttpControllersProductController@destroy | web          |
|        | GET|HEAD  | products/{product}/edit | products.edit    | AppHttpControllersProductController@edit    | web          |
+——–+———–+————————-+——————+————————————————+————–+

Langkah selanjutnya, buka file ProductController.php, dan tambahkan kode berikut pada method create()
// ProductController.php

  /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    public function create()
    {
        return view(‘products.create’);
    }

Pada console / command prompt / terminal, ketik perintah berikut :
php artisan serve

Buka browser dan ketik URL: http://localhost:8000/products/create

  
6. Menambahkan validasi Laravel 5.6 di dalam Form Product.
Pertama, kita harus menentukan action dari form yang kita buat. Buka form create.blade.php pada direktori products. tambahkan action pada tag form, dan token CSRF_FIELD di bawah tag form
<!– create.blade.php –>
<form method=”post” action=”{{url(‘products’)}}”>
{{csrf_field()}}

Apa Fungsi Dari CSRF_FIELD() Token Pada Insert Form ?
Sebenarnya Cross Site Request Forgery (CSRF) adalah adalah sebuah seraangan terhadap web aplication yang memanfaatkan bug atau vulnerability pada Web Application yang bekerja dengan cara mengeksploitasi suatu task dari sebuah Web dengan memanfaatkan Autentikasi yang dimiliki oleh korban.
Hal ini biasanya di karenakan kode yang sangat buruk sewaktu developmentya sehingga menghasilkan  bug tersebut yang dapat di salah gunakan oleh orang lain dengan maksud negatif.
Nah untuk menghindari hal ini terjadi Laravel mengimplementasikan CSRF pada form untuk mengamankan website kita.

Kemudian, buka file Product.php pada direktori app, kita akan menentukan field-field dari tabel product yang bisa dimodifikasi, tambahkan code protected $fillable di dalam class Product
// Product.php
protected $fillable = [‘name’,’price’];

Jika kita melihat pada routing resource maka terdapat post request memiliki routing ‘/products‘ dan fungsi store di dalam file ProductController.php. Jadi kita perlu menambahkan code pada fungsi store untuk menyimpan data ke dalam database.

Satu hal yang perlu diingat, kita perlu meng-include namespace model Product.php ke dalam file ProductController.php. Untuk itu, tambahkan code berikut pada baris awal di dalam file ProductController.php.

use AppProduct;

Kita juga perlu menambahkan validasi di dalam method store.

// ProductController.php

/**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        $product = $this->validate(request(), [
          ‘name’ => ‘required’,
          ‘price’ => ‘required|numeric’
        ]);
      
        Product::create($product);

        return back()->with(‘success’, ‘Product has been added’);;
    }

Jika validasi mengembalikan hasil fail / gagal maka kita perlu menampilkan pesan error. Jadi, pada file create.blade.php perlu ditambahkan beberapa baris code setelah tag h2.

<!– create.blade.php –>

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″>
    <title>Laravel 5.6 CRUD Tutorial With Example From Scratch </title>
    <link rel=”stylesheet” href=”{{asset(‘css/app.css’)}}”>
  </head>
  <body>
    <div class=”container”>
      <h2>Create A Product</h2><br  />
      @if ($errors->any())
      <div class=”alert alert-danger”>
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div><br />
      @endif
      @if (Session::has(‘success’))
      <div class=”alert alert-success”>
          <p>{{ Session::get(‘success’) }}</p>
      </div><br />
      @endif
      <form method=”post” action=”{{url(‘products’)}}”>
        {{csrf_field()}}
        <div class=”row”>
          <div class=”col-md-4″></div>
          <div class=”form-group col-md-4″>
            <label for=”name”>Name:</label>
            <input type=”text” class=”form-control” name=”name”>
          </div>
        </div>
        <div class=”row”>
          <div class=”col-md-4″></div>
            <div class=”form-group col-md-4″>
              <label for=”price”>Price:</label>
              <input type=”text” class=”form-control” name=”price”>
            </div>
          </div>
        </div>
        <div class=”row”>
          <div class=”col-md-4″></div>
          <div class=”form-group col-md-4″>
            <button type=”submit” class=”btn btn-success” style=”margin-left:38px”>Add Product</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

Coba buka di browser dan buka URL: http://localhost:8000/products/create

Jika kita klik submit tanpa memasukkan nilai apapun pada form, maka kita akan melihat pesan error.

If you fill all the values then, you will redirect to this page with the success message. So, here One thing must be noticed.

// ProductController.php

  public function store(Request $request)
  {
        $product = $this->validate(request(), [
          ‘name’ => ‘required’,
          ‘price’ => ‘required|numeric’
        ]);
        Product::create($product);
        return back()->with(‘success’, ‘Product has been added’);
  }

Pada Laravel 5.5 ke atas kita akan langsung mendapatkan hasil kembalian berupa nilai array dari funsi validasi dan menggunakannya untuk melakukan proses insert ke dalam database. Ini merupakan fitur baru pada Laravel

7. Membuat halaman index untuk menampilkan list products.

Pertama, kita akan mengirim data ke index.blade.php. Jadi, di dalam file ProductController.php, kita akan menulis kode untuk melakukan fetch data dan mengembalikan hasilnya ke view index.

// ProductController.php

  /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        $products = Product::all()->toArray();
        return view(‘products.index’, compact(‘products’));
    }

Di dalam direktori resources/views/products, buat 1 file blade dengan nama index.blade.php dan tambahkan kode berikut.

<!– index.blade.php –>

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″>
    <title>Index Page</title>
    <link rel=”stylesheet” href=”{{asset(‘css/app.css’)}}”>
  </head>
  <body>
    <div class=”container”>
    <br />
    @if (Session::has(‘success’))
      <div class=”alert alert-success”>
        <p>{{ Session::get(‘success’) }}</p>
      </div><br />
     @endif
    <table class=”table table-striped”>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th>
        <th colspan=”2″>Action</th>
      </tr>
    </thead>
    <tbody>
      @foreach($products as $product)
      <tr>
        <td>{{$product[‘id’]}}</td>
        <td>{{$product[‘name’]}}</td>
        <td>{{$product[‘price’]}}</td>
        <td><a href=”{{action(‘ProductController@edit’, $product[‘id’])}}” class=”btn btn-warning”>Edit</a></td>
        <td>
          <form action=”{{action(‘ProductController@destroy’, $product[‘id’])}}” method=”post”>
            {{csrf_field()}}
            <input name=”_method” type=”hidden” value=”DELETE”>
            <button class=”btn btn-danger” type=”submit”>Delete</button>
          </form>
        </td>
      </tr>
      @endforeach
    </tbody>
  </table>
  </div>
  </body>
</html>

Coba buka browser dan ketik URL: http://localhost:8000/products

8. Membuat view edit untuk merubah product.

Langkah selanjutnya menambahkan fungsi edit di dalam file ProductController.php dengan menambahkan code berikut.

// ProductController.php

  /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function edit($id)
    {
        $product = Product::find($id);
        return view(‘products.edit’,compact(‘product’,’id’));
    }

Buat 1 file dengan nama edit.blade.php di dalam direktori resources/views/products, dengan script berikut

<!– edit.blade.php –>

<!DOCTYPE html>
<html>
  <head>
    <meta charset=”utf-8″>
    <title>Laravel 5.5 CRUD Tutorial With Example From Scratch </title>
    <link rel=”stylesheet” href=”{{asset(‘css/app.css’)}}”>
  </head>
  <body>
    <div class=”container”>
      <h2>Edit A Product</h2><br  />
      @if ($errors->any())
      <div class=”alert alert-danger”>
          <ul>
              @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
              @endforeach
          </ul>
      </div><br />
      @endif
      <form method=”post” action=”{{action(‘ProductController@update’, $id)}}”>
        {{csrf_field()}}
        <input name=”_method” type=”hidden” value=”PATCH”>
        <div class=”row”>
          <div class=”col-md-4″></div>
          <div class=”form-group col-md-4″>
            <label for=”name”>Name:</label>
            <input type=”text” class=”form-control” name=”name” value=”{{$product->name}}”>
          </div>
        </div>
        <div class=”row”>
          <div class=”col-md-4″></div>
            <div class=”form-group col-md-4″>
              <label for=”price”>Price:</label>
              <input type=”text” class=”form-control” name=”price” value=”{{$product->price}}”>
            </div>
          </div>
        </div>
        <div class=”row”>
          <div class=”col-md-4″></div>
          <div class=”form-group col-md-4″>
            <button type=”submit” class=”btn btn-success” style=”margin-left:38px”>Update Product</button>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

Berikutnya menambahkan kode untuk fungsi update.

// ProductController.php

  /**
     * Update the specified resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function update(Request $request, $id)
    {
        $product = Product::find($id);
        $this->validate(request(), [
          ‘name’ => ‘required’,
          ‘price’ => ‘required|numeric’
        ]);
        $product->name = $request->get(‘name’);
        $product->price = $request->get(‘price’);
        $product->save();
        return redirect(‘products’)->with(‘success’,’Product has been updated’);
    }

9. Membuat fungsi Delete product.

// ProductController.php

  /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function destroy($id)
    {
        $product = Product::find($id);
        $product->delete();
        return redirect(‘products’)->with(‘success’,’Product has been  deleted’);
    }

Selesai.