MỞ ĐẦU Hiện nay trên thế giới thương mại điện tử đang phát triển rất mạnh mẽ. Kỹ thuật số giúp chúng ta tiết kiệm đáng kể các chi phí nhờ chi phí vận chuyển trung gian, chi phí giao dịch và đặc biệt là giúp tiết kiệm thời gian để con người đầu tư vào các hoạt động khác. Hơn nữa thương mại điện tử còn giúp con người có thể tìm kiếm tự động theo nhiều mục đích khác nhau, tự động cung cấp thông tin theo nhu cầu và sở thích của con người. Giờ đây, con người có thể ngồi tại nhà để mua sắm mọi thứ theo ý muốn và các website bán hàng trên mạng sẽ giúp ta làm được điều đó.
Chính vì vậy các Website bán hàng online đã và đang được chsu trọng. Nhờ các công cụ xây dựng Website với giá thành rẻ và được hỗ trợ rất nhiều trên mạng sẽ giúp ta nhanh chóng xây dựng các website bán hàng thân thiện và dễ sử dụng với người dùng. Chính vì vậy trong đồ án này em chọn đề tài về: “Thiết kế Website bán mỹ phẩm câo cấp” Đây là 1 Website đơn giản nhưng giao diện thân thiện, dễ thao tác giúp cho người tiêu dùng dễ dàng tiếp cận cũng như tìm kiếm và mua sản phẩm theo nhu cầu cần thiết của mình. PKHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN 1.
Phát biểu bài toán CHƯƠNG 2. Nơi cung cấp các sản phẩm mỹ phẩm xách tay chính hãng , bình ổn về giá và yên tâm về chất lượng, cam kết và được chấp nhận hoạt động bởi bộ công thương. Cập nhật thông tin thị trường mỹ phẩm, chia sẽ những bí quyết làm đẹp bằng các phương pháp tự nhiên, phù hợp với đa số thị phần người tiêu dùng cũng như an toàn, đảm bảo, không gây kích ứng. Phân tích các chức năng CHƯƠNG 4.
CHỨC NĂNG CHƯƠNG 6. MÔ TẢ STT CHƯƠNG 8. Cung cấp thông tin CHƯƠNG 9. Cung cấp thông tin đầy đủ, CHƯƠNG 7.
chi tiết kèm hình ảnh sản phẩm hình ảnh chi tiết được chụp theo nhiều góc 1 trực quan khác nhau. CHƯƠNG CHƯƠNG10. Tìm kiếm sản CHƯƠNG 12. Khách hàng nhanh chóng 2 phẩm có được thông tin mình muốn.
Các bí quyết làm trắng da, CHƯƠNG CHƯƠNG 13. Chia sẽ các bí trang điểm được chia sẽ công khai giúp 3 quyết làm đẹp khách hàng dễ dàng tiếp cận. Các chương trình khuyến CHƯƠNG CHƯƠNG 16. Thông tin về các mãi được cập nhật nhanh chóng mỗi ngày, 4 chương trình khuyến mãi nhiều quyền lợi khi là trở thành thành viên.
CHƯƠNG CHƯƠNG 19. Hỗ trợ khách CHƯƠNG 21. Chăm sóc khách hàng trực 5 hàng bằng hotline và Email tuyến. Thiết kế giao diện CHƯƠNG 25.
THIẾT KẾ GIAO DIỆN 25. Đặc tả giao diện 25. Sơ đồ website Website bán mỹ phẩm cao cấp Trang chủ Giới Thiệu Sản phẩm Bí quyết làm đẹp Glacier Bí quyết Velvet Tint trắng da Touch Of Bí quyết Rose trang điểm Hướng dẫn đặt hàng Liên hệ Khác Đăng nhập Đăng ký 4 0 0 c Chương 2. Thiết kế giao diện CHƯƠNG 27.
Giao diện trang chủ Hình 2.2:Giao diện trang chủ CHƯƠNG 28. Gồm các trang sau: Trang chủ, trang giới thiệu, trang các loại sản phẩm, trang các bí quyết làm đẹp, trang hướng dẫn đặt hàng, trang liên hệ,trang đăng ký, trang đăng nhập, địa chỉ shop trên google map và sơ lược các sản phẩm. Người dùng click vào các biểu tượng để chọn các mục muốn thực hiện. Giao diện trang đăng ký trực tuyến 5 0 0 c Chương 2.
Thiết kế giao diện Hình 29.1: Giao diện trang đăng ký trực tuyến CHƯƠNG 30. -Ý nghĩa của hoạt động: đăng ký tài khoản để trở thành thành viên. -Quy tắc hoạt động: khách hàng muốn mua sản phẩm, trước tiên cần có tài khoản để đăng nhập vào website. -Các thao tác màn hình: khách hàng nhập tên đăng nhập, mật khẩu và xác nhận lại mật khẩu để có thể đăng ký tài khoản.
Giao diện trang đăng nhập Hình 32.1: Giao diện trang đăng nhập CHƯƠNG 33. -Ý nghĩa của hoạt động: Đăng nhập để mua sản phẩm. Thiết kế giao diện CHƯƠNG 34. -Quy tắc hoạt động: : khách hàng muốn mua sản phẩm, trước tiên cần có tài khoản để đăng nhập vào website bằng cách gõ vào ô tên đăng nhập và mật khẩu.
Khi khách hàng đăng nhập vào website thì có thể đặt mua sản phẩm phù hợp với yêu cầu của mình. -Các thao tác màn hình: Khách hàng nhập tên đăng nhập và mật khẩu để đăng nhập mới có thể mua sản phẩm hiển thị trên website. Giao diện trang giới thiệu Hình 35.1: Giao diện trang giới thiệu 7 0 0 c Chương 2. Thiết kế giao diện CHƯƠNG 36.
Giới thiệu về tên website, các sản phẩm, tiêu chí của website cũng như thông tin quan trọng khác như số điện thoại,mạng xã hội và các ưu đãi khi mua hàng tại website. Giao diện trang sản phẩm Hình 36.1: Giao diện trang sản phẩm CHƯƠNG 37. Khách hàng xem các sản phẩm theo danh mục trên website và chọn sản phẩm theo nhu cầu của mình. Các sản phẩm thể hiện lần lượt tên sản phẩm, giá thành trước khi giảm giá và sau khi giảm giá.
Thiết kế giao diện 38. Giao diện trang chi tiết sản phẩm Hình 38.1: Giao diện chi tiết sản phẩm CHƯƠNG 39. Giao diện cung cấp thông tin đầy đủ của trang web như thông tin như tên sản phẩm, công dụng, thành phần xuất xứ và hình ảnh chi tiết trực quan của sản phẩm. Giao diện trang tin tức làm đẹp Hình 39.1: Giao diện trang tin tức làm đẹp 9 0 0 c Chương 2.
Thiết kế giao diện 39. Giao diện trang bí quyết làm đẹp chi tiết 10 0 0 c Chương 2. Thiết kế giao diện Hình 39.1: Giao diện trang bí quyết làm đẹp chi tiết 11 0 0 c Chương 2. Thiết kế giao diện CHƯƠNG 40.
Hướng dẫn chuẩn bị nguyên liệu, các bước thực hiện cũng như công dụng. Ngăn ngừa rụng tóc và kích mọc tóc theo phương pháp tự nhiên và phù hợp với đa số người. Giao diện trang hướng dẫn đặt hàng Hình 40.1: Giao diện trang hướng dẫn bán hàng CHƯƠNG 41. Hướng dẫn khách hàng chi tiết về đặt hàng, các thủ tục đặt hàng.
Thiết kế giao diện 42. Giao diện trang liên hệ Hình 42.1: Giao diện trang liên hệ CHƯƠNG 43. Hỗ trợ khách hàng khi khách hàng có sự cố như hàng lỗi website không đặt được sản phẩm, không đăng ký hay đăng nhập được vào tài khoản hay chưa hiểu về cách thức đặt hàng. Thiết kế chương trình CHƯƠNG 45.
THIẾT KẾ CHƯƠNG TRANH 45. Code HTML CHƯƠNG 46. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> CHƯƠNG 47. <html xmlns="http://www.org/1999/xhtml"> CHƯƠNG 48.
<head> CHƯƠNG 49. <meta http-equiv="Content-Type" content="text/html; charset=utf- 8" /> CHƯƠNG 50. <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"> CHƯƠNG 51. <!-- Latest compiled and minified CSS --> CHƯƠNG 52.
<link rel="stylesheet" href="https://maxcdn.css"> CHƯƠNG 53. <!-- jQuery library --> CHƯƠNG 54. <script src="https://ajax.com/ajax/libs/jquery/3.js"></script> CHƯƠNG 55. <!-- Latest compiled JavaScript --> CHƯƠNG 56.
<script src="https://maxcdn.js"></script> CHƯƠNG 57. <title>Vintage VietNam Official Store - Vintage Việt Nam</title> CHƯƠNG 58. <link href="vintage.css" rel="stylesheet" type="text/css" /> CHƯƠNG 59. <script type="text/javascript"> CHƯƠNG 60.
function myClick(){ CHƯƠNG 61. var x = confirm("Xác nhận mua mặt hàng này"); CHƯƠNG 62. if(x){ CHƯƠNG 63. alert("Cảm ơn bạn tin tưởng sản phẩm của chúng tôi"); CHƯƠNG 64.
}else{ CHƯƠNG 65. alert("Mời bạn quay lại tham khảo sản phẩm khác"); 14 0 0 c Chương 3. Thiết kế chương trình CHƯƠNG 66. </script> CHƯƠNG 69.
</head> CHƯƠNG 70. <body> CHƯƠNG 71. <nav class="navbar navbar-inverse"> <!--navbar-fixed-top--> CHƯƠNG 72. <div class="container"> CHƯƠNG 73.
<!-- Brand and toggle get grouped for better mobile display --> CHƯƠNG 74. <div class="navbar-header"> CHƯƠNG 75. <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar1" aria-expanded="false"> CHƯƠNG 76. <span class="icon-bar"></span> CHƯƠNG 77.
<span class="icon-bar"></span> CHƯƠNG 78. <span class="icon-bar"></span> CHƯƠNG 79. </button> CHƯƠNG 80. <a class="navbar-brand" href="trangchu.html">VINTAGE</a> CHƯƠNG 81.
</div> CHƯƠNG 82. <div class="collapse navbar-collapse" id="navbar1"> CHƯƠNG 84. <ul class="nav navbar-nav"> CHƯƠNG 85. <li class="active"><a href="file:///D|/đồ án/Vintage/trangchu.html">TRANG CHỦ</a> </li> CHƯƠNG 86.
<li class="active"><a href="file:///D|/đồ án/Vintage/gioithieu.html">GIỚI THIỆU</a> </li> CHƯƠNG 87. <li class="dropdown"> <a href="#" class="dropdown-toggle" data- toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">SẢN PHẨM<span class="caret"></span></a> CHƯƠNG 88. <ul class="dropdown-menu"> CHƯƠNG 89. <li><a href="son1.html">GLACIER VELVET TINT</a> </li> 15 0 0 c Chương 3.
Thiết kế chương trình CHƯƠNG 90. <li role="separator" class="divider"></li> CHƯƠNG 91. <li><a href="son2.html">TOUCH OF ROSE</a> </li> CHƯƠNG 92. <li role="separator" class="divider"></li> CHƯƠNG 93.
<li><a href="son3.html">MODERN MATTE LIPSTICK</a> </li> CHƯƠNG 94. <li role="separator" class="divider"></li> CHƯƠNG 95. <li><a href="file:///D|/đồ án/Vintage/son4.html">COTTON LIP CREAM</a> </li> CHƯƠNG 96. <li role="separator" class="divider"></li> CHƯƠNG 97.
<li><a href="file:///D|/đồ án/Vintage/son5.html">MODERN EYELINER</a> </li> CHƯƠNG 98. </ul> CHƯƠNG 99. </li> CHƯƠNG 100. <li class="dropdown"> <a href="lamdep.html" class="dropdown- toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria- haspopup="true">TIN TỨC LÀM ĐẸP<span class="caret"></span></a> CHƯƠNG 101.
<ul class="dropdown-menu"> CHƯƠNG 102. <li><a href="file:///D|/đồ án/Vintage/lamdep.html">BÍ QUYẾT LÀM ĐẸP</a> </li> CHƯƠNG 103. <li role="separator" class="divider"></li> CHƯƠNG 104. <li><a href="file:///D|/đồ án/Vintage/lamdep.html">BÍ QUYẾT LÀM TRẮNG DA </a> </li> CHƯƠNG 105.
<li role="separator" class="divider"></li> CHƯƠNG 106. <li><a href="file:///D|/đồ án/Vintage/lamdep.html">BÍ QUYẾT TRANG ĐIỂM</a> </li> CHƯƠNG 107. </ul> CHƯƠNG 108. </li> CHƯƠNG 109.
<li class="active"><a href="file:///D|/đồ án/Vintage/huongdan.html">HƯỚNG DẪN ĐẶT HÀNG</a> </li> 16 0 0 c Chương 3. Thiết kế chương trình CHƯƠNG 110. <li class="active"><a href="file:///D|/đồ án/Vintage/lienhe.html">LIÊN HỆ</a> </li> CHƯƠNG 111. </ul> CHƯƠNG 112.
</li> CHƯƠNG 113. </ul> CHƯƠNG 114. <form class="navbar-form navbar-right" role="search"> CHƯƠNG 115. <div class="form-group"> CHƯƠNG 116.
<input type="text" class="form-control" placeholder="Tìm kiếm"> CHƯƠNG 117. </div> CHƯƠNG 118. <button type="submit" class="btn btn-default">Tìm</button> CHƯƠNG 119. </form> CHƯƠNG 120.
</div> CHƯƠNG 121. <div class="menu"> CHƯƠNG 122.html">Đăng Kí</a> CHƯƠNG 123.html">Đăng Nhập</a> CHƯƠNG 124. </div> CHƯƠNG 125.container--> CHƯƠNG 126. </nav> CHƯƠNG 127.
<div id="menu"> CHƯƠNG 128. <header> CHƯƠNG 129. <div class="container"> CHƯƠNG 130. <div class="row"> CHƯƠNG 131.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> CHƯƠNG 132. <div id="carousel1" class="carousel slide"> CHƯƠNG 133. <ol class="carousel-indicators"> CHƯƠNG 134. <li data-target="#carousel1" data-slide-to="0" class="active"> </li> 17 0 0 c Chương 3.
Thiết kế chương trình CHƯƠNG 135. <li data-target="#carousel1" data-slide-to="1" class=""> </li> CHƯƠNG 136. <li data-target="#carousel1" data-slide-to="2" class=""> </li> CHƯƠNG 137. </ol> CHƯƠNG 138.
<div class="carousel-inner"> CHƯƠNG 139. <div class="item active"> <img class="img-responsive" src="Picture/chạy nền 2.jpg" width="1200" height="500" alt="thumb"> CHƯƠNG 140. <div class="carousel-caption"></div> CHƯƠNG 141. </div> CHƯƠNG 142.
<div class="item"> <img class="img-responsive" src="Picture/nền 6.jpg" width="1200" height="500" alt="thumb"> CHƯƠNG 143. <div class="carousel-caption"></div> CHƯƠNG 144. </div> CHƯƠNG 146. <div class="item"> <img class="img-responsive" src="Picture/chạy nền 1.jpg" width="1200" height="500" alt="thumb"> CHƯƠNG 147.
<div class="carousel-caption"></div> CHƯƠNG 148. </div> CHƯƠNG 149. <a class="left carousel-control" href="#carousel1" data- slide="prev"><span class="icon-prev"></span></a> <a class="right carousel-control" href="#carousel1" data-slide="next"><span class="icon-next"></span></a></div> CHƯƠNG 150. </div> CHƯƠNG 151.
</div> CHƯƠNG 152. </header> CHƯƠNG 153. <article> CHƯƠNG 154. <br /> CHƯƠNG 155.
<div class="slide"> CHƯƠNG 156. <script type="text/javascript"> CHƯƠNG 157.images){ CHƯƠNG 158. var image1 = new Image(); 18 0 0 c Chương 3. Thiết kế chương trình CHƯƠNG 159.src = "Picture/chu3.jpg"; CHƯƠNG 160.
var image2 = new Image(); CHƯƠNG 161.src = "Picture/Sale.png"; CHƯƠNG 162. </script> CHƯƠNG 164. <a href="#" onMouseOver="document.src;" onMouseOut="document.src;"> CHƯƠNG 165. <img name="myImage" src="Picture/chu3.jpg" width="900px" height="357px" /> CHƯƠNG 166.
</div> CHƯƠNG 168. <br /> CHƯƠNG 169. <img src="Picture/nền 7.png"height="35" Width="890"/> CHƯƠNG 170. <br /> CHƯƠNG 171.
<br /> CHƯƠNG 172. <div align="center"> CHƯƠNG 173. <div class="box"><a class="a" href="file:///D|/đồ án/Vintage/son1.html"><img src="./TranPhamMinhQuang_B9/ICY- LOVE_900x.jpg" width="225px" height="200px" /></a><br /> CHƯƠNG 174. <div align="center"> CHƯƠNG 175.
<a href="file:///D|/đồ án/Vintage/son11.html">ICY LOVE</a> CHƯƠNG 176. </div> CHƯƠNG 177.000 VNĐ</del></p> CHƯƠNG 178.000 VNĐ</h4> CHƯƠNG 179. <div align="center"> CHƯƠNG 180. <input class="button" type="button" onclick="myClick()" value="Mua hàng" /> CHƯƠNG 181.
</div> CHƯƠNG 182. </div> 19 0 0 c Chương 3. Thiết kế chương trình CHƯƠNG 183. </div> CHƯƠNG 184.
<div align="center"> CHƯƠNG 185. <div class="box"><a class="a" href="son12.html"><img src="./TranPhamMinhQuang_B9/MERMAID-WISH_900x.