Hoàng Luyến

Administrator

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ợ.

[toc]

| Hướng dẫn

1. Tìm hiểu về Localhost

   1. 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.

   2. 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

   3. 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…

   4. 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

   5. 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: 
      http://localhost
      http://127.0.0.1
      http://tenmay (tenmay chính là tên máy tính của bạn khi cài đặt Window)

   6. 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
        

2. 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 localhost

   Bước 7: Khởi động localhost
   Vào ổ E:\xampp\xampp-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: http://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:\xampp\htdocs
   
   | Thực hiện tới bước thứ 8 này bạn đã cài đặt thành công rùi đó!

3. 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 http://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:\AppServ\www
   | 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 đó!

    

   ---

    

4. 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:

   1. 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:\AppServ\www đâ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:\xampp\htdocs
      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 đó

   2. 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:
      http://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”

   3. 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à http://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:\Windows\System32\drivers\etc 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

      1	127.0.0.1     w1.muahet.net

      
      Bước 5. Thêm tên miền vào Localhost (VirtualHost)
      Vào F:\xampp\htdocs tạo 1 thư mục có tên là w1.muahet.net
      
      Bước 6: Vào thư mục F:\xampp\apache\conf\extra -> Sửa file httpd-vhost.conf -> 

      Tìm:

      ##NameVirtualHost *:80

      1	##NameVirtualHost *:80

      Xóa 2 dấu ## cho thành

      NameVirtualHost *:80

      1	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>

      1 2 3 4 5

      <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 http://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.

   4. 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:\xampp\apache\conf -> Chọn httpd.conf -> Chuột phải sửa với Notepad  -> Tìm dòng 

      Listen 80

      1

      Listen 80

      Sửa lại thành

      Listen 8080

      1	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 http://localhost:8080 nếu chạy được là ok!

   5. 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—

Tác giả: Hoàng Luyến