Rizki Mufrizal Reading time ~22 minutes

Setelah menyelesaikan artikel sebelumnya, penulis kembali menulis artikel lanjutan dari artikle sebelumnya :D. Artikel mengenai laravel ini sedikit panjang dikarenakan penulis sedang mempelajari dan mencoba menjelaskan lebih detail bagaimana cara kerja laravel itu sendiri. Pada artikel kali ini, penulis akan membahas mengenai controller, routing, view, valisasi sekaligus kita akan melakukan testing terhadap aplikasi yang telah kita buat.

Membuat Controller Pada Laravel

Untuk membuat controller sama seperti pada saat membuat model, hanya saja kita menggunakan sintak yang sedikit berbeda. Sebelum membuat controller, disini kita membutuhkan library uuid untuk melakukan generate id seperti id buku dan id peminjaman, silahkan jalankan perintah berikut untuk mendownload dependency uuid.

composer require ramsey/uuid

Setelah selesai, silahkan jalankan perintah berikut untuk membuat controller untuk model buku.

php artisan make:controller BukuController

File BukuController.php terletak di dalam folder app/Http/Controllers, silahkan anda buku lalu ubah codingannya menjadi seperti berikut.

<?php

namespace App\Http\Controllers;

use App\Buku;
use Illuminate\Http\Request;

use App\Http\Requests;
use Ramsey\Uuid\Uuid;

class BukuController extends Controller
{
    public function index()
    {
        $buku = Buku::paginate(10);
        return view('buku.index', ['bukus' => $buku]);
    }

    public function cariBuku(Request $request)
    {
        $key = $request->key;
        $value = $request->value;

        $buku = Buku::where($key, 'like', '%' . $value . '%')->paginate(10);
        return view('buku.index', ['bukus' => $buku]);
    }

    public function tambahBuku()
    {
        return view('buku.create');
    }

    public function simpanBuku(Request $request)
    {
        $this->validate($request, [
            'judul_buku' => 'required|max:50',
            'nama_pengarang' => 'required|max:50',
            'tahun_terbit' => 'required|integer',
            'penerbit' => 'required|max:50',
            'jumlah_buku' => 'required|integer',
            'nomor_rak_buku' => 'required|max:50',
        ]);

        $buku = new Buku;

        $buku->id_buku = Uuid::uuid4();
        $buku->judul_buku = $request->judul_buku;
        $buku->nama_pengarang = $request->nama_pengarang;
        $buku->tahun_terbit = $request->tahun_terbit;
        $buku->penerbit = $request->penerbit;
        $buku->jumlah_buku = $request->jumlah_buku;
        $buku->nomor_rak_buku = $request->nomor_rak_buku;

        $buku->save();

        \Session::flash('flash_message', 'data buku berhasil disimpan');

        return redirect('Buku');
    }

    public function editBuku($idBuku)
    {
        $buku = Buku::where('id_buku', $idBuku)->firstOrFail();
        return view('buku.edit')
            ->with('buku', $buku);
    }

    public function updateBuku(Request $request, $idBuku)
    {

        $buku = Buku::where('id_buku', $idBuku)->firstOrFail();

        $this->validate($request, [
            'id_buku' => 'required',
            'judul_buku' => 'required|max:50',
            'nama_pengarang' => 'required|max:50',
            'tahun_terbit' => 'required|integer',
            'penerbit' => 'required|max:50',
            'jumlah_buku' => 'required|integer',
            'nomor_rak_buku' => 'required|max:50'
        ]);

        Buku::where('id_buku', $buku->id_buku)
            ->update([
                'judul_buku' => $request->judul_buku,
                'nama_pengarang' => $request->nama_pengarang,
                'tahun_terbit' => $request->tahun_terbit,
                'penerbit' => $request->penerbit,
                'jumlah_buku' => $request->jumlah_buku,
                'nomor_rak_buku' => $request->nomor_rak_buku
            ]);

        \Session::flash('flash_message', 'data buku berhasil diubah');

        return redirect('Buku');
    }

    public function hapusBuku($idBuku)
    {
        $buku = Buku::where('id_buku', $idBuku)->firstOrFail();
        Buku::where('id_buku', $buku->id_buku)->delete();

        \Session::flash('flash_message', 'data buku berhasil dihapus');

        return redirect('Buku');
    }
}

Nah bisa kita lihat bahwa class controller ini akan mengatur hubungan antara view dan model. Class controller ini memiliki 7 method, dimana masing - masing method ini akan kita gunakan untuk melakukan manipulasi data. Karena kita menggunakan eloquent orm untuk basis data maka kita hanya perlu memanggil class model, dimana dengan class model ini kita dapat melakukan manipulasi data. Kemudian pada laravel, kita juga dapat melakukan validasi untuk setiap inputan dan kita dapat melakukan custom terhadap validasi yang kita inginkan, jika dlihat dari codingan diatas, anda dapat melihat validasinya yang berada pada codingan $this->validate. Anda juga dapat melihat codingan \Session::flash, codingan ini berfungsi untuk menampilkan notifikasi atau menampilkan info, misalnya jika data telah berhasil disimpan dan sebagainya.

Selanjutnya silahkan jalankan perintah berikut untuk membuat controller mahasiswa.

php artisan make:controller MahasiswaController

Kemudian ubah codingannya menjadi seperti berikut.

<?php

namespace App\Http\Controllers;

use App\Mahasiswa;
use Illuminate\Http\Request;

use App\Http\Requests;

class MahasiswaController extends Controller
{
    public function index()
    {
        $mahasiswa = Mahasiswa::paginate(10);
        return view('mahasiswa.index', ['mahasiswas' => $mahasiswa]);
    }

    public function cariMahasiswa(Request $request)
    {
        $key = $request->key;
        $value = $request->value;

        $mahasiswa = Mahasiswa::where($key, 'like', '%' . $value . '%')->paginate(10);
        return view('mahasiswa.index', ['mahasiswas' => $mahasiswa]);
    }

    public function tambahMahasiswa()
    {
        return view('mahasiswa.create');
    }

    public function simpanMahasiswa(Request $request)
    {

        $this->validate($request, [
            'npm' => 'required|max:8',
            'nama' => 'required|max:50',
            'kelas' => 'required|max:6',
            'jenis_kelamin' => 'required',
            'alamat' => 'required'
        ]);

        $mahasiswa = new Mahasiswa;

        $mahasiswa->npm = $request->npm;
        $mahasiswa->nama = $request->nama;
        $mahasiswa->kelas = $request->kelas;
        $mahasiswa->jenis_kelamin = $request->jenis_kelamin;
        $mahasiswa->alamat = $request->alamat;

        $mahasiswa->save();

        \Session::flash('flash_message', 'data Mahasiswa berhasil disimpan');

        return redirect('Mahasiswa');
    }

    public function editMahasiswa($npm)
    {
        $mahasiswa = Mahasiswa::where('npm', $npm)->firstOrFail();
        return view('mahasiswa.edit')
            ->with('mahasiswa', $mahasiswa);
    }

    public function updateMahasiswa(Request $request, $npm)
    {

        $mahasiswa = Mahasiswa::where('npm', $npm)->firstOrFail();

        $this->validate($request, [
            'npm' => 'required|max:8',
            'nama' => 'required|max:50',
            'kelas' => 'required|max:6',
            'jenis_kelamin' => 'required',
            'alamat' => 'required'
        ]);

        Mahasiswa::where('npm', $mahasiswa->npm)
            ->update([
                'nama' => $request->nama,
                'kelas' => $request->kelas,
                'jenis_kelamin' => $request->jenis_kelamin,
                'alamat' => $request->alamat
            ]);

        \Session::flash('flash_message', 'data Mahasiswa berhasil diubah');

        return redirect('Mahasiswa');
    }


    public function hapusMahasiswa($npm)
    {
        $mahasiswa = Mahasiswa::where('npm', $npm)->firstOrFail();
        Mahasiswa::where('npm', $mahasiswa->npm)->delete();

        \Session::flash('flash_message', 'data mahasiswa berhasil dihapus');

        return redirect('Mahasiswa');
    }
}

Codingan yang akan kita gunakan untuk class controller mahasiswa adalah sama dengan class controller buku. Selanjutnya kita akan mencoba membuat controller untuk bagian peminjaman, silahkan jalankan perintah berikut untuk membuat class peminjaman controller.

php artisan make:controller PeminjamanController

Kemudian ubah codingannya menjadi seperti berikut.

<?php

namespace App\Http\Controllers;

use App\Buku;
use App\Mahasiswa;
use App\Peminjaman;
use Illuminate\Http\Request;

use App\Http\Requests;
use Ramsey\Uuid\Uuid;

class PeminjamanController extends Controller
{
    public function index()
    {
        $peminjaman = \DB::table('tb_peminjaman')
            ->join('tb_buku', 'tb_peminjaman.id_buku', '=', 'tb_buku.id_buku')
            ->join('tb_mahasiswa', 'tb_peminjaman.npm', '=', 'tb_mahasiswa.npm')
            ->select(
                'tb_peminjaman.tanggal_batas_pengembalian',
                'tb_peminjaman.tanggal_peminjaman',
                'tb_peminjaman.id_peminjaman',
                'tb_mahasiswa.npm',
                'tb_mahasiswa.nama',
                'tb_mahasiswa.kelas',
                'tb_buku.judul_buku',
                'tb_buku.nama_pengarang',
                'tb_buku.tahun_terbit',
                'tb_buku.penerbit',
                'tb_buku.nomor_rak_buku'
            )
            ->paginate(10);
        return view('peminjaman.index', ['peminjamans' => $peminjaman]);
    }

    public function cariPeminjaman(Request $request)
    {
        $key = $request->key;
        $value = $request->value;

        $peminjaman = \DB::table('tb_peminjaman')
            ->join('tb_buku', 'tb_peminjaman.id_buku', '=', 'tb_buku.id_buku')
            ->join('tb_mahasiswa', 'tb_peminjaman.npm', '=', 'tb_mahasiswa.npm')
            ->select(
                'tb_peminjaman.tanggal_batas_pengembalian',
                'tb_peminjaman.tanggal_peminjaman',
                'tb_peminjaman.id_peminjaman',
                'tb_mahasiswa.npm',
                'tb_mahasiswa.nama',
                'tb_mahasiswa.kelas',
                'tb_buku.judul_buku',
                'tb_buku.nama_pengarang',
                'tb_buku.tahun_terbit',
                'tb_buku.penerbit',
                'tb_buku.nomor_rak_buku'
            )
            ->where($key, 'like', '%' . $value . '%')
            ->paginate(10);
        return view('peminjaman.index', ['peminjamans' => $peminjaman]);
    }

    public function tambahPeminjaman()
    {
        $mahasiswas = Mahasiswa::lists('nama', 'npm');
        $bukus = Buku::lists('judul_buku', 'id_buku');
        return view('peminjaman.create')
            ->with([
                'mahasiswas' => $mahasiswas,
                'bukus' => $bukus
            ]);
    }

    public function simpanPeminjaman(Request $request)
    {
        $this->validate($request, [
            'tanggal_peminjaman' => 'required|date',
            'tanggal_batas_pengembalian' => 'required|date',
            'mahasiswa' => 'required',
            'buku' => 'required'
        ]);

        $peminjaman = new Peminjaman;

        $peminjaman->id_peminjaman = Uuid::uuid4();
        $peminjaman->tanggal_peminjaman = $request->tanggal_peminjaman;
        $peminjaman->tanggal_batas_pengembalian = $request->tanggal_batas_pengembalian;
        $peminjaman->npm = $request->npm;
        $peminjaman->id_buku = $request->id_buku;

        $peminjaman->save();

        \Session::flash('flash_message', 'data peminjaman berhasil disimpan');

        return redirect('Peminjaman');
    }

    public function editPeminjaman($idPeminjaman)
    {
        $mahasiswas = Mahasiswa::lists('nama', 'npm');
        $bukus = Buku::lists('judul_buku', 'id_buku');

        $peminjaman = \DB::table('tb_peminjaman')
            ->join('tb_buku', 'tb_peminjaman.id_buku', '=', 'tb_buku.id_buku')
            ->join('tb_mahasiswa', 'tb_peminjaman.npm', '=', 'tb_mahasiswa.npm')
            ->select(
                'tb_peminjaman.tanggal_batas_pengembalian',
                'tb_peminjaman.tanggal_peminjaman',
                'tb_peminjaman.id_peminjaman',
                'tb_mahasiswa.npm',
                'tb_mahasiswa.nama',
                'tb_mahasiswa.kelas',
                'tb_buku.judul_buku',
                'tb_buku.nama_pengarang',
                'tb_buku.tahun_terbit',
                'tb_buku.penerbit',
                'tb_buku.nomor_rak_buku',
                'tb_buku.id_buku'
            )
            ->where('id_peminjaman', $idPeminjaman)->first();

        return view('peminjaman.edit')
            ->with('peminjaman', $peminjaman)
            ->with([
                'mahasiswas' => $mahasiswas,
                'bukus' => $bukus
            ]);
    }

    public function updatePeminjaman(Request $request, $idPeminjaman)
    {

        $peminjaman = Peminjaman::where('id_peminjaman', $idPeminjaman)->firstOrFail();

        $this->validate($request, [
            'tanggal_peminjaman' => 'required|date',
            'tanggal_batas_pengembalian' => 'required|date',
            'npm' => 'required',
            'id_buku' => 'required'
        ]);

        Peminjaman::where('id_peminjaman', $peminjaman->id_peminjaman)
            ->update([
                'tanggal_peminjaman' => $request->tanggal_peminjaman,
                'tanggal_batas_pengembalian' => $request->tanggal_batas_pengembalian,
                'npm' => $request->npm,
                'id_buku' => $request->id_buku
            ]);

        \Session::flash('flash_message', 'data peminjaman berhasil diubah');

        return redirect('Peminjaman');
    }

