Laravel - Authentification (preparing)

Hello, kembali lagi kita ke tutorial Laravel 4.2.

Pada tutorial sebelumnya, kita sudah sampai pada localization pada Laravel 4.2 , tutorial kali ini merupakan lanjutan dari tutorial sebelumnya sehingga sangat dianjurkan bagi anda untuk mengikuti tutorial pada website ini secara struktural atau berurutan dimulai dari tutorial yang pertama yaitu instalasi Laravel 4.2 pada windows.

Jika anda sudah mengikuti atau minimal memahami tutorial sebelum-sebelumnya maka silahkan mulai memahami dan mempraktekkan tutorial ini.

Tutorial kali ini kita akan menyiapkan beberapa persiapan yang dibutuhkan untuk membuat sistem login atau authentification pada Laravel 4.2.

Oke langsung saja kita mulai tutorialnya.

Pertama buat route baru yang akan menuju pada halaman login dengan mengedit file route web.php pada path protected/app/routes/ menjadi seperti ini,

.
.
.
//login
Route::get('login', 'Controller\Auth\AuthController@indexLogin');
.
.
.

Selanjutnya kita buat link pada header untuk menuju pada route login dan menampilkan landing page login dengan mengedit file header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini,

<div class="header">
 <div class="banner">
  <div class="welcome">Welcome</div>
  {{-- code dibawah ini menggunakan constant variabel --}}
  <div class="gambar"><a href="#"><img src="{{ IMAGE_HEADER }}" style="width:"100px" height="129px";"></a></div>
 </div>
 <hr>
 <div class="menu">
  <div class="kiri">
   <li>
    <div class="dropdown">
      <button class="btn btn-default">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
        <a href="{{ URL::to('javaScript/js2')}}">Belajar Script2</a>
        <a href="{{ URL::to('javaScript/js3')}}">Belajar Script3</a>
        <a href="{{ URL::to('javaScript/js4')}}">Belajar Script4</a>
        <a href="{{ URL::to('javaScript/js5')}}">Belajar Script5</a>
        <a href="{{ URL::to('javaScript/js6')}}">Belajar Script6</a>
        <a href="{{ URL::to('javaScript/js7')}}">Belajar Script7</a>
      </div>
    </div>
   </li>
   <li>
     <div class="dropdown-script">
      <button onclick="myFunction()" class="dropbtn btn btn-default">Translate</button>
      <div id="myDropdown" class="dropdown-content-script">
        <a href="{{ URL::to('lang/en') }}">English</a>
        <a href="{{ URL::to('lang/ina') }}">Indonesia</a>
      </div>
     </div>
   </li>
  </div>
  <div class="kanan">
   <li onclick="location.href='{{ URL::to('login') }}';">Login</li>
   <li onclick="location.href='{{ URL::to('/') }}';">Cari</li>
  </div>
 </div>
</div>

Kemudian, rename file migration {tanggal}_User.php pada path protected/app/database/migration/ menjadi {tanggal}_create_users_table.php dan edit nama class-nya menjadi seperti ini,

<?php
//ini database laravel
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration {
.
.
.

Jangan lupa untuk mengcompile composernya lihat disini.

Setelah itu, buat controller baru pada folder baru dengan nama AuthController.php pada path protected/app/controllers/auth/ isi dengan code berikut,

<?php namespace Controller\Auth;

use Model\User;
use \Input;
use \View;
use \Validator;
use \Hash;
use \Redirect;
use \Auth;

class AuthController extends \BaseController
{
 public function indexLogin()
 {
  return View::make('auth.login');
 }
}

Terakhir kita buat landing page untuk login, dengan mambuat file blade baru pada folder baru dengan nama file login.blade.php pada path protected/app/views/auth/ isi dengan code berikut,

@extends('layouts/web/master')

<?php $title = "Login" ?>

@section('script')
@stop

@section('content')
<div class="isi">
 <div class="login">
  <h4>Login</h4><br>
  <div class="form-login">
   <form action="" method="POST">
    <div class="form-group">
              <label class="sr-only" for="username">Username</label>
              <div class="form-group has-feedback">
               <input type="email" class="form-control" placeholder="Masukan Email" name="email"/>
               <span class="glyphicon glyphicon-user form-control-feedback"></span>
           </div>
          </div>
          <div class="form-group">
              <label class="sr-only" for="password">Password</label>
              <div class="form-group has-feedback">
               <input type="password" class="form-control" placeholder="Masukan Password" name="password"/>
               <span class="glyphicon glyphicon-lock form-control-feedback"></span>
           </div>
          </div>
          <div class="form-group">
              <button type="submit" class="btn btn-block btn-success">Login</button>
          </div>
   </form>
  </div>
 </div>
</div>
@stop

Dan beri sedikit sentuhan css dengan mengedit file main.scss pada path public/css/master/ menjadi seperti ini,

body {
 margin: 0 0 0 0;
 width: 100%;
 background-color: #e9eaee !important;
 text-align: center;
}
.hidden{
 display: none;
}
.isi{
 /* sesuaikan untuk bootstrap */
 margin: 2%;
 /*---------------------------*/
 padding: 20px 2%;
 text-align: left;
 width: 96%;
 border-radius: 5px;
 background-color: white;
 border: 1px solid #e1e8ed;
 overflow: auto;
}

//tambah code buat login
.login{ 
 text-align: center;
 .form-login{
  width: 25%;
  display: inline-block;
 }
}
@import 'header';
@import 'footer';

Jangan lupa untuk mengcompile file scss menjadi css lihat disini.

Sehingga tampilan loginnya akan tampak seperti ini,

===DONE!===