Tìm hiểu và thiết kế website bán hàng

VIỆN ĐẠI HỌC MỞ HÀ NỘI CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM 1/ Tổng quan về xây dựng website 2/ Tìm hiểu ngôn ngữ nền tảng và các công cụ lập trình, thiết kế website 3/ Cơ sở dữ liệu SQL v

Trang 1

VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ ĐIỆN TỬ - THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Đề tài: “Tìm hiểu và thiết kế website

bán hàng ”

Giảng viên hướng dẫn : ThS QUÁCH THỊ HẠNH

Sinh viên thực hiện : TRIỆU QUYẾT TIẾN

Lớp : K16B Khoá : 16(2013-2017)

Hệ : ĐẠI HỌC CHÍNH QUY

Hà Nội, tháng 05 /2017

Trang 2

VIỆN ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ ĐIỆN TỬ - THÔNG TIN

ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Đề tài: “Tìm hiểu và thiết kế website

Giảng viên hướng dẫn : ThS QUÁCH THỊ HẠNH

Sinh viên thực hiện : TRIỆU QUYẾT TIẾN

Lớp : K16B Khoá : 16(2013-2017)

Hệ : ĐẠI HỌC CHÍNH QUY

Hà Nội, tháng 05 /2017

Trang 3

VIỆN ĐẠI HỌC MỞ HÀ NỘI CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

1/ Tổng quan về xây dựng website

2/ Tìm hiểu ngôn ngữ nền tảng và các công cụ lập trình, thiết kế website

3/ Cơ sở dữ liệu SQL và hệ cơ sở quản trị dữ liệu MySQL

4/ Thiết kế website

5/ Kết luận

3/ Cơ sở dữ liệu ban đầu

(Ký, ghi rõ họ tên) (Ký, ghi rõ họ tên)

Trang 4

MỞ ĐẦU

Công nghệ thông tin đóng vai trò quan trọng trong sự phát triển của xã hội trong thời đại ngày nay Công nghệ thông tin đã trở thành nhân tố quan trọng, là cầu nối trao đổi giữa các thành phần của xã hội toàn cầu, của mọi vấn đề, đặc biệt các ứng dụng của công nghệ thông tin có vai trò rất lớn trong các hoạt động kinh tế, sản xuất kinh doanh, bán hàng, xúc tiến thương mại, quản trị doanh nghiệp

Ngày nay, con người có nhiều điều kiện tiếp cận với công nghệ thông tin Hầu như ngành nghề, lĩnh vực hay hoạt động nào trong xã hội hiện đại cũng cần tới sự góp mặt của Công nghệ thông tin Bởi sự đa dạng ấy, đối tượng phục vụ của Công nghệ thông tin ngày càng phong phú, từ một cá nhân muốn có chiếc máy vi tính, một công

ty muốn xây dựng Website giới thiệu sản phẩm cho tới một quốc gia muốn xây dựng chính phủ điện tử hay cả thị trường rộng lớn trên toàn thế giới

Bằng internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn

và chi phí thấp hơn nhiều so với cách thức truyền thống Chính điều này, đã thúc đẩy

sự khai sinh và phát triển của thương mại điện tử và chính phủ điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa, nâng cao chất lượng cuộc sống con người

Trong hoạt động sản xuất, kinh doanh, giờ đây thương mại điện tử đã khẳng định được vai trò 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 hay shop, việc quả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ầu củ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ột Website 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

Trang 5

LỜI CẢM ƠN

Trong quá trình tìm hiểu và thực hiện đề tài, dù gặp nhiều khó khăn và bỡ ngỡ nhưng nhờ sự hướng dẫn và giúp đỡ của thầy cô em đã hoàn thành đề tài một cách tốt nhất Em xin gửi lời cảm ơn chân thành đến cô ThS Quách Thị Hạnh đã hướng dẫn

em một cách rất tận tình, tâm huyết trong quá trinh thực hiện Nhờ có những chỉ dẫn

và kiến thức của cô em đã hiểu thêm nhiều điều và dễ dàng hơn trong quá trình thực hiện đề tài của mình

Trang 6

MỤC LỤC

DANH MỤC CÁC BẢNG, SƠ ĐỒ, HÌNH 9

KÍ HIỆU CÁC CỤM TỪ VIẾT TẮT 10

PHầN I: TỔNG QUAN VỀ XÂY DỰNG WEBSITE 1

I KHÁI NIỆM WEBSITE 1

II PHÂN LOẠI WEBSITE 1

1 P HÂN LOạI THEO Dữ LIệU 1

1.1 Web tĩnh 1

1.2 Web động 3

2 P HÂN LOạI THEO ĐốI TƯợNG Sở HữU 5

3 P HÂN LOạI THEO Sự TƯƠNG TÁC VớI NGƯờI DÙNG 6

III CẤU TRÚC WEBSITE 6

1 T RANG GIAO DIệN NGƯờI DÙNG ( F RONT - END ) 6

2 T RANG QUảN TRị WEBSITE ( B ACK - END ) 7

PHầN II: TÌM HIỂU NGÔN NGỮ NỀN TẢNG VÀ CÁC CÔNG CỤ LẬP TRÌNH, THIẾT KẾ WEBSITE 8

I NGÔN NGỮ NỀN TẢNG LẬP TRÌNH VÀ THIẾT KẾ 8

