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

GIỚI THIỆU (PHẦN 1)

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.

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

WEB SERVER (PHẦN 2)

Để ứ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 wampserver[dot]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\"3 chữ w" (Sau này gọi là thư mục "3 chữ w" 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 "3 chữ w".

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 "3 chữ w" xóa tất cả các file trong thư mục này (Thường chỉ có file index[dot]php). Lưu ý, sau khi xóa tất cả các file trong thư mục "3 chữ w" thì khi truy cập localhost các bạn sẻ không còn thấy trang giao diện WampServer nữa.

PS: Vì tôi chưa được phép đăng liên kết nên chổ "3 chữ w" các bạn thay lại tương ứng.

Bác có yahoo hay skype, fb k ? e có chút " lỗ hổng " muốn giao lưu và nhờ bác giúp thêm Tks bác

Bạn vào link Google+ của tôi và add friend rồi trao đổi qua Hangout nha bạn.

Link Google+: plus[dot]google[dot]com/103116221369826139041 (Thay [dot] bằng dấu chấm vì tôi chưa được phép đăng link)

CẤU TRÚC THƯ MỤC WEBSITE (PHẦN 3)

Trong ứng dụng web, việc bố trí cấu trúc thư mục website 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 website đượ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 website như của tôi cho thuận tiện.

Cấu trúc thư mục website mà tôi đưa ra như sau:

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

Trong đó:

- admin: Chứa các file xử lý của trang quản trị.
- configs: Chứa các file cấu hình website.
- extends: Chứa các thành phần mở rộng (Editor, player...).
- libraries: Chứa thư viện cần thiết để lập trình.
- models: Chứa các file 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 file 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 file CSS, JS, hình ảnh... Tôi cũng chia làm hai nhóm là admin và front.
- userfiles: Chứa các file 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 file tương ứng trùng tên với bảng dữ liệu đó và đặt trong thư mục models để người lập trình 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 website trở nên trong sáng hơn, dễ bảo trì, nâng cấp hơn.

CẤU TRÚC DB (PHẦN 4)

Dự án website mà tôi hướng dẫn để làm ví dụ cho các bạn học lập trình PHP cơ bản được thiết kế gồm các thành phần sau:

Phần quản trị (Tôi gọi là admin):

- Đăng nhập, đăng xuất.
- Quản lý thành viên (Danh sách, thêm mới, chỉnh sửa, xóa).
- Quản lý danh mục sản phẩm (Danh sách, thêm mới, chỉnh sửa, xóa).
- Quản lý sản phẩm (Danh sách, thêm mới, chỉnh sửa, xóa).

Phần người dùng (Tôi gọi là front):

- Trang chủ (Hiển thị những sản phẩm mới nhất).
- Trang danh sách sản phẩm (Danh sách tất cả sản phẩm, danh sách các sản phẩm theo danh mục).
- Trang chi tiết sản phẩm.
- Và một số thành phần phụ trên website (Danh mục).

Với website được thiết kế như trên, cấu trúc DB tôi sẽ thiết kế đơn giản như sau:

Bảng thành viên (Đặt tên là tbl_user):

- user_id: Khóa chính, tăng tự động (Kiểu int, độ dài 11).
- username: Tài khoản (Kiểu varchar, độ dài 32).
- password: Mật khẩu (Kiểu varchar, độ dài 32).
- fullname: Họ tên (Kiểu varchar, độ dài 100).
- email: Email (Kiểu varchar, độ dài 100).
- status: Trạng thái (Kiểu tinyint, độ dài 1).
- created: Ngày giờ thêm mới (Kiểu datetime).
- modified: Ngày giờ chỉnh sửa (Kiểu datetime).

Bảng danh mục sản phẩm (Đặt tên là tbl_category):

- category_id: Khóa chính, tăng tự động (Kiểu int, độ dài 11).
- name: Tên danh mục (Kiểu varchar, độ dài 255).
- status: Trạng thái (Kiểu tinyint, độ dài 1).
- created: Ngày giờ thêm mới (Kiểu datetime).
- modified: Ngày giờ chỉnh sửa (Kiểu datetime).

Bảng sản phẩm (Đặt tên là tbl_product):

- product_id: Khóa chính, tăng tự động (Kiểu int, độ dài 11).
- category_id: ID danh mục (Kiểu int, độ dài 11).
- name: Tên sản phẩm (Kiểu varchar, độ dài 255).
- price: Giá bán (Kiểu int, độ dài 11).
- detail: Chi tiết (Kiểu text).
- image: Hình ảnh (Kiểu varchar, độ dài 255).
- status: Trạng thái (Kiểu tinyint, độ dài 1).
- created: Ngày giờ thêm mới (Kiểu datetime).
- modified: Ngày giờ chỉnh sửa (Kiểu datetime).

Nếu các bạn muốn thêm thông tin lưu trữ trong DB thì các bạn có thể tự thêm vào và tôi sẽ hỗ trợ các bạn.

QUẢN LÝ DB VỚI PHPMYADMIN (PHẦN 5)

Để quản lý DB (Tạo mới, chỉnh sửa, xóa...) tôi thường sử dụng một ứng dụng mã nguồn mở có tên phpMyAdmin. Trong bộ cài đặt WampServer thì phpMyAdmin đã được tích hợp sẵn. Để sử dụng phpMyAdmin quản lý DB, các bạn thực hiện theo một số hướng dẫn sau (Tôi sử dụng phiên bản phpMyAdmin 4.1.14):

Truy cập phpMyAdmin tích hợp sẵn trong WampServer:

- Khởi động WampServer.
- Mở trình duyệt web và truy cập địa chỉ localhost/phpmyadmin. Nếu xuất hiện giao diện phpMyAdmin trên trình duyệt thì bạn đã truy cập thành công ứng dụng phpMyAdmin.

Tạo mới, xóa DB:

* Tạo mới:

- Nhấp tab "Databases" để mở giao diện tạo mới DB.
- Ở khu vực "Create database" nhập tên DB ở trường "Database name", chọn collation ở danh sách "Collation" (Thường thì chọn là "utf8_general_ci").
- Nhấp nút "Create" để tạo mới DB.
- DB được tạo mới sẽ xuất hiện trong danh sách ở khung bên trái.

* Xóa:

- Tại giao diện danh sách các DB, chọn các DB cần xóa.
- Nhấp chọn "Drop" để xóa các DB đã được chọn.

Tạo mới, chỉnh sửa, xóa bảng dữ liệu, trường dữ liệu trong DB:

* Tạo mới:

- Chọn DB cần tương tác bằng cách nhấp vào tên DB trong danh sách ở khung bên trái.
- Tại tab "Structure", ở khu vực "Create table" các bạn nhập tên bảng dữ liệu vào trường "Name", số lượng các trường dữ liệu của bảng ở trường "Number of columns".
- Nhấp nút "Go".
- Ở giao diện khai báo thông tin các trường dữ liệu của bảng, các bạn khai báo các thông tin như tên trường dữ liệu (Cột "Name"), kiểu dữ liệu (Cột "Type"), độ dài (Cột "Length/Values"), chọn khóa chính (Cột "Index", chọn "PRIMARY"), tăng tự động (Check chọn cột "A_I").
- Nhấp nút "Save" để tạo bảng dữ liệu với các trường dữ liệu đã khai báo.

* Chỉnh sửa, xóa bảng dữ liệu, trường dữ liệu:

- Để chỉnh sửa bảng dữ liệu bạn nhấp vào "Structure" của bảng dữ liệu đó rồi vào tab "Operations" để chỉnh sửa.
- Để xóa bảng dữ liệu bạn chỉ cần chọn bảng dữ liệu cần xóa và chọn "Drop" ở danh sách "With selected".
- Để chỉnh sửa hoặc xóa trường dữ liệu của bảng, bạn cũng vào "Structure" của bảng dữ liệu đó vào lựa chọn các tác vụ chỉnh sửa hoặc xóa trường dữ liệu bạn muốn.

Để tìm hiểu chi tiết hơn về cách sử dụng phpMyAdmin, các bạn có thể truy cập liên kết sau: docs[dot]phpmyadmin[dot]net/en/latest.

THÔNG TIN CẤU HÌNH WEBSITE (PHẦN 6)

Kể từ phần này tôi bắt đầu hướng dẫn các bạn từng bước hoàn thành dự án website giới thiệu sản phẩm và qua đó tôi sẽ hướng dẫn các bạn nắm rõ các kiến thức về lập trình PHP cơ bản.

Một điều quan trọng tôi cần lưu ý với các bạn là trong quá trình lập trình thì tôi sẽ đưa ra nhiều khối lệnh và tôi sẽ lựa chọn ra một số kiến thức trong khối lệnh đó để trình bày, giải thích cho các bạn nắm kiến thức lập trình PHP. Những kiến thức mới nhưng tôi không hướng dẫn, giải thích là do những kiến thức đó chưa tới lúc phải truyền đạt cho các bạn biết và mặc nhiên các bạn chấp nhận viết mã lệnh giống như tôi đưa ra. Tất nhiên những kiến thức mới đó tôi sẽ trình bày, giải thích cho các bạn ở những phần sau.

Những kiến thức tôi đề cập trong phần này gồm:

- File PHP.
- Câu lệnh PHP.
- Hằng.
- Ghi chú.

Và để bắt đầu lập trình website các bạn cần khai báo thông tin cấu hình website (Thông tin cấu hình DB và một số thông tin cần thiết khác). Các thông tin cấu hình được khai báo trong file PHP cấu hình (Tôi gọi là file config[dot]php) đặt trong thư mục configs của website.

Nội dung file configs/config[dot]php như sau:

<?php
//Thông tin website
define('SITE_URL', 'localhost/');//Bạn thêm "hắc tê tê pê... giúp"
//Thông tin cấu hình DB
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'php_1');
?>

