Crear un login con Laravel

En este tutorial vamos a crear un pequeño ejemplo de login con Laravel. Para los nuevos en el tema aquí les dejo unos enlaces donde encontrarán información de cómo instalar y configurar Laravel:

En Ubuntu:

• Instalar Laravel en Ubuntu
  
  En Windows:
  
• Cómo instalar Laravel y Composer
  

Este tutorial consta de tres partes:

1. Base de datos
   
2. Programación
   
3. Diseño
   

Base de datos

Primero que nada vamos a crear una base de datos con el nombre “login” (pueden usar phpMyadmin o la herramienta que más les guste).



Ahora vamos a configurar Laravel, para eso vamos al archivo app/config/database.php, por default Laravel viene configurado para usar mysql así que solamente vamos a cambiar los datos de conexión:

Código :

 'mysql' => array(
            'driver'    => 'mysql',
            'host'      => 'localhost',
            'database'  => login,
            'username'  => 'root',
            'password'  => 'password',
            'charset'   => 'utf8',
            'collation' => 'utf8_unicode_ci',
            'prefix'    => '',
        ),

Ahora vamos a usar las migraciones de artisan para crear la tabla users, para eso vamos a nuestra terminal y dentro de nuestro proyecto ejecutamos los siguientes comandos:

Código :

php artisan migrate:install

Nos mostrará un mensaje similar al siguiente:

Código :

Migration table created successfully.

Y nos creará una tabla llamada migrations en nuestra base de datos.

Ahora con el siguiente comando creamos una nueva migración llamada create_table_users:

Código :

php artisan migrate:make create_users_table

Nos mostrará un mensaje similar a:

Código :

Created Migration: 2014_01_19_200752_create_users_table
Generating optimized class loader

Nos ha creado un archivo en app/database/migrations/2014_01_19_200752_create_users_table.php (Si nos damos cuenta le agrego la fecha al nombre de nuestro archivo) ahora lo modificamos hasta dejarlo de la siguiente manera:

Código :

<?php

use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration {

    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        // Creamos la tabla users con los campos más básicos.
        Schema::create('users',function($table){
            $table->increments('id');
            $table->string('name',100);
            $table->string('username',100)->unique();
            $table->string('email',100)->unique();
            $table->string('password');
            $table->timestamps();
        });
    }

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

}

Para ejecutar la migración ejecutamos el siguiente comando:

Código :

php artisan migrate

Y nos mostrará el siguiente mensaje:

Código :

Migrated: 2014_01_19_200752_create_users_table

Si quieren tener más información sobre migraciones pueden revisar el tutorial Configurar Base de Datos y crear tablas con Laravel.

Bien, ya tenemos nuestra base de datos con la tabla users pero ahora necesitamos un usuario inicial, para eso creamos el archivo UsersTableSeeder.php en app/database/seeds/ con el siguiente código:

Código :

<?php

/**
* Agregamos un usuario nuevo a la base de datos.
*/
class UserTableSeeder extends Seeder {
    public function run(){
        User::create(array(
            'username'  => 'admin',
            'email'     => '[email protected]',
            'name'=> 'Administrator',
            'password' => Hash::make('admin') // Hash::make() nos va generar una cadena con nuestra contraseña encriptada
        ));
    }
}

Ahora nos vamos a nuestro archivo app/database/seeds/DatabaseSeeder.php vamos a ver que Laravel por default ya tiene un ejemplo comentado para agregar nuestra clase UserTableSeeder, así que solo la descomentamos y quedará de la siguiente manera:

Código :

<?php

class DatabaseSeeder extends Seeder {

    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Eloquent::unguard();

        $this->call('UserTableSeeder');
    }

}

Vamos a nuestra terminal y ejecutamos el siguiente comando:

Código :

php artisan db:seed

Nos mostrará un mensaje similar a este:

Código :

Seeded: UserTableSeeder

Listo ya tenemos nuestro usuario inicial.

Programación

En esta parte vamos a configurar nuestras rutas, validar los datos de inicio de sesión y gestionar el cierre de sesión.

Vamos a editar nuestro archivo de rutas (app/routes.php).
Por default sólo vamos a tener la siguiente ruta que es la que nos da la bienvenida.


Lo editamos para que quede de la siguiente manera:

Código :

<?php

// Nos mostrará el formulario de login.
Route::get('login', 'AuthController@showLogin');

// Validamos los datos de inicio de sesión.
Route::post('login', 'AuthController@postLogin');

