menu

Laravel - Clone project from github (windows)



Tutorial kali ini akan membahas tentang bagaimana cara meng-clone sebuah project laravel dari github atau bitbucket, mulai dari clone, setting database, compile composer, sampai update composer.

Pada dasarnya sebuah project laravel tidak bisa begitu saja kita copy dan jalankan pada komputer kita, ada begitu banyak settingan yang harus dilakukan untuk meng-clone sebuah project baru ke komputer pribadi kita.

Oke langsung saja kita mulai prakteknya,

Pertama buka project laravel yang akan kita clone dari github, tampilannya akan tampak kurang lebih seperti ini,


Download saja langsung file ZIP-nya, atau bisa anda clone langsung pada komputer anda melalui syntax github seperti ini,
git clone https://github.com/victra/laravel.git
//butuh syntax github yang lain?


Jika sudah di download silahkan unzip atau unrar dan tempatkan pada url yang dapat diakses nantinya, sehingga file project laravel yang sudah di download atau di clone akan tapak seperti ini,


Pada saat anda buka url project laravel tersebut akan muncul error  seperti ini,


Untuk memperbaikinya lakukan langkah ini,



Jika sudah "OK" buka kembali url project laravelnya, jika muncul error seperti ini,


Pada error tersebut tidak ada keterangan errornya, untuk melihat errornya silahkan ubah file app.php pada path config/ pastikan debug bernilai true, seperti ini,


Error tersebut muncul karena database belum disetting, Dan untuk mengatasi error tersebut, anda harus mensetting database-nya, seperti ini:
Jika project laravel menggunakan env seperti ini,


Maka pengaturan database diletakkan pada file .env, jika tidak ada file .env maka copy saja file .env.example, ubah namanya menjadi .env
Sehingga tampilan file .env akan tampak seperti ini,


Isi database dengan nama database, username dengan username akses database, dan password dengan password akses database anda pada phpmyadmin.

Jika project laravel tidak menggunakan env, maka langsung ubah saja file database.php pada path config/ ubah bagian mysql menjadi seperti ini,


Isi database dengan nama database, username dengan username akses database, dan password dengan password akses database anda pada phpmyadmin.

Kemudian buka url project pada terminal dan lakukan migrate "php artisan migrate" seperti ini,


Jika muncul error dibawah ini berarti setting database anda masih salah,


Buka kembali url project anda pada browser, jika muncul error seperti ini,

"No supported encrypter found. The cipher and / or key length are invalid."

berarti key laravel anda salah untuk memperbaikinya tinggal di "php artisan key:generate"


Buka kembali url project anda pada browser, dan Taraaaa,, maka akan tampak tampilan project anda seperti ini,


Jika ada error lain bisa contact us,

===DONE!===

Engine PHP - Login instagram api


Hallo semuanya,

Tutorial kali ini kita akan mempraktekan bagaimana cara membuat login menggunakan api instagram. Engine yang akan kita buat ini akan menggunakan bahasa PHP, os windows dengan menggunakan library guzzlehttp.

Oke langsung saja kita mulai prakteknya,

Pertama, buat login instagram menggunakan akun anda terlebih dahulu, kemudian buka url https://www.instagram.com/developer/ sehingga akan muncul tampilan seperti ini,


Silahkan isi sesuai dengan keinginan anda,

Setelah sign up maka instagram pun sudah langsung memberikan hak akses kepada kita untuk menggunakan api-nya tapi hanya sebatas sandbox. Tampilannya akan tampak seperti ini,


Pada gambar diatas klik button manage dan anda akan melihat kode client id dan client secret yang akan kita gunakan untuk membuat function yang dapat membaca data-data api instagram.


Pada gambar diatas klik tab security untuk menambahkan url file tempat meletakkan function yang dapat membaca data-data api instagram tadi.

Sedangkan tab sandbox berisi user instagram mana saja yang dapat digunakan untuk percobaan login api instagram tersebut,


Tab permission digunakan untuk mengirimkan submission kepada pihak instagram agar kita sebagai developer dapat menggunakan api tersebut secara global, bukan secara sanbox yang sangat terbatas penggunaannya.


Oke sekarang buat folder project apinya, dalam hal ini url project saya akan saya tempatkan pada "http://localhost/test/test-instagram" kemudian masuk pada folder test-instagram dan buat file bernama index.php, kemudian isikan code berikut,
<?php
require 'vendor/autoload.php';
$code  = $_GET["code"] ? $_GET["code"] : null;
$client = new \GuzzleHttp\Client(['verify' => false]);