* File PHP:

Để viết lệnh PHP các bạn cần phải viết mã lệnh PHP trong file có phần mở rộng là "[dot]php". Ví dụ như file config[dot]php tôi vừa tạo.

Lưu ý khi các bạn đặt tên file cần tuân thủ theo qui tắc sau:

- Tên file đồng nhất tiếng Việt không dấu hoặc tiếng Anh.
- Chỉ sử dụng các số từ 0 đến 9, từ a đến z (Không phân biệt hoa, thường), dấu gạch dưới "_", dấu gạch giữa "-". Như vậy, khoảng trắng không được phép dùng để đặt tên file.

* Câu lệnh PHP:

Trong khối lệnh trên, toàn bộ các câu lệnh PHP đều được đặt trong cặp ký hiệu bắt đầu là <?php và kết thúc là ký hiệu ?>. Cặp ký hiệu này để khai báo cho trình PHP biết để biên dịch các câu lệnh bên trong.

Mỗi câu lệnh được viết trên một hàng và kết thúc câu lệnh là dấu chấm phẩy ";".

* Hằng:

Ở đây, tôi đã khai báo 05 hằng gồm:

- SITE_URL: Địa chỉ liên kết tuyệt đối tới website.
- DB_SERVER: Tên server chạy DB (Mặc định là localhost).
- DB_USERNAME: Tài khoản kết nối DB (Đối với ứng dụng WampServer thì tài khoản này mặc định là root).
- DB_PASSWORD: Mật khẩu kết nối DB (Đối với ứng dụng WampServer thì mật khẩu mặc định là rỗng).
- DB_DATABASE: Tên DB mà các bạn khởi tạo (Tôi đặt tên là php_1).