// Nos indica que las rutas que están dentro de él sólo serán mostradas si antes el usuario se ha autenticado.
Route::group(array('before' => 'auth'), function()
{
    // Esta será nuestra ruta de bienvenida.
    Route::get('/', function()
    {
        return View::make('hello');
    });
    // Esta ruta nos servirá para cerrar sesión.
    Route::get('logout', 'AuthController@logOut');
});

Ahora ya tenemos registradas 3 rutas:

Código :

/ 

Nos mostrará un mensaje de bienvenida y un link para cerrar sesión.

Código :

/login

Nos mostrará un formulario pidiendo los datos para iniciar sesión.

Código :

/logout

La usaremos para terminar la sesión y volver a mostrar el formulario de login.

Y como está comentado en código sólo se puede tener acceso a / y /logout si antes has iniciado sesión.

Empezaremos con la ruta /login:

Código :

Route::get('login', 'AuthController@showLogin');

Como vemos estamos haciendo uso de un controller llamado AuthController y haciendo referencia a la función showLogin ¿que quiere decir esto? que cuando alguien mande llamar la ruta /login laravel ejecutará la función showLogin de nuestro UserController.

Ahora vamos a nuestro carpeta app/controllers/ y creamos un archivo llamado AuthController.php y agregamos el siguiente código:

Código :

<?php

class AuthController extends BaseController {
    /*
    |--------------------------------------------------------------------------
    | Controlador de la autenticación de usuarios
    |--------------------------------------------------------------------------
    */
}

Desde este archivo controlaremos la autenticación de los usuarios.
Procedemos a agregar la función showLogin(), agregando el siguiente código dentro de la clase que acabamos de crear:

Código :

/**
     * Muestra el formulario para login.
     */
    public function showLogin()
    {
        // Verificamos que el usuario no esté autenticado
        if (Auth::check())
        {
            // Si está autenticado lo mandamos a la raíz donde estara el mensaje de bienvenida.
            return Redirect::to('/');
        }
        // Mostramos la vista login.blade.php (Recordemos que .blade.php se omite.)
        return View::make('login');
    }

Aunque ya creamos nuestra función showLogin() aún no nos va responder laravel cuando mandemos llamar la ruta /login ya que nos falta crear la vista.

Ahora nos dirigimos a nuestra carpeta app/views/ y creamos un archivo llamado login.blade.php y le agregamos el siguiente código:

Código :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login</title>
    </head>
    <body>
        {{-- Preguntamos si hay algún mensaje de error y si hay lo mostramos  --}}
        @if(Session::has('mensaje_error'))
            {{ Session::get('mensaje_error') }}
        @endif
        {{ Form::open(array('url' => '/login')) }}
            {{ Form::label('usuario', 'Nombre de usuario') }}
            {{ Form::text('username', Input::old('username')); }}
            {{ Form::label('contraseña', 'Contraseña') }}
            {{ Form::password('password'); }}
            {{ Form::label('lblRememberme', 'Recordar contraseña') }}
            {{ Form::checkbox('rememberme', true) }}
            {{ Form::submit('Enviar') }}
        {{ Form::close() }}
    </body>
</html>

Bien ahora sí, ya tenemos lista nuestra vista para el login. Si entramos desde nuestro navegador a ver nuestro proyecto nos redireccionará a /login mostrando un formulario similar al siguiente:



Lo sé, se ve muy feo pero más tarde regresaremos a darle un toque de diseño por ahora nos enfocaremos en hacerlo funcionar.

Ahora tenemos que decirle a Laravel qué hacer cuando se mande el submit al formulario del login, en nuestro archivo routes.php ya tenemos definida esa ruta:

Código :

Route::post('login', 'AuthController@postLogin');

Solo falta agregar la siguiente función dentro de nuestro controller AuthController:

Código :

/**
     * Valida los datos del usuario.
     */
    public function postLogin()
    {
        // Guardamos en un arreglo los datos del usuario.
        $userdata = array(
            'username' => Input::get('username'),
            'password'=> Input::get('password')
        );
        // Validamos los datos y además mandamos como un segundo parámetro la opción de recordar el usuario.
        if(Auth::attempt($userdata, Input::get('remember-me', 0)))
        {
            // De ser datos válidos nos mandara a la bienvenida
            return Redirect::to('/');
        }
        // En caso de que la autenticación haya fallado manda un mensaje al formulario de login y también regresamos los valores enviados con withInput().
        return Redirect::to('login')
                    ->with('mensaje_error', 'Tus datos son incorrectos')
                    ->withInput();
    }

