Cara Membuat Halaman Web Pertama Menggunakan Laravel 5

Bagi para developer web mungkin sudah mengetahui cukup banyak framework PHP yang ada saat ini seperti CodeIgniter yang ringan dan mudah dipelajari hingga Zend Framework yang lebih kompleks dan enterprise. Nah, selain framework PHP tersebut, ada satu framework lain yang menarik untuk disimak yaitu Laravel.
Laravel dibangun oleh Taylor Otwell pada tanggal 22 Pebruari 2012 lalu. Framework ini merupakan framework PHP open source dengan desain MVC (Model-View-Controller) yang digunakan untuk membangun sebuah aplikasi situs web.
Di artikel ini saya akan menjelaskan sedikit tentang Laravel, dari mulai cara menginstal Laravel sampai membuat halaman pertama menggunakan framework ini. Alasan mengapa saya menulis artikel tentang Laravel, selain lagi ramai dikalangan developer web, Laravel juga merupakan framework PHP yang membuat kodingan menjadi lebih singkat, mudah dimengerti, dan ekspressif sehingga hanya dengan membaca sekilas dari kode yang ditulis kita sudah bisa menduga apa maksudnya tanpa perlu melihat dokumentasi.
Sebelum mulai menginstal framework Laravel, pastikan di komputer anda sudah terinstal aplikasi semacam WampServer atau SecureWamp. Pada komputer saya untuk artikel ini menggunakan sistem operasi Windows 10 dan aplikasi XAMPP.
Ada beberapa cara sebetulnya untuk menginstal Laravel, namun pada tulisan ini kita akan menginstal Laravel menggunakan metode Composer yaitu dengan menggunakan perintah composer create-project. Metode ini sangat direkomendasikan karena Composer akan mengurus segala ketergantungan Laravel dengan library lainnya. Dengan kata lain, kita tidak perlu mengunduh satu persatu library yang dibutuhkan.

Instal Composer

Bagi pengguna Windows bisa langsung mengunduh Composer Installer. Buka aplikasi yang sudah diunduh kemudian lakukan proses instalasi sampai selesai. Pada proses instalasi Composer akan muncul tampilan yang meminta letak dimana lokasi PHP diinstal, karena pada tulisan ini menggunakan aplikasi XAMPP maka lokasi PHP ada pada C:/xampp/php/php.exe. Jika anda tidak menggunakan XAMPP, silahkan cari lokasi PHP yang ada pada komputer anda.

Instal Laravel

Setelah selesai menginstal Composer, selanjutnya kita akan menginstal Laravel dengan menggunakan perintah composer create-project pada Command Prompt (CMD) yang terdapat pada sistem operasi Windows. Karena pada tulisan ini menggunakan XAMPP, maka kita akan menginstal Laravel pada folder C:/xampp/htdocs/ .
Silahkan buka CMD dan arahkan lokasi instalasi pada folder htdocs. Ikuti perintah seperti di bawah ini untuk menginstal Laravel dan membuat proyek baru.
composer create-project laravel/laravel project-name –prefer-dist
project-name merupakan nama dari sebuah proyek yang kita buat, silahkan isi nama sesuai dengan keinginan. Pada kasus ini saya beri nama proyek belajarlaravel. Setelah itu kita hanya perlu menunggu Laravel terpasang pada komputer kita dengan nama proyek yang sudah dibuat. Harus diingat, proses ini membutuhkan koneksi internet.

Setelah proses pemasangan Laravel selesai, silahkan ketik URL localhost/belajarlaravel/public untuk melihat hasilnya. Sebelumnya, terlebih dahulu anda harus membuka aplikasi XAMPP dan mengaktifkan web server Apache. Di bawah ini tampilan pertama ketika kita berhasil menginstal Laravel.

Menampilkan Halaman “Hello, Agan!”

Setelah berhasil menginstal atau membuat proyek Laravel, sekarang kita akan mencoba membuat halaman web menggunakan Laravel. Pada bahasa pemrograman apapun ketika belajar pertama kali kita akan belajar menampilkan kalimat “Hello, World”.
Pada tulisan ini, agar sedikit berbeda dan agar tidak mainstream maka kita akan menggunakan kalimat “Hello, Agan!”. Halaman yang akan dibuat akan tampak seperti gambar dibawah ini.

Untuk membuat halaman seperti diatas, silahkan buka proyek belajrlaravel menggunakan editor teks seperti Sublime, Notepad++, dan lain-lain. Laravel mempunyai konsep MVC (Model-View-Controller). Untuk membuat tampilan kita akan buat pada view, untuk mengenai data kita akan simpan pada model, dan untuk logika nya kita akan simpan pada controller.
Pertama kita akan membuat tampilan, silahkan buat file dengan nama hello.blade.php dan ketik koding seperti dibawah ini.

