đồ án môn học thiết kế và xây dựng hệ thống quản lý cửa hàng băng đĩa nhạc

Đối với một cửa hàng, doanh nghiệp, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ rất cần thiết.. - Quản lý thông tin khách hàng - Qu

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN MÔN HỌC THIẾT KẾ VÀ XÂY DỰNG HỆ THỐNG QUẢN LÝ

CỬA HÀNG BĂNG ĐĨA NHẠC

Giảng viên hướng dẫn : ThS Đỗ Hoàng Nam Sinh viên thực hiện : Tống Nguyễn Minh Triết Mã số sinh viên : 2100010139

Chuyên ngành : Kỹ Thuật Phần Mềm

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH TRUNG TÂM KHẢO THÍ HỌC KỲ 3 NĂM HỌC 2022 - 2023 KỲ THI KẾT THÚC HỌC PHẦN

PHIẾU CHẤM THI TIỂU LUẬN/BÁO CÁO

Môn thi: Kiến trúc và tích hợp hệ thống Lớp học phần: 21DKTPM1B Nhóm sinh viên thực hiện:

1 Tống Nguyễn Minh Triết Tham gia đóng góp: Tất cả 2 Tham gia đóng góp: Ngày thi: 25/08/2023 Phòng thi: L.701 Đề tài tiểu luận/báo cáo của sinh viên: Thiết kế và xây dựng hệ thống quản lí cửa hàng băng đĩa nhạc

Phần đánh giá của giảng viên (căn cứ trên thang rubrics của môn học): Tiêu chí (theo

được Cấu trúc của

BM-ChT-TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH

KHOA CÔNG NGHỆ THÔNG TIN

Email: 2100010139@nttu.edu.vn SĐT: 0942919707Tên đề tài: Thiết kế và xây dựng hệ thống quản lí cửa hàng băng đĩa nhạc

Giảng viên giảng dạy: ThS.Đỗ Hoàng Nam

Thời gian thực hiện: từ ngày 18/06/2022 đến 24/08/2022 Nhiệm vụ/nội dung (mô tả chi tiết nội dung, yêu cầu, phương pháp, … ) :

a) Khảo sát, thu thập và phân tích hiện trạng các dữ liệu, quy trình, ứng dụng, webiste mẫu trên các lĩnh vực liên quan đến đề tài Quản lý hệ thống cửa hàng băng đĩa nhạc

b) Phân tích chi tiết các yêu cầu (đối tượng, các yêu cầu chức năng, quy trình, v.v) c) Phân tích và thiết kế các mô hình (mô hình hệ thống, mô hình use-cases, mô

hình lớp, mô hình dữ liệu quan hệ, v.v) d) Quản lý dự án

e) Kiểm thử phần mềm f) Triển khai phần mềm g) Viết báo cáo theo yêu cầu

h) áp dụng các kiến thức đã học để thực hiện đề tài như:

▪ Phân tích thiết kế hệ thống thông tin, ▪ Cơ sở dữ liệu

▪ Lập trình Web ▪ Quản lý dự án ▪ Kiểm thử phần mềm

Nội dung và yêu cầu đã được thông qua Bộ môn

TRƯỞNG BỘ MÔN

(Ký tên)

ThS Phạm Văn Đăng

TP HCM, ngày 25 tháng 08 năm 2023 GIẢNG VIÊN HƯỚNG DẪN

(Ký tên)

ThS Đỗ Hoàng Nam

LỜI CẢM ƠN

Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối với các thầy cô của trường Đại học Nguyễn Tất Thành, đặc biệt là các thầy cô ở khoa Công nghệ thông tin và trong chuyên ngành Kỹ thuật phần mềm của trường đã tạo điều kiện để em có thể học tập và hoàn thành tốt đồ án môn học này Và em cũng xin chân thành cám ơn thầy Đỗ Hoàng Nam đã nhiệt tình hướng dẫn hướng dẫn em hoàn thành tốt bài tiểu luận

Là một trong những bài tiểu luận đầu trong những ngày học trong môi trường Đại học, nên kiến thức cũng như kinh nghiệm thực tế của em còn hạn chế dẫn đến bài không thể tránh khỏi những thiếu sót Em rất mong nhận được ý kiến đóng góp thầy, cô để em học hỏi được nhiều kỹ năng, kinh nghiệm để có thể hoàn thành tốt hơn trong những đồ án sắp tới

Xin cảm ơn bạn bè, gia đình đã giúp đỡ, trao đổi và động viên cho em khiến em luôn đạt hiệu suất tốt trong suốt qua trình thực hiện đồ án để có thể hoàn thành bài đúng thời hạn

Em xin chân thành cảm ơn !

TPHCM, ngày 25 tháng 08 năm 2023

Sinh viên thực hiện (Ký tên) Tống Nguyễn Minh Triết

LỜI MỞ ĐẦU

Ngày nay, với với sự phát triển vượt bậc của khoa học kỹ thuật Công nghệ thông tin ứng dụng, Công nghệ thông tin dần chiếm lĩnh hầu hết các nhu cầu của con người, quốc gia, và thế giới, ta không thể kiếm nỗi một tấc đất mà không có sự hiện diện của Công nghệ thông tin, chung quy sự tin học hóa đang dần trở nên rất quan trọng trong tất cả vấn đề đang tồn tại trên trái đất

Ta thấy nó xuất hiện ở mọi lĩnh vực, kinh tế, công nghiệp, nông nghiệp, chính phủ, sức khỏe, giải trí… Vân vân và mây mây, để đếm hết tất cả chúng cũng là một vấn đề lớn, nhất là trong thời đại tin học hóa như hiện tại Ứng dụng của nó không gì để bàn cãi khi mà chúng ta ứng dụng chúng vào tất cả vấn đề hằng ngày mà hiệu suất có thể gấp 100 lần, à không 1000 lần hoặc hơn cả thế so với việc chỉ dựa vào khả năng con người thậm chí chúng có thể giải quyết những vấn đề nan giải mà tưởng chừng con người không thể làm được

Tìm kiếm thông tin, xử lý vấn đề giờ đây không còn khó khăn với một chiếc máy tính có khả năng kết nối Internet mà ai ai cũng có thể sở hữu và sử dụng được thông tin bạn cần? đơn giản chỉ với việc gõ một vài kí tự từ bàn phím, enter trên thanh tìm kiếm của google, hàng nghìn, hàng triệu kết quả sẽ xuất hiện trước mắt bạn với thời gian chờ chưa đến một giây

“Theo nghiên cứu của Trung tâm kinh doanh toàn cầu của Đại học Tufts (Mỹ), hiện Việt Nam xếp hạng 48/60 quốc gia có tốc độ chuyển đổi kinh tế số hóa nhanh trên thế giới, đồng thời xếp hạng 22 về tốc độ phát triển số hóa Điều đó chứng tỏ Việt Nam đang trong nền kinh tế số hóa và lĩnh vực thương mại điện tử có triển vọng tiến xa hơn Báo cáo Chỉ số Thương mại điện tử Việt Nam năm 2018 cũng cho thấy, tốc độ tăng trưởng trong một số lĩnh vực cụ thể rất ngoạn mục Đối với lĩnh vực bán lẻ trực tuyến, thông tin từ hàng nghìn website thương mại điện tử cho thấy, tỷ lệ tăng trưởng doanh thu năm 2017 tăng 35% Khảo sát gián tiếp qua một số DN chuyển phát hàng đầu cho thấy, tốc độ tăng trưởng doanh thu từ dịch vụ chuyển phát từ 62% đến 200%.”.[1]

