ĐỒ ÁN XÂY DỰNG WEBSITE TIN TỨC BÓNG ĐÁ

BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

ĐỒ ÁN 4
XÂY DỰNG WEBSITE TIN TỨC BĨNG ĐÁ

NGÀNH: CƠNG NGHỆ THƠNG TIN
CHUN NGÀNH: KỸ THUẬT PHẦN
MỀM HƯỚNG CHUYÊN SÂU: CÔNG
NGHỆ WEB

SINH VIÊN: NGUYỄN TRỌNG DŨNG
MÃ LỚP: 101181
HƯỚNG DẪN: CHU THỊ MINH HUỆ

HƯNG YÊN – 2020




NHẬN XÉT
Nhận xét của giảng viên hướng dẫn:
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................

.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
.......................................................................................................................................
GIẢNG VIÊN HƯỚNG DẪN
(Ký và ghi rõ họ tên)



LỜI CAM ĐOAN
Em xin cam đoan đồ án “xây dựng website tin tức bóng đá” là kết quả thực
hiện của bản thân em dưới sự hướng dẫn của cô Chu Thị Minh Huệ.
Những phần sử dụng tài liệu tham khảo trong đồ án đã được nêu rõ trong
phần tài liệu tham khảo. Các kết quả trình bày trong đồ án và chương trình xây
dựng được hồn tồn là kết quả do bản thân em thực hiện.
Nếu vi phạm lời cam đoan này, em xin chịu hoàn toàn trách nhiệm trước
khoa và nhà trường.
Hưng Yên, ngày … tháng … năm…..
Sinh viên
NGUYỄN TRỌNG DŨNG

LỜI CẢM ƠN
Để có thể hồn thành đồ án này, lời đầu tiên em xin phép gửi lời cảm ơn tới
bộ môn Công nghệ phần mềm, Khoa Công nghệ thông tin – Trường Đại học Sư
phạm Kỹ thuật Hưng Yên đã tạo điều kiện thuận lợi cho em thực hiện đồ án môn
học này.
Đặc biệt em xin chân thành cảm ơn cơ Chu Thị Minh Huệ đã rất tận tình
hướng dẫn, chỉ bảo em trong suốt thời gian thực hiện đồ án vừa qua.
Em cũng xin chân thành cảm ơn tất cả các Thầy, các Cơ trong Trường đã tận
tình giảng dạy, trang bị cho em những kiến thức cần thiết, quý báu để giúp em thực
hiện được đồ án này.
Mặc dù em đã có cố gắng, nhưng với trình độ cịn hạn chế, trong q trình
thực hiện đề tài khơng tránh khỏi những thiếu sót. Em hi vọng sẽ nhận được những
ý kiến nhận xét, góp ý của các Thầy giáo, Cô giáo về những kết quả triển khai trong
đồ án.
Em xin trân trọng cảm ơn!



MỤC LỤC
NHẬN XÉT

2

DANH MỤC CÁC THUẬT NGỮ

7

DANH MỤC CÁC BẢNG

8

DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ

9

CHƯƠNG 1:

TỔNG QUAN VỀ ĐỀ TÀI

10

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

10

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

10

1.3 Giới hạn và phạm vi của đề tài

11

1.4 Nội dung thực hiện

11

1.5 Phương pháp tiếp cận

12

CHƯƠNG 2:

CƠ SỞ LÝ THUYẾT

13

2.1 Quy trình phát triển phần mềm

13

2.2 Phương pháp phân tích thiết kế hướng đối tượng

14

2.3. Hệ quản trị cơ sở dữ liệu MySQL/PostgreSQL

19

2.4. Thiết kế giao diện website

20

2.5. Lập trình phía front-end

21

2.6. Lập trình phía back-end

21

CHƯƠNG 3:

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

23

3.1 Phát biểu bài toán

23

3.2 Đặc tả yêu cầu phần mềm

23

3.2.1 Các yêu cầu chức năng

23

CHƯƠNG 4:

TRIỂN KHAI WEBSITE

58

4.1 Triển khai các chức năng cho phân hệ người dùng

58

4.2 Triển khai các chức năng cho phân hệ quản trị nội dung

59

4.3 Kiểm thử và triển khai ứng dụng

60

4 3.1 Kiểm thử 60
4.3.2 Đóng gói ứng dụng

61