<!DOCTYPE html>

<html>

<head>

<title>Belajar Laravel</title>

//menggunakan font dari Google API

<style>

html, body {

height: 100%;

}

body {

margin: 0;

padding: 0;

width: 100%;

display: table;

font-weight: 100;

font-family: 'Lato';

}

.container {

text-align: center;

display: table-cell;

vertical-align: middle;

}

.content {

text-align: center;

display: inline-block;

}

.title {

font-size: 96px;

}

</style>

</head>

<body>

//{name} merupakan variable yang berisi nama

<div class="title">Hello {{$name}}, Selamat Belajar Laravel :)</div>

</div>

</body>

</html>

Kemudian simpan pada belajarlaravel/resources/views/hello.blade.php. Jika anda belum mengetahui, blade merupakan template engine bawaan Laravel. Blade menawarkan sintaks yang lebih mudah dan singkat untuk dipakai dalam menghasilkan dokumen HTML.

Setelah itu, buatlah controller baru dengan nama Hello. Ketik kodingan di bawah ini untuk membuat fungsi baru dengan nama show pada controller Hello.

<?php

namespace App\Http\Controllers;

use Illuminate\Foundation\Bus\DispatchesJobs;

use Illuminate\Routing\Controller as BaseController;

use Illuminate\Foundation\Validation\ValidatesRequests;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;

class Hello extends BaseController

{

public function show($name) {

return view('hello', array('name' =>$name));

}

Setelah selesai tahap diatas, silahkan buka file routes.php yang terdapat pada proyek belajarlaravel/app/Http/routes.php kemudian tambahkan koding di bawah ini.

1	Route::get('/hello/{name}', 'Hello@show');

Untuk melihat hasilnya silahkan ketik URL localhost/belajarlaravel/public/hello/{name} pada peramban web. Jika anda ingin menampilkan nama anda, silahkan isi variabel {name} dengan nama anda.
Nah, cukup mudah kan membuat proyek web menggunakan Laravel. Silahkan bagi para developer yang tertarik dan ingin belajar mengenai Laravel bisa lebih mengekplor mengenai framework yang satu ini.

Tutorial CRUD pada Laravel 5.5 (Lengkap)

Halo sobat koder! Masih ngoding kan?

Pada artikel kali ini, saya akan memberikan tutorial melakukan CRUD (Create, Read, Update dan Delete) pada Laravel. Sebelumnya saya pernah memberikan tutorial CRUD laravel untuk versi 5.3. Nah, pada kesempatan kali ini, saya akan mencoba mengupdatenya dengan versi yang terbaru yaitu laravel 5.5.
Oke gak perlu basa basi lagi, mari kita mulai saja project membuat CRUD di laravel 5.5.

Install Laravel

Sebelum memulai melakukan CRUD di Laravel, tentunya kita harus install laravel dong. Tapi buat kalian yang sudah punya projectnya bisa skip tahap ini.

Sebelumnya saya telah membuatkan tutorial juga mengenai cara installnya, jadi untuk kalian yang belum pernah melakukan instalasi laravel, bisa langsung ke tutorial cara install laravel.

Jika kalian menggunakan linux atau macOS, silahkan lakukan konfigurasi permissions pada beberapa direktori laravel. Namun, jika kalian menggunakan windows bisa melewati bagian ini.

sudo chmod -R 777 storage

sudo chmod -R 777 bootstrap/cache

Pada tahap ini, seharusnya jika kalian menjalankan perintah php artisan serve pada terminal maka akan muncul tampilan berikut pada browser.

Konfigurasi Database di Laravel

Setelah melakukan instalasi, tahap selanjutnya adalah melakukan konfigurasi database untuk digunakan laravel. Kalian cukup membuat database baru, dalam hal ini saya akan menggunakan database bernama kodehero_crud. Kalian bisa menamai database dengan nama apapun. Selanjutnya, buka file .env pada direktori root laravel, dan lakukan konfigurasi seperti berikut.

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=kodehero_crud // Ganti dengan nama database kalian

DB_USERNAME=root          // Ganti dengan username database kalian

DB_PASSWORD=              // Ganti dengan password user database kalian

Membuat Model dan Migrations

Langkah selanjutnya adalah membuat model dan migrations. Sebelumnya saya pernah membuatkan tutorial mengenai pembuatan migrations menggunakan php artisan. Tetapi prosesnya masih membuat model dan migrations satu persatu. Kali ini akan saya ajarkan bagaimana membuat model dan migrations-nya dalam sekali perintah php artisan. Silahkan buka terminal yang kalian biasa gunakan dan panggil perintah berikut.

php artisan make:model Article -m

Pada perintah diatas, kita membuat model dengan nama Article. Kemudian, dengan menambahkan perintah -m dibelakangnya, maka laravel akan secara otomatis membuatkan migration-nya sekaligus. Praktis kan.

Konfigurasi file migrations

Setelah berhasil membuat file migrations dengan perintah diatas. Sekarang saatnya mengisi kodingnya. buka file migrations yang telah dibuat tadi pada direktori database\migrations\xxxx_xx_xx_xxxxxx_create_articles_table.php. Pada method up, tambahkan beberapa koding berikut.

public function up()