Kì diệu đến thế, tất nhiên những người trẻ đã ứng dụng chúng rất tốt vào công cuộc xây dựng nên sự nghiệp của bản thân, quản lý, điều phối sản phẩm, marketing, hay hàng nghìn

vấn đề khác trong khởi nghiệp, giờ đây dần trở nên dễ dàng hơn với họ, hàng nghìn trang web thương mại điện tử (Bán hàng qua Internet) mọc lên, với những diện mạo độc đáo, thu hút người mua mạnh mẽ Đối với một cửa hàng, doanh nghiệp, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầu của khách hàng sẽ rất cần thiết Vậy phải quảng bá thế nào? đó là xây dựng một Website cho cửa hàng của chính mình và quảng bá tất cả sản phẩm của mình bán Vậy Website đó như thế nào, em sẽ thể hiện nó qua bài đồ án này

Qua khảo sát thực tế, ở Việt Nam thì hình thức bán hàng qua mạng này vẫn chưa được hoàn chỉnh bởi hình thức thanh toán quá phức tạp, cho nên ở website này em có thể đưa ra một số giải pháp giả lập để làm cho dự án đơn giản hơn Trong quá trình phân tích và thực hiện những bước để quản lí một dự án qua tất cả khâu, sẽ không tránh khỏi sai sót, mong thầy góp ý và giúp em chỉnh sửa

Trước nhất, Website sẽ được đảm bảo những yêu cầu sau: - Quản lý sản phẩm

- Quản lý thông tin khách hàng - Quản lý đơn hàng

- Các danh mục sản phẩm của trang web, cũng như hiện thị các sản phẩm của trang web Trong báo cáo đồ án của em sẽ có những thiếu sót, những nội dung chưa được chau chuốt và đầy đủ, mong thầy cô có thể góp ý để em có những bài báo cáo hoàn thiện tốt hơn cho lần sau, báo cáo của em gồm những nội dung chính:

- Chương 1: Tổng quan đề tài - Chương 2: Cơ sở lí thuyết - Chương 3: Triển khai ứng dụng web - Chương 4: Quản lý dự án - Chương 5: Thực nghiệm và triển khai thiết kế hệ thống - Chương 6: Kiểm thử phần mềm

Kết thúc : Kết luận Nội dung báo cáo Đồ án môn học

MỤC LỤC

1.3 Mục tiêu, tóm tắt về chức năng, thông tin của Website 3

3.1 Các module chức năng: Trình bày sơ đồ chức năng 18

3.4 GUI: Mô tả giao diện các nhóm trang web của website 22

4.10 Theo dõi tiến độ 44

CHƯƠNG 5: THỰC NGHIỆM VÀ TRIỂN KHAI THIẾT KẾ HỆ THỐNG 46

5.2 Thiết kế xử lý: Trình bày chi tiết các bước cài đặt các module chức năng 52

Hình 5.1.1 Giao diện trang chủ 49

Hình 5.2.3 List nhạc hiện ra khi ấn vào dạng nhạc bất kì 58

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài và khảo sát hiện trạng

Trải qua sự tiến bộ vượt bậc và nhanh chóng, Công nghệ thông tin ngày càng được tin tưởng và ứng dụng trong tất cả lĩnh vực của con người như kinh doanh, sức khỏe, giáo dục, chính trị, giải trí,… trong đó không thể kể đến lĩnh vực nhà nhà người người đón nhận một cách mạnh mẽ, Thương mại điện tử ngày trước ta thường mua những sản phẩm bằng cách đi tới chổ bán, mua và trả tiền tại chỗ, điều đó ít nhiều tốn khá nhiều thời gian, đôi khi là tốn sức nếu cửa hàng chúng ta muốn mua quá xa, nhưng ngày nay, nhờ thương mại điện tử, chỉ cần vài lần click, sản phẩm sẽ được giao tới nhà bạn, và việc của bạn chỉ phải trả tiền Qua đó chúng ta thấy sự tiện lợi linh hoạt của thương mại điện tử, thậm chí còn tốt hơn thế đối với người bán khi có thể lượt bỏ đi nhiều chi phí như quảng cáo,…

Tiện lợi như thế, nhưng việc thiết kế một website bán hàng cần rất nhiều yếu tố chẳng hạn như tiêu chí của nó như tiện lợi chẳng hạn, đúng vậy, không tiện lợi thì em ra tiệm mua cho nhanh Bên cạnh đó chúng ta cần một giao diện dễ nhìn dễ dùng, thân thiện với tất cả đối tượng người mua Và không thể thiếu đó chính là dễ quản lí đối với người bán hàng Xu hướng của người dùng càng ngày càng mở rộng ở nhiều loạt mặt hàng khác nhau Với Băng đĩa, tuy là mặt hàng không còn chuộng với giới trẻ hiện này bởi vì người người nhà nhà giờ đây có thể sở hữu những chiếc máy MP3, máy nghe nhạc chuyên dụng với những bài hát được phát ra từ dữ liệu số, Nhưng, không phải vì thế mà sản phẩm không có ai tiếp cận, Hiện nay, có khá nhiều người ở độ tuổi trung niên muốn tìm kiếm lại cảm giác nghe nhạc băng đĩa, bởi vì chất nhạc hoài cổ và những cảm giác xưa trẻ của nó, còn các bạn trẻ thì lại muốn tìm những chất âm mới, cảm giác nghe nhạc mới khi mà băng đĩa là một cảm giác mới lạ đối với các bạn ấy Nắm bắt được tình hình đó, Website Shop Băng Đĩa của em được xây dựng lên, Với tính cạnh tranh gần như bằng không, cao lắm thì đếm được trên đầu ngón tay, cùng với những thiết kế mới lạ, những chức năng tiện lợi, giúp người dùng là những đối tượng trên mua được sản phẩm mà họ thích

Bước vào Website, mục đích của người Xây dựng Website đối với người mua là làm

tên, giá, số lượng, nhãn hiệu,… cùng những chức năng giúp khách hàng tiếp cận, thao tác với sản phẩm dễ dàng và sở hữu chúng chỉ sau vài lần click Nắm được những điều đó, hôm nay em đã Xây dựng Website bán băng đĩa và cũng là đồ án môn học kiến trúc và tích hợp hệ thống

1.2 Lý do chọn đề tài

