BÁO CÁO

Môn học/Mô đun: Thực tập tốt nghiệp

THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN LAPTOP

Khoa: Công nghệ thông tin Ngành: CNTT/TKĐH

SINH VIÊN THỰC HIỆN: LÊ THANH TÙNG MÃ SỐ SINH VIÊN: 2109610165

LỚP: 1621- CNT05

GV HƯỚNG DẪN: ĐINH THỊ THU TRANG

HÀ NỘI, THÁNG 5 NĂM 2024

Thành viên nhóm:

• Lê Thanh Tùng: làm biểu đồ trình tự, triển khai, thành phần, thiết kế giao diện trang chủ, chi tiết sản phẩm, danh mục sản phẩm, viết báo cáo
• Nguyễn Thành Đạt: viết báo cáo, phân tích và đặc tả yêu cầu, thiết kế biểu đồ usecase, biểu đồ lớp, thiết kế CSDL, caì đặt CSDL trên MySQL
• Nguyễn Ngọc Huy: làm biểu đồ trạng thái, hoạt động, thiết kế giao diện giỏ hàng, thiết kế giao diện đăng nhập, đăng ký, viết báo cáo

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

Hà Nội, Ngày ..... tháng ..... năm 20....

PHIẾU NHẬN XÉT THỰC TẬP

Họ tên sinh viên (nhóm): Lê Thanh Tùng Lớp-khóa: 1621-CNT05-K21

Ngày bắt đầu:19-02-2024............................ngày kết thúc: 12-05-2024........................

Nội dung thực tập: Thiết kế và xây dựng website bán laptop........................................

.......................................................................................................................................

.......................................................................................................................................

Nhận xét của GVHD về chất lượng công việc được giao:

Các công việc được giao:

□ Hoàn thành xuất sắc □ Khá □ Yếu

□ Tốt □ Trung bình

Hoàn tất công việc được giao:

□ Hoàn thành đúng □ Thỉnh thoảng đúng □ Không đúng thời hạn

Tính hữu ích của đợt thực tập với cơ quan

□ Giúp ích nhiều □ Giúp ích ít □ Không giúp ích mấy cho cơ quan

1. Nhận xét của GVHD về cá nhân sinh viên:
   1. Năng lực chuyên môn được sử dụng vào công việc được giao ở mức:

□ Giỏi □ Khá □ Trung bình □ Yếu

• 1. Tinh thần, thái độ đối với công việc được giao:

□ Tích cực □ Bình thường □ Thiếu tích cực

• 1. Đảm bảo kỷ luật lao động (giờ giấc lao động, nghỉ làm, ):

□ Tốt □ Trung bình □ Kém

• 1. Khả năng sử dụng phần mềm văn phòng (office):

□ Giỏi □ Khá □ Trung bình □ Yếu

• 1. Khả năng sử dụng Ngoại ngữ chuyên ngành (nếu có):

□ Giỏi □ Khá □ Trung bình □ Yếu

1. Nhu cầu nhân lực của cơ quan (kiến thức, kỹ năng, số lượng):.........................

.......................................................................................................................................................

.......................................................................................................................................................

Các nhận xét khác (nếu có):

...............................................................................................................................................................

...............................................................................................................................................................

...............................................................................................................................................................

Đánh giá:

1. Điểm chuyên cần, tác phong và đạo đức (Đạt/Không đạt):.................................
2. Điểm thực tập (GVHD đánh giá):.......................................................................

Cơ quan/Đơn vị

(Ký và ghi rõ họ tên)

GVHD

(Ký và ghi rõ họ tên)

BẢN KẾ HOẠCH THỰC TẬP TỐT NGHIỆP CÁ NHÂN

Họ và tên SV: Lê Thanh Tùng Lớp-khóa:1621CNT05-K21

Số ĐT:0375511896.................................Email: leetungg03@gmail.com.......................

