Cách chạy web html trên localhost

Xampp là một server ảo chạy trên máy tính cá nhân thường được dùng để phát triển dự án. Trong bài này tôi chia sẻ đến bạn cách cài đặt nó và chạy dự án đầu tiên.

Xampp là gì?

Xampp là chương trình tạo máy chủ Web [Web Server] được tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin.

Ưu điểm của Xampp

  • Có chương trình quản lý rất tiện lợi, bật tắt bất kỳ lúc nào
  • Dễ dàng chạy dự án trên trình duyệt
  • Thao tác với CSDL thông qua phpmyadmin
  • Là một phần mềm được dân lập trình ứng dụng web thường sử dụng

Video hướng dẫn cài đặt Xampp

Để giúp bạn hình dung và thực hành thành công tôi đã ghi hình video, bạn cần xem và thực hành từng bước theo hướng dẫn bên dưới.

Tóm tắt các bước cài Xampp

Bước #1: Download Xampp

Link: //www.apachefriends.org/download.html

Bạn chú ý chọn phiên bản Xampp tương thích với hệ điều hành của bạn. Xampp hỗ trợ các hệ điều hành

Sau khi chọn xong bạn nhấn download để tải nó về máy.

Bước 2: Cài đặt Xampp

Bạn truy cập vào thư mục Download của máy tính và click vào file cài của xampp để bắt đầu cài đặt.

Tiến trình cài đặt bạn chỉ cần nhấn next và chạy đến khi nào Finish là ok.

Chú ý: Trong quá trình cài đặt có tùy chọn hiển thị xampp trên desktop bạn nên chọn nó. Để sau này muốn khởi động xampp thì có ngay biểu tượng ở màn hình để thao tác, đỡ phải tìm.

Bước 3: Hủy bỏ file mặc định trong thư mục htdocs

Sau khi cài đặt xong bạn vào ổ đĩa cài đặt chọn vào thư mục xampp. Tại đây bạn chọn vào thư mục htdocs. Đây là nơi chúng ta sẽ tiến hành lưu và phát triển các dự án.

Mặc định trong htdocs có rất nhiều file mặc định, bạn nên Ctrl + A và xóa tất cả đi. Sau đó tạo ra thư mục mới để lưu dự án của mình.

Ví dụ: Tôi tạo dự án unitop.vn trên xampp

xampp\ |---htdocs\ |---|---unitop.vn |---|---...

Bước 4: Khởi động server Xampp

Bạn bấm vào biểu tượng khởi động của Xampp sau đó nhấn vào Apache. Khi nó hiển thị lên màu xanh là ok.

Ở bước này nếu bạn khởi động Apache không thành công, xuất hiển cảnh báo đó thì nguyên nhân port 80 bị chiếm bởi các phần mềm khác.

Bạn xem chi tiết hướng dẫn đổi port xampp tại đây: Hướng dẫn đổi port xampp

Bước 5: Chạy dự án

Bạn tạo ra một dự án demo để chạy test xampp.

Bạn vào thư mục htdocs tạo thư mục

unitop.vn --index.html

Nội dung file index.html

Dự án đầu tiên

Xin chào, Dự án đang được chạy trên Xampp

Cuối cùng chạy dự án trên trình duyệt theo đường dẫn

//localhost/

Tại đây server sẽ load lên tất cả các dự án đang có, bạn cần chọn vào dự án đang xử lý là ok.

//localhost/unitop.vn

Tổng kết

Qua bài này tôi đã chỉ cho bạn cách cài đặt phần mềm server ảo xampp từng bước. Tôi tin rằng hướng dẫn bao gồm cả video và checklist từng bước sẽ giúp bạn cài đặt thành công một cách dễ dàng. Nỗ lực nhé!

Xin chào, sớm hẹn gặp lại!

Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx

Cài đặt Web Server trên localhost là cài dịch vụ Web Server trên chính máy tính của bạn hay một máy tính nào đó trong mạng nội bộ [LAN] làm máy chủ web, việc này rất cần thiết đối với một Web master do xuyên sửa code hay content cho trang web của mình. Bạn không thể tí tí lại vào Cpanel mà sửa được, việc này tiềm ẩn nhiều rủi ro.

Tốt nhất bạn nên setup Web Server trên máy cá nhân của mình để làm môi trường test, khi có nhu cầu chỉnh sửa hay cài cắm plugin nào đó bạn cứ triển khai trên localhost trước, nếu cảm thấy chạy mượt rồi thì hãy up lên VPS hay hosting như thế an toàn mà lại pro hơn nhiều.

Bạn có thể tham khảo các nhà cung cấp Cloud VPS tốt nhất hiện nay để triển khai web site mà mình đã sử dụng:

  • Hướng dẫn đăng ký VPS tại Linode.
  • Cách mua VPS giá rẻ trên DigitalOcean.

Trong khuôn khổ bài viết này mình sẽ hướng dẫn các bạn cấu hình Web Server để chạy các trang web viết bằng ngôn ngữ PHP có thể nói đây là ngôn ngữ phát triển web phố biến nhất hiện nay.

1. Cài đặt WebServer trên localhost

