Bài 4: Hướng dẫn cài đặt localhost với XAMPP và AppServ
Bài học này mình sẽ hướng dẫn các bạn cài đặt localhost trên máy tính với 2 phần mềm Xampp hoặc AppServ. Hãy bắt đầu bài học tại đây:
Thường thì các lập trình viên sử dụng 2 phần mềm chính là Xampp và AppServ cài đặt cho localhost, bạn có thể sử dụng phần mềm nào cũng được. Tuy nhiên để giúp bạn đọc có thêm kinh nghiệm trong case study hướng dẫn học WordPress kỳ này mình sẽ giới thiệu xoay quanh 2 phần mềm để bạn có thể tham khảo.
Thông báo: Từ ngày 25/06 Hoàng Luyến sẽ hướng dẫn bạn đọc cài đặt localhost miễn phí vào 2 ngày T7 và CN, bạn chỉ cần Add nick Skype hoangluyenfan với nội dung “Hỗ trợ cài đặt Localhost” để được hỗ trợ.
| Hướng dẫn
Tìm hiểu về Localhost
Localhost là gì?
Là một máy chủ được vận hành trực tiếp trên máy tính của bạn có tính năng tương đương như trên máy chủ thật. Để hỗ trợ lập trình viên có thể lập trình ngay trên máy tính nên tốc độ xử lý công việc sẽ nhanh hơn.
Cài localhost
Bạn chỉ có thể cài 1 trong 2 phần mềm trên nếu lập trình web bằng PHP vì cài 2 phần mềm hệ thống sẽ bị xung đột
Localhost hỗ trợ ngôn ngữ lập trình nào?
Localhost hỗ trợ nhiều ngôn ngữ lập trình bao gồm cả PHP, ASP, ASPX, JAVA…
Localhost gồm những thành phần nào?
Localhost gồm các thành phần chính như: Database (PhpMyAdmin), Root (www), Webserver tên Apache
Localhost chạy bằng tên miền nào?
Localhost thường chạy mặc định với những tên miền chính gồm:
https://localhost
https://127.0.0.1
https://tenmay (tenmay chính là tên máy tính của bạn khi cài đặt Window)Lưu ý khi cài đặt Localhost với phần mềm Xampp
Lưu ý này mình đưa ra để các bạn thực hiện sau khi việc cài đặt XAMPP đã xong, bạn không nên quan tâm tới các lưu ý này khi việc cài đặt chưa được thực hiện.
- Nếu bạn dùng Skype
Nếu máy tính của bạn đang cài đặt phần mềm Skype thì Localhost sẽ không hoạt động được do Skype đã chiếm quyền sử dụng cổng mạng 80, đây là cổng mặc định của webserver. Có 2 cách bạn xử lý tình huống này:
Cách 1: Đơn giản nhất, tắt skype bằng cách vào khay đồng hồ phía cuối màn hình chuột phải vào Skype chọn Exit là xong!
Cách 2: Đổi port mặc định của Skype
Do đó, bạn hãy mở Skype -> Tools -> Options -> Advanced -> Connection và bỏ chọn phần “Use port 80 and 443…..” rồi nhập một cổng bất kỳ để Skype sử dụng -> Chọn Save
Sau khi bạn cấu hình xong bạn hãy khởi động lại máy tính để hệ thống làm mới port. Tắt tường lửa Window
Máy của bạn bật tường lửa Windows hoặc từ một phần mềm diệt virut thì hãy tắt nó đi vì có thể nó sẽ chặn port 80 hoặc một số ứng dụng của Webserver.
Tắt User Account Control trên Windows
Thường thì khi sử dụng Windows hệ thống sẽ bật chức năng User Account Control bạn hãy tắt nó đi để không bị giới hạn quyền. Xem hướng dẫn cách tắt trên Google
- Nếu bạn dùng Skype
Hướng dẫn cài đặt Localhost với Xampp – Xem video
Xem video hướng dẫn cài đặt XAMPP hoặc xem hướng dẫn theo hình ảnh dưới đây:
Lời khuyên: Mình khuyên bạn nên sử dụng Xampp vì phần mềm này luôn có bản cập nhật PHP mới nhất nên khi bạn lập trình có thể phát hiện ra lỗi dễ dàng hoặc trong quá trình làm việc mình thấy nó rất dễ sử dụng hỗ trợ tốt hệ điều hành như Windows, Mac, Linux.
Trong bài này mình sẽ hướng dẫn bạn cài đặt trên Window (trên Mac và Linux sẽ tương tự như thế này nhé)
Bước 1: Download phần mềm XAMPP tại địa chỉ https://www.apachefriends.org/download.html và chọn phiên bản XAMPP phù hợp với hệ điều hành của máy tính bạn đang sử dụng. Bạn nên chọn phiên bản PHP 5.5.19, lưu ý là XAMPP chỉ có phiên bản cho hệ điều hành 32bit nhưng 64bit vẫn hoạt động bình thường (như hình minh họa dưới đây).
Bước 2: Cài đặt mở file xampp-win32-5.5.19-0-VC11-installer.exe vừa tải về để cài đặt -> Chọn Next
Bước 3: Ở phần chọn Components như hình dưới vì không phải cái nào trong gói XAMPP cũng cần thiết -> Chọn Next .
Bước 4: Chọn thư mục cài đặt Xamp
Mặc định khi cài đặt hệ thống sẽ chọn ổ c:xampp
Theo mình bạn nên chuyển sang ổ D,E hoặc các ổ không phải ổ cài Win sẽ an toàn hơn (chọn ổ khác) như hình minh họa dưới đây và tạo thư mục xampp -> Chọn Next
Bước 5: Bỏ tích chọn Learn more about Bitnami for XAMPP -> Chọn Next
Bước 6: Tiến tình cài đặt
…Chờ hệ thống cài đặt xong bạn hãy khởi động lại máy tính để hệ thống có thể làm mới thông tin và start localhostBước 7: Khởi động localhost
Vào ổ E:xamppxampp-panel.exe để mở bảng điều khiển của XAMPP hoặc vào Start -> All Programs -> XAMPP -> Mở Xampp Control Panel xuất hiện cửa sổ như hình dưới đây.
Trong phần Actions -> Nhấp chuột vào Start với Apache và MySQL
Với Win 7, Win 8 và các Window cao hơn thường sẽ yêu cầu cho phép Public NetWorks cho Firewall bằng cách bạn nhấp chuột và0 Allow Access với mysqld.exe và httpd.exe như hình dưới đây:Kết quả: Nếu hai ứng dụng chuyển sang màu xanh thì việc khởi động đã thành công, còn ngược lại nếu không thành công thì bạn nên xem phần chú ý trong mục I.
Bước 8: Test Localhost trên trình duyệt
Mở trình duyệt (có thể dùng bất kỳ trình duyệt nào chrome, firefox, IE…) với url: https://localhost
Chọn ngôn ngữ English phía bên dưới để truy cập vào trang quản lý localhost để thuận tiện thao tác hơn
Để xem hệ thống bạn vào thư mục như mình hướng dẫn thì vào E:xampphtdocs
| Thực hiện tới bước thứ 8 này bạn đã cài đặt thành công rùi đó!Hướng dẫn cài đặt Localhost với AppServ – Xem video
Xem video hướng dẫn cài đặt Appserv hoặc xem hướng dẫn theo hình ảnh dưới đây:
Bước 1: Download phần mềm appserv-win32-2.5.10 (16MB) tại đây
Bước 2: Giải nén và mở file appserv-win32-2.5.10.exe -> Chọn Next
Bước 3: Đồng ý với các điều khoản sử dụng phần mềm -> Chọn I Agree
Bước 4: Chọn thư mục lưu trữ Server -> Chọn Next
Bước 5: Chọn các Component cần thiết, tích chọn đủ 4 ứng dụng như hình dưới đây -> Chọn Next
Bước 6: Điền thông tin Appache HTTP Server Infomation
Server name: localhost
Administrator’s Email Address: admin@localhost.com (email này không quan trọng)
-> Chọn Next
Bước 7: Điền thông tin My SQL Server Configuration:
Enter root password: root
Re-enter root password: root (có thể nhập hoặc không)
-> Chọn Install (Hệ thống bắt đầu cài đặt bạn chờ khoảng 2-3 phút để hệ thống cài đặt)
Bước 8: chờ sau khi cài đặt xong bạn khởi động lại máy tính để hệ thống start localhost
Bước 9: Mở trình duyệt Chrome, IE hoặc Firefox chạy url https://localhost nếu hệ thống cho kết quả như hình dưới đây là OK
Nếu bạn muốn tìm thư mục root, như hướng dẫn của mình vào Explorer truy cập F:AppServwww
| Thực hiện tới bước thứ 9 cài đặt AppServ này bạn đã cài đặt thành công rùi đó!Hướng dẫn làm việc với Localhost
Bạn có thể tìm hiểu thêm các bài hướng dẫn sau:
Làm việc với thư mục Root Localhost
Phần mềm AppServ và Xampp đường dẫn thư mục root hoàn toàn khác nhau, cụ thể:
+ Phần mềm AppServ: thư mục root là: F:AppServwww đây là thư mục chính để chạy website.
+ Phần mềm Xampp: Bạn vào thư mục root theo đường dẫn sau F:xampphtdocs
Chú ý: Ổ F theo hướng dẫn của mình, bạn chọn ổ nào khi cài đặt thì nó sẽ có đường dẫn bắt đầu từ ổ đĩa đóHướng dẫn tạo CSDL MySQL trên Localhost – Xem video
Bước 1: Truy cập hệ thống PhpMyAdmin
Với AppServ và Xampp các bạn đều chạy trên trình duyệt với đường dẫn sau:
https://localhost/phpmyadmin
Chú ý :
Với localhost của AppServ thì bạn đăng nhập theo thông số sau:
+ Tên đăng nhập: root
+ Mật khẩu: root
Còn với Xampp thì không phải đăng nhập.
Bước 2: Đổi ngôn ngữ từ tiếng pháp sang tiếng Anh (nếu bạn truy cập localhost lần đầu tiên hoặc mặc định ngôn ngữ là tiếng pháp)
Bước 3: Nhập tên Database -> Chọn Collagent là utf8_unicode_ci (cuối cùng) -> Chọn Create
Tạo xong Database 2015_bkasoft thì mặc định thông tin tài khoản truy cập là:
- Database Host: localhost
- Database user: root
- Database password: trống
- Database name: 2015_bkasoft
Chi tiết cách cấu hình kết nối WordPress với Database mình sẽ hướng dẫn chi tiết trong “Bài 6: hướng dẫn cài đặt WordPress trên Localhost”
Thêm tên miền ảo vào Localhost trong XAMPP – Xem video
Mặc định localhost sẽ chạy với tên miền là https://localhost, tuy nhiên bạn có thể chạy thành 1 domain ảo khác hoặc bạn có thể thêm các domain ảo (ví dụ như m.bkasoft.net):
Bước 1. Thiết lập tên miền ảo trỏ về IP 127.0.0.1
Mặc định localhost đã trỏ về IP 127.0.0.1, vì vậy tên miền mới chạy trên localhost bạn cũng phải cấu hình trỏ về IP đó bằng cách mở thư mục C:WindowsSystem32driversetc nhấp chuột vào hosts chọn Properties
Bước 2: Cửa sổ mới mở ra chọn tab Security -> SYSTEM -> Edit như ảnh minh họa.
Bước 3: Chọn User (tên máy) -> Allow (chọn full quyền) -> Chọn Apply
Bước 4: Sửa file Hosts với Notepad hoặc phần mềm sửa code > Thêm đoạn code phía dưới giống hình ảnh minh họa chỗ trỏ ip > Ctrl + S (lưu lại)127.0.0.1 w1.muahet.net
Bước 5. Thêm tên miền vào Localhost (VirtualHost)
Vào F:xampphtdocs tạo 1 thư mục có tên là w1.muahet.net
Bước 6: Vào thư mục F:xamppapacheconfextra -> Sửa file httpd-vhost.conf ->Tìm:
##NameVirtualHost *:80
Xóa 2 dấu ## cho thành
NameVirtualHost *:80
Và thêm đoạn code này vào file:
<VirtualHost *:80> ServerAdmin contact@bkasoft.net DocumentRoot "F:/xampp/htdocs/w1.muahet.net" ServerName w1.muahet.net</VirtualHost>
»Chú ý : DocumentRoot bạn phải đổi ổ F thành ổ mà bạn cài đặt Xampp. Sau đó, bạn lưu lại để hoàn thành.
Bước 7: Test xem đã thành công chưa?
Bạn mở Xampp và Stop lại Apache sau đó Start lại mục đích để Xampp nhận tên miền mới w1.muahet.net. Tiếp theo truy cập https://w1.muahet.net nếu nó chạy được như hình dưới là OK!
Chú ý: Chỉ có Xampp mới có nhiều tên miền ảo chạy cùng 1 lúc, điều này rất tốt nếu bạn thiết kế nhiều site cùng một dự án.
Cách đổi cổng mạng cho Localhost
Mặc định Localhost sẽ sử dụng cổng 80, bạn muốn chuyển sang cổng 8080 thực hiện theo hướng dẫn sau:
F:xamppapacheconf -> Chọn httpd.conf -> Chuột phải sửa với Notepad -> Tìm dòngListen 80
Sửa lại thành
Listen 8080
-> Save -> mở Xampp Panel -> Stop cái Apache và Start lại -> Mở trình duyệt chạy thử với port mới https://localhost:8080 nếu chạy được là ok!
Một số chú ý khi sử dụng localhost
+ Localhost có thể xem được trên mạng ngang hàng (sử dụng dây) nếu dùng Wifi thì không được nhé.
+ Web trên localhost không gửi cho người ngoài mạng tức là gửi cho bạn bè ở điểm truy cập internet khác.
+ Web trên localhost sau khi làm xong bạn hoàn toàn có thể chuyển lên Hosting hoặc Server.
+ Web trên localhost không bị hack bởi các lỗi SQL Injection và các loại hack local phổ biến.
Lời kết: Hy vọng bài hướng dẫn này sẽ giúp bạn khi học WordPress, học php hay học lập trình web sẽ đơn giản hơn với bạn. Nếu bạn có thắc mắc về bài viết này hãy gửi câu hỏi theo bình luận dưới đây nhé!
Bài 4: Hướng dẫn cài đặt localhost với XAMPP và AppServ
( Case Study hướng dẫn sử dụng WordPress )
—oOo—
| « Bài 3: Chuẩn bị | Học WordPress | Bài 5: Phân biệt wordpress.org và wordpress.com » |
Tác giả: Hoàng Luyến
