(TIỂU LUẬN) báo cáo CHUYÊN đề học PHẦN lập TRÌNH WEB NÂNG CAO đề tài xây DỰNG WEBSITE SHOP bán đồ điện tử

Với công nghệ Word Wide Web, hay còn gọi là Web sẽ giúp bạn đưa những thông tin mong muốn của mình lên mạng Internet cho mọi người cùng xem một cách dễ dàng với các công cụ và những ngôn

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH WEB NÂNG CAO

ĐÊ TÀI:

XÂY DỰNG WEBSITE SHOP BÁN ĐỒ ĐIỆN TỬ

Sinh viên thực hiện : Lương Ngọc Hải

: Nguyễn Tiến Đạt : Đoàn Phan Duy Giảng viên hướng dẫn : TS ĐĂNG̣ TRÂN ĐỨC

Hà Nội, ngày 12 tháng 10 năm 2021

Giảng viên chấm

Giảng viên chấm 1

Giảng viên chấm 2

MỤC LỤC

LỜI MỞ ĐẦU 2

CHƯƠNG 1 : TỔNG QUAN VÀ MÔ TẢ HỆ THỐNG 3

1.1 Tổng quan về PHP 3

1.1.1 Tổng quan về lập trình ứng dụng web 3

1.1.2 Giới thiệu về PHP 8

1.2 Mô tả hệ thống 10

1.2.1 Mô tả bài toán 10

1.2.2 Mục đích của bài toán 10

1.2.3 Cơ cấu tổ chức 11

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

2.1 Phân tích thiết kế hệ thống 12

2.1.1 Các chức năng của hệ thống 12

2.1.2 Các tác nhân của hệ thống 12

2.2 Các biểu đồ mô tả hệ thống 14

2.2.1 Activity Diagram 14

2.2.2 UseCase Diagram 20

1.2.3 Database Diagram 28

CHƯƠNG 3 : CÀI ĐẶT HỆ THỐNG 29

3.1 Quản lý Admin 29

3.1.1 Trang chu 29

3.1.2 Trang Quan ly User 30

3.1.3 Trang Quản lý Đơn đặt hàng 30

3.1.4 Trang Quản lý Tin tức 31

3.2 Quản lý hệ thống 31

3.2.1 Trang Đăng nhâp ̣ 31

3.2.2 Trang chu 32

3.2.3 Trang liên hệ 34

KẾT LUẬN 35

DANH MUC HINH ẢNH

Hình 2 1– Biểu đồ Activity Login 14

Hình 2 2-Biểu đồ Activity Đăng Xuất 15

Hình 2 3-Biểu đồ Activity Quản lý sản phẩm (thêm) 16

Hình 2 4– Biểu đồ Activity Quản lý sản phẩm (xóa) 17

Hình 2 5– Biểu đồ Activity Nhập hàng 18

Hình 2 6– Biểu đồ Activity Order 19

Hình 2 7-Biểu dồ tổng quát 21

Hình 2 8-Biểu đồ use case login 21

Hình 2 9-Biểu đồ use case quản lý sản phẩm 22

Hình 2 10-Biểu đồ cộng tác chức năng cập nhật 22

Hình 2 11-Biểu đồ tuần tự chức năng thêm sản phẩm mới 23

Hình 2 12-Biểu đồ tuần tự chức năng sửa thông tin sản phẩm 24

Hình 2 13-Biểu đồ tuần tự chức năng xóa sản phẩm 25

Hình 2 14-Use case tìm kiếm 25

Hình 2 15-Biểu đồ cộng tác chức năng tìm kiếm 26

Hình 2 16-Biểu đồ tuần tự chức năng tìm kiếm 26

Hình 2 17-Biểu đồ tuần tự chức năng đăng nhập 27

Hình 2 18- Database Diagram 28Y Hình 3 1 – Giao diêṇ Trang chu 29

Hình 3 2– Giao diêṇ Trang Quan ly User 30

Hình 3 3– Giao diêṇ Trang Quan ly Đơn đặt hàng 30