4.3.3 Triển khai ứng dụng

61



KẾT LUẬN

62

TÀI LIỆU THAM KHẢO

63

DANH MỤC CÁC BẢNG
Bảng 3. 1 Chức năng trang quản trị

25

Bảng 3. 2 Các chức năng của phân hệ người dùng

35

Bảng 3. 3 Thông tin mô tả danh mục

40

Bảng 3. 4 Thông tin mô tả danh mục con

40

Bảng 3. 5 Thông tin mô tả tin bài

41

Bảng 3. 6 Thông tin mô tả ảnh

41

Bảng 3. 7 Thông tin người dùng

42

Bảng 3. 8 Thông tin Admin

42

Bảng 3. 9 Biểu đồ lớp thực thể của hệ thống

43

Bảng 3. 10 Bảng DANHMUC

44

Bảng 3. 11 Bảng DANHMUCCON

45

Bảng 3. 12 Bảng TINBAI

45

Bảng 3. 13 Bảng ANH

46

Bảng 3. 14 Bảng ADMIN

46

Hình 3. 31 Giao diện admin

56

Hình 3. 32 Giao diện quản lí thơng tin

57

Hình 3. 33 Giao diện quản lý thêm thơng tin

57

Hình 3. 34 Giao diện trang chủ

58

Hình 3. 35 Giao diện trang người dùng

59

Hình 3. 36 Giao diện trang chi tiết thông tin

59

DANH MỤC CÁC HÌNH VẼ, ĐỒ THỊ
Hình 3. 1 Biểu đồ Usecase tổng qt trang quản trị

26

Hình 3. 2 Usecase quản lí danh mục

26

Hình 3. 3 Use Case quản lý danh mục con

28

Hình 3. 4 Use Case quản lý người dùng

30

Hình 3. 5 Use Case quản lý tin bài

32



Hình 3. 6 Use Case quản lý ảnh

34

Hình 3. 7 Use Case tổng quát quản trị người dùng

36

Hình 3. 8 Use Case xem danh mục

36

Hình 3. 9 Use Case xem tin tức

37

Hình 3. 10 Use Case tìm kiếm tin tức

38

Hình 3. 11 Use Case liên hệ

39

Hình 3. 12 Cơ sở dữ liệu quan hệ

44

Hình 3. 13 Biểu đồ lớp VOPC Quản lý thơng tin

47

Hình 3. 14 Biểu đồ VOPC thêm thơng tin

47

Hình 3. 15 Biểu đồ VOPC sửa thơng tin

48

Hình 3. 16 Biểu đồ VOPC xóa thơng tin

48

Hình 3. 17 Biểu đồ VOPC xem loại thơng tin

49

Hình 3. 18 Biểu đồ VOPC xem tin tức

49

Hình 3. 19 Biểu đồ tuần tự quản lý thơng tin

50

Hình 3. 20 Biểu đồ tuần tự thêm thơng tin

50

Hình 3. 21 Biểu đồ tuần tự sửa thơng tin

51

Hình 3. 22 Biểu đồ tuần tự xóa thơng tin

51

Hình 3. 23 Biểu đồ tuần tự xem loại thơng tin

52

Hình 3. 24 Biểu đồ tuần tự xem tin tức

52

Hình 3. 25 Biểu đồ lớp chi tiết quản lí thơng tin

53

Hình 3. 26 Biểu đồ lớp chi tiết thêm thơng tin

53

Hình 3. 27 Biểu đồ lớp chi tiết sửa thơng tin

54

Hình 3. 28 Biểu đồ lớp chi tiết xóa thơng tin

54

Hình 3. 29 Biểu đồ lớp chi tiết xem thơng tin

55

Hình 3. 31 Giao diện admin

56

Hình 3. 32 Giao diện quản lí thơng tin

57

Hình 3. 33 Giao diện quản lý thêm thơng tin

57

Hình 3. 34 Giao diện trang chủ

58

Hình 3. 35 Giao diện trang người dùng

59

Hình 3. 36 Giao diện trang chi tiết thông tin

59






CHƯƠNG 1:

TỔNG QUAN VỀ ĐỀ TÀI

