BÀI TẬP LỚN ĐỒ ÁN CƠ SỞ: THIẾT KẾ WEBSITE BÁN BÁNH 10 ĐIỂM

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.26 MB, 23 trang )

Trang 1<div class="page_container" data-page="1">

Giảng viên hướng dẫn : Nguyễn Văn Thiệu

Sinh viên thực hiện : Khúc Kim Anh - 20010754 : Đào Văn Lâm -

Năm học : 2022 - 2023

Hà Nội, tháng 12 năm 2022

</div>Trang 2<div class="page_container" data-page="2">

THÔNG TIN CHUNG

Sinh viên 1 Khúc Kim Anh Mssv: 20010754

</div>Trang 3<div class="page_container" data-page="3">

LỜI CẢM ƠN

Đầu tiên em xin bày tỏ lịng biết ơn sâu sắc đến thầy giáo chính đảm nhiệm hướng dẫn bộ môn Đồ án cơ sở, Thầy Nguyễn Văn Thiệu vì những ý kiến đóng góp q báu và mang tính xây dựng trong q trình lập kế hoạch và phát triển đề tài nghiên cứu đề tài này. Thầy đã giúp chúng em rất nhiều để nâng cao kiến thức của bản thân nhằm chuẩn bị chu đáo để tự tin thực hiện đồ án này. Thầy cũng khuyến khích chúng em nêu cao tin thần tự học. Chúng em đa cố gắng nghiêm cứu một cách nghiêm túc và ký lưỡng để có thể hồn thành bài nghiêm cứu thật chi tiết và hoàn chỉnh nhất.Tuy nhiên do vốn kiến thức còn hạn hẹp nên bài nghiêm cứu khó có thể tránh khỏi thiếu sót cũng như chưa chi tiết và hoàn chỉnh vậy nên kính mong thầy xem xét và góp ý để đề tài chúng em hoàn thiện hơn.

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

</div>Trang 4<div class="page_container" data-page="4">

2.2. Cụ thể các chức năng và sơ đồ cấu trúc ... 8

2.3. Yêu cầu chung ... 19

2.4. Giao tiếp phần mền ... 19

III. Thiết kế và cài đặt ... 19

IV. Demo chương trình ... 20

V. Kết luận ... 23

</div>Trang 5<div class="page_container" data-page="5">

Bảng 6. Kiểm tra đơn hàng. ... 14

Bảng 7. Xem giới thiệu và liên hệ ... 15

Bảng 8. Quản lí đơn hàng ... 16

Bảng 9. Quản lí sản phẩm ... 17

Danh sách sơ đồ Sơ đồ 1. Sơ đồ Usecase đăng nhập. ... 9

Sơ đồ 2. Sơ đồ Uc-chung đăng nhập. ... 9

Sơ đồ 3. Sơ đồ Usecase đăng kí. ... 10

Sơ đồ 4. Sơ đồ Uc-chung đăng kí. ... 10

Sơ đồ 5. Sơ đồ Usecase tìm kiếm ... 11

Sơ đồ 6. Sơ đồ Uc-chung tìm kiếm ... 11

Sơ đồ 7. Sơ đồ Usecase thêm giỏi hàng ... 12

Sơ đồ 8. Sơ đồ Uc-chung thêm giỏi hàng ... 12

Sơ đồ 9. Sơ đồ Usecase xem giỏi hàng. ... 13

Sơ đồ 10. Sơ đồ Uc-chung xem giỏi hàng. ... 13

Sơ đồ 11. Sơ đồ Usecase kiểm tra đơn hàng ... 14

Sơ đồ 12. Sơ đồ Uc-chung kiểm tra đơn hàng ... 14

Sơ đồ 13. Sơ đồ Usecase xem thông tin giới thiệu và liên hệ ... 15

Sơ đồ 14. Sơ đồ Uc-chung xem thông tin giới thiệu và liên hệ ... 15

Sơ đồ 15. Sơ đồ Usecase quản lí đơn hàng ... 16

