Đồ Án Cơ Sở 1 Xây Dựng Website Kinh Doanh Áo Thun.docx

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CƠ SỞ 1 Xây dựng Website Kinh Doanh Áo Thun LỜI CẢM ƠN Nhóm đề tài xin chân thành cảm ơn Khoa Công nghệ thông ti[.]

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

ĐỒ ÁN CƠ SỞ 1

Xây dựng Website Kinh Doanh Áo Thun

LỜI CẢM ƠN

Nhóm đề tài xin chân thành cảm ơn Khoa Công nghệ thông tin Trường Đại họcCông nghệ thông tin và Truyền thông Việt-Hàn đã tạo điều kiện tốt cho nhóm đề tàithực hiện tốt Đồ án cơ sở 1

Đặc biệt nhóm đề tài xin chân thành cảm ơn sự nhiệt tình hướng dẫn và đónggóp ý kiến của thầy Hồ Văn Phi đã giúp nhóm đề tài hoàn thành tốt Đồ án cơ sở 1

Nhóm đề tài xin chân thành cảm ơn!

MỤC LỤC

MỞ ĐẦU 6

1 Giới thiệu 6

2 Mục tiêu của đề tài 6

3 Nội dung và kế hoạch thực hiện 6

4 Bố cục báo cáo 7

Chương 1 TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE 8

1.Tìm hiểu về những ngôn ngữ lập trình 8

2 Phương pháp, kết quả 10

3 Kết chương 1 10

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 11

1 Phân tích hệ thống 11

2 Các trang sẽ xây dựng 11

3 Thiết kế hệ thống 13

4 Mô tả chức năng 14

Chương 3 XÂY DỰNG WEBSITE 15

1 Giao diện phân hệ khách hàng 15

2 Giao diện phân hệ quản trị 19

KẾT LUẬN 20

1 Kết quả đạt được 20

2 Hạn chế 20

3 Hướng nghiên cứu 20

4 Thiết kế nhận diện thương hiệu 21

5 Phần phân công thực hiện dự án: 21

DANH MỤC HÌNH VẼ

Hình 1 Biểu đồ usecase chức năng đặt hàng Hình 2 Biểu đồ usecase chức năng đăng ký Hình 3 Biểu đồ usecase chức năng đăng nhập Hình 4 Biểu đồ usecase chức năng tìm kiếm Hình 5 Giao diện trang chủ hiển thị

Hình 6 Giao diện sản phẩm áo

Hình 7 Giao diện danh mục tư vấn phối đồ Hình 8 Giao diện dịch vụ tư vấn làm đẹp

Hình 9 Giao diện giỏ hàng

Hình 10 Giao diện thanh toán

Hình 11 Giao diện đăng nhập, đăng ký

Hình 12 Giao diện liên hệ

Hình 13 Giao diện admin

MỞ ĐẦU

1 Giới thiệu

- Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố quyết định trong hoạt động các chính phủ, tổ chức cũng như của công ty, cửa hàn; nó đóng vai trò hết sức quan trọng có thể tạo nên một bước đột phá mới.

-Việc xây dựng một website để phục vụ cho các nhu cầu riêng của tổ chức, công ty thậm chí các cá nhân, ngày nay, không còn quá xa lạ Một vài thao tác đơn giản, một người có thể trở chủ một website giới thiệu về gia đình anh ta , bản thân anh ta hay một website trình bàycác bộ sưu tập xe hơi của anh ta chẳng hạn

-Hoạt động của một công ty hay cửa hang có quy mô lớn sẽ càng được tăng cườngvà mở rộng nếu họ xây được một website tốt Bắt nguồn từ ý tưởng này,

cùng với những gợi ý của Thầy giáo Võ Ngọc Đạt , chúng em thực hiện đồ án

cơ sở 1 “Xây dựng Wesite Kinh Doanh Áo Thun” Website sẽ giải quyết

được phần nào những khó khăn cho các nhà bán hàng và người tiêu dùng.