Trước đây để triển khai Webserver rất vất vả khi cấu hình Apache, PHP, MySQL, phpMyAdmin để chúng làm việc với nhau. Hiện tại có rất nhiều gói cài đặt đã tích hợp sẵn với nhau chỉ ấn Install chạy vèo vèo một lúc là xong như XAMPP, AppServ, WAMP …

Hôm nay mình sẽ hướng dẫn cài đặt AppServ. Tại sao dùng AppServ ? chỉ đơn giản là mình dùng quen thấy cũng ổn nên cứ thế dùng thôi.

Theo kinh nghiệm dùng Open Source mình hạn chế dùng bản “mới ra lò” cứ mấy bản cũ ổn định mà dùng, bạn download AppServ 2.5.10 về dùng cho chắc cú.

Sau khi tải xong chạy file appserv-win32-2.5.10 chọn tiếp “Run”.

Ấn “Next” để tiếp tục, bạn để giá trị mặc định rồi “Next” tiếp, chương trình sẽ tự động cài Apache HTTP Server, MySQL database, PHP, phpMyAdmin.

  • Server Name: nhập vào localhost.
  • Administrator’s Email Address: nhập vào  hay mail bất kỳ tùy bạn.
  • Apache HTTP Port: nhập vào cổng mặc định webserver là 80.

Đặt password cho “Root”, đây là User có quyền cao nhất quản lý cơ sở dữ liệu MySQL, do chạy trên máy localhost cứ đặt mật khẩu đơn giản cho tiện thao tác ấn tiếp “Install”

Apache và MySQL sẽ tự kích hoạt, chọn “Finish” hoàn tất quá trình cài đặt.

Kết thúc quá trình cài đặt, mở trình duyệt nhập //localhost nếu xuất hiện như hình bên dưới là thành công rồi.

2. Cài đặt Wordpress trên localhost

Cài đặt Web Server ok, giờ mình sẽ thử triển khai web site trên localhost coi mần sao. Mình sẽ dùng mã nguồn WordPress bản 3.8.1, các bạn có thể dùng một CMS khác như Joomla, Drupal, Magento … hoặc web bạn tự code.

Trước tiên bạn download Wordpress về sau đó giải nén vào thư mục C:\AppServ\www đây là thưc mục home của WebServer có trang web nào cứ tống vào đó là nó chạy thôi.

Chỗ này mình giải thích một chút về cách viết URL C:\AppServ\www.

  • C:\AppServ\www là đường dẫn khi dùng Window Explorer duyệt thư mục. Nó tương đương với //localhost trên trình duyệt.
  • Để chạy website trong thư mục C:\AppServ\www\wordpress3.8.1 thì trên trình duyệt URL sẽ là //localhost/wordpress3.8.1.

Tham khảo: Cách chỉnh sửa file host trên máy tính để có URL thân thiện hơn.

Tiếp theo,  tạo cơ sở dữ liệu bằng phpMyAdmin cho trang web. Trên trình duyệt gõ vào “localhost/phpmyadmin” để đăng nhập phpMyAdmin với tài khoản “root” vừa tạo ở bước trên.

Tạo một CSDL mới có tên wordpress381 ấn “Create”.

CSDL mới được tạo thành công.

Trên trình duyệt gõ vào “localhost/wordpress3.8.1” để cài wordpress, ấn chọn “Create a Configuration File -> Let’s go!”.

Chọn tiếp “Let’s go!”, đến phần khai báo CSDL bạn nhập vào thông tin đã được tạo ở bước trên, ấn “Submit”.

Tiếp tục chọn “Run the install” cửa sổ mới hiện ra yêu cầu bạn khởi tạo thông tin quản lý “Site Title”, “Username”, “Password, twice”, “Your E-mail”. Xong đâu đây chọn “Install WordPress”

Chú ý: nếu Password, twice không được thiết đặt, wordpress sẽ tự sinh ra một mật khẩu ngẫu nhiên, lần đầu tiên đăng nhập bạn nhớ đổi mật khẩu này đi.

Cửa sổ thông báo cài đặt thành công hiện ra, bạn nhớ lưu lại thông tin tài khoản quản trị website chọn -> “Login”.

Trên web browser gõ vào “localhost/wordpress3.8.1” thấy giao diện như bên dưới là thành công rồi.

3. Kết bài

Các bạn thấy đấy việc cấu hình WebServer chạy code PHP khá là đơn giản chì vài cái ấn chuột là xong. Bạn có thể dùng ngay WordPress tự xây dựng cho mình một site xem sao, cộng đồng Wordpress trên thế giới rất hùng hậu bạn dễ dàng tìm được tài liệu hướng dẫn và kiếm cho mình một giao diện ưng ý, blog của mình cũng đang dùng Wordpress đó.

  • Hướng dẫn LAMP tạo Web Server Apache
  • Hướng dẫn LEMP tạo Web Server Nginx

Trên đây một số hướng dẫn tạo Web Server trên Linux bạn tham khảo để biết cài đặt VPS hay Server trên hệ thống thật, cảm ơn các bạn đã theo dõi !

Video liên quan

Chủ Đề