QUẢN LÝ ĐIỂM TRƯỜNG TRUNG HỌC CƠ SỞ NGUYỄN VĂN TRỖI - TAM DÂN - PHÚ NINH - QUẢNG NAM

Kỹ Thuật - Công Nghệ - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công Nghệ - Technology LỜI CẢM ƠN Trên thực tế không có sự thành công nào mà không gắn liền với những sự hỗ trợ, giúp đỡ dù ít hay nhiều, dù trực tiếp hay gián tiếp của người khác. Trong suốt thời gian từ khi bắt đầu học tập ở giảng đường đại học đến nay, tôi đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý Thầy Cô, gia đình và 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 cô giáo, Th.S Trần Thị Diệu Linh đã tận tình hướng dẫn tôi trong suốt quá trình thực hiện đề tài. Tôi cũng xin chân thành cảm ơn quý Thầy, Cô khoa Công Nghệ Thông Tin trường Đại Học Quảng Nam đã tận tình truyền đạt kiến thức cho tôi trong suốt ba năm học tại trường. Với vốn kiến thức được tiếp thu trong quá trình học tập không chỉ là nền tảng cho quá trình nghiên cứu đề tài thực tập tốt nghiệp này mà còn là hành trang quý báu để tôi bước vào đời một cách vững chắc và tự tin. Trong quá trình thực hiện đề tài thực tập, khó tránh khỏi sai sót, rất mong quý Thầy, Cô bỏ qua, đồng thời do trình độ lý luận cũng như kinh nghiệm thực tiễn còn hạn chế nên tôi rất mong nhận được ý kiến đóng góp từ quý Thầy, Cô để tôi học hỏi thêm được nhiều kinh nghiệm và sẽ hoàn thành tốt hơn bài báo cáo thực tập sắp tới. Cuối cùng kính chúc quý Thầy, Cô dồi dào sức khỏe và đạt được nhiều thành công tốt đẹp trong 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 hiện Nguyễn Hữu Tín MỤC LỤC A. PHẦN MỞ ĐẦU ........................................................................................................1 1. Lý do chọn đề tài .........................................................................................................1 2. Mục tiêu của đề tài ......................................................................................................3 3. Đối tượng và phạm vi nghiên cứu ...............................................................................3 4. Phương pháp nghiên cứu.............................................................................................3 5. Đóng góp của đề tài.....................................................................................................3 6. Cấu trúc đề tài .............................................................................................................3 B. PHẦN NỘI DUNG .....................................................................................................5 CHƯƠNG I. CƠ SỞ LÝ THUYẾT ................................................................................5 1.1. Các khái niệm cơ bản ............................................................................................... 5 1.1.1. URL .......................................................................................................................5 1.1.2. HTTP .....................................................................................................................5 1.1.3. Word Wide Web ....................................................................................................5 1.2. Ngôn ngữ HTML ......................................................................................................6 1.2.1. Khái niệm ..............................................................................................................6 1.2.2. Cấu trúc cơ bản của một file HTML .....................................................................6 1.3. Ngôn ngữ CSS ..........................................................................................................7 1.3.1. Giới thiệu ...............................................................................................................7 1.3.2. Cú pháp của CSS ...................................................................................................7 1.4. Bootstrap ...................................................................................................................7 1.4.1. Giới thiệu ...............................................................................................................7 1.4.2. Cách nhúng BOOTSTRAP vào file HTML ..........................................................8 1.4.2.1. Sử dụng thẻ link trong css để liên kết Bootstrap ................................................8 1.4.2.1. Sử dụng thẻ Script trong Javascript để liên kết Bootstrap ................................ 8 1.5. Ngôn ngữ JAVASCRIPT .........................................................................................8 1.5.1. Giới thiệu ...............................................................................................................8 1.5.2. Cách nhúng JAVASCRIPT vào file HTML..........................................................8 1.6. Jquery........................................................................................................................9 1.6.1. Giới thiệu ...............................................................................................................9 1.6.2. Cách nhúng Jquery vào file HTML .......................................................................9 1.6.2.1. Sử dụng file nguồn Javascript ..........................................................................10 1.6.2.2. Sử dụng file nguồn CDN ..................................................................................10 1.7. Ngôn ngữ NODE JS ............................................................................................... 10 1.7.1. Giới thiệu .............................................................................................................10 1.7.2. Cú pháp khai báo Node js ....................................................................................10 1.8. Hệ quản trị cơ sở dữ liệu Postgresql .......................................................................11 1.8.1. Giới thiệu .............................................................................................................11 1.8.2. Sự kết hợp giữa Node js và Postgresql ................................................................ 12 1.9. Công cụ sử dụng .....................................................................................................12 1.9.1. Visual Studio Code .............................................................................................. 12 1.9.1.1. Giới thiệu Visual Studio Code..........................................................................12 1.9.1.2. Cài đặt Visual Studio Code ..............................................................................13 1.9.2. GIT.......................................................................................................................14 1.9.2.1. Giới thiệu GIT ..................................................................................................14 1.9.2. Database PostgreSQL ..........................................................................................15 1.9.2.1. Cài đặt Database PostgreSQL .........................................................................15 CHƯƠNG II. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG ............................................19 2.1. Định nghĩa bài toán ................................................................................................ 19 2.2. Danh sách các tác nhân...........................................................................................19 2.3. Xây dựng các luật tham chiếu ...............................................................................19 2.4. Phân tích ca sử dụng và xây dựng biểu đồ UC.......................................................25 2.4.1. Phân tích các ca sử dụng .....................................................................................25 2.4.2. Biểu đồ ca sử dụng .............................................................................................. 28 2.5. Biểu đồ tuần tự .......................................................................................................29 2.6. Biểu đồ lớp .............................................................................................................33 2.7. Biểu đồ trạng thái ...................................................................................................34 2.7.1. Lớp học sinh ........................................................................................................34 2.7.2. Lớp lớp ................................................................................................................34 2.7.3. Lớp giáo viên .......................................................................................................34 2.7.4. Lớp môn học ........................................................................................................35 2.7.5. Lớp học kỳ ...........................................................................................................35 2.7.6. Lớp điểm ..............................................................................................................35 2.7.7. Lớp tài khoản .......................................................................................................36 2.8. Thiết kế cơ sở dữ liệu ............................................................................................. 36 2.8.1. Các bảng trong cơ sở dữ liệu ...............................................................................36 2.8.1.1. Bảng học sinh ...................................................................................................36 2.8.1.2. Bảng giáo viên ..................................................................................................36 2.8.1.3. Bảng môn học ...................................................................................................36 2.8.1.4. Bảng lớp học .....................................................................................................37 2.8.1.5. Bảng học kì .......................................................................................................37 2.8.1.6. Bảng điểm .........................................................................................................37 2.8.1.7. Bảng tổng kết môn học .....................................................................................37 2.8.1.8. Bảng tổng kết học kỳ ........................................................................................37 2.8.1.9. Bảng tổng kết cả năm .......................................................................................38 2.8.1.10. Bảng đăng nhập .............................................................................................. 38 2.8.2. Mô hình quan hệ các bảng ...................................................................................38 CHƯƠNG 3: GIỚI THIỆU PHẦN MỀM .....................................................................39 1. Giới thiệu chương trình ............................................................................................. 39 2. Giới thiệu một số giao diện của chương trình. ..........................................................39 2.1. Giao diện chính của chương trình .........................................................................39 2.2. Giao diện đăng nhập vào hệ thống .......................................................................39 2.3. Giao diện thêmsửaxóaphục hồi học sinh ...........................................................40 2.4. Giao diện thêmsửaxóaphục hồi lớp học ............................................................ 41 2.5. Giao diện danh sách các khối lớp .........................................................................41 2.6. Giao diện thêmsửaxóaphục hồi giáo viên .........................................................42 2.7. Giao diện thêmsửaxóaphục hồi môn học ..........................................................42 2.8. Giao diện thêmsửaxóaphục hồi học kỳ ............................................................. 43 2.9. Giao diện thêmsửaxóatổng kết giữa học kỳtổng kết cả nămphục hồi điểm....43 2.10. Giao diện xóaphục hồi điểm môn học cả năm.....................................................44 2.11. Giao diện xóatổng kết cả nămphục hồi điểm học kỳ .........................................44 2.12. Giao diện xóaphục hồi điểm cả năm ...................................................................45 2.13. Giao diện thêmsửaxóaphục hồi tài khoản .........................................................45 C. PHẦN KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN ....................................................46 1. Kết luận .....................................................................................................................46 2. Hướng phát triển .......................................................................................................46 D. TÀI LIỆU THAM KHẢO ....................................................................................... 47 DANH MỤC HÌNH ẢNH Hình 2.1. Biểu đồ ca sử dụng hệ thống quản lý điểm trường THCS Nguyễn Văn Trỗi ....28 Hình 2.2. Sơ đồ tuần tự mô tả ca sử dụng “Đăng nhập hệ thống” ................................ 29 Hình 2.3. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý học sinh” .....................................29 Hình 2.4. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý lớp học” .......................................29 Hình 2.5. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý giáo viên” ....................................30 Hình 2.6. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý môn học” .....................................30 Hình 2.7. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý môn học” .....................................30 Hình 2.8. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý điểm” ...........................................30 Hình 2.9. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tổng kết môn học” .......................31 Hình 2.10. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tổng kết học kỳ” ........................31 Hình 2.11. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tổng kết cả năm” .......................31 Hình 2.12. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tài khoản” ..................................31 Hình 2.13. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tìm kiếm”...................................32 Hình 2.14. Sơ đồ tuần tự mô tả ca sử dụng “Quản lý danh sách” .................................32 Hình 2.15. Sơ đồ lớp hệ thống quản lý điểm trường THCS Nguyễn Văn Trỗi ............33 Hình 2.16. Biểu đồ trạng thái lớp học sinh ....................................................................34 Hình 2.17. Biểu đồ trạng thái lớp lớp ............................................................................34 Hình 2.18. Biểu đồ trạng thái lớp giáo viên ..................................................................34 Hình 2.19. Biểu đồ trạng thái lớp môn học ...................................................................35 Hình 2.20. Biểu đồ trạng thái lớp học kỳ ......................................................................35 Hình 2.21. Biểu đồ trạng thái lớp điểm .........................................................................35 Hình 2.22. Biểu đồ trạng thái lớp tài khoản ..................................................................36 Hình 3.1. Giao diện chính của Website quản lí điểm trường THCS Nguyễn Văn Trỗi39 Hình 3.2. Giao diện đăng nhập của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ................................................................................................................................ 40 Hình 3.3. Giao diện thêmsửaxóaphục hồi học sinh của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ................................................................................................ 40 Hình 3.4. Giao diện thêmsửaxóaphục hồi lớp học của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ................................................................................................ 41 Hình 3.5. Giao diện danh sách khối lớp của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ...........................................................................................................41 Hình 3.6. Giao diện thêmsửaxóaphục hồi giáo viên của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ................................................................................................ 42 Hình 3.8. Giao diện thêmsửaxóaphục hồi môn học của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ................................................................................................ 42 Hình 3.9. Giao diện thêmsửaxóaphục hồi học kỳ của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ................................................................................................ 43 Hình 3.10. Giao diện thêmsửaxóatổng kết giữa học kỳtổng kết cả nămphục hồi học kỳ của Website quản lí điểm trường THCS Nguyễn Văn Trỗi .....................................43 Hình 3.11. Giao diện xóaphục hồi điểm môn học cả năm của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ....................................................................................44 Hình 3.12. Giao diện xóatổng kết cả năm phục hồi điểm tổng kết học kỳ của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ............................................................... 44 Hình 3.13. Giao diện xóaphục hồi điểm cả năm của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ................................................................................................ 45 Hình 3.14. Giao diện thêmsửaxóaphục hồi tài khoản của Website quản lí điểm trường THCS Nguyễn Văn Trỗi ....................................................................................45 CÁC TỪ VIẾT TẮT Từ viết tắt Tên đầy đủ API Application Programming Interface CSS Cascading Style Sheets CDN Content Delivery Network OSI Open Systems Interconnection HTML HyperText MarkupLanguage HTTP HyperText Transfer Protocol IDE Integrated Development Environment CSDL Cơ Sở Dữ Liệu THCS Trung Học Cơ Sở HĐT Hướng Đối Tượng UML Unified Modeling Language KQ Kết Quả UC Use Case R Reference Rule V8 Version 8 1 A. PHẦN MỞ ĐẦU 1. Lý do chọn đề tài Cùng với sự phát triển nhanh chóng về phần cứng máy tính, các phần mềm ngày càng trở nên đa dạng, phong phú, hoàn thiện hơn và hỗ trợ hiệu quả cho con người. Các phần mềm hiện nay ngày càng mô phỏng được rất chuyên 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, và một số nghiệp vụ được tự động hóa cao. Do vậy mà trong việc phát triển phần mềm, sự đòi hỏi không chỉ là sự chính xác, xử lý được nhiều nghiệp vụ thực tế mà còn phải yêu cầu khác như về tốc độ, giao diện thân thiện, mô hình hóa được 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 một phần lớn thời gian, công sức của con người, và tăng độ chính xác hiệu quả trong công việc. Một ví dụ cụ thể, việc quản lý điểm trong trường trung học cơ sở, THCS Nguyễn Văn Trỗi – Tam dân – Phú ninh – Quảng Nam. Nếu không có sự hỗ trợ của tin học, việc quản lý này phải cần khá nhiều người, chia thành nhiều khâu mới có thể quản lý được toàn bộ hồ sơ điểm của học sinh, lớp học…cũng như các nghiệp vụ tính điểm trung bình và xếp lực học tập cho học sinh toàn trường. Các công việc này đòi hỏi nhiều thời gian và công sức, mà sự chính xác và hiệu quả không cao vì đa số đều làm bằng thủ công rất ít tự động. Ngoài ra còn một số khó khăn về dữ liệu lưu trữ khá đồ 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 toán điểm các chỉ tiêu liên quan hỗ trợ tra cứu, quản lý thông tin một cách nhanh chóng và thuận tiện nhất. ➢ Cung cấp các thông tin tức thời thông qua sơ đồ mô phỏng, các 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 các loại danh mục. ➢ Có khả năng hỗ trợ mạng WAN, gửi và nhận dữ liệu nhanh chóng. ❖ Giao diện đẹp mắt ➢ Kế thừa đầy đủ trên Website. Chính vì vậy, người dùng rất dễ dàng sử dụng 2 chương trình những người mới có thể làm quen với chương trình một cách nhanh chóng ➢ Giao diện đẹp mắt, dễ sử dụng, hỗ trợ tất cả các khâu trong công tác quản lý điểm cho nhà trường ❖ Hiệu suất làm việc hiệu quả ➢ Là công cụ mới tạo ra bước đột phá trong việc quản lý điểm ➢ Phần mềm chạy trên môi trường V8 JavaScript runtime - một trình thông dịch JavaScript cực nhanh chạy trên 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ý bằng 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 quả với chi phí thấp nhất. ➢ Thiết kế website quản lý điểm được viết mới hoàn toàn theo yêu cầu. ➢ Số liệu chính 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 dữ liệu, sử dụng đến từng chức năng trong chương trình, phân quyền cập nhật truy xuất dữ liệu theo phân cấp quản lý của người dùng. ➢ Mã hoá dữ liệu hai lớp tạo cho dữ liệu an toàn một cách tốt nhất. ❖ Sự an toàn tuyệt đối Thiết kế website quản lý điểm đảm bảo dữ liệu luôn luôn được thông suốt, công việc được tiến hành trôi chảy vì thế chương trình có chức năng sao lưu và phục hồi dữ liệu vào thời điểm bất kỳ. ❖ Tiện ích cao Cho phép kết xuất dữ liệu dễ dàng từ phần mềm sang các định dạng: Exel. Cùng những lí do trên đây, tôi đã chọn đề tài “Ứng dụng công nghệ Node js và hệ quản trị cơ sở dữ 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 của mình, với mong muốn xây dựng một website quản lý điểm một cách chuyên nghiệp, nhanh chóng, dễ dàng và hiệu quả hơn. 3 2. Mục tiêu của đề tài ➢ Nghiên cứu lý thuyết về web như HTML, CSS, Bootstrap, Jquery, Node js.. phục vụ việc xây dựng wesite. ➢ Vận dụng cơ sở lý thuyết đã nghiên cứu xây dựng Website quản lý điểm tại trường THCS Nguyễn Văn Trỗi. 3. Đối tượng và 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. 4. 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 các tài liệu, giáo trình liên quan tới website quản lý điểm để đưa ra 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 ra 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 để hoàn thiện về mặt nội dung cung như hình thức của đề tài. 5. Đóng góp của đề tài ➢ Cung cấp kiến thức về thiết kế website. ➢ Cung cấp một trang website điểm và Có thể nói đây là một trang website có tính ứng dụng cao và sẽ làm phong phú thêm cho kho trang website quản lý. ➢ Với đề tài này tôi mong muốn cung cấp một tài liệu tham khảo cho sinh viên trong khoa cũng như ngoài khoa khi tiếp cận và tìm hiểu về lĩnh vực nghiên cứu trang website quản lý và nhất là lĩnh vực mà tôi đang nghiên cứu. 6. Cấu trúc đề tài Đề tài thực tập tốt nghiệp này, ngoài phần Mở đầu và Kết luận, phần Nội dung chi tiết gồm ba chương, cụ thể như sau: Chương 1: Cơ sở lý thuyết. Chương này trình bày các khái niệm cơ bản về web, ngôn ngữ và phần mềm hỗ trợ được sử dụng trong quá trình thiết kế website. 4 Chương 2: Phân tích và thiết kế hệ thống. Chương này đặt tả bài toán sau đó phân tích và thiết kế cơ sở dữ liệu để bước đầu hình dung xây dựng hệ thống. Chương 3: Giới thiệu về phần mềm. Chương này giới thiệu một số hình ảnh giao diện chính của chương trình demo. 5 B. PHẦN NỘI DUNG CHƯƠNG I. CƠ SỞ LÝ THUYẾT 1.1. Các khái niệm cơ bản 1.1.1. URL URL (Uniform Resource Locators) là một thuật ngữ để chỉ ra vị trí tài nguyên (resource) trên internet. Các kết nối từ một tài liệu HTML đến một file hoặc một server khác phải được viết theo dạng sau: Scheme:server:portpathdatanameanchor. Trong đó: + Scheme: Chỉ ra loại protocol mà tài nguyên sử dụng (hay nói cách khác là kiểu dữ liệu mà URL chỉ tới). + Server : Chỉ ra server mà trên đó chứa dữ liệu user cần. + Port : Là điểm truy cập dịch vụ ở lớp transport chỉ ra nếu server không sử dụng port mặc nhiên. + Pathdataname : Đường dẫn tương đối hoặc tuyệt đối đến file trên server. Được quy ước bởi quy tắc đặt tên chung (Uniform Naming Convention). + anchor: Chỉ ra vị trí trong một tài liệu HTML. 1.1.2. HTTP HTTP (HyperText Transfer Protocol), tiếng Việt gọi là Giao Thức Truyền Siêu Văn Bản. HTTP là một giao thức chuẩn trực thuộc lớp ứng dụng trong mô hình 7 lớp OSI (Open Systems Interconnection) và được dùng để liên hệ thông tin giữa máy cung cấp dịch vụ (Web Server) và máy dùng dịch vụ (Client). HTTP tương thích với nhiều định dạng thông tin, media và hồ sơ. 1.1.3. Word Wide Web World Wide Web, gọi tắt là Web hoặc WWW, là mạng lưới thông tin trực tuyến toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet. Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet. Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet. Web chứa thông tin bao gồm văn bản, hình ảnh, âm thanh và thậm chí cả video được kết hợp với nhau. Web là kho thông tin khổng lồ, phong phú về nội dung, đa dạng về hình thức, thường xuyên được cập nhật, đổi mới và phát triển không ngừng. Các tài liệu trên 6 World Wide Web được lưu trữ trong một hệ thống siêu văn bản (hypertext), đặt tại các máy tính trong mạng Internet. Người dùng phải sử dụng một chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản. Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác. Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web. Quá trình này cho phép người dùng có thể duyệt các trang web để lấy thông tin. Tuy nhiên độ chính xác và chứng thực của thông tin không được đả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 bản là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẫu thông tin được trình bày trên World Wide Web . HTML được định nghĩa như là một ứng dụng đơn giản của SGML(Standard Generalized Markup Language)một hệ thống tổ chức và gắn thẻ yếu tố của một tài liệu, vốn được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML giờ đây đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của HTML là HTML 4.01(1999). Sau đó, người ta đã thay thế nó bằng XHTML (Extensible HyperText Markup Language). Hiện nay, HTML đang được phát triển với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho web. 1.2.2. Cấu trúc cơ bản của một file HTML Tiêu đề của tài liệu …Nội dung của tài liệu 7 1.3. Ngôn ngữ CSS 1.3.1. Giới thiệu CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, …giúp định dạng cách hiển thị của một tài liệu Web như font chữ, kích thước, màu sắc… Để viết mã CSS chúng ta có thể sử dụng một trình soạn thảo văn bản đơn giản như: Notedpad, Wordpad hay các Visual Editor (trình biên dịch trực quan) như Frontpage, DreamWeaver, Golive… 1.3.2. Cú pháp của CSS Cú pháp của CSS được chia thành 3 phần: thẻ chọn (selector), thuộc tính (property), giá trị (value). Trong đó: - Thẻ chọn là các thẻ của tài liệu HTML hoặc các thẻ sử dụng CLASS hoặc ID. - Thuộc tính là các thuộc tính định dạng của phần tử như color, font-size, font- family… - Giá trị là giá trị của các thuộc tính nói trên. Quy tắc: Trong trường hợp thẻ chọn có nhiều thuộc tính thì các thuộc tính được ngăn cách bởi dấu “;” - Hoặc khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt. - Nếu giá trị có nhiều từ và 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ó một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. 1.4. Bootstrap 1.4.1. Giới thiệu Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ dàng hơn. Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong Bootstrap có thêm các plugin 8 Javascript trong nó. Giúp cho việc thiết kế reponsive trở nên dễ dàng hơn và nhanh chóng hơn. 1.4.2. Cách nhúng BOOTSTRAP vào file HTML Có 2 cách để sử dụng Bootstrap: - Download Bootstrap từ getbootstrap.com 1.4.2.1. Sử dụng thẻ link trong css để liên kết Bootstrap - < link rel="stylesheet"href="https:maxcdn.bootstrapcdn.combootstrap3.4.1cssbootstrap.min.css" > 1.4.2.1. Sử dụng thẻ Script trong Javascript để liên kết Bootstrap - - 1.5. Ngôn ngữ JAVASCRIPT 1.5.1. Giới thiệu JavaScript là ngôn ngữ dưới dạng Script có thể gắn với các file HTML. Nó không được biên dịch mà được trình duyệt diễn dịch. Không giống Java phải chuyển thành các mã để biên dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn. JavaScript là ngôn ngữ lập trình dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng. Tuy vậy, JavaScript không phải là ngôn ngữ lập trình hướng đối tượng như C++ hay Java do không hỗ trợ các lớp ...