try {
    $res = $client->request("POST", "https://api.instagram.com/oauth/access_token", [
        'form_params' => [
            'client_id' => '<isi dengan kode client id anda>',
            'client_secret' => '<isi dengan kode client secret anda>',
            'grant_type' => 'authorization_code',
            'redirect_uri' => 'http://localhost/test/test-instagram', //isi dengan url project anda
            'code' => $code
        ]
    ]);
} catch (ClientException $e) {
    customException([
        "status" => $this::ERROR_LOGIN_INSTAGRAM,
        "messages" => $e->getMessage(),
    ]);
}

/** @var ResponseInterface $res */
$resultArray = json_decode($res->getBody()->getContents());

$userInstagram = $resultArray;
var_dump($userInstagram);

Jangan lupa kita menggunakan library guzzlehttp sehingga kita harus menginstallnya terlebih dahulu,
caranya?

Pertama install dulu composer pada komputer, download saja disini,

Kemudian download file composer.phar dan masukkan ke dalam folder test-instagram tadi, filenya download saja disini,

Selanjutnya, install guzzlehttp menggunakan composer dengan cara buka command prompt dan ketikkan syntax berikut, "php composer.phar require guzzlehttp/guzzle:~6.0". Tampilannya akan tampak seperti ini,


Sehingga struktur folder project engine yang kita buat akan berubah menjadi seperti ini,


Terakhir test engine dengan cara browse url ini pada browser "https://www.instagram.com/oauth/authorize/?client_id=<isi dengan kode client id anda>&redirect_uri=http://localhost/test/test-instagram&response_type=code"

Dan taraaaa, codedoctpun berhasil mendapatkan access token-nya! hasilnya akan tampak seperti ini,


===DONE!===

WHY?

1. Could not open input file: composer.phar?


itu berarti file composer.phar tidak ada pada folder project anda, silahkan download dulu seperti instruksi diatas.

2. Jika ada masalah lain silahkan contact us atau comment saja.

Engine NODE - Parsing html to get data with js


Hallo semuanya,

Sudah lama sekali codedoct tidak memberikan tutorial membuat suatu engine. Tutorial kali ini akan membahas tentang membuat sebuah engine parsing halaman html untuk menadapatkan data-datanya.

Engine ini akan dibuat menggunakan node.js, pada os windows.

Oke langsung saja kita buat enginenya,

Pertama, buat terlebih dahulu folder projectnya dan buat file js baru <nama_file>.js dalam hal ini codedoct memberi nama file test.js sehingga hasilnya akan tampak seperti ini,


Selanjutnya, install beberapa modul js yang diperlukan diantaranya,
request : for request url


cheerio : for parsing html


sleep : for delay execution code


Kemudian isikan code berikut pada file test.js yang sudah kita buat,
function w10e01l10c01o10me01()
{
 for (var i = 10000; i >= 0; i--) {
  console.log('.....................................');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('............w........................');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('..............e......................');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('................l....................');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('..................c..................');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('....................o................');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('......................m..............');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('........................e............');
 };
 for (var i = 10000; i >= 0; i--) {
  console.log('.....................................');
 };
 console.log('--------------Dont Close-------------');
}

function p10r01o10c01e10s01s10i01n10g01()
{
 var sleep = require('sleep');
 console.log('Process...');
 sleep.sleep(5);
}

function g10e01t10N01a10m01e10()
{
 var os = require("os");
 var sleep = require('sleep');
 console.log('Hello: '+os.hostname());
 sleep.sleep(3);
}

function g1e0t1C0a1t0e1g0o1r0y1()
{
 var cheerio = require('cheerio');
 var request = require('request');
 var categoryArray = new Array();

 request({
     method: 'GET',
     url: 'http://m.bnizona.com/index.php/category/index/promo'
 }, function(err, response, body) {
     if (err) return console.log('This engine need connection..');
  //cherio
  $ = cheerio.load(body);
  $('ul.menu li a').each(function(i, element) {
      var category = $(this).text();
      var url_category = $(this).attr('href');

   categoryArray[category] = {};

   request({
    method: 'GET',
    url: url_category
   }, function(err, response, body) {
    if (err) return console.error(err);
    var j = 0;
    //cherio
    $ = cheerio.load(body);
    $('ul#lists li a').each(function(i, element) {
     var detail = $(this).find('span.promo-title').text();
     var image_url = $(this).find('img').attr('src');
     var title = $(this).find('span.merchant-name').text();
     var valid = $(this).find('span.valid-until').text();

     categoryArray[category][j] = {
      title : title,
      image_url : image_url,
      date_validation : valid,
      detail : detail,
     };
     j=j+1;
    });
    console.log(categoryArray);
   });
   // console.log(categoryArray);
  });
  // console.log(categoryArray);
 });
}

