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 ...
PHẦN MỞ ĐẦU
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ự độ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
➢ 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
➢ 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ỳ
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.
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.
Đố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
➢ - 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 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.
Đó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.
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.
PHẦN NỘI DUNG
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]
+ 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
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ơ
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,
CƠ SỞ LÝ THUYẾT
Các khái niệm cơ bản
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]
+ 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
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ơ
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.
Ngôn ngữ HTML
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
Ngôn ngữ CSS
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…
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)
- 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
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.
Bootstrap
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
- < link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
1.4.2.1 Sử dụng thẻ Script trong Javascript để liên kết Bootstrap
-
-
Ngôn ngữ JAVASCRIPT
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ẻ
- 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ẻ … và nhúng một file nguồn JavaScript là được sử dụng nhiều hơn cả
//Chèn tất cả mã javasript ở đây
1.5.2.2 Sử dụng một file nguồn JavaScript
Jquery
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:
▪ 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
1.6.2.1 Sử dụng file nguồn Javascript
-
1.6.2.2 Sử dụng file nguồn CDN
-