Hình 3 4– Giao diêṇ Trang Quan ly Tin tưc 31

Hình 3 5– Giao diêṇ Trang Đăng nhâp ̣ 31

Hình 3 6– Giao diêṇ Trang chu 33

Hình 3 7– Giao diêṇ Trang liên hê ̣ 34

LỜI CÁM ƠN

Trong thời đại ngày nay, thời đại mà “người người làm Web, nhà nhà làm Web” thì việc có một Website để quảng bá công ty hay một Website cá nhân không còn là điều gì xa xỉ nữa Thông qua Website khách hàng có thể lựa chọn những sản phẩm mà mình cần một cách nhanh chóng và hiệu quả.

Với công nghệ Word Wide Web, hay còn gọi là Web sẽ giúp bạn đưa những thông tin mong muốn của mình lên mạng Internet cho mọi người cùng xem một cách dễ dàng với các công cụ và những ngôn ngữ lập trình khác nhau Sự ra đời của các ngôn ngữ lập trình cho phép chúng ta xây dựng các trang Web đáp ứng được các yêu cầu của người sử dụng PHP là kịch bản trên phía trình chủ (Server Script) cho phép chúng ta xây dựng trang Web trên cơ sở dữ liệu Với nhiều ưu điểm nổi bật mà PHP và MySql được rất nhiều người sử dụng.

Với lí do đó, được sự hướng dẫn và giúp đỡ của thầy Đăng ̣ Trân Đưc, nhóm

em đã chọn đề tài “Xây dựng Website Shop bán Điện Thoại ” làm đề tài cho

môn học Đồ án Lập trình Web nâng cao của mình.

Trong quá trình thực hiện đồ án này nhóm em đã nhận được sự giúp đỡ chỉ bảo tận tình của các thầy, cô giáo Nhóm em xin chân thành cảm ơn thầy Đăng ̣ Trân Đưc đã hưỡng dẫn trong quá trình làm đề tài.

Tuy nhiên, do thời gian hạn hẹp, mặc dù đã nỗ lực hết sức mình nhưng chắc rằng đồ án khó tránh khỏi thiếu sót Nhóm em rất mong nhận được sự thông cảm, những lời góp ý và chỉ bảo tận tình của quý Thầy Cô và các bạn.

LỜI MỞ ĐẦU

Trong sự phát triển mạnh mẽ của khoa học công nghệ thế giới, có thể nói rằng ngành công nghệ thông tin phát triển với tốc độ nhanh nhất và ngày càng thể hiện được vai trò to lớn, hết sức quan trọng đối với toàn bộ đời sống con người Hầu hết các lĩnh vực trong xã hội đều ứng dụng công nghệ thông tin, nhiều phần mềm đãmang lại hiệu quả không thể phụ nhận Song thực tiễn luôn đặt ra những yêu cầu mới đòi hỏi ngành công nghệ thông tin không ngừng phát triển để thỏa mãn và đáp ứng những thay đổi của cuộc sống.

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ,

tổ chức, cũng như của các công ty; nó đóng vai trò hết sức quan trọng, có thể tạo ra những bước đột phá mạnh mẽ Việc xây dựng các trang web để phục vụ cho các nhu cầu riêng của các tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy

gì làm xa lạ Một người bất kì có thể trở thành chủ của một website giới thiệu về bất cứ gì anh ta quan tâm: một website giới thiệu về bản thân và gia đình anh ta, hay là một website trình bày các bộ sưu tập hình ảnh các loại xe hơi mà anh ta thích chẳng hạn.

Đối với các chính phủ và các công ty thì việc xây dựng các website riêng càng ngày càng trở nên cấp thiết Thông qua những website này, thông tin về họ cũng như các công văn, thông báo, quyết định của chính phủ hay các sản phẩm, dịch vụ mới của công ty sẽ đến với những người quan tâm, đến với khách hàng của

