Xây dựng website quản lý ngân hàng máu sống tại thành phố Đà Nẵng

Câu lạc bộ từ thiện của trường đại học Y dược Đà nẵng là nơi thường xuyên giúp các bệnh viện tìm người hiến máu khẩn cấp, nhưng câu lạc bộ hoạt động về kêu gọi máu nóng cần ngay lập tức

TRƯỜNG ĐẠI HỌC SƯ PHẠM – ĐẠI HỌC ĐÀ NẴNG

Giảng viên hướng dẫn : TS NGUYỄN THỊ NGỌC ANH

Lớp sinh hoạt : 14CNTT

ĐÀ NẴNG, 04/2018

LỜI CẢM ƠN

Để hoàn thành chuyên đề khóa luận này, đầu tiên tôi xin chân thành cảm ơn quý thầy, cô trong khoa Tin học cũng như quý thầy cô đang giảng dạy và công tác tại trường Đại học Sư phạm - Đại học Đà Nẵng đã truyền đạt những kiến thức quý báu cho tôi trong những năm học vừa qua

Tôi xin gửi đến cô TS Nguyễn Thị Ngọc Anh và quý thầy, cô trong khoa Tin học, Trường Đại học Sư phạm - Đại học Đà Nẵng, những người đã tận tình hướng dẫn, giúp đỡ tôi để hoàn thành khóa luận này lời cảm cảm ơn chân thành và sâu sắc nhất

Vì kiến thức bản thân còn hạn chế, trong quá trình hoàn thành khóa luận này tôi không tránh khỏi những sai sót, kính mong nhận được những ý kiến đóng góp từ quý thầy, cô

Xin trân trọng cảm ơn!

Đà Nẵng, ngày tháng 04 năm 2018

Sinh viên thực hiện

Nguyễn Văn Hậu

LỜI CAM ĐOAN

Tôi xin cam đoan:

1 Những nội dung trong báo cáo này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của cô TS Nguyễn Thị Ngọc Anh

2 Mọi tham khảo được dùng trong báo cáo này đều được trích dẫn rõ ràng tên tác giả, tên công trình nghiên cứu, thời gian và địa điểm công bố

3 Mọi sự sao chép không hợp lệ, vi phạm quy chế đào tạo hay gian trá, tôi xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện

Nguyễn Văn Hậu

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Đà Nẵng, ngày tháng 04 năm 2018

TS Nguyễn Thị Ngọc Anh Nguyễn Văn Hậu

NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN

Đà Nẵng, ngày tháng 04 năm 2018

Hội đồng phản biện

MỤC LỤC LỜI CẢM ƠN

LỜI CAM ĐOAN

MỤC LỤC i

DANH MỤC CÁC KÝ HIỆU, CÁC CHỮ VIẾT TẮT iv

DANH MỤC CÁC HÌNH v

DANH MỤC BẢNG viii

MỞ ĐẦU 1

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

1.1 Phân tích thiết kế hệ thống 5

1.2 Phân tích thiết kế hệ thống hướng đối tượng 5

1.2.1 Khái niệm về phân tích thiết kế hướng đối tượng 5

1.2.2 Khái niệm về UML 7

1.2.3 Phân tích thiết kế hướng đối tượng sử dụng UML 7

1.3 Nền tảng công nghệ 8

1.3.1 Giới thiệu về HTML 8

1.3.2 Giới thiệu về CSS và Bootstrap 13

1.3.3 Giới thiệu về SASS 14

1.3.4 Giới thiệu về JavaScript 15

1.3.5 Giới thiệu về TypeScript 16

1.3.6 Giới thiệu về Angular 4 17

1.3.7 Giới thiệu về RESTful API 18

1.3.8 Giới thiệu về Java 18

1.3.9 Giới thiệu về mô hình MVC 19

1.3.10 Giới thiệu về Spring boot 20

1.3.11 Giới thiệu về MySQL 20

CHƯƠNG 2: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 22

2.1 Đặt vấn đề 22

2.2 Yêu cầu chức năng 22

2.3 Yêu cầu phi chức năng 23

2.4 Phân tích thiết kế hệ thống 23

2.4.1 Sơ đồ ca sử dụng 23

