bài báo cáo lâp trình web đề tài xây dựng website thương mại 2

GIỚI THIỆU SƠ LƯỢC VẺ WEBSITE Chào mừng bạn đến với trang web của chúng tôi, nơi mà việc mua săm không chỉ là một giao dịch mà còn là một trải nghiệm thú vị và tiện lợi.. Sự kết hợp của

TRUONG DAI HOC DONG A KHOA CONG NGHE THONG TIN

DAIHOC ° DONG A Tạo dựng con đường thành công

BAI BAO CAO LAP TRINH WEB Dé tai: Xdy dựng website thương mại

Lớp :ST72112A

GVTG: TS Lý Quỳnh Trân

Thành viên: Nguyễn Văn Nguyên

Đà Nẵng, tháng 04 năm 2024

GIỚI THIỆU SƠ LƯỢC VẺ WEBSITE

Chào mừng bạn đến với trang web của chúng tôi, nơi mà việc mua săm không chỉ là một

giao dịch mà còn là một trải nghiệm thú vị và tiện lợi Chúng tôi đã dành rất nhiều tâm

huyết để xây dựng nên một không gian mua sắm trực tuyên, nơi mọi người có thể dễ dàng tìm thấy và đặt mua những sản phẩm họ yêu thích

Sự kết hợp của công nghệ Java Servlet cùng với kiến thức sâu rộng về HTML, CS§S, và JavaScript đã cho phép chúng tôi tạo ra một hệ thống vững chắc, đáp ứng được mọi yêu cầu từ khách hàng đến chủ cửa hàng Chúng tôi không chỉ chú trọng đến việc cung cấp một danh mục sản phâm đa dạng mà còn đảm bảo quá trình quản lý đơn hàng diễn ra một

cách trơn tru và hiệu quả Website của chúng tôi được thiết kế với giao điện thân thiện, đảm bảo rằng mỗi khách

hàng, dù là người lớn tuôi hay thanh niên, đều có thể sử dụng một cách dễ dàng Tính

năng đặt hàng nhanh chóng và quản lý dễ dàng giúp chủ cửa hang có thê theo dõi và kiểm

soát hoạt động kinh doanh của mình một cách chặt chẽ Hơn nữa, sự tương thích đa nên

tảng cho phép truy cập website mọi lúc, mọi nơi, trên bat ky thiết bị nào, từ điện thoại di

động đến máy tính bảng và máy tính đề bản

Chúng tôi tin tưởng rằng website của mình sẽ mang lại cho bạn những trải nghiệm mua sắm tuyệt vời nhất Hãy tham gia cùng chúng tôi và khám phá sự tiện lợi mà công nghệ mang lại cho cuộc sông hàng ngày của bạn

MUC LUC Danh muc hinh ảnh TH Hit nHHhrrrrrrrrrrio ¬ - 3

I Giới thiệu về ly thuyết và công nghệ sử dụng đề xây dựng hệ thông - 4 1 Giới thiệu về công nghệ java servlet và jaVaseTVer pags co nen 4 2 Thư viện và design pattern sử dụng trong dự án 2c 22222 sec 4

Ni 0i 1 ceeeeccccccccccccceveceececeestccccacccecevscececttttttsceececceccessececceceeceuuausnenteseess 4

b Design pattern MVC Q2 L1 11121112 1n H101 11x HH khe 5

II Thiết kế cơ sở dữ liệu 52: 22 2 22211122211221111221111221111021111011110111.11 re 6

II Mô tả chức năng L1 2012121212111 111121112115 111111150115 111111115111 kk HH ky 7

1 Trang Chủ - c1 1122111121221 111 1112111011101 1 1811181151111 1k1 KHE KT hệt 8 pin 9 3 Trang đăng nhập cc 1 1222112211211 121115 125111 1115115111111 1H kk HH key 10 4 Trang adnan cece ccccccccecenceneeeneceeeeeceeeeeseesseeseeseesseceeeseessensesseesieeesseeeteeeeses 10 V Code demo 1a 12

1 Cầu trúc thư TỤC ¿2+2 222111221111221111221111221111211111211111211.1111 111.1 12

2 Lây, thêm, sửa, xóa, cập nhập ord€r - 122 212121211111 1112111211 1111181111 tk 13 3 Kệt nôi database sqÏ S€TV€T - L2 1101212121211 111181 118112011 1111181118111 11k 16

VI Tổng KẾT G1 1E 11 1121111111111 1 21111 121111211111 1n He re 17

I Giới thiệu về lý thuyết và công nghệ sử dụng để xây dựng hệ

1 Giới thiệu về công nghệ java servlet và javaserver pages Java Servlet: Công nghệ servlet Java cho phép xác định các lớp servlet danh riêng cho HTTP Một lớp servlet mở rộng khả năng của các máy chủ lưu trữ các ứng dụng được truy cập bằng mô hình lập trình phản hồi yêu cầu Mặc dù các servlet có thể đáp ứng bất kỳ loại yêu cầu nào, nhưng chúng thường được sử dụng để mở rộng các ứng dụng được lưu trữ bởi các máy chủ web

JavaServer Pages: cho phép đặt các đoạn mã servlet trực tiếp vào một tài

liệu dựa trên văn bán Trang JSP là một tài liệu dựa trên văn bán có chứa hai

loại văn bản:đữ liệu tĩnh (có thể được biểu diễn bằng bất kỳ định dạng dựa

trên văn bán nào như HTML, WML và XML) và các phân tử JSP xác định cách trang xây dựng nội dung động

2 Thư viện và design pattern sử dụng trong dự án a Thư viện

Thư viện thẻ tiêu chuẩn của trang JavaServer (JSTL) gói gọn chức năng cốt lõi chung cho nhiều ứng dụng JSP Thay vì trộn lẫn các thẻ từ nhiều nhà cung cấp

trong Các ứng dụng JSP, bạn sử dụng một bộ thẻ tiêu chuẩn duy nhất Việc tiêu

chuân hóa này cho phép bạn triển khai các ứng dụng của bạn trên bất kỳ bộ chứa

JSP nào hỗ trợ JSTL và làm cho nó có nhiều khả năng hơn

JSTL có các thẻ lặp và thẻ điêu kiện đê xử lý điêu khiên luông, các thẻ đề thao tác

Tài liệu XML, thẻ quốc tế hóa, thé để truy cập cơ sở dữ liệu bằng SQL và các

chức năng thường dùng

API Kết nối cơ sở đữ liệu Java (JDBC) cho phép gọi các lệnh SQL từ phương pháp ngôn

ngữ lập trình Java Bạn sử dụng API JDBC khi bạn có một truy cập cơ sở dữ liệu Bạn cũng có the su dung API JDBC tir mét servlet hoặc một Trang JSP dé truy cap co so dir

liệu trực tiếp mà không can thông qua Enterprise Bean API JDBC có hai phần: giao diện cấp ứng dụng được ứng dụng sử dụng các thành phần để truy cập cơ sở dữ liệu và giao diện của nhà cung cấp địch vụ để đính kèm trình điều

khién JDBC vao nén tang Java EE

b Design pattern MVC

Mô hình MVC làm mô hình phần mềm dùng để tạo lập giao diện người dùng , mô hình

này gôm 3 thành phân chính:

Model:

+ Một trong những thành phần quan trọng nhất của mô hình MVC trong Java Đây là bộ phận làm nhiệm vụ quản lý đữ liệu Model có chức năng vận chuyên thông tin từ nội hàm đề hiên thị đến người dùng thông qua màn hình và xử lý các thông tin để người dùng dễ dàng tiếp cận nhất

+ Model hoàn toàn độc lập với các thành phần còn lại trong MVC vànó chứa các tác vụ cân thiết nhất cho quá trình lập trình

View: Nó thực hiện nhiệm vụ tạo tương tác với người dùng và hiển thị các kết quả từ tầng Controller Đồng thời, View cũng thực hiện việc tiếp nhận các hoạt động, yêu câu của người dùng đê chuyển đến Controller xử lý.nói một cách dễ hiểu các thành phần trong MVC giống như một website View chính là các trang giao diện hiển thị những gì mà người dùng nhìn thay

Controller: Controller thực hiện chức năng kết nối tương tác giữa View và Model Nó định nghĩa các lệnh và thực hiện xử lý các lệnh trong hệ thống Controller đối chiều hành động của người dùng từ View và tương tác với Model để chuyển tải thông tin cần thiết đến người dùng

choose Handler

eusoees Delos sin (ot tefl (ig

eee! provided by Spring Source sometimes implomented by developers

Mô hình MVC được ứng dụng để tối ưu lap trinh web

Hình 1 M6 hinh MVC

II Thiết kế cơ sở dữ liệu

1 Biểu đồ database

Product

n‹ SA,

Hình 2 Biểu đồ lớp

2 Demo code

bang Category

CREATE TABLE [dbo].[Category] ( [id] INT IDENTITY (1, 1) NOT NULL, [name] VARCHAR (255) NOT NULL, PRIMARY KEY CLUSTERED ([id] ASC) );

INSERT INTO [dbo].[Category ] ([name]) VALUES

(Food'), (Drink'), ('Combo'); bang Product

CREATE TABLE [dbo].[Product] ( [id] INT IDENTITY (1, 1) NOT NULL,

[idcategory] INT NOT NULL, [name] VARCHAR (255) NOT NULL,

[description] VARCHAR (255) NOT NULL,

[price] FLOAT (53) NOT NULL,

[image] VARCHAR (255) NOT NULL,

PRIMARY KEY CLUSTERED ([id] ASC), FOREIGN KEY ([idcategory]) REFERENCES [dbo].[Category] ([id])

); INSERT INTO [dbo].[Product] ([idcategory], [name], [description], [price], [image])

(1, ‘Pasta with tomato sauce’, ‘Pasta, tomato, vegetable’, 40, 'pasta_with_tomato_sauce.jpg'), (1, 'Mixed pasta’, 'Pasta, egg, tomato’, 50, 'mixed_pasta.jpg'),

(1, 'Grilled pork', 'Pork, pepper, vegetable’, 35, 'grilled_pork.jpg'),

(1, "Middle rare beef’, ‘Beef, lemon, salad, pepper, cucumber’, 60, 'middle_rare_beef.jpg'), (2, ‘Ice blended matcha’, ‘Matcha, ice, cheese cream’, 20, 'ice_blended_matcha.jpg'),

(1, ‘Grilled pork', ‘Pork, pepper, vegetable', 35, 'grilled_pork.jpg'),

(1, ‘Middle rare beef, ‘Beef, lemon, salad, pepper, cucumber’, 60, 'middle_rare_beef.jpg'),

(2, ‘Ice blended matcha’, ‘Matcha, ice, cheese cream’, 20, 'ice_blended_matcha.jpg'), (2, ‘Carrot juice’, ‘Carrot, water, sugar’, 20, 'carrot_juice.jpg'),

(2, ‘Beetroot juice’, ‘Beetroot, water, sugar’, 20, ‘beetroot _juice.jpg'), (2, ‘Pineapple juice’, ‘Pineapple, green apple’, 25, 'pineapple_juice.jpg'), (2, ‘Oreo mixed milk tea’, ‘Oreo, cheese cream, milk tea’, 25, 'oreo_mixed_milk_tea.jpg'),

(2, Peach orange lemongrass tea’, 'Tea, orange, lemongrass, peach’, 25,

‘peach_orange_lemongrass_tea.jpg'), (2, "Strawberry tea’, 'Strawberry, tea, lemon, sugar’, 25, 'strawberry_tea jpg'), (2, ‘Cream cheese tea’, ‘Cream, cheese, tea’, 20, 'cream_cheese_tea.jpg'),

(2, ‘Brown sugar pearl milk tea’, ‘Brown sugar, milk tea, pearl’, 25, 'brown_sugar_pearl_milk_tea.jpg'),

(2, ‘Lemon tea’, ‘Lemon, tea, sugar’, 15, 'lemon_tea.jpg'), (3, ‘Combo Korea for a family’, ‘Salad, traditional korea food, 2 drinks’, 200, 'combo_korea_for familyjpg'),

(3, ‘Combo chicken soup’, ‘Chicken soup, 1 drink’, 100, 'combo_chicken_soup.jpg'),

(3, ‘Combo lunch meal for 2 people’, ‘Rice, kimchi, 3 foods, 2 drinks’, 150, 'combo_lunch_meal_for_2.jpg'),

(3, ‘Combo fast food’, Spaghetti, pepsi, French fries’, 100, 'combo_fast_food.jpg'), (3, ‘Combo kimbap korea’, 'Kimbap, onigiri, fruit’, 200, ‘combo_kimbap_korea.jpg'),

(3, ‘Combo hot pot’, ‘Seafood hotpot, drinks', 200, 'combo_hot_pot.jpg'),

(3, ‘Combo salad’, 'Salad, fruit', 100, 'combo_salad.jpg'),

(3, ‘Combo Korean mixed rice’, ‘Korean mixed rice, drinks', 150, 'combo_korean_mixed_rice.jpg'), (3, ‘Combo Korean barbecue’, 'Korean barbecue, drinks', 150, 'combo_korean_barbecue jpg’),

(3, ‘Combo kimbap for 1 person’, 'Kimbap and drink’, 80, ‘combo_kimbap_for_1.jpg'); bảng User

CREATE TABLE [dbo].[User] (

[ID] INT NOT NULL, [username] NVARCHAR (50) NULL,

[firstName] NVARCHAR (50) NULL,

[password] VARCHAR (50) NULL, [lastName] NVARCHAR (50) NULL,

[role] VARCHAR (10) NULL, CONSTRAINT [PK_User] PRIMARY KEY CLUSTERED ([ID] ASC)

bang User

CREATE TABLE [dbo].[User] ( [ID] INT NOT NULL,

[username] NVARCHAR (50) NULL,

[firstName] NVARCHAR (50) NULL, [password] VARCHAR (50) NULL, [lastName] NVARCHAR (50) NULL, [role] VARCHAR (10) NULL, CONSTRAINT [PK_User] PRIMARY KEY CLUSTERED ([ID] ASC)

% INSERT INTO [dbo].[User] ([ID], [ 1, (fi 1, Ol 1 [p d], [role])

VALUES

(1, john_doe', ‘John’, 'Doe', 'admin', 123456”), (2, jane_smith', ‘Jane’, 'Smith', 'user', “123456'), (3, 'bob_jones', 'Bob', ‘Jones’, 'user', “123456”);

bang OrderOrder CREATE TABLE [dbo].[Order] ( [id] INT IDENTITY (1, 1) NOT NULL, [userid] INT NULL,

[status] VARCHAR (50) NOT NULL, [total] DECIMAL (10, 2) NOT NULL,

PRIMARY KEY CLUSTERED ([id] ASC), FOREIGN KEY ([userid]) REFERENCES [dbo].[User] ([ID])

INSERT INTO [dbo].[Order] ([userid], [status], [total])

VALUES

(1, 'pending', 799.99),

(2, 'completed', 39.99),

bang OrderDetail

CREATE TABLE [dbo].[OrderDetail] ( id] INT IDENTITY (1, 1) NOT NULL, [idorder] INT NULL,

fidproduct] INT NULL,

[price] DECIMAL (10, 2) NOT NULL,

[quantity] INT NOT NULL,

PRIMARY KEY CLUSTERED ([id] ASC), FOREIGN KEY ([idorder]) REFERENCES [dbo].[Order] ([id]), FOREIGN KEY ([idproduct]) REFERENCES [dbo].[Product] ([id])

); INSERT INTO [dbo].[OrderDetail] ([idorder], [idproduct], [price], [quantity ])

VALUES (1, 1, 799.99, 1), (2, 3, 39.99, 1),

Hiển thị dữ liệu từ bảng Category

SELECT * FROM [dbo].[Category]; Hién thi di liệu từ bảng User

SELECT * FROM [dbo].[User];

Hién thi dữ liéu tir bang Product SELECT * FROM [dbo].[Product];

III Mo ta chire nang

1 Biéu do use case

Thêm, sửa, xóa

Thém product vao gid hang

Xem san phaém theo danh muc nhtt( Nirớc an, food)

“ body background-image: url( '‘https://tecwoodoutdoorfloor com/upload/images/Blog/nen-gol4.jpg') ;

background-size: cover; background-position: center; background-repeat: no-repeat; height: 180vh; justify-content: center; align-items: center; margin:

hide { display: none;

4-body"> inForm" action="LoginCont roller" method="post ">

"username" name=" username” p eholde ass=" form-group">

II

<form id="loginForm" action="LoginController" method="post “>

<div class="form-group">

<label for="username"=>Username</Label> "text" class="form-control" id="username" mame="username" placeholder="Username" require:

-group"> password">Password</Label>

“password” class="form-control" id="password" nama="password" placeholder="Password" raqi

<div cless="text-center"> <button type="submit" class="btn btn-danger">Login</button> </div>

</form>

— id="showRegisterForm" class="mt-3"=Not registered? <a hrof="#">Create an account</a></p> </div>

</div> </div>

</div>

ve

</div> <script>

// Jav ript code can be added here if needed

[5 images home.jsp loginadmin.jsp order.jsp product.jsp (® Remote Files

fa RESTful Web Services ff Source Packages

{4 com.mycompany.ordermanagement EEl com.mycompany.ordermanagement.resources & controller

l#\ AdminController.java l#i CategoryController.java {8} HomeController.java || LoginController.java |) OrderController.java

f1 dbcontext

l#\ ConnectDB.java (4) Databaselnfor.java | TestConnect.java

S model

|) Category.java #¡ CategoryDAO.java [| Order.java |) OrderDAO.java |) OrderDetail.java |) Product.java |) ProductDAO.java |) User.java l#i UserDAO.java

13