Sơ đồ 16. Sơ đồ Uc-chung quản lí đơn hàng ... 16

Sơ đồ 17. Sơ đồ Usecase quản lí sản phẩm ... 17

</div>Trang 6<div class="page_container" data-page="6">

Sơ đồ 18. Sơ đồ Uc-chung quản lí sản phẩm ... 18

Danh sách hình ảnh Hình 1.Giao diện đăng nhập và đăng kí ... 19

Hình 2.Giao diện thay đổi mật khẩu ... 19

Hình 3.Giao diện trang chủ . ... 20

Hình 4.Giao diện giỏi hàng. ... 20

Hình 5.Giao diện liên hệ . ... 21

Hình 6.Giao diện người quản lí ... 22

</div>Trang 7<div class="page_container" data-page="7">

I. GIỚI THIỆU

1.1. Đặt vấn đề

Trong thời đại hiện nay, ngành công nghệ thông tin đang được sử dụng và ứng dụng rộng rãi trên mọi lĩnh vực. Nó là ngành phát triển khơng ngừng, thời kì cơng nghiệp địi hỏi thông tin nhanh, mua bán thuận lợi,…..Để đáp ứng nhu cầu của người dùng nhóm chúng em đã nghiên cứu và tìm hiểu đưa ra đề tài liên quan tới bánh ngọt giúp người dùng mua bán trở nên dễ dàng hơn. Chính

vì vậy nhóm chúng em phát triển và xây dựng Webssite bán bánh, với những

kiến thức đã được học và quá trình tìm hiểu và đặc biệt có thầy Nguyễn Văn Thiệu hướng dẫn nhiệt tình đã giúp nhóm em hồn thiện sản phẩm một cách tốt nhất.

</div>Trang 8<div class="page_container" data-page="8">

II. MÔ TẢ

2.1. Các chức năng

7 Xem giới thiệu và liên hệ

</div>Trang 9<div class="page_container" data-page="9">

2.2. Cụ thể các chức năng và sơ đồ cấu trúc Đăng nhập

Đối tượng sử dụng - Người dùng - Người quản lí

Chức năng Cho phép người dùng truy cập vào hệ thống

Bảng 1: Đăng nhập

Sơ đồ 1: Usecase đăng nhập

Sơ đồ 2: Uc-chung đăng nhập

</div>Trang 10<div class="page_container" data-page="10">

Đăng kí

Tên chức năng Đăng kí

Đối tượng sử dụng - Người dùng

Chức năng Cho phép người dùng đăng kí tài khoản để sử dụng đăng nhập vào hệ thống

Bảng 2: Đăng kí

Sơ đồ 3: Usecase đăng kí

Sơ đồ 4: Uc-chung đăng xuất

</div>Trang 11<div class="page_container" data-page="11">

Tìm kiếm

Tên chức năng Tìm kiếm

Đối tượng sử dụng - Người dùng - Người quản lí

Chức năng Cho phép người dùng tìm kiếm sản phẩm trong trang web

Bảng 3: Tìm kiếm

Sơ đồ 5: Usecae tìm kiếm

Sơ đồ 6: Uc-chung tìm kiếm

</div>Trang 12<div class="page_container" data-page="12">

Thêm vào giỏi hàng

Tên chức năng Thêm vào giỏi hàng Đối tượng sử dụng - Người dùng

Chức năng Cho phép người dùng thêm sản phẩm vào giỏi hàng

Bảng 4 :Thêm vào giỏi hàng

Sơ đồ 7: Usecase giỏi hàng

Sơ đồ 8: Uc-chung giỏi hàng

</div>Trang 13<div class="page_container" data-page="13">

Sơ đồ 9: Usecase xem giỏi hàng

Sơ đồ 10: Uc-chung xem giỏi hàng

</div>Trang 14<div class="page_container" data-page="14">

Kiểm tra đơn hàng

Tên chức năng Kiểm tra đơn hàng Đối tượng sử dụng - Người quản lí

- Người dùng

