Thiết kế và xây dựng website bán hàng mỹ phẩm

- Thuộc tính của một phần tử HTML gồm 2 thành phần: • Tên: là tên của thuộc tính • Giá trị: là những gì mà bạn muốn gán cho thuộc tính và được đặt trong các trích dẫn.. - Quy tắc viết th

KHOA CÔNG NGHỆ ĐIỆN TỬ - VIỄN THÔNG

- ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

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

Độc lập - Tự do – Hạnh phúc

KHOA CN ĐIỆN TỬ - THÔNG TIN

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

Họ và tên sinh viên: Nguyễn Thị Loan

Ngành đào tạo: Công nghệ Kỹ thuật điện tử, Truyền thông Hệ đào tạo: ĐHCQ

1 Tên đề tài đồ án tốt nghiệp:

“THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM”

MỞ ĐẦU

Internet là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trở thành một công cụ không thể thiếu, là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàn cầu Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng cho người sử dụng: chỉ cần có một máy tính kết nối internet và một dòng dữ liệu truy tìm thì gần như lập tức cả thế giới về vấn đề mà bạn đang quan tâm sẽ hiện ra, có đầy đủ thông tin, hình ảnh …

Cùng với đó khi công nghệ ngày càng phát triển con người có trong tay công cụ hữu hiệu làm tăng năng suất lao động và hiệu quả công việc chính vì vậy thương mại điện tử một trong những công cụ đó Bill Gate đã từng nói: “Năm 2015, bạn có 2 lựa chọn: một là kinh doanh cùng internet, 2 là bạn không kinh doanh nữa” Thương mại điện tử đã trở thành một phương tiện giao dịch quen thuộc của các công ty thương mại lớn trên thế giới Nó đang có tốc độ phát triển rất mạnh Và hầu hết các công ty bán hàng hiện nay đều là các công ty thương mại điện tử và mua sắm qua mạng đã trở thành thói quen hàng ngày của nhiều người

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 một công ty, 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ách 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

Để hiểu kỹ hơn về một website thương mại điện tử nên em chọn đề tài: “THIẾT

KẾ VÀ XÂY DỰNG WEBSITE BÁN HÀNG MỸ PHẨM” Sử dụng ngôn ngữ PHP, HTML, MYSQL,CSS, JAVASCRIPT và công cụ hỗ trợ lập trình Dreamweaver và phần mền Xampp

Nội dung bao đồ án gồm có 4 chương:

Chương 1: Cơ sở lý thuyết

Chương 2: Phân tích các chức năng của website

Chương 3: Thiết kế website

Chương 4: Tổng kết

LỜI CẢM ƠN

Lời đầu tiên em xin chân thành kính gửi đến cô Ths.Quách Thị Hạnh lời cảm ơn chân thành và sâu sắc nhất Em cảm ơn cô vì đã nhiệt tình, tận tinh chỉ bảo, hướng dẫn

em trong suốt quá trình làm báo cáo thực tập

Em xin chân thành gửi lời cảm ơn đến toàn thể các thầy cô giáo trong Khoa Điện

tử - Thông tin Trường Viện Đại Học Mở Hà Nội đã cung cấp cho em đầy đủ các kiến thức về chuyên môn cũng như các kinh nghiệm trong cuộc sống hằng ngày trong suốt thời gian qua

Tuy nhiên, vì thời gian có hạn cũng như kiến thức và kinh nghiệm thực tiễn của em còn nhiều hạn chế nên em không thể tránh khỏi những thiếu xót và cũng như chưa phát huy hết những ý tưởng, khả năng hỗ trợ của ngôn ngữ và kỹ thuật lập trình vào đề tài Trong quá trình xây dựng website, không thể tranh khỏi những sai xót Vì thế, em rất mong nhận được sự góp ý của các thầy cô và các bạn để đề tài của em được hoàn chỉnh hơn

Một lần nữa em xin chân thành cảm ơn!

SINH VIÊN THỰC HIỆN

Nguyễn Thị Loan

MỤC LỤC DANH MỤC BẢNG

DANH MỤC HÌNH

DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1

I GIỚI THIỆU CHUNG 1

1 Khái niệm Website 1

2 Tên miền (Domain) 1

3 Hosting 3

4 Mã nguồn (source code) 5

5 Phân loại Website 5

II TÌM HIỂU VỀ CÁC NGÔN NGỮ LẬP TRÌNH WEB 7

1 Tìm hiểu về HTML 7

2 Tìm hiểu về CSS 16

3 Tìm hiểu về Javascrip 17

4 Tìm hiểu về ngôn ngữ lập trình PHP 31

III HỆ CƠ SỞ DỮ LIỆU MYSQL 41

1 Các khái niệm cơ bản 41

2 Các kiểu dữ liệu 41

3 Các lệnh thao tác với CSDL 43

4 Các câu lệnh truy vấn dữ liệu 45

5 Kết hợp PHP và MYSQL trong ứng dụng website 45

IV. QUY TRÌNH THIẾT KẾ MỘT WEBSITE 46

1 Quy trình thiết kế website 46

2 Cách thức xuất bản website 47

3 Lựa chọn và mua tên miền 47

4 Lựa chọn và thiết lập web server 48

5 Upload website 48

6 Cập nhật và chỉnh sửa website 48

8 Bảo trì 49

CHƯƠNG 2: PHÂN TÍCH CÁC CHỨC NĂNG CỦA WEB 50

I GIỚI THIỆU CHUNG VỀ WEBSITE 50

1 Mục tiêu 50

2 Yêu cầu 50

II CHỨC NĂNG WEBSITE 51

1 Những chức năng cơ bản của website 51

2 Sơ đồ phân cấp các chức năng 52

CHƯƠNG 3: THIẾT KẾ WEBSITE 58

I CÔNG CỤ HỖ TRỢ THIẾT KẾ WEBSITE 58

