THUC_TAP_CO_SO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP CƠ SỞ Đề tài XÂY DỰNG WEBSITE BÁN MỸ PHẨM TRỰC TUYẾN CHO CỬA HÀNG MỸ PHẨM LINH COSMETIC Sinh viên thực hiện[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP CƠ SỞ

Đề tài:

XÂY DỰNG WEBSITE BÁN MỸ PHẨM TRỰC TUYẾN

CHO CỬA HÀNG MỸ PHẨM LINH COSMETIC

Sinh viên thực hiện : Nguyễn Văn Linh

Giảng viên hướng dẫn : Th.S Nguyễn Thuý Lan

Hà Nội ngày 25 tháng 4 năm 2022

LỜI CẢM ƠN

Trong thời gian học tập tại KHOA CÔNG NGHỆ THÔNG TIN – Trường Đạihọc Công Nghiệp Hà Nội, được sự giúp đỡ của các thầy giáo, cô giáo em đã hoànthành bài báo cáo thực tập chuyên ngành

Hoàn thành bài báo cáo này, cho phép em được bày tỏ lời cảm ơn sâu sắc tới cácthầy, cô giáo trong Khoa Công nghệ thông tin – Trường Đại học Công Nghiệp HàNội Đồng thời em xin gửi lời cảm ơn đặc biệt về sự hướng dẫn tận tình của cô giáo –ThS Nguyễn Thuý Lan đã giúp đỡ em trong suốt quá trình thực hiện bài báo cáo này.Tuy nhiên, vì thời gian có hạn cũng như kiến thức và kinh nghiệm thực tiễn của

em còn nhiều hạn chế nên em không thể tránh khỏi những thiếu xót và cũng như chưaphát huy hết những ý tưởng , khả năng hỗ trợ của ngôn ngữ và kỹ thuật lập trình và đềtài Trong quá trình xây dựng website, không thể tránh khỏi những sai xót Vì thế emrất mong nhận được sự góp ý của các thầy ,cô và các bạn để đề tài của em được hoànchỉnh hơn

Em xin chân thành cảm ơn!

Hà Nội, ngày 25 tháng 4 năm 2022

Sinh viên thực hiện

Nguyễn Văn Linh

MỤC LỤ

LỜI CẢM ƠN 1

MỤC LỤC 2

MỞ ĐẦU 4

TỔNG QUAN VỀ ĐỀ TÀI 5

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 7

1.1 Tìm hiểu về Website 7

1.1.1 Khái niệm Website 7

1.1.2 Phân loại Website 7

1.2 Tìm hiểu về HTML 8

1.2.1 Tổng quan về HTML 8

1.2.2 Các khái niệm cơ bản Trong HTML 9

1.3 Tìm hiểu về CSS 16

1.3.1 Tổng quan về CSS 16

1.3.2 Các cách áp dụng CSS 16

1.3.3 Cú pháp CSS 18

1.3.4 Một số quy tắc trong CSS 19

1.3.5 Đơn vị đo lường trong CSS 20

1.3.6 Selector trong CSS 21

1.3.7 Các thuộc tính CSS định dạng văn bản 22

1.3.8 Ưu điểm của CSS 23

1.4 Tìm hiểu về javascript 23

1.4.1 Giới thiệu ngôn ngữ JavaScript 23

1.4.2 Đưa mã Javascript vào trang HTML 24

CHƯƠNG 2 : KHẢO SÁT, PHÂN TÍCH THIẾT KẾ HỆ THỐNG 26

2.1 Khảo sát hệ thống 26

2.1.1 Tổng quan về cửa hàng mỹ phẩm Linh Cosmetic 26

2.1.2 Quy trình bán hàng của hệ thống cũ 27

2.1.3 Đánh giá hiện trạng và cách khắc phục 28

2.1.4 Bài toán đặt ra 29

2.1.5 Mục tiêu xây dựng hệ thống 29

2.2 Phân tích hệ thống 30

2.2.1 Xác định tác nhân và vai trò tác nhân 30

2.2.2 Biểu đồ 31

2.2.3 Đặc tả kịch bản 33

2.2.4 Biểu đồ lớp chi tiết 38

2.2.5 Biểu đồ hoạt động 39

2.2.6 Biểu đồ trình tự 46

2.2.7 Biểu đồ hoạt động 50

CHƯƠNG 3: XÂY DỰNG WEBSITE 59

3.1 Giao diện trang chủ 59

3.2 Form nhập thông tin địa chỉ 59

3.3 Giao diện đăng nhập 60

3.4 Giao diện đăng ký tài khoản 60

3.5 Giao diện sản phẩm deal hot 61

3.6 Giao diện sản phẩm mới 61

3.7 Giao diện sản phẩm trang điểm môi 62

3.8 Giao diện sản phẩm trang điểm mắt 62

3.9 Giao diện sản phẩm trang điểm mặt 63

3.10 Trang giỏ hàng 63

3.11 Thông tin cuối trang 64

KẾT LUẬN 65

TÀI LIỆU THAM KHẢO 66

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 67

MỞ ĐẦU

Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trởthành một công cụ không thẻ thiếu, là nên tảng chính cho sự truyền tải , trao đổi thôngtinn trên toàn cầu Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng chongười sử dụng : chỉ cần có một máy tính hoặc 1 chiếc điện thoại thông minh có kết nốiinternet và một dòng dữ liệu truy tìm thì gần như lập tức cả thế giới vẻ vấn đẻ màbạn đang quan tâm sẽ hiện ra có đầy đủ thông tin, hình ảnh…

Cùng với đó khi công nghệ ngày càng phát triển , con người có trong tay công cụhữu hiệu làm tăng năng suất lao động và hiệu quả công việc.Chính vì vậy mà thươngmại điện tử là một trong những công cụ làm nên điều đó BiII Gate đã từng nói: “Năm2015,bạn có 2 lựa chọn: một là kinh doanh cùng internet, 2 là bạn không kinh doanhnữa”.Thương mại điện tử đã trở thành một phương tiện giao dịch quen thuộc của cáccông ty thương mại lớn trên thế giới Nó đang có tốc độ phát triển rất mạnh.Và hầu hếtcác công ty bán hàng hiện nay đều là các công ty thương mại điện tử và mua sắm quamạng đã trở thành thói quen hàng ngày của nhiều người

Giờ đây, thương mại điện tử đã khẳng định được vai trò xúc tiến và thúc đẩy sựphát triển của doanh nghiệp Đối với một cửa hàng hay một công ty , việc quảng bá vàgiới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ

là cẩn thiết Vậy phải quảng bá thế nảo đó là xây dựng được một Website cho cửa hàngcủa mình quảng bá tất cả các sản phẩm của mình bán

Để hiểu kỹ hơn về một website thương mại điện tử nên em chọn đề tài :“Xây dựng website bán mỹ phẩm cửa hàng mỹ phẩm LinhCosmetic” Sử dụng ngôn ngữ

HTML,CSS,JAVASCRIPT và công cụ hỗ trợ lập trình Visual stadio code

TỔNG QUAN VỀ ĐỀ TÀI

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

Như chúng ta cũng thấy trong thị trường hiện nay thì việc cạnh tranh về kinhdoanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công tylớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất

So với kinh doanh truyền thống thì TMDT chi phí thấp hơn, hiệu quả đạt cao hơn.Hơn thế nữa, với lợi thế của công nghệ Internet nên việc truyền tải thông tin về sảnphẩm nhanh chóng, thuận tiện Kết hợp với bộ phận giao hàng tận nơi, là thông quabưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình nàyphát triển

Biết được những nhu cầu đó chương trình “Xây dựng website bán mỹ phẩm cửahàng mỹ phẩm LinhCosmetic” được demo xây dựng trên nề tảng HTML,CSS vàJAVASCRIPT nhằm để đáp ứng cho mọi người tiêu dùng trên toàn quốc và thôngqua hệ thống Website này họ có thể đặt mua các mặt hàng hay sản phẩm cần thiết

Do đó, với sự ra đời các website bán hàng , mọi người có thể mua mọi thứhàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua Trên thế giới có rấtnhiều trang website bán hàng trực tuyến nhưng vẫn chưa được phổ biến rộng rãi Vàkhái niệm thương mại điện tử còn khá xa lạ Trước thực tế đó em đã chọn đề tài:

“Xây dựng website bán mỹ phẩm cửa hàng mỹ phẩm LinhCosmetic” cho thực tập

cơ sở của mình

2 Mục đích, ý nghĩa chọn đề tài

Khảo sát hệ thống theo yêu cầu của các cá nhân, cơ quan, công ty… Việc bánhàng đòi hỏi cần phải có tư duy, đầu óc kinh doanh và khả năng nhạy bén nắm bắt thịtrường Một cửa hàng bán các mặt hàng không cần nhiều nhân viên, khách hàngkhông cần trực tiếp đến mua hàng mà có thể tại nhà dùng vài cái click chuột thì có thể

có được sản phẩm mình cần

HTML VÀ CSS là một hệ thống quản trị nội dung giúp bạn thực hiện các

website động một cách nhanh chóng và dễ dàng Là hệ thống quản trị nội dung mãnguồn mở số 1 thế giới hiện nay Linh hoạt, đơn giản, thanh nhã, tính tuỳ biến rấtcao và cực kỳ mạnh mẽ, đó là những gì có thể nói về Joomla! Được sử dụng ở trêntoàn thế giới từ những trang web đơn giản cho đến những ứng dụng phức tạp Việccài đặt Joomla! rất dễ dàng, đơn giản trong việc quản lý và đáng tin cậy

3 Phương pháp nghiên cứu

- Sử dụng ngôn ngữ HTML và CSS để xây dựng trang wed tĩnh

4 Phạm vi , đối tượng đề tài.

Demo xây dựng wed bán mỹ phẩm , và một số hàng phụ kiện khác

Trong thời đại ngày nay đang càng ngày càng phát triển , việc ứng dụng và hoạt động

“website bán hàng” đã mang lại nhiều ý nghĩa như:

- Đỡ tốn thời gian cho người tiêu dung cũng như nhà quản lý trong việc thamgiá và hoạt động mua bán hàng

- Giúp người tiêu dùng biết được giá cả và hình ảnh mặt hàng một cách chínhxác

- Giúp nhà quản lý dễ dàng quản lý sản phẩm

- Nhà quản lý có thể thống kê các sản phẩm bán chạy một cách nhanh nhấtgiúp cho hoạt động sản xuất kinh doanh của mình trở nên tốt hơn

5 Ý nghĩa thực tiễn của đề tài.

5.1 Đối với người sử dụng hệ thống wedsite

Có thể tra cứu ,thông tin sản phẩm , nhà sản xuất , thông tin khách hàng Mua sản phẩm dễ dàng , ít tốn kém , hàng hóa chất lượng , phục vụ tận tình từnhân viên website

5 2 Đối với cá nhân sinh viên

Tạo ra demo Wedsite thân thiện , nhanh và hiệu quả hơn trong việc quản

lý ,hay bán sản phẩm bằng thủ công Hoàn thành thực tập cơ sở nâng cao trình

độ của bản thân

Nội dung bao gồm có 4 chương :

Chương 1 : Cơ sở lý thuyết

Chương 2 : Khảo sát,phân tích thiết kế hệ thống

Chương 3 : Xây dựng website

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Tìm hiểu về Website

1.1.1 Khái niệm Website

Website là một tập hợp các trang web (web pages) bao gồm văn bản, hìnhảnh, video, flash ,…mà thường chỉ nằm trong một tên miền (domain name) hoặctên miền phụ (subdomain) Một trang wb bao gồm nhiều tệp tin HTLM hoặcXHTML có thể thể truy nhập bằng giao thức HTTP , HTTPS

Website có thể xây dựng từ các tệp tin HTML(trang mạng tĩnh ) hoặc vậnhành bằng các CMS chạy trên máy chủ ( trang mạng động) Website có thể đượcxây dựng bằng nhiều ngôn ngữ khác nhau như : PHP, NET , JAVASCRIPT,RUBY AND RAILS,…

Hiện nay , để một website có thể vận hành trên môi trường www, cần bắtbuộc phải có 3 phần chính :

- Tên miền (Domain)

- Hosting

- Mã nguồn(Source code)

1.1.2 Phân loại Website

Có 2 loại wbsite là : Website tĩnh và Website động

1.1.2.1 Website tĩnh

- Website tĩnh là những web chỉ bao gồm các trang web tĩnh và không có cơ

sở dữ liệu đi kèm Tức là người dùng không có khả năng tương tác , khôngthể chỉnh sửa hoặc thay đổi dữ liệu được

 Ưu điểm :

 Thiết kế đồ hoạ đẹp

 Tốc độ truy cập nhanh

 Thân thiện hơn với các máy tìm kiếm (search engine)

 Chi phí đầu tư thấp

 Nhược điểm :

 Khó khăn trong việc thay đổi và cập nhật thông tin

 Thông tin không có tính linh hoạt, không thân thiện với ngườidùng

 Khó tích hợp, nâng cấp, mở rộng

1.1.2.2 Website động

- Website động là web có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm pháttriển web , hệ thống quản lý nội dung nên người dùng có thể chỉnh sửa hoặcthay đổi nội dung được

Thông tin hiển thị trên web động được gọi là một cơ sở dữ liệu khi ngườidùng truy vấn tới 1 tráng web

- Web động được phát triển bằng các ngôn ngữ lập trìnhPHP,ASP,ASP.net,Java,CGI ,Perl,… và sử dụng các cơ sở dữ liệu nhưAccess, My SQL , MS SQL , Oracle , DB2

 Ưu điểm :

 Dễ dàng quản lý nội dung

 Dễ dàng nâng cấp và bảo trì

 Tương tác với người sử dụng cao

 Có thể xây dựng được web lớn

sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp

Tên gọi ngôn ngữ đáng dấu siêu văn bản có ý nghĩa như sau:

Đánh dấu(Markup): HTML là ngôn ngữ của các thẻ đánh dấu(tag) Các thẻ này xácđịnh cách thức trình bày đoạn văn bản tương ứng trên màn hình

Ngôn ngữ(Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ lậptrình, tuy nhiên đơn giản hơn Nó có cú pháp chặt chẽ để viết các lệnh thực hiện việc

trình diễn văn bản Các từ khóa có ý nghĩa xác định được cộng đồng Internet thừanhận và sử dụng lại Ví dụ b= bold, ul= unordered list,…

Văn bản(Text): HTML đầu tiên và trước hết là để trình bày văn bản và dựa trên nềntảng là một văn bản Các thành phần khác như hình ảnh, âm thanh, hoạt hình đều gắnvào một đoạn văn bản nào đó

Siêu văn bản(HyperText): HTML cho phép liên kết nhiều trang văn bản

Rải rác khắp mọi nơi trên Internet Nó có tác dụng che dấu sự phức tạp của Internetđối với người sử dụng Người dùng Internet có thể đọc văn bản mà không cần biết đếnvăn bản đó nằm ở đâu, hệ thống được xây dựng phức tạp như thế nào, HTML thực sự

đã vượt ra ngoài khuôn khổ khái niệm văn bản cổ điền

1.2.2 Các khái niệm cơ bản Trong HTML

Định nghĩa Các thẻ HTML cơ bản

Thẻ <head> </head>: Tạo đầu mục trang

Thẻ <title> </title>: Tạo tiêu đề trang trên thanh tiêu đề, đây là thẻ bắt

buộc Thẻ title cho phép bạn trình bày chuỗi trên thanh tựa đề của trang Web mỗikhi trang Web đó được duyệt trên trình duyệt Web

Thẻ <body> </body>: Tất cả các thông tin khai báo trong thẻ <body> đều có

thể xuất hiện trên trang Web Những thông tin này có thể nhìn thấy trên trangWeb

Các thẻ định dạng khác.

Thẻ <p>…</p>:Tạo một đoạn mới Thẻ <font> </font>: Thay đổi phông

chữ, kích cỡ và màu kí tự…

Ví dụ:

Kết quả hiển thị trong cửa sổ trình duyệt:

Thẻ liên kết <a> </a>: Là loại thẻ dùng để liên kết giữa các trang Web hoặc liên kết

đến địa chỉ Internet, Mail hay Intranet(URL) và địa chỉ trong tập tin trong mạng cục bộ(UNC)

Cú pháp để tạo một thẻ anchor

<a href= “url”>na la</a>

Thẻ <a> được sử dụng để tạo mộ t điểm neo và liên kết bắt đầu từ đó, thuộc tínhhref được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ na la xuất hiện ởgiữa hai tag < và > sẽ được hiển thị dưới dạng siêu liên kết

Ta dùng cặp thẻ <a> </a> để làm công việc liên kết các trang web với nhau

Thuộc tính của thẻ <a> gồm:

href: quy định địa chỉ mà url trỏ tới

target: qui định liên kết sẽ được mở ra ở đâu

_blank: cửa sổ mới

_self: trang hiện tại

Với thuộc tính này, có thể xác định liên kết đến tài liệu khác sẽ được mở ra ở đâu Dòng code dưới đây sẽ mở tài liệu được liên kết trong một cửa sổ trình duyệt mới

Ví dụ:

Thẻ định dạng bảng <table>…</table>: Đây là thẻ định dạng bảng trên trang Web.

Sau khi khai báo thẻ này, bạn phải khai báo các thẻ hàng <tr> và thẻ cột <td> cùng vớicác thuộc tính của nó

Thẻ hình ảnh <img>: Cho phép bạn chèn hình ảnh vào trang Web Thẻ này

thuộc loại thẻ không có thẻ đóng

Thuộc tính của thẻ <img> gồm:

src: chỉ ra đường dẫn file ảnh

alt: để mô tả nội dung sẽ hiển thị khi đường dẫn tới file ảnh không tồn tại

title = “Tiêu đề” : nội dung hiển thị khi đưa trỏ chuột lên hình

width, height: độ rộng và độ cao của file được tính bằng excel, nếu không có width và height thì mặc định sẽ lấy kích thước gốc của file

Thuộc tính bgcolor thiết lập hình nền một màu Giá trị của thuộc tính này

là hệ số hexadecimal, một giá trị màu RGB hoặc một tên màu

<body bgcolor=“#000000”>

Các thẻ định dạng text (HTML Text Formatting)

<b> (bold): Chữ in đậm

<u> (Underline): Chữ gạch chân

<i> (italic): Chữ in nghiêng

<big> (Big): Chữ lớn hơn

<sub> (Subscrip) Chỉ số dưới

<sup> (Superscript): Chỉ số trên

<strong> In đậm (nhấn mạnh <b>)

<em> (emphasized): Chữ in nghiêng (nhấn mạnh hơn <i>)

Ví dụ:

Kết quả hiển thị trong cửa sổ trình duyệt:

Các thẻ Input: Thẻ Input cho phép người dùng nhập dữ liệu hay chỉ thị thực thi một

hành động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit, button,reset, checkbox, radio, image

Thẻ Textarea: < Textarea> < \Textarea>: Thẻ Textarea cho phép người

dùng nhập liệu với rất nhiều dòng Với thẻ này bạn không thể giới hạn chiều dài lớnnhất trên trang Web

Thẻ Select: Thẻ Select cho phép người dùng chọn phần tử trong tập phương thức đã

được định nghĩa trước Nếu thẻ Select cho phép người dùng chọn một phần tử trongdanh sách phần tử thì thẻ Select sẽ giống như combobox Nếu thẻ Select cho phépngười dùng chọn nhiều phần tử cùng một lần trong danh sách phần tử, thẻ Select đó làdạng listbox

Thẻ Form: Khi bạn muốn submit dữ liệu người dùng nhập từ trang Web phía Client

lên phía Server, bạn có hai cách để làm điều nàu ứng với hai phương thức POST vàGET trong thẻ form Trong một trang Web có thể có nhiều thẻ Form khác nhau, nhưngcác thẻ Form này không được lồng nhau, mỗi thẻ form sẽ được khai báo hành động(action) chỉ đến một trang khác

Các thẻ tiêu đề (Headings)

Thường được sử dụng để thế hiện cho tiêu đề của bài viết, bản tin hay các mục nhấnmạnh

1.3 Tìm hiểu về CSS

1.3.1 Tổng quan về CSS

CSS – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ

HTML và XHTML.CSS là viết tắt của Cascading Style Sheets CSS được hiểu mộtcách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước,màu sắc ) cho một tài liệu Web

Tác dụng:

Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu ), khiến mã nguồncủa trang web đƣợc gọn gàng hơn, tách nội dung của trang Web và định