Với sự phát triển mạnh mẽ của Thương mai điện tử, hay còn nói hoa mỹ hơn là xu thế của thời đại mua sắm, nhu cầu mua hàng online ngày càng gia tăng nếu không muốn nói là “bùng nổ”, từ người già đến người trẻ, từ con nít tới người lớn, ai cũng đã và đang đắm chìm vào những mặt hàng xuất hiện trên Internet ở các địa chỉ khác nhau, khiến chúng là một bộ phần không thể thiếu với thời thế hiện nay Hàng nghìn hình thức kinh doanh online xuất hiện trên Internet, với nhiều mẫu mã đa dạng khác nhau Vì vậy để cạnh tranh và phổ biến, hầu hết các cửa hàng sẽ áp dụng phương pháp bán hàng qua mạng để khách hàng có thể tìm kiếm sản phẩm mà không tốn nhiều thời gian, chi phí và sự tiện lợi sẽ đẩy sự hiệu quả buôn bán của cửa hàng lên một tầm cao mới Không chỉ thế, Thương mại điện tử còn giúp những mặt hàng tưởng như không còn thấy bao giờ nữa trở lại, điều đó là điều khiến em thích thú nhất khi chọn đề tài này

Đối với mỗi cửa hàng cửa hang thời quy mô dù lớn dù nhỏ, việc quảng bá và giới thiệu đến khách hàng các mặt hàng tốt, cung cấp các thông tin giúp cho khách hàng lựa chọn được những mẫu mã ưng ý vẫn luôn là điều thiết yếu Với những sản phẩm băng đĩa, khách hàng có thể tìm ra những bản nhạc phù hợp với bản thân và túi tiền trong tích tắc, với những thiết bị đa dạng, thể loại đã dạng, giờ đây băng đĩa tưởng như đã lỗi thời và bị thay thế bởi Digital Music, nhưng không chúng sẽ quay lại với những người yêu âm nhạc hoài cổ, có tiếng rè rè của băng chạy Bản thân là một người khá thích băng đĩa và nghe thường xuyên nó thay thế Digital Music, lý do em chọn đề tài này nói lên sự yêu thích của em đối với băng đĩa và phổ biến đến tất cả những người đã quên đi thứ âm nhạc hoài cổ này

Vậy làm sao để có thể giúp khách hàng vừa có thể tiết kiệm thời gian, chí phí, cũng như giúp cửa hàng phổ biến sản phẩm một cách thuận lời đồng thời cắt giảm một số chi phí không cần thiết? với sự chỉ giảng tận tình của thầy Đỗ Hoàng Nam, em sẽ trả lời câu hỏi

trên bằng đồ án của em, đồng thời em cũng muốn đồ án của mình nổi bật lên những thuận lợi đã nói ở trên và được đưa vào thực dụng trong ngành băng đĩa

1.3 Mục tiêu, tóm tắt về chức năng, thông tin của Website

Mục đích của website là: Tăng cơ sở khách hàng hiện có, tiếp cận khách hàng mới và tăng chuyển đổi thành khách hàng tiềm năng Tăng sự tương tác với các nhà thầu và trong công ty Nơi giao tiếp hiệu quả với khách hàng

Tăng phạm vi khách hàng

Một cửa hàng địa phương có thể thu hút được khách địa phương nhưng lại là hạn chế đối với những khách hàng ở khu vực khác Tuy nhiên, khi doanh nghiệp xây dựng một trang web riêng thì phạm vị khách hàng sẽ không bị giới hạn Cơ hội nhận được đơn đặt hàng của khách từ khắp mọi nơi trên đất nước sẽ ngày càng tăng cao

Tăng tính tương tác

Khi có một trang web riêng, doanh nghiệp sẽ giúp khách hàng tìm kiếm một cách nhanh chóng các sản phẩm và hiển thị những dịch vụ mong muốn Điều này làm giảm bớt thời gian tìm kiếm cho khách hàng và đưa doanh nghiệp lên một thứ hạng tốt hơn

Xúc tiến kinh doanh hiệu quả

Các phương án để xúc tiến kinh doanh thông thường là quảng cáo trên báo chí và các phương tiên thông tin đại chúng Tuy nhiên, chi phí cho các loại hình này lại quá cao trong khi xây dựng một trang web riêng, doanh nghiệp chỉ phải mất một khoản nhỏ cho việc đầu tư và bảo trì trang thiết bị

Xây dựng thương hiệu

Xây dựng thương hiệu là điều đáng quan tâm của một doanh nghiệp và trang web sẽ giúp doanh nghiệp làm điều này Nó phản ánh một hình ảnh chuyên nghiệp thông qua giao diện và các hoạt động của doanh nghiệp Địa chỉ email, tên miền và cách giao tiếp với khách hàng qua web giúp doanh nghiệp xây dựng uy tín, tạo dựng thương hiệu và truyền bá hình ảnh trên toàn thế giới

Nhu cầu tìm kiếm chất âm hoài cổ và cảm giác của nhạc băng đĩa ngày càng trở lại mạnh mẽ Bởi vậy, việc Xây dựng Website Shop Băng Đĩa chuyên nghiệp và ấn tượng sẽ

giúp doanh nghiệp hay cá nhân xây dựng nền tảng quảng bá online, đưa sản phẩm tiếp cận đối tượng mua tốt hơn

Tiên phong cho xu hướng nghe nhạc bằng băng đĩa trở lại tại Việt Nam

Tiên phong trong việc đưa và nâng cao những sản phẩm băng đĩa nhạc trở lại Việt Nam, kết hợp cùng Internet, thương mại điện tử đang là xu hướng của thời đại mới, tuy cũ mà mới là phương châm của Website Shop Băng Đĩa đối với khách hàng

Ưu điểm lớn nhất của kinh doanh online là xu hướng thời đại “không bao giờ lỗi mốt” Bởi Internet ngày càng trở nên phổ biến và đại chúng hơn

Bổ sung thêm phương thức tiếp cận thực khách hiệu quả trên Internet

Thiết kế website Shop Băng Đĩa là giải pháp hợp lý bởi khả năng tiết kiệm chi phí Đồng thời có thể triển khai các kế hoạch Marketing Online đi kèm như SEO, quảng cáo Google Adwords,… giúp dễ dàng thu hút nhóm khách hàng tiềm năng và tăng doanh thu kinh doanh hiệu quả

Thực khách đang truy tìm các những sản phẩm tưởng chừng như lỗi thời, và muốn tìm kiếm cộng đồng, cửa hàng phục vụ cho sở thích nghe nhạc bằng băng đĩa

Với sự phát triển của nền kinh tế, và những nhu cầu mới của giới trẻ Những sản phẩm tưởng như lỗi thời đang bùng nỗ trở lại một cách mạnh mẽ, dần chiếm đi tuy không quá nhiều, nhưng đủ để tạo ra những cộng đồng lớn yêu thích thứ âm nhạc hoài niệm này Đi cùng với đó là sự đổi mới không ngừng của công nghệ với hình thức đặt đĩa nhạc trực tuyến trên Internet được người dùng rất yêu thích Mang lại những trải nghiệm nhanh chóng và tốt nhất cho khách hàng

Các chức năng cần có của một ứng dụng Website bán băng đĩa của các cửa hàng đối với người dùng là:

-Phân phối, danh mục sản phẩm: đây là tính năng rất quan trọng khi xây dựng ứng