2.4.2 Đặt tả ca sử dụng chung cho tất cả các loại tài khoản 28

2.4.3 Đặc tả ca sử dụng riêng cho quản trị viên 33

2.4.4 Thiết kế cơ sở dữ liệu 37

2.4.5 Sơ đồ lớp 41

2.4.6 Sơ đồ tuần tự 42

CHƯƠNG 3: TRIỂN KHAI VÀ KẾT QUẢ 47

3.1 Môi trường triển khai 47

3.2 Kết quả triển khai 47

3.2.1 Giao diện trang đăng nhập 47

3.2.2 Giao diện trang chủ 48

3.2.3 Giao diện trang đăng ký thành viên 49

3.2.4 Giao diện trang thông tin cá nhân 49

3.2.5 Giao diện trang sự kiện 50

3.2.6 Giao diện trang chi tiết tin tức 50

3.2.7 Giao diện trang đăng tin tức 51

3.2.8 Giao diện trang cẩm nang 51

3.2.9 Giao diện trang liên hệ 52

3.2.10 Giao diện trang quản trị viên 52

KẾT LUẬN 53

1 Các kết quả đạt được 53

2 Hạn chế 53

3 Hướng phát triển 53

TÀI LIỆU THAM KHẢO 54

DANH MỤC CÁC KÝ HIỆU, CÁC CHỮ VIẾT TẮT

STT Ký hiệu viết tắt Tên của ký hiệu viết tắt

Association

2.14 Ca sử dụng thống kê 35

2.33 Giao diện trang đăng tin tức 51

DANH MỤC BẢNG

1.1 Bảng mô tả các thẻ thông dụng trong HTML 12 2.1 Bảng mô tả luồng sự kiện chính của ca sử dụng đăng ký 30

2.2 Bảng mô tả luồng sự kiện chính của ca sử dụng đăng

2.3 Bảng mô tả luồng sự kiện chính của ca sử dụng quản lý

2.4 Bảng mô tả luồng sự kiện chính của ca sử dụng xem tin

2.10 Bảng mô tả luồng sự kiện chính của ca sử dụng quản lý

MỞ ĐẦU

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

Mỗi giọt máu là biểu hiện của sự sống và tiếp sức cho sự sống Khi dòng máu chảy trong cơ thể một người chỉ là để duy trì sự sống nhưng cũng dòng máu ấy chảy trong cơ thể nhiều người thì nó trở thành một dòng chảy của tình yêu thương Câu lạc bộ từ thiện của trường đại học Y dược Đà nẵng là nơi thường xuyên giúp các bệnh viện tìm người hiến máu khẩn cấp, nhưng câu lạc bộ hoạt động về kêu gọi máu nóng cần ngay lập tức chủ yếu thông qua mạng xã hội là chính, phải chờ đợi người đăng ký đầy đủ yêu cầu mới sử dụng được, đồng thời không có cơ chế quản lý các nhóm máu của thành viên một cách cụ thể và nhật ký của các thành viên đã từng hiến máu trong khoảng thời gian gần đây nhất

Từ những khó khăn trên và các nhu cầu cấp thiết về tìm kiếm nhóm máu khẩn cấp hoặc việc tổ chức các đợt hiến máu từ thiện hiên nay, nên em xin chọn đề tài nghiên cứu “Xây dựng website quản lý ngân hàng máu sống tại thành phố Đà nẵng” giúp quản lý, kêu gọi, tìm kiếm, tổ chức đăng ký các đợt hiến máu cho những người sẵn sàng hiến máu ở Đà nẵng của câu lạc bộ, góp phần cho công việc tìm kiếm người hiến máu trở nên dễ dàng hơn và nhanh chóng hơn

2 Mục tiêu và nhiệm vụ của đề tài

2.1 Mục tiêu

- Tìm hiểu thông tin về cách thức hoạt động của ngân hàng máu sống

- Nghiên cứu mô hình hoạt động của các câu lạc bộ máu sống

- Phân tích thiết kế hệ thống ngân hàng máu sống

- Xây dựng website quản lý ngân hàng máu sống

2.2 Nhiệm vụ

- Thu thập chi tiết thông tin về nhóm máu thành viên

- Quản lý lịch sử hiến máu

