Laravel's approach to building web content is flexible. As much or as little of Laravel can be used to create HTML. Laravel uses the filename.blade.php
convention to state that the file should be parsed by the blade parser, which actually converts the file into plain PHP. The name blade was inspired by the .NET's razor templating engine, so this may be familiar to someone who has used it. Laravel 5 provides a working demonstration of a form in the /resources/views/
directory. This view is shown when the /home
route is requested and the user is not currently logged in. This form is obviously not created using the Laravel form methods.
The route is defined in the routes
file as follows:
Route::get('home', 'HomeController@index'),
An explanation of how this route uses middleware to check how to perform the user authentication will be discussed in Chapter 7, Filtering Requests with Middleware.
This is the following app
(or master
) template:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link href="/css/app.css" rel="stylesheet"> <!-- Fonts --> <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbarnavbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Laravel</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="navnavbar-nav"> <li><a href="/">Home</a></li> </ul> <ul class="navnavbar-navnavbar-right"> @if (Auth::guest()) <li><a href="{{ route('auth.login') }}">Login</a></li> <li><a href="/auth/register">Register</a></li> @else <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ Auth::user()->name }} <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="/auth/logout">Logout</a></li> </ul> </li> @endif </ul> </div> </div> </nav> @yield('content') <!-- Scripts --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> </body> </html>
The Laravel 5 master template is a standard HTML5 template with the following features:
@if (Auth::guest())
, if the user is not authenticated, the login form is displayed; otherwise, the logout option is displayedThe following screenshot shows you the login page:
The source code for the login page is as follows:
@extends('app') @section('content') <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Login</div> <div class="panel-body"> @if (count($errors) > 0) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form class="form-horizontal" role="form" method="POST" action="/auth/login"> <input type="hidden" name="_token" value="{{ csrf_token() }}"> <div class="form-group"> <label class="col-md-4 control-label">E-Mail Address</label> <div class="col-md-6"> <input type="email" class="form-control" name="email" value="{{ old('email') }}"> </div> </div> <div class="form-group"> <label class="col-md-4 control-label">Password</label> <div class="col-md-6"> <input type="password" class="form-control" name="password"> </div> </div> <div class="form-group"> <div class="col-md-6 col-md-offset-4"> <div class="checkbox"> <label> <input type="checkbox" name="remember"> Remember Me </label> </div> </div> </div> <div class="form-group"> <div class="col-md-6 col-md-offset-4"> <button type="submit" lass="btn btn-primary" style="margin-right: 15px;"> Login </button> <a href="/password/email">Forgot Your Password?</a> </div> </div> </form> </div> </div> </div> </div> </div> @endsection
This login page begins with the following:
@extends('app')
It obviously uses the object-oriented paradigm to state that the app.blade.php
template will be rendered. The following line overrides the content:
@section('content')
For this exercise, the form builder will be used instead of the static HTML.
We will convert a static form
tag to a FormBuilder
method. The HTML is as follows:
<form class="form-horizontal" role="form" method="POST" action="/auth/login">
The method facade that we will use is as follows:
Form::open();
In the FormBuilder.php
class, the $reserved
attribute is defined as follows:
protected $reserved = ['method', 'url', 'route', 'action', 'files'];
The attributes that we need to pass to an array to the open()
method are class, role, method, and action. Since method and action are reserved words, it is necessary to pass the parameters in the following manner:
Laravel form facade method array element |
HTML Form tag attribute |
---|---|
method |
method |
url |
action |
role |
role |
class |
class |
Thus, the method call looks like this:
{!! Form::open(['class'=>'form-horizontal', 'role =>'form', 'method'=>'POST', 'url'=>'/auth/login']) !!}
The {!! !!}
tags are used to start and end parsing of the form builder methods. The form method, POST
, is placed first in the list of attributes in the HTML form tag.
Other attributes will be passed to the array and added to the list of attributes. The resultant HTML will be produced as follows:
<form method="POST" action="http://laravel.example/auth/login" accept-charset="UTF-8" class="form-horizontal" role="form"> <input name="_token" type="hidden" value="wUY2hFSEWCzKHFfhywHvFbq9TXymUDiRUFreJD4h">
The CRSF token is automatically added, as the form
method is POST
.
To convert the input fields, a facade is used. The input field's HTML is as follows:
<input type="email" class="form-control" name="email" value="{{ old('email') }}">
Converting the preceding input field using a façade looks like this:
{!! Form::input('email','email',old('email'),['class'=>'form-control' ]) !!}
Similarly, the text field becomes:
{!! Form::input('password','password',null,['class'=>'form-control']) !!}
The input fields have the same signature. Of course, this can be refactored as follows:
<?php $inputAttributes = ['class'=>'form-control'] ?> {!! Form::input('email','email',old('email'),$inputAttributes ) !!} ... {!! Form::input('password','password',null,$inputAttributes ) !!}
The
label
tags are as follows:
<label class="col-md-4 control-label">E-Mail Address</label> <label class="col-md-4 control-label">Password</label>
To convert the label
tags (E-Mail Address
and Password
), we will first create an array to hold the attributes, and then pass this array to the labels, as follows:
$labelAttributes = ['class'=>'col-md-4 control-label'];
Here is the form label code:
{!! Form::label('email', 'E-Mail Address', $labelAttributes) !!} {!! Form::label('password', 'Password', $labelAttributes) !!}
To convert the checkbox to a facade, we will convert this:
<input type="checkbox" name="remember"> Remember Me
The preceding code is converted to the following code:
{!! Form::checkbox('remember','') !!} Remember Me
Lastly, the submit button will be converted as follows:
<button type="submit" class="btn btn-primary" style="margin-right: 15px;"> Login </button>
The preceding code after conversion is as follows:
{!! Form::submit('Login', ['class'=>'btn btn-primary', 'style'=>'margin-right: 15px;']) !!}
To convert the links, a helper method is used. Consider the following line of code:
<a href="/password/email">Forgot Your Password?</a>
The preceding line of code after conversion becomes:
{!! link_to('/password/email', $title = 'Forgot Your Password?', $attributes = array(), $secure = null) !!}
The link_to_route()
method may be used to link to a route. For similar helper functions, visit http://laravelcollective.com/docs/5.0/html.
To end the form, we'll convert the traditional HTML form tag </form>
to a Laravel {!! Form::close() !!}
form method.
By putting everything together, the page now looks like this:
@extends('app') @section('content') <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="panel panel-default"> <div class="panel-heading">Login</div> <div class="panel-body"> @if (count($errors) > 0) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <?php $inputAttributes = ['class'=>'form-control']; $labelAttributes = ['class'=>'col-md-4 control-label']; ?> {!! Form::open(['class'=>'form-horizontal','role'=>'form','method'=>'POST','url'=>'/auth/login']) !!} <div class="form-group"> {!! Form::label('email', 'E-Mail Address',$labelAttributes) !!} <div class="col-md-6"> {!! Form::input('email','email',old('email'), $inputAttributes) !!} </div> </div> <div class="form-group"> {!! Form::label('password', 'Password',$labelAttributes) !!} <div class="col-md-6"> {!! Form::input('password','password',null,$inputAttributes) !!} </div> </div> <div class="form-group"> <div class="col-md-6 col-md-offset-4"> <div class="checkbox"> <label> {!! Form::checkbox('remember','') !!} Remember Me </label> </div> </div> </div> <div class="form-group"> <div class="col-md-6 col-md-offset-4"> {!! Form::submit('Login',['class'=>'btn btn-primary', 'style'=>'margin-right: 15px;']) !!} {!! link_to('/password/email', $title = 'Forgot Your Password?', $attributes = array(), $secure = null); !!} </div> </div> {!! Form::close() !!} </div> </div> </div> </div> </div> @endsection