    public function hapusPeminjaman($idPeminjaman)
    {
        $peminjaman = Peminjaman::where('id_peminjaman', $idPeminjaman)->firstOrFail();
        Peminjaman::where('id_peminjaman', $peminjaman->id_peminjaman)->delete();

        \Session::flash('flash_message', 'data peminjaman berhasil dihapus');

        return redirect('Peminjaman');
    }
}

Nah terlihat sedikit perbedaan, dimana jika pada controller sebelumnya kita benar - benar menggunakan class model, dan mengapa sekarang kita menggunakan \DB::table untuk melakukan query ? ini disebabkan karena kita ingin melakukan custom query, dimana disini kita melakukan join sebanyak 3 tabel :). Kemudian pada function tambahPeminjaman mengapa kita mengambil data buku dan mahasiswa ? karena kita ingin menampilkan data mahasiswa dan buku dalam bentuk combo box, dimana nanti datanya ini diperlukan untuk penyimpanan data peminjaman buku yang dilakukan berdasarkan relasi one to many.

Setelah selesai membuat semua controller, disini penulis juga membuat authentikasi untuk user - user yang akan melakukan akses data. Untuk membuat proses authentikasi pada laravel sangatlah mudah, kita dapat menggunakan scalfolding dari laravel. Jalankan perintah berikut untuk membuat authentikasi pada laravel.

php artisan make:auth

Jika berhasil maka akan muncul output seperti berikut pada terminal vagrant anda.

root@vagrant-ubuntu-trusty-64:/home/vagrant/Projects/Aplikasi-Perpustakaan# php artisan make:auth
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/auth/login.blade.php
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/auth/register.blade.php
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/auth/passwords/email.blade.php
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/auth/passwords/reset.blade.php
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/auth/emails/password.blade.php
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/layouts/app.blade.php
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/home.blade.php
Created View: /home/vagrant/Projects/Aplikasi-Perpustakaan/resources/views/welcome.blade.php
Installed HomeController.
Updated Routes File.
Authentication scaffolding generated successfully!

Kita tidak perlu untuk melakukan coding, karena secara otomatis laravel telah membuat fungsi untuk register, login dan logout sesuai dengan yang kita butuhkan. Password akan diinput oleh user akan di hash dengan menggunakan algoritma bcrypt sehingga keamanan data user lebih terjaga.

Melakukan Konfigurasi Router Pada Laravel

Setelah selesai dengan controller, tahap selanjutnya kita akan mencoba melakukan konfigurasi router pada laravel. Router ini sebenarnya adalah route atau state dari pada sebuah url. Untuk melakukan konfigurasi router pada laravel, silahkan buka file routes.php di dalam folder app/Http kemudian ubah codingannya menjadi seperti berikut.

<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/

Route::get('/', function () {
    return view('home');
});

//route buku
Route::get('Buku', ['middleware' => 'auth', 'uses' => 'BukuController@index']);
Route::post('CariBuku', ['middleware' => 'auth', 'uses' => 'BukuController@cariBuku']);
Route::get('TambahBuku', ['middleware' => 'auth', 'uses' => 'BukuController@tambahBuku']);
Route::post('SimpanBuku', ['middleware' => 'auth', 'uses' => 'BukuController@simpanBuku']);
Route::get('EditBuku/{idBuku}', ['middleware' => 'auth', 'uses' => 'BukuController@editBuku']);
Route::put('UpdateBuku/{idBuku}', ['middleware' => 'auth', 'uses' => 'BukuController@updateBuku']);
Route::delete('HapusBuku/{idBuku}', ['middleware' => 'auth', 'uses' => 'BukuController@hapusBuku']);

//route mahasiswa
Route::get('Mahasiswa', ['middleware' => 'auth', 'uses' => 'MahasiswaController@index']);
Route::post('CariMahasiswa', ['middleware' => 'auth', 'uses' => 'MahasiswaController@cariMahasiswa']);
Route::get('TambahMahasiswa', ['middleware' => 'auth', 'uses' => 'MahasiswaController@tambahMahasiswa']);
Route::post('SimpanMahasiswa', ['middleware' => 'auth', 'uses' => 'MahasiswaController@simpanMahasiswa']);
Route::get('EditMahasiswa/{npm}', ['middleware' => 'auth', 'uses' => 'MahasiswaController@editMahasiswa']);
Route::put('UpdateMahasiswa/{npm}', ['middleware' => 'auth', 'uses' => 'MahasiswaController@updateMahasiswa']);
Route::delete('HapusMahasiswa/{npm}', ['middleware' => 'auth', 'uses' => 'MahasiswaController@hapusMahasiswa']);

//route peminjaman
Route::get('Peminjaman', ['middleware' => 'auth', 'uses' => 'PeminjamanController@index']);
Route::post('CariPeminjaman', ['middleware' => 'auth', 'uses' => 'PeminjamanController@cariPeminjaman']);
Route::get('TambahPeminjaman', ['middleware' => 'auth', 'uses' => 'PeminjamanController@tambahPeminjaman']);
Route::post('SimpanPeminjaman', ['middleware' => 'auth', 'uses' => 'PeminjamanController@simpanPeminjaman']);
Route::get('EditPeminjaman/{idPeminjaman}', ['middleware' => 'auth', 'uses' => 'PeminjamanController@editPeminjaman']);
Route::put('UpdatePeminjaman/{idPeminjaman}', ['middleware' => 'auth', 'uses' => 'PeminjamanController@updatePeminjaman']);
Route::delete('HapusPeminjaman/{idPeminjaman}', ['middleware' => 'auth', 'uses' => 'PeminjamanController@hapusPeminjaman']);
Route::auth();

masing - masing route tersebut memiliki method yang berbeda - beda dikarenakan kebutuhan yang berbeda - beda, misalkan jika kita ingin mengambil data maka kita akan menggunakan method get, jika menyimpan data dengan menggunakan method post, mengubah data dengan menthod put dan menghapus data dengan method delete. Pada route ini, terdapat middleware dimana middleware ini akan dijalankan tepat pada saat sebuah function di dalam controller diakses. Middleware yang kita gunakan disini berfungsi jika user belum melakukan login, maka user akan diredirect ke halaman login terlebih dahulu. Untuk mendefinisikan route berdasarkan function pada controller tertentu tidaklah berbeda jika kita bandingkan dengan codeigniter, bisa dilihat untuk mendeklarasikan function pada controller tertentu kita dapat menggunakan codingan nama controller@nama function. Terdapat tanda @ untuk memisahkan antara controller dan function.

Membuat View Pada Laravel

Setelah melewati banyak konfigurasi pada model dan controller, tahap selanjutnya adalah kita akan membuat view :). Tahap ini merupakan tahap akhir dari project yang akan kita buat. Pada laravel, kita akan menggunakan template engine bawaan laravel yaitu blade. Dokumentasi tentang penggunaan view tidak dibahas pada code dokumentasi laravel, akan tetapi dibahas terpisah di Laravel Collective. Di dalam dokumentasi laravel collective, disana dijelaskan tentang bagaimana cara membuat form dan sebagainya dengan menggunakan blade, akan tetapi kita diharuskan melakukan instalasi library laravel collective pada project yang akan kita gunakan sekarang. Salah satu kelebihan dari laravel collective ini adalah kita dapat menggunakan teknologi CSRF sehingga kita tidak perlu repot - repot membuat konfigurasi CSRF lagi :D. Silahkan anda buka file composer.json yang berada pada root folder project anda. Kemudian tambahkan codingan seperti berikut pada bagian require.

"laravelcollective/html": "5.2.*"

Jika dilihat dari seluruh codingannya akan menjadi seperti berikut.

{
  "name": "laravel/laravel",
  "description": "The Laravel Framework.",
  "keywords": [
    "framework",
    "laravel"
  ],
  "license": "MIT",
  "type": "project",
  "require": {
    "php": ">=5.5.9",
    "laravel/framework": "5.2.*",
    "barryvdh/laravel-ide-helper": "^2.1",
    "ramsey/uuid": "^3.4",
    "laravelcollective/html": "5.2.*"
  },
  "require-dev": {
    "fzaninotto/faker": "~1.4",
    "mockery/mockery": "0.9.*",
    "phpunit/phpunit": "~4.0",
    "symfony/css-selector": "2.8.*|3.0.*",
    "symfony/dom-crawler": "2.8.*|3.0.*"
  },
  "autoload": {
    "classmap": [
      "database"
    ],
    "psr-4": {
      "App\\": "app/"
    }
  },
  "autoload-dev": {
    "classmap": [
      "tests/TestCase.php"
    ]
  },
  "scripts": {
    "post-root-package-install": [
      "php -r \"copy('.env.example', '.env');\""
    ],
    "post-create-project-cmd": [
      "php artisan key:generate"
    ],
    "post-install-cmd": [
      "Illuminate\\Foundation\\ComposerScripts::postInstall",
      "php artisan optimize"
    ],
    "post-update-cmd": [
      "Illuminate\\Foundation\\ComposerScripts::postUpdate",
      "php artisan optimize"
    ]
  },
  "config": {
    "preferred-install": "dist"
  }
}

Setelah selesai, silahkan jalankan perintah berikut untuk mendownload dependency yang kita butuhkan.

composer update

Kemudian silahkan buka file app.php yang berada di dalam folder config tambahkan pada bagian providers codingan seperti berikut.

Collective\Html\HtmlServiceProvider::class,

maka hasilnya akan seperti berikut.

<?php
    'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        Illuminate\Bus\BusServiceProvider::class,
        Illuminate\Cache\CacheServiceProvider::class,
        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
        Illuminate\Cookie\CookieServiceProvider::class,
        Illuminate\Database\DatabaseServiceProvider::class,
        Illuminate\Encryption\EncryptionServiceProvider::class,
        Illuminate\Filesystem\FilesystemServiceProvider::class,
        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
        Illuminate\Hashing\HashServiceProvider::class,
        Illuminate\Mail\MailServiceProvider::class,
        Illuminate\Pagination\PaginationServiceProvider::class,
        Illuminate\Pipeline\PipelineServiceProvider::class,
        Illuminate\Queue\QueueServiceProvider::class,
        Illuminate\Redis\RedisServiceProvider::class,
        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
        Illuminate\Session\SessionServiceProvider::class,
        Illuminate\Translation\TranslationServiceProvider::class,
        Illuminate\Validation\ValidationServiceProvider::class,
        Illuminate\View\ViewServiceProvider::class,

        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,

        Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class,
        Collective\Html\HtmlServiceProvider::class

    ],

Kemudian tambahkan codingan berikut pada bagian aliases.

'Form' => Collective\Html\FormFacade::class,
'Html' => Collective\Html\HtmlFacade::class,

maka hasilnya akan seperti berikut.

<?php
    'aliases' => [

        'App' => Illuminate\Support\Facades\App::class,
        'Artisan' => Illuminate\Support\Facades\Artisan::class,
        'Auth' => Illuminate\Support\Facades\Auth::class,
        'Blade' => Illuminate\Support\Facades\Blade::class,
        'Cache' => Illuminate\Support\Facades\Cache::class,
        'Config' => Illuminate\Support\Facades\Config::class,
        'Cookie' => Illuminate\Support\Facades\Cookie::class,
        'Crypt' => Illuminate\Support\Facades\Crypt::class,
        'DB' => Illuminate\Support\Facades\DB::class,
        'Eloquent' => Illuminate\Database\Eloquent\Model::class,
        'Event' => Illuminate\Support\Facades\Event::class,
        'File' => Illuminate\Support\Facades\File::class,
        'Form' => Collective\Html\FormFacade::class,
        'Gate' => Illuminate\Support\Facades\Gate::class,
        'Hash' => Illuminate\Support\Facades\Hash::class,
        'Html' => Collective\Html\HtmlFacade::class,
        'Lang' => Illuminate\Support\Facades\Lang::class,
        'Log' => Illuminate\Support\Facades\Log::class,
        'Mail' => Illuminate\Support\Facades\Mail::class,
        'Password' => Illuminate\Support\Facades\Password::class,
        'Queue' => Illuminate\Support\Facades\Queue::class,
        'Redirect' => Illuminate\Support\Facades\Redirect::class,
        'Redis' => Illuminate\Support\Facades\Redis::class,
        'Request' => Illuminate\Support\Facades\Request::class,
        'Response' => Illuminate\Support\Facades\Response::class,
        'Route' => Illuminate\Support\Facades\Route::class,
        'Schema' => Illuminate\Support\Facades\Schema::class,
        'Session' => Illuminate\Support\Facades\Session::class,
        'Storage' => Illuminate\Support\Facades\Storage::class,
        'URL' => Illuminate\Support\Facades\URL::class,
        'Validator' => Illuminate\Support\Facades\Validator::class,
        'View' => Illuminate\Support\Facades\View::class,

    ],

Langkah selanjutnya adalah melakukan instalasi gulp. Gulp merupakan salah satu build tool untuk automated task, bagi anda yang masih bingung bagaimana cara menggunakan gulp, silahkan lihat di artikel belajar gulp. Untuk melakukan instalasi gulp, silahkan jalankan perintah berikut.

npm install -g gulp

Setelah selesai, kita membutuhkan dependency library bootsrap untuk mempercantik tampilan. Secara default, laravel telah mendaftakan library bootstrap-sass di dalam package.json, kita hanya perlu melakukan instalasi terhadap library tersebut dengan cara menjalankan perintah berikut.