- Tìm kiếm dữ liệu về các nhóm máu

- Thông báo thông tin hiến máu rộng rãi đến từng thành viên

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

3.1 Đối tượng nghiên cứu

- Các đội nhóm, thành viên của các câu lạc bộ hiến máu tình nguyện

- Những người có nhu cầu cần máu nóng gấp

- Mô hình ngân hàng máu nóng

- Hệ thống hoạt động của câu lạc bộ máu nóng

- Công nghệ sử dụng: Angular 4, Spring boot, RESTful API

3.2 Phạm vi nghiên cứu

- Câu lạc bộ hiến máu từ thiện của trường Đại học Y dược Đà Nẵng

- Xây dựng sản phẩm: website ngân hàng máu sống thực nghiệm tại địa bàn thành phố Đà nẵng

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

- Tìm hiểu, khảo sát các ứng dụng có chức năng tương tự, nghiên cứu và ứng dụng vào đề tài

- Tham khảo cách tổ chức, bố cục của giao diện hướng đến sự đơn giản, dễ sử dụng đối người sử dụng

- Đề xuất các chức năng cho ứng dụng, cũng như nhận phản hồi ý kiến về chức năng từ giáo viên hướng dẫn từ đó đưa ra các giải pháp hợp lý phù hợp với

xu thế phát triển của ứng dụng

- Ngoài ra sử dụng các phương pháp nghiên cứu khác như nghiên cứu tài liệu,

giáo trình hay các tài liệu tham khảo có liên quan đến hệ thống cần xây dựng

5 Giải pháp đề xuất

Nghiên cứu cách sử dụng thống quản lý mã nguồn GIT (GitLab)

- Tạo người dùng và tham gia nhóm dự án

- Nghiên cứu đưa mã nguồn lên GitLab

- Nghiên cứu báo cáo tiến độ công việc

Nghiên cứu Angular 4 và Spring boot trong xây dựng website

- Nghiên cứu kiến trúc, nền tảng và các thành phần chính của Angular 4

- Nghiên cứu các yêu cầu của về thành viên và người quản trị, phân quyền các chức năng cho thành viên và người quản trị

- Nghiên cứu cách tổ chức báo cáo, xuất báo cáo

- Nghiên cứu các xây dựng bố cục website thân thiện dễ sử dụng

6 Kết quả dự kiến

6.1 Lý thuyết

Xây dựng thành công website ngân hàng máu sống góp phần giúp đỡ cho việc quản lý các công việc của câu lạc bộ máu sống trở nên hiệu quả hơn, giúp ích nhiều hơn cho cộng đồng:

- Nguồn dữ liệu được bảo mật, dễ dàng sử dụng tra cứu

- Cho phép người dùng lưu giữ lịch sử về quá trình hiến máu

6.2 Thực tiễn

Kết quả đạt được là một website có những chức năng sau:

- Cơ sở dữ liệu bảo mật cao, giúp bảo mật thông tin của người dùng

- Chức năng đăng ký, đăng nhập

- Hiển thị tin tức về hiến máu

- Hiển thị các sự kiện hiến máu

- Hiển thị thông tin chi tiết về nhóm máu của thành viên của câu lạc bộ

- Hiển thị lịch sử hiến máu

- Đăng tin tức

- Tạo sự kiện

- Đăng ký tham gia sự kiện

- Tìm kiếm các thành viên theo từng nhóm máu và lọc các thành viên có đủ điều kiện hiến máu tại một thời điểm nhất định

- Xây dựng website hoàn chỉnh

7 Bố cục đề tài

Ngoài phần mở đầu và kết luận, bố cục của đề tài bao gồm ba chương:

➢ Chương 1: Tổng quan công nghệ lập trình web

Phần này sẽ trình bày về kỹ thuật sẽ sử dụng để xây dựng và phát triền website

➢ Chương 2: Phân tích thiết kế hệ thống website ngân hàng máu sống

Phần này trình bày về việc phân tích thiết kế hệ thống và cơ sở dữ liệu

➢ Chương 3: Xây dựng website ngân hàng máu sống

Phần này trình bày những kết quả đạt được khi xây dựng website

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1 Phân tích thiết kế hệ thống