1 N GÔN NGữ HTML 8

1.1 Khái niệm 8

1.2 Chức năng 8

1.3 Cấu trúc trang html và Các thẻ html cơ bản 9

1.3.1 Cấu trúc trang html 9

1.3.2 Các thẻ html cơ bản 9

2 N GÔN NGữ CSS 11

3 N GÔN NGữ PHP 11

3.1 Khái niệm 11

3.2 Các đặc điểm nổi bật của PHP 12

3.3 Sử dụng PHP 14

3.3.1 ThẻPHP 14

3.3.2 Gọi hàm trong PHP 15

3.3.3 Truy cập biến Form 15

3.3.4 Khai báo biến 16

3.3.5 Gán giá trị cho biến 16

Trang 7

3.4 Kiểu dữ liệu của biến trong PHP 16

3.5 Toán tử trong PHP 17

3.6 Kiểm tra biến trong PHP 18

3.7 Phát biểu có điều khiển 19

3.8 Lưu trữ và truy vấn dữ liệu bằng PHP 21

II CÁC CÔNG CỤ LẬP TRÌNH VÀ THIẾT KẾ WEBSITE 23

PHầN III: CƠ SỞ DỮ LIỆU SQL VÀ HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MYSQL 25

I XÂY DỰNG CƠ SỞ DỮ LIỆU 25

1 K HÁI NIệM 25

2 C ÁC THUậT NGữ CƠ BảN 25

II HỆ QUẢN TRỊ DỮ LIỆU MYSQL 26

1 Khái niệm 26

2 Các kiểu DL trong hệ quản trị CSDL MySQL 29

2.1 Loại dữ liệuNumeric 29

2.2 Loại dữ liệu Date and Time 30

2.3 Trình bày đại diện của TimeStamp 30

2.4 Loại dữ liệu String 31

3 Làm việc với SQL trong MYSQL 31

4 Một số hàm thông dụng trong MySQL 33

PHầN IV: THIẾT KẾ WEBSITE 34

I P HÂN TÍCH YÊU CầU Đề TÀI 34

1 T ÓM TắT HOạT ĐộNG CủA Hệ THốNG : 34

2 P HạM VI ứNG DụNG : 35

3 ĐốI TƯợNG Sử DụNG : 35

II P HÂN TÍCH CÁC CHứC NĂNG CủA Hệ THốNG 35

1 C HứC NĂNG CủA KHÁCH 35

1.1 Chức năng xem thông tin sản phẩm: 35

1.2 Chức năng mua hàng: 35

1.3 Chức năng giỏ hàng: 36

1.4 Chức năng tìm kiếm sản phẩm: 36

2 C HứC NĂNG CủA A DMIN 36

2.1 Chức năng quản lý thông tin sản phẩm: 36

2.2 Chức năng quản lý người dùng: 37

III C ÁCH Tổ CHứC Dữ LIệU VÀ THIếT Kế CHƯƠNG TRÌNH CHO WEBSITE 37

Trang 8

1 BảNG CHITIETSP 37

2 BảNG DANGKY 38

3 BảNG LOAISP 38

4 BảNG HIEUSP 39

5 BảNG ADMIN 39

IV T HIếT Kế GIAO DIệN 40

1 G IAO DIệN TRANG CHủ 40

2 G IAO DIệN FORM ĐĂNG NHậP 41

3 G IAO DIệN TRANG GIỏ HÀNG 42

4 G IAO DIệN FORM ĐĂNG KÝ THÀNH VIÊN 43

5 G IAO DIệN TRANG CHI TIếT SảN PHẩM 44

6 G IAO DIệN TRANG LIÊN Hệ 45

7 G IAO DIệN TRANG LOGIN 45

8 G IAO DIệN TRANG QUảN LÝ CHI TIếT SảN PHẩM 46

9 G IAO DIệN TRANG QUảN LÝ LOạI SảN PHẩM 46

10 G IAO DIệN TRANG QUảN LÝ HIệU SảN PHẩM 47

11 G IAO DIệN TRANG QUảN TRị 48

PHầN V: KẾT LUẬN 49

I Ư U , NHƯợC ĐIểM CủA PHầN MềM 49

II P HƯƠNG HƯớNG PHÁT TRIểN 49

DANH MỤC TÀI LIỆU THAM KHẢO 51

Trang 9

DANH MỤC CÁC BẢNG, SƠ ĐỒ, HÌNH

Bảng 3.1 Dữ liệu Numeric ……… 28

Bảng 3.2 Dữ liệu Date Time ……… 29

Bảng 3.3Trình bày đại diện của Timestamp ……… 29

Bảng 3.4Dữ liệu String ……… 30

Bảng Chi tiết sản phẩm ……… 37

Bảng Đăng ký……… ……… 37

BảngLoại sản phẩm ……… ……… 38

Bảng Hiệu sản phẩm ……… ……… 38

Trang 10

KÍ HIỆU CÁC CỤM TỪ VIẾT TẮT PHP: Hypertext Processor Ngôn ngữ kịch bản máy chủ

SQL: Structured Query Language

HTML: HyperText Markup Language

Ngôn ngữ quản trị hệ CSDL Ngôn ngữ đánh dấu siêu văn bản

URL (Uniform Resource Locator) có nghĩa là định vị tài nguyên trên internet URL

