<![CDATA[Cộng Đồng MyBB Việt Nam - Tutorials]]> https://congdong.mybb.vn/ Wed, 06 May 2026 03:23:26 +0000 MyBB <![CDATA[Đăng xuất chuyển hướng trở lại trang trước]]> https://congdong.mybb.vn/Thread-tutorial-dang-xuat-chuyen-huong-tro-lai-trang-truoc Mon, 04 Aug 2025 07:44:17 +0000 JLP423]]> https://congdong.mybb.vn/Thread-tutorial-dang-xuat-chuyen-huong-tro-lai-trang-truoc Mọi người vào tempalte header_welcomeblock_member
Code: 
href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"

và thay nó thành 
Code: 
href="#" data-logout-url="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"

sau đó thêm đoạn script này vào cuối trang
 
Code: 
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const logoutLink = document.querySelector(".logout-link");
    if (logoutLink) {
      logoutLink.addEventListener("click", function (e) {
        e.preventDefault();
        const logoutUrl = logoutLink.getAttribute("data-logout-url");

        // Save current page in session storage
        sessionStorage.setItem("afterLogoutRedirect", location.pathname + location.search);

        // Now go to the logout URL (MyBB handles this)
        window.location.href = logoutUrl;
      });
    }

    // After logout, if there's a redirect URL stored, go back to it
    const redirect = sessionStorage.getItem("afterLogoutRedirect");
    if (redirect && !document.referrer.includes("member.php")) {
      sessionStorage.removeItem("afterLogoutRedirect");
      // Delay slightly to make sure logout is complete
      setTimeout(() => {
        window.location.href = redirect;
      }, 100);
    }
  });
</script>
]]> Mọi người vào tempalte header_welcomeblock_member
Code: 
href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"

và thay nó thành 
Code: 
href="#" data-logout-url="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"

sau đó thêm đoạn script này vào cuối trang
 
Code: 
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const logoutLink = document.querySelector(".logout-link");
    if (logoutLink) {
      logoutLink.addEventListener("click", function (e) {
        e.preventDefault();
        const logoutUrl = logoutLink.getAttribute("data-logout-url");

        // Save current page in session storage
        sessionStorage.setItem("afterLogoutRedirect", location.pathname + location.search);

        // Now go to the logout URL (MyBB handles this)
        window.location.href = logoutUrl;
      });
    }

    // After logout, if there's a redirect URL stored, go back to it
    const redirect = sessionStorage.getItem("afterLogoutRedirect");
    if (redirect && !document.referrer.includes("member.php")) {
      sessionStorage.removeItem("afterLogoutRedirect");
      // Delay slightly to make sure logout is complete
      setTimeout(() => {
        window.location.href = redirect;
      }, 100);
    }
  });
</script>
]]> <![CDATA[Hướng dẫn sửa lỗi edit popup menu bị missing hoặc offset quá nhiều]]> https://congdong.mybb.vn/Thread-tutorial-huong-dan-sua-loi-edit-popup-menu-bi-missing-hoac-offset-qua-nhieu Thu, 03 Jul 2025 08:33:57 +0000 JLP423]]> https://congdong.mybb.vn/Thread-tutorial-huong-dan-sua-loi-edit-popup-menu-bi-missing-hoac-offset-qua-nhieu Đây là 2 cách sửa nhanh, hy vọng 1 trong 2 sẽ giúp bạn giải quyết vấn đề

Cách 1: Thêm đoạn này vào headerinclude:
 
Code: 
<script>
  
  (function($){
    var current_popup = '';
    var PopupMenu = function(el, close_in_popupmenu)
    {
        var el = $(el);
        var popup = this;
        var popup_menu = $("#" + el.attr('id') + "_popup");
        if(typeof close_in_popupmenu == 'undefined')
        {
            var close_in_popupmenu = true;
        }
        // Opening Popup
        this.open = function(e)
        {
            e.preventDefault();

            if(popup_menu.is(':visible'))
            {
                popup.close();
                return;
            }

            // Setup popup menu
            var offset = el.offset();
            offset.top += el.outerHeight();

            // We only adjust if it goes out of the page (?)
            if((el.offset().left + popup_menu.outerWidth()) > $(window).width())
                var adjust = popup_menu.outerWidth() - el.outerWidth();
            else
                var adjust = 0;

            popup_menu.css({
                position: 'absolute',
            });

            popup_menu.show();

            // Closes the popup if we click outside the button (this doesn't seem to work properly - couldn't find any solutions that actually did - if we click the first item on the menu)
            // Credits: http://stackoverflow.com/questions/1160880/detect-click-outside-element
            $('body, .popup_item').bind('click.close_popup', function(e) {
                if(close_in_popupmenu)
                {
                    if($(e.target).closest("#" + el.attr('id')).length == 0) {
                        popup.close();
                    }
                }
                else
                {
                    if($(e.target).closest("#" + el.attr('id')).length == 0 && $(e.target).closest("#" + el.attr('id') + '_popup').length == 0) {
                        popup.close();
                    }
                }
            });
        }
        this.close = function(e)
        {
            popup_menu.hide();
        }
    }
    $.fn.popupMenu = function(close_in_popupmenu)
    {
        return this.each(function()
        {
            var popup = new PopupMenu(this, close_in_popupmenu);
            $(this).click(popup.open);
        });
    }
})(jQuery);
</script>