Như vậy, để định nghĩa một hằng các bạn sử dụng hàm (Hàm là gì tôi sẽ giải thích ở những phần sau) define. Hàm define có hai tham số (Tham số cũng sẽ được giải thích ở những phần sau):

- Tham số đầu tiên là tên hằng (Ví dụ SITE_URL, DB_SERVER...) được viết toàn bộ bằng chữ in hoa.
- Tham số thứ hai là giá trị của hằng (Ví dụ localhost...).

Khi định nghĩa hằng, các bạn lưu ý là không thể định nghĩa một hằng hai lần (Tức hằng là duy nhất).

Để sử dụng hằng đã được định nghĩa, các bạn chỉ việc gọi tên là được (Ví dụ là SITE_URL, DB_SERVER...).

* Ghi chú:

Trong đoạn lệnh trên, các bạn còn thấy hai dòng bắt đầu bằng dấu "//". Đây là hai dòng ghi chú giúp nhắc nhở cho người lập trình ghi nhớ chứ trình PHP không biên dịch hai dòng này và hai dòng này cũng không ảnh hưởng hay gây ra lỗi gì cho khối lệnh PHP.

Để ghi chú các bạn có nhiều cách như sau:

- Để ghi chú trên một dòng, các bạn sử dụng ký hiệu "//".
- Để ghi chú trên nhiều dòng, các bạn sử dụng ký hiệu /**/.