npm install

Karena bootstrap memerlukan dependency library jquery, silahkan jalankan perintah berikut.

npm install jquery --save

Kemudian silahkan buka file app.scss yang berada di dalam folder resources/assets/sass kemudian ubah codingannya menjadi seperti berikut.

@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Setelah selesai, silahkan buat sebuah folder js di dalam folder resources/assets kemudian silahkan buat sebuah file app.js di dalam folder resources/assets/js dan masukkan codingan berikut untuk melakukan import jquery dan bootstrap.

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

$( document ).ready(function() {
    console.log($.fn.tooltip.Constructor.VERSION);
});

Karena file app.js belum terdaftar di dalam konfigurasi gulp, maka kita harus melakukan konfigurasi terlebih dahulu. Silahkan buka file gulpfile.js yang berada di root project, kemudian ubah codingannya menjadi seperti berikut.

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss')
        .browserify('app.js');
});

Bisa kita lihat dari codingan diatas, kita menggunakan browserify untuk meload file app.js, mengapa demikian ? dikarenakan kita menggunakan sintak amd (Asynchronous Module Definition) pada file app.js. Setelah selesai, karena scss merupakan preprocessor dari css maka kita tidak bisa secara langsung menjalanlkan file scss tersebut pada browser, maka kita harus mengubahnya terlebih dahulu menjadi css. Laravel telah menyediakan konfigurasi gulp untuk merubah preprocessor scss menjadi css, silahkan jalankan perintah berikut untuk mengubah scss menjadi css dan melakukan build terhadap file app.js.

gulp --production

Jika berhasil, maka output pada terminal akan menjadi seperti berikut.

root@vagrant-ubuntu-trusty-64:/home/vagrant/Projects/Aplikasi-Perpustakaan# gulp --production
[02:12:13] Using gulpfile /home/vagrant/Projects/Aplikasi-Perpustakaan/gulpfile.js
[02:12:13] Starting 'default'...
[02:12:13] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/app.scss

Saving To...
   - public/css/app.css

[02:12:20] Finished 'default' after 7.38 s
[02:12:24] gulp-notify: [Laravel Elixir] Sass Compiled!
[02:12:24] Finished 'sass' after 11 s
[02:12:24] Starting 'browserify'...

Fetching Browserify Source Files...
   - resources/assets/js/app.js

Saving To...
   - public/js/app.js

[02:12:37] gulp-notify: [Laravel Elixir] Browserify Compiled!
[02:12:37] Finished 'browserify' after 13 s

Nah dari output diatas dapat kita lihat bahwa gulp mengubah file app.scss menjadi file app.css yang terletak di dalam folder public/css sedangkan file app.js akan berada di dalam folder public/js.

Langkah selanjutnya kita akan mengatur view, semua view pada laravel terletak di dalam folder resources/views. Silahkan anda hapus file welcome.blade.php dikarenakan kita tidak lagi menggunakan file tersebut sebagai home page dari aplikasi kita melaikan file home.blade.php yang akan kita gunakan sebagai home page. Langkah selanjutnya silahkan buka file app.blade.php yang berada di folder layouts kemudian silahkan ubah menjadi seperti berikut.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <meta name="description" content="belajar laravel 5"/>
        <meta name="author" content="rizki mufrizal"/>

        <title>Belajar Laravel 5 @yield('title')</title>

        <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"/>
        <style rel="stylesheet" type="text/css">
            body {
                min-height: 2000px;
                padding-top: 70px;
            }
        </style>

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>

        <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                        <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="{{ url('') }}">Belajar Laravel</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="{{ url('') }}">Home</a></li>
                        <li><a href="{{ url('Mahasiswa') }}">Data Mahasiswa</a></li>
                        <li><a href="{{ url('Buku') }}">Data Buku</a></li>
                        <li><a href="{{ url('Peminjaman') }}">Data Peminjaman</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        @if (Auth::guest())
                            <li><a href="{{ url('/login') }}">Login</a></li>
                            <li><a href="{{ url('/register') }}">Register</a></li>
                        @else
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                                </ul>
                            </li>
                        @endif
                    </ul>

                </div>
            </div>
        </nav>

        <div class="container">

            @if(Session::has('flash_message'))
                <div class="alert alert-success">
                    {{ Session::get('flash_message') }}
                </div>
            @endif

            @yield('content')

        </div>

        <script src="{{ asset('js/app.js') }}" type="application/javascript"></script>
    </body>
</html>

Setelah selesai, kemudian silahkan buka file home.blade.php kemudian ubah codingannya menjadi seperti berikut.

@extends('layouts.app')

@section('content')
    <div class="jumbotron text-center">
        <h1>Selamat Datang</h1>
        <p>Aplikasi Perpustakaan</p>
        <p>
            Aplikasi ini dibuat dalam rangka belajar laravel 5
        </p>
    </div>
@endsection

Kemudian silahkan akses http://perpustakaan.com:8080 pada browser anda, jika berhasil maka outputnya akan muncul seperti berikut.

Screenshot from 2016-05-21 22-29-07.png

Kemudian silahkan buat folder mahasiswa, buku dan peminjaman di dalam folder views, di dalam masing - masing folder tersebut silahkan buat file create.blade.php, edit.blade.php dan index.blade.php. Untuk codingan index.blade.php pada folder buku silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Data Buku')
@section('content')

    <h1 class="text-center">Daftar Buku</h1>

    <div class="input-group">
        <a href="{{ url('TambahBuku') }}">
            <button class="btn btn-primary">Tambah Data</button>
        </a>
    </div>

    <p></p>

    {!! Form::open(array('url' => 'CariBuku', 'class'=>'form form-inline')) !!}
    {!! Form::select('key', array(
            'id_buku' => 'ID Buku',
            'judul_buku' => 'Judul Buku',
            'pengarang' => 'Pengarang',
            'tahun_terbit' => 'Tahun Terbit',
            'penerbit' => 'Penerbit',
            'jumlah_buku' => 'Jumlah Buku',
            'nomor_rak_buku' => 'Nomor Rak Buku'
        ), null, ['class' => 'form-control', 'placeholder' => 'Pilih Kata Kunci']) !!}
    {!! Form::text('value', null, ['class' => 'form-control', 'placeholder' =>'Cari Data Buku']) !!}
    {!! Form::submit('Cari', ['class'=>'btn btn-default']) !!}
    {!! Form::close() !!}

    <p></p>

    <table class="table table-bordered table-hover table-responsive table-striped">
        <thead>
        <tr>
            <th class="text-center">ID Buku</th>
            <th class="text-center">Judul Buku</th>
            <th class="text-center">Pengarang</th>
            <th class="text-center">Tahun Terbit</th>
            <th class="text-center">Penerbit</th>
            <th class="text-center">Jumlah Buku</th>
            <th class="text-center">Nomor Rak Buku</th>
            <th class="text-center">Aksi</th>
        </tr>
        </thead>
        <tbody>
        @foreach($bukus as $buku)
            <tr>
                <td>{{ $buku->id_buku }}</td>
                <td>{{ $buku->judul_buku }}</td>
                <td>{{ $buku->pengarang }}</td>
                <td>{{ $buku->tahun_terbit }}</td>
                <td>{{ $buku->penerbit }}</td>
                <td>{{ $buku->jumlah_buku }}</td>
                <td>{{ $buku->nomor_rak_buku }}</td>
                <td class="text-center">
                    <a href="{{ url("EditBuku/$buku->id_buku") }}">
                        <button class="btn btn-success">
                            Edit
                        </button>
                    </a>
                    {!! Form::open(array('url' => "HapusBuku/$buku->id_buku", 'method' => 'delete')) !!}
                    <button class="btn btn-danger">
                        Hapus
                    </button>
                    {!! Form::close() !!}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    {!! $bukus->render() !!}

@endsection