Nếu cách trên không thành, thì Cách 2:
  1. Xóa hoặc đổi tên file jscripts/jquery.plugins.min.js
  2. Tạo một copy của file jscripts/jquery.plugins.js và đổi tên thành jscripts/jquery.plugins.min.js
  3. Mở file vừa tạo và đổi tên và tìm
    Code: 
                // Setup popup menu
                var offset = el.offset();
                offset.top += el.outerHeight();

  4. Thay thế bằng
    Code: 
                // Setup popup menu
                var offset = el.offset();
                // WoM fix edit popup menu start
                var el_parent = el.get(0).parentNode;
                var popup_parent = popup_menu.get(0).parentNode;
                if (el_parent === popup_parent)
                {
                  offset = el.position();
                }
                // WoM fix edit popup menu end
                offset.top += el.outerHeight();

  5. Lưu file lại

Nguồn: https://community.mybb.com/thread-160142...pid1197221]]> Đây là 2 cách sửa nhanh, hy vọng 1 trong 2 sẽ giúp bạn giải quyết vấn đề

Cách 1: Thêm đoạn này vào headerinclude:
 
Code: 
<script>
  
  (function($){
    var current_popup = '';
    var PopupMenu = function(el, close_in_popupmenu)
    {
        var el = $(el);
        var popup = this;
        var popup_menu = $("#" + el.attr('id') + "_popup");
        if(typeof close_in_popupmenu == 'undefined')
        {
            var close_in_popupmenu = true;
        }
        // Opening Popup
        this.open = function(e)
        {
            e.preventDefault();

            if(popup_menu.is(':visible'))
            {
                popup.close();
                return;
            }

            // Setup popup menu
            var offset = el.offset();
            offset.top += el.outerHeight();

            // We only adjust if it goes out of the page (?)
            if((el.offset().left + popup_menu.outerWidth()) > $(window).width())
                var adjust = popup_menu.outerWidth() - el.outerWidth();
            else
                var adjust = 0;

            popup_menu.css({
                position: 'absolute',
            });

            popup_menu.show();

            // Closes the popup if we click outside the button (this doesn't seem to work properly - couldn't find any solutions that actually did - if we click the first item on the menu)
            // Credits: http://stackoverflow.com/questions/1160880/detect-click-outside-element
            $('body, .popup_item').bind('click.close_popup', function(e) {
                if(close_in_popupmenu)
                {
                    if($(e.target).closest("#" + el.attr('id')).length == 0) {
                        popup.close();
                    }
                }
                else
                {
                    if($(e.target).closest("#" + el.attr('id')).length == 0 && $(e.target).closest("#" + el.attr('id') + '_popup').length == 0) {
                        popup.close();
                    }
                }
            });
        }
        this.close = function(e)
        {
            popup_menu.hide();
        }
    }
    $.fn.popupMenu = function(close_in_popupmenu)
    {
        return this.each(function()
        {
            var popup = new PopupMenu(this, close_in_popupmenu);
            $(this).click(popup.open);
        });
    }
})(jQuery);
</script>

Nếu cách trên không thành, thì Cách 2:
  1. Xóa hoặc đổi tên file jscripts/jquery.plugins.min.js
  2. Tạo một copy của file jscripts/jquery.plugins.js và đổi tên thành jscripts/jquery.plugins.min.js
  3. Mở file vừa tạo và đổi tên và tìm
    Code: 
                // Setup popup menu
                var offset = el.offset();
                offset.top += el.outerHeight();

  4. Thay thế bằng
    Code: 
                // Setup popup menu
                var offset = el.offset();
                // WoM fix edit popup menu start
                var el_parent = el.get(0).parentNode;
                var popup_parent = popup_menu.get(0).parentNode;
                if (el_parent === popup_parent)
                {
                  offset = el.position();
                }
                // WoM fix edit popup menu end
                offset.top += el.outerHeight();

  5. Lưu file lại

Nguồn: https://community.mybb.com/thread-160142...pid1197221]]> <![CDATA[Responsive layout cho ProStats plugin]]> https://congdong.mybb.vn/Thread-tutorial-responsive-layout-cho-prostats-plugin Wed, 28 May 2025 09:32:22 +0000 JLP423]]> https://congdong.mybb.vn/Thread-tutorial-responsive-layout-cho-prostats-plugin , Joey share mọi người cách làm cho ProStat plugin đc responsive theo giao diện của diễn đàn. Mọi người làm theo hướng dẫn sau nha

1. Mọi người thêm cái CSS này vào global.css hay gì đó tương tự của giao diện muốn dùng:
 