họ một cách nhanh chóng kịp thời, tránh những phiền hà mà phương thức giao tiếp truyền thống thường gặp phải Hoạt động của một công ty du lịch có quy mô khá lớn sẽ càng được tăng cường và mở rộng nếu xây dựng được một website có khả năng giới thiệu được công ty và cho phép quản lý các tour du lịch một cách nhanh chóng và chính xác nhất.

CHƯƠNG 1 : TỔNG QUAN VÀ̀ MÔ TẢ̉ HỆ THỐNG

1.1. Tổng quan về PHP

1.1.1 Tổng quan về lập trình ứng dụng web

Ứng dụng Web là một hệ thống phức tạp, dựa trên nhiều yếu tố: phần cứng, phần mềm, giao thức, ngôn ngữ và thành phần giao diện Trong phần này, chúng tôi sẽ giới thiệu sơ lược cho bạn về các thành phần cơ bản của ứng dụng Web: HTTP (giao thức trao đổi tài nguyên) và HTML (ngôn ngữ xây dựng trang web).

Quá trình Request – Response

Hình 1 – Qua trình Request - Response

Web Server – Web Browser – HTTP

- Web Server nhận và điều phối các yêu cầu từ Web Browser và gửi kết quả

- Web Browser thể hiện dữ liệu, tập hợp dữ liệu của người dùng và gửi đến Web Server

- HTTP dùng để trao đổi thông tin giữa Web Browser với Web Server

Hình 1.1 – Web Browser và Web Server

HTTP và HTML - Nền móng của Kỹ thuật lập trình

web HTTP (Hypertext Transfer Protocol)

Kỹ thuật cơ bản của lập trình ứng dụng web khởi đầu là HyperText Transfer Protocol (HTTP), đó là một giao thức cho phép các máy tính trao đổi thông tin với nhau qua mạng máy tính.

HTTP được xác định qua URLs (Uniform Resource Locators), với cấu trúc chuỗi có định dạng như sau:

http: // <host> [: <port>] [ <path> [? <query>]]

Sau tiền tố http://, chuỗi URL sẽ chứa tên host hay địa chỉ IP của máy server (có thể có số cổng đi kèm), tiếp theo là đường dẫn dẫn đến tập tin server được yêu cầu Tùy chọn sau cùng là tham số, còn được gọi là query string (chuỗi tham số/chuỗi truy vấn).

VD: Phân tích địa chỉ http://www.comersus.com/comersus6/store/index.aspx Trang web index.asp được lưu trữ trong thư mục /comersus6/store tại Web Server với host là www.comersus.com

Một số thuật ngữ:

- Internet: là một hệ thống gồm nhiều máy tính ở khắp nơi trên thế giới nối lại với nhau.

- WWW: World Wide Web (mạng toàn cầu), thường được dùng khi nói về Internet

- Web Server: Máy tính lưu trữ các trang web

- Web Client: Máy tính dùng để truy cập các trang web

- Web Browser: Phần mềm dùng để truy cập web

Một số web browser phổ biến: Internet Explorer, Netscape Navigator, Avant Browser, Opera,

HTML (Hypertext Markup Language)

Trang Web là sự kết hợp giữa văn bản và các thẻ HTML HTML là chữ viết tắt củaHyperText Markup Language được hội đồng World Wide Web Consortium (W3C) quyđịnh Một tập tin HTML chẳng qua là một tập tin bình thường, có đuôi html hoặc htm

HTML giúp định dạng văn bản trong trang Web nhờ các thẻ Hơn nữa, các thẻhtml có thể liên kết từ hoặc một cụm từ với các tài liệu khác trên Internet Đa số các thẻHTML có dạng thẻ đóng mở Thẻ đóng dùng chung từ lệnh giống như thẻ mở, nhưngthêm dấu xiên phải (/) Ngôn ngữ HTML qui định cú pháp không phân biệt chữ hoa chữ

thường Ví dụ, có thể khai báo <html> hoặc <HTML> Không có khoảng trắng trong

</html>

Các thẻ HTML cơ bản

1 Thẻ <head> </head>: Tạo đầu mục trang