Ví dụ:

//Ghi chú một dòng
/*
Ghi chú dòng 1
Ghi chú dòng 2
*/

Qua bài này, hi vọng các bạn nắm được những câu lệnh PHP đầu tiên.

KẾT NỐI DB (PHẦN 7)

Nội dung kiến thức phần này gồm:

- Liên kết file (Require, include).
- Biến.
- Kiểu dữ liệu.

Website giới thiệu sản phẩm là một website động (Có lưu trữ dữ liệu trong DB) nên để PHP có thể kết nối, tương tác với DB (Ở đây là MySQL) thì PHP đã cũng cấp sẳn các hàm để làm việc đó.

Bây giờ, các bạn tạo một file dùng để viết mã lệnh PHP kết nối tới DB (Tôi gọi là file connect[dot]php) trong thư mục libraries.

Nội dung file libraries/connect[dot]php như sau:

<?php
//Require
require 'configs/config[dot]php';

//Kết nối
$connect = mysql_pconnect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die('Not connected DB!');
$db = mysql_select_db(DB_DATABASE, $connect) or die('Not selected DB!');

//Yêu cầu lưu trữ UTF8 (Tiếng Việt)
mysql_query('SET NAMES UTF8', $connect);
?>

Khối lệnh trên dùng để thực hiện kết nối với MySQL. Trong đó:

- Hàm mysql_pconnect dùng để kết nối tới DB với ba tham số lần lượt là tên server chứa DB (Đã khai báo ở hằng DB_SERVER), tài khoản kết nối DB (Đã khai báo ở hằng DB_USERNAME) và mật khẩu kết nối DB (Đã khai báo ở hằng DB_PASSWORD). Nếu kết nối thành công thì PHP sẽ tiếp tục thực hiện các câu lệnh bên dưới, ngược lại nếu kết nối không thành công (Có thể thông tin khai báo bị sai) thì phần lệnh phía sau "die('Not connected DB!')" sẽ được thực thi in ra màn hình câu "Not connected DB!" và PHP sẽ dừng lại tại đây (Tức những câu lệnh bên dưới sẽ không được thực thi). Nếu kết nối thành công thì hàm mysql_pconnect sẽ trả về dữ liệu kết nối và gán vào biến $connect.
- Hàm mysql_select_db với hai tham số lần lượt là tên DB kết nối (Đã khai báo ở hằng DB_DATABASE) và dữ liệu kết nối DB (Biến $connect).
- Hàm mysql_query dùng để truy vấn câu lệnh SQL "SET NAMES UTF8" với mục đích yêu cầu MySQL lưu trữ dữ liệu theo kiểu UTF8 (Tức là lưu được tiếng Việt).