    Schema::create('articles', function (Blueprint $table) {

        $table->increments('id');

        $table->string('title');

        $table->text('content');

        $table->timestamps();

        $table->softDeletes();

});

Pada kode diatas, saya hanya menggunakan 2 atribut saja untuk tabel articles supaya sederhana. Selain itu saya juga menggunakan softDeletes(), supaya nantinya operasi hapus data di tabel kita menggunakan prosedur soft delete bukan permanen delete.

Soft Delete merupakan metode yang sangat disarankan saat kalian melakukan operasi hapus data pada database, sehingga data tidak benar-benar hilang. Hal ini untuk mengantisipasi jika data yang kita hapus masih memiliki relasi dengan data di tabel lain yang tentunya akan mengakibatkan error saat data tersebut dihapus secara permanen.

Jika sudah, silahkan lakukan migrasi dengan perintah berikut.

php artisan migrate

Jika terdapat error specified key was too long, saya sudah menyiapkan tutorial untuk mengatasinya. silahkan baca solusi laravel error specified key was too long.

Konfigurasi file model Article

Setalah melakukan konfigurasi pada file migrations, sekarang saatnya kita melakukan konfigurasi di bagian modelnya. Silahkan buka file modelnya, biasanya terdapat pada direktori app\Article.php. Pada file model ini, saya hanya akan menambahkan beberapa atribut saja.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

use Illuminate\Database\Eloquent\SoftDeletes;

class Article extends Model

    // Digunakan untuk menggunakan soft delete secara default saat menghapus data

    use SoftDeletes;

    protected $fillable = [

        'title', 'content'

];

    protected $dates = ['deleted_at'];

Oke, cukup ini saja yang perlu kita lakukan pada modelnya. Selanjutnya adalah mengatur routingnya.

Konfigurasi Route di Laravel

Buka file route yang ada di direktori routes\web.php. Tambahkan baris kode berikut.

Route::resource('article', 'ArticleController');

Pada route diatas, saya menggunakan resource, sehingga kita tidak perlu lagi membuat route untuk CRUD satu persatu, Semua otomatis disediakan oleh laravel.

Membuat Controller Resource untuk CRUD

Untuk membuat controller, cukup dengan menggunakan perintah php artisan saja. Tapi karena kita menggunakan route resource, maka kita akan membuat controller dengan resource juga. Lakukan perintah berikut pada terminal.

php artisan make:controller ArticleController -r

Perhatikan tambahan -r pada perintah diatas. Fungsinya adalah untuk membuat controller dengan tambahan fungsi untuk CRUD secara otomatis. Jika kalian buka file controller yang telah dibuat pada direktori app\Http\Controllers\ArticleController.php, maka kalian akan menemukan method index(), create(), store(), show(), edit(), update() dan destroy(). Fungsi inilah yang akan kita gunakan untuk membuat CRUD. Oke, silahkan masukan koding berikut untuk membuat CRUD-nya.

<?php

namespace App\Http\Controllers;

use App\Article;

use Illuminate\Http\Request;

class ArticleController extends Controller

/**

     * Display a listing of the resource.

     * @return \Illuminate\Http\Response

*/

    public function index()

        $articles = Article::orderBy('id', 'DESC')->paginate(5);

        return view('article.index', compact('articles'));

/**

     * Show the form for creating a new resource.

     * @return \Illuminate\Http\Response

*/

    public function create()

        return view('article.create');

/**

     * Store a newly created resource in storage.

     * @param  \Illuminate\Http\Request  $request

     * @return \Illuminate\Http\Response

*/

    public function store(Request $request)

        $this->validate($request, [

            'title' => 'required',

            'content' => 'required'

]);

        $article = Article::create($request->all());

