LỜI CẢM ƠN Trên thực tế khơng có thành công mà không gắn liền với hỗ trợ, giúp đỡ dù hay nhiều, dù trực tiếp hay gián tiếp người khác Trong suốt thời gian từ bắt đầu học tập giảng đường đại học đến nay, nhận nhiều quan tâm, giúp đỡ q Thầy Cơ, gia đình bạn bè Để hoàn thành đề tài thực tập tốt nghiệp này, tơi xin tỏ lòng biết ơn sâu sắc đến giáo tận tình hướng dẫn tơi suốt q trình thực đề tài Tơi xin chân thành cảm ơn quý Thầy, Cô khoa Công Nghệ Thơng Tin tận tình truyền đạt kiến thức cho suốt ba năm học trường Với vốn kiến thức tiếp thu trình học tập khơng tảng cho q trình nghiên cứu đề tài thực tập tốt nghiệp mà hành trang quý báu để bước vào đời cách vững tự tin Trong trình thực đề tài thực tập, khó tránh khỏi sai sót, mong q Thầy, Cơ bỏ qua, đồng thời trình độ lý luận kinh nghiệm thực tiễn hạn chế nên tơi mong nhận ý kiến đóng góp từ q Thầy, Cơ để tơi học hỏi thêm nhiều kinh nghiệm hoàn thành tốt báo cáo thực tập tới Cuối kính chúc q Thầy, Cơ dồi sức khỏe đạt nhiều thành công tốt đẹp công việc Tôi xin chân thành cảm ơn! Quảng Nam, ngày 18 tháng 04 năm 2020 Sinh viên thực MỤC LỤC CÁC TỪ VIẾT TẮT Từ viết tắt API CSS CDN OSI HTML HTTP IDE CSDL THCS HĐT UML KQ UC R V8 Tên đầy đủ Application Programming Interface Cascading Style Sheets Content Delivery Network Open Systems Interconnection HyperText MarkupLanguage HyperText Transfer Protocol Integrated Development Environment Cơ Sở Dữ Liệu Trung Học Cơ Sở Hướng Đối Tượng Unified Modeling Language Kết Quả Use Case Reference Rule Version A PHẦN MỞ ĐẦU Lý chọn đề tài Cùng với phát triển nhanh chóng phần cứng máy tính, phần mềm ngày trở nên đa dạng, phong phú, hoàn thiện hỗ trợ hiệu cho người Các phần mềm ngày mơ chun nghiệp vụ khó khăn, hỗ trợ cho người dùng thuận tiện sử dụng, thời gian xử lý nhanh chóng, số nghiệp vụ tự động hóa cao Do mà việc phát triển phần mềm, đòi hỏi khơng xác, xử lý nhiều nghiệp vụ thực tế mà phải yêu cầu khác tốc độ, giao diện thân thiện, mơ hình hóa thực tế vào máy tính để giúp người sử dụng tiện lợi, quen thuộc, tính tương thích cao, bảo mật cao…Các phần mềm giúp tiết kiệm phần lớn thời gian, công sức người, tăng độ xác hiệu cơng việc Một ví dụ cụ thể, việc quản lý điểm trường trung học sở, THCS Nguyễn Văn Trỗi – Tam dân – Phú ninh – Quảng Nam Nếu khơng có hỗ trợ tin học, việc quản lý phải cần nhiều người, chia thành nhiều khâu quản lý toàn hồ sơ điểm học sinh, lớp học…cũng nghiệp vụ tính điểm trung bình xếp lực học tập cho học sinh tồn trường Các cơng việc đòi hỏi nhiều thời gian cơng sức, mà xác hiệu khơng cao đa số làm thủ cơng tự động Ngồi số khó khăn liệu lưu trữ đồ sộ, dễ thất lạc, tốn kém… Một website quản lý điểm cần khẳng định được: Tính nghiệp vụ Tự động tính tốn điểm tiêu liên quan hỗ trợ tra cứu, quản lý thơng tin cách nhanh chóng thuận tiện Cung cấp thông tin tức thời thông qua sơ đồ mô phỏng, báo cáo kết xuất số liệu Tính linh động Website quản lý điểm dễ dàng thay đổi, thêm, bớt loại danh mục Có khả hỗ trợ mạng WAN, gửi nhận liệu nhanh chóng Giao diện đẹp mắt Kế thừa đầy đủ Website Chính vậy, người dùng dễ dàng sử dụng chương trình người làm quen với chương trình cách nhanh chóng Giao diện đẹp mắt, dễ sử dụng, hỗ trợ tất khâu công tác quản lý điểm cho nhà trường Hiệu suất làm việc hiệu Là công cụ tạo bước đột phá việc quản lý điểm Phần mềm chạy môi trường V8 JavaScript runtime - trình thơng dịch JavaScript cực nhanh chạy trình duyệt Chrome Hỗ trợ đắc lực cho hệ thống kiểm tra, giám sát Giảm thiểu chi phí phát sinh, giảm thiểu công tác quản lý ghi chép tay thông thường Năng suất làm việc cao, tiết kiệm chi phí nhân lực, hoạt động hiệu với chi phí thấp Thiết kế website quản lý điểm viết hoàn toàn theo yêu cầu Số liệu xác, tức thời, nâng cao chất lượng Tính bảo mật Phân quyền, phân cấp bảo mật liệu, sử dụng đến chức chương trình, phân quyền cập nhật truy xuất liệu theo phân cấp quản lý người dùng Mã hoá liệu hai lớp tạo cho liệu an toàn cách tốt Sự an toàn tuyệt đối Thiết kế website quản lý điểm đảm bảo liệu luôn thông suốt, công việc tiến hành trơi chảy chương trình có chức lưu phục hồi liệu vào thời điểm Tiện ích cao Cho phép kết xuất liệu dễ dàng từ phần mềm sang định dạng: Exel Cùng lí đây, tơi chọn đề tài “Ứng dụng công nghệ Nodejs hệ quản trị sở liệu PostgreSQL xây dựng phần mềm quản lý điểm trường THCS Nguyễn Văn Trỗi – Tam Dân – Phú Ninh – Quảng Nam” cho đề tài thực tập tốt nghiệp mình, với mong muốn xây dựng website quản lý điểm cách chuyên nghiệp, nhanh chóng, dễ dàng hiệu Mục tiêu đề tài Nghiên cứu lý thuyết web HTML, CSS, Bootstrap, Jquery, Node js phục vụ việc xây dựng wesite Vận dụng sở lý thuyết nghiên cứu xây dựng Website quản lý điểm trường THCS Nguyễn Văn Trỗi Đối tượng phạm vi nghiên cứu Đối tượng nghiên cứu: Website quản lý điểm Trường THCS Nguyễn Văn Trỗi Phạm vi nghiên cứu: - Về nội dung: Phương thức quản lý điểm Trường THCS Nguyễn Văn Trỗi - Về không gian: Trường THCS Nguyễn Văn Trỗi, Tam Dân, Phú Ninh, Quảng Nam Phương pháp nghiên cứu Phương pháp nghiên cứu tự luận: Nghiên cứu thực trạng, đọc tài liệu, giáo trình liên quan tới website quản lý điểm để đưa giải pháp xây dựng website quản lý điểm Phương pháp tổng kết kinh nghiệm: Qua việc nghiên cứu tài liệu, giáo trình rút kinh nghiệm để xây dựng website quản lý điểm Phương pháp lấy ý kiến chuyên gia: Lấy ý kiến giảng viên trực tiếp hướng dẫn để hồn thiện mặt nội dung cung hình thức đề tài Đóng góp đề tài Cung cấp kiến thức thiết kế website Cung cấp trang website điểm Có thể nói trang website có tính ứng dụng cao làm phong phú thêm cho kho trang website quản lý Với đề tài mong muốn cung cấp tài liệu tham khảo cho bạn sinh viên khoa khoa tiếp cận tìm hiểu lĩnh vực nghiên cứu trang website quản lý lĩnh vực mà nghiên cứu Cấu trúc đề tài Đề tài thực tập tốt nghiệp này, phần Mở đầu Kết luận, phần Nội dung chi tiết gồm ba chương, cụ thể sau: Chương 1: Cơ sở lý thuyết Chương trình bày khái niệm web, ngôn ngữ phần mềm hỗ trợ sử dụng q trình thiết kế website Chương 2: Phân tích thiết kế hệ thống Chương đặt tả tốn sau phân tích thiết kế sở liệu để bước đầu hình dung xây dựng hệ thống Chương 3: Chương trình demo Chương giới thiệu số hình ảnh giao diện chương trình demo B PHẦN NỘI DUNG CHƯƠNG I CƠ SỞ LÝ THUYẾT 1.1 Các khái niệm 1.1.1 URL URL (Uniform Resource Locators) thuật ngữ để vị trí tài nguyên (resource) internet Các kết nối từ tài liệu HTML đến file server khác phải viết theo dạng sau: Scheme://server[:port]/path/dataname[#anchor] Trong đó: + Scheme: Chỉ loại protocol mà tài nguyên sử dụng (hay nói cách khác kiểu liệu mà URL tới) + Server : Chỉ server mà chứa liệu user cần + Port : Là điểm truy cập dịch vụ lớp transport server không sử dụng port + Path/dataname : Đường dẫn tương đối tuyệt đối đến file server Được quy ước quy tắc đặt tên chung (Uniform Naming Convention) + #anchor: Chỉ vị trí tài liệu HTML 1.1.2 HTTP HTTP (HyperText Transfer Protocol), tiếng Việt gọi Giao Thức Truyền Siêu Văn Bản HTTP giao thức chuẩn trực thuộc lớp ứng dụng mơ hình lớp OSI (Open Systems Interconnection) dùng để liên hệ thông tin máy cung cấp dịch vụ (Web Server) máy dùng dịch vụ (Client) HTTP tương thích với nhiều định dạng thông tin, media hồ sơ 1.1.3 Word Wide Web World Wide Web, gọi tắt Web WWW, mạng lưới thơng tin trực tuyến tồn cầu mà người truy nhập (đọc viết) qua máy tính nối với mạng Internet Thuật ngữ thường hiểu nhầm từ đồng nghĩa với thuật ngữ Internet Nhưng Web thực dịch vụ chạy Internet Web chứa thơng tin bao gồm văn bản, hình ảnh, âm chí video kết hợp với Web kho thông tin khổng lồ, phong phú nội dung, đa dạng hình thức, thường xuyên cập nhật, đổi phát triển không ngừng Các tài liệu World Wide Web lưu trữ hệ thống siêu văn (hypertext), đặt máy tính mạng Internet Người dùng phải sử dụng chương trình gọi trình duyệt web (web browser) để xem siêu văn Người dùng theo liên kết siêu văn (hyperlink) trang web để nối với tài liệu khác gửi thông tin phản hồi theo máy chủ trình tương tác Hoạt động truy tìm theo siêu liên kết thường gọi duyệt Web Q trình cho phép người dùng duyệt trang web để lấy thông tin Tuy nhiên độ xác chứng thực thơng tin khơng đảm bảo 1.2 Ngôn ngữ HTML 1.2.1 Khái niệm HTML (HyperText Markup Language)_ngôn ngữ đánh dấu siêu văn ngôn ngữ đánh dấu thiết kế để tạo nên trang web, nghĩa mẫu thông tin trình bày World Wide Web HTML định nghĩa ứng dụng đơn giản SGML(Standard Generalized Markup Language)_một hệ thống tổ chức gắn thẻ yếu tố tài liệu, vốn sử dụng tổ chức cần đến yêu cầu xuất phức tạp HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên thức HTML HTML 4.01(1999) Sau đó, người ta thay XHTML (Extensible HyperText Markup Language) Hiện nay, HTML phát triển với phiên HTML5 hứa hẹn mang lại diện mạo cho web 1.2.2 Cấu trúc file HTML Tiêu đề tài liệu …Nội dung tài liệu 1.3 Ngôn ngữ CSS 1.3.1 Giới thiệu CSS (Cascading Style Sheets) ngơn ngữ quy định cách trình bày cho tài liệu viết HTML, XHTML, XML, …giúp định dạng cách hiển thị tài liệu Web font chữ, kích thước, màu sắc… Để viết mã CSS sử dụng trình soạn thảo văn đơn giản như: Notedpad, Wordpad hay Visual Editor (trình biên dịch trực quan) Frontpage, DreamWeaver, Golive… 1.3.2 Cú pháp CSS Cú pháp CSS chia thành phần: thẻ chọn (selector), thuộc tính (property), giá trị (value) Trong đó: - Thẻ chọn thẻ tài liệu HTML thẻ sử dụng CLASS ID - Thuộc tính thuộc tính định dạng phần tử color, font-size, fontfamily… - Giá trị giá trị thuộc tính nói Quy tắc: Trong trường hợp thẻ chọn có nhiều thuộc tính thuộc tính ngăn cách dấu “;” - Hoặc thẻ chọn có nhiều thuộc tính nên để thuộc tính dòng riêng biệt - Nếu giá trị có nhiều từ có khoảng trắng ta nên đặt giá trị giá trị vào dấu nháy kép - Trong trường hợp mà có số thẻ có định dạng, gộp chúng lại với 1.4 Bootstrap 1.4.1 Giới thiệu Bootstrap framework cho phép thiết kế website reponsive nhanh dễ dàng Bootstrap bao gồm HTML templates, CSS templates Javascript tao có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels nhiều thứ khác Trong Bootstrap có thêm plugin Javascript Giúp cho việc thiết kế reponsive bạn dễ dàng nhanh chóng 1.4.2 Cách nhúng BOOTSTRAP vào file HTML Có cách để sử dụng Bootstrap: - Download Bootstrap từ getbootstrap.com 1.4.2.1 Sử dụng thẻ link css để liên kết Bootstrap - < link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min css" > Hình 3.2 Giao diện đăng nhập Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.3 Giao diện thêm/sửa/xóa/phục hồi học sinh Từ giao diện chương trình click vào danh mục quản lý học sinh hiển thị giao diện Thêm / sửa / xóa / phục hồi thơng tin học sinh Trong đó, giao diện có chức thêm / sửa / xóa / phục hồi học sinh xem chi tiết thơng tin học sinh Hình 3.3 Giao diện thêm / sửa / xóa / phục hồi học sinh Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.4 Giao diện thêm / sửa / xóa / phục hồi lớp học Từ giao diện chương trình click vào danh mục quản lý lớp học hiển thị giao diện Thêm / sửa / xóa / phục hồi thơng tin lớp học Trong đó, giao diện có chức thêm / sửa / xóa / phục hồi lớp học xem chi tiết thông tin lớp học Hình 3.4 Giao diện thêm / sửa / xóa / phục hồi lớp học Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.5 Giao diện danh sách khối lớp Từ giao diện chương trình click vào danh mục danh sách khối lớp hiển thị giao diện danh sách khối lớp Hình 3.5 Giao diện danh sách khối lớp Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.6 Giao diện thêm / sửa / xóa / phục hồi giáo viên Từ giao diện chương trình click vào danh mục quản lý giáo viên hiển thị giao diện Thêm / sửa / xóa / phục hồi thơng tin giáo viên Trong đó, giao diện có chức thêm / sửa / xóa / phục hồi giáo viên xem chi tiết thông tin giáo viên Hình 3.6 Giao diện thêm / sửa / xóa / phục hồi giáo viên Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.7 Giao diện thêm / sửa / xóa / phục hồi mơn học Từ giao diện chương trình click vào danh mục quản lý môn học hiển thị giao diện Thêm / sửa / xóa / phục hồi thơng tin mơn học Trong đó, giao diện có chức thêm / sửa / xóa / phục hồi mơn học xem chi tiết thơng tin mơn học Hình 3.8 Giao diện thêm / sửa / xóa / phục hồi mơn học Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.8 Giao diện thêm / sửa / xóa / phục hồi học kỳ Từ giao diện chương trình click vào danh mục quản lý học kỳ hiển thị giao diện Thêm / sửa / xóa / phục hồi thơng tin học kỳ Trong đó, giao diện có chức thêm / sửa / xóa / phục hồi học kỳ xem chi tiết thơng tin học kỳ Hình 3.9 Giao diện thêm / sửa / xóa / phục hồi học kỳ Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.9 Giao diện thêm / sửa / xóa / tổng kết học kỳ/tổng kết năm/phục hồi điểm Từ giao diện chương trình click vào danh mục quản lý điểm hiển thị giao diện Thêm / sửa / xóa / tổng kết học kỳ / tổng kết năm / phục hồi thông tin điểm Trong đó, giao diện có chức Thêm / sửa / xóa / tổng kết học kỳ / tổng kết năm / phục hồi điểm xem chi tiết thơng tin điểm học sinh Hình 3.10 Giao diện thêm/sửa/xóa/tổng kết học kỳ/tổng kết năm/phục hồi học kỳ Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.10 Giao diện xóa / phục hồi điểm mơn học năm Từ giao diện chương trình click vào danh mục quản lý điểm mơn học năm hiển thị giao diện xóa / phục hồi thơng tin điểm mơn học năm Trong đó, giao diện có chức xóa / phục hồi điểm môn học năm xem chi tiết thông tin điểm mơn học năm học sinh Hình 3.11 Giao diện xóa /phục hồi điểm mơn học năm Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.11 Giao diện xóa / tổng kết năm / phục hồi điểm học kỳ Từ giao diện chương trình click vào danh mục quản lý điểm học kỳ hiển thị giao diện xóa / tổng kết năm / phục hồi thông tin điểm học kỳ Trong đó, giao diện có chức xóa / tổng kết năm / phục hồi điểm học kỳ xem chi tiết thông tin điểm học kỳ học sinh Hình 3.12 Giao diện xóa / tổng kết năm / phục hồi điểm tổng kết học kỳ Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.12 Giao diện xóa / phục hồi điểm năm Từ giao diện chương trình click vào danh mục quản lý điểm năm hiển thị giao diện xóa / phục hồi thơng tin điểm năm Trong đó, giao diện có chức xóa / phục hồi điểm năm xem chi tiết thông tin điểm năm học sinh Hình 3.13 Giao diện xóa / phục hồi điểm năm Website quản lí điểm trường THCS Nguyễn Văn Trỗi 2.13 Giao diện thêm / sửa / xóa / phục hồi tài khoản Từ giao diện chương trình click vào danh mục quản lý tài khoản hiển thị giao diện Thêm / sửa / xóa / phục hồi thơng tin tài khoản Trong đó, giao diện có chức Thêm / sửa / xóa / phục hồi tài khoản xem chi tiết thông tin tài khoản Hình 3.14 Giao diện thêm / sửa / xóa/ phục hồi tài khoản Website quản lí điểm trường THCS Nguyễn Văn Trỗi C PHẦN KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN Kết luận Sau thời gian tìm hiểu, nghiên cứu tài liệu đề tài “Xây dựng website quản lí điểm Trường THCS Nguyễn Văn Trỗi” thực đề tài theo dự kiến Hoàn thành mục tiêu đặt cho đề tài: Nắm kiến thức HTML5, CSS3, NODEJS, JAVASCRIPT, BOOTSTRAP, JQUERY, POSTGRESQL Đã xây dựng thành cơng Website quản lí điểm Trường THCS Nguyễn Văn Trỗi đáp ứng yêu cầu đề Tuy cố gắng nỗ lực thực đề tài trình độ kiến thức kinh nghiệm thân hạn chế nên đề tài nhiều thiếu sót, mong đóng góp ý kiến từ q thầy bạn bè để đề tài hoàn thiện Hướng phát triển Đưa website đến với trường học Tối ưu chức có, bổ sung thêm số chức như: Quản lí q trình lương, tính lương, … D.TÀI LIỆU THAM KHẢO [1] Trần Thị Diệu Linh (2016), Bài giảng “Thiết kế lập trình web” [2] Trang website http://www.w3schools.com/ [3] Trần Thị Diệu Hiền (2015), Bài giảng Phân tích thiết kế hệ thống hướng đối tượng với UML [4] Các tài liệu khác lấy từ nguồn Internet