GIỚI THIỆU CÔNG NGHỆ XÂY DỰNG WEBSITE
Công nghệ Bootstrap
Công nghệ Bootstrap là nền tảng bao gồm các thư viện trình bày trang giúp cho việc phát triển giao diện Website trong nhiều môi trường đa nền tảng một cách nhanh chóng và dễ dàng hơn gọi là Responsive web Thiết kế Responsive Website là tạo ra website có khả năng tự động điều chỉnh giao diện web trên tất cả các thiết bị, từ PC đến các thiết bị di dộng như điện thoại, máy tính bảng Bootstrap tương thích với tất cả trình duyệt hiện đại như Chrome, Firefox, Internet Explorer, Safari, và Opera
Hình 2.1 Các thành phần của Bootstrap
Bootstrap là một front-end framework miễn phí giúp quá trình phát triển web được nhanh và dễ dàng hơn
Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, forms, buttons, tables, navigation, modals, image carousels… cũng như các plugin JavaScript tùy chọn
Bootstrap cũng cung cấp cho bạn khả năng tạo ra các responsive designs một cách dễ dàng
Dễ sử dụng: Bất kỳ ai có kiến thức cơ bản về HTML và CSS đều có thể bắt đầu sử dụng Bootstrap
Các tính năng đáp ứng (Responsive features): responsive CSS của Bootstrap điều chỉnh cho điện thoại, máy tính bảng và máy tính để bàn
Cách tiếp cận Mobile-first: Trong Bootstrap 3, mobile-first styles là một phần của core framework
Khả năng tương thích trình duyệt: Bootstrap tương thích với tất cả các trình duyệt hiện đại (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera)
Tiết kiệm thời gian, dễ sử dụng
Không tốn nhiều thời gian cho việc viết mã, mà chỉ cần sử dụng các lớp và mẫu thiết kế được định nghĩa sẵn của Bootstrap.
Công nghệ DotnetNuke
Website được phát triển trên DotnetNuke là nền tảng cho phép triển khai các Site mới một cách dễ dàng dựa trện việc khai báo kéo thả, khai báo các Module chức năng hiện có
DotNetNuke là một hệ thống quản lý nội dung mã nguồn mở viết bằng ngôn ngữ lập trình VB.NET trên nền tảng ASP.NET Đây là một hệ thống mở, tùy biến dựa trên skin và module DotNetNuke có thể được sử dụng để tạo các trang web cộng đồng một cách dễ dàng và nhanh chóng
Hình 2.2 Kiến trúc mã nguồn Net Nuke
DotNetNuke được phát triển dựa trên cổng điện tử của Microsoft giới thiệu như là một ứng dụng mẫu dựa trên nền tảng NET Framework
Một cài đặt DotNetNuke có thể phục vụ nhiều trang web, mỗi trang có thể có giao diện và cộng đồng người sử dụng riêng biệt Phiên bản hiện tại cũng cho phép chức năng đa ngôn ngữ
Quản lý nội dung trực quan: Với ADMIN ACCOUNT, người quản trị có thể chỉnh sửa bất cứ thông tin nào của hệ thống Website từ một kết nối Internet Công cụ Richtext Editor mới nhất, nhiều tính năng, cho phép người quản trị, biên tập có thể dễ dàng tạo ra các trang thông tin sống động, linh hoạt
Hệ thống MENU động hoàn chỉnh, tự động cập nhật theo cấu trúc Website, có khả năng thêm bớt, điều chỉnh bất kỳ trang web nào Có thể thay đổi cấu trúc website (Sitemap) ngay trên web
Quản lý nhiều giao diện: Giao diện độc lập, được phát triển riêng, được cung cấp công cụ quản lý nên hệ thống có thể thay đổi giao diện dễ dàng, và sử dụng đồng thời nhiều giao diện
Phân quyền chặt chẽ: Phân quyền truy xuất trên từng trang, từng module cho từng nhóm thành viên Có thể tạo ra nhiều nhóm thành viên khác nhau, mỗi nhóm có mỗi quyền truy xuất riêng
Quản lý Files/Folder: Có công cụ quản lý việc Upload files, Quản lý, phân quyền truy xuất các file, tài nguyên trên hệ thống qua giao diện Web của Portal
Dung lượng nhỏ gọn, dễ vận hành và cài đặt: Chỉ cần khoảng 50MB đĩa cứng là đã có thể chạy được Portal này cho một doanh nghiệp vừa và nhỏ Được phát triển trên môi trường Windows nên người quản trị dễ dàng thao tác trong quá trình cài đặt và vận hành
Hỗ trợ cơ chế Plug and Play (PNP) đối với các module Chỉ cần phát triển mới một module theo chuẩn của Portal, đóng gói, upload lên server là hệ thống tự nhận và đã có thể chạy được ngay, không cần phải tạm dừng website trong thời gian cập nhật
Dễ dàng nâng cấp và cập nhật thêm các chức năng mới: Khi muốn thêm hay chỉnh sửa các chức năng trên Portal, chỉ cần chỉnh sửa hoặc phát triển các chức năng theo chuẩn của Portal, sau đó upload lên Portal và chạy (không phải xây dựng lại hoàn toàn từ đầu dẫn tời giảm được thời gian và chi phí)
Hình 2.3 Kiến trúc khung ứng dụng triển khai trên NET NUKE
Với Nền tảng đã có, đề án tập trung vào việc nâng cấp giao diện tiếng việt web site khoa hiện nay đảm bảo tương thích với thiết bị smartphone, tạo mới Site tiếng anh đáp ứng các nhu cầu chức năng sau chính sau, với giao diện đẹp, thân thiện, tương thích thiết bị thông minh
Quản lý chuyên mục tin
Quản lý Hình ảnh, Video
Quản lý người dùng, phân quyền, kiểm duyệt tin
Chia sẽ qua Facebook, Twitter
Database SQL Server
SQL Server là gì? Microsoft SQL Server là một hệ thống quản lý cơ sở dữ liệu quan hệ được phát triển bởi Microsoft Microsoft SQL Server là một máy chủ cơ sở dữ liệu , có chức năng chính là lưu trữ và truy xuất dữ liệu theo yêu cầu của các ứng dụng phần mềm
Hình 2.4 Nền tảng quản trị CSDL SQLServer
Tính năng ưu việt của hệ quản trị CSDL:
SQL Server được Microsoft phát triển dựa trên RDBMS
SQL Server hệ quản trị cơ sở dữ liệu quan hệ đối tượng
SQL Server hỗ trợ ngôn ngữ truy vấn SQL
Cài nhiều phiên bản MS SQL khác nhau trên cùng một máy
Duy trì riêng biệt các môi trường sản xuất, phát triển, thử nghiệm
Giảm thiểu các vấn đề tạm thời trên cơ sở dữ liệu
Tách biệt các đặc quyền bảo mật
Duy trì máy chủ dự phòng.
Ngôn ngữ lập trình VB NET
Một trong những thành phần quan trọng ᴄủa NET là NET Frameᴡork Đâу là nền tảng ᴄho mọi ᴄông ᴄụ phát triển ᴄáᴄ ứng dụng (appliᴄation) NET.NET Frameᴡork bao gồm:
Môi trường ᴠận hành nền (Baѕe Runtime Enᴠironment)
Bộ ѕưu tập nền ᴄáᴄ loại đối tượng (a ѕet of foundation ᴄlaѕѕeѕ)
Môi trường ᴠận hành nền (Baѕe Runtime Enᴠironment) hoạt động giống như hệ điều hành ᴄung ᴄấp ᴄáᴄ dịᴄh ᴠụ trung gian giữa ứng dụng (appliᴄation) ᴠà ᴄáᴄ thành phần phứᴄ tạp ᴄủa hệ thống Bộ ѕưu tập nền ᴄáᴄ loại đối tượng (a ѕet of foundation ᴄlaѕѕeѕ) bao gồm 1 ѕố lớn ᴄáᴄ ᴄông dụng đã ѕoạn ᴠà kiểm tra trướᴄ, tỷ như: giao lưu ᴠới hệ thống tập tin (file ѕуѕtem aᴄᴄeѕѕ) haу ngaу ᴄả ᴄáᴄ quу ướᴄ ᴠề mạng (Internet protoᴄolѕ), … nhằm giảm thiểu gánh nặng lập trình ᴄho ᴄáᴄ ᴄhuуên gia Tin họᴄ
Do đó, ᴠiệᴄ sử dụng NET Frameᴡork giúp ta lập trình dễ dàng hơn ᴠì hầu như mọi ᴄông dụng đều đã đượᴄ уểm trợ
.NET Frameᴡork như là một tầng ᴄông dụng trừu tượng ᴄung ᴄấp dịᴄh ᴠụ trên hệ điều hành (nhìn dưới khía ᴄạnh ᴄung ᴄấp dịᴄh ᴠụ):
Hệ điều hành (OS) Deᴠiᴄe Driᴠerѕ
Harᴡare Componentѕ (Cương liệu) Để mọi ngôn ngữ lập trình ѕử dụng đượᴄ ᴄáᴄ dịᴄh ᴠụ ᴄung ᴄấp bởi NET Frameᴡork, Miᴄroѕoft tạo ra 1 tiêu ᴄhuẩn ᴄhung ᴄho ngôn ngữ lập trình gọi là Common Language Speᴄifiᴄationѕ (CLS) Tiêu ᴄhuẩn nàу giúp ᴄáᴄ ᴄhương trình biên dịᴄh (ᴄompilerѕ) làm ᴠiệᴄ hữu hiệu Miᴄroѕoft ѕáng ᴄhế ra Viѕual Baѕiᴄ.NET (VB.NET), ᴠà ᴄũng không quên phổ biến rộng rãi CLS trong Công nghệ Tin họᴄ giúp ᴄáᴄ ngôn ngữ lập trình kháᴄ làm ᴠiệᴄ trong nền NET.
NỘI DUNG
Giới thiệu về Website
Website được xây dựng nhằm cung cấp thông tin hoạt động giúp sinh viên, giảng viên cập nhật kịp thời tin tức của trường, khoa và các tin tức quan trọng khác
Là nơi giảng viên và sinh viên tra cứu lịch công tác hàng tuần và lịch tiếp sinh viên
Website còn cung cấp thư viện giáo trình, tài liệu tham khảo liên quan đến việc dạy và học của giảng viên và sinh viên.
Tính năng kỹ thuật của Website
Website được thiết kế theo hướng mở, cho phép nâng cấp và cập nhật thêm các tính năng sử dụng mới trong tương lai khi có phát sinh nhu cầu
Hệ thống chính được xây dựng bằng ngôn ngữ lập trình VB.NET, được xây dựng trên nền công nghệ DotnetNuke, là một hệ thống mở, tùy biến dựa trên skin và module, tối ưu cho việc phát triển các ứng dụng trên web và hiện được sử dụng rộng rãi trên toàn thế giới Hỗ trợ sử dụng tiếng Việt theo chuẩn Unicode Tương thích với các browser Internet hiện hành Chạy tốt trên các dịch vụ internet chuẩn của Windows
Công nghệ web với Bootstrap tối ưu hóa giao diện, hướng đến trải nghiệm của người dùng, dễ dàng thao tác và sử dụng
Kỹ thuật phân chia, điều hướng HTML, tối ưu hóa cấu trúc nội dung, mục tin, phân vùng nội dung bố cục rõ ràng theo từng chức năng
Hệ thống tích hợp bảo mật HTTPS, triển khai trên hệ thống FireWall của trường, đáp ứng khả năng bảo mật cao
Vận hành theo cơ chế xác thực người dùng, phân quyền sử dụng đến từng module, mục tin
Dễ sử dụng, bảo trì, cập nhật và sao lưu dữ liệu.
Nội dung triển khai đề án
Tổng thời gian thực hiện Đề án: 9 tháng
TT Nội dung Đơn vị thực hiện Đơn vị phối hợp
1 Xây dựng đề cương, báo cáo đề án,
Xây dựng cấu trúc Site Map K Ngoại ngữ P QLCNTT
Mô tả bố cục, cấu trúc thông tin
3 Lên yêu cầu chi tiết về bố cục, giao diện P QLCNTT K Ngoại ngữ
Thuê thiết kế giao diện,
Cắt giao diện dựa trên bản thiết kế
(chuyển HTML, CSS) cho Web
Tiếng Việt và Site mới tiếng Anh
Thuê đơn vị bên ngoài
-Tích hợp giao diện với các
Module chức năng, nghiệp vụ trên hệ thống Portals hiện nay (Skin)
- Tạo Site, khai báo Block, template
- Khai báo cấu trúc Menu
TT Nội dung Đơn vị thực hiện Đơn vị phối hợp
- Hộ trợ Đăng tin bài, dàn trang
- Hướng dẫn các Khoa quản trị, đăng tin, bài
-Viết tài liệu hướng dẫn quản trị,
- Quản lý hệ thống kỹ thuật, dữ liệu
Sản phẩm của đề án
Website đáp ứng các yêu cầu cung cấp thông tin cho các bên liên quan bằng tiếng Anh về các hoạt động của khoa và trường, đáp ứng các yêu cầu cho đánh giá ngoài chương trình đào tạo ngành Ngôn ngữ Anh.
Hình 3.1 Giao diện Website khoa Ngoại ngữ
Các module chính của Website
Hình 3.2 Giao diện màn hình Module Đăng nhập tài khoản người dùng / Quản trị
Quản trị Website / Người dùng (gọi tắt là Người dùng) thực hiện đăng nhập vào hệ thống thông qua Tài khoản và Mật khẩu được cấp
Trường hợp quên hoặc thất lạc mật khẩu, người dùng có thể thực hiện thao tác Quên mật khẩu → Hệ thống sẽ gửi thông tin đến email của người dùng để thực hiện thao tác đặt lại mật khẩu
Hình 3.3 Giao diện thực hiện lấy lại mật khẩu Người dùng
3.4.2.2 Module Quản trị người dùng
Module này được phân quyền cho từng người dùng, nhóm người dùng có thể thao tác
Hình 3.4 Danh sách tính năng của Module Quản trị Người dung i Sửa thông tin cá nhân
Hình 3.5 Giao diện trang chỉnh sửa thông tin cá nhân người dùng
Mỗi người dùng đều có thể chỉnh sửa thông tin cá nhân của mình
Thay đổi tên hiện thị, thay đổi email, Số điện thoại…
Thực hiện thay đổi mật khẩu khi cần thiết
Mức độ bảo mật tài khoản người dùng với tính năng mật khẩu yêu cầu tối thiểu: 7 ký tự bao gồm chữ IN HOA, Số và ít nhất 1 ký tự đặc biệt ii Danh sách người dùng
Hình 3.6 Giao diện Quản trị danh sách người dùng
Dành cho tài khoản quản trị cấp cao
Theo dõi trạng thái, thông tin danh sách người dùng và vai trò người dùng trên hệ thống Website
Thực hiện việc chỉnh sửa thông tin, thay đổi mật khẩu Vô hiệu hóa tài khoản iii Thêm người dùng mới
Hình 3.7 Giao diện Thêm mới người dùng
Người Quản trị thực hiện thêm mới người dùng: thông tin đăng nhập, thông tin cá nhân, mật khẩu và cấp quyền thực hiện tính năng trên website
Phần Module tin tức được chia làm 2 phần:
Dành cho Quản trị cấp cao:
Hình 3.8 Các chức năng của Quản trị tức cấp cao
Quản trị có thể duyệt, xuất bản bài viết thông qua bài viết của Người viết bài gửi lên
Theo dõi tất cả bài viết, thực hiện việc chỉnh sửa thông tin khi cần thiết
Hạ bài viết Đã Xuất bản (Đăng lên website) khi nội dung chưa đúng hoặc cần biên tập, chỉnh sửa lại
Theo lượng Chia sẻ, lượt xem bài viết
Dành cho Người viết bài
Hình 3.9 Chức năng của Người đăng tin
Người đăng tin thực hiện việc đăng tải tin tức, hình ảnh hoạt động
Gửi biên tập hoặc gửi xuất bản, hoặc có thể xuất bản luôn (đăng lên Website) nếu có đủ thẩm quyền
Thực hiện thêm mới các hình ảnh, chọn danh mục phù hợp
Có thể hẹn giờ, đặt thời gian tự động cho bài viết để đăng tải lên trang web
Hình 3.10 Màn hình chính của Module trang giới thiệu
Quản lý thông tin, nội dung tĩnh (nội dung có tính chất thay đổi rất ít tạm gọi là Tĩnh)
Người dùng có thể đăng tải thông tin, hình ảnh, nội dung giới thiệu về trang Chọn phân cấp Cha/Con cho từng trang nội dung
Hình 3.11 Màn hình chính của Module Thông tin Website
Quản trị viên thực hiện cập nhật thông tin Website theo thông tin đơn vị sở tại Cập nhật Địa chỉ, mô tả website, các trang Mạng xã hội
Thiết lập hệ thống máy chủ Email để gửi thông tin phản hồi tới người dung
Thiết lập địa chỉ Email – Nhận thông tin phản hồi từ người dùng
Hình 3.12 Màn hình danh sách thông tin liên hệ từ người dùng
Thông tin liên hệ được phân chia làm 2 phần: Liên hệ và Hỗ trợ
Liên hệ dành cho tất cả người dùng, và hỗ trợ dành cho Sinh viên khi cần hỗ trợ thông tin
Quản trị viên có thể theo dõi trạng thái thông tin liên hệ: vừa tiếp nhận, đã trả lời
Quản trị viên có thể trả lời trực tiếp thông tin cho người dùng thông tin tính năng trả lời từ Module liên hệ, bằng gửi email
Vui lòng xem lại Module Thông tin website 3.5.25 - Ở đây có phần thiết lập máy chủ Email, nhằm mục đích gửi Email trả lời
Hình 3.13 Các chức năng của Module Hỏi – Đáp
Câu hỏi thường gặp: Quản trị viên sẽ thêm các câu hỏi / Câu trả lời thường gặp Mục đích giúp người dùng dễ tiếp cận và nắm bắt thông tin một cách nhanh nhất
Có thể sắp xếp vị các câu hỏi Đăng lên website hoặc lưu dưới dạng bản nháp trước khi hoàn thiện câu hỏi thường gặp
Hình 3.14 Màn danh sách các câu hỏi thường gặp
Câu hỏi: Dành cho người dùng đặt câu hỏi Quản trị viên có thể trả lời và đưa vào câu hỏi thường gặp nếu cần thiết
3.4.2.8 Module Tài liệu – Văn bản
Module Tài liệu – Văn bản được chia làm 2 phần
Danh mục Tài liệu - Văn bản:
Quản trị viên có thể chia nhóm văn bản thông qua danh mục, nhằm mục đích giúp người dùng tiếp cận thông tin chính xác và dễ dàng hơn
Hình 3.15 Màn hình chức năng danh mục văn bản
Danh mục tài liệu văn bản: Có thể chia nhiều cấp
Tài liệu – Văn bản: Quản trị viên Cập nhật thông tin Tài liệu – Văn bản thông qua file đính kèm với các định dạng: zip, rar, pdf, doc, docx, xls, xlsx…
Hình 3.16 Màn hình danh sách chức năng Tài liệu văn bản
Hình 3.17 Màn hình chức năng Thêm mới/ Chính sửa Tài liệu – văn bản
Người Quản trị có thể thêm mô tả thông tin và giới thiệu, tải nhiều file cho một nội dung Tài liệu – Văn bản
Module Media cũng giống như Module tin tức Được chia làm 2 phần:
Hình 3.18 Màn hình chức năng Module Media
Người quản trị có thể đăng tải Video hoặc sử dụng Video từ nhiều nguồn khác nhau (Youtube, Dailymotion….) để đăng tải lên
Dành cho Quản trị cấp cao
Hình 3.19 Màn hình chức năng Quản trị Media cấp cao
Quản trị viên có thể theo dõi các Media đã được đăng tải lên Website Chỉnh sửa thông tin khi cần thiết
Hình 3.20 Màn hình chức năng Module Sự kiện
Module Sự kiện: Thực hiện việc đăng tải thông tin các Sự kiện
Thông tin nội dung Sự kiện – Ngày diễn ra – Địa điểm – Thành phần tham dự…
Hình 3.21 Màn hình danh sách các sự kiện đã được đăng tải
Hình 3.22 Màn hình chức năng Thêm mới / Chinh sửa sự kiện 3.4.2.11 Module HTML
Quản trị viên có thể thêm Module HTML ở bất cứ vị trí nào trên trang web Cập nhật nội dung theo trình soạn thảo CKEditor 4.15
Tiến hành cập nhật, chỉnh sửa, thêm ảnh cho nội dung khi cần thiết
Hình 3.23 Màn hình chức năng Module Banner
Module Banner: Được sử dụng đăng tải các Banner liên kết, Banner Quảng cáo, Banner giới thiệu thông tin tới người dùng
Module Banner được chia làm 2 phần
Vị trí banner: Là nơi các Banner sẽ được đặt
Hình 3.24 Màn hình danh sách cac vị ví trí Banner được khởi tạo
Hình 3.25 Màn hình danh sách Banner đã được khởi tao theo từng Vị trí
Quản trị viên có thể: Thêm mới, Chỉnh sửa Banner
Cài đặt vị trí, kích thước, khoản thời gian hiện thị hoặc đặt trạng thái hiện cho Banner
Hình 3.26 Màn hình chức năng Module Menu
Chức năng này chỉ dành cho Quản trị cấp cao
Quản trị viên thực hiện việc thêm mới các Menu hiện thị lên website
Lộ trình phát triển trong tương lai của sản phẩm
Trong tương lai, website khoa sẽ phát triển trên cơ sở cải tiến website hiện hữu theo các hướng sau:
Thứ nhất, tham khảo ý kiến sinh viên – những người truy cập chính/ đối tượng website hướng đến – về những điều cần cải tiến từ hình ảnh cho đến bố cục, nội dung của website
Thứ hai, bổ sung các chức năng mới của website, đặc biệt là khả năng liên kết với các mạng xã hội, hướng đến đồng bộ hoá nội dung website và fanpage của khoa trên mạng xã hội
Thứ ba, tiến hành phát triển thêm các phiên bản ngôn ngữ mới, đặc biệt là các ngôn ngữ khoa hiện đang đào tạo, mà trước mắt là tiếng Trung Quốc.