        return redirect()->route('article.index')->with('message', 'Artikel berhasil dibuat!');

/**

     * Display the specified resource.

     * @param  int  $id

     * @return \Illuminate\Http\Response

*/

    public function show($id)

        $article = Article::findOrFail($id);

        return view('article.show', compact('article'));

/**

     * Show the form for editing the specified resource.

     * @param  int  $id

     * @return \Illuminate\Http\Response

*/

    public function edit($id)

        $article = Article::findOrFail($id);

        return view('article.edit', compact('article'));

/**

     * Update the specified resource in storage.

     * @param  \Illuminate\Http\Request  $request

     * @param  int  $id

     * @return \Illuminate\Http\Response

*/

    public function update(Request $request, $id)

        $this->validate($request, [

            'title' => 'required',

            'content' => 'required'

]);

        $article = Article::findOrFail($id)->update($request->all());

        return redirect()->route('article.index')->with('message', 'Artikel berhasil diubah!');

/**

     * Remove the specified resource from storage.

     * @param  int  $id

     * @return \Illuminate\Http\Response

*/

    public function destroy($id)

        $article = Article::findOrFail($id)->delete();

        return redirect()->route('article.index')->with('message', 'Artikel berhasil dihapus!');

Kodingan diatas, dibuat sesederhana mungkin supaya mudah dipahami. Dalam kasus yang sesungguhnya, mungkin akan lebih rumit lagi prosesnya. Tapi karena ini hanya contoh CRUD yang sederhana, maka saya buat sesimpel mungkin.

Membuat View untuk CRUD di Laravel

Langkah berikutnya adalah membuat view. Karena pada bagian ini banyak file yang perlu dibuat secara terpisah, maka saya akan bagi menjadi beberapa sub bab.

Membuat layouts di laravel

Untuk membuat layouts, caranya cukup mudah. Silahkan buat folder baru pada direktori resources\views\. Kemudian buat file baru pada folder layouts yang telah kita buat. Pada tutorial ini saya menggunakan nama app.blde.php untuk file layoutnya. Jadi buat file baru pada direktori resources\views\layouts\app.blade.php. Supaya sederhana, saya akan menggunakan html biasa dengan sentuhan bootstrap.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <title>Kodehero - CRUD</title>

    <style>

        .martop-sm {margin-top: 15px;}

        .martop-lg {margin-top: 70px;}

    </style>

</head>

<body>

    <div class="container martop-lg">

        <div class="panel panel-default">

            <div class="panel-body">@yield('content')</div>

        </div>

    </div>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>

Membuat View untuk Index

Index disini, dimaksudkan untuk proses Read pada rangkaian CRUD. Jadi pada view ini, nantinya semua data akan ditampilkan disini. Buat file baru resources\views\article\index.blade.php.

@extends('layouts.app')

@section('content')

    <a href="{{ route('article.create') }}" class="btn btn-info btn-sm">Artikel Baru</a>

    @if ($message = Session::get('message'))

        <div class="alert alert-success martop-sm">

            <p>{{ $message }}</p>

        </div>

    @endif

    <table class="table table-responsive martop-sm">

        <thead>

            <th>ID</th>

            <th>Title</th>

            <th>Action</th>

        </thead>

        <tbody>

            @foreach ($articles as $article)

                <tr>

                    <td>{{ $article->id }}</td>

                    <td><a href="{{ route('article.show', $article->id) }}">{{ $article->title }}</a></td>

                    <td>

                        <form action="{{ route('article.destroy', $article->id) }}" method="post">

                            {{csrf_field()}}

                            {{ method_field('DELETE') }}

                            <a href="{{ route('article.edit', $article->id) }}" class="btn btn-warning btn-sm">Ubah</a>

                            <button type="submit" class="btn btn-danger btn-sm">Hapus</button>

                        </form>

                    </td>

                </tr>

            @endforeach

        </tbody>

    </table>

@endsection

Perlu diperhatikan disini, bahwa untuk penghapusan data sebaiknya kita menggunakan method post, bukan menggunakan link yang mengarah ke route destroy. Selain itu, karena kita menggunakan route resource, maka otomatis laravel meminta kita untuk mengirim data melalui HTTP REST, tetapi karena pada dasarnya HTML Form tidak support hal tersebut, kita harus menggunakan method spoofing. Dalam hal ini, saya menggunakan {{ method_field('DELETE') }} untuk mensimulasikan method DELETE

Membuat View untuk Create

Untuk Create, tentunya kita akan membuat sebuah form. Buat file baru pada direktori resources\views\article\create.blade.php. Silahkan lihat contohnya dibawah.

@extends('layouts.app')

@section('content')

<h4>Artikel Baru</h4>

<form action="{{ route('article.store') }}" method="post">