Code: 
/*Cái này để ẩn mấy cai categories*/
@media only screen and (max-width: 1199px){
     .hide-prostats{
         display: none;
    }
}
/*cái này để ẩn mấy cái thông tin nhỏ nhặt trong cái phần bài viết mới*/
@media only screen and (max-width: 767px){
     .hide{
         display: none;
    }
}

2. Mọi người tìm những cái templates trong phần Global Templates sau đây, và thay cái <td> đầu tiên thành cái này:
 
Code: 
<td class="hide-prostats">
  1. prostats_mostreplies
  2. prostats_mostreputation
  3. prostats_mostthanks
  4. prostats_mostviews
  5. prostats_newmembers
  6. prostats_topdownloads
  7. prostats_topposters
  8. prostats_topreferrers
  9. prostats_topthreadposters

3. Tương tự như bước 2, các bạn cũng tìm những templates sau đây và thay cái <td> thành 
 
Code: 
<td class="hide">
  1. prostats_newestposts_date
  2. prostats_newestposts_forum
  3. prostats_newestposts_head_date
  4. prostats_newestposts_head_forum
  5. prostats_newestposts_head_starter
  6. prostats_newestposts_starter

Vậy là xong rồi đó. Mọi người có thể thay đổi chỉnh sửa theo ý mình muốn. Joey đã test thử nhiều cách và thấy cách này là đẹp nhất cho responsive view. Khi nào rảnh Joey up lên vài tấm hình demo cho

Enjoy

.png   Screenshot 2025-05-28 225010.png (Kích thước: 223,38 KB / Tải về: 2)

.png   Screenshot 2025-05-28 224951.png (Kích thước: 156,69 KB / Tải về: 3)

.png   Screenshot 2025-05-28 224840.png (Kích thước: 148,84 KB / Tải về: 2)

.png   Screenshot 2025-05-28 224806.png (Kích thước: 119,98 KB / Tải về: 3) ]]> , Joey share mọi người cách làm cho ProStat plugin đc responsive theo giao diện của diễn đàn. Mọi người làm theo hướng dẫn sau nha

1. Mọi người thêm cái CSS này vào global.css hay gì đó tương tự của giao diện muốn dùng:
 
Code: 
/*Cái này để ẩn mấy cai categories*/
@media only screen and (max-width: 1199px){
     .hide-prostats{
         display: none;
    }
}
/*cái này để ẩn mấy cái thông tin nhỏ nhặt trong cái phần bài viết mới*/
@media only screen and (max-width: 767px){
     .hide{
         display: none;
    }
}

2. Mọi người tìm những cái templates trong phần Global Templates sau đây, và thay cái <td> đầu tiên thành cái này:
 
Code: 
<td class="hide-prostats">
  1. prostats_mostreplies
  2. prostats_mostreputation
  3. prostats_mostthanks
  4. prostats_mostviews
  5. prostats_newmembers
  6. prostats_topdownloads
  7. prostats_topposters
  8. prostats_topreferrers
  9. prostats_topthreadposters

3. Tương tự như bước 2, các bạn cũng tìm những templates sau đây và thay cái <td> thành 
 
Code: 
<td class="hide">
  1. prostats_newestposts_date
  2. prostats_newestposts_forum
  3. prostats_newestposts_head_date
  4. prostats_newestposts_head_forum
  5. prostats_newestposts_head_starter
  6. prostats_newestposts_starter

Vậy là xong rồi đó. Mọi người có thể thay đổi chỉnh sửa theo ý mình muốn. Joey đã test thử nhiều cách và thấy cách này là đẹp nhất cho responsive view. Khi nào rảnh Joey up lên vài tấm hình demo cho

Enjoy

.png   Screenshot 2025-05-28 225010.png (Kích thước: 223,38 KB / Tải về: 2)

.png   Screenshot 2025-05-28 224951.png (Kích thước: 156,69 KB / Tải về: 3)

.png   Screenshot 2025-05-28 224840.png (Kích thước: 148,84 KB / Tải về: 2)

.png   Screenshot 2025-05-28 224806.png (Kích thước: 119,98 KB / Tải về: 3) ]]> <![CDATA[Cài đặt và sử dụng Localhost cho người mới.]]> https://congdong.mybb.vn/Thread-tutorial-cai-dat-va-su-dung-localhost-cho-nguoi-moi Tue, 23 Jan 2024 10:42:52 +0000 Tanthienlang]]> https://congdong.mybb.vn/Thread-tutorial-cai-dat-va-su-dung-localhost-cho-nguoi-moi Localhost là gì?Localhost là từ ghép của hai chữ “local” và “host“. Local dịch theo nghĩa IT là máy tính của bạn, Host theo nghĩa IT là máy chủ. Vậy localhost nghĩa là một máy chủ được vận hành trên máy tính của bạn.
Localhost bao gồm nhiều ứng dụng đi kèm với nhau và tất cả các ứng dụng đó sẽ kết hợp với nhau để tạo ra một môi trường có thể chạy mã nguồn trang web ví dụ như Mybb.vn trên máy tính của chính bạn bao gồm:
  • Phần mềm Webserver tên Apache, đây là webserver thông dụng nhất.
  • Phần mềm PHP để xử lý mã PHP vì WordPress viết bằng ngôn ngữ PHP.
  • Phần mềm MySQL Server để lưu trữ và xử lý cơ sở dữ liệu, do WordPress sử dụng MySQL làm nền tảng cơ sở dữ liệu. Cơ sở dữ liệu thường được mình viết theo chữ tiếng Anh là database.
  • Phần mềm PHPMyAdmin để xem và quản lý cơ sở dữ liệu MySQL.