dạng hiển thị, dễ dàng cho việc cập nhật nội dung

Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh phải lặp lại việc định dạng cho các trang Web giống nhau

Để cho thuận tiện bạn có thể đặt toàn bộ các thuộc tính của thẻ vào trong một fileriêng có phần mở rộng là ".css" CSS nó phá vỡ giới hạn trong thiết kế Web,

bởi chỉ cần một file CSS có thể cho phép bạn quản lí định dạng và layout trên nhiềutrang khác nhau Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính của một sốthẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác

Có thể khai báo CSS bằng nhiều cách khác nhau Bạn có thể đặt đoạn CSS của bạnphía trong thẻ <head> </head>, hoặc ghi nó ra file riêng với phần mở rộng ".css",ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt Tuy nhiên tùytừng cách đặt khác nhau mà độ ƣu tiên của nó cũng khác nhau Mức độ ưu tiên củaCSS sẽ theo thứ tự sau

được định nghĩa giữa thẻ mở và thẻ đóng Khi hiển thị các trang, chỉ tài liệu nào cónhúng STYLE mới được tác động

Ví dụ sau minh họa cho cách sử dụng phần tử Style:

- Thuộc tính Style:

Thuộc tính Style được sử dụng để áp dụng style sheet cho từng phần tử Một stylesheet có thể nhỏ như một luật Khi sử dụng thuộc tính Style ta có thể bỏ qua phần