2 Thẻ <title> </title>: Tạo tiêu đề trang trên thanh tiêu đề, đây là thẻ bắt buộc.

Thẻ title cho phép bạn trình bày chuỗi trên thanh tựa đề của trang Web mỗi khi trang

Web đó được duyệt trên trình duyệt Web

3 Thẻ <body> </body>: Tất cả các thông tin khai báo trong thẻ <body> đều có

thể xuất hiện trên trang Web Những thông tin này có thể nhìn thấy trên trang Web

4 Các thẻ định dạng khác Thẻ <p>…</p>:Tạo một đoạn mới Thẻ <font>

</font>: Thay đổi phông chữ, kích cỡ và màu kí tự…

5 Thẻ định dạng bảng <table>…</table>: Đây là thẻ định dạng bảng trên trang

Web Sau khi khai báo thẻ này, bạn phải khai báo các thẻ hàng <tr> và thẻ cột <td> cùng

với các thuộc tính của nó

6 Thẻ hình ảnh <img>: Cho phép bạn chèn hình ảnh vào trang Web Thẻ này

thuộc loại thẻ không có thẻ đóng

7 Thẻ liên kết <a> </a>: Là loại thẻ dùng để liên kết giữa các trang Web hoặc

liên kết đến địa chỉ Internet, Mail hay Intranet(URL) và địa chỉ trong tập tin trong mạngcục bộ (UNC)

8 Các thẻ Input: Thẻ Input cho phép người dùng nhập dữ liệu hay chỉ thị thực thi

một hành động nào đó, thẻ Input bao gồm các loại thẻ như: text, password, submit,button, reset, checkbox, radio, image

9 Thẻ Textarea: < Textarea> < \Textarea>: Thẻ Textarea cho phép người

dùng nhập liệu với rất nhiều dòng Với thẻ này bạn không thể giới hạn chiều dài lớn nhấttrên trang Web

10 Thẻ Select: Thẻ Select cho phép người dùng chọn phần tử trong tập phương

thức đã được định nghĩa trước Nếu thẻ Select cho phép người dùng chọn một phần tửtrong danh sách phần tử thì thẻ Select sẽ giống như combobox Nếu thẻ Select cho phép

người dùng chọn nhiều phần tử cùng một lần trong danh sách phần tử, thẻ Select đó là dạng listbox.

11 Thẻ Form: Khi bạn muốn submit dữ liệu người dùng nhập từ trang Web phía

Client lên phía Server, bạn có hai cách để làm điều nàu ứng với hai phương thức POST

và GET trong thẻ form Trong một trang Web có thể có nhiều thẻ Form khác nhau, nhưngcác thẻ Form này không được lồng nhau, mỗi thẻ form sẽ được khai báo hành động(action) chỉ đến một trang khác

Nội dung + Định dạng = Kết quả hiển thị

1.1.2 Giới thiệu về PHP

PHP là chữ viết tắt của “Personal Home Page” do Rasmus Lerdorf tạo ra năm

1994 Vì tính hữu dụng của nó và khả năng phát triển, PHP bắt đầu được sử dụng trongmôi trường chuyên nghiệp và nó trở thành “PHP: Hypertext Preprocessor”

Thực chất PHP là ngôn ngữ kịch bản nhúng trong HTML, nói một cách đơn giản

đó là một trang HTML có nhúng mã PHP, PHP có thể được đặt rải rác trong HTML

PHP là một ngôn ngữ lập trình được kết nối chặt chẽ với máy chủ, là một côngnghệ phía máy chủ (Server-Side) và không phụ thuộc vào môi trường (cross-platform).Đây là hai yếu tố rất quan trọng, thứ nhất khi nói công nghệ phía máy chủ tức là nói đếnmọi thứ trong PHP đều xảy ra trên máy chủ, thứ hai, chính vì tính chất không phụ thuộcmôi trường cho phép PHP chạy trên hầu hết trên các hệ điều hành như Windows, Unix vànhiều biến thể của nó Đặc biệt các mã kịch bản PHP viết trên máy chủ này sẽ làm việcbình thường trên máy chủ khác mà không cần phải chỉnh sửa hoặc chỉnh sửa rất ít

