Xây dựng website bán hàng Lập trình Web thời trang | Báo cáo đồ án Lập trình Python nâng cao

TRƯỜNG ĐẠI HỌC HỌC VĂN LANG
KHOA CÔNG NGHỆ THÔNG TIN
BÁO CÁO ĐỒ ÁN MÔN HỌC
LẬP TRÌNH PYTHON NÂNG CAO
NGÀNH: CÔNG NGHỆ THÔNG TIN Tên Đồ án :
Xây dựng website bán hàng -
Lập trình Web thời trang
SVTH: Nguyễn Huỳnh Tấn Dũng Trương Văn Khải MSSV: 2274802010099 2274802010368 GVHD: Tống Hùng Anh
GVLT: Nguyễn Thị Mỹ Linh
Tp. Hồ Chí Minh – năm 2024 LỜI CẢM ƠN
Hiện nay thương mại điện tử gần như phủ rộng toàn thế giới. Việc con người ngày
càng tiếp cận với công nghệ sớm đồng thời thúc đẩy nền thương mại điện tử ngày càng
phổ biến, phát triển mạnh mẽ và vươn xa hơn. Hơn nữa thương mại điện tử giúp con
người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp theo
nhiều cách khác nhau theo nhu cầu và sở thích của người dùng. Với sự tiên tiến và thuận
tiện đó, con người có thể chỉ cần mua một món hàng, hay nhiều món hàng không giới hạn
về kích thước, cân nặng. Chỉ cần một cú click chuột là có thể có thứ mình muốn. Chính vì
thế chúng em chọn đề tài “Xây dựng website bán hàng – Lập trình web thời trang”.
Viết một báo cáo đồ án môn học là một trong những việc khó nhất mà chúng em phải
hoàn thành trong quá trình học một môn học. Trong quá trình thực hiện đề tài chúng
em đã gặp rất nhiều khó khăn và bỡ ngỡ. Nếu không có những sự giúp đỡ và lời động
viên chân thành của nhiều người có lẽ chúng em khó có thể hoàn thành tốt tiểu luận này.
Trong lời đầu tiên của báo cáo đồ án tốt nghiệp “ Xây dựng Website thời trang”
này, chúng em muốn gửi những lời cám ơn và biết ơn chân thành nhất của bản thân
chúng em tới tất cả những người đã hỗ trợ, giúp đỡ chúng em về kiến thức và tinh thần
trong quá trình học tập cũng như trong việc thực hiện đồ án.
Trước hết chúng em xin chân thành cảm ơn thầy Tống Hùng Anh – giảng viên
Thực hành môn Python nâng cao vào cô Linh - giảng viên Lý thuyết môn Python nâng
cao trường Đại học Văn Lang.
Cuối cùng chúng em xin gử lời cảm ơn đến những tiền bối/anh chị đi trước đã có
những góp ý, tư vấn trong quá trình chúng em là đồ án này. Do thời gian thực hiện có
hạn và có những khó khăn cá nhân nên mong thầy cô thông cảm cho những thiếu sót.
Chúng em rất mong nhận được nhận xét, đánh giá từ phía thầy cô để đồ án được
hoàn thiện hơn trong tương lai.
Chúng em xin chân thành cảm ơn! 2 MỤC LỤC
LỜI CẢM ƠN.............................................................................................................................................2
CHƯƠNG 1. TỔNG QUAN......................................................................................................................4 1.1
Giới thiệu đề tài..........................................................................................................................4 1.2
Lý do chọn đề tài.........................................................................................................................5 1.3
Mục đích phát triển đề tài..........................................................................................................5 1.4
Ý nghĩa thực tiễn........................................................................................................................5 1.5
Chức năng...................................................................................................................................5 1.6
Vấn đề - Giải pháp......................................................................................................................6 1.6.1
Khó khăn:............................................................................................................................6 1.6.2
Giải pháp:............................................................................................................................6
CHƯƠNG 2. TÌM HIỂU CÁC CÔNG NGHỆ TẠO WEBSITE............................................................6
JavaScript:..............................................................................................................................................7
JavaScript là gì?.................................................................................................................................7
JavaScript được sử dụng để làm gì?.................................................................................................8
Bootstrap.................................................................................................................................................9
Tại sao nên sử dụng Bootstrap?..........................................................................................................9
Cấu trúc lưới của Bootstrap................................................................................................................9
Các thành phần chính của Bootstrap...................................................................................................9
Sử dụng JavaScript với Bootstrap.....................................................................................................10
Flask......................................................................................................................................................10
Khái niệm cơ bản của Flask:...........................................................................................................10
Ưu điểm của Flask:...........................................................................................................................11
CHƯƠNG 3. DATABASE.............................................................................................................................11
Về DB Browser for SQLite (DB4S).....................................................................................................11
Cài đặt và áp dụng:............................................................................................................................13
Kết nối database trên với trang web:................................................................................................17
CHƯƠNG 4. GIAO DIỆN.............................................................................................................................19 1.
Các trang chính của web:...............................................................................................................19 a.
Ở trang chủ:...............................................................................................................................19 3 b.
Ở trang Cửa hàng:......................................................................................................................21 c.
Ở trang Giỏ hàng:.......................................................................................................................22 d.
Ở trang Giới thiệu:.....................................................................................................................22 e.
Ở trang Liên hệ:..........................................................................................................................23 f.
Ở trang Blog:..............................................................................................................................23 g.
Ở trang Account:........................................................................................................................24
CHƯƠNG 5. KẾT LUẬN...............................................................................................................................25 # Chữ viết tắt Giải thích 1 SVG Scalable Vector Graphics 2 JS JavaScripts 3 CSS Cascading Style Sheets 4 … …
Bảng giải thích từ viết tắt các đuôi file có trong đồ án CHƯƠNG 1. TỔNG QUAN
1.1 Giới thiệu đề tài
Với sự phát triển mạnh mẽ của công nghệ thông tin hiện nay, việc mua sắm trực tuyến
đã trở thành một xu hướng phổ biến và không thể thiếu trong đời sống hàng ngày. Ngày
càng có nhiều người tiêu dùng lựa chọn mua sắm online bởi sự tiện lợi, tiết kiệm thời
gian, và khả năng so sánh giá cả, mẫu mã ngay tại nhà. Đặc biệt, ngành thời trang luôn có
nhu cầu cao và sự thay đổi liên tục, do đó, chúng em xây dựng một website bán quần áo
không chỉ giúp doanh nghiệp tiếp cận dễ dàng với khách hàng mà còn mang lại trải
nghiệm mua sắm nhanh chóng, tiện lợi, đáp ứng nhu cầu cập nhật xu hướng của khách
hàng. Một website bán quần áo có giao diện thân thiện, dễ sử dụng, tích hợp các chức
năng như tìm kiếm sản phẩm, đặt hàng, thanh toán, và theo dõi đơn hàng sẽ tạo ra lợi thế
cạnh tranh, đồng thời thúc đẩy doanh thu hiệu quả trong thời đại số.
1.2 Lý do chọn đề tài
Do quần áo là mặt hàng phổ biến và luôn nằm trong nhu cầu của mọi người, việc kinh
doanh quần áo đã trở thành một lĩnh vực sôi động và rộng rãi. Trong bối cảnh thị trường 4
ngày càng cạnh tranh và người tiêu dùng có xu hướng mua sắm trực tuyến nhiều hơn, việc
xây dựng một website bán quần áo là điều cần thiết để các doanh nghiệp tiếp cận với
khách hàng một cách nhanh chóng, hiệu quả. Đề tài này cũng tạo cơ hội để tìm hiểu về
các tính năng cơ bản và nâng cao của một trang thương mại điện tử, như quản lý sản
phẩm, giỏ hàng, thanh toán trực tuyến, và chăm sóc khách hàng. Ngoài ra, nó giúp tích
lũy kinh nghiệm thực tiễn trong việc phát triển ứng dụng web, từ đó đáp ứng được nhu
cầu phát triển của thị trường và tạo ra sản phẩm hữu ích cho người dùng.
1.3 Mục đích phát triển đề tài
Đề tài được phát triển nhằm mục đích thương mại điện tử, quản lý việc mua bán quần áo
thời trang thông qua mạng internet, nâng cao trải nghiệm sử dụng webste của ngườ dùng
qua đó đưa thương hiệu đến rộng rãi người dùng hơn (hiện tại logo/tên thương hiệu của
website chỉ mang tính chất minh họa).
1.4 Ý nghĩa thực tiễn
Ý nghĩa thực tiễn của đề tài xây dựng website bán quần áo là giúp tạo ra một nền tảng
mua sắm trực tuyến tiện lợi và hiệu quả cho người tiêu dùng, đồng thời đáp ứng nhu cầu
ngày càng cao của thị trường. Website sẽ giúp các cửa hàng quần áo mở rộng phạm vi
kinh doanh, không bị giới hạn bởi vị trí địa lý, từ đó thu hút được nhiều khách hàng tiềm
năng hơn. Hệ thống quản lý sản phẩm, giỏ hàng, thanh toán và theo dõi đơn hàng trên
website cũng sẽ giúp doanh nghiệp quản lý và vận hành dễ dàng, giảm thiểu rủi ro và tối
ưu hóa quy trình kinh doanh. Ngoài ra, việc xây dựng một website bán quần áo còn giúp
nâng cao trải nghiệm người dùng, tạo sự thuận tiện và nhanh chóng trong việc tìm kiếm,
mua sắm sản phẩm, từ đó gia tăng mức độ hài lòng và lòng trung thành của khách hàng. 1.5 Chức năng
Đơn thuẩn là website bán quần áo thời trang cơ bản, mang đến người tiêu dùng với các
thông tin chi tiết về mặt hàng, hển thị hình ảnh kèm theo mô tả sản phẩm, giá cả. Website
gồm những chức năng sau:
 Cho phép bỏ thêm hàng vào giỏ hàng.
 Hển thị danh sách các mặt hàng.
 Hiển thị thông tin khách hàng.
 Quản lý đơn đặt hàng.  Xử lý đơn hàng.
 Hiển thị danh sách mặt hàng khách yêu thích.