Để xây dựng một hệ thống quản lý về máu nóng thành công và đạt yêu cầu, cần tiến hành phân tích thiết kế hệ thống Đây là bước quyết định đến tính thành công, bền vững của dự án với các ưu điểm như:

- Có một cái nhìn đầy đủ, đúng đắn và chính xác về hệ thống thông tin được xây dựng trong tương lai

- Tránh sai lầm trong thiết kế và cài đặt

- Tăng vòng đời (life cycle) hệ thống

- Dễ sửa chữa, bổ sung và phát triển hệ thống trong quá trình sử dụng hoặc

khi hệ thống yêu cầu

1.2 Phân tích thiết kế hệ thống hướng đối tượng

1.2.1 Khái niệm về phân tích thiết kế hướng đối tượng

Cách tiếp cận hướng đối tượng là một lối tư duy theo cách ánh xạ các thành phần trong bài toán vào các đối tượng ngoài đời thực Với cách tiếp cận này, một

hệ thống được chia tương ứng thành các thành phần nhỏ gọi là các đối tượng, mỗi đối tượng bao gồm đầy đủ cả dữ liệu và hành động liên quan đến đối tượng đó Các đối tượng trong một hệ thống tương đối độc lập với nhau và phần mềm sẽ được xây dựng bằng cách kết hợp các đối tượng đó lại với nhau thông qua các mối quan hệ và tương tác giữa chúng Các nguyên tắc cơ bản của phương pháp hướng đối tượng bao gồm:

• Trừu tượng hóa: trong phương pháp hướng đối tượng, các thực thể phần

mềm được mô hình hóa dưới dạng các đối tượng Các đối tượng này được

trừu tượng hóa ở mức cao hơn dựa trên thuộc tính và phương thức mô tả đối tượng để tạo thành các lớp

• Tính đóng gói và ẩn dấu thông tin: các đối tượng có thể có những

phương thức hoặc thuộc tính riêng mà các đối tượng khác không thể sử dụng được

• Tính mô-đun hóa: các bài toán sẽ được phân chia thành những vấn đề

nhỏ hơn, đơn giản và quản lý được

• Tính phân cấp: cấu trúc của một hệ thống hướng đối tượng là dạng phân

cấp theo các mức độ trừu tượng từ cao đến thấp

Các khái niệm cơ bản của hướng đối tượng:

• Đối tượng: một đối tượng biểu diễn một thực thể vật lý, một thực thể khái

• Kế thừa: trong phương pháp hướng đối tượng, một lớp có thể có sử dụng

lại các thuộc tính và phương thức của một hoặc nhiều lớp khác Kiểu quan hệ này gọi là quan hệ kế thừa, được xây dựng dựa trên mối quan hệ kế thừa trong bài toán thực tế

• Phân tích hướng đối tượng: xây dựng một mô hình chính xác để mô tả

hệ thống cần xây dựng là gì Thành phần của mô hình này là các đối tượng

gắn với hệ thống thực

• Thiết kế hướng đối tượng: là giai đoạn tổ chức chương trình thành các

tập hợp đối tượng cộng tác, mỗi đối tượng trong đó là thực thể của một lớp Kết quả của thiết kế cho biết hệ thống sẽ được xây dựng như thế nào qua các bản thiết kế kiến trúc và thiết kế chi tiết

• Lập trình và tích hợp: thực hiện bản thiết kế hướng đối tượng bằng

cách sử dụng các ngôn ngữ lập trình hướng đối tượng (C++, Java, .)

1.2.2 Khái niệm về UML

UML là ngôn ngữ mô hình hóa hợp nhất dùng để biểu diễn hệ thống Nói một cách đơn giản là nó dùng để tạo ra các bản vẽ nhằm mô tả thiết kế hệ thống Các bản vẽ này được sử dụng để các nhóm thiết kế trao đổi với nhau cũng như dùng để thi công hệ thống (phát triển), thuyết phục khách hàng, các nhà đầu tư v.v (giống như trong xây dựng người ta dùng các bản vẽ thiết kế để hướng dẫn

và kiểm soát thi công, bán hàng căn hộ v.v )

1.2.3 Phân tích thiết kế hướng đối tượng sử dụng UML