Khi một trang Web muốn được dùng ngôn ngữ PHP thì phải đáp ứng được tất cảcác quá trình xử lý thông tin trong trang Web đó, sau đó đưa ra kết quả ngôn ngữ HTML

Khác với ngôn ngữ lập trình, PHP được thiết kế để chỉ thực hiện điều gì đó sau khimột sự kiện xảy ra (ví dụ, khi người dùng gửi một biểu mẫu hoặc chuyển tới một URL)

Vậy tại sao nên dùng PHP ?

Để thiết kế Web động có rất nhiều ngôn ngữ lập trình khác nhau để lựa chọn, mặc

dù cấu hình và tính năng khác nhau nhưng chúng vẵn đưa ra những kết quả giống nhau.Chúng ta có thể lựa chọn cho mình một ngôn ngữ: ASP, PHP, Java, Perl và một số loạikhác nữa Vậy tại sao chúng ta lại nên chọn PHP Rất đơn giản, có những lí do sau màkhi lập trình Web chúng ta không nên bỏ qua sự lựa chọn tuyệt vời này

PHP được sử dụng làm Web động vì nó nhanh, dễ dàng, tốt hơn so với các giảipháp khác

PHP có khả năng thực hiện và tích hợp chặt chẽ với hầu hết các cơ sở dữ liệu cósẵn, tính linh động, bền vững và khả năng phát triển không giới hạn.

Đặc biệt PHP là mã nguồn mở do đó tất cả các đặc tính trên đều miễn phí, vàchính vì mã nguồn mở sẵn có nên cộng đồng các nhà phát triển Web luôn có ý thức cảitiến nó, nâng cao để khắc phục các lỗi trong các chương trình này

PHP vừa dễ với người mới sử dụng vừa có thể đáp ứng mọi yêu cầu của các lậptrình viên chuyên nghiệp, mọi ý tuởng của các bạn PHP có thể đáp ứng một cách xuấtsắc

Cách đây không lâu ASP vốn được xem là ngôn ngữ kịch bản phổ biến nhất, vậy

mà bây giờ PHP đã bắt kịp ASP, bằng chứng là nó đã có mặt trên 12 triệu Website.

Hoạt động của PHP

Vì PHP là ngôn ngữ của máy chủ nên mã lệnh của PHP sẽ tập trung trên máy chủ

để phục vụ các trang Web theo yêu cầu của người dùng thông qua trình duyệt

Gọi mã kịch bản

Khi người dùng truy cập Website viết bằng PHP, máy chủ đọc mã lệnh PHP và xử

lí chúng theo các hướng dẫn được mã hóa Mã lệnh PHP yêu cầu máy chủ gửi một dữliệu thích hợp (mã lệnh HTML) đến trình duyệt Web Trình duyệt xem nó như là mộttrang HTML têu chuẩn Như ta đã nói, PHP cũng chính là một trang HTML nhưng cónhúng mã PHP và có phần mở rộng là HTML Phần mở của PHP được đặt trong thẻ mở

<?php và thẻ đóng ?> Khi trình duyệt truy cập vào một trang PHP, Server sẽ đọc nộidung file PHP lên và lọc ra các đoạn mã PHP và thực thi các đoạn mã đó, lấy kết quả

nhận được của đoạn mã PHP thay thế vào chỗ ban đầu của chúng trong file PHP, cuối cùng Server trả về kết quả cuối cùng là một trang nội dung HTML về cho trình duyệt.

1.2 Mô tả hệ thống

1.2.1 Mô tả bài toán

Việc kinh doanh-mua bán là nhu cầu không thể thiếu đối với mỗi chúng ta Trong thời đại cạnh tranh ngày nay và bên cạnh đó là dịch bệnh SARS-CoV-2 đang có nhiều diễn biến phức tạp thì việc giới thiệu sản phẩm kinh doanh đến từng khách hàng với chi phí thấp nhất, hiệu quả cao là một vấn đề nan giải của người kinh doanh cùng với nhu cầu mua sắm với những sản phẩm đa dạng chủng loại, đạt chất lượng và hợp túi tiền của người tiêu dùng.

