Pada bulan april yang lalu, akhirnya ubuntu merilis sistem operasi baru dengan codename xenial xerus 16.04 LTS. Tidak hanya ubuntu, teryata ubuntu varian yang lain seperti kubuntu, xubuntu, lubuntu dan ubuntu mate juga release :D. Karena ubuntu telah release versi 16.04 LTS maka penulis juga ikut upgrade ke versi 16.04 LTS. Setelah dicoba - coba teryata ubuntu 16.04 LTS ini lumayan rakus sama RAM :(, berbeda jauh dengan saudaranya yang dulu yaitu ubuntu 14.04 trusty. Dikarenakan terlalu memakan resource, akhirnya penulis mulai migrasi, awalnya migrasi ke ubuntu mate, Eh teryata lumayan ringan akan tetapi setelah cari beberapa referensi teryata kubuntu melakukan upgrade kde 4 menjadi kde 5 plasma dan dikabarkan kubuntu lebih stabil dan ringan dari pada ubuntu. Akhirnya penulis migrasi ke kubuntu, jika dilihat dari segi tampilan, kubuntu merupakan salah satu distro yang cukup sempurna :D dibandingkan dengan ubuntu mate yang telah penulis coba. Hari berganti dengan hari, dan teryata penulis mendapat kendala lagi yaitu laptop lebih cepet panas dengan menggunakan kubuntu :(. Karena ubuntu dan kubuntu tidak sesuai dengan keinginan penulis, akhirnya penulis balik ke ubuntu mate. Dan apa yang terjadi ? teryata ubuntu mate lebih terasa dingin dan hemat memory RAM :D. Begitulah jika anda adalah seorang linux user, anda akan selalu penasaran dengan distro - distro yang belum anda coba, setiap distro memiliki keunggulan dan kekurangan masing - masing. Jika anda adalah seorang developer terlebih jika anda suka bermain - main dengan yang namanya netbeans, android studio dan keluarga jetbrains, penulis sarankan untuk menggunakan ubuntu mate :D.

Apa Itu Apt-Fast ?

Pada artikel sebelumnya penulis telah membahas mengenai package management pada ubuntu yaitu bisa menggunakan apt-get dan juga dpkg. Pada ubuntu 16.04 lebih disarankan untuk menggunakan perintah apt saja tanpa perlu menggunakan perintah apt-get. Terus apa hubungannya dengan apt-fast ?

apt-fast adalah shell script yang berfungsi sebagai pembungkus apt-get dan aptitude atau dapat dikatakan bahwa apt-fast merupakan perintah yang dikembangkan dari dasar apt-get yang dapat melakukan download package secara paralel dengan multiple koneksi per package.

Mungkin sedikit sulit untuk memahami pengertian diatas. Sebenarnya apt-fast dengan apt-get adalah sama, hanya saja apt-fast dikembangkan dengan cara mengabungkan apt-get dan aptitude. Perintah yang digunakan pada apt-fast sama seperti yang ada pada apt-get. Lalu apa yang membedakannya ? yang membedakannya adalah pada saat proses mendownload package. Jika anda menggunakan apt-get, kita melakukan download package secara sequential atau secara satu per satu. Jika kita menggunakan apt-fast, apt-fast akan melakukan download package secara paralel, dan setiap package yang kita download akan menggunakan multiple connection sehingga proses download package lebih cepat dibandingkan dengan apt-get :D.

Instalasi Apt-Fast

Untuk melakukan instalasi apt-fast, tambahkan PPA berikut.

sudo add-apt-repository ppa:saiarcot895/myppa

Kemudian lakukan update dengan perintah berikut.

sudo apt update

Lalu lanjutnya dengan instalasi apt-fast dengan perintah.

sudo apt install apt-fast

Apa Itu ZSH ?

ZSH (Z shell) adalah salah satu alternatif dari bash shell dan sangat banyak digunakan dikalangan developer.

Secara default, keluarga unix menggunakan bash shell di dalam terminal, contohnya sperti GNU/linux, mac os x dan keluarga unix yang lainnya. ZSH merupakan salah satu shell yang cukup populer dan salah satu fungsi utama dari ZSH adalah autocomplete yang diberikan lebih sempurna dibandingkan dengan bash shell. Pada artikel ini, kita akan mencoba melakukan instalasi zsh pada ubuntu mate dan mengganti bash shell menjadi ZSH.

Instalasi Dan Konfigurasi ZSH

Untuk melakukan instalasi ZSH silahkan jalankan perintah berikut.

sudo apt install zsh

Untuk konfigurasi ZSH, penulis menggunakan tool Oh My Zsh. Untuk melakukan instalasinya, silahkan jalankan perintah berikut.

sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

Setelah selesai, jalankan perintah berikut agar ZSH menjadi default shell yang akan anda gunakan

chsh -s $(which zsh)

Nah setelah selesai, silahkan tutup terminal anda lalu buka kembali, jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-06-01 09:38:10.png

Langkah selanjutnya, penulis ingin mengganti thema zsh menjadi agnoster, akan tetapi untuk instalasi thema agnoster memerlukan sedikit konfigurasi untuk font. Silahkan jalankan perintah berikut untuk melakukan clone repository powerline/font

git clone https://github.com/powerline/fonts.git

Setelah selesai, silahkan akses folder fonts lalu jalankan perintah berikut untuk melakukan instalasi font.

./install.sh

Setelah selesai, kita akan lakukan konfigurasi font tersebut, silahkan jalankan perintah berikut untuk mendownload font yang dibutuhkan

wget https://github.com/powerline/powerline/raw/develop/font/PowerlineSymbols.otf
wget https://github.com/powerline/powerline/raw/develop/font/10-powerline-symbols.conf

Setelah selesai, jalankan perintah berikut untuk membuat folder untuk font tersebut.

mkdir ~/.fonts/
mkdir -p ~/.config/fontconfig/conf.d/

Langkah selanjutnya silahkan jalankan perintah berikut untuk konfigurasi font tersebut.

mv PowerlineSymbols.otf ~/.fonts/
fc-cache -vf ~/.fonts/
mv 10-powerline-symbols.conf ~/.config/fontconfig/conf.d

Nah setelah selesai, silahkan tutup terminal lalu buka lagi, silahkan jalankan perintah berikut.

echo "\ue0b0 \u00b1 \ue0a0 \u27a6 \u2718 \u26a1 \u2699"

Jika berhasil maka akan muncul output seperti berikut.

Screenshot from 2016-06-01 09:49:28.png

Jika output seperti diatas maka anda telah berhasil melakukan konfigurasi font nya :D. Langkah selanjutnya, silahkan buka file .zshrc dengan perintah berikut.

nano .zshrc

Kemudian cari kata ZSH_THEME kemudian ganti menjadi seperti berikut.

ZSH_THEME="agnoster"

Nah silahkan disimpan, lalu restart terminal anda, maka akan muncul output seperti berikut.

Screenshot from 2016-06-01 09:55:49.png

Pada artikel ini, penulis merubah konfigurasi thema tersebut agar sesuai dengan keinginan penulis, jika anda merasa sudah cukup puas dengan thema tersebut maka langkah selanjutnya tidak perlu anda ikuti :). Silahkan buka file agnoster.zsh-theme di dalam folder .oh-my-zsh/themes/ dengan perintah berikut.

nano ~/.oh-my-zsh/themes/agnoster.zsh-theme

Kemudian replace semua codingan tersebut dengan codingan berikut.

# Original theme https://github.com/agnoster zsh theme
# modified by lborg019

ZSH_THEME_GIT_PROMPT_DIRTY='±'

function _git_prompt_info() {
  ref=$(git symbolic-ref HEAD 2> /dev/null) || ref="➦ $(git show-ref --head -s --abbrev |head -n1 2> /dev/null)"
  echo "${ref/refs\/heads\// }$(parse_git_dirty)"
}

function _git_info() {
  if $(git rev-parse --is-inside-work-tree >/dev/null 2>&1); then
    local BG_COLOR=green
    if [[ -n $(parse_git_dirty) ]]; then
      BG_COLOR=yellow
      FG_COLOR=black
    fi

    if [[ ! -z $(git ls-files --other --exclude-standard 2> /dev/null) ]]; then
        BG_COLOR=red
        FG_COLOR=white
    fi
    echo "%{%K{$BG_COLOR}%}%{%F{$FG_COLOR}%} $(_git_prompt_info) %{%F{$BG_COLOR}%K{blue}%}"
  else
    echo "%{%K{blue}%}"
  fi
}

function virtualenv_info {
    [ $VIRTUAL_ENV ] && echo '('`basename $VIRTUAL_ENV`') '
}

PROMPT_HOST='%{%b%F{gray}%K{black}%} %(?.%{%F{green}%}✔.%{%F{red}%}✘)%{%F{yellow}%} %n %{%F{black}%}'
PROMPT_DIR='%{%F{white}%} %~%  '
PROMPT_SU='%(!.%{%k%F{blue}%K{black}%}%{%F{yellow}%} ⚡ %{%k%F{black}%}.%{%k%F{blue}%})%{%f%k%b%}'

PROMPT='%{%f%b%k%}$PROMPT_HOST$(_git_info)$PROMPT_DIR$PROMPT_SU
$(virtualenv_info)❯ '
RPROMPT='%{$fg[green]%}[%*]%{$reset_color%}'

Silahkan restart kembali terminal anda, dan berikut adalah hasilnya

Screenshot from 2016-06-01 10:04:29.png

Waw… hasilnya lebih bagus :D. Langkah terakhir, karena secara default thema agnoster menggunakan warna solarized, maka kita akan melakukan konfigurasi warna solarized pada terminal mate. Secara default, terminal mate tidak memiliki warna solarized meskipun sudah ubuntu mate versi 16.04 :(, untuk itu kita perlu sedikit melakukan konfigurasi. Silahkan jalankan perintah berikut untuk melakukan clone mate-terminal-colors-solarized.

git clone https://github.com/NeuralSandwich/mate-terminal-colors-solarized.git

Setelah selesai, silahkan akses folder solarized-mate-terminal, kemudian jalankan perintah berikut.

./install.sh

Kemudian silahkan jawab pertayaan yang diajukan, berikut adalah output untuk jawaban penulis.

This script will ask you if you want a light or dark color scheme, and
which Mate Terminal profile to overwrite.

Please note that there is no uninstall option yet. If you do not wish
to overwrite any of your profiles, you should create a new profile
before you run this script. However, you can reset your colors to the
Mate default, by running:

dconf reset -f /org/mate/terminal/profiles:/

By default, it runs in the interactive mode, but it also can be run
non-interactively, just feed it with the necessary options, see
'install.sh --help' for details.

Please select a color scheme:
1) dark
2) light
#? 1