OOAD sử dụng UML bao gồm các thành phần sau:

• Góc nhìn: việc sử dụng nhiều góc nhìn trong phân tích thiết kế sẽ giúp cho

phân tích viên nắm rõ được hệ thống ở nhiều khía cạnh

• Sơ đồ: là các bản vẽ được dùng để thể hiện các góc nhìn của hệ thống

Trong đó:

o Sơ đồ ca sử dụng: bản vẽ mô tả về ca sử dụng của hệ thống Bản vẽ

này sẽ giúp chúng ta biết được ai sử dụng hệ thống, hệ thống có những chức năng gì Lập được bản vẽ này bạn sẽ hiểu được yêu cầu của hệ thống cần xây dựng

o Sơ đồ lớp: bản vẽ này mô tả cấu trúc của hệ thống, tức hệ thống được

cấu tạo từ những thành phần nào Nó mô tả khía cạnh tĩnh của hệ thống

o Sơ đồ đối tượng: tương tự như sơ đồ lớp nhưng nó mô tả đến đối tượng thay vì lớp

o Sơ đồ tuần tự: là bản vẽ mô tả sự tương tác của các đối tượng trong hệ

thống với nhau được mô tả tuần tự các bước tương tác theo thời gian

• Qui tắc, cơ chế: là các qui tắc để lập nên bản vẽ, mỗi bản vẽ có qui tắc riêng và phân tích viên phải nắm được để tạo nên các bản vẽ thiết kế đúng 1.3 Nền tảng công nghệ

1.3.1 Giới thiệu về HTML