1.6 Vấn đề - Giải pháp 5 1.6.1 Khó khăn:
- Về mặt thời gian: chúng em không thể đầu tư quá nhiều cho một đồ án nhất định.
- Về mặt kiến thức: ở môi trường học tập ở VLU chúng em được tiếp xúc cũng như được
thực hành qua nhiều ngôn ngữ lập trình khác nhau nên chúng em chỉ chỉ có thể thực hiện
đồ án ở mức độ chấp nhận được với yêu cầu của môn.
- Tài liệu của môn đa phần đều là tài liệu nước ngoài. Đây cũng là vừa khó khăn và thuận
lợi. Khó là do gặp một số từ vựng mới nên bất tiện trong việc dịch thuật, lợi là được tiếp
cận được với tiếng anh chuyên ngành, điều này sẽ dễ dàng cho chúng em sau này nếu làm
việc cho doanh nghiệp nước ngoài. 1.6.2 Giải pháp:
- Qua đồ án chúng em tự tìm tòi nhiều kiến thức mới, được đọc nhiều tài liệu, chương
trình hay ho về web. Ngoài ra, việc đặt câu hỏi trên các trang mạng xã hội giúp quen biết
thêm được nhiều người có chung đam mê, công việc, học tập. Từ đó trau dồi thêm kinh nghiệm, kiến thức.
CHƯƠNG 2. TÌM HIỂU CÁC CÔNG NGHỆ TẠO WEBSITE
Việc xây dụng và phát triển website hiện nay có rấy nhiều ngôn ngữ như sử dụng
javascript có MeotorJS, Angularks, C#, Java, PHP… Trong quá trình tìm hiểu và xin ý
kiến của các tiền bối/anh chị đi trước cũng như qua tham khảo những công nghệ được
trường lớp giới thiệu, giảng dạy, chúng em xin xây dụng website theo …. . Về thiết kế
giao diện chúng em sử dụng Bootstrap 5.0.1 giúp giảm tối thiểu thời gian xây dựng trang
web vì tài nguyên về Bootstrap có rất nhiều trên internet. Nhằm tối ưu hóa xử lý website,
lưu trữ giữ liệu người dùng thì chúng em dùng SQL làm cơ sở dữ liệu. JavaScript:
JavaScript được phát minh bởi Brendan Eich của Netscape (với trình duyệt Navigator 2.0)
vào năm 1995, và xuất hiện ở hầu hết các công cụ trình duyệt của Netscape và Microsoft kể từ năm 1996. 6
Ngày nay, gần như các trình duyệt đình đám đều có hỗ trợ JavaScript, và chính JavaScript
là nhân tố gần đây đã châm ngòi cho cuộc chiến các trình duyệt.
JavaScript đã ra đời từ khá lâu, nhưng cho đến ngày nay, nó vẫn mang một tầm quan
trọng rất lớn, vì vậy học JavaScript là điều cần thiết. JavaScript là gì?
Về phương diện thực thi ngôn ngữ:
Hiện nay khi phát triển các trang web động, có hai phương thức rất phổ biến đó là Server- Side và Client-Side. 
Client-Side: là phương thức sẽ xử lý các mã lệnh bởi mỗi browser riêng biệt tại
máy người dùng, sau đó gửi kết quả lên cho Server. 
Server-Side: thì lại gửi các mã lệnh cho server xử lý trước, sau đó server gửi kết quả lại cho browser.
JavaScript là một ngôn ngữ lập trình kịch bản Client-Side (Client-Side Script Language),
và dĩ nhiên nó được thực thi tại máy người dùng. Và vì JavaScript là một Client-Side
Script Language nên nó không có khả năng kết nối và thao tác với CSDL trên Server.
Về phương diện phong cách ngôn ngữ lập trình
Các tài liệu cũ trước đây nói JavaScript là ngôn ngữ lập trình dựa vào đối tượng (Object-
based language). Nhưng từ lúc Ajax ra đời, JavaScript trở nên hướng đối tượng hơn rất
nhiều. Vì vậy, chúng ta có thể coi JavaScript là một ngôn ngữ lập trình hướng đối tượng
(Object-Oriented programming). Về cú pháp, JavaScript cũng tương tự như C, Perl và
Java,… vì dùng mệnh đề lặp if, while, for, tương tự nhau. Nói tóm lại:
JavaScript là một ngôn ngữ lập trình: 
Kịch bản Client-Side (Client-Side Script Language). 
Hướng đối tượng (Object-Oriented programming).
JavaScript được sử dụng để làm gì? 
JavaScript được sử dụng nhằm bổ sung sự tương tác cho các trang HTML. 
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ữ script động. 
JavaScript có thể được dùng để xác nhận dữ liệu người dùng nhập vào trước khi nó được chuyển lên server. 7 
JavaScript có thể giúp website của bạn tương tác với người dùng được dễ dàng và chuyên hơn.  Tùy biến trình duyệt.
Ưu điểm của JavaScript: 
Hoàn toàn miễn phí và dễ học. 
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. 
Dễ dàng tương tác, điều khiển và tránh bớt việc xử lý từ phía server. 
Nắm vững kiến thức JavaScript bây giờ rất hữu dụng cho các bạn sau này để có thể
tiếp thu những công nghệ mới mà nó được gọi gọn vào những ngôn ngữ như: Ajax, Atlas …
Nhược điểm của JavaScript 
JavaScript không có trình biên dịch riêng mà được diễn dịch và chạy bởi trình
duyệt hỗ trợ nó. Chính vì thế, nếu trình duyệt không hỗ trợ, hoặc không bật JS, nó sẽ không chạy được. 
JS có thể làm ứng dụng web của bạn trở nên nặng nề hơn. 
Bảo mật kém. Không có khả năng giấu mã.
Nguyên tắc lập trình trong JavaScript 
Bất cứ ngôn ngữ lập trình nào cũng đều phải có nguyên tắc của nó, và JavaScript
cũng không ngoại lệ. Để bắt đầu học lập trình 1 ngôn ngữ nào, trước tiên chúng ta
cần phải biết quy tắc của nó. 
Một số quy tắc quan trọng trong JS mà chúng ta cần phải nhớ như sau: o
Lệnh JavaScript phân biệt chữ in hoa và chữ thường. o
Mọi câu lệnh JavaScript đều kết thúc bằng dấu chấm phẩy ";". o
Các điều kiện phải được khai báo trong cặp dấu ngoặc đơn (). o
Khi sử dụng lệnh điều khiển, nếu sử dụng nhiều hơn 1 lệnh, bạn phải sử
dụng cặp dấu ngoặc nhọn {}. o
JavaScript sử dụng dấu chấm "." để tham chiếu đến 1 phương thức hay
thuộc tính của đối tượng. Bootstrap
Bootstrap là một framework front-end được viết bằng SASS và biên dịch thành CSS.
Nó là một bộ thư viện mạnh mẽ, tích hợp sẵn nhiều thành phần CSS, giúp quá trình lập
trình HTML và CSS trở nên đơn giản và hiệu quả hơn. 8
Tại sao nên sử dụng Bootstrap? 
Tiết kiệm thời gian: Thay vì viết lại từ đầu các thành phần giao diện như button,
form, navbar, grid system, ... Bootstrap đã cung cấp sẵn cho bạn một bộ sưu tập
phong phú, giúp bạn nhanh chóng xây dựng giao diện chuyên nghiệp. 
Đảm bảo tính nhất quán: Bootstrap tuân theo một hệ thống lưới và các quy tắc
thiết kế nhất quán, giúp đảm bảo giao diện của bạn luôn đẹp mắt và chuyên nghiệp trên mọi thiết bị. 
Dễ dàng tùy chỉnh: Bootstrap được xây dựng dựa trên SASS, một ngôn ngữ tiền
xử lý CSS mạnh mẽ, cho phép bạn dễ dàng tùy chỉnh các biến, mixin và các phần
khác để tạo ra giao diện độc đáo. 
Hỗ trợ đa trình duyệt: Bootstrap được thiết kế để hoạt động tốt trên hầu hết các
trình duyệt hiện đại, giúp bạn tiết kiệm thời gian khắc phục các vấn đề tương thích. 
Cộng đồng lớn: Bootstrap có một cộng đồng người dùng rất lớn, điều này có
nghĩa là bạn dễ dàng tìm thấy tài liệu, hướng dẫn, và được hỗ trợ khi gặp khó khăn.
Cấu trúc lưới của Bootstrap
Bootstrap sử dụng một hệ thống lưới 12 cột, giúp bạn dễ dàng sắp xếp các phần tử trên
trang web một cách linh hoạt và đáp ứng trên mọi kích thước màn hình. Mỗi hàng (row)
được chia thành 12 cột, bạn có thể tùy chỉnh độ rộng của các cột bằng cách sử dụng các
class như col-sm-4, col-md-6, ...
Các thành phần chính của Bootstrap 
Grid system: Hệ thống lưới linh hoạt để sắp xếp các phần tử trên trang web. 
Typography: Các kiểu chữ được định dạng sẵn, giúp bạn tạo ra các văn bản đẹp mắt. 
Tables: Các bảng dữ liệu được thiết kế đẹp mắt và dễ sử dụng. 
Forms: Các form được thiết kế sẵn, giúp bạn tạo ra các form nhập liệu đẹp mắt và dễ sử dụng. 
Buttons: Các nút bấm với nhiều kiểu dáng và kích thước khác nhau. 
Navbar: Thanh điều hướng giúp người dùng dễ dàng điều hướng trên website. 
Card: Các thẻ để hiển thị nội dung một cách trực quan. 
Modal: Hộp thoại để hiển thị thông tin hoặc yêu cầu người dùng thực hiện một hành động. 
Và nhiều thành phần khác...
Sử dụng JavaScript với Bootstrap
Bootstrap tích hợp sẵn một số JavaScript plugin để tạo ra các hiệu ứng động và tương tác
cho các thành phần của mình. Các plugin này thường sử dụng thư viện jQuery để hoạt động. 9 Flask
Flask là một micro-framework của Python giúp xây dựng các ứng dụng web một cách
nhanh chóng, linh hoạt, và đơn giản. Được gọi là "micro-framework" vì Flask không bắt
buộc phải sử dụng nhiều thành phần nặng, chỉ cung cấp các tính năng cốt lõi để xử lý web
mà không đi kèm sẵn những công cụ phức tạp (như ORM hoặc quản lý form). Điều này
giúp lập trình viên dễ dàng cấu hình và mở rộng ứng dụng theo nhu cầu riêng.
Khái niệm cơ bản của Flask: 
Định tuyến (Routing): Flask sử dụng decorators để định nghĩa các URL và ánh xạ
chúng đến các hàm xử lý, giúp tạo các đường dẫn cho trang web (ví dụ,
@app.route('/') sẽ định nghĩa đường dẫn trang chủ). Mỗi route có thể xử lý các
phương thức HTTP như GET, POST, PUT, DELETE, cho phép thiết kế API RESTful dễ dàng. 
Quản lý phiên (Session): Flask hỗ trợ quản lý session để lưu trữ thông tin người
dùng tạm thời trong trình duyệt, thường được dùng để xác định người dùng trong
các phiên đăng nhập. Dữ liệu session trong Flask được mã hóa, đảm bảo tính bảo mật cao. 
Render template: Flask dùng Jinja2, một công cụ mạnh mẽ để render HTML. Nó
cho phép sử dụng biến, vòng lặp, và điều kiện trực tiếp trong file HTML. Việc
render này giúp tạo các trang web động bằng cách truyền dữ liệu từ server vào giao
diện người dùng, như từ Python sang HTML. 
Quản lý lỗi và bảo mật: Flask có các công cụ để xử lý và báo lỗi rõ ràng, giúp lập
trình viên gỡ lỗi hiệu quả hơn. Flask cũng hỗ trợ bảo mật cơ bản như chống tấn
công CSRF (Cross-Site Request Forgery) và bảo vệ các dữ liệu session. 
Tích hợp mở rộng: Dù nhỏ gọn, Flask hỗ trợ mở rộng dễ dàng qua các thư viện
như SQLAlchemy để quản lý cơ sở dữ liệu, Flask-WTF cho việc xử lý form, và
Flask-Login để quản lý đăng nhập người dùng. Các tiện ích này cho phép Flask
linh hoạt và có thể mở rộng để đáp ứng các yêu cầu phức tạp hơn trong ứng dụng.
Ưu điểm của Flask: 
Đơn giản và linh hoạt: Vì không tích hợp sẵn nhiều tính năng phức tạp, Flask nhẹ
và dễ sử dụng cho các ứng dụng nhỏ. Người dùng có thể tự chọn và tích hợp các
công cụ bổ sung phù hợp với nhu cầu. 
Dễ học và tùy chỉnh: Flask có cú pháp đơn giản, rất dễ tiếp cận đối với người mới
học lập trình web. Ngoài ra, framework này cũng cho phép tùy chỉnh sâu khi phát triển các dự án lớn. 
Phổ biến và cộng đồng mạnh: Flask có một cộng đồng lớn hỗ trợ, nhiều tài liệu,
và nhiều phần mở rộng, giúp dễ dàng tìm kiếm trợ giúp hoặc tài nguyên học tập. 10
Flask thường được dùng để xây dựng các ứng dụng web đơn giản, API cho dịch vụ web,
hoặc thậm chí các ứng dụng web phức tạp nếu đi kèm với các phần mở rộng. Flask là lựa
chọn lý tưởng cho các dự án có yêu cầu linh hoạt và cần phát triển nhanh chóng nhờ sự
đơn giản và khả năng tùy biến cao. CHƯƠNG 3. DATABASE
Về DB Browser for SQLite (DB4S)
DB Browser for SQLite (DB4S) là một công cụ mã nguồn mở chất lượng cao, trực quan, được
thiết kế cho những người muốn tạo, tìm kiếm và chỉnh sửa các tệp cơ sở dữ liệu SQLite hoặc
SQLCipher. DB4S cung cấp một giao diện giống như bảng tính quen thuộc trên cơ sở dữ liệu bên
cạnh việc cung cấp đầy đủ khả năng truy vấn SQL. Nó hoạt động với Windows, macOS, và hầu
hết các phiên bản của Linux và Unix. Tài liệu cho chương trình có trên wiki.
DB4S cung cấp quyền truy cập vào toàn bộ khả năng của cơ sở dữ liệu SQLite bên dưới. Các
điều khiển và hướng dẫn có sẵn để:
• Tạo và nén các tệp cơ sở dữ liệu
• Tạo, định nghĩa, sửa đổi và xóa bảng
• Tạo, định nghĩa và xóa chỉ mục
• Duyệt, chỉnh sửa, thêm và xóa bản ghi
• Sắp xếp và tìm kiếm bản ghi
• Nhập và xuất bản ghi dưới dạng văn bản 11
• Nhập và xuất bảng từ/tới tệp CSV
• Nhập và xuất cơ sở dữ liệu từ/tới tệp SQL dump
• Phát hành các truy vấn SQL và kiểm tra kết quả
• Xem nhật ký tất cả các lệnh SQL được phát hành bởi ứng dụng
• Vẽ các biểu đồ đơn giản dựa trên dữ liệu bảng hoặc truy vấn
• Thêm, thay đổi, xóa mã hóa SQLCipher từ các tệp cơ sở dữ liệu
Qua tham khảo, chúng em dùng DB Browser cho trang web bán quần áo thời trang để tạo và
quản lý cơ sở dữ liệu sản phẩm, bao gồm các thông tin như tên tài khoản, mật khẩu, id người
dùng, số lượng trong giỏ hàng. Công cụ này giúp chúng em dễ dàng nhập và xuất dữ liệu, thực
hiện các truy vấn SQL để tìm kiếm nhanh chóng, và tạo nhiều tài khoản các nhau.
Cài đặt và áp dụng:
 Cài đặt DB Browser tại đường link: Downloads - DB Browser for SQLite
 Chọn phiên bản phù hợp với Windows của pc đang sử dụng. Khuyến khích chọn bản Standard. 12
 Sau khi cài đặt, mở DB Browser (SQLite) như hình:
 Giao diện của DB Browser for SQLite 13
 Để tạo file lưu trữ database cho trang web, chọn New Database
 Giao diện hiện lên sau khi bấm New Database: 14 Table:
 Đây là nơi bạn đặt tên cho bảng mà bạn muốn tạo. Ví dụ, bạn có thể đặt tên là sanpham để