    {{csrf_field()}}

    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">

        <label for="title" class="control-label">Title</label>

        <input type="text" class="form-control" name="title" placeholder="Title">

        @if ($errors->has('title'))

            <span class="help-block">{{ $errors->first('title') }}</span>

        @endif

    </div>

    <div class="form-group {{ $errors->has('content') ? 'has-error' : '' }}">

        <label for="content" class="control-label">Content</label>

        <textarea name="content" cols="30" rows="5" class="form-control"></textarea>

        @if ($errors->has('content'))

            <span class="help-block">{{ $errors->first('content') }}</span>

        @endif

    </div>

    <div class="form-group">

        <button type="submit" class="btn btn-info">Simpan</button>

        <a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>

    </div>

</form>

@endsection

Membuat View untuk Show

Untuk Show, kita hanya perlu menampilkan data salah satu artikel saja. Buat file baru pada direktori resources\views\article\show.blade.php dan gunakan contoh kode dibawah.

@extends('layouts.app')

@section('content')

<h4>{{ $article->title }}</h4>

<p>{{ $article->content }}</p>

<a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>

@endsection

Membuat View untuk Edit

Untuk edit kurang lebih mirip dengan saat membuat view untuk Create. Bedanya, disini, kita harus menampilkan data yang akan di edit pada form. Buat file baru pada direktori resources\views\article\edit.blade.php dan gunakan contoh kode dibawah.

@extends('layouts.app')

@section('content')

<h4>Ubah Artikel</h4>

<form action="{{ route('article.update', $article->id) }}" method="post">

    {{csrf_field()}}

    {{ method_field('PUT') }}

    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">

        <label for="title" class="control-label">Title</label>

        <input type="text" class="form-control" name="title" placeholder="Title" value="{{ $article->title }}">

        @if ($errors->has('title'))

            <span class="help-block">{{ $errors->first('title') }}</span>

        @endif

    </div>

    <div class="form-group {{ $errors->has('content') ? 'has-error' : '' }}">

        <label for="content" class="control-label">Content</label>

        <textarea name="content" cols="30" rows="5" class="form-control">{{ $article->content }}</textarea>

        @if ($errors->has('content'))

            <span class="help-block">{{ $errors->first('content') }}</span>

        @endif

    </div>

    <div class="form-group">

        <button type="submit" class="btn btn-info">Simpan</button>

        <a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>

    </div>

</form>

@endsection

Sama seperti DELETE diatas, kita harus menggunakan method spoofing untuk menggunakan PUT pada proses update. Dalam hal ini, saya menggunakan {{ method_field('PUT') }} untuk mensimulasikan method PUT.

Percobaan Aplikasi

Setalah bersusah payah diatas, sekarang saatnya kita mencoba aplikasi kita.

Kita jalankan dulu servernya dengan perintah php artisan serve. Selanjutnya buka browser dan arahkan ke URL localhost:8000/article. Jika berhasil maka akan muncul tampilan seperti dibawah.

Kemudian, jika kita klik tombol Artikel Baru, maka akan diarahkan ke view Create. Jika berhasil maka tampilannya akan seperti ini.

Silahkan coba untuk membuat artikel baru, jika ada kesalahan input data, maka aplikasi akan kembali ke halaman tersebut dan menampilkan pesan error. Namun, jika berhasil maka aplikasi akan kembali ke halaman index dengan pesan sukses.

Selanjutnya adalah percobaan untuk melihat data satuan. Caranya, klik saja link yang ada pada judul artikel. Maka akan terlihat tampilan artikel secara utuh.

Berikutnya, adalah percobaan ubah data. Jika kalian tekan tombol Ubah, maka aplikasi akan menuju view edit dengan tampilan sebagai berikut.

Sama seperti create, ketika tombol Simpan ditekan maka aplikasi akan mengecek input dari user, jika tidak ada kesalahan maka aplikasi akan kembali ke halaman index dan menampilkan pesan sukses.

Yang terakhir adalah proses delete. Jika tombol Hapus ditekan, maka data akan dihapus. Namun, hapus disini tidak secara permanen, melainkan hanya sementara menggunakan metode soft delete. Sehingga jika data ini nantinya punya relasi dengan data lain, tidak akan terjadi error jika dihapus.

Sumber : https://teknojurnal.com/cara-membuat-halaman-web-pertama-menggunakan-laravel-5/

https://www.kodehero.com/2017/12/tutorial-crud-pada-laravel-55-lengkap.html

Belajar Laravel | DM

Selasa, 13 November 2018

Belajar Laravel