Create Scaffold with Laravel 5.7 — Add Core UI Template (Part 2)
By: Alfredo Barron
Tags: Authentication, Template, Vuejs, PHP, Laravel

Table of Contents

Add Dependencies

Open your terminal and typing the next commands to add dependencies

# Enter to folder project

cd laravel-scaffold

npm install @coreui/coreui --save # Install CoreUI packagenpm install @coreui/coreui --save

npm install @fortawesome/fontawesome-free --save # Install Font Awesome npm install @fortawesome/fontawesome-free --save

npm install simple-line-icons --save # Install Simple Line Icons npm install simple-line-icons --save

Import JS and CSS

Open the resources/js/bootstrap.js file and write the next code line

try {

window.$ = window.jQuery = require('jquery');



require('bootstrap');

require('@coreui/coreui');

} catch (e) {}

Open the resources/sass/app.scss file and write the next code lines

// Bootstrap

@import '~bootstrap/scss/bootstrap';



// Icons

@import '~simple-line-icons/css/simple-line-icons.css';

@import '~@fortawesome/fontawesome-free/css/all.min.css';



// Coreui

@import '~@coreui/coreui/dist/css/coreui.min.css';



// styles

@import 'styles.scss'

Create Layouts

Open the resources/views/layouts/app.blade.php file and replace the next code lines

<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">

<div id="app">

@include('layouts.header')

<div class="app-body">

@include('layouts.sidebar')

<main class="main">

<div class="container-fluid">

<div class="animated fadeIn">

@yield('content')

</div>

</div>

</main>

</div>

</div>

</body>

Create the resources/views/layouts/header.blade.php file and write the next code lines

<header class="app-header navbar">

<button class="navbar-toggler sidebar-toggler d-lg-none mr-auto" type="button" data-toggle="sidebar-show">

<span class="navbar-toggler-icon"></span>

</button>

<a class="navbar-brand" href="{{ url('/') }}">

<img class="navbar-brand-full" src="svg/modulr.svg" width="89" height="25" alt="Modulr Logo">

<img class="navbar-brand-minimized" src="svg/modulr-icon.svg" width="30" height="30" alt="Modulr Logo">

</a>

<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" data-toggle="sidebar-lg-show">

<span class="navbar-toggler-icon"></span>

</button>

<ul class="nav navbar-nav ml-auto mr-3">

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">

<img class="img-avatar mx-1" src="{{Auth::user()->avatar_url}}">

</a>

<div class="dropdown-menu dropdown-menu-right shadow mt-2">

<a class="dropdown-item">

{{ Auth::user()->name }}<br>

<small class="text-muted">{{ Auth::user()->email }}</small>

</a>

<a class="dropdown-item" href="/profile">

<i class="fas fa-user"></i> Profile

</a>

<div class="divider"></div>

<a class="dropdown-item" href="/password">

<i class="fas fa-key"></i> Password

</a>

<div class="divider"></div>

<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">

<i class="fas fa-sign-out-alt"></i> {{ __('Logout') }}

</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">

@csrf

</form>

</div>

</li>

</ul>

</header>

Create the resources/views/layouts/sidebar.blade.php file and write the next code lines

<div class="sidebar">

<nav class="sidebar-nav">

<ul class="nav">

<li class="nav-item">

<a class="nav-link active" href="/dashboard">

<i class="nav-icon icon-speedometer"></i> Dashboard

</a>

</li>

<li class="nav-title">Settings</li>

<li class="nav-item">

<a class="nav-link" href="#">

<i class="nav-icon icon-user"></i> Users

</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">

<i class="nav-icon icon-lock"></i> Roles

</a>

</li>

</ul>

</nav>

<button class="sidebar-minimizer brand-minimizer" type="button"></button>

</div>

Create the resources/views/layouts/auth.blade.php file and write the next code lines

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">



<!-- CSRF Token -->

<meta name="csrf-token" content="{{ csrf_token() }}">



<title>{{ config('app.name', 'Laravel') }}</title>



<!-- Scripts -->

<script src="{{ asset('js/app.js') }}" defer></script>



<!-- Fonts -->

<link rel="dns-prefetch" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">



<!-- Styles -->

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

</head>

<body>

<div id="app" class="app flex-row align-items-center">

<div class="container">

<div class="row justify-content-center">

@yield('auth')

</div>

</div>

</div>

</body>

</html>

Update Views

Open the resources/views/auth/login.blade.php file and replace the next code lines

@extends('layouts.auth')



@section('auth')

<div class="col-md-8">

<div class="card-group">

<div class="card">

<div class="card-body p-5">

<div class="text-center d-lg-none">

<img src="svg/modulr.svg" class="mb-5" width="150" alt="Modulr Logo">

</div>

<h1>{{ __('Login') }}</h1>

<p class="text-muted">Sign In to your account</p>



<form method="POST" action="{{ route('login') }}">

@csrf

<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">@</span>

</div>

<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="{{ __('Email Address') }}" required autofocus>



@if ($errors->has('email'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('email') }}</strong>

</span>

@endif

</div>

<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="icon-lock"></i>

</span>

</div>

<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="{{ __('Password') }}" required>



@if ($errors->has('password'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('password') }}</strong>

</span>

@endif

</div>

<div class="input-group mb-3">