dụng web bán Băng đĩa của cửa hàng Bởi trang này khách hàng sẽ tìm hiểu và khám phá các Sản phẩm băng đĩa của cửa hàng Do đó danh sách các loại băng đĩa nhạc được sắp xếp rõ rang và thể hiện dung các tiêu chí như: hình ảnh sắc nét và nổi bật giá cả và miểu để giới thiệu sản phẩm một cách tốt nhất

-Đặt hàng trực tiếp: cho phép khách hàng lựa chọn băng đĩa thông qua website Với hệ thống đặt hàng trực tuyến, bạn có thể ghi nhận chi tiết thông tin về đơn hàng (bao gồm thông tin khách hàng, băng đĩa đã lựa chọn, thông tin thanh toán)

-Trang chủ: là trang đầu tiên khi khách hàng truy cập vào website Tại trang chủ cung

cấp các thông tin về các sản phẩm hay chương trình khuyến mãi nếu có Vì thế trang chủ được thiết kế với tiêu chí như sau: giao diện ấn tượng, điểm ra các sản phẩm nổi bật với hình ảnh đầy đủ, danh mục sản phẩm được thiết kế hợp lý, bố cục rõ ràng và thân thiện với người dùng

-Giỏ hàng: Giỏ hàng là cầu nối trung gian giữa trang sản phẩm và quy trình thanh toán

Do đó, khách hàng có đi đến quyết định thanh toán và hoàn hành đơn hàng hay không phụ thuộc vào sự tối ưu và tính năng của giỏ hàng Khách hàng có thể dễ dàng điều chỉnh số lượng sản phẩm được thêm vào giỏ hàng, nhanh chóng cũng như loại bỏ các sản phẩm không phù hợp hoặc không có nhu cầu mua hàng nữa Điều này vô cùng tiện lợi cho khách hàng, giúp giải quyết những vấn đề của khách hàng khiến cho việc mua hàng tốt hơn, ví dụ như chẳng may đưa nhầm số lượng sản phẩm vào giỏ hàng, hay mua những sản phẩm mình không thích Thay vì việc xóa sản phẩm hoàn toàn và quay trở lại để chọn đúng số sản phẩm cần mua, khách hàng có thể tùy chỉnh ngay trên trang giỏ hàng

Các chức năng của của ứng dụng web bán băng đĩa đối với 1 quản trị viên:

-Quản lý sản phẩm ( Băng đĩa ): quản trị viên có thể thêm sản phẩm mới vào trong

database của web, chỉnh sửa thông tin sản phẩm, xem thông tin chi tiết sản phẩm, xóa sản phẩm ra khỏi database của web

-Quản lý tài khoản khách hàng: quản trị viên có thể xem thông tin của khách hàng

cũng như xóa tài khoản người dùng

-Quản lý đơn đặt hàng: thông tin về các sản phẩm trong giỏ hàng đều được hiển thị đầy

đủ, chi tiết trong phần quản lí giỏ hàng của người mua, tránh trường hợp khách hàng đã đặt hàng nhưng người giao lại không trả hàng đầy đủ

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Phần mềm, nền tảng, ngôn ngữ sử dụng

2.1.1 HTML

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 HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links, blockquotes,…

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ể tạo ra các chức năng “động” Hiểu một cách đơn giản hơn, HTML cũng tương tự như phần mềm Microsoft Word, nó chỉ có tác dụng bố cục và định dạng trang web

Xuất bản lần đầu tiên vào năm 1991 bởi Tim Berners-Lee, HTML đã nhanh chóng phổ biến trên toàn thế giới với tốc độ chóng mặt Tính cho đến thời điểm hiện nay, HTML được xem như một chuẩn mực của công việc thiết kế website Ưu điểm của HTML là

gì? [2]

HTML được sử dụng để tạo bố cục, cấu trúc trang web Nó có một số ưu điểm sau:  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  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,…)

Nhược điểm của HTML là gì?

Bên cạnh ưu điểm, HTML cũng có các nhược điểm nhất định Cụ thể như sau:  Chỉ được áp dụng chủ yếu cho web tĩnh Nếu muốn tạo các tính năng động, lập

trình viên phải dùng thêm JavaScript hoặc ngôn ngữ backend của bên thứ 3 (ví dụ như: PHP)

 Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tố trùng lặp như header, footer

 Khó để kiểm soát cách đọc và hiển thị file HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được tag mới Do đó, dù trong HTML document có sử dụng các tag này thì trình duyệt cũng không đọc được)

 Một vài trình duyệt còn chậm cập nhật để hỗ trợ tính năng mới của HTML

Vai trò của HTML trong lập trình Web

HTML là một loại ngôn ngữ đánh dấu siêu văn bản Như tôi đã đề cập ở trên, nó giúp cấu thành các cấu trúc cơ bản của một Website, làm cho trang Web trở thành một hệ thống hoàn chỉnh Cụ thể, ngôn ngữ đánh dấu siêu văn bản này giúp bố cục, chia khung sườn các thành phần trang Web Đồng thời, nó còn hỗ trợ khai báo các File kỹ thuật số như nhạc, Video, hình ảnh,…

Nếu muốn Website có cấu trúc tốt, sử dụng nhiều loại yếu tố trong văn bản, bạn sẽ cần đến HTML Theo quan điểm của tôi, lập trình viên có thể lựa chọn ngôn ngữ lập trình riêng cho Website tùy vào mục đích sử dụng Nhưng HTML thực chất chứa những yếu tố cần thiết cho mọi thể loại Website Trang Web của bạn sẽ cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập Điều này đúng dù trang của bạn xây dựng trên bất kỳ nền tảng nào, giao tiếp với bất kỳ ngôn ngữ lập trình nào để xử lý dữ liệu

Theo tôi được biết, trước khi bắt tay vào thiết kế, làm việc trên một trang Web thì nhà phát triển Web, lập trình viên đều phải học HTML như một loại ngôn ngữ cơ bản

Hình 2.1.1: Ảnh minh họa HTML

2.1.2 CSS

CSS là chữ viết gọn của cụm từ “Cascading Style Sheet Language” – ngôn ngữ tạo phong cách cho website Nó được dùng để tạo phong cách và định kiểu cho những yếu tố viết dưới dạng ngôn ngữ đánh dấu, mà phổ biến nhất vẫn là HTML

Đồng thời, CSS còn có thể điều khiển định dạng của nhiều trang web cùng một lúc, giúp tiết kiệm công sức cho những nhà phát triển CSS cũng được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996 với một lý do hết sức đơn giản, là vì HTML không được thiết kế để thêm tag giúp định dạng trang web, bạn chỉ có thể dùng nó để “đánh dấu” mà thôi

Những thẻ như <font> xuất hiện trong HTML phiên bản 3.2 đã gây ra rất nhiều phiền phức cho lập trình viên Vì website có bố cục, màu nền và phong cách khác nhau nên để viết lại code cho trang là cả một quá trình dài đầy cực nhọc Do vậy mà CSS được W3C tạo ra để giải quyết vấn đề trên