tử Style và đặt khai báo trực tiếp vào thuộc tính Style trong thẻ mở của phần tử

Ví dụ sau là cách sử dụng thuộc tính Style:

Rõ ràng là chúng ta chỉ nên dùng kiểu này khi muốn thay đổi kiểu cho một phần tử đặcbiệt nào đó Nếu ta có dự định áp dụng cùng kiểu trên khắp tài liệu thì lúc ấy đâykhông phải là cách hay

- Phần tử link

Nếu ta muốn sử dụng phần tử Link, thì style sheet của ta phải là một tài liệu riêng Sau

đó chúng ta phải thêm địa chỉ web của style sheet vào Chẳng hạn:

<LINK REL=stylesheet HREF=”stylesmine.css” TYPE=”text/css” >

Thuộc tính <rel=stylesheet> phải được khai báo, nếu không thì trình duyệt sẽ

không tải được style sheet.

Basic Selector: sử dụng chính thẻ của HTML để mô tả trong CSS Trong ví dụ

trên là định nghĩa cho các thẻ <h1> trong HTML Điều đó có nghĩa là tất cả các thẻ

<h1> trong tài liệu HTML sẽ được chuyển sang màu xanh đậm (nany)

Id: được sử dụng để đặt tên cho một định dạng cụ thể nào đó sẽ được dùng