LỜI CẢM ƠN

Trên thực tế không có sự thành công nào mà không gắn liền với những sự hỗ trợ, giúp đỡ dù ít hay nhiều, dù trực tiếp hay gián tiếp của người khác Trong suốt thời gian từ khi bắt đầu học tập ở giảng đường đại học đến nay, tôi đã nhận được rất nhiều sự quan tâm, giúp đỡ của quý Thầy Cô, gia đình và 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 cô giáo, Th.S Trần Thị Diệu Linh đã tận tình hướng dẫn tôi trong suốt quá trình thực hiện đề tài

Tôi cũng xin chân thành cảm ơn quý Thầy, Cô khoa Công Nghệ Thông Tin trường Đại Học Quảng Nam đã tận tình truyền đạt kiến thức cho tôi trong suốt ba năm học tại trường Với vốn kiến thức được tiếp thu trong quá trình học tập không chỉ là nền tảng cho quá trình nghiên cứu đề tài thực tập tốt nghiệp này mà còn là hành trang quý báu để tôi bước vào đời một cách vững chắc và tự tin

Trong quá trình thực hiện đề tài thực tập, khó tránh khỏi sai sót, rất mong quý Thầy, Cô bỏ qua, đồng thời do trình độ lý luận cũng như kinh nghiệm thực tiễn còn hạn chế nên tôi rất mong nhận được ý kiến đóng góp từ quý Thầy, Cô để tôi học hỏi thêm được nhiều kinh nghiệm và sẽ hoàn thành tốt hơn bài báo cáo thực tập sắp tới