1. Nội dung thực tập: Thiết kế và xây dựng website bán laptop................................

.........................................................................................................................................

.........................................................................................................................................

1. Yêu cầu:......................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

Kế hoạch thực hiện

1. Nội dung chi tiết thực hiện chi tiết

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

.........................................................................................................................................

Hà Nội, ngày tháng năm 20

Xác nhận của Cán bộ hướng dẫn Sinh viên

(ký, ghi rõ họ và tên) (ký, ghi rõ họ và tên)

CHƯƠNG I: KHẢO SÁT HỆ THỐNG

• 1. Mô tả về môi trường hoạt động

Môi trường Phát triển:

• • • • Ngôn ngữ lập trình: Sử dụng các ngôn ngữ lập trình như HTML, CSS, JavaScript cho phần frontend và Node.js cho phần backend.
      • Framework: Sử dụng các framework như React.js cho frontend và Express.js cho backend để tạo ra một ứng dụng web động và hiệu quả.
      • Cơ sở dữ liệu: Sử dụng MongoDB làm cơ sở dữ liệu để lưu trữ thông tin về sản phẩm, người dùng và đơn hàng.
      • Môi trường phát triển tích hợp (IDE): Sử dụng các IDE như Visual Studio Code, Sublime Text hoặc Atom để phát triển và chỉnh sửa mã nguồn.

Môi trường Sản xuất:

• • • • Hệ điều hành: Triển khai trên các hệ điều hành như Linux hoặc Windows Server.
      • Máy chủ web: Sử dụng các máy chủ web như Apache hoặc Nginx để phục vụ trang web.
      • Dịch vụ đám mây: Triển khai trên các dịch vụ đám mây như Amazon Web Services (AWS), Microsoft Azure hoặc Google Cloud Platform (GCP) để đảm bảo tính sẵn sàng và mở rộng dễ dàng khi cần thiết.
      • Bảo mật: Cài đặt các biện pháp bảo mật như SSL/TLS để bảo vệ thông tin cá nhân và thanh toán của người dùng.
      • Quản lý phiên bản: Sử dụng các công cụ quản lý phiên bản như Git để theo dõi và quản lý mã nguồn.
  1. Khảo sát bài toán

Bài toán: Thiết kế và Xây dựng Website Bán Laptop

• • 1. Mô tả:
       • Mục tiêu: Xây dựng một trang web thương mại điện tử chuyên bán laptop, cung cấp cho người dùng một nền tảng để xem, mua sắm và đặt hàng các sản phẩm laptop.

Yêu cầu:

• • • • Hiển thị danh sách sản phẩm laptop: Trang web cần hiển thị danh sách các sản phẩm laptop với thông tin như hình ảnh, giá cả, thông số kỹ thuật và đánh giá.
      • Chi tiết sản phẩm: Người dùng có thể xem thông tin chi tiết về từng sản phẩm bao gồm các tính năng, đặc điểm kỹ thuật, và mô tả.
      • Thêm vào giỏ hàng: Cho phép người dùng thêm sản phẩm vào giỏ hàng và điều hướng đến trang giỏ hàng để xem và quản lý đơn hàng.
      • Thanh toán đơn hàng: Cung cấp giao diện thanh toán để người dùng có thể nhập thông tin thanh toán và hoàn tất quy trình mua hàng.
      • Quản lý người dùng: Hỗ trợ đăng ký, đăng nhập và quản lý tài khoản cho người dùng.

Phân tích:

• • • • Nền tảng công nghệ: Sử dụng Node.js và React.js để phát triển cả frontend và backend của trang web với MongoDB là cơ sở dữ liệu.
      • Thiết kế giao diện người dùng: Tạo giao diện thân thiện với người dùng, dễ sử dụng và trực quan.
      • Tối ưu hóa trải nghiệm người dùng: Đảm bảo trang web hoạt động mượt mà và có thời gian tải nhanh, đồng thời tối ưu hóa trải nghiệm mua sắm trực tuyến.

