Laravel 8 | Sign in form HTML CSS
step 1: Install ui
Note:
composer require laravel/ui
php artisan ui vue --auth
step 2: Install Laravel Project
First Install a Laravel project to run below command
composer create-project --prefer-dist laravel/laravel Login_System_PHPStep 3: Setup Database Credentials
Create a new database custom auth and now open your .env file and add your database credentials.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=#Your database name
DB_USERNAME=root #Your database username
DB_PASSWORD=#Your database passwordNow run the migration command and generate a table in the database.
php artisan migrateStep: public/assets/css/style.css
/* =============== */
/* Version : css 3 */
/* Creat by : Soeng Souy */
/* =============== */
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
display: flex;
-ms-flex-align: center;
align-items: center;
background-color: #f5f8fb;
}
.form-signin {
width: 100%;
max-width: 480px;
margin: auto;
}
.p-5 {
padding: 2rem !important;
}
/* image */
.mb-3, .my-3 {
margin-bottom: 1rem !important;
}
img {
vertical-align: middle;
border-style: none;
}
/* btn */
.btn-primary {
color: #fff !important;
background-color: #1BA262 !important;
border-color: #1BA262 !important;
padding: 1em;
}
.btn-primary:hover {
color: #fff !important;
background-color: #168652 !important;
border-color: #168652 !important;
padding: 1em;
}
.btn-group-sm>.btn, .btn-sm {
padding: 1.25rem .5rem;
font-size: .875rem;
line-height: 1.5;
border-radius: .2rem;
}
a {
color: #21c87a;
text-decoration: none;
background-color: transparent;
}
p {
color: #646f79;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
a:hover {
color: #168652;
text-decoration: none;
}
.text-muted {
color: #8c98a4 !important;
}
.btn-facebook {
color: #fff;
background-color: #3b5998;
border-color: #3b5998;
}
.btn-facebook:hover {
color: #fff;
background-color: #30497c;
border-color: #2d4373;
}
.btn-twitter {
color: #fff;
background-color: #0c85d0;
border-color: #0b7ec4;
}
.btn-twitter:hover {
color: #fff;
background-color: #0d8ddc;
border-color: #0c85d0;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
background-color:#21C87A;
box-shadow: none !important;
}
.custom-control-label:before{
box-shadow: none !important;
}
/* login form */
.login-form {
width: 100%;
max-width: 480px;
margin: auto;
}
.login-form form {
padding: 30px;
}
input:focus {
box-shadow: none !important;
border: 1px solid #20C477 !important;
outline-width: 0;
}
.form-control {
display: block;
width: 100%;
height: calc(1.7em + 1.5rem + 2px);
padding: 0.75rem 1rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
color: #151b26;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #e3e6f0;
border-radius: 0.25rem;
transition: all 0.2s ease-in-out;
}
.input-group-text {
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 0.75rem 1rem;
margin-bottom: 0;
font-size: 1rem;
font-weight: 400;
line-height: 1.7;
color: #8f95a0;
text-align: center;
white-space: nowrap;
background-color: #fff;
border: 1px solid #e3e6f0;
border-radius: 0.25rem;
}
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.login-form h2 {
margin: 0 0 15px;
}
.form-control, .login-btn {
border-radius: 2px;
}
.input-group-prepend .fa {
font-size: 18px;
}
.login-btn {
font-size: 15px;
font-weight: bold;
min-height: 40px;
}
.social-btn .btn {
border: none;
margin: 10px 3px 0;
opacity: 1;
}
.social-btn .btn:hover {
opacity: 0.9;
}
.social-btn .btn-secondary, .social-btn .btn-secondary:active {
background: #507cc0 !important;
}
.social-btn .btn-info, .social-btn .btn-info:active {
background: #64ccf1 !important;
}
.social-btn .btn-danger, .social-btn .btn-danger:active {
background: #df4930 !important;
}
.or-seperator {
margin-top: 20px;
text-align: center;
border-top: 1px solid #ccc;
}
.or-seperator i {
padding: 0 10px;
color: #8c98a4;
background: #f7f7f7;
position: relative;
font-size: 0.75rem;
top: -11px;
z-index: 1;
}
Step 4: Create Register Page Routes
Now go in your routes>web.php file and crate two routes here.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('login');
});
// ------------------------------register---------------------------------------
Route::get('/register', 'App\Http\Controllers\Auth\RegisterController@register')->name('register');
Route::post('/register', 'App\Http\Controllers\Auth\RegisterController@storeUser')->name('register');
// ------------------------------register---------------------------------------
Route::get('/register', 'App\Http\Controllers\Auth\RegisterController@register')->name('register');
Route::post('/register', 'App\Http\Controllers\Auth\RegisterController@storeUser')->name('register');
Route::view('/home', 'home')->middleware('auth');
Route::group(['middleware' => 'auth:admin'], function () {
});
Auth::routes();
// -----------------------------login-----------------------------------------
Route::get('/login', 'App\Http\Controllers\Auth\LoginController@login')->name('login');
Route::post('/login', 'App\Http\Controllers\Auth\LoginController@authenticate');
Route::get('/logout', 'App\Http\Controllers\Auth\LoginController@logout')->name('logout');
Step 5: Create Register Page Controller
Now create a new controller RegisterController to adding the below code in your terminal.
php artisan make:controller Auth/RegisterControllerAfter creating the register controller add the below code on it.
app\Http\Controllers\Auth\RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
use Hash;
class RegisterController extends Controller
{
public function register()
{
return view('auth.register');
}
public function storeUser(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'password' => 'required|string|min:8|confirmed',
'password_confirmation' => 'required',
]);
User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
return redirect('login');
}
}Step 6: Create Register Blade Files
Now you need to create your blades files. First, create new folder layouts in your resources>views directory, then create a new file app.blade.php in the layout folder the same as below.
resources\views\layouts\app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Signin Simple</title>
<!-- --------------library bootstrap --------------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- --------------style css --------------->
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
</body>
</html>Now create a new folder auth in your resources>views directory and add a new file register.blade.php then add the below code on it.
resources\views\auth\register.blade.php
@extends('layouts.app')
<div class="login-form">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign up</h1>
<p>Fill out the form to get started.</p>
</div>
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-user form__text-inner"></i>
</span>
</div>
<input id="name" type="text" class="form-control form__input @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}"placeholder="Name" autocomplete="name" autofocus>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-envelope form__text-inner"></i>
</span>
</div>
<input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Email" autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Password" autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-key"></i>
</span>
</div>
<input type="password" class="form-control" name="password_confirmation" placeholder="Confirm Password" autocomplete="new-password">
</div>
</div>
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Signup</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Have an account? <a href="sign-in.html">Signin</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
Signin with Twitter
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>
You can run your register functionality run perfectly in your browser. Now we learn how to work login functionality in laravel without auth.
Step 7: Create Login Controller
Now create your LoginController to add the below command in your terminal and add the below code on it.
php artisan make:controller Auth/LoginControllerThe controller is shown in your App\Http\Controllers directory.
app\Http\Controllers\Auth\LoginController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Auth;
class LoginController extends Controller
{
public function login()
{
return view('auth.login');
}
public function authenticate(Request $request)
{
$request->validate([
'email' => 'required|string|email',
'password' => 'required|string',
]);
$credentials = $request->only('email', 'password');
if (Auth::attempt($credentials)) {
return redirect()->intended('home');
}
return redirect('login')->with('error', 'Oppes! You have entered invalid credentials');
}
public function logout() {
Auth::logout();
return redirect('login');
}
}Step 8: Create Login Blade File
After creating a login controller to showing a login view just create a login page inside the auth folder and add the below code.
resources/views/auth/login.blade.php
@extends('layouts.app')
<div class="login-form">
<form method="POST" action="{{ route('login') }}">
@csrf
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Please sign in</h1>
<p>Signin to manage your account.</p>
</div>
@if(session()->has('error'))
<div class="alert alert-danger">
{{ session()->get('error') }}
</div>
@endif
<div class="js-form-message mb-3">
<div class="js-focus-state input-group form">
<div class="input-group-prepend form__prepend">
<span class="input-group-text form__text">
<i class="fa fa-user form__text-inner"></i>
</span>
</div>
<input type="email" class="form-control form__input @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-lock"></i>
</span>
</div>
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-6">
<!-- Checkbox -->
<div class="custom-control custom-checkbox d-flex align-items-center text-muted">
<input class="custom-control-input"type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="custom-control-label" for="remember">
Remember Me
</label>
</div>
<!-- End Checkbox -->
</div>
<div class="col-6 text-right">
<a class="float-right" href="recover-account.html">Forgot Password?</a>
</div>
</div>
<div class="form-group mb-3">
<button type="submit" class="btn btn-primary login-btn btn-block">Signin</button>
</div>
<div class="text-center mb-3">
<p class="text-muted">Do not have an account? <a href="{{route('register')}}">Signup</a></p>
</div>
<div class="or-seperator"><i>OR</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
Signin with Facebook
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
Signin with Twitter
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>
Step 9: Add Home Functionality
Add Route
Route::get('home', 'HomeController@home')->name('home');Add Controller
php artisan make:controller HomeControllerNow add the below code in your HomeContoller.
app\Http\Controllers\HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Session;
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');
}
}After successfully login you will be redirected to the home page, so you have to create a new page in your resources/views directory and add the below code on it. This page show after you have successfully log in a user.
resources/views/home.blade.php
@extends('layouts.app')
<div class="login-form">
<form class="js-validate form-signin p-5" action="/examples/actions/confirmation.php" method="post">
<div class="text-center">
<a href="index.html" aria-label="Space">
<img class="mb-3" src="assets/image/logo.png" alt="Logo" width="60" height="60">
</a>
</div>
<div class="text-center mb-4">
<h1 class="h3 mb-0">Admin Dashboard</h1>
<p>Welcome to my dashboard</p>
</div>
<div class="text-center mb-3">
<p class="text-muted"><a href="reset-password.php">Reset Password</a></p>
</div>
<div class="text-center mb-3">
<p class="text-muted"><a href="{{route('logout')}}">Logout</a></p>
</div>
<div class="or-seperator"><i>JOIN</i></div>
<div class="row mx-gutters-2 mb-4">
<div class="col-sm-6 mb-2 mb-sm-0">
<button type="button" class="btn btn-block btn-sm btn-facebook">
<i class="fa fa-facebook mr-2"></i>
@soengsouy
</button>
</div>
<div class="col-sm-6">
<button type="button" class="btn btn-block btn-sm btn-twitter">
<i class="fa fa-twitter mr-2"></i>
@soengsouy
</button>
</div>
</div>
<p class="small text-center text-muted mb-0">All rights reserved. © Space. 2020 soengsouy.com.</p>
</form>
</div>After custom registration and login functionality in laravel now we learn how to create custom forgot and reset password functionality in laravel. First, create forgot password functionality in laravel. Create two routes in your web.php file.
0 Comments
CAN FEEDBACK
Emoji