Đồ án xây dựng website bán hàng thời trang qua mạng

2


ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM
----------------  ---------------

BÁO CÁO MÔN HỌC ĐỒ ÁN 2
SE122.L11

ĐỀ TÀI: WEBSITE SHOP THỜI TRANG
TP-FASHION SỬ DỤNG CRAWLER

GIẢNG VIÊN HƯỚNG DẪN: ThS. Mai Trọng Khang
NHĨM SINH VIÊN THỰC HIỆN:
Trương Cơng Tấn Phát

17520884

Trần Anh Thắng

17520159

Tp. Hồ Chí Minh, 07/01/2021

3


Lời cảm ơn

Đầu tiên, nhóm tác giả xin gởi lời cảm ơn chân thành đến tập thể quý Thầy Cô
Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và quý Thầy Cô
khoa Công nghệ phần mềm đã giúp cho nhóm tác giả có những kiến thức cơ bản
làm nền tảng để thực hiện đề tài này.
Đặc biệt, nhóm tác giả xin gửi lời cảm ơn và lòng biết ơn sâu sắc nhất tới
Thầy Mai Trọng Khang (Giảng viên môn đồ án 2). Thầy đã hướng dẫn, hỗ trợ
nhóm hồn thành đồ án này.
Trong thời gian một học kỳ thực hiện đề tài, nhóm tác giả đã vận dụng những
kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu
những kiến thức mới. Từ đó, nhóm vận dụng tối đa những gì đã thu thập được để
hồn thành một báo cáo đồ án tốt nhất. Tuy nhiên, trong quá trình thực hiện, nhóm
tác giả khơng tránh khỏi những thiếu sót. Chính vì vậy, nhóm tác giả rất mong
nhận được những sự góp ý từ phía các Thầy Cơ nhằm hồn thiện những kiến thức
mà nhóm tác giả đã học tập và là hành trang để nhóm tác giả thực hiện tiếp các đề
tài khác trong tương lai.
Xin chân thành cảm ơn các quý Thầy Cô!

4


Nhận xét của giảng viên

………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………
………………………………………………………………………………………

………………………………………………………………………………………

5


MỤC LỤC

6


Chương 1. Giới thiệu đề tài
1.1. Giới thiệu
Công nghệ thông tin phát triển ngày càng hiện đại và đổi mới
không ngừng, bằng việc chinh phục hết đỉnh cao này thành đỉnh cao
khác.Mạng internet đang trở thành mạng truyền thong có sức ảnh
hưởng lớn nhất, không thể thiếu trong tất cả các hoạt động của con
người trong việc truyền tải và trao dổi dữ liệu.Không như ngày xưa
ngày nay mọi việc liên quan đến thông tin ngày càng dễ dàng hơn
cho người sử dụng bằng việc kết nối internet và một dịng dữ liệu
truy tìm thì ngay lập tức cả kho tài ngun khơng chỉ trong nước mà
ngồi nước hiện ra khơng chỉ bằng ngơn ngữ mà cả bằng hình ảnh ,
âm thanh. Chính vì lợi ích từ internet đã thúc đảy sự ra đời và phát
triển của thương mại điện tử làm biến đổi bộ mặt văn hoá cũng như
nâng cao chất lượng cuộc sống của con người các hoạt động thong
thường như sản xuất ,kinh doanh và các doing nghiệp cũng phát triển.
cuộc sống con người ngày càng phát triển thì nhu cầu sống của con
người cũng được nâng cao và những nhu cầu đơn giản nhưng cũng
rất thiết thực. Đó là nhu cầu ăn, ở và mặc đây là vấn đề cũng đang là
1 bài toán của các nhà kinh doanh, làm sao để đáp ứng nhu cầu của
con người để cải thiện đời sống ngày càng cao. Chính lẽ đó để đáp

ứng những nhu cầu đó của con người trên cơ sở kế thừa những trang
web bán hang khác em xây dựng nên một website bán hang thời
trang qua mạng để đáp ứng nhu cầu mua sắm của mọi người, giúp họ
tiết kiếm kiệm được thời gian,chi phí trong việc phải đi ra các shop
,các cửa hang hay các chợ truyền thống để mua và tìm kiếm sản
phẩm. Thay vào đó chỉ việc ngồi ở nhà với chiếc máy tính đã kết nối
internet mọi người có thể thảo sức tìm kiếm, lựa chọn sản phẩm áo
7