II THIẾT KẾ CƠ SƠ DỮ LIỆU 59

1 Tạo cơ sở dữ liệu 59

2 Thiết kế giao diện 61

CHƯƠNG 4: TỔNG KẾT 70

TÀI LIỆU THAM KHẢO 71

DANH MỤC BẢNG

Bảng 1: các thẻ nhóm inline 13

Bảng 2: thuộc tính của thẻ <frameset> 14

Bảng 3: thuộc tính của thẻ <frame> 15

Bảng 4: thuộc tính của thẻ <table> 15

Bảng 5: thuộc tính của thẻ <tr> 16

Bảng 6: thuộc tính của thẻ <td> 16

Bảng 7: các ký tự đặc biệt và ý nghĩa của trong javascript 20

Bảng 8: các thuộc tính của mảng 26

Bảng 9: các thuộc tính của đối tượng math 28

Bảng 10: các phương thức của đối tượng math 28

Bảng 11: các phương thức của đối tượng string 30

Bảng 12: các nhóm phương thức của đối tượng date 30

Bảng 13: các kiểu dữ liệu số của mysql 42

Bảng 14: các kiểu dữ liệu string của mysql 43

Bảng 15: các kiểu dữ liệu ngày tháng của mysql 43

Bảng 16: các thuộc tính của thẻ cột trong mysql 44

DANH MỤC HÌNH

Hình 1: cây phân cấp đối tượng 27

Hình 2: quá trình thông dịch trang php 31

Hình 3: sơ đồ luồng dữ liệu ngữ cảnh 52

Hình 4: sơ đồ phân cấp chức năng cho khách hàng 53

Hình 5: sơ đồ phân cấp chức năng của cho quản trị viên 55

Hình 6: kết nối các bảng trong cơ sở dữ liệu 59

Hình 7: bảng danh mục sản phẩm 59

Hình 8: bảng sản phẩm 60

Hình 9: bảng thông tin và nội dung liên hệ của khách hàng gửi tới cửa hàng 60

Hình 10: bảng tin tức 60

Hình 11: bảng đơn hàng 61

Hình 12: bảng thông tin đăng kí của thành viên 61

Hình 13: trang chủ 62

Hình 14: khi trang chủ cuộn lên 62

Hình 15: trang sản phẩm 63

Hình 16: trang chi tiết sản phẩm 64

Hình 17: trang giỏ hàng 64

Hình 18: trang đặt hàng 65

DANH SÁCH CÁC THUẬT NGỮ VIẾT TẮT

WWW ……… World Wide Web HTTP ……… HyperText Transfer Protocol HTTPS……… Hypertext Transfer Protocol Secure HTML ……… HyperText Markup Language

DHTML ……… Dynamic HyperText Markup Language ASP ……… Active Server Pages Perl

CMS ……… Content Management System CGI ………Common Gateway Interface XHTML ……… Extensible Hypertext Markup Language URL ……… Unform Resource Locator

DNS ……… Domain Name System PHP ……… Hypertext Preprocessor CSDL ……… Cơ Sở Dữ Liệu

CSS ……… Cascading Style Sheets SQL ……… … Structured Query Language

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

I GIỚI THIỆU CHUNG

1 Khái niệm Website

Website là một tập hợp các trang web bao gồm văn bản, hình ảnh, video, … mà thông thường nó chỉ nằm trong một tên miền hoặc tên miền phụ được quản lý trên World Wide Web(WWW) của internet Một trang web bao gồm nhều tệp tin HTML hoặc XHTML có thể truy nhập bằng giao thức HTTP, HTTPS

Website 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) Website có thể được xây dựng bằng nhiều ngôn ngữ khác nhau (PHP,.NET, Java, Ruby and Rails,…)

Hiện nay, để một Website có thể vận hành trên môi trường WWW,cần bắt buộc phải có 3 phần chính:

- Tên miền (Domain)

- Hosting

- Mã nguồn (Source code)

2 Tên miền (Domain)

Tên miền chính là địa chỉ website, là một chuỗi các ký tự trong bảng Alphabet được sắp xếp giống như tên riêng và có hoặc không có ý nghĩa

2.1 Cấu tạo của tên miền

Tên miền bao gồm nhiều thành phần cấu tạo nên cách nhau bởi dấu (.)

Ví dụ: abc.com.vn

- Thành phần thứ nhất “abc” là tên miền của máy chủ

- Thành phần thứ 2 “com” thường gọi là tên miền thứ 2(second domain name level) đối với các quốc gia noi chung tên miền mức 2 này do tổ chức quản lý của quốc gia đó định nghĩa, có thể định nghĩa khác đi nhiều hay ít

- Thành phần cuối cùng “vn” là tên miền ở múc cao nhất (top level domain ) bao gồm các mã quốc gia của nước tham gia internet được quy định bằng 2 chữ cái theo tiêu chuẩn ISO-3166 như Viêt Nam là VN, Mỹ là US,… và các linh vực dùng chung

Dùng chung

- COM: thương mại(COMmercial)

- NET: Mạng lưới (NETwork)

- ORG : Các tổ chức(ORGnizations)

- INFO: Thông tin(INFOmation)

- EDU: Giáo dục(EDUcation)

- MOBI: Điện thoại di động

Dùng ở Mỹ

- MIL: Quân Sự (MILitary)

- GOV: Nhà nước (GOVernment)

2.2 Tính chất cơ bản của một tên miền

- Tên miền là duy nhất và được cấp phát cho một chủ thể nào đăng ký trước

- Tên miền bắt buộc phải có phần tên và phần đuôi

- Tên miền không được vượt quá 63 (ký tự bao gồm cả phần đuôi )

- Tên miền chỉ bao gồm các ký tự trong bảng chữ cái (a-z) các số(0-9) và dấu(-) Khoảng trắng và các ký tự đặc biệt khác đêu không hợp lệ