Như vậy, đối chiếu với yêu cầu cơ bản của một diễn đàn mybb thì localhost đã hoàn toàn đáp ứng được.
Localhost vận hành như thế nàoKhi cài đặt Localhost vào máy tính rồi, thì máy tính của bạn đã có một phần mềm Webserver để chạy ứng dụng website với địa chỉ là http://127.0.0.1. Đây là địa chỉ IP dạng localhost, ngoài ra bạn cũng có thể chạy localhost với đường dẫn là http://localhost.
Thông thường khi cài Localhost, mỗi khi cần sử dụng bạn sẽ cần mở bảng điều khiển của localhost lên và kích hoạt cho nó khởi động các ứng dụng đi kèm.
Lưu ý trước khi cài đặtXoá toàn bộ ứng dụng liên quan tới localhostNếu bạn có cài đặt các phần mềm liên quan đến việc làm localhost như PHP, MySQL thì hãy xoá hết. Và bạn không nên cài XAMPP trên Windows Server đã cài đặt IIS.
Lưu ý nếu bạn dùng SkypeNếu máy 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. Do đó, bạn hãy mở Skype -> Tools -> Connection Options -> 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.
 
[Hình ảnh: cai-dat-xampp-skype.jpg]
Sửa xong, hãy khởi động lại máy để hoàn tất.
Tắt tường lửaNếu máy bạn có cài đặt tường lửa từ Windows hay từ một phần mềm Antivirus nào khác thì hãy tắt nó đi vì có thể nó sẽ chặn cổng 80 hoặc các ứng dụng webserver.
Tắt UAC trên WindowsNếu máy của bạn đang dùng Windows và có bật chức năng User Account Control thì hãy tắt nó đi khi dùng localhost để tránh các vấn đề bị giới hạn quyền.
Tìm cách tắt trên Google
Hướng dẫn cài đặt LocalhostĐể cài Localhost chúng ta có rất nhiều cách và phần mềm, tuy nhiên nếu bạn là người mới thì mình khuyến khích các bạn dùng phần mềm XAMPP để cài localhost vì:
  • XAMPP hoàn toàn miễn phí.
  • Dễ sử dụng.
  • Hỗ trợ các hệ điều hành thông dụng như Windows, Mac, Linux.
Tuy nhiên trong bài này mình chỉ hướng dẫn cho hệ điều hành Windows.
Để tải XAMPP, đầu tiên bạn truy cập vào đị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, và bạn nên chọn phiên bản PHP 5.4.31. 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.
Lưu ý: Hiện nay XAMPP đã ra bản mới hơn hỗ trợ MariaDB nhưng bị lỗi rất nhiều, bạn nên dùng phiên bản XAMPP 1.8.3 có thể tải tại đây. Nếu bạn dùng Mac thì tải tại đây.
Sau khi tải file cài đặt về xong, hãy chạy nó, sau đó chọn Next.
[Hình ảnh: cai-dat-xampp-01.jpg]
Ở phần chọn đường dẫn, bạn hãy chọn đường dẫn cần lưu cài đặt của XAMPP. Lưu ý rằng đường dẫn này bạn phải nhớ vì khi cài đặt web lên localhost, bạn phải truy cập vào thư mục này. Bạn nên để mặc định là c:\xampp. Tiếp tục ấn Next.

Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“. Và ấn Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP.
[Hình ảnh: cai-dat-xampp-04.jpg]
Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của XAMPP. Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng không khởi động được localhost.
Khởi động LocalhostBây giờ bạn hãy vào thư mục c:\xampp và mở file xampp-panel.exe lên để bật bảng điều khiển của XAMPP.
[Hình ảnh: xampp-panel.jpg]Bảng điều khiển của XAMPP
Bạn để ý sẽ thấy hai ứng dụng Apache và MySQL có nút Start, đó là dấu hiệu bảo 2 ứng dụng này chưa được khởi động, hãy ấn vào nút Start của từng ứng dụng để khởi động Webserver Apache và MySQL Server lên thì mới chạy được localhost.
Nếu cả hai ứng dụng chuyển sang màu xanh như hình dưới là đã khởi động thành công.
[Hình ảnh: xampp-panel-start.jpg]
Sau khi khởi động xong, bạn hãy truy cập vào website với địa chỉ là http://localhost sẽ thấy nó hiển thị ra trang giới thiệu XAMPP như hình dưới.
[Hình ảnh: xampp-homepage.jpg]
Bạn có thể ấn vào nút English phía bên dưới để truy cập vào trang quản lý localhost.
[Hình ảnh: xampp-manager-page.jpg]
Tạm thời là thế, cách chi tiết cài đặt WordPress vào localhost XAMPP mình sẽ hướng dẫn ở phần sau.
 Thao tác trên localhost1. Làm việc với thư mục và tập tinMột điều khá cơ bản nhưng rất quan trọng khi bạn làm việc với website mà bất kể là localhost hay hosting đó là hiểu cơ chế phân thư mục của WordPress.