HTML (viết tắt cho HyperText Markup Language, hay là "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 website với các 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 và đượ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 đã 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 đó, các nhà phát triển đã thay thế nó bằng XHTML[9]

HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web Đây là phiên bản thứ năm của ngôn ngữ HTML - được tạo ra năm 1990 và chuẩn hóa như HTML4 năm 1997 - và xuất hiện vào năm 2012, là một ứng viên được giới thiệu bởi World Wide Web Consortium (W3C) Mục tiêu cốt lõi khi thiết kế ngôn ngữ là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ nó dễ dàng đọc được bởi con người và luôn hiểu được bởi các thiết bị

và các chương trình máy tính như trình duyệt web, phân tích cú pháp, v.v [10]

HTML5 đã giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc

tả nổi trội của XHTML, DOM cấp 2, đặc biệt là JavaScript

Cú pháp HTML

- Thẻ HTML dùng để viết lên những thành tố HTML, được bao quanh bởi hai

dấu bé hơn < và > lớn hơn

- Những thẻ HTML thường có một cặp giống như <b> và </b>, trong đó thẻ

thứ nhất <b> là thẻ mở đầu, thẻ thứ hai </b> là thẻ kết thúc

- Dòng chữ ở giữa hai đầu thẻ bắt đầu và kết thúc là nội dung của thẻ, và những thẻ HTML không phân biệt in hoa và viết thường, ví dụ dạng <b> và <B> đều như nhau

- Cấu trúc của một tài liệu HTML gồm có 3 phần cơ bản:

• Phần <html>…</html> chứa các mã và thẻ con nằm bên trong của HTML

• Phần <head>…</head> nằm bên trong thẻ <html>…</html> và nằm sau

thẻ <head>…</head>, chứa nội dung trang web

- Cấu trúc được thể hiện như sau:

Hình 0.1 Cấu trúc của một tài liệu HTML

<body> Xác định phần thân của văn bản HTML

<br /> Ngắt một đoạn text xuống hàng

<head> Xác định, khai báo thông tin về văn bản HTML

<hr /> Tạo một đường ngang

<html> Xác định một văn bản html

<img /> Hiển thị một image

<input /> Xác định một điều khiển nhập

<label> Tạo một nhãn cho thành phần input

<legend> Xác định một chú thích cho một phần tử fieldset

<strong> Hiển thị text đậm (mục đích nhấn mạnh)

<style> Xác định thông tin kiểu kiến trúc cho văn bản

<table> Xác định một bảng

<tbody> Xác định một nhóm nội dung của bảng

<td> Xác định một phần tử nội dung của bảng

<textarea> Xác định một vùng điều khiển nhập text

<tfoot> Một nhóm nội dung cuối của bảng

<th> Xác định một phần tử tiêu đề của bảng

<thead> Một nhóm phần tử tiêu đề của bảng

<title> Xác định một tiêu đề của văn bản HTML

<tr> Xác định một hàng của bảng

<ul> Xác định danh sách không thứ tự

Bảng 0.1 Bảng mô tả các thẻ thông dụng trong HTML

o <article>: Đánh dấu một bài viết, một bình luận hoặc một thông báo

o <aside>: Đánh dấu nội dung ngoài lề của một trang web, ví dụ như một thanh bên trái hoặc phải

o <nav>: Thanh điều hướng hoặc bảng kê (menu) giờ có thể được đặt trong thẻ này, nó sẽ tự động tạo ra cho ta một danh sách trông giống như một thanh điều hướng thực sự

o <section>: Với cặp thẻ này, ta có thể định nghĩa bất kỳ phân vùng nào trên trang web của mình Nó cũng khá giống so với thẻ <div>

- Các phần tử nội tuyến (Inline elements):

o <mark>

o <time>

o <meter>

o <progress>

- Các kiểu đầu vào trong khuôn mẫu, giúp cho việc lựa chọn thuận tiện và chính xác hơn:

o datetime: Trình duyệt hiển thị dạng ngày tháng

o datetime-local: Trình duyệt hiển thị dạng ngày tháng theo vùng

o date: Trình duyệt hiển thị dạng ngày

o month: Trình duyệt hiển thị dạng tháng

o week: Trình duyệt hiển thị theo tuần

o time: Trình duyệt hiển thị theo thời gian

o number: Trình duyệt hiển thị theo dạng số

o range: Trình duyệt hiển thị theo dạng dãy số

o email: Trình duyệt hiểu đúng dữ liệu liệu nhập vào là email

o url: Trình duyệt hiểu đúng dữ liệu nhập vào là kiểu đường dẫn

1.3.2 Giới thiệu về CSS và Bootstrap

CSS là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (như HTML, HTML5) Có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo

ra các đoạn văn bản, các tiêu đề, bảng, … thì CSS sẽ giúp ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc, [11]

Bootstrap là một framework cho phép thiết kế website đáp ứng (responsive) nhanh hơn và dễ dàng hơn Bootstrap bao gồm các mẫu HTML, mẫu CSS và JavaScript (được nêu ra ở phần tiếp theo) tạo ra những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels (đã nêu

ra ở phần HTML và HTML5) và nhiều thứ khác[12] Bootstrap đơn giản vì được

căn cứ trên HTML, CSS và JavaScript chỉ cần có kiến thức cơ bản thì có thể sử dụng Bootstrap tốt

Thuận lợi khi sử dụng Bootstrap:

o Rất dễ để sử dụng: Bootstrap đơn giản vì nó được xây dựng dựa trên HTML, CSS và Javascript chỉ cẩn có kiến thức cơ bản về ba thành phần đó là có thể sử dụng Bootstrap tốt

o Responsive: Bootstrap xây dựng sẵn reponsive css trên các thiết bị Iphones, tablets, và desktops Tính năng này khiến cho người dùng tiết kiệm được rất nhiều thời gian trong việc tạo ra một website thân thiện với các thiết bị điện tử, thiết bị cầm tay

o Tương thích với trình duyệt: Bootstrap tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) Tuy nhiên, với IE browser, Bootstrap chỉ hỗ trợ từ IE9 trở lên vì IE8 không

hỗ trợ HTML5 và CSS3

1.3.3 Giới thiệu về SASS

SASS (Syntactically Awesome StyleSheets) là một CSS preprocessor hỗ trợ trong việc quản lý mã CSS SASS là một phần mở rộng của CSS SASS cung cấp rất nhiều quy tắc giúp quản lý CSS theo thứ tự rõ ràng và dễ dàng chỉnh sửa tái sử dụng Một số quy tắc nổi bật có thể kể đến như là biến (variables), kế thừa (selector inheritance), hàm (functions), nested rule, mixin, vòng lặp for, lệnh điều kiện (if…else) Chính xác là SASS đang làm nhiệm vụ logic hóa và cấu trúc các đoạn