<div class="form-check">

<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>



<label class="form-check-label" for="remember">

{{ __('Remember Me') }}

</label>

</div>

</div>

<div class="row">

<div class="col-4">

<button type="submit" class="btn btn-primary px4">

{{ __('Login') }}

</button>

</div>

<div class="col-8 text-right">

<a class="btn btn-link px-0" href="{{ route('password.request') }}">

{{ __('Forgot Your Password?') }}

</a>

</div>

</div>

</form>

</div>

<div class="card-footer p-4 d-lg-none">

<div class="col-12 text-right">

<a class="btn btn-outline-primary btn-block mt-3" href="{{ route('register') }}">{{ __('Register') }}</a>

</div>

</div>

</div>

<div class="card text-white bg-primary py-5 d-md-down-none">

<div class="card-body text-center">

<div>

<img src="svg/modulr.svg" class="mb-5" width="150" alt="Modulr Logo">

<h2>{{ __('Sign up') }}</h2>

<p>If you don't have account create one.</p>

<a class="btn btn-primary active mt-2" href="{{ route('register') }}">{{ __('Register Now!') }}</a>

</div>

</div>

</div>

</div>

</div>

@endsection

Open the resources/views/auth/register.blade.php file and replace the next code lines

@extends('layouts.auth')



@section('auth')

<div class="col-md-6">

<div class="card mx-4">

<div class="card-body p-4">

<h1>{{ __('Register') }}</h1>

<p class="text-muted">Create your account</p>



<form method="POST" action="{{ route('register') }}">

@csrf

<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="icon-user"></i>

</span>

</div>

<input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" placeholder="{{ __('Name') }}" required autofocus>



@if ($errors->has('name'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('name') }}</strong>

</span>

@endif

</div>

<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">@</span>

</div>

<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="{{ __('Email Address') }}" required>



@if ($errors->has('email'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('email') }}</strong>

</span>

@endif

</div>

<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="icon-lock"></i>

</span>

</div>

<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="{{ __('Password') }}" name="password" required>



@if ($errors->has('password'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('password') }}</strong>

</span>

@endif

</div>

<div class="input-group mb-4">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="icon-lock"></i>

</span>

</div>

<input id="password-confirm" type="password" class="form-control" name="password_confirmation" placeholder="{{ __('Confirm Password') }}" required>

</div>

<button type="submit" class="btn btn-block btn-success btn-primary">

{{ __('Create Account') }}

</button>

</form>

</div>

<div class="card-footer p-4">

<div class="row">

<div class="col-12">

<a class="btn btn-outline-primary btn-block" href="{{ route('login') }}">{{ __('Login') }}</a>

</div>

</div>

</div>

</div>

</div>

@endsection

Open the resources/views/auth/passwords/email.blade.php file and replace the next code lines

@extends('layouts.auth')



@section('auth')

<div class="col-md-6">

<div class="card mx-4">

<div class="card-body p-4">

<h1>{{ __('Reset Password') }}</h1>

<p class="text-muted">Reset you password</p>



<form method="POST" action="{{ route('password.email') }}">

@csrf



<div class="input-group mb-4">

<div class="input-group-prepend">

<span class="input-group-text">@</span>

</div>

<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="{{ __('Email Address') }}" required>



@if ($errors->has('email'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('email') }}</strong>

</span>

@endif

</div>



<button type="submit" class="btn btn-primary">

{{ __('Send Password Reset Link') }}

</button>



@if (session('status'))

<div class="alert alert-success mt-4" role="alert">

{{ session('status') }}

</div>

@endif

</form>

</div>

</div>

</div>

@endsection

Open the resources/views/auth/passwords/reset.blade.php file and replace the next code lines

@extends('layouts.auth')



@section('auth')

<div class="col-md-6">

<div class="card mx-4">

<div class="card-body p-4">

<h1>{{ __('Reset Password') }}</h1>

<p class="text-muted">Reset you password</p>



<form method="POST" action="{{ route('password.update') }}">

@csrf



<input type="hidden" name="token" value="{{ $token }}">



<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">@</span>

</div>

<input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="{{ __('Email Address') }}" required autofocus>



@if ($errors->has('email'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('email') }}</strong>

</span>

@endif

</div>



<div class="input-group mb-3">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="icon-lock"></i>

</span>

</div>

<input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" placeholder="{{ __('Password') }}" name="password" required>



@if ($errors->has('password'))

<span class="invalid-feedback" role="alert">

<strong>{{ $errors->first('password') }}</strong>

</span>

@endif

</div>

<div class="input-group mb-4">

<div class="input-group-prepend">

<span class="input-group-text">

<i class="icon-lock"></i>

</span>

</div>

<input id="password-confirm" type="password" class="form-control" name="password_confirmation" placeholder="{{ __('Confirm Password') }}" required>

</div>

<button type="submit" class="btn btn-primary">

{{ __('Reset Password') }}

</button>

</form>

</div>

</div>

</div>

@endsection

Finally Compiling Assets (Laravel Mix) with the next commans:

npm run dev

// or

npm run watch

Now we have the next screen when enter the localhost:3000 route in browser

http://localhost:3000/login

http://localhost:3000/register

http://localhost:3000/password/reset

http://localhost:3000/password/reset/07a37b17

http://localhost:3000/dashboard