Triển khai và Kiểm tra:

• • • • Triển khai trang web trên môi trường sản xuất sau khi đã kiểm tra kỹ lưỡng và đảm bảo tính ổn định.
      • Tiến hành kiểm tra chức năng và hiệu suất của trang web để đảm bảo rằng tất cả các tính năng hoạt động đúng và hiệu quả.

Quản lý và Phát triển:

• • • • Liên tục cập nhật và phát triển trang web để cải thiện trải nghiệm người dùng và tăng tính linh hoạt và tính năng của nền tảng.
      • Theo dõi và phản hồi từ phía người dùng để thúc đẩy sự phát triển và cải thiện liên tục của trang web.
  1. Yêu cầu đề tài
     1. : Mô tả bài toán Mô tả yêu cầu:
        • Tạo một liên kết trên trang web, trong đó có một biểu tượng (icon) và một đoạn văn bản (chữ).
        • Yêu cầu có sự khoảng cách giữa biểu tượng và văn bản để tạo ra một bố cục hài hòa và dễ nhìn.

Chức năng:

• • • • Tạo ra một liên kết trực quan và dễ nhận biết cho người dùng.
      • Hiển thị một biểu tượng hình ảnh kèm theo một đoạn văn bản mô tả chức năng hoặc nội dung của liên kết.

Yêu cầu kỹ thuật:

• • • • Sử dụng ngôn ngữ đánh dấu HTML để tạo các phần tử cần thiết: <a>, <i> (biểu tượng) và <span> (văn bản).
      • Sử dụng CSS để tùy chỉnh kiểu dáng của liên kết, bao gồm cả biểu tượng và văn bản, và tạo khoảng cách giữa chúng.

Điều kiện tiên quyết:

• • • • Đảm bảo rằng trang web đã tích hợp thư viện biểu tượng (ví dụ: Font Awesome) để sử dụng biểu tượng.
      • Cần có kiến thức cơ bản về HTML và CSS để triển khai yêu cầu.

Yêu cầu không chức năng:

• • • • Liên kết phải có sự tương tác và có thể nhận dạng dễ dàng.
      • Biểu tượng và văn bản phải tương thích với giao diện và mục tiêu trang web.
    1. : Phân tích và đặc tả yêu cầu

Yêu cầu chức năng

1. Cho phép cập nhật hàng vào CSDL.
2. Hiển thị danh sách các mặt hàng theo từng loại.
3. Hiển thị hàng hóa khách hàng đã chọn mua.
4. Quản lý đơn đặt hàng.
5. Cập nhật hàng hóa, nhà sản xuất, loại hàng.
6. Xử lý đơn hàng.
7. Thống kê các khách hàng mua trong ngày.

Hệ thống có 2 phần:

• • Phần khách hàng: là những người có nhu cầu mua sắm hàng hóa. Chức năng bao gồm:
    • Hiển thị danh sách các mặt hàng của cửa hàng để khách hàng xem, lựa chọn và mua.
    • Đăng ký, đăng nhập, xem các thông tin, khuyến mãi trên trang web.
  • Phần quản trị viên: là người có quyền kiểm soát mọi hoạt động của hệ thống. Chức năng bao gồm:
    • Cập nhật, sửa, xoá các mặt hàng, loại hàng, nhà sản xuất, tài khoản khách hàng, slider.
    • Tiếp nhận kiểm tra đơn đặt hàng của khách, hiển thị đơn đặt hàng.

Yêu cầu phi chức năng

• • Trang web phải được thiết kế dễ hiểu, giao diện dễ dùng và hấp dẫn.
  • Cung cấp thông tin quảng cáo hấp dẫn và tin tức khuyến mãi.
  • Đảm bảo an toàn thông tin khách hàng trong quá trình thanh toán.
  • Tích hợp nhiều phương thức thanh toán.
  • Luôn đổi mới và hấp dẫn.