lưu thông tin về sản phẩm. Name:
 Tên của cột trong bảng. Mỗi cột sẽ đại diện cho một trường dữ liệu, như tensanpham (tên
sản phẩm), gia (giá), hoặc soluong (số lượng). Type: 
Kiểu dữ liệu của cột. Các lựa chọn bao gồm: o
INTEGER: Lưu các số nguyên, thích hợp cho trường soluong. o
TEXT: Lưu dữ liệu dạng văn bản, thích hợp cho trường tensanpham. o
BLOB: Lưu dữ liệu nhị phân, thường dùng cho các tệp lớn như hình ảnh. o
REAL: Lưu các số thực, có thể dùng cho giá sản phẩm với phần lẻ. o
NUMERIC: Lưu số hoặc giá trị boolean (TRUE/FALSE). NN (Not Null): 
Khi chọn, cột này sẽ không được phép chứa giá trị NULL, đảm bảo rằng mọi hàng đều có giá trị trong cột này. PK (Primary Key): 
Đánh dấu cột này là khóa chính của bảng. Khóa chính là duy nhất cho mỗi hàng, ví dụ
id_sanpham để phân biệt từng sản phẩm. AI (Auto Increment): 15 
Nếu chọn, giá trị trong cột này sẽ tự động tăng lên khi thêm hàng mới. Thường được dùng
với khóa chính (Primary Key). U (Unique): 
Đảm bảo rằng giá trị trong cột này là duy nhất cho mỗi hàng. Ví dụ, nếu bảng có cột
masanpham (mã sản phẩm), cột này có thể cần là duy nhất. Collation: 
Chọn quy tắc so sánh cho văn bản trong cột này. Quy tắc này sẽ xác định cách dữ liệu
dạng văn bản được sắp xếp và so sánh, ví dụ theo thứ tự chữ cái hoặc phân biệt chữ hoa và chữ thường.
 Nhấn oke sau đó chọn đến thư mục lưu trang web đã tạo để Save.
 Sau khi đã hoàn tất các bước trên, kết quả có như sau: 16
