Skip to main content

[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 :
Illuminate\Database\QueryException  : 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 Illuminate\Support\Facades\Schema;
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:\Apache24\htdocs\dashboard\test01>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:\Apache24\htdocs\dashboard\test01>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 database\migrations\create_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:\Apache24\htdocs\dashboard\test01>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:\Apache24\htdocs\dashboard\test01>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:\Apache24\htdocs\dashboard\test01>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   | App\Http\Controllers\ProductController@index   | web          |
|        | POST      | products                | products.store   | App\Http\Controllers\ProductController@store   | web          |
|        | GET|HEAD  | products/create         | products.create  | App\Http\Controllers\ProductController@create  | web          |
|        | GET|HEAD  | products/{product}      | products.show    | App\Http\Controllers\ProductController@show    | web          |
|        | PUT|PATCH | products/{product}      | products.update  | App\Http\Controllers\ProductController@update  | web          |
|        | DELETE    | products/{product}      | products.destroy | App\Http\Controllers\ProductController@destroy | web          |
|        | GET|HEAD  | products/{product}/edit | products.edit    | App\Http\Controllers\ProductController@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 \Illuminate\Http\Response
     */
    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 App\Product;

Kita juga perlu menambahkan validasi di dalam method store.

// ProductController.php

/**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    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 \Illuminate\Http\Response
     */
    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 \Illuminate\Http\Response
     */
    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  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    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 \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $product = Product::find($id);
        $product->delete();
        return redirect('products')->with('success','Product has been  deleted');
    }

Selesai.

Comments

Popular posts from this blog

Twitter memposting keuntungan pertama meski ada masalah bot

Jaringan sosial lambat berkembang karena berkaitan dengan kekhawatiran akan jutaan akun palsu yang melakukan tweet dan retweet di seluruh platform.   Ada jutaan akun palsu yang melakukan tweet , retweet dan like ke sebagian besar akun terkenal di Twitter. Jadi apa yang akan dilakukan perusahaan tentang hal itu?   Masalahnya telah menggelegak di bawah permukaan di Twitter selama bertahun-tahun. Tapi itu dibawa ke permukaan oleh The New York Times, yang menemukan perusahaan yang menghasilkan uang dengan menggunakan bots - program komputer otomatis yang terkadang berperan sebagai orang sungguhan - untuk memperbanyak pengikut selebriti, eksekutif bisnis, dan bahkan anggota dewan Twitter sendiri sebenarnya punya. Twitter mulai membersihkan jutaan akun palsu untuk menanggapi hal ini. Sulit untuk mengatakan berapa banyak akun palsu di luar sana. Sebuah studi yang dirilis tahun lalu menemukan bahwa sebanyak 15 persen akun Twitter aktif dikendalikan oleh bot. Twitter menga...

Verizon mempertahankan peringkat jaringan nirkabel teratas

Untuk kesembilan kalinya berturut-turut, Verizon telah muncul di posisi teratas dalam uji coba seminua RootMetrics dari operator nirkabel utama di AS. Untuk kesembilan kalinya berturut-turut, jaringan nirkabel terbesar di negara tersebut telah menempati posisi teratas dalam keseluruhan kinerja jaringan, menurut firma pengujian independen RootMetrics. Dalam uji coba terakhirnya terhadap empat operator nirkabel utama, RootMetrics memberi peringkat Verizon keenam kategori untuk paruh kedua tahun 2017. Ketika sampai pada kinerja keseluruhan dalam kehandalan, kecepatan, koneksi data dan panggilan, Verizon berada di peringkat 1. AT & T berada di peringkat kedua secara keseluruhan, sementara Sprint menempati posisi ketiga dan T-Mobile berada di peringkat keempat. Verizon menyapu penghargaan tidak hanya di tingkat nasional, tapi juga di tingkat negara bagian dan metro. Di 125 kota terbesar di AS, dibutuhkan waktu hampir dua kali jumlah penghargaan pertama sebagai AT & T, ...
Pengertian Bootstrap, fungsi dan juga kelebihannya - Bootstrap adalah sebuah library framework CSS yang dibuat khusus untuk bagian pengembangan front-end website. Bootstrap juga merupakan salah satu framework HTML, CSS dan javascript yang paling populer di kalangan web developer yang digunakan untuk mengembangkan sebuah website yang responsive. Sehingga halaman website nantinya dapat menyesuaikan sesuai dengan ukuran monitor device (desktop, tablet, ponsel ) yang digunakan pengguna disaat mengakses website website dari browser. Pada mulanya bootstrap bernama "Twitter Blueprint" yang dikembankan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di alat internal. Dengan menggunakan Bootstrap seorang developer dapat dengan mudah dan cepat dalam membuat front-end sebuah website. Anda hanya perlu memanggil class-class yang diperlukan, misalnya membuat tombol, grid, tabel, navigasi dan lainnya. Bootsrap telah menyediakan kumpulan...