* Liên kết file (Require, include):

Phần trước, tôi có tạo một file config[dot]php để khai báo các thông tin cấu hình website. Ở file connect[dot]php này tôi cần sử dụng các thông tin đó dưới dạng các hằng đã được khai báo. Vì vậy, tôi cần liên kết với file config[dot]php đã tạo bằng lệnh require như trên.

Vậy, lệnh require các bạn có thể hiểu là dùng để liên kết một file PHP đã tồn tại vào một file PHP khác (Hoặc cũng có thể hiểu là với câu lệnh require như trên thì toàn bộ nội dung file configs/config[dot]php đã nằm ngay tại vị trí câu lệnh).

Ngoài lệnh require, chúng ta còn có một lệnh tương tự là require_once với cách sử dụng như require chỉ khác một điều là lệnh require_once có kiểm tra xem file được liên kết đã được liên kết trước đó chưa. Nếu file chưa được liên kết thì lệnh này sẽ liên kết mới, ngược lại thì lệnh này sẽ không liên kết file đó nữa.

Có ý nghĩa và tác dụng tương tự lệnh require, require_once tương ứng là lệnh include, include_once. Hai lệnh require và include (Tương tự là require_once và include_once) về cơ bản là giống nhau nhưng có một sự khác biệt nhỏ các bạn có thể tìm hiểu thêm ở liên kết php[dot]net/manual/en/function[dot]require[dot]php và php[dot]net/manual/en/function[dot]include[dot]php.

* Biến:

Ở khối lệnh trên tôi có sử dụng hai biến là $connect và $db. Như vậy, để tạo ra một biến trong PHP các bạn chỉ việc khai báo bằng cách đặt dấu "$" ngay đầu tên biến.

Một số lưu ý khi khao báo biến:

- Tên biến chỉ chấp nhận các số từ 0 đến 9, ký tự từ a đến z (Kể cả chữ in hoa) và dấu gạch dưới "_".
- Tên biến không được bắt đầu bằng số.
- Không đặt tên biến là $this vì biến $this là một biến đặc biệt mặc định của PHP.

Ví dụ một số cách đặt tên biến như sau:

$a;
$_a;
$a1;

Khi khai báo biến các bạn có thể gán giá trị cho biến bằng toán tử gán "=". Ví dụ:

$a = 1;
$b = 'Hello';

Các bạn có thể tìm hiểu thêm về biến trong PHP ở liên kết php[dot]net/manual/en/language[dot]variables[dot]php.

* Kiểu dữ liệu:

Kiểu dữ liệu trong PHP có thể được chia thành ba nhóm sau:

- Nhóm scalar (Vô hướng).
- Nhóm compound (Hỗn hợp).
- Nhóm special (Đặc biệt).

Nhóm scalar gồm:

- Boolean: Gồm hai giá trị là "true" và "false".
- Integer: Kiểu số nguyên.
- Float: Kiểu số thực.
- String: Kiểu chuổi.

Đối với kiểu chuổi (String) thì các bạn phải đặt trong dấu nháy đơn hoặc dấu nháy đôi. Dấu nháy đơn hay dấu nháy đôi cũng có một chút khác biệt (Các bạn có thể tìm hiểu thêm).

Nhóm compound gồm:

- Array: Mãng (Sẽ có một bài giải thích rõ kiểu mãng).
- Object: Đối tượng.

Nhóm special gồm:

- NULL: Kiểu null (Tức là không có gì hết. Lưu ý là khác với chuổi '').
- Resource: Kiểu tài nguyên do PHP tạo ra.

Các bạn có thể tìm hiểu thêm về kiểu dữ liệu trong PHP ở liên kết php[dot]net/manual/en/language[dot]types[dot]php.