Course Code: Track Elective 3

Course Title: Advance Web Development using Laravel

Credit Units: 3

Overview/Introduction

This course provides an overview and discussions of the web development framework Laravel. This
course include: brief history of web frameworks, introduction on PHP frameworks, the development
framework Laravel, Installation via composer, initial configuration, directory configuration, Laravel file
Structure, local development environment, Git bash, PHP artisan commands, Routes, Middleware,
CSRF protection, Controllers, Requests, Responses, Views, Blade Templates, Session, Validation, Error
Handling, Models, Database Migrations, Eloquent, and Simple App Testing. This course focuses on
developing a web application using Laravel framework with CRUD+S – create, read, update, delete
and search functionality as final output in the course subject.

Instructor: Leo P. Paliuanan

[email protected]

UNIT 4.1 – Creating a Laravel User Authentication using Jetstream and Livewire
Lesson/Topics:

a. Creating laravel project

b. Creating database and connecting it to the laravel project
c. running/installing Jetstream and livewire for the authentication scaffolding
d. running npm install and npm run dev for laravel mix
e. database migration
f. run laravel project on localhost using php artisan serve

Unit overview

Unit4 describes and provides familiarity on how to use Eloquent and model classes and how to use
them. It also details out working with migrations and on how to retrieve data from tables using models

Learning Outcomes

At the end of this unit the student should be able to:

 Illustrate and demonstrate knowledge on how to create laravel project

 Demonstrate knowledge in creating database and connect laravel project
 Describe and demonstrate knowledge on how install laravel Jetstream and livewire for
authentication scaffolding
 Demonstrate knowledge in running npm install and npm run dev for laravel mix
 Demonstrate knowledge on running database migration
 Illustrate and demonstrate knowledge on how to run laravel project using php artisan serve
If you have an existing project, you need to do
the following steps.
1. Open VSCode
2. Open terminal
3. From VSCode terminal, change
directory by typing cd.. then press
enter

Your terminal should look like this.

Let’s create a new laravel

project by typing:

1. composer create-project
laravel/laravel newpl

2. then press enter

Note: newpl is the name of
the folder of our laravel
project, you can create your
own.

Once finished you should be

able to see the “application
key set successfully”

Note: this means that your

project laravel has been
created, and the directory
location is at
C:/XAMPP/HTDOCS
From the VSCode development
environment, open your project
folder
1. Click file
2. Click open folder…
3. Browse the project
directory/folder

1. select the folder

“newpl”

2. Click select folder

This will allow us to open

our project folder to
VSCode for the
development.
This will be our files for our project laravel.

The Next thing to do is to create a

database then connect that database to
our laravel project.

1. Run xampp
2. Click start button for Apache
3. Click start button for MySQL

Open phpmyadmin.
1. Open a browser

2. Type
localhost/phpmyadmin at the
address bar

3. Press enter
Create a database

1. Click the tab “Databases”

2. Enter database name “dbnewpl” then click create button

Connect the database to
our laravel application

1. Go back to VSCode

2. Locate and open

the file .env

3. Look for the line

DB_DATABASE and

4. Change laravel with “dbnewpl”

Note: dbnewpl is the name of the database we create earlier.

5. Run the application by typing php artisan serve at the terminal, then click the address
http://127.0.0.1:8000 to open our application in browser.
This is our application running on browser.
Since we already have a laravel project running and with a database, we can start creating our
laravel authentication scaffolding using Jetstream.

1. Open new terminal again from VSCode, then type in composer require
laravel/jetstream
Laravel Jetstream was written by Taylor Otwell.

Laravel Jetstream is a beautifully designed application scaffolding for Laravel. Jetstream provides the perfect

starting point for your next project and includes login, registration, email verification, two-factor authentication,

session management, API support via Laravel Sanctum, and optional team management. Laravel Jetstream

replaces and improves upon the legacy authentication UI scaffolding available for previous versions of Laravel.

Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.

You should be able to

see the publishing
complete after the
command is finished
installing the required
files.

Note: you need internet

connection to
successfully install the
required Jetstream
components.

The next thing to do is to install the livewire auth scaffolding.

1. Still on terminal
2. Type in php artisan Jetstream:install livewire
3. Then press enter
 Wait to finish…

If livewire scaffolding is installed you should be able to see the screen the message livewire
scaffolding installed successfully.

Still on terminal, we need to run the following commands:

1. Type in npm install and wait to finish…

When the installation is
done, you should be able
to see the same screen
showing that found 0
vulnerabilities

Next thing to do is to run

npm run dev on terminal

1. Type in npm run dev, then press enter

And wait to finish…
When the installation is done you should see the result webpack compiled successfully

Mix is a configuration layer on top of webpack, so to run your Mix tasks you only need to execute
one of the NPM scripts that are included in the default Laravel package.json file. When you run
the dev or production scripts, all of your application's CSS and JavaScript assets will be compiled
and placed in your application's public directory:

// Run all Mix tasks...

npm run dev

// Run all Mix tasks and minify output...

npm run prod

you should see the VSCode
notification on the bottom of your
screen saying laravel mix build
successful.

Next thing to do is to migrate the database,

1. Still on terminal, type in php artisan migrate, press enter and wait to finish…

What’s happening is that the database tables are being migrated into the database we created
earlier.

Go back to the browser > localhost/phpmyadmin.

 1. Click the database “dbnewpl” created earlier

The database is now populated with tables

The Next thing to do now is run the laravel application again
 1. On terminal, type in php artisan serve
2. Press ctrl then click on the address http://127.0.0.1:8000 to open browser

You should be able to see that links for login and register on the top left corner of your application,
Click login or register to view changes.
You should be able to see the output similar to the following screenshots…
Screenshot 1 – login page

Screenshot 2 – Register Page

Screenshot 3 – User Dashboard

Screenshot 4 – User Nav Bar

Screenshot 5 – User Profile Page

Reference:

Laravel 8 Tutorial - Authentication – YouTube

https://laravel.com/docs/8.x/releases#laravel-jetstream

https://laravel.com