mang lại khả năng siêu liên kết cho các trang mạng Các tài nguyên khác nhau được

tham chiếu tới bằng địa chỉ, chính là URL, còn được gọi là địa chỉ web hay là liên kết

mạng (hay ngắn gọn là liên kết)

HTTP (Hypertext Transfer Protocol) là một giao thức thể hiện cách thức truyền tải dữ

liệu trên mạng Internet, HTTP thường được dùng để gửi và nhận dữ liệu giữa máy chủ web và người dùng

Trang 11

GVHD: ThS QUÁCH THỊ HẠNHSVTH: TRIỆU QUYẾT TIẾN 1

Phần I: TỔNG QUAN VỀ XÂY DỰNG WEBSITE

Website (trang mạng) là một tập hợp trang web, thường chỉ nằm trong một tên miền (domain) hoặc tên miền phụ (subdomain) trên mạng lưới toàn cầu (World Wide Web) của Internet Một trang web là tập tin HTML hoặc XHTML có thể truy nhập dùng giao thức HTTP Trang mạng có thể được xây dựng từ các tệp tin HTML (trang mạng tĩnh) hoặc vận hành bằng các CMS chạy trên máy chủ (trang mạng động) Trang mạng có thể được xây dựng bằng nhiều ngôn ngữ lập trình khác nhau (PHP,.NET, Java, Ruby on Rails )

World Wide Web, gọi tắt là Web hoặc WWW, mạng lưới toàn cầu là một không gian thông tin toàn cầu mà mọi người có thể truy nhập (đọc và viết) qua các máy tính nối với mạng Internet Thuật ngữ này thường được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet Nhưng Web thực ra chỉ là một trong các dịch vụ chạy trên Internet, ngoài Web ra còn các dịch vụ khác như thư điện tử hoặc FTP World Wide Web đã được tạo ra vào năm 1990 của CERN bởi kỹ sư Tim Berners-Lee Ngày 30 tháng tư năm 1993, CERN thông báo rằng World Wide Web sẽ được miễn phí để sử dụng cho bất cứ ai

1 Phân loại theo dữ liệu

1.1. Web tĩnh

Là website không có Cơ Sở Dữ Liệu mà chỉ là các trang web do người thiết kế tạo thành bằng các phần mềm tạo trang website Website này thích hợp cho những nội dung trình bày phức tạp, đòi hỏi cao về đồ họa và ít thay đổi về nội dung vì việc cập nhật website này phải do những người có chuyên môn thực hiện và khá tốn công

Website tĩnhcó thể được trang bị các kỹ thuật như Java Script, Flash Macromedia hay Animation Gif, giúp cho giao diện của các trang web thêm sống động

và hấp dẫn

– Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML, DHTML,…

Trang 12

– Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít cần thay đổi và cập nhật

– Website tĩnh là website chỉ bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi kèm

– Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới làm quen với môi trường Internet

Trang web tĩnh và website tĩnh có các ưu và nhược điểm cơ bản dưới đây

* Ưu điểm:

Thiết kế đồ hoạ đẹp:Trang Web tĩnh thường được trình bày ấn tượng và cuốn hút hơn trang web động về phần mỹ thuật đồ hoạ vì chúng ta có thể hoàn toàn tự do trình bày các ý tưởng về đồ hoạ và mỹ thuật trên toàn diện tích từng trang web tĩnh

– Tốc độ truy cập nhanh: Tốc độ truy cập của người dùng vào các trang web tĩnh nhanh

hơn các trang web động vì không mất thời gian trong việc truy vấn cơ sở dữ liệu như các trang web động

– Thân thiện hơn với các máy tìm kiếm (search engine): Bởi vì địa chỉ URL của các

.html, htm,… trong trang web tĩnh không chứa dấu chấm hỏi (?) như trong web động

– Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp hơn nhiều so với website

động vì không phải xây dựng các cơ sở dữ liệu, lập trình phần mềm cho website và chi phí cho việc thuê chỗ cho cơ sở dữ liệu, chi phí yêu cầu hệ điều hành tương thích (nếu có)

* Nhược điểm:

– Khó khăn trong việc thay đổi và cập nhật thông tin:Muốn thay đổi và cập nhật nội dung thông tin của trang website tĩnh Bạn cần phải biết về ngôn ngữ html, sử dụng được các chương trình thiết kế đồ hoạ và thiết kế web cũng như các chương trình cập nhật file lên server

– Thông tin không có tính linh hoạt, không thân thiện với người dùng:Do nội dung trên trang web tĩnh được thiết kế cố định nên khi nhu cầu về thông tin của người truy cập tăng cao thì thông tin trên website tĩnh sẽ không đáp ứng được

Trang 13

– Khó tích hợp, nâng cấp, mở rộng:Khi muốn mở rộng, nâng cấp một website tĩnh hầu như là phải làm mới lại website

1.2 Web động

Là website có Cơ Sở Dữ Liệu do các công ty thiết kế chuyên nghiệp xây dựng và

sẽ bàn giao công cụ quản lý, cập nhật website cho khách hàng Việc cập nhật website rất đơn giản và tiện lợi Thông tin trên website thường xuyên được cập nhật và không giới hạn lượng thông tin

Website động là thuật ngữ được dùng để chỉ những website có cơ sở dữ liệu và được hỗ trợ bởi các phần mềm phát triển web