Cuối cùng kính chúc quý Thầy, Cô dồi dào sức khỏe và đạt được nhiều thành công tốt đẹp trong 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

Nguyễn Hữu Tín

MỤC LỤC

A PHẦN MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục tiêu của đề tài 3

3 Đối tượng và phạm vi nghiên cứu 3

4 Phương pháp nghiên cứu 3

5 Đóng góp của đề tài 3

6 Cấu trúc đề tài 3

B PHẦN NỘI DUNG 5

CHƯƠNG I CƠ SỞ LÝ THUYẾT 5

1.1 Các khái niệm cơ bản 5

1.4.2 Cách nhúng BOOTSTRAP vào file HTML 8

1.4.2.1 Sử dụng thẻ link trong css để liên kết Bootstrap 8

1.4.2.1 Sử dụng thẻ Script trong Javascript để liên kết Bootstrap 8

1.6.2 Cách nhúng Jquery vào file HTML 9

1.6.2.1 Sử dụng file nguồn Javascript 10

1.7 Ngôn ngữ NODE JS 10

1.7.1 Giới thiệu 10

1.7.2 Cú pháp khai báo Node js 10

1.8 Hệ quản trị cơ sở dữ liệu Postgresql 11

1.8.1 Giới thiệu 11

1.8.2 Sự kết hợp giữa Node js và Postgresql 12