Mối quan hệ giữa HTML và CSS là vô cùng mật thiết Chúng bổ trợ cho nhau và không thể tách rời

Xét về mặt lý thuyết thì không có CSS cũng vẫn được Nhưng khi đó, website của bạn sẽ chỉ đơn thuần là một trang trống chứa đầy văn bản vô cùng nhàm chán mà thôi!

Hình 2.1.2: Ảnh minh họa CSS

2.1.3 Javascript

Javascript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua.Nó cũng là một trong số 3 ngôn ngữ chính của giới lập trình web:

 HTML: Giúp thêm nội dung cho trang web

 CSS: Giúp định dạng thiết kế, bố cục, phong cách, canh lề… cho trang web

 Javascript: Giúp cải thiện cách hoạt động cho trang web

Javascript sẽ được tích hợp và nhúng trong HTML, giúp website trở nên sống động hơn Nó cho phép kiểm soát những hành vi của website tốt hơn so với khi chỉ sử dụng mỗi HTML.Bạn có thể học Javascript một cách nhanh chóng và dễ dàng áp dụng nó cho rất nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game…

Hình 2.1.3: Ảnh minh họa Javascript

 JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau

 Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác

 JS còn có thể được gắn trên một số các element hoặc những events của các trang web

 Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng

 Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database  Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop,

Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính năng)

 Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau

Nhược điểm

Bên cạnh những ưu điểm kể trên thì Javascript vẫn có những nhược điểm riêng tương tự như các ngôn ngữ lập trình khác hiện nay Cụ thể:

 JS Code Snippet khá lớn  JS dễ bị các hacker và scammer khai thác hơn  JS cũng không có khả năng đa luồng hoặc đa dạng xử lý  Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng  Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự không

đồng nhất  Vì tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc

hoặc ghi các file  JS không được hỗ trợ khi bạn sử dụng ở trong tình trạng thiết bị được kết nối

mạng

2.1.4 Ngôn Ngữ SQL

SQL (Structured Query Language – Ngôn ngữ truy vấn có cấu trúc) là ngôn ngữ tiêu chuẩn mà bất cứ hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) nào cũng phải đáp ứng, điển hình như Oracle, Sybase, Microsoft SQL Server, Access, Ingres,…

Hình 2.1.4: Ảnh minh họa SQL Nói một cách đơn giản, SQL là ngôn ngữ bạn sử dụng để tương tác với cơ sở dữ liệu Các câu lệnh SQL được sử dụng để thực hiện các tác vụ như cập nhật dữ liệu trên cơ sở dữ liệu hoặc truy xuất dữ liệu từ cơ sở dữ liệu SQL có thể được sử dụng để chèn, tìm kiếm, cập nhật và xóa các bản ghi cơ sở dữ liệu; thực hiện nhiều hoạt động khác bao gồm tối ưu hóa và bảo trì cơ sở dữ liệu

SQL Server – một phần mềm do Microsoft phát triển vào năm 1989, là hệ thống quản trị cơ sở dữ liệu quan hệ hay còn gọi là RDBMS (Relational Database Management System)

SQL Server được dùng vào việc tạo, duy trì và lưu trữ, phân tích và trích xuất cơ sở dữ liệu theo yêu cầu

Các phiên bản hiện tại của SQL Server là gì? Hiện nay, Microsoft đang cung cấp các phiên bản SQL Server như sau được thiết kế cho từng đối tượng riêng biệt:

Phiên bản SQL Server Miêu tả phiên bản SQL Server SQL Server Enterprise Phiên bản SQL Server dành cho doanh nghiệp này

cung cấp đầy đủ các chức năng với hiệu suất cực nhanh, trực quan hóa thông tin không giới hạn và cho phép người dùng có toàn quyền truy cập thông tin chi tiết về dữ liệu

SQL Server Standard Phiên bản SQL Server tiêu chuẩn cho phép người dùng

quản lý cơ sở dữ liệu ở mức cơ bản để chạy các ứng dụng và hỗ trợ các công cụ phát triển phổ biến cho on-premise và cloud, phù hợp với các công ty quy mô nhỏ hoặc có nguồn nhân lực IT hạn chế

SQL Server Web Phiên bản SQL Server Web là một lựa chọn với chi phí

hợp lý dành cho các Web hoster và Web VAP, cung cấp khả năng mở rộng và khả năng quản lý cho các Web properties có quy mô từ nhỏ đến lớn SQL Server Developer Phiên bản SQL Server Developer cho phép developer

xây dựng bất kỳ loại ứng dụng nào trên SQL Server Phiên bản này bao gồm tất cả các chức năng của phiên bản Enterprise, nhưng được cấp phép để sử dụng như một hệ thống phát triển và testing, không phải như một production server

SQL Server Express Phiên bản SQL Server Express là phiên bản đơn giản,

dễ dùng nhất, thích hợp cho các nhà phát triển phần mềm độc lập và những người mới tìm hiểu về SQL Nếu cần các tính năng nâng cao hơn, bạn có thể nâng cấp SQL Server Express lên các phiên bản SQL Server cao cấp hơn dễ dàng

Bảng 2.1: Các phiên bản SQL

2.1.5 ASP.NET MVC

ASP.NET MVC là một framework tuyệt vời hỗ trợ pattern MVC cho ASP.NET Nếu bạn muốn hiểu ASP.NET MVC làm việc như thế nào, bạn cần phải có một sự hiểu biết rõ ràng về mô hình MVC MVC là cụm từ viết tắt của Model-View-Controller, nó phân chia pattern của ứng dụng thành 3 phần - model, controller và view

Hình 2.1.5: Ảnh minh họa ASP.NET MVC Model giúp lưu trữ dữ liệu của ứng dụng và trạng thái của nó Nó là một cơ sở dữ liệu hoặc cũng có thể chỉ là một tập tin XML

View được coi là một giao diện người dùng được sử dụng bởi khách truy cập trang web của bạn để nhìn thấy các dữ liệu Các trang ASPX thường được sử dụng để hiển thị view trong các ứng dụng ASP.NET MVC

Controller chịu trách nhiệm xử lý các tương tác của người dùng với trang web Nó được sử dụng để xác định loại view nào cần phải được hiển thị Controller cũng được sử dụng cho mục đích giao tiếp với model

Framework này là khá nhẹ và cung cấp khả năng kiểm thử, trong đó tích hợp với các tính năng hiện có của ASP.NET như xác thực (authentication) dựa trên membership và cả các master page

Tại sao bạn nên sử dụng nó? Bạn nên sử dụng ASP.NET MVC framework cho việc tạo ra các ứng dụng web vì những lý do được liệt kê sau đây:

SoC: Một trong những lợi ích chính được đưa ra bởi ASP.NET MVC đó là Separation

of Concern (phân tách mối bận tâm) Framework này cung cấp sự phân tách rất rõ gàng giữa model, logic nghiệp vụ, giao diện người dùng và dữ liệu

Control: Khi bạn sử dụng framework ASP.NET MVC, bạn được cung cấp một bộ

