1. Trang chủ
  2. » Luận Văn - Báo Cáo

Đồ Án website bán Đồ Điện tử

28 2 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Website bán Đồ Điện tử
Tác giả Trần Thành An, Bùi Ngọc Hải Triều, Nguyễn Đức Trí
Người hướng dẫn Ths. Trần Phương Tuấn
Trường học Trường Đại học Ngoại ngữ - Tin học
Chuyên ngành Công nghệ thông tin
Thể loại Đồ án
Năm xuất bản 2023
Thành phố TP.HCM
Định dạng
Số trang 28
Dung lượng 5,92 MB

Nội dung

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 1

Bộ 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 2

Bộ 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 3

Mụ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 4

Chươ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 5

Chươ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 6

Chươ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 7

Có 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 11

5.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 21

Hình 16: Controller hiện thị chi tiết sản phẩm

Trang 22

2 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

Ngày đăng: 18/10/2024, 16:40

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w