trong html Thông thường những thành phần định dang id này được dùng cho một đốitượng hoặc một nhóm đối tượng cụ thể trong trang HTML

Class: được định nghĩa cho những khối định dạng chung được sử dụng nhiều

Style Sheet: Là một danh mục các quy tắc kiểu và có thể nhúng vào bên trong tàiliệu HTML Trong trường hợp đó, nó được gọi là stylesheet nhúng Stylesheet cũng

có thể được tạo ra bằng một file bên ngoài và được liên kết với tài liệu HTML

Các quy tắc (Rules): Bảng kiểu có thể có một hay nhiều quy tắc Phần đầu của quy tắcgọi là bộ chọn (Selector) Mỗi bộ chọn có các thuộc tính và các giá trị liên quan đến

nó

RuleSelector {Declarations property:value; property:value;…}

Phần của quy tắc được kèm theo trong phạm vi các dấu ngoặc móc được gọi làkhai báo Khai báo có hai phần, phần trước dấu hai chấm là thuộc tính và phần nằmsau dấu hai chấm là giá trị của thuộc tính đó

Các khai báo được phân cách bởi dấu chấm phẩy Ta nên đặt dấu chấm phẩy sau lần khai báo cuối cùng

Chẳng hạn như: H1 {color:blue}

Ở đây, H1 là bộ chọn, color:blue là khai báo Trong phạm vi khai báo:

{property: Value}

Color là thuộc tính, Blue là giá trị

Mỗi quy tắc có thể tách rời nhau trong phạm vi thẻ STYLE

1.3.5 Đơn vị đo lường trong CSS

Về đơn vị, thì trong CSS có hai loại đơn vị là Absolute Units (đơn vị tuyệt đối)

và Relative Units (đơn vị tương đối) Trong đó:

Đơn vị tuyệt đối

Là các đơn vị vật lý đã được định nghĩa sẵn và đại diện cho các đơn vị đo lường vật lý.Các đơn vị này không bị phụ thuộc và không hề thay đổi bởi bất cứ tác động nào Ví

dụ như đơn vị mét, xen-ti-mét, là các đơn vị tuyệt đối

Các đơn vị tuyệt đối sử dụng trong CSS gồm có:

- px: Đây là một đơn vị được sử dụng trên màn hình hiển thị, một px sẽ tương đươngvới một điểm ảnh trên màn hình hiển thị Chất lượng của điểm ảnh sẽ hoàn toàn khácnhau trên một số thiết bị, ví dụ như một điểm ảnh trên các thiết bị in ấn sẽ khác vớimột điểm ảnh trên các thiết bị màn hình độ

phân giải thấp

- pt: Đơn vị point và cứ 1 ich = 72pt

Đơn vị tương đối

Là các đơn vị đo lường được sử dụng trong CSS ở mức tương đối, nghĩa là nó có thể

sẽ được thay đổi bởi các thành phần khác ví dụ như thay đổi phụ thuộc vào kích thướcmàn hình

Các đơn vị tương đối được sử dụng trong CSS gồm có:

- % (percentages): Là đơn vị tham chiếu tỷ lệ so với một phần tử mẹ của nó dựavào kích thước Ví dụ bạn có một cái khung với kích thước là 500px và khungbên trong có kích thước là 50% thì nó sẽ là 250px Nếu bạn sử dụng đơn vịphần trăm này để gán kích thước cho thẻ <html> trên website thì nó sẽ thay đổitheo kích thước màn hình hoặc/cửa sổ website

- em : Là đơn vị tham chiếu tỷ lệ so với phần tử mẹ của nó dựa vào giá trị củathuộc tính font-size Ví dụ bạn đặt cho font-size cho phần tử mẹ của nó là 19pxthì nếu bạn sử dụng em trong khu vực phần tử đó thì 1em = 19px

- rem : Là đơn vị tham chiếu tỷ lệ so với phần tử gốc của một website dựa vàothuộc tính font-size, nghĩa là sẽ biến đổi tùy theo giá trị của thuộc tính font-sizetrong thẻ <html> Cũng như em, nếu bạn khai báo font-size cho thẻ <html> là16px thì 1rem = 16px

Selector lớp có dấu chấm đứng trước gọi là ký tự cờ, theo sau là tên lớp do

chúng ta chọn Tốt hơn hết nên chọn tên lớp theo mục đích của chúng chứ không nênchọn theo tên mô tả màu sắc hay kiểu

Ví dụ:

HTML:

Selector ID:

Selector ID sử dụng thuộc tính ID của phần tử HTML Selector ID được dùng

