Bài giảng Lập trình ứng dụng web

Bài giảng Lập trình ứng dụng web cung cấp cho người học những kiến thức như: Tổng quan về lập trình web; HTML, CSS, JavaScript; Lập trình với PHP; My SQL với PHP; Quản lý Cookies và Session trong PHP; Dịch vụ Web-Base Email, Upload trong PHP; Phát triển ứng dụng web với PHP. Mời các bạn cùng tham khảo!

Trang 1

Company Logo

Lập trình ứng dụng web

web application programming

Năm 2019

Khoa Công Ngh Thông tinệ

Trang 2

1. Tổng quan về lập trình web.

Nội dung

Trang 3

• “Xây dựng ứng dụng web bằng PHP và MySQL”, Phạm Hữu Khang, NXB Phương Đông.

Nguyễn Trường Sinh, NXB Thống Kê.

Development”; Elizabeth Naramore, Jason Gerner, Yann Le Scouarnec, Jeremy Stolz, Michael K.Glass, Timothy Boronczyk

Tài Liệu Tham Khảo

Trang 5

Chương I: Tổng Quan

Một số khái niệm:

• Domain Name (tên miền)

– Là tên máy chủ gắn với một địa chỉ IP

– Máy chủ DNS sẽ thực hiện việc ánh xạ khi có yêu cầu truy cập

Trang 6

Một số khái niệm (tiếp)

– Là máy tính có cấu hình cao, hoạt động ổn định, chuyên cung cấp tài nguyên, dịch vụ cho các máy tính khác

– Một máy chủ có thể dùng cho một hay nhiều mục đích Tên máy chủ thường gắn với mục đích sử dụng, ví dụ:

• File server

• Mail server

• Web server

Trang 7

– Máy khai thác dịch vụ máy chủ

– Với mỗi dịch vụ thường có các phần mềm riêng để khai thác

– Một máy tính vừa có thể là client vừa là server

– Một máy tính có thể khai thác dịch vụ của chính nó

Trang 8

– Là tập hợp các quy định phải tuân theo để truyền tải thông tin trên mạng

– Mỗi dịch vụ thường có một giao thức riêng, ví dụ:

• HTTP: giao thức truyền siêu văn bản

• FTP: giao thức truyền file

• SMTP: giao thức gửi email

• POP3: giao thức lấy bản sao email về client

Trang 9

– Là một số nguyên nằm trong khoảng 0-65535

– Dùng để xác định dịch vụ của máy chủ

– Hai dịch vụ khác nhau phải chiếm các cổng khác

nhau, và mỗi dịch vụ có thể chiếm nhiều hơn 1 cổng

– Một số cổng mặc định

• HTTP: 80 DNS: 53

• FTP: 21 SSH: 22

• SMTP: 25 POP3: 110

Trang 10

• Giao thức, cổng: được trình duyệt mặc định

• Tên file: được server mặc định

Trang 11

Trang 12

Phân loại website

– Web tĩnh (static web)

• Viết bằng HTML (kết hợp cùng CSS, JS)

• Dễ phát triển, chi phí xây dựng thấp, chạy nhanh

• Tương tác yếu – Web động (dynamic web)

• Viết bằng nhiều ngôn ngữ (PHP, ASP, JSP,…)

• Phát triển phức tạp

• Tương tác mạnh

Trang 13

• Khả năng tương tác yếu

• Webserver hoạt động giống 1 file server.

Web Server

URL yêu cầu

HTML

HTM L

Client

Network

Trang 14

Web động

• Mỗi người sử dụng có thể nhận được nội dung khác nhau phụ thuộc vào kết quả chạy chương trình.

• Trang web viết bằng HTML + Ngôn ngữ lập trình phía server Có thể được thay đổi bởi người sử dụng

• Khả năng tương tác mạnh

Web Server

URL yêu cầu

HTML

HTM L

Client

Thực thi Trang web động

Trang 15

• Common Gateway Interface (CGI)

• Java Server Pages (JSP)

• Access Server Pages (ASP, ASP.Net)

• Pert

• Personal Home Page Tools (PHP)

– Mã nguồn mở

Trang 16

Web động

Trang 17

Quy trình tổng quát xây dựng website

Trang 18

Một số bước chính trong lập trình web

Trang 20

• Lập trình

– Viết mã lệnh, xây dựng các module, các lớp dùng chung,…

– Kiểm tra các liên kết

– Kiểm tra các lỗi bảo mật

– Kiểm tra hiển thị trên các trình duyệt phổ biến

– Kiểm tra tốc độ tải trang trên các loại mạng, các loại dường truyền khác nhau,v.v…

Một số bước chính trong lập trình web

Trang 21

Các phần mềm hỗ trợ

– WAMP (for Windows), LAMP (for Linux)

– MAMP (for Mac), SAMP (for Solaris)

Trang 23

– Có khoảng trên 120 thẻ đã được định nghĩa sẵn Thẻ HTML có hai loại cơ bản sau:

• Thẻ mang thông tin (container tag): gồm có hai phần, thẻ mở và thẻ

đóng Có dạng sau: <tên thẻ>dữ liệu</tên thẻ> Ví dụ: <Title> Welcome to HTML </Title>

• Thẻ rỗng (empty tag): là thẻ dùng để thực hiện một chức năng nào

đó Thí dụ: thẻ , dùng để ngắt dòng và bắt đầu ký tự tiếp theo trên dòng tiếp theo

HTML ư HyperText Markup Language

Trang 24

– §Ó t¹o mét tµi liÖu HTML, cã thÓ sö dông tr×nh so¹n th¶o WordPad cña Windows hay một số pÇn mÒm hç trî thiÕt kÕ web

– CÊu tróc tµi liÖu HTML c¬ b¶n gåm cã cÊu tróc sau:

Trang 25

– Thẻ HTML: Cặp thẻ này được sử dụng để xác nhận tài liệu được soạn thảo là tài liệu HTML Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này Cú pháp:

– Trình duyệt sẽ xem các tài liệu không sử dụng thẻ

Trang 27

– Thẻ HEAD: Được dùng để xác định phần mở đầu cho tài liệu Cú pháp:

– Thẻ TITLE: Cặp thẻ này được dùng trong phần mở

đầu của tài liệu, nhằm cung cấp tiêu đề của trang web Cú pháp:

Trang 28

• BACKGROUND=url: chỉ định ảnh nền cho trang Web

• BGCOLOR=color: chỉ định màu nền cho trang Web

HTML ư HyperText Markup

Language

Trang 29

– ALINK=color: chỉ định màu cho trang Web khi đã được duyệt.

• Ví dụ định nghĩa thẻ Body:

Language

Trang 30

– Thẻ được sử dụng để định dạng một đoạn văn bản Cú pháp:

Language

Nội dung đoạn văn bản

Trang 31

• SIZE: §é dµy cña ®êng th¼ng

• WIDTH: ChiÒu dµi (tÝnh theo pixel hoÆc % cña bÒ réng cöa sæ tr×nh duyÖt)

HTML HyperText Markup

Language

Trang 32

– Thẻ xuống dòng BR: Thẻ này không có thẻ kết thúc tương ứng (), có tác dụng chuyển sang dòng mới

– Thẻ PRE: Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ <PRE> Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng

Trang 33

Language • Các thẻ định dạng khối

– Các thẻ định dạng đề mục <Hn></Hn>: dùng để tạo tạo các

đề mục to nhỏ tùy theo cấp độ trong trang Web, có 6 đề mục khác nhau Cú pháp:

<Hn>Text trong tiêu đề</Hn>

Trong đó: n là một số từ 1 đến 6

Trang 34

<LI>§©y lµ môc 1 trong danh s¸ch.

<LI>§©y lµ môc 2 trong danh s¸ch.

</UL>

 KÕt qu¶:

– §©y lµ môc 1 trong danh s¸ch.

– §©y lµ môc 2 trong danh s¸ch

Language

<UL>

<LI> Môc thø nhÊt

<LI> Môc thø hai

</UL>

Trang 35

• Các thẻ định dạng danh s ách

– Danh s ách có s ắp xếp (Ordered Lis t): Danh sách

này có kiểu Number Cú pháp:

trong đó:

TYPE =1: Các mục được sắp xếp theo thứ tự 1, 2, 3

=a: Các mục được sắp xếp theo thứ tự a, b, c

=A: Các mục được sắp xếp theo thứ tự A, B,

C

=i: Các mục được sắp xếp theo thứ tự i, ii, iii

=I: Các mục được sắp xếp theo thứ tự I, II, III

Language

<OL TYPE=1/a/A/i/I>

<LI>Muc thu nhat

<LI>Muc thu hai

</OL>

Trang 36

• Các thẻ định dạng ký tự

– Các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân cho các ký tự, văn bản khi được thể hiện trên trình duyệt

, : In chữ đậm

 , :In chữ nghiêng

: In chữ gạch chân

<S> </S>, <STRIKE> </STRIKE>:In chữ bị gạch giữa.

: Định dạng chỉ số trên (SuperScript)

: Định dạng chỉ số dưới (SubScript)

• Ví dụ: H2SO4: hiển thị H2SO4

Language

Trang 37

● Các thẻ định dạng ký tự

● <BASEFONT></BASEFONT>: chỉ định Font, kích thức, màu văn bản cho các văn bản không định dạng và dùng với thẻ Định nghĩa thẻ như sau:

Trong đó:

● SIZE=n: chỉ kích thước văn bản, n từ 2 đến 7 Giá trị mặc định là 3.

● COLOR=color: màu văn bản

● FACE=name: Tên Font

Language

Trang 38

Ví dụ:

Kích thước văn bản là 5

Kích thước vb là 4

Kích thước vb là 5

Kích thước vb là 2

Language

Trang 39

– Có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản Cú pháp:

– Sử dụng màu s ắc trong thiết kế các trang Web: Một số giá trị màu cơ bản (Tham khảo trong giáo trình)

Language

<CENTER>Văn b n đả ược canh gi a trang</CENTER>ữ

Trang 40

– Quy tắc đặt tên đó là URL (Univers al Res ource LocatorưĐịnh vị nguồn tài nguyên):

http://s elab.vnuh.edu.vn/~dir1/dir2/dir3/index.HTML

– Để tạo ra một s iêu văn bản chúng ta s ử dụng thẻ

<A>. Cú pháp:

<A HREF = url NAME = name TABINDEX = n TITLE = title TARGET = _blank / _s elf> s iêu văn bản

</A>

Language

Dịch vụ Tên hệ thống Tên đường dẫn

Trang 41

– ThÎ FRAMESET: Tµi liÖu FRAMESET (Frameset Document) lµ trang cã chøa néi dung m« t¶ vµ çch tr×nh bµy cña çc frame (çc tµi liÖu HTML) Có ph¸p:

<FRAMESET ROWS = width COLS = width FRAMEBORDER=n BORDERCOLOR=color>

<FRAME SRC = url NAME = Text SCROLLING=YES/NO>

</FRAMESET>

Language

Trang 42

Trong đó:

– COLS: Xác định số cột trong một frameset

– ROWS: Xác định số dòng trong một frameset

– FRAMEBORDER: Xác định frameset sẽ hiển thị các

đường biên giữa các frame

– BORDERCOLOR: Xác định màu cho đường biên

– SRC: Xác định địa chỉ URL của tài liệu cần hiển thị trong frame

– NAME: Gán tên cho một frame

– SCROLLING: Cho phép hiển thị hoặc không hiển thị thanh cuộn

Language

Trang 43

– Liên kết với tập tin đa phương tiện tương tự như liên kết khác Tuy vậy phải đặt tên đúng cho tập tin đa phương tiện, kiểu của tập tin

– Chèn âm thanh vào một tài liệu HTML

<BGSOUND SRC = url LOOP = n >

– Thẻ này không có thẻ kết thúc tương ứng (</BGSOUND>) Để lặp lại vô hạn chỉ định LOOP = -1 hoặc LOOP = INFINITE Thẻ BGSOUND phải được

đặt trong phần mở đầu (tức là nằm trong cặp thẻ HEAD)

Language

Trang 44

– ChÌn mét h×nh ¶nh, mét ®o¹n video vµo tµi liÖu HTML: §Ó chÌn mét tËp tin ¶nh (.jpg, gif, bmp) hoÆc video (.mpg, avi) vµo tµi liÖu HTML Có ph¸p:

BORDER = n SRC = url WIDTH = width

VSPACE = hs pace TITLE = title DYNSRC= url

LOOP = n >

Language

Trang 45

ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM >

Đ nh nghĩa các ô trong dòng ị < TD

ALIGN = LEFT / CENTER / RIGHT VALIGN = TOP / MIDDLE / BOTTOM

COLSPAN = n ROWSPAN = n >

Néi dung cña « </ TD>

Trang 46

• Các thẻ định dạng bảng biểu

– ý nghĩa các tham s ố:

• ALIGN / VALIGN: Canh lề cho bảng

• BORDER: Kích thước đường kẻ chia ô trong bảng, được đo theo pixel.

• BORDERCOLOR: Màu đường kẻ

• BORDERCOLORDARK, BORDERCOLORLIGHT: Màu phía tối và phía sáng cho đường kẻ nổi.

• BACKGROUND: Địa chỉ tới tập tin ảnh dùng làm nền.

• BGCOLOR: Màu nền

• CELLSPACING: Khoảng cách giữa các ô trong bảng.

• CELLPADDING: Khoảng cách giữa nội dung và đường kẻ trong mỗi ô của bảng.

• COLSPAN: Chỉ định ô sẽ kéo dài trong bao nhiêu cột

• ROWSPAN: Chỉ định ô sẽ kéo dài trong bao nhiêu hàng

Language

Trang 47

– HTML Forms : C¸c HTML Form cã thÓ cã c¸c hép v¨n b¶n, hép danh s¸ch lùa chän, nót bÊm, nót chän

– T¹o Form: §Ó t¹o ra mét form trong tµi liÖu HTML, sö dông thÎ FORM víi có ph¸p nh sau:

Trang 48

• METHOD: Phương thức gửi dữ liệu.

• NAME: Tên của form.

• TARGET: Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.

Language

Trang 49

Language

Trang 51

CSS Cas cading Style Sheets

● Style giúp bạn giải quyết nhiều vấn đề

● HTML tag được thiết kế để định dạng cách hiển thị nội dung của một trang Web bằng cách định nghĩa như "đây là phần header",

"đây là một đoạn", "đây là một bảng",… Mỗi trình duyệt hiển thị nội dung trang Web theo cách riêng của mình dựa trên những định nghĩa đó

● Các trình duyệt thông dụng như Internet Explorer hay Netscape liên tục thêm các tag HTML mới của riêng mình vào danh sách các HTML tag chuẩn của W3C làm cho việc tạo lập các văn bản Web

để hiển thị độc lập trên mọi trình duyệt ngày càng khó khăn

● Để giải quyết vấn đề này, W3C (World Wide Web consortium- tổ chức chịu trách nhiệm tạo lập các chuẩn trên Web) tạo ra các STYLE cho HTML 4.0 Cả Netscape 4.0 và Internet Explorer 4.0 đều hỗ trợ Cascading Style Sheets.

Trang 52

● Style Sheet tiết kiệm nhiều công sức thiết kế

● Các Style trên HTML 4.0 định nghĩa cách mà các thành phần HTML được hiển thị Các Style thường được lưu trong các file độc lập với trang Web của bạn

● Các file CSS độc lập cho phép bạn thay đổi hình thức thể hiện và khuôn dạng của tất cả các trang trong Website thống nhất mà chỉ phải thực hiện thay đổi một lần.

● Style nào sẽ được dùng?

● Ta có thể nói rằng, các Style sẽ được sử dụng theo "lớp" (cascade) ưu tiên khi nhiều Style định nghĩa một thành phần HTML được tham chiếu trong một file HTML Thứ tự ưu tiên được sắp xếp từ cao xuống thấp:

● Style cho thành phần HTML cụ thể

● Style trong phần HEAD

● Style trong file CSS

● Mặc nhiên theo trình duyệt CSS Cas cading Style Sheets

Trang 53

● Cú pháp CSS

● Cú pháp của CSS gồm 3 phần: đối tượng, thuộc tính và giá trị:

Đối tượng {thuộc tính: giá trị}

● Đối tượng thường là các tag HTML mà bạn muốn định nghĩa cách hiển thị Thuộc tính là thuộc tính hiển thị của đối tượng đó Giá trị

là cách mà bạn muốn một thuộc tính hiển thị như thế nào Cặp {thuộc tính: giá trị} được đặt trong dấu {}

Body {color: black}

Trang 54

● Nếu giá trị gồm nhiều từ, đặt chúng trong dấu nháy đôi:

p {font-family: "sans serif"}

● Nếu bạn muốn định nghĩa nhiều thuộc tính của một đối tượng, phân cách các cặp thuộc tính: giá trị bằng dấu (;)

p {text-align: center; color: red}

● Để định nghĩa Style được dễ đọc hơn:

Trang 55

● Nhóm nhiều đối tượng

● Bạn có thể định nghĩa một Style cho nhiều đối tượng cùng một lúc:

h1, h2, h3, h4, h5, h6 { color: green }

● Thuộc tính Class

● Với thuộc tính Class, bạn có thể định nghĩa nhiều Style khác nhau cho cùng một đối tượng Ví dụ, bạn muốn có hai Style cho cùng một tag , nếu tag nào có class=right sẽ canh lề bên phải, class=center sẽ canh giữa:

p.right {text-align: right}

p.center {text-align: center}

Trang 58

● Thuộc tính ID

● Thuộc tính ID có thể dùng định nghĩa Style theo hai cách:

● Tất cả các thành phần HTML có cùng một ID

● Chỉ một thành phần HTML nào đó có ID được định nghĩa

● Ví dụ sau, Style dùng cho tất cả các thành phần HTML có

Trang 59

● Ví dụ sau, Style chỉ dùng cho thành phần nào có ID là

"intro" trong trang Web

Trang 61

● Sử dụng CSS trong trang HTML

● Làm thế nào chèn vào một Style Sheet

● Khi trình duyệt đọc một Style, nó sẽ định dạng nội dung trang Web theo Style

đó Có 3 cách để sử dụng Style trong một trang HTML

● Dùng file CSS riêng

● File CSS độc lập nên dùng khi Style được áp dụng cho nhiều trang Mỗi trang

sử dụng Style định nghĩa trong file CSS sẽ phải liên kết đến file đó bằng tag

Trang 62

● Định nghĩa các Style trong phần HEAD

● Các Style định nghĩa trong phần HEAD có thể dùng cho nhiều thành phần HTML trong trang Web đó Bạn sử dụng tag <Style>

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