quần, ... mà mình u thích mọi lúc mọi nơi. Giúp cho người quản trị
dễ dàng trong việc phân quyền quản lí, quản lí khách hàng và các đơn
đặt hang của họ. Đó là lí do em chọn đề tài “Xây dựng website Bán
hàng thời trang qua mạng”,
1.1.1. Nhu cầu người dùng

Hầu hết mọi người quan tâm đến nhiều trang website có thay
đổi nào trên một lịch trình khơng thể đốn trước nội dung ví dụ về các
trang web như là các trang web tin tức, các trang cộng đồng và thông
tin tổ chức tôn giáo, các trang thông tin sản phẩm, các trang web y tế,
và weblog...Liên tiếp kiểm tra từng trang web để xem nếu có bất kỳ
nội dung mới có thể rất tẻ nhạt.
Chẳng hạn khi người dùng truy cập vào một trang web thời
trang nào đó mà chỉ có một vài sản phẩm thì họ sẽ thốt và tìm một
trang web khác với đầy đủ và nhiều sản phẩm hơn. Hay khi cần có
nhiều dữ liệu và được cập nhật liên tục để báo cáo . Các của hàng kinh
doanh trên ứng dụng hay website của họ luôn được cập nhật các mặt
hàng thường xuyên và các mặt hàng mới họ không cần phải tự tay
nhập vào mà nó được lấy dữ liệu từ trang nhà cung cấp…
1.2. Tổng quan các vấn đề chính

1.2.1. Bài tốn
Bài toán đặt ra là hoạt động của khách hàng Khi khách đã quyết
định tham gia vào hoạt động mua hàng của cửa hàng “ảo” thì mỗi
khách hàng được cung cấp một giỏ hàng tương ứng. Khách hàng tự do
lựa chọn loại hàng hóa nào mà mình thích vào giỏ hàng của mình.
Thơng qua chức năng tìm kiếm của website giúp khách hàng có thể
nhanh chóng tìm được loại hàng mà mình muốn mua một cách nhanh
nhất. Khách hàng có thể cập nhật các mặt hàng hay thêm mặt hàng
vào giỏ hàng của mình nếu muốn mua, có thể xóa mặt hàng trong giỏ
8


hàng mà mình khơng muốn mua nữa. Nếu khách hàng chấp nhận
thanh tốn thì hệ thống u cầu nhập thơng tin chi tiết của khách hàng
như họ tên, địa chỉ email, username, pasword… nếu khách hàng chưa
đăng ký đăng nhập, ngược lại nếu khách hàng nào đã đăng ký rồi thì
họ chỉ cần đăng nhập bằng username và password của mình. Khi
khách hàng đã hồn thành q trình đặt hàng với hệ thống thì khách
hàng tiến hành thanh tốn, khách hàng có thể lựa chọn các hình thức
thanh tốn trên website. Sau khi hồn thành q trình thanh tốn
khách hàng có thể thực hiện lại q trình mua hàng của mình nếu
khách hàng muốn mua thêm hàng hóa. Khi đã đặt hàng rồi, khách
hàng có thể theo dõi trực tiếp tình trạng đơn đặt hàng của mình qua
website nếu họ có băn khoăn, nếu họ có những gì khơng đồng ý thì có
thể gửi đơn khiếu nại và thơng tin phản hồi hệ thống qua chức năng
liên hệ khác hàng. Hoạt động của nhà quản trị. Có thể song song 2
cách cập nhật các mặt hàng (thủ công và tự động crawl data từ nhà
cung cấp). Cung cấp các giỏ hàng cho khách hàng giúp khách hàng
cảm thấy an tâm khi mua hàng mà không bị một số lỗi làm gián đoạn
quá trình mua hàng của khách hàng, giúp hiệu quả mua hàng của họ

