Đồ án cơ sở 2 Đề tài xây dựng website thương mại Điện tử kinh doanh quần áo

CHƯƠNG 2 NGHIÊN CỨU TỔNG QUAN2.1 Tìm hiểu về các ngôn ngữ lập trình 2.1.1 HTML 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

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH

Đà Nẵng, ngày 5 tháng 12 năm 2022

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

VIỆT - HÀN KHOA KHOA HỌC MÁY TÍNH

Đà Nẵng, ngày 5 tháng 12 năm 2022

MỞ ĐẦU

Trong hoạt động sản xuất, kinh doanh, thương mại điện tử đã khẳng định được vaitrò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp Đối với một cửa hàng, việcquảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp ứng được nhu cầucủa khác hàng sẽ là cần thiết Vậy phải quảng bá thế nào đó là xây dựng được mộtwebsite cho cửa hàng của mình quảng bá tất cả các sản phẩm của mình bán Vìvậy, chúng em đã thực hiện đồ án “ XÂY DỰNG WEBSITE THƯƠNG MẠIĐIỆN TỬ KINH DOANH QUẦN ÁO “

Đặc biệt, em xin cảm ơn sâu sắc tới giáo viên hướng dẫn ThS.Võ Ngọc Đạt Giảng viên khoa Khoa học máy tính, Trường Đại học Công nghệ Thông tin &Truyền thông Việt Hàn - Đại học Đà Nẵng đã tận tình hướng dẫn chu đáo, góp ýtheo sát giúp em có thể hoàn thành đồ án tốt nhất.

-NHẬN XÉT

………

………

………

………

………

………

………

………

………

………

………

Chữ ký GVHD

3.1 Khảo sát và đặc tả 11

DANH MỤC BẢNG

Bảng 1 mô tả chức năng của quản trị viên 14

Bảng 2 mô tả chức năng người dùng 15

DANH MỤC HÌNH ẢNH Hình ảnh 1 mô tả quan hệ cơ sở dữ liệu 15

Hình ảnh 2 mô tả chức năng đăng ký 16

Hình ảnh 3 mô tả chức năng đăng nhập với website 17

Hình ảnh 4 mô tả chức năng thêm danh mục sản phẩm 18

Hình ảnh 5 thay đổi thông tin tài khoản 19

Hình ảnh 6 mô tả chức năng thêm sản phẩm 20

Hình ảnh 7 biểu đồ usec-case tổng quát 21

Hình ảnh 8 trang chủ của người dùng 22

Hình ảnh 9 header 22

Hình ảnh 10 header với kích thước màn hình nhỏ hơn 600px 22

Hình ảnh 11 footer 22

Hình ảnh 12 footer với kích thước màn hình nhỏ hơn 600px 23

Hình ảnh 13 header trang admin 23

Hình ảnh 14 header trang admin với kích thước màn hình nhỏ hơn 600px 23

Hình ảnh 15 trang đăng nhập 24

Hình ảnh 16 trang đăng ký 24

Hình ảnh 17 trang thay đổi thông tin 25

Hình ảnh 18 các sản phẩm mới nhất 25

Hình ảnh 19 danh mục sản phẩm 26

Hình ảnh 20 trang toàn bộ sản phẩm 26

Hình ảnh 21 trang sản phẩm theo danh mục 27

Hình ảnh 22 trang chi tiết sản phẩm 27

Hình ảnh 23 thanh tìm kiếm 28

Hình ảnh 24 trang chủ admin 28

Hình ảnh 25 trang quản lý danh mục sản phẩm 29

Hình ảnh 26 trang quản lý các sản phẩm 29

Hình ảnh 27 trang thêm sản phẩm 30

Hình ảnh 28 trang quản lý đơn hàng 30

Hình ảnh 29 trang thống kê 31

Hình ảnh 30 trang quản lý tài khoản (1) 31

Hình ảnh 31 trang quản lý tài khoản (2) 32