CHƯƠNG II: PHÂN TÍCH HỆ THỐNG

• 1. Phân tích chức năng hệ thống
     1. Xác định các Actor và Usecase tổng quát của hệ thống
        1. Các actor
• Actor là một thực thể hoặc hệ thống bên ngoài tương tác với hệ thống mà bạn đang phân tích hoặc thiết kế. Một actor không nhất thiết phải là một con người, mà có thể là một hệ thống, một máy móc, hoặc một thành phần khác của môi trường xung quanh.
• Ký hiệu :

Hình 5

Các usecase tổng quát của hệ thống

• Use case là một kỹ thuật phân tích và thiết kế trong lĩnh vực phát triển phần mềm. Nó được sử dụng để mô tả các hành vi của hệ thống từ quan điểm của người sử dụng và làm rõ các yêu cầu và chức năng của hệ thống.
• Ký hiệu :

Hình 6

2.1.6: Biểu đồ usecase

1. Chức năng đăng nhập, đăng ký

Hình 7

Đăng nhập:

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn truy cập vào tài khoản đã đăng ký.

Hành động:

• • • Người dùng nhập email và mật khẩu
    • Hệ thống kiểm tra thông tin đăng nhập
    • Nếu thông tin đúng, hệ thống cho phép truy cập vào tài khoản
    • Người dùng được đưa đến trang chính sau khi đăng nhập thành công

Đăng ký:

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn tạo tài khoản mới trên hệ thống.

Hành động:

• • • Người dùng nhập thông tin cá nhân (tên, email, mật khẩu, v.v.).
    • Hệ thống kiểm tra tính hợp lệ của thông tin.
    • Nếu thông tin hợp lệ, hệ thống tạo tài khoản mới.
    • Người dùng nhận thông báo xác nhận đăng ký.

Chức năng đổi mật khẩu

Hình 8

• Tác nhân (Actor): Người dùng
• Mô tả: Người dùng muốn thay đổi mật khẩu hiện tại của họ.

Hành động:

• • Người dùng đăng nhập vào hệ thống.
  • Chọn tùy chọn “Đổi mật khẩu”.
  • Nhập mật khẩu hiện tại và mật khẩu mới.
  • Hệ thống kiểm tra tính hợp lệ của mật khẩu mới.
  • Nếu mật khẩu mới hợp lệ, hệ thống cập nhật mật khẩu và thông báo thành công.

Chức năng quản lý giỏ hàng, thanh toán

Hình 9

Quản lý giỏ hàng (Manage Cart):

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn thêm, xóa hoặc chỉnh sửa các sản phẩm trong giỏ hàng.

Hành động:

• • • Người dùng xem danh sách sản phẩm trong giỏ hàng.
    • Thêm sản phẩm mới vào giỏ hàng.
    • Xóa sản phẩm khỏi giỏ hàng.
    • Cập nhật số lượng hoặc thuộc tính của sản phẩm trong giỏ hàng.

Thanh toán (Checkout):

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn thanh toán và hoàn tất đơn hàng.

Hành động:

• • • Người dùng chọn chức năng thanh toán.
    • Form thanh toán xuất hiện, hệ thống hiển thị các yêu cầu thanh toán.
    • Người dùng nhập thông tin cá nhân (họ tên, số tài khoản, phương thức thanh toán, địa chỉ email, v.v.).
    • Chọn gửi thông tin.

Xóa sản phẩm

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn xóa những mặt hàng không cần thiết.
  • Hành động: chọn vào ô xóa sản phẩm cạnh sản phẩm cần xóa, bấm xóa, sản phẩm sẽ tự biến mất khỏi giỏ hàng

Chức năng quản lý sản phẩm

Hình 10

Thêm thông tin sản phẩm (Add Product):

• • Tác nhân (Actor): Người quản lý
  • Mô tả: Cho phép người quản lý thêm thông tin về một sản phẩm mới vào hệ thống.

