Department of Computing

CS-344: Web Engineering

Class: BESE-10AB

Lab 12: Laravel: Dynamic Web Development

Date: 16 December 2021

Instructor: Dr. Qaiser Riaz

CS-344: Web Engineering Page 1

 Lab 12: Laravel: Dynamic Web Development
Laravel is a web application framework with expressive, elegant syntax. It provides a structure
and starting point for creating dynamic web application, allowing developers to focus on key
components of a website while utilizing powerful features provided by the framework. During
lectures, students have learned concepts of Laravel including blade template, working with
database to perform CRUD operations and using Eloquent ORM for object-relational mapping.
Students will get in-depth practical knowledge of the Laravel framework in this lab.

Lab Objectives:
The objective of this lab is helping students to familiarize themselves with the Laravel to
develop dynamic websites and handle server side behavior of a web site by employing Eloquent
ORM. Students will develop a small Laravel application through which they will interact with a
database and will perform basic CRUD operations.

Tools:
Notepad, DreamWeaver, browser.

Helping Material:
Lecture slides.

Laravel:
https://laravel.com/docs/8.x/eloquent
https://laravel.com/docs/8.x/database
https://laravel.com/docs/8.x/blade

Lab Task
Notes:

1. Install and configure Laravel (version 8 or above).

https://laravel.com/docs/8.x/installation
https://laravel.com/docs/8.x/structure
2. Create a Laravel app and explore the directory structure
https://laravel.com/docs/8.x/structure
3. Install and understand ‘Laravel Breeze’, which is a minimal, simple implementation of all
of Laravel's authentication features, including login, registration, password reset, email
verification, and password confirmation. Laravel Breeze's default view layer is made up
of simple Blade templates styled with Tailwind CSS.
https://laravel.com/docs/8.x/starter-kits#laravel-breeze

CS-344: Web Engineering Page 2

 4. Use the ‘classicmodels.sql’ to create a local database on your machine. The lab tasks are
related to this database.
5. Explore the ‘employees’ table and add two more columns into it namely ‘username’ and
‘pass’.

Task 1
Extend the login feature of the Breeze so that you can store and retrieve the employee’s
information from the ‘employees’ table by verifying username and password. Make sure that
the password is encrypted (e.g. using md5() function when storing the password and applying
md5() function when checking the credentials). You will need to configure the database and use
the Eloquent ORM accordingly.

Task 2
After successful login, the user should be able to see the list of employees in tabular form in the
landing page.

You will need to retrieve the data from the ‘employees’ table using Eloquent ORM.

Use the ‘Tailwind CSS’ and beautify your webpage by controlling the look and feel.

Note: Upload complete solutions (css, html, js, php) for each task in in a single zip file along
with adding jQuery and screenshots of your solutions in this word file.

Solution
Task 1:

Task 1 screenshot:

Task 2:

Task 2 screenshot:

CS-344: Web Engineering Page 3

Deliverables
Compile a single word document by filling in the solution part and submit this Word file on LMS.
You must include your name, ID, and class on first page. The lab grading policy is as follows: The
lab is graded between 0 to 10 marks. For some of the labs, students have to present their
solutions in a viva session. In case of any problems with submissions on LMS, you should
contact your lab engineer Ms. Ayesha Asif.

CS-344: Web Engineering Page 4