app login laravel

22
Ini merupakan lanjutan dari panduan sebelumnya, apabila Anda belum membacanya silahkan kunjungi Bagian 1 Dari hasil percobaan sebelumnya, kita telah memiliki : Database, menggunakan SQLITE Tabel, berkat migrations Pengguna, berkat seeding Ketiga poin diatas sebenarnya sudah cukup untuk kita sebagai bahan dasar membangun sebuah sistem. Ada beberapa hal lagi yang kita butuhkan untuk merealisasikannya, mereka adalah models,routes, controllers dan views. Models Models pada laravel sebenarnya memiliki banyak fungsi, bahkan bisa bertindak sebagai wadah logika program . Namun pada panduan kali ini, saya hanya akan menjadikan models sebagai sarana meng-koneksikan aplikasi dengan database. Karena peran sebenarnya memang itu. Perhatikan file User.php pada direktori app/models di baris 13. Terdapat baris syntaxprotected $table = 'users'; yang maksudnya aplikasi Anda sejak awal telah memiliki Model bernamaUser yang berisi seluruh isi tabel bernama users. Untuk diketahui bahwa pada tahap pembuatan database sebelumnya, kita memang telah membuat sebuah tabel, tetapi tabel yang kita buat bukan bernama users melainkan pengguna. Jadi, Anda boleh mengubah users menjadi pengguna. Sudah tau maksudnya kan? Nama tabel vroh, nama tabel XD Tips : Biasanya kalau saya pribadi, pembuatan model disini menyesuaikan banyaknya tabel yang saya punya pada aplikasi yang sedang saya bangun. Jadi, setiap model memiliki fungsi menangani isi satu tabel. Misal, dalam database saya memiliki

Upload: igun-rastafara

Post on 28-Dec-2015

51 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: App Login Laravel

Ini merupakan lanjutan dari panduan sebelumnya, apabila Anda belum

membacanya silahkan kunjungi Bagian 1…

Dari hasil percobaan sebelumnya, kita telah memiliki :

Database, menggunakan SQLITE

Tabel, berkat migrations

Pengguna, berkat seeding

Ketiga poin diatas sebenarnya sudah cukup untuk kita sebagai bahan dasar

membangun sebuah sistem. Ada beberapa hal lagi yang kita butuhkan

untuk merealisasikannya, mereka

adalah models,routes, controllers dan views.

Models

Models pada laravel sebenarnya memiliki banyak fungsi, bahkan bisa

bertindak sebagai “wadah logika program”. Namun pada panduan kali ini,

saya hanya akan menjadikan models sebagai sarana meng-koneksikan

aplikasi dengan database. Karena peran sebenarnya memang itu.

Perhatikan file User.php pada direktori app/models di baris 13. Terdapat baris

syntaxprotected $table = 'users'; yang maksudnya aplikasi Anda sejak

awal telah memiliki Model bernamaUser yang berisi seluruh isi tabel

bernama users. Untuk diketahui bahwa pada tahap pembuatan “database”

sebelumnya, kita memang telah membuat sebuah tabel, tetapi tabel yang

kita buat bukan bernama users melainkan pengguna. Jadi, Anda boleh

mengubah users menjadi pengguna. Sudah tau maksudnya kan? Nama tabel

vroh, nama tabel XD

Tips : Biasanya kalau saya pribadi, pembuatan model disini menyesuaikan

banyaknya tabel yang saya punya pada aplikasi yang sedang saya bangun.

Jadi, setiap model memiliki fungsi menangani isi satu tabel. Misal, dalam

database saya memiliki tabel pengguna, artikel dan kategori, maka

dalam modelssaya buat 3 file

juga, Pengguna.php, Artikel.php dan Kategori.php. Kurang lebih seperti itu.

Page 2: App Login Laravel

Routes

Secara garis besar, Route disini bertujuan untuk menangani peng-

ALAMATAN atau URL website kita. Sekarang saatnya kita berkhayal. Kira-

kira ada berapa halaman yang akan kita gunakan untuk aplikasi kita.

