Cặp thẻ phân vùng div Phân chia khu vực, giúp trình duyệt hiểu rõ bố cục của trang web Cặp thẻ tiêu đề h1, h2, h3, h4, h5, h6 Tiêu đề 1 Tiêu đề 2 Tạo tiêu đề cho văn bản Cặp thẻ tạo l
Trang 1TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN ĐIỆN TỬ - VIỄN THÔNG
ĐỒ ÁN THIẾT KẾ I
ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN MÁY TÍNH Giảng viên hướng dẫn: TS Lê Quang Thắng
Hà Nội, 8-2023
Trang 2MỤC LỤC
LỜI NÓI ĐẦU 4
TÓM TẮT ĐỒ ÁN 7
CHƯƠNG 1: LÝ THUYẾT 8
1.1 HTML 8
1.1.1 Khái niệm 8
1.1.2 Cấu trúc một đoạn HTML 8
1.1.3 Các thẻ thường gặp trong HTML 9
1.2 CSS 11
1.2.1 Khái niệm 11
1.2.2 Thuộc tính 11
1.2.3 Cấu trúc và thuộc tính 11
1.2.4 Nhúng CSS vào website 12
1.3 Javascript 13
1.3.1 Khái niệm 13
1.4 Visual Studio Code 13
CHƯƠNG 2: THIẾT KẾ HỆ THỐNG 15
2.1 Phân tích yêu cầu đề tài 15
2.1.1 Yêu cầu 15
2.1.2 Yêu cầu đặt ra 15
2.1.2.1 Thiết bị và phần mềm 15
2.1.2.2 Yêu cầu trang web 15
2.2 Sơ đồ phân cấp chức năng 16
2.3 Sơ đồ luồng dữ liệu 17
2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh 17
2.3.2 Sơ đồ luồng dữ liệu mức đỉnh 17
2.4 Chuẩn hóa………
Trang 32.5 Cơ sở dữ liệu 20
CHƯƠNG 3: KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN 19
3.1 Kết quả sản phẩm 19
3.2 Hướng phát triển 24
CHƯƠNG 4: KẾT LUẬN 25
TÀI LIỆU THAM KHẢO 26
Trang 4LỜI NÓI ĐẦU
Ngày nay, Internet đã trở thành một dịch vụ phổ biến, thiết yếu và có ảnh hưởng lướn tới nhiều lĩnh vực trong cuộc sống con người như thói quen, sinh hoạt và giải trí,… Cùng với đó, lĩnh vực mua sắm ngày càng phát triển mạnh mẽ.Một trong số đó là mua sắm trực tuyến đang thành công và chiếm được nhiều sự thu hút đó là các sàn thương mại điện tử như là Shopee, Lazada, Tiki Nhận thấy đây là một đề tài khá thực tế và cùng với yêu cầu môn học, em quyết định lựa chọn đề tài: Xây dựng trang web bán máy tính làm đề tài chính thức để hoàn thành học phần đồ án thiết kế I của mình Với
đề tài môn học này, em xin cảm ơn sự giúp đỡ và hướng dẫn của thầy Lê Quang Thắng
Do còn nhiều hạn chế về kiến thức cũng như các kỹ năng nên trong quá trình thực hiện
đề tài, em không tránh khỏi những thiếu sót Em rất mong nhận được sự góp ý của cô
để sản phẩm ngày càng hoàn thiện hơn
Em xin trân trọng cảm ơn!
Trang 5DANH MỤC HÌNH VẼ
Hình 2.2 Sơ đồ phân cấp chức năng 17
Hình 2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh 18
Hình 2.3.2 Sơ đồ luồng dữ liệu mức đỉnh 17
Hình 2.5.1 Thông tin người dùng 21
Hình 2.5.2 Thông tin phim 21
Hình 3.1.1 Giao diện đăng nhập của website 22
Hình 3.1.2 Giao diện đăng ký của website 22
Hình 3.1.3 Giao diện trang chủ 23
Hình 3.1.4 Giao diện trang chi tiết phim 23
Hình 3.1.5 Giao diện trang đăng phim 24
Hình 3.1.6 Giao diện trang danh sách phim 24
Hình 3.1.7 Giao diện trang thùng rác 25
Trang 6DANH MỤC BẢNG BIỂU
Bảng 1.1 Các thẻ và cặp thẻ thường gặp trong HTML 9 Bảng 2.4 Bảng chuẩn hoá dữ liệu 20
Trang 7- Chương 2 nói về các giai đoạn thực hiện sản phẩm, bao gồm phân tích yêu cầu
đề tài, tạo sơ đồ chức năng, chuẩn hoá, tạo cơ sở dữ liệu
- Chương 3 trình bày kết quả xây dựng đề tài, đưa ra hướng phát triển
- Chương 4 nêu ra kết luận sau khi thực hiện đề tài
Trang 8CHƯƠNG 1: LÝ THUYẾT
Chương 1 trình bày tóm tắt lý thuyết về các ngôn ngữ được sử dụng trong quá trình làm đồ án như HTML, CSS, Javascript,và các phần mềm được sử dụng như Visual Studio Code
1.1 HTML
1.1.1 Khái niệm
HTML (viết tắt của từ HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản, dùng để xây dựng và cấu trúc các thành phần trong trang web
HTML không phải là ngôn ngữ lập trình
Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML elements) được quy định bằng các cặp thẻ (tags) Các cặp thẻ này được bao bọc bởi dấu < > (ví dụ: <html>) Thông thường các phần tử HTML sẽ được khai báo thành một cặp thẻ mở
và đóng (ví dụ: <p> và </p>) hoặc không có thẻ đóng (ví dụ: <img>)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Trang 9Cặp thẻ chia đoạn p <p>Nội dung </p>
Phân chia một đoạn văn bản thành hai đoạn văn bản riêng biệt
<li>Nội dung 1</li>
<li>Nội dung 2</li>
</ul>
Định dạng một danh sách không theo thứ tự
Cặp thẻ tạo danh
sách có thứ tự ol, li
<ol>
<li>Nội dung 1</li>
<li>Nội dung 2</li>
</ol>
Định dạng một danh sách theo thứ tự
Trang 10Cặp thẻ phân vùng div <div> </div>
Phân chia khu vực, giúp trình duyệt hiểu rõ bố cục của trang web
Cặp thẻ tiêu đề
h1, h2, h3, h4, h5, h6
<h1>Tiêu đề 1</h1>
<h2>Tiêu đề 2</h2> Tạo tiêu đề cho văn bản
Cặp thẻ tạo liên
kết trong văn bản a <a>Liên kết</a>
Tạo một liên kết trong văn bản HTML với các thuộc tính định dạng cho liên kết
Thẻ hình ảnh Img <img> Đưa hình ảnh vào văn bản với
<td>Cặp thẻ tạo cột</td>
Tạo bảng
Cặp thẻ tạo form form <form></form>
Tạo vùng làm việc với form với các thuộc tính: name, action, method (phương thức truyền dữ liệu trong form, có giá trị là GET hoặc POST) Thẻ khai báo một
Trang 111.2 CSS
1.2.1 Khái niệm
CSS (viết tắt của cụm từ Cascading Style Sheets), là ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML) CSS là ngôn ngữ tạo nên phong cách cho trang web Nếu như HTML là ngôn ngữ nền tảng cho một website thì CSS định hình phong cách (tất cả những gì tạo nên giao diện website)
1.2.2 Thuộc tính
Các thuộc tính về kích thước: width, height,…
Các thuộc tính phông nền: color, image, repeat, background-position,…
background-Các thuộc tính về font chữ: font-family, font-style, font-weight, font-size,…
Các thuộc tính về text: color, align, indent, word-spacing, transform,…
text-Thuộc tính ID: Cú pháp: id=“tên_id” Khi gọi ID ta dùng dấu “#”
Thuộc tính class: Cú pháp: class=“tên_class” Khi gọi class ta dùng dấu “.”
Trong CSS, mô hình hộp (box model) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần Nó bao gồm padding (vùng đệm), border (viền), margin (căn lề)
Trang 131.3 Javascript
1.3.1 Khái niệm
Javascript là 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 Có thêm JavaScript sẽ làm cho website trở nên “động” hơn khi xử lí các sự kiện (events) so với việc chỉ sử dụng HTML và CSS
Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome,… Trong javascript cũng có các khái niệm về biến, câu điều kiện, vòng lặp, hàm, mảng một chiều, mảng 2 chiều,…
Javascript có thể chạy ở cả bên client và bên server
1.3.2 Viết các đoạn mã javascript vào trong tài liệu HTML
Các đoạn mã javascript có thể được viết trực tiếp trong cặp thẻ <script></script>
Trong đó file app.js chứa các đoạn mã javascript
1.4 Visual Studio Code
Visual Studio Code là một trong những trình soạn thảo mã nguồn phổ biến nhất được sử dụng bởi các lập trình viên Nhanh, nhẹ, hỗ trợ đa nền tảng, nhiều tính năng
và là mã nguồn mở chính là những ưu điểm vượt trội khiến Visual Studio Code ngày càng được ứng dụng rộng rãi
Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntax highlighting,
tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tính năng tùy chỉnh,
Trang 14Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các tùy chọn khác
Trang 15Máy tính có thể thiết kế được website
Phần mềm viết các mã lệnh: Visual Studio Code
2.1.2.2 Yêu cầu trang web
Hệ thống gồm 2 phần:
- Phần dành cho người sử dụng:
Người dùng có thể đăng nhập, đăng kí tài khoản, Thêm hoặc bớt sản phẩm vào giỏ hàng và có thể xem lịch sử mua hàng
- Phần dành cho người quản trị:
Người quản trị có quyền kiểm soát mọi hoạt động của hệ thống:
- Thêm, sửa, xóa sản phẩm, điều chỉnh giá và thông tin
- Thống kê lượng hàng bán ra
Trang 162.2 Sơ đồ phân cấp chức năng
Hình 2.2 Sơ đồ phân cấp chức năng
Mô tả chức năng cụ thể:
1 Đăng kí: người dùng tạo tên, email đăng kí, mật khẩu Thông tin sau khi đăng
kí sẽ được lưu vào database Người dùng sau khi đăng kí tài khoản hợp lệ có thể chuyển tiếp tới trang đăng nhập
2 Đăng nhập: người dùng có tài khoản có thể đăng nhập và chuyển tiếp tới trang chủ
3 Tìm kiếm: Người dùng có thể tìm kiếm các sản phẩm thông qua tên
4 Mua hàng: Người dùng có thể lựa chọn các sản phẩm yêu thích tại trang chủ sau
đó thêm vào giỏ hàng và đi tới thanh toán Tại thanh toán người dùng sẽ cung thông tin để giao hàng và đảm bảo quyền lợi về bảo hành
5 Đăng xuất: Nếu người dùng đăng xuất, hệ thống sẽ chuyển tiếp đến trang chủ, trạng thái giỏ hàng sẽ được đưa về trạng thái rỗng
Website bán máy tính
trực tuyến Đăng ký Đăng nhập Tìm kiếm Thêm vào
giỏ hàng Đăng xuất
Trang 172.3 Sơ đồ luồng dữ liệu
2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh
Hình 2.3.1 Sơ đồ luồng dữ liệu mức ngữ cảnh
2.3.2 Sơ đồ luồng dữ liệu mức đỉnh
Hình 2.1.2 Sơ đồ luồng dữ liệu mức đỉnh
Trang 182.5 Cơ sở dữ liệu
Ta có các cơ sở dữ liệu:
Hình 2.5.1 Thông tin sản phẩm
Trang 19CHƯƠNG 3: KẾT QUẢ VÀ HƯỚNG PHÁT TRIỂN
3.1 Kết quả sản phẩm
Hình 3.1 Giao diện đăng nhập của website
Tại màn hình đăng nhập,người dùng sẽ dùng tải khoản đã đăng ký ở trước đó đăng nhập
Trang 20Hình 3.2 Giao diện đăng kí của website
Người dùng sẽ đăng ký tài khoản với các thông tin như họ và tên, email, tên đăng nhập, mật khẩu.Sau đó hệ thống sẽ chuyển trang qua màn hình đăng nhập, người dùng sẽ đăng nhập với tài khoản và mật khẩu mà đã tạo trước đó
Trang 21Hình 3.3 Giao diện trang chủ
Giao diện bao gồm các thông tin về danh mục sản phẩm, giới thiệu về cửa hàng Một danh sách các sản phẩm kèm theo đánh giá và giá kèm theo sản phẩm
Hình 3.4 Giao diện trang chi tiết sản phẩm
Tại giao diện chi tiết trang sản phẩm, hình ảnh sản phẩm được hiển thị kèm theo các thông số chi tiết của máy, cùng với giá của sản phẩm
Trang 22Hình 3.5 Giao diện trang quản lý sản phẩm
Trang quản lý sản phẩm theo các danh mục riêng Mỗi danh mục là một loại sản phẩm có chung thuộc tính, từ đó có thể tìm được các sản phẩm theo yêu cầu nhanh chóng hơn
Hình 3.6 Giao diện trang hỗ trợ khách hàng
Mọi thắc mắc của khách hàng về sản phẩm hoặc cần sự trợ giúp của nhân viên chăm sóc khách hàng cho việc xem xét và hiểu rõ thêm về sản phẩm sẽ được gửi trực tiếp qua mục trên hoặc liên hệ qua thông tin liên lạc
Trang 23Hình 3.6 Giao diện trang giỏ hàng
Khi thêm một sản phẩm mới vào giỏ hàng, sản phẩm đó sẽ được hiện thị vào mục giỏ hàng
Trang 243.2 Hướng phát triển
Mặc dù đã đạt được những yêu cầu của đề tài đề ra, nhưng để sản phẩm ngày càng được hoàn thiện và tốt hơn, em xin được đề xuât một số hướng phát triển trong tương lai cho sản phẩm:
- Cải tiến giao diện website trở nên đẹp mắt, thân thiện với người dùng hơn
- Tạo chế độ tối, phù hợp với xu thế hiện nay
- Tạo giao diện tương thích với các thiết bị smartphone, tablet,…
Trang 25Trong suốt quá trình thực hiện đề tài, em đã cố gắng, tích cực tìm hiểu và học hỏi
để có được kết quả tốt nhất Sản phẩm về cơ bản đã được hoàn thành tuy nhiên do trình
độ và hiểu biết còn hạn chế nên sản phẩm không thể tránh khỏi những thiếu sót Em mong nhận được những ý kiến đóng góp của cô để có thể tiến bộ hơn trên con đường học tập
Trang 26TÀI LIỆU THAM KHẢO
[1] https://vi.wikipedia.org/wiki/HTML
[2] https://vi.wikipedia.org/wiki/CSS
[3] https://itviec.com/blog/hoc-nodejs/
[4] style-css/
https://www.hostinger.vn/huong-dan/khac-biet-giua-inline-external-va-internal-[5] https://topdev.vn/blog/html-la-gi/https://topdev.vn/blog/css-la-gi/
[6] runtime-call-stack/
https://topdev.vn/blog/cach-thuc-hoat-dong-cua-javascript-tong-quan-ve-engine-[7] https://www.w3schools.com/js/default.asp
[8] https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started
[9] https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#successful_responses [10] Tài liệu HTML, CSS:
https://www.youtube.com/playlist?list=PL_-VfJajZj0U9nEXa4qyfB4U5ZIYCMPlz [11] Tài liệu Javascript:
https://www.youtube.com/playlist?list=PL_-VfJajZj0VgpFpEVFzS5Z-lkXtBe-x5