(Tiểu luận) báo cáo đồ án lập trình web website thời trang

Qua thời gian học tập và kiến thức đã được học từ môn môn Lập trình Web, chúng em thấy việc tạo ra một trang bán quần áo sẽ giúp người dùng dễ tiếp cận sản phẩm hơn.. 2.4.2 Tìm hiểu về m

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HỒ CHÍ MINH

BÁO CÁO ĐỒ ÁN LẬP TRÌNH WEB

Website Thời Trang

GVHD: ThS.Bùi Mạnh Toàn

SVTH: Phạm Trung Hiếu MSSV: 2011063642

Nguyễn Thanh Hiếu MSSV: 2011068830

Lê Minh Hoàng MSSV: 2011240974

TP.Hồ Chí Minh, 2023

0

MỤC LỤC

LỜI MỞ ĐẦU 8

Chương 1: TỔNG QUAN 9

1.1 Tổng quan về đồ án 9

1.2 Nhiệm vụ đồ án 9

 Đối với chủ Website : 9

 Đối với khách hàng : 9

Chương 2: CƠ SỞ LÝ THUYẾT 10

2.1 SQL Server 10

2.2 Các bảng dữ liệu 10

2.3 Lượt đồ CSDL 13

2.4 Tổng quan về ASP.NET: 13

2.4.1 Giới thiệu về ASP.NET: 13

2.4.2 Tìm hiểu về mô hình lập trình web MVC của ASP.NET: 14

2.5 Giới thiệu mô hình lập trình Web bằng ASP.NET MVC5 15

2.6 HTML: 17

2.7 CSS: 18

2.8 Bootstrap: 18

2.9 Jquery: 18

Chương 3: GIAO DIỆN WEBSITE BÁN QUẦN ÁO 19

3.1 Đăng ký, đăng nhập: 19

Giao diện view đăng ký 19

3.1.2 Trang đăng nhập: 20

20

Giao diện đăng nhập cho admin 20

1

Giao diện đăng nhập của khách hàng 21

3.2 Trang chủ 21

3.3 Giới thiệu các chức năng dành cho khách hàng 24

3.3.1 Sản phẩm 24

3.3.2 Lịch sử mua hàng 24

3.3.3 Chi tiết sản phẩm 25

3.3.4 Giỏ hàng 25

3.4 Chức năng của Admin 26

3.4.1 Thêm sản phẩm 26

3.4.2 Quản lý đơn hàng 27

3.4.3 Quản lý khách hàng 27

3.4.4 Danh mục sản phẩm 28

CHƯƠNG IV: NHẬN XÉT VÀ ĐÁNH GIÁ 29

4.1 Kết luận: 29

4.1.1 Kết quả đạt được: 29

4.1.2 Hạn chế của đề tài: 29

4.1.3 Hướng phát triển của đề tài: 29

4.2 Kết luận: 30

2

LỜI MỞ ĐẦU

Thị trường thời trang Việt Nam hiện nay chịu nhiều ảnh hưởng của các thương hiệu thời trang nước ngoài như Zara, Mango, H&M, Thời trang Việt Nam phải xoay xở để cạnh tranh với các thương hiệu ngoại nhập Nhu cầu mua sắm của người tiêu dùng tăng, giai đoạn bùng nổ công nghệ nên việc kinh doanh Online mặt hàng thời trang vô cùng phát triển Các shop bán sỉ lẻ thời trang trực tuyến và sự cải thiện trong nhận thức người tiêu dùng, họ sẵn sàng chi tiền cho những bộ trang phục mà họ thích

Để tiếp cận được nhiều khách hàng mới hơn thì nhiều chủ shop quần áo đã đẩy mạnhhình thức kinh doanh online, khách hàng có thể tìm kiếm và đặt hàng trực tiếp trên các nềntảng xa hội, website hay các trang thương mại điện tử Chỉ cần một chiếc điện thoại thôngminh hay laptop, máy tính kết nối internet là bạn có thể xem đầy đủ thông tin về sản phẩm màbạn muốn mua, cũng như không cần phải thanh toán tiền trước nếu khách hàng chọn hình thứcship COD thanh toán khi nhận hàng