Routes di laravel bernama routes.php berada

di proyek-laravel/app/routes.php.

Untuk aplikasi autentikasi ini kita hanya butuh :

Halaman Home (localhost:8000/)

Halaman Login (localhost:8000/login)

Halaman Beranda yang akan diakses setelah pengguna

login (localhost:8000/beranda)

Halaman Logout

Jadi, bisa disiapkan 4 route untuk menuju ke halaman tersebut seperti

berikut :

// proyek-laravel/app/routes.php

<?php

# Halaman Home yang nantinya berisi tombol login (localhost:8000/)

Route::get('/', function() {

return 'Halaman Home Aplikasi';

});

# Halaman login (localhost:8000/login)

Route::get('login', function() {

return 'Halaman Login';

});

# Halaman beranda yg di akses setelah login (localhost:8000/beranda)

Route::get('beranda', array('before' => 'auth', function() {

return 'Halaman Beranda';

}));

Page 3: App Login Laravel

# Halaman logout (localhost:8000/user/logout)

Route::get('user/logout', array('before' => 'auth', function() {

return 'Halaman Logout';

}));

?>

Sekarang kalian bisa coba akses keempat link terlebih dahulu melalui

browser. Untuk route ketiga(localhost:8000/beranda) dan

keempat (localhost:8000/user/logout) kita akan secara langsung di

lempar ke halaman localhost:8000/login, kenapa? Karena

terdapat filter didalamnya, yaitu'before' => 'auth' yang artinya halaman

itu hanya bisa diakses oleh member atau pengguna yang telah melalui

proses login.

Semoga kalian dapat gambaran tentang fungsi route walaupun cuma

sedikit disini.

Bila sudah, sekarang kita fokus ke Route pertama, ubah jadi seperti

berikut :

// proyek-laravel/app/routes.php

<?php

# Halaman Home yang nantinya berisi tombol login (localhost:8000/)

Route::get('/', array('as' => 'index', 'uses' =>

'AuthController@getIndex'));

# Halam...