- Với web động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi người dùng truy vấn tới một trang web Trang web được gửi tới trình duyệt gồm những câu chữ, hình ảnh, âm thanh hay những dữ liệu số hoặc ở dạng bảng hoặc ở nhiều hình thức khác nữa

Chẳng hạn ứng dụng cơ sở có chức năng như một công cụ thương mại điện tử (một cửa hàng trực tuyến) trưng bày catalogue sản phẩm trên website hay theo dõi kho hàng, khi một mặt hàng được giao, ngay lập tức những trang có liên quan đến sản phẩm

đó phản ánh sự thay đổi này Những website cơ sở dữ liệu còn có thể thực hiện những chức năng truyền và xử lý thông tin giữa doanh nghiệp – doanh nghiệp

- Web động thường được phát triển bằng các ngôn ngữ lập trình tiên tiến như PHP, ASP, ASP.NET, Java, CGI, Perl, và sử dụng các cơ sở dữ liệu quan hệ mạnh như Access, My SQL, MS SQL, Oracle, DB2

- Thông tin trên web động luôn luôn mới vì nó dễ dàng được cập nhật thường xuyên thông qua việc người quản trị sử dụng các công cụ cập nhật của các phần mềm quản trị web Thông tin luôn được cập nhật trong một cơ sở dữ liệu và người dùng Internet có thể xem những chỉnh sửa đó ngay lập tức Vì vậy website được hỗ trợ bởi cơ

sở dữ liệu là phương tiện trao đổi thông tin nhanh nhất với người dùng Internet Điều dễ nhận thấy là những website thường xuyên được cập nhật sẽ thu hút nhiều khách hàng tới thăm hơn những web site ít có sự thay đổi về thông tin

Trang 14

- Web động có tính tương tác với người sử dụng cao Với web động, người quản trị hoàn toàn có thể dễ dàng quản trị nội dung và điều hành website của mình thông qua các phần mềm hỗ trợ mà không nhất thiết Người quản trị cần phải có kiến thức nhất định về ngôn ngữ html, lập trình web

Trên một theo khía cạnh khác: chẳng hạn người quản trị đã có sẵn những cơ sở

dữ liệu như cơ sở dữ liệu sản phẩm, nhân sự, khách hàng hay bất kỳ cơ sở dữ liệu nào

đó mà họ muốn đưa thêm giao diện web vào để người dùng nội bộ hay người dùng Internet đều có thể sử dụng chương trình chỉ với trình duyệt web của mình

- Tất cả các website thương mại điện tử, các mạng thương mại, các mạng thông tin lớn, các website của các tổ chức, doanh nghiệp hoạt động chuyên nghiệp trên Net đều

sử dụng công nghệ web động Có thể nói web động là website của giới chuyên nghiệp hoạt động trên môi trường Internet

- Website tĩnh được thiết kế bằng kỹ thuật HTML (Hypertext Mark-up Language) Chỉ đáp ứng được việc giới thiệu thông tin cho người dùng xem, cao nhất là sử dụng một Form trực tuyến (Online Form) để thu nhận ý kiến của người xem và gửi về e-mail định danh trước

Ở đây động là có thể giúp người xem tương tác với website Website động cần phải có cơ sở dữ liệu và tùy theo mục đích của website, nó có thể có các thành phần như:

- Inner search:Phần tìm kiếm giúp người xem nhanh chóng tìm đến một trang web trong website có chứa vấn đề mà họ quan tâm

- Member account:tài khoản dành cho Hội Viên Với một Username và Password, Hội Viên có thể truy cập (log-in) vào một khu vực hạn chế (Member Area) có nhiều quyền lợi hơn hẳn so với khu vực công cộng (Public Area) Việc cung cấp tài khoản này giúp cho người chủ website có thể kinh doanh website bằng cách thu phí Hội Viên (Member Fee) hoặc phân cấp quản lý nội bộ từ xa

- Shopping Cart:Thành phần giúp cho việc mua bán trên mạng (online trading) được thực hiện thông qua giả định việc chọn và bỏ món hàng đã chọn vào giỏ mua

Trang 15

hàng Các thông số liên quan đến món hàng sẽ được cập nhật vào tài khoản của người Mua, giúp cho việc xác định công nợ và thanh toán Tham khảo www.vnplas.com

- Online Payment:Thành phần giúp cho việc buôn bán trên mạng được khả thi: Tiền được trao cho Bên Bán và hàng sẽ được chuyển cho Bên Mua Tham khảo www.vnplas.com

- Forum:Diễn đàn trực tuyến: Một khu vực hạn chế giúp cho các đối tượng dùng site liên hệ trực tiếp với nhau trong thời gian thực (Real Time) Khác với liên lạc bằng e-mail có một khoảng thời gian chậm trễ (Delay) do người gửi mail và người nhận mail không trực tuyến cùng thời điểm

2 Phân loại theo đối tượng sở hữu

- Web cá nhân: Các đối tượng như diễn viên, ca sĩ, ngừơi nổi tiếng, người thiết kế

đồ hoạ, hoặc bất kỳ cá nhân nào thích giới thiệu bản thân mình đều có thể tạo ra một website cho cá nhân mình

