ĐẠI HỌC KHOA HỌC TỰ NHIÊN

ĐẠI HỌC QUỐC GIA TP.HCM

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC

MẠNG MÁY TÍNH

LẬP TRÌNH SOCKET

Giảng viên hướng dẫn

Lê Hà Minh
Lê Giang Thanh

Sinh viên thực hiện

Nguyễn Nhật Phi 21127132

Fa Ngọc Uyển Nhi 21127661
Trần Đại Niên 21127664

Ngày 10 tháng 7 năm 2022

Lập trình Socket Khoa Công nghệ Thông tin

LỜI CẢM ƠN

Chúng em xin chân thành cảm ơn thầy Lê Hà Minh, thầy Lê Giang Thanh đã giảng dạy bọn em trong
suốt một học kì vừa qua và góp ý, đưa ra lời khuyên giúp đồ án của bọn em hoàn thiện hơn.

Trong quá trình thực hiện đồ án này chúng em không thể tránh khỏi sai sót vì chưa có đủ kinh nghiệm,
chúng em rất mong nhận được ý kiến đóng góp của các thầy, để chúng em học hỏi thêm nhiều điều và có
thể thực hiện các đồ án sau tốt hơn.

TP. Hồ Chí Minh Ngày 10 tháng 7 năm 2022

Page 2
Lập trình Socket Khoa Công nghệ Thông tin

Mục lục
1 Đánh giá mức độ hoàn thành 6

2 Kịch bản giao tiếp của chương trình 7

2.1 Giao thức . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Giao tiếp Client-Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.3 Tổ chức cơ sở dữ liệu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3 Môi trường lập trình, ngôn ngữ lập trình và các thư viện 9
3.1 Môi trường lập trình . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.2 Ngôn ngữ lập trình sử dụng: PYTHON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.3 Các thư viện sử dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

4 Cây chức năng 12

5 Hướng dẫn sử dụng các tính năng của chương trình 13

5.1 Trang chủ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.2 Chức năng xem thực đơn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.3 Chức năng đặt thức ăn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.4 Chức năng thanh toán . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
5.5 Chức năng yêu cầu xem lại, thay đổi đơn đặt hàng . . . . . . . . . . . . . . . . . . . . . . . . 19

6 Phân công công việc 21

References 22

Page 3
Lập trình Socket Khoa Công nghệ Thông tin

Danh sách hình vẽ

1 Microsoft Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2 Python . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3 Cây chức năng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4 Giao diện trang chủ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5 Trước khi truy cập vào thực đơn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
6 Thực đơn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
7 Thông tin món ăn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
8 Số lượng món ăn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
9 Giỏ hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
10 Thông tin đơn hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
11 Chức năng Undo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
12 Tổng số tiền của đơn hàng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
13 Các hình thức thanh toán . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
14 Hình thức thanh toán bằng thẻ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
15 Xác nhận thanh toán . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
16 Sau khi xác nhận thanh toán . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
17 Nhập ID để truy cập vào đơn hàng đã đặt trước đó . . . . . . . . . . . . . . . . . . . . . . . . 19
18 Loại bỏ món ăn đã đặt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
19 Đặt thêm món ăn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Page 4
Lập trình Socket Khoa Công nghệ Thông tin

Danh sách bảng

1 Bảng phân công công việc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Page 5
Lập trình Socket Khoa Công nghệ Thông tin

1 Đánh giá mức độ hoàn thành

- Mức độ hoàn thành của đồ án : 100%

• Các chức năng đã hoàn thành:

✓ Xem thực đơn

□

✓ Đặt thức ăn
□

✓ Thanh toán
□

✓ Cho phép hiển thị minh họa hình ảnh thức ăn trên client
□

✓ Client được phép gửi yêu cầu đặt thêm món ăn cho server trước 2 tiếng của đơn hàng đó
□

✓ Quản lý dữ liệu tại server bằng file có cấu trúc JSON

□

✓ Hỗ trợ nhiều client truy cập đồng thời đến server

□

Page 6
Lập trình Socket Khoa Công nghệ Thông tin

2 Kịch bản giao tiếp của chương trình

2.1 Giao thức

- Giao thức TCP.