Hành động:

• • • Người quản lý chọn “Thêm sản phẩm” từ giao diện quản lý sản phẩm.
    • Hệ thống hiển thị biểu mẫu hoặc giao diện để nhập thông tin sản phẩm mới.
    • Người quản lý điền thông tin liên quan đến sản phẩm, bao gồm:
      • Tên sản phẩm
      • Mã số sản phẩm (nếu có)
      • Mô tả sản phẩm
      • Giá sản phẩm
      • Danh mục sản phẩm
      • Thông tin kỹ thuật (nếu cần)
    • Hệ thống kiểm tra thông tin và thêm sản phẩm mới vào cơ sở dữ liệu.
    • Người quản lý xác nhận việc thêm sản phẩm.
    • Hệ thống thông báo kết quả thành công và hiển thị thông tin về sản phẩm đã được thêm.

Sửa thông tin sản phẩm (Edit Product):

• • Tác nhân (Actor): Người quản lý
  • Mô tả: Cho phép người quản lý thay đổi thông tin của một sản phẩm trong hệ thống.

Hành động:

• • • Người quản lý chọn “Sửa thông tin sản phẩm” từ giao diện quản lý sản phẩm.
    • Hệ thống hiển thị danh sách sản phẩm có sẵn.
    • Người quản lý chọn sản phẩm cần chỉnh sửa.
    • Hệ thống hiển thị biểu mẫu hoặc giao diện để cập nhật thông tin sản phẩm.
    • Người quản lý thay đổi thông tin cần sửa (ví dụ: giá, mô tả, danh mục).
    • Hệ thống kiểm tra thông tin và cập nhật sản phẩm trong cơ sở dữ liệu.
    • Người quản lý xác nhận việc sửa thông tin sản phẩm.
    • Hệ thống thông báo kết quả thành công.

Xóa sản phẩm (Delete Product):

• • Tác nhân (Actor): Người quản lý
  • Mô tả: Cho phép người quản xóa một sản phẩm trong hệ thống.

Hành động:

• • • Người quản lý chọn “xóa sản phẩm” từ giao diện quản lý sản phẩm.
    • Người quản lý xác nhận việc xóa sản phẩm.
    • Hệ thống thông báo kết quả thành công.

Quản lý người dùng (User management):

• • Tác nhân (Actor): Người quản lý
  • Mô tả: Cho phép người quản xóa một sản phẩm trong hệ thống.
  • Hành động: có thể xem thông tin người dùng, chặn hoặc xóa người dùng
    1. : Biểu đồ lớp
       1. Biểu đồ lớp đối với ca sử dụng mua bán hàng

Hình 11

• • 1. : Biểu đồ hoạt động

Hình 12

Tìm kiếm sản phẩm (Search Product):

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn tìm kiếm sản phẩm trên trang web.

Hành động:

• • • Người dùng nhập từ khóa tìm kiếm (ví dụ: “laptop Dell”, “laptop Samsung”).
    • Hệ thống hiển thị danh sách sản phẩm phù hợp với tìm kiếm.
    • Sau khi lập đơn mua hàng với sản phẩm cần thiết, người dùng sẽ xem xét yêu cầu, nếu phù hợp thì sẽ sang bước tiếp theo, còn không thì sẽ yêu cầu chọn sản phẩm khác

Thanh toán (Checkout):

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn thanh toán và hoàn tất đơn hàng.

Hành động:

• • • Người dùng chọn chức năng thanh toán.
    • Hệ thống hiển thị form thanh toán và yêu cầu thông tin cá nhân (họ tên, địa chỉ, phương thức thanh toán, v.v.).
    • Người dùng nhập thông tin và xác nhận thanh toán.
    1. : Biểu đồ trình tự
       1. Biểu đồ trình tự đối với ca sử dụng mua bán hàng

Hình 13