1.9 Công cụ sử dụng 12

1.9.1 Visual Studio Code 12

1.9.1.1 Giới thiệu Visual Studio Code 12

1.9.1.2 Cài đặt Visual Studio Code 13

1.9.2 GIT 14

1.9.2.1 Giới thiệu GIT 14

1.9.2 Database PostgreSQL 15

1.9.2.1 Cài đặt Database PostgreSQL 15

CHƯƠNG II PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 19

2.1 Định nghĩa bài toán 19

2.2 Danh sách các tác nhân 19

2.3 Xây dựng các luật tham chiếu 19

2.4 Phân tích ca sử dụng và xây dựng biểu đồ UC 25

2.8 Thiết kế cơ sở dữ liệu 36

2.8.1 Các bảng trong cơ sở dữ liệu 36

CHƯƠNG 3: GIỚI THIỆU PHẦN MỀM 39

1 Giới thiệu chương trình 39

2 Giới thiệu một số giao diện của chương trình 39

2.1 Giao diện chính của chương trình 39

2.2 Giao diện đăng nhập vào hệ thống 39

2.3 Giao diện thêm/sửa/xóa/phục hồi học sinh 40

2.4 Giao diện thêm/sửa/xóa/phục hồi lớp học 41

2.5 Giao diện danh sách các khối lớp 41

2.6 Giao diện thêm/sửa/xóa/phục hồi giáo viên 42

2.7 Giao diện thêm/sửa/xóa/phục hồi môn học 42

2.8 Giao diện thêm/sửa/xóa/phục hồi học kỳ 43

2.9 Giao diện thêm/sửa/xóa/tổng kết giữa học kỳ/tổng kết cả năm/phục hồi điểm 43

2.10 Giao diện xóa/phục hồi điểm môn học cả năm 44

2.11 Giao diện xóa/tổng kết cả năm/phục hồi điểm học kỳ 44

2.12 Giao diện xóa/phục hồi điểm cả năm 45

2.13 Giao diện thêm/sửa/xóa/phục hồi tài khoản 45

C PHẦN KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 46

1 Kết luận 46

2 Hướng phát triển 46

D TÀI LIỆU THAM KHẢO 47

DANH MỤC HÌNH ẢNH

Hình 2.1 Biểu đồ ca sử dụng hệ thống quản lý điểm trường THCS Nguyễn Văn Trỗi 28

Hình 2.2 Sơ đồ tuần tự mô tả ca sử dụng “Đăng nhập hệ thống” 29

Hình 2.3 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý học sinh” 29

Hình 2.4 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý lớp học” 29

