Giới thiệu đề tài > Tên của website đồ án: CaraShop > CaraShop la website thuong mai điện tử với mô hình B2C.Khách hàng xem cá sản phâm được nhà cung cấp đăng lên trên trang web, chọn mộ
Bootstrap 5
Các công cụ hỗ trợ
> Visual Studio Code chính là ứng dụng cho phép biên tập, soạn thảo các đoạn code đề hỗ trợ trong quá trình thực hiện xây dựng, thiết kế website một cách nhanh chóng Visual Studio Code hay còn được viết tắt là VS Code Trình soạn thảo này vận hành mượt mà trên các nền tang nhu Windows, macOS, Linux Hon thế nữa, VS Code còn cho khả năng tương thích với những thiết bị máy tính có cầu hình tầm trung vẫn có thê sử dụng để dàng
> Visual Studio Code hỗ trợ đa dạng các chức năng Debug, đi kèm với Git, có
Syntax Highlighting Dac biét la tw hoàn thành mã théng minh, Snippets, va kha năng cải tiến mã nguồn Nhờ tính năng tùy chỉnh, Visual Studio Code cũng cho phép các lập trình viên thay đổi Theme, phím tắt, và đa dạng các tùy chọn khác
Mặc dù trình soạn thảo Code này tương đối nhẹ, nhưng lại bao gồm các tính năng mạnh mẽ
> Du moi duoc phát hành nhưng VSCode là một trong những Code Editor mạnh mẽ và phô biến nhất dành cho lập trình viên Nhờ hỗ trợ nhiều ngôn ngữ lập trình phỏ biến, tích hợp đầy đủ các tính năng và khả năng mở rộng, nên VS Code trở nên cực kỳ thân thuộc với bất kì lập trình viên nảo
> Visual Studio Code là gì được rất nhiều người tìm hiểu Đây cũng là một trong các ứng dụng được dân IT “săn đón và tải về và sử dụng rất nhiều Visual Studio Code cũng luôn có những cải tiến và tao ra da dạng các tiện ích đi kèm từ đó giúp cho các lập trình viên sử dụng đễ dàng hơn Trong đó có thê kế đến những ưu điểm sau: ằ - Đa dạng ngụn ngữ lập trỡnh giỳp người dựng thỏa sức sỏng tạo và sử dụng như HTML, CSS, JavaScript, C++
- - Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên để dàng định hình nội dung
* Cac tiện ích mở rộng rất đa dạng và phong phú tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng
* tang toc xử lý vòng lap (Debug)
* Pon gian héa viéc tim quản ly hết tất cả các Code có trên hệ thống
> Visual Studio Code la mét trong nhimg trình biên tập Code rất phô biến nhất hiện nay Ứng dụng này cũng ngảy cảng chứng tỏ ưu thể vượt trội của mình khi so sánh với những phần mềm khác Tuy bản miễn phí không có nhiều các tính năng nâng cao nhưng Visual Studio Code thực sự có thê đáp ứng được hầu hết nhu cầu cơ bản của lập trình viên.
CHƯƠNG 2: THIẾT KẺ VÀ XÂY DỰNG TRANG WEB
2.1 Xây dựng giao dién 2.1.1 Tạo bố cục thư mục đề tài
> Tutorial stylecss sylecs blog.html button.png contact.html
Hình 2.1 2.2 2.3 2.4 2.5 :Bỗ cục thư mục
2.1.2 Grid Layout cua Cac Nhom Trang Web list categoy
| logo | menubar main menu nav content section list product section footer
Anh 2.6: Layout trang chi tiét san phẩm
11 header navigation nav logo menubar nav main menu content section sidebar article infomation product footer
Hinh 2.7: Layout trang san phim moi va san pham ban chay
12 header navigation nav menubar nav wrapper section slider form
Hình 2.8: Layout trang đăng ký, đăng nhập
Password © Remember Me Forget Password Log in Don't have a account Rt
> Trang chủ chứa các nội dung tổng quan đề quảng cáo, giới thiệu các chính sách cũng như cung cấp thông tin liên cho người dùng, mua lẫn người bán Ưu đãi-Trao đổi ƯUu đãi siêu giá trị Trên tât cả sản phâm
Truy cập Hình 2.9 Phần đầu của trang chủ á
14 Ưu đãi-Trao đổi Ưu đãi siêu giá trị
Trên tắt cả sản phắm
Tiết kiệm nhiều hơn với phidu giam giá 80%
Hình 2.10:phần nội dung trang chủ
Hình 2.11:phần nội dung trang chủ
Giảm giá sốc tat > phong’va phy kién
Hình 2.12 :phần nội dung trang chủ ongtppguex œ509or
GRAB ONE - GRAB ALL wa
Dang ky nhan bang tin
Nhận thông tin cập nhật mới nhắt qua email của chúng tôi đế nhận
Hình 2.13 :phần nội dung trang chủ
Hình 2.10 2.11 2.12 2.13:Đây là phần thân của trang chủ chứa thông tin của sản phẩm Tương đương dòng 1 2 3 4 trên meb
Trang chi / Ctra hang / Sets / Ao So mi ngan tay mau Camri x4m Áo Sơ mi ngắn tay màu Camri xám
Mau Sọc Bo Ngắn Đen
Sọc Bo Ngắn Trắng Viễn Phối Trắng Soc Bo Dài Trắng Soc Trang Xuông Soc Bo Dai Den Sọc Đen Xuông
Số Lượng 1 48957 sản phẩm có sẵn
Hình 2.13 :Đây là phần thân trang chủ chứa gió hàng và sản phẩm tìm kiếm nhiều
CG ' fe Thông tin Tài khoản của tôi
Chính sách bảo mật Xem giỏ hàng
Hotline hỗ trợ?0367698299 Thông tin giao hàng Sản phẩm yêu thích
Tiều khoản và điều kiện Theo dõi đơn hàng của tôi
Liên hệ cửa hàng Bạn cần giúp đỡ? ú A mail ctra hang: theo dừi chỳng tụi nnit2600020snuọ so
Có trên App Store và Google Play Download on the é App Store Thanh toán wise ES) SS i
COPYRIGHT © 2023 BO! Lé Văn Vũ và Nguyễn Ngọc Linh Nhi Đã Được Bảo Vệ Bởi Luật Bản Quyển Thuộc Khoa Công Nghệ Thông Tin, Trường Đại Học Nguyễn Tắt
Hình 2.14 Phần cuỗi của trang chủ chứa thông tin liên lạc và các dịch vụ liên quan
> Logo thương hiệu của shop
> Trang web tạo ra dành cho những người nhằm mục đích tìm hiểu và yêu thích thời trang, shop luôn cập nhật những mẫu sản phâm thời trang mới Trang web còn có chức năng hỗ trợ khách hàng khi người dùng gặp khó khăn về sự cỗ hay bị lỗi hãy liên hệ với web, web sẽ khắc phục về sự cố đã xảy ra và sẽ xử lý
> Được tạo ra để gắn các sản phẩm mặt hàng Iphone những sản phâm mới sẽ được cập nhật ở trên và có chỗ:hỏi đáp , đăng ký, đăng nhập ,sản phẩm , khung tìm kiếm vv
> Khi ta nhấn vào Giỏ hàng trang chủ sẽ chuyên qua trang mới đề khách hàng biết san pham da co khách đã bỏ vào giỏ chưa nêu chưa sẽ hiện thông báo là “ Không có sản phẩm nảo trong giỏ hàng và ngược lại
Hinh 2.16 : Giỏ hàng
> Khi ta nhân vào Lịch sử đơn hàng trang chủ sẽ chuyển qua trang mới để khách hang biệt sản phâm đã có khách đã bỏ vào giỏ chưa nêu chưa sẽ hiện thông báo là
“Lịch sử mua hàng trông và ngược lại
Lịch sử mua tràng trống!
Hình 2.17 :Lịch sử mua hàng
> Khi ta nhắn vào Blog ở tại trang chủ sẽ hiện lên một danh sách các Thông tin về thời trang vừa cập nhật mới nhật trong năm Các sự kiện thời trang lớn và các thông tin vé san Runway
> Khi ta nhân vào Liên hệ ở tại trang chủ sẽ hiện lên một danh sách các vân đê thường được quan tâm và một ô điện những thắc mặc bạn có thê gửi thư và gọi điện yêu câu trợ g1úp
19 chúng tôi rất vui về góp ý của bạn 3 = -
Danny Robert Senior Marketing Mana ô“ Phona: + 000 123 000 77 &
Kellie Jenny Senior Marketing Mana Phong: + 000 123 00 Ema
> Khi ta nhân vào Đăng nhập trang chủ sẽ chuyển qua trang mới có from đăng ký cho khách hàng và hiệu ứng slide cho thây các loạt ảnh về Iphone và Shop
— Remember Mle Forget Password Log in Don't have a account Reg
> Khi ta nhấn vào chỉ tiết sản phẩm trang chủ sẽ chuyên qua trang mới ở đó có tất cả các thông tin của các loại mặt hang tương tự giống với lựa chọn ban đầu , có phần giỏ hàng đề tính tông tiền sản phâm khách lựa chọn ,và phân cuối trang có thông tin liên hệ vả dịch vụ có liên quan
Trang chủ / Cla hang / Sets / Ao So mi ngan tay mau Camri xam
Ao So mi ngan tay mau Camri xam
469.000 - 479.000 Mat Soc Bo Ngan Đen
Sọc Bo Ngắn Trắng Viễn Phối Trắng Soc Bo Dai Trang Sọc Trắng Xuông Soc Bo Dai Den Sọc Đen Xuông
Hình 2.22 :Đây là 3 sản phẩm giống cũng như là tiêu biểu vừa được nói bên trên
Ao So mi ngan tay mau Camri xam
Mau Soc Bo Ngan Den
Soc Bo Ng&n Trang Vién Phdi Trang Soc Bo Dai Trang Soc Trang Xuéng Soc Bo Dai Den Soc Den Xuéng
L (55-65kg) XL (65-75kg) XXL (75-85kg)
Hình 2.24: Chỉ tiết sản phẩm dòng 5
SẢN PHÁM NÓI BẬT
Thiết kế các chức năng 1: Sơ đồ liên kết website
Trang chu Đăng ky/Dang
Hình 2.32: Sơ đồ liên kết website Ghi chú:
Cc > “Thể hiện của một trang web
* ;Liên kết từ trang web này sang trang web khác theo hướng mũi tên
> Chức năng hover khi đề chuột vào sản phẩm thì hình ảnh và văn bản sẽ thực hiện chức năng nâng lên và hạ xuông khi đê chuột ra
Hinh 2.33 2.34: Day la source CSS để thực hiện chức năng
Kết Luận
Sau bao nỗ lực, học tập cô gắng hoàn thành bài tiểu luận này của nhóm em, kết quả của nhóm em đạt được rất nhiều bài học, kinh nghiệm, trải nghiệm mới cho bản thân như: Tính sáng tạo, kỹ năng quản lý thời gian và mài mò tìm kiếm ra những đoạn code mới làm cho bài tiểu luận trở nên đẹp mắt và thâm mỹ hơn
>- Xây dựng thành công giao diện web kinh doanh Iphone Được nâng cao kiến thức và hiểu rõ hơn về HTML, CSS, Bootstrap, Javascript
Giúp người dùng hiệu rõ hơn về việc mua, ban hang online
> Giúp người dùng hiểu thêm về chính sách, điều khoản
> Hỗ trợ, phản hồi và giải quyết những khó khăn cho người dùng
> Giúp người dùng cập nhật những thông tin mới về iphone
> Mở rộng thêm hệ thống cửa hàng
> Tăng số lượng hàng hóa buôn bán cho web
>- Nhập thêm nhiều mẫu mới tăng thêm lựa chọn cho khách hàng
>> Phát triển thêm nhiều dịch vụ ưu đãi đề phát triển thu hút khách hàng
TÀI LIỆU THAM KHẢO
PHU LUC CODE
1 Link source code https: //drive.google.com/file/d/1 TD9JxgEubugw3 Y2 VTPnHZxylxOEp7ot0/view? usp=sharing
“> Header id="header" href="#" cả ="menu-btn"
1d="navbar” html">Trang chu shop.htm1">Cửa hang blog.htm1">Tin tức contact.htm1 ">Liên hệ 1ogin.htm1”ằ>Đăng ký/Đăng nhập ef="cart.html" "fa-solid fa-bag-shopping"
"fa-light fa-outdent">< ss="fa-solid fa-bag-shopping" ch grid-tenp: CLL eee column-
Hinh 2.35: code CSS phan header
> Kết hợp 2 đoạn code ở hình 2.34 vả hình 2.35 trên kết quả ta được g-bag" hr cart.htm1" cla "fa-solid fa-bag-shopping" href="#" id="close" class="fa-solid fa-x"
PCO ee Ree justify-content:
CRT ee h flex-đirection: in
Peek 5 margi TU margin-bottom flex-direct
Trade-in-off ¢ Banner Ưu đã¡-Trai li
Uu dai siéu gid tri ên tất cả sản phẩm iệm nhiều hơn với phiếu giảm giả 80%
Miễn phí vận chuyến l Đặt hàng trực tuyến
Khuyến mãi it ư vấn khách hàng:
Hình 2.41: code html phần content
Hinh 2.42 code CSS Banner Kết quả
30 Ưu đãi-Trao đổi Ưu đãi siêu giá trị Trên tất cả sản phẩm
Tiết kiệm nhiều lơn với phiếu giảm gid 80%
Register
Hinh 2.53: code html phan form
36 display: 3 justify-content: align-items: mìn-he width: background: background-position: background-size: position: width: 4@@px; height: 45 background: border: 2px border-radius: backdrop-filte displa h
Hinh 2.54 code CSS content font-size: color: O position: margin: width position: top: left: 5px; H transform: transla
ẽnputbox input { width: 90%; height: S@px; background: transparent; border: none; outline: none; font-size: lem; padding: 9 35px @ 5px; color: L]#e09; borden-bottom: 2px solid L]#@99;
inputbox { position: absolute; right: 8px; color: L]#@99; font-size: 1.2em; top: 29px;
forget { margin: -15px @ 15px; forget label a {
-s3 3 font-size:.9em; lo TIM: 22-1 color: Li#eee; display: flex; text-decoration: none; justify-content: space-between;
Ps t label input { forget label a:hover {
-Torge abel inpu A a mẽ | text-decoration: underline; i h
Hình 2.56 code CSS content Hinh 2.57 code CSS content bar = document.getElementById('‘bar'); document getElementById('‘close'); t.getElementById(‘navbar'); if (bar) { bar.addEventListener( ‘click’, nav.classList.add('‘active'); i Ee if (close) { close.addEventListener( ‘click’,
Hinh 2.80: code jquery cia phan dang nhap cé chire nang che hodc mé mat khau
_ Remember Me Forget Password Password
Log in Don't have a account Reg