Ở đây chúng em tạo database cho tài khoản user. Với các trường thông tin/dữ liệu sau: 
username: là tài khoản người dùng 
pass: là mật khẩu người dùng
 Id thì đánh dấu cho thứ tự người dùng
Điều kiện các trường: 
User chỉ có một, không có được trùng, không chứa giá trị NULL. Là loại dữ liệu: TEXT. 
Password, không chứa giá trị NULL. Là loại dữ liệu TEXT. 
Id chỉ có một, không có được trùng. Là loại dữ liệu: INTERGER.
Kết nối database trên với trang web:
Như đã biết, trang web này sử dụng Flask để kết nối các trang với nhau. Chúng em sẽ tạo các
route (đường dẫn) để điều hướng giữa các trang, chẳng hạn như trang đăng nhập, trang đăng ký,
trang chính, v.v. Mỗi route sẽ được liên kết với một hàm xử lý trong Flask, hàm này sẽ trả về nội
dung của trang tương ứng cho người dùng.
Và đương nhiên, chúng em cũng sẽ dùng các template HTML để tạo giao diện, và Flask sẽ kết
nối dữ liệu từ server vào template này để hiển thị thông tin động. Điều này cho phép chúng em
tạo ra một trang web tương tác, nơi người dùng có thể đăng ký, đăng nhập, và thực hiện các thao
tác khác với dữ liệu được lưu trữ trong cơ sở dữ liệu SQLite.
Ở file App.py sau đây là đoạn code để thiết lập và quản lý kết nối cơ sở dữ liệu SQLite trong ứng
dụng Flask. Chi tiết ý nghĩa của đoạn code bên dưới:
Đường dẫn đến cơ sở dữ liệu SQLite: # Đường dẫ n đế n file SQLite DATABASE = 'users.db'
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
DATABASE_PATH = os.path.join(BASE_DIR, DATABASE)
 DATABASE = 'users.db': Đây là tên của tệp cơ sở dữ liệu SQLite. Trong trường hợp này,