Hình 2.5 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý giáo viên” 30

Hình 2.6 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý môn học” 30

Hình 2.7 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý môn học” 30

Hình 2.8 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý điểm” 30

Hình 2.9 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tổng kết môn học” 31

Hình 2.10 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tổng kết học kỳ” 31

Hình 2.11 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tổng kết cả năm” 31

Hình 2.12 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tài khoản” 31

Hình 2.13 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý tìm kiếm” 32

Hình 2.14 Sơ đồ tuần tự mô tả ca sử dụng “Quản lý danh sách” 32

Hình 2.15 Sơ đồ lớp hệ thống quản lý điểm trường THCS Nguyễn Văn Trỗi 33

Hình 2.16 Biểu đồ trạng thái lớp học sinh 34

Hình 2.17 Biểu đồ trạng thái lớp lớp 34

Hình 2.18 Biểu đồ trạng thái lớp giáo viên 34

Hình 2.19 Biểu đồ trạng thái lớp môn học 35

Hình 2.20 Biểu đồ trạng thái lớp học kỳ 35

Hình 2.21 Biểu đồ trạng thái lớp điểm 35

Hình 2.22 Biểu đồ trạng thái lớp tài khoản 36

Hình 3.1 Giao diện chính của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 39 Hình 3.2 Giao diện đăng nhập của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 40

Hình 3.3 Giao diện thêm/sửa/xóa/phục hồi học sinh của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 40

Hình 3.4 Giao diện thêm/sửa/xóa/phục hồi lớp học của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 41

Hình 3.5 Giao diện danh sách khối lớp của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 41 Hình 3.6 Giao diện thêm/sửa/xóa/phục hồi giáo viên của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 42 Hình 3.8 Giao diện thêm/sửa/xóa/phục hồi môn học của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 42 Hình 3.9 Giao diện thêm/sửa/xóa/phục hồi học kỳ của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 43 Hình 3.10 Giao diện thêm/sửa/xóa/tổng kết giữa học kỳ/tổng kết cả năm/phục hồi học kỳ của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 43 Hình 3.11 Giao diện xóa/phục hồi điểm môn học cả năm của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 44 Hình 3.12 Giao diện xóa/tổng kết cả năm / phục hồi điểm tổng kết học kỳ của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 44 Hình 3.13 Giao diện xóa/phục hồi điểm cả năm của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 45 Hình 3.14 Giao diện thêm/sửa/xóa/phục hồi tài khoản của Website quản lí điểm trường THCS Nguyễn Văn Trỗi 45

CÁC TỪ VIẾT TẮT

HTML HyperText MarkupLanguage

THCS Trung Học Cơ Sở

UC Use Case

A PHẦN MỞ ĐẦU 1 Lý do chọn đề tài

Cùng với sự phát triển nhanh chóng về phần cứng máy tính, các phần mềm ngày càng trở nên đa dạng, phong phú, hoàn thiện hơn và hỗ trợ hiệu quả cho con người Các phần mềm hiện nay ngày càng mô phỏng được rất chuyên 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, và một số nghiệp vụ được tự động hóa cao

Do vậy mà trong việc phát triển phần mềm, sự đòi hỏi không chỉ là sự chính xác, xử lý được nhiều nghiệp vụ thực tế mà còn phải yêu cầu khác như về tốc độ, giao diện thân thiện, mô hình hóa được 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 một phần lớn thời gian, công sức của con người, và tăng độ chính xác hiệu quả trong công việc

Một ví dụ cụ thể, việc quản lý điểm trong trường trung học cơ sở, THCS Nguyễn Văn Trỗi – Tam dân – Phú ninh – Quảng Nam Nếu không có sự hỗ trợ của tin học, việc quản lý này phải cần khá nhiều người, chia thành nhiều khâu mới có thể quản lý được toàn bộ hồ sơ điểm của học sinh, lớp học…cũng như các nghiệp vụ tính điểm trung bình và xếp lực học tập cho học sinh toàn trường Các công việc này đòi hỏi nhiều thời gian và công sức, mà sự chính xác và hiệu quả không cao vì đa số đều làm bằng thủ công rất ít tự động Ngoài ra còn một số khó khăn về dữ liệu lưu trữ khá đồ 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 toán điểm các chỉ tiêu liên quan hỗ trợ tra cứu, quản lý thông tin một cách nhanh chóng và thuận tiện nhất

➢ Cung cấp các thông tin tức thời thông qua sơ đồ mô phỏng, các 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 các loại danh mục ➢ Có khả năng hỗ trợ mạng WAN, gửi và nhận dữ liệu nhanh chóng

❖ Giao diện đẹp mắt

chương trình những người mới có thể làm quen với chương trình một cách nhanh chóng

➢ Giao diện đẹp mắt, dễ sử dụng, hỗ trợ tất cả các khâu trong công tác quản lý điểm cho nhà trường

❖ Hiệu suất làm việc hiệu quả

➢ Là công cụ mới tạo ra bước đột phá trong việc quản lý điểm

➢ Phần mềm chạy trên môi trường V8 JavaScript runtime - một trình thông dịch JavaScript cực nhanh chạy trên 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ý bằng 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 quả với chi phí thấp nhất

➢ Thiết kế website quản lý điểm được viết mới hoàn toàn theo yêu cầu ➢ Số liệu chính 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 dữ liệu, sử dụng đến từng chức năng trong chương trình, phân quyền cập nhật truy xuất dữ liệu theo phân cấp quản lý của người dùng

➢ Mã hoá dữ liệu hai lớp tạo cho dữ liệu an toàn một cách tốt nhất

❖ Sự an toàn tuyệt đối

Thiết kế website quản lý điểm đảm bảo dữ liệu luôn luôn được thông suốt, công việc được tiến hành trôi chảy vì thế chương trình có chức năng sao lưu và phục hồi dữ liệu vào thời điểm bất kỳ

❖ Tiện ích cao

Cho phép kết xuất dữ liệu dễ dàng từ phần mềm sang các định dạng: Exel Cùng

những lí do trên đây, tôi đã chọn đề tài “Ứng dụng công nghệ Node js và hệ quản trị

cơ sở dữ 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 của

mình, với mong muốn xây dựng một website quản lý điểm một cách chuyên nghiệp, nhanh chóng, dễ dàng và hiệu quả hơn

2 Mục tiêu của đề tài

➢ Nghiên cứu lý thuyết về web như HTML, CSS, Bootstrap, Jquery, Node js

phục vụ việc xây dựng wesite

➢ Vận dụng cơ sở lý thuyết đã nghiên cứu xây dựng Website quản lý điểm tại

trường THCS Nguyễn Văn Trỗi

3 Đối tượng và 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

4 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 các tài liệu, giáo

trình liên quan tới website quản lý điểm để đưa ra 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 ra 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 để hoàn thiện về mặt nội dung cung như hình thức của đề tài

5 Đóng góp của đề tài

➢ Cung cấp kiến thức về thiết kế website

➢ Cung cấp một trang website điểm và Có thể nói đây là một trang website có tính ứng dụng cao và sẽ làm phong phú thêm cho kho trang website quản lý