nhiều hơn cho đến khi kết thúc việc mua hàng cũng như ấn định số
lượng hàng mua. Theo dõi khách hàng: cần phải biết khách hàng tham
gia mua là ai và họ cần mua mặt hàng gì trong số khách hàng tham gia
vào việc mua hàng. Và thống kê đơn hàng mua của họ, và doanh thu
với từng mặt hàng của đơn hàng, và mặt hàng bán nhiều nhất hiện tại.
Sau khi kết thúc phiên giao dịch của khách hàng, các đơn hàng khách
hàng mua sẽ được tổng kết lại và chuyển sang các bộ phận khác để xử
lý như các bộ phận kế toán, kinh doanh, và bộ phận chuyển giao hàng
cho khách. Để thu hút khách hàng thường xuyên tham gia vào trang
web, nhà quản trị cần phải có các biện pháp để xúc tiến đăng tải các
9


chương trình khuyến mãi, giảm giá trong những dịp cần thiết để lơi
kéo khách hàng về phía mình, và có các ưu đãi với các khách hàng
thường xuyên và mua hàng với số lượng lớn. Có các hoạt động quản
lý và xử lý đơn hàng như: thông tin, hiển thị các mặt hàng đã giao hay
chưa giao. Kiểm tra tình trạng đơn hàng và đánh dấu tương ứng với
mặt hàng đã giao hay chưa giao. Lập các hóa đơn giao cho khách
hàng.
1.2.2. Giới hạn phạm vi
Hệ thống được xây dựng đáp ứng được những yêu cầu dưới đây:
●

Cho phép nhập hàng vào CSDL

●

Quản lý tài khoản người dùng và phân quyền

●

Quản lý sản phẩm: quản lý thêm, xóa, sửa, tìm kiếm

●

Quản lý crawler dữ liệu từ trang web cung cấp

●

Quản lý thông tin khách hàng

●

Quản lý đơn đặt hàng: cho phép tạo, tìm kiếm, xem các đơn đặt
hàng, tính tốn doanh thu mỗi đơn hàng

●

Cập nhật mặt hàng, loại mặt hàng, khách hàng

●

Thống kê tình hình doanh thu: thống kê doanh thu của cửa hàng
trong một khoảng thời gian theo tháng hoặc theo năm.

1.2.3. Các nội dung nghiên cứu thực hiện
●

Học SpringMVC5, Hibernate5

●

Tìm hiểu Jsp, Jquery, Boostrap, HTML, CSS kết hợp hệ CSDL
MySQL

●

Tìm hiểu về RESTful API và áp dụng vào đồ án

●

Tìm hiểu về cách Crawler data vào trang web bằng jSoup,
Selenium

10


1.2.4. Kết quả hướng tới
- Đối với admin: Đảm bảo an toàn hệ thống, cung cấp tài khoản mật
khẩu để người quản trị có thể truy cập vào hệ thơng quản lí, thao tác
với CSDL của website. Quản lí giúp cho việc theo dõi người dùng dễ
dàng, nhanh chóng cập nhật được các mặt hàng, thể loại để phục vụ
cho nhu cầu người dùng. Quản lý cập nhật lấy dữ liệu từ trang web
được crawler data.
- Đối với user: Có thể xem sản phẩm một cách nhanh chóng; Có thể
đặt mua các mặt hàng và tiến hành thanh toán thuận tiện
- Đối với hệ thống: Website dung lượng không quá lớn, tốc độ xử lý
nhanh, đảm bảo sự chính xác tránh sai sót

11


Chương 2. Các kiến thức công nghệ, nền tảng
2.1. Spring Web MVC
a)

Spring
Spring là một open source framework dành cho Java Enterprise. Core
feature của Spring có thể dùng để xây dựng bất cứ Java application
nào, các extensions của Spring có thể được sử dụng cho việc xây dựng
web application trên nền tảng Java EE. Spring framework cũng hướng
tới mục tiêu làm cho việc phát triển các ứng dụng trên nền tảng Java
EE dễ dàng hơn và thúc đẩy việc lập trình tốt hơn bằng model POJObased…

b)

