Create a new Laravel 7 project with bootstrap scaffolding and authentication

By CodersDrive
13-Jun-2020
Laravel
Php

In this tutorial you will see how to create a new laravel project with bootstrap scaffolding and also how to add authentication to a project.

To do this practical on your machine you should have installed and configured PHP, Apache/Nginx etc server, Composer. If not done please follow the below articles.

Now Lets see the step by step procedure to create a new project with bootstrap scaffolding and authentication.

Step-1 Install Laravel Using Composer

At first download the Laravel installer using composer as per command shown below and install it globally on your machine.

composer global require laravel/installer
Step-2 Create a new laravel application

You can create new laravel application using either of the commands shown below

laravel new new_project_name_along_with_path
(or)
composer create-project laravel/laravel new_project_name_along_with_path

Suppose if you want create a project with name first_project at /var/www/html/ location, you can create project using "composer" as per the command below. Same is the case if you want to create new project using "laravel" also.

composer create-project laravel/laravel /var/www/html/first_project

Now a new laravel project will be created under folder name "first_project" and downloads the required files and dependencies. Once the successful message is displayed you are ready to go and start developing new application.

We can see the created project index page using url "http://localhost/first_project/public". This can be seen, if you created your project under installed servers document root path only.

If server(Apache/Nginx etc..) is not installed then also you can work on it and develop application using "Local Development Server" offered by Laravel itself for development using the following command

php artisan serve

Now you can see the project home page in your browser using url "http://localhost:8000"

create new laravel 7 project Step-3 Bootstrap Scaffolding and authentication

Laravel offers Bootstrap scaffolding as frontend CSS framework. To scaffold our project with Bootsrap framework use the following commands.

composer require laravel/ui

This command will downloads the laravel/ui package to our application. Now we scaffold this downloaded UI to our project and also add authentication to our project using following command

php artisan ui bootstrap --auth

Next install our project front end Javascript dependencies using NPM(Node Package Manager)

npm install

Once this installation is finished run the following command, this will create the required app.css file at public/css and app.js file at public/js.

npm run dev

These are the files that have the bootstrap framework scaffolding for your project. Now if you see the home page "http://localhost:8000" at the top right options for "Login" and "Register" can be seen as shown below.

Bootstrap scaffolding of laravel 7 project Step-4 Setup .env file

Rename the .env.example to .env if not exist. Now run the following command to generate APP_KEY. This step is not required if APP_KEY value is already present in .env file. Also set the APP_NAME field with your desired Project name.

php artisan key:generate

Now configure the MySQL database access fileds in .env file with proper details as shown below.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=root
DB_PASSWORD=password

Database should be configured to enable authentication.

Step-5 User Model Migration

To enable authentication a User Model class is created under app/ and a migration file 2014_10_12_000000_create_users_table.php is created at database/migrations/ while the "bootstrap scaffolding" command is run earlier at Step-3.

The migration file is used to create the "users" table in MySQL DB. If any additional fields are to be added to this users table, before migrating to DB edit this file and add required columns with relevant datatypes with proper nullable fields. For example here we have added some new fields like "DOB", "Place", "Age" as shown below.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return  void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->date('dob');
            $table->string('place')->nullable();
            $table->integer('age');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return  void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Now run the migration command to create the "users" table in MySQL DB.

php artisan migrate

You can now verify logging to your MySQL DB for the "users" table. Now click on the "Register" link on the page "http://localhost:8000" and fill in details and submit. After succesfull registration you can use these details for login to your application.

Hope you got successfully logged in. Thanks for reading this blog. Happy coding.


Laravel

Search blog..!

Connect with us