➢ Với đề tài này tôi mong muốn cung cấp một tài liệu tham khảo cho sinh viên trong khoa cũng như ngoài khoa khi tiếp cận và tìm hiểu về lĩnh vực nghiên cứu trang website quản lý và nhất là lĩnh vực mà tôi đang nghiên cứu

6 Cấu trúc đề tài

Đề tài thực tập tốt nghiệp này, ngoài phần Mở đầu và Kết luận, phần Nội dung chi tiết gồm ba chương, cụ thể như sau:

Chương 1: Cơ sở lý thuyết Chương này trình bày các khái niệm cơ bản về web,

Chương 2: Phân tích và thiết kế hệ thống Chương này đặt tả bài toán sau đó

phân tích và thiết kế cơ sở dữ liệu để bước đầu hình dung xây dựng hệ thống

Chương 3: Giới thiệu về phần mềm Chương này giới thiệu một số hình ảnh

giao diện chính của 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 cơ bản

1.1.1 URL

URL (Uniform Resource Locators) là một thuật ngữ để chỉ ra vị trí tài nguyên (resource) trên internet Các kết nối từ một tài liệu HTML đến một file hoặc một server khác phải được viết theo dạng sau:

Scheme://server[:port]/path/dataname[#anchor] Trong đó:

+ Scheme: Chỉ ra loại protocol mà tài nguyên sử dụng (hay nói cách khác là kiểu dữ liệu mà URL chỉ tới)

+ Server : Chỉ ra server mà trên đó chứa dữ liệu user cần

+ Port : Là điểm truy cập dịch vụ ở lớp transport chỉ ra nếu server không sử dụng port mặc nhiên

+ Path/dataname : Đường dẫn tương đối hoặc tuyệt đối đến file trên server Được quy ước bởi quy tắc đặt tên chung (Uniform Naming Convention)

+ #anchor: Chỉ ra vị trí trong một tài liệu HTML

1.1.2 HTTP

HTTP (HyperText Transfer Protocol), tiếng Việt gọi là Giao Thức Truyền Siêu Văn Bản HTTP là một giao thức chuẩn trực thuộc lớp ứng dụng trong mô hình 7 lớp OSI (Open Systems Interconnection) và được dùng để liên hệ thông tin giữa máy cung cấp dịch vụ (Web Server) và máy dùng dịch vụ (Client) HTTP tương thích với nhiều định dạng thông tin, media và hồ sơ

1.1.3 Word Wide Web

World Wide Web, gọi tắt là Web hoặc WWW, là mạng lưới thông tin trực tuyến toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet Web chứa thông tin bao gồm văn bản, hình ảnh, âm thanh và thậm chí cả video được kết hợp với nhau

Web là kho thông tin khổng lồ, phong phú về nội dung, đa dạng về hình thức,

World Wide Web được lưu trữ trong một hệ thống siêu văn bản (hypertext), đặt tại các máy tính trong mạng Internet Người dùng phải sử dụng một chương trình được gọi là trình duyệt web (web browser) để xem siêu văn bản Người dùng có thể theo các liên kết siêu văn bản (hyperlink) trên mỗi trang web để nối với các tài liệu khác hoặc gửi thông tin phản hồi theo máy chủ trong một quá trình tương tác Hoạt động truy tìm theo các siêu liên kết thường được gọi là duyệt Web Quá trình này cho phép người dùng có thể duyệt các trang web để lấy thông tin Tuy nhiên độ chính xác và chứng thực của thông tin không được đả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 bản là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẫu thông tin được trình bày trên World Wide Web HTML được định nghĩa như là một ứng dụng đơn giản của SGML(Standard Generalized Markup Language)_một hệ thống tổ chức và gắn thẻ yếu tố của một tài liệu, vốn được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp HTML giờ đây đã trở thành một chuẩn Internet do tổ chức World Wide Web Consortium (W3C) duy trì Phiên bản chính thức mới nhất của HTML là HTML 4.01(1999) Sau đó, người ta đã thay thế nó bằng XHTML (Extensible HyperText Markup Language) Hiện nay, HTML đang được phát triển với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho web

1.2.2 Cấu trúc cơ bản của một file HTML

<HTML>

<HEAD>

<TITLE>Tiêu đề của tài liệu</TITLE> </HEAD>

<BODY Các tham số nếu có> …Nội dung của tài liệu </BODY>

</HTML>

1.3 Ngôn ngữ CSS 1.3.1 Giới thiệu

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, …giúp định dạng cách hiển thị của một tài liệu Web như font chữ, kích thước, màu sắc…

Để viết mã CSS chúng ta có thể sử dụng một trình soạn thảo văn bản đơn giản như: Notedpad, Wordpad hay các Visual Editor (trình biên dịch trực quan) như Frontpage, DreamWeaver, Golive…

1.3.2 Cú pháp của CSS

Cú pháp của CSS được chia thành 3 phần: thẻ chọn (selector), thuộc tính (property), giá trị (value)

Trong đó:

- Thẻ chọn là các thẻ của tài liệu HTML hoặc các thẻ sử dụng CLASS hoặc ID - Thuộc tính là các thuộc tính định dạng của phần tử như color, size,

- Hoặc khi thẻ chọn có nhiều thuộc tính thì chúng ta nên để mỗi thuộc tính ở trên một dòng riêng biệt

- Nếu giá trị có nhiều từ và có khoảng trắng ta nên đặt giá trị giá trị vào dấu

Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ dàng hơn Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác Trong Bootstrap có thêm các plugin

Javascript trong nó Giúp cho việc thiết kế reponsive trở nên dễ dàng hơn và nhanh chóng hơn

1.4.2 Cách nhúng BOOTSTRAP vào file HTML

Có 2 cách để sử dụng Bootstrap:

- Download Bootstrap từ getbootstrap.com

1.4.2.1 Sử dụng thẻ link trong css để liên kết Bootstrap

JavaScript là ngôn ngữ dưới dạng Script có thể gắn với các file HTML Nó không được biên dịch mà được trình duyệt diễn dịch Không giống Java phải chuyển thành các mã để biên dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn

JavaScript là ngôn ngữ lập trình dựa trên đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng Tuy vậy, JavaScript không phải là ngôn ngữ lập trình hướng đối tượng như C++ hay Java do không hỗ trợ các lớp hay tính kế thừa JavaScript có thể đáp ứng các sự kiện như tải hay loại bỏ các form Khả năng này cho phép JavaScript trở thành một ngôn ngữ Javascript động

Giống với HTML và Java, JavaScript được thiết kế độc lập với hệ điều hành Nó có thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript được nhúng vào trang HTML Khi trình duyệt yêu cầu một trang, server gửi đầy đủ nội dung của trang đó, bao gồm cả HTML và các câu lệnh JavaScript qua mạng tới client Client sẽ đọc trang đó từ đầu đến cuối, hiển thị các kết quả của HTML và xử lý các câu lệnh của JavaScript bất cứ nơi nào chúng xuất hiện

Các lệnh JavaScript được nhúng trong một trang HTML có thể trả lời cho các sự kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng trang

1.5.2 Cách nhúng JAVASCRIPT vào file HTML

Ta có thể nhúng JavaScript vào một file HTML theo một trong các câu lệnh sau: - Sử dụng các câu lệnh và các hàm trong cặp thẻ <SCRIPT>

- Sử dụng các file nguồn JavaScript