- Không bắt đầu hoặc kết thúc tên miền bằng dấu (-)

- Tên miền không cần bắt đầu bằng http:// hoặc www hay http://www

2.3 Một số khái niệm khác liên quan đến tên miền

2.3.1 URL

URL ( Unform Resource Locator ) được dùng để tham chiếu tới tài nguyên trên Internet URL tạo nên khả năng siêu liên kết cho Website Mỗi tài nguyên khác nhau lưu trữ trên internet được tham chiếu tới bằng địa chỉ, đó chính là URL

➢ Một URL gồm nhiều phần được liên kết với nhau:

▪ URL scheme là tên giao thức ( ví dụ:http,ftp,…)

▪ Tên miền ( abc.com.vn)

miền sẽ được của nó chuyển đến một địa chỉ IP và sẽ báo cho máy tính biết và tìm đến website

3 Hosting

Hosting ( hay Web hosting) là không gian trên máy chủ dùng để chứa file, dữ liệu, nội dung của một website Để hoat động, website cần được lưu trữ trên một máy chủ(Server) kết nối mạng Internet và hoạt động 24/24h mỗi ngày

Có 3 loại hình web hosting thường được dùng :

- Windows hosting: dựa và nền tảng hệ điều hành window của Microsoft

- Linux hosting : dựa vào nền tảng hệ điều hành linux

- Email hosting

3.1 Các loại hosting

▪ Shared hosting (chia sẻ)

Là một dịch vụ lưu trữ rất nhiều trang web trên một máy chủ kết nối Internet Mỗi trang web được lưu trữ ở một phân vùng riêng của mình

▪ Free web hosting

Là dịch vụ lưu trữ miễn phí Thường được quảng cáo hỗ trợ Free web hosting service thường sẽ cung cấp một tên miền phụ hoặc một thư mục phụ Ngược lại, dịch

vụ này sẽ cung cấp một tên miền cấp thứ 2 cùng với các máy chủ Nhiều máy chủ miễn phí sẽ không cho phép sử dụng nhiều tên miền riêng

▪ Reseller hosting

Là một hình thức lưu trữ của máy chủ web mà chủ sở hữu tài khoản có khải năng

sử dụng tài khoản của mình để phân bố lại ổ cứng lưu trữ và băng thông để lưu trữ các trang web này

▪ Email hosting

Là dịch vụ thư điện tử đặc biệt khác với dịch vụ email miễn phí hỗ trợ email hay webmail miễn phí Email hosting cho phép tùy chỉnh cấu hình và số lượng lớn tài khoản

▪ Video hosting

Là dich vụ lưu trữ cho phép các cá nhân tải lên các video vào một trang web Sau đó

sẽ lưu trữ video trên máy chủ cho phép người khác có thể xem video

▪ Image hosting

Là dich vụ lưu trữ cho phép các cá nhân tải lên các hình ảnh vào một trang web Sau

đó sẽ lưu trữ hình ảnh đó trên máy chủ cho phép người khác có thể xem hình ảnh

▪ VPS hosting (Virtual Private Server – máy chủ riêng ảo)

Là một phương pháp phân vùng một máy chủ vậy lý thành máy tính nhiều máy chủ ảo, trên mỗi máy ảo được cài một hệ điều hành như một máy chủ thật

▪ Dedicated server (máy chủ riêng)

Là máy chủ vật lý dành riêng cho việc lưu trữ website

▪ Adult hosting

3.2 Các tính năng của hosting

- Tốc độ: một máy chủ chạy dich vụ web cần phải có cấu hình đủ lớn để đảm bảo

sử lý thông suốt, phục vụ cho số lượng lớn người truy cập phải có đường

truyền kết nối tốc độ cao để đảm bảo không bị nghẽn mạch dữ liệu

- Dung lượng: Dung lượng của hosting là khoảng không gian bạn được phép lưu trữ dữ liệu trên ổ cứng của máy chủ Để lưu trữ được đầy đủ các thông tin, dữ liệu, hình ảnh, của website Hosting cần phải có dung lượng đủ lớn (một vài GB)

- Băng thông: Băng thông của hosting là lượng dữ liệu trao đổi giữa web với người dùng trong 1 tháng Nó phải đủ lớn để phục vụ các hoạt động giao dịch, trao đổi thông tin giữa web với người sử dụng

- Phải hỗ trợ truy xuất máy chủ bằng giao túc FTP để truy cập thông tin

- Hỗ trợ các ngôn ngữ lập trình, cơ sở dữ liệu hoặc các công cụ có sẵn để phục các hoạt động trên web

- Có giao diện quản lý để dễ dàng quản lý, cac tài khoản FTP, Email,…

- Phải thường xuyên được chăm sóc, bảo dưỡng nhằm tránh các rủi ro và khắc phục kịp thời

4 Mã nguồn (source code)

Website cần được lập trình để hiện thị hoặc xử lý thông tin cho người dùng Việc lập trình sẽ sử dụng các câu lệnh, truy xuất CSDL, xử lý và hiển thị cho người dùng trên trình duyệt Tập hợp những câu lệnh này được gọi là mã nguồn (source code)

Có rất nhiều ngôn ngữ lập trình được sử dụng để lập trình website Phổ biến nhất

mà chúng ta thường gặp là: HTML/CSS, PHP, ASP, ASP.NET Trong đó HTML/CSS

là 2 ngôn ngữ cơ bản tạo nên giao diện của một website, nó có thể tạo ra các trang web tĩnh Các ngôn ngữ còn lại thường dùng để lập trình kết nối CSDL và xử lý các yêu cầu cao hơn; Cần phải kết hợp với HTML/CSS, và thường đi kèm cả với Javascript để tạo ra giao diện người dùng (frontend)

