The objective of this laboratory exam is to apply and extend knowledge of the Model-View-Controller

(MVC) architecture within the Laravel framework to build a fully functional transaction-based ordering
system. Students will learn how to create models, views, and controllers, as well as define routes,
manage database migrations, and implement data validation and user interface improvements.

Intended Learning Outcomes (ILOs)

By the end of this laboratory exercise, students will be able to:

 Understand and Apply MVC Architecture: Demonstrate an understanding of the Model-View-

Controller (MVC) pattern by implementing and organizing code components in a Laravel project.
 Create and Manage Models, Views, and Controllers: Develop a functional ordering system in
Laravel by creating models, views, and controllers, and effectively managing their interactions.
 Implement and Validate User Input: Use form validation techniques to ensure secure and
reliable user input, thereby improving the system's robustness.
 Design and Enhance User Interfaces: Apply design principles to create an intuitive and user-
friendly interface for interacting with the ordering system.
 Analyze and Reflect on Learning: Articulate insights gained from the exercise through a
reflection, explaining how the MVC framework aids in organizing and simplifying complex web
application development.

Instructions:

1. Review the Given Code:

The code provided below is a basic implementation of a transaction-based ordering system
using the MVC architecture in Laravel. Carefully examine how models, views, and controllers are
used to handle and display order transactions.
2. Task:
Your task is to design and add additional MVC components to improve and extend the current
system. Consider implementing features such as:
 Updating existing orders.
 Viewing detailed order history.
 Validating and sanitizing user input for enhanced security.
 Improving the user interface for a more polished and intuitive experience.
3. Save Your Work:
Once you have completed the modifications, save your entire Laravel project in a zip file format.
4. Documentation:
Take screenshots of the key functionalities and add them to a PDF file.
On the last page of the PDF file, write a reflection (5-8 sentences) describing how this exam
helped you learn and understand the MVC architecture in Laravel.
5. Submission:
Submit both the zip file of your Laravel project and the PDF file with screenshots and reflection.
Ensure your project runs without errors and that your documentation is complete and clear.
Creating a simple ordering system in Laravel using the Model-View-Controller (MVC) architecture
involves several steps.

1. Model: Represents the data structure (e.g., Order).

2. View: The user interface (e.g., forms to create an order).
3. Controller: Handles the application logic (e.g., processing the order).

Step 1: Set Up Laravel Project

First, ensure you have Laravel installed. If not, you can create a new Laravel project by running:

composer create-project --prefer-dist laravel/laravel order-system

Navigate into your project directory:

cd order-system

Step 2: Create the Order Model and Migration

Next, create a model for the order and the corresponding database migration:

php artisan make:model Order –m

This command creates an Order model and a migration file in the database/migrations directory.

Step 3: Define the Order Migration

Open the migration file located in database/migrations, which will be named something like
xxxx_xx_xx_xxxxxx_create_orders_table.php. Update it to include the necessary fields:

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateOrdersTable extends Migration

public function up()

Schema::create('orders', function (Blueprint $table) {

$table->id();

$table->string('product_name');
 $table->integer('quantity');

$table->decimal('price', 8, 2);

$table->timestamps();

});

public function down()

Schema::dropIfExists('orders');

Run the migration to create the orders table:

php artisan migrate

Step 4: Create the Order Controller

Now, create a controller to handle the order logic:

php artisan make:controller OrderController

Open the newly created OrderController.php in app/Http/Controllers and add the following methods:

namespace App\Http\Controllers;

use App\Models\Order;

use Illuminate\Http\Request;

class OrderController extends Controller

public function index()

$orders = Order::all();

return view('orders.index', compact('orders'));

 }

public function create()

return view('orders.create');

public function store(Request $request)

$request->validate([

'product_name' => 'required',

'quantity' => 'required|integer',

'price' => 'required|numeric',

]);

Order::create($request->all());

return redirect()->route('orders.index')->with('success', 'Order created successfully.');

public function destroy(Order $order)

$order->delete();

return redirect()->route('orders.index')->with('success', 'Order deleted successfully.');

}
Step 5: Define Routes

Open the routes/web.php file and define the routes for the ordering system:

use App\Http\Controllers\OrderController;

Route::resource('orders', OrderController::class);

Step 6: Create Views

Create a directory for the views:

mkdir resources/views/orders

Create the Index View

Create index.blade.php in resources/views/orders:

<!DOCTYPE html>

<html>

<head>

<title>Orders</title>

</head>

<body>

<h1>Orders</h1>

<a href="{{ route('orders.create') }}">Create Order</a>

@if(session('success'))

<p>{{ session('success') }}</p>

@endif

<table border="1">

<tr>
 <th>Product Name</th>

<th>Quantity</th>