- TCP (Transmission Control Protocol) là một giao thức mạng quan trọng được sử dụng trong việc
truyền dữ liệu qua một mạng nào đó. Một giao thức trong phạm vi mạng là một tập hợp các quy tắc và
trình tự kiểm soát việc thực hiện truyền dữ liệu sao cho tất cả mọi người trên thế giới bất kể vị trí địa lý,
bất kể ứng dụng, phần mềm họ đang sử dụng đều có thể thao tác theo cùng một phương thức giống nhau
được gọi là TCP.
- TCP thường kết hợp với IP (Giao thức Internet) theo một cặp được gọi là TCP/IP. Bạn có thể bắt
gặp cụm thuật ngữ này trong phần network setting trên máy tính, điện thoại thông minh hoặc các thiết bị
cầm tay của mình. IP sẽ xử lý việc gán địa chỉ và chuyển tiếp các gói tin từ nguồn đến đích trong khi TCP
kiểm soát độ tin cậy của truyền dẫn.

2.2 Giao tiếp Client-Server

- Khi client sử dụng ứng dụng thì ứng dụng sẽ kết nối với server bằng giao thức TCP và tải về những
thông tin cần thiết từ server (hình ảnh món ăn, thông tin món ăn,...) để tạo UI (giao diện người dùng) cho
client và khi thực hiện kết nối hòan tất, client khi hoàn thành việc đặt đơn hàng và thanh toán, thông tin
sẽ được chuyển từ client đến server bằng giao thức TCP và ngược lại.

2.3 Tổ chức cơ sở dữ liệu

a) Tổ chức cơ sở dữ liệu được sử dụng

- Quản lí cơ sở dữ liệu tại server bằng file JSON:

• orderData.json: Chứa thông tin các món ăn mà khách hàng đã đặt.

• foodData.json: Chứa thông tin các món ăn.

b) Giới thiệu về JSON

- JSON là viết tắt của JavaScript Object Notation, là một kiểu định dạng dữ liệu tuân theo một quy
luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay đều có thể đọc được. JSON là một tiêu chuẩn
mở để trao đổi dữ liệu trên web.
- Các lập trình viên cũng có thể hiểu về Json giống như việc sử dụng các cặp key – value để sử dụng dữ
liệu. Nó hoàn toàn có thể hỗ trợ cho những cấu trúc dữ liệu như các đối tượng và mảng. Một ví dụ cho Json
là gì, ta có thể lấy một tệp tin có tên là timviec_info.Json. Thì nó sẽ có nội dung như dưới đây nếu dùng
fomat kiểu Json phục vụ lưu trữ thông tin:

Page 7
Lập trình Socket Khoa Công nghệ Thông tin

{
“name” : “timviec”,
“title” : “Việc làm IT cho dân Developer”,
“description” : “là hệ sinh thái bao gồm cộng đồng các Developer.”
}
- Nhìn vào đoạn thông tin này, ta có thể thấy rõ cú pháp của Json bao gồm 2 phần riêng việt. Key và
Value được tách biệt rõ rệt. Json ban đầu được thiết kế để phục vụ cho những ứng dụng viết bằng JavaScript
Object Notation. Nhưng trên thực tế, Json là một định dạng dữ liệu nên có thể được sử dụng bởi bất cứ
ngôn ngữ nào mà không bị giới hạn. Đây mới chính là những giải đáp thực tế về Json là gì. Cấu trúc của
Json cũng liên quan đến tất cả những điều này.

Page 8
Lập trình Socket Khoa Công nghệ Thông tin

3 Môi trường lập trình, ngôn ngữ lập trình và các thư viện

3.1 Môi trường lập trình

- Môi trường lập trình: Microsoft Visual Studio Code

Hình 1: Microsoft Visual Studio Code

- Microsoft Visual Studio Code là một môi trường phát triển tích hợp (IDE) từ Microsoft. Microsoft
Visual Studio còn được gọi là "Trình soạn thảo mã nhiều người sử dụng nhất thế giới ".

Page 9
Lập trình Socket Khoa Công nghệ Thông tin

3.2 Ngôn ngữ lập trình sử dụng: PYTHON

a) Giới thiệu về PYTHON

Hình 2: Python

