Sáng kiến kinh nghiệm Phát triển năng lực học lập trình cho học sinh qua các ứng dụng thực tế

t
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
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 :
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õ  quá trình cài đặt đang diễn ra như hình sau :
+ 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 :
+ 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 :
+ Chọn thực hiện để kết nối CSDL và đổ dữ liệu website vào CSDL đã tạo thanhchuong.sql, username root( không đặt pass vì cài Xampp ở PC) hộp thoại xuất hiện như sau :
Gõ tên site: thanhchuong
Tài khoản: admin( để vào phần backend của web – phần quản trị web)
Email:
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 : 
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)
2.1.6 . Giới thiệu các chức năng có sẵn trong nukeviet và cách tuỳ biến giao diện, cài modul trên ý tưởng của học sinh tham khảo các website hiện có trên internet.
Với giao diện PC trang  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  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 : Trang bán hàng trao đổi các sản phẩm cần mua bán trên địa bàn và mọi miền tổ quốc, có chức năng phân quyền cho các thành viên đăng bài.
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 1186 từ.
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 :
- Giới thiệu cho học sinh cách sử dụng các thư mục cơ bản để tạo ứng dụng web với kiến thức đã có trên nền tảng lập trình C++ và hệ quản trị CSDL Acess.
* 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 :
Như vậy sau thực hiện công việc trên thư mục thems nukeviet như sau :
*** Lưu ý với học sinh : Trước khi chỉnh sửa giao diện để không ảnh hướng sau này nâng cấp hệ thống nukeviet ta cần copy them default thành 1 them mới và đổi tên them cần chỉnh sửa( ở đây ta copy them default và đổi tên thành them mới có tên thanhchuong)
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 đầu tiên các em cần hiểu được đó là file them.php gồm các hàm để thực hiện gọi các file tạo nên giao diện như css, bootstrap, javacrip, các modul 
- 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 :
* Tiếp đến hướng dẫn học sinh đăng nhập BackEnd để thiết lập giao diện như đã thiết kế từ đầu.
Đăng nhập vào BackEnd như sau : 
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 Thanh Chuong đã thiết kế và chọn quản lý giao diện rồi chọn thiết lập layout chọn layout main và chọn lưu tất cả thay đổi như hình sau :
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++)
Chọn
#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, border của menu, với kiến thức CSS cơ bản đã có hướng dẫn học sinh lấy mã màu bằng Photoshop để tuỳ biến giao diện linh hoạt và kiểm tra website chạy trên mọi thiết bị bằng nháy chuột phải vào vùng muốn thay đổi chọn kiểm tra rồi 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) :
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 ..) :
Như vậy vấn đề về thiết kế giao diện cơ bản đã được thực thi, khi có giao diện như ý tưởng thiết kế cần hướng dẫn học sinh đăng bài ở phần quản trị và dữ liệu được lấy từ rất nhiều bảng CSDL như sau :
Nhìn vào 128 bảng dữ liệu để hình thành một trang thương mại điện tử với đầy đủ chức năng thì việc thiết kế CSDL rất quan trọng. Từ đó học sinh thấy tầm quan trọng của CSDL quan hệ. Các em liên hệ với bài học ‘‘Liên kết giữa các bảng bài 7 trong SGK tin học trang 57 lớp 12’’( hiểu hơn về khoá chính trong bảng).
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 các em đã tạo được website với tuỳ biến giao diện cơ bản, tiếp tục cho làm bài tập nhóm để tạo động lực học lập trình và thiết kế CSDL. Chia nhóm các bạn lớp 11A1 và lớp 12K trường THPT Thanh Chương 1 để làm dự án viết modul tra cứu từ điển với dữ liệu được 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 thời gian tìm hiểu các em đã đưa ra phương pháp đưa dữ liệu từ Excel sang SQL bằng phương pháp gián tiếp là chuyển file EXCEL sang file CSV rồi import vào SQL đây là kết quả khi đã import dữ liệu thành công gồm 1187 từ :
Bước tiếp theo các nhóm tự viết Code PHP trong thẻ HTML để kết nối đến CSDL vừa import với sự hướng dẫn của giáo viên chuyển đổi từ Code C++ sang PHP( Do các em mới làm quen nên chưa viết được theo mô hình MVC và đóng gói trong Nukeviet được mà cho viết độc lập và chạy theo liên kết).
+ Các nhóm đã đưa ra Form đăng nhập để tra cứu
Dùng các thẻ HTML và CSS để tạo Form tra từ như sau :
Như vậy các em đã xác định được cần lấy dữ liệu từ người dùng nhập vào và so sánh với kết quả của bảng dữ liệu từ điển đã có để hình thành thuật toán tìm kiếm, duyệt. Cần kết nối CSDL với bảng đó, phương thức lấy dữ liệu đăng nhập tra từ là POST. Code File Index.php như sau :
nav{
background-color:#6699CC;
}
nav a{
display:inline-block; padding:10px;
font-size:14px; color: #FF9900;
font-weight:bold; text-decoration:none;
}
nav a:hover{
background-color:#006CB5;
}
Website Tra cứu từ điển tiếng thái
TRANG TRA CỨU TỪ ĐIỂN TIẾNG THÁI - Mọi thắc mắc xin liên hệ: 0912.533.519
GIỚI THIỆU |
NGÔN NGỮ |
TRUYỀN THỐNG |
ẨM THỰC |
 Nhập từ tiếng việt 