tệp cơ sở dữ liệu có tên là . users.db 17
 BASE_DIR = os.path.dirname(os.path.abspath(__file__)): Dòng này lấy đường dẫn
tuyệt đối của thư mục hiện tại chứa tệp mã nguồn Python.
là tên của tệp mã nguồn __file__
đang chạy, và os.path.abspath() trả về đường dẫn tuyệt đối của tệp này. os.path.dirname()
sẽ lấy thư mục chứa tệp đó.
 DATABASE_PATH = os.path.join(BASE_DIR, DATABASE): Kết hợp thư mục cơ sở
(BASE_DIR) và tên tệp cơ sở dữ liệu (
) để tạo ra đường dẫn đầy đủ tới tệp DATABASE users.db. # Hàm đế1 kế t nố i SQLite def get_db():
5 5 db = getattr(g, '_database', None) 5 5 if db is None:
5 5 5 5 db = g._database = sqlite3.connect(DATABASE_PATH) 5 5 return db
get_db(): Hàm này được sử dụng để thiết lập kết nối đến cơ sở dữ liệu SQLite khi cần. Hàm trả
về kết nối cơ sở dữ liệu (nếu đã có) hoặc mở một kết nối mới nếu chưa có. 
db = getattr(g, '_database', None): Dòng này kiểm tra xem biến _database đã
được lưu trong đối tượng g chưa. g là một đối tượng toàn cục trong Flask, được dùng để
lưu trữ dữ liệu trong suốt vòng đời của một request. getattr(g, '_database', None)
sẽ trả về giá trị của _database nếu nó tồn tại trong g, hoặc trả về nếu không có. None 
if db is None:: Nếu không có kết nối cơ sở dữ liệu (tức là db là None), mã sẽ mở một kết nối mới. 
db = g._database = sqlite3.connect(DATABASE_PATH): Nếu chưa có kết nối, mã sẽ
sử dụng sqlite3.connect(DATABASE_PATH) để mở kết nối đến cơ sở dữ liệu SQLite và
lưu kết nối này vào biến g._database để sử dụng cho các lần gọi sau trong cùng một request. 
return db: Cuối cùng, hàm trả về đối tượng kết nối cơ sở dữ liệu (db). @app.teardown_appcontext
def close_connection(exception):
5 5 db = getattr(g, '_database', None) 5 5 if db is not None: 5 5 5 5 db.close()
 @app.teardown_appcontext: Đây là một decorator của Flask, được sử dụng để đăng ký một
