Ưu điểm và Nhược điểm của HTML 1.1.3.1 Ưu điểm của HTML Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện n
Trang 1CHƯƠNG 1: TỔNG QUAN VỀ HTML, CSS VÀ JAVASCRIPT
1.1 HTML
1.1.1 HTML là gì?
HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong website Một website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng Lưu ý, HTML không phải là ngôn ngữ lập trình Điều này có nghĩa là nó không thể thực hiện các chức năng “động” Hiểu một cách đơn giản hơn, cũng tương tự như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trang web HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng
1.1.2 Lịch sử ra đời của HTML
HTML được phát hành lần đầu tiên vào năm 1991
HTML được tạo ra bởi Tim Berners-Lee, một nhà vật lý học của trung tâm nghiên cứu CERN ở Thụy Sĩ Hiện nay, HTML đã trở thành một chuẩn Internet được tổ chức W3C (World Wide Web Consortium) vận hành và phát triển Bạn có thể tự tìm kiếm tình trạng mới nhất của HTML tại bất kỳ thời điểm nào trên website của W3C
Phiên bản đầu tiên của HTML xuất hiện năm 1991, gồm 18 tag HTML Phiên bản HTML 4.01 được xuất bản năm 1999 Sau đó, các nhà phát triển đã thay thế HTML bằng XHTML vào năm 2000
Đến năm 2014, HTML được nâng cấp lên chuẩn HTML5 với nhiều tag được thêm vào markup, mục đích là để xác định rõ nội dung thuộc loại là gì (ví dụ như:
<article>, <header>, <footer>, …)
1.1.3 Ưu điểm và Nhược điểm của HTML
1.1.3.1 Ưu điểm của HTML
Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn
Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay
Học HTML khá đơn giản
Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao
Trang 2 Sử dụng mã nguồn mở, hoàn toàn miễn phí
HTML là chuẩn web được vận hành bởi W3C
Dễ dàng để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.js,…)
1.1.3.2 Nhược điểm của HTML
Được dùng chủ yếu cho web tĩnh Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP
Nó có thể thực thi một số logic nhất định cho người dùng Vì vậy, hầu hết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers
Một số trình duyệt chậm hỗ trợ tính năng mới
Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ không render được tag mới)
1.1.4 Bố cục HTML
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
Nội dung trang web có thể đặt trong các thẻ hmtl
Bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng
</body>
</html>
→ Trong đó:
<!DOCTYPE html>: khai báo kiểu dữ liệu hiển thị
<html> và </html>: cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ
đóng gói tất cả nội dung của trang HTML
<head> và </head>: khai báo các thông tin meta của trang web như: tiêu đề
trang, charset
Trang 3 <title> và </title>: cặp thẻ nằm bên trong thẻ <head>, dùng để khai báo tiêu
đề của trang
<body> và </body>: cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị
trên trang
1.2 CSS
1.2.1 CSS là gì?
CSS là chữ viết tắt của cụm từ ‘Cascading Style Sheets’
CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet
language Nó dùng để tạo phong cách và định kiểu cho những yếu tố được viết
dưới dạng ngôn ngữ đánh dấu, như là HTML Nó có thể điều khiển định dạng của
nhiều trang web cùng lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ
1.2.2.Lịch sử CSS
CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10
năm 1994 Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee tại CERN Một số ngôn ngữ định kiểu khác cho web đã được đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộng đồng cũng như đồng thuận trong World Wide Web Consortium dẫn đến CSS W3C đầu tiên (CSS1) được phát hành vào năm
1996 Đặc biệt, một đề nghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành đồng tác giả của CSS1 và được coi là đồng sáng tạo CSS
Tập tin định kiểu theo tầng đã tồn tại ở dạng này hay dạng khác kể từ khi bắt đầu Ngôn ngữ đánh dấu tổng quát tiêu chuẩn (SGML -Standard Generalized Markup Language) vào những năm 1980 và CSS được phát triển để cung cấp biểu định kiểu cho web
1.2.3 Ưu điểm và nhược điểm của CSS
1.2.3.1 Ưu điểm của CSS
Nhiều phần tử HTML có nhiều tài liệu chứa các lớp
Một tệp có thể được sử dụng để kiểm soát nhiều tài liệu có các kiểu khác nhau
Trang 4 Các phương thức như bộ chọn và nhóm có thể được sử dụng để nhóm các kiểu trong các trường hợp hỗn hợp
CSS giúp định kiểu mọi thứ trên một file khác, bạn có thể tạo phong cách trước rồi sau đó tích hợp file CSS lên trên cùng của file HTML Việc này giúp HTML markup rõ ràng và dễ quản lý hơn nhiều
CSS không cần lặp lại các mô tả cho từng thanh phần Nó tiết kiệm thời gian, làm code ngắn lại, có thể kiểm soát lỗi dễ dàng hơn
1.2.3.2 Nhược điểm của CSS
Cần phải tải thêm vào các tài liệu quan trọng có thông tin định dạng
Nó không thực tế cho các định nghĩa định dạng nhỏ
Để hiển thị tài liệu, trang định dạng bên ngoài phải được tải
1.2.4 Bố cục CSS
Cấu trúc một đoạn CSS
Một đoạn CSS bao gồm 4 phần như thế này:
Vùng chọn { thuộc tính : giá trị; thuộc tính: giá trị; }
Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị
sẽ nằm bên trong cặp dấu ngoặc nhọn {} Mỗi thuộc tính sẽ luôn có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng khai báo thuộc tính sẽ luôn có dấu chấm phẩy ở cuối Một vùng chọn có thể
sử dụng không giới hạn thuộc tính
1.3 JavaScript
1.3.1 JavaScript là gì?
Một ngôn ngữ lập trình website, được tích hợp và nhúng trong HTML giúp website sống động hơn JavaScript cho phép kiểm soát các hành vi của trang web tốt hơn so với khi chỉ sử dụng mỗi HTML Ứng dụng thực tiễn của JavaScript là Các slideshow, pop-up quảng cáo và tính năng autocomplete của Google
Thế mạnh của Javascript là nó tương thích với nhiều thiết bị kết nối khác nhau
Trang 5JavaScript là ngôn ngữ lập trình được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, … thậm chí các trình duyệt trên thiết bị di động
1.3.2 Lịch sử của JavaScript
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của Netscape, vào tháng 9 năm 1995 Được đặt tên đầu tiên là Mocha, tên của nó được đổi thành Mona rồi LiveScript
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm
1999 Nó liên tục phát triển thành JavaScript ngày nay
1.3.3 Ưu điểm và nhược điểm của JavaScript
1.3.3.1 Ưu điểm của JavaScript
JavaScript là ngôn ngữ lập trình dễ học
Lỗi của JavaScript dễ phát hiện hơn và vì vậy dễ sửa hơn
JavaScript hoạt động trên nhiều trình duyệt, nền tảng
JavaScript giúp website tương tác tốt hơn với khách truy cập
JavaScript nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác
1.3.3.2 Nhược điểm của JavaScript
Dễ bị khai thác
Có thể được dùng để thực thi mã độc trên máy tính của người dùng
Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất
1.3.4 Bố cục JavaScript
→ Cách 1 -Nhúng JS trong HTML
Cách thứ nhất là mã JavaScript được viết nhúng trong văn bản HTML với thẻ <script>
Thẻ <script> này có thể đặt bên trong thẻ <head> hoặc <body> của văn bản HTML
<html>
<head>
Trang 6<script > <! Chỗ này viết code JavaScript > </script>
</head>
<body>
<script><! Chỗ này cũng viết được code JavaScript > </script>
</body>
</html>
→ Cách 2 -Tải JS từ file Mã JavaScript
- Có thể không cần viết trực tiếp cùng với file văn bản HTML Các mã này được viết trong một file, thường file này có đặt tên với phần mở rộng là js sau đó tải vào HTML bằng thẻ <script> với cú pháp: <script src="địa-chỉ-file-js"></script>
- Ví dụ mã JavaScript viết trong file javascript.js sau đó file đó được nhúng vào HTML bằng thẻ <script> và vị trí file chỉ ra trong thuộc tính src
<html>
<head>
<title> </title>
<script src="javascript.js"></script>
</head>
<body>
</body>
</html>
1.3.5 Một số thư viện Javascript
- AngularJS: Một thư viện dùng để xây dựng ứng dụng Single Page
- NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime
- Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile
- ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications)
- jQuery: Một thư viện rất mạnh về hiểu ứng
Trang 7- ReactJS: Một thư viện viết ứng dụng mobie
1.3.5.1 Thư viện jQuery trong JavaScript
- JQuery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web
- Jquery hỗ trợ người dùng thao tác rất tốt trên Ajax với những thư viện đơn giản và dễ áp dụng
- Có thể chạy trên hầu hết các trình duyệt
- jQuery đi kèm với rất nhiều các hiệu ứng hình ảnh động mà bạn có thể sử dụng trong các trang web của bạn
- Nói ngắn gọn, jQuery là 1 thư viện định nghĩa sẵn các phương thức javascript để bạn viết code javascript nhanh hơn, đơn giản hơn
Chèn thư viện Jquery vào website:
+ Cách 1:Chèn thư viện này vào web bằng thẻ <script> trong cặp thẻ <head>, đặt tên file là jquery.js
<head>
<script type=”text/javascript” src=” jquery.js”></script>
</head>
+ Cách 2: Chèn file jQuery từ CDN của Google sau đó chèn thư viện này vào web
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></ script>
</head>
Cú pháp:
<script type="text/javascript" >
$(document).ready(function(){ //code here })
<script>
Trang 81.4 Kết luận
HTML - là ngôn ngữ đánh dấu được sử dụng để cấu thành nội dung và mang
đến ngữ nghĩa cho trang web, ví dụ như định danh cho các đoạn văn, tiêu đề, dữ liệu dạng bảng hoặc nhúng hình ảnh, video vào trang web
CSS - là một ngôn ngữ định dạng được áp dụng để tạo nên “vẻ ngoài” của một
trang web, ví dụ thiết lập màu nền và font chữ, bố trí nội dung dựa theo mô hình cột
Javascript - là ngôn ngữ kịch bản cho phép tạo ra trang web động – cập nhật
nội dung theo ngữ cảnh, điều khiển đa phương tiện, hoạt cảnh các hình ảnh và nhiều thứ khác
Trang 9CHƯƠNG 2: TỔNG QUAN VỀ ĐỀ TÀI 2.1.Mục tiêu đề tài
Hiện nay, công nghệ thông tin được xem là một ngành mũi nhọn của các quốc gia, đặc biệt là các quốc gia đang phát triển, tiến hành công nghiệp hóa và hiện đại hoá như nước ta Sự bùng nổ thông tin và sự phát triển mạnh mẽ của công nghệ kỹ thuật số, yêu cầu muốn phát triển thì phải tin học hoá tất cả các ngành, các lĩnh vực Với mọi kiến thức học được trên lớp cùng với sự chỉ dẫn tận tình của thầy cô, chúng em đã đưa ra ý tưởng thiết kế 1 website mua sắm mỹ phẩm để tổng hợp kiến thức Các giao diện trong trang web thể hiện từng chức năng của nó, cụ thể:
Tổng quan website
Sản phẩm trên website
Hướng dẫn mua hàng trên website
Giới thiệu cửa hàng
Địa chỉ cửa hàng
Đăng nhập vào website
Đăng kí người dùng
2.2 Mô tả bài toán.
2.2.1 Định nghĩa bài toán
Hệ thống mua sắm mỹ phẩm là một Website cung cấp cho người sử dụng, nhà quản lý những chức năng cần thiết để tiến hành giao dịch, quản lý sự hoạt động cũng như theo dõi tình hình phát triển của cửa hàng mình Đối với khách hàng, hệ thống cho phép xem thông tin về sản phẩm cửa hàng Sau khi đăng kí làm thành viên, khách hàng có thể chọn sản phẩm trên website đưa vào giỏ hàng và tiến hành giao dịch mua bán Sau khi chọn hàng xong khách hàng chuyển qua việc thanh toán bằng một trong các hình thức thanh toán, đồng thời chọn địa điểm và xác định thời gian giao hàng Sau khi đã thực hiện xong, khách hàng nhấn xác nhận để hoàn tất giao dịch
Trang 10Đối với các nhân viên, là người tiếp nhận đơn hàng do người quản lý chuyển đến, thực hiện việc giao hàng và xác nhận việc giao hàng đã hoàn tất
Khi khách hàng có yêu cầu về bảo hành các sản phẩm đã mua ở cửa hàng, bộ phận bảo hành sẽ tiến hành kiểm tra, sửa chữa và gửi lại cho khách kèm theo một hoá đơn thanh toán bảo hành (nếu sản phẩm đã vượt quá thời gian bảo hành) Các thông tin về việc bảo hành sản phẩm sẽ được lưu lại trong sổ bảo hành
2.2.2 Các nhóm chức năng của hệ thống
Chức năng của hệ thống có thể chia làm các nhóm chức năng chính như sau:
1 Nhóm chức năng đăng ký, đăng nhập thành viên
2 Nhóm chức năng xem thông tin, bao gồm xem thông tin giỏ hàng, xem thông tin đơn hàng, xem thông tin sản phẩm, xem thông tin cá nhân
3 Nhóm chức năng quản lý thông tin, bao gồm quản lý thông tin cá nhân, quản
lý danh sách thành viên, quản lý danh mục sản phẩm
2.2.3 Xác định các thực thể
Dựa trên mô tả bài toán, ta có thể xác định được các thực thể chính của hệ thống như sau:
Khách hàng: là người giao dịch với hệ thống thông qua các đơn đặt hàng,
khách hàng có thể chọn các loại sản phẩm, chọn địa điểm và thời gian giao hàng Khách hàng có thể đăng ký làm thành viên của hệ thống
Người quản lý: là người điều hành, quản lý và theo dõi mọi hoạt động của hệ
thống
Nhân viên: là người tiếp nhận và xử lý các đơn hàng, các yêu cầu bảo hành do
người quản lý giao
Thành viên: bao gồm người quản lý, nhân viên và những khách hàng đã đăng
ký Sau khi đăng nhập để trở thành thành viên, ngoài những chức năng chung của
Trang 11người sử dụng, còn có thêm một số chức năng khác phục vụ cho công việc cụ thể của từng đối tượng
2.2.4 Xác định các Use case
- Thực thể khách hàng có các UC sau:
Đăng kí làm thành viên
Xêm thông tin sản phẩm
Xem thông tin giỏ hàng
Chọn sản phẩm cẩn mua
Thêm, bớt sản phẩm trong giỏ hàng
Thực hiện việc mua hàng
Thanh toán
Yêu cầu bảo hành
Nhận lại sản phẩm sau khi bảo hành
- Thực thể Người quản lý có các UC sau:
Tiếp nhận đơn hàng, nhận yêu cầu bảo hành
Giao cho nhân viên thực hiện
Quản lý danh sách thành viên
Quản lý danh mục sản phẩm
- Thực thể Nhân viên có các UC sau:
Thực hiện việc giao hàng
Thực hiện việc bảo hành sản phẩm
Báo cáo kết quả
Ngoài ra, các thành viên của hệ thống bao gồm người quản lý, nhân viên và các khách hàng đã đăng ký làm thành viên còn có các UC sau:
Đăng nhập
Xem thông tin cá nhân
Trang 12 Sửa đổi thông tin cá nhân
Trang 13CHƯƠNG 3:THIẾT KẾ GIAO DIỆN WEBSITE 3.1.Giao diện
3.1.1.Trang chủ
Trang 14Gồm có các chức năng và giao diện sau:
Header: là logo của cửa hàng
Đăng nhập,Đăng ký
Thông tin giỏ hàng
Thanh menu: gồm các chỉ mục: Khuyến mãi hot, Chăm sóc da, Trang điểm, Chăm sóc cá nhân, Chăm sóc sức khỏe, Tất cả thương hiệu,Thương hiệu hàng đầu
Giao diện thông tin ưu đãi:
- Là slide show ảnh
- Chứa thông tin về những ưu đãi đang diễn ra