Mục tiêu của đề tài

- Xây dựng được website bán hàng tương đối hoàn chỉnh, phục vụ người dùng nhanhchóng, tiện lợi Website đã có đầy đủ các giao diện căn bản như: đưa ra được thông tinsản phẩm, giúp người dùng có thể mua hàng tại website một cách nhanh chóng và dễdàng, giúp người dùng tin tức, hỏi đáp tư vấn

2 Nội dung và kế hoặc thực hiện

Trên cơ sở mục tiêu nghiên cứu, chúng em đã triển khai các nội dung nghiêncứu cụ thể như sau:

 Trang tư vấn:

 Trang giỏ hàng

 Trang đăng ký,đăng nhập

 Trang quản trị website,thống kê

4 Bố cục báo cáo

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau: Chương 1 Tổng quan về ngôn ngữ lập trình

+ Tìm hiểu về ngôn ngữ lập trình + Phương pháp, kết quả

+ Kết chương 1

Chương 2 Phân tích thiết kế hệ thống.

+ Phân tích hệ thống + Biểu đồ usecase + Mô tả chức năng

Chương 3 Xây dựng Website.

Kết luận

Tài liệu tham khảo

HTML (HyperText Markup Language) - Ngôn ngữ đánh dấu siêu văn bản được

sử dụng để tạo các tài liệu có thể truy cập trên mạng Tài liệu HTML được tạo nhờdùng các thẻ và các phần tử của HTML File được lưu trên máy chủ dịch vụ web vớiphần mở rộng “.htm” hoặc “.html” Các trình duyệt sẽ đọc tập tin HTML và hiển thịchúng dưới dạng trang web Các thẻ HTML sẽ được ẩn đi, chỉ hiển thị nội dung vănbản và các đối tượng khác: hình ảnh, media Với các trình duyệt kahcs nhau đều hiểnthị một tập HTML với một kế quả nhất định Các trang HTML được gửi đi qua mạnginternet theo giao thức HTTP HTML không những cho phép nhúng thêm các đốitượng hình ảnh, âm thanh mà còn cho phép nhúng các kịch bản vào trong đó như cácngôn ngữ kịch bản như Javascript để tạo hiệu ứng động cho trang web

HTML là một chuẩn ngôn ngữ internet được tạo ra và phát triển bởi tổ chứcWorld Wide Web Consortium còn được viết tắt là W3C Trước đó thì HTML xuất bảntheo chuẩn của RFC HTML được tương thích với mọi hệ điều hành cùng các trìnhduyệt của nó Khả năng dễ học, dễ viết là một ưu điểm của HTML không những vậyviệc soạn thảo đòi hỏi hết sức đơn giản, chúng ta có thể dùng word, notepad hay bất cứmột trình soạn thảo văn bản nào để viết và chỉ cần lưu với định dạng “.html” hoặc

“.htm” là đã có thể tạo ra một file chứa HTML Hiện nay, phiên bản mới nhất củaHTML là HTML với nhiều tính năng ưu việt so với các phiên bản HTML cải tiến khánhiều đặc biệt hỗ trợ mạnh mẽ các phần tử multimedia mà không cần các plugin.HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ thích ứng cao mà chính làkhả năng hỗ trợ API (Application Programming Interface - giao diện lập trình ứngdụng) và DOM (Document Object Model - các đối tượng thao tác văn bản)

1.2 Ngôn ngữ CSS

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày các tàiliệu viết bằng HTML, XHTML, XML, SVG, hay UMI…CSS quy định cách hiển thịcủa các thẻ HTML bằng cách quy định các thuộc tính của các thẻ đó (font chữ, kíchthước, màu sắc,…) Các đặc điểm kĩ thuật của CSS được duy trì bởi tổ chức W3C.CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho các thuộc tính.CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặc tham chiếu từ mộtfile css riêng biệt Hiện nay CSS thường được viết riêng thành một tập tin với mở rộng

