Laravel 8 log up form html

Step 1: Install Laravel Project

First, you need to install a fresh Laravel project. Run the following command to create a new Laravel project:

composer create-project --prefer-dist laravel/laravel Login_System_PHP

Step 2: Setup Database Credentials

Create a new database called custom_auth (or any name you prefer).
Open the .env file in the root of your Laravel project and add your database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=custom_auth    # Replace with your database name
DB_USERNAME=root           # Replace with your database username
DB_PASSWORD=               # Replace with your database password (if any)

Run the migration command to generate default tables in your database:

php artisan migrate

Step 3: Add Styles (CSS)

You can add the CSS styles provided in your public/assets/css/style.css file. The file will contain custom styles for the authentication forms.

Create the assets/css folder if it doesn’t exist.
Add the provided style.css content into 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;
    align-items: center;
    background-color: #f5f8fb;
}

.form-signin {
    width: 100%;
    max-width: 480px;
    margin: auto;
}

.p-5 {
    padding: 2rem !important;
}

/* ...rest of your provided CSS */

Step 4: Create Register Page Routes

Open routes/web.php and define routes for the login and signup pages:

// Show the signup page
Route::get('/', function () {
    return view('signUp');
});

// Show the login page
Route::get('login', 'AuthenticationController@index')->name('login');

// Handle login form submission
Route::post('login', 'AuthenticationController@postLogin');

Step 5: Create Register Page Controller

Run the following command to create a controller for handling user authentication:

php artisan make:controller Auth/RegisterController

This will create a RegisterController.php file inside the app/Http/Controllers/Auth directory. You will define the necessary methods (e.g., index, postLogin, etc.) in this controller.

Step 6: Create the Register Page (View)

Now, create the view for the signup page. Create a new file resources/views/signUp.blade.php and add the following HTML code:

<!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>
    <link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">
</head>
<body>
<div class="login-form">
    <form class="js-validate form-signin p-5" action="{{ route('login') }}" method="post">
        @csrf
        <div class="text-center">
            <a href="{{ route('login') }}">
                <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.">
            </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_confirmation" 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>

Final Notes:

You can customize the AuthenticationController to handle login logic as needed.
The view (signup page) will allow users to input their email, password, and confirm their password for signup. You can use Laravel's built-in validation to ensure that the passwords match and follow other rules.
The public/assets/css/styles.css file should already contain your custom styles.

Souy Soeng