Untuk codingan create.blade.php pada folder buku silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Tambah Data Buku')
@section('content')

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {!! Form::open(array('url' => 'SimpanBuku')) !!}

    <div class="form-group">
        {!! Form::label('judul_buku', 'Judul Buku', ['class' => 'control-label']) !!}
        {!! Form::text('judul_buku', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Judul Buku']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('nama_pengarang', 'Nama Pengarang', ['class' => 'control-label']) !!}
        {!! Form::text('nama_pengarang', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nama Pengarang']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('tahun_terbit', 'Tahun Terbit', ['class' => 'control-label']) !!}
        {!! Form::number('tahun_terbit', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Tahun Terbit']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('penerbit', 'Penerbit', ['class' => 'control-label']) !!}
        {!! Form::text('penerbit', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nama Penerbit']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('jumlah_buku', 'Jumlah Buku', ['class' => 'control-label']) !!}
        {!! Form::number('jumlah_buku', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Jumlah Buku']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('nomor_rak_buku', 'Nomor Rak Buku', ['class' => 'control-label']) !!}
        {!! Form::text('nomor_rak_buku', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nomor Rak Buku']) !!}
    </div>

    {!! Form::submit('Simpan', ['class' => 'btn btn-primary']) !!}

    {!! Form::close() !!}

@endsection

Untuk codingan edit.blade.php pada folder buku silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Edit Data Buku')
@section('content')

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {!! Form::model($buku, array('url' => "UpdateBuku/$buku->id_buku", 'method' => 'put')) !!}

    <div class="form-group">
        {!! Form::label('id_buku', 'ID Buku', ['class' => 'control-label']) !!}
        {!! Form::text('id_buku', null, ['class' => 'form-control', 'placeholder' => 'Masukkan ID Buku', 'disabled' => 'true']) !!}
        {!! Form::hidden('id_buku', null) !!}
    </div>

    <div class="form-group">
        {!! Form::label('judul_buku', 'Judul Buku', ['class' => 'control-label']) !!}
        {!! Form::text('judul_buku', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Judul Buku']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('nama_pengarang', 'Nama Pengarang', ['class' => 'control-label']) !!}
        {!! Form::text('nama_pengarang', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nama Pengarang']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('tahun_terbit', 'Tahun Terbit', ['class' => 'control-label']) !!}
        {!! Form::number('tahun_terbit', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Tahun Terbit']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('penerbit', 'Penerbit', ['class' => 'control-label']) !!}
        {!! Form::text('penerbit', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nama Penerbit']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('jumlah_buku', 'Jumlah Buku', ['class' => 'control-label']) !!}
        {!! Form::number('jumlah_buku', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Jumlah Buku']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('nomor_rak_buku', 'Nomor Rak Buku', ['class' => 'control-label']) !!}
        {!! Form::text('nomor_rak_buku', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nomor Rak Buku']) !!}
    </div>

    {!! Form::submit('Update', ['class' => 'btn btn-success']) !!}

    {!! Form::close() !!}

@endsection

Setelah selesai dengan view buku, selanjutnya kita akan mencoba membuat view pada mahasiswa, untuk file index.blade.php pada folder mahasiswa silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Data Mahasiswa')
@section('content')

    <h1 class="text-center">Daftar Mahasiswa</h1>

    <a href="{{ url('TambahMahasiswa') }}">
        <button class="btn btn-primary">Tambah Data</button>
    </a>

    <p></p>

    {!! Form::open(array('url' => 'CariMahasiswa', 'class'=>'form form-inline')) !!}
    {!! Form::select('key', array(
            'npm' => 'NPM',
            'nama' => 'Nama',
            'kelas' => 'Kelas'
        ), null, ['class' => 'form-control', 'placeholder' => 'Pilih Kata Kunci']) !!}
    {!! Form::text('value', null, ['class' => 'form-control', 'placeholder' =>'Cari Data Mahasiswa']) !!}
    {!! Form::submit('Cari', ['class'=>'btn btn-default']) !!}
    {!! Form::close() !!}

    <p></p>

    <table class="table table-bordered table-hover table-responsive table-striped">
        <thead>
        <tr>
            <th class="text-center">NPM</th>
            <th class="text-center">Nama</th>
            <th class="text-center">Kelas</th>
            <th class="text-center">Jenis Kelamin</th>
            <th class="text-center">Alamat</th>
            <th class="text-center">Aksi</th>
        </tr>
        </thead>
        <tbody>
        @foreach($mahasiswas as $mahasiswa)
            <tr>
                <td>{{ $mahasiswa->npm }}</td>
                <td>{{ $mahasiswa->nama }}</td>
                <td>{{ $mahasiswa->kelas }}</td>
                <td>{{ $mahasiswa->jenis_kelamin }}</td>
                <td>{{ $mahasiswa->alamat }}</td>
                <td class="text-center">
                    <a href="{{ url("EditMahasiswa/$mahasiswa->npm") }}">
                        <button class="btn btn-success">
                            Edit
                        </button>
                    </a>
                    {!! Form::open(array('url' => "HapusMahasiswa/$mahasiswa->npm", 'method' => 'delete')) !!}
                    <button class="btn btn-danger">
                        Hapus
                    </button>
                    {!! Form::close() !!}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    {!! $mahasiswas->render() !!}

@endsection

Untuk codingan create.blade.php pada folder mahasiswa silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Tambah Data Mahasiswa')
@section('content')

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {!! Form::open(array('url' => 'SimpanMahasiswa')) !!}

    <div class="form-group">
        {!! Form::label('npm', 'NPM', ['class' => 'control-label']) !!}
        {!! Form::text('npm', null, ['class' => 'form-control', 'placeholder' => 'Masukkan NPM']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('nama', 'Nama', ['class' => 'control-label']) !!}
        {!! Form::text('nama', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nama']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('kelas', 'Kelas', ['class' => 'control-label']) !!}
        {!! Form::text('kelas', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Kelas']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('jenis_kelamin', 'Jenis Kelamin', ['class' => 'control-label']) !!}
        {!! Form::select('jenis_kelamin', array('pria' => 'Pria', 'wanita' => 'Wanita'), null, ['class' => 'form-control', 'placeholder' => 'Pilih Jenis Kelamin']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('alamat', 'Alamat', ['class' => 'control-label']) !!}
        {!! Form::textarea('alamat', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Alamat']) !!}
    </div>

    {!! Form::submit('Simpan', ['class' => 'btn btn-primary']) !!}

    {!! Form::close() !!}

@endsection

Untuk codingan edit.blade.php pada folder mahasiswa silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Edit Data Mahasiswa')
@section('content')

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {!! Form::model($mahasiswa, array('url' => "UpdateMahasiswa/$mahasiswa->npm", 'method' => 'put')) !!}

    <div class="form-group">
        {!! Form::label('npm', 'NPM', ['class' => 'control-label']) !!}
        {!! Form::text('npm', null, ['class' => 'form-control', 'placeholder' => 'Masukkan NPM', 'disabled' => 'true']) !!}
        {!! Form::hidden('npm', null) !!}
    </div>

    <div class="form-group">
        {!! Form::label('nama', 'Nama', ['class' => 'control-label']) !!}
        {!! Form::text('nama', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Nama']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('kelas', 'Kelas', ['class' => 'control-label']) !!}
        {!! Form::text('kelas', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Kelas']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('jenis_kelamin', 'Jenis Kelamin', ['class' => 'control-label']) !!}
        {!! Form::select('jenis_kelamin', array('pria' => 'Pria', 'wanita' => 'Wanita'), null, ['class' => 'form-control', 'placeholder' => 'Pilih Jenis Kelamin']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('alamat', 'Alamat', ['class' => 'control-label']) !!}
        {!! Form::textarea('alamat', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Alamat']) !!}
    </div>

    {!! Form::submit('Update', ['class' => 'btn btn-success']) !!}

    {!! Form::close() !!}

@endsection

Langkah yang terakhir, kita akan mengubah codingan view yang berada pada folder peminjaman, silahkan ubah file index.blade.php di dalam folder peminjaman seperti berikut.

@extends('layouts.app')
@section('title', 'Data Peminjaman Buku')
@section('content')

    <h1 class="text-center">Daftar Peminjaman Buku</h1>

    <a href="{{ url('TambahPeminjaman') }}">
        <button class="btn btn-primary">Tambah Data</button>
    </a>

    <p></p>

    {!! Form::open(array('url' => 'CariPeminjaman', 'class'=>'form form-inline')) !!}
    {!! Form::select('key', array(
            'tanggal_peminjaman' => 'Tanggal Peminjaman',
            'tb_mahasiswa.npm' => 'NPM',
            'tb_buku.id_buku' => 'ID Buku'
        ), null, ['class' => 'form-control', 'placeholder' => 'Pilih Kata Kunci']) !!}
    {!! Form::text('value', null, ['class' => 'form-control', 'placeholder' =>'Cari Data Peminjaman Buku']) !!}
    {!! Form::submit('Cari', ['class'=>'btn btn-default']) !!}
    {!! Form::close() !!}

    <p></p>

    <table class="table table-bordered table-hover table-responsive table-striped">
        <thead>
        <tr>
            <th class="text-center">NPM</th>
            <th class="text-center">Nama</th>
            <th class="text-center">Kelas</th>
            <th class="text-center">Tanggal Peminjaman</th>
            <th class="text-center">Tanggal Pengembalian</th>
            <th class="text-center">Judul Buku</th>
            <th class="text-center">Pengarang</th>
            <th class="text-center">No Rak Buku</th>
            <th class="text-center">Aksi</th>
        </tr>
        </thead>
        <tbody>
        @foreach($peminjamans as $peminjaman)
            <tr>
                <td>{{ $peminjaman->npm }}</td>
                <td>{{ $peminjaman->nama }}</td>
                <td>{{ $peminjaman->kelas }}</td>
                <td>{{ $peminjaman->tanggal_peminjaman }}</td>
                <td>{{ $peminjaman->tanggal_batas_pengembalian }}</td>
                <td>{{ $peminjaman->judul_buku }}</td>
                <td>{{ $peminjaman->nama_pengarang }}</td>
                <td>{{ $peminjaman->nomor_rak_buku }}</td>
                <td class="text-center">
                    <a href="{{ url("EditPeminjaman/$peminjaman->id_peminjaman") }}">
                        <button class="btn btn-success">
                            Edit
                        </button>
                    </a>
                    {!! Form::open(array('url' => "HapusPeminjaman/$peminjaman->id_peminjaman", 'method' => 'delete')) !!}
                    <button class="btn btn-danger">
                        Hapus
                    </button>
                    {!! Form::close() !!}
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    {!! $peminjamans->render() !!}

@endsection

Untuk codingan create.blade.php pada folder peminjaman silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Tambah Data Peminjaman')
@section('content')

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {!! Form::open(array('url' => 'SimpanPeminjaman')) !!}

    <div class="form-group">
        {!! Form::label('tanggal_peminjaman', 'Tanggal Peminjaman', ['class' => 'control-label']) !!}
        {!! Form::date('tanggal_peminjaman', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Tanggal Peminjaman']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('tanggal_batas_pengembalian', 'Tanggal Batas Pengembalian', ['class' => 'control-label']) !!}
        {!! Form::date('tanggal_batas_pengembalian', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Tanggal Batas Pengembalian']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('npm', 'Mahasiswa', ['class' => 'control-label']) !!}
        {!! Form::select('npm', $mahasiswas, null, ['class' => 'form-control', 'placeholder' => 'Pilih Mahasiswa']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('id_buku', 'Buku', ['class' => 'control-label']) !!}
        {!! Form::select('id_buku', $bukus, null, ['class' => 'form-control', 'placeholder' => 'Pilih Buku']) !!}
    </div>

    {!! Form::submit('Simpan', ['class' => 'btn btn-primary']) !!}

    {!! Form::close() !!}

@endsection

Untuk codingan edit.blade.php pada folder peminjaman silahkan isikan codingan seperti berikut.

@extends('layouts.app')
@section('title', 'Edit Data Peminjaman')
@section('content')

    @if (count($errors) > 0)
        <div class="alert alert-danger">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    {!! Form::model($peminjaman, array('url' => "UpdatePeminjaman/$peminjaman->id_peminjaman", 'method' => 'put')) !!}

    <div class="form-group">
        {!! Form::label('id_peminjaman', 'ID Peminjaman', ['class' => 'control-label']) !!}
        {!! Form::text('id_peminjaman', null, ['class' => 'form-control', 'placeholder' => 'Masukkan ID Peminjaman', 'disabled' => 'true']) !!}
        {!! Form::hidden('id_peminjaman', null) !!}
    </div>

    <div class="form-group">
        {!! Form::label('tanggal_peminjaman', 'Tanggal Peminjaman', ['class' => 'control-label']) !!}
        {!! Form::date('tanggal_peminjaman', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Tanggal Peminjaman']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('tanggal_batas_pengembalian', 'Tanggal Batas Pengembalian', ['class' => 'control-label']) !!}
        {!! Form::date('tanggal_batas_pengembalian', null, ['class' => 'form-control', 'placeholder' => 'Masukkan Tanggal Batas Pengembalian']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('npm', 'Mahasiswa', ['class' => 'control-label']) !!}
        {!! Form::select('npm', $mahasiswas, null, ['class' => 'form-control', 'placeholder' => 'Pilih Mahasiswa']) !!}
    </div>

    <div class="form-group">
        {!! Form::label('id_buku', 'Buku', ['class' => 'control-label']) !!}
        {!! Form::select('id_buku', $bukus, null, ['class' => 'form-control', 'placeholder' => 'Pilih Buku']) !!}
    </div>

    {!! Form::submit('Update', ['class' => 'btn btn-success']) !!}

    {!! Form::close() !!}

@endsection

Silahkan akses aplikasi anda di http://perpustakaan.com:8080 kemudian lakukan registrasi, setelah selesai, maka lakukan login. Berikut adalah output untuk bagian register.

Screenshot from 2016-05-23 09-41-17.png

Berikut adalah output untuk bagian login user.

Screenshot from 2016-05-23 09-41-32.png

Berikut adalah output untuk halaman data buku.

Screenshot from 2016-05-23 09-41-54.png

Berikut adalah output untuk halaman data mahasiswa.

Screenshot from 2016-05-23 09-41-58.png

Berikut adalah output untuk halaman data peminjaman buku.

Screenshot from 2016-05-23 09-42-03.png

Setelah menulis 3 artikel mengenai laravel, aplikasi perpustakaan dengan menggunakan laravel akhirnya selesai juga :D. Sekian tutorial belajar laravel bagian 3 dan Terima kasih :). Untuk source code lengkap, penulis publish di Belajar Laravel.

Rizki Mufrizal Reading time ~12 minutes

Pada artikel sebelumnya, penulis telah menjelaskan bagaimana cara melakukan setup project laravel, mulai dari konfigurasi vagrant hingga mengenerate project laravel. Pada artikel kali ini, penulis akan membahas mengenai database migration, seed dan model pada laravel.

Konfigurasi Vim Pada Vagrant

Sebelum memulai ngoding, alangkah baiknya kita melakukan konfigurasi terlebih dahulu terhadap text editor yang akan kita gunakan. Vim merupakan salah satu text editor yang sangat banyak digunakan, terdapat banyak plugin yang dapat kita gunakan untuk memudahkan dalam proses development.

Tahap pertama, kita akan melakukan konfigurasi plugin pathogen pada vim, silahkan jalankan perintah berikut.

mkdir -p ~/.vim/autoload ~/.vim/bundle && \
curl -LSso ~/.vim/autoload/pathogen.vim https://tpo.pe/pathogen.vim

Setelah selesai, langkah selanjutnya silahkan lakukan clone plugin berikut per baris.

git clone git://github.com/tpope/vim-sensible.git ~/.vim/bundle/vim-sensible
git clone git://github.com/altercation/vim-colors-solarized.git ~/.vim/bundle/vim-colors-solarized
git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vim
git clone https://github.com/rstacruz/sparkup.git ~/.vim/bundle/sparkup
git clone https://github.com/ctrlpvim/ctrlp.vim.git ~/.vim/bundle/ctrlp.vim

Silahkan atur thema terminal anda menjadi solarized dark. Sekarang silahkan buka file .vimrc dengan vim, jalankan perintah berikut.

vim ~/.vimrc

Kemudian masukkan script untuk konfigurasi seperti berikut.

execute pathogen#infect()
syntax on

set nocompatible
filetype plugin indent on

syntax enable
let g:solarized_termcolors=256
autocmd BufNewFile,BufReadPost *.md set filetype=markdown

set ruler
set number

set expandtab
set shiftwidth=4
set softtabstop=4
set autoindent

set colorcolumn=+1

set autoread

set splitright
set splitbelow

let g:SuperTabClosePreviewOnPopupClose = 1

set rtp+=~/.vim/bundle/vundle
set runtimepath^=~/.vim/bundle/ctrlp.vim
call vundle#rc()
Bundle 'gmarik/vundle'
Bundle 'altercation/vim-colors-solarized'
Bundle 'ctrlpvim/ctrlp.vim'
Bundle 'rstacruz/sparkup'

Jika berhasil, maka output yang diharapkan adalah seperti berikut, vim akan memunculkan warna solarized dark dan juga menampilkan penomoran.

Screenshot from 2016-05-14 22-15-15.png

Belajar Perintah Vim

Sebelum kita lanjut, kita harus benar - benar bisa terlebih dahulu menggunakan vim :D. Tidak seperti text editor biasa yang langsung kita gunakan, vim mempunya beberapa perintah diantaranya adalah.

  • vim nama file biasanya digunakan untuk membuat atau mengubah isi dari file tersebut.
  • i atau insert berfungsi agar kita dalam melakukan perubahan pada file yang sedang aktif dan akan muncul tulisan insert dibagian bawah.
  • esc untuk keluar dari mode edit document atau keluar dari perintah i sehingga document tidak dapat diubah.
  • :w atau write berfungsi untuk menyimpan sebuah document yang telah kita buat atau yang telah kita ubah, jika anda telah selesai melakukan perubahan silahkan tekan esc lalu ketikan perintah :w maka document akan tersimpan.
  • :q atau quit artinya anda keluar dari text editor.
  • :wq atau write and quit artinya anda akan keluar dari text editor dan menyimpan perubahan file.
  • :q! quit artinya anda keluar dari text editor tanpa menyimpan perubahan pada document.
  • :sp nama file split horisontal artinya anda dapat membagi screen window editor anda berdasarkan horisontal.
  • :vsp nama file split vertikal artinya anda dapat membagi screen window editor anda berdasarkan vertikal.
  • ctrl + w + w berfungsi untuk berpindah dari 1 window ke window yang lain.

Membuat Database Migration Pada Laravel

Setelah selesai belajar vim, langkah selanjutnya kita akan mencoba membuat database migration pada laravel. Database migration merupakan salah satu fitur dari laravel untuk mempermudah developer dalam mengembangkan schema database yang ingin digunakan. Di dalam bahasa pemrograman lain juga tersedia database migration seperti ruby on rails pada ruby, flyway pada java dan lain - lain.

Karena project yang akan kita buat adalah sebuah perpustakaan maka disini kita akan membuat database migration mengenai perpustakaan. Berikut adalah ERD dari pada aplikasi perpustakaan yang akan kita buat.

Screenshot from 2016-05-18 21-49-10.png

Bagi yang masih bingung cara membaca ERD tersebut silahkan baca artikel belajar membuat foreign key pada h2 database. Nah setelah mengetahui tentang ERD nya, selanjutnya kita akan membuat database migration dengan menggunakan perintah artisan pada laravel. Untuk membuat database migration untuk tabel buku maka jalankan perintah berikut.

php artisan make:migration create_buku_table --create=tb_buku

Jika berhasil maka outputnya akan seperti berikut.

Screenshot from 2016-05-18 18-12-54.png

Langkah selanjutnya untuk membuat database migration untuk tabel mahasiswa, silahkan jalankan perintah berikut.

php artisan make:migration create_mahasiswa_table --create=tb_mahasiswa

Untuk tabel peminjaman, silahkan jalankan perintah berikut.

php artisan make:migration create_peminjaman_table --create=tb_peminjaman

Setelah selesai, tahap selanjutnya kita akan mengubah schema dari tabel - tabel yang telah kita buat. Silahkan buka file database migration untuk tabel buku yang berada di dalam folder database/migrations, biasanya filenya mengikuti format tanggal dan waktu pada saat membuat database migration, contohnya seperti berikut.

2016_05_18_111241_create_buku_table.php

dimana 2016 adalah tahun, 05 adalah bulan, 18 adalah tanggal dan 111241 adalah sebagai waktu. Silahkan buka file database migration untuk tabel buku dengan perintah.

vim database/migrations/xxxx_xx_xx_xxxxxx_create_buku_table.php

Silahkan ganti dan sesuaikan huruf x dengan tanggal dan waktu pada saat file dibuat. Setelah dibuka, lalu silahkan ubah codingannya seperti berikut.

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateBukuTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tb_buku', function (Blueprint $table) {
            $table->uuid('id_buku');
            $table->string('judul_buku', 50);
            $table->string('nama_pengarang', 50);
            $table->integer('tahun_terbit');
            $table->string('penerbit', 50);
            $table->integer('jumlah_buku');
            $table->string('nomor_rak_buku', 50);
            $table->timestamps();

            $table->primary('id_buku');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tb_buku');
    }
}

Dari codingan diatas dapat dilihat bahwa kita akan membuat sebuah tabel buku dengan nama tabel tb_buku. Disini penulis menggunakan uuid sebagai primary key sehingga tidak akan terjadi kerangkapan data. Langkah selanjutnya silahkan buka database migration untuk tabel mahasiswa dengan perintah.

vim database/migrations/xxxx_xx_xx_xxxxxx_create_mahasiswa_table.php

Kemudian ubah codingannya seperti berikut.

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateMahasiswaTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tb_mahasiswa', function (Blueprint $table) {
            $table->string('npm', 8);
            $table->string('nama', 50);
            $table->string('kelas', 6);
            $table->enum('jenis_kelamin', ['pria', 'wanita']);
            $table->text('alamat');
            $table->timestamps();

            $table->primary('npm');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tb_mahasiswa');
    }
}

Struktur codingan diatas tidak ada yang berbeda dengan codingan sebelumnya, hanya saja disini terlihat berbeda pada bagian jenis kelamin, dimana pada bagian jenis kelamin kita akan menggunakan enum, mengapa enum ? dikarenakan jenis kelamin merupakan sebuah pilihan dan penulis ingin menjaga agar datanya tetap konsisten, jadi jika kita telah menetapkan pria dan wanita adalah sebagai jenis kelamin, maka user tidak dapat melakukan inputan selain pria dan wanita meskipun user ingin melakukan inputan data laki - laki dan perempuan, ini disebabkan data laki - laki dan perempuan tidak terdapat di dalam list enum. Selanjutnya silahkan buka database migration untuk tabel peminjaman, silahkan jalankan perintah berikut.

vim database/migrations/xxxx_xx_xx_xxxxxx_create_peminjaman_table.php

Kemudian ubah codingannya seperti berikut.

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePeminjamanTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tb_peminjaman', function (Blueprint $table) {
            $table->uuid('id_peminjaman');
            $table->date('tanggal_peminjaman');
            $table->date('tanggal_batas_pengembalian');
            $table->timestamps();

            $table->primary('id_peminjaman');

            //relasi foreign key
            $table->string('npm', 8);
            $table->char('id_buku', 36);

            $table->foreign('npm')
                ->references('npm')
                ->on('tb_mahasiswa')
                ->onDelete('cascade')
                ->onUpdate('cascade');

            $table->foreign('id_buku')
                ->references('id_buku')
                ->on('tb_buku');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tb_peminjaman');
    }
}

Codingan untuk tabel peminjaman lumayan berbeda dengan tabel - tabel sebelumnya, mengapa demikian ? dikarenakan disini kita menggunakan foreign key untuk menghubungkan antara tabel buku, barang dan peminjaman. Relasi antara tabel mahasiswa dan peminjaman adalah one to many cascade sehingga apabila data mahasiswa dihapus maka secara otomatis data pada tabel peminjaman juga akan dihapus secara otomatis karena sifat cascade. Berbeda dengan tabel buku, tabel buku memiliki relasi one to many terhadap tabel peminjaman, akan tetapi tidak cascade sehingga apabila tabel buku dihapus, maka tabel peminjaman tidak ikut dihapus.

Setelah semuanya selesai, kita akan menjalankan migration tersebut. Akan tetapi sebelum menjalankan migration, kita harus terlebih dahulu melakukan konfigurasi pada environment. Silahkan buka file .env dengan perintah berikut.

vim .env

Kemudian ubah konfigurasi untuk koneksi database mysql menjadi seperti berikut.

Note : yang diubah hanyalah konfigurasi koneksi database mysql saja, jangan melakukan perubahan pada konfigurasi lain, terutama pada konfigurasi APP_KEY, karena jika key yang digunakan tidak sesuai dengan key yang digenerate pada saat proses pembuatan project maka akan muncul error key tidak valid.

APP_ENV=local
APP_DEBUG=true
APP_KEY=base64:ATM10q5JXcL37xckWACJ7xEIImqAeIRaJR0nRR6RT2A=
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=perpustakaan
DB_USERNAME=root
DB_PASSWORD=root

CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

Setelah selesai, lakukan akses database mysql dengan perintah berikut.

mysql -u root -p

Kemudian masukkan password root. Sebenarnya kita menggunakan database mariadb, bukan database mysql akan tetapi perintah yang digunakan adalah sama. Kemudian silahkan buat database perpustakaan dengan perintah berikut.

create database perpustakaan;

Setelah selesai, silahkan keluar dari mysql dengan perintah exit. Kemudian silahkan jalankan database migration dengan perintah berikut.

php artisan migrate

Jika berhasil maka akan muncul output seperti berikut.

root@vagrant-ubuntu-trusty-64:/home/vagrant/Projects/Aplikasi-Perpustakaan# php artisan migrate
Migration table created successfully.
Migrated: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_100000_create_password_resets_table
Migrated: 2016_05_18_111241_create_buku_table
Migrated: 2016_05_18_111523_create_mahasiswa_table
Migrated: 2016_05_18_111553_create_peminjaman_table

Membuat Model Pada Laravel

Pada artikel sebelumnya, penulis telah menjelaskan bahwa laravel menggunakan pendekatan mvc pada projectnya. Nah yang pertama kali kita buat adalah model, dimana model ini merupakan represntasi dari pada tabel atau data yang terdapat pada database. Karena pada database migration terdapat 3 tabel maka kita harus membuat 3 model untuk mewakili tabel - tabel yang ada di database migration.

Untuk membuat model untuk buku, silahkan jalankan perintah berikut.

php artisan make:model Buku

Di bagian model, kita harus mengubah codingan sedikit dikarenakan nama tabel yang akan kita gunakan berbeda, silahkan buka model buku pada folder app dengan perintah.

vim app/Buku.php

Kemudian ubah codingannya menjadi seperti berikut.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Buku extends Model
{
    protected $table = 'tb_buku';

    public function peminjamans()
    {
        return $this->hasMany('App\Peminjaman');
    }
}

Wah beda banget sama codingan php biasanya :O, ada namespace dan use. Yups, sebenarnya tidak banyak perbedaan, mungkin jika anda awalnya pernah belajar java, di java terdapat package dan dapat melakukan import maka di php juga bisa akan tetapi hanya berbeda pada penamaan nya saja. Jika di java terdapat package maka di php kita menggunakan namespace, jika di java kita mengenal import maka di php kita mengenal use :). Pada model buku ini, kita mendeklarasikan nama tabel dimana $table ini sebenarnya merupakan override dari class model sehingga kita mengubah nama default dari tabel yang akan kita gunakan. Function peminjamans merupakan function yang penulis buat sendiri dengan tujuan karena model buku mempunya relasi dengan model peminjaman dan relasi ini adalah one to many sehingga pada tabel master yaitu buku dapat memiliki banyak peminjaman.

Untuk membuat model mahasiswa, silahkan jalankan perintah berikut.

php artisan make:model Mahasiswa

Kemudian ubah codingan pada model mahasiswa seperti berikut.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Mahasiswa extends Model
{
    protected $table = 'tb_mahasiswa';

    public function peminjamans()
    {
        return $this->hasMany('App\Peminjaman');
    }
}

Untuk membuat model peminjaman, silahkan jalankan perintah berikut.

php artisan make:model Peminjaman

Kemudian ubah codingan pada model peminjaman seperti berikut.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Peminjaman extends Model
{
    protected $table = 'tb_peminjaman';

    public function buku()
    {
        return $this->belongsTo('App\Buku');
    }

    public function mahasiswa()
    {
        return $this->belongsTo('App\Mahasiswa');
    }
}

Nah berbeda dengan codingan sebelumnya, karena model peminjaman ini hanya memiliki 1 buku dan 1 mahasiswa maka dia harus menggunakan perintah belongsTo untuk melakukan relasi dengan model buku dan mahasiswa.

Membuat Database Seed Pada Laravel

Setelah selesai dengan model, langkah selanjutnya adalah membuat database seed pada laravel. Database seed ini berfungsi sebagai data awal atau bisa disebut sebagai data dami. Biasanya database seed ini digunakan untuk melakukan testing pada aplikasi atau untuk melakukan sebuah uji coba dengan jumlah data yang diperlukan. Karena terdapat 3 model maka kita membuat database seed sebanyak 3, dimana untuk membuat database seed untuk model buku, silahkan jalankan perintah berikut.

php artisan make:seeder BukuTableSeeder

Untuk database seed model mahasiswa, silahkan jalankan perintah berikut.

php artisan make:seeder MahasiswaTableSeeder

Untuk database seed model peminjaman, silahkan jalankan perintah berikut.

php artisan make:seeder PeminjamanTableSeeder

Langkah selanjutnya, silahkan buka file ModelFactory.php yang ada di dalam folder database/factories kemudian silahkan tambahkan codingan seperti berikut.

<?php

/*
|--------------------------------------------------------------------------
| Model Factories
|--------------------------------------------------------------------------
|
| Here you may define all of your model factories. Model factories give
| you a convenient way to create models for testing and seeding your
| database. Just tell the factory how a default model should look.
|
*/

$factory->define(App\User::class, function (Faker\Generator $faker) {
    return [
        'name' => $faker->name,
        'email' => $faker->safeEmail,
        'password' => bcrypt(str_random(10)),
        'remember_token' => str_random(10),
    ];
});

//seeder buku
$factory->define(App\Buku::class, function (Faker\Generator $faker) {
    return [
        'id_buku' => $faker->uuid,
        'judul_buku' => $faker->sentence($nbWords = 3, $variableNbWords = true),
        'nama_pengarang' => $faker->name,
        'tahun_terbit' => $faker->year,
        'penerbit' => $faker->sentence($nbWords = 3, $variableNbWords = true),
        'jumlah_buku' => $faker->randomDigit,
        'nomor_rak_buku' => $faker->numerify('buku-###')
    ];
});

//seeder mahasiswa
$factory->define(App\Mahasiswa::class, function (Faker\Generator $faker) {
    return [
        'npm' => $faker->numberBetween($min = 00000000, 99999999),
        'nama' => $faker->name,
        'kelas' => $faker->numerify('k-##'),
        'jenis_kelamin' => $faker->randomElement($array = array('pria', 'wanita')),
        'alamat' => $faker->address
    ];
});

//seeder peminjaman
$factory->define(App\Peminjaman::class, function (Faker\Generator $faker) {
    return [
        'id_peminjaman' => $faker->uuid,
        'tanggal_peminjaman' => $faker->date(),
        'tanggal_batas_pengembalian' => $faker->date(),
        'npm' => factory(App\Mahasiswa::class)->create()->npm,
        'id_buku' => factory(App\Buku::class)->create()->id_buku
    ];
});

Untuk melakukan inisialisasi data, kita dapat melakukan nya di bagian model factory, dimana data akan secara otomatis diinisialisasikan oleh library faker. Library faker dapat melakukan generate data yang kita inginkan misalnya seperti nama orang, alamat, penomoran, uuid dan lain sebagainya. Dapat dilihat, bahwa di dalam class model factory, penulis membuat 3 seed untuk masing - masing model, nantinya datanya akan secara otomatis diinsert ke database. Pada bagian peminjaman terdapat perbedaan yaitu pada bagian npm dan id_buku, perbedaan ini dikarenakan pada saat melakukan insert pada peminjaman, maka data buku dan data mahasiswa diwajibkan terlebih dahulu ada. Apabila database seed peminjaman dijalankan maka secara otomatis akan dibuatkan data mahasiswa dan buku terlebih dahulu baru akan dibuatkan data peminjaman.

Kemudian silahkan buka file BukuTableSeeder.php yang terdapat di dalam folder database/seeds kemudian isikan codingan seperti berikut.

<?php

use Illuminate\Database\Seeder;

class BukuTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\Buku::class, 20)->create();
    }
}

Bisa dilihat bahwa pada class ini, jika database seed dijalankan maka akan ada sebanyak 20 data buku yang akan diinput ke database. Hal ini juga berlaku pada database seed mahasiswa dan peminjaman, untuk database seed mahasiswa, silahkan buka file MahasiswaTableSeeder.php kemudian ubah codingannya menjadi seperti berikut.

<?php

use Illuminate\Database\Seeder;

class MahasiswaTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\Mahasiswa::class, 20)->create();
    }
}

Setelah selesai, silahkan buka file PeminjamanTableSeeder.php kemudian ubah codingannya menjadi seperti berikut.

<?php

use Illuminate\Database\Seeder;

class PeminjamanTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        factory(App\Peminjaman::class, 20)->create();
    }
}

Setelah selesai, langkah selanjutnya adalah kita harus mendeklarasikan masing - masing database seed yang telah kita buat ke dalam konfigurasi database seed. Silahkan buka file DatabaseSeeder.php yang terdapat di dalam folder database/seeds kemudian ubah codingannya menjadi seperti berikut.

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        $this->call(BukuTableSeeder::class);
        $this->call(MahasiswaTableSeeder::class);
        $this->call(PeminjamanTableSeeder::class);
    }
}

Akhirnya kita berada pada tahap yang terakhir :D. Tahap terakhir adalah kita akan menjalankan database seed yang telah kita buat sebelumnya :). Untuk menjalankan database seed silahkan jalankan perintah berikut.

php artisan db:seed

Jika berhasil maka akan muncul output seperti berikut.

root@vagrant-ubuntu-trusty-64:/home/vagrant/Projects/Aplikasi-Perpustakaan# php artisan db:seed
Seeded: BukuTableSeeder
Seeded: MahasiswaTableSeeder
Seeded: PeminjamanTableSeeder

Atau jika anda ingin melakukan database migration sekaligus dengan database seed juga bisa dengan menjalankan perintah berikut.

php artisan migrate:refresh --seed

Berikut adalah output jika anda berhasil menjalankan perintah diatas.

root@vagrant-ubuntu-trusty-64:/home/vagrant/Projects/Aplikasi-Perpustakaan# php artisan migrate:refresh --seed
Rolled back: 2016_05_18_111553_create_peminjaman_table
Rolled back: 2016_05_18_111523_create_mahasiswa_table
Rolled back: 2016_05_18_111241_create_buku_table
Rolled back: 2014_10_12_100000_create_password_resets_table
Rolled back: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_100000_create_password_resets_table
Migrated: 2016_05_18_111241_create_buku_table
Migrated: 2016_05_18_111523_create_mahasiswa_table
Migrated: 2016_05_18_111553_create_peminjaman_table
Seeded: BukuTableSeeder
Seeded: MahasiswaTableSeeder
Seeded: PeminjamanTableSeeder

Jika anda masih penasaran dengan database seed apakah telah diinput datanya atau belum, silahkan lakukan pengecekan pada database mariadb anda :).

Sekian tutorial belajar laravel bagian 2, untuk bagian selanjutnya InsyaAllah akan segera di publish dan Terima kasih :).

Rizki Mufrizal Reading time ~4 minutes

Apa Itu Laravel ?

Laravel adalah framework berbasis PHP yang open source, menggunakan konsep model–view–controller (MVC). Laravel berada dibawah lisensi MIT.

Beberapa tahun yang lalu, framework laravel tidak begitu terkenal di dalam dunia pemrograman php, akan tetapi dengan perkembangan teknologi tidak dapat dipungkiri sehingga framework laravel berkembang begitu pesat. Terdapat banyak kelebihan di dalam framework laravel salah satu nya adalah memungkinkan kita menggunakan konsep orm, dimana di dalam laravel biasanya kita menggunakan eloquent orm untuk mengabstraksikan antara model object dengan database.

Singkat cerita, penulis ingin belajar mengenai framework laravel, biasanya penulis menggunakan framework codeigniter untuk membuat aplikasi. Framework laravel merupakan framework yang telah banyak digunakan untuk aplikasi production, dan sangat dihandalkan untuk urusan keamanan sebuah website. Jika dilihat dari case study, framework laravel merupakan framework yang bisa dikatakan lumayan lama jika ingin anda pelajari dikarenakan berbagai konfigurasi dan pemahaman yang harus anda kuasai. Pada artikel ini, penulis akan membagi beberapa bagian dikarenakan artikel akan sangat panjang jika membahas laravel hanya pada 1 bagian artikel saja.

Setup Project

Langkah yang pertama kali kita lakukan adalah melakukan setup project. Untuk mempermudah tahap development, kita akan menggunakan beberapa tool berikut diantaranya adalah

  1. Vagrant, bagi yang belum mengerti apa itu vagrant, silahkan lihat di artikel belajar vagrant.
  2. Vim merupakan editor yang akan kita gunakan

sedangkan tool yang lain seperti composer, hhvm, nginx dan lain sebagainya akan kita lakukan konfigurasi pada vagrant.

Membuat Konfigurasi Vagrant

Silahkan buat sebuah folder Belajar-Laravel, kemudian akses folder tersebut dengan menggunakan terminal. Lalu kita akan melakukan inisialisasi vagrant dengan perintah.

vagrant init

maka akan dibentuk sebuah file yaitu Vagrantfile, silahkan buka file tersebut kemudian ubah seperti berikut.

Vagrant.configure(2) do |config|
  config.vm.box = 'ubuntu/trusty64'
  config.vm.provider 'virtualbox' do |v|
    v.memory = 2048
  end
  config.vm.provision 'shell', path: 'setup.sh'
  config.vm.network 'forwarded_port', guest: 80, host: 8080
  config.vm.synced_folder 'Projects', '/home/vagrant/Projects', create: true, owner: 'www-data', group: 'www-data'
end

kemudian silahkan buat sebuah file dengan nama setup.sh untuk konfigurasi provisioning, kemudian isikan codingan shell seperti berikut.

#!/bin/sh
#
# Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
#
# Distributed under terms of the MIT license.
#

echo "proses provisioning"

echo "konfigurasi sources dan environment"
cp /vagrant/configuration/sources.list /etc/apt/sources.list
cp /vagrant/configuration/environment /etc/environment

echo "Tambah Repo Git"
sudo add-apt-repository -y ppa:git-core/ppa

echo "Tambah Repo Nginx"
add-apt-repository -y ppa:nginx/stable

echo "Tambah Repo Mariadb"
apt-get install software-properties-common
apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0xcbcb082a1bb943db
add-apt-repository 'deb [arch=amd64,i386] http://mariadb.biz.net.id/repo/10.1/ubuntu trusty main'

echo "Tambah Repo HHVM"
apt-key adv --recv-keys --keyserver hkp://keyserver.ubuntu.com:80 0x5a16e7281be7a449
add-apt-repository "deb http://dl.hhvm.com/ubuntu $(lsb_release -sc) main"

echo "Tambah Repo Node JS"
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

apt-get update
apt-get upgrade -y
apt-get dist-upgrade -y

echo "Konfigurasi Mariadb"
apt-get install -y debconf-utils
echo mariadb-server-10.1 mysql-server/root_password password root | debconf-set-selections
echo mariadb-server-10.1 mysql-server/root_password_again password root | debconf-set-selections

apt-get install -y git nginx mariadb-server mariadb-client hhvm vim nodejs

echo "Konfigurasi Virtual Host Nginx"
cp /vagrant/configuration/nginx-vhost /etc/nginx/sites-available/belajarlaravel
ln -s /etc/nginx/sites-available/belajarlaravel /etc/nginx/sites-enabled/
rm /etc/nginx/sites-enabled/default

echo "Konfigurasi HHVM"
/usr/share/hhvm/install_fastcgi.sh
update-rc.d hhvm defaults
/usr/bin/update-alternatives --install /usr/bin/php php /usr/bin/hhvm 60
service nginx restart

echo "Install Composer"
curl -sS https://getcomposer.org/installer | php
mv /home/vagrant/composer.phar /usr/local/bin/composer

Kemudian untuk environment pada vagrant silahkan buat sebuah folder dengan nama configuration dan buat lah file environment, nginx-vhost, sources.list dan .vimrc di dalam nya. Untuk file environment, silahkan isikan dengan value seperti berikut.

PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"
LC_CTYPE="en_US.UTF-8"
LC_ALL="en_US.UTF-8"

untuk file nginx-vhost seperti berikut.

server {
  listen 80 default_server;
  listen [::]:80 default_server;
  root /home/vagrant/Projects/Aplikasi-Perpustakaan/public;
  index index.html index.php index.htm index.nginx-debian.html;

  server_name perpustakaan.com;
  include hhvm.conf;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }
}

dan yang terakhir untuk file sources.list isikan seperti berikut.

deb http://kambing.ui.ac.id/ubuntu trusty main universe multiverse
deb http://kambing.ui.ac.id/ubuntu trusty-updates main universe multiverse
deb http://security.ubuntu.com/ubuntu trusty-security main universe multiverse

Nah konfigurasi vagrant telah selesai, silahkan jalankan dengan perintah

vagrant up

untuk melakukan akses silahkan jalankan perintah berikut.

vagrant ssh

Membuat Project Laravel Dengan Composer

Untuk membuat project laravel, kita dapat menggunakan composer. Akses folder Projects yang ada di home vagrant melalui terminal. Kemudian jalankan perintah berikut untuk masuk ke mode root.

sudo su

INFO : Semua perintah disini akan menggunakan hak akses root dikarenakan folder Projects diberikan hak akses root.

lalu jalankan perintah berikut untuk membuat project laravel dengan menggunakan composer.

composer create-project --prefer-dist laravel/laravel Aplikasi-Perpustakaan

secara otomatis, composer akan membuatkan anda sebuah project laravel dengan nama Aplikasi-Perpustakaan.

Setelah selesai, yang perlu diperhatikan lagi adalah bahwa agar project laravel benar - benar dapat menggunakan autocomplete pada vim, kita akan menggunakan laravel IDE helper. Silahkan buka kembali terminal pada vagrant anda, silahkan akses folder project laravel anda, lalu ketikan perintah berikut.

composer require barryvdh/laravel-ide-helper

Jika telah selesai, silahkan buka file app.php yang berada di dalam folder config/ dengan perintah berikut.

vim config/app.php

Kemudian cari array providers silahkan tambahkan codingan seperti berikut.

Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class

maka hasilnya akan seperti berikut.

<?php
  'providers' => [

      /*
       * Laravel Framework Service Providers...
       */

      Illuminate\Auth\AuthServiceProvider::class,
      Illuminate\Broadcasting\BroadcastServiceProvider::class,
      Illuminate\Bus\BusServiceProvider::class,
      Illuminate\Cache\CacheServiceProvider::class,
      Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
      Illuminate\Cookie\CookieServiceProvider::class,
      Illuminate\Database\DatabaseServiceProvider::class,
      Illuminate\Encryption\EncryptionServiceProvider::class,
      Illuminate\Filesystem\FilesystemServiceProvider::class,
      Illuminate\Foundation\Providers\FoundationServiceProvider::class,
      Illuminate\Hashing\HashServiceProvider::class,
      Illuminate\Mail\MailServiceProvider::class,
      Illuminate\Pagination\PaginationServiceProvider::class,
      Illuminate\Pipeline\PipelineServiceProvider::class,
      Illuminate\Queue\QueueServiceProvider::class,
      Illuminate\Redis\RedisServiceProvider::class,
      Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
      Illuminate\Session\SessionServiceProvider::class,
      Illuminate\Translation\TranslationServiceProvider::class,
      Illuminate\Validation\ValidationServiceProvider::class,
      Illuminate\View\ViewServiceProvider::class,

      /*
       * Application Service Providers...
       */
      App\Providers\AppServiceProvider::class,
      App\Providers\AuthServiceProvider::class,
      App\Providers\EventServiceProvider::class,
      App\Providers\RouteServiceProvider::class,

      Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class

],

Setelah selesai, silahkan jalankan perintah berikut untuk melakukan generate ide helper dengan perintah

php artisan ide-helper:generate

Jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-05-14 10-44-28.png

Melakukan Setting Domain

Setelah melakukan konfigurasi seperti diatas, langkah selanjutnya adalah membuat domain sendiri, sehingga kita akan melakukan akses aplikasi dengan menggunakan nama domain. Silahkan buka file hosts dengan perintah

sudo nano /etc/hosts

lalu tambahkan script berikut.

127.0.0.1       perpustakaan.com

Silahkan akses web anda pada browser di http://perpustakaan.com:8080, jika berhasil maka outputnya seperti berikut.

Screenshot from 2016-05-14 17-48-57.png

Sekian tutorial belajar laravel bagian 1, untuk bagian selanjutnya InsyaAllah akan segera di publish dan Terima kasih :).

Rizki Mufrizal Reading time ~5 minutes

Apa Itu Angular JS ?

Angular JS adalah salah satu framework javascript yang mengusungkan pola MV* dan dikembangkan oleh google.

Angular JS biasanya digunakan sebagai framework di bagian front end suatu website. Salah satu kelebihan dari angular js ini adalah data binding sehingga antara model dan controller datanya akan dilakukan sinkronisasi secara asynchronous. Kelebihan angular yang lain adalah angular dapat melakukan routing, membuat sebuah directive dan biasanya digunakan sebagai client untuk sebuah web service.

Membuat Hello Word Dengan Angular JS

Untuk mempermudah pemahaman, kita akan langsung mencoba membuat hello word dengan menggunakan angular js :D. Untuk mendownload kebutuhan dependency angular, penulis akan menggunakan bower, karena menggunakan bower maka anda diwajibkan untuk melakukan instalasi node js. Bagi anda yang belum melakukan instalasi node js, silahkan lihat di Instalasi Perlengkapan Coding Node JS. Silahkan buat sebuah folder dengan nama Belajar-AngularJS, kemudian akses foder tersebut dengan terminal. Kemudian jalankan perintah berikut.

bower init

Kemudian silahkan isi konfigurasinya seperti berikut.

Screenshot from 2016-05-03 10-40-10.png

Lalu tahap selanjutnya, kita akan mendownload dependency library yang diperlukan, silahkan jalankan perintah berikut.

bower install bootstrap angular --save

perintah diatas akan mendownload dependency bootstrap untuk tampilan web nya dan angular js. Setelah selesai, silahkan buat sebuah file index.html lalu isikan codingan seperti berikut.

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Angular JS</title>

        <!-- Bootstrap -->
        <link href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
    </head>
    <body>

        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" ng-model="nama"/>
                    </div>
                </div>
            </div>

            <h2>Hello {{nama}}</h2>
        </div>

        <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./bower_components/angular/angular.min.js"></script>
    </body>
</html>

Berikut adalah penjelasan mengenai codingan diatas.

  • ng-app berfungsi untuk mendeklarasikan bahwa file html ini akan dihandle oleh angular js.
  • ng-model berfungsi sebagai model yang dapat menampung data, nantinya data ini akan ditampilkan.
  • {{nama}} berfungsi untuk menampilkan data, di dalam angular, kita akan menggunakan tanda {{}} untuk menampilkan data

Nah setelah selesai, selanjutnya kita akan menjalankan file index.html, untuk menjalankannya, kita akan menggunakan plugin http-server dari node js :D. Bagi anda yang masing bingung dengan node js, silahkan simak di artikel instalasi perlengkapan node js. Untuk melakukan instalasi http-server, silahkan jalankan perintah berikut.

 npm install -g http-server

Setelah selesai, jalankan perintah berikut pada root project untuk menjalankan http-server.

http-server

Jika berhasil, maka di terminal akan muncul output seperti berikut.

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Kemudian silahkan akses http://127.0.0.1:8080 pada browser anda.

Screenshot from 2016-05-03 10-40-11.png

Membuat CRUD Sederhana Dengan Angular JS

Setelah selesai membuat hello word dengan angular js, tahap selanjutnya kita akan membuat fungsi crud dengan menggunakan angular. Silahkan ubah file index.html seperti berikut.

<!DOCTYPE html>
<html lang="en" ng-app="Belajar-AngularJS">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Belajar Angular JS</title>

        <!-- Bootstrap -->
        <link href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
    </head>
    <body ng-controller="AppController">

        <div class="container">
            <div class="row">
                <div class="col-lg-2">
                    <div class="form-group">
                        <label>Nama</label>
                        <input type="text" class="form-control" placeholder="Masukkan Nama Anda" ng-model="nama"/>
                    </div>

                    <h2>Hello {{nama}}</h2>
                </div>
                <div class="col-lg-10">

                    <p></p>

                    <button ng-click="tambahBarang()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
                        Tambah Barang
                    </button>

                    <p></p>

                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th class="text-center">ID Barang</th>
                                <th class="text-center">Nama Barang</th>
                                <th class="text-center">Jenis Barang</th>
                                <th class="text-center">Tanggal Kadaluarsa</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="b in dataBarang">
                                <td>{{b.idBarang}}</td>
                                <td>{{b.namaBarang}}</td>
                                <td>{{b.jenisBarang}}</td>
                                <td>{{b.tanggalKadaluarsa}}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" ng-click="editBarang(b)">
                                        <i class="glyphicon glyphicon-pencil"></i>
                                    </button>
                                    <button type="button" class="btn btn-danger" ng-click="hapusBarang(b)">
                                        <i class="glyphicon glyphicon-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 ng-hide="enable" class="modal-title">Tambah Barang</h4>
                        <h4 ng-show="enable" class="modal-title">Edit Barang</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div ng-show="enable" class="form-group">
                                <label>ID Barang</label>
                                <input type="text" class="form-control" ng-model="inputDataBarang.idBarang" disabled/>
                            </div>
                            <div class="form-group">
                                <label>Nama Barang</label>
                                <input type="text" class="form-control" placeholder="Masukkan Nama Barang" ng-model="inputDataBarang.namaBarang"/>
                            </div>
                            <div class="form-group">
                                <label>Jenis Barang</label>
                                <select class="form-control" ng-model="inputDataBarang.jenisBarang">
                                    <option value="" disabled>Pilih Jenis Barang</option>
                                    <option value="gas">Gas</option>
                                    <option value="padat">Padat</option>
                                    <option value="cair">Cair</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Tanggal Kadaluarsa</label>
                                <input type="date" class="form-control" placeholder="Masukkan Tanggal Kadaluarsa" ng-model="inputDataBarang.tanggalKadaluarsa"/>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning" data-dismiss="modal">Batal</button>
                        <button ng-hide="enable" type="button" class="btn btn-success" data-dismiss="modal" ng-click="simpanBarang(inputDataBarang)">Simpan</button>
                        <button ng-show="enable" type="button" class="btn btn-success" data-dismiss="modal" ng-click="updateBarang(inputDataBarang)">Update</button>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="./bower_components/angular/angular.min.js"></script>
        <script type="text/javascript" src="./app.js"></script>
    </body>
</html>

Codingan diatas berfungsi untuk melakukan proses crud dimana untuk proses memasukkan data, kita hanya menggunakan fungsi modal dari bootstrap.

Kemudian silahkan buat sebuah file app.js kemudian isikan codingan seperti berikut.

'use strict';

angular.module('Belajar-AngularJS', [])
  .controller('AppController', ['$scope', function($scope) {

    $scope.dataBarang = [];
    $scope.inputDataBarang = {};

    function generateUUID() {
      var d = new Date().getTime();
      if (window.performance && typeof window.performance.now === "function") {
        d += performance.now();
      }
      var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
      return uuid;
    }

    $scope.tambahBarang = function() {
      $scope.enable = false;
      $scope.inputDataBarang.idBarang = '';
      $scope.inputDataBarang.namaBarang = '';
      $scope.inputDataBarang.jenisBarang = '';
      $scope.inputDataBarang.tanggalKadaluarsa = '';
    };

    $scope.simpanBarang = function(barang) {
      $scope.dataBarang.push({
        'idBarang': generateUUID(),
        'namaBarang': barang.namaBarang,
        'jenisBarang': barang.jenisBarang,
        'tanggalKadaluarsa': barang.tanggalKadaluarsa
      });
    };

    $scope.editBarang = function(barang) {
      $scope.enable = true;
      $scope.index = $scope.dataBarang.indexOf(barang);
      $scope.inputDataBarang.idBarang = barang.idBarang;
      $scope.inputDataBarang.namaBarang = barang.namaBarang;
      $scope.inputDataBarang.jenisBarang = barang.jenisBarang;
      $scope.inputDataBarang.tanggalKadaluarsa = barang.tanggalKadaluarsa;
    };

    $scope.updateBarang = function(barang) {
      $scope.dataBarang[$scope.index].idBarang = barang.idBarang;
      $scope.dataBarang[$scope.index].namaBarang = barang.namaBarang;
      $scope.dataBarang[$scope.index].jenisBarang = barang.jenisBarang;
      $scope.dataBarang[$scope.index].tanggalKadaluarsa = barang.tanggalKadaluarsa;
    };

    $scope.hapusBarang = function(barang) {
      var result = confirm('Anda ingin menghapus data barang ?');
      if (result) {
        $scope.index = $scope.dataBarang.indexOf(barang);
        $scope.dataBarang.splice($scope.index, 1);
      }
    }

  }]);

Codingan diatas berfungsi untuk proses crud pada bagian angular js. Function generateUUID berfungsi untuk melakukan generate id barang secara random. Jika telah selesai, silahkan jalankan file index.html, jika berhasil maka akan muncul output seperti berikut.

output untuk proses insert.

Screenshot from 2016-05-03 10-41-06.png

output untuk proses select.

Screenshot from 2016-05-03 10-41-07.png

output untuk proses update

Screenshot from 2016-05-03 10-41-16.png

output untuk proses delete

Screenshot from 2016-05-03 10-41-24.png

Sekian tutorial belajar angular js dan Terima kasih :). Untuk source code lengkap, penulis publish di Belajar Angular JS.

Rizki Mufrizal Reading time ~10 minutes

Apa Itu Socket ?

Socket adalah mekanisme komunikasi untuk pertukaran data antar aplikasi yang terdapat di dalam sebuah mesin maupun beda mesin dan pertukaran ini terjadi pada sebuah jaringan komputer.

Untuk membangun sebuah aplikasi yang berbasis socket, kita dapat menggunakan 2 jenis socket yang berbeda yaitu :

  • TCP Socket : menggunakan konsep connection oriented dan reliable data transfer sehingga aplikasi yang dibangun dengan TCP Socket tidak mempedulikan lama waktu sebuah pengiriman data akan tetapi sangat mementingkan ketepatan data. Konsep connection oriented adalah suatu proses pengiriman data disertai dengan tanggung jawab sehingga ketika data sampai pada tujuan akan ada pemberitahuan atau jika terjadi kesalahan pada saat pengiriman data maka data tersebut akan dikirim kembali ke tujuannya. Konsep reliable data transfer adalah sebuah proses pengiriman data dengan menggunakan nomor urut sehingga pada saat diterima, data akan tersusun berdasarkan nomor urut tersebut.

  • UDP Socket : menggunakan konsep connectionless oriented dan unreliable data transfer sehingga aplikasi yang dibangun dengan UDP Socket tidak mementingkan ketepatan data tetapi lebih mementingkan akan delay waktu pada saat proses pengiriman data. Konsep connectionless oriented adalah suatu proses pengiriman data tidak disertai dengan tanggung jawab sehingga jika terjadi kesalahan pada saat proses pengiriman maka data tersebut tidak akan dikirim ulang ke tujuan. Konsep unreliable data transfer adalah sebuah proses pengiriman data dalam bentuk datagram tanpa nomor urut.

Implementasi TCP Socket

Pada artikel ini, penulis akan melakukan implementasi TCP Socket dengan menggunakan bahasa pemrograman java. Silahkan buat sebuah file dengan nama ServerChat.java kemudian masukkan codingan seperti berikut.

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
import java.util.HashSet;

/*
 * ServerChat.java
 * Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
 *
 * Distributed under terms of the MIT license.
 */

 public class ServerChat {

    private static final int PORT = 9001;
    private static HashSet<String> names = new HashSet<>();
    private static HashSet<PrintWriter> printWriters = new HashSet<>();

    public static void main(String[] args) throws IOException {
        System.out.println("server jalan pada port : " + PORT);
        ServerSocket serverSocket = new ServerSocket(PORT);
        try {
            while (true) {
                new Handler(serverSocket.accept()).start();
            }
        } catch (Exception e) {
            System.out.println(e);
        } finally {
            serverSocket.close();
        }
    }

    private static class Handler extends Thread {

        private String name;
        private Socket socket;
        private BufferedReader bufferedReader;
        private PrintWriter printWriter;

        public Handler(Socket socket) {
            this.socket = socket;
        }

        @Override
        public void run() {
            try {
                bufferedReader = new BufferedReader(new InputStreamReader(socket.getInputStream()));
                printWriter = new PrintWriter(socket.getOutputStream(), true);

                while (true) {
                    printWriter.println("submitname");
                    name = bufferedReader.readLine();

                    if (name == null) {
                        return;
                    }

                    synchronized (names) {
                    
                        if (!names.contains(name)) {
                            names.add(name);
                            break;
                        }
                    
                    }
                }

                printWriter.println("nameaccepted");
                printWriters.add(printWriter);

                while (true) {
                    String input = bufferedReader.readLine();
                    
                    if (input == null) {
                        return;
                    }
                    
                    printWriters.stream().forEach((pw) -> {
                        pw.println("message " + name + " : " + input);
                    });

                }

            } catch (IOException e) {
                System.out.println(e);
            } finally {

                if (name != null) {
                    names.remove(name);
                }
            
                if (printWriter != null) {
                    printWriters.remove(printWriter);
                }
            
                try {
                    socket.close();
                } catch (IOException e) {
                    System.out.println(e);
                }
            }
        }
    }
}

Pada codingan diatas, kita membuat 2 class di dalam satu file, dimana class Handler kita lakukan inheritance terhadap class Thread. Fungsinya adalah kita akan membuka koneksi dan menunggu permintaan koneksi dari client. Pada saat client melakukan koneksi ke server maka client akan melakukan syncronize dengan server atau client akan melakukan request ke server, kemudian server akan melakukan sycronize terhadap seluruh client yang terhubung pada jaringan sehingga ketika ada suatu aksi maka server akan memberikan response kepada semua client meskipun client tersebut tidak memberikan request ke server. Pada codingan diatas, server akan berjalan pada port 9001 sehingga client harus bisa melakukan koneksi pada jaringan dan port yang sama dengan server.

Tahap selanjutnya, kita akan membuat sebuah client, silahkan buat sebuah file dengan nama ClientChat.java kemudian masukkan codingan berikut.

import java.awt.event.ActionEvent;
import java.awt.Dimension;
import java.awt.Toolkit;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.Socket;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;

/*
 * ClientChat.java
 * Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
 *
 * Distributed under terms of the MIT license.
 */

public class ClientChat {

    private BufferedReader bufferedReader;
    private PrintWriter printWriter;
    private JFrame jFrame = new JFrame("aplikasi chat");
    private JTextField jTextField = new JTextField(40);
    private JTextArea jTextArea = new JTextArea(8, 40);

    public ClientChat() {
        jTextField.setEditable(Boolean.FALSE);
        jTextArea.setEditable(Boolean.FALSE);
        jFrame.setSize(500, 500);
        jFrame.getContentPane().add(jTextField, "North");
        jFrame.getContentPane().add(new JScrollPane(jTextArea), "Center");
        Dimension dimension = Toolkit.getDefaultToolkit().getScreenSize();
        jFrame.setLocation((dimension.width / 2) - (jFrame.getSize().width / 2), (dimension.height / 2) - (jFrame.getSize().height / 2));

        jTextField.addActionListener((ActionEvent e) -> {
            printWriter.println(jTextField.getText());
            jTextField.setText("");
        });
    }

    public String getServerAddress() {
        return JOptionPane.showInputDialog(
            jFrame,
            "masukan ip address",
            "selamat datang di aplikasi chat",
            JOptionPane.QUESTION_MESSAGE
        );
    }

    public String getName() {
        return JOptionPane.showInputDialog(
            jFrame,
            "Masukkan nama anda",
            "selamat datang di aplikasi chat",
            JOptionPane.QUESTION_MESSAGE
        );
    }

    private void run() throws IOException {
        String serverAddress = getServerAddress();
        Socket socket = new Socket(serverAddress, 9001);
        bufferedReader = new BufferedReader(new InputStreamReader(socket.getInputStream()));
        printWriter = new PrintWriter(socket.getOutputStream(), true);

        while (true) {
            String line = bufferedReader.readLine();
            if (line.startsWith("submitname")) {
                printWriter.println(getName());
            } else if (line.startsWith("nameaccepted")) {
                jTextField.setEditable(Boolean.TRUE);
            } else if (line.startsWith("message")) {
                jTextArea.append(line.substring(8) + "\n");
            }
        }
    }

    public static void main(String[] args) throws IOException {
        ClientChat clientChat = new ClientChat();
        clientChat.jFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        clientChat.jFrame.setVisible(Boolean.TRUE);
        clientChat.run();
    }

}

Pada codingan diatas, kita membuat sebuah aplikasi chat untuk bagian client, port telah kita tentukan sesuai dengan port server yaitu 9001, sedangkan IP akan didefinisikan sendiri oleh user yang akan melakukan inputan. Aplikasi ini digunakan untuk melakukan chat secara group, misalkan jika terdapat 2 user maka kita dapat melakukan chat secara serentak, ketika user 1 melakukan chat maka secara otomatis user 2 akan mendapatkan balasan chat dari user 1 begitu pula sebaliknya.

Uji Coba TCP Socket

Untuk melakukan uji coba TCP Socket, kita dapat menggunakan aplikasi wireshark. Untuk melakukan instalasi wireshark, silahkan tambahkan ppa berikut.

sudo add-apt-repository ppa:wireshark-dev/stable

Kemudian lakukan update

sudo apt-get update

lalu lakukan instalasi aplikasi dengan perintah

sudo apt-get install wireshark

Tahap selanjutnya, silahkan lakukan compile kedua source code yang telah buat tadi, jalankan dengan perintah berikut untuk melakukan compile kedua file ServerChat.java.

javac ServerChat.java

kemudian jalankan dengan perintah

java ServerChat

Untuk melakukan compile file ClientChat.java maka jalankan perintah berikut.

javac ClientChat.java

kemudian jalankan dengan perintah

java ClientChat

Jalankan ClientChat sebanyak 2x sehingga akan muncul 2 form, 2 form ini merupakan representasi dari 2 client sehingga silahkan masukkan IP anda dengan 127.0.0.1 kemudian masukkan nama yang berbeda pada setiap form, kemudian lakukan chat antar client. Berikut adalah output dari aplikasi client tersebut.

Screenshot from 2016-04-14 14:22:40.png

Langkah selanjutnya adalah kita akan melakukan test dengan menggunakan wireshark, silahkan buka wireshark anda, berikut adalah tampilan dasboard nya.

Screenshot from 2016-04-14 16:38:33.png

Pada bagian dasboard terdapat proses capture, silahkan anda pilih any. Setelah selesai maka akan muncul seperti berikut.

Screenshot from 2016-04-14 16:39:42.png

arti dari gambar tersebut adalah aplikasi wireshark dengan melakukan capture terhadap jaringan yang sedang berjalan. Kemudian jalankan kembali aplikasi chat yang telah kita buat, pada saat aplikasi chat bagian client dijalankan maka pada aplikasi wireshark akan muncul seperti berikut.

Screenshot from 2016-04-14 19:39:10.png

Kemudian lakukan chat antar 2 client maka anda juga akan melihat ada proses pertukaran paket pada protokol TCP. Berikut adalah output ketika penulis melakukan chat.

Screenshot from 2016-04-14 19:38:17.png

Implementasi UDP Socket

Setelah melakukan implementasi TCP Socket, tahap selanjutnya kita akan melakukan implementasi UDP Socket dengan bahasa pemrograman java :). Silahkan buat sebuah file dengan nama UDPServer.java lalu masukkan codingan seperti berikut.

import java.io.IOException;
import java.net.DatagramPacket;
import java.net.DatagramSocket;

/*
 * UDPServer.java
 * Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
 *
 * Distributed under terms of the MIT license.
 */

public class UDPServer {

    public static void main(String args[]) {
        DatagramSocket datagramSocket = null;

        try {
            datagramSocket = new DatagramSocket(8888);

            byte[] buffer = new byte[65536];
            DatagramPacket datagramPacket = new DatagramPacket(buffer, buffer.length);

            System.out.println("socket server jalan, menunggu data yang dikirim");

            while (true) {
                datagramSocket.receive(datagramPacket);
                byte[] data = datagramPacket.getData();
                String s = new String(data, 0, datagramPacket.getLength());

                System.out.println(datagramPacket.getAddress().getHostAddress() + " : " + datagramPacket.getPort() + " : " + s);

                s = "data yang terkirim : " + s;
                DatagramPacket packet = new DatagramPacket(s.getBytes(), s.getBytes().length, datagramPacket.getAddress(), datagramPacket.getPort());
                datagramSocket.send(packet);
            }

        } catch (IOException e) {
            System.out.println(e);
        }
    }
}

Pada codingan diatas dapat dilihat bahwa server akan menunggu data yang dikirim dari client, data yang dikirim adalah packet dalam bentuk datagram sehingga packet tersebut tidak memiliki penomoran pada saat pengiriman berlangsung.

Untuk kebutuhan testing, kita juga akan membuat sebuah client udp, silahkan buat sebuah file dengan nama UDPClient.java kemudian masukkan codingan berikut.

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.DatagramPacket;
import java.net.DatagramSocket;
import java.net.InetAddress;

/*
 * UDPClient.java
 * Copyright (C) 2016 Rizki Mufrizal <mufrizalrizki@gmail.com>
 *
 * Distributed under terms of the MIT license.
 */

public class UDPClient {

    public static void main(String args[]) {
        DatagramSocket datagramSocket = null;
        String s;
        BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(System.in));

        try {
            datagramSocket = new DatagramSocket();
            InetAddress inetAddress = InetAddress.getByName("127.0.0.1");

            while (true) {
                System.out.print("Masukkan pesan anda : ");
                s = bufferedReader.readLine();
                byte[] b = s.getBytes();

                DatagramPacket datagramPacket = new DatagramPacket(b, b.length, inetAddress, 8888);
                datagramSocket.send(datagramPacket);

                byte[] buffer = new byte[65536];
                DatagramPacket packet = new DatagramPacket(buffer, buffer.length);
                datagramSocket.receive(packet);

                byte[] data = packet.getData();
                s = new String(data, 0, packet.getLength());

                System.out.println(packet.getAddress().getHostName() + " : " + packet.getPort() + " : " + s);
            }

        } catch (IOException e) {
            System.out.println(e);
        }
    }
}

Codingan diatas berfungsi sebagai client, dimana pada saat client dijalankan, anda dapat mengirim pesan ke server lalu server akan mengembalikan pesan anda kembali. Jika terdapat banyak client, maka pesan tersebut tidak akan syncronize dengan client yang lain akan tetapi pesan tersebut hanya syncronize dengan server.

Uji Coba UDP Socket

Uji coba UDP dapat menggunakan nmap, wireshark dan juga aplikasi client yang telah kita buat tadi. Kita akan melakukan uji coba terlebih dahulu dengan menggunakan nmap. Silahkan lakukan instalasi nmap dengan perintah berikut.

sudo apt-get install nmap

Langkah selanjutnya silahkan lakukan compile file UDPServer.java lalu jalankan file tersebut. Kemudian kita akan mengecek terlebih dahulu status jaringan dengan perintah.

netstat -u -ap

Maka akan muncul output seperti berikut.

(Not all processes could be identified, non-owned process info
 will not be shown, you would have to be root to see it all.)
Active Internet connections (servers and established)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name
udp        0      0 *:ipp                   *:*                                 -               
udp        0      0 *:mdns                  *:*                                 12151/          
udp        0      0 *:mdns                  *:*                                 -               
udp        0      0 *:51757                 *:*                                 -               
udp        0      0 localhost:52426         localhost:52426         ESTABLISHED -               
udp        0      0 *:52813                 *:*                                 -               
udp        0      0 10.42.0.1:domain        *:*                                 -               
udp        0      0 rizki-HP-431-Not:domain *:*                                 -               
udp        0      0 *:bootps                *:*                                 -               
udp        0      0 *:bootpc                *:*                                 -               
udp6       0      0 [::]:8888               [::]:*                              21206/java      
udp6       0      0 [::]:mdns               [::]:*                              -               
udp6       0      0 [::]:51861              [::]:*                              -               
udp6       0      0 [::]:4466               [::]:*                              -

Bisa dilihat bahwa UDP Server telah berjalan sukses, bisa dilihat pada bagian PID/Program name terdapat kalimat java dan bertepatan dengan port 8888 yang telah kita konfigurasi pada codingan java. Langkah selanjutnya, untuk mengirim pesan ke server, silahkan jalankan perintah berikut.

ncat -vv localhost 8888 -u

Maksud dari perintah diatas adalah

  • -vv berfungsi untuk memberikan informasi secara detail
  • -u berfungsi untuk mendeklarasikan protokol UDP

Jika berhasil, maka akan muncul output seperti berikut.

Ncat: Version 6.40 ( http://nmap.org/ncat )
libnsock nsi_new2(): nsi_new (IOD #1)
libnsock nsock_connect_udp(): UDP connection requested to 127.0.0.1:8888 (IOD #1) EID 8
libnsock nsock_trace_handler_callback(): Callback: CONNECT SUCCESS for EID 8 [127.0.0.1:8888]
Ncat: Connected to 127.0.0.1:8888.
libnsock nsi_new2(): nsi_new (IOD #2)
libnsock nsock_read(): Read request from IOD #1 [127.0.0.1:8888] (timeout: -1ms) EID 18
libnsock nsock_readbytes(): Read request for 0 bytes from IOD #2 [peer unspecified] EID 26

Kemudian silahkan ketikan pesan yang anda inginkan, jika berhasil maka anda akan mendapatkan response dari server, berikut adalah output nya.

Ncat: Version 6.40 ( http://nmap.org/ncat )
libnsock nsi_new2(): nsi_new (IOD #1)
libnsock nsock_connect_udp(): UDP connection requested to 127.0.0.1:8888 (IOD #1) EID 8
libnsock nsock_trace_handler_callback(): Callback: CONNECT SUCCESS for EID 8 [127.0.0.1:8888]
Ncat: Connected to 127.0.0.1:8888.
libnsock nsi_new2(): nsi_new (IOD #2)
libnsock nsock_read(): Read request from IOD #1 [127.0.0.1:8888] (timeout: -1ms) EID 18
libnsock nsock_readbytes(): Read request for 0 bytes from IOD #2 [peer unspecified] EID 26
hello rizki mufrizal
libnsock nsock_trace_handler_callback(): Callback: READ SUCCESS for EID 26 [peer unspecified] (21 bytes): hello rizki mufrizal.
libnsock nsock_trace_handler_callback(): Callback: WRITE SUCCESS for EID 35 [127.0.0.1:8888]
libnsock nsock_readbytes(): Read request for 0 bytes from IOD #2 [peer unspecified] EID 42
libnsock nsock_trace_handler_callback(): Callback: READ SUCCESS for EID 18 [127.0.0.1:8888] (42 bytes): data yang terkirim : hello rizki mufrizal.
data yang terkirim : hello rizki mufrizal
libnsock nsock_readbytes(): Read request for 0 bytes from IOD #1 [127.0.0.1:8888] EID 50

Jika kita cek pada bagian server, maka akan muncul output seperti berikut.

socket server jalan, menunggu data yang dikirim
127.0.0.1 : 34481 : hello rizki mufrizal

Tahap yang terakhir kita akan melakukan uji coba dengan menggunakan wireshark, silahkan matikan UDPServer, lalu jalankan kembali wireshark dan jalankan UDPServer. Setelah selesai, silahkan jalankan UDPClient kemudian silahkan kirimkan pesan. Berikut adalah output ketika terjadi pengiriman pesan dengan UDP Socket.

Screenshot from 2016-04-14 19:35:24.png

Sekian tutorial belajar socket programming dan Terima kasih :)