Mặt khác mặt hàng giày dép ngày một đa dạng và nhiều mẫu mã, vì thế, khi kinh doanh mặt hàng này, thiết kế website bán hàng giày dép sẽ giúp người bán hàng dễ dàng tiếp cận khách hàng hơn Việc sở hữu website, cũng khiến người bàn hàng đỡ vất vả trong quá trình quản lý đơn hàng, đưa mẫu mã đến khách hàng của mình một cách tốt nhất.Nắm bắt được tình hình trên nhóm chúng em đã tiến hành thiết kế trang web mua bán hàng online giày dép cao cấp để mong sao giúp cho cửa hàng phát triển nhanh chóng, giúp cho chủ cửa hàng có thể quản lý cửa hàng một cách tốt hơn.

1.2.2 Mục đích của bài toán

Giảm chi phí bán hàng tiếp thị và giao dịch Bằng phương tiện Internet/Web, một nhân viên bán hàng có thể giao dịch được với rất nhiều khách hàng Internet/ Web giúp người tiêu dùng và các cửa hàng kinh doanh giảm đáng kể thời gian và chi phí giao dịch Thời gian giao dịch qua Internet chỉ băng 7% thời gian goai dịch qua Fax và bằng khoảng 0.5 phần nghìn thời gian giao dịch qua bưu điện chuyển phát nhanh, chi phí thanh toán điện tử qua Internet chỉ bằng 10%-20% chi

phí thanh toán thông thường Những trở ngại của việc tiếp cận phương tiện Internet/Web trong hầu hết các trường hợp sẽ mang lại nhiều thuận lợi và lợi ích trong kinh doanh Thế nhưng, tại sao nhiều cửa hàng vẫn không tận dụng các tiến

bộ của Internet Đó chính là một số rào cản hay nói cách khác đó chính là những khó khăn khi các cửa hàng tiếp cận đến loại hình bán trực tuyến này.

- Quản lý thông tin sản phẩm (thêm, sửa, xóa, thông tin khuyến mãi).

- Quản lý thông tin nguồn gốc hàng hóa.

- Quản lý thành viên.

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

- Giao diện thân thiện dễ sử dụng

- Phải nêu bật được thế mạnh của website, cũng như tạo được niềm tin cho khách hàng ngay từ lần viếng thăm đầu tiên

- Giới thiệu được sản phẩm của cửa hàng đang có

- Chức năng đặt hàng, mua hàng

- Chức năng tìm kiếm sản phẩm

- Mỗi loại sản phẩm cần phải có trang xem chi tiết sản phẩm

- Mục login của khách hàng khi đã trở thành thành viên gồm có: Tên đăng

nhập (Username), mật khẩu đăng nhập (password).

2.1.2 Các tác nhân của hệ thống

Các tác nhân của hệ thống gồm có:

12

 Administrator: là thành viên quản trị của hệ thống, có các quyền và chức năng

như: tạo các tài khoản, quản lý sản phẩm, quản trị người dùng, quản lý hoá đơn…

 Member: là hệ thống thành viên có chức năng: Đăng kí, đăng nhập, tìm kiếm,xem, sửa thông tin cá nhân, xem giỏ hàng, đặt hàng, xem thông tin về các hóa đơn đã lập

 Customer: Là khách vãng lai có chức năng: Đăng kí, tìm kiếm, xem thông tin sản phẩm, xem giỏ hàng, đặt hàng

13

Hiển thị thông báo

yêu cầu nhập lại username,

thông tin hoặc tài password

khoản chưa kích

hoạt

Thông tin đăng nhập

No phù hợp với CSDL ?

Yes

Hiển thị thông báo đăng nhập thành công và lưu thông tin đăng nhập vào session

End

Hình 2 1– Biểu đồ Activity Login

14

Biểu đồ Activity Đăng Xuất