Bây giờ bạn hãy vào thư mục C:\xampp\htdocs\ và tạo một thư mục tên “thachpham“, thư mục này sẽ chứa website của mình.
Như ở trên, mình đã hướng dẫn bạn tạo một thư mục tên là thachpham trong thư mục htdocs và bạn có thể sử dụng đường dẫn 
 
Code: 
http://localhost/thachpham
 để chạy. Vậy bây giờ mình có thể nói, thư mục C:\xampp\htdocs\thachphamchính là thư mục gốc của tên miền http://localhost/thachpham
Bây giờ bạn thử copy một tập tin nào đó vào trong thư mục C:\xampp\htdocs\thachpham rồi chạy tên miền http://localhost/thachpham, bạn sẽ thấy nó liệt kê file mà bạn vừa copy vào.
Nếu bạn click vào file ảnh đó thì trình duyệt sẽ hiển thị ảnh với đường dẫn là 
 
Code: 
http://localhost/thachpham/tên-tập-tin
. Đây được xem là một link ảnh trong website của bạn.
Tương tự, hãy thử tạo một thư mục bất kỳ rồi copy một tập tin nào đó vào, thì bây giờ bạn có thể truy cập xem ảnh với đường dẫn là 
 
Code: 
http://localhost/thachpham/tên-folder/tên-tập-tin
.
Như vậy bạn có thể hiểu, cái đường dẫn trên website nó sẽ phân thứ cấp tùy theo cấu trúc thư mục và file trong đó.
2. Tạo cơ sở dữ liệu MySQL (Database)Thao tác này bạn sẽ phải làm trong bước cài đặt WordPress trên localhost nhưng ở đây mình sẽ hướng dẫn trước để bạn có thể làm thử luôn.
Khi nhắc đến database, bạn phải nhớ là nó bao gồm 3 thành phần chính là:
  • Tên user của database.
  • Mật khẩu của user database.
  • Tên database.
  • Database Host (thường thì điền là localhost, bất kể là bạn dùng ở localhost hay host bình thường).
Bạn hãy tưởng tượng rằng, user của database sẽ có nhiệm vụ đọc và ghi dữ liệu vào database nên khi sử dụng các mã nguồn PHP, bạn phải khai báo cùng lúc cả user của database và tên database.
Đối với localhost, bạn không cần tạo user cho database mà sẽ sử dụng thông tin user như sau:
  • Tên user database: root
  • Mật khẩu: bỏ trống
Do vậy, chúng ta chỉ cần tạo database là đủ.
Để tạo database, bạn hãy truy cập vào localhost với đường dẫn http://localhost/phpmyadmin. Sau đó bạn nhấp vào menu Databases.
[Hình ảnh: localhost-tao-database-01.jpg]
Sau đó ở phần Create databsae, bạn nhập tên database cần tạo vào ô Database name, phần Collation bạn hãy chọn là utf8_unicode_ci như hình dưới rồi ấn nút Create kế bên.
[Hình ảnh: localhost-tao-database-02.jpg]
Tạo xong hãy nhìn bên menu tay trái, nếu nó xuất hiện tên database vừa tạo là thành công. Vậy bây giờ, chúng ta tạm có một databse với các thông tin như:
  • Database Host: localhost
  • Database user: root
  • Database password: trống
  • Database name: thachphamblog
