Ứng dụng quản lý khách hàngAssignment
NỘI DUNG BÀI VIẾT
Mục tiêu
Luyện tập phát triển các ứng dụng quản lý sử dụng kiến trúc MVC.
Điều kiện
– Nắm được kiến trúc MVC
– Biết cách triển khai các ứng dụng quản lý sử dụng kiến trúc MVC
Mô tả
Trong phần này, chúng ta sẽ phát triển một ứng dụng quản lý khách hàng. Ứng dụng có các chức năng chính sau:
- Hiển thị danh sách khách hàng
- Thêm một khách hàng mới
- Sửa đổi thông tin của khách hàng
- Xoá một khách hàng
Một khách hàng bao gồm các thành phần
- id: Id của khách hàng
- name: Tên của khách hàng
- email: Email của khách hàng
- address: Địa chỉ của khách hàng
Hướng dẫn
Triển khai kiến trúc MVC bằng cách định nghĩa các thành phần như sau:
Model:
- Lớp Customer: Đại diện cho một khách hàng
- Lớp CustomerDB: Chứa các phương thức để làm việc với CSDL
View:
- File list.php: Hiển thị danh sách khách hàng, bao gồm: Tên, email, address của khách hàng
- File add.php: Chứa form thêm một khách hàng mới
- File edit.php: Chứa form chỉnh sửa một khách hàng
- File delete.php: Chứa form để xoá một khách hàng
- File view.php: Hiển thị nội dung chi tiết của một khách hàng
Controller:
- Lớp CustomerController: Chứa các phương thức để xử lý các thao tác của người dùng
Ngoài ra, file index.php là file sẽ đón nhận tất các các request, phân loại theo các trang và chuyển request đến từng phương thức tương ứng của Controller.
Tạo Database
Tạo bảng customers bao gồm các cột:
- id: integer – tự tăng
- name: varchar
- email: varchar
- address: varchar
Chức năng 1: Thêm mới khách hàng
Bước 1: Tạo class DBConnection Model
Trong thư mục model tạo class DBConnection để thực hiện kết nối cơ sở dữ liệu
File model/DBConnection.php
<?php
namespace Model;
use PDO;
class DBConnection {
public $dsn;
public $user;
public $password;
public function __construct($dsn, $user, $password)
{
$this->dsn = $dsn;
$this->password = $password;
$this->user = $user;
}
public function connect(){
return new PDO($this->dsn, $this->user, $this->password);
}
}
Bước 2: Tạo Class Customer Model đại điện cho một khách hàng
<?php
namespace Model;
class Customer {
public $id;
public $name;
public $email;
public $address;
public function __construct($name, $email, $address)
{
$this->name = $name;
$this->email = $email;
$this->address = $address;
}
}
Bước 3: Tạo phương thức create trong file model/CustomerDB thực hiện insert dữ liệu vào database
<?php
namespace Model;
class CustomerDB {
public $connection;
public function __construct($connection)
{
$this->connection = $connection;
}
public function create($customer){
$sql = "INSERT INTO 'customers'('name', 'email', 'address') VALUES (?, ?, ?)";
$statement = $this->connection->prepare($sql);
$statement->bindParam(1, $customer->name);
$statement->bindParam(2, $customer->email);
$statement->bindParam(3, $customer->address);
return $statement->execute();
}
}
Bước 4: Trong controller/CustomerController.php tạo 2 phương thức
- Phương thức khởi tạo __construct() khai báo kết nối cơ sở dữ liệu
- Phương thức add() trả về view add.php khi method là GET và thực hiện thêm mới khách hàng khi method là POST
<?php
namespace Controller;
use Model\Customer;
use Model\CustomerDB;
use Model\DBConnection;
class CustomerController {
public $customerDB;
public function __construct()
{
$connection = new DBConnection("mysql:host=localhost;dbname=manage_customer", "root", "123456");
$this->customerDB = new CustomerDB($connection->connect());
}
public function add()
{
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
include 'view/add.php';
} else {
$name = $_POST['name'];
$email = $_POST['email'];
$address = $_POST['address'];
$customer = new Customer($name, $email, $address);
$this->customerDB->create($customer);
$message = 'Customer created';
include 'view/add.php';
}
}
}
Bước 5: Tạo form thêm mới khách hàng
Nội dung file view/add.php
<?php
if(isset($message)){
echo "<p class='alert-info'>$message</p>";
}
?>
<div class="col-12 col-md-12">
<div class="row">
<div class="col-12">
<h1>Thêm mới khách hàng</h1>
</div>
<div class="col-12">
<form method="post">
<div class="form-group">
<label>Tên khách hàng</label>
<input type="text" class="form-control" name="name" placeholder="Nhập tên" required>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" placeholder="Nhập mail" required>
</div>
<div class="form-group">
<label>Địa chỉ</label>
<input type="text" class="form-control" name="address" placeholder="Nhập địa chỉ" required>
</div>
<button type="submit" class="btn btn-primary">
Thêm mới
</button>
<button class="btn btn-secondary" onclick="window.history.go(-1); return false;">
Hủy
</button>
</form>
</div>
</div>
</div>
Bước 6: Điều hướng đến trang add trong trang index.php
<?php
require "model/DBConnection.php";
require "model/CustomerDB.php";
require "model/Customer.php";
require "controller/CustomerController.php";
use \Controller\CustomerController;
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Thêm mới khách hàng</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="navbar navbar-default">
<a class="navbar-brand" href="index.php">Customer management</a>
</div>
<?php
$controller = new CustomerController();
$page = isset($_REQUEST['page'])? $_REQUEST['page'] : NULL;
switch ($page){
case 'add':
$controller->add();
break;
case 'delete':
break;
case 'edit':
break;
default:
$controller->index();
break;
}
?>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>
Chạy http://localhost/management-customer-mvc/index.php?page=add chạy và kiểm tra
Chức năng 2: Hiển thị danh sách khách hàng
Bước 1. Trong file model/CustomerDB.php viết hàm getAll() trả về tất cả khách hàng
public function getAll()
{
$sql = "SELECT * FROM customer";
$statement = $this->connection->prepare($sql);
$statement->execute();
$result = $statement->fetchAll();
$customers = [];
foreach ($result as $row) {
$customer = new Customer($row['name'], $row['email'], $row['address']);
$customer->id = $row['id'];
$customers[] = $customer;
}
return $customers;
}
Bước 2: Trong file controller/CustomerController.php tạo hàm index gọi đến hàm getAll() và trả về view/list.php
public function index(){
$customers = $this->customerDB->getAll();
include 'view/list.php';
}
Bước 3: Tạo view/list.php hiển thị danh sách khách hàng
<h2>Danh sách khách hàng</h2> <a href="./index.php?page=add">Thêm mới</a> <table class="table"> <thead> <tr> <th>STT</th> <th>Name</th> <th>Email</th> <th>Adress</th> </tr> </thead> <tbody> <?php foreach ($customers as $key => $customer): ?> <tr> <td><?php echo ++$key ?></td> <td><?php echo $customer->name ?></td> <td><?php echo $customer->email ?></td> <td><?php echo $customer->address ?> <?php endforeach; ?> </tbody> </table>
Bước 4: Điều hướng cho ứng dụng trong file index.php
<?php
$controller = new CustomerController();
$page = isset($_REQUEST['page'])? $_REQUEST['page'] : NULL;
switch ($page){
case 'add':
$controller->add();
break;
case 'delete':
break;
case 'edit':
break;
default:
$controller->index();
break;
}
?>
Chạy http://localhost/management-customer-mvc/ để xem kết quả
Chức năng 3: Xóa một khách hàng
Bước 1: Tạo hàm get() để lấy ra khách hàng theo id và hàm delete() trong file model/CustomerDB để xóa một khách hàng
public function get($id){
$sql = "SELECT * FROM customer WHERE id = ?";
$statement = $this->connection->prepare($sql);
$statement->bindParam(1, $id);
$statement->execute();
$row = $statement->fetch();
$customer = new Customer($row['name'], $row['email'], $row['address']);
$customer->id = $row['id'];
return $customer;
}
public function delete($id){
$sql = "DELETE FROM customer WHERE id = ?";
$statement = $this->connection->prepare($sql);
$statement->bindParam(1, $id);
return $statement->execute();
}
Bước 2: Trong file controller/CustomerController.php tạo hàm delete để gọi đến hàm delete trong model
public function delete()
{
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$id = $_GET['id'];
$customer = $this->customerDB->get($id);
include 'view/delete.php';
} else {
$id = $_POST['id'];
$this->customerDB->delete($id);
header('Location: index.php');
}
}
Bước 3: Tạo view/delete.php
<h1>Bạn chắc chắn muốn xóa khách hàng này?</h1> <h3><?php echo $customer->name; ?></h3> <form action="./index.php?page=delete" method="post"> <input type="hidden" name="id" value="<?php echo $customer->id; ?>"/> <div class="form-group"> <input type="submit" value="Delete" class="btn btn-danger"/> <a class="btn btn-default" href="index.php">Cancel</a> </div> </form>
Bước 4: Cập nhật view/list.php để gọi đến hàm delete() khách hàng
<h2>Danh sách khách hàng</h2>
<a href="./index.php?page=add">Thêm mới</a>
<table class="table">
<thead>
<tr>
<th>STT</th>
<th>Name</th>
<th>Email</th>
<th>Adress</th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($customers as $key => $customer): ?>
<tr>
<td><?php echo ++$key ?></td>
<td><?php echo $customer->name ?></td>
<td><?php echo $customer->email ?></td>
<td><?php echo $customer->address ?></td>
<td>
<a href="./index.php?page=delete&id=<?php echo $customer->id; ?>" class="btn btn-warning btn-sm">
Delete
</a>
</td>
<?php endforeach; ?>
</tbody>
</table>
Bước 5: Điều hướng đến trang delete khi người dùng ấn xóa khách hàng trong file index.php
<?php
$controller = new CustomerController();
$page = isset($_REQUEST['page'])? $_REQUEST['page'] : NULL;
switch ($page){
case 'add':
$controller->add();
break;
case 'delete':
$controller->delete();
break;
case 'edit':
break;
default:
$controller->index();
break;
}
Chức năng 6: Update một khách hàng
Bước 1: Tạo hàm update() trong file model/CustomerDB để update thông tin khách hàng
public function update($id, $customer){
$sql = "UPDATE customer SET name = ?, email = ?, address = ? WHERE id = ?";
$statement = $this->connection->prepare($sql);
$statement->bindParam(1, $customer->name);
$statement->bindParam(2, $customer->email);
$statement->bindParam(3, $customer->address);
$statement->bindParam(4, $id);
return $statement->execute();
}
Bước 2: Trong file controller/CustomerController.php tạo hàm edit để gọi đến hàm update trong model
public function edit()
{
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$id = $_GET['id'];
$customer = $this->customerDB->get($id);
include 'view/edit.php';
} else {
$id = $_POST['id'];
$customer = new Customer($_POST['name'], $_POST['email'], $_POST['address']);
$this->customerDB->update($id, $customer);
header('Location: index.php');
}
}
Bước 3: Tạo view/edit.php
<h2>Cập nhật thông tin khách hàng</h2> <form method="post" action="./index.php?page=edit"> <input type="hidden" name="id" value="<?php echo $customer->id; ?>"/> <div class="form-group"> <label>Name</label> <input type="text" name="name" value="<?php echo $customer->name; ?>" class="form-control"/> </div> <div class="form-group"> <label>Email</label> <textarea name="email" class="form-control"><?php echo $customer->email; ?></textarea> </div> <div class="form-group"> <label>Address</label> <textarea name="address" class="form-control"><?php echo $customer->address; ?></textarea> </div> <div class="form-group"> <input type="submit" value="Update" class="btn btn-primary"/> <a href="index.php" class="btn btn-default">Cancel</a> </div> </form>
Bước 4: Thêm link update thông tin khách hàng tại tranh danh sách khách hàng
<h2>Danh sách khách hàng</h2>
<a href="./index.php?page=add">Thêm mới</a>
<table class="table">
<thead>
<tr>
<th>STT</th>
<th>Name</th>
<th>Email</th>
<th>Adress</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php foreach ($customers as $key => $customer): ?>
<tr>
<td><?php echo ++$key ?></td>
<td><?php echo $customer->name ?></td>
<td><?php echo $customer->email ?></td>
<td><?php echo $customer->address ?></td>
<td>
<a href="./index.php?page=delete&id=<?php echo $customer->id; ?>" class="btn btn-warning btn-sm">
Delete
</a>
</td>
<td>
<a href="./index.php?page=edit&id=<?php echo $customer->id; ?>" class="btn btn-sm">
Update
</a>
</td>
<?php endforeach; ?>
</tbody>
</table>
Chạy ứng dụng và quan sát kết quả.
Như vậy chúng ta đã hoàn thành được các tính năng cơ bản của ứng dụng quản lý khách hàng.
Tổng kết
Qua bài tập trên chúng ta đã luyện tập:
- Luyện tập thực hành với MVC
- Luyện tập chức năng thêm, sửa, xóa đơn giản
Leave a Reply