function s1t0o10p1P0r1o0c1e0s1s0()
{
 var sleep = require('sleep');
 console.log("Sorry i can't give you all the code");
 sleep.sleep(3);
 console.log("-------------------------------------");
 sleep.sleep(3);
}

function g1e0t1S0c1r0a1p0e1C0e1r0m1a0t1i0()
{
 w10e01l10c01o10me01();
 p10r01o10c01e10s01s10i01n10g01();
 g10e01t10N01a10m01e10();
 g1e0t1C0a1t0e1g0o1r0y1();
 s1t0o10p1P0r1o0c1e0s1s0();
}

g1e0t1S0c1r0a1p0e1C0e1r0m1a0t1i0();

Sehingga saat kita mnjalankan "node test.js" maka akan tampil data seperti ini,


Jika anda ingin yang instan download saja langsung codenya disini,

===DONE!===

Laravel - Authentification (logout)


Pada tutorial sebelumnya kita sudah berhasil membuat sistem login, selanjutnya tutorial kali ini kita akan membuat sistem logout pada laravel.

Algoritamnya mudah saja yaitu dengan menghapus session yang tersimpan pada project kita.

Oke, langsung saja kita mulai praktek tutorialnya.

Pertama, buat terlebih dahulu routenya dengan mengedit file web.php pada path protected/app/routes/ menjadi seperti ini,
.
.
.
//login
Route::get('login', 'Controller\Auth\AuthController@indexLogin');
Route::post('login', 'Controller\Auth\AuthController@login');
Route::get('logout', 'Controller\Auth\AuthController@logout');
.
.
.

Selanjutnya, buat function untuk logout dengan mengedit file AuthController.php
pada path protected/app/controllers/auth/ menjadi seperti ini,
<?php namespace Controller\Auth;

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

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

 public function login() 
 {
  $user = NULL;
  // Check whether input is an email or username
  $field = Validator::make(
     array('email' => Input::get('username', '')),
     array('email' => 'email'))
     ->passes() ? 'email' : 'username';
  $credentials = array(
   $field   => Input::get('email'), 
   'password'  => Input::get('password', '')
  );

  $remember = Input::get('remember', '1') == '1' ? true : false;

  $status = INVALID_CREDENTIAL;

  if(Auth::attempt($credentials, $remember)) {
   $user = Auth::user();
   $status = OK;
  }

  // For Logging
  Session::put(SESSION_LOG_STATUS, $status);
  Session::put(SESSION_LOG_TYPE, LOGGING_UPDATE);
  Session::put(SESSION_LOG_MODEL, $user);
  // dd($user);
  return Redirect::to('');
 }

 public function logout() 
 {
  $status = INVALID_CREDENTIAL;
  $user = Auth::user();

  if(!$user) {
   return Redirect::to('login');
  } else {
   $status = OK;
   $user = Auth::logout();
  }

  // For Logging
  Session::put(SESSION_LOG_TYPE, LOGGING_UPDATE);
  Session::put(SESSION_LOG_STATUS, $status);
  Session::put(SESSION_LOG_MODEL, $user);

  return Redirect::to('');
 }
}

Kemudian, edit 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">
   @if(Auth::user())
    <li onclick="if(confirm('Are you sure to logout?')) location.href='{{ URL::to('logout') }}';">Logout</li>
   @else
    <li onclick="location.href='{{ URL::to('login') }}';">Login</li>
   @endif
   <li onclick="location.href='{{ URL::to('/') }}';">Cari</li>
  </div>
 </div>
</div>

Terakhir, edit file hello.blade.php pada path protected/app/views/web/ menjadi seperti ini,
@extends('layouts/web/master')

<?php $title = "Welcome" ?>

@section('script')
@stop

@section('content')
<div class="isi">
 <h4>{{ trans('translate.welcome_to_codedoct'); }} @if(Auth::user()){{Auth::user()->name}}@else Guest @endif</h4>
 <br>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt facilis, dolore similique maiores? Doloribus, asperiores. Iusto debitis tempora velit repellat sed autem, quaerat commodi, necessitatibus soluta quos libero voluptatibus eum.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt facilis, dolore similique maiores? Doloribus, asperiores. Iusto debitis tempora velit repellat sed autem, quaerat commodi, necessitatibus soluta quos libero voluptatibus eum.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt facilis, dolore similique maiores? Doloribus, asperiores. Iusto debitis tempora velit repellat sed autem, quaerat commodi, necessitatibus soluta quos libero voluptatibus eum.</p>
