Site Loader
Join Kwetu Hub

Welcome to this lesson, great to have you on board. My name is Henry and I am excited to continue with this tutorial series where we are building blog application using Laravel 5.5 and PHP 7.0.0. We are at the sixth section, login, logout and authors dashboard. In our previous sections, we implemented database migration, table schema and hopefully by now you are getting comfortable in Laravel file structure , in this lesson we are going to deal with the ability to login, logout and blog post authors dashboard for this application.

In our previous lesson we created user authentication scaffold using php artisan make:auth This command basically install layout view, registration and login views, as well as routes for all authentications end-points. A HomeController.php is also generated to handle post-login requests to your application’s dashboard. We are going to extends this laravel authentication in blog application, open our header.blade.php file which is located in views/partials folder and make sure this file has the following code:

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
    <a class="navbar-brand" href="#">Henry-Lab</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExample09">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">

                <a class="nav-link dropdown-toggle"  id="dropdown09" data-toggle="dropdown"
                   aria-haspopup="true" aria-expanded="false">User Account</a>
                <div class="dropdown-menu" aria-labelledby="dropdown09">
                    @guest
                    <a class="dropdown-item" href="{{ route('register') }}">Sign up</a>
                    <a class="dropdown-item" href="{{ route('login') }}">Sign in</a>
                    @else
                        <a href="{{ route('logout') }}"
                           onclick="event.preventDefault();
                                                    document.getElementById('logout-form').submit();">
                            Logout
                        </a>

                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            {{ csrf_field() }}
                        </form>
                    @endguest
                </div>
            </li>
        </ul>
    </div>
</nav>

Let’s understand the new code:

  • From line 17 – 30 We are using laravel guest middle to check whether the user is logged in or not.

  • From line 17 – 20 We are saying if the user is not logged in, show the link to Sign up or sign in. NB: We use {{ route(‘login’}} and {{ route(‘register’)}} to pass url in template.

  • From line 20 – 30 We show a logout link if the user is authenticated.

NB: To understand how Laravel authenticate works, please visit our Laravel-Multi-auth tutorial series.

Now I will head over on my terminal and launch laravel development server by running the following command: php artisan serve I will navigate to http://localhost:8000/ and click user account caret and here is my screen-shot:

Now, go ahead and click on sign up link, here is the output of click sign up:

Fill in the details and hit register, you will be taken to your dashboard. Here is the screen-shot of the dashboard:

Great, try to logout and sign in again. Now that we have working authentication system. It’s time to work on our dashboard. Basically our dashboard, will have the ability to create blog posts, edit posts and delete posts.

Author Dashboard

At this point, you might be asking yourself where does the dashboard view come from, in our blog project, I will navigate to app folder, inside app folder I will open Http folder, inside Http folder I will open Controllers folder. At some point we talked about MVC software architecture. We are going to work on our first controller in this project. Here is a screen-shot of the folders in case you are little bit lost:

Now open HomeController.php file and you will see the following code:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Input;

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('home');
    }
}

From line 14 – 17, we have a function called __construct(). On line 16, laravel define a middleware called auth which make sure that any function in this file requires users to login.

From line 24 – 27, we have a function called index, on line 26, we are telling laravel to go on our view folder and load a view blade called home. Now lets go in our view folder and open home.blade.php and make sure it has the following code:

@extends('layouts.master')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Post <span class="sr-only">(current)</span></a>
                    </li>
                </ul>
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Nav item again</a>
                    </li>
                </ul>
            </nav>

            <main role="main" class="col-sm-9 ml-sm-auto col-md-10 pt-3">
                <h1> Welcome {{ Auth::user()->name }} </h1>
                
            </main>
        </div>
    </div>
@endsection

Let’s understand the code above:

  • On line 1 – We are extending our master.blade.php which is located in the layouts folder.

  • From line 4 – line 24 we defining our dashboard, our dashboard will have a left sidebar of 3 column and our main column will contain nine column. Remember this is just bootstrap.

  • On line 20 – We are using {{ Auth::user()→name}}, which is laravel auth facades that we use in blade template to get the name of the current logged in user.

The next thing I want you to do is to open public folder, then open css folder. In the css folder, create file called dashboard.css Here is how your folder should look like:

Now make sure that our dashboard.css file has the following code:

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 3.5rem tall */
body {
  padding-top: 0;
}

/*
 * Typography
 */

h1 {
  padding-bottom: 9px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: 20px 0;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
}

.sidebar .nav {
  margin-bottom: 20px;
}

.sidebar .nav-item {
  width: 100%;
}

.sidebar .nav-item + .nav-item {
  margin-left: 0;
}

.sidebar .nav-link {
  border-radius: 0;
}

/*
 * Dashboard
 */

/* Placeholders */
.placeholders {
  padding-bottom: 3rem;
}

.placeholder img {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
/*.bg-light {*/
  /*background-color: #f8f9fa !important;*/
/*}*/

This will style our admin dashboard, in order to use this file we are going to open our master.blade.php and make sure it has the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <link rel="stylesheet" href="{{ URL::to('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ URL::to('css/dashboard.css') }}">
    @yield('styles')
</head>
<body>
@include('partials.header')
@yield('content')

<script type="text/javascript" src="{{ URL::to('js/jquery.min.js') }}"></script>
<script type="text/javascript" src="{{ URL::to('js/bootstrap.min.js') }}"></script>
@yield('scripts')
</body>
</html>

On line 7, we have implemented our dashboard css, make sure your development server is running and visit http://localhost:8000/home on your browser. Here is the output:

 

Well, this dashboard looks okay in my opinion and in the next tutorial we will start by creating our post form and saving data in our database.

Goals achieved in this lesson

  • We have learnt how to login user and logout user.

  • We have implemented our simple author dashboard.

With that we conclude our sixth lesson, to get the code visit building a blog application using laravel. See you in lesson 7.

Post Author: academy

School of {Code}

3 Replies to “Lesson 6: Login, Logout and Author Dashboard in Our Blog Application in Laravel 5.5”

  1. Pingback: tamoxifen

Leave a Reply

Your email address will not be published. Required fields are marked *

Kwetu Hub Archives

Categories