1.1 Lý do chọn đề tài
Chúng ta có thể nói rằng thế kỷ 21 đã và đang chứng kiến sự phát triển mạnh mẽ
của ngành Công nghệ thông tin. Công nghệ thông tin (CNTT) đã và đang thay đổi
thế giới một cách nhanh chóng và từng bước kéo nền tri thức của nhân loại xích lại
gần nhau hơn. Đó là nhờ việc phát triển hệ thống website trên tồn thế giới.
Ngày nay, Website đã đóng một vai trò quan trọng đối với con người chúng ta từ

giải trí cho đến quảng cáo, thương mại, quản lý…Website sẽ dần dần thay thế
những phương thức tin tức cũ trong đời sống như báo giấy, tạp chí,… bởi tính ưu
việt mà Website mang lại như: nhanh hơn, rẻ hơn, tiện dụng hơn, hiệu quả hơn và
không bị giới hạn khơng gian và thời gian.
Với tầm quan trọng đó, việc xây dựng một Website cập nhật những tin tức bóng đá
mới nhất sẽ giúp cho những người khơng có nhiều thời gian để đọc báo hay những
người không thể ngày nào cũng phải mua báo có thể nắm bắt được những tin tức
thể thao mới nhất trong ngày một cách dễ dàng. Xuất phát từ những nhu cầu thực tế
đó em quyết định “Xây dựng Webstie tin tức bóng đá thế giới” nhằm tạo ra trang
Website bóng đá có tính thiết thực và ứng dụng vào thực tế.
1.2 Mục tiêu của đề tài
1.2.1 Mục tiêu tổng quát
Thiết kế Website tin tức bóng đá thế giới nhằm giải quyết những khó khăn hiện tại
của người dùng.
Website xây dựng phải đáp ứng được những nhu cầu cần thiết của người đọc:
-

Thông tin chính xác, đáng tin cậy.

-

Dễ đọc, dễ hiểu.

-

Mới nhất và nhanh nhất.

-

Các cơng cụ tiện ích phải sắp xếp khoa học dễ dàng sử dụng.

-

Hình ảnh cần rõ ràng, chân thật.

-

Có chức năng tìm kiếm.

1.2.2 Mục tiêu cụ thể
Website cho phép người tiêu dùng có thể xem và bình luận. Ngồi ra, Website cho
phép người quản trị có thể quản lý thơng tin của Website và quản lý hoạt động của
người dùng.
1.3 Giới hạn và phạm vi của đề tài
1.3.1 Đối tượng nghiên cứu
Đối tượng nghiên cứu của đề tài là các trang web tin tức bóng đá.
1.3.2 Phạm vi nghiên cứu
Khảo sát yêu cầu của một website tin tức, tham khảo các website tin tức bóng đá đã
có, nghiên cứu các cơng nghệ cần thiết để thiết kế và lập trình Webiste, xây dựng
bản phân tích và thiết kế cho hệ thống, cài đặt và thực hiện trang Web.
1.4 Nội dung thực hiện
Hiện một số giải pháp thiết kế Website bằng ngôn HTML/CSS/JS cịn có những mặt
hạn chế nhất định như: thiết kế cồng kềnh phức tạp, khó khan trong việc phát triển
và bảo trì. Một số đề xuất giải pháp xây dựng hệ thống Web.
-

Nội dung thực hiện cụ thể như sau:

-

Nghiên cứu về lập trình HTML/CSS/JS

-

Khảo sát phân tích u cầu hệ thống.

-

Thiết kế đặc tả hệ thống.

-

Thiết kế đặc tả giao diện.

-

Lập trình hệ thống.

-

Triển khai thực nghiệm hệ thống trên mạng Internet.

-

Xác định yêu cầu của hệ thống

-

Cơ sở lý thuyết ở chương 2. Giới thiệu khái qt về các ngơn ngữ, cơng nghệ
dùng để lập trình website.

-

Phân tích và thiết kế hệ thống ở chương 3. Biểu diễn các use case, biểu đồ lớp,
biểu đồ thực thể, thiết kế cơ sở dữ liệu, các giao diện của website,...

-

Triển khai website với các trang quản lý bài viết và quản lý người dùng.

-

Xây dựng được một website gồm hai phân hệ: phân hệ người dùng cho phép đọc
và bình luận các bài viết, phân hệ người quản trị cho phép quản lý các thông tin
của Website và quản lý hoạt động bình luận của người dùng.

1.5 Phương pháp tiếp cận
Tiếp cận trực tiếp tại các website tin tức bóng đá trên internet.



