Laravel 8 | Sign up form HTML CSS
step 1: Install Laravel Project
First Install a Laravel project to run the below command
composer create-project --prefer-dist laravel/laravel Login_System_PHPStep 2: 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 3: Create Register Page Routes
Now go in your routes>web.php file and create 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('welcome');
});
Route::get('/register', 'App\Http\Controllers\Auth\RegisterController@register')->name('register');
Route::post('/register', 'App\Http\Controllers\Auth\RegisterController@storeUser')->name('register');
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 4: 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 5: 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 perfect in your browser. Now we learn how to work login functionality in laravel without auth.
