Autentikasi Login Laravel - 2 Pembuatan Aplikasi

php • laravel • tutorial

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 syntax protected $table = 'users'; yang maksudnya aplikasi Anda sejak awal telah memiliki Model bernama User 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 harus 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 models saya buat 3 file juga, Pengguna.php, Artikel.php dan Kategori.php. Kurang lebih seperti itu.

*Update bagi pengguna Laravel versi terbaru (4.1.26 keatas), tambahkan 3 fungsi berikut dalam file User.php.

// app/models/User.php
<?php

use Illuminate\Auth\UserInterface;
use Illuminate\Auth\Reminders\RemindableInterface;

class User extends Eloquent implements UserInterface, RemindableInterface {

	...

	protected $table = 'pengguna';

	...

	public function getRememberToken() {
		return $this->remember_token;
	}

	public function setRememberToken($value) {
		$this->remember_token = $value;
	}

	public function getRememberTokenName() {
		return 'remember_token';
	}

}
?>

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';
}));
# 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 :

####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 sesi Controllerdengan 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 kepada Controllers. 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

  • 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 username dan password.

Jadi, yang harus Anda lakukan sekarang adalah menambahkan 1 buah route dengan HTTPRequest POST seperti berikut :

<?php
...
# 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 ke Controller.

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/
	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()

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 bernama index.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() {
		...
	}
	
	# 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 nama login.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');
	}

	# 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.');
	}	
}
?>

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
		//
			# 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() {
		...
	}

	# 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
		} 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.');
			}
		}

	}

	# 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 :

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

####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.

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, sedangkan index.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>

<!-- 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') }}

	<!-- 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

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…

Bilamana kiranya ada yang mau ditanyakan, langsung curahkan semuanya dikomentar vroh.

Akhir kata, Happy Coding dan Salam Olahraga. Wassalam.

##Proyek Jadi di GITHUB

Kunjungi dan Download