control rất mạnh mẽ trên JavaScript, HTML và CSS so với các control được cung cấp bởi một số hình thức truyền thống trên web

Có khả năng kiểm thử: Học lập trình web trực tuyến bằng ASP.NET

MVCFramework ASP.NET MVC hỗ trợ việc kiểm thử các ứng dụng web rất tốt Vì vậy, nếu bạn muốn kiểm thử ứng dụng web của mình trước khi đưa chúng cho người sử dụng, bạn có thể chỉ cần sử dụng ASP.NET MVC

Gọn nhẹ: Framework này không sử dụng View State, hỗ trợ bạn trong việc làm giảm

băng thông của các request rất nhiều Nhiều chuyên gia khuyên bạn nên sử dụng framework này nếu bạn quan tâm đến việc tạo ra các ứng dụng MVC tuyệt vời và hữu ích dựa trên web

View và Size của Control: Các framework ASP.NET thường phải đối mặt với vấn đề

của view state và kích thước của control trong HTML Phần view lưu toàn bộ dữ liệu đã được rendered và do đó kích thước các tập tin HTML trở nên lớn hơn Nếu bạn sử dụng một đường kết nối internet chậm, bạn sẽ quan sát thấy độ trễ trong việc tải các trang web và ứng dụng Vấn đề này không còn tồn tại trong framework ASP.NET MVC cũng như nó không chứa một khái niệm về view ở trong đó Bằng cách sử dụng ASP.NET MVC, bạn sẽ không còn phải đối mặt với các vấn đề về thời gian tải trang nữa

Tích hợp: Khi bạn tích hợp MVC với jQuery, bạn có thể viết code của mình chạy

trong các trình duyệt web Điều này sẽ giúp giảm tải cho các web server của bạn

Khả năng sử dụng: Bạn không cần phải có nhiều kiến thức kỹ thuật khi sử dụng

framework ASP.NET MVC Tuy nhiên, bạn sẽ thích nó sau khi học được cách làm cho nó hoạt động Framework này tốt hơn rất nhiều so với nhiều hình thức trang web khác Lý do là nó hoạt động khá gần với các chiến lược làm việc của web và được coi là khá dễ dàng và thú vị để sử dụng

API Services: Một lợi thế lớn khác đó là việc rendered bởi MVC giúp bổ sung thêm

các API web services Nếu bạn muốn thêm các service tới ứng dụng web của mình, thì bạn chắc chắn cần phải tìm hiểu làm thế nào những service này hoạt động

2.1.6 Microsoft Project

Microsoft Project (MSP hoặc WinProj) là một phần mềm quản lý dự án được phát triển và bán bởi Microsoft Chương trình này được thiết kế để hỗ trợ quản lý dự án trong việc phát triển các kế hoạch, phân công nguồn lực cho dự án, theo dõi tiến độ, quản lý ngân sách và phân tích khối lượng công việc Mặc dù mang nhãn hiệu như là một thành viên của gia đình Microsoft Office nhưng nó chưa bao giờ được đi kèm trong bất cứ trong bộ Office nào (như Visio) Tương tự, Office 2010 cũng như vậy Project có hai phiên bản, Standard và Professional Đuôi mở rộng của Microsoft Project là mpp Microsoft Project và Microsoft Project Server là nền tảng của Microsoft Office Enterprise Project Management Microsoft Project 2010 sử dụng giao diện Ribbon

Hình 2.1.6: Ảnh minh họa Microsoft Project

Project tạo ra ngân sách dựa trên việc phân công, tỉ lệ tài nguyên Mỗi tài nguyên có một lịch trình riêng của mình, trong đó xác định những gì thay đổi một tài nguyên

Có thể sử dụng Microsoft Project để: · Tạo ra các kế hoạch cho dự án Xác định được thời gian phải hoàn thành · Lập tiến độ thích hợp với các nhiệm vụ cần phải thực hiện

· Phân bổ nguồn lực và chi phí cho các công tác · Cho phép điều chỉnh kế hoạch phù hợp với các ràng buộc về thời gian và chi phí tài nguyên giới hạn

· Quản lý dự án theo tiến độ và chi phí bằng phương pháp Earned Value Method · Xem các thông tin, dữ liệu theo nhiều cách, đánh dấu, lọc và sắp xếp thông tin dự án theo cách của bạn

· Cộng tác và chia sẻ dữ liệu với những thành viên trong nhóm để tăng năng suất làm việc

· Chuẩn bị những báo cáo mang tính chất chuyên nghiệp để trình bày cho ban lãnh đạo, tư vấn giám sát, chủ đầu tư, công nhân…

2.1.7 Selenium

Selenium là một trong các công cụ kiểm thử phần mềm được ưa chuộng nhất hiện nay Đây chính là công cụ kiểm thử phần mềm tự động mã nguồn mở miễn phí, được

dùng phổ biến cho các ứng dụng web trên nhiều hệ điều hành: Linux, Windows, macOS

Hình 2.1.7: Ảnh minh họa Selenium

Selenium giúp kiểm thử viên có thể kiểm thử bằng rất nhiều ngôn ngữ lập trình khác nhau như: Python, Java, PHP, C#, Ruby, Perl hay Groovy Công cụ kiểm thử phần mềm này được chia thành 3 loại: Selenium Grid, Selenium IDE, Selenium Webdriver

Tại sao cần kiểm thử phần mềm? Dù làm bất cứ công việc gì, bạn cũng cần kiểm tra, đánh giá mới có thể đảm bảo sản phẩm đạt đúng mong đợi, không có sai sót Cũng như vậy với ngành IT, kiểm thử phần mềm là hoạt động không thể thiếu trước khi ra mắt ứng dụng, website hoặc đưa hệ thống vào sử dụng

Kiểm thử phần mềm thường được chia làm 2 loại: Kiểm thử thủ công (manual test) và Kiểm thử tự động (auto test) Trong đó, kiểm thử tự động được lựa chọn nhiều hơn cả bởi khả năng kiểm thử nhanh chóng, mạnh mẽ, khó xảy ra sơ suất và tiết kiệm chi phí

Tuy nhiên, chất lượng của các lệnh kiểm thử tự động phụ thuộc việc các tập lệnh kiểm thử được viết ra có tốt hay không

2.2 Các công cụ hỗ trợ

Visual Studio YouTube W3School

Somee

CHƯƠNG 3: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 3.1 Các module chức năng: Trình bày sơ đồ chức năng

3.1.1 Tổng quan

Dự án " Website Cửa hàng băng đĩa nhạc" nhằm tạo ra một nền tảng trực tuyến cho người dùng đặt đơn băng đĩa nhạc từ shop và nhận giao hàng tận nhà Mục tiêu của dự án là cung cấp một trải nghiệm đơn giản, thuận tiện và an toàn cho người dùng khi đặt hàng qua mạng

- Phân tích yêu cầu: Các yêu cầu chức năng của hệ thống bao gồm: đăng nhập và đăng ký người dùng, tìm kiếm và xem thông tin về shop, xem mục sản phẩm và đặt hàng, thanh toán trực tuyến và theo dõi đơn hàng, Quản lý cửa hàng cho admin, chỉnh sửa sản phẩm cho admin Ngoài ra, còn có yêu cầu phi chức năng như bảo mật thông tin người dùng và tính năng đánh giá, nhận xét shop