Còn cách sử dụng với nó như thế nào thì mình sẽ nói ở bước cài WordPress trên localhost cho thực tế.
Tới đây bạn đã có một cái localhost sử dụng địa chỉ dạng http://localhost/ hoặc http://127.0.0.1/ rồi. Nếu bạn đã rành việc sử dụng localhost và cần thêm tên miền ảo thì ấn qua trang 2 để tiếp tục xem phần nâng cao. Lưu ý là không dành cho người mới.
Cách đổi cổng mạng cho LocalhostMặc định Localhost sẽ sử dụng cổng 80, bởi vì khi bạn gõ tên miền như http://localhost thì tức là nó đã sử dụng cổng 80 để đọc các dữ liệu web trong localhost. Tuy nhiên nếu như bạn đã dùng cổng 80 cho một ứng dụng khác, hoặc đơn giản là không khởi động Apache được thì bạn nên thiết lập cho Apache trong Localhost sử dụng một cổng khác, như 8080 chẳng hạn.
Trước khi đổi, mình cần các bạn lưu ý là sau khi đổi xong thì bạn phải truy cập vào website với tên miền http://localhost:8080 thay vì chỉ là http://localhost.
Để đổi cổng, bạn mở bảng điều khiển XAMPP lên và chọn nút Config của Apache, sau đó chọn Apache (httpd.conf).
[Hình ảnh: doi-port-localhost-01.jpg]
Sau đó bạn tìm dòng này:
Listen 80Đổi thành
Listen 8080Sau đó bạn Stop cái Apache và Start lại rồi thử truy cập vào localhost theo đường dẫn http://localhost:8080, nếu truy cập được thì bạn đã làm thành công. Và cũng nên lưu ý rằng, sau khi đổi cổng thì mỗi khi truy cập bạn phải sử dụng đường dẫn có kèm theo số cổng bạn vừa đổi sang vì mặc định nếu không điền thì nó sẽ sử dụng cổng 80.
Nếu bạn có sử dụng tên miền ảo như mình hướng dẫn ở trên thì bạn cũng nên sửa lại file C:\xampp\apache\conf\extra\httpd-vhost.conf cho nó sử dụng port 80 thay vì 8080.
Một số câu hỏi liên quan đến localhostTôi có thể gửi cho bạn bè tôi xem website ở localhost không?
Không, thân ái.
Sau này tôi có thể chuyển dữ liệu từ localhost lên host trên Internet không?
Hoàn toàn được.
Localhost có bị chậm không?
Hầu như không, trừ khi máy bạn quá yếu.
Localhost có bị hack website không?
Hầu như không nếu máy tính của bạn không bị truy cập bởi một người nào khác.
Lời kếtỞ trên là toàn bộ những gì bạn cần biết về localhost và nó sẽ đi theo bạn trong suốt quá trình làm việc với website vì host chỉ nên sử dụng để chạy website chính trên internet, còn localhost bạn nên dùng để thử nghiệm hoặc cần chỉnh sửa cái gì đó trong website mà không muốn nó ảnh hưởng trực tiếp đến website chính
(Bài viết trên blog Thachpham)]]> Localhost là gì?Localhost là từ ghép của hai chữ “local” và “host“. Local dịch theo nghĩa IT là máy tính của bạn, Host theo nghĩa IT là máy chủ. Vậy localhost nghĩa là một máy chủ được vận hành trên máy tính của bạn.
Localhost bao gồm nhiều ứng dụng đi kèm với nhau và tất cả các ứng dụng đó sẽ kết hợp với nhau để tạo ra một môi trường có thể chạy mã nguồn trang web ví dụ như Mybb.vn trên máy tính của chính bạn bao gồm:
  • Phần mềm Webserver tên Apache, đây là webserver thông dụng nhất.
  • Phần mềm PHP để xử lý mã PHP vì WordPress viết bằng ngôn ngữ PHP.
  • Phần mềm MySQL Server để lưu trữ và xử lý cơ sở dữ liệu, do WordPress sử dụng MySQL làm nền tảng cơ sở dữ liệu. Cơ sở dữ liệu thường được mình viết theo chữ tiếng Anh là database.
  • Phần mềm PHPMyAdmin để xem và quản lý cơ sở dữ liệu MySQL.
Như vậy, đối chiếu với yêu cầu cơ bản của một diễn đàn mybb thì localhost đã hoàn toàn đáp ứng được.
Localhost vận hành như thế nàoKhi cài đặt Localhost vào máy tính rồi, thì máy tính của bạn đã có một phần mềm Webserver để chạy ứng dụng website với địa chỉ là http://127.0.0.1. Đây là địa chỉ IP dạng localhost, ngoài ra bạn cũng có thể chạy localhost với đường dẫn là http://localhost.
Thông thường khi cài Localhost, mỗi khi cần sử dụng bạn sẽ cần mở bảng điều khiển của localhost lên và kích hoạt cho nó khởi động các ứng dụng đi kèm.
Lưu ý trước khi cài đặtXoá toàn bộ ứng dụng liên quan tới localhostNếu bạn có cài đặt các phần mềm liên quan đến việc làm localhost như PHP, MySQL thì hãy xoá hết. Và bạn không nên cài XAMPP trên Windows Server đã cài đặt IIS.
Lưu ý nếu bạn dùng SkypeNếu máy 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. Do đó, bạn hãy mở Skype -> Tools -> Connection Options -> 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.
 