Si intentamos iniciar sesión con valores incorrectos deberá mandar al mismo formulario con un mensaje de error y de lo contrario nos mandará a la vista default de Laravel.

Ahora vamos a modificar la vista hello.php. Primero le cambiaremos la extensión para usar el sistema de plantillas blade, entonces le cambiamos el nombre a hello.blade.php y modificamos el contenido para quede de la siguiente manera:

Código :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel PHP Framework</title>
</head>
<body>
    <div class="welcome">
        <h1>Bienvenido {{ Auth::user()->name; }}</h1>
        <a href="/logout">Cerrar sesión.</a>
    </div>
</body>
</html>

Si vamos a nuestro navegador y refrescamos nuestra página nos mostrará algo similar a la siguiente pantalla:



Muy bien, ahora vamos a hacer que el usuario pueda cerrar su sesión, en routes.php ya tenemos definida la ruta /logout:

Código :

Route::get('logout', 'AuthController@logOut');

Falta agregar la función logOut en nuestro controller, así que agregaremos el siguiente código en AuthController.php:

Código :

/**
     * Muestra el formulario de login mostrando un mensaje de que cerró sesión.
     */
    public function logOut()
    {
        Auth::logout();
        return Redirect::to('login')
                    ->with('mensaje_error', 'Tu sesión ha sido cerrada.');
    }

Y ahora ya podemos hacer uso del link que pusimos en nuestra vista de bienvenida.
Muy bien, ya terminamos. Ya puedes iniciar sesión, restringir tus rutas y cerrar sesión… esperen un momento, dijimos que íbamos a regresar a darle un toque de diseño a nuestro ejemplo así que vamos al paso tres.

Un toque de diseño con Bootstrap

Ahora toca el turno del diseño y qué mejor forma que haciendo el uso de Bootstrap.
Lo agregaremos de la forma más fácil que es descargar los archivos.

Vamos al sitio web de Bootstrap (http://getbootstrap.com/) y le damos clic en Download Bootstrap. Nos descargará un archivo llamado: bootstrap-3.0.3-dist.zip.

Extraemos los archivos, nos deben aparecer los siguientes directorios:


Los copiamos a nuestro proyecto en la carpeta public/

Ahora modificaremos nuestras 2 vistas (login.blade.php y hello.blade.php) para que terminen de la siguiente manera:

login.blade.php

Código :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login</title>
        {{ HTML::style('css/bootstrap.css'); }}
    </head>
    <body>
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-body">
                    {{-- Preguntamos si hay algún mensaje de error y si hay lo mostramos  --}}
                    @if(Session::has('mensaje_error'))
                        <div class="alert alert-danger">{{ Session::get('mensaje_error') }}</div>
                    @endif
                    {{ Form::open(array('url' => '/login')) }}
                        <legend>Iniciar sesión</legend>
                        <div class="form-group">
                            {{ Form::label('usuario', 'Nombre de usuario') }}
                            {{ Form::text('username', Input::old('username'), array('class' => 'form-control')); }}
                        </div>
                        <div class="form-group">
                            {{ Form::label('contraseña', 'Contraseña') }}
                            {{ Form::password('password', array('class' => 'form-control')); }}
                        </div>
                        <div class="checkbox">
                            <label>
                                Recordar contraseña
                                {{ Form::checkbox('rememberme', true) }}
                            </label>
                        </div>
                        {{ Form::submit('Enviar', array('class' => 'btn btn-primary')) }}
                    {{ Form::close() }}
                </div>
            </div>
        </div>
        <script src="https://code.jquery.com/jquery.js"></script>
        {{ HTML::script('js/bootstrap.js'); }}
    </body>
</html>

hello.blade.php

Código :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel PHP Framework</title>
    {{ HTML::style('css/bootstrap.css'); }}
</head>
<body>
    <div class="container">
        <h1>Bienvenido {{ Auth::user()->name; }}</h1>
        <a href="/logout">Cerrar sesión.</a>
    </div>
    <script src="https://code.jquery.com/jquery.js"></script>
    {{ HTML::script('js/bootstrap.js'); }}
</body>
</html>

Bueno como lo dije en un principio, sólo es un toque de diseño.

Eso es todo por hoy, como siempre espero que les sea muy útil, si quieren el código completo lo pueden descargar desde github, en la siguiente URL:
https://github.com/gmlo89/login_basico_con_laravel

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.