- Sơ đồ chức năng

Mô tả về Website cửa hàng băng đĩa nhạc:

• Cửa hàng bán các loại băng đĩa nhạc bao gồm các thể loại và ca sĩ khác nhau • Cửa hàng bán online lẫn offline tại cửa hàng ở địa chỉ của cửa hàng, khách hàng có thể mua nhiều sách một lúc trong giỏ hàng, thanh toán sẽ thanh toán bằng tiền mặt hoặc thanh toán online

• Khi khách hàng mua băng đĩa nhạc sẽ nhận được 1 hóa đơn đặt hàng, mỗi hóa đơn có 1 chi tiết đặt hàng

• Website có admin để quản lí băng đĩa nhập và thêm vào • Shop có chi tiết về Ca sĩ, thông tin chi viết về Ca sĩ • Khách hàng phải đăng kí thành viên mới được sử dụng tính năng mua băng đĩa nhạc

• Khi bán cho khách hàng, shop có ghi nhận thông tin của khách hàng qua việc đăng kí

Đặt câu hỏi Q/A về shop:

Q1 Quản lí sản phẩm như thế nào? Mỗi băng đĩa nhạc có 1 mã nhạc, 1 dạng nhạc, 1 ca sĩ Q2: Khách hàng có quản lí bằng mã số không? Khó quản lý khách hàng bằng mã số vì trùng tên, khách không cho biết tên thật,… Vậy quản lý khách hàng bằng số điện thoại và họ tên

Q3: băng đĩa mua rồi có thể đổi hoặc trả lại được không? Hàng đã mua rồi (đã mở hộp) thì không thể đổi hoặc trả lại Việc đổi hoặc trả lại không xem xét trong hệ thống này Q4: Có bảo hành băng nhạc không? Không có chức năng bảo hành băng đĩa trong hệ thống này

• Nhạc: mã nhạc, tên nhạc, giá bán, mô tả, ảnh bìa, ngày cập nhật, số lượng tồn • Ca sĩ: mã ca sĩ, tên ca sĩ

• Đơn đặt hàng: số đơn hàng, ngày đơn hàng, ngày giao, đã thanh toán, tình trạng giao hàng

• Chi tiết đặt hàng: số lượng, đơn giá • Admin: useradmin, passadmin, họ tên

Các chức năng của khách hàng

Đăng nhập, đăng ký, xem thông tin giỏ hàng, chọn lọc sản phẩm theo yêu cầu, xóa sản phẩm khỏi giỏ, thêm sản phẩm vào giỏ, chức năng phân trang, chi tiết sản phẩm, xác nhận đơn hàng, chỉnh sửa số lượng giỏ hàng

Các chức năng Admin:

Đăng nhập, chi tiết sản phẩm, chỉnh sửa sản phẩm, thêm/xóa/sửa nhạc, thêm/xóa/sửa dạng

Hình 3.1.1: sơ đồ chức năng tổng quan

Hình 3.1.4: Sơ đồ chức năng Quản lý sản phẩm

3.2 Site map: Trình bày sơ đồ liên kết

Hình 3.4.1: GUI layout trang chủ Là giao diện được hiển thị đầu tiên khi người dùng tiếp cận trang web

Header: là phần trên cùng, khách hàng sẽ ngay lập tức nhìn thấy nó khi truy cập vào một

trang web Nó là khu vực dùng để giới thiệu, nơi mọi người lướt qua đầu tiên trước khi tìm hiểu sâu hơn Header chứa các thông tin cơ bản giúp nhận diện thương hiệu như logo, tên Website, contact, các liên kết đăng nhập, đăng ký và giỏ hàng của khách hàng

Navigation Menu và Menu Bar (menu điều hướng): phần dưới của Header, là một tập

hợp các liên kết được tổ chức thành một menu để điều hướng người dùng tới các mục khác nhau của trang Web Thông thường, menu sẽ được đặt ở đầu trang ở đây em chia ra làm 2 Menu, 1 Menu trên là những ứng dụng thường thấy của trang web khác như home, thanh tìm kiếm, liên hệ, giỏ hàng, tài khoản người dùng Thanh còn lại là những hạng mục các sản phẩm khác nhau, để giúp người mua tìm sản phẩm dễ hơn, đồng thời phân chia chúng theo nhiều thể loại ở phần này người dùng có thể tìm kiếm ở thanh tìm kiếm, và ấn nút home để về nhà, tạo tài khoản đăng nhập, và xem giỏ hàng

Banner Slider: Trong website, silder được hiểu là một dang trình chiếu thông tin trên các

thanh trượt Thông tin ở đây có thể là hình ảnh hoặc video hay cũng có thể là các định

Menu bar, dùng để trình chiếu thông tin những hot news của web, em chia làm 2 bên Slider, bên trái và bên phải Bên trái dùng để trình chiếu banner hot news và banner hot product cùng những tin tức khác và tên của chúng ở dưới slider, bên phải em sẽ để những tấm hình dùng banner nhỏ để trang trí làm tôn thêm nổi bật cho Slider trái Ở dưới Slider em còn tạo thêm một banner để tăng phần nổi bật cho Slider

Product: là nơi hiển thị các sản phẩm có trong cửa hàng gồm các hình ảnh của sản phẩm,

giá bán của sản phẩm, các banner trang trí, tên danh mục sản phẩm, đặt hàng Giúp cho khách hàng có những thông tin về sản phẩm và mua sắm dễ dàng Ở phần này em thiết kế bao gồm tên của category ở trên cùng, sau đó là dãy sản phẩm được sắp xếp theo hàng ngang, cùng với Slider trước để thể hiện được nhiều sản phẩm hơn những vẫn giữ được sự tiện nghi, đơn giản, tinh tế và rất dễ thao tác, không rối mắt, kế tiếp ở dưới dãy sản phẩm sẽ banner trang trí để tăng thêm nổi bật cho sản phẩm hoặc danh mục sản phẩm kế tiếp

Footer: giúp thể hiện rõ nét những thông tin mà trang web muốn gửi đến cho đến người

dùng Footer chia làm top và bottom, phần top banner thể hiện Logo trang web, thông tin của cửa hàng, Product category link, Contact Còn phần bottom thể hiện những ngân hàng thanh toán, thông tin công ty, bản quyền của cửa hàng

3.4.2 Giao diện trang thông tin sản phẩm

Hình 3.4.2: GUI Details product layout Là giao diện để xem thông tin sản phẩm và thêm nó vào giỏ hàng

Header: là phần trên cùng, khách hàng sẽ ngay lập tức nhìn thấy nó khi truy cập vào một

trang web Nó là khu vực dùng để giới thiệu, nơi mọi người lướt qua đầu tiên trước khi tìm hiểu sâu hơn Header chứa các thông tin cơ bản giúp nhận diện thương hiệu như logo, tên Website, contact, các liên kết đăng nhập, đăng ký và giỏ hàng của khách hàng