CHƯƠNG 2:

CƠ SỞ LÝ THUYẾT

Trong đồ án môn học này, chúng tơi có sử dụng đến các nội dung lý thuyết như sau:

phân tích thiết kế ứng dụng theo phương pháp hướng đối tượng sử dụng ngơn ngữ
mơ hình hóa UML, công nghệ kết nối CSDL ADO.Net, công nghệ phát triển ứng
dụng web bằng ASP.Net MVC. Các phần tiếp theo trong chương này, đồ án sẽ trình
bày về những kiến thức cơ sở, công nghệ được sử dụng để thực hiện đồ án.
1.6 Quy trình phát triển phần mềm
1.6.1 Khảo sát thực tế
-

Khảo sát các bước khi người dùng truy cập vào website.

-

Khảo sát các bước tìm kiếm bài viết có hay hay khơng.

-

Khảo sát các bước để viết bình luận.

-

Khảo sát cách quản lý thông tin bài viết.

-

Khảo sát quản lý bình luận cảu người dùng.

-

Khảo sát sự đánh giá bài viết của người dùng.

1.6.2 Đặc tả yêu cầu
Các yêu cầu chức năng gồm 3 chức năng chính:
-

Chức năng quản lý thơng tin bài viết.

-

Chức năng quản lý bình luận của người dùng.

-

Chức năng quản lý người viết

bài. Các yêu cầu phi chức năng gồm:
-

Yêu cầu về sự logic của cơ sở dữ liệu

-

Các ràng buộc về thiết kế đối với hệ thống

-

Các đặc tính của hệ thống phần mềm: Yêu cầu về độ tin cậy, tính khả dụng, bảo
mật, bảo trì, chuyển dụng.

-

Các giao tiếp: người dùng, phần cứng, phần mềm, truyền thông



1.6.3 Phân tích thiết kế
-

Mơ tả thiết kế dữ liệu

-

Mơ tả thiết kế kiến trúc

-

Mô tả thiết kế module

-

Mô tả thiết kế giao diện

-

Mô tả thiết kế sự vật

-

Mô tả thiết kế thủ tục

-

Mô tả thiết kế đối tượng

1.6.4 Lập trình phần mềm
1.6.5 Kiểm thử
-

Lập kế hoạch và kiểm sốt việc kiểm thử

-

Phân tích thiết kế

-

Thực thi test

-

Đánh giá kết quả thực thi và báo cáo kết quả

-

Đóng hoạt động và kiểm thử

1.6.6 Bảo trì
-

Sửa cho đúng

-

Thích ứng

-

Hồn thiện

-

Bảo trì

1.7 Phương pháp phân tích thiết kế hướng đối tượng
-

UML (Unified Model Language) là một ngơn ngữ dùng cho phân tích thiết kế
hướng đối tượng (OOAD – Object Oriented Analys and Design)



-

UML được duy trì và phát triển bởi OMG (Object Management Group), do
Jacobson, Booch, Rumbaugh sáng lập. Ngồi ra cịn có hàng trăm các tập đồn
lớn khác bảo trợ phát triển.

-

Các biểu đồ UML cho ta cái nhìn rõ hơn về hệ thống (cái nhìn tĩnh và động)

-

Hiện nay UML được sử dụng rất phổ biến trong các dự án phần mềm.

-

UML thể hiện phương pháp phân tích hướng đối tượng nên khơng lệ thuộc ngơn
ngữ lập trình.

-

Có rất nhiều cơng cụ phần mềm hỗ trợ phân tích thiết kế dùng UML.

-

Nhiều cơng cụ có thể sinh ra mã từ UML và ngược lại.

-

UML không phải là ngôn ngữ lập trình.

-

UML là một ngơn ngữ dùng để:

Trực quan hóa (Visualizing):
▪

Dùng tập các ký hiệu đồ họa phong phú để biểu diễn hệ thống đang được
nghiên cứu.

▪

Hệ thống ký hiệu đều có ngữ nghĩa chặt chẽ, có thể hiểu bởi nhiều công cụ
khác nhau.

▪

Giúp cho các nhà thiết kế, nhà lập trình khác biệt về ngơn ngữ đều có thể
hiểu được.

Đặc tả (Specifying):
▪

UML giúp xây dựng các mơ hình chính xác, đầy đủ và không nhập nhằng.

▪