[Hình ảnh: cai-dat-xampp-skype.jpg]
Sửa xong, hãy khởi động lại máy để hoàn tất.
Tắt tường lửaNếu máy bạn có cài đặt tường lửa từ Windows hay từ một phần mềm Antivirus nào khác thì hãy tắt nó đi vì có thể nó sẽ chặn cổng 80 hoặc các ứng dụng webserver.
Tắt UAC trên WindowsNếu máy của bạn đang dùng Windows và có bật chức năng User Account Control thì hãy tắt nó đi khi dùng localhost để tránh các vấn đề bị giới hạn quyền.
Tìm cách tắt trên Google
Hướng dẫn cài đặt LocalhostĐể cài Localhost chúng ta có rất nhiều cách và phần mềm, tuy nhiên nếu bạn là người mới thì mình khuyến khích các bạn dùng phần mềm XAMPP để cài localhost vì:
  • XAMPP hoàn toàn miễn phí.
  • Dễ sử dụng.
  • Hỗ trợ các hệ điều hành thông dụng như Windows, Mac, Linux.
Tuy nhiên trong bài này mình chỉ hướng dẫn cho hệ điều hành Windows.
Để tải XAMPP, đầu tiên bạn truy cập vào đị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, và bạn nên chọn phiên bản PHP 5.4.31. 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.
Lưu ý: Hiện nay XAMPP đã ra bản mới hơn hỗ trợ MariaDB nhưng bị lỗi rất nhiều, bạn nên dùng phiên bản XAMPP 1.8.3 có thể tải tại đây. Nếu bạn dùng Mac thì tải tại đây.
Sau khi tải file cài đặt về xong, hãy chạy nó, sau đó chọn Next.
[Hình ảnh: cai-dat-xampp-01.jpg]
Ở phần chọn đường dẫn, bạn hãy chọn đường dẫn cần lưu cài đặt của XAMPP. Lưu ý rằng đường dẫn này bạn phải nhớ vì khi cài đặt web lên localhost, bạn phải truy cập vào thư mục này. Bạn nên để mặc định là c:\xampp. Tiếp tục ấn Next.

Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“. Và ấn Next 2 lần nữa để bắt đầu quá trình cài đặt XAMPP.
[Hình ảnh: cai-dat-xampp-04.jpg]
Sau khi cài xong, ấn nút Finish để kết thúc cài đặt và mở bảng điều khiển của XAMPP. Tuy nhiên, hãy khởi động lại máy sau khi cài đặt xong để tránh tình trạng không khởi động được localhost.
Khởi động LocalhostBây giờ bạn hãy vào thư mục c:\xampp và mở file xampp-panel.exe lên để bật bảng điều khiển của XAMPP.
[Hình ảnh: xampp-panel.jpg]Bảng điều khiển của XAMPP
Bạn để ý sẽ thấy hai ứng dụng Apache và MySQL có nút Start, đó là dấu hiệu bảo 2 ứng dụng này chưa được khởi động, hãy ấn vào nút Start của từng ứng dụng để khởi động Webserver Apache và MySQL Server lên thì mới chạy được localhost.
Nếu cả hai ứng dụng chuyển sang màu xanh như hình dưới là đã khởi động thành công.
[Hình ảnh: xampp-panel-start.jpg]
Sau khi khởi động xong, bạn hãy truy cập vào website với địa chỉ là http://localhost sẽ thấy nó hiển thị ra trang giới thiệu XAMPP như hình dưới.
[Hình ảnh: xampp-homepage.jpg]
Bạn có thể ấn vào nút English phía bên dưới để truy cập vào trang quản lý localhost.
[Hình ảnh: xampp-manager-page.jpg]
Tạm thời là thế, cách chi tiết cài đặt WordPress vào localhost XAMPP mình sẽ hướng dẫn ở phần sau.
 Thao tác trên localhost1. Làm việc với thư mục và tập tinMột điều khá cơ bản nhưng rất quan trọng khi bạn làm việc với website mà bất kể là localhost hay hosting đó là hiểu cơ chế phân thư mục của WordPress.
Bây giờ bạn hãy vào thư mục C:\xampp\htdocs\ và tạo một thư mục tên “thachpham“, thư mục này sẽ chứa website của mình.
Như ở trên, mình đã hướng dẫn bạn tạo một thư mục tên là thachpham trong thư mục htdocs và bạn có thể sử dụng đường dẫn 
 
Code: 
http://localhost/thachpham
 để chạy. Vậy bây giờ mình có thể nói, thư mục C:\xampp\htdocs\thachphamchính là thư mục gốc của tên miền http://localhost/thachpham
Bây giờ bạn thử copy một tập tin nào đó vào trong thư mục C:\xampp\htdocs\thachpham rồi chạy tên miền http://localhost/thachpham, bạn sẽ thấy nó liệt kê file mà bạn vừa copy vào.
Nếu bạn click vào file ảnh đó thì trình duyệt sẽ hiển thị ảnh với đường dẫn là 
 
Code: 
http://localhost/thachpham/tên-tập-tin
. Đây được xem là một link ảnh trong website của bạn.
Tương tự, hãy thử tạo một thư mục bất kỳ rồi copy một tập tin nào đó vào, thì bây giờ bạn có thể truy cập xem ảnh với đường dẫn là 
 