Navigation Menu và Menu Bar (menu điều hướng): phần dưới của Header, là một tập

hợp các liên kết được tổ chức thành một menu để điều hướng người dùng tới các mục khác nhau của trang Web Thông thường, menu sẽ được đặt ở đầu trang ở đây em chia ra làm 2 Menu, 1 Menu trên là những ứng dụng thường thấy của trang web khác như home, thanh tìm kiếm, liên hệ, giỏ hàng, tài khoản người dùng Thanh còn lại là những hạng mục các sản phẩm khác nhau, để giúp người mua tìm sản phẩm dễ hơn, đồng thời phân chia chúng theo nhiều thể loại ở phần này người dùng có thể tìm kiếm ở thanh tìm kiếm, và ấn nút home để về nhà, tạo tài khoản đăng nhập, và xem giỏ hàng

Banner Slider: Trong website, silder được hiểu là một dang trình chiếu thông tin trên các

thanh trượt Thông tin ở đây có thể là hình ảnh hoặc video hay cũng có thể là các định

dạng khác tuỳ theo mục đích của người quản trị Ở đây em có làm Slider ở dưới phần Menu bar, dùng để trình chiếu thông tin những hot news của web, em chia làm 2 bên Slider, bên trái và bên phải Bên trái dùng để trình chiếu banner hot news và banner hot product cùng những tin tức khác và tên của chúng ở dưới slider, bên phải em sẽ để những tấm hình dùng banner nhỏ để trang trí làm tôn thêm nổi bật cho Slider trái Ở dưới Slider em còn tạo thêm một banner để tăng phần nổi bật cho Slider

Productdetails: giao diện trang chủ, trang danh sách sản phẩm theo dạng nhạc chỉ hiển thị

các thông tin quan trọng, không thể hiển thị hết được toàn bộ các thông tin liên quan tới sản phẩm, vì vậy trang chi tiết sản phẩm có thể hỗ trợ khách hàng xem chi tiết các thông tin liên quan tới sản phẩm như: hình ảnh sản phẩm, tên sản phẩm , mô tả về sản phẩm và giá bán

Footer: giúp thể hiện rõ nét những thông tin mà trang web muốn gửi đến cho đến người

dùng Footer chia làm top và bottom, phần top banner thể hiện Logo trang web, thông tin của cửa hàng, Product category link, Contact Còn phần bottom thể hiện những ngân hàng thanh toán, thông tin công ty, bản quyền của cửa hàng

3.4.3 Giao diện trang danh sách sản phẩm theo dạng nhạc

Hình 3.4.3: GUI MusicFormat layout

Header: là phần trên cùng, khách hàng sẽ ngay lập tức nhìn thấy nó khi truy cập vào một

trang web Nó là khu vực dùng để giới thiệu, nơi mọi người lướt qua đầu tiên trước khi tìm hiểu sâu hơn Header chứa các thông tin cơ bản giúp nhận diện thương hiệu như logo, tên Website, contact, các liên kết đăng nhập, đăng ký và giỏ hàng của khách hàng

Navigation Menu và Menu Bar (menu điều hướng): phần dưới của Header, là một tập

hợp các liên kết được tổ chức thành một menu để điều hướng người dùng tới các mục khác nhau của trang Web Thông thường, menu sẽ được đặt ở đầu trang ở đây em chia ra làm 2 Menu, 1 Menu trên là những ứng dụng thường thấy của trang web khác như home, thanh tìm kiếm, liên hệ, giỏ hàng, tài khoản người dùng Thanh còn lại là những hạng mục các sản phẩm khác nhau, để giúp người mua tìm sản phẩm dễ hơn, đồng thời phân chia chúng theo nhiều thể loại ở phần này người dùng có thể tìm kiếm ở thanh tìm kiếm, và ấn nút home để về nhà, tạo tài khoản đăng nhập, và xem giỏ hàng

Banner Slider: Trong website, silder được hiểu là một dang trình chiếu thông tin trên các

thanh trượt Thông tin ở đây có thể là hình ảnh hoặc video hay cũng có thể là các định dạng khác tuỳ theo mục đích của người quản trị Ở đây em có làm Slider ở dưới phần Menu bar, dùng để trình chiếu thông tin những hot news của web, em chia làm 2 bên Slider, bên trái và bên phải Bên trái dùng để trình chiếu banner hot news và banner hot product cùng những tin tức khác và tên của chúng ở dưới slider, bên phải em sẽ để những tấm hình dùng banner nhỏ để trang trí làm tôn thêm nổi bật cho Slider trái Ở dưới Slider em còn tạo thêm một banner để tăng phần nổi bật cho Slider

Product Theo dạng nhạc: là nơi hiển thị các sản phẩm theo dạng nhạc mà khách hàng

chọn gồm các hình ảnh của sản phẩm, giá bán của sản phẩm, các banner trang trí, tên danh mục sản phẩm, đặt hàng Giúp cho khách hàng có những thông tin về sản phẩm và mua sắm dễ dàng

Footer: giúp thể hiện rõ nét những thông tin mà trang web muốn gửi đến cho đến người

dùng Footer chia làm top và bottom, phần top banner thể hiện Logo trang web, thông tin của cửa hàng, Product category link, Contact Còn phần bottom thể hiện những ngân hàng

3.4.4 Giao diện giỏ hàng

Hình 3.4.4: GUI CART layout Là nơi chứa các danh sách sản phẩm được khách hàng thêm vào giỏ hàng hiển thị cho khách hàng về hình ảnh sản phẩm, tên nhạc, giá của sản phẩm, số lượng khách hàng đặt và tổng số tiền cần thanh toán Khách hàng có thể tùy chỉnh số lượng nhạc muốn đặt cũng như xóa những nhạc ra khỏi giỏ hàng

Header: là phần trên cùng, khách hàng sẽ ngay lập tức nhìn thấy nó khi truy cập vào một

trang web Nó là khu vực dùng để giới thiệu, nơi mọi người lướt qua đầu tiên trước khi tìm hiểu sâu hơn Header chứa các thông tin cơ bản giúp nhận diện thương hiệu như logo, tên Website, contact, các liên kết đăng nhập, đăng ký và giỏ hàng của khách hàng

Navigation Menu và Menu Bar (menu điều hướng): phần dưới của Header, là một tập

hợp các liên kết được tổ chức thành một menu để điều hướng người dùng tới các mục khác nhau của trang Web Thông thường, menu sẽ được đặt ở đầu trang ở đây em chia ra làm 2 Menu, 1 Menu trên là những ứng dụng thường thấy của trang web khác như home, thanh tìm kiếm, liên hệ, giỏ hàng, tài khoản người dùng Thanh còn lại là những hạng mục các sản phẩm khác nhau, để giúp người mua tìm sản phẩm dễ hơn, đồng thời phân chia chúng theo nhiều thể loại ở phần này người dùng có thể tìm kiếm ở thanh tìm kiếm, và ấn nút home để về nhà, tạo tài khoản đăng nhập, và xem giỏ hàng