để áp dụng một kiểu vào riêng một phần tử nào đó trên trang web Chẳng hạn, ta cóthể sử dụng một selector ID để áp dụng một kiểu đặc biệt nào đó cho phần tử <H2>.Điều đó không có nghĩa là một kiểu tương tự được áp dụng cho một phần tử <H2>khác trên trang đó, nếu không được xác định Tương tự với việc sử dụng kiểu nộituyến mà nhờ đó có thể áp dụng riêng cho một phần tử nào đó Selector ID được bắtđầu bằng dấu thăng (#)

text-align: Căn chỉnh chữ theo chiều ngang.

text-transform: Xác định có viết hoa văn bản hay không

text-indent: Xác định thụt dòng đầu tiên của văn bản

text-shadow: Xác định đổ bóng đi kèm chữ

letter-spacing: Khoảng cách giữa các ký tự trong văn bản với nhau

word-spacing: Khoảng cách giữa các từ trong văn bản với nhau

line-height: Chiều cao của các dòng trong văn bản

white-space: Xác định cách xử lí ký tự khoảng trắng trong thành phần

word-break: Xác định các từ sẽ được ngắt ra sao khi đến cuối mỗi dòng

word-wrap: Xác định các từ dài có bị ngắt và chuyển xuống dòng tiếp theohay không

1.3.8 Ưu điểm của CSS

- CSS có thể tách riêng phần định dạng ra khỏi nội dung một trang web, do đó sẽrất thuận tiện khi muốn thay đổi giao diện của một trang web

- CSS là một sợi chỉ xuyên suốt trong quá trình thiết kế một website bởi vì nócho phép nhà thiết kế kiểm soát toàn bộ giao diện, kiểu cách và sự sắp dặt của nhiềutrang hay nhiều đối tượng một lần định nghĩa Để thay đổi tổng thể hay nhiều đốitượng có cùng Style, chỉ cần thay đổi Style đó và lập tức tất cả các thành phần áp dụngStyle đó sẽ thay đổi theo Nó tiết kiệm công sức rất nhiều

- Do định nghĩa các Style có thể được tách riêng ra khỏi nội dung của trang web,chúng được các trình duyệt load một lần và sử dụng cho nhiều lần, do đó giúp cáctrang web nhẹ hơn và chạy nhanh hơn

1.4 Tìm hiểu về javascript

1.4.1 Giới thiệu ngôn ngữ JavaScript

Với HTML chúng ta đã biết cách tạo ra trang Web – tuy nhiên chỉ mới ở mức biểu

diễn thông tin chứ chưa phải trang Web động có khả năng đáp ứng các sự kiện từ phíangười dùng Hãng Netscape đã đưa ra ngôn ngữ script có tên là Livescript để thưchiện chức năng này Sau đó ngôn ngữ này được đổi tên thành Javascript để tận dụngtính năng đại chúng của ngôn ngữ lập trình Java Mặc dù có những điểm tương đồnggiữa java và javascript , nhưng chúng vẫn là hai ngôn ngữ riêng biệt

Javascript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Nó là ngônngữ dựa trên đối tượng , có nghĩa là bao gồm nhiều kiểu đối tượng 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 Javascripttrở thành một ngôn ngữ script động

Giống với HTML và CSS , 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 có trình duyệt hỗ trỡ Javascript Các trình duyệtWeb như Netscape Navigator 2.0 hay Internet Explorer 3 trở đi có thể hiển thị nhữngcâu lệnh Javascrpit được nhúng vào trang HTML Khi trình duyệt yêu câu một trang,sever sẽ gởi đầy đủ nội dung của trang đó , bao gồm cả mã lệnh HTML và các câulệnh Javascript qua mạng lưới client Client sẽ đọc trang đó từ đầu đến cuối , hiển thịcác kết quả của HTML và xử lý các câu lệnh Javascript khi nào chúng xuât hiện Các câu lệnh Javascript được nhúng trong một trang HTML có thể trả lời cho các sựkiện của người sử dụng như kích chuột , nhập vào một form và điều hướng trang Trang HTML với Javascript được nhúng sẽ kiểm tra các giá trị đưa vào và sẽ thôngbáo với người sử dụng khi giá trị đưa vào là không hợp lệ.

Javascript là một ngôn ngữ kịch bản dựa trên đối tượng nhắm phát triển các ứng dụngInternet chạy trên phía client và phía sever Các ứng dụng client được chạy trong mộttrình duyệt như Netscape Navigator hay Internet Explorer , và các ứng dựng severchạy trên một Web server như Microsoft’s InternetInformation Server hoặc NetscapeEnterpriseServer

1.4.2 Đưa mã Javascript vào trang HTML

Chúng ta có thể chèn các lệnh Javascript vào trong một tài liệu HTML theo nhữngcách sau đây:

+ Nhúng các câu lệnh trực tiếp vào trong tài liệu bằng cách sử dụng thẻ

+<SCRIPT>

+ Liên kết file nguồn Javascript làm giá trị cho thuộc tính với tài liệu HTML

Dùng để xử lý sự kiện trong các thẻ HTML

Dùng thẻ <SCRIPT>

Mã Javascript được nhúng vào tài liệu HTML bằng thẻ <SCRIPT> Chúng

ta có thể nhúng nhiều script vào trong cùng một tài liệu , mỗi script nằm trong một thẻ

<SCRIPT> Khi trình duyệt gặp phải một thẻ <SCRIPT> nào đó , nó sẽ đọc

từng dòng một cho đến khi gặp thẻ đóng </SCRIPT> Tiếp đến nó sẽ kiểm

tra lỗi đó trong chuỗi các hộp cảnh báo (alert boxes) lên màn hình Nếu

không có lỗi , các câu lệnh sẽ được biên dịch sao cho máy tính có thể hiệu

được lệnh đó

CHƯƠNG 2 : KHẢO SÁT, PHÂN TÍCH THIẾT KẾ HỆ THỐNG

2.1 Khảo sát hệ thống

2.1.1 Tổng quan về cửa hàng mỹ phẩm Linh Cosmetic

Tên doanh nghiệp : Mỹ phẩm Linh Cosmetic

Địa chỉ : số 68 Lý Nam Đế - Ba Hàng – Phổ Yên – Thái Nguyên

Với những nhu cầu thiết yếu đáp ứng cho người người nhà nhà

Hàng hóa chất lượng tốt, hàng hóa đa dạng phong phú, giá cả phải chăng bìnhdân: Với quy trình kiểm soát chặt chẽ tại Cửa Hàng Mỹ Phẩm Linh Cosmetic, kháchhàng có thể hoàn toàn an tâm về chất lượng và xuất xứ của hàng hoá luôn cung cấpnhững lựa chọn đa dạng về hàng hóa, giá cả hợp lý, đảm bảo an toàn cho sức khỏecộng đồng

MỘT ĐIỂM ĐẾN, TRỌN NHU CẦU:Cửa Hàng Mỹ Phẩm Linh Cosmetic đặt nhucầu và lợi ích của khách hàng lên hàng đầu, luôn tìm tòi và cải tiến không ngừng đểđem đến giải pháp tổng thể và tối ưu nhất về hàng hoá cũng như giá cả chất lương chomọi người

THÂN THIỆN VÀ TẬN TÂM: Cửa Hàng Mỹ Phẩm Linh Cosmetic được thiết kế

và bố trí thân thiện, chỉ dẫn rõ ràng Nhân viên phục vụ tận tâm và tư vấn tận tình vìlợi ích của khách hàng

PHÁT TRIỂN VÌ CỘNG ĐỒNG: Tiêu chí của Cửa Hàng Mỹ Phẩm Linh Cosmetic

là hoạt động kinh doanh bền vững, có trách nhiệm vì môi trường, vì cộng đồng và vì

sự phát triển của xã hội

Các Cửa Hàng Mỹ Phẩm Linh Cosmetic nằm ở các khu vực đông dân cư, giaothông thuận lợi; có diện tích lớn; cung cấp nhiều ngành hàng đa dạng Có hàng ngànmặt hàng thuộc các loại mỹ phẩm chăm sóc da , chăm sóc sức khỏe của các nước nổitiếng và uy tín chất lượng hàng đầu

Với tầm nhìn dài hạn và mong muốn phát triển bền vững hệ thống cửa hàng , mangđến cho người tiêu dùng trải nghiệm mua sắm thú vị với nhiều lựa chọn về sản phẩm,Cửa Hàng Mỹ Phẩm Linh Cosmetic sẽ phủ rộng khắp Thái Nguyên với tiêu chí ngườingười nhà nhà được mua sắm làm đẹp với giá cả tốt nhất

Cửa Hàng Mỹ Phẩm Linh Cosmetic đã và đang nỗ lực không ngừng để hoàn thành

sứ mệnh của mình: an tâm mua sắm cho mọi người, đáp ứng đầy đủ yêu cầu của kháchhàng; mang đến sự thuận tiện, an toàn tuyệt đối khi sử dụng sản phẩm; gia tăng các giátrị; nâng cao đời sống của người tiêu dùng trong bối cảnh thị trường hiện đại; mở rộng

và phát triển ngành bán lẻ rộng kh ắp tại Thái Nguyên

Ngoài ra,Cửa Hàng Mỹ Phẩm Linh Cosmetic còn chú trọng xây dựng môi trườnglàm việc chuyên nghiệp, năng động, sáng tạo và nhân văn; tạo điều kiện và cơ hội pháttriển công bằng cho tất cả nhân viên; coi trọng người lao động như là tài sản quý giánhất; đồng thời tích cực đóng góp vào các hoạt động xã hội, hướng về cộng đồng vớinhững thông điệp mang tính nhân văn

2.1.2 Quy trình bán hàng của hệ thống cũ

Khách hàng khi vào siêu thị sẽ chọn sản phẩm mình cần mua sau đó mang ra quầythu ngân thanh toán Khi đó người bán sẽ ghi hóa đơn mua hàng Và hình thức thanhtoán là trả tiền mặt Đồng thời họ cũng sẽ ghi lại thông tin giao dịch để tiện cho việcthống kê

Sau mỗi ngày người bán sẽ thống kê lượng hàng nhập vào và bán ra, hang bánchạy, bán kém,… Sau hàng tháng thống kê lại 1 lượt về doanh thu, loại hàng bán chạy,hàng tồn kho,…để đưa ra chiến lược bán hàng mới Và tổng kết lại vào cuối năm.

2.1.3 Đánh giá hiện trạng và cách khắc phục

Cửa Hàng Mỹ Phẩm Linh Cosmetic nằm ở khu vực đông dân cư, giao thông thuậnlợi; có diện tích vừa đủ; cung cấp nhiều mặt hàng Tâm lý người tiêu dùng luôn lựachọn những cơ sở uy tín để mua hàng, ngoài lý do sản phẩm chất lượng, có nguồn gốc

rõ ràng còn là “niềm tin của mọi nhà” khi lựa chọn mua hàng tại Cửa Hàng Mỹ PhẩmLinh Cosmetic

Cùng với xu hướng hiện nay, các kênh phân phối mặt hàng, sản phẩm hiện đại pháttriển mạnh khiến chợ truyền thống đang mất dần ưu thế Trước những lo lắng về vấn

đề an toàn vệ sinh thực phẩm, người tiêu dùng giờ đây có nhiều lựa chọn và có xuhướng thích vào mua sắm tại các siêu thị, trung tâm thương mại, cửa hàng tiện lợi donhững điểm bán hàng này có không gian thoáng đãng, mát mẻ, sạch sẽ; nhân viên bánhàng nhiệt tình, thân thiện; hàng hóa lại đa dạng, phong phú, có xuất xứ rõ ràng, giá cảniêm yết công khai

Mặc dù cũng gọi là bán hàng phát triển nhưng Cửa Hàng Mỹ Phẩm Linh Cosmeticvẫn không thể thu hút được số lượng lớn khách hàng tiềm năng được Vì Cửa Hàng

Mỹ Phẩm Linh Cosmetic này là cửa hàng nhỏ lẻ và vẫn đang áp dụng hệ thống bánhàng cũ gây khá nhiều khó khăn và bất tiện cho cả người bán và người mua hàng Không những thế, với tình hình dịch COVID-19 đang căng thẳng như hiện nay thì việc

mở rộng bán hàng online trên các trang thương mại điện tử là điều nên áp dụng Chính

vì thế cần thay đổi phương pháp bán hàng giúp nâng cao doanh thu cho cửa hàng.Hiện nay, Cửa Hàng Mỹ Phẩm Linh Cosmetic vẫn chưa có trang web bán hàngriêng cho mình.Vì vậy em đã lựa chọn thiết lập website bán hàng cho cửa hàng nhằmđảm bảo tính đổi mới của công nghệ.Vì môi trường mạng ảo không bị giới hạn vềkhông gian và thời gian, lượng người sử dụng lên đến hàng trăm triệu người, tốc độlan tỏa thông tin cực nhanh nên các chiến dịch tiếp thị website sẽ được bao phủ rộnghơn Với những khách hàng ở xa hoặc không có phương tiện đi lại và bị hạn chế vềthời gian thì mua sắm trực tuyến luôn là lựa chọn hàng đầu Việc có một website bên

cạnh cửa hàng giúp bạn phục vụ tối đa được nhu cầu của khách và nhiều đối tượngkhác nhau.

Nếu người dùng muốn mua nhiều sản phẩm cùng một lúc thì họ có thể thêm từngsản phẩm vào giỏ hàng của mình rồi thực hiện mua hàng như bình thường

Người dùng có bất kỳ thắc mắc nào hay cần biết thêm thông tin gì về sản phẩm cầnmua thì có thể để lại bình luận sau mỗi bài chi tiết sản phẩm đó Người quản trị sẽ đọcđược các bình luận này ở trang quản lý bình luận và sẽ xác nhận bình luận của ngườidùng có phù hợp hay không? Nếu phù hợp, người quản trị sẽ bấm duyệt bình luận đó,lúc này bình luận đó sẽ được hiển thị lên website cho những người dùng khác cũng cóthể đọc được Thông tin bình luận gồm: tên người dùng, email, nội dung, số sao đánhgiá

Việc sử dụng ảnh lớn & có tính động sẽ khiến website của công ty khác biệt vớiwebsite của các công ty khác, toát lên nét đặc trưng riêng.

Đạt và phù hợp mục đích của người dùng, phù hợp với trình độ và khả năng củangười sử dụng (chỉ cần đào tạo cơ bản nếu cần ), sử dụng ngôn ngữ trên hệ điều hànhwindown và môi trường lưu trữ Mysql

Phải có tính phân cấp vai trò của các nhân viên để người dùng khác có thể dễ dàngnắm được công việc của mình trên của toàn hệ thống Đồng thời hệ thống phải ổnđịnh, đảm bảo an toàn thông tin, có khả năng cung cấp thông tin đáp ứng nhu cầu củangười dùng khi họ cần Dễ dàng kiểm tra, cải tiến, nâng cấp khi có những lỗi hệ thốngbất kỳ xẩy ra Khi lượng thông tin nhập vào lớn như cần cập nhập thường xuyên, cần

có cơ chế lưu trữ hợp lý

2.2 Phân tích hệ thống

2.2.1 Xác định tác nhân và vai trò tác nhân

- Quản trị viên: đăng nhập tài khoản vào hệ thống để thao tác với hệ thống bằngtài khoản admin, trong giao diện quản trị viên có thể:

- Khách hàng: truy cập trực tiếp vào website để xem hoặc nếu mua hàng có thểđăng nhập bằng tài khoản của mình, nếu chưa có tài khoản thì có thể đăng kýthành viên

- Nhân viên: đăng nhập bằng tài khoản được cấp

2.2.2 Biểu đồ

2.2.2.1 Biểu đồ usecase tổng quát

2.2.2.2 Biểu đồ usecase phân rã

Biểu đồ usecase phân rã cho “Nhân viên”

Biểu đồ usecase phân rã cho “Khách hàng"

Biểu đồ usecase phân rã cho “Quản trị viên"

2.2.3 Đặc tả kịch bản

2.2.3.1 Kịch bản cho chức năng “Đăng nhập”

Tác nhân Khách hàng, nhân viên, quản trị viên

Tiền đề điều kiện Mỗi tác nhân có một usname và password riêng

Đảm bảo thành công Tác nhân đăng nhập được vào hệ thống và hệ thống thông báo

đăng nhập thành công

Kích hoạt Chức năng đăng nhập được kích hoạt

Chuỗi sự kiện chính

1. Tác nhân chọn chức năng “Đăng nhập”

2. Hệ thống hiển thị form đăng nhập

3. Tác nhân nhập usename, password

4. Hệ thống kiểm tra, xác thực thông tin tài khoản đăng nhập đúng

5. Tài khoản hợp lệ, hệ thống hiển thị trang chủ cho tác nhân

6. Usecase kết thúc

Chuỗi sự kiện ngoại lệ:

4.aHệ thống thông báo thông tin tác nhân vừa nhập không hợp lệ

4.a.1.Hệ thống yêu cầu nhập lại thông tin đăng nhập

4.a.2 Tác nhân nhập lại thông tin đăng nhập

2.2.3.2 Kịch bản cho chức năng “Đăng ký thành viên”

Tiền đề điều kiện Mỗi khách hàng có một tài khoản riêng

Đảm bảo thành công Khách hàng đằng kí tài khoản thành công

Kích hoạt Chức năng đăng kí được kích hoạt

Chuỗi sự kiện chính

1 Khách hàng chọn chức năng “Đăng ký”

2 Hệ thống hiển thị form đăng ký

3 Khách hàng nhập thông tin các nhân, usename, password

4 Hệ thống kiểm tra, xác thực thông tin vừa nhập đúng

5 Hệ thống kiểm tra thông tin vừa nhập hợp lệ và hiển thị giao diện đăng nhậpcho khách hàng

6 Usecase kết thúc