Hướng dẫn Từng bước học lập trình PHP cơ bản qua dự án website giới thiệu sản phẩm

[filiallion]

Hôm nay tôi sẽ bắt đầu viết loạt bài hướng dẫn các bạn học lập trình PHP cơ bản thông qua việc hoàn thành dự án website giới thiệu sản phẩm.

Những nội dung tôi sẽ hướng dẫn các bạn bao gồm:

• Cài đặt và sử dụng web server.
• Xây dựng cấu trúc thư mục website.
• Xây dựng cấu trúc cơ sở dữ liệu (Còn gọi là database và viết tắt là DB).
• Sử dụng phpMyAdmin để quản lý cơ sở dữ liệu.
• Từng bước hoàn thành dự án website giới thiệu sản phẩm (Trang quản trị và trang người dùng) và qua đó các bạn sẻ được học các vấn đề liên quan tới lập trình PHP (Câu lệnh, biến, kiểu dữ liệu, toán tử, điều kiện, vòng lặp, hàm, MySQL và các vấn đề khác).

Các bạn lưu ý, với bài hướng dẫn này tôi chỉ hướng tới các bạn mới bắt đầu tìm hiểu về lập trình PHP ở mức cơ bản nhất chứ tôi không đi sâu vào các vấn đề nâng cao của PHP.

Trong quá trình theo dõi bài hướng dẫn các bạn có thể tham gia thảo luận và đóng góp ý kiến để bài viết ngày càng hoàn thiện hơn.

Hiện tại thì bài viết tôi đã trình bày đầy đủ tại Basic - Từng bước học lập trình PHP cơ bản qua dự án website giới thiệu sản phẩm, các bạn có thể tham khảo hoặc trao đổi tại đây.

Chân thành cảm ơn sự quan tâm của các bạn!

 

[filiallion]

PHẦN 1: WEB SERVER

Để ứng dụng web có thể chạy được trên trình duyệt web các bạn cần phải cài đặt một số thành phần sau:

- PHP: Trình biên dịch các file PHP do các bạn tạo ra.
- MySQL: Hệ quản trị cơ sở dữ liệu để lưu trữ dữ liệu website.
- Apache: Chương trình máy chủ HTTP giúp website hoạt động.

Tất cả các thành phần trên là yêu cầu tối thiểu để website hoạt động. Hiện nay, trên internet các thành phần trên đã được đóng gói thành một phần mềm duy nhất như: WampServer, Xampp, AppServ...

Đối với tôi, tôi sử dụng WampServer để phát triển ứng dụng web trên máy tính (Tạm gọi là máy local). Và lưu ý là WampServer chỉ hỗ trợ cho hệ điều hành Windows.

Để cài đặt WampServer các bạn thực hiện theo các bước sau:

1. Tải WampServer tại http://www.wampserver.com/en/#download-wrapper (Tùy theo phiên bản hệ điều hành 32 bits hay 64 bits).
2. Chạy file EXE các bạn tải về được để tiến hành cài đặt. Trong quá trình cài đặt WampServer các bạn giữ nguyên các thông số mặc định.
3. Sau khi cài đặt xong, các bạn sẻ thấy một biểu tượng chương trình "start WampServer" trong Start menu.

Sau khi chạy chương trình WampServer các bạn sẻ thấy một biểu tượng ở khay hệ thống. Biểu tượng này có ba trạng thái tương ứng với ba màu như sau:

- Màu đỏ: Chương trình mới khởi động và chưa có thành phần nào được khởi động.
- Màu vàng: Có một hoặc nhiều thành phần chưa được khởi động.
- Màu xanh: Tất cả các thành phần đã được khởi động. Trạng thái này các bạn mới có thể sử dụng WampServer.

Sau khi cài đặt WampServer, các bạn sẻ thấy một thư mục quan trọng C:\wamp\www (Sau này gọi là thư mục www hoặc thư mục web root). Đây là thư mục chứa các file của website (PHP, HTML, CSS, JS, hình ảnh...). Phải đảm bảo 100% các file của ứng dụng web nằm trong thư mục www.

Bây giờ để kiểm tra xem WampServer có hoạt động không các bạn mở trình duyệt web (Firefox, Chrome, IE...) lên và truy cập địa chỉ localhost (Đối với Windows 8 thì truy cập 127.0.0.1). Nếu các bạn thấy trang giao diện của WampServer thì tức là WampServer đã hoạt động tốt và các bạn có thể bắt đầu sử dụng WampServer để lập trình ứng dụng web của mình.

Để thuận tiện sau này, các bạn vào thư mục www xóa tất cả các file trong thư mục này (Thường chỉ có file index.php). Lưu ý, sau khi xóa tất cả các file trong thư mục www thì khi truy cập localhost các bạn sẻ không còn thấy trang giao diện WampServer nữa.

 

[filiallion]

PHẦN 2: CẤU TRÚC THƯ MỤC WEB

Trong ứng dụng web, việc bố trí cấu trúc thư mục web phần nào ảnh hưởng tới quá trình viết mã lệnh ứng dụng. Để cho cấu trúc thư mục web được rõ ràng, tường minh và quan trọng đó là khả năng mở rộng ứng dụng mà không làm thay đổi cấu trúc ban đầu thì các bạn cần phải xây dựng cho ứng dụng của mình một cấu trúc tốt trước khi bắt đầu viết mã lệnh đầu tiên.

Mỗi phong cách viết khác nhau có thể các bạn sẽ có những cấu trúc khác nhau. Vì vậy, tôi cũng không yêu cầu các bạn tuân theo cấu trúc của tôi đưa ra nhưng để tiện lợi trong quá trình theo dõi loạt bài viết này thì các bạn nên bố trí cấu trúc thư mục web như của tôi cho thuận tiện.

Cấu trúc thư mục web mà tôi đề nghị như sau:

admin
configs
extends
libraries
models
views
-----admin
-----front
templates
-----admin
-----front
userfiles

Trong đó:

• admin: Chứa các tập tin xử lý của trang quản trị.
• configs: Chứa các tập tin cấu hình website.
• extends: Chứa các thành phần mở rộng (Bộ soạn thảo...).
• libraries: Chứa thư viện cần thiết để lập trình.
• models: Chứa các tập tin xử lý tương tác với DB (Lấy dữ liệu, thêm mới, chỉnh sửa, xóa...).
• views: Chứa các tập tin giao diện HTML của website. Tôi chia thành hai nhóm là admin (Trang quản trị) và front (Trang người dùng).
• templates: Chứa các tập tin CSS, JS, hình ảnh... Tôi cũng chia làm hai nhóm là admin và front.
• userfiles: Chứa các tập tin do người dùng tải lên.

Mỗi trang của ứng dụng web tôi đã chia thành ba phần như sau:

• Trang xử lý: Chứa mã lệnh PHP xử lý các yêu cầu từ người dùng và trả kết quả lại cho người dùng.
• Model: Thành phần tương tác trực tiếp với DB. Mỗi bảng dữ liệu trong DB tôi sẽ có một tập tin tương ứng trùng tên với bảng dữ liệu đó và đặt trong thư mục models để dễ kiểm soát.
• View: Thành phần giao diện HTML của website. Thành phần này sẽ nhận kết quả trả lại từ trang xử lý để trình bày dữ liệu đó theo giao diện HTML đã thiết kế.

Với cấu trúc như trên, tôi đã tách tối đa phần mã lệnh PHP với mã lệnh HTML để giúp mã lệnh web trở nên trong sáng hơn, dễ bảo trì, nâng cấp hơn.