- Trang chủ >>
- Công nghệ thông tin >>
- Web
Báo cáo môn cơ sở lập trình web
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.53 MB, 19 trang )
CHƯƠ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 ngun 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
1
•
Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao
•
Sử dụng mã nguồn mở, hồn tồ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 số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ị
2
•
<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
•
<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.
3
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 sốt nhiều tài liệu có các kiểu khác
nhau.
•
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 số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ẽ ln 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ẽ ln 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.
4
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
JavaScript 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.
5
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>
<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>
6
</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
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>
</head>
7
Cú pháp:
<script type="text/javascript" >
$(document).ready(function(){
//code here })
<script>
1.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ẻ ngồ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.
8
CHƯƠ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
hố 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 tốn.
2.2.1. Định nghĩa bài tố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 tốn
bằng một trong các hình thức thanh tố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.
9
Đố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.
2.
Nhóm chức năng đăng ký, đăng nhập thành viên.
Nhóm chức năng xem thơng tin, bao gồm xem thông tin giỏ hàng, xem thông
3.
tin đơn hàng, xem thông tin sản phẩm, xem thông tin cá nhân.
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 tố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
10
ngườ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
Sửa đổi thông tin cá nhân
11
CHƯƠNG 3:THIẾT KẾ GIAO DIỆN WEBSITE
3.1.Giao diện
3.1.1.Trang chủ
12
Gồ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
13
•
Giao diện truy cập nhanh:
•
Giao diện sản phẩm ưu đãi:
•
Giao diện sản phẩm được yêu thích
14
•
Giao diện thương hiệu hot
•
Footer
15
3.1.2 Trang thông tin đặt hàng
16
3.1.3 Trang thương hiệu hàng đầu
17
3.1.4. Trang trang điểm
18
3.2. Đánh giá ưu nhược điểm của Giao diện hệ thống
3.2.1 Ưu điểm
Có rất nhiều ưu điểm của hệ thống mua sắm mỹ phẩm trong việc hỗ trợ quản
lý và có một số những lợi ích thu được thơng qua việc quản lý bằng hệ thống phần
mềm là:
Một lợi thế khác của bán mỹ phẩm online đó chính là giúp bạn tiết kiệm chi
phí đồng thời rất phù hợp nếu bạn khởi nghiệp kinh doanh mỹ phẩm. Bạn không
cần chi phí để thuê mặt bằng kinh doanh, lựa chọn địa điểm mở cửa hàng hay trang
trí cửa hàng, nhờ đó giảm thiểu được chi phí đầu tư ban đầu. Ngồi ra, ưu điểm của
bán mỹ phẩm online so với kinh doanh truyền thống đó là khách hàng khi ghé thăm
website bán hàng có thể nắm bắt được thơng tin các sản phẩm mỹ phẩm nhanh
chóng và thuận tiện đi cùng với đó là các hình ảnh, thơng số của sản phẩm. Đồng
thời các chủ cửa hàng có thể cập nhật hàng nghìn sản phẩm lên website bán hàng
hoặc Fanpage Facebook của cửa hàng Nhím Cosmetic một cách tiện lợi, nơi bạn có
thể trưng bày tất cả các sản phẩm nổi bật của cửa hàng. Ngồi ra cịn có thể tương
tác với khách mua hàng nhanh chóng thơng qua các cơng cụ chat trực tuyến, liên hệ
trực tuyến.
3.2.2 Nhược điểm
Tuy nhiên khơng phải kinh doanh laptop trên mạng khơng có các nhược điểm,
trong đó nhược điểm chủ yếu của hình thức kinh doanh này đó chính là khách hàng
khơng được sờ tận tay, nhìn tận mắt sản phẩm nên đơi khi niềm tin của khách hàng
đặt vào sản phẩm hoặc vào việc mua hàng còn thiếu, đặc biệt đối với mặt hàng
laptop, giá trị các sản phẩm có khi lên tới hàng chục triệu đồng. Chính vì vậy, nếu
có điều kiện thì bạn nên kết hợp cả hai hình thức mở showroom, cửa hàng mỹ
phẩm truyền thống và kinh doanh mỹ phẩm online để gặt hái hiệu quả tối ưu.
Khách hàng sau khi ghé thăm website có thể đến trực tiếp cửa hàng để xem sản
phẩm thực tế và đặt hàng, như vậy có thể gia tăng được tỷ lệ chốt khách mua hàng.
Còn nếu kinh doanh mỹ phẩm với số vốn ít, muốn tiết kiệm chi phí thì kinh doanh
online là một lựa chọn phù hợp.
19