mã CSS sao cho nó gần với ngôn ngữ lập trình nhất có thể [17]

SASS được biết đến như cú pháp thụt đầu dòng (indented syntax)

SCSS một cú pháp khác để viêt SASS, tương đối giống CSS

Lịch sử SASS: Ban đầu, SASS là một phần của một tiền xử lý khác gọi là Haml (dành cho HTML), được thiết kế và viết bởi các lập trình viên Ruby Bởi vậy, SASS sử dụng cú pháp giống như Ruby với việc không có các dấu ngoặc nhọn ({}), dấu chấm phẩy (;) và thụt đầu dòng nghiêm ngặt

1.3.4 Giới thiệu về JavaScript

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script

sử dụng các đối tượng nằm sẵn trong các ứng dụng Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau

đó đổi tên thành LiveScript, và cuối cùng thành JavaScript [13]

Phiên bản mới nhất của JavaScript là phiên bản 1.5, tương ứng với

ECMA-262 bản 3 ECMAScript là phiên bản chuẩn hóa của JavaScript Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ không đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357

Ứng dụng JavaScirpt:

• JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp phát triển từ C Giống như C, JavaScript có khái niệm từ khóa, do đó, JavaScript gần như không thể được mở rộng

• Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,

• Ngôn ngữ kịch bản dùng trong Macromedia Flash - ActionScript có cú pháp gần giống với JavaScript, tuy nhiên mô hình đối tượng của ActionScript khác hẳn so với JavaScript

• JSON (JavaScript Object Notation) là một định dạng chia sẻ dữ liệu đa mục đích

1.3.5 Giới thiệu về TypeScript

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của JavaScript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở JavaScript

Những ưu điểm mà TypeScript mang lại:

• Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự

án lớn một cách dễ dàng

• Nhiều Framework lựa chọn: Hiện nay các JavaScript Framework đã dần khuyến khích nên sử dụng TypeScript để phát triển, ví dụ như Angular 2 và Ionic 2.0

• Hỗ trợ các tính năng của JavaScript phiên bản mới nhất: TypeScript luôn đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của JavaScript, ví dụ như version hiện tại là ECMAScript 2015 (ES6)

• TypeScript là Javascript: Bản chất của TypeScript là biên dịch tạo ra các đoạn mã JavaScript nên ta có thể chạy bất kì ở đâu miễn ở đó có

hỗ trợ biên dịch JavaScript Ngoài ra ta có thể sử dụng trộn lẫn cú pháp của JavaScript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ dàng hơn

1.3.6 Giới thiệu về Angular 4

Phiên bản mới nhất hiện nay là Angular 5 Thực chất Angular 4 là bản nâng cấp “nhẹ” của Angular 2 (kết hợp với TypeScript từ Microsoft để trở nên hoàn thiện hơn về cơ cấu tổ chức ứng dụng cũng như tốc độ xử lí và hiệu năng khi sử dụng) Tháng 3 năm 2017 đội ngũ Angular đã phát hành Angular 4 Với những tính năng mới như giảm kích thước code khi tạo ra khoảng 60% so với phiên bản trước đó, tương thích với TypeScript 2.1, 2.2, Angular Universal, Source Map for Template [4]

Quan trọng hơn hết Angular cung cấp công cụ Angular CLI có thể cấu trúc

dự án với một loạt các thư viện tích hợp sẵn, có thể tạo code mẫu cho các

Javascript mới nhất (ES6, ES7) và hơn thế nữa các Class, Module, Decorators hỗ trợ nhiều trình duyệt hiện tại Edge, Chrome, Firefox và cả IE

1.3.7 Giới thiệu về RESTful API

RESTful API là một tiêu chuẩn dùng trong việc thết kế các thiết kế API cho các ứng dụng web để quản lý các dữ liệu của ứng dụng RESTful là một trong những kiểu thiết kế API được sử dụng phổ biến nhất ngày nay

Trọng tâm của REST quy định cách sử dụng các HTTP method (như GET, POST, PUT, DELETE) và cách định dạng các URL cho ứng dụng web để quản lý các tài nguyên

Với các ứng dụng web được thiết kế sử dụng RESTful, lập trình viên có thể

