Giày thể thao không chỉ làm thỏa mãn nhucầu thời trang mà còn thể hiện phong cách, cá tính, cũng như năng động thoải máitrong công việc, học tập cũng như hoạt động hằng ngày của người ti
Tổng quan về trang web
Tên đề tài
“XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO ONLINE”.
Giới thiệu
Với sự phát triển của công nghệ thông tin như hiện nay, chúng ta có thể dễ dàng tạo ra các website đọc truyện đẹp mắt thỏa mãn nhu cầu của mọi người Đề tài này nhằm mục tiêu xây dựng một website để tìm và đọc truyện tranh một cách nhanh chóng tiện lợi cho người đọc thỏa mãn nhu cầu muốn được giải trí của họ.
Mục tiêu
Xây dựng trang web gồm các chức năng cơ bản sau đây:
- Người dùng: Đọc truyện, theo dõi truyện.
- Người đăng truyện: Quản lý truyện, quản lý chapter.
- Người quản trị: Quản lý người dùng, quản lý thể loại, phân quyền, vai trò cho người dùng.
Công cụ thiết kế
Sử dụng Boostrap, JavaScript và các công cụ hỗ trợ định dạng như CSS để làm giao diện cho trang web Và được viết bằng ngôn ngữ PHP để xử lý các lệnh trên server rồi sau đó sinh ra mã HTML trên client từ đó tạo ra một trang web động có cơ sở dữ liệu là MySql Và sử dụng Laravel FrameWork để xây dựng trang web theo mô hình MVC.
Kế hoạch thực hiện
Thời gian Nội dung thực hiện
Tuần thứ 1 ngày 25/9 Gặp GVHD và duyệt đề cương
Tham khảo các website đã có và lên ý tưởng Thiết kế giao diện trang web
Phân tích thiết kế hệ thống trang web
Thiết kế giao diện các trang còn lại Xây dựng các chức năng backend
Thiết kế và xây dựng các form Xây dựng các chức năng backend
Xây dựng các chức năng frontend Xây dựng các chức năng backend
Xây dựng các chức năng frontend Xây dựng các chức năng thống kê
Kiểm lỗi trang web, test các nút được thêm vào Thêm các hiệu ứng vào website, các chức năng cơ bản
Làm slide báo cáo (bằng tiếng Anh) Viết báo cáo word
Tuần thứ 9 từ 14/11 đến 20/11 Kiểm tra web, sửa lỗi (nếu có); xem lại báo cáo, slide
21/11 đến 5/12 Kiểm tra lần cuối và nộp báo cáo và sản phẩm
Cơ sở lý thuyết
Tìm hiểu về HTML
HTML (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 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…
Cấu trúc HTML là website chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng HTML không phải ngôn ngữ lập trình cho nên không thể thực hiện các chức năng động, chỉ có tác dụng bố cục và định dạng trang web cho nên phải kết hợp với CSS (Cascading Style Sheets) và JavaScript.
Tìm hiểu về CSS
CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để tạo nên phong cách cho Website Có thể hiểu là công cụ giúp chúng ta thêm vào những thay đổi về mặt hình thức như bố cục màu sắc, font chữ… Hoạt động bằng cách khoanh vùng chọn dựa trên 1 thẻ HTML, ID hay Class từ đó áp dụng những thuộc tính cần thay đổi lên vùng được chọn Có thể hiểu nếu một website không có CSS thì đó sẽ chỉ đơn thuần là một trang chứa văn bản với hai màu chủ đạo là trắng và đen.
Tìm hiểu về JS
JS (JavaScript) là ngôn ngữ lập trình website, được tích hợp và nhúng trong HTML giúp website sống động hơn Các slide show, pop-up quảng cáo và tính năng autocomplete của Google đều được viết bằng JS JS hỗ trợ hầu hết các trình duyệt trên máy tính và điện thoại.
Khi tải một trang web, trình duyệt phân tích cú pháp HTML và tạo ra một loại dữ liệu gọi là DOM từ nội dung DOM thể hiện chế độ xem trực tiếp của trang web với mã JavaScript Đoạn mã này thực hiện cập nhật cho DOM và được trình bày ngay lập tức cho người dùng.
Trình duyệt cũng ghi nhận các sự kiện giao diện người dùng như: di chuyển chuột, nhấp chuột, v.v Sau đó, tùy theo phản hồi của người dùng, đoạn mã sẽ thực hiện công việc được lập trình tương ứng Sử dụng tất cả các tiện ích này, bạn có thể xây dựng các ứng dụng nhỏ để phục vụ cho một vài mục đích được cho phép.
Tìm hiểu về jQuery
JQuery được tích hợp nhiều module khác nhau Từ module hiệu ứng cho đến module truy vấn selector JQuery được sử dụng đến 99% trên tổng số website trên thế giới jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết với JavaScript Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn JQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn giản hơn.
Tìm hiểu về boostrap
Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website.
Tìm hiểu về Php
Ngôn ngữ PHP là từ viết tắt của Personal Home Page (hiện nay là Hypertext Preprocessor) Thuật ngữ này chỉ chuỗi ngôn ngữ kịch bản hay mã lệnh, phù hợp để phát triển cho các ứng dụng nằm trên máy chủ Khi viết phần mềm bằng ngôn ngữ PHP, chuỗi lệnh sẽ được xử lý trên server để từ đó sinh ra mã HTML trên client Và dựa vào đó, các ứng dụng trên website của bạn sẽ hoạt động một cách dễ dàng.
PHP được sử dụng rộng rãi trong phát triển web phía máy chủ Mã PHP có thể nhúng vào HTML thông qua cặp thẻ PHP Nhờ đó, PHP cho phép các ứng dụng web tương tác dễ dàng với các trang web khác trong hệ thống mạng internet.
PHP cũng là ngôn ngữ lập trình mã nguồn mở và miễn phí PHP tương thích với nhiều nền tảng khác nhau như Windows, MacOS và Linux, v.v Đa phần các trang website bạn đang sử dụng hàng ngày để học tập, làm việc và giải trí đều sử dụng ngôn ngữ lập trình PHP Chẳng hạn như Facebook, Pinterest, Wikipedia, WordPress, v.v. Ngôn ngữ lập trình PHP được đánh giá là dễ đọc Do vậy, cũng dễ hiểu tại sao nó lại trở thành ngôn ngữ được nhiều bạn trẻ ưu tiên lựa chọn học trước khi bắt đầu vào nghề.
Tìm hiểu về MySql
Hệ thống sử dụng hệ cơ sở dữ liệu MySQL MySQL là hệ quản trị cơ sở dữ liệu tự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trong quá trình phát triển ứng dụng Vì MySQL là hệ quản trị cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh Với tốc độ và tính bảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên internet Người dùng có thể tải về MySQL miễn phí từ trang chủ MySQL có nhiều phiên bản cho các hệ điều hành khác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X, Unix, FreeBSD, NetBSD, Novel NetWare, SGI Irix, Solaris, SunOS,
MySQL là một hệ quản trị cơ sở dữ liệu quan hệ, sử dụng ngôn ngữ truy vấn có cấu trúc (SQL) để quản lý dữ liệu.
Tìm hiểu về Laravel framework
Framework chính là một thư viện với các tài nguyên có sẵn cho từng lĩnh vực để lập trình viên sử dụng thay vì phải tự thiết kế Có Framework, lập trình viên chỉ tìm hiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau và hoàn chỉnh sản phẩm của mình Đối với lập trình viên trong mỗi một lĩnh vực, họ cần phải xây dựng các lớp chương trình để xây dựng nên những phần mềm, ứng dụng thành phẩm.
PHP framework là thư viện làm cho sự phát triển của những ứng dụng web viết bằng ngôn ngữ PHP trở nên trôi chảy hơn Bằng cách cung cấp 1 cấu trúc cơ bản để xây dựng những ứng dụng đó Hay nói cách khác, PHP framework giúp bạn thúc đẩy nhanh chóng quá trình phát triển ứng dụng Giúp bạn tiết kiệm được thời gian, tăng sự ổn định cho ứng dụng Giảm thiểu số lần phải viết lại code cho lập trình viên.
Định nghĩa hệ thống
Mô tả bài toán
Website bán giày thể thao online là website giúp cho người dùng có thể chọn mua những đôi giày thể thao, đối với người quản trị thì có thể quản lý các sản phẩm,quản lý các user hiện có Đối với khách hàng có thể chọn mua giày thể thao mình muốn.
Các nhóm chức năng của hệ thống
Chức năng của hệ thống có thể chia làm các nhóm chức năng chính như sau:
- Nhóm chức năng đăng ký, đăng nhập.
- Nhóm chức năng chọn sản phẩm, thêm sản phẩm vào giỏ hàng, thêm sản phẩm vào trang bán hàng.
- Nhóm chức năng quản lý người dùng, quản lý thông tin cá nhân.
- Nhóm chức năng quản lý vai trò, quyền truy cập hệ thống của người dùng.
Xác định các tác nhân
Dựa vào mô tả bài toán ta có thể xác định được các tác nhân chính như sau:
- Người dùng: là người tương tác với website thông qua chọn sản phẩm trong website.
- Người bán hàng: là nhân viên được quản lý bởi người quản trị hệ thống, là người phụ trách việc quản lý sản phẩm.
- Người quản trị hệ thống: là người điều hành quản lý mọi hoạt động của hệ thống.
Phân tích hệ thống
Biểu đồ use case
Hình 4.1 Biểu đồ use case
Đặc tả các use-case
Tên Use-case Thêm người dùng
Tác nhân Người quản trị
Mô tả Người quản trị thêm người dùng mới vào hệ thống Điều kiện trước Người quản trị phải đăng nhập vào hệ thống Điều kiện sau Thêm người dùng thành công
Kịch bản Hành động của người quản trị:
1 Người quản trị đăng nhập
2 Người quản trị thêm người dùng
Hành động của hệ thống:
Lưu dữ liệu vào cơ sở dữ liệu
Tên Use-case Thêm người sản phẩm
Tác nhân Người bán hàng
Mô tả Người bán hàng thêm sản phẩm vào website Điều kiện trước Người bán hàng phải đăng nhập vào hệ thống Điều kiện sau Thêm sản phẩm thành công
Kịch bản Hành động của người bán hàng:
1 Người bán hàng đăng nhập vào hệ thống
2 Người bán hàng điền thông tin sản phẩm vào form
3 Người bán hàng thêm sản phẩm vào website
Hành động của hệ thống:
1 Lưu dữ liệu vào cơ sở dữ liệu
2 Thêm, hiểm thị sản phẩm trên website
Bảng 3 Thêm vào giỏ hàng
Tên Use-case Thêm vào giỏ hàng
Khi người dùng đã đăng nhập vào hệ thống, họ có thể thêm sản phẩm vào giỏ hàng của mình Sau khi thêm thành công, hệ thống sẽ thông báo về việc thêm sản phẩm vào giỏ hàng thành công.
Kịch bản Hành động của người dùng:
1 Người dùng đăng nhập vào hệ thống
2 Người dùng chọn sản phẩm cần thêm
3 Người dùng thêm sản phẩm vào giỏ hàng
Hành động của hệ thống:
1 Lưu dữ liệu vào cơ sở dữ liệu
2 Đưa tới trang giỏ hàng
Tên Use-case Thêm sửa sản phẩm
Tác nhân Người bán hàng
Mô tả Người bán hàng sửa sản phẩm mình đã thêm Điều kiện trước Người bán hàng đăng nhập vào hệ thống Điều kiện sau Sửa sản phẩm thành công
Kịch bản Hành động của người bán hàng:
1 Người bán hàng đăng nhập vào hệ thống
2 Người bán hàng chọn tính năng sửa sản phẩm trong danh sách sản phẩm
3 Người bán hàng sửa sản phẩm
Hành động của hệ thống:
Sửa dữ liệu sản phẩm trong cơ sở dữ liệu
Biểu đồ lớp
Thiết kế hệ thống
Biểu đồ tuần tự
Hình 5.1-2 Biều đồ tuần tự thêm người dùng
Hình 5.1-3 Biều đồ tuần tự thêm vào giỏ hàng 5.1.3 Thêm sản phẩm
Hình 5.1-4 Biều đồ tuần tự thêm sản phẩm
Hình 5.1-5 Biều đồ tuần tự sửa sản phẩm
Biểu đồ hoạt động
Hình 5.2-6 Biểu đồ hoạt động thêm người dùng
Hình 5.2-7 Biểu đồ hoạt động thêm vào giỏ hàng
Hình 5.2-8 Biểu đồ hoạt động thêm sản phẩm
Hình 5.2-9 Biểu đồ hoạt động sửa sản phẩm
Triển khai thực hiện
Vai trò
Hiện tại có 3 tác nhân tương ứng với 3 vai trò là: nguoi_dang_truyen, user, và admin Mỗi vai trò có quyền hạn khác nhau và sẽ được chuyển đến trang khác nhau sau khi đăng nhập
Hình 6.1-10 Đăng nhập với vai trò admin
Hình 6.1-11 Đăng nhập với vai trò user
Đăng nhập
Để có thể sử dụng các chức năng liên quan đến cơ sở dữ liệu thì đầu tiên người sử dụng phải đăng nhập vào hệ thống
Hình 6.2-12 Giao diện trang đăng nhập
Hình 6.2-13 Trang chủ trước khi đăng nhập
Hình 6.2-14 Trang chủ sau khi đăng nhập với vai trò user
Đăng ký
Muốn trở thành thành viên của website đọc truyện thì đầu tiên người dùng phải đăng ký trở thành người dùng hệ thống Đặc biệt là người dùng được tự động phân vai trò user.
Hình 6.3-15 Giao diện trang đăng ký
Phân vai trò
Sau khi đăng nhập thành công với vai trò admin người dùng sẽ được chuyển đến trang dành cho quản trị viên.
Hình 6.4-16 Giao diện trang admin
Thêm người dùng
Admin cũng có thể cấp tài khoản cho người sử dụng bằng cách tạo tài khoản cho người dùng bỏ qua việc đăng ký Từ trang quản lý người dùng, chọn nút dấu cộng màu xanh lá thêm để đến giao diện thêm người dùng.
Sửa thông tin cá nhân
Khi có như cầu cần sửa thông tin của bản thân hoặc là thay đổi ảnh đại diện, người sử dụng có thể sử dụng chức năng thay đổi ở profile người dùng.