Chức năng Cho phép người dùng có thể kiểm tra thơng tin trang thái đơn hàng

Bảng 6: Kiểm tra đơn hàng

Sơ đồ 11: Usecase kiểm tra đơn hàng

Sơ đồ 12: Uc-chung kiểm tra đơn hàng

</div>Trang 15<div class="page_container" data-page="15">

Xem giới thiệu và thông tin liên hệ

Tên chức năng Xem giới thiệu Đối tượng sử dụng - Người dùng

Chức năng Người dung có thể xem thông tin liên hệ của trang web

Bảng 7: Xem thông tin giới thiệu và liên hệ

Sơ đồ 13: Usecase thông tin giới thiệu và liên hệ

Sơ đồ 14: Uc-chung hiện thị thông tin chi tiết về giới thiệu và liên hệ

</div>Trang 16<div class="page_container" data-page="16">

Sơ đồ 14: Usecase quản lí đơn hàng

Sơ đồ 15: Uc-chung quản lí đơn hàng

</div>Trang 18<div class="page_container" data-page="18">

Sơ đồ 17: Uc-chung quản lí sản phẩm

2.3. Yêu cầu chung

Trực quan, dễ hiểu, dễ sử dụng Tốc độ phản hồi nhanh

Các thao tác dễ dàng Giao diện dễ nhìn

III. THIẾT KẾ VÀ CÀI ĐẶT

Ngôn ngữ sử dụng và giới thiệu qua về ngôn ngữ:

+ HTML: là ngôn ngữ đánh dấu siêu văn bản được sử dụng để tạo tài liệu có thể truy cập trên mạng.

+ CSS: là ngôn ngữ quy định cách trình bày cho các tài liệu

+ JavaScript: là một ngôn ngữ dạng script thường sử dụng cho việc lập trình trang web. Trong phần này nhóm chúng em sử dụng NodeJs

</div>Trang 19<div class="page_container" data-page="19">

IV. DEMO

Đăng nhập và đăng kí

Nhập tài khoản và mật khẩu đã đăng kí. Nếu tài khoản và mật khẩu hợp lệ, hệ thống sẽ chuyển đến trang chủ. Nếu khơng hợp lệ thì hệ thống u cầu nhập lại tài khoản và mật khẩu.

Nhập e-mail cần đăng kí sau đó nhấn đăng kí

Hình 1: Giao diện đăng nhập và đăng kí

Thay đổi mật khẩu

Sau khi điền đầy đủ thơng tin thì ấn cập nhật hệ thống sẽ lưu thông tin của bạn. Hoặc ấn nút “ Thay đổi mật khẩu” khi bạn muốn thay đổi

Hình 2: Giao diện thay đổi mật khẩu

</div>Trang 21<div class="page_container" data-page="21">

Liên hệ

Hiển thị Hotline, Email, Địa chỉ của trang web và form thông tin

Hình 5: Giao diện liên hệ

</div>Trang 23<div class="page_container" data-page="23">

IV. KẾT QUẢ

Dù chưa có thời gian thử nghiệm trang web nên nhóm em chưa thu được phản hồi người dùng, nhưng trong thời gian bắt tay vào làm và phát triển trang web chúng em có thêm những kiến thức nền tảng để xây dựng web hồn chỉnh. Bên cạnh đó, chúng em cũng được mở rộng thêm kiến thức chuyên ngành vầ kiến thức lập trình,…

Ưu điểm của đề tài: Giao diện đẹp, các thao tác sử dụng dễ dàng, thân thiện với người dùng.

Nhược điểm: Nhóm em nhận thấy một số hạn chế tồn tại đó là tốc độ load trang chưa cao, vẫn còn lỗi phát sinh vận hành hệ thống

Hướng phát triển của đề tài: Em sẽ tiếp tục nghiêm cứu và phát triển website này nhằm tang các tính năng và tối ưu hóa tốc độ xử lí để đem lại hiệu quả cao hơn, phát triển các chức năng nâng cao để đưa website vào ứng dụng thực tế.

</div>