Route::get('login', function() {

....

?>

Terdapat perubahan function() menjadi array disini, dan perhatikan

sekarang kita memiliki 2 nilai dalam route :

Page 4: App Login Laravel

1. as bernilai index

as disini berfungsi sebagai identitas si route itu sendiri. Sedikit bocoran,

biasanya identitas ini digunakan pada sesi Views dengan

cara route('index') atau URL::route('index') atau pada

sesiControllerdengan cara return Redirect::route('index');. Tenang, nanti

kalian akan paham sendiri kok. XD

2. uses bernilai AuthController@getIndex

Anda menggunakan uses berarti Anda menerima untuk menyerahkan

tugas dari route kepadaControllers. Sesuai arti uses artinya

menggunakan. Jadi bahasa gampangnya begini, Route ini

memerintahkan Controller bernama AuthController dengan method

bernama getIndex untuk selanjutnya menjalankan tugasnya.

Untuk route kedua, ubah jadi seperti berikut :

<?php

...

# Hala...

Route::get('/', array(...

# Halaman login (localhost:8000/login)

Route::get('login', array('as' => 'masuk', 'uses' =>

'AuthController@getMasuk'));

# Hala...

Route::get('beranda', array()...

...

?>

Sama seperti sebelumnya, sekarang route ini memiliki 2 nilai, identitas dan

pewaris. XD

Page 5: App Login Laravel

Route ketiga, ubah jadi seperti berikut :

<?php

...

Halaman log...

Route::get('login...');

# Halaman beranda yg di akses setelah login (localhost:8000/beranda)

Route::get('beranda', array('before' => 'auth', 'as' => 'admin', 'uses' =>

'AuthController@getAdmin'));

# Halaman logout...

Route::get('user/logout'...

...

?>

Dan untuk route terakhir, ubah jadi seperti berikut :

<?php

...

# Halaman logout (localhost:8000/user/logout)

Route::get('user/logout', array('before' => 'auth', 'as' => 'keluar',

'uses' => 'AuthController@getKeluar'));

...

?>

Masih tetap di route. Sekarang coba pikir, kita kemanakan inputan kita saat

login?. Untuk itu, berarti kita membutuhkan 1 buah route POST untuk

menangani inputan tersebut yang berupa usernamedan password.

Jadi, yang harus Anda lakukan sekarang adalah menambahkan 1 buah

route dengan HTTPRequestPOST seperti berikut :

<?php

Page 6: App Login Laravel

...

# Halaman login (localhost:8000/login)

Route::get('login', array(...

Route::post('login', array('as' => 'post-masuk', 'uses' =>

'AuthController@postMasuk'));

# Halaman beranda yg di akses setelah login (localhost:8000/beranda)

Route::get('beranda', array...

...

?>

OKE, sekarang urusan si route sudah selesai dan semua tanggung

jawabnya telah dilimpahkan keController.

Controllers

Controllers disini akan kita gunakan sebagai wadah kita mengelola semua

logika program. Dari beberapa hal yang telah kita lakukan sebelumnya,

dapat kita simpulkan bahwa saat ini kita harus memiliki sebuah Controller

bernama AuthController bila disesuaikan dengan apa yang kita tulis

didalam route program. Dan bila kita kumpulkan hasilnya adalah seperti

berikut :

1 Controller = AuthController

5 Method = getIndex, getMasuk, postMasuk, getAdmin, getKeluar

Sekarang buat file baru dalam proyek-laravel/app/controllers/* lalu beri

nama AuthController.php. Dan isikan syntax berikut :

// proyek-laravel/app/controllers/AuthController.php

<?php

class AuthController extends BaseController {

# route('index') | localhost:8000/

Page 7: App Login Laravel

public function getIndex() {

return 'Halaman Home Aplikasi';

}

# route('masuk') | localhost:8000/login

public function getMasuk() {

return 'Halaman Login';

}

# route('post-masuk') | localhost:8000/login

public function postMasuk() {

return 'Halaman Setelah form Login di Isi.';

}

# route('admin') | localhost:8000/admin

public function getAdmin() {

return 'Halaman Beranda.';

}

# route('keluar') | localhost:8000/user/logout

public function getKeluar() {

return 'Halaman Logout.';

}

}

?>

Sekarang coba akses masing-masing URL melalui browser kalian. Dan

hasilnya kurang lebih sama dengan pada saat kita insialisasikan

fungsi return melalui route sebelumnya.

Untuk getIndex()

Page 8: App Login Laravel

Disini kita akan menampilkan halaman yang memiliki tombol ‘Login’

didalamnya. Sekarang buat jadi seperti berikut :

<?php

class AuthController extends BaseController {

# route('index') | localhost:8000/

public function getIndex() {

return View::make('index');

}

# route('masuk') | localhost:8000/login

public function get...

}

?>

Sekarang kita memiliki View::make('index');. Apakah gerangan?. Secara

kasat mata, View disini berarti tampilan, bisa dikatakan segala hal yang

berbau tampilan dilakukan dalam view. Untuk letak, View ini terletak

di proyek-laravel/app/views/*. make('index'); artinya merujuk kearah file

bernamaindex.php atau index.blade.php yang terletak persis didalam

direktori proyek-laravel/app/views/.

Untuk getMasuk()

getMasuk akan menampilkan halaman atau form login seperti pada

umumnya. Coba perhatikan method getMasuk dan ubah menjadi seperti

berikut

<?php

public function getIndex() {

...

}

Page 9: App Login Laravel

# route('masuk') | localhost:8000/login

public function getMasuk() {

return View::make('login');

}

# route('post-masuk') | localhost:8000/login

public function postMasuk() {

...

}

?>

Sama seperti tadi, dari sini pihak controller menunjuk view sebagai pewaris

tugas dengan namalogin.php atau ‘login.blade.php’ dalam folder proyek-

laravel/app/views/.

Untuk getAdmin()

getAdmin() akan menampilkan sebuah halaman yang hanya bisa dimasuki

atau diakses ketika pengguna telah melakukan proses login. Bisa dibilang

ini merupakan halaman terlarang bagi pengunjung biasa. Coba ubah

menjadi seperti berikut :

<?php

...

# route('post-masuk') | localhost:8000/login

public function postMasuk() {

...

}

# route('admin') | localhost:8000/admin

public function getAdmin() {

return View::make('admin.index');

}

Page 10: App Login Laravel

# route('keluar') | localhost:8000/user/logout

public function getKeluar() {

...

}

?>

Sekarang fungsi getAdmin() disini diserahkan ke Views dengan ketentuan

file yang dimaksud bernama index.php atau index.blade.php yang berada

dalam folder admin didalam direktori views. Tanda . sebagai pemisah antara

nama file dengan direktori didepannya. Jadi akan ada folder baru kita

ciptakan dalam views.

Mudahnya direktorinya jadi seperti

ini : proyek-laravel/app/views/admin/index.blade.php.

Untuk getKeluar()

<?php

...

# route('admin') | localhost:8000/admin

public function getAdmin() {

...

}

# route('keluar') | localhost:8000/user/logout

public function getKeluar() {

# Hapus session dan cookies admin

Auth::logout();

# Arahkan ke route 'index' dengan session 'pesan'.

return Redirect::route('index')->withPesan('Anda telah

keluar dari sistem.');

}

Page 11: App Login Laravel

}

?>

Jadi ketika getKeluar() ini dikunjungi, dia akan

menghapus session dan cookie pengguna yang membuat pengguna keluar

dari sistem. Lalu menampilkan view index.blade.php dengan session

bernama ‘pesan’ untuk ditampilkan di index sesaat setelah

melakukan logout.

Untuk postMasuk()

Untuk POST sengaja saya buat belakangan karena bagian ini akan

menampung baris yang lebih banyak dari sebelumnya. Kalau dulu saya

pribadi sih biasanya saya buat dulu alur programnya, jadi istilahnya kita

ngomong ke postMasuk() ini dengan menggunakan bahasa kita lewat

komentar seperti berikut :

<?php

...

# route('masuk') | localhost:8000/login

public function getMasuk() {

...

}

# route('post-masuk') | localhost:8000/login

public function postMasuk() {

# Buat aturan validasi

//

# Bila validasi gagal

//

# Kembali kehalaman dan tampilkan error

//

# Bila sukses

//

Page 12: App Login Laravel

# Tarik masing-masing inputan yang berasal dari Form

//

# Lakukan Pencocokan username dan password

# Bila cocok

//

# Masuk ke Halaman Beranda Admin

//

# Bila tidak cocok

//

# Kembali kehalaman dan tampilkan error

//

}

# route('admin') | localhost:8000/admin

public function getAdmin() {

...

}

?>

Bagi yang belum terbiasa saya sarankan gunakan cara ini (gak harus sih

XD). Tapikan apa salahnya. Ngahahahaha….

Baca dulu baik-baik tiap komentar, bila menurut kalian semua masuk akal,

baru yuk kita lanjut.

Sekarang isi menjadi seperti berikut :

<?php

...

# route('masuk') | localhost:8000/login

public function getMasuk() {

...

}

Page 13: App Login Laravel

# route('post-masuk') | localhost:8000/login

public function postMasuk() {

# Buat aturan validasi

/* Tarik Inputan dari form sekaligus, lalu

masukkan kedalam variabel 'input' sekaligus */

$input = Input::all();

/* Buat aturannya dan tampung dalam variabel

'aturan' */

$aturan = array(

'username' => 'required|min:5|max:30',

'password' => 'required|min:5'

);

/* Dan lakukan validasi */

$validasi = Validator::make($input, $aturan);

# Bila validasi gagal

if($validasi->fails()) {

# Kembali kehalaman dan tampilkan error

return Redirect::back()

->withInput()

->withErrors($validasi);

# Bila sukses

Page 14: App Login Laravel

} else {

# Tarik masing-masing inputan yang berasal dari Form

$username = Input::get('username');

$password = Input::get('password');

/* Jadikan sati untuk keperluan verifikasi */

$verifikasi = compact('username', 'password');

# Lakukan Pencocokan username dan password

# Bila cocok

if(Auth::attempt($verifikasi)) {

# Masuk ke Halaman Beranda Admin

return Redirect::route('admin');

# Bila tidak cocok

} else {

# Kembali kehalaman dan tampilkan error

return Redirect::back()

->withPesan('Username dan Password

tidak cocok.');

}

}

Page 15: App Login Laravel

}

# route('admin') | localhost:8000/admin

public function getAdmin() {

...

}

?>

Perhatikan baik-baik tiap baris dan komentar-komentarnya. Kalau ada yang

mau ditanya, tanya dibawah ya.

Dan dengan ini, tugas si Controllers berakhir, sebelumnya

juga route sudah memenuhi kewajibannya dan saatnya sekarang kita

beralih ke Views.

Views

Sebelumnya saya sempat beberapa kali menyinggung masalah view dan

akan saya tekankan sekali lagi disini, tujuan utama si Views disini adalah

untuk menampilkan halaman. Pemegang tugas akhir laravel yang

menampilkannya kedalam bentuk visual untuk penggunanya.

Bila kita memeriksa ulang Controller kita, maka akan terkumpul 3 buah view

yang harus kita buat, dan mereka adalah :

index

login

admin/index

Sekarang masuk ke direktori proyek-laravel/app/views/ dan buat semua

view yang dibutuhkan, kurang lebih seperti gambar berikut :

Page 16: App Login Laravel

Mumpung masih disini saya juga akan mengenalkan kalian dengan

fitur blade milik laravel untuk keperluan templating.

Sekarang tambahkan 1 buat view lagi bernama utama.blade.php lalu

letakkan dalam folder _tema di direktori Views. Ya, kurang lebih Views kalian

jadi seperti ini :

Artinya sekarang kita memiliki 4 buah view :

_tema/utama.blade.php

admin/index.blade.php

index.blade.php

login.blade.php

Page 17: App Login Laravel

Untuk _tema/utama.blade.php

Akan dijadikan fondasi dasar kerangka website Anda. Tenang aja, nanti

kalian bakalan paham sendiri kok.

Sekarang isi seperti berikut :

<!DOCTYPE html>

<html>

<head>

<title>Autentikasi Sistem Sederhana</title>

</head>

<body>

<h2>Autentikasi Sederhana Menggunakan Laravel</h2>

<!-- Sediakan wadah untuk menampung session 'pesan',

ingat ketika controller pernah mengirim session

melalui variabel 'pesan' melalui 'withPesan();'? Kalau lupa

coba cek ulang -->

@if(Session::has('pesan'))

<p>{{ Session::get('pesan') }}</p>

@endif

<!-- Disinilah nantinya yang akan kita isi untuk setiap view

utama -->

@yield('konten')

</body>

</html>

Seperti yang kalian lihat, Yap, mereka adalah sekumpulan syntax HTML.

Tapi bila diperhatikan ada yang unik didalamnya.

Page 18: App Login Laravel

Secara kasat mata, kita tidak akan menyadari bila didalamnya terdapat

syntax PHP yang biasanya dibuka dengan <?php dan ditutup dengan ?>.

Yang ingin saya katakan disini adalah ini merupakan kemampuan dari

si blade milik laravel. Bila kita kumpulkan hal-hal unik tersebut maka jadi

seperti berikut :

@if(...) ... @endif intinya disini berbicara masalah kondisional

if...else....

{{ ... }} bernilai sama dengan <?php ... ?>

@yield akan dijadikan tempat menampung isi dari view-view lain.

Catatan : Perhatikan baik-baik. Ketiga hal aneh tersebut tidak akan bisa

terbaca oleh laravel tanpa ada .blade. Intinya terletak pada penamaan

file View. index.php tidak akan mengenalinya, sedangkanindex.blade.php lah

yang bisa. Itulah salah satu alasan kita

membutuhkan .blade dibelakangnya.

Untuk admin/index.blade.php

Merupakan Halaman yang akan diakses ketika pengguna telah melakukan

login, isi seperti berikut :

@extends('_tema.utama') <!-- Kita jadikan sebagai tema, file

'utama.blade.php' dalam foldder '_tema' -->

@section('konten') <!-- Ingat dengan yield 'konten' di

'utama.blade.php'?... Inilah yang akan diselipkan disana -->

<!-- nama_tampilan dan email diambil dari field dalam tabel pengguna di

database -->

<p>Selamat Datang, {{ Auth::user()->nama_tampilan }} ({{ Auth::user()-

>email }})</p>

Page 19: App Login Laravel

<!-- Sekarang Logout menggunakan route, perhatikan identitas route yang

digunakan -->

<p><a href="{{ route('keluar') }}">Keluar</a></p>

@stop

Penjelasan ada dimasing-masing komentar. Dibaca baik-baik yak, sampe

paham baru dilanjut.

Untuk index.blade.php

Didalamnya hanya akan terdapat tombol login yang akan mengarah

kehalaman login, jadi isi seperti berikut :

@extends('_tema.utama')

@section('konten')

<!-- Ingat, 'route('masuk')' mengarah ke identitas di route -->

<a href="{{ route('masuk') }}">Login Sebagai Admin</a>

@stop

Untuk login.blade.php

Halaman ini akan menampilkan form yang akan kita inputan, isi script

berikut :

@extends('_tema.utama')

@section('konten')

<!-- Kita gunakan identitas route berikut -->

{{ Form::open(array('route' => 'post-masuk')) }}

<!-- Label dan Textfield dengan id 'username' -->

{{ Form::label('username', 'Username') }}

{{ Form::text('username') }}

Page 20: App Login Laravel

<!-- Berikut adalah session validasi, sebuah kondisional

dimana ketika variabel 'errors' dari 'withErrors() di

Controller,

diterima, maka tampilkan validasi yang diterima',

dalam hal ini, untuk validasi username -->

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

{{ $errors->first('username') }}

@endif

<br/>

<!-- Label dan Passwordfield dengan id 'password' -->

{{ Form::label('password', 'Password') }}

{{ Form::password('password') }}

<!-- Berikut adalah session validasi, sebuah kondisional

dimana ketika variabel 'errors' dari 'withErrors() di

Controller,

diterima, maka tampilkan validasi yang diterima'

dalam hal ini untuk validasi password -->

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

{{ $errors->first('password') }}

@endif

<br/>

<!-- Tombol Masuk -->

{{ Form::submit('Masuk') }}

{{ Form::close() }}

@stop

Page 21: App Login Laravel

Dan terakhir, coba eksekusi program dengan php artisan serve melalui

terminal, yang berarti Autentikasi Sederhana kita SELESAI.

Kesimpulan

Ya, sebenarnya tutorial ini dikhususkan buat mereka yang betul-betul buta

tentang laravel pada khususnya (pemprograman PHP pada umumnya),

tetapi memiliki hasrat juang untuk berkenalan dengan si ‘laravel’ itu tadi.

Oleh karenanya sangat wajar bila programmer yang ngakunya pro bilang

kalau tulisan ini terlalu lebay, ngahaha… Intinya pesan dari saya

tersampaikan dengan baik. Dan mereka bisa memahami fungsi dari

beberapa yang dijelaskan diatas.

Ingat, semua programmer memiliki ciri khas mereka masing-masing, jadi

wajar bila tata penulisan syntax atau bahkan urutan dalam pembuatannya

berbeda antara satu dengan lainnya. Dan ini mengingatkan saya tentang

semboyan Bhineka Tunggal Ika XD. Meski memiliki cara dan urutan yang

berbeda-beda, namun memiliki satu tujuan jua. Ngahahaha…

Akhir kata, Happy Coding dan Salam Olahraga. Wassalam.

Proyek Jadi di GITHUB

Kunjungi dan Download