NỘI DUNG
THỰC TRẠNG TRƯỚC KHI THỰC HIỆN CÁC GIẢI PHÁP SÁNG KIẾN 2 2 NỘI DUNG, PHƯƠNG PHÁP THỰC HIỆN SÁNG KIẾN
Trong thời đại chuyển đổi số, môn tin học đóng vai trò quan trọng trong việc giúp học sinh giải quyết các vấn đề thực tiễn Tuy nhiên, việc môn tin chưa được đưa vào thi tốt nghiệp và đại học khiến nhiều học sinh và phụ huynh không nhận thức được tầm quan trọng của nó Các chương trình lập trình hiện tại chưa đáp ứng được nhu cầu ứng dụng cụ thể, và hầu hết học sinh thiếu kiến thức về các ngôn ngữ lập trình như HTML, CSS, JavaScript, Photoshop, PHP và cơ sở dữ liệu MySQL Do đó, việc tạo ra một trang thương mại điện tử như http://thanhchuong.net trở nên khó khăn, buộc giáo viên phải cân nhắc lựa chọn mã nguồn mở phù hợp để giải quyết vấn đề.
2 NỘI DUNG, PHƯƠNG PHÁP THỰC HIỆN SÁNG KIẾN
Chọn mã nguồn Nukeviet, hướng dẫn học sinh cài đặt trên môi trường
Localhost qua phần mềm XAMPP và thực thi các dự án thương mại điện tử trên PC hoặc Laptop với hệ điều hành Windows 10 64bit
2.1.1 : Vào links trang chủ nukeviet để download mã nguồn viết web
Link : https://nukeviet.vn/vi/download/ma-nguon/NukeViet-4-4-04.html
2.1.2 XAMPP là một phần mềm cho phép giả lập môi trường server hosting ngay trên máy tính của bạn, cho phép bạn chạy demo website mà không cần phải mua hosting
Links : https://www.apachefriends.org/download.html chọn bản 8.1.4 / PHP 8.1.4
2.1.3 Cài đặt Xampp sau khi đã download
2.1.4.Tạo CSDL để cài đặt Nukeviet
- Bật Start apache và MySQL như hình sau
- Chọn Admin ở nhãn MySQL để tạo CSDL hộp thoại localhost / 127.0.0.1
| phpMyAdmin 5.1.3 xuất hiện chọn new, tiếp theo đánh tên CSDL cần
4 tạo vào ô Database name : đánh tên CSDL cần tạo thanhchuong và chọn Create như hộp thoại sau :
2.1.5.Cài đặt website với mã nguồn nukeviet 4.4.04 khi đã có CSDL rỗng thanhchuong.sql vừa tạo :
- Sau khi download mã nguồn nukeviet 4.4.04 ở trang chủ nukeviet.vn hướng dẫn học sinh cài như sau :
+ Giải nén và copy mã nguồn vào thư mục c:\xampp\htdocs và đổi tên thư mục thành thanhchuong Như hình sau :
+ Vào trình duyệt web google chomre gõ http://localhost/thanhchuong quá trình cài đặt đang diễn ra như hình sau :
5 + Chọn ngôn ngữ cài đặt tiếng việt rồi chọn next để tiến hành quá trình cài đặt hộp thoại xuất hiện như sau :
6 + Chọn bước kế tiếp để tiến hành cài đặt hộp thoại xuất hiện như sau :
+ Chọn bước kế tiếp để tiến hành cài đặt hộp thoại xuất hiện như sau :
+ Bước tiếp theo cấu hình CSDL :
Để kết nối cơ sở dữ liệu (CSDL) và nhập dữ liệu vào CSDL thanhchuong.sql, bạn cần chọn thực hiện với tên người dùng là root (không cần mật khẩu do đã cài Xampp trên PC) Hộp thoại sẽ xuất hiện như sau:
* Tài khoản: admin( để vào phần backend của web – phần quản trị web)
* Mật khẩu: mật khẩu để vào phần quản trị web
* Chọn câu hỏi bảo mật để phục hồi mật khẩu nếu sau này quên
Chọn thực hiện để hoàn thành cài đặt, hộp thoại xuất hiện có nghĩa đã cài đặt thành công
+ Chọn xem trang hoặc đăng nhập vào phần quản trị để xem kết quả
* Chọn xem trang chủ giao diện như sau :
* Chọn đăng nhập quản trị theo link : http://localhost/thanhchuong/admin
Qua bước 5 học sinh đã hình dung ra website sẽ gồm 2 phần
* FrontEnd : Là giao diện trang web để tương tác với người dùng
* BackEnd : Là giao diện quản trị web để người quản trị đưa dữ liệu, quản trị phân quyền cho website( mà người dùng không nhìn thấy)
Nukeviet cung cấp nhiều chức năng đa dạng, cho phép người dùng dễ dàng tùy biến giao diện và cài đặt các module theo nhu cầu Học sinh có thể tham khảo các website hiện có trên internet để tìm hiểu và áp dụng những ý tưởng sáng tạo vào việc thiết kế và phát triển trang web của mình.
Với giao diện PC trang http://thanhchuong.net học sinh thiết kế như sau( vẽ bằng phần mềm Paint hoặc Photoshop – ưu tiên Photoshop) :
Với thiết bị khác đã có Boottrap bắt giao diện hiển thị
Vậy website http://thanhchuong.net sẽ gồm các chức năng :
* Trang chủ gồm các menu : Đặc sản : Giới thiệu về các dịch vụ đặc sản của thanh chương như : Nhút Thanh
Chương địa chỉ uy tín làm sản phẩm, Gà Thanh Chương …
Dịch vụ : Giới thiệu các khách sạn, nhà nghỉ uy tín trên địa bàn …
Chợ mua bán là nền tảng trao đổi hàng hóa, cho phép người dùng trên toàn quốc đăng tin mua bán sản phẩm Trang web này có chức năng phân quyền cho các thành viên, giúp họ dễ dàng đăng bài và tìm kiếm sản phẩm cần thiết.
Từ điển : Giới thiệu và tra từ điển tiếng dân tộc thái sinh sống Thanh Chương hơn
Các địa danh : Giới thiệu các địa danh nổi tiếng và các khu di tích lịch sử tại
Thanh Chương( như đền Bạch Mã, Đảo Chè ….)
- Giới thiệu cấu trúc thư mục và tệp của nukeviet
+ Gồm các thư mục và tệp như hình sau :
Bài viết này sẽ hướng dẫn học sinh cách sử dụng các thư mục cơ bản để phát triển ứng dụng web, dựa trên nền tảng kiến thức lập trình C++ và hệ quản trị cơ sở dữ liệu Access Qua đó, học sinh sẽ nắm bắt được quy trình tổ chức và quản lý các thư mục, giúp tối ưu hóa việc xây dựng và triển khai ứng dụng web hiệu quả hơn.
* Thứ nhất : Thư mục liên quan đến chỉnh sửa giao diện với kiến thức cơ bản HTML, CSS, Bootstrap, Xtemplate, Photoshop đó là thư mục thems
Thư mục themes của nukeviet có cấu trúc như sau :
Gồm 3 thư mục với 3 giao diện
+ admin_default : Giao diện quản trị( BackEnd)
+ default : Giao diện bên ngoài web( FrontEnd)
+ mobile_default : Giao diện mobile
Hướng dẫn học sinh tuỳ biến với giao diện FrontEnd với thư mục quản lý là default có cấu trúc thư mục như sau :
Trước khi chỉnh sửa giao diện, học sinh cần lưu ý sao chép giao diện mặc định thành một giao diện mới để tránh ảnh hưởng đến việc nâng cấp hệ thống Nukeviet sau này Hãy đổi tên giao diện mới thành "thanhchuong" sau khi sao chép.
Như vậy sau thực hiện công việc trên thư mục thems nukeviet như sau :
Như vậy mọi tuỳ biến với giao diện ta sẽ tuỳ biến ở thư mục thems có tên thanhchuong gồm cấu trúc như sau :
File them.php là một thành phần quan trọng, chứa các hàm dùng để gọi các file cần thiết cho việc tạo giao diện, bao gồm CSS, Bootstrap, JavaScript và các module khác.
- Do ban đầu mới làm web nên chỉ chú tâm các thư mục chỉnh giao diện
* Liên quan đến bố cục trình bày trong thư mục layout có cấu trúc như sau :
* Thiết kế giao diện từ đầu nên hướng dẫn học sinh quan tâm đến layout có tên layout.main.tpl có cấu trúc như sau :
Hướng dẫn học sinh đăng nhập vào BackEnd để thiết lập giao diện theo thiết kế ban đầu Để thực hiện, hãy truy cập vào đường link: http://localhost/thanhchuong/admin/.
Nhập tên truy cập : admin
Mật khâu : nhập mật khẩu đã đặt
Xuất hiện giao diện như sau :
Chọn giao diện đã được thiết kế bởi Thanh Chuong, sau đó vào phần quản lý giao diện Tiếp theo, thiết lập layout bằng cách chọn layout chính và lưu tất cả các thay đổi.
2.1.7 Chỉnh sửa kéo thả Block, CSS, cài modul Slide ảnh và modul Shop
- Tuỳ biến các khối block dùng chức năng kéo thả có sẵn ở nukeviet
- Chính sửa menu mở style.css trong thư mục them của thanhchuong có cấu trúc như sau( mở bằng notepad++)
#menusite navbar-default { background-color: #428BCA; border-bottom-color: #428BCA; border-bottom-width: 1px; border-bottom-style: solid; border-top-left-radius: 5px; border-top-right-radius: 5px; z-index: 1;
Để thay đổi màu nền và viền của menu, học sinh có thể sử dụng kiến thức CSS cơ bản và lấy mã màu từ Photoshop để tùy biến giao diện một cách linh hoạt Bên cạnh đó, việc kiểm tra website trên mọi thiết bị có thể thực hiện bằng cách nhấn chuột phải vào khu vực cần thay đổi, chọn kiểm tra và sau đó chọn kiểu hiển thị.
- Tiếp theo hướng dẫn học sinh cài modul Shop( để tạo trang bán hàng) và modul slide ảnh như sau :
+ Vào links tại trang Nukeviet để Download :
* Modul Shop : https://nukeviet.vn/vi/store/modules/shops
* Modul : Slide ảnh : https://nukeviet.vn/vi/store/modules/silder
+ Sau khi Download xong hướng dẫn học sinh vào cài đặt 2 modul này như sau :
* Đăng nhập vào quản trị
* Chọn Menu Mở rộng và chọn cài đặt gói ứng dụng để cài đặt
* Cài đặt thành công như hình sau(có thêm 2 modul shop và slider) :
18 Sau khi cài thành công modul Shop vào menu chợ mua bán ở trang chủ có giao diện như sau( gồm chọn sản phẩm, giỏ hàng, đặt hàng … ) :
Vấn đề thiết kế giao diện cơ bản đã được thực hiện, và khi giao diện đạt yêu cầu thiết kế, cần hướng dẫn học sinh cách đăng bài trong phần quản trị Dữ liệu sẽ được lấy từ nhiều bảng cơ sở dữ liệu khác nhau.
Việc thiết kế cơ sở dữ liệu (CSDL) cho một trang thương mại điện tử với 128 bảng dữ liệu là vô cùng quan trọng, giúp học sinh nhận thức rõ giá trị của CSDL quan hệ Qua đó, các em có thể liên hệ với bài học về "Liên kết giữa các bảng" trong sách giáo khoa Tin học lớp 12, trang 57, để hiểu sâu hơn về vai trò của khóa chính trong bảng.
2.1.8 Bài tập dự án tra cứu từ điển tiếng dân tộc thái do học sinh thực hiện
Sau khi hoàn thiện việc tạo website với giao diện cơ bản, học sinh lớp 11A1 và lớp 12K trường THPT Thanh Chương 1 sẽ tham gia bài tập nhóm nhằm thúc đẩy việc học lập trình và thiết kế cơ sở dữ liệu Các em sẽ được chia thành nhóm để thực hiện dự án viết module tra cứu từ điển, sử dụng dữ liệu thu thập từ bảng Excel.
- Các nhóm tìm hiểu làm sao để đưa dữ liệu thu thập từ dạng Excel sang SQL ?
- Quá trình tạo bảng dạng CSDL quan hệ như trong Acess để import dữ liệu từ Excel ?
Sau quá trình tìm hiểu, các em đã phát triển phương pháp chuyển dữ liệu từ Excel sang SQL một cách gián tiếp Cụ thể, phương pháp này bao gồm việc chuyển đổi file Excel sang định dạng file CSV, sau đó tiến hành import vào SQL Kết quả cuối cùng cho thấy dữ liệu đã được import thành công với tổng số 1187 từ.
M ỘT SỐ KẾT LUẬN
Kết quả nghiên cứu cho thấy phương pháp dạy học theo dự án có vai trò quan trọng trong việc đổi mới giáo dục, giúp phát triển năng lực học sinh Đề tài đã được thử nghiệm thành công tại trường THPT Thanh Chương 1, nhận được phản hồi tích cực từ giáo viên và học sinh Nghiên cứu tập trung vào ứng dụng mã nguồn Nukeviet, phân tích nhu cầu thực tiễn để thiết kế các dự án, tạo hứng thú cho học sinh và khuyến khích tự khám phá kiến thức Trong thời gian tới, tôi sẽ tiếp thu ý kiến từ đồng nghiệp để hoàn thiện đề tài và phát triển hệ thống thi trắc nghiệm online trong năm sau.
Dưới đây là một số kinh nghiệm cá nhân mà tôi đã áp dụng và chia sẻ, mang lại kết quả tích cực Tuy nhiên, đây không phải là phương pháp tối ưu nhất, nên tôi xin trình bày để các đồng nghiệp tham khảo Rất mong nhận được ý kiến và đóng góp từ mọi người để tôi có thể hoàn thiện bản thân và đạt được kết quả tốt hơn.
M ỘT SỐ KIẾN NGHỊ
Từ kết quả thu được, tôi nghĩ nên triển khai rộng rãi để các giáo viên tham khảo và ứng dụng vào cho học sinh trường mình