- Python là một ngôn ngữ khá cũ được tạo ra bởi Guido Van Rossum. Thiết kế bắt đầu vào cuối
những năm 1980 và được phát hành lần đầu tiên vào tháng 2 năm 1991.
- Python là ngôn ngữ lập trình hướng đối tượng, cấp cao, mạnh mẽ. Nó dễ dàng để tìm hiểu và đang
nổi lên như một trong những ngôn ngữ lập trình nhập môn tốt nhất cho người lần đầu tiếp xúc với ngôn
ngữ lập trình. Python hoàn toàn tạo kiểu động và sử dụng cơ chế cấp phát bộ nhớ tự động. Python có cấu
trúc dữ liệu cấp cao mạnh mẽ và cách tiếp cận đơn giản nhưng hiệu quả đối với lập trình hướng đối tượng.
Cú pháp lệnh của Python là điểm cộng vô cùng lớn vì sự rõ ràng, dễ hiểu và cách gõ linh động làm cho nó
nhanh chóng trở thành một ngôn ngữ lý tưởng để viết script và phát triển ứng dụng trong nhiều lĩnh vực,
ở hầu hết các nền tảng.
- Các tính năng chính của Python:

• Ngôn ngữ lập trình đơn giản dễ học.

• Miễn phí, mã nguồn mở.

• Khả năng di chuyển.

• Khả năng mở rộng và có thể nhúng.

• Ngôn ngữ thông dịch cấp cao.

• Thư viện tiêu chuẩn lớn để giải quyết những tác vụ phổ biến.

• Hướng đối tượng.

Page 10
Lập trình Socket Khoa Công nghệ Thông tin

3.3 Các thư viện sử dụng

- Requests: là một module Python mà bạn có thể sử dụng để gửi tất cả các loại yêu cầu HTTP. Đây là
một thư viện dễ sử dụng với nhiều tính năng khác nhau, từ việc truyền các tham số trong URL cho đến gửi
các header tùy biến và xác minh SSL.
- Socket: module socket trong Python sẽ giúp chúng ta thực hiện các kết nối client server. để giao tiếp
giữa các máy với nhau.
- Os: cung cấp các chức năng được sử dụng để tương tác với hệ điều hành và cũng có được thông tin
liên quan về nó. OS đi theo các Module tiện ích tiêu chuẩn của Python. Module này cung cấp một cách linh
động sử dụng chức năng phụ thuộc vào hệ điều hành. Module os trong python cho phép chúng ta làm việc
với các tập tin và thư mục.
- Time: module time dùng để xử lý các tác vụ liên quan đến thời gian.
- Json: Python xây dựng sẵn module json để làm việc với JSON như: mở, đọc file JSON.
- Pickle: Pickle được sử dụng để thực hiện chuyển đổi các cấu trúc đối tượng Python sang một dạng
byte để có thể được lưu trữ trên ổ đĩa hoặc được gửi qua mạng. Sau đó, luồng ký tự này sau đó có thể được
truy xuất và chuyển đổi trở lại sang dạng đối tượng ban đầu trong Python.
- Tkinter: Tkinter là thư viện GUI tiêu chuẩn cho Python. Tkinter trong Python cung cấp một cách
nhanh chóng và dễ dàng để tạo các ứng dụng GUI. Tkinter cung cấp giao diện hướng đối tượng cho bộ công
cụ Tk GUI.
- PIL: Sử dụng thư viện Pillow (PIL Fork) để tiến hành các thao tác xử lý hình ảnh đơn giản như resize,
crop, rotate. . .
- Threading: Module threading của thư viện chuẩn Python cung cấp cho chúng ta các class và function
để làm việc với thread, nó cũng cung cấp các cơ chế để đồng bộ luồng, bao gồm: Thread, Lock, RLock,
Condition, Semaphore,Event,...

Page 11
Lập trình Socket Khoa Công nghệ Thông tin

4 Cây chức năng

- Cây chức năng mô tả một cách tổng quan các bước sử dụng ứng dụng.

Hình 3: Cây chức năng

Page 12
Lập trình Socket Khoa Công nghệ Thông tin

5 Hướng dẫn sử dụng các tính năng của chương trình

5.1 Trang chủ

- Mô tả: Trang chủ được thiết kế đơn giản, tạo cảm giác gần gũi, dễ sử dụng cho khách hàng.

Hình 4: Giao diện trang chủ

5.2 Chức năng xem thực đơn