hàm sẽ được gọi khi Flask hoàn thành một request (bất kể có lỗi xảy ra hay không). Hàm này sẽ
giúp bạn đóng kết nối cơ sở dữ liệu sau khi request hoàn tất, tránh tình trạng mở quá nhiều kết nối không cần thiết.
 close_connection(exception): Hàm này sẽ được gọi khi kết thúc một request. Nó kiểm
tra xem kết nối cơ sở dữ liệu có tồn tại trong g không, và nếu có, nó sẽ đóng kết nối. 18 
db = getattr(g, '_database', None): Dòng này lấy kết nối cơ sở dữ liệu từ biến g._database None
. Nếu kết nối không tồn tại, nó sẽ trả về . 
if db is not None:: Nếu kết nối cơ sở dữ liệu tồn tại (không phải None), mã sẽ tiếp tục đóng kết nối. 
db.close(): Đóng kết nối cơ sở dữ liệu sau khi hoàn thành request. CHƯƠNG 4. GIAO DIỆN
Giao diện trang web được lấy cảm hứng từ các web thương mại điện tử phổ biến như Zara,
H&M… với thiết kế hiện đại, tinh tế và dễ sử dụng. Phần đầu trang là banner lớn quảng bá sản
phẩm nổi bật hoặc các chương trình khuyến mãi hấp dẫn, giúp thu hút sự chú ý của người dùng
ngay từ khi truy cập. Thanh điều hướng đơn giản nhưng hiệu quả, giúp người dùng dễ dàng di
chuyển đến các danh mục khác nhau như Trang chủ, Cửa hàng, Giỏ hàng, Giới thiệu, Liên hệ,
BLOG. Các sản phẩm được hiển thị kèm theo thông tin giảm giá, giá cũ, giá mới, cùng đánh giá
bằng sao, giúp khách hàng dễ dàng so sánh và đưa ra quyết định mua hàng. Phần cuối trang cung
cấp đầy đủ thông tin hỗ trợ và liên hệ, tạo sự tin tưởng và thuận tiện cho khách hàng khi cần tìm kiếm hỗ trợ.
1. Các trang chính của web: a. Ở trang chủ:
Thanh MENU bao gồm các mục: Trang chủ, Cửa hàng, Giỏ hàng, Giới thiệu, Liên hệ, BLOG
được xếp đều ở bên tría thanh menu. Bên phải bao gồm các icons theo thứ tự từ phải sang trái
như sau: Tài khoản, Giỏ hàng, Wishlist, và icon cho thanh tìm kiếm. 19
Bên dưới là những sản phẩm có khuyến mãi/sale off/ưu đãi hoặc các món mới nhập về được ưu
tiên hiện ở trang chủ để người dùng được nắm bắt các deal hời.
Cuối trang web bao gồm thông tin liên hệ, số điện thoại, email, địa chỉ công ty và các nút liên kết
đến các trang mạng xã hội mà web có liên quan. Bản đồ trang trực quan hiển thị và cấu trúc của
các trang con của Website. Còn có widget để nhập gmail để được Web cung cấp các thông tin
mới nhất từ Web về mail của người dùng. Phần yêu cầu hỗ trợ liệt kê các vấn đề thường gặp của
khách hàng như về Đơn hàng, Tài khoản, Theo dõi đơn. Dưới cùng cũng liệt kê những phương
thức thanh toán bằng nhiều credit cards khác nhau, đem lại sự uy tín cũng như khiến khách hàng
cảm thấy mình có nhiều sự lựa chọn đa dạng khi thanh toán.
b. Ở trang Cửa hàng: 20