Hướng dẫn nâng cấp module tương thích NukeViet 4.5 lên NukeViet 5.0

Trong tài liệu này modulename được hiểu là tên module của bạn muốn nâng cấp, thay thế nó bằng tên module của bạn.

Nâng cấp ngôn ngữ

NukeViet 5.0 sử dụng 1 file ngôn ngữ chung, đồng thời cách viết ngôn ngữ cũng khác. Bạn cần nâng cấp theo các hướng dẫn tại đây
Chú ý sau khi chạy bước 3, tìm các tệp hiện ra, mở nó lên tìm với regex trong phần mềm viết code \$lang_(module|global)\[ để xử lý

Nâng cấp block

NukeViet 5.0 sử dụng tệp cấu hình và khai báo tên block bằng json thay vì ini. Tuy chuẩn cũ ini cũng hỗ trợ nhưng bạn vẫn nên nâng cấp để chuyên nghiệp hơn và hỗ trợ tốt hơn trong tương lai. Để nâng cấp bạn chạy lệnh php block-config-ini2json.php trong thư mục này

Chuyển đổi MyISAM sang InnoDB

Nếu module của bạn có action_mysql.php thì mở nó lên tìm các từ MyISAM đổi thành InnoDB. Lưu ý khi chuyển từ MyISAM sang InnoDB bạn cần kiểm tra lại các INDEX của từng bảng, không vượt quá 767bytes để đảm bảo tương thích tốt nhất.

Chuyển giao diện quản trị sang Bootstrap 5.3

Bạn cần tham khảo tài liệu của Bootstrap 5.3 để hiểu cách dùng trước khi thực hiện.

Xử lý modulename.css

Nếu bạn có viết CSS của module, cần chuyển nó sang SCSS để hỗ trợ giao diện tối... bằng cách tạo scss/admin_future/music.scss với phần đầu bao gồm:

/**
 * NukeViet Content Management System
 * @version 5.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2025 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

// Define variable
@import "../functions";
@import "variables";
@import "variables-dark";
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";

Và phần sau là css của bạn. Sau đó build bằng cách chạy lên npm run watch-admin chú ý để chạy cái này bạn cần nghiên cứu và hiểu NodeJS

Cập nhật các tpl lên Bootstrap 5.3

Bước này sẽ có rất nhiều nội dung làm, tôi list ra những gì tôi hay làm như sau cho toàn bộ tệp .tpl ở themes/admin_future/modules/music/

• Tìm alert alert ở những kết quả hiện ra bổ sung thêm vào thẻ role="alert"
• Chạy php tools/music/to5.0/10.col-24.php, chỉ chạy một lần duy nhất nếu chạy nhiều lần số cột sẽ sai
• Chạy php tools/music/to5.0/11.elements.php, có thể chạy nhiều lần để cập nhật các phần tử khác của Bootstrap
• Chạy php tools/music/to5.0/12.fontawesome.php, có thể chạy nhiều lần để cập nhật các icon Font Awesome từ bản 4 lên bản 6
• Tìm panel- còn lại và xử lý, đa số các panel- còn lại liên quan panel-info, panel-danger... bạn có thể xóa đi hoặc thay vào đó dùng border border-danger... thay thế
• Tìm dropdown-menu bên trong nó, các thẻ a xem xét bổ sung thêm class dropdown-item
• Tìm <div class="checkbox"> còn sót lại nếu có sửa theo cú pháp Bootstrap quy định https://getbootstrap.com/docs/5.3/forms/checks-radios/
• Tìm input-group-btn xóa các thẻ đó
• Tìm datepicker sửa các đoạn tạo Jquery UI datepicker sang

{
    dateFormat: nv_jsdate_get.replace('yyyy', 'yy'),
    changeMonth: true,
    changeYear: true,
    showOtherMonths: true,
    showButtonPanel: true,
    showOn: 'focus',
    isRTL: $('html').attr('dir') == 'rtl'
}

Chú ý nv_jsdate_get nếu định dạng d-m-Y và nv_jsdate_post nếu định dạng d/m/Y

• Tìm với regex <[^>]+data-bs-toggle="dropdown"[^>]+>(^<span)*<span[^>]+caret kết quả show ra nếu trong thẻ đó có class="caret" thì xóa phần tử caret đi
• Tìm từ khóa select2. Trong các kết quả show ra
  • Xóa gọi CSS
  • Bổ sung vào select size="1"
• Tìm list-inline, trong các ul có class đó thẻ link cần bổ sung class="list-inline-item"
• Tìm class="modal-header", bên trong các thẻ đó đổi button sau cái modal-title. Đổi class của button từ close sang btn close, nếu trong button có html thì làm rỗng nó
• Xem xét sửa những nút mở trình quản lý file sang cách 2 hoặc 3 theo hướng dẫn này https://wiki.nukeviet.vn/programming5:module:file-manager, có thể tìm bằng từ khóa nv_open_browse
• Tìm các form-group xem xét đổi thành mb-3
• Tìm data-toggle="tooltip" trong các kết quả có được thêm từ data-* thành data-bs-*
• Tìm data-toggle="collapse" đổi thành data-bs-toggle="collapse" và thẻ div đóng mở của nó thay class in thành show
• Tìm form-inline tại các form này cần dùng gird-system của Bootstrap để tùy cơ ứng biến

Chuyển từ Xtemplate sang Smarty

Nội dung này bạn có thể lựa chọn làm hoặc không. Phần Smarty bạn có thể tham khảo một số module trong nhân hệ thống như news, page và tài liệu của Smarty tại đây: https://smarty-php.github.io/smarty/stable/getting-started/#installation