Code: 
http://localhost/thachpham/tên-folder/tên-tập-tin
.
Như vậy bạn có thể hiểu, cái đường dẫn trên website nó sẽ phân thứ cấp tùy theo cấu trúc thư mục và file trong đó.
2. Tạo cơ sở dữ liệu MySQL (Database)Thao tác này bạn sẽ phải làm trong bước cài đặt WordPress trên localhost nhưng ở đây mình sẽ hướng dẫn trước để bạn có thể làm thử luôn.
Khi nhắc đến database, bạn phải nhớ là nó bao gồm 3 thành phần chính là:
  • Tên user của database.
  • Mật khẩu của user database.
  • Tên database.
  • Database Host (thường thì điền là localhost, bất kể là bạn dùng ở localhost hay host bình thường).
Bạn hãy tưởng tượng rằng, user của database sẽ có nhiệm vụ đọc và ghi dữ liệu vào database nên khi sử dụng các mã nguồn PHP, bạn phải khai báo cùng lúc cả user của database và tên database.
Đối với localhost, bạn không cần tạo user cho database mà sẽ sử dụng thông tin user như sau:
  • Tên user database: root
  • Mật khẩu: bỏ trống
Do vậy, chúng ta chỉ cần tạo database là đủ.
Để tạo database, bạn hãy truy cập vào localhost với đường dẫn http://localhost/phpmyadmin. Sau đó bạn nhấp vào menu Databases.
[Hình ảnh: localhost-tao-database-01.jpg]
Sau đó ở phần Create databsae, bạn nhập tên database cần tạo vào ô Database name, phần Collation bạn hãy chọn là utf8_unicode_ci như hình dưới rồi ấn nút Create kế bên.
[Hình ảnh: localhost-tao-database-02.jpg]
Tạo xong hãy nhìn bên menu tay trái, nếu nó xuất hiện tên database vừa tạo là thành công. Vậy bây giờ, chúng ta tạm có một databse với các thông tin như:
  • Database Host: localhost
  • Database user: root
  • Database password: trống
  • Database name: thachphamblog
Còn cách sử dụng với nó như thế nào thì mình sẽ nói ở bước cài WordPress trên localhost cho thực tế.
Tới đây bạn đã có một cái localhost sử dụng địa chỉ dạng http://localhost/ hoặc http://127.0.0.1/ rồi. Nếu bạn đã rành việc sử dụng localhost và cần thêm tên miền ảo thì ấn qua trang 2 để tiếp tục xem phần nâng cao. Lưu ý là không dành cho người mới.
Cách đổi cổng mạng cho LocalhostMặc định Localhost sẽ sử dụng cổng 80, bởi vì khi bạn gõ tên miền như http://localhost thì tức là nó đã sử dụng cổng 80 để đọc các dữ liệu web trong localhost. Tuy nhiên nếu như bạn đã dùng cổng 80 cho một ứng dụng khác, hoặc đơn giản là không khởi động Apache được thì bạn nên thiết lập cho Apache trong Localhost sử dụng một cổng khác, như 8080 chẳng hạn.
Trước khi đổi, mình cần các bạn lưu ý là sau khi đổi xong thì bạn phải truy cập vào website với tên miền http://localhost:8080 thay vì chỉ là http://localhost.
Để đổi cổng, bạn mở bảng điều khiển XAMPP lên và chọn nút Config của Apache, sau đó chọn Apache (httpd.conf).
[Hình ảnh: doi-port-localhost-01.jpg]
Sau đó bạn tìm dòng này:
Listen 80Đổi thành
Listen 8080Sau đó bạn Stop cái Apache và Start lại rồi thử truy cập vào localhost theo đường dẫn http://localhost:8080, nếu truy cập được thì bạn đã làm thành công. Và cũng nên lưu ý rằng, sau khi đổi cổng thì mỗi khi truy cập bạn phải sử dụng đường dẫn có kèm theo số cổng bạn vừa đổi sang vì mặc định nếu không điền thì nó sẽ sử dụng cổng 80.
Nếu bạn có sử dụng tên miền ảo như mình hướng dẫn ở trên thì bạn cũng nên sửa lại file C:\xampp\apache\conf\extra\httpd-vhost.conf cho nó sử dụng port 80 thay vì 8080.
Một số câu hỏi liên quan đến localhostTôi có thể gửi cho bạn bè tôi xem website ở localhost không?
Không, thân ái.
Sau này tôi có thể chuyển dữ liệu từ localhost lên host trên Internet không?
Hoàn toàn được.
Localhost có bị chậm không?
Hầu như không, trừ khi máy bạn quá yếu.
Localhost có bị hack website không?
Hầu như không nếu máy tính của bạn không bị truy cập bởi một người nào khác.
Lời kếtỞ trên là toàn bộ những gì bạn cần biết về localhost và nó sẽ đi theo bạn trong suốt quá trình làm việc với website vì host chỉ nên sử dụng để chạy website chính trên internet, còn localhost bạn nên dùng để thử nghiệm hoặc cần chỉnh sửa cái gì đó trong website mà không muốn nó ảnh hưởng trực tiếp đến website chính
(Bài viết trên blog Thachpham)]]>