Spring MVC
Spring có xây dựng một cơ chế có tên Spring MVC mà ở đó có các
API cho phép việc xây dựng ứng dụng web được dễ dàng hơn và
chuẩn hơn. Chuẩn hơn thể hiện ở chỗ mọi thành phần được tạo ra, cài
đặt và vận hành tuân theo một chuẩn thiết kế thống nhất. Ở đây View
sẽ là các trang html hay jsp giúp cho việc hiển thị dữ liệu lên trình
duyệt. Dữ liệu được lấy ra từ Model là các POJO (Plain Old Java
Object) hay ta còn gọi là các Domain Object. Cụ thể hơn, nó là các
đối tượng có các thuộc tính có khả năng truyền dữ liệu trong các
luồng nghiệp vụ của ứng dụng. Cuối cùng là Controller, là các lớp đặc
biệt, có chứa các phương thức có khả năng nhận yêu cầu, xử lý yêu
cầu, cập nhật dữ liệu, và chuyển tiếp dữ liệu trong ứng dụng.

2.2. Hibernate Framework
a) ORM
ORM là tên viết tắt của cụm từ “Object Relational Mapping” đây là
tên gọi chỉ việc ánh xạ các record dữ liệu trong hệ quản trị cơ sở dữ
12


liệu sang dạng đối tượng mà mã nguồn đang định nghĩa trong class.
Là một khái niệm phổ biến, được cài đặt trong tất cả các loại ngôn
ngữ hiện đại ngày nay như: java, php, node.js, swift … Bạn dễ dàng
có thể cài đặt ORM hoặc sử dụng các thư viện mã nguồn mở về ORM
trong bất cứ dự án nào bạn thích
b) Hibernate
Hibernate là 1 framework có rất nhiều các chức năng và câu lệnh, là
ORM Framework, Ánh xạ các thuộc tính của đối tượng và các cột
trong bảng của CSDL, làm việc với Java và không liên quan đến
CSDL, Free open-sources và dễ dàng áp dụng cho các hệ quản trị cơ
sở dữ liệu quan hệ khác nhau, Nó sử dụng API nền tảng như JDBC,
JTA, JNDI, Hỗ trợ đầy đủ các hàm truy vấn từ dạng object tới native
sql.
2.3. Frontend kết hợp giữa HTML + Css + Bootstrap + jQuery
a) HTML
HTML là chữ viết tắt của Hypertext Markup Language, là ngôn ngữ
được sử dụng rộng rãi nhất để viết các trang Web. Hypertext là cách
mà các trang Web (các tài liệu HTML) được kết nối với nhau. Và
như thế, đường link có trên trang Web được gọi là Hypertext.
Bây giờ, HTML đã được sử dụng rộng rãi để định dạng các
trang Web với sự giúp đỡ của các tag khác nhau có trong ngơn ngữ
b) Css
CSS viết tắt của từ trong tiếng Anh là Cascading Style Sheets,

là ngôn ngữ được tạo ra với mục đích nhằm miêu tả, thiết lập và định
dạng tài liệu và văn bản viết bằng ngơn ngữ HTML, XHTML. Ngồi
ra nó cịn hỗ trợ cả các ngơn ngữ XML, SVG, XUL
Nếu bạn mới tìm hiểu về css bạn chỉ cần hiểu đơn giản “CSS là ngôn
ngữ giúp bạn cắt giao diện website theo ý mình muốn“
c) Boostrap
Boostrap là một framework gồm HTML , CSS , JS giúp chúng ta
thiết kế website theo một chuẩn nhất định. Bootstrap định nghĩa các
thư viện có sẳn và ta chỉ việc dùng nó . Sử dụng Bootstrap giúp ta
13