Tất cả các công đoạn từ phân tích, thiết kế cho đến triển khai đều có các biểu
đồ UML biểu diễn.

▪

Use case (dùng cho phân tích); Class, Sequence, Activity... (cho thiết kế);
Component, Deployment (cho triển khai).

Xây dựng (Constructing):

▪

Các mơ hình của UML có thể kết nối với nhiều ngơn ngữ lập trình. Tức là có
thể ánh xạ các mơ hình UML về một ngơn ngữ lập trình như C++, Java...

▪

Việc chuyển các mơ hình trong UML thành Code trong ngơn ngữ lập trình
🡪 Forward engineering

▪

Việc chuyển ngược trở lại code trong một ngơn ngữ lập trình thành UML 🡪
Reverse Engineering.

▪

Cần công cụ để chuyển đổi “xuôi” & “ngược”.

Viết tài liệu (Documenting):

-

▪

Giúp xây dựng tài liệu đặc tả - requirements

▪

Tài liệu kiến trúc (architecture)

▪

Tài liệu thiết kế

▪

Source code

▪

Tài liệu để kiểm thử - Test

▪

Tài liệu mẫu - Prototype

▪

Tài liệu triển khai – Deployment ...

Một số biểu đồ UML cơ bản

Biểu đồ Ca sử dụng Use Case Diagram
▪

Use case (Use Case Diagram) cung cấp một bức tranh toàn cảnh về những gì
đang xảy ra trong hệ thống hiện tại hoặc những gì sẽ xảy ra trong hệ thống
mới.

▪

Use case mô tả một chuỗi các hành động mà hệ thống sẽ thực hiện để đạt
được kết quả có ý nghĩa đối với một tác nhân.

▪

Các use case được tạo ra ở giai đoạn đầu của một dự án. Các use case cũng
có thể được dung ở giai đoạn sau của qui trình phát triển dự án, ví dụ để đặc
tả các tình huống kiểm tra. Use case đưa ra cơ sở để xác định giao tiếp



người-máy đối với hệ thống. Để người dùng cuối có thể hiểu được và có thể
giao tiếp với hệ thống ở mức tổng thể.



▪

Actor là người hoặc hệ thống tương tác với các use case. Thường actor là
người dùng hệ thống. Trong biểu đồ use case, mỗi actor được vẽ bằng một
biểu tượng hình người với tên vai trị (role name) đặt bên dưới.

▪

Khi actor là người thì tên actor là tên vai trị mà actor đảm nhiệm chứ khơng
phải là tên cơng việc.

Biểu đồ lớp Class Diagram

▪

Biểu đồ lớp (Class Diagram) cho ta một khung nhìn tĩnh của các lớp trong
mơ hình hoặc một phần của mơ hình. Nó chỉ cho ta thấy các thuộc tính và
các thao tác của lớp, cũng như các loại quan hệ giữa các lớp.

▪

Có rất nhiều kiểu lớp dùng trong biểu đồ lớp, ở đây chúng ta chỉ xét đến và
sử dụng 3 loại lớp chính là : lớp biên (phần giao diện), lớp điều khiển và lớp
cơ sở dữ liệu:

▪

Lớp biên: là lớp thể hiện phần giao diện mà người dùng trực tiếp tương tác
với hệ thống qua những giao diện của lớp này.

▪

Lớp thực thể (lớp cơ sở dữ liệu): là lớp biểu diễn cho những thực thể có mối
quan hệ với nhau và liên quan đến hệ thống.

▪

Lớp điều khiển: là lớp trung gian giữa lớp biên và lớp thực thể. Lớp này
đóng vai trò lấy và xử lý dữ liệu để hiện thị ra lớp biên.

Biểu đồ tuần tự (Sequence Diagram)
▪

Biểu đồ tuần tự (Sequence Diagram) mô tả sự tương tác của các đối tượng
theo trình tự về thời gian.Có sự liên kết chặt chẽ với biểu đồ lớp và mô tả thứ
tự của tương tác bằng cách đánh số thứ tự các thông điệp.

▪

Mỗi biểu đồ tuần tự mô tả một tình huống xử lý.

⮚ Các ký hiệu:



Bảng 2. 1 Biểu diễn mô tả các ký hiệu.
Biểu diễn các Actor (tác nhân) biểu diễn người
hay hệ thống khác tương tác với hệ thống hiện
tại.
Biểu diễn các Use Case (tình huống sử dụng)
biểu diễn chuỗi hành động mà hệ thống thực
hiện.