</div>
@stop

Sehingga tampilannya saat akan logout akan tampak seperti ini,


Dan saat sudah logout akan tampak seperti ini,


===DONE!===

Laravel - Authentification (login)


Pada tutorial sebelumnya kita sudah menyiapkan landing page dan migration file untuk sistem login, pada tutorial kali ini kita akan  membuat sistem loginnya.

Oke, langsung saja kita mulai prakteknya,

Pertama, buat route baru untuk sistem login ini dengan mengedit file web.php pada path protected/app/routes/ menjadi seperti ini,
.
.
.
//login
Route::get('login', 'Controller\Auth\AuthController@indexLogin');
Route::post('login', 'Controller\Auth\AuthController@login');
.
.
.

Selanjutnya, buat function controller baru dengan mengedit file AuthController.php pada path protected/app/controllers/auth/ menjadi seperti ini,
<?php namespace Controller\Auth;

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

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

 public function login() 
 {
  $user = NULL;
  // Check whether input is an email or username
  $field = Validator::make(
     array('email' => Input::get('username', '')),
     array('email' => 'email'))
     ->passes() ? 'email' : 'username';
  $credentials = array(
   $field   => Input::get('email'), 
   'password'  => Input::get('password', '')
  );

  $remember = Input::get('remember', '1') == '1' ? true : false;

  $status = INVALID_CREDENTIAL;

  if(Auth::attempt($credentials, $remember)) {
   $user = Auth::user();
   $status = OK;
  }

  // For Logging
  Session::put(SESSION_LOG_STATUS, $status);
  Session::put(SESSION_LOG_TYPE, LOGGING_UPDATE);
  Session::put(SESSION_LOG_MODEL, $user);
  // dd($user);
  return Redirect::to('');
 }
}

Kemudian, tambahkan field remember token pada database dengan mengedit file {tanggal}_create_users_table.php pada path protected/app/database/migration/ menjadi seperti ini,
<?php
//ini database laravel
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration {

 /**
  * Run the migrations.
  *
  * @return void
  */
 public function up()
 {
  Schema::create('users', function($table){
   $table->increments('id');
   $table->string('name');
   $table->string('username')->unique('username');
   $table->string('email')->unique('email');
   $table->string('password');
   $table->string('remember_token', 100)->nullable();
   $table->timestamps();
  });
 }

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

}

Setelah itu, tambahkan beberapa constant baru untuk keperluan sistem login ini dengan mengedit file constants.php pada path protected/app/ menjadi seperti ini,
.
.
.
// Localization
 define('trans', 'Lang::get');

 // Session Logging
 define('SESSION_LOG'  , 'logging');
 define('SESSION_LOG_TYPE' , 'logging.type');
 define('SESSION_LOG_MODEL' , 'logging.model');
 define('SESSION_LOG_STATUS' , 'logging.status');

 // Logging type
 define('LOGGING_CREATE'  , 'create');
 define('LOGGING_UPDATE'  , 'update');
 define('LOGGING_DELETE'  , 'delete');
 define('LOGGING_RESTORE' , 'restore');

 //Auth
 define('OK', 'OK');
 define('INVALID_CREDENTIAL', 'INVALID_CREDENTIAL');

Terakhir edit file blade 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">
   @if(Auth::user())
    <li onclick="location.href='{{ URL::to('') }}';">Logout</li>
   @else
    <li onclick="location.href='{{ URL::to('login') }}';">Login</li>
   @endif
   <li onclick="location.href='{{ URL::to('/') }}';">Cari</li>
  </div>
 </div>
</div>

Dan edit juga file blade hello.blade.php untuk melihat flecnya, file ini terletak pada path protected/app/views/web/ edit menjadi seperti ini,

@extends('layouts/web/master')

<?php $title = "Welcome" ?>

@section('script')
@stop