Qua thời gian học tập và kiến thức đã được học từ môn môn Lập trình Web, chúng

em thấy việc tạo ra một trang bán quần áo sẽ giúp người dùng dễ tiếp cận sản phẩm hơn Chính vì thế nhóm chúng em đã cùng nhau học tập và tìm hiểu về cách làm một trang web bán hàng

Sau đây là bài báo cáo sơ lược về quy trình làm việc nhóm và đúc kết được những kinh nghiệm và thông tin từ việc tìm hiểu về lập trình web Nếu chúng em có những khuyết điểm, mong thầy đánh giá và nhận xét nhóm em để chúng em nhận ra được thiết sót của mìnhtrong bài báo cáo lần này

Nhóm em xin chân thành cảm ơn!

3

Chương 1: TỔNG QUAN1.1 Tổng quan về đồ án

Đồ án sẽ giới thiệu cho chúng ta biết về trang web bán đồ thời trang, cách sử dụng web và tìm hiểu cách tạo ra trang web này

1.2 Nhiệm vụ đồ án

Đối với chủ Website :

Cập nhật thông tin sản phẩm khi nhập hàng về: tên sản phẩm, số lượng, nhà cung cấp, đơn giá bán

Cập nhật số lượng và sự thay đổi thông tin của sản phẩm sau mỗi ngày bán hàng: số lượng còn lại, nhà cung cấp, giá bán

Cập nhật thông tin sản phẩm bày trên web: tên sản phẩm, số lượng sản phẩm bán, phân loại sản phẩm, nhà cung cấp, đơn giá bán

Lập hóa đơn bán hàng: tên sản phẩm, số lượng, đơn giá

Đối với khách hàng :

Có thể tìm kiếm thông tin sản phẩm: tên sản phẩm, nhà cung cấp, số lượng bày bán, loại sản phẩm, đơn giá theo từng loại

Có thể đăng ký tạo tài khoản và đăng nhập làm thành viên của shop

Có thể thao tác với giỏ hàng khi có tài khoản đăng nhập: thêm hoặc xóa sản phẩm, thanh toán

4

Chương 2: CƠ SỞ LÝ THUYẾT2.1 SQL Server

SQL server hay còn được gọi là Microsoft SQL Server, nó từ viết tắt của MS SQLServer Đây chính là một loại phần mềm đã được phát triển bởi Microsoft và nó được sửdụng để có thể dễ dàng lưu trữ cho những dữ liệu dựa theo tiêu chuẩn RDBMS

SQL Server có khả năng cung cấp đầy đủ các công cụ cho việc quản lý từ giao diệnGUI đến sử dụng ngôn ngữ cho việc truy vấn SQL Điểm mạnh của SQL điểm mạnh của

nó là có nhiều nền tảng được kết hợp cùng như: ASP.NET, C# để xây dựng Winform cũngchính nó có khả năng hoạt động độc lập Tuy nhiên,

SQL Server thường đi kèm với việc thực hiện riêng các ngôn ngữ SQL, T-SQL,…

2.2 Các bảng dữ liệu

Hình 1: Hóa đơn

Hình 2: Chi tiết hóa đơn

5

Hình 3: Khách hàng

Hình 4: Các loại sản phẩm

6

Hình 5: Sản phẩm

Hình 6: Nhà cung cấp

7

2.3 Lượt đồ CSDL

Hình 6: Lược đồ CSDL

2.4 Tổng quan về ASP.NET:

2.4.1 Giới thiệu về ASP.NET:

Đầu năm 2002, Microsoft giới thiệu một kỹ thuật lập trình Web khá mới mẻ vớitên gọi ban đầu là ASP+, tên chính thức sau này là ASP.Net Với ASP.Net, khôngnhững không cần đòi hỏi bạn phải biết các tag HTML, thiết kế web, mà nó còn hỗtrợ mạnh lập trình hướng đối tượng trong quá trình xây dựng và phát triển ứngdụng Web ASP.Net là kỹ thuật lập trình và phát triển ứng dụng web ở phía Server(Server-side) dựa trên nền tảng của Microsoft Net Framework Hầu hết, nhữngngười mới đến với lập trình web đều bắt đầu tìm hiểu những kỹ thuật

ở phía Client (Client-side) như: HTML, Java Script, CSS (Cascading StyleSheets) Khi Web browser yêu cầu một trang web (trang web sử dụng kỹ thuật client-side), Webserver tìm trang web mà Client yêu cầu, sau đó gởi về cho

8

Client Client nhận kết quả trả về từ Server và hiển thị lên màn hình ASP.Net sửdụng kỹ thuật lập trình ở phía server thì hoàn toàn khác, mã lệnh ở phía server (vídụ: mã lệnh trong trang

ASP) sẽ được biên dịch và thi hành tại Web Server Sau khi được Server đọc, biêndịch và thi hành, kết quả tự động được chuyển sang HTML/JavaScript/CSS và trả

về Client Tất cả các xử lý lệnh ASP.Net đều được thực hiện tại Server và do đó,gọi là kỹ thuật lập trình ở phía server ASP.NET được Microsoft phát triển quanhiều phiên bản từ ASP.NET 1.0, 1.1, 2.0 và gần đây nhất là ASP.NET 5

2.4.2 Tìm hiểu về mô hình lập trình web MVC của ASP.NET:

Mô hình MVC (viết tắt chữ cái đầu của 3 từ Model - View - Controller) là mộtkiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm(đặc biệt đối với phát triển ứng dụng web) Nó giúp cho tổ chức ứng dụng (phân

bố source code ứng dụng) thành 3 phần khác nhau Model, View và Controller Mỗi thành phần có một nhiệm vụ riêng biệt và độc lập với các thành phần khác.

Model: là các thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý,

truy xuất CSDL, đối tượng mô tả dữ liệu như các Class, hàm xử lý Model đượcgiao nhiệm vụ cung cấp dữ liệu cho CSDL và lưu dữ liệu vào các kho chứa dữliệu Tất cả các nghiệp vụ logic được thực thi ở Model Dữ liệu vào từ ngườidùng sẽ thông qua View để kiểm tra ở Model trước khi lưu vào cơ sở dữ liệu.Việc truy xuất, xác nhận và lưu dữ liệu là một phần của Model

View: View hiển thị các thông tin cho người dùng của ứng dụng và được giao

nhiệm vụ cho việc nhận các dữ liệu vào từ người dùng, gởi đi các yêu cầu ngườidùng đến bộ điều khiển (Controller), sau đó là nhận lại các phản hồi từ bộ điềukhiển và hiển thị kết quả cho người dùng Các trang HTML, JSP, các thư viện thể

và các file nguồn là một phần của View

Controller: Controller là tầng trung gian giữa Model và View Controller được

giao nhiệm vụ nhận các yêu cầu từ người dùng (phía máy khách) Một

9

yêu cầu được nhận từ máy khách được thực hiện bởi một chức năng logic thíchhợp từ thành phần Model và sau đó sinh ra các kết quả cho người dùng và đượcthành phần View hiển thị ActionServlet, Action, ActionForm, struts-config.xml

là các thành phần của Controller

Một ứng dụng web được phát triển theo mô hình MVC, có nguyên lý hoạt động

xử lý yêu cầu của người dùng như sau:

- Khi có yêu cầu phát sinh từ người dùng (phía Client), yêu cầu này sẽ được gởi đến phía Server, tại đây Contronler sẽ tiếp nhận yêu cầu để xử lý

- Bên trong Controller chứa nhiều phương thức (action), mỗi action tương ứngvới 1 yêu cầu cụ thể từ người dùng Controller sẽ lựa chọn action phù hợp với yêu cầu để xử lý.Trong quá trình xử lý, Controller tương tác với Model để có được dữ liệu mà người dùng mongmuốn

- Sau khi Controller làm việc với model để có được dữ liệu theo yêu cầu,Controller sẽ gởi về cho View thành phần Data Model, và nhiệm vụ của View sẽ chuyển DataModel nhận được thành dữ liệu ứng dụng và gởi trả về phía Client để hiển thị kết quả yêu cầu

Hình 7: Mô hình MVC

10

2.5 Giới thiệu mô hình lập trình Web bằng ASP.NET MVC5

ASP.NET MVC5 giúp cho chúng ta có thể tạo được các ứng dụng web áp dụng

mô hình MVC thay vì tạo ứng dụng theo mẫu ASP.NET Web Forsm Nền tảngASP.NET MVC có đặc điểm nổi bật là nhẹ (lightweight), dễ kiểm thử phần giaodiện (so với ứng dụng Web Forms), tích hợp các tính năng có sẵn của ASP.NET

Nền tảng ASP.NET MVC được định nghĩa trong namespace System.Web.MVC

và là một phần của name space System.Web MVC là một mẫu thiết kế (designpattern) chuẩn mà nhiều lập trình viên đã quen thuộc Một số loại ứng dụng web sẽthích hợp với kiến trúc MVC Một số khác vẫn thích hợp với ASP.NET Web Forms

và cơ chế postbacks Đôi khi có những ứng dụng kết hợp cả hai kiến trúc trên

• Tách bạch các tác vụ của ứng dụng (logic nhập liệu, business logic, và logic giaodiện), dễ dàng kiểm thử và mặc định áp dụng hướng phát triển TDD Tất cả các tính năng chínhcủa mô hình MVC được cài đặt dựa trên Interface và được kiểm thử bằng cách sử dụng các đốitượng mocks, mock object là các đối tượng mô phỏng các tính năng của những đối tượng thực sựtrong ứng dụng Bạn có thể kiểm thử unit-test cho ứng dụng mà không cần chạy Controller trongtiến trình ASP.NET, và điều đó giúp unit test được áp dụng nhanh chóng và tiện dụng Bạn cóthể sử dụng bất kỳ nền tảng unit-testing nào tương thích với nền tảng

• NET MVC là một nền tảng khả mở rộng (extensible) & khả nhúng (pluggable).Các thành phần của ASP.NET MVC được thiết kể để chúng có thể được thay thế một cách dễdàng hoặc dễ dàng tùy chỉnh Bạn có thể nhúng thêm view engine, cơ chế định tuyến cho URL,cách kết xuất tham số của action-method và các thành phần khác ASP.NET MVC cũng hỗ trợviệc sử dụng Dependency Injection (DI) và Inversion of Control (IoC) DI cho phép bạn gắn cácđối tượng vào một lớp cho lớp đó sử dụng thay vì buộc lớp đó phải tự mình khởi tạo các

đối tượng

11

IoC quy định rằng, nếu một đối tượng yêu cầu một đối tượng khác, đối tượng đầu

sẽ lấy đối tượng thứ hai từ một nguồn bên ngoài, ví dụ như từ tập tin cấu hình

Và nhờ vậy, việc sử dụng DI và IoC sẽ giúp kiểm thử dễ dàng hơn

• ASP.NET MVC có thành phần ánh xạ URL mạnh mẽ cho phép bạn xây dựngnhững ứng dụng có các địa chỉ URL xúc tích và dễ tìm kiếm Các địa chỉ URL không cần phải

có phần mở rộng của tên tập tin và được thiết kế để hỗ trợ các mẫu định dạng tên phù hợp vớiviệc tối ưu hóa tìm kiếm (URL) và phù hợp với lập địa chỉ theo kiểu REST

• Hỗ trợ sử dụng đặc tả (các thẻ) của các trang ASP.NET (.aspx), điều khiển ngườidùng (.ascx) và trang master page Bạn có thể sử dụng các tính năng có sẵn của ASP.NET như là

sử dụng lồng các trang master page, sử dụng in-line expression (<%= %>), sử dụng servercontrols, mẫu, data-binding, địa phương hóa

(localization) và hơn thế nữa

• Hỗ trợ các tính năng có sẵn của ASP.NET như cơ chế xác thực người dùng, quản

lý thành viên, quyền, output caching và data caching, session và profile, quản lý tình trạng ứngdụng, hệ thống cấu hình…

• ASP.NET MVC bổ sung một view engine mới là Razor View Engine cho phépthiết lập các view nhanh chóng, dễ dàng và tốn ít công sức hơn so với việc sử dụng Web Formsview engine

2.6 HTML:

HTML là chữ viết tắt của cụm từ HyperText Markup Language ( dịch là Ngônngữ đánh dấu siêu văn bản ), được sử dụng để tạo một trang web, trên một website cóthể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu, tập tin HTML

12

Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World WideWeb và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra cácchuẩn trên môi trường Internet).

Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements)được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặcngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở vàthẻ đóng (ví <strong> dụ </strong> và ) Các văn bản muốn được đánh dấu bằngHTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ inđậm</strong>) Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khaibáo sẽ nằm trong các thuộc tính (ví dụ như thẻ<img>)

Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi

mở rộng là html hoặc htm

2.7 CSS:

Là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng

để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ nhưHTML) Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần

tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúpchúng ta có thể thêm một chút “phong cách” vào các phần tử HTML đó như đổi màusắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn cóthể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ ápdụng các thuộc tính cần thay đổi lên vùng chọn đó

2.8 Bootstrap:

Bootstrap là một framework CSS được Twitter phát triển Nó là một tập hợp các

bộ chọn, thuộc tính và giá trị có sẵn để giúp web designer tránh việc lặp đi lặp lạitrong quá trình tạo ra các class CSS và những đoạn mã HTML giống nhau trong

13

dự án web của mình Ngoài CSS ra, thì bootstrap còn hỗ trợ các function tiện ích được viết dựa trên JQuery(Carousel, Tooltip, Popovers , )

2.9 Jquery:

Jquery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết Javascript vàtăng tốc độ xử lý các sự kiện trên trang web JQuery thêm tương tác Ajax vào trong trang webcủa bạn

Chương 3: GIAO DIỆN WEBSITE BÁN QUẦN ÁO

3.1 Đăng ký, đăng nhập:

3.1.1 Trang đăng ký:

14

Giao diện view đăng ký.

3.1.2 Trang đăng nhập:

Giao diện đăng nhập cho admin

15

Giao diện đăng nhập của khách hàng

3.2 Trang chủ

16

3.3 Giới thiệu các chức năng dành cho khách hàng3.3.1 Sản phẩm

3.3.2 Lịch sử mua hàng

19

3.3.3 Chi tiết sản phẩm

3.3.4 Giỏ hàng

20

3.4 Chức năng của Admin

3.4.1 Thêm sản phẩm

21

3.4.2 Quản lý đơn hàng

3.4.3 Quản lý khách hàng

23

3.4.4 Danh mục sản phẩm

24

CHƯƠNG IV: NHẬN XÉT VÀ ĐÁNH GIÁ

Thực hiện kiểm thử phần mềm ở mức độ lập trình

4.1.2 Hạn chế của đề tài:

Chưa thể cập nhật hết được tất cả những sản phẩm hiện đang có mặt trên thị trường.Website chưa được thử nghiệm trên mạng Internet

4.1.3 Hướng phát triển của đề tài:

Với nỗ lực của bản thân, nhóm chúng em đã cố gắng hoàn thành yêucầu đề tài Do thời gian và năng lực có hạn nên website của nhóm mới chỉ đisâu vào chức năng bán sản phẩm

Nhóm chúng em hướng phát triển website trở thành một website bán hàng chuyên nghiệp Cung cấp đầy đủ những mặt hàng hiện đang có trên thị trường với giá cả hợp lý, phải chăng Đi kém với bán hàng là những dịch vụ uy tín và chất lượng nhất để phục vụ đến khách hàng

25