dễ dàng biết được URL và HTTP method để quản lý một tài nguyên

1.3.8 Giới thiệu về Java

Ngôn ngữ lập trình Java là một ngôn ngữ lập trình hướng đối tượng (OOP, dựa trên các lớp) Khác với phần lớn ngôn ngữ lập trình thông thường, thay vì biên dịch mã nguồn thành mã máy hoặc thông dịch mã nguồn khi chạy, Java được thiết

kế để biên dịch mã nguồn thành mã nhị phân, sau đó sẽ được môi trường thực thi chạy Trước đây, Java chạy chậm hơn những ngôn ngữ dịch thẳng ra mã máy như

C và C++, nhưng sau này nhờ công nghệ "biên dịch tại chỗ" - Just in time compilation, khoảng cách này đã được thu hẹp, và trong một số trường hợp đặc biệt Java có thể chạy nhanh hơn Java chạy nhanh hơn những ngôn ngữ thông dịch như Python, Perl, PHP gấp nhiều lần Java chạy tương đương so với C#, một ngôn ngữ khá tương đồng về mặt cú pháp và quá trình dịch/chạy [6]

1.3.9 Giới thiệu về mô hình MVC

Hình 1.4 Giới thiệu về mô hình MVC

MVC là chữ viết tắt của Model - View - Controller, đây là bộ ba chứa các

lớp được giới thiệu lần đầu tiên bởi Krasner và Pope vào năm 1988, được sử dụng

để xây dựng giao diện người dùng trong Smalltalk-80 [6]

MVC bao gồm 3 loại đối tượng Model là đối tượng ứng dụng, View là đối tượng biểu diễn màn hình và đối tượng Controller định nghĩa các phản hồi từ khi người sử dụng tương tác với giao diện người sử dụng Mô hình MVC tách các thành phần này ra để tăng tính linh hoạt và dễ sử dụng

Kiến trúc mô hình MVC: Mô hình MVC là một kiến trúc phần mềm cho ứng

dụng mobile, web được sử dụng rộng rãi hiện nay Nó tổ chức mã một cách hợp

lý và có hệ thống Mô hình MVC tách biệt phần xử lý dữ liệu ra khỏi phần giao diện Nó bao gồm ba thành phần chính [6]:

• Model: có nhiệm vụ thao tác với cơ sở dữ liệu, nghĩa là nó sẽ chứa tất cả các hàm, các phương thức truy vấn trực tiếp với dữ liệu và controller sẽ

• View: có nhiệm vụ hiển thị nội dung sang các đoạn mã dạng xml và đặc biệt là phải nhận được tương tác từ người dùng Có thể hiểu nôm na ở đây người ta còn gọi là thành phần giao diện

• Controller: chính là bộ não của mô hình MVC, đóng vài trò là trung gian giữa Model và View Có nhiệm vụ tiếp nhận yêu cầu từ người dùng sau

đó xử lý các yêu cầu hoặc tìm cách xử lí lấy dữ liệu từ Model tương ứng

và gửi dữ liệu qua View tương ứng rồi trả kết quả về cho người dùng

1.3.10 Giới thiệu về Spring boot

Spring boot là một dự án phát triển bởi ngôn ngữ Java trong hệ sinh thái Spring framework Nó giúp cho các lập trình viên đơn giản hóa quá trình lập trình một ứng dụng với Spring, chỉ tập trung vào việc phát triển yêu cầu cho ứng dụng[15]

Sử dụng Spring boot để xây dựng các RESTful API đơn giản và nhanh chóng hơn

Một số tính năng nổi bật của Spring boot:

• Tạo các ứng dụng Spring độc lập

• Nhúng trực tiếp Tomcat, Jetty hoặc Undertow (không cần phải deploy

ra file WAR)

• Các starter dependency giúp việc cấu hình Maven đơn giản hơn

• Tự động cấu hình Spring khi cần thiết

• Không sinh code cấu hình và không yêu cầu phải cấu hình bằng XML

1.3.11 Giới thiệu về MySQL

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngôn ngữ truy vấn có cấu trúc (Structured Query Language hay còn gọi là SQL): Đây là ngôn ngữ chuẩn nhất cho việc truy cập hệ thống quản lý