Tải bản đầy đủ (.pdf) (55 trang)

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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.62 MB, 55 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>LỜI CẢM ƠN </b>

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 q 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 q 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 q 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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>MỤC LỤC </b>

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>DANH MỤC HÌNH ẢNH </b>

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>CÁC TỪ VIẾT TẮT </b>

HTML HyperText MarkupLanguage

THCS Trung Học Cơ Sở

UC Use Case

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

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 chun nghiệp vụ khó khăn, hỗ trợ cho người dùng thuận tiện sử dụng, thời gian xử lý nhanh chóng, 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 tồ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 tồ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. Ngồ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…

<b>Một website quản lý điểm cần khẳng định được: ❖ Tính nghiệp vụ </b>

➢ Tự động tính tố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

<b>❖ Tính linh động </b>

➢ 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.

<b>❖ Giao diện đẹp mắt </b>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

<b>❖ Hiệu suất làm việc hiệu quả </b>

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

➢ 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.

<b>❖ Tính bảo mật </b>

➢ 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.

<b>❖ Sự an toàn tuyệt đối </b>

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ỳ.

<b>❖ Tiện ích cao </b>

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

<i>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ị </i>

<i>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 </i>

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.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>2. Mục tiêu của đề tài </b>

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

<b>phục vụ việc xây dựng wesite. </b>

➢ 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

<b>trường THCS Nguyễn Văn Trỗi. </b>

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

➢ Đố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.

<b>- Về không gian: Trường THCS Nguyễn Văn Trỗi, Tam Dân, Phú Ninh, Quảng </b>

Nam.

<b>4. Phương pháp nghiên cứu </b>

➢ 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

<b>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ý </b>

đ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.

<b>5. Đóng góp của đề tài </b>

➢ 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.

<b>6. Cấu trúc đề tài </b>

Đề 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:

<b>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, </b>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

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.

<b>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 </b>

giao diện chính của chương trình demo.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>B. PHẦN NỘI DUNG </b>

<b>CHƯƠNG I. CƠ SỞ LÝ THUYẾT 1.1. Các khái niệm cơ bản </b>

<b>1.1.1. URL </b>

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.

<b>1.1.2. HTTP </b>

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ơ.

<b>1.1.3. Word Wide Web </b>

World Wide Web, gọi tắt là Web hoặc WWW, là mạng lưới thơng tin trực tuyến tồ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,

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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.

<b>1.2. Ngôn ngữ HTML 1.2.1. Khái niệm </b>

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.

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

<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>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>1.3. Ngôn ngữ CSS 1.3.1. Giới thiệu </b>

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…

<b>1.3.2. Cú pháp của CSS </b>

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

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.

<b>1.4.2. Cách nhúng BOOTSTRAP vào file HTML </b>

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

- Download Bootstrap từ getbootstrap.com

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

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.

<b>1.5.2. Cách nhúng JAVASCRIPT vào file HTML </b>

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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

- 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ả.

<i>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 </i>

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:

<small>▪ </small> <b>Ajax – xử lý Ajax </b>

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

<small>▪ </small> <b>Effect – xử lý hiệu ứng </b>

<small>▪ </small> <b>Event – xử lý sự kiện </b>

<small>▪ </small> <b>Form – xử lý sự kiện liên quan tới form </b>

<small>▪ </small> <b>DOM – xử lý Data Object Model </b>

<small>▪ </small> <b>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 </b>

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

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>1.6.2.1. Sử dụng file nguồn Javascript </b>

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

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 tồ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.

Ln được cải tiến và cập nhật.

<b>1.7.2. Cú pháp khai báo Node js </b>

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Để 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 số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,...

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

Bên cạnh đó, khi có bất kỳ vấn đề gì cần hỗ trợ, ln 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.

<b>1.8.2. Sự kết hợp giữa Node js và Postgresql </b>

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.

<b>1.9. Công cụ sử dụng 1.9.1. Visual Studio Code </b>

<b>1.9.1.1. Giới thiệu Visual Studio Code </b>

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

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

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.

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

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

<b>1.9.1.2. Cài đặt Visual Studio Code </b>

- Tải Visual Studio Code 1.12 theo đường dẫn: . - 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

<i><b>1.9.1.3. Cách sử dụng Visual studio code </b></i>

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

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

<b>- Khung soạn thảo hiện thị ra để viết Code. </b>

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>1.9.2. GIT </b>

<b>1.9.2.1. Giới thiệu GIT </b>

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

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

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

đả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ì ?

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

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:

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

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

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

hình hiện nay là Github.

<small>• </small> 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.

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

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

<small>• </small> Repository (repo): là nơi chứa source code.

<small>• </small> Remote: server online.

<small>• </small> Local: server local trên máy.

<small>• </small> 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 hồn thành 1 tính năng:năng:

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

server local (local repo)

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

online (remote repo)

<b>1.9.2. Database PostgreSQL </b>

<b>1.9.2.1. Cài đặt Database PostgreSQL </b>

<b>- Truy cập địa chỉ để tải </b>

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

- 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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

- 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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

<b>- Tiếp tục chọn Next </b>

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

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<b>CHƯƠNG II. PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 2.1. Định nghĩa bài tốn </b>

Bài tố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.”

<b>2.2. Danh sách các tác nhân </b>

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:

<b>➢ Admin: </b>

<b>- 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. </b>

<b>➢ Giáo viên: </b>

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

- 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.

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

Cập nhật (thêm) thông tin học sinh Hiển thị Sửa/xố 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

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

<b>❖ Quản lý lớp </b>

Cập nhật (thêm) thơng tin lớp học Hiển thị Sửa/xố 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ị

<b>❖ Quản lý giáo viên </b>

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

Sửa/xố 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ị

</div>

×