- Web doanh nghiệp: Doanh nghiệp thiết kế web với mục đích quảng bá công ty, giới thiệu các chức năng hoạt động, cập nhật những tin tức, sản phẩm mới của công ty nhằm dễ dàng tiếp cận đến khách hàng thông qua một kênh quảng bá mới là internet Tất cả các loại hình doanh nghiệp đều có nhu cầu quảng bá thương hiệu của mình vì vậy xây dựng một website cho công ty là điều tất yếu

- Web thương mại điện tử: là các dạng web cho phép bán hàng trực tuyến, việc thanh toán có nhiều hình thức như: tiền mặt, chuyển khoản, thanh toán bằng thẻ, hoặc thông qua cổng thanh toán của các dịch vụ hỗ trợ Dạng web này thường tập hợp rất nhiều loại hàng hoá và chủ sở hữu trực tiếp quản lý việc bán buôn đây giống như dạng siêu thị bán hàng trong quầy tự chọn Ngoài ra cũng có thể là loại web mà chủ sở hữu chỉ xây dựng hệ thống web và tạo những gian hàng riêng để cho thuê,…

- Web tin tức: Đây là một dạng website cung cấp thông tin chính trị, xã hội, kinh

tế, khoa học, giáo dục, sức khoẻ,…thể loại này được phát triển trên nền tảng từ các thể loại báo giấy truyền thống

- Web dành cho các tổ chức, cơ quan nhà nước: Các bộ, sở, ban, ngành, hiệp hội

tổ chức,…là đối tượng sở hữu website dạng này Đây cũng là tiếng nói là ngôi nhà để truyền tải thông tin đến người đọc

Trang 16

- Diễn đàn: Là dạng web tương tác với người dùng mà bất kỳ xem nào cũng có thể đăng ký tham gia là thành viên và được quyền tăng tải bài viết của mình và dĩ nhiên diễn đàn luôn có người kiểm soát thông tin người dùng đăng tải và có quyền can thiệp vào việc hiển thị thông tin đó hay không

- Mạng xã hội (blog): Là dạng web dành cho người sử dụng được quyền tạo cho mình một không gian riêng gồm nhiều trang độc lập, ở đây người dùng có thể đăng tải thông tin cá nhân, sở thích, viết nhật ký tại trang của mình, các thành viên trong cùng một mạng xã hội có thể kết bạn liên lạc trao đổi thông tin với nhau… Các mạng xã hội nổi tiếng như: Yahoo, Facebook, Workpress, opera …

- Web giải trí: đăng tải phim ảnh, nhạc, game

3 Phân loại theo sự tương tác với người dùng

- Web 1.0: là web thế hệ đầu tiên, website thường chỉ một chiều thông tin từ website đến người xem Người được ở vào thế bị động là tiếp nhận thông tin và không

có sự phản hồi trực tiếp lên website

- Web 2.0: là thế hệ web thứ 2 Dạng web này có tính tương tác cao, người xem có thể tham gia đang tải bài viết và tham gia xây dựng nội dung của website đó, dạng web này mang tính cộng đồng và tất cả các dữ liệu trên đây là dữ liệu mở được tất cả mọi người xem web cung cấp Chính vì thế dạng web này thân thiện với người đọc tạo cảm giác như người đọc cũng là người sở hữu website Nó cuốn hút mọi người cùng cung cấp thông tin, chia sẻ dữ liệu, tạo ra những nguồn dữ liệu khổng lồ trên internet Ngày nay dạng web này đang được phát triển mạnh nhất trong các thể loại web tương tác

- Web 3.0: Đây sẽ là web thế hệ thứ 3, giai đoạn hiện nay dạng web này trong thời

kỳ đang hình thành và vẫn còn nhiều khái niệm chưa thống nhất, Tuy nhiên nếu nói một cách đơn giản dể hiểu thì web 3.0 sẽ có bước đột phá về băng thông kèm theo là sự phát triển mạnh mẽ về phim ảnh và truyền hình trên internet

1 Trang giao diện người dùng ( Front-end)

Giao diện người dùng là định dạng trang web được trình bày trên màn hình của máy tính của người xem (máy khách) được xem bằng các phần mềm trình duyệt web như

Trang 17

Internet Explorer, Firefox,… Tuy nhiên ngày nay người xem có thể xem website từ các thiết bị điện tử khác như điện thoại di động, PDA,…

Việc trình bày một website phải đảm bảo các yếu tố về thẩm mỹ đẹp, ấn tượng; bố cục đơn giản, dễ hiểu và dễ sử dụng, các chức năng tiện lợi cho người xem Đặc biệt ngày nay, website trở nên sống động với những hiệu ứng đa dạng của hình ảnh và chữ kết hợp với âm thanh

2 Trang quản trị website ( Back-end)

Là phần lập trình của website lưu trữ trên máy chủ (Server) Sự khác nhau ở phần lập trình back-end của website làm phân ra 2 loại website: Website tĩnh và website động.

+ Website tĩnh do lập trình bằng ngôn ngữ HTML theo từng trang như brochure, không

có cơ sở dữ liệu và không có công cụ quản lý thông tin trên website.Bạn phải biết kỹ thuật thiết kế trang web (thông thường bằng các phần mềm như FrontPage, Dreamwaver,…) khi muốn thiết kế hoặc cập nhật thông tin của những trang web này + Website động (Dynamic website) là website có cơ sở dữ liệu, được cung cấp công cụ quản lý website (Admin Tool) để có thể cập nhật thông tin thường xuyên, quản lý các thành phần trên website Loại website này thường được viết bằng các ngôn ngữ lập trình như PHP, Asp.net, JSP, Perl,…, quản trị Cơ sở dữ liệu bằng SQL hoặc MySQL,…