- Sử dụng một biểu thức JavaScript làm giá trị của một thuộc tính HTML

- Sử dụng thẻ sự kiện trong một HTML nào đó

Trong đó, sử dụng cặp thẻ <SCRIPT>…</SCRIPT> và nhúng một file nguồn JavaScript là được sử dụng nhiều hơn cả

Jquery là thư viện được viết từ JavaScript, Jquery giúp xây dựng các chức năng bằng Javascript dễ dàng, nhanh và giàu tính năng hơn Jquery được tích hợp nhiều

module khác nhau Từ module hiệu ứng cho đến module truy vấn selector Jquery được sử dụng đến 99% trên tổng số website trên thế giới

Các module phổ biến của jQuery bao gồm:

▪ Ajax – xử lý Ajax

▪ Atributes – Xử lý các thuộc tính của đối tượng HTML

▪ Effect – xử lý hiệu ứng

▪ Event – xử lý sự kiện

▪ Form – xử lý sự kiện liên quan tới form

▪ DOM – xử lý Data Object Model

▪ Selector – xử lý luồng lách giữa các đối tượng HTML 1.6.2 Cách nhúng Jquery vào file HTML

Ta có thể nhúng Jquery vào một file HTML theo một trong các câu lệnh sau:

- Sử dụng các file nguồn JavaScript - Sử dụng CDN

1.6.2.1 Sử dụng file nguồn Javascript

- <script src= “ thư viện download trên jquery.com “ ></script>

Node js là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó được sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp Node js là một mã nguồn mở được sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới V8 JavaScript engine là một JavaScript engine mã nguồn mở chạy trên các trình duyệt Chrome, Opera và Vivaldi Nó được thiết kế tập trung vào hiệu năng và chịu trách nhiệm cho việc dịch mã JavaScript sang mã máy để máy tính có thể hiểu và chạy được

Node js có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux, OS X nên đó cũng là một lợi thế Node js cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất

Tại sao ta sử dụng ngôn ngữ lập trình Node js ?

Ngôn ngữ này hoạt động cận kề với Webserver để thông dịch các yêu cầu từ trên World Wide Web, sau đó nhận các trả lời từ Webserver chuyển tải đến trình duyệt Web nhằm đáp ứng các nhu cầu đó

Các đặc điểm nổi bật:

• Tốc độ nhanh, dễ sử dụng

• Cung cấp rất nhiều module hữu ích • Cộng đồng sử dụng rộng rãi

• Chạy trên nhiều hệ điều hành • Truy cập bất kỳ loại CSDL nào • Luôn được cải tiến và cập nhật

1.7.2 Cú pháp khai báo Node js

Node.js cho phép chạy mã JavaScript ở phía backend, vượt ra khỏi phạm vi trình duyệt

Để chạy được JavaScript phía backend, mã nguồn cần phải được biên dịch, và chạy Đây chính là nhiệm vụ mà Node.js đảm nhiệm, bằng việc sử dụng lại máy ảo V8 của Google, hay còn được biết đến là môi trường chạy của JavaScript trên trình duyệt Google Chrome

Trên Server:

Console.log(“ Hello world “);

Trên Client: Node js chỉ phân tích các đoạn mã nằm trong những dấu giới hạn của nó Bất cứ mã nào nằm ngoài dấu giới hạn đều được xuất ra trực tiếp không thông qua xử lý bởi Node js

PostgreSQL đã tự đưa ra tuyên bố là "Cơ sở dữ liệu mã nguồn mở tiên tiến nhất thế giới" Vậy điều gì khiến cho PostgreSQL tự tin đến vây ?

PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ-đối tượng (object-relational database management system)

PostgreSQL được thiết kế để chạy trên các nền tảng tương tự UNIX Tuy nhiên, PostgreSQL sau đó cũng được điều chỉnh linh động để có thể chạy được trên nhiều nền tảng khác nhau như Mac OS X, Solaris và Windows

PostgreSQL là một phần mềm mã nguồn mở miễn phí Mã nguồn của phần mềm khả dụng theo license của PostgreSQL, một license nguồn mở tự do

PostgreSQL không yêu cầu quá nhiều công tác bảo trì bởi có tính ổn định cao Do đó, phát triển các ứng dụng dựa trên PostgreSQL, chi phí sở hữu sẽ thấp hơn so với các hệ thống quản trị dữ liệu khác

PostgreSQL là hệ thống quản lý cơ sở dữ liệu đầu tiên triển khai tính năng kiểm soát đồng thời nhiều phiên bản (MVCC) trước cả Oracle

PostgreSQL cho phép thêm vào các tính năng tùy chỉnh được phát triển bằng các ngôn ngữ chương trình khác nhau như Node js, C/C , Java,

Bên cạnh đó, khi có bất kỳ vấn đề gì cần hỗ trợ, luôn có một cộng đồng nhiệt tình sẵn sàng để trợ giúp Trên thị trường, có nhiều công ty đã xây dựng và cung cấp các sản phẩm, giải pháp sử dụng PostgreSQL Một số công ty nổi bật trong số đó là Apple, Fujitsu, Red Hat, Cisco, Juniper Network, v.v

1.8.2 Sự kết hợp giữa Node js và Postgresql

Sự kết hợp giữa Node js và Postgresql tạo nên một nền tảng tốt cho trang web Số lượng người sử dụng ngôn ngữ này ngày càng cao trong cộng động lập trình web, Node js và Postgresql trở nên rất thông dụng Dường như đó là 1 cặp bài trùng

Node js kết hợp với Postgresql sẽ tạo ra các ứng dụng chéo nền (cross-platform), nên có thể phát triển ứng dụng trên Windows, và máy chủ là Unix

1.9 Công cụ sử dụng 1.9.1 Visual Studio Code

1.9.1.1 Giới thiệu Visual Studio Code

Visual Studio là một phần mềm lập trình hệ thống được sản xuất trực tiếp từ Microsoft Từ khi ra đời đến nay, Visual Studio đã có rất nhiều các phiên bản sử dụng khác nhau Điều đó, giúp cho người dùng có thể lựa chọn được phiên bản tương thích với dòng máy của mình cũng như cấu hình sử dụng phù hợp nhất

Bên cạnh đó, Visual Studio còn cho phép người dùng có thể tự chọn lựa giao diện chính cho máy của mình tùy thuộc vào nhu cầu sử dụng

Giống như bất kỳ một IDE khác, Visual Studio gồm có một trình soạn thảo mã hỗ trợ tô sáng cú pháp và hoàn thiện mả bằng các sử dụng IntelliSense không chỉ cho các hàm, biến và các phương pháp mà còn sử dụng cho các cấu trúc ngôn ngữ như: Truy vấn hoặc vòng điều khiển

Bên cạnh đó, các trình biên tập mã Visual Studio cũng hỗ trợ cài đặt dấu trang trong mã để có thể điều hướng một cách nhanh chóng và dễ dàng Hỗ trợ các điều hướng như: Thu hẹp các khối mã lệnh, tìm kiếm gia tăng,…

Visual Studio còn có tính năng biên dịch nền tức là khi mã đang được viết thì phần mềm này sẽ biên dịch nó trong nền để nhằm cung cấp thông tin phản hồi về cú pháp cũng như biên dịch lỗi và được đánh dấu bằng các gạch gợn sóng màu đỏ