tiết kiệm được thời gian phát triển web vì nó định nghĩa sẳn các chức
năng như Responsive (hiển thị được trên mobile , desktop , laptop ,
Ipad ) , các thành phần như button , text , form các animation (hiệu
ứng) đã được tích hợp trong Boostrap.
d) jQuery
jQuery là một thư viện JavaScript đa tính năng, nhỏ gọn, nhanh,
được tạo bởi John Resig vào năm 2006 với một phương châm hết
sức ý nghĩa: Write less, do more - Viết ít hơn, làm nhiều hơn.
jQuery đơn giản hóa việc duyệt tài liệu HTML, xử lý sự kiện, hoạt
ảnh và tương tác Ajax để phát triển web nhanh chóng. Các phân tích
web đã chỉ ra rằng, jQuery là thư viện JavaScriptđược triển khai
rộng rãi nhất.
2.4. MySQL
MySQL là một hệ thống quản lý cơ sở dữ liệu quan hệ mã nguồn mở
(RDBMS) dựa trên ngơn ngữ truy vấn có cấu trúc ( SQL) được phát
triển, phân phối và hỗ trợ bởi tập đoàn Oracle. MySQL chạy trên hầu
hết tất cả các nền tảng, bao gồm cả Linux , UNIX và Windows.
MySQL thường được kết hợp với các ứng dụng web.

SQL là ngôn ngữ phổ biến nhất để thêm, truy cập và quản lý nội dung
trong cơ sở dữ liệu. Nó được chú ý nhất vì khả năng xử lý nhanh, độ
tin cậy đã được chứng minh, dễ sử dụng và linh hoạt. MySQL là một
phần thiết yếu của hầu hết mọi ứng dụng PHP mã nguồn mở. Các ví
dụ điển hình cho các tập lệnh dựa trên PHP và MySQL là WordPress,
Joomla, Magento và Drupal.
2.5. Crawler data bằng jSoup
Jsoup là Java HTML Parser. Nói cách khac Jsoup là một thư viện Java
được sử dụng để phân tích tài liệu HTML. Jsoup cung cấp các API
dùng để lấy dữ liệu và thao tác dữ liệu từ URL hoặc từ tập tin HTML.
14


Nó sử dụng các phương thức giống với DOM, CSS , JQuery để lấy dữ
liệu và thao tác với dữ liệu.
Cụ thể, bạn có thể dùng Jsoup để lấy dữ liệu từ một trang web dạng
code HTML, sau đó, bạn có thể dùng những hàm mà Jsoup cung cấp
để lấy dữ liệu trong các class, các tag của file HTML đó. Dữ liệu bạn
muốn lấy có thể là link một bức ảnh trong thẻ <img>, link một liên kết
trong thẻ <a>, hay một đoạn text trong thẻ

,....

15


Chương 3: Kỹ thuật phân tích ứng dụng với JSOUP
3.1. Giới thiệu
Ngày nay khối lượng thông tin lưu trữ trên Internet ngày càng
tăng chóng mặt, việc trích rút được các thơng tin chính xác, gọn gẽ từ
kho dữ liệu trên là vơ cùng có ý nghĩa. Tuy nhiên đây là một bài tốn
tương đối phức tạp, để có thể làm được điều này trước tiên ta cần xác

định được phần nội dung chính của một trang Web bất kỳ. Trang web
bất kỳ ở đây có nghĩa là cấu trúc của trang Web không hề được biết
trước. Hơn nữa trang Web phải thực sự có nội dung chính nghĩa là nếu
chúng ta nhìn vào đó thì có thể biết được đâu là chủ đề của trang Web
thì việc xác định này mới có ý nghĩa. Vấn đề đặt ra đã làm nảy sinh
các nhu cầu nghiên cứu, xử lý trên khối lượng dữ liệu thông tin này
sao cho hiệu quả và nhanh chóng nhất. Đã có rất nhiều ứng dụng và
nhiều Tools ra đời như: Search Engine, RSS, Feedback, jSon, Jsoup...
Trong đó Tool Jsoup là một thời viện mã nguồn mở của Java.
Jsoup là một cơng cụ phân tích cú pháp mã HTML, cung cấp nhiều
Packages và nhiều API thuận tiện, an toàn để thao tác với HTML.
3.2. Định nghĩa Jsoup
Jsoup là Java HTML Parser. Nói cách khác Jsoup là một thư
viện được sử dụng để phân tích tài liệu HTML. Jsoup cung cấp các
API dùng để lấy dữ liệu và thao tác dữ liệu từ URL hoặc từ file
HTML. Nó sử dụng các phương thức giống với DOM, CSS, JQuery
để lấy dữ liệu và thao tác với dữ liệu. Jsoup thực hiện các đặc điểm kỹ
thuật HTML WHATWG, và phân tích cú pháp HTML tương tự như
DOM mà các trình duyệt hiện đại thực hiện như:
•

Phân tích cú pháp HTML từ một URL, file hoặc chuỗi.

16


•

Tìm và trích xuất dữ liệu sử dụng DOM hoặc CSS

•

Selector.
Xử lý các phần tử, thuộc tính, text của HTML.
Dữ liệu người dùng gửi được bảo vệ an toàn, chặn lỗ

•

hổng bảo mật (XSS) cho phép Hacker chèn mã độc vào
•

Web.
Xuất dữ liệu đầu ra HTML gọn gàng. 30 Jsoup được thiết
kế để làm việc với tất cả các phiên bản HTML trên thực
tế, từ cơ bản và xác nhận, tới không hợp lệ tag-soup,
Jsoup sẽ tạo ra một cây phân tích phù hợp.

3.3. Thành phần của Jsoup API
Jsoup có 6 Packages và nhiều Class khác nhau. Trong khung
khổ của luận văn này chỉ xin phép giới thiệu 3 lớp rất quan trọng đó là
các lớp:
•
•
•

org.jsoup.Jsoup;
org.jsoup.nodes.Document ;
org.jsoup.nodes.Element;

Sau đây là các mô tả kỹ thuật về các phương thức được cung

cấp bởi các lớp:
Jsoup.java
Phương thức

Mô tả

static Connection connect(String url)

Tạo và trả về đối tượng Connection kết nối
của URL
static Document parse(File in, String Phân tích 1 file tài liệu html với chỉ định mã
charsetName)
hóa
static Document parse(File in, String
Phân tích file tài liệu html với chỉ định mã
charsetName, String baseUri)
hóa, và baseUri
static Document parse(String html)
Phân tích mã html chuyển thành Document
static Document parse(String html, String Phân tích mã html với basiUri thành đối
baseUri)
tượng Document.
static Document parse(URL url, int
Phân tích một URL thành document.
timeoutMillis)
static String clean(String bodyHtml, Whitelist Trả về HTML an toàn từ HTML đầu vào,
whitelist)
bằng cách phân tích HTML đầu vào và lọc nó
qua một danh sách trắng của các thẻ và các
17

thuộc tính được phép.

Các phương thức của lớp Jsoup.java
Document.java
Phương thức
Element body()
Charset charset()
void charset(Charset charset)
Document clone()
Element createElement(String tagName)
static Document createShell(String baseUri)
Element head()
String location()
String nodeName()
Document normalise()
String outerHtml()
Document.OutputSettings outputSettings()
Document outputSettings(Document.OutputSet
tings outputSettings)
Element text(String text)
String title()
void title(String title)
boolean updateMetaCharsetElement()

Mô tả
Truy nhập vào phần tử body
Trả về charset được sử dụng trong tài liệu
này

Sét charset sử dụng cho tài liệu này.
Tạo một phiên bản copy của tài liệu này,
bao gồm copy cả các node con.
Tạo mới một phần tử
Tạo một tài liệu rỗng, thích hợp cho việc
thêm các phần tử vào nó.
Truy cập vào phần tử head.
Trả về URL của tài liệu này.
Trả về node name của node này.
Normalise the document.
Trả về outer HTML của node này.
Trả về các sét đặt đầu ra hiện tại của tài
liệu.
Sét đặt đầu ra cho tài liệu.

Sét đặt text của body của tài liệu này.
Trả về nội dung tiêu đề của tài liệu.
Sét đặt nội dung tiêu đề cho tài liệu.
Trả về true nếu phần tử với thông tin
charset trong tài liệu này đã bị cập nhập
thay đổi thông qua
Document.charset(Charset).
void updateMetaCharsetElement(boolean update) Sét đặt phần tử với thông tin charset trong
tài liệu này đã bị cập nhập thay đổi thông
qua Document.charset(Charset) hay
không.

Các phương thức của lớp Document.java
3.4. Các phương thức DOM
Jsoup có một vài phƣơng thức gần giống với các phương thức

trong mơ hình DOM (Phân tích tài liệu XML)

18


Phương thức

Mô tả

Element getElementById(String id)
Elements getElementsByTag(String tag)
Elements getElementsByClass(String
className)
Elements getElementsByAttribute(String key)
Elements siblingElements()
Element firstElementSibling()
Element lastElementSibling()

Tìm một phần tử cho bởi ID, bao gồm hoặc
bên dưới phần tử này.
Tìm các phần tử, bao gồm và cả đệ quy dưới
phần tử này, với tên thẻ chỉ định.
Tìm phần tử có classNam cho bởi tham số,
bao gồm hoặc dưới phần tử này.
Tìm kiếm các phần tử có thuộc tính cho bởi
tham số, khơng phân biệt chữ hoa chữ
thường.
Trả về các phần tử anh em với phần tử hiện
tại.
Trả về phần tử anh em đầu tiên của phần tử

hiện tại.
Trả về phần tử anh em cuối cùng của phần tử
hiện tại.

Các phương thức của DOM
Các phương thức lấy dữ liệu trên Element
Phương thức

Mô tả

String attr(String key)

Trả về giá trị thuộc tính cho bởi key của phần tử
này.

void attr(String key, String value)

Sét giá trị thuộc tính. Nếu thuộc tính đã tồn tại,
nó sẽ bị thay thế.

String id()

Trả về thuộc tính ID, nếu có, hoặc trả về string
rỗng nếu khơng có.

String className()

Trả về chuỗi chữ giá trị của thuộc tính "class", nó
có thể chứa nhiều class name, ngăn cách bởi
khoảng trắng. (Ví dụ <div class="header gray">

trả về " header gray")

Set<String> classNames()

Trả về tất cả các class names. Ví dụ class="header gray">, trả về tập hợp 2 phần tử
"header" và "gray".Chú ý, sửa đổi trên tập hợp
này không làm thay đổi thuộc tính của phần tử.
Muốn thay đổi sử dụng phƣơng thức
classNames(java.util.Set).

String text()

Trả về một văn bản kết hợp text của nó và tất cả
các text của tất cả các phần tử con.
19


void text(String value)

Gán text cho phần tử này.
Trả về String các HTML bên trong thẻ này. Ví dụ
<div>

a

trả về

a

.
(Node.outerHtml() sẽ

String html()

void html(String value)

trả về <div>

a

</div>.)

Sét Html bên trong phần tử này. Xóa hết các
HTML sẵn có bên trong.

Tag tag()

Trả về Tag cho phần tử này.

String tagName()

Trả về tên thẻ của phần tử này. Ví dụ div.

Các phương thức vận dụng của HTML
3.5. Các phương thức giống Css, jQuery
Các phần tử JSoup hỗ trợ cú pháp giống với CSS (hoặc JQuery)
giúp tìm kiếm các phần tử phù hợp, những hỗ trợ như vậy là rất mạnh
mẽ. Các phương thức lựa chọn có sẵn trong class Document, Element
hoặc Elements.
Selector Unit (Bộ lựa chọn)
Các Selector

Mơ tả

tagname

Tìm kiếm các phần tử theo tên thẻ. Ví dụ: a

ns|tag

Tìm kiếm các phần tử theo tên thẻ trong một khơng gian tên (namespace),
ví dụ fb|name nghĩa là tìm các phần tử <fb:name>

#id

Tìm kiếm phần tử theo ID, ví dụ #logo

.class:

Tìm kiếm các phần tử theo tên class, ví dụ .masthead

[attribute]

Các phần tử với thuộc tính, ví dụ [href]

20


[^attr]

Các phần tử với thuộc tính bắt đầu bởi, ví dụ [^data-] tìm kiếm các phần tử
với thuộc tính bắt đầu bởi data-

[attr=value]

Các phần tử với giá trị thuộc tính, ví dụ [width=500] (Cũng có thể sử dụng
dấu nháy kép)
Các phần tử với giá trị thuộc tính bắt đầu, kết thúc bởi, hoặc chứa giá trị, ví
dụ [href*=/path/]

[attr^=value],
[attr$=value],

[attr*=value]

Các phần tử với giá trị khớp với biểu thức chính quy, ví dụ
img[src~=(?i)\.(png|jpe?g)]

