Complete Beginners guide For Creating web pages with Laravel 5.2

This Is The Beginners guide For Creating web pages with Laravel .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');

The master template

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="{{%20route('auth.login')%20}}">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 the browser is older than Internet Explorer 9:
    • Uses the HTML5 Shim from the CDN
    • Uses the Respond.js JavaScript code from the CDN to retrofit media queries and CSS3 features
  • Using @if (Auth::guest()), if the user is not authenticated, the login form is displayed; otherwise, the logout option is displayed
  • Twitter bootstrap 3.x is included in the CDN
  • The jQuery2.x is included in the CDN
  • Any template that extends this template can override the content section
  • An example page

    The 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

     

    From static HTML to static methods

    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.

    The form tag

    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.

    Tip

    The action attribute actually needs to be a url. If the action parameter is used, then it refers to the controller action. In this case, the url parameter produces the action attribute of the 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.

     

    The text input field

    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 tag

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

    Checkbox

    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

    Tip

    Remember that the PHP parameters should be sent in single quotation marks if there are no variables or other special characters, such as line breaks, inside the string to parse, while the HTML produced will have double quotes.

    The submit button

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

    Tip

    Note that the array parameter provides an easy way to provide any desired attributes, even those that are not among the list of standard HTML form elements.

    The anchor tag with links

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

    Note

    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.

    Closing the form

    To end the form, we’ll convert the traditional HTML form tag </form> to a Laravel {!! Form::close() !!} form method.

    The resultant form

    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
    
    
    
    

     

Deven Rathore

Deven is an Entrepreneur, and Full-stack developer, Constantly learning and experiencing new things. He currently runs CodeSource.io and Dunebook.com.

Published by
Deven Rathore
Tags: laravel

Recent Posts

Neural Networks for Creating Blog Texts

The world is progressing at unprecedented rates at the current moment, especially in terms of…

4 hours ago

Top 20 Opensource Python Tkinter Projects

This article will highlight the Top 20 Opensource Python Tkinter Projects which we believe will…

2 days ago

Beginners guide to Sneaker Proxies

With their numerous applications in streamlining the data flow, securing both the servers and the…

5 days ago

Top 20 Node.js dashboard templates

In this article, We will be looking at some of the top Node.js dashboard templates.…

7 days ago

Tips on How to Conduct an Interview When Hiring a Software engineering Company

In case you want to hire a software engineering company to bring your solution to…

7 days ago

Top 5 Advantages Of Using Node.js As Your Web Development Technology

Did you know that JavaScript remains to be the most used programming language? A survey…

1 week ago