Hình ảnh 32 giỏ hàng 32

Hình ảnh 33 trang thông tin đơn hàng 33

Hình ảnh 34 trang thanh toán 33

DANH MỤC CÁC TỪ VIẾT TẮT

4 Hypertext Markup Language HTML

10 User Interface UI

CHƯƠNG 1 GIỚI THIỆU

1.1 Lý do chọn đề tài

Trong thời đại ngày nay, đất nước ta đang hội nhập vào WTO cùng với phát triểnnhanh chóng của công nghệ thông tin được áp dụng trên mọi lĩnh vực của cuộcsống như kinh tế, chính trị, văn hóa xã hội,… tất cả đều cần có công nghệ thôngtin Như hiện nay chúng ta đã biết lập trình và thiết kế Website có thể được coi làngành “hot” mà hiện nay chúng ta đang rất quan tâm Sau khi nghiên cứu tình hìnhcủa công ty em đã đưa ra quyết định XÂY DỰNG VÀ THIẾT KẾ WEBSITETHƯƠNG MẠI ĐIỆN TỬ KINH DOANH ÁO QUẦN nhằm đáp ứng nhu cầu củakhách hàng Hiện nay nhu cầu sử dụng Internet ngày càng nhiều và hình thức kinhdoanh trên mạng ngày càng đa dạng và phong phú rất được nhiều người sử dụng và

ưa chuộng Cho nên khi xây dựng trang web này trên hệ thống trực tuyến sẽ giúpcho khách hàng thuận lợi trong việc mua các sản phẩm của công ty mà không cầnphải vất vả đến tận nơi công ty mua hàng như lúc trước

1.2 Mục tiêu đề tài

- Giúp người mua chỉ cần tốn ít phút đã có thể mua được sản phẩm

- Giúp doanh nghiệp bán sản phẩm

- Giúp doanh nghiệp hoặc công ty đưa sản phẩm đến nhiều người mua hơn

- Giúp giảm thiểu khả năng đi lại trong mùa covid-19

1.3 Nội dung chính

- Tìm hiều, ứng dụng các ngôn ngữ lập trình vào thiết kế website (PHP,MYSQL)

- Thiết kế đặc tả hệ thống

- Xây dưng cơ sở dữ liệu trên MySQL

- Xây dựng các module quản lý

1

Tìm hiểu về PHP, MySQL, Laravel, phục vụ trong quá trình xây dựng trang web.

- Tìm hiểu kĩ năng về UI, UX

- Thiết kế website với đầy đủ chức năng cho người dùng

- Website nhanh và hiệu quả hơn trong việc quản lý, tìm việc

1.4 Kết quả

- Tìm hiểu nắm bắt được các kiến thức về HTML, CSS, AJAX, JQUERY,PHP, MYSQL,…

- Ứng dụng, phát triển được công nghệ thiết kế web bằng Laravel

- Có thể tự vận dụng lại các kiến đã được học

- Biết cách xây dựng và vận dụng API

- Với quy mô trang web vừa và nhỏ, cộng thêm thời gian không cho phép nên

đề tài có thể chưa có đầy đủ các chức năng hoàn thiện của một trang web tìmviệc Trong quá trình làm còn nhều sai sót, do kiến thức có hạn lên websitecòn ít nhiều thiếu sót về việc hiển thị cũng như tối ưu thuật toán, thời gianthực hiện Cũng như giao diện chưa được thân thiện với người dùng Một sốlỗi còn xảy ra trong lúc chạy chương trình Trong tương lai chúng em sẽ cốgắng khắc phục những sai sót này

2

CHƯƠNG 2 NGHIÊN CỨU TỔNG QUAN

2.1 Tìm hiểu về các ngôn ngữ lập trình