Trang 18

Phần II: TÌM HIỂU NGÔN NGỮ NỀN TẢNG VÀ CÁC CÔNG

CỤ LẬP TRÌNH, THIẾT KẾ WEBSITE

1 Ngôn ngữ HTML

1.1 Khái niệm

HTML ( tiếng Anh, viết tắt cho HyperText Markup Language, hay là “ Ngôn ngữ

đánh dấu siêu văn bản”) là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web với các mẩu thông tin được trình bày trên World wide web Html được định nghĩa như là một ứng dụng đơn giản của sgml và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp

Html được Tim Berner Lee phát minh và sau đó đã trở thành một chuẩn internet do

tổ chức world wide web consortium (W3C) duy trì từ năm 1994 Phiên bản chính thức mới nhất của html là html 4.01 (1999) Sau đó, các nhà phát triển đã thay thế nó bằng xhtml Hiện nay, html đang được phát triển tiếp với phiên bản htl5 hứa hẹn mang lại diện mạo mới cho web Bằng cách dùng html động hoặc ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG phức tạp

Html không phải là ngôn ngữ lập trình, nó là ngôn ngữ trình bày

Các trình duyệt hỗ trợ: IE( Internet Explorer), Mozzila Firefox, Google Chrome, Safari, Opera,…

1.2 Chức năng

Chức năng của ngôn ngữ HTML:

- Điều khiển hình thức và nội dung của trang

- Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu HTML

Trang 19

- Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch

- Chèn các đối tượng ngư audio clip, video, clip, các thành phần ActiveX và các Java Applet vào tài liệu HTML

Tài liệu HTML tạo thành mã nguồn của trang Web Khi được xem trên trình soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang Webhiển thị như thế nào Trình duyệt đọc các file có đuôi htm hay html và hiển thị Web đó theo các lệnh trong đó

1.3 Cấu trúc trang html và Các thẻ html cơ bản

1.3.1 Cấu trúc trang html

- Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ dòng đầu tiên

- Cấu trúc của một trang web luôn bắt đầu bằng cặp thẻ <html></html>

- Cặp thẻ <head></head> là phần đầu của một trang web tiêu để của website, css

và javascript sẽ nằm trong cặp thẻ này

- Cặp thẻ <title></title> sẽ hiển thị tiêu đề của website trên trình duyệt

- Cặp thẻ <body></body> là phần thân của trang web, toàn bộ nội dung của trang web như hình ảnh, video, tin tức cái mà chúng ta nhìn thấy khi duyệt website trên trình duyệt sẽ được viết trong cặp thẻ body này

- Cặp thẻ headings <h3></h3> và <h4></h4> được đặt trong <body></body>

1.3.2 Các thẻ html cơ bản

- Thẻ là những câu lệnh được viết giữa dấu nhỏ hơn (<) và dấu lớn hơn (>) hay còn gọi là dấu móc nhọn, quy định cách hiển thị văn bản Có 2 loại thẻ: Thẻ mở và thẻ đóng, đoạn văn bản hiển thị nằm giữa hai thẻ này, cả thẻ mở và thẻ đóng đều được viết như nhau nhưng thẻ đóng có thêm một dấu / ( dấu xéo tới) phía trước

Ví dụ:

<html></html> : Thẻ xác định văn bản HTML

<head></head> : Thẻ xác định phần đầu của trang HTML

Trang 20

<title></title> : Thẻ xác định tiêu đề của văn bản HTML

<body></body> : Thẻ xác định phần thân của trang HTML

- Thuộc tính của thẻ tác động lên nội dung văn bản Thuộc tính được nhập vào giữa thẻ vàdấu lớn hơn cuối cùng Thường thì chúng ta dùng nhiều thuộc tính trong một thẻ Cácthuộc tính được viết không cần thứ tự và cách nhau một khoảng trống

Thuộc tính thường đi kèm với các giá trị Trong một số trường hợp, có thể lựa chọn giữa các giá trị

Các thẻ cơ bản trong html

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

- 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

- 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

- 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ự…

- 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ó

- 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

- 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ạng cục bộ (UNC)

- 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

Trang 21

- 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ất trên trang Web

- 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

- 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ưng cá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

2 Ngôn ngữ CSS

CSS ( Cascading Style Sheet) Website được cấu tạo từ các thẻ HTML nhưng với

những thẻ html thì mới chỉ thể hiện được bộ khung của website Để căn chỉnh, trình bày cho đẹp mắt thì ta cần sử dụng ngôn ngữ CSS Đây là ngôn ngữ được dùng rất nhiều trong lập trình website, thường đi cùng với ngôn ngữ HTML

Chúng ta có 3 cách chèn CSS vào trang HTML

- Chèn nội dung CSS vào cặp thẻ <style></style> trong phần <header></header> của trang web

- Chèn trực tiếp vào bên trong một thẻ html

- Liên kết với một file “.css” bên ngoài

Trong thực tế, cách thứ ba được các lập trình viên sử dụng nhiều do tính tiện dụng

Trang 22

máy chủ, mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với web và có thể dễ dàng 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 C và 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ên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình web phổ biến nhất thế giới