“.css” Chính vì vậy mà các trang web có sử dụng CSS thì mã HTML sẽ tở nên ngắngọn hơn Ngoài ra có thể sử dụng một tập tin CSS cho nhiều web site tiết kieemk rất

nhiều thời gian và công sức Một đặc điểm quan trọng đó là tính kế thừa của CSS do

đó sẽ giảm số lượng dòng code mà vẫn đạt được yêu cầu

Tuy nhiên, đối với CSS thì các trình duyệt hiểu theo kiểu riêng của nó Do vậy,việc trình bày một nội dung trên các trình duyệt khác nhau là không thống nhất CSScung cấp hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo caotrong kết hợp các thuộc tính giúp mang lại hiệu quả

Một tập tin PHP có phần mở rộng *.php, nó có thể chứa các văn bản, mã nguồnHTML, CSS, Javascript, Jquery…và đương nhiên có thể chứa mã nguồn PHP

Đối với các trang PHP khi có yêu cầu xem trang web thì Server sẽ tiến hànhphát sinh trang web đó từ mã nguồn PHP sang ma nguồn HTML, sau đó mới chuyển

mã nguồn đó về trình duyệt web để người dùng xem Vì các trình duyệt web không thểđọc được các mã nguồn PHP mà chỉ đọc được các mã nguồn HTML

1.4 Thư viện hỗ trợ JavaScript

JavaScript là một ngôn ngữ dạng script thường được sử dụng cho việc lập trìnhweb ở phía trên client, nó tuân theo chuẩn ECMAScript Là một ngôn ngữ linh động,

cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình JavaScript không hềliên quan tới ngôn ngữ lập trình java, được hầu hết các trình duyệt ngày nay hỗ trợ.Với JavaScript, ứng dụng web của bạn sẽ trở nên vô cùng sinh động, mang tính trứcquan và tương tác cao JavaScript theo phiên bản hiện hành là một ngôn ngữ lập trìnhkịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu Ngôn ngữ nàyđược dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viếtscript sử dụng các đối tượng nằm sẵn trong các ứng dụng Giống Java, JavaScript có

cú pháp tương tự ngôn ngữ lập trình C, nhưng nó gần với Self hơn Java “.js” là phần

mở rộng thường được dùng cho tập tin mã nguồn java

1.5 Thư viện hộ trợ Bootstrap

Bootstrap là một Framework có chưa HTML, CSS, JavaScript, Frameworktrong tiếng Việt có nghĩa là “khuôn khổ” giúp tiết kiệm thời gian, công sức hơn nữaviệc xây dựng hai teamplate cho giao diện Desktop và Mobile đã lỗi thời thay vào đó

là Responsive Responsive sẽ giúp website của bạn hiển thị được nhiều hơn trên cácloại màn hình khác nhau

Ưu điểm của Bootstrap

 Tiết kiệm thời gian: Bootstrap giúp người thiết kế giao diện website tiết kiệm rấtnhiều thời gian Các thư viện Boostrap có những đoạn mã sẵn sàng cho bạn ápdụng vào website của mình Bạn không phải tốn quá nhiều thời gian để tự viếtcode cho giao diện của mình

 Tùy biến cao: Bạn hoàn toàn có thể dựa vào Bootstrap phát triển giao diện nềntảng cảu chính mình Bootstrap cung cấp cho bạn hệ thống Grid System mặc địnhbao gồm 12 hộp và độ rộng 940px Bạn có thể thay đổi, nâng cấp và phát triển dựatrên nền tảng này

 Responsive Web Design: Vời Bootstrap, việc phát triển giao diện website để phùhợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Đây là xu hướng phát triểngiao diện website đang rất được ưa chuộng trên thế giới

3 Kết chương 1

Thông qua tìm hiểu ngôn ngữ lập trình HTML,CSS và các thư viện hỗ trợ từ

đó, làm cơ sở đề xuất “Website bán điện thoại, phụ kiện điện thoại” sẽ được trình bàytrong chương tiếp theo