2.1.1 HTML

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 đượctạ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ới phần mở rộng “.htm” hoặc “.html” Các trình duyệt sẽ đọc tập tinHTML 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ăn bản và các đối tượng khác: hình ảnh, media Với các trìnhduyệt khác nhau đều hiển thị một tập HTML với một kết quả nhất định Các trangHTML được gửi đi qua mạng internet theo giao thức HTTP HTML không nhữngcho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúngcác kịch bản vào trong đó như các ngôn ngữ kịch bản như Javascript để tạo hiệuứng động cho trang web Để trình bày trang web hiệu quả hơn thì HTML cho phép

sử dụng kết hợp với CSS 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ác ngô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ức WorldWide Web Consortium còn được viết tắc 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ữngvậy việc soạn thảo đòi hỏi hết sức đơn giản, chúng ta có thể dùng word, notepadhay 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ảnmới nhất của HTML là HTML5 với nhiều tính năng ưu việt so với các phiên bản

cũ HTML cải tiến khá nhiều đặc biệt hỗ trợ mạnh mẽ các phần tử multimedia mà

3

không cần các plugin Một tập tin HTML bao gồm trong đó là các đoạn văn bảnHTML, được tạo lên bởi các thẻ HTML HTML5 nói chung mạnh mẽ hơn nhiềukhông chỉ về tốc độ và độ thích ứng cao mà chính là khả năng hỗ trợ API(Application Programming Interface - giao diện lập trình ứng dụng) và DOM(Document Object Model – các đối tượng thao tác văn bản).

2.1.2 CSS

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bày

cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…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ácthẻ đó (font chữ, kích thước, màu sắc )

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên chos các thuộctí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ột file css riêng biệt Hiện nay CSS thường được viết riêng thành một tập tinvới mở rộng là “.css” Chính vì vậy mà các trang web có sử dụng CSS thì mãHTML sẽ trở nên ngắn gọn hơn Ngoài ra có thể sử dụng một tập tin CSS đó chonhiều website tiết kiệm 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 được 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.CSS cung 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ángtạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả

nhúng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốc độ nhanh,nhỏ gọn, cú pháp giống ngôn ngữ lập trình C và ngôn ngữ lập trình Java, dễ học vàthời gian xây dựng sản phẩm tương đối ngắn hơn so với các ngôn ngữ khác nênPHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới.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ành phátsinh trang web đó từ mã nguồn PHP sang mã 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ôngthể đọc được các mã nguồn PHP mà chỉ đọc được các mã nguồn HTML

Framework Laravel

Laravel là một PHP framework mã nguồn mở và miễn phí, được phát triển bởiTaylor Otwell và nhắm vào mục tiêu hỗ trợ phát triển các ứng dụng web theo kiếmtrúc model-view-controller (MVC) Những tính năng nổi bật của Laravel bao gồm

cú pháp dễ hiểu – rõ ràng , một hệ thống đóng gói modular và quản lý gói phụthuộc, nhiều cách khác nhau để truy cập vào các cơ sở dữ liệu quan hệ, nhiều tiệních khác nhau hỗ trợ việc triển khai vào bảo trì ứng dụng

Vào khoảng Tháng 3 năm 2015, các lập trình viên đã có một cuộc bình chọn PHPframework phổ biến nhất, Laravel đã giành vị trí quán quân cho PHP frameworkphổ biến nhất năm 2015, theo sau lần lượt là Symfony2, Nette, CodeIgniter, Yii2vào một số khác Trước đó, Tháng 8 2014, Laravel đã trở thành project PHP phổbiến nhất và được theo dõi nhiều nhất trên Github

5

Laravel được phát hành theo giấy phép MIT, với source code được lưu trữ tạiGithub.

Laravel là ứng dụng MVC hoàn chỉnh tương đối dễ tiếp cận phù hợp với ngườimới lập trình PHP

Dưới đây là một số tính năng nổi bật của Laravel:

- Viết trên mô hình MVC PHP

- Đầy đủ các lớp Database giúp hỗ trợ tốt cho các nền tảng khác nhau