Vì sao sử dụng ngôn ngữ lập trình PHP

Mã PHP được thực thi ở phía Server để thông dịch các yêu cầu từ trên World Wide Web, sau đó nhận các trả lời từ Webserver chuyển tải đến trình duyệt web nhằmđáp ứng các nhu cầu đó Vì vậy khi trình duyệt của người dùng truy cập một trang web có chứa một đoạn mã PHP thì trình duyệt nhận được trang kết quả đã xử lý

từ Web server Mã PHP được bao trong cặp dấu <?php ?> hoặc <? ?> Tập tin PHP có phần mở rộng là php hoặc php3

3.2 Các đặc điểm nổi bật của PHP

Php là mã nguồn mở

Việc cài đặt và sử dụng PHP rất dễ dàng, miễn phí và tự do vì đây là một mã nguồn

mở (Open-source).Vì có tính ưu thế như vậy mà PHP đã được cài đặt phổ biến trên các WebServer thông dụng hiện nay như Apache, IIS…

Tính Cộng đồng của PHP

Là một ngôn ngữ mã nguồn mở cùng với sự phổ biến của PHP thì cộng đồng PHP được coi là khá lớn và có chất lượng Khả năng ứng dụng là rất cao Mọi người tập trung lựa chọn học php mà không phải là các ngành ngân hàng, tài chính như trước kia Bây giờ ngề lập trình viên chiếm ưu thế hơn bao giờ hết

– Với cộng đồng phát triển lớn, việc cập nhật các bản mới cũng như lỗi phiên bản hiện tại và thử nghiệm các phiên bản mới khiến PHP rất linh hoạt trong việc hoàn thiện mình

– Đã rất nhiều blog, diễn đàn trong và ngoài nước nói về PHP nên khả năng tiếp cận của mọi người nhanh chóng, dễ dàng hơn, quá trình tiếp cận của người tìm được rút ngắn nhanh chóng Vì vậy cộng đồng hỗ trợ, chia sẽ kinh nghiệm của PHP cũng rất dồi

Trang 23

dào

Thư viện phong phú

Ngoài sự hỗ trợ của cộng đồng, thư viện script PHP cũng rất phong phú, đa dạng Từ những cái rất nhỏ như chỉ là 1 đoạn code, 1 hàm (PHP.net…) cho tới những cái lớn hơn như Framework (Zend, CakePHP, CogeIgniter, Symfony…) hay ứng dụng hoàn chỉnh (Joomla, WordPress, PhpBB…)

– Với thư viện code phong phú, việc học tập và ứng dụng PHP trở nên rất dễ dàng và nhanh chóng Đây cũng chính là đặc điểm khiến PHP trở nên khá nổi bật và cũng là nguyên nhân vì sao ngày càng có nhiều người sử dụng PHP để phát triển web

– Nhu cầu xây dựng web có sử dụng cơ sở dữ liệu là một nhu cầu tất yếu và PHP cũng đáp ứng rất tốt nhu cầu này Với việc tích hợp sẵn nhiều Database Client trong PHP đã làm cho ứng dụng PHP dễ dàng kết nối tới các hệ cơ sở dữ liệu thông dụng

Việc cập nhật và nâng cấp các Database Client đơn giản chỉ là việc thay thế các Extension của PHP để phù hợp với hệ cơ sở dữ liệu mà PHP sẽ làm việc

– Một số hệ cơ sở dữ liệu thông dụng mà PHP có thể làm việc là: MySQL, MS SQL, Oracle, Cassandra…

Lập trình hướng đối tượng

Ngày nay, khái niệm lập trình hướng đối tượng (OOP) đã không còn xa lạ với lập trình viên Với khả năng và lợi ích của mô hình lập trình này nên nhiều ngôn ngữ đã triển khai để hỗ trợ OOP

– Từ phiên bản PHP 5, PHP đã có khả năng hỗ trợ hầu hết các đặc điểm nổi bật của lập trình hướng đối tượng như là Inheritance, Abstraction, Encapsulation, Polymorphism, Interface, Autoload…

– Với việc ngày càng có nhiều Framework và ứng dụng PHP viết bằng mô hình OOP nên lập trình viên tiếp cận và mở rộng các ứng dụng này trở nên dễ dàng và nhanh chóng

Tính Bảo mật

Trang 24

Đây là ưu diểm quan trọng nhât trong số những ưu điểm nổi bật của học lâp trình PHP – Bản thân PHP là mã nguồn mỡ và cộng đồng phát triển rất tích cực nên có thể nói PHP khá là an toàn

– PHP cũng cung cấp nhiều cơ chế cho phép bạn triển khai tính bảo mật cho ứng dụng của mình như session, các hàm filter dữ liệu, kỹ thuật ép kiểu, thư viện PDO (PHP Data Object) để tương tác với cơ sở dữ liệu an toàn hơn

– Kết hợp với các kỹ thuật bảo mật ở các tầng khác thì ứng dụng PHP sẽ trở nên chắc chắn hơn và đảm bảo hoạt động cho website

PHP cung cấp một hệ thống thư viện phong phú và ngày càng phát triển Do PHP ngay từ đầu được thiết kế nhằm mục đích xây dựng và phát triển các ứng dụng trên web nên PHP cung cấp rất nhiều hàm xây dựng sẵn giúp thực hiện các công việc rất dễ dàng;

PHP là một ngôn ngữ rất dễ dùng, dễ học và đơn giản hơn nhiều so với các ngôn ngữ khác như Perl, Java;

Đặc biệt, PHP là ngôn ngữ mã nguồn mở Có rất nhiều phần mềm website mã nguồn mở được viết trên nền tảng của PHP như Joomla, Drupal, Nukeviet

3.3 Sử dụng PHP

3.3.1 ThẻPHP

Có 4 loại khác nhau của thẻ PHP:

- Kiểu Short: là thẻ mặc định mà các nhà lập trình PHP thường sửdụng

<? echo “Đây là kiểu Short”; ?>

- Kiểu định dạng XML: thẻ này có thể sử dụng với văn bản dạngXML

Trang 25

<?php echo “Đây là kiểu định dạng với XML”; ?>

- Kiểu Script: trong trường hợp muốn sử dụng PHP như một script tương tự như khai báo Javascript hayVBScript

3.3.3 Truy cập biến Form

Thông thường khi cần lấy dữ liệu của người dùng nhập, chúng ta sẽ dùng thẻ form trong trang web nhằm ràng buộc tất cả các thẻ input, selec,textarea

Dữ liệu đến từ script đều là biến PHP, chúng ta có thể nhận biết chúng bằng cách

sử dụng dấu $ trước tên biến Có hai cách để truy cập dữ liệu trên form thông qua biến

- Để lấy giá trị của các thẻ trong form theo dạng POST:

$_POST[‘tên_thẻ’]

Trang 26

- Để lấy giá trị của các thẻ trong form theo dạng GET:$_GET[‘tên_thẻ’]

3.3.4 Khai báo biến

PHP Engine không cần yêu cầu khai báo biến trước khi sử dụng, tuy nhiên nên tập thói quen khai báo và khởi tạo giá trị ban đầu cho biến trước khi sử dụng chúng

3.3.5 Gán giá trị cho biến

Để gán giá trị cho biến, nếu biến đó chưa khai báo trước đó, biến này được coi như vừa khai báo và khởi tạo Trong trường hợp biến đã khai báo, biến này chỉ thay đổi giá trị

- Interger: Sử dụng hầu hết cho giá trị có kiểu dữ liệu làsố

- Double: Sử dụng hầu hết cho giá trị có kiểu dữ liệu là sốthực

- String: Sử dụng hầu hết cho giá trị có kiểu dữ liệu là chuỗi, kýtự

- Array: Sử dụng hầu hết cho giá trị có kiểu dữ liệu là mảng có các phần tử cùng kiểu dữliệu

- Object: Sử dụng hầu hết cho giá trị có kiểu dữ liệu là đối tượng củalớp

Trang 27

Phép toán Ký hiệu Sử dụng Ý nghĩa

&& AND $a &&

$b

Trả về true nếu cả hai biến có giá trị true

Ngược lại là false

|| OR $a || $b Trả về true nếu $a hay $b hay cả hai biến có

giá trị true

$b

Trả về true nếu cả hai biến có giá trị true

Ngược lại là false

Trang 28

or OR $a or $b Trả về true nếu $a hay $b hay cả hai biến có

3.6 Kiểm tra biến trongPHP

- is_array(): Kiểm tra biến là array haykhông

- is_double(): Kiểm tra biến là double haykhông

- is_float(): Kiểm tra biến là float haykhông

- is_real(): Kiểm tra biến là real haykhông

- is_long(): Kiểm tra biến là long haykhông

- is_int(): Kiểm tra biến là int haykhông

- is_interger(): Kiểm tra biến là integer haykhông

- is_string(): Kiểm tra biến là string haykhông

- is_object(): Kiểm tra biến là object haykhông

- isset(): Nếu biến tồn tại hàm trả về giá trị true, ngược lại trả vềfalse

- empty(): Cho phép kiểm tra biến tồn tại và không rỗng, có chiều dài khác 0 trả

về true, ngược lại làfalse

Trang 29

Để sử dụng tất cả các hàm trên, cần phải truyền vào hàm biến PHP dưới dạng tham

số

3.7 Phát biểu có điều khiển

• Phát biểu If: Phát biểu if với một điều kiện, nếu điều kiện là true thì khối lệnh trong phát biểu If sẽ được thực hiện, điều kiện được khai báo trong dấu()

VD: $a = 10;

$b=6; if($a>$b) echo $a+$b;

Khối lệnh trong bất kỳ phát biểu điều khiển nào cũng có thể sử dụng dấu {

và } Có nghĩa là nếu khối lệnh trong phát biểu lớn hơn 1 thì phải sử dụng hai dấutrên

• Phát biểu Else: phát biểu else luôn là trường hợp ngược lại của phát biểu if với một điều kiện, nếu điều kiện là true thì khối lệnh trong phát biểu if sẽ được thực hiện, ngược lại khối lệnh trong phát biểu else sẽ được thựchiện VD: $a = 10;

$b=6;

if($a>$b) echo $a+$b;

Trang 30

• Phát biểu While: phát biểu vòng lặp đơn giản nhất trong PHP là vòng lặp while cho phép bạn thực thi khối lệnh trong while cho đến khi điều kiện của while là true như cúpháp

While (điều kiện) {

Định dạng
Số trang	61
Dung lượng	3,23 MB