Từ các ngôn ngữ lập trình cơ bản trên, hình thành các Framework với nhiều thư viên được xây dựng sẵn Các Frameword giúp người lập trình tiết kiệm nhiều thời gian trong việc xây dựng website Các PHP Framework phổ biến gồm: CodeIgniter, CakePHP, Yii Framework, Zend Framework,…

5 Phân loại Website

Có 2 loại website : - Website tĩnh

- Website động

5.1 Website tĩnh

Website tĩnh là những web chỉ bao gồm các trang web tĩnh và không có cơ sở dữ liệu đi kèm Tức là người dùng không có khả năng tương tác, không thể chỉnh sửa hoặc thay đổi dữ liệu được

- Web tĩnh thường được xây dựng từ CSS, HTML, Javascript(DHTML - Dynamic HTML),

- Dùng để thiết kế các trang web có nội dung ít cần thay đổi và cập nhật

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

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

Ưu điểm:

- Thiết kế đồ họa đẹp:

- Tốc độ truy cập nhanh:

- Thân thiện hơn với máy tìm kiếm

- Chi phí đầu tư thấp:

Thông tin hiển thị ở web động được gọi là một cơ sở dữ liệu khi người dùng truy vấn tới một trang web

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

Ưu điểm:

- Dễ dàng quản lý nội dung

- Dễ dàng nâng cấp và bảo trì

- Tương tác với người sử dụng cao

- Có thể xây dựng được web lớn

- Hiện nay vẫn SEO tốt bởi ta có thể sử dụng chúc năng Rewrite URL để chuyên URL thân thiện

Nhược điểm:

- Chi phí xây dựng cao

- Khi web lớn cần nhiều người để quản lý

II TÌM HIỂU VỀ CÁC NGÔN NGỮ LẬP TRÌNH WEB

Website thương mại là một trang web động với mã nguồn được viết bằng các ngôn ngữ PHP,ASP.NET, HTML,….và trang web đó có kết nối hệ cơ sở dữ liệu, có thể cập nhật dữ liệu, truy xuất dữ liệu thường xuyên

Để thiết kế một website hoàn chỉnh nó được hình thành bởi :

- HTML: Xây dựng cấu trúc và định dạng siêu văn bản

- CSS: Định dạng các siêu văn bản được tạo ra từ HTML ở dạng thô thành một

bố cục website, có màu sắc có ảnh, …

- Javascript: Tạo ra các sự kiện tương tác với hành vi của người dùng

- PHP: Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt Là ngôn ngữ lập trình được dùng phổ biến ngoài ra còn một số ngôn ngữ như ASP, ASP.NET, Java, CGI, Perl, …

- MySQL: Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc

1 Tìm hiểu về HTML