- Dễ dàng đọc hiểu, sử dụng: Các tính năng dựng sẵn: Cung cấp cho ngườidùng rất nhiều các nhóm tính năng giúp quá trình phát triển trở nên nhanhchóng hơn rất nhiều

6

JavaScript có cú pháp tương tự ngôn ngữ lập trình C “.js” là phần mở rộng thườngđược dùng cho tập tin mã nguồn JavaScript.

2.2.2 Bootstrap 5

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 được thời gian, công sứchơn nữa việc xây dựng hai teamplate cho giao diện Desktop và Mobile đã lỗi thờithay vào đó là Responsive Responsive sẽ giúp website của bạn hiển thị tươngthích với mọi kích thước màn hình nhờ đó bạn sẽ tùy chỉnh hiện thị được nhiềuhơn trên các loại màn hình khác nhau

2.2.3 Jquery

JQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm

2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn, làm nhiềuhơn JQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứngđộng và tương tác Ajax Với jQuery, khái niệm Rapid Web Development đã khôngcòn quá xa lạ JQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa cáctác vụ đa dạng với việc viết ít code hơn Dưới đây liệt kê một số tính năng tối quantrọng được hỗ trợ bởi jQuery:

- Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM để traverse(duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung củachúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi làSizzle

- Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc xử

lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên với cácEvent Handler

- Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tínhnăng và phản hồi tốt bởi sử dụng công nghệ AJAX

7

- Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt màbạn có thể sử dụng trong các Website của mình.

- Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB(gzipped)

- Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ hầu hếtbởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+, Safari3.0+, Chrome và Opera 9.0+

- Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3 Selector và

có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL NhưngMySQL không bao quát toàn bộ những câu truy vấn cao cấp như SQL Về bản chấtMySQL chỉ đáp ứng việc truy xuất đơn giản trong quá trình vận hành của websitenhưng hầu hết có thể giải quyết các bài toán trong PHP

MySQL là cơ sở dữ liệu tốc độ cao, ổn định và dễ sử dụng, 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ínhbảo mật cao, MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trêninternet MySQL miễn phí hoàn toàn cho nên bạn có thể tải về MySQL từ trangchủ MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệuquan hệ sử dụng ngôn ngữ truy vấn có cấu trúc (SQL) MySQL đang được sử dụngcho nhiều công việc kinh doanh từ nhỏ tới lớn:

8

- MySQL rất dễ sử dụng: Bạn chỉ phải có kiến thức cơ bản về SQL Bạn có thểxây dựng và tương tác với MySQL chỉ bằng một vài câu lệnh SQL đơn giản.

- MySQL là mã ngồn mở vì thế sử dụng không mất phí

- MySQL tương thích trên nhiều hệ điều hành: MySQL tương thích để chạytrên nhiều hệ điều hành, như Novell NetWare, Windows * Linux *, nhiềuloại UNIX * (như Sun * Solaris *, AIX và DEC * UNIX), OS / 2, FreeBSD

*, và những người khác MySQL cũng cung cấp một phương tiện mà cácmáy khách có thể chạy trên cùng một máy tính với máy chủ hoặc trên mộtmáy tính khác (giao tiếp qua mạng cục bộ hoặc Internet)

- MySQL sử dụng một Form chuẩn của ngôn ngữ dữ liệu nổi tiếng là SQL

- MySQL làm việc trên nhiều Hệ điều hành và với nhiều ngôn ngữ như PHP,PERL, C, C++, Java, …

- MySQL làm việc nhanh với các tập dữ liệu lớn

- MySQL hỗ trợ các cơ sở dữ liệu lớn, lên tới 50 triệu hàng hoặc nhiều hơnnữa trong một bảng Kích cỡ file mặc định được giới hạn cho một bảng là 4GB( Gigabyte ), nhưng bạn có thể tăng kích cỡ này (nếu hệ điều hành củabạn có thể xử lý nó) để đạt tới giới hạn lý thuyết là 8 TB ( Terabyte )

- MySQL là có thể điều chỉnh Giấy phép GPL mã nguồn mở cho phép lậptrình viên sửa đổi phần mềm MySQL để phù hợp với môi trường cụ thể củahọ

- MYSQL an toàn: MySQL bao gồm một lớp bảo mật dữ liệu vững chắc đểbảo vệ dữ liệu nhạy cảm khỏi những kẻ xâm nhập Mật khẩu được mã hóatrong MySQL

- Năng suất cao: MySQL sử dụng Triggers, các thủ tục và chế độ xem đượclưu trữ cho phép nhà phát triển cung cấp năng suất cao hơn

9

- Tạo cơ sở dữ liệu MySQL bằng PHP: phần này giải thích làm thế nào để tạo

ra cơ sở dữ liệu và bảng MySQL bằng cách sử dụng PHP

- Xóa cơ sở dữ liệu MySQL bằng PHP: phần này giải thích làm thế nào để xóa

cơ sở dữ liệu và bảng MySQL bằng cách sử dụng PHP

- Chèn dữ liệu Cơ sở dữ liệu MySQL: một khi bạn đã tạo ra cơ sở dữ liệu vàcác bảng của bạn sau đó bạn muốn chèn dữ liệu vào bảng được tạo ra Phiênhọp này sẽ đưa bạn qua ví dụ thực tế về dữ liệu chèn

- Lấy dữ liệu từ cơ sở dữ liệu MySQL: tìm hiểu làm thế nào để lấy hồ sơ từ cơ

sở dữ liệu MySQL bằng cách sử dụng PHP

- Sử dụng Paging qua PHP: điều này giải thích làm thế nào để hiển thị kết quảtruy vấn của bạn thành nhiều trang và làm thế nào để tạo ra các liên kết điềuhướng Đang cập nhật dữ liệu vào cơ sở dữ liệu MySQL: phần này giải thíchlàm thế nào để cập nhật hồ sơ hiện có vào cơ sở dữ liệu MySQL bằng cách

sử dụng PHP

- Xóa dữ liệu từ cơ sở dữ liệu MySQL: phần này giải thích làm thế nào để xóahoặc tẩy hồ sơ hiện từ cơ sở dữ liệu MySQL bằng cách sử dụng PHP

10

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

3.1 Khảo sát và đặc tả

3.1.1 Yêu cầu về chức năng

- Chức năng tìm kiếm, bộ lọc kết quả

- Cập nhập chi tiết hồ sơ

- Đăng ký, đăng nhập

- Mua sản phẩm

- Thanh toán sản phẩm

- Chức năng thay đổi thông tin các nhân

3.1.2 Giao diện người dùng

- Website không nên quá phức tạp

- Dung lượng file không quá lớn

- Thanh menu thật đơn giản

- Phải có thông tin liên hệ

- Font chữ đơn giản, dễ nhìn, màu sắc hài hòa

- An toàn và bảo mật dữ liệu

- Kiểm tra website có tương thích với các trình duyệt phổ biến hay không

- Cho phép liên hệ với người quản trị

- Trang tìm kiếm, kết quả làm nổi bật lên các trường quan trọng như: tên sảnphẩm,…

3.1.3 Yêu cầu hệ thống

- Hệ thống hoạt động nhanh, chính xác

- Có thể nâng cấp, update, bảo trì dễ dàng

- Tính bảo mật và độ an toàn cao

11

- Quản lý hóa đơn.

- Quản lý tài khoản người dùng

Tác nhân người mua hàng: Quản lí giỏ hàng, mua sản phẩm, thanh toán sản phẩm

Để thực hiện chức năng này người mua hàng cần tạo tài khoản

- Quản lý sản phẩm: thêm, sửa, xóa sản phẩm

- Quản lý đơn hàng: quản lý trạng thái của đơn hàng

12