Please select a Mate Terminal profile:
1) 'Rizki Mufrizal'
#? 1

You have selected:

  Scheme:  dark
  Profile: 'Rizki Mufrizal' (default)

Are you sure you want to overwrite the selected profile?
(YES to continue) YES
Confirmation received -- applying settings

Kemudian restart terminal anda kembali, kemudian silahkan pilih menu edit pada terminal, lalu pilih profile preferences, pilih tab color kemudian uncheck list pada use colors from system theme. Maka hasil terminalnya akan seperti berikut :D.

Screenshot from 2016-06-01 10:23:04.png

Konfigurasi Apt-Fast Pada ZSH

Agar fitur autocomplete apt-fast pada ZSH berjalan, kita harus melakukan beberapa konfigurasi. Silahkan jalankan perintah berikut untuk melakukan clone repository apt-fast.

git clone https://github.com/ilikenwf/apt-fast.git

Setelah selesai, jalankan perintah berikut untuk menjalankan konfigurasi apt-fast pada ZSH.

sudo cp completions/zsh/_apt-fast /usr/share/zsh/functions/Completion/Debian/
sudo chown root:root /usr/share/zsh/functions/Completion/Debian/_apt-fast
source /usr/share/zsh/functions/Completion/Debian/_apt-fast

Sekian tutorial instalasi apt-fast dan zsh pada ubuntu mate dan Terima kasih :).

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.

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 :).

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 :).

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.