Để bắt đầu lập trình website wordpress, việc đầu tiên bạn cần làm là cài đặt XAMPP để tạo máy chủ ảo locahost trên máy tính cá nhân. Chỉ khi có localhost và phần mềm lập trình rồi thì bạn mới có thể bắt đầu viết code dễ dàng.
Trong bài viết này mình sẽ hướng dẫn chi tiết cài đặt XAMPP, cấu hình chuẩn và thiết lập tên miền ảo để bạn có thể dễ dàng theo dõi và thực hành lập trình trong các bài viết sau của mình.
Tải bản cài đặt XAMPP
Để tải bản cài đặt XAMPP, bạn click vào link sau để đến trang download của phần mềm apachefriends.org.
Tại đây bạn lựa chọn theo hệ điều hành máy tính của bạn là Windows, Mac hay Linux để tải xuống và cài đặt. Tuy nhiên, để lập trình thì mình khuyên bạn nên sử dụng phiên bản 7.4 thay vì phiên bản mới nhất 8x trở lên.
Các phiên bản php 8.x trở lên hay gặp các lỗi xung đột với các phiên bản wordpress và thông báo các lỗi khó chịu nên hầu hết các lập trình viên và quản lý máy chủ bây giờ đều sử dụng phiên bản 7.4.x vì tính ổn định của phiên bản này.
Mình chọn sử dụng phiên bản Xampp 7.4.33 vì bản này được cộng đồng coder nước ngoài dùng khá nhiều. Để tải được phiên bản này, bạn click vào nút More downloads khoanh đỏ ở trên, bạn sẽ được chuyển đến trang sau:
Bạn tiếp tục chọn theo phiên bản hệ điều hành của máy tính, mình chọn Windows và từ giờ các phần mềm của mình sẽ cài theo hệ điều hành Windows nhé, bạn lưu ý chọn đúng loại phù hợp với máy tính nếu không sẽ lỗi không cài đặt được.
Tại trang Parent folder, mình lựa chọn phiên bản 7.4.33 và sẽ được chuyển đến trang sau:
Tại đây mình chọn bản xampp-portable-windows-x64-7.4.33-0-VC15-installer.exe, các bạn nhớ bản cài đặt có đuôi .exe nhé. Sau 3s nó sẽ bắt đầu cho mình tải xuống, bạn chọn thư mục trong máy tính để lưu trữ lại.
Cài đặt Xampp trên máy tính
Bước 1: Sau khi tải về, bạn chỉ cần click đúp vào file .exe để cài đặt XAMPP. Các bạn không phải lo vấn đề lỗi gì với Win 10 hay Win 11 vì mình đã cài bản 7.4.33 cho cả hai hệ điều hành này và không gặp vấn đề gì. Ngay khi click đúp vào file cài đặt, bạn sẽ nhận được thông báo (UAC) sau:
Bước 2: Nếu bạn đang sử dụng quyền Administrator trên máy tính thì chỉ việc bấm OK để bỏ qua mà không cần quan tâm tới nó viết gì. Màn hình sau hiện ra, bạn chỉ cần ấn vào Next để tiếp tục:
Bước 3: Màn hình kế tiếp hiện ra để bạn lựa chọn các công cụ cần thiết cho công việc của mình, cứ tích chọn hết và bấn Next:
Bước 4: Bạn sẽ được chuyển đến thư mục chọn thư mục lưu trữ các files cài đặt của phần mềm XAMPP sẽ được Export ra. Mình tạo thư mục tên là xampp trên ổ D thay vì ổ C mặc định và chọn cài đặt vào thư mục trên ổ D. Việc này để tránh các sự cố như windows lỗi không mở được máy có thể làm mất Code và Database các dự án mà mình đã tạo.
Bước 5: Tiếp theo là màn hình chọn ngôn ngữ cho XAMPP Control Panel, ở đây mình chọn English mặc định và ấn Next.
Bước 6: Màn hình kế tiếp, bạn bỏ chọn Learn more about Bitnami for XAMPP như hình sau và tiếp tục ấn Next:
Bước 7: Ở bước cuối cùng của quá trình cài đặt XAMPP, bạn chỉ cần tích chọn khởi chạy locahost để bắt đầu “nghiên cứu” và hoàn tất quá trình cài đặt.
Khởi động XAMPP
Ngày khi cài đặt XAMPP xong, nếu bạn chọn khởi động ngay thì màn hình sau sẽ ngay lập tức hiện ra:
Bạn để ý đến 2 dòng là Apache và MySQL, cả 2 dòng này đều có nút Start, bạn chọn để khởi động 2 công cụ này lên. Đây là 2 thành phần quan trọng cấu thành máy chủ ảo localhost của bạn, bạn chỉ cần quan tâm đến 2 dòng này về sau. Nếu bạn truy cập vào đường dẫn http://localhost/ và hiện màn hình sau là bạn đã thành công:
Tuy nhiên, để có thể chạy các dự án thực tế, bạn cần phải cấu hình thêm cho bộ máy chủ ảo này một vài thứ nữa. Xem tiếp phần sau.
Cài đặt cấu hình XAMPP để chạy dự án thực tế
Bước 1: Cấu hình file php.ini
Ngay sau khi cài đặt XAMPP xong thì cần cấu hình file php.ini. Đây là file cấu hình số lượng file upload, thời gian upload 1 file, dung lượng ram ảo,… để chạy những dự án thực tế thì cần thông số lớn hơn, do đó bạn cần thay đổi cho phù hợp.
Bạn tìm file này theo đường dẫn: xampp\php\php.ini, mở nó lên bằng notepad hoặc notepad++, ấn Ctrl + F tìm đến các dòng sau:
post_max_size = 40M
upload_max_filesize=40M
Dòng này cấu hình dung lượng file tối đa mà bạn có thể upload lên, bạn có thể thay đổi từ 40M lên thành 256M hoặc 512M
max_execution_time=120
Bạn có thể đọc phần mô tả ngay bên dưới, dòng này quy định thời gian một truy vấn gửi đến và nhận phản hồi từ máy chủ, bạn có thể tăng lên thành 3000, thời gian này là giây (s).
; max_input_time
Dòng max_input_time này bạn phải bỏ dấu ; ở đầu đi, sau đó set giá trị là -1, tức là không giới hạn.
Sau khi thay đổi, các dòng trên sẽ là:
post_max_size = 256M
upload_max_filesize=256M
max_execution_time=3000
max_input_time=-1
Bạn ấn Ctrl + S lưu lại file này và khởi động lại máy chủ localhost bằng cách ấn vào 2 nút Stop trên XAMPP, sau đó ấn Start để khởi động lại.
Bước 2: Tạo tên miền ảo trên XAMPP
Bạn sẽ thấy các dự án tôi giới thiệu trên các videos sẽ có tên miền như sau:
Đây là tên miền ảo được tôi tạo ra chứ không phải tên miền thật, bạn gõ trên trình duyệt của bạn sẽ không truy cập được. Mục đích của việc tạo tên miền ảo này chỉ là để giúp dự án nhìn trông trực quan hơn thay vì sử dụng tên miền dạng localhost:80/ten-du-an.
2.1: Cấu hình trên file httpd-vhosts.conf
Để làm được việc này, bạn cần cấu hình cài đặt trong thư mục xampp, tìm đến file D:\xampp \ apache \ conf \ extra \ httpd-vhosts.conf (mở file này bằng notepad hoặc notepad++). Kéo xuống tận cùng bên dưới bạn sẽ thấy một đoạn mã đặt trong dấu # như sau:
Bạn lựa chọn một trong 2 đoạn, copy xuống bên dưới, ở đây mình chọn đoạn trên (bôi đỏ). Sửa các tên miền dummy-host2.example.com thành tên miền của bạn. Trông nó sẽ như này:
<VirtualHost *:80>
ServerAdmin webmaster@eshopper.vn
DocumentRoot "D:/xampp/htdocs/eshopper.theme"
ServerName eshopper.vn
ServerAlias www.eshopper.vn
ErrorLog "logs/eshopper.vn-error.log"
CustomLog "logs/eshopper.vn-access.log" common
</VirtualHost>
Trong đó, DocumentRoot là đường dẫn vật lý trỏ đến thư mục lưu trữ code của bạn trong thư mục xampp \ htdocs. ServerName và ServerAlias là tên miền mà bạn muốn đặt cho dự án này. Hai dòng còn lại bên dưới thêm nốt vào cho vui.
2.2: Trỏ IP trong file hosts của windows
Giống như tên miền thật, tên miền ảo cũng cần một IP trỏ về máy chủ (nơi lưu trữ code) để website có thể hoạt động. Máy chủ ở đấy chính là máy cá nhân của bạn đã được cài đặt XAMPP.
Do vậy bạn tìm đến file C:\Windows \ System32 \ drivers \ etc \ hosts (mở file hosts lên bằng notepad hoặc notepad++), thêm vào dòng như trong hình sau:
Trong đó IP 127.0.0.1 là IP máy cá nhân của bạn, eshopper.vn là tên miền ảo bạn tạo ra trong bước 1.
Quá trình tạo tên miền ảo đã hoàn tất, bạn khởi động lại localhost bằng cách ấn nút Stop > Start Apache và MySQL trên XAMPP.
2.3: Kiểm tra tên miền ảo
Để kiểm tra tên miền ảo đã hoạt động chưa, bạn vào thư mục dự án trong thư mục htdocs, mở notepad hoặc notepad++ lên và soạn nội dung như sau:
<!DOCTYPE html>
<html>
<body>
<p>Code theme website WordPress WooCommerce!</p>
</body>
</html>
Ấn Ctrl + S để lưu lại với tên index.html vào thư mục dự án của bạn. Cuối cùng, gõ tên miền lên trình duyệt để kiểm tra. Nếu màn hình của bạn hiện dòng chữ Code theme website WordPress WooCommerce! là bạn đã làm đúng. Ngược lại thì chia buồn bạn sẽ phải đọc lại và làm lại bước 1 – 2 ở trên.
Tạo Database cho dự án website
Trên màn hình phần mềm XAMPP, bạn ấn vào nút Admin bên cạnh MySQL hoặc truy cập http://localhost/phpmyadmin/ để vào trình quản lý cơ sở dữ liệu (database) MySQL.
Tổng kết
Trong bài viết này, mình đã chi tiết cho bạn cách tải bản XAMPP đúng chuẩn của các coder vẫn đang dùng, khởi tạo hosting và tên miền ảo, tạo database. Đây là tiền đề để bạn có thể bắt đầu lập trình WordPress.
Trong bài tiếp theo mình sẽ có bài viết riêng liệt kê các vấn đề gặp phải khi sử dụng XAMPP. Khi các bạn hỏi mình về các lỗi liên quan đến XAMPP thì mình sẽ cập nhật vào đó để giúp các bạn khác tiện theo dõi hơn. Ok, hẹn gặp lại bạn!