Biểu đồ trình tự mua bán hàng

Tìm kiếm sản phẩm (Search Product):

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn tìm kiếm sản phẩm trên trang web.

Hành động:

• • • Người dùng nhập từ khóa tìm kiếm (ví dụ: “laptop Dell”, “laptop Samsung”).
    • Hệ thống hiển thị danh sách sản phẩm phù hợp với tìm kiếm.
    • Sau khi lập đơn mua hàng với sản phẩm cần thiết, người dùng sẽ xem xét yêu cầu, nếu phù hợp thì sẽ sang bước tiếp theo, còn không thì sẽ chọn sản phẩm khác

Thanh toán (Checkout):

• • Tác nhân (Actor): Người dùng
  • Mô tả: Người dùng muốn thanh toán và hoàn tất đơn hàng.

Hành động:

• • • Người dùng chọn chức năng thanh toán.
    • Hệ thống hiển thị form thanh toán và yêu cầu thông tin cá nhân (họ tên, địa chỉ, phương thức thanh toán, v.v.).
    • Người dùng nhập thông tin và xác nhận thanh toán, nhận phiếu bảo hành.
    • Nếu có sai sót trong quá trình thanh toán, hệ thống sẽ báo lỗi, không chấp nhận thanh toán và sau đó hủy thanh toán

: Biểu đồ trạng thái

1. Thêm khách hàng

Hình 14

Thêm khách hàng (Add Customer):

• • Tác nhân (Actor): Nhân viên bán hàng
  • Mô tả: Nhân viên muốn thêm thông tin khách hàng mới vào hệ thống.

Hành động:

• • • Nhân viên nhập thông tin khách hàng (tên, số điện thoại, địa chỉ, v.v.).
    • Hệ thống kiểm tra tính hợp lệ của thông tin.
    • Nếu thông tin hợp lệ, hệ thống tạo khách hàng mới và gán một mã khách hàng.
    • Nhân viên xác nhận việc thêm khách hàng.
    • Hệ thống thông báo kết quả thành công.

Sửa thông tin khách hàng

Hình 15

Sửa thông tin khách hàng (Edit Customer Information):

• • Tác nhân (Actor): Nhân viên bán hàng
  • Mô tả: Nhân viên muốn cập nhật thông tin của một khách hàng trong hệ thống.

Hành động:

• • • Nhân viên chọn khách hàng cần sửa thông tin.
    • Hệ thống hiển thị biểu mẫu hoặc giao diện để cập nhật thông tin khách hàng.
    • Nhân viên thay đổi thông tin cần sửa (ví dụ: số điện thoại, địa chỉ, email).
    • Hệ thống kiểm tra thông tin và cập nhật khách hàng trong cơ sở dữ liệu.
    • Nhân viên xác nhận việc sửa thông tin khách hàng.
    • Hệ thống thông báo kết quả thành công.

Xóa thông tin khách hàng

Hình 16

Xóa thông tin khách hàng (Delete Customer Information):

• • Tác nhân (Actor): Nhân viên bán hàng
  • Mô tả: Nhân viên muốn xóa thông tin của một khách hàng trong hệ thống.

Hành động:

• • • Nhân viên chọn khách hàng cần xóa thông tin.
    • Hệ thống hiển thị thông tin khách hàng.
    • Nhân viên xác nhận việc xóa thông tin khách hàng.
    • Hệ thống xóa thông tin khách hàng khỏi cơ sở dữ liệu.

: Biểu đồ thành phần

Hình 17

: Biểu đồ triển khai

Hình 18

Phân tích thiết kế dữ liệu hệ thống

• • 1. Bảng cơ sở dữ liệu Bảng đăng ký

Bảng đăng nhập

Bảng nhân viên

Bảng loại hàng

Bảng khách hàng

Bảng mặt hàng:

Bảng giỏ hàng:

Bảng hóa đơn:

Bảng chi tiết hóa đơn: