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

Giới thiệuCông nghệ thông tin phát triển ngày càng hiện đại và đổi mớikhông ngừng, bằng việc chinh phục hết đỉnh cao này thành đỉnh caokhác.Mạng internet đang trở thành mạng truyền thong

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

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ớiThầy Mai Trọng Khang (Giảng viên môn đồ án 2) Thầy đã hướng dẫn, hỗ trợnhóm hoà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ữngkiế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ứunhững kiến thức mới Từ đó, nhóm vận dụng tối đa những gì đã thu thập được đểhoà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ómtá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 mongnhận được những sự góp ý từ phía các Thầy Cô nhằm hoà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ô!

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

………

………

………

………

………

………

………

………

………

MỤC LỤC

Lời cảm ơn 2

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

Chương 1 Giới thiệu đề tài 6

1.1 Giới thiệu 6

1.1.1 Nhu cầu người dùng 7

1.2 Tổng quan các vấn đề chính 7

1.2.1 Bài toán 7

1.2.2 Giới hạn phạm vi 9

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

1.2.4 Kết quả hướng tới 9

Chương 2 Các kiến thức công nghệ, nền tảng 11

2.1 Spring Web MVC 11

2.2 Hibernate Framework 11

a) ORM 11

b) Hibernate 12

2.3 Frontend kết hợp giữa HTML + Css + Bootstrap + jQuery 12

a) HTML 12

b) Css 12

c) Boostrap 12

d) jQuery 13

2.4 MySQL 13

2.5 Crawler data bằng jSoup 13

Chương 3: Kỹ thuật phân tích ứng dụng với JSOUP 15

3.1 Giới thiệu 15

3.2 Định nghĩa Jsoup 15

3.3 Thành phần của Jsoup API 16

3.4 Các phương thức DOM 18

3.5 Các phương thức giống Css, jQuery 20

Chương 4 Xây dựng ứng dụng 23

4.1 Tổng quan khảo sát ứng dụng liên quan 23

4.2 Xác định yêu cầu 23

4.2.1 Usecase 23

4.2.2 Mô tả usecase 25

4.2.3 Thiết kế dữ liệu (Sơ đồ ERD) 37

4.2.4 Giao diện 42

4.2.5 Các áp dụng chính của framework vào đề tài 50

Chương 5: Thử nghiệm, đánh giá 52

5.1 Môi trường thử nghiệm 52

5.2 Kết quả thử nghiệm 52

5.3 Đánh giá kết quả sản phẩm 52

Chương 6: Kết luận và hướng phát triển 54

6.1 Kết quả đạt được 54

6.2 Hướng phát triển 54

TÀI LIỆU THAM KHẢO: 55

Chương 1 Giới thiệu đề tài1.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ớikhông ngừng, bằng việc chinh phục hết đỉnh cao này thành đỉnh caokhác.Mạng internet đang trở thành mạng truyền thong có sức ảnhhưởng lớn nhất, không thể thiếu trong tất cả các hoạt động của conngười trong việc truyền tải và trao dổi dữ liệu.Không như ngày xưangày nay mọi việc liên quan đến thông tin ngày càng dễ dàng hơncho người sử dụng bằng việc kết nối internet và một dòng dữ liệutruy tìm thì ngay lập tức cả kho tài nguyên không chỉ trong nước màngoà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áttriể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 thongthườ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 conngười cũng được nâng cao và những nhu cầu đơn giản nhưng cũngrấ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ủacon 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 trangweb bán hang khác em xây dựng nên một website bán hang thờitrang 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ácshop ,các cửa hang hay các chợ truyền thống để mua và tìm kiếm sảnphẩm Thay vào đó chỉ việc ngồi ở nhà với chiếc máy tính đã kết nốiinternet mọi người có thể thảo sức tìm kiếm, lựa chọn sản phẩm áo

quần, mà mình yê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ánhà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ể đoán trước nội dung ví dụ về cáctrang web như là các trang web tin tức, các trang cộng đồng và thôngtin 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ờitrang nào đó mà chỉ có một vài sản phẩm thì họ sẽ thoát và tìm mộttrang 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 kinhdoanh trên ứng dụng hay website của họ luôn được cập nhật các mặthàng thường xuyên và các mặt hàng mới họ không cần phải tự taynhậ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 toá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ỗikhách hàng được cung cấp một giỏ hàng tương ứng Khách hàng tự dolự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 nhanhnhất Khách hàng có thể cập nhật các mặt hàng hay thêm mặt hàngvào giỏ hàng của mình nếu muốn mua, có thể xóa mặt hàng trong giỏ

hàng mà mình không muốn mua nữa Nếu khách hàng chấp nhậnthanh toán thì hệ thống yêu cầu nhập thông tin chi tiết của khách hàngnhư 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 Khikhách hàng đã hoàn thành quá trình đặt hàng với hệ thống thì kháchhàng tiến hành thanh toán, khách hàng có thể lựa chọn các hình thứcthanh toán trên website Sau khi hoàn thành quá trình thanh toánkhách hàng có thể thực hiện lại quá trình mua hàng của mình nếukhách hàng muốn mua thêm hàng hóa Khi đã đặt hàng rồi, kháchhàng có thể theo dõi trực tiếp tình trạng đơn đặt hàng của mình quawebsite 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ăngliên hệ khác hàng Hoạt động của nhà quản trị Có thể song song 2cá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àngcảm thấy an tâm khi mua hàng mà không bị một số lỗi làm gián đoạnquá 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 thamgia mua là ai và họ cần mua mặt hàng gì trong số khách hàng tham giavào việc mua hàng Và thống kê đơn hàng mua của họ, và doanh thuvớ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áchhà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àngcho khách Để thu hút khách hàng thường xuyên tham gia vào trangweb, nhà quản trị cần phải có các biện pháp để xúc tiến đăng tải các

chương trình khuyến mãi, giảm giá trong những dịp cần thiết để lôikéo khách hàng về phía mình, và có các ưu đãi với các khách hàngthườ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 haychưa giao Kiểm tra tình trạng đơn hàng và đánh dấu tương ứng vớimặt hàng đã giao hay chưa giao Lập các hóa đơn giao cho kháchhà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 đặthàng, tính toán doanh thu mỗi đơn hàng

● 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

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ậtkhẩu để người quản trị có thể truy cập vào hệ thông quản lí, thao tácvớ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

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 applicationnào, các extensions của Spring có thể được sử dụng cho việc xây dựngweb application trên nền tảng Java EE Spring framework cũng hướngtớ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 based…

POJO-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ìnhduyệt Dữ liệu được lấy ra từ Model là các POJO (Plain Old JavaObject) 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ácluồng nghiệp vụ của ứng dụng Cuối cùng là Controller, là các lớp đặcbiệt, có chứa các phương thức có khả năng nhận yêu cầu, xử lý yêucầ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ữ

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ônngữ 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ề ORMtrong 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ộttrong bảng của CSDL, làm việc với Java và không liên quan đếnCSDL, 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 nativesql

2.3 Frontend kết hợp giữa HTML + Css + Bootstrap + jQuery

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 Ngoà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 tathiết kế website theo một chuẩn nhất định Bootstrap định nghĩa cácthư viện có sẳn và ta chỉ việc dùng nó Sử dụng Bootstrap giúp ta

tiết kiệm được thời gian phát triển web vì nó định nghĩa sẳn các chứcnă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ântích web đã chỉ ra rằng, jQuery là thư viện JavaScriptđược triểnkhai 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áttriển, phân phối và hỗ trợ bởi tập đoàn Oracle MySQL chạy trên hầuhế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 dungtrong 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ộtphầ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 APIdùng để lấy dữ liệu và thao tác dữ liệu từ URL hoặc từ tập tin 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.

Cụ thể, bạn có thể dùng Jsoup để lấy dữ liệu từ một trang web dạngcode 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ạnmuốn lấy có thể là link một bức ảnh trong thẻ <img>, link một liên kếttrong thẻ <a>, hay một đoạn text trong thẻ <p>,

Chương 3: Kỹ thuật phân tích ứng dụng với JSOUP3.1 Giới thiệu

Ngày nay khối lượng thông tin lưu trữ trên Internet ngày càngtă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 toántươ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 webbất kỳ ở đây có nghĩa là cấu trúc của trang Web không hề được biếttrướ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 trangWeb thì việc xác định này mới có ý nghĩa Vấn đề đặt ra đã làm nảysinh các nhu cầu nghiên cứu, xử lý trên khối lượng dữ liệu thông tinnà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ềuPackages 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ácAPI dùng để lấy dữ liệu và thao tác dữ liệu từ URL hoặc từ fileHTML 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

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

 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àoWeb

 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 khungkhổ 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:

charsetName)

Phân tích 1 file tài liệu html với chỉ định mã hóa

static Document parse(File in, String

charsetName, String baseUri)

Phân tích file tài liệu html với chỉ định mã 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

Các phương thức của lớp Jsoup.java

Document.java

Phương thức Mô tả

Charset charset() Trả về charset được sử dụng trong tài liệu

này void charset(Charset charset) Sét charset sử dụng cho tài liệu này.

bao gồm copy cả các node con.

Element createElement(String tagName) Tạo mới một phần tử

static Document createShell(String baseUri) 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ó.

Document.OutputSettings outputSettings() Trả về các sét đặt đầu ra hiện tại của tài

liệu.

Document outputSettings(Document.OutputSet

tings outputSettings)

Sét đặt đầu ra cho tài liệu

Element text(String text) Sét đặt text của body của tài liệu này.

void title(String title) Sét đặt nội dung tiêu đề cho tài liệu.

boolean updateMetaCharsetElement() 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ứctrong mô hình DOM (Phân tích tài liệu XML)

Element getElementById(String id) 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.

Elements getElementsByTag(String tag) 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.

Elements getElementsByClass(String

className)

Tìm phần tử có classNam cho bởi tham số, bao gồm hoặc dưới phần tử này

Elements getElementsByAttribute(String key) 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.

Elements siblingElements() Trả về các phần tử anh em với phần tử hiện

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")

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

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, Elementhoặ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]

[^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)

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

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

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 Mô tả

:lt(n) Tìm kiếm các phần tử có chỉ số anh em (vị trí trong cây DOM quan hệ

với phần tử cha của nó) nhỏ hơn n; ví dụ td:lt(3) :gt(n) Tìm kiếm các phần tử có chỉ số anh em lớn hơn n, ví dụ div p:gt(2)

:eq(n) find elements whose sibling index is equal to n; e.g form input:eq(1) :has(seletor) Tìm kiếm các phần tử chứa các phần tử khớp với selector; ví dụ

div:has(p) :not(selector) Tìm kiếm các phần tử không khớp với selector; ví dụ div:not(.logo) :contains(text) Tìm kiếm các phần tử chứa đoạn text đã cho Tìm kiếm không phân biệt

chữ hoa chữ thường; ví dụ p:contains(jsoup) :containsOwn(text) Tìm kiếm các phần tử trực tiếp chứa đoạn text đã cho

:matches(regex) Tìm kiếm các phần tử mà text khớp với biểu thức chính quy chỉ định; ví

dụ div:matches((?i)login) :matchesOwn(regex) Tìm kiếm các phần tử mà text của nó khớp với biểu thức chính quy chỉ

định.

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

Chương 4 Xây dựng ứng dụng4.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

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

b) Usecase

- Đặc tả usecase “Đăng nhập”

Pre - Conditions Người dùng phải có tài khoản từ trước

Post - Conditions Đăng nhập thành công với tài khoản người dùng

● 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 đăngnhậ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ànhình

Usecase Đăng ký

Pre - Conditions

Post - Conditions Người dùng có tài khoản riêng

● Nhập tài khoản mật khẩu mong muốn sau đó chọnOK

Alternative

Flow(s)

● Nếu để trống, hiện thông báo

- Đặc tả usecase “Xem thông tin mặt hàng”

Pre - Conditions

Post - Conditions

● Các mặt hàng sẽ hiển thị lên màn hìnhAlternative

Flow(s)

- Đặc tả usecase “Xem chi tiết sản phẩm”

Mô tả Hiển thị các thông tin chi tiết về một mặt hàng nào đó

Pre - Conditions Mặt hàng tồn tại trên hệ thống

Post - Conditions

● Hệ thống trả về màn hình chi tiết mặt hàng đóAlternative

Flow(s)

- Đặc tả usecase “Xem lại giỏ hàng”

Usecase Xem lại giỏ hàng

chọnPre - Conditions Đã thêm hàng vào giỏ

Post - Conditions

● Chọn vào ô hiển thị giỏ hàng

● Hệ thống hiển thị các mặt hàng ở bên trong đóAlternative

Flow(s)

● Nếu hệ thống xảy ra lỗi thì hiển thị thông báo

- Đặc tả usecase “Xóa giỏ hàng”

Pre - Conditions Giỏ hàng đã có hàng

Post - Conditions Giỏ hàng trở về 0

● Lựa chọn xóa giỏ hàng để chuyển về giỏ hàng banđầu

Alternative

Flow(s)

- Đặc tả usecase “Thêm giỏ hàng”

với mục đích có thể mua nhiều mặt hàngPre - Conditions Bên trong giỏ hàng là 0

Post - Conditions