Chương 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Giới thiệu sơ lược về hệ thống sắp xây dựng

Website có bố cục được sắp xếp hợp lí, dễ quan sát: logo chính ở góc trái vàgóc phải là giỏ hàng, menu ngang ở giao diện chính là các phần thanh điều hướng củatrang web, góc phải là thanh tìm kiếm, menu dọc là sản phẩm cụ thể, điều này giúpngười sử dụng dễ dàng chọn lọc sản phẩm của bản thân Tiếp theo là banners, quảngcáo được chạy ở giữa mang tính sinh động, đánh giá của người sử sụng giúp tăng cáinhìn trực quan hơn về trang web Phần giữa là nội dung trang web và phần cuối cùng

là thông tin cơ bản về số điện thoại, địa chỉ,…

1 Phân tích hệ thống

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

- Sau khi hoàn thiện Website hiển thị đầy đủ các giao diện chức cơ bản của mộttrang web bán hàng như:

+ Sản phẩm+ Tìm kiếm sản phẩm

+ Đặt hàng

+ Hỗ trợ đặt hàng

+ Hiển thị danh sách mặt hàng theo từng loại+ Liên hệ tổng đài giải quyết mọi thắc mắc và vấn đề

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

- Để đảm bảo một website/hệ thống hoặc một phần mềm hoạt động tốt thì:

+ Website chạy 24/24

+ Giao diện hệ thống dễ sử dùng, trực quan, thân thiện với người dùng.+ Hệ thống xử lý nhanh chóng, chính xác

+ Luôn sẵn sàng hỗ trợ khi người dùng gặp khó khăn

+ Đảm bảo môi trường website bán hàng uy tín

hệ thống trước khi thực hiện đặt hàng.

Hình 1 Biểu đồ usecase chức năng đặt hàng

 Hệ thống phân quyền mặc định là user cho tài khoản mới đăng kí

Hình 2 Biểu đồ usecase chức năng đăng ký

 Người dùng sử dụng chức năng tìm kiếm theo từ khóa.

Hình 4 Biểu đồ usecase chức năng tìm kiếm

3 Thiết kế hệ thống

- Thiết kế giao diện gồm 4 phần :

+ Phần Header là khu vực giới thiệu về trang web nằm trên cùng (đỉnh)

của trang web gồm có :

+ Phần Menu điều hướng là thành phần không thể thiếu của một website.

Thanh điều hướng này có nhiệm vụ hiển thị các danh mục nội dung của website vàtrình bày theo cấp bậc Gồm có :

+ Phần footer hay còn gọi là chân trang nằm ở vị trí cuối cùng của trang web

Chân trang sẽ hiển thị những thông tin gồm :

 Địa chỉ liên hệ,

 Thông tin bản quyền website

 Link liên kết đến trang mạng xã hội

+ Sản phầm : Chức năng này cho phép người dùng xem chi tiết thông tin cácsản phẩm của hàng như tên hàng, đánh giá, đơn giá, số hiệu,…

+ Nút đăng ký: Chức năng này giúp người dùng tạo tài khoản để lưu trữ nhữngthông tin của người dùng, tạo nhờ đó thêm người dùng vào hệ thống

+ Nút đăng nhập: Chức năng này cho phép người dùng nhập tên đăng nhập vàmật khẩu để sử dụng hệ thống

+ Chức năng đặt hàng: Chức năng này giúp người dùng điền đầy đủ các thôngtin: tên người nhận, số điện thoại, địa chỉ,… rồi đặt hàng

Chương 3 XÂY DỰNG WEBSITE

1 Giao diện phân hệ khách hàng

1.1 Giao diện trang chủ hiển thị

Hình 5 Giao diện trang chủ hiển thị

1.2 Giao diện sản phẩm áo

Hình 6 Giao diện sản phẩm áo

1.3.Giao diện danh mục tư vấn phối đồ

