Giai đoạn thứ 1: Là bắt đầu xây 4 tòa nhà từ năm 2008 như: Tịa nhà văn phịng, tịa nhà lớp học(có 25 lớp), tịa nhà thư viện, tịa nhà hội trường. Thi cơng trong một năm thì hồn thành trong đó bao gồm có các thiết bị dành cho việc giảng dạy, thực hành,đồ nội thất đầy đủ có giá trị khoảng 48 tỷ Đồng và chính thức khai trương vào ngày 02/9/2009 tức là ngày Quốc khánh của Việt Nam tròn 64 năm.
Giai đoạn thứ 2: Là năm 2012 đã xây dựng sân bóng đá(có khán đài), nhà gửi xe, cây cảnh(cây bong mát) cài đặt network và các thiết bị thông minh như: bẳng thông minh, thiết bị multimedia cho phịng học hai ngơn ngữ, phòng multimedia…dùng thời gian khoảng 3 tháng và có giá trị 8,7 tỷ đồng.
Hình 3.2. Cựu Tổng bí thư Nơng Đức Mạnh đến thăm trường 2010
Giai đoạn thứ 3: Vì nhu cầu của các phụ huynh mong muốn đưa con chaú vào học tại trường này càng năm càng tăng, để đáp ứng nhu cầu của xã hội cho nên nhà trường và sở giáo dục thủ đơ Viêng Chăn thì ưu đãi cho ban hợp tác Lào-Việtnam (chính phủ Việtnam) đồng chí Nguyễn Tấn Dũng bộ trưởng, bộ kế hoạch và đầu tư của Việtnam đã đến thăm trường năm 2015. Sau đó chính phủ Việtnam đã đồng ý xây một tịa nhà học 3 tầng mới có 12 phịng cho trường THPT hữu nghị Lào-Việtnam, bắt đầu thi cơng vào tháng 12/2017-12/2018 có giá trị 22 tỷ Đồng (tất cả 3 giai đoạn là 78,7 tỷ Đồng).
Chính phủ Việtnam và Lào đã ưu tiên, quan tâm và theo dõi nhà trương thường xuyên như mỗi các lãnh đạo cấp cao Việtnam đến thăm Nước Lào chắc chắn là phải vào thăm trường THPT Hữu nghị lào-Việtnam.
Hình 3.3: Bà Tịng Thị Phóng đến thăm trường ngày 25/02/2019
Mới nhất, ngày 15/11/2019, đồng chí cựu tổng bí thư Ban chấp hành Trung ương Đảng Cộng Sản Việt Nam(Cựu tổng bí thư Nơng Đức Mạnh) đã lại đến thăm nhà trường một lần nữa, trong đó cịn cho một số tiền để phát triển nhà trường và các thiết bị giảng dạy như: Máy chiếu…
Hình 3.4: Cựu tổng bí thư Nơng Đức Mạnh đến thăm trường ngày 15/11/2019
3.1.2. Việc hợp tác
Ngoài ra việc xây dựng và phát triển nhà trường, chính phủ Việtnam cịn cấp học bổng cho các giáo viên của trường sang học tập và đào tạo tại Việtnam mỗi năm 2 giáo viên trong đó cũng cấp học bổng cho các học sinh học giỏi sang học tại các trường Đại Học của Việtnam, một năm 10 học sinh, từ năm 2010-2020 có sinh viên của trường THPT hữu nghị Lào-Việtnam đã tốt nghiệp và đang học tại Việtnam là 100 sinh viên.
Hình 3.5: Trường THPT Hữu Nghị Lào-ViệtNam
Theo sự hỗ trợ của Bộ Giáo dục và Đào tạo Việt Nam và Bộ Giáo dục và Thể thao Lào, trường THPT hữu nghị Lào-Việt Nam đã hợp tác với trường THPT Kim Liên Hà Nội từ năm 2011.
Hình 3.6 : Trường THPT Kim Liên Hà Nội
Ngoài ra việc giảng dạy và học tập rồi, trường hữu nghị Việt Nam-Lào cịn tơn trọng những văn hóa, phong tục truyền thống tốt đẹp của hai Nước như: ngày lễ, ngày tết, ngày quốc khánh, ngày giải phóng… Nhà trường ln ln tổ chức các hoạt động đó để nhớ cơng ơn và tiếp tục giữ gìn những văn hóa, phong tục truyền thống tốt đẹp của hai nước anh em Việt Nam-Lào này để ở bên chúng ta mãi mãi.
3.2. Phân tích thiết kế các chứng năng của web.
3.2.1 : Đặc tả mơ hình
Hình 3.7: Đặc tả mơ hình
3.2.2 : Biểu đồ Use Case
Ta đi xác định các tác nhân của hệ thống ở đây hệ thống được chia làm hai phần:
- Người dùng: Là tác nhân đóng vai trị chính trong giao diện ngồi của website. Có các chức năng về xem, tìm kiếm các thơng tin về tin tức của nhà trường
- Người quản trị: Là tác nhân chịu trách nhiệm quản lý tồn bộ thơng tin của website giới thiệu tin tức. Có các chức năng quản lý bài viết, danh mục; đăng nhập;
Tác nhân Use Case Thành viên (Người truy cập) - Đăng ký thành viên - Đăng Nhập - Bình luận
- Tìm kiếm bài viết
- Xem thông tin về bài viết
Người quản trị
(Administrator)
- Đăng nhập vào hệ thống
(Cập nhật thông tin về bài viết và thành viên )
- Quản lý bài viết
(thêm, sửa, xóa thơng tin bài viết)
- Quản lý thành viên (Người truy cập)
- Quản lý các bình luận bài viết
Trong phần dành cho thành viên gồm có Tác nhân Thành viên Tác nhân này sẽ tham gia vào các Use Case sau :
Hình 3.9: Biểu đồ Usecase cho tác nhân người sử dụng
Hình 3.10: Biểu đồ usecase tác nhân người quản trị
Ngoài 2 tác nhân “Người truy cập” và “Người quản trị” cịn có tác nhân “Khách vãng lai” là thành viên chưa đăng ký là thành viên của website họ chỉ có thể tìm kiếm, xem thơng tin.
3.4. Thiết Kế
Thiết kế cơ sở dữ liệu
Hình 3.11. Thiết kế cơ sở dữ liệu
Bảng sản phẩm (Products)
Tên thuộc tính Khóa Kiểu dữ liệu Diễn giải
Id * bigint Mã tin tức
Ten Varchar Tên bài viết(tin tức)
Thuonghieu Datetime Ngày đăng sản phẩm
Giá Float Mã loại
Kichthuoc Varchar Kích thước
Chieudai Varchar Chiều dài
Chatlieu Varchar Chất liệu
Mota Text Mô tả tin tức
Luotxem Int Lượt xem
Category_id Bigint Mã danh mục
Bảng mã loại (categorys)
Tên thuộc tính Khóa Kiểu dữ liệu Độ rộng Diễn giải
Id * bigint 10 Mã loại
Ten Varchar 10 Tên loại
Bảng thành viên ( user)
Tên thuộc tính Khóa Kiểu dữ liệu
Diễn giải
Id * bigint Mã thành viên
Name Varchar Tên thành viên
Email Varchar Email đăng nhập
Password Varchar Mật khẩu
Remember passwword Varchar Nhớ mật khẩu
Level Int Phân bậc admin hoặc
thành viên Bảng bình luận ( comments)
Tên thuộc tính Khóa Kiểu dữ liệu
Diễn giải
Id * bigint Mã bình luân
new_id * bigint Mã tin tức
Noidung Varchar Nội dung bình luận Bảng đánh giá thích
Tên thuộc tính Khóa Kiểu dữ liệu Diễn giải
Id * bigint Ma thích
Use_id bigint Mã thành viên đánh giá
Produc_id * bigint Mã sản phẩm được đánh giá
Thiết kế sự thân thiện của trang web
- Trang web cần điều chỉnh phù hợp với các màn hình khác nhau về kích thước, độ phân giải, và ngôn ngữ Lào, Việt
- Trang web cần được thiết kế hai chức năng: Cung cấp thông tin và tác nghiệp các công việc quản lý
- Giao diện của trang web có bố cục hài hịa giữa màu sắc, font chữ và các hình ảnh đồ họa đồng thời có nét đặc trưng của nhà trường.
- Trang web cần được thiết kế phù hợp với người truy cập là người Việt và Lào với tùy chỉnh của mỗi phiên bản có khác nhau chút ít (vì phong tục, thói quen, thị hiếu của người Việt/Lào đồng thời font chữ Lào Việt cũng khác nhau
- Trang web có hỗ trợ cho cơng việc tương tác giữa nhà quản trị, Ban giám hiệu, giáo viên với học sinh và phụ huynh học sinh
- Trang web cũng có thể là công cụ trao đổi thông tin, tương tác giữa nhà trường với các đối tác tại Lào và Việt Nam
- Trang web sử dụng các giải pháp đã phân tích ở mục 2.2 và 2.3 Chương 2.
3.5. Cài đặt trang web
3.5.1. Cài đặt chương trình tạo máy chủ website (web server)
Đầu tiên mình cần cài XAMPP thường được dùng để 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 [14].
Hình 3.12. Cài đặt XAMPP để làm máy chủ web
3.5.2. Cài đặt phần mềm nguồn mở Wordpress và theme (Open Source Software)
- Cài đặt mã nguồn mở WordPress. mình cịn cần thiết lập vài cơng cụ nữa để có thể thực sự mang thiết kế đến webstie, cần một theme trước, theme này sẽ phù hợp với thiết kế có trong đầu làm giao diện cho webstie. nếu như ta đang sử dụng WordPress. Chúng ta nên sử dụng theme miễn phí để làm quen với nền tảng này trước và cũng có thể chọn theme trong danh bạ theme chính thức của WordPress:
- Cài theme cho Wordpress : Có hàng ngàn themes cho chúng ta lựa chọn.
Hình 3.14. Cài đặt theme cho wordpress
3.5.3. Giao diện của WebSite
Sau việc tạo trang web thực tế, em đã được trang web như sau:
Giao diện tiếng Lào
- Trang chủ:
Hình 3.16. Một số hình ảnh về Trang chủ Website của Trường THPT Hữu Nghị Lào-ViệtNam
- Trang đăng ký học online.
- Trang quản lý tin tức
- Giao diện các thiết bị di động
(a) Trên mobile
(b) Trên ipad
- Giao diện Desktop
Hình 3.20. Giao diện Desktop
Giao diện tiếng Việt tương tự:
- Trang chủ:
Hình 3.21. Giao diện trang chủ tiếng Việt
Hình 3.22. Giao diện trang liên hệ
3.6. Đánh giá về tính thân thiện của trang web
Dựa trên các tiêu chí và kỹ thuật tạo trang web đảm bảo tính thân thiện người
dùng, quá trình cài đặt, luận văn đã đề xuất và thực hiện những kết quả như sau: - Giao diện có cấu trúc linh hoạt tủy biến theo kích thước của thiết bị hiển thị như trên máy tính PC có các kích thước màn hình khác nhau; trên ipad, điện thoại thơng minh có các kích thước khác nhau.
- Cấu trúc thông tin được bố trí phân đoạn riêng để dễ theo dõi và sử dụng, người dùng có thể khơng cần trình độ tin học cao vẫn có thể theo dõi dễ dàng các thơng tin trên web (có vùng cho giáo viên, sinh viên; bố cục trang tiếng Việt, trang tiếng Lào có tính đến thói quen và phong cách của mỗi nền văn hóa)
- Các chức năng được thiết kế đáp ứng nhu cầu của nhà trường (các đối tượng sử dụng khác nhau như Ban Giám hiệu, giáo viên, phụ huynh, học sinh…). Ví dụ như để đăng ký học
- Có chức năng tương tác giữa người xem (audients) và người quản trị để tiếp thu ý kiến điều chỉnh để đáp ứng tốt hơn làm cho website ngày càng hoàn thiện. Đây là nhiệm vụ lâu dài, dù bảo vệ xong luận văn thì em vẫn tiếp tục bảo trì và phát triển phục vụ cho nhà trường.
- Có ngơn ngữ tiếng Lào và tiếng Việt: Đây là mục tiêu quan trọng cho nhà trường vì trường có hợp tác với nhiều trường THPT và các cơ sở giáo dục của Việt Nam. Để thuận lợi hơn cho việc nắm bắt thông tin và triển khai các hoạt động hợp tác, việc có trang web song ngữ có ý nghĩa quan trọng.
KẾT LUẬN
1. Kết quả đạt được
Sau quá trình học tập, tìm hiểu và sự hướng dẫn của giáo viên hướng dẫn em đã hoàn thành luận văn với các kết quả chính: Xây dựng cài đặt trang web cho trường THPT Hữu nghị Lào – Việt Nam với các cơng nghệ hiện đại và tính năng thân thiện trên các nền tảng và thiết bị khác nhau như trên máy PC, trên thiết bị di động.
Trang web đã được lãnh đạo nhà trường đánh giá cao và quyết định sử dụng phục vụ công tác quản lý và đào tạo tại trường, đồng thời hỗ trợ tăng tình đồn kết giữa hai dân tộc Lào – Việt vì có hai ngơn ngữ song song. Trang web cũng đã được thử nghiệm đưa lên trên địa chỉ IP của nhà cung cấp dịch vụ.
Xây dựng website tin tức thân thiện với thiết bị di động đã hoàn thành được những nội dung chính sau: Phân tích và đánh giá các yêu cầu của website friendly với các thiết bị di động cơ bản; Vận dụng mã nguồn mở wordpress vào việc xây dựng website; Phần giao diện người dùng: giao diện thân thiện, cho phép người xem dễ dàng xem tin tức , tìm kiếm , đăng bài, ý kiến cho mỗi tin tức mà website cung cấp; Phần quản trị: Đã xây dựng được hệ thống quản lý dữ liệu của website, giúp cho những người quản trị dễ dàng quản lý thơng tin, dữ liệu, xem, thêm, xóa , cập nhật dữ liệu.
Giải pháp xây dựng website thân thiện được nghiên cứu và phát triển thành vấn đề học thuật và ứng dụng thực tiễn, luận văn mới đi sâu vào hướng ứng dụng các giải pháp kỹ thuật và các kinh nghiệm thực tế do vậy có thể cịn những hạn chế nhất định
2. Hướng phát triển
Tiếp tục ứng dụng công nghệ và công cụ mới để nâng cấp trang web đáp ứng tốt hơn nhu cầu của nhà trường (bổ sung nguồn thông tin, các chức năng nghiệp vụ như quản lý và thông tin khoa học
Tiếp tục nghiên cứu về các giải pháp thân thiện cho các ứng dụng khác như các phần mềm chạy trên nền web, các trang web thương mại…
TÀI LIỆU THAM KHẢO
- Tài liệu tiếng Việt
[1] Nguyễn Văn Ba, phân tích thiết kế hệ thống, NXB KHKT, 2005
[2] Khuất Thùy Phương “Lập trình Web với ứng dụng PHP” - Tập 1, NXB Đại học quốc gia TP Hồ Chí Minh, 2012
[3] Đậu Quang Tuấn, Tự Học Thiết Kế Trang Web Bằng Java Script, NXB Giao thông vận tải, 2006
[4] Jermy Osborn & Nhóm AGI Creative, HTML5 Và CSS3 Thiết Kế Trang Web Thích Ứng Giàu Tính Năng, NXB Bách Khoa – Hà Nội, 2017
- Tài liệu tiếng Anh
[5]. Larry Ulllman, “PHP for the Web: Visual QuickStart Guide”, Publisher : Peachpit Press; 5th edition (June 29, 2016);
[6]. Patrick McNeil , “Mobile Web Designer's Idea Book: The Ultimate Guide to [7]. McNeil, Patrick“Trends, Themes and Styles in Mobile Web Design”, Publisher: [7]. McNeil, Patrick“Trends, Themes and Styles in Mobile Web Design”, Publisher:
HOW Books, 2008
[8]. Ethan Marcotte “Responsive Web Design”, Published in CSS, Interaction Design, Layout & Grids, 2010.
[9]. http://www.wordpress.org [10]. https://www.wix.com/ [11]. https://www.websitebuilder.com/ [12]. https://gtvseo.com/seo-la-gi/ [13]. https://www.webico.vn/ [14]. https://thachpham.com/ [15]. https://www.awwwards.com/websites/responsive-design/
PHỤ LỤC
Đoạn code CSS làm cho website thân thiện với các thiết bị di động như sau:
- Code làm cho website thân thiện với điện thoại di động như:
ms-thumb-list{ display: none; } .master-slider{ width: 100%; }
.post-without-img .box-blog-post .box-image { width: 20% !important;
float: left; }
.post-without-img .box-blog-post .box-text{ width: 80%!important; float: left; padding-left: 5px; } .header-top{ display: none; } .page-wrapper{ padding-top: 30px; } .large-8 { max-width: 100%; flex-basis: 100%; } .large-4 { max-width: 100%; flex-basis: 100%; } .blog-archive .entry-image { width: 100%; } .blog-archive .entry-content{ width: 100%;
}
- Code làm cho website thân thiện với Máy tính bảng (Ipad) như:
header-top{ display: none; } .page-wrapper{ padding-top: 30px; }
- Code làm cho các thiết bị friendly website tự động:
title{ background: #23A5E3; color: #fff; padding-left: 2px; font-size: 16px; } .title-center{ color: #0557d8; font-weight: bold; background: #e6e6e6; font-size: 18px; } .widget-title { color:#23A5E3; } .header-bottom .flex-row{ background: #45b5d6; height: 50px; } .row-footer{ background: #45b5d6; padding-top: 30px; border: 1px solid #6d6df7; } .widget-area { font-size: 14px; } .secondary{ background: #45b5d6; } .post-without-img .post-item{
padding-bottom: 2px; }
.post-without-img .post-item .box-blog-post{ border-bottom: 1px solid #ace4ff; } .page-right-sidebar>.row,.row-large{ padding-top: 30px; background: #FFF; } .row-divided>.col+.col:not(.large-12), .col-divided+.col{ } .is-divider{ display: none; } .absolute-footer { display: none; } .nav-dropdown>li.nav-dropdown-col{ display:block } .nav-dropdown{ border:1px solid #ddd; padding:0 }
.nav-dropdown .nav-dropdown-col>a, .nav-dropdown li a{ font-weight:normal !important;
text-transform:none !important; font-size:15px;
font-weight:500 }
.nav-dropdown .nav-dropdown-col>ul li:hover{ }
.nav-dropdown-default>li:hover>a, .nav-dropdown .nav-dropdown- col>ul li:hover>a{ color:#888; } .nav-dropdown-default>li:hover{ } .nav-dropdown-default>li>a{
border-bottom:0 !important } .nav-dropdown-has-arrow li.has-dropdown:before{ border-width: 10px; margin-left: -10px; } .nav-dropdown .nav-dropdown-col>ul{ border: 1px solid #d2d2d2; margin-top:-40px; box-shadow: 2px 2px 5px #828282; display:none; position: absolute; left: 100%; z-index: 9; background: white; min-width: 240px; } .nav-dropdown>li.nav-dropdown-col{ width:100%; border-right:0 } .nav-dropdown .nav-dropdown-col>ul li a{ padding:10px; text-transform: none;color:black }
.header-nav li.nav-dropdown-col:hover >ul{ display:block !important} .large-columns-5 div{ } .header-top{ position: absolute; top: 230px; left: 30px; right: 30px; max-height: 50px; z-index: -1;