Bằng cách quản lý thông tin khách hàng một cách chặt chẽ, chúng tôi mongmuốn tạo ra một hệ thống linh hoạt có khả năng cập nhật thông tin về các sản phẩm theo nhu cầuđặc biệt của từng kh
Trang 1Bộ giáo dục và đào tạo Trường Đại học Ngoại ngữ - Tin học
TP.HCM
ĐỒ ÁN: WEBSITE BÁN ĐỒ ĐIỆN TỬ
Ngành: Công nghệ thông tin
Bộ môn: Lập trình trên web
Giảng viên hướng dẫn: Ths.Trần Phương Tuấn
Sinh viên thực hiện: Trần Thành An – 22DH114430
Bùi Ngọc Hải Triều -22DH113857
Nguyễn Đức Trí -22DH113906
TP.HCM, Ngày 22 tháng 11 năm 2023
Trang 2Bộ giáo dục và đào tạo Trường Đại học Ngoại ngữ - Tin học
TP.HCM
ĐỒ ÁN: WEBSITE BÁN ĐỒ ĐIỆN TỬ
Ngành: Công nghệ thông tin
Bộ môn: Lập trình trên web
Giảng viên hướng dẫn: Ths.Trần Phương Tuấn
Sinh viên thực hiện: Trần Thành An – 22DH114430
Bùi Ngọc Hải Triều -22DH113857
Nguyễn Đức Trí -22DH113906
TP.HCM, Ngày 22 tháng 11 năm 2023
Trang 3Mục Lục
Chương 1: Mở đầu 5
1 Bối cảnh của đề tài 5
2 Lý do chọn đề tài 5
3 Mục đích chọn đề tài 5
Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng 6
1 HTML 6
1.1 Định nghĩa 6
1.2 Ưu điểm 6
2 CSS 6
2.1 Định nghĩa 6
2.2 Ưu điểm 7
2.3 Các thành phần trong CSS 7
3 Javascript 8
3.1 Định nghĩa 8
3.2 Ưu điểm 8
3.3 Các thành phần trong Javascript 8
4 Bootstrap 5 9
4.1 Định nghĩa 9
4.2 Ưu điểm 9
4.3 Các thành phần trong bootstrap 5 9
5 Công cụ Visual Studio 10
5.1 Định nghĩa 10
5.2 Ưu điểm 10
Chương 3: Thiết kế 11
1 Giao diện trang chủ 11
2 Trang chi tiết sản phẩm 13
3 Trang tìm kiếm 14
4 Trang đăng ký, đăng nhập, thông tin khách hàng 15
5 Trang giỏ hàng, thanh toán, hóa đơn 16
6 Trang admin 18
Trang 4Chương 4: Code các chức năng ứng dụng 20
1 Chi tiết sản phẩm 20
2 Chức năng tìm kiếm 22
3 Đăng ký, đăng nhập 23
4 Giỏ hàng, hóa đơn 25
Chương 5: Kết luận và hướng phát triển 27
1 Kết Luận 27
2 Hướng phát triển 27
3 Phân công công việc 28
Trang 5Chương 1: Mở đầu
1 Bối cảnh của đề tài
Trong xã hội ngày nay, công nghệ thông tin đã trở thành một trong những lĩnh vực có ảnhhưởng đến nhiều lĩnh vực khác như sản xuất, kinh doanh, giáo dục và y tế Đặc biệt, đổi mớitrong cách mạng công nghiệp 4.0, đặc biệt là sự tự động hóa trong sản xuất tại Việt Nam, đã làmnền tảng và động lực cho sự tiến bộ của chúng ta
Các công ty công nghệ hàng đầu thế giới hiện nay không ngừng đầu tư và cải tiến để thúcđẩy thương mại trực tuyến Thông qua các sản phẩm và giải pháp mới, thương mại điện tử trởnên ngày càng quan trọng và thiết yếu Việc mua sắm trực tuyến giờ đây trở nên đơn giản, chỉcần một vài thao tác trên Internet, bạn có thể sở hữu sản phẩm mà không mất quá nhiều thờigian Điều này tạo ra động lực mạnh mẽ để nghiên cứu sâu hơn về thương mại điện tử
2 Lý do chọn đề tài
Nhằm đáp ứng nhu cầu mua sắm đa dạng hiện nay, việc giới thiệu sản phẩm trực tuyến trởnên quan trọng Chính vì lẽ đó, nhóm chúng tôi em đã xây dựng một dự án website bán hàng đadạng Nơi này không chỉ giúp quảng bá sản phẩm mà còn linh hoạt trong việc đáp ứng nhu cầuđặc biệt của từng khách hàng thông qua quản lý hiệu quả Bằng cách này, việc mua sắm trựctuyến trở nên dễ dàng hơn, giúp khách hàng tiết kiệm thời gian và không cần phải đến trực tiếpcửa hàng
3 Mục đích chọn đề tài
Chọn đề tài này nhằm mục đích đáp ứng nhu cầu quản lý và tối ưu hóa trải nghiệm mua sắmcủa khách hàng Bằng cách quản lý thông tin khách hàng một cách chặt chẽ, chúng tôi mongmuốn tạo ra một hệ thống linh hoạt có khả năng cập nhật thông tin về các sản phẩm theo nhu cầuđặc biệt của từng khách hàng
Việc đưa các sản phẩm lên website sẽ mang lại cho khách hàng sự thuận tiện trong việc lựachọn và mua sắm trực tuyến, giảm bớt bước chân đến cửa hàng vật lý Bằng cách này, chúng tôiđặt ra mục tiêu tăng cường hiệu quả kinh doanh, không chỉ bằng cách thu hút đối tượng kháchhàng rộng lớn mà còn bằng cách tối ưu hóa quy trình mua bán, từ việc quản lý thông tin kháchhàng đến việc cập nhật sản phẩm phù hợp và thuận tiện trên nền tảng trực tuyến
Trang 6Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng
1 HTML
1.1 Định nghĩa
Ngôn ngữ HTML (HyperText Markup Language - Ngôn ngữ Siêu văn bản) là mộttrong những ngôn ngữ được ứng dụng rộng rãi trong lập trình web Khi bạn thực hiệnviệc truy cập một trang web bằng cách click vào các liên kết, bạn sẽ được dẫn đếnnhiều trang khác nhau, mỗi trang này được biểu diễn bằng một tài liệu HTML (tập tinHTML)
1.2 Ưu điểm
- Có cú pháp đơn giản, dễ học và hiểu, làm cho nó trở thành ngôn ngữ lập trình web
lý tưởng cho người mới bắt đầu
- Làm việc trên nhiều trình duyệt web khác nhau, đảm bảo rằng trang web sẽ hoạtđộng đúng cách trên mọi nền tảng
- Cho phép nhúng linh hoạt các đối tượng đa phương tiện như hình ảnh, video, âmthanh, giúp tạo ra trang web đa dạng
2 CSS
2.1 Định nghĩa
CSS, hay Cascading Style Sheets, là một ngôn ngữ chuyên dụng được sử dụng đểkiểm soát và định dạng các phần tử được tạo ra bởi ngôn ngữ đánh dấu HTML Tínhchất cơ bản của CSS là tạo ra phong cách cho trang web, điều này bao gồm việc thayđổi bố cục, màu sắc, font chữ, và cấu trúc của các phần tử HTML
Trong khi HTML đóng vai trò chủ yếu trong việc định dạng cấu trúc trang web bằngcách tạo ra văn bản, tiêu đề, bảng và các phần tử khác, CSS cung cấp khả năng tùychỉnh chi tiết hơn bằng cách thêm style vào những phần tử này
CSS áp dụng style dựa vào các vùng chọn, như tên thẻ HTML, ID, class, và nhiềuphương thức khác Các thuộc tính được áp dụng sẽ tạo nên diện mạo và thiết kế củatrang web
Trang 7Có ba cách nhúng CSS vào HTML: Inline (nhúng trực tiếp trong thẻ), Internal (sửdụng thẻ `<style>` trong phần head), và External (liên kết với một tệp CSS ngoài).
Mối quan hệ giữa HTML và CSS là không thể tách rời Trong đó, HTML là ngôn ngữđánh dấu, xác định cấu trúc cơ bản của trang web, trong khi CSS xác định và tạo raphong cách, định hình giao diện và diện mạo cuối cùng của trang Hai ngôn ngữ nàyhoạt động cùng nhau để tạo nên một trải nghiệm người dùng hoàn chỉnh và thú vị
- Người phát triển có khả năng điều chỉnh trang web một cách không giới hạn, tạo
ra nhiều kiểu dáng khác nhau
CSS không chỉ là công cụ định dạng giao diện, mà còn là nguồn sức mạnh giúp tối ưuhóa quá trình phát triển và duy trì trang web hiệu quả
2.3 Các thành phần trong CSS
CSS cung cấp nhiều thuộc tính quan trọng để làm đẹp trang web:
Trang 8- Color: Giúp điều chỉnh màu sắc và độ trong suốt của văn bản.
- Background và Border : Giúp thiết lập màu nền và đường biên cho các đối tượngtrên trang
- Table: Tạo bảng và định dạng layout trang web
CSS giúp tạo ra trang web đẹp và động, với khả năng điều chỉnh màu sắc, bố cục, vàtạo hiệu ứng chuyển động đa dạng
3 Javascript
3.1 Định nghĩa
JavaScript là ngôn ngữ lập trình cho web, giúp tạo ra những trang web động Nó nhẹnhàng và được sử dụng nhiều để làm cho trang web tương tác với người dùng.JavaScript cũng là ngôn ngữ chương trình linh động với khả năng làm việc theohướng đối tượng
Giao Diện Phong Phú Hơn: Sử dụng JavaScript để thêm các tính năng như kéo và thả(Drag and Drop) cũng như thanh trượt (Slider), tạo ra giao diện động và phong cáchcho trang web của bạn
3.3 Các thành phần trong Javascript
- Biến (Variables): Được sử dụng để lưu trữ dữ liệu
- Kiểu dữ liệu (Data Types): JavaScript hỗ trợ nhiều kiểu dữ liệu như số, chuỗi,boolean, và đối tượng
Trang 9- Toán tử (Operators): Được sử dụng để thực hiện các phép toán trên biến và giá trị.
- Câu lệnh điều kiện (Conditional Statements): if, else, switch - để thực hiện các hànhđộng dựa trên điều kiện
- Vòng lặp (Loops): for, while - để lặp qua một loạt các hành động
- Hàm (Functions): Được sử dụng để đóng gói một khối mã để thực hiện một nhiệm
vụ cụ thể
- Mảng (Arrays): Lưu trữ nhiều giá trị trong một biến
- Đối tượng (Objects): Lưu trữ dữ liệu trong cặp key-value, tạo ra các đối tượng
- Sự kiện (Events): JavaScript có thể phản ứng với các sự kiện trên trang web, nhưclick chuột hoặc submit form
4 Bootstrap 5
4.1 Định nghĩa
Bootstrap là một framework front-end mã nguồn mở được phát triển bởi Twitter Nócung cấp một bộ công cụ linh hoạt và dễ sử dụng cho việc phát triển giao diện ngườidùng trên web Bootstrap chủ yếu sử dụng HTML, CSS, và JavaScript để tạo ra cácthành phần giao diện như nút, biểu mẫu, thanh điều hướng, và nhiều thành phần khác
4.2 Ưu điểm
Ưu điểm chính của Bootstrap bao gồm khả năng tương thích đa trình duyệt, tích hợplinh hoạt vào dự án, và khả năng thích ứng với nhiều thiết bị khác nhau (responsivedesign) Bootstrap giúp giảm thời gian và công sức trong quá trình phát triển, vì bạn
có thể sử dụng các lớp và phần tử đã được định nghĩa sẵn để tạo giao diện một cáchnhanh chóng và hiệu quả
4.3 Các thành phần trong bootstrap 5
- Grid System (Hệ thống lưới): Bootstrap sử dụng hệ thống lưới 12 cột linh hoạt đểxây dựng trang web đáp ứng Các class như “container”, “row”, và “col” được sửdụng để định dạng cấu trúc lưới
Trang 10- Typography (Chữ viết): Bootstrap cung cấp các class để định dạng văn bản, như
“h1”, “h2”, “p”, và nhiều class khác để làm cho văn bản trông đẹp và dễ đọc
- Tables (Bảng): Bootstrap giúp tạo bảng dễ đọc và linh hoạt với các class như
“table”, “table-striped”, “table-bordered”, và “table-responsive”
- Forms (Biểu mẫu): Cung cấp các class để tạo biểu mẫu dễ sử dụng và linh hoạt, baogồm cả các phần như “form-group”, “input”, “label”, và “button”
- Buttons (Nút): Bootstrap cung cấp nhiều class để tạo nút với các kiểu khác nhau nhưnút màu xanh biển (“btn-primary”), nút màu vàng (“btn-warning”)
- Navigation Bar (Thanh điều hướng): Bootstrap cung cấp thanh điều hướng linh hoạtvới class như “navbar”, “navbar-expand”, và “navbar-toggler” để tạo thanh điềuhướng đáp ứng
- Alerts (Thông báo): Các thông báo có thể được tạo ra bằng cách sử dụng class như
“alert” và “alert-danger” để cảnh báo người dùng về các sự kiện quan trọng
- Cards (Thẻ): Bootstrap cung cấp class “card” để tạo ra các hộp chứa linh hoạt có thểchứa nhiều loại nội dung khác nhau
- Carousel (Carousel): Bootstrap cung cấp một component carousel để hiển thị hìnhảnh hoặc nội dung trượt qua theo một chu kỳ
5 Công cụ Visual Studio
5.1 Định nghĩa
Visual Studio là một môi trường phát triển tích hợp (IDE - Integrated DevelopmentEnvironment) được phát triển bởi Microsoft Nó cung cấp một loạt các công cụ vàtính năng giúp nhà phát triển xây dựng ứng dụng phần mềm cho nền tảng Microsoft,bao gồm cả ứng dụng di động, desktop, web, và các ứng dụng dựa trên đám mây.Visual Studio có nhiều phiên bản, bao gồm Community (miễn phí), Professional vàEnterprise, với các tính năng và giấy phép khác nhau phù hợp với nhu cầu và quy mô
dự án của nhà phát triển
Trang 115.2Ưu điểm
- Tích hợp Đầy đủ (Full Integration): Visual Studio cung cấp một môi trường pháttriển tích hợp với tất cả các công cụ cần thiết, bao gồm trình soạn thảo mã nguồn,công cụ gỡ lỗi, thiết kế giao diện, quản lý phiên bản, và nhiều công cụ khác, giúpgiảm sự phức tạp của quá trình phát triển
- Đa Nền Tảng (Cross-platform Development): Visual Studio hỗ trợ phát triển ứngdụng cho nhiều nền tảng, bao gồm Windows, Android, iOS, Linux, và nền tảng đámmây như Azure
- Tính Tương Tác Cao (High Interactivity): Công cụ gỡ lỗi mạnh mẽ và tính năngIntelliSense giúp tăng tốc quá trình phát triển và giảm lỗi
- Tích hợp Quản lý Phiên bản (Source Control Integration): Hỗ trợ tích hợp với các
hệ thống quản lý phiên bản như Git, giúp theo dõi và quản lý mã nguồn dễ dàng
- Mạnh Mẽ Cho Phát triển Web (Strong Web Development Support): Visual Studio hỗtrợ phát triển ứng dụng web với các công nghệ như ASP.NET, HTML, CSS, vàJavaScript, cung cấp các tiện ích giúp xây dựng và duy trì các ứng dụng web phứctạp
- Tích hợp Công cụ Kiểm thử (Integrated Testing Tools): Visual Studio cung cấp cáccông cụ kiểm thử tích hợp giúp nhà phát triển viết và chạy các bài kiểm thử đơn vị vàtích hợp kiểm thử vào quy trình phát triển
Những ưu điểm này làm cho Visual Studio trở thành một lựa chọn phổ biến chonhững người phát triển muốn xây dựng ứng dụng trên nền tảng Microsoft và các nềntảng khác
Chương 3: Thiết kế
1 Giao diện trang chủ
Trang 12
Hình 1 : Giao diện trang chủ - Header & Banner
- Header 1 gồm các icon, chức năng liên kết đến các trang khác:
Trang 13- Danh sách sản phẩm trên trang chủ:
Các sản phẩm sẽ được sắp xếp theo từng loại (Âm thanh, đồng hồ, v.v)
- Cuối trang: Hiện thị thông tin cửa tháng
2 Trang chi tiết sản phẩm
Hình 3: Giao diện trang chủ - cuối trang
Trang 14- Chi tiết sản phẩm bao gồm:
Hình 5: Trang tìm kiếm
Trang 15- Sau khi tìm kiếm sẽ trả về trang Kết quả tìm kiếm
- Người dùng có thể chọn sản phẩm để thêm vào giỏ hàng
- Người dùng ấn vào thêm vào giỏ hàng khi chưa đăng nhập sẽ chuyển hướng sang trang Đăng Nhập
4 Trang đăng ký, đăng nhập, thông tin khách hàng
Trang đăng ký bao gồm:
Thanh Menu liên kết đến các trang khác
Tạo Tài Khoản, Tên người dùng
Nhập email , địa chỉ, mật khẩu
Khi đăng ký không được để trống, nếu không sẽ báo lỗi
Sau khi đăng ký xong người dùng sẽ chuyển sang trang đăng nhập để đăng nhập lại tài khoảng mình vừa đăng ký
15Hình 6: Trang đăng ký
Trang 16- Sau khi đăng ký người dùng sẽ chuyển sang trang đăng nhập
- Khi đăng nhập đúng sẽ chuyển đến trang chủ để người dùng có thể thêm sản phẩm vào giỏ hàng
- Khi đăng nhập sai sẽ thông báo người dùng sai tài khoản hoặc mật khẩu
- Sau khi người dùng đã đăng nhập thành công thì có thể xem thông tin của mình bằng cách
ấn vào biểu tượng
- Khi chưa đăng nhập thành công khi ấn vào biểu tượng thì chuyển đến trang đăng nhập
- Các thông tin khách hàng được hiển thị được lấy từ trang Đăng Ký
5 Trang giỏ hàng, thanh toán, hóa đơn
Hình 8: Trang thông tin khách hàng
Trang 17- Các chức năng của giỏ hàng có thể thêm số lượng sản phẩm, xóa sản phẩm đã thêm vào giỏ hàng.
- Sau khi thêm sản phẩm vào giỏ hàng ta có thể tiếp tục mua hàng khi ấn vào , sẽ chuyển sang về trang chủ để tiếp tục mua hàng
- Khi đã chọn xong các mặt hàng ta có thể ấn thanh toán để tiến hành thanh toán
- Sau khi ấn thanh toán ta sẽ chuyển đến trang thanh toán thành công
Hình 9: Trang giỏ hàng
Hình 10: Trang thanh toán
Trang 18- Sau khi thanh toán thành công ta sẽ hiện ra trang thông báo.
- Trên trang thông báo có 2 liên kết:
+ trở về trang chủ để tiếp tục xem hàng.+ chuyển tiếp để trang xem chi tiết chi hóa đơn
- Để người dùng kiểm tra các thông tin của hóa đơn, nếu có sai sót có thể liên hệ CSKH
- Hóa đơn hiển thị: Tổng tiền thanh toán, số lượng sản phẩm, địa chỉ giao hàng, mã đơn hàng
6 Trang admin
Hình 10: Trang hóa đơn
Hình 11: Trang admin
Trang 19- Trang Admin dùng để quản lý các sản phẩm trang chủ.
- Trang Admin gồm có các chức năng xem chi tiết sản phẩm, chỉnh sửa, xóa, thêm sản phẩm
- Dùng để thêm sản phẩm mới
- Sau khi thêm đầy đủ các thông tin sản phẩm, sản phẩm sẽ được hiển thị ở trang chủ để người dùng có thể thêm vào giỏ hàng
- Khi ta ấn thì sẽ chuyển trang khác để xác nhận xóa sản phẩm
- Nếu lựa chọn xóa thì ta chọn không thì
Hình 12: Thêm sản phẩm mới
Hình 13: Xóa sản phẩm
Trang 20- Khi ấn sẽ chuyển đến trang hiện thị các chi tiết sản phẩm để tiến hành chỉnh sửa.
- Sau khi chỉnh sửa xong thì chọn , nếu không muốn chỉnh sửa thì chọn
Chương 4: Code các chức năng ứng dụng
1 Chi tiết sản phẩm
Hình 14-15: Chỉnh sửa sản phẩm
Trang 21Hình 16: Controller hiện thị chi tiết sản phẩm
Trang 222 Chức năng tìm kiếm
Hình 18: Controller chức năng tìm kiếm
Hình 19: View hiện thị sản phẩm sau tìm kiếm