<th>Price</th>

<th>Actions</th>

</tr>

@foreach ($orders as $order)

<tr>

<td>{{ $order->product_name }}</td>

<td>{{ $order->quantity }}</td>

<td>{{ $order->price }}</td>

<td>

<form action="{{ route('orders.destroy', $order) }}" method="POST" style="display:inline;">

@csrf

@method('DELETE')

<button type="submit">Delete</button>

</form>

</td>

</tr>

@endforeach

</table>

</body>

</html>

Create the Create View

Create create.blade.php in resources/views/orders:

<!DOCTYPE html>

<html>

<head>

<title>Create Order</title>
</head>

<body>

<h1>Create Order</h1>

@if ($errors->any())

<div>

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div>

@endif

<form action="{{ route('orders.store') }}" method="POST">

@csrf

<div>

<label for="product_name">Product Name:</label>

<input type="text" id="product_name" name="product_name" required>

</div>

<div>

<label for="quantity">Quantity:</label>

<input type="number" id="quantity" name="quantity" required>

</div>

<div>

<label for="price">Price:</label>

<input type="text" id="price" name="price" required>

</div>

<button type="submit">Create Order</button>

 </form>

<a href="{{ route('orders.index') }}">Back to Orders</a>

</body>

</html>

Step 7: Update the Order Model

Open the Order.php model located at app/Models/Order.php and add the following code to allow
mass assignment:

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Order extends Model

use HasFactory;

protected $fillable = ['product_name', 'quantity', 'price'];

Step 8: Test the Application

Now that you have set up the basic components of your ordering system, you can test it. Start the
Laravel development server:

php artisan serve

Optional:

This design will enhance the user interface of the ordering system you created in Laravel. You can apply
this design to your index.blade.php and create.blade.php views.

CSS Styles

You can create a separate CSS file for styles. Let's create a file named styles.css in the public/css
directory.

mkdir public/css

touch public/css/styles.css

Add the following styles to public/css/styles.css:

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

margin: 0;

padding: 20px;

h1 {

color: #333;

.container {

max-width: 800px;

margin: auto;

background: white;

padding: 20px;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}
table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

table, th, td {

border: 1px solid #ddd;

th, td {

padding: 10px;

text-align: left;

th {

background-color: #f2f2f2;

button {

background-color: #4CAF50;

color: white;

border: none;

padding: 10px 15px;

cursor: pointer;

border-radius: 5px;

}
button:hover {

background-color: #45a049;

a{

text-decoration: none;

color: #007BFF;

a:hover {

text-decoration: underline;

.error {

color: red;

margin-bottom: 20px;

form div {

margin-bottom: 15px;

Update the Views

let's update the index.blade.php and create.blade.php views to use the new styles.
index.blade.php

<!DOCTYPE html>

<html lang="en">

<head>
 <meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Orders</title>

<link rel="stylesheet" href="{{ asset('css/styles.css') }}">

</head>

<body>

<div class="container">

<h1>Orders</h1>

<a href="{{ route('orders.create') }}">Create Order</a>

@if(session('success'))

<p>{{ session('success') }}</p>

@endif

<table>

<tr>

<th>Product Name</th>

<th>Quantity</th>

<th>Price</th>

<th>Actions</th>

</tr>

@foreach ($orders as $order)

<tr>

<td>{{ $order->product_name }}</td>

<td>{{ $order->quantity }}</td>

<td>${{ number_format($order->price, 2) }}</td>

<td>

<form action="{{ route('orders.destroy', $order) }}" method="POST" style="display:inline;">

@csrf
 @method('DELETE')

<button type="submit">Delete</button>

</form>

</td>

</tr>

@endforeach

</table>

</div>

</body>

</html>

create.blade.php

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Create Order</title>

<link rel="stylesheet" href="{{ asset('css/styles.css') }}">

</head>

<body>

<div class="container">

<h1>Create Order</h1>

@if ($errors->any())

<div class="error">

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach
 </ul>

</div>

@endif

<form action="{{ route('orders.store') }}" method="POST">

@csrf

<div>

<label for="product_name">Product Name:</label>

<input type="text" id="product_name" name="product_name" required>

</div>

<div>

<label for="quantity">

<label for="quantity">Quantity:</label>

<input type="number" id="quantity" name="quantity" required>

</div>

<div>

<label for="price">Price:</label>

<input type="text" id="price" name="price" required>

</div>

<button type="submit">Create Order</button>

</form>

<a href="{{ route('orders.index') }}">Back to Orders</a>

</div>

</body>

</html>
Best of luck with your Laravel project!
Trust your coding skills, stay focused, and
remember: every bug is just a step closer to
success.

You've got this, go build something amazing!

– Ma’am K