Biểu diễn mối quan hệ giữa Actor (người dùng)
và UseCase (chức năng của hệ thống)

Quan hệ <<Include>> thể hiện Use Case này
chứa Use Case khác.
Use case A được gọi là Include B nếu trong xử
lý của A có gọi đến B ít nhất 1 lần.

Quan hệ <<Extend>> thể hiện User Case này
mở rộng Use Case khác.

Use case B được gọi là Exntend A nếu use case
B được gọi bởi A nếu thỏa mãn điều kiện nào
đó.
Quan hệ tổng quát hóa (thừa kế):
Use case A được gọi là Generalization Use
Case B nếu Use Case B là một trường hợp riêng
của Use Case A.




Biểu đồ Lớp ClassDiagram:
-

Mô tả các đối tượng và mối quan hệ của

chúng trong hệ thống.
- Mô tả các thuộc tính và các hành vi (Behavior)
của đối tượng.
Quan hệ Generalization: Thể hiện rằng một lớp
A kế thừa từ một lớp B (Hay Class A là trường
hợp riêng của Class B; Class B là tổng quát của
Class A).
Gọi là quan hệLà một (Is a)

Quan hệ Composition:
Thể hiện rằng một lớp A bao hàm lớp B. Nhưng
lớp B không thể tồn tại độc lập (tức khơng
thuộc lớp nào). Tức là, nếu có B thì phải suy ra
được A.

Biểu đồ tuần tự:
-

Mơ tả sự tương tác của các đối tượng

theo trình tự về thời gian.
- Có sự liên kết chặt chẽ với biểu đồ lớp.
-

Mỗi biểu đồ tuần tự mơ tả một tình

huống xử lý nhất định.

2.3. Hệ quản trị cơ sở dữ liệu MySQL/PostgreSQL
-

MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và
được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng. Vì



MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển,
hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích
rất mạnh. Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng
dụng có truy cập CSDL trên internet. MySQL miễn phí hồn tồn cho nên bạn
có thể tải về MySQL từ trang chủ. Nó có nhiều phiên bản cho các hệ điều hành
khác nhau: phiên bản Win32 cho các hệ điều hành khác nhau.
-

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 (SQL).

-

MySQL được sử dụng cho việc bổ trợ PHP, Perl, và nhiều ngơn ngữ khác, nó
làm nơi lưu trữ những thông tin trên các trang web viết bằng PHP hay Perl,…

2.4. Thiết kế giao diện website
-

Thiết kế giao diện web là một trong các khâu quan trọng, có thể nói là chiếm
đếm 50% mức độ thành công của một trang web. Thiết kế giao diện web là tổng
hợp các thao tác cơ bản của các nhà thiết kế (designer) bao gồm tổng hợp, hình
dung và tạo ra các option cụ thể đúng với những yêu cầu và mong muốn của
khách hàng. Tìm hiểu về thương hiệu, thơng điệp mà doanh nghiệp muốn truyền
tải.Thiết kế giao diện web bao gồm tất cả những gì xuất hiện trên website bao
gồm hình ảnh, thông tin, các điều hướng người dùng trên website, liên kết trên
web… hay đơn giản là tất cả những gì người dùng nhìn thấy, tương tác trên
website (truy cập danh mục, đặt hàng,… ) khi vào trong trang web của bạn.

-

Các bước thiết kế giao diện website

Bước 1: Tiếp nhận thông tin từ khách hàng
Bước 2: Phác thảo giao diện web nháp trên giấy
Bước 3: Thiết kế giao diện web trên các phần mềm chuyên dụng
Bước 4: Chỉnh sửa và thay đổi
Bước 5: Hoàn thiện bản thiết kế cuối cùng