[attr~=regex]

Tất cả các phần tử, ví dụ *

*

Các Selector Unit
Selector kết hợp
Selector

Mơ tả

el#id

Phần tử với ID, ví dụ div#logo

el.class

Các phần tử với class, ví dụ div.masthead

el[attr]

Các phần tử với thuộc tính, ví dụ a[href]

Kết hợp bất kỳ

ví dụ a[href].highlight

ancestor child

(Phần tử tổ tiên- và hậu duệ) Các phần tử hậu duệ của một phần tử, ví
dụ. .body p tìm kiếm các phần tử p bất kỳ là finds p elements anywhere
under a block with class "body"

parent > child

Các phần tử con trực tiếp của phần tử cha, ví dụ div.content > p tìm kiếm
các phần tử p là con trực tiếp của div có class ='content'; và body > * tìm
kiếm các phần tử con trực tiếp của thẻ body

siblingA
siblingB

+

Tìm kiếm phần tử anh em B ngay phía trƣớc của phần tử A, ví dụ div.head
+ div

siblingA
siblingX

~

Tìm kiếm các phần tử anh em X trước phần tử A, ví dụ h1 ~ p

21


el, el, el

Nhóm nhiều Selector, tìm kiếm các phần tử khớp với một trong những
Selector; ví dụ div.masthead, div.logo

Các Selector kết hợp
Pseudo selectors
Selector
:lt(n)
:gt(n)
:eq(n)
:has(seletor)
:not(selector)
:contains(text)
:containsOwn(text)
:matches(regex)
:matchesOwn(regex)
Chú ý: Cách đánh chỉ số pseudo bắt đầu từ 0, phần tử đầu tiên có chỉ số 0, phần tử thứ 2 có chỉ số 1...

Các Pseudo Selector

22


Chương 4. Xây dựng ứng dụng
4.1. Tổng quan khảo sát ứng dụng liên quan
- Ứng dụng quản lí bán hàng thời trang Yame.vn

- Trước khi xây dựng website cần:
•
•

Xác định đối tượng khách hàng?
o Là các bạn trẻ thanh thiếu niên từ 12 đến 40 tuổi
Mục đích Website cần đạt được?
o Giới thiệu quảng bá cửa hàng. Cung cấp các sản phẩm về quần
áo thời trang mà các bạn trẻ ưa thích, làm rõ ràng các thơng tin

•

về mặt hàng cũng như giao diện tạo sự thu hút cho người dùng
Xác định rõ các mục chính website cần có?
o Trang chủ
o Quan lý tài khoản
o Danh mục
o Thông tin chi tiết mặt hàng
o Khuyến mãi
o Giỏ hàng
o Thanh toán
o Cổng quản lý

4.2. Xác định yêu cầu
4.2.1. Usecase
Sơ đồ Usecase tổng quan

23

24


4.2.2. Mô tả usecase
a) Actor
●

Quản lý (Admin): Quản lý các mặt hàng, danh mục, quản lý tài
khoản người dùng, quyền thống kê

●

Người dùng (User): Người dùng có thể đăng nhập, đăng xuất,
xem các mặt hàng, lựa chọn các thao tác quản lý giỏ hàng và
phương thức thanh toán

●

Khách (Guest): Khách có thể xem các mặt hàng và tạo tài
khoản để trở thành người dùng

b) Usecase
- Đặc tả usecase “Đăng nhập”
Usecase
Mô tả
Pre - Conditions
Post - Conditions
Main Flow

Alternative

Flow(s)

Đăng nhập
Đăng nhập người dùng vào hệ thống
Người dùng phải có tài khoản từ trước
Đăng nhập thành công với tài khoản người dùng
● Người dùng nhập tài khoản và mật khẩu
● Nhấn nút đăng nhập
● Hệ thống xác thực thông tin đăng nhập
● Nếu thông tin đăng nhập đúng thì cho phép đăng
nhập người dùng vào hệ thống
● Nếu thơng tin đăng nhập sai thì thơng báo lỗi ra màn
hình
●

Nếu nhập thiếu tài khoản hoặc mật khẩu, thông báo
lỗi

- Đặc tả usecase “Đăng ký”

25