Visual Studio có một trình gỡ lỗi có tính năng vừa lập trình gỡ lỗi cấp máy và gỡ lỗi cấp mã nguồn Tính năng này hoạt động với cả hai mã quản lý giống như ngôn

ngữ máy và có thể sử dụng để gỡ lỗi các ứng dụng được viết bằng các ngôn ngữ được hỗ trợ bởi Visual Studio

Được sử dụng với mục đích xây dựng GUI sử dụng Windows Forms, được bố trí dùng để xây dựng các nút điều khiển bên trong hoặc cũng có thể khóa chúng vào bên cạnh mẫu Điều khiển trình bày dữ liệu có thể được liên kết với các nguồn dữ liệu như: Cơ sở dữ liệu hoặc truy vấn

Tính năng này cũng giống như Windows Forms Designer có công dụng hỗ trợ kéo và thả ẩn dụ Sử dụng tương tác giữa người và máy tính nhắm mục tiêu vào Windows Presentation Foundation

Visual Studio cũng có một trình soạn thảo và thiết kế website cho phép các

trang web được thiết kế theo tính năng kéo và thể đối tượng

1.9.1.2 Cài đặt Visual Studio Code

- Tải Visual Studio Code 1.12 theo đường dẫn: https://code.visualstudio.com - Sau khi tải xong và tiến hành cài đặt

- Sau khi cài đặt xong đây là giao diện chính của Visual studio code

1.9.1.3 Cách sử dụng Visual studio code

- Lựa chọn ngôn ngữ thiết Web ( HTML, PHP, CSS, Java, XML, ) tùy đuôi

tương thích Ở đây Ta chọn HTML

- Khung soạn thảo hiện thị ra để viết Code

1.9.2 GIT

1.9.2.1 Giới thiệu GIT

Git là hệ thống kiểm soát phiên bản phân tán mà nguồn mở ( Open Source

Distributed Version Control System) Các dự án thực tế thường có nhiều nhà phát triển

làm việc song song Vì vậy, một hệ thống kiểm soát phiên bản như Git là cần thiết để

đảm bảo không có xung đột mã giữa các nhà phát triển Ngoài ra, các yêu cầu trong dự án thay đổi thường xuyên Vì vậy, cần một hệ thống cho phép nhà phát triển quay lại phiên bản cũ hơn của mã

Repository là gì ?

• Repository hay còn gọi là Repo, dịch ra tiếng Việt có nghĩa là kho, đây chính là

nơi chứa tất cả mã nguồn cho một dự án được tạo bởi Git Có hai loại repository là local repository và remote repository:

o Local repository: là repo được cài đặt trên máy tính của lập trình viên,

repo này sẽ đồng bộ hóa với remote bằng các lệnh của Git

o Remote repository: là repo được cài đặt trên server chuyên dụng, điển

hình hiện nay là Github

• Branch là gì ?

Đối với những dự án có nhiều thành viên tham gia thì mỗi thành viên sẽ nhận được nhiều task từ leader, vì vậy việc xử lý task này trên cùng một thời gian là rất khó vì dễ bị đụng code Để giải quyết vấn đề này thì chúng ta sẽ sử dụng branch của Git, tương ứng với mỗi nhiệm vụ chúng ta sẽ tạo một branh và làm việc trên đó, các branch này sẽ hoạt động riêng lẻ và không anh hưởng lẫn nhau

Vậy branch là những phân nhánh ghi lại luồng thay đổi của lịch sử, các hoạt động trên mỗi branch sẽ không ảnh hưởng lên các branch khác nên có thể tiến hành nhiều thay đổi đồng thời trên một repository giúp giải quyết nhiều nhiệm vụ cùng lúc

Khi tạo một repository thì Git sẽ thiết lập branch mặc định là master, nghĩa là nó sẽ tự tạo một branch master và mọi hoạt động của ban lúc này đều nằm trên branch master

- Cách thức hoạt động của GIT

• Repository (repo): là nơi chứa source code

• Remote: server online

• Local: server local trên máy

• Working copy: nơi làm việc trực tiếp trên máy local Thao tác cơ bản của 1 dev khi hoàn thành 1 tính năng:năng:

• Commit: Lưu các thay đổi từ thư mục đang làm việc (working coppy) vào

server local (local repo)

• Push: Cập nhật các thay đổi từ server local ở máy(local repo) lên server

online (remote repo)

1.9.2 Database PostgreSQL

1.9.2.1 Cài đặt Database PostgreSQL

- Truy cập địa chỉ https://www.postgresql.org/download/ để tải

- Sau khi tải về tiến hành Run as administrator và chọn Next

- Cấu hình thư mục lưu trữ và chọn Next

- Tiếp theo là cấu hình user và pass

- Cổng mặc định là 5432 nếu muốn thay đổi và chọn Next

- Sử dụng locale (thông tin địa phương) mặc định, nó sẽ lấy thông tin được thiết lập trên máy tính và chọn Next

- Tiếp tục chọn Next

- Nhấn finish để hoàn thành việc cài đặt

CHƯƠNG II PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1 Định nghĩa bài toán

Bài toán được mô tả như sau:

“Trường THCS Nguyễn Văn Trỗi muốn xây dựng một hệ thống phần mềm để phục vụ và quản lý điểm của các cán bộ giảng dạy

Công việc quản lý điểm học sinh thường mất nhiểu thời gian, việc sử dụng phần mềm để quản lý điểm là cần thiết

Do vậy, hệ thống cần phải ghi nhận những thay đổi đó đồng thời thống kê, báo cáo thông tin điểm của học sinh, Ngoài ra, hệ thống còn giúp người quản lý lưu trữ một lượng lớn thông tin học sinh, lớp, môn học, học kì và thông tin của các giáo viên giảng dạy tại trường.”

2.2 Danh sách các tác nhân

Dựa trên những kết quả của quá trình khảo sát, hệ thống Website quản lý điểm sẽ có những tác nhân sau:

➢ Admin:

- Người có quyền cao nhất trong hệ thống, quản lý tất cả module của Website và phân quyền truy cập các tài khoản truy cập khác

➢ Giáo viên:

- Là giáo viên hoạt động tại trường học

- giáo viên có thể có những yêu cầu chỉnh sửa thông tin trên phần mềm

2.3 Xây dựng các luật tham chiếu ❖ Quản lý học sinh

Cập nhật (thêm) thông tin học sinh Hiển thị Sửa/xoá thông tin học sinh Hiển thị

Hiển thị thông tin học sinh Hiển thị Tìm kiếm thông tin học sinh Hiển thị Khôi phục thông tin học sinh

❖ Quản lý lớp

Cập nhật (thêm) thông tin lớp học Hiển thị Sửa/xoá thông tin lớp học Hiển thị

Hiển thị thông tin lớp học Hiển thị Tìm kiếm thông tin lớp học Hiển thị Khôi phục thông tin lớp học Hiển thị

❖ Quản lý giáo viên

Cập nhật (thêm) thông tin giáo viên Hiển thị

Sửa/xoá thông tin giáo viên Hiển thị

Hiển thị thông tin giáo viên Hiển thị

Tìm kiếm thông tin giáo viên Hiển thị

Khôi phục thông tin giáo viên Hiển thị