THIẾT KẾ VÀ BẢO TRÌ WEB MOBILE SUPER HOT BÁN ĐIỆN THOẠI DI ĐỘNG

THIẾT KẾ VÀ BẢO TRÌ WEB MOBILE SUPER HOT BÁN ĐIỆN THOẠI DI ĐỘNG Chúng ta đang ở một thời đại hoàn toàn khác trước , đó là thời đại công nghệ kỹ thuật số , hầu hết tất cả các hoạt động đều được thực hiện trên máy tính kết nối internet.Vì thế nắm bắt được nhu cầu thiết yếu của cuộc sống nên các trang web mua bán hàng trên mạng lần lượt nối đuôi nhau ra đời.

TPHCM – 05/2011

Mục Lục

I Lời mở đầu 2

II Giới thiệu về trang web 3

III Mô tả chi tiết về trang web 3

1.Các yêu cầu có thể chạy được trang web 3

a)Đặc điểm kỹ thuật: 3

b)Yêu cầu Server : 3

c)Cách Cài Đặt : 4

I Lời mở đầu

Chúng ta đang ở một thời đại hoàn toàn khác trước , đó là thời đại công nghệ kỹ thuật

số , hầu hết tất cả các hoạt động đều được thực hiện trên máy tính kết nối internet.Vì thế nắm bắt được nhu cầu thiết yếu của cuộc sống nên các trang web mua bán hàng trên mạng lần lượt nối đuôi nhau ra đời

Đây là một bước phát triển vượt bậc của việc mua sắm, nó giúp cho việc mua sắm hàng hoá của thượng đế trở nên dễ dàng hơn bao giờ hết đồng thời cũng giúp cho phía nhà sản xuất giảm thiểu rất nhiều mọi chi phí như quảng bá sản phẩm hay phải thiết lập các cửa hàng ở khắp mọi nơi …

Nhưng muốn làm một trang web để có thể cuốn hút người xem hàng và mua hàng thì không phải là một chuyện dễ dàng tí nào, lấy ví dụ như: ta phải có một giao diện bắt mắt , một

hệ thống server bảo mật an toàn cho khách hàng đồng thời các thủ tục phải nhanh gọn, tốc độ truy cập phải nhanh chóng …

Vì vậy team đã hợp tác với cửa hàng mobile xây dựng một website bán điện thoại đơn giản nhưng đẹp và dễ sử dụng theo chuẩn B2C ( Bussiness to Customer ).

II Giới thiệu về trang web

Trang web của cửa hàng Mobile Super Hot sẽ được xây dựng nhằm mục đích quảng cáo cho cửa hàng đồng thời các khách hàng có thể mua hàng trực tiếp mà không cần phải đến trực tiếp cửa hàng.Ngoài ra khách hàng có thể được thêm nhiều ưu đãi nếu mua hàng thông qua trang web của cửa hàng.Khách hàng có thể lựa chọn những loại di động mình thích với đủ mẫu mã kiểu dáng và những thông số cụ thể về loại di động khách hàng đang xem.Ngoài ra khách hàng còn có thể quảng bá hình ảnh thông qua việc đặt banner của trang web

III Mô tả chi tiết về trang web

1 Các yêu cầu có thể chạy được trang web

 Trình duyệt : internet explore 6 (các trình duyệt khác có thể bị lỗi )

 Chương trình quản lý : MICROSOFT PROJECT 2003

b) Yêu cầu Server :

 Cấu hình máy : P4 1.8 Ghz , Ram 1Gb , Card màn hình on board

 Network: có kết nối internet

Page 3

c) Cách Cài Đặt :

 Xem trong file doc “Hướng dẫn cài đặt” đi kèm với file báo cáo này

 Cài jdk 1.6 trở lên

 Cài netbeans 6.0 trở lên

 Cài server Tomcat 6.0 trở lên

 Cài sql Server 2005 & manager studio express

 Cài driver connect netbeans với sql server 2005

2 Phân tích thiết kế trang web :

a) Yêu cầu của cửa hàng Mobile Super Hot:

 Trang chủ giao diện thân thiện , đẹp dễ sử dụng

 Khách hàng có thể xem tin tức hoặc các loại di động

 Khách hàng có một giỏ hàng ảo để có thể mua sắm

 Khách hàng phải là thành viên của trang web mới có thể mua sắm

 Khách hàng mua sắm bằng thẻ tín dụng và có hóa đơn thanh toán

 Khách hàng có thể tìm kiếm loại di động theo ý muốn

b) Cụ thể hóa các yêu cầu của cửa hàng:

 Mô hình hoạt động của Web site:

 Bố cục trang chủ:

Page 5

 Chức năng tìm kiếm :

 Tìm kiếm theo tên điện thoại

 Tìm kiếm theo hãng sản xuất

 Tin khuyến mãi

 Chức năng đăng ký thành viên :

 Khách hàng sẽ điền đầy đủ thông tin cần thiết để có thể trở thành viên

 Chức năng đăng nhập :

Có phân quyền admin và member

 Admin có thể quản lý cơ sở dữ liệu : thêm ,xóa ,sửa, cập nhật

 Member có thể mua hàng thông qua giỏ hàng

 Chức năng đặt hàng :

 Yêu cầu sẽ phải đăng nhập rồi mới được mua hàng

 Điện thoại sẽ được đưa vào giỏ hàng ảo , nếu khách hàng thanh toán sẽ xóa mặt hàng khỏi giỏ hàng còn không thì lần sau khách hàng đăng nhập thì mặt hàng đó vẫn còn trong giỏ hàng

 Chức năng thanh toán :

 Khách hàng nếu muốn mua hàng sẽ lấy hàng trong giỏ ra thanh toán và sẽ được xuất hóa đơn và hẹn ngày giao hàng

c) Cơ sở dữ liệu:

 Members bảng danh mục chứa thông tin thành viên:

 Categories: Bảng mục chứa các hãng sản xuất

 Items: Bảng mục chứa các mặt hàng

phẩm ở trang chủ

 Card_types: Bảng chứa thông tin đánh giá khách hàng

Page 7

Tên Kiểu Ý nghĩa

 MobileIntro: Bảng chứa tin tức

 News: Bảng phân loại tin tức

 Orders : Bảng chứa đơn đặt hàng

 OrderDetails: Bảng chi tiết đơn hàng

 ShoppingCart : Bảng thông tin giỏ hàng

d) Yêu cầu về người sử dụng :

 Biết truy cập và sử dụng internet , hiểu tiếng việt , có thẻ visa card hoặc master card để có thể thanh toán

e) Yêu cầu phi chức năng :

 Phải có tài liệu hướng dẫn đầy đủ để cửa hàng Mobile Super Hot có thể chạy và quản lý trang web

 Xây dựng các module theo một chuẩn thích hợp để có thể

dễ dàng bảo trì và thêm các tiện ích sau này để mở rộng tính năng và chất lượng trang web

f) Quy trình thiết kế :

Page 9

g) Sơ đồ DFD:

h) Sơ đồ ERD:

Page 11

i) Danh sách các trang jsp trong ứng dụng:

SaveRegistration.jsp Trang lưu thông tin đăng ký

MobileDetail.jsp Trang hiển thị tính năng của mobile

MobileIntroDetail.jsp Trang hiển thị tin tức cập nhật

AdminMemberView.jsp Xem các thành viên đã đăng ký

AdminMemberMant.jsp Trang thực hiện thao tác xóa,sửa dữ liệu

thành viên

AdminMobileMaint.jsp Trang thực hiện thao tác xóa,sửa dữ liệu

mặt hàngAdminMobileIntroNew.jsp Trang tạo mới tin tức

AdminMobileIntroEdit.jsp Trang hiệu chỉnh tin tức

AdminMobileIntroView.jsp Xem các mẩu tin tức

AdminMobileIntroMaint.jsp Trang thực hiện thao tác xóa,sửa dữ liệu tin

tức

AdminOrderMaint.jsp Trang thực hiện thao tác xóa,sửa dữ liệu

đơn hàng

3 Hoạt động của trang web:

Ứng dụng web Mobile SuperHot của chúng ta là một Web site hỗ trợ việc mua bán điện thoại trên mạng theo hình thức B2C Người dùng ghé thăm Web site của ta theo địa chỉ tượng trưng http://www.mobilesuperhot.vn (địa chỉ máy là

http://localhost:8080/mobilesuperhot/index.jsp )

Từ trang chủ này , người dùng có thể xem các tin tức mới về điện thoại như hình thức khuyến mãi , các điện thoại với tính năng hấp dẫn , thủ thuật cho mobile …hoặc là tìm kiếm , xem các thông số chi tiết về điện thoại.Ngoài ra khách hàng có thể đăng ký làm thành viên của web site để có thể đặt hàng mua điện thoại qua trang web của chúng ta

Cụ thể, khi người dùng kích chuột vào thông tin của một điện thoại bất kỳ, họ có thể xem thông tin chi tiết về điện thoại đó: tính năng , hãng sản xuất , giá thành , thông số kỹ thuật của sản phẩm

Page 13

Lúc này khách hàng muốn mua sách , họ sẽ bấm vào button add to shopping cart để đưa sản phẩm này vào giỏ hàng.Lúc này nếu khách hàng chưa đăng nhập (tên đăng nhập là guest ) thì sẽ hệ thống sẽ thông báo khách hàng cần phải đăng nhập.

Nếu khách hàng mới vào lần đầu chưa phải là thành viên phải đăng ký thành viên để

có thể bình chọn và mua sắm

Page 15

Khách hàng phải điền đầy đủ thông tin cần thiết theo như hình trên.Sau khi đã đăng

ký hoàn tất khách hàng phải đăng nhập vào hệ thống để có thể mua sắm được Đây là màn hình sau khi đăng nhập , giỏ hàng của khách hàng sẽ được tạo:

Bấm tiếp tục mua sắm để trở về trang chủ xem điện thoại mà khách hàng định mua.Sau khi đã chọn hàng và add to shopping cart thì giỏ hàng sẽ có mặt hàng mà khách hàng định mua:

Người dùng có thể thay đổi số lượng, thêm bớt các mặt hàng tại đây hoặc trở về trang chủ tiếp tục mua sắm.Sau khi đã quyết định mua khách hàng bấm vào nút thanh toán để đi đến trang xác nhận thanh toán.

Lúc này khách hàng sẽ thấy rõ tổng số tiền mình cần phải trả, số mặt hàng cần mua cùng với số lượng, đơn giá cụ thể.Mục đích để khách hàng kiểm tra lại lần cuối những mặt hàng mà mình đã chọn

Nếu đồng ý mua hàng, khách hàng sẽ bấm nút Xuất hoá đơn.Trang thông tin về giao hàng và thanh toán sẽ xuất hiện.Tại đây khách hàng chỉ có thể thanh toán bằng hình thức thẻ visa hoặc master card và chọn hình thức giao hàng với phí vận chuyển tương ứng

Sau cùng khách hàng sẽ bấm nút Save Order để tạo đơn đặt hàng và hoàn tất quá trình giao dịch.Lúc này sẽ xảy ra 2 trường hợp :

• Nếu số lượng một loại hàng nào đó mà khách hàng đặt mua vượt quá số lượng trong kho thì sẽ xuất hiện thông báo sẽ không giao dịch thành công vì số lượng mặt hàng đó đáp ứng không đủ

• Ngược lại Web site của chúng ta sẽ lưu đơn hàng vào cơ sở dữ liệu đồng thời cập nhật lại số lượng trong kho và tạo mã số hoá đơn thông báo đến khách hàng giao dich đã hoàn tất

Page 17

Để hỗ trợ khách hàng trong quá trình mua sắm trên mạng, chúng ta cung cấp thêm cơ chế tìm kiếm trên web site.Từ trang chủ, nếu nhập tên một điện thoại nào đó rồi bấm search thì danh mục các điện thoại có trong cơ sở dữ liệu sẽ hiển thị theo mong muốn của khách hàng.Chúng ta cũng phân loại điện thoại theo từng hãng sản xuất

Page 19

Ngoài ra còn có các thể loại tin tức được cập nhật thường xuyên để khách hàng có thể nắm bắt tình hình thị trường mobile :

Tất nhiên chúng ta không thể thiếu các trang quản trị với quyền đăng nhập admin để thêm bớt, chỉnh sửa các mẩu tin tức , thành viên hay các mặt hàng và hóa đơn…

Ở đây các trang thuộc quyền quản lý admin trước khi truy nhập đều phải thông qua hàm kiểm tra xem có thuộc quyền admin không và để tránh tình trạng các khách hàng có thể truy cập trực tiếp thông qua địa chỉ trình duyệt.

Trang AdminMenu.jsp dùng để chọn mục mà người quản trị muốn chỉnh sửa

Page 21

Trang AdminOrderView.jsp xem thông tin về Hóa đơn:

Trang Những trang liên quan về Mobile:

Khi bấm Add New:

Khi bấm Edit từ trang AdminMobileView.jsp :

Khi bấm Delete từ trang AdminMobileView.jsp thì hệ thống sẽ xóa mặt hàng đã chọn khỏi cơ sở dữ liệu.Các trang khác từ các mục trong trang AdminMenu cũng tương tự như mục Mobile trên

Page 23

4 Bảo trì và nâng cấp trang web:

a) Email từ cửa hàng Mobile Super Hot:

Trước tiên xin cảm ơn nhóm đã thiết kế trang web giúp cửa hàng chúng tôi, nhờ đó đã giúp cho doanh thu cửa hàng tăng lên rõ rệt , mọi người đã biết đến trang web của chúng tôi nhiều hơn , giảm rất nhiều chi phí về quảng cáo.Lần này, tôi chủ cửa hàng – Trần Trọng Quân muốn liên lạc với nhóm để phát triển thêm một số tính năng của trang web để giúp khách hàng tiện lợi hơn trong việc sử dụng.Số điện thoại của tôi là 0907173388, mong sớm có hồi âm từ nhóm!

b) Yêu cầu bảo trì từ cửa hàng Mobile Super Hot:

 Khách hàng có thể chỉnh sửa thông tin của mình sau khi đăng ký

 Chức năng tìm kiếm chi tiết hơn kết hợp nhiều yếu tố về tên , hãng sản xuất , giá cả

 Chức năng đánh giá sản phẩm của khách xem hàng

c) Hiện thực các yêu cầu bảo trì :

 Chức năng chỉnh sửa thông tin :

 Khi khách hàng đăng nhập vào hệ thống thì ngoài trang chủ sẽ một button chỉ đường dẫn tới trang chỉnh sửa thông tin cá nhân của khách hàng ( tên đăng nhập vẫn không thay đổi)

 Khách hàng có thể chỉnh sửa lại thông tin đã đăng ký thành viên mà khách hàng cảm thấy không phù hợp

 Chức năng tìm kiếm :

 Ngoài trang chủ sẽ có một link chỉ đến trang tìm kiếm chi tiết , khách hàng có thể tìm kiếm các lọai điện thoại theo tên , hãng sản xuất , giá thấp nhất và giá cao nhất.

 Chức năng đánh giá sản phẩm :

 Khi khách hàng xem hàng sẽ có một link đường dẫn đến trang bình chọn cho sản phẩm hiện tại mà khách hàng đang xem

Page 25

 Cơ sở dữ liệu bổ sung :

 Rating: Bảng chứa thông tin đánh giá khách hàng

 Danh sách các trang jsp bổ sung :

5 Hướng phát triển:

Đây cũng chỉ là một trang web đơn giản dễ sử dụng nên muốn phát triển thêm cũng không quá khó.Nếu cửa hàng muốn bán sim card có thể liên hệ với nhóm để phát triển thêm chức năng này.Cửa hàng cũng có thể nhờ nhóm thiết lập một forum để khách hàng và cửa hàng

có thể trao đổi những vấn đề liên quan đến sản phẩm của cửa hàng,

6 Test Cases:

Author Đặng Đình Mùi Test case passed Total test cases Note

Team Nhóm 2

Member Đặng Đình

Mùi 06520299 Trần Hưng Truyền 06520524

Tiêu đề Mục đích Thực hiện Kết quả mong

muốn Trạng thái Note

2 Gõ đại vài ký tự

3 Nhấn Enter

Xuất hiện dòng báo lỗi: " The page cannot be displayed

Trình duyệt

tự báo lỗi Địa chỉ

Trình duyệt

tự báo lỗi Đúng địa

Tìm kiếm

Page 27

Nhập mã cần tìm "

2 Gõ những ký tự lạ

ví dụ như : ~12312#

3 Nhấn Enter hoặc bấm nút Search

Kết quả hiển thị ra trang

MobileSearch.jsp : "

Không tìm thấy điện thoại yêu cầu" Pass

Nhập mã cần tìm "

2 Gõ vào chữ : nokia

3 Nhấn Enter hoặc bấm nút Search

Kết quả hiển thị ra trang

MobileSearch.jsp : "

các điện thoại đang bày bán " phía dưới danh sách các điện thoại hãng nokia

2 Chọn hãng cần xem, ví dụ như hãng motorola

Kết quả hiển thị ra trang

MobileSearch.jsp : "

các điện thoại đang bày bán " phía dưới danh sách các điện thoại hãng motorola

2 Ví dụ gõ vào tên máy : sam sung , tên hãng sx chọn Apple , giá tiền để trống

3 Nhấn Enter hoặc bấm nút Search

Kết quả hiển thị ra trang

MobileSearch.jsp : "

Không tìm thấy điện thoại yêu cầu"

2 Ví dụ để trống tên máy , tên hãng sx chọn Nokia , giá tiền

MobileSearch.jsp : "

các điện thoại đang bày bán " phía dưới danh sách các điện thoại hãng nokia có giá từ 1 triệu đến 10 triệu

Pass

2 Gõ đại tất cả các mục chỉ để trống một mục có đánh dấu *

3 Nhấn Enter hoặc bấm nút Đăng ký

Kết quả hiển thị ra trang

SaveRegistration.js

p - nếu để trống mục nào sẽ xuất hiện thông báo rằng đăng ký không thành công

2 Gõ đại tất cả các mục nhưng mục mật khẩu đánh 123 còn xác nhận mật khẩu đánh 456

3 Nhấn Enter hoặc bấm nút Đăng ký

Kết quả hiển thị ra trang

SaveRegistration.js

p - Xuất hiện thông báo lỗi : Xác nhận mật khẩu không đúng - đề nghị tắt vietkey hoặc unikey

2 Gõ đại tất cả các mục , mục mật khẩu

và xác nhận mật khẩu phải trùng nhau.Sau

đó gõ username là bachho3388

3 Nhấn Enter hoặc bấm nút Đăng ký

Kết quả hiển thị ra trang

SaveRegistration.js

p - Xuất hiện thông báo lỗi : Tên đăng nhập đã được sử

Page 29

2 Gõ đại tất cả các mục , mục mật khẩu

và xác nhận mật khẩu phải trùng nhau.Sau

đó gõ username là guest

3 Nhấn Enter hoặc bấm nút Đăng ký

Kết quả hiển thị ra trang

SaveRegistration.js

p - Xuất hiện thông báo : Việc đăng ký hoàn tất mời quý khách đăng nhập vào hệ thống.

Kết quả hiển thị trang Login.jsp - Xuất hiện thông báo : Login or Password is incorrect

password là 123

3 Nhấn Enter hoặc bấm Login

Kết quả hiển thị trang Login.jsp - Xuất hiện thông báo : Login or Password is incorrect

password là 80103085

3 Nhấn Enter hoặc bấm Login

Kết quả hiển thị trang

ShoppingCart.jsp - Khi xuất hiện trang này có nghĩa là đăng nhập thành công và chuyển sang giỏ hàng

2 Trình duyệt chuyển tới trang CheckOut.jsp

để kiểm tra , chọn xuất hóa đơn

Kết quả hiển thị trang

CreateOder.jsp - Xuất hiện thông báo : Bạn cần phải mua hàng mới có thể xuất hóa đơn

2 Click thanh toán để xuất hóa đơn

Kết quả hiển thị trang

CreateOder.jsp - Xuất hiện thông báo : Mặt hàng này

Pass

2 Cập nhật số lượng

là 20 chiếc

3 Xuất hóa đơn

Kết quả hiển thị trang

CreateOder.jsp - Xuất hiện thông báo : Mặt hàng này trong kho chỉ còn (số lượng hàng trong kho ) nên không đủ thực hiện giao dịch

2 Cập nhật số lượng

là 1 chiếc

3 Xuất hóa đơn

Kết quả hiển thị trang

CreateOder.jsp - Xuất hiện thông báo : Cảm ơn quý khách đã mua hàng , mã hóa đơn của quý khách là … , hàng sẽ được giao trong … ngày nữa ( tùy theo cách chọn gửi hàng )

anhtuan8010 password: 80103085 Bấm Login

2 Đăng nhập xong bấm vào menu Administrator

Kết quả không vào được trang

AdminMenu.jsp và trình duyệt tự động chuyển đến trang Login.jsp Pass

Xử lý bảo mật

từ server

bachho3388 password: 80103085 Bấm Login

2 Đăng nhập xong bấm vào menu Administrator

Kết quả hiển thị trang

AdminMenu.jsp , lúc này sẽ có danh sách về hóa đơn , thành viên , mobile

và tin tức để có thể thêm xóa sửa dữ liệu

Pass

Xử lý bảo mật

từ server

Page 31