Hình 7 Giao diện danh mục tư vấn phối đồ

1.4.Giao diện dịch vụ tư vấn làm đẹp

Hình 8 Giao diện dịch vụ tư vấn làm đẹp

1.5.Giao diện giỏ hàng

Hình 9 Giao diện giỏ hàng

1.6.Giao diện thanh toán

Hình 10 Giao diện thanh toán

1.7.Giao diện đăng nhập, đăng ký

Hình 11 Giao diện đăng nhập, đăng ký

1.8.Giao diện liên hệ

Hình 12 Giao diện liên hệ

2 Giao diện phân hệ quản trị

Hình 13 Giao diện admin

 Áp dụng được những kiến thức đã học vào thực tế

 Vận dụng được những ngôn ngữ ,áp dụng những thư viện,framework để xậydựng nên website “ Bán Thực Phẩm Sạch”

 Biết được cách tổ chức, sắp xếp, quản lý đồ án

 Học hỏi thêm một số kỹ năng mềm quan trọng cho nghề nghiệp tương lai như

kỹ năng soạn thảo báo cáo, làm việc nhóm, quản lý dự án và nhiều kỹ năngkhác

 Có được sản phẩm thiết kế website “Bán Thực Phẩm Sạch”, bài báo cáo

2 Hạn chế

Tuy đã cố gắng mày mò nghiên cứu, chỉnh sửa, trau chuốt cho đồ án nhưng sai lầmtrong lúc tiến hành đồ án là không thể tránh khỏi Kính mong thầy cô bỏ qua và đónggóp ý kiến cho chúng em để chúng em ngày càng hoàn thiện sản phẩm hơn

-Sản phẩm website chưa được tối ưu với các thiết bị có màn hình nhỏ như điện thoại.-Các hiệu ứng tương tác trên trang web còn thiếu nhiều,chưa được chuyên nghiệp.-Sản phẩm mới chỉ có phần giao diện nên chưa thể tương tác,xử lí với dữ liệu được

3 Hướng nghiên cứu

Với những hạn chế và tồn tại nêu trên, hướng nghiên cứu phát triển dự kiến nhưsau:Sản phẩm của đồ án là một website, bởi vì hạn chế về kiến thức và kỹ năng, hiện

tại website chỉ như một đứa trẻ, không ngừng học tập cái mới để bổ sung, phát triển vàhoàn hiện bản thân theo thời gian Chúng em sẽ cố gắng hoàn thiện, sửa chữa nhữngsai sót và phát triển trang web trong thời gian tới, sau đây là một số dự kiến chophương hướng phát triển sau này của website:

 Cải thiện giao diện :

+Trở nên dễ nhìn hơn, đẹp mắt hơn và chuyên nghiệp hơn nữa

+Dùng nhiều JavaScript trong bài để trở nên sinh động hơn

 Cải thiện nội dung:

+Liên tục cập nhật các những thứ mới, không để những nội dung hoặc loại thức

ăn đã không ưa chuộng ở hiện tại nữa

+Thêm 1 số tin tức về các món ăn hot trên mạng xã hội

 Thêm một số chức năng mới:

+Dùng Php để tạo ra một trang web hoàn chỉnh và up lên Server

+Tương thích tốt hơn với các loại thiết bị màn hình như điện thoại

4 Thiết kế nhận diện thương hiệu

-Thiết kế logo:

5 Phần phân công thực hiện dự án:

Bảng phân công công việc thực hiện dự án

STT Tên sinh viên Việc được phân công

1 Nguyễn Vinh Hiếu Báo Cáo Đồ Án, Thiết

Kế Trang Chủ, Đăng Nhập & Đăng Ký, Liên Hệ

8 tuần

2 Võ Hoàng Trung Kiên Báo Cáo Đồ Án, Thiết

Kế trang Sản Phẩm,Hiển Thị Thông Tin Sản Phẩm,Tư Vấn,Giỏ Hàng

9 tuần

20