Joshua S.
Rebuta September 13, 2025
BSCpE 4A Elective 2
Laboratory Exercise: MVC Architecture Introduction
Part I: Building a Mini Student Directory with MVC
Detailed Instructions
1. Modify index.php
<?php
require_once __DIR__ . "/controllers/UserController.php";
$controller = new UserController();
?>
<!DOCTYPE html>
<html>
<head>
<title>MVC Demo Level 3</title>
</head>
<body>
<h2>Add a Student</h2>
<form method="POST" action="">
<input type="text" name="username" placeholder="Enter student
name" required>
<button type="submit">Add</button>
</form>
<hr>
<h2>Student Directory</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" &&
!empty($_POST["username"])) {
$controller->addUser($_POST["username"]);
}
$controller->showUsers();
?>
</body>
</html>
2. Update UserController.php
<?php
require_once __DIR__ . "/../models/User.php";
require_once __DIR__ . "/../views/user_view.php";
class UserController {
private $users = [];
public function addUser($name) {
$user = new User($name);
$this->users[] = $user;
}
public function showUsers() {
displayUsers($this->users);
}
}
?>
3. Keep User.php (Model)
<?php
class User {
public $name;
public function __construct($name) {
$this->name = $name;
}
}
?>
4. Update user_view.php (View)
<?php
function displayUsers($users) {
if (empty($users)) {
echo "<p>No students added yet.</p>";
} else {
echo "<ul>";
foreach ($users as $user) {
echo "<li>" . htmlspecialchars($user->name) . "</li>";
}
echo "</ul>";
}
}
?>
Run the Application
1. Start XAMPP Apache.
2. Visit:
3. http://localhost/mvc_demo/
4. Enter multiple student names one by one.
5. Expected Output:
Student Directory
Anna
Mark
John
Guide for Student Reflection
Reflect in 4–5 sentences on how MVC can be scaled to manage multiple
data entries. How does separating responsibilities (Model for data, View
for presentation, Controller for logic) make it easier to add features
like a directory? Which part of this exercise showed you the benefit of
MVC the most?
- MVC can be scaled to manage multiple data entries because each
layer handles its own responsibility, making the system more
organized and adaptable. The Model can store and manage multiple
objects without affecting how the data is displayed, while the View
can present lists, tables, or detailed pages of entries without
changing the core logic. The Controller coordinates between them,
so adding features like a directory just means updating logic for
handling and displaying many records, not rewriting everything.
The benefit of MVC was most clear when I saw how the Controller
connected the Model and View—showing that I could expand
functionality without breaking other parts of the code.
Part II: MVC Student Directory with MySQL Database Integration
Detailed Instructions
1. Create the Database
1. Start XAMPP → Start Apache and MySQL.
2. Open browser → Go to:
3. http://localhost/phpmyadmin/
4. Create a database:
5. CREATE DATABASE mvc_demo;
6. Select mvc_demo → Run this query to create the users table:
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL);
2. Modify index.php
<?php
require_once __DIR__ . "/controllers/UserController.php";
$controller = new UserController();
?>
<!DOCTYPE html>
<html>
<head>
<title>MVC Demo Level 4</title>
</head>
<body>
<h2>Add a Student</h2>
<form method="POST" action="">
<input type="text" name="username" placeholder="Enter student
name" required>
<button type="submit">Add</button>
</form>
<hr>
<h2>Student Directory</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" &&
!empty($_POST["username"])) {
$controller->addUser($_POST["username"]);
}
$controller->showUsers();
?>
</body>
</html>
3. Update UserController.php
<?php
require_once __DIR__ . "/../models/User.php";
require_once __DIR__ . "/../views/user_view.php";
class UserController {
private $userModel;
public function __construct() {
$this->userModel = new User();
}
public function addUser($name) {
$this->userModel->insertUser($name);
}
public function showUsers() {
$users = $this->userModel->getUsers();
displayUsers($users);
}
}
?>
4. Update User.php (Model with MySQL)
<?php
class User {
private $conn;
public function __construct() {
// Database connection
$this->conn = new mysqli("localhost", "root", "", "mvc_demo");
if ($this->conn->connect_error) {
die("Connection failed: " . $this->conn->connect_error);
}
}
public function insertUser($name) {
$stmt = $this->conn->prepare("INSERT INTO users (name) VALUES
(?)");
$stmt->bind_param("s", $name);
$stmt->execute();
$stmt->close();
}
public function getUsers() {
$result = $this->conn->query("SELECT * FROM users ORDER BY id
DESC");
$users = [];
while ($row = $result->fetch_assoc()) {
$users[] = $row;
}
return $users;
}
}
?>
5. Update user_view.php
<?php
function displayUsers($users) {
if (empty($users)) {
echo "<p>No students found in the database.</p>";
} else {
echo "<ul>";
foreach ($users as $user) {
echo "<li>" . htmlspecialchars($user['name']) . "</li>";
}
echo "</ul>";
}
}
?>
Run the Application
1. Start Apache + MySQL in XAMPP.
2. Go to:
3. http://localhost/mvc_demo/
4. Add multiple student names.
5. Expected Output:
6. Student Directory
7. - John
8. - Maria
9. - Anna
Guide for Student Reflection
Write 4–5 sentences on how integrating a database makes an MVC
application more powerful. How does the Model’s responsibility change
when adding persistence? How might this approach be extended to handle
more complex data (like student records with age, course, etc.)?
- Integrating a database into an MVC application makes it more
powerful by allowing data to be stored, retrieved, and managed
persistently instead of just existing temporarily in memory. The
Model’s responsibility expands from simply holding data to also
handling database operations like queries, updates, and validation.
With persistence, applications can maintain user information,
settings, and records across sessions, making them more practical
and reliable. This approach can be extended to more complex data,
such as student records with age, course, and grades, by designing
structured database tables and having the Model manage
relationships between entities. As a result, the application
becomes scalable and capable of handling richer, real-world data
scenarios.
