Giới thiệu
Trong bài này, mình sẽ hướng dẫn các bạn tự xây dựng một hệ thống quản lý số tiền quyên góp, từ thiện đơn giản. Với mục đích hiển thị, quản lý những cá nhân đã tham gia quyên góp, số tiền và các chiến dịch đã kêu gọi.
Hệ thống này chỉ dừng lại ở mức cơ bản nhất liên quan đến phần quản lý quyên góp. Do đó, các bạn có thể sử dụng project này để phát triển tiếp thành các dự án to hơn, nhiều module hơn.
- Đừng quên: Các mẫu trang web bằng wordpress cực đẹp
Như các bạn đã biết, để xây dựng được một hệ thống quản lý (quản lý nhân sự, quản lý sản phẩm, quản lý bán hàng….) trong PHP và MySQL từ đầu thì không phải đơn giản. Các bạn phải xây dựng các hàm từ đầu: kết nối cơ sở dữ liệu, rút trích dữ liệu từ các bảng, hiển thị ra giao diện, thêm, sửa, xóa và cập nhật dữ liệu….Trong bài này mình sẽ đơn giản hóa các việc đó bằng cách sử dụng thư viện phpGrid để rút trích dữ liệu và phpChart để hiển thị dữ liệu đã tổng hợp.
Nội dung trong bài mình cũng sẽ đi từ bước phân tích và xây dựng cơ sở dữ liệu đến thiết kế giao diện. Các phần code minh họa đi kèm cũng rất trực quan, bạn có thể tiện theo dõi từng phần. Bài viết được lược dịch từ tác giả Richard – một thành viên của Medium.
Yêu cầu hệ thống
- PHP 7+
- MySQL
- phpGrid
- phpChart
Để bắt đầu, chúng ta khởi tạo thư mục dự án với các tập tin cơ bản theo cấu trúc như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Donations |__assets |__css | |__style.css | |__db | |__donation_manager_db.sql | |__dm_schema.dbs | |__inc | |__head.php | |__menu.php | |__footer.php | |__phpGrid |__phpChart | |__campaigns.php |__donations.php |__donors.php |__reports.php |
Xây dựng cơ sở dữ liệu
Đối với hệ thống quản lý quyên góp, từ thiện thì cơ sở dữ liệu của chúng ta đơn giản gồm có 4 đối tượng:
- Donor – Thông tin của các nhà tài trợ, người quyên góp
- Donation – Thông tin về số lượng, tiền đã nhận quyên góp từ một chiến dịch cụ thể
- Campaign – Thông tin về các chiến dịch kêu gọi quyên góp
- Organization – Tổ chức quản lý các khoản đóng góp
Bảng Donors
Đây là bảng sẽ lưu trữ thông tin của nhà tài trợ, nhà hảo tâm hoặc người đã tham gia quyên góp. Do đó chúng ta sẽ có một số trường thông tin cơ bản như tên, địa chỉ email, số điện thoại, địa chỉ….Trong đó chúng ta cần có thêm trường id để làm khóa chính cho bảng.
| Tên trường | Kiểu dữ liệu |
| id | number (khóa chính) |
| Name | text |
| FirstName | text |
| MiddleName | text |
| LastName | text |
| text | |
| Phone | text |
| Address | text |
| Address_Street_1 | text |
| Address_street_2 | text |
| City | text |
| State | text |
| Zip | text |
| Country | text |
| Occupation | text |
Bảng Org
Bảng này lưu trữ các thông tin về các tổ chức quản lý các chiến dịch từ thiện, kêu gọi quyên góp. Do đó, bảng này chỉ đơn giản gồm có 2 trường thông tin là khóa và tên tổ chức.
| tên trường | Kiểu dữ liệu |
| id | number |
| Name | Text |
Bảng Campaigns
Bảng này lưu trữ thông tin về các chiến dịch kêu gọi quyên góp từ cộng đồng. Bảng này sẽ gồm các thông tin: Tên chiến dịch, Mô tả, ngày bắt đầu chiến dịch và tổ chức đứng ra nhận tiền quyên góp.
| Tên trường | Kiểu dữ liệu |
| id | number |
| CampaignName | text |
| Description | text |
| StartDate | datetime |
| OrgId | Lấy từ Id của bảng Org |
Bảng Donations
Bảng này lưu trữ thông tin về các sự đóng góp của cộng đồng. Do đó nó sẽ có các trường thông tin: Chiến dịch kêu gọi đóng góp, số lượng tiền đã nhận, ngày tháng đóng góp, ghi chú và thông tin của người đóng góp.
| Tên trường | Kiểu dữ liệu |
| id | number |
| CampaignId | Lấy từ bảng Campaigns |
| Amount | number |
| Date | datetime |
| Notes | text |
| DonorID | Lấy từ bảng Donors |
Mô hình dữ liệu quan hệ của hệ thống quản lý quyên góp, từ thiện
Cơ sở dữ liệu của chúng ta chỉ đơn giản như vậy thôi. Ngoài ra, đối với từng dự án hoặc yêu cầu riêng thì các bạn có thể phát triển thêm các module khác: quản lý user, đăng nhập/đăng xuất, quyên góp online….Dưới đây là mô hình quan hệ để các bạn tiện theo dõi.
Theo mô hình quan hệ trên chúng ta thấy, một người có thể quyên góp nhiều lần. Một chiến dịch thì có thể nhận được nhiều lượt quyên góp. Và một tổ chức có thể đứng ra kêu gọi nhiều chiến dịch.
Cài đặt cơ sở dữ liệu
Các bạn có thể tự tay tạo một cơ sở dữ liệu và bốn bảng dữ liệu trong MySQL. Sau đó có thể add thêm một vài thông tin demo cho dự án của chúng ta. Tuy nhiên, nếu ngại tạo từ đầu thì các bạn có thể sử dụng tập tin donation_manager_db.sql. Tập tin này đã có chứa sẵn các script giúp bạn tạo mới cơ sở dữ liệu donation_manager đã có sẵn dữ liệu demo.
Cài đặt phpGrid
Như đã giới thiệu, hệ thống quản lý của chúng ta sẽ phải làm việc với các bảng cơ sở dữ liệu. Các trường thông tin hiển thị ra cho người dùng dưới dạng bảng. Cho nên, để tiện thao tác sau này thì chúng ta sẽ sử dụng thư viện bên ngoài là phpGrid.
- Đừng quên: Thao tác Database thông qua Stored Procedure
phpGrid cung cấp sẵn các thao tác cơ bản như thêm mới, sửa, xóa, cập nhật dữ liệu. Người dùng không cần phải viết code xử lý nhiều. Và đặc biệt là nó nhanh hơn cách chúng ta tự viết nhiều.
Để cài đặt phpGrid chúng ta làm theo 3 bước sau:
- Download phpGrid và giải nén thư mục vừa download về
- Upload thư mục phpGrid vào thư mục project
- Cấu hình tập tin
conf.php
Các bạn mở tập tin conf.php ra và cấu hình các thông tin sau:
1 2 3 4 5 6 | define('PHPGRID_DB_HOSTNAME', 'localhost'); // host name define('PHPGRID_DB_USERNAME', 'root'); // database user name define('PHPGRID_DB_PASSWORD', ''); // database password define('PHPGRID_DB_NAME', 'donation_manager'); // our donation manager database name define('PHPGRID_DB_TYPE', 'mysql'); // database type define('PHPGRID_DB_CHARSET','utf8'); // always 'utf8' in MySQL |
Thiết kế giao diện
Về mặt giao diện, project này cũng chỉ đưa ra một giao diện đơn giản gồm một menu trên cùng và bảng cơ sở dữ liệu. Trong phần bảng cơ sở dữ liệu, chúng ta sẽ sử dụng phpChart để thao tác với biểu đồ.
Nếu cần thêm tính năng thì tùy vào khả năng thiết kế và yêu cầu từ project của các bạn nhé. Do đó, trong bài này mình sẽ không đi sâu vào vấn đề giao diện nhé.
- Đừng quên: Hướng dẫn thiết kế giao diện với css
Để tiện làm việc và phát triển thêm sau này. Khung giao diện của chúng ta sẽ thiết kế làm 3 tập tin gồm:
- head.php – Phần đầu của trang web. Có thể dùng để thêm logo, slogan…
- menu.php – chứa thông tin về menu của trang web
- footer.php – Phần chân trang web. Có thể thêm các thông tin về chủ nhân trang web, các liên kết trang web, thẻ tag…
Tập tin head.php
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My Donation Manager</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="Stylesheet" href="css/style.css" /> </head> <body> |
1 2 3 4 5 6 7 8 | <div id="menu"> <ul> <li><a href="donations.php" <?php if($_GET['currentPage'] == 'donations') echo 'class="active"'; ?>>Donations</a></li> <li><a href="donors.php" <?php if($_GET['currentPage'] == 'donors') echo 'class="active"'; ?>>Donors</a></li> <li><a href="campaigns.php" <?php if($_GET['currentPage'] == 'campaigns') echo 'class="active"'; ?>>Campaigns</a></li> <li><a href="reports.php" <?php if($_GET['currentPage'] == 'reports') echo 'class="active"'; ?>>Reports</a></li> </ul> </div> |
1 2 3 4 5 | <br /><br /><br /><br /><br /> <div class="footer"><strong>Build-From-Scratch Series</strong> <?php echo date('Y'); ?>.</div> </body> </html> |
Còn phần nội dung của trang web chúng ta sẽ chứa trong 4 tập tin gồm.
- campaigns.php
- donations.php
- donors.php
- reports.php
Bốn trang trên sẽ sử dụng chung một mẫu như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php use phpGrid\C_DataGrid; require_once("../phpGrid/conf.php"); include_once('../inc/head.php'); ?> <h1>My Custom CRM</h1> <?php include_once('../inc/menu.php'); ?> <h3>Section Title</h2> <?php // ..Đặt các đoạn lệnh trích xuất thông tin từ cơ sở dữ liệu ở đây. Các đoạn lệnh sẽ được trình bày cụ thể ở phần tiếp theo. ?> <?php include_once('../inc/footer.php'); ?> |
Menu của hệ thống quản lý quyên góp, từ thiện của chúng ta sẽ gồm có bốn items. Mỗi items sẽ đại diện cho một bảng cơ sở dữ liệu mà chúng ta vừa tạo ở bên trên.
Lập trình hệ thống quản lý quyên góp, từ thiện bằng PHP
Trang quản lý quyên góp – donations.php
Đầu tiên là trang quản lý quyên góp, từ thiện. Trang này sẽ hiển thị tất cả thông tin được trích từ bảng Donations.
Để trích xuất dữ liệu từ MySQL ra datagrid chúng ta sử dụng lệnh phpGrid như sau:
1 2 | $dgDonations = new C_DataGrid("SELECT * FROM donations", "id", "donations"); $dgDonations -> display(); |
Trong đó:
- Dòng đầu tiên là khởi tạo đối tượng Datagrid. Đối tượng này lấy tất cả dữ liệu bằng lệnh SQL. Tham khảo thêm về cách khởi tạo đối tượng trong phpGrid tại đây
- Dòng hai là hiển thị toàn bộ kết quả trích xuất được
Rất đơn giản phải không? Bạn có thể tham khảo thêm cách thức làm việc cơ bản của datagrid.
Đối với các bạn chưa quen sử dụng phpGrid thì có thể thấy lạ. Theo các truyền thống trong PHP & MySQL, muốn lấy tất cả bản ghi ta sử dụng:
1 2 3 4 5 6 7 8 9 10 | $query = "SELECT * FROM table"; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)){ foreach($row as $key => $val){ echo $key . ": " . $val . "<BR />"; } } |
- Đừng quên: Thêm và xóa hàng tự động trong Gridview
Sau khi xong thì kết quả chúng ta sẽ nhìn như thế này:
Vậy là các bạn có thể tự so sánh hiệu quả khi dùng phpGrid so với tự code trong việc hiện thị dữ liệu dạng datagrid rồi nhé.
Đối với kết quả trên, chúng ta cần có một vài tùy chỉnh để bảng dữ liệu của chúng ta trông đẹp hơn. Đầu tiên, chúng ta không cần phải hiển thị cột id ra làm gì. Do đó chúng ta có thể sử dụng phương thức set_col_hidden().
1 | $dgDonations->set_col_hidden('id'); |
Tiếp theo, cột Amount chúng ta cần hiển thị dạng tiền tệ. Vậy chúng ta có thể định dạng bằng phương thức set_col_currency().
1 | $dgDonations->set_col_currency("Amount", "$"); |
Mặt khác, chúng ta cũng muốn bảng dữ liệu có các tiêu đề cột hiển thị thân thiện cho người dùng hơn. Chúng ta có thể dễ dàng đổi tên cột bằng phương thức set_col_edittype().
1 2 | $dgDonations->set_col_edittype('CampaignId', 'select', 'select id, CampaignName from campaigns'); $dgDonations->set_col_edittype('DonorId', 'select', "select id, LastName from Donors"); |
Nếu chúng ta muốn edit trực tiếp trong datagrid thì có thể sử dụng đoạn lệnh sau:
1 | $dgDonations->enable_edit(); |
Vậy code hoàn chỉnh sẽ nhìn như thế này:
1 2 3 4 5 6 7 | $dgDonations = new C_DataGrid("SELECT * FROM donations", "id", "donations"); $dgDonations->set_col_hidden('id'); $dgDonations->set_col_edittype('CampaignId', 'select', 'select id, CampaignName from campaigns'); $dgDonations->set_col_edittype('DonorId', 'select', "select id, LastName from Donors"); $dgDonations->set_col_currency("Amount", "$"); $dgDonations->enable_edit(); $dgDonations -> display(); |
Và kết quả sau một loạt các thay đổi trên sẽ thành thế này:
Trang quản lý người quyên góp – Donors.php
Trang này chứa thông tin những người đã tham gia quyên góp trên hệ thống. Như đã phân tích ở trên, một người có thể tham gia quyên góp cho một chiến dịch nhiều lần. Do đó, trong trang này cần phải hiển thị tổng số tiền mà cá nhân đó đã từng đóng góp. Để đơn giản, chúng ta sử dụng INNER JOIN trong SQL để nối hai bảng Donations và bảng Donors theo email.
1 2 3 4 5 6 7 8 | SELECT d.id, concat(d.FirstName, ' ', d.LastName) As Name, d.Address, d.Email, sum(dn.Amount) As 'TotalDonation' FROM donors d INNER JOIN donations dn on d.id = dn.donorid GROUP BY d.Address, d.Email |
Khi đó, đoạn mã để trích xuất thông tin từ cơ sở dữ liệu sử dụng phpGrid như sau:
1 2 3 4 5 6 7 8 9 10 11 | $dgDonors = new C_DataGrid( "SELECT d.id, concat(d.FirstName, ' ', d.LastName) As Name, d.Address, d.Email, sum(dn.Amount) As 'TotalDonation' FROM donors d INNER JOIN donations dn on d.id = dn.donorid GROUP BY d.Address, d.Email ", "id", "donors"); $dgDonors -> display(); |
Khi đó, kết quả chúng ta sẽ được như này:
Tương tự như phần trên, chúng ta có thể định dạng kết quả hiện thị từ các cột cho dễ nhìn.
1 2 3 4 5 6 7 | $dgDonors->set_col_hidden('id'); $dgDonors->set_col_format('Email', 'email'); $dgDonors->set_col_currency("TotalDonation", "$"); $dgDonors->set_col_readonly("Name", true); $dgDonors->set_col_readonly("TotalDonation", true); $dgDonors->enable_edit(); $dgDonors->display(); |
Ngoài ra, nếu các bạn muốn hiển thị chi tiết từng lần người quyên góp đã tham gia đóng góp bao nhiêu tiền thì có sử dụng tính năng phpGrid master details. Tính năng này cho phép hiển thị chi tiết từng lần tham gia quyên góp với số tiền đã đóng của từng người khi chúng ta kích vào từng bản ghi. Để đơn giản, chúng ta sẽ tạo thêm một đối tượng C_Datagrid mới lấy thông tin từ bảng donations
1 2 3 4 5 6 | $dgDonations = new C_DataGrid("SELECT * FROM donations", "id", "donations"); $dgDonations->set_col_hidden('id'); $dgDonations->enable_edit(); $dgDonations->set_col_edittype('CampaignId', 'select', 'select id, CampaignName from campaigns'); $dgDonations->set_col_edittype('DonorId', 'select', "select id, concat(FirstName, ' ', LastName) from Donors"); $dgDonations->set_col_currency("Amount", "$"); |
Và gán nó thành masterdetail như sau:
1 | $dgDonors -> set_masterdetail($dgDonations, 'DonorId', 'id'); |
Vậy đoạn code hoàn chỉnh sẽ trông như thế này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $dgDonors = new C_DataGrid( "SELECT d.id, concat(d.FirstName, ' ', d.LastName) As Name, d.Address, d.Email, sum(dn.Amount) As 'TotalDonation' FROM donors d INNER JOIN donations dn on d.id = dn.donorid GROUP BY d.Address, d.Email ", "id", "donors"); $dgDonors->set_col_hidden('id'); $dgDonors->set_col_format('Email', 'email'); $dgDonors->set_col_currency("TotalDonation", "$"); $dgDonors->set_col_readonly("Name", true); $dgDonors->set_col_readonly("TotalDonation", true); $dgDonors->enable_edit(); $dgDonations = new C_DataGrid("SELECT * FROM donations", "id", "donations"); $dgDonations->set_col_hidden('id'); $dgDonations->enable_edit(); $dgDonations->set_col_edittype('CampaignId', 'select', 'select id, CampaignName from campaigns'); $dgDonations->set_col_edittype('DonorId', 'select', "select id, concat(FirstName, ' ', LastName) from Donors"); $dgDonations->set_col_currency("Amount", "$"); $dgDonors -> set_masterdetail($dgDonations, 'DonorId', 'id'); $dgDonors -> display(); |
Trang quản lý chiến dịch – campaigns.php
Tương tự như trang quản lý thông tin người tham gia đóng góp. Trang này sẽ hiển thị ra danh sách các chiến dịch trên hệ thống. Tương tự như donors.php, chúng ta cũng có thể xây dựng master detail cho bảng dữ liệu.
Ở đây, chúng ta vẫn sử dụng INNER JOIN để tính toán tổng số tiền mà chiến dịch đó đã kêu gọi đóng góp thành công. Ngoài ra, chúng ta cũng cần đếm xem đã có bao nhiêu người tham gia đóng góp.
1 2 3 4 5 6 | SELECT c.id, dn.CampaignId, c.CampaignName, c.Description, c.StartDate, COUNT(*) As 'DonationCount', SUM(dn.Amount) As 'TotalDonation' FROM campaigns c INNER JOIN donations dn on c.id = dn.CampaignId GROUP BY dn.CampaignId, c.CampaignName, c.Description, c.StartDate |
Các bạn cũng có thể sử dụng các phương thức cài đặt bảng dữ liệu giống như hai trang trên để làm cho dữ liệu hiển thị đẹp hơn. Ngoài ra, trong trang này chúng ta cũng kích hoạt khả năng tìm kiếm bằng phương thức enable_global_search(). Chúng ta cũng sử dụng Master detail để giúp người dùng kiểm tra xem chi tiết một chiến dịch đã có những người nào tham gia đóng góp.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $dgCamp = new C_DataGrid( "SELECT c.id, dn.CampaignId, c.CampaignName, c.Description, c.StartDate, COUNT(*) As 'DonationCount', SUM(dn.Amount) As 'TotalDonation' FROM campaigns c INNER JOIN donations dn on c.id = dn.CampaignId GROUP BY dn.CampaignId, c.CampaignName, c.Description, c.StartDate", "id", "campaigns"); $dgCamp->set_col_hidden('id'); $dgCamp->set_col_hidden('CampaignId'); $dgCamp->enable_edit(); $dgCamp->enable_global_search(true); $dgCamp->set_col_currency('TotalDonation', '$'); // Donations detail grid $dgDonations = new C_DataGrid("SELECT * FROM donations", "id", "donations"); $dgDonations->set_col_hidden('id')->set_caption('Donations'); $dgDonations->enable_edit(); $dgDonations->set_dimension('1000px'); $dgDonations->set_col_edittype('CampaignId', 'select', 'select id, CampaignName from campaigns'); $dgDonations->set_col_edittype('DonorId', 'select', "select id, concat(FirstName, ' ', LastName) from Donors"); $dgDonations->set_col_currency("Amount", "$"); $dgCamp -> set_masterdetail($dgDonations, 'CampaignId', 'id'); $dgCamp -> display(); |
Download code Donations Manager System with PHP and MySQL
Dưới đây là đoạn code hoàn chỉnh của toàn bộ hệ thống đã xây dựng bên trên. Các bạn có thể tự mình xây dựng theo bài viết. Hoặc download code Donations Manager System bằng PHP và MySQLvề tham khảo theo link dưới đây:
Chúc các bạn thành công!
You must log in to post a comment.