@section('content')
<div class="isi">
 <h4>{{ trans('translate.welcome_to_codedoct'); }} @if(Auth::user()){{Auth::user()->name}}@else Guest @endif</h4>
 <br>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt facilis, dolore similique maiores? Doloribus, asperiores. Iusto debitis tempora velit repellat sed autem, quaerat commodi, necessitatibus soluta quos libero voluptatibus eum.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt facilis, dolore similique maiores? Doloribus, asperiores. Iusto debitis tempora velit repellat sed autem, quaerat commodi, necessitatibus soluta quos libero voluptatibus eum.</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt facilis, dolore similique maiores? Doloribus, asperiores. Iusto debitis tempora velit repellat sed autem, quaerat commodi, necessitatibus soluta quos libero voluptatibus eum.</p>
</div>
@stop

Sehingga tampilan saat tidak sedang login akan tampak seperti ini,


Sedangkan tampilan saat sedang login akan tampak seperti ini,


===DONE!===

WHY?
1. Error undefined method User::newQuery() ?

ini disebabkan karena ada nama class yang sama sehingga membuat class tersebut tidak sinkron dengan parameter yang digunakan. Dalam hal ini nama class yang sama adalah class model dengan class migration, cara memperbaikinya yaitu dengan mengganti nama file class migrationnya.
Ikuti saja langkah tutorial sebelumnya dengan baik dan benar, maka error ini tidak akan terjadi.

2. Error Class '\User' not found

ini disebabkan karena, nama model pada auth salah, cara memperbaikinya buka file auth.php pada path protected/app/config/ cari 'model' => 'bla..bla..bla', isi bla..bla..bla dengan nama model yang akan digunakan sebagai auth, dalam hal ini kita akan menggunakan model User maka edit menjadi seperti ini 'model' => 'Model\User',.

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

Rails - Authentification (logout)


Ini adalah artikel pertama pada tahun 2017, sudah lama vakum karena liburan akhirnya bisa kembali ngeblog.

Pada tutorial sebelumnya kita sudah membuat sebuah function login pada project Ruby on Rails, sekarang kita akan melanjutkan tutorialnya dengan menambahkan function logout.

Pertama, edit file routes.rb pada path config/ dengan menambahkan route logout sehingga akan tampak seperti ini,
Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  # root 'application#hello'
  get 'users' => 'users#index'

  get '' => 'home#index'

  get 'signup' => 'users#_signup'
  post 'signup' => 'users#_addUser'

  get 'login' => 'auth#index'
  post 'login' => 'auth#create'
  delete 'logout' => 'auth#logout'

  get 'edit/:id' => 'users#_show', as: :user
  post 'edit/:id' => 'users#_edit'

  delete 'delete/:id' => 'users#_delete'
end

Selanjutnya, tambahkan function logout dengan mengedit controller auth_controller.rb pada path app/controllers/ sehingga akan tampak seperti ini,
class AuthController < ApplicationController
 def index
 end

 def create
  @user = User.find_by_email(params[:session][:email])
  if @user && @user.authenticate(params[:session][:password])
   session[:user_id] = @user.id
   redirect_to '/'
  else
   redirect_to 'login'
  end
 end

 def logout
  session[:user_id] = nil
  redirect_to '/'
 end
end

Kemudian, tambahkan link untuk logout yang akan kita tempatkan pada file application.html.erb pada path app/layouts/ sehingga codenya akan tampak seperti ini,
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Page</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
 <div class="header">
  <div class="content">
   <div class="left-float">
    <a href="/" class="button-header">Home</a>
    <div class="dropdown">
     <a class="button-header dropbtn" onclick="myFunction()">Table</a>
     <div id="myDropdown" class="dropdown-content">
      <a href="/users">User</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
     </div>
    </div> 
   </div>
   <div class="right-float">
    <% if current_user %>
     <%= link_to 'Logout', logout_path, method: :delete, data: { confirm: 'Are you sure to logout?' } %>
    <% else %>
     <a href="/login" class="button-header">Login</a>
    <% end %>
   </div>
  </div>
 </div>
 <div class="isi">
     <%= yield %>
    </div>
    <div class="footer">
  COPYRIGHT © 2016 CODEDOCT.COM ALL RIGHTS RESERVED.
 </div>
  </body>
</html>

Terakhir, buat tanda sedang login atau tidak dengan mengedit file index.html.erb pada path app/views/home/ menjadi seperti ini,
<%= provide(:title, "Home") %>
<h1 class="text-center">Welcome to my ruby website <% if current_user %><%=current_user.email%><% else %>Guest<% end %></h1>
<br>
<p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Sehingga tampilan saat sedang tidak login akan tampak seperti ini,


Sedangkan tampilan saat sedang login dan akan logout akan tampak sepreti ini,



===DONE!===