HTML( Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế ra để tạo nên các trang web Dùng để định dạng bố cục, các thuộc tính liên quan đến cách hiển thị của một trang Là một tập hợp các thẻ đánh dấu

Các lênh HTML được gọi là các thẻ Các thẻ này được dùng để điều khiển nội dung

và hình thúc trình bày của tài liệu HTML Để bắt đầu một câu lênh ta dùng thẻ mở

- Thuộc tính luôn luôn được chỉ định trong thẻ mở

- Thuộc tính của một phần tử HTML gồm 2 thành phần:

• Tên: là tên của thuộc tính

• Giá trị: là những gì mà bạn muốn gán cho thuộc tính và được đặt trong các trích dẫn

Tên và giá trị của thuộc tính không phân biệt chữ hoa hay chữ thường

- Quy tắc viết thuộc tính:

<tên thẻ tên thuộc tính=“giá trị”> Nội dung </tên thẻ>

Các thuộc tính cơ bản có thể sử dụng trong bất kì phần tử nào của HTML:

Thuộc tính id

Quy định một định dạng duy nhất cho một thẻ HTML Phải tuân theo luật:

• Phải chứa ít nhất 1 kí tự

• Không có khoảng trắng

• Không phân biệt chữ hoa và chữ thường

Cú pháp: <tên thẻ id= “tên id”> </tên thẻ>

Để trang trí nội dung hiển thị ngay trên thẻ các tên các class

Cú pháp : <tên thẻ style= “ định nghĩa các kiểu trang trí”>

Thuộc tính class

Thuộc tính class cho phép sử dụng một hay nhiều class trên một thẻ Sử dụng dấu cách

để phân cách giữa các tên các class Phải tuân theo luật:

• Bắt đầu với kí tự chữ không phân biệt hoa hay thường

• Bao gồm ký tự(a-z,A-Z), số(0-9), gạch ngang (-) và gạch dưới(_)

Cú pháp: <tên thẻ class= “tên>

1.2 Cấu trúc cơ bản của HTML

Cấu trúc của HTML có dạng như sau, gồm 3 phần:

- <!Doctype>: phần khai báo chuẩn của html

- <head></head>: phần đầu của html, khai báo về meta, title, css, javascript,

- <body></body>: phần thân chứa nội dung của trang web

1.3 Các thẻ định dạng cấu trúc tài liệu

Thẻ html

Một tài liệu HTML luôn được bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ

</html> Toàn bộ nội dung của tài liệu sẽ được đặt giữa cặp thẻ này

liên kết, đặt lề cho trang tài liệu … những thông tin này được đặt trong phần tham

số của thẻ

Có cú pháp như sau: <body>

Phần thân của văn bản

<h5> Tiêu đề 5 </h5>

<h6> Tiêu đề 6 </h6>

Thẻ div (division – phân chia)

Thẻ div để phân chia khu vực hay vùng, giúp cho trình duyệt hiểu rõ những vùng được

bố cục trên trang web

<div> </div>

Thẻ xác định danh sách

Sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không sử dụng cho danh sách không có phần nội dung mô tả gồm có 3 thẻ:

- <dl></dl>: (definition list) có nghĩa là xác định danh sách

- <dt></dt>: (defines an item) có nghĩa là xác định một mục

- <dd></dd>: (defines describe an item) có nghĩa là xác định một mô tả của một mục

3 thẻ nay phải luôn tồn tại cùng nhau không thể thiếu 1 trong 3 thẻ

Có cấu trúc như sau:

▪ <ol></ol>: (ordered list) là danh sách có thứ tự

▪ <li></li>: (list item) là các mục của danh sách

▪ <li></li>: (list item) là các mục của danh sách

• Nhóm thẻ inline nên được bao ngoài bởi nhóm các thẻ block

• Những thẻ trong nhóm này có thể được lồng vào nhau

• Không được sử dụng các thẻ khác bên trong các thẻ inline

<a></a> Thẻ dùng để tạo một liên kết từ tràn web này sang trang

web khác, từ vị trí này sang vị trí khác hay dùng để mở một Project nào đó như word, Excel,… có một thuộc tính bắt buộc : href được dùng để chỉ địa chỉ hay URL của tài liệu hoặc file liên kết.Cú pháp:

<a href = “link liên kết”> Hypertext</a>

<img/> Dùng để nhúng một ảnh thông qua thuộc tính src, thẻ có 2

thuộc tính bắt buộc :

- src: chứa đường dẫn tham chiếu tới image -alt được sử dụng như một văn bản thay thế khi image không hiển thị

<b></b> In đậm

<big></big> Tăng kích cỡ phông chữ

<code></code> Dùng để định dạng chữ hiện giống như mã của máy tính

<font></font> Quy định giao diện, kích cỡ, màu sắc cho chữ

<s></s> Dùng để gạch bỏ một đoạn văn bản

<small></small> Hiển thị một đoạn text nhỏ

<strong></strong> Nhấn mạnh

<textarea></textarea> Dừng để nhập nhiều dòng văn bản

<var></var> Định nghĩa một biến

<abbr></abbr> Dùng để mô tả mộ cum từ viết tắt

<basefont></basefont> Định dạng kích cỡ màu sắc font cho toan bộ text trong văn

bản

<br/> Xuống dòng trong một đoạn văn

<dfn></dfn> Dùng để mơ tả một thuật ngữ

<em></em> Nhấn mạnh theo kiểu chữ nghiêng

 Hiển thị text lệch bên dưới

 Hiển thị text lệch bên trên

<span></span> Dùng để nhóm một hay nhiều thẻ thuộc nhóm inline khác

nhau, nó không có ý nghĩa về mặt hiển thị, chỉ hỗ trợ định dạng các inline thông qua CSS và javascript

<cite></cite> Dùng để trích dẫn một câu nào đó

<del></del> Xác định vă bản bị gạch ngang

<input></input> Dùng cho người nhập thông tin hay chon thông tin, có các

thuộc tính như text, checkbox, password,…

<i></i> Kiểu chữ in nghiêng

<tt></tt> Xác định văn bản kiểu máy

<label></label> Định nghĩa cho thẻ <input>

<q></q> Định nghĩa một đoạn trích dẫn ngắn

<samp></samp> Định nghĩa văn bản ngôn ngữ lập trình mẫu

<select></select> Tạo một danh sách lựa chọn

<bdo></bdo> dùng để ghi đè lên dòng chữ hiện tại, có thuộc tính dir

<acronym></acronym> Để chỉ một tên lược danh

Bảng 1: Các thẻ nhóm Inline

1.6.Thẻ <form >

Thẻ form dùng để tạo một form trong HTML Để thu thập thông tin từ người sử dụng như email, tên ,tuổi,…

Cú pháp: <form action= “Script URL” method= “GET|POST”>

Các phần tử font, như input,textarea,…

</form>

Các thuộc tính

- Action: ứng dụng quản trị backend sẵn sàng sử lý từ dữ liệu người dùng

- Method: phương thức truyền tải dữ liệu.thường sử dụng GET và POST

- Accept: Thuộc tính này xác định danh sách các kiểu MIME được máy chủ nhận

ra, trong đó có chứa kịch bản (script) để xử lý biểu mẫu

Cú pháp: ACCEPT = “Internet media type”

1.7.Frame

Trong HTML được sử dụng để phân chia cửa sổ trình duyệt thành các khu vực khác nhau, mỗi khu vực tải một tài liệu HTML riêng Một tập hợp các Frame trong cửa sổ trình duyệt được biết đến như là một Frameset

Thẻ <frameset> xác định cách chia cửa sổ thành các Framet thay thế cho thẻ cho body Thuộc tính rows trong thẻ này xác định chiều ngang của Frame, thuộc tính cols xác định chiều dọc của Frame Mỗi Frame được chỉ dẫn bởi một thẻ <frameset> và nó xác định tài liệu nào sẽ được mở trong Frame

Thuộc tính của thẻ <frameset>

Cols Xác định số cột được chứa trong frameset và kích cỡ mỗi cột Rows Xác định số hàng được chứa trong frameset và kích cỡ mỗi

hàng Border(đường

viền)

Xác định độ rộng border của mỗi frame

Frameborder Xác định border có được hiển thị giữa các frame hay không Framespacing Xác định khoảng cách giữa các frame trong frameset

Bảng 2: thuộc tính của thẻ <frameset>

Thuộc tính của thẻ <frame>

Src File dược tải lên

Name Tên của frame

Marginwidth xác định độ rộng của khoảng cách giữa bên trái và phải của Border

Frame với nội dung trong Frame Giá trị là pixel

Marginheight xác định chiều cao của khoảng cách giữa trên và dưới của Border

Frame và nội dung của nó Giá trị là pixel

Noresize ngăn cản người sử dụng đặt lại kích cỡ

Sorclling điều khiển sự xuất hiện của thanh cuốn xuất hiện trên Frame Nó nhận

giá trị "yes", "no", hoặc "auto"

Longdesc cho phép cung cấp một đường link tới trang web khác chứa một sự

miêu tả dài trong nội dung của Frame

Bảng 3: Thuộc tính của thẻ <frame>

1.8.Thẻ <table>

Thẻ <table> dùng để tạo bảng Thẻ <tr> được sử dụng để tạo các hàng và thẻ

<td> được sử dụng để tạo các ô

1.8.1 Thuộc tính của thẻ<table>

Bgcolor Định màu nề trên bảng

Border Định màu cho đường viền

Bordercolordark Định màu sẫm cho phần bóng của đường viền

Bordercolorlight Định màu sẫm cho phần sáng hơn của đường viền

Cellpadding Định rõ khoảng cách giữa nội dung và đường viền

Frame Hienr thị đường viền ngoài

Height Xác định chiều cao của bảng

Rules Hiển thị đường viền trong bảng

Width Xác định chiều rộng của bảng

Bảng 4: Thuộc tính của thẻ <table>

Align, vlign Căn chỉnh nội dung theo chiều ngang và dọc

Bordor Mở rộng ô qua nhiều cột

Colspan Định màu sẫm cho phần bóng của đường viền

Nowrap Giữ cho nội dung ô nằm trên một dòng

Rowspan Kéo dài ô xuống nhiều hàng

Width, heigh Định rõ kích thước ô

2.1 Cú pháp CSS

Gồm 3 phần:

- Selector: trỏ đến những đối tượng (HTML) chịu ảnh hưởng bởi CSS Đó có thể

là bất cứ thẻ html nào

- Property (thuộc tính CSS): là thuộc tính quy định cho thẻ html

- Value (giá trị CSS): là các giá trị được gán cho các property

Javascript là một trong những ngôn ngữ lập trình phổ biến nhất thế giới, là ngôn ngữ cho HTML,web, Server,PC, laptop, smart phone,…

Có 2 cách nhúng javascript vào file HTML :

Cách 1: nhúng đoạn javascript vào trong file HTML

Ta sử dụng thẻ <script> để chèn đoạn mã javascript vào bất kì nơi nào trong file HTML

Cú pháp: <script language= “javascript”>

Cách 2: viết javascript thành 1 file riêng có đuôi js và liên kết với HTML

Sử dụng thẻ <script> với thuộc tính scr để liên kết 1 file javascript vào HTML

Cú pháp: <script> language= “javascript”

Scr= “ đường dẫn tới file script.js”>

giá trị mới khi muốn xem, sử dụng hay thay đổi giá trị của biến, ta chỉ cần đổi tên của biến Được khai báo bằng từ khóa “var”

Các biến trong javascript phải tuân theo các qui ước đặt tên su:

- Tên biến phải được bắt đầu bằng một chữ cái, dấu gạch dưới “_” hoặc một dấu đôla “$”

- Các kí tự tiếp theo có thể là số hoặc chữ cái

- Javascript có phân biệt chữ hoa và chữ thường nên tên biến chứa chữ hoa và chữ thường sẽ khác nhau

3.3.2 Hằng

Hằng là những giá trị cố định được dùng trong javascript Giá trị của hằng không

bị thay đổi trong quá trình thực hiện script Hằng số chỉ đọc cùng vơi steen của nó bằng cách sử dụng từ khóa “const”

Tuân theo qui tắc sau:

- Tên biến phải được bắt đầu bằng một chữ cái, dấu gạch dưới “_”

- Các kí tự tiếp theo có thể là số hoặc chữ cái

Nếu không có từ khóa “const” thì nó sẽ được xem như là một biến Không thể khai báo một hằng số có tên trùng với tên hàm hoặc biến trong cùng một phạm vi

3.3.3 Các kiểu dữ liệu trong javascript

Javascript la ngôn ngữ có tính định kiểu thấp, chúng ta không cần phải chỉ ra kiểu dữ kiệu khi khai báo biến, kiểu dữ liệu sẽ được tự động chuyển thành kiểu phù hợp khi cần thiết

Được dùng chỉ 2 điều kiện: đúng và sai

Miền giá trị của kiểu này chỉ có 2 giá trị: true và false

Kiểu chuỗi (string)

Một chuỗi chữ gồm không hoặc nhiều kí tự được đặt trong dấu ngoặc kép (“”)hoặc nháy đơn(‘’) Một chuỗi phải được phân định bởi các dấu trích dẫn cùng kiểu

Javascript sẽ tự động chuyển đổi chữ thành một đối tượng chuỗi tạm thời, gọi là phương thức yêu cầu sau đó loại bỏ đối tượng string tạm

Các kí tự đặc biệt và ý nghĩa của nó trong javascript

Ký tự Ý nghĩa

\b Phim lùi (backspace)

\f Sang trang mới (from feed)

\n Sang dòng mới (new line)

\r Đưa con trỏ về đầu dong hiện tại

\t Cách một khoảng tab(tab)

Bảng 7: Các ký tự đặc biệt và ý nghĩa của trong javascript

Muốn thêm kí tự đặc biệt vào trong chuỗi ta đặt trước nó bằng dấu (\) backslash

Kiểu null

Kiểu null chỉ có duy nhất một giá trị null Nó có nghĩa là không có giữ liệu, thực hiện chức nawhg là giữ chỗ trong biến với ý nghĩa là ở đó không có hữu dụng gì Số 0 và 1 xâu rỗng và null là các giá trị khác nhau

Các toán tử so sánh có thể được sử dụng cho các giá trị chuỗi, toán tử nối (+) nối hai giá trị chuỗi với nhau, và trả về một chuỗi mới là sự hợp nhất của hai chuỗi toán hạng

Toán tử gán viết gọn += có thể cũng được sử dụng để nối các chuỗi

Một số toán tử khác:

Toán tử điều kiện

Toán tử điều kiện là toán tử của javascript cần 3 toán hạng Toán tử có thể có 1 trong 2 giá trị tùy thuộc vào điều kiện

Cú pháp: VariableName=(condition) ? value1: value2;

Toán tử dấu phẩy

Chuỗi :định giá trị của một chuỗi giá trị

Logic: định giá trị là true hay false

Đối tượng: định giá trị là một đối tượng

3.5 Các câu lệnh điều kiện

Một khối lệnh được sử dụng để nhóm các lệnh Các lệnh này được gọi là đồng cấp

và sẽ được nhóm lại bởi một cặp dấu ngoặc móc “{}”

Bên trong khối lệnh lại có thể lồng các khối lệnh khác Sự lồng nhau theo cách như vậy là không hạn chế

3.5.2 Câu lệnh switch …case

Câu lệnh switch được dùng để thực hiện các khối lệnh khác nhau tùy vào những trường hợp khác nhau

- Vòng lặp thực hiện lặp đi lặp lại cho đến khi điều kiện là false

- Vòng lặp thực hiện lặp di lặp lại cho đến khi điều kiện là true

- Vòng lặp thực hiện lặp đi lặp lại các lệnh theo một số lần nhất định

3.6.1 Câu lệnh for

Câu lệnh for sẽ thực hiện các lệnh lặp đi lặp lại cho đến khi điều kiện là false Số lần thực hiện vòng lặp thường được điều khiển thông qua một biến đếm

Cú pháp: For (lệnh khởi tạo;điều kiện;lệnh tăng) {statement}

- lệnh khởi tạo: được thục hiện duy nhất một lần và thường dùng để khởi tạo biến đếm

- lệnh điều kiện: điều kiện của vòng lặp

- lệnh tăng: thay đổi biến đếm trong vòng lặp

- Các câu lệnh javascript định nghĩa hàm nằm trong dấu ngoặc móc{}

Cú pháp: Function tên hàm( danh sách đối số)

{ //các câu lệnh cần thục hiện mỗi khi hàm được gọi

Return giá trị cần trả về;

}

Trong javascript các hàm không thể lồng nhau

Một hàm có thể dược gọi nhiều lần

Có 2 cách gọi hàm:

Gọi hàm trực tiếp

Gọi hàm trực tiếp là ta đặt câu lệnh gọi hàm vào trực tiếp một vị trí nào đó trong chương trình, khi trình duyệt thực thi đến câu lệnh gọi hàm thì hàm sẽ được thực thi

Gọi hàm thông qua một sự kiện

Gọi hàm thông qua sự kiện là sẽ gám câu lệnh gọi hàm vào bên trong một sự kiện, khi

sự kiện xảy ra thì hàm sẽ được thực thi

Hàm isNaN ddingj giá trị một đối số để xác định xem nó có phải là “NaN” (Not a Number) hay không

Cú pháp: isNaN(test Value)

- isNaN là giá trị cần định giá trị

Các hàm parseInt và parseFloat

Hai hàm này trả về một giá trị số khi cho đối số là một chuỗi

Cú pháp: - Hàm parseInt: parseInt (str[,radix])

arrayObjectname=new Array(element0, element1,… )

hay: arrayObjectname=new Array(array length)

với:

- arrayObjectname: là tên của đối tượng mới hoặc tên của đối tượng có sẵn Khi sử dụng các thuộc tính và các phương thức của Array, thì arrayObjectName là tên của đối tượng mảng mới

- element0, element1,… : là một danh sách các giá trị cho các phần tử của mảng

- arraLength là độ dìa khởi tạo của mảng

Để gán các giá trị cho phần tử có thể gán giá trị cho một mảng bằng cách gán các giá trị cho các phần tử đó

Để truy cập đến các phần tử mảng ta truy cập bằng cách sử dụng số thứ tự(hay chỉ

số) của phần tử đó

3.8.3 Các thuộc tính của mảng

Constructor Trả về một tham chiếu tới hàm mà tạo ra đối tượng đó

Index biểu diễn chỉ mục dựa trên zero của sự so khớp trong chuỗi

Input chỉ có mặt trong các mảng được tạo bởi các so khớp Regular

Expression

Length Phản ánh số phần tử trong một mảng

Prototype cho phép bạn thêm các thuộc tính và phương thức tới một đối tượng

Bảng 8: Các thuộc tính của mảng

3.9 Các đối tượng cơ bản của javascript

Javascript được thiết kế trên mô hình nền tảng đối tượng đơn giản một đối tượng là một gói dữ liệu toàn diện các thuộc tính (là các biến hoặc các đối tượng khác cảu javascript) dung để ddingj nghĩa đối tượng và các phương thức(là các hàm kết hợp với đối tượng) tác động đến dữ liệu đều nằm trong đối tượng

Để truy cập đến các thuộc tính của đối tượng, ta cần phải chỉ ra tên đối tượng và thuộc tính của nó:

objectName.propertyName

- objectName: tên đối tượng

- propertyName: tên thuộc tính

Định nghĩa một thuộc tính bằng cách ta gán cho nó một giá trị

Để truy cập đến các phương thức của một đối tượng, chúng ta phải chỉ ra tên đối tượng và phương thức yêu cầu: objectName.method()

Khi tạo ra một trang Web, chúng ta có thể chèn:

o Các đối tượng của trình duyệt

o Các đối tượng xây dựng sẵn của ngôn ngữ kịch bản được sử dụng

o Các phần tử HTML

Hình 1: cây phân cấp đối tượng

Khi tài liệu HTML được hiển thị trong trình duyệt, một cây phân cấp đối tượng được tạo ra dựa trên các phần tử trong trang Các đối tượng trình duyệt chẳng hạn như văn bản (document), cửa sổ (window), khung (frame), vị trí (location),… nằm trên cùng của cây phân cấp đối tượng Sau đó là các đối tượng xây dựng sẵn của JavaScript Các phần tử HTML nằm ở sau cùng và chính là các thẻ HTML tạo nên văn bản hiện hành

Một số đối tượng được xây dựng sẵn trong Javascript:

• Math

• String

• Date

3.9.1 Đối tượng Math

Đối tượng Math là một đối tượng được xây dựng sẵn có các phương thức và các thuộc tính cho các hàm và các hằng số toán học

Math là một đối tượng JavaScript cấp cao Chúng ta có thể tự động truy xuất nó mà không cần sử dụng một hàm dựng hay gọi một phương thức nào

Đối tượng kịnh bản

LOH10E Logarithm cơ số 10 của E

abs Trả về giá trị tuyệt đối của một số

acos Trả về arccos (theo radian) cảu một số

asin Trả về arcsin(theo radian) cảu một số

atan Trả về arctang (theo radian) cảu một số

atan2 Trả về arctang của thương số của các đối số của nó

ceil Trả về số nguyên nhỏ nhất lớn hơn hoặc bằng một số

cos Trả về cos của một số

exp Trả về lũy thừa của số e với một số mũ nào đó

floor Trả về số nguyên lớn nhất nhỏ hơn hoặc bằng 1 số

log Trả về số logarithm tự nhiên (cơ số E)

max Trả về số lớn hơn trong hai số

min Trả về số nhỏ hơn trong 2 số

random Trả về một số giả ngẫu nhiên giữa 0 và 1

round Trả về giá trị của một số được làm tròn đến số nguyen gần nhất

sin Trả về sin của một số

sqrt Trả về căn bậc 2 của một số

tan Trả về tan của một số

Bảng 10: Các phương thức của đối tượng math

3.9.2 Đối tượng string

Đối tượng String được dùng để thao tác và làm việc với chuỗi văn bản Có thể tách nó thành các chuỗi con và biến đổi chuỗi đó thành các chuỗi chữ hoa hoặc chữ thường trong một chương trình

Các phương thức Đối tượng String có hai kiểu phương thức:

• Kiểu trả về sự biến đổi trên bản thân một chuỗi như phương thức substring() và toUpperCase() hay toLowerCase()

• Kiểu trả về một chuỗi có dạng HTML như phương thức bold() và link()

big Tăng kích thước của một chuỗi văn bản

blink Tạo hiệu ứng nhấp nháy cho chuỗi

bold In đậm

concat Nối 2 chuỗi và trả về chuỗi mới

fontcolor Xác định màu của font chữ

italics In nghiêng

link Tạo siêu liên kết HTML

small Giảm kích thước của một chuỗi văn bản

strike Hiển thị chuỗi có đường gạch ngang ở giữa

sub Hiển thị văn bản dưới dạng chỉ số dưới

Substring,

substr

Trả về chuỗi con cụ thể của một chuỗi bằng cách chỉ ra chr số đầu và chỉ số cuối, hoặc chỉ ra số đầu và độ dài chuỗi số con

sup Hiển thị văn bản dưới dạng chỉ số trên

toLowerCase Chuyển chuỗi thành kí tụ thường

toUpperCase Chuyển chuỗi thành kí tự hoa

Bảng 11: Các phương thức của đối tượng String

3.9.3 Đối tượng Date

JavaScript không có kiểu dữ liệu ngày tháng Tuy nhiên, chúng ta có thể sử dụng đối tượng Date và các phương thức của nó để làm việc với ngày tháng, thời gian trong các ứng dụng Đối tượng Date có nhiều phương thức cho việc thiết lập, nhận và thao tác ngày tháng Nó không có bất kỳ thuộc tính nào

Cú pháp: dateObjectName = new Date ([parameters])

- dateObjectName: là tên của đối tượng Date sẽ được tạo ra, nó có thể là đối tượng mới hoặc thuộc tính của một đối tượng sẵn có

- Các parameters trong cú pháp sẵn có có thể là:

• Không có đối số: tạo ra ngày tháng và thời gian của một ngày

Ví dụ: today = new Date ()

• Một chuỗi mô tả ngày tháng có dạng như sau: “Tháng ngày, năm giờ:phút:giây” Nếu bỏ qua giờ, phút và giây, thì giá trị sẽ được thiết lập là 0

• Một tập hợp các giá trị số nguyên cho năm, tháng, ngày

các nhóm phương thức của đối tượng Date

To Gồm những phương thức được dùng để trả về các chuỗi giá trị

từ các đối tượng Date Parse và UTC Gồm những phương thức được dùng để phân tích các chuỗi

Bảng 12: Các nhóm phương thức của đối tượng Date

4 Tìm hiểu về ngôn ngữ lập trình PHP

4.1 Khái niệm PHP

PHP (Hypertext Preprocessor) là ngôn ngữ lập trình kịch bản chủ yếu được

dùng để phát triển các ứng dụng viết cho máy chủ và trả về mã HTML cho trình duyệt , là một mã nguồn mở Được thiết kế năm 1994 bởi Rasmus Lerdorf Có rất nhiều phiên bản, hiện nay phiên bản cao nhất của PHP là PHP7, đây là một phiên bản có tính nhảy vọt bởi PHP đã cập nhật thêm nhiều tính năng giúp lập trình viên có nhiều

sự lựa chọn hơn hiện tại các máy chủ chủ yếu chỉ cài đặt PHP5 và PHP7

4.2 Cách hoạt động của trang web viết bằng PHP

Khi một trang PHP được yêu cầu, webserver phân tích và thi hành các đoạn mã của PHP và tạo ra trang HTML Được thực hiện qua 4 bước sau:

- Bước 1: Đọc yêu cầu từ phía Brower

- Bước 2: Tìm trang web trên server

- Bước 3: Thực hiện các đoạn mã PHP trên trang web đó để sửa đổi nội dung của trang

- Bước 4: Gửi trở lại nội dung cho Brower (đây là trang HTML có thể hiển thị được bởi trình duyệt)

Hình 2: Quá trình thông dịch trang PHP