Form đăng nhập action cần thêm 1 file chitiet.php để hiển thị từ cần tra, hoặc báo không tồn tại. Code như sau :
<?php
$conn=new mysqli('localhost','root',"","thanhchuong"); mysqli_set_charset($conn,"utf8");
if (!isset($_POST['TV'])){ die('');
}
$tv=$_POST["TV"];
$sql="SELECT * FROM `thaiviet` WHERE TV='$tv'";
$ketqua=mysqli_query($conn,$sql);
$dem=0;
?>
 nav{
background-color:#6699CC;
}
nav a{
display:inline-block; padding:10px;
font-size:14px; color: #FF9900;
font-weight:bold; text-decoration:none;
}
nav a:hover{
background-color:#006CB5;
}
Website Tra cứu từ điển tiếng thái
TRANG TRA CỨU TỪ ĐIỂN TIẾNG THÁI - Mọi thắc mắc xin liên hệ: 0912.533.519
GIỚI THIỆU |
NGÔN NGỮ |
TRUYỀN THỐNG |
ẨM THỰC |
 Nhập từ tiếng việt 
<?php while($row=mysqli_fetch_array($ketqua))
{
echo ""."Tiếng việt:"." ".$row[1]."";
echo ""."Tiếng Dân Tộc Thái:"." ".$row[2]."";
$dem++;
}
?>
<?php
if($dem==0){ echo ""."KHÔNG TÌM THẤY TỪ BẠN CẦN TRA CỨU"."";}
?>
Học sinh xác định được công việc cần làm với ý tưởng trước đó vì vậy đoạn bôi đậm trên là công việc kết nối CSDL và các truy vấn với CSDL tương tự như Acess.
Xác định dùng phương pháp tìm kiếm tương tự C++ while($row=mysqli_fetch_array($ketqua))
{
echo ""."Tiếng việt:"." ".$row[1].""; echo ""."Tiếng Dân Tộc Thái:"."
".$row[2]."";
$dem++;
}
?>
<?php
if($dem==0){ echo ""."KHÔNG TÌM THẤY TỪ BẠN CẦN TRA CỨU"."";}
?>
Kết quả tra cứu tại trang :
+ Nếu nhập từ tra cứu là Tôi cho kết quả tiếng dân tộc Thái là Khoi
+ Nếu nhập từ tra cứu không có trong bảng dữ liệu tiếng