2.5. Lập trình phía front-end
Phần front-end của một trang web là phần tương tác với người dùng. Tất cả mọi thứ
bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các
menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và
JavaScript được điều khiển bởi trình duyệt máy tính của bạn.
● Tổng quan về HTML
HTML (HyperText Markup Language) là một ngơn ngữ đánh dấu siêu văn bản nên
nó sẽ có vai trị xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các
tập tin kỹ thuật số (media) như hình ảnh, video, nhạc. Hiển thị nội dung cho người
truy cập xem, nó chạy trên bất kỳ trình duyệt nào.
● Tổng quan về CSS
CSS (Cascading Style Sheets) 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 (ví dụ như HTML). Giúp
chúng 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,…rất nhiều.
● Tổng quan về Javascript
Javascript là ngôn ngữ kịch bản cho phép tạo ra trang web động - cập nhật nội dung
theo ngữ cảnh, điều khiển đa phương tiện, hoạt cảnh các hình ảnh và nhiều thứ
khác. Là một ngơn ngữ chương trình thơng dịch với các khả năng hướng đối tượng.
2.6. Lập trình phía back-end
Back-end (phần lập trình trên server) gồm có các thành phần để xử lý các thông tin
từ Front-end.
● Tổng quan về PHP
PHP (Hypertext Preprocessor) là một ngơn ngữ lập trình kịch bản được chạy ở phía
server nhằm sinh ra mã html trên client. Chạy trên môi trường Webserver và lưu trữ
dữ liệu thông qua hệ quản trị cơ sở dữ liệu nên PHP thường đi kèm với Apache,
MySQL và hệ điều hành Linux (LAMP).

Apache là một phần mềm web server có nhiệm vụ tiếp nhận request từ trình duyệt
người dùng sau đó chuyển giao cho PHP xử lý và gửi trả lại cho trình duyệt.
MySQL cũng tương tự như các hệ quản trị cơ sở dữ liệu khác (Postgress, Oracle,
SQL server...) đóng vai trò là nơi lưu trữ và truy vấn dữ liệu.
Linux: Hệ điều hành mã nguồn mở được sử dụng rất rộng rãi cho các webserver.
Thông thường các phiên bản được sử dụng nhiều nhất là RedHat Enterprise Linux,
Ubuntu...
● Tổng quan về MySQL
Là một trong những phần mềm quản trị CSDL dạng server based, hệ này gần giống
với SQL server of microsoft.
Là phần mềm quản lý dữ liệu thông qua CSDL, mỗi một CSDL đều có bảng quan hệ
chứa dữ liệu riêng.
Có cơ chế quản lý sử dụng riêng, mỗi người sử dụng đều có thể quản lý 1 hoặc nhiều
cơ sở dữ liệu khác nhau.
Tính bảo mật cao và tốc độ nhanh.



CHƯƠNG 3:

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

1.8 Phát biểu bài tốn
Trang tin túc bóng đá cung cấp cho người dùng các thơng tin về những giải đấu
bóng đá hàng đầu thế giới cũng như trong nước. Khi người dùng truy cập vào trang
các bản tin mới nhất sẽ được hiện ra, các trận đấu hay đáng chú ý sẽ được trang tin
tức liên tục cập nhật những thông tin liên quan hay các trận đấu đã diễn ra và những

drama liên quan tới chúng. Có thể nói đây là trang tin tức về bóng đá đầy đủ và mới
nhất, sẽ giúp các bạn truy cập biết nhiều điều về bóng đá.
1.9 Đặc tả yêu cầu phần mềm
1.9.1 Các yêu cầu chức năng
a) Chức năng của trang quản trị
Bảng 3. 1 Chức năng trang quản trị
STT Chức năng

Mô tả

1

Quản lý danh
mục

Quản lý danh mục bao gồm các chức năng thêm danh mục,
sửa danh mục, xóa danh mục, tìm kiếm danh mục

2

Quản lý danh
mục con

Quản lý tin bài bao gồm các chức năng thêm tin bài, sửa tin
bài, xóa tin bài

3

Quản lý tin Quản lý tin bài bao gồm các chức năng thêm tin bài, sửa tin
bài

bài, xóa tin bài

4

Quản lý ảnh

5

Quản
lý Quản lý người dùng bao gồm chức năng thêm thơng tin
người dùng
người dùng, sửa thơng tin người dùng, xóa thông tin người
dùng

Quản lý ảnh bao gồm các chức năng thêm ảnh, sửa ảnh, xóa
ảnh

● Biểu đồ Use Case tổng quát của trang quản trị




Hình 3. 1 Biểu đồ Usecase tổng quát trang quản trị
● Các biểu đồ Use Case phân rã của trang quản trị
- Use Case quản lý danh mục:

Hình 3. 2 Usecase quản lí danh mục