- Mô tả: Sau khi nhấn vào nút “Show Food Menu”, cửa sổ "Your Order ID"1 hiện ra, đối với khách
hàng đặt món ăn lần đầu thì chỉ cần bỏ trống và nhấn nút "Confirm".

Hình 5: Trước khi truy cập vào thực đơn

1 Cửa sổ "Your Order ID" dùng cho khách hàng sau khi đã đặt hàng và thanh toán muốn xem lại đơn hàng hoặc thay đổi
đơn hàng đã thanh toán trước đó, thông qua việc điền ID được server cung cấp(chức năng này sẽ được mô tả ở các mục sau).

Page 13
Lập trình Socket Khoa Công nghệ Thông tin

- Mô tả: Thực đơn với các hình ảnh của thức ăn sẽ xuất hiện. Các hình ảnh món ăn sẽ được trình bày
theo dạng cuộn dọc.

Hình 6: Thực đơn

- Mô tả: Khi click vào một hình ảnh của món ăn bất kì, thông tin của món ăn sẽ hiện ra (thông tin
gồm có: nguyên liệu, cách chế biến, giá tiền...).

Hình 7: Thông tin món ăn

Page 14
Lập trình Socket Khoa Công nghệ Thông tin

5.3 Chức năng đặt thức ăn

- Mô tả: Tại ô “Quantity”, khách hàng có thể nhập số lượng mình mong muốn và click "Order" để cho
món ăn vào giỏ hàng.

Hình 8: Số lượng món ăn

- Mô tả: Sau khi đã chọn xong thức ăn, khách hàng click vào biểu tượng giỏ hàng (nút thanh toán) để
tiến hành đặt thức ăn.

Hình 9: Giỏ hàng

Page 15
Lập trình Socket Khoa Công nghệ Thông tin

- Mô tả: Sau khi nhấn nút thanh toán, chương trình sẽ hiển thị lên cửa sổ mới chứa các món ăn mà
khách hàng đã đặt.

Hình 10: Thông tin đơn hàng

- Mô tả: Khách hàng cũng có thể hủy bỏ lựa chọn của mình bằng cách nhấn vào nút "Undo".

Hình 11: Chức năng Undo

Page 16
Lập trình Socket Khoa Công nghệ Thông tin

5.4 Chức năng thanh toán

- Mô tả: Sau khi đã xác nhận, khách hàng có thể xem tổng số tiền của đơn hàng.

Hình 12: Tổng số tiền của đơn hàng

- Mô tả: Khách hàng có thể lựa chọn hình thức thanh toán: bằng tiền mặt (Paid by cash) hoặc thanh
toán bằng thẻ (Paid by credit card).

Hình 13: Các hình thức thanh toán

Page 17
Lập trình Socket Khoa Công nghệ Thông tin

- Mô tả: Khách hàng khi chọn hình thức thanh toán bằng thẻ (Paid by credit card), ứng dụng sẽ hiển
thị một cửa sổ cho phép khách hàng điền mã thẻ, mẽ thẻ gồm 10 ký số được xem là hợp lệ.

Hình 14: Hình thức thanh toán bằng thẻ

- Mô tả: Sau khi chọn hình thức thanh toán, khách hàng nhấn vào nút "Confirm" để hoàn thành đơn
đặt hàng và chuẩn bị thưởng thức các món ăn.

Hình 15: Xác nhận thanh toán

Page 18
Lập trình Socket Khoa Công nghệ Thông tin

- Mô tả: Khi thanh toán thành công, ứng dụng sẽ hiển thị cửa sổ cảm ơn kèm theo ID của khách hàng.
Ứng dụng sẽ tắt khi khách hàng hoàn thành đơn đặt hàng.

Hình 16: Sau khi xác nhận thanh toán

5.5 Chức năng yêu cầu xem lại, thay đổi đơn đặt hàng

- Mô tả: Nếu khách hàng muốn xem lại danh sách món ăn đã đặt hoặc muốn thay đổi đơn đặt hàng
thì cần khởi động lại ứng dụng theo các bước hướng dẫn ở trên. Dựa vào ID đã được server cung cấp khách
hàng chỉ cần điền ID vào cửa sổ "Your Order ID" thì lập tức ứng dụng sẽ hiện lên đơn hàng của khách hàng
đã đặt trước đó. Lúc này khách hàng có thể xem lại những gì mình đã đặt hoặc thực hiện các thay đổi theo
ý muốn.

Hình 17: Nhập ID để truy cập vào đơn hàng đã đặt trước đó

Page 19
Lập trình Socket Khoa Công nghệ Thông tin

- Mô tả: Khách hàng có thể "Undo" để loại bỏ món ăn, hoặc thêm món ăn.

Hình 18: Loại bỏ món ăn đã đặt

- Mô tả: Khách hàng cũng có thể đặt thêm món ăn.

Hình 19: Đặt thêm món ăn

- Sau khi đã xác nhận đơn đặt hàng thì khách hàng có thể thanh toán theo các bước đã hướng dẫn ở
trên.

Page 20
Lập trình Socket Khoa Công nghệ Thông tin

6 Phân công công việc

- Nhóm trưởng: Trần Đại Niên - 21127664
- Thành viên: Nguyễn Nhật Phi - 21127132; Fa Ngọc Uyển Nhi - 21127661
- Bảng phân công công việc:

STT MSSV Họ và tên Chi tiết công việc Phần trăm công việc
- Thiết kế giao diện trang chủ
- Thiết kế menu
- Lập trình giao diện trang chủ
1 21127132 Nguyễn Nhật Phi - Thiết kế cửa sổ thanh toán 30%
- Lập trình xóa món ăn đã đặt
- Lập trình hiển thị cửa sổ cảm ơn
- Báo cáo
- Tìm kiếm hình ảnh các món ăn
- Lập trình hiển thị hình ảnh món ăn
- Thiết kế cấu trúc dữ liệu cho server
(thông tin món ăn và thông tin khách
2 21127661 Fa Ngọc Uyển Nhi hàng đặt món) 30%
- Soạn nội dung mô tả chi tiết món ăn
- Lập trình hiển thị thông tin món ăn
- Xử lí file JSON(thêm và xóa dữ liệu)
- Báo cáo
- Lập trình tạo kết nối TCP
- Lập trình tạo kết nối đa luồng
- Lập trình cấu trúc menu
- Lập trình hiển thị hóa đơn
3 21127664 Trần Đại Niên - Lập trình phần thanh toán 40%
- Lập trình hiển thị cửa sổ kiểm tra
số tài khoản
- Lập trình gửi file từ server qua
cho client và ngược lại

Bảng 1: Bảng phân công công việc

Page 21
Lập trình Socket Khoa Công nghệ Thông tin

Tài liệu
[1] Tkinter Course - Create Graphic User Interfaces in Python Tutoria. [online]. Available at: https://www.
youtube.com/watch?v=YXPyB4XeYLA&t=617s

[2] Python GUI Programming With Tkinter – Real Python. [online] . Available at: https://realpython.
com/python-gui-tkinter/

[3] How to Transfer Files in the Network using Sockets in Python - Python Code. [online]. Available at:
https://www.thepythoncode.com/article/send-receive-files-using-sockets-python.

[4] python 3.x - tkinter doesn’t open image via function - Stack Overflow. [online]. Available at: https:
//stackoverflow.com/questions/63966028/tkinter-doesnt-open-image-via-function

[5] Create UI using Tkinter in Python . [online]. Available at: https://www.tutorialsteacher.com/

python/create-gui-using-tkinter-python

[6] JSON . [online]. Available at: https://topdev.vn/blog/json-la-gi/

[7] Module Requests . [online]. Available at: https://code.tutsplus.com/vi/tutorials/

using-the-requests-module-in-python--cms-28204

[8] Module Socket . [online]. Available at: https://toidicode.com/

lap-trinh-mang-voi-module-socket-trong-python-364.html

[9] Module OS . [online]. Available at: https://viettuts.vn/python/mo-dun-os-trong-python

[10] Module Threading . [online]. Available at: https://viblo.asia/p/

da-luong-trong-python-multithreading-WAyK8MO6ZxX

[11] Microsoft Visual Studio Code . [online]. Available at: https://vi.wikipedia.org/wiki/Microsoft_

Visual_Studio

[12] PYTHON . [online]. Available at: https://tuhoclaptrinh.edu.vn/lap-trinh-python-la-gi-262.

html

[13] TCP protocol . [online]. Available at: https://bizflycloud.vn/tin-tuc/

tcp-la-gi-20181022170658844.htm

Page 22