Laravel 8 log up from HTML
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
Route::get('/', function () {
return view('signUp');
});
//login route
Route::get('login', 'AuthenticationController@index')->name('login');
Route::post('login', 'AuthenticationController@postLogin');
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.
resources\views\signUp.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>
<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>
<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">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 type="email" class="form-control form__input" name="email" required="" placeholder="Email" aria-label="Email" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success">
</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" name="password" placeholder="Password" required="required">
</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" placeholder="Confirm Password" required="required">
</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>
</body>
</html>
0 Comments
CAN FEEDBACK
Emoji