Web application development · Web Development หรือ Web Programming คือการออกแบบ Software Application ที่ท างานบน Web Site (Web

Computer Science, CMU

Web application development


PART I



Web Development หรอ Web Programming คอการออกแบบ Software Application ทท างานบน Web Site (Web Applications: WebApps)

Web Development



สรางเวปเพจทท างานเหมอน twitter

มการควบคมสทธในการใชงานแอดมนสามารถ สราง แกไขหรอ ลบขอความได

ผเขาชมสามารถดไดอยางเดยว

ตกแตงหนาตาเวปใหสวยงาม

เพมเตมพเศษใหผชมสามารถเขยนคอมเมนทไดดวย

Project (mini-twitter)



Client-Server Model

Client-Server Model เปนโครงสราง application ทมการแยกสวนระหวางฝ งผใหบรการ หรอทรพยากร (Service Provider or Resource Provider) เรยกวา ฝ ง Server และ ผขอใชบรการ หรอทรพยากร (Service Requester or Resource Requester) นนๆ หรอเรยกวาฝ ง Client

โดยทวไปแลวการสอสารระหวาง Server และ Client จะท าผาน Computer Network โดยฝ ง Client จะเปนฝายเรมตนการสอสาร และ Server จะอยในสถานะรอการเชอมตอ (Connection)

Network model for web service


CLIENT-SERVER ARCHITECTURE FOR WEB SERVICE



สถาปตยกรรมแบบ Multi-tier (หรอ n-tier) คอสถาปตยกรรมแบบ Client-Server ทมการแยกการแสดงผล (Presentation) การประมวลผล (Application Processing) และการจดการขอมล (Data Management) ออกจากกนหนงในสถาปตยกรรมแบบ Multi-tier ทนยมใชกนอยางแพรหลายคอ แบบ Three-Tier โดยประกอบดวย 3 สวนคอ

Presentation Tier – User Interface (A PC)Application Tier – Handles the interaction between the Web browser client and the data storage tier. (A server)Data Storage Tier – Responsible for Data Storage (A database)

Three-Tier Architecture



Three-Tier Architecture [2]

The design of a three-tier client/server system



Web browser

คอซอฟทแวรทมหนาทรบขอมลจาก server มาประมวลและแสดงผล ภาษาหลกในการสอสารระหวาง server กบ web browser คอภาษา HTML

1st Tier: Presentation



TWO TYPES OF WEBPAGES



Static Web Page คอ เวบเพจทสรางขนมาจากภาษา HTML เพยงอยางเดยวจะมลกษณะเปนเวบเพจอยางงาย น าเสนอขอมลทเปนขอความภาพ และเสยงแบบธรรมดา ไมมการโตตอบกบผใช (Interactive)

Static Webpage



Dynamic Web Page คอ เวบเพจทมลกเลนตาง ๆ มการโตตอบกบผใช มการประมวลผลตาง ๆ มการตดตอกบฐานขอมล ไดแกเวบเพจทพฒนามาจากภาษา PHP, ASP, JSP, JavaScript, VbScript เปนตน

Dynamic Webpage


TWO PARADIGMS OF DYNAMIC WEB PROGRAMMING



Client-side programming เปนการเขยนโปรแกรมทท างานบนBrowser ทฝ ง Client

อยใน 1nd Tier ของ multi-tier architecture

ตวอยางเชน JavaScript เปน ภาษา Client-side scripting ทชวยให Web Developer สรางdynamic web page ทโตตอบกบผใชได (interactive)

ใชในการค านวณหรอตรวจสอบขอมลทไมซบซอน

Client-side programming



Server-side Programming เปนการเขยนโปรแกรมทท างานบนฝ ง Web Server

อยใน 2nd Tier ของ multi-tier architecture

สามารถใชภาษาเกอบทกภาษาเขยนไดผานระบบทเรยกวา CGI

แตทนยมมากกจะเปน scripting languageasp, php, ruby on rails

Server-Side Programming



PHP เปน Open Source programming languageOpen Source – software ท Code เปดเผยและผใชสามารถเปลยนแปลงได

ไมสามารถเขาถงหรอเปลยนแปลง browser ไดเหมอน Client Scriptท างานจากฝ ง web Server เทานน ไมวาจะเปนการประมวลผลหรอเชอมตอกบฐานขอมลท างานรวมกบ Web Server Application ไดหลากหลาย (Apache, IIS, etc.)Client-side script ใชเพอควบคม user interface และการค านวณทไมซบซอน ในขณะท Server-side script ใชเพอการประมวลผลทซบซอนและมการเชอตอกบฐานขอมล

Server side programming using PHP



ในการประมวลผลขอมล มความจ าเปนตองจดการขอมลจ านวนมากอยางมประสทธภาพ ซงโดยทวไป จ าเปนตองใช ฐานขอมล (Database)โดยฐานขอมลจะถกจดการโดยระบบจดการฐานขอมล (Database Management System: DBMS)MySQL (My S-Q-L) เปน DBMS ทไดรบความนยมเปนอนดบสองของโลก (July 2013: Wikipedia)

Open Source Owned By Oracle Free

3rd Tier: Database: MySQL



Summarising

JAVA SCRIPT PHP Interpreter MySQL



HTML เปนภาษาทใชในการเขยน Web Page ซงสามารถสรางใหแสดงผลใหอยในรปของตวอกษร ภาพนง ภาพเคลอนไหว เสยง และยงสามารถเชอมโยงไปยงเวบไซตอนๆในระบบ Internet

หนวยงานหลกทท าหนาทก าหนดมาตรฐาน HTML คอ World Wide Web Consortium (W3C)

HTML Introduction



HTML ยอมาจาก HyperText Markup LanguageHyperText คอ ขอความทมลงค (Hyperlink or Link) เชอมโยงกบขอความอน

Markup Language คอภาษาทประกอบดวย Markup Tags ตางๆ

HTML Introduction [2]



เอกสาร HTML จะประกอบดวย Tag และ ขอความ

<tagname>content</tagname>

ตว Tag รวมทงขอความระหวาง Tag เปดและปด รวมแลวเรยกวา HTML Element

เอกสาร HTML มนามสกลเปน .htm หรอ .html

HTML Tags



เนองจากมมาตรฐาน HTML อยหลาย Version ดงนนในแตละเอกสาร ควรตองระบดวยวาเปนเอกสาร (HTML หรอ XHTML) Version ใด

HTML Versions

Version Year

HTML 1991

HTML+ 1993

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 1.0 2000

HTML5 2014 <- This class

HTML5.1 *stable release in 2016



HTML5<!DOCTYPE html>

HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The <!DOCTYPE> Declaration

Tag <!DOCTYPE> ใชเพอประกาศชนดของเอกสาร HTML และ XHTML (รวมถง XML)



การเขยนเอกสาร HTML ประกอบไปดวยโปรแกรม 2 สวนEditor• เปนโปรแกรมทใชในการเขยนภาษา HTML เพอสราง Web Page

• ตวอยางเชน – Notepad (Text Editor)

– KompoZer (WYSIWYG: What You See is What You Get Editor)

– Adobe Dreamweaver (WYSIWYG Editor)

Web browser• เอาไวด web page ผลลพธทเขยนไว

การสรางเอกสาร HTML [1/2]



การสรางเอกสาร HTML [2/2]



เอกสาร HTML ประกอบดวย 2 สวน คอ สวนของค าสง คอ tag เขยนอยภายในเครองหมาย < > เชน <br> โดยการแสดงผลใน Webpage จะไมแสดง Tag เหลาน

สวนของขอความทตองการแสดงบน webpage

เราสามารถเรยกด HTML Tag บนแตละหนา Webpage บน Browser โดยการเรยก Menu “View Source” (Chrome) หรอ “View Page Source” (Firefox) เปนตน

เอกสาร HTML



Tag ม 2 แบบTag เดยว: Tag ทมค าสงเดยว สามารถใชงานค าสงได ณ ต าแหนงทเราระบ เชน <br>

Tag ค: Tag ทม 2 สวน คอ Tag เปด และ Tag ปด

โดย Tag ปดมรปแบบเหมอน Tag เปด แตมเครองหมาย / น าหนา

<ชอค าสง> ขอความทตองการแสดง </ชอค าสง>

เชน

<html> ขอความทตองการ </html>

เอกสาร HTML [2]



โดยปกตแลวเราสามารถเขยน HTML Tag ดวยตวพมพเลก (Lowercase) หรอตวพมพใหญ (Uppercase) กได

<HTML> <html>W3C แนะน าใหใชตวพมพเลกใน HTML4 และ บงคบใหใชตวพมพเลกใน XHTML

HTML Tags



ในการเขยนเอกสาร HTML 1 หนา จะตองประกอบไปดวยค าสงหลกอย 4 ค าสง

<html>…</html> เปนค าสงทท าหนาทบอกจดเรมตน และจดสนสดของเอกสาร HTML

<head>…</head> เปนค าสงทท าหนาทก าหนดสวนหวเรอง

<title>…<title> เปนค าสงทก าหนดขอความทตองการ แสดงผลบนแถบชอเรอง

<body>…</body> เปนค าสงทท าหนาทก าหนดขอความและรปแบบค าสงใดๆ ทตองการปรบแตงเอกสารบนสวนของจอภาพ และจะแสดงผลบนจอภาพเมอถกเรยกใชจาก Web Browser

โครงสรางภาษา HTML



<html>

<head>

<meta charset="utf-8"/><title>

ขอความทตองการแสดงผลบน Title Bar</title>

</head>

<body>

ขอความและค าสงใดๆทตองการปรบแตงเอกสารบนสวนของจอภาพ</body>

</html>

โครงสรางภาษา HTML [2]


PHP - BASICS



PHP standard ทใชในปจจบนเปน PHP 5.x หรอ PHP 5

เราสามารถใส PHP script ไวทสวนไหนของไฟล PHP กไดโดยสวนทเปน PHP script จะมเครองหมาย <?php ?>

ลอมรอบโดยการประมวลผล จะเกดขนกบ code ทอยระหวาง Tag เปดและปดนเทานน

ในกรณทไฟลนนไมม content อนๆ นอกจาก PHP code (pure PHP Code) ไมควรตองใส tag ปด ?>

PHP Basics: Syntax



Content ของไฟลทอยนอก Tag เปดและปดจะไมไดรบการประมวลผล

ท าใหเราสามารถแทรก content อนๆ เชน HTML ลงในไฟล PHP ได

<p>This is going to be ignored by PHP</p><?php echo 'While this is going to be parsed.'; ?>

<p>This will also be ignored by PHP</p>

echo เปนค าสง PHP ทใชแสดงขอความทอยในเครองหมายค าพด(e.g. "text" หรอ 'text' )

PHP Basics: Syntax [2]

Ref: http://us3.php.net/manual/en/language.basic-syntax.phptags.phpWeb application development

http://us3.php.net/manual/en/language.basic-syntax.phptags.php


แตละบรรทดของค าสงในภาษา PHP ตองจบดวยเครองหมาย ;<?php echo 'My name is John'; ?>

ชอค าสงหรอฟงกชน (function) ในภาษา PHP มลกษณะ case insensitive คอไมมความแตกตางของตวพมพเลกหรอพมพใหญ (echo = EcHo = ECHO…)

แตตวแปรในภาษา PHP เปน แบบ case sensitive$var

$VaR

$vAr

PHP Basics: Syntax [3]

Three different variablesThree different variables

Ref: http://us3.php.net/manual/en/language.basic-syntax.phptags.phpWeb application development

http://us3.php.net/manual/en/language.basic-syntax.phptags.php


Variable หรอตวแปรใชเพอเกบขอมล ในโปรแกรม เชน<?php

$x = 5;$y = 6;$z = $x + $y;echo $z; // print out z

?>

ลกษณะการ แทนคา หรอการค านวณ เหมอนในวชาคณตศาสตร

ตวแปรใน PHP ตองขนตนดวย $ เสมอ

ชอตวแปรตองประกอบดวยตวอกษร (aA-zZ) ตวเลข (0-9) และ underscore (_) ขนตนดวยตวอกษร หรอ underscore เทานน

PHP Basics: Variables

x = 5y = 6z = x + yz = …

x = 5y = 6z = x + yz = …



Comments หมายถงสวนใดๆ ของ code ทไมถอเปนค าสงแตใสไวเพอเปนการอธบาย code เพอสะดวกในการท าความเขาใจ Code

ตวอยาง<?php

echo 'This is a test'; // This is a one line comment/* This is a multi line comment

yet another line of comment */echo 'This is yet another test';echo 'One Final Test'; # This is a one-line comment

?>

PHP Basics: Comments



Arithmetic

PHP Basics: Operators

Example Name Result

-$a Negation (นเสธ) Opposite of $a.

$a + $b Addition (การบวก) Sum of $a and $b.

$a - $b Subtraction (การลบ) Difference of $a and $b.

$a * $b Multiplication (การคณ) Product of $a and $b.

$a / $b Division (การหาร) Quotient of $a and $b.

$a % $b Modulus (การหารเกบเศษ)

Remainder of $a divided by $b.



Example Name Result

$a == $b Equal TRUE if $a is equal to $b after type juggling.

$a != $b$a <> $b

Not equal TRUE if $a is not equal to $b after type juggling.

$a < $b Less than TRUE if $a is strictly less than $b.

$a > $b Greater than TRUE if $a is strictly greater than $b.

$a <= $b Less than or equal to TRUE if $a is less than or equal to $b.

$a >= $b Greater than or equal to

TRUE if $a is greater than or equal to $b.

Comparison

PHP Basics: Operators [2]



Assignment: การก าหนดคาให variable ตางๆ ท าไดโดยการใชเครองหมายเทากบ =

การก าหนดคา จะอยในรปแบบของการน าคาทอยดานขวา ของ operator ไปใสใน variable ทอยดานซาย เชน

$a = 3;$b = "Hello ";

$a 3

PHP Basics: Operators [3]

Assignment Same as

$a += $b $a = $a + $b

$a -= $b $a = $a - $b

$a *= $b $a = $a * $b

$a /= $b $a = $a / $b

$a %= $b $a = $a % $b

… …


PHP - CONTROL STRUCTURES



Control Statement มเพอก าหนดเงอนไขในการท าตามค าสงเลอกท างานหรอไม เพยงครงเดยว เชน if, if..else, elseif, switch

เลอกท างานแบบวนซ า เชน for, while, do..while

สวนประกอบของ Control Statementค าสงควบคม (If, while, for,…)

เงอนไข (expr)

ค าสง/กลมของค าสงทตองการ(statement)

PHP Control Statement: Basics

if (expr) statement

while (expr) statement

for (expr1,expr2, expr3) statement



Syntax

Alternative Syntax

PHP Control Statement:if, if..else, elseif

if (expr){statement;

}

if (expr){statement_A;

} else {statement_B;

}

if (expr_1){statement_A;

} elseif (expr_2){statement_B;

}else {statement_C;

}

if (expr_1):statement_A;

elseif (expr_2):statement_B;

else:statement_C;

endif;

*Note: Mixing syntaxes in the same control block is not supported.*Note: Mixing syntaxes in the same control block is not supported.



Boolean value = TRUE, FALSE

สามารถสรางเงอนไขไดในรปแบบตางๆ เชนคาของตวแปร ($a), (!$b)

Comparison operator ($a == 10), (++$a > 1)

ผลลพทของฟงกชน is_string($val), isset($val), empty($val), is_null($val)

Logical Operator ($a >0) || ($b < 1), (0>$a) && ($a < 5)

Conditional expression (expr)



มาลองเตมโคดทกลาวค าทกทายไดถกตองตามชวงเวลาตอไปนใหสมบรณ

Exercise 1

<?php

date_default_timezone_set("Asia/Bangkok");$dd = date("H");

...

?>



ฟงกชน date_default_timezone_set("Asia/Bangkok")เอาไวใชบอกให php รวาเราอยในเขตเวลาไหน

ในกรณน เราบอกวา เราอยทวป Asia เมอง Bangkok

ฟงกชน date("H")เอาไวเรยกวนทหรอเวลาปจจบน

การระบรปแบบของผลลพธท าไดโดยก าหนดคาของตวแปรขาเขา

H เปนการระบวา ใหฟงกชนบอก hour of the day ในรปแบบ 24 ชวโมง

ถาใช h (อกษรตวเลก) เราจะได hour of the day ในรปแบบ 12 ชวโมง

+ Note +



สามารถท างานไดเหมอน if..elseif

PHP Control Statement:Switch/Case

if ($i == 0) {echo "i equals 0";

} elseif ($i == 1) {echo "i equals 1";

} elseif ($i == 2) {echo "i equals 2";

}

switch ($i) {case 0:

echo "i = 0";break;

case 1:echo "i = 1";break;

case 2:echo "i = 2";break;

default:echo “no match any cases";

}



<?phpswitch ($i) {

case "apple":echo "i is apple";break;

case "bar":echo "i is bar";break;

case "cake":echo "i is cake";break;

}?>

<?phpswitch ($i) {case 0:case 1:case 2:

echo "i is less than 3 butnot negative";

break;case 3:

echo "i is 3";}?>

Switch..Case: Example



จงปรบปรงโปรแกรมกอนหนาน ใหแสดงผลเวลาเปนค าในภาษาไทย

ดงตาราง ถา $dd เทากบ 1 ใหแสดงผลวา ต 1 ไลไปเรอยๆ ถง ต 5

ถา $dd เทากบ 6 ใหแสดงวา 6เชา ไปเรอยๆถง 11โมงเชา

ถา $dd เทากบ 12 ใหแสดงวา เทยงวน

ถา $dd เทากบ 13 ใหแสดงวา บาย 1 โมง ไปเรอยๆถง บาย 5 โมง

ถา $dd เทากบ 18 ใหแสดงวา หกโมงเยน

ถา $dd เทากบ 19 ใหแสดงวา 1 ทม ไลไปเรอยๆ จนถง 5 ทม

ถา $dd เทากบ 0 ใหแสดงวา เทยงคน

Exercise 2



Loop เปนค าสงการวนท างานตามเงอนไขทก าหนด

ค าสงวนลปใน PHP ประกอบดวยwhile เชคเงอนไขกอนท างาน

do..while ท างานกอนเชคเงอนไข

for ก าหนดคาและเชคเงอนไขกอนท างาน

foreach ใชรวมกบตวแปรประเภท array

ค าสงเพอกระโดดออกจากลปเปนกรณพเศษBreak; Continue;

PHP Control Statement:Loop



สวนประกอบทส าคญก าหนดคาเรมตนของเงอนไข

ตรวจสอบเงอนไข

ชดค าสงทตองการท างานแบบลป

ปรบปรงคาเงอนไข

PHP Control Statement:Loop[2]



Syntax Example

PHP Control Statement: while

while (expr):statement;...

endwhile;

while (expr){statement;...

}

OR

<?php$i = 1;

while ($i <= 10){

echo $i;$i++;

}

?>

1.ก าหนดคาเรมตน

2. ตรวจสอบเงอนไข

4.ปรบปรงคาเงอนไข

3. ค าสงทตองการวนลป



Sourcecode<?php

$x=1;

while($x<=5){

echo "The number is: $x <br>";

$x++;

}

?>

ResultThe number is 1The number is 2The number is 3The number is 4The number is 5

PHP Control Statement: while[2]



Syntax Example

PHP Control Statement: do while

do{statement;...

} while (expr);

<?php$i = 1;

do{echo $i;$i++;

} while ($i <= 10);

?>

ก ำหนดคำเรมตน

ตรวจสอบเงอนไข

ปรบปรงคำเงอนไข

ค ำสงทตองกำรวนลป



Sourcecode<?php

$x=6;

do{

echo "The number is: $x <br>";

$x++;

} while($x<=5);

?>

ResultThe number is 6

PHP Control Statement: do while[2]



Syntax

Example

PHP Control Statement: for

for (init;expr;update){statement;...

}

for (init;expr;update):statement;...

endfor;

OR

for ($i = 1; $i <= 10; $i++){echo $i;

}

Init –ก าหนดคาเรมตนของลปexpr- เงอนไขทตรวจสอบupdate - การปรบปรงคา



Sourcecode<?php

for($x=0;$x<5;$x++){

echo "The number is: $x";

}

?>

ResultThe number is 0The number is 1The number is 2The number is 3The number is 4

PHP Control Statement: for[2]



จงเขยนโปรแกรมเพอแสดงค าวา cuckoo เทากบคาของชวโมงทไดจาก function date()

แสดง cuckoo แตละครงใหเวนบรรทดดวย

Exercise 3



ใชส าหรบท างานกบขอมลทเกบไวในตวแปร Array

Syntax

PHP Control Statement: foreach

foreach (array_expression as $value){statement

}

foreach (array_expression as $key => $value){statement

}

ส าหรบ Array ทมการก าหนด value เพยงอยางเดยว

ส าหรบ Array ทมการก าหนด key และ Value



Sourcecode<?php

$colors =array("red","green","blue","yellow");

foreach ($colors as $value)

{

echo "$value <br>";

}

?>

Resultredgreenblueyellow

PHP Control Statement: foreach[2]



Sourcecode<?php

$age = array("Peter"=>"35","Ben"=>"37","Joe"=>"43");

foreach($age as $x=>$x_value){

echo "Key=".$x.", Value=".$x_value;

echo "<br>";

}

?>

ResultKey=Peter, Value=35Key=Ben, Value=37Key=Joe, Value=43

PHP Control Statement: foreach[3]



เปนค าสงในการออกจากลป หรอโครงสราง if/switch

PHP Control Statement: break; and continue;

while ($a) { <--------------------┐

continue; --- goes back here --┘

break; ----- jumps here ----┐

} | <--------------------┘

switch ($a) {

case 0: continue;

case 1: break;

}

----- both jumps here -----┐|

|<-------------------------┘



Sourcecode<?php

$i = 10;

while (--$i){

if ($i == 8){

continue;

}if ($i == 5){

break;

}

echo $i . "\n"

}

?>

Result976

PHP Control Statement: break and continue[2]


HTML - FORM



เขยนโปรแกรม PHP เพอสรางเอกสาร HTML

รบขอมลจาก Form แลวประมวลผล แลวสรางเอกสาร HTMLขนมาโตตอบ

PHP-HTML



text input checkbox radio file

resetsubmit textareaselect

ฟอรมในเอกสาร HTML คอสวนหนงของเอกสาร ทมหนาทสงขอมลไปยง Server โดยนอกจาก Element ปรกต แลวยงประกอบดวย Element พเศษ ทเรยกวา Control

Control คอ Element ทใชโตตอบ (Interact) กบ User ซงมหลายชนดไดแก

HTML Forms and Input



Tag <form> ใชเพอการสรางฟอรม (โดยทตว Tag จะไมแสดงผลใน browser) การสรางฟอรมสามารถท าไดในรปแบบ<form action="http://somesite.com/action.php">.input elements.</form>

Attribute action ใชก าหนด URI ของ script ทจะด าเนนการเมอมการ submit ฟอรม

Tag <input> ใชระบ Control Elements ชนดตางๆ เพอรบขอมลจากฝ ง user

HTML Forms and Inputs



text ใชรบ Input แบบบรรทดเดยวจาก User หากตองการรบ input หลายๆ บรรทด ใหใช textarea แทน (text default size = 20 ตวอกษร)<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname">

</form>

OutputAttribute name (control name) ใชเพอตงชอ element เพอการอางอง ผานscript หรอ CSS

HTML Control Elements [1]

*กรณตองการรบ input แบบซอนขอความ เชน password ใหใช type เปน password<input type="password"…



textarea ใชรบ Input แบบหลายบรรทดจาก User โดยม attribute เชนrows ก าหนดจ านวนบรรทด

cols ก าหนดความกวางเปน character<form action="demo_form.asp" id="usrform">Name: <input type="text" name="usrname"><input type="submit">

</form><textarea name="comment" form="usrform">Enter text here...

</textarea>

Output


*textarea อยนอก Tag <form> แตถอเปนสวนหนงของ form และอางถง form id โดยใช attribute form



checkbox – มลกษณะเปนสวทชเปด/ปด (on/off) ท User ก าหนดคาคา "on" เกดขนเมอ checkbox นนๆ มคา Attribute "checked"

user สามารถเลอกไดมากกวา 1 checkbox

checkbox หลายๆ อนสามารถใช control name รวมกนได <form><input type="checkbox" name="vehicle[]" value="Bike">I have a

bike<br><input type="checkbox" name="vehicle[]" value="Car">I have a

car</form>

Output


Attribute value คอคาทจะถกสงไปยง script เมอมการ submit ฟอรม (ในกรณน จะเปนคาของตวแปรชอ vehicle)

Example From: http://w3schools.com/html/html_forms.aspWeb application development

http://w3schools.com/html/html_forms.asp


radio ใชรบ Input ลกษณะเดยวกบ checkboxUser สามารถเลอกไดเพยง 1 ตวเลอกเทานนจาก control name 1 ชอ

<form><input type="radio" name="sex" value="male"

checked>Male<br><input type="radio" name="sex" value="female">Female

</form>

Output

Attribute checked ก าหนดคา default ของตวเลอก (ใชไดเฉพาะ radio และ checkbox)


Example From: http://w3schools.com/html/html_forms.aspWeb application development

http://w3schools.com/html/html_forms.asp


file ใชรบ Input ทมลกษณะเปนการเลอกไฟลผาน User Interface ของ browser<form>Select File: <input type="file" name="filename"><br>

</form>

Output

hidden ใชสงขอมลทไมแสดงผลให user เหนไปกบขอมลอนๆของฟอรม<form><input type="hidden" name="form_page" value="3">

</form>


Ref: http://www.w3.org/TR/html401/interact/forms.htmlWeb application development

http://www.w3.org/TR/html401/interact/forms.html


buttons – ปมทอยใน form ม 3 ประเภทไดแกsubmit button – สง form ไปยง Server (type="submit")

reset button – ลางขอมลใน form กลบไปเปนคา default (type="reset")

push button – ไมมหนาทตายตว Developer สามารถผก button เขากบClient-Side Script เพอใหท างานตางๆ กนได (type="button")

เราสามารถสรางปม โดยใช Tag <button> หรอ <input> กได<form name="input" action="action.php" method="get">

Username: <input type="text" name="user"><input type="submit" value="Submit">

</form>

Output


*Notice the method attribute



การสงฟอรม (Form Submission) สามารถท าไดสองวธ สงผาน Method get • ขอมลทสงไปจะสงไปในลกษณะเปนสวนตอของ URI ทระบใน attribute

action คนดวยเครองหมาย ? และ & เชน– http://www.somesite.com/login.php?user=adam&password=1234

สงผาน Method post• ขอมลจะไมแสดงบน URI ท าใหปลอดภยกวาและรองรบปรมาณขอมลทมากกวา

The method Attribute



Tag select ใชรบ Input ในลกษณะ dropdown menu มลกษณะการท างานเหมอน radio button โดยม attribute ดงน

size ก าหนดจ านวนตวเลอกทแสดง (แสดงผลเปนลกษณะ scroll box)multiple ก าหนดใหสามารถเลอกไดมากกวา 1 ตวเลอก

<form><select name="car">

<option value="volvo">Volvo</option><option value="saab">Saab</option><option value="mercedes">Mercedes</option><option value="audi">Audi</option>

</select></form>

Attribute name (control name) ใชเพอตงชอ element เพอการอางอง ผานscript หรอ CSS


Example From: http://www.w3schools.com/tags/tag_select.asp

Output


http://www.w3schools.com/tags/tag_select.asp


Tag fieldset ใชเพอจดหมวดหม Element ทเกยวของกนในฟอรม<form>

<fieldset><legend>Personalia:</legend>Name: <input type="text"><br>Email: <input type="text"><br>Date of birth: <input type="text">

</fieldset></form>

Output

HTML <fieldset> Tag

Example From: http://www.w3schools.com/tags/tag_fieldset.asp


http://www.w3schools.com/tags/tag_select.asp


สรางฟอรมดวย HTML ทมชองไวกรอกน าหนกและสวนสง

สรางปมกดดวย

Exercise 4


PHP-FORM PROCESSING



Variable จากแหลงภายนอกเมอมการสง Form ดวยวธ GET หรอ POST ไปยง php script เราสามารถเขาถงคาตางๆ หรอ ขอมลทสงมาไดโดยการเรยก variable $_POST['variable_name'] หรอ $_GET['variable_name']

ตวอยาง HTML form<form action="greeting.php" method="post"> Name: <input type="text" name="username" /><br/> Email: <input type="text" name="email" /><br/> <input type="submit" name="submit" value="Submit me!" />

</form>

PHP Basics: Variables [2]



Variable จากแหลงภายนอก [2]<head><meta charset="utf-8" /><title>Greetings!></title>

</head><body>Hello <?php echo $_POST["username"]; ?><br/> Your email address is: <?php echo $_POST["email"]; ?>

</body>

เราสามารถใช " " หรอ ' ' กไดในการดงคาทถกสงมากบฟอรมผาน variable $_POST (หรอ $_GET)

PHP Basics: Variables [3]

Hello, John

Your email address is: [email protected]

Hello, John

Your email address is: [email protected]



จงสรางโปรแกรมเพอค านวณคา ดชนมวลกาย (BMI) ของผใช โดยโปรแกรมมฟอรมเพอ ใหผใช กรอกชอ น าหนกและสวนสงจากนน BMI สามารถค านวณไดจากสตร

BMI = น าหนก หารดวย สวนสงยกก าลงสอง

จากผลการค านวณใหแสดงผลดงตอไปนถา BMI < 20 ใหแสดงผลวา Underweightถา BMI อยระหวาง 20 ถง 24.9 ใหแสดงวา Normalถา อยระหวาง 25 ถง 29.9 ใหแสดงวา Overweightถามากกวาน ใหแสดงวา You are fat

Exercise 5: HTML-Form & PHP basic


PHP - FUNCTION



PHP Function: Function Type

ฟงกชน (Function) เปนกลมของค าสงสามารถเรยกใชเปนชด Predefined Function เปนฟงกชนทอยใน libraries ของ PHP แลว สามารถเรยกใชงานไดทนท เชน• การเชอมตอฐานขอมล

• การท างานเกยวกบตวแปรประเภทตางๆ เชน String, Array

• รปแบบการแสดงผล Date-Time

• ตรวจสอบคาของตวแปร (Variable Handling- isset(), empty() )

User defined Function เปนฟงกชนทผใชงานเขยนขนเองเพอสามารถเรยกใชซ าได



PHP: User-defined Functions

เปนฟงกชนประเภททโปรแกรมเมอรสามารถเขยนขนเอง โดยมการระบรปแบบตวแปรรบเขาและสงออก (parameter andreturn type)

ประโยชนใชเพอแตกปญหาเปนงานยอยๆ ทมขอบเขตชดเจน

สามารถเรยกใชงานซ าๆไดโดยใชโคดชดเดม

งายตอการแกไขโปรแกรม



The Need of Function

ใหแสดงผลการค านวนเสนผาศนยกลาง, เสนรอบวงและพนท ของ วงกลมทมรศม = 2โดย = 3.14

Simple Calculation

<?php

//หาเสนผาศนยกลาง$radius=2;$diameter = 2*$radius;echo “Diameter = ”. $diameter;

//หาเสนรอบวง =2r = d

$perimeter= 2*3.14*$radius;echo “Perimeter = ”. $perimeter;

//หาพนทวงกลม=r2$area= 3.14*$radius*$radius;echo “Area = ”. $area;?>



The Need of Function

ใหแสดงผลการค านวณ เสนผาศนยกลาง, เสนรอบวงและพนท ของ วงกลมทมรศมดงตอไปน โดยให = 3.14

Radius = 2, 4, 5, 7, 11

จากตวอยางโคดกอนหนา เราตองเขยนซ า 5 ครงโดยเปลยนตวแปรคา radius ไปเรอยๆ

เสยเวลา

ถามการแกไขหรอเพมเตม เราตองแกทงหมด

ถาลมแกไขคา radius ผลลพทกไมถกตอง



PHP: User-defined Functions

จากโจทย ใหค านวณคา เสนผาศนยกลาง, เสนรอบวงและพนทวงกลม

แตกปญหาออกเปนค านวณเสนผาศนยกลาง

ค านวณเสนรอบวง

ค านวณพนทวงกลม

แสดงผลการค านวณ

การท าซ าส าหรบคา R ทเปลยนไป



PHP: Definition of Function

Syntax of Function<?php

//define a function

function name_of_function(parameters) {

statement_1;

statement_2;

return (); //อาจมหรอไมมไดขนกบรปแบบการท างาน}

// call a function

name_of_function(parameters);

?>



<?php

define("PI",3.14);

//หาเสนผาศนยกลางfunction diameter($r){

return 2*$r;

}

//หาเสนรอบวง =2r = d

function perimeter($r){

return (2*PI*$r);

}

//หาพนทวงกลม=r2function area($r){

return (PI*$r*$r);

}

$circleList =array(2,4,5,7,11);

foreach($circleList as $r){

echo "R: ". $r."<br>";

echo "Diameter :". diameter($r)."<br>";

echo "Perimeter :". perimeter($r)."<br>";

echo "Area :". area($r)."<br>";

}

?>

Circle Function



PHP Function: Parameter and Return Type

ฟงกชนประกอบดวยสวนค าสงในฟงกชน -ชดค าสงทตองการใหโปรแกรมท างานในฟงกชนนนๆ

พารามเตอร - คาตวแปรทรบเขามาค านวนในฟงกชน

การคนคา – ผลลพททไดจากฟงกชน (อาจมหรอไมมกได)



PHP Function: Parameter

การรบคาพารามเตอรของ PHP มไดสองแบบPass by Value –สงคาของตวแปร

Pass by Reference – สงคาทอยของตวแปร

function swap(&$a, &$b) {

function add($a, $b) {

Pass by Reference

Pass by Value



จงท าการปรบปรงโปรแกรม BMI โดยใหยายขนตอนการค านวณBMI เขาไปอยในฟงกชนทช อ compute_bmi()ตวอยาง

<?php

…

$bmi = compute_bmi(x,y,z)

…

?>

Exercise 6


PHP - STRING



ในภาษา php ไมจ าเปนตองมการประกาศตวแปร (variable decelerations) กอนน ามาใชงาน

ชนดของ variable (data type) ขนอยกบขอมลทเกบใน variable

เราสามารถก าหนดคาใหกบตวแปรแบบ String ดงน$stringVar = "There are 8 data types in PHP"; // String

PHP: String (Recap.)

Note: string can be as large as up to 2GB (2147483647 bytes maximum)



Double quoted “ ”$stringA = “Construct String using double quoted";

Single quoted ‘ ’$stringB = ‘Construct String using single quoted’;

Heredoc Syntax <<<$stringC = <<< endConstruct String using Heredoc Syntax end;

PHP: Construct a String



ในการใช single quote ในการสราง string นน, อกขระพเศษหรอ variable ทอยระหวางเครองหมาย ' ' จะไมไดรบการประเมนคา แตจะเปนการ assign คาไปยง string นนตามทพมพ แตหากเปน string ทสรางดวย double quote " " จะมการประเมนคากอนแลวจง assign คา

$myName = 'John';

echo 'Hello, there. \tMy name is $myName'

echo "Hello, there. \tMy name is $myName"

PHP: Single vs Double Quotes

Hello, there. \tMy name is $myName

Hello, there. My name is John

tab



Concatenation operator (.)

<?php

$Destination = "Paris";

$Location = "France";

$Destination = $Destination . “ is in ”. $Location . ".";

echo $Destination;

?>

Result: Paris is in France.

PHP: String Operator



ในกรณทตองการใสอกขระพเศษในสตรงทตองการ สามารถใช\ ในการก าหนดตวอกขระทตองการได เชน

echo "\“Apple\” is a healthy fruit.";

Result “Apple” is a healthy fruit.

PHP String: Escape Character



เราสามารถจดการกบ String ไดโดยใชฟงกชนของ PHP

String Function ชวยใหการแสดงผลในหนา HTML ท าไดงายขน

ตวอยางประเภทของ String Function

PHP: String Function

substr() แสดง String ตามชวงความยาวทตองการ

substr_compare() เปรยบเทยบสวนของ String

substr_count() นบจ านวน String ทปรากฏในเอกสาร

substr_replace() แทนคา String ทเจอดวยค าทตองการ

trim() ตดสวนทเปน Whitespace ทงดานหนาและดานหลง


http://www.w3schools.com/php/func_string_substr.asp

http://www.w3schools.com/php/func_string_substr_compare.asp

http://www.w3schools.com/php/func_string_substr_count.asp

http://www.w3schools.com/php/func_string_substr_replace.asp

http://www.w3schools.com/php/func_string_trim.asp


ส าหรบฟงกชนทมกใชงานกบ String สามารถแยกเปนกลมๆ ไดดงน

ฟงกชนการแสดงผล เชน echo(); print();

เปรยบเทยบหรอตรวจสอบคา เชน substr_compare(); isset(); isstring();

ตดหรอตอสตรง เชน substr();

คนหาและแกไขสตรง เชน strpos(); substr_replace();

รปแบบการแสดงผล เชน strtoupper(); strtolower();

PHP: String Function



substr();Syntax : substr($mainstring, start, length);

Samplecode

<?php

$stringA = "There are 8 data types in PHP";

$substringA = substr($stringA,6,3);

Echo $substringA

?>

Result: are

PHP Function: substr();



ใชคนหาตวอกษร หรอสตรงทตองการในสตรงหลก

Syntax : strpos($stringA, “a”);

Return Value: คาต าแหนงของอกขระทตองการ

หากไมเจอ จะ return เปน False$Email = "[email protected]";

$NameEnd = strpos($Email, "@"); //หาต าแหนง @

echo "<p>The name portion of the e-mail address is '" .

substr($Email, 0, $NameEnd) . "'.</p>"; //ใชต าแหนง @ มาใชในการตดสตรง

Result: The name portion of the e-mail address is president

PHP Function: strpos();



จงออกแบบโปรแกรมเพอรบ email address เปนขอมลเขาแลวตรวจสอบวา email นน เปน email ของ google หรอไม แลวแสดงผลวา valid หรอ invalid ทางหนาเวป

ก าหนดให email ท valid มลกษณะดงตอไปนเปน email ทมเครองหมาย @ ตวเดยว

เครองหมาย @ ตองไมใชตวแรกในชอ email

หลงจากเครองหมาย @ จะตองตามดวย google.com

ค าวา google.com เปนแบบ case insensitive นนคอ GOOGLE.COM หรอ gOOgLE.com หรอ Google.com ถอวาเปน email ท valid

Exercise 7: Function & String


PHP-ARRAY



Array คอ ชดของขอมลทมการเรยงกนอยางเปนล าดบ

ขอมลทอยใน Array จะเรยกวา Element

การอางองถง Element จะมการระบ Key ไวในตวแปร Array<?php

$arrayA = (“one”, “two”, “three”);

echo $arrayA[‘2’];

?>

Result: two

PHP: Array (Recap.)



ก าหนดคาใหตวแปรแบบไมม Key$name[] = “Andrew”;

$name[] = “Steve”;

$name[] = “Charlie”;

ใชค าสง array();$name = array(“Andrew”, “Steve”, “Charlie”);

ก าหนดคาใหตวแปรแบบม Key$name[“A”] = “Andrew”;

$name[“B”] = “Steve”;

$name[“C”] = “Charlie”;

ใชค าสง array();$name = array(“A” => “Andrew”, “B” => “Steve”, C => “Charlie”);

PHP: Construct an Array

Key Value

1 Andrew

2 Steve

3 Charlie

Key Value

A Andrew

B Steve

C Charlie



Array Function เปนกลมฟงกชนทจะท างานเพอจดการขอมล (Element) ทอยในตวแปร Array

วนลปเพอจดการคาใน Array (foreach, each)

แปลงคาในอาเรยใหเปนสตรง (implode)

การรวมอาเรย (merge and combine)

เรยงขอมลในอาเรย (sort)

PHP: Array Function



Sourcecode<?php

$colors = array("red","green","blue","yellow");

foreach ($colors as $value)

{

echo "$value <br>";

}

?>

Resultredgreenblueyellow

PHP Array: foreach (Recap.)



Sourcecode<?php

$age = array("Peter"=>"35","Ben"=>"37","Joe"=>"43");

foreach($age as $x=>$x_value){

echo "Key=".$x.", Value=".$x_value;

echo "<br>";

}

?>

ResultKey=Peter, Value=35Key=Ben, Value=37Key=Joe, Value=43

PHP Array: foreach (Recap.)



One Two Three Four Five

Array Traversal

reset($arrayA);

foreach($arrayA);

current($arrayA);

end($arrayA);

next($arrayA);previous($arrayA);

each($arrayA);



<?php

$colors = array("red","green","blue","yellow");

echo " foreach" ;

foreach ($colors as $key =>$value){

print $key . " : ".$value ."<br>\n";

}

reset($colors);

echo " while..each" ;

while($val = each($colors)){

print $val["key"]. " : ".$val["value"]."<br>\n";

}

?>

PHP Array: loop with each();

foreach0 : red1 : green2 : blue3 : yellowwhile..each0 : red1 : green2 : blue3 : yellow



Implode() เปนการรวม Elements ใน Array ใหเปน String

Syntax : implode(string glue, array pieces);<?php

$arrayWord = (“This”, “is”, “a”, “cat”);

$sentence=implode(“ ”, $arrayWord);

echo $sentence;

?>

Result: This is a cat

Array to String: implode();



เปนฟงกชนในการจดการขอมลซ าทอยในอาเรย

Example<?php

$colors = array("red","green","blue",“red”,“green”,“yellow”);

$COLOR = array_unique($colors);

?>

PHP Array: array_unique();

$colors

red

green

blue

red

green

yellow

$COLOR

red

green

blue

yellow



เปนฟงกชนการรวม element ในหลาย Array ใหเปน Arrayเดยวกน

รปแบบการใชงาน$arrayA+ $arrayB***

array_merge($arrayA , $arrayB);***

*** สองกรณนจะใหผลตางกนในกรณท Array ทน ามารวมกนมการเซตคา key ซ ากน

PHP:Array merge



<?php

$arrayA = array("a" => "apple", "b" => "bee", "c" => "cat");

$arrayB = array("b" => "boy", "c" => "cat", "d" => "dog");

$arrayResult = $arrayA+ $arrayB;

$arrayMerge = array_merge($arrayA, $arrayB);

echo "+<br>";

foreach ($arrayResult as $key => $a){

print "[$key] : $a<br>\n";}

echo "merge<br>";

foreach ($arrayMerge as $key => $a){

print "[$key] : $a<br>\n";

}

?>

PHP:Array merge

+[a] : apple[b] : bee[c] : cat[d] : dogmerge[a] : apple[b] : boy[c] : cat[d] : dog



เปนฟงกชนใชเพอรวมอาเรย 2 ชด ในลกษณะ key->value

Syntax: array array_combine ( array $keys , array $values );

<$php

$country = array (“Thailand”, “Japan”, “Taiwan”);

$capital = array(“Bangkok”, “Tokyo”, “Taipei”);

$ListA = array_combine($country, $capital);

?>

PHP Array: array_combine();

$ListA

Key Value

Thailand Bangkok

Japan Tokyo

Taiwan Taipei



Function Meaning

sort() จดเรยง Value และ Key ในอาเรยจากนอยไปมาก

rsort() จดเรยงValue และ Key ในอาเรยจากมากไปนอย

asort() จดเรยง Value ในอาเรยจากนอยไปมาก

arsort() จดเรยง Value ในอาเรยจากมากไปนอย

ksort() จดเรยง Key ในอาเรยจากนอยไปมาก

krsort() จดเรยง Key ในอาเรยจากมากไปนอย

PHP Array: Sorting Function



สรางฟอรมเพอรบจ านวนตวเลข n เขามา

เมอ user ท าการ submit ใหประมวลผลโดยการ สรางฟอรมอกหนงอนซงมจ านวนชองใหใสตวเลข n ชอง

เมอ user ใสตวเลขครบทง n ตวและท าการ submit แลว

ใหประมวลผลโดยการหา คา max คา min และคาเฉลยของตวเลขเหลานน

Exercise 8: PHP Array and control statement


PART II


PHP-SESSION



การสงขอมลระหวาง webpage จะตองอาศย form เปนตวกลางในการสงขอมล ซงหากเราตองการใชขอมลในwebpage หลายๆหนา เราตองสราง form ทกครง อกทงไมสามารถใช <a></a> ในการลงคไปหนาอนๆได (เนองจากขอมลจะไมถกสงตออยางตอเนอง)

ส าหรบ web application เราสามารถจดการกบปญหานไดโดยการให Web Browser จ าขอมลเหลานน ซงสามารถท าไดสองวธคอ Cookies (Java script) และ Sessions (PHP)

Information Flow



การจดจ าขอมลในรปแบบของตวแปร เราจะใชระบบ Sessions ท PHP สรางขน

ผเขาชมเวบจะไดรบ Session ID หรอมกเรยกวา Unique ID (UID) ซงจะถกบนทกลงใน Cookie หรอสงตอผาน URL

PHP Sessions อนญาตใหเราบนทกขอมลลงใน SuperglobalArray ทชอวา $_SESSION

Memorization



กอนทเราจะสงให PHP Sessions จดจ าขอมลของเรา เราจะตองท าการเรยกใช PHP Sessions กอน ดวยค าสง

session_start();

ค าสงขางตนเปนการสงใหเวบของเราเรมการท างานของ PHP Sessions ซงจะตองประกาศไวในสวนแรกสดของทกไฟล PHP ทตองการใชหรอบนทกขอมลใน session

Sessions preprocessing



หลงจากเราเรยกใชงาน PHP Sessions เราสามารถบนทกขอมลลงใน Superglobal array $_SESSION ดงตวอยางดานลาง

<?php

session_start(); // เรยกใช PHP Session

$_SESSION[‘username’] = “admin”

$_SESSION[‘age’] = 20;

?>

Information Storing



หลงจากทเราบนทกขอมลลงใน superglobal array $_SESSION แลวนน เราสามารถดงขอมลมาใชไดโดยไมตองสงขอมลผาน Form อก

Information retrieval



ขอควรระวงในการเรยกใช Superglobal Array $_SESSION คอ การเรยกใชขอมลทยงไมเคยมการบนทกมากกอน

หากเปนเชนนนจะเกด Error Undefined Index

เพอเลยงปญหานเราสามารถตรวจสอบวาตวแปรนนถกบนทกไวหรอไมดวยฟงกชน isset

Existence Validation



หากเราตองการท าลายขอมลทบนทกไว เราสามารถท าไดดวยค าสง

session_unset(); // ลบตวแปรทงหมด

session_destroy(); // จบการท างานของ sessions

Terminating sessions



ระบบ Login เปนระบบทท าการจดจ าการลงชอเขาใช โดยระบบจะตองจดจ าขอมลส าคญส าหรบยนยนตวตนเชน username, email และไมควรจดจ า password

ระบบ Login จะประกอบไปดวยสองสวนหลก คอLogin.php ท าหนาทตรวจสอบวา username และ password ไดผานการลงทะเบยนมาหรอไม หากใช ใหบนทก username ลงใน session

Logout.php ท าหนาทลบขอมลการ login ออกจากระบบ

Login system



Login system [2]



จงออกแบบระบบ login ซงประกอบดวยไฟล 3 ไฟลHomepage.phpLogin.phpLogout.php

Homepage คอหนาหลก ทมฟอรมไวส าหรบ loginเมอ user ท าการ login ขอมลในฟอรมจะถกสงไปจดการทหนา login.phpหนา login.php ท าหนาทเชควา username และ password ถกตองหรอไม (ในทนใหเกบ username กบ password ในรปของ string กอน) แลวให redirect กลบมาหนา homepageหาก user อยใน สถานะ login ใหแสดงค าพดวา Hello … ตามดวย username และ เปลยนจากโชวฟอรม login เปน ปม logout

Exercise 9: Login system


PHP - MYSQL



มสามขนตอน ขนตอนตดตอกบฐานขอมล

ขนตอนดงขอมล

ขนตอนตดการเชอมตอกบฐานขอมล

การดงขอมลจากฐานขอมลผาน PHP



การเรมการเชอมตอกบฐานขอมล

ท าไดโดยเรยกใชฟงกชน mysqli_connect()

ม syntax ในการเรยกใชดงน

mysqli_connect($host, $username, $password, $database_name)

ถาเชอมตอส าเรจ mysqli_connect() จะรเทรน object ทแสดงการเชอมตอ หากไมส าเรจจะรเทรน FALSE

ขนตอนแรก Connect



<?php$servername = "localhost";$username = "username";$password = "password";$dbname = "myDB";

// Create connection$conn = mysqli_connect($servername, $username,$password,

$dbname);

// Check connectionif (!$conn) {die("Connection failed: " . mysqli_connect_error());

} else {

echo “Success”;

}

?>

ตวอยาง



สามารถท าไดโดยใชฟงกช น mysqli_query() ซงม syntax ดงน mysqli_query($con, $sql_statement) $con คอสงทไดจากการเรยก mysqli_connect() ทส าเรจ $sql_statement คอ string แสดงค าสงภาษา SQL ทเราตองการ mysqli_query() จะรเทรนผลลพธในรปของ mysqli_result ซงเรยกด

ผลยาก หรอรเทรน FALSE ถา query ไมส าเรจ แตสามารถแปลง mysqli_result เปน php array ไดดวยฟงกชน

mysqli_fetch_assoc()

ขนตอนทสอง Query



$sql = "SELECT id, firstname, lastname FROM MyGuests";$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {// output data of each rowwhile($row = mysqli_fetch_assoc($result)) {

echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";}

} else {echo "0 results";

}

ตวอยาง



เปนการปดการเชอมตอกบฐานขอมลเมอเราใชงานเสรจแลว

สามารถท าไดโดยใชฟงกชน mysqli_close()

ตวอยาง mysqli_close($conn);

ขนตอนสดทาย Close



มไวเพอเตมอกขระอนๆลงไปในขอความ (string)

% เตมอกขระอะไรกไดตงแต 0 ตวขนไป

_ เตมอกขระอะไรกไดตวเดยว

มประโยชนในการเทยบหา substring ใน database

ตวอยาง %ber% จะเทยบตรงกบ number , berlin, uber

_ber จะเทยบตรงกบ uber

SQL Wildcard



SELECT * FROM Customers

WHERE City LIKE ‘ber%’;

เลอกทกคอลมนจากตาราง customers ทชอเมองขนตนดวย ber

การใช Wildcard ในค าสง Select



แสดงผลลพธทไดเรยงตามล าดบSELECT column_name(s)FROM table_nameORDER BY column_name(s) ASC|DESC;

ตวอยางSELECT student_id, gpaFROM studentsWHERE gpa > 2.0 AND gpa < 3.0ORDER BY gpa DESC;

ORDER BY



จงปรบปรงโปรแกรมใน exercise 9 ใหตรวจสอบ username และ password ทดงมาจากฐานขอมลแทน

Exercise 10 (mini boss)


PHP MYSQL II



ค าสงปรบปรงเปลยนแปลงฐานขอมล ไมสงผลลพธกลบมา เหมอนค าสง SELECT

ค าสงทเกยวของกบการปรบปรงฐานขอมล1. INSERT

2. DELETE

3. UPDATE

Database Modification



SyntaxINSERT INTO table

VALUES (‘value1’, ‘value2’, ‘value3’,… );

ตวอยางINSERT INTO Likes

VALUES(‘Sally’, ‘Singha’);

Insertion



SyntaxDELETE FROM tableWHERE condition;

ตวอยาง DELETE from LikesWHERE drinker=‘Sally’;

DELETE from LikesWHERE drinker=‘Sally’ AND beer=‘Singha’;

DELETION



DELETE FROM table;

ไมตองม WHERE clause

ตวอยางDELETE FROM Likes

การลบทงหมด



ใชในการเปลยน attribute บางตวของ record ใน table

SyntaxUPDATE tableSET <list of attribute assignments>WHERE condition;

ตวอยางUPDATE DrinkersSET phone=‘0818889999’WHERE name=‘Fred’

UPDATES



จงปรบปรงโปรแกรม login ขางตน ใหมหนาและฟงกชนตอไปน

register.php เพอใหผใชสามารถลงทะเบยนใหมได

edit.php เพอใหผใชสามารถเขามาแกไขขอมลสวนตวได

Exercise 11


PART III: HTML AND CSS

ปรบปรงโดย อ. กตตพชญ คปตะวาณช

และ อ. สทธโชค ทรพยไพบลยกจ


HTML ค าสงในการจดตวอกษร



HTML Text Formatting

<b>This text is bold</b>

<strong>This text is strong</strong>

This text is bold

This text is strong

This text is italic

This text is emphasized

This is computer output

This is subscript

This is superscript

<i>This text is italic</i>

<em>This text is emphasized</em>

<code>This is computer output</code>

This is <sub>subscript</sub>

This is <sup>superscript</sup>

<p>

</p>



HTML Formatting

More HTML Text Formatting Tags

Tag Description

<small> ส าหรบ text ขนาดเลก (smaller)

<ins> ส าหรบ text ทแทรกมา (inserted)

<del> ส าหรบ text ทถกลบ (deleted)

<mark> ส าหรบ text ทถก highlight (marked)


http://www.w3schools.com/tags/tag_small.asp

http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_mark.asp


This is small text.

This is inserted text.

This is deleted text.

This is marked text.

HTML Formatting [2]

This is <small>small</small> text.<br>

This is <ins>inserted</ins> text.

<br>

This is <del>deleted</del> text.

<br>

This is <mark>marked</mark> text.

<p>

</p>



HTML Styles - CSS

What is CSS?CSS ยอมาจาก Cascading Style Sheet

Style ใชเพอก าหนดรปแบบการแสดงผล HTML element

CSS ถกสรางมาเพอแยกรปแบบการแสดงผล (Style) ออกจากเนอหา (Content)



HTML Styles – CSS [2]

CSS Example

<head>

<style>

p {

text-align: center;

color: red;

}

</style>

</head>

visit http://www.w3schools.com/css for CSS tutorialsWeb application development


HTML Styles – CSS [3]

CSS Example - Result



HTML - Adding CSS

การก าหนด Style สามารถท าได 3 วธคอ1. ก าหนดแบบ Inline โดยระบเปน Attribute "style" ในแตละ Element

<p style="color:blue;margin-left:20px;">Some text</p>



HTML - Adding CSS

2. ก าหนดแบบ Internal Style Sheet โดยการใช Tag <style> ในสวน <head> ของเอกสาร HTML

<head><style type="text/css">body {background-color:yellow;}p {color:blue;}

</style></head>



HTML - Adding CSS

3. ก าหนดแบบ External Style Sheet ลงในไฟลเอกสาร CSS แยกตางหาก (CSS File) โดยการใช Tag <link> ซงไฟล CSS หนงไฟลสามารถใชรวมกนในเอกสาร HTML หลายๆ เอกสารได

<head><link rel="stylesheet" type="text/css" href="mystyle.css">

</head>



HTML Style Example

Example 1: Background Colorbackground-color ก าหนดสของพนหลง ซงสามารถก าหนดสโดยใช• ชอส (Color Names)

– เชน Black, Red, LightSkyBlue - ชอสจะไมม space (วรรค)

– สามารถด list ชอสเพมเตมไดท

» http://www.w3schools.com/html/html_colornames.asp

• คาRGB (Red Green Blue) โดยใชรปแบบเลขฐาน 16 #xxxxxx หรอ rgb(r,g,b)– เชน #000000 = Black, rgb(255,0,0) = Red, #87CEFA = LightSkyBlue

– สามารถด list คา RGB เพมเตมไดท

» http://www.w3schools.com/html/html_colorvalues.asp



HTML Style Example [2]

Example 1: Background Color [2]<!DOCTYPE html><html><body>

<h1 style="background-color:green;">A heading</h1><p style="background-color:chocolate">A paragraph.

</p></body>

</html>




Example 2: Font, Color and Sizefont-family ก าหนดชอ font

color ก าหนดสของตวอกษร

size ก าหนดขนาดของตวอกษร<!DOCTYPE html><html><body>

<h1 style="font-family:verdana;">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.

</p></body>

</html>




Example 3: Border (เสนขอบ)border-style ก าหนดแบบเสนขอบ • none คอไมมขอบ




Example 3: Border (เสนขอบ) [2]border-width ก าหนดความหนาของเสนขอบ

border-color ก าหนดสของเสนขอบ<!DOCTYPE html><html><body><p style="border-width:5px;border-style:solid;border-color:red;">

A paragraph.</p>

</body></html>




Example 3: Border (เสนขอบ) [3]เราสามารถก าหนดเสนขอบอยางยอไดโดยใชล าดบ: ความหนา, ชนดของขอบ และส

<p style="border-width:5px;border-style:solid;border-color:red;">

<p style="border: 5px solid red;">

border-radius ก าหนดเสนขอบแบบมมโคง• ใชไดกบ IE9+, Firefox 4+, Chrome, Safari 5+, และ Opera.<p style="border: 5px solid orange;border-radius:7px">


HTML การก าหนดเครองหมายหนาหวขอและเลขล าดบรายการ



HTML Lists

การท า List (รายการ) ในเอกสาร HTML ท าใหขอมลในเวบเพจอานไดงาย และเปนการจดระเบยบเนอความ โดยใชการแสดงเครองหมายหรอเลขล าดบรายการหนาหวขอ

List ในเอกสาร HTML ทใชมากทสดคอList แบบไมเรยงล าดบ <UL> (Unordered Lists)

List แบบเรยงล าดบ <OL> (Ordered Lists)

มาตรฐาน HTML ไมอนญาตใหใส List Tag ภายใน Paragraph Tag <p>



Tag Description

<ol> ก าหนด List แบบมล าดบ (Ordered List)<ul> ก าหนด List แบบไมมล าดบ (Unordered List)<li> ก าหนดแตละรายการภายใน List (List Item)<dl> ก าหนด List ค าอธบาย (Description List)<dt> ก าหนดแตละรายการใน List ค าอธบาย (Definition Term)<dd> ก าหนดค าอธบายของแตละรายการใน List

(Definition Description)

HTML ListsHTML List Tags



HTML Unordered Lists

เปนการแสดงรายการกลมทเกยวพนกนแตไมจ าเปนตองเรยงล าดบ โดยแตละรายการจะมหวขออยในรปแบบวงกลมทบ

<p>Things to buy:</p><ul>

<li>Coffee</li><li>Milk</li>

</ul>


Things to buy:

• Coffee• Milk


HTML Ordered Lists

เปนการแสดงรายการทมล าดบกอนหลง โดยคา Default จะเปนตวเลขเรมจากล าดบท 1.

<p>Things to buy:</p><ol>

<li>Coffee</li><li>Milk</li>

</ol>


Things to buy:

1. Coffee2. Milk


HTML Ordered Lists [2]

Attribute ใน Ordered List<ol> Tag• start ใชก าหนดคาเรมตนของ list นนๆ

• type ใชก าหนดชนดของหวขอโดยคาทใชไดคอ– 1, A, a, I, และ i

<p>Things to buy:</p><ol start="5" type="a">

<li>Coffee</li><li>Tea</li><li>Milk</li>

</ol>


Things to buy:

e. Coffeef. Teag. Milk


HTML Description Lists

Description List คอ List ทมค าอธบายแตละรายการ<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd>

</dl>

Coffee- black hot drinkMilk- white cold drink



HTML 4. การสรางตาราง

รวบรวมโดย อ. กตตพชญ คปตะวาณช



HTML Tables

การสรางตารางในเอกสาร HTML ท าไดโดยการใช Tag <table>

ตารางในเอกสาร HTML ประกอบแถวในแนวนอน (Row)ก าหนดดวย Tag <tr> (tr: table row)

ในแตละ Row จะประกอบดวยชองทเรยกวา Data Cellก าหนดดวย Tag <td> (td: table data)

ในแตละ Cell จะสามารถใส Content ไดหลายประเภท เชน ขอความ รปภาพ ลสต พารากราฟ ฟอรม หรอตาราง



<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td>

</tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td>

</tr></table>

HTML Table Example


หากไมมการก าหนดคาให Attribute "border" ตารางทไดจะไมมเสนกรอบทงภายใน (ระหวาง Cell) และภายนอกตาราง ขนาดของ border ทระบจะเปนความกวางของเสนรอบนอกตารางเทานน

ใชเครองหมาย "" และไมมหนวย


HTML Table Tags

Tags ทใชบอยในการสรางตารางไดแก

Tag Description

<table> ก าหนดตาราง<th> ก าหนดหวตาราง (table header)<tr> ก าหนดแถว (table row)<td> ก าหนดชองในตาราง (table data)<caption> ก าหนดชอเรองของตาราง


http://w3schools.com/tags/tag_table.asp

http://w3schools.com/tags/tag_th.asp

http://w3schools.com/tags/tag_tr.asp

http://w3schools.com/tags/tag_td.asp

http://w3schools.com/tags/tag_caption.asp


HTML Table Tags [2]

Tags อนๆ ในการสรางตาราง

Tag Description

<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table


http://www.w3schools.com/tags/tag_colgroup.asp

http://www.w3schools.com/tags/tag_col.asp

http://www.w3schools.com/tags/tag_thead.asp

http://www.w3schools.com/tags/tag_tbody.asp

http://www.w3schools.com/tags/tag_tfoot.asp


HTML Table Headers

การก าหนดขอมลทหว Column (Header) ท าไดโดยการใช Tag <th>

Browser สวนใหญจะแสดงผลContent ภายใต Tag <th> เปนตวหนาและอยตรงกลาง

<table border="1"><tr>

<th>Header 1</th><th>Header 2</th>

</tr><tr>

<td>row 1, cell 1</td><td>row 1, cell 2</td>

</tr><tr>

<td>row 2, cell 1</td><td>row 2, cell 2</td>

</tr></table>



HTML Table Attributes

Attribute ตางๆ ทสามารถใชกบ Tag <table> ไดแก


Attribute Description

summary สรปเนอหาตาราง (ใชส าหรบโปรแกรม Text-to-Speech กรณผมปญหาทางการมองเหน)

width ความกวางของตารางborder ความกวางของเสนกรอบรอบนอกตาราง

หากไมระบจะไมมเสนระหวาง Cellcellspacing ระบระยะหางระหวาง Cellcellpadding ระบระยะหางระหวางตวอกษรและขอบ Cell

Note: HTML5 จะ support แค border เทานน


cellspaceing and cellpadding


Computer Science, CMU Web application development

HTML Table Formatting

เชนเดยวกนกบ Element อนๆ เราสามารถจดรปแบบ ตาราง หรอ cell ไดโดยใช Property ตางๆ ใน style

Example 1: alignmentmargin-left ก าหนดระยะหางจากทางขอบซาย (default 0)

margin-right ก าหนดระยะหางจากทางขอบขวา (default 0)• auto - browser จะค านวณระยะหางเอง

• inherit - ใชคาเดยวกบ Element ทเปน Parent

• ระยะหาง (length)


CSS Units

หนวยทสามารถใชไดใน CSS มหลายแบบ บางชนดเปนหนวยทใชในงานดานการออกแบบตวอกษร (Typography) มากอน เชน pc (pica) และ pt (point)

หรอหนวยเปนหนวยความยาวพนฐานได เชน cm, mm และ in (inch)

หนวยทสรางขนมาเพอใชกบ CSS โดยเฉพาะคอ px (pixel)

หนวย em และ ex เปนหนวยทอางองจากความกวางและความสงของ Font ทใชอย ตามล าดบ

สามารถใชหนวยเปน % อางองจาก Parent Element



CSS Units [2]

การเลอกใชแตละหนวยขนอยกบวตถประสงคของเอกสารวาเปนเอกสารเพอการแสดงผลบนจอ (Screen) หรอการพมพ (Print)

ความสมพนธของหนวยแบบ Absolute

Web application developmentRef: http://www.w3.org/Style/Examples/007/units.en.html

Recommended Occasional use Not recommended

Screen em, px, % ex pt, cm, mm, in, pc

Print em, cm, mm, in, pt, pc, %

px, ex

1in = 2.54cm = 25.4mm = 72pt = 6pc

http://www.w3.org/Style/Examples/007/units.en.html

Computer Science, CMU Web application development

HTML Table Formatting [2]

Example 1: alignment [2]margin-left ก าหนดระยะหางจากทางขอบซาย (Default 0)

margin-right ก าหนดระยะหางจากทางขอบขวา (Default 0)• หากตองการให Table อยตรงกลาง ท าไดโดยการก าหนด Property "margin-

left" และ "margin-right"เปน auto<table border="1" style="margin-left:auto;margin-right:auto">

<tr><td>row 1, cell 1</td><td>row 1, cell 2</td>

</tr></table>


The margin propertyในท านองเดยวกน เราสามารถก าหนด margin-top และ margin-bottomใหกบ element ได

โดยสามารถเขยนในรปยอไดดวยการใช Property "margin"margin-left:20px;margin-right:10px;margin-top:5px;margin-bottom:15px;

การระบคาจะเรมจากดานบน (top) กอน แลววนตามเขมนาฬกา (top right bottom left)



margin: 5px 10px 15pX 20px;



สามารถก าหนดคา ให margin ไดตงแต 1 – 4 คาmargin:25px 50px 75px 100px;

top margin is 25pxright margin is 50pxbottom margin is 75pxleft margin is 100px

margin:25px 50px 75px;

top margin is 25pxright & left margin is 50pxbottom margin is 75px

margin:25px 50px;

top & bottom margin is 25pxright & left margin is 50px

margin:25px;

all margins are 25px


กรณ นอยกวา 4 คา: เรมจาก top ไป right ไป bottomไป left ถาคาไหนหายไป ใหใชคาจากทศฝงตรงขาม



ในการจดรปแบบตาราง การก าหนด style ใหแตละ element ทมรปแบบเหมอนกนเปนจ านวนมาก (เชนการก าหนดขนาด Font ในCell <td> ใหเหมอนกนทงตาราง) ควรใชวธก าหนดผาน Internalหรอ External Style Sheet

ไมควรใชวธก าหนดคาแบบ Inline ทละ Element จนครบ T _ T

<head><style type="text/css">

…</style>

</head>

<head><link rel="stylesheet" type="text/css"href="mystyle.css">

</head>

Note: Comments in HTML are denoted by 




vertical-align ก าหนดต าแหนงการจดวางตวอกษรในแนวดง(top, middle, bottom)

td{height:50px;vertical-align:bottom;

}

height ก าหนดความสงของ cell

Example 3: Fancy Table

top

middle

bottom

50px




padding, padding-top, padding-bottom, padding-left, และ padding-right ใชก าหนดระยะหางระหวาง Content ของ Cell และขอบดานในของ Cell โดยม Syntax เหมอน "margin"



HTML Cell Spanning

Example 4: Row and Column Spanningเราสามารถก าหนดให Cell ในตารางกนพนทขาม Column หรอ Row ไดโดยการใช attribute colspan และ rowspan ใน Tag <td> และ <th> โดยจะท าใหผลลพธทไดมลกษณะเหมอนการ Merge Cell ใน Application ประเภท Spreadsheet

<td rowspan="3">rowspan</td>…

<td colspan="2">colspan</td>


rowspan

2 3

colspan

5 6


ในการสรางตารางใหมลกษณะ Cell Spanning ใหพจารณาวาตารางมทงหมดก Row และแตละ Row ประกอบดวย Cell ใดบาง

จากตวอยาง ม 3 แถว [r1 – r3]

แถว r1 -> cell a, b, c

แถว r2 -> cell d, e

แถว r3 -> cell f, g

การพจารณาวา Cell ไหนอย Row ใด ใหพจารณาจากมมซายบนของ Cell นนๆ วาอยทต าแหนงใน Row ใด

a [r1] b [r1]c [r1]

d [r2] e [r2]

f [r3] g [r3]


a bc

d e

f G

HTML Cell Spanning [2]


<tr><td>a</td><td>b</td><td>c</td>

</tr><tr><td>d</td><td>e</td>

</tr><tr><td>f</td><td>g</td>

</tr>

<tr><td>a</td><td>b</td><td rowspan="2">c</td>

</tr><tr><td>d</td><td>e</td>

</tr><tr><td colspan="2">f</td><td>g</td>

</tr>

HTML Cell Spanning [3]


a [r1] b [r1]c [r1]

d [r2] e [r2]

f [r3] g [r3]

แลวจงพจารณาวา Cell ไหนมลกษณะ Spanning ขาม Row หรอ Column


References

W3C HTML Table Referencehttp://www.w3.org/TR/REC-html40/struct/tables.html

W3C CSS Unitshttp://www.w3.org/Style/Examples/007/units.en.html


http://www.w3.org/TR/REC-html40/struct/tables.html

http://www.w3.org/Style/Examples/007/units.en.html


HTML 7. การตกแตงเวบเพจดวยรปภาพ




HTML Imagesเราสามารถแทรกรปภาพลงในเอกสาร HTML ไดโดยใช Tag <img>

โดยรปทน ามาแสดงผลสามารถอย Website เดยวกบเอกสาร

หรอเปนรปทเชอมโยงมาจาก Web Resource จาก Site อนๆ กได

ตวอยาง Format ของ ไฟลรป

GIF: 256 colors, lossless compression, supports animation and transparency

JPEG: lossy compression, 24-bit color (8 bits each for red, green and blue), progressive display, smaller file size, great for finished product

PNG: successor to GIF, lossless compression, support transparency, progressive display, good for file under editing.

etc



HTML <img> Tag

Tag <img> เปน Tag วาง (Empty Tag) ไมจ าเปนตองใส Tag ปด

Attribute ของ Tag <img>

src ก าหนด URI ของรปทจะใชแสดงผล<img src="http://www.google.com/images/srpr/logo11w.png"><img src="../../images/logo.png">

width ก าหนดความกวางของ Image

height ก าหนดความสงของ Image• จ านวนเตมบวก มหนวยเปน px แตไมจ าเปนตองใสหนวยเมอก าหนดคา

<img src="chart.png" width="450" height="150">

alt ก าหนดค าอธบายรปภาพ



The alt Attribute [2]

ในกรณทรปภาพไมสามารถแสดงผลบนเอกสาร HTML ได

มปญหาดาน Internet (Speed, Connection, etc)

ไมสามารถเขาถง Resource (รปภาพ) ได

ขอความทก าหนดไวท Attribute alt กจะแสดงผลแทน

ในบาง Browser เชน IE (Internet Explorer) ขอความทก าหนดโดย alt จะแสดงผลในลกษณะ Tooltip

ไมใชการแสดง alt ตามมาตรฐานทก าหนด หากตองการแสดง Tooltipควรใช Attribute title แทน



HTML <img> Tag [2]

Example 1: <img> Attribute<body><img src="chart.png" width="450" height="150" title="chart"

alt="Chart showing the fruit consumption amongst under 15 year olds. Most children ate Pineapples, followed by Pears">

</body>

สงเกตการใช Attribute alt ในการบรรยายภาพ



HTML 6. การเชอมโยงเวบเพจ (HYPERLINK)




HTML Links

Hyperlink หรอ Link คอ ตวอกษรหรอกลมตวอกษร (ค า หรอกลมค า) หรอ รปภาพทเชอมตอไปยง Resource อนบน Web

การสราง Link ใน เอกสาร HTML ท าไดโดยการใช Tag <a> โดย aคอ Anchor ซงหมายถงจดเชอมโยง

ใน 1 Link จะประกอบดวย 2 Anchor คอ Source Anchor (จดตนทาง) และ Destination Anchor (จดปลายทาง)

Tag <a> สามารถใชระบ Source หรอ Destination Anchor กได

จดปลายทางสามารถเปนจดอางองภายในหนา เอกสาร HTML เดยวกน, เอกสาร HTML อน, ไฟล Video, ไฟลเสยง หรอไฟลชนดอนๆ



HTML <a> Tag

Attribute ของ Tag <a> href (Hypertext Reference) ก าหนด URI (Uniform Resource Identifier) ของจดปลายทางซงเปน Attribute ทส าคญทสด ในการสราง Link กรณน Tag <a> ท าหนาทเปนจดตนทาง (Source Anchor) โดยการระบ URI จะอยในรปดงน • กรณเชอมโยงไปยงเอกสาร HTML ท Site อน<a href ="http://www.w3c.org">Click Here</a>

» สงเกตการระบ http: ภายในเครองหมาย ""

• กรณเชอมโยงไปยงเกสาร HTML ภายใน Site เดยวกน<a href ="page2.html">Click Here</a>



URI vs URL

http://www.google.com

ftp://weblab.cs.science.cmu.ac.th

mailto:[email protected]

urn:issn:1535-3613

../../resource.txt

www.google.com

facetime://+19995551234

sms:+15105550101?body=hello%20there


URI หรอ Uniform Resource Identifier เปนกลมอกขระ ทใชระบ หรออางถง ทรพยากร (Resource) ตางๆ บน Web เชน

สวนทอยซายสด กอนเครองหมาย : คอ URI scheme

URL คอ URI ทมการระบวธในการเขาถงขอมลนนๆ เชน http: ftp: mailto:


The mailto: URLเราสามารถใช URI Scheme mailto: ในการสราง Link เพอสง email ไดโดยใชรปแบบดงน

<a href ="mailto:[email protected]">Mail Zuck</a>

<a href ="mailto:[email protected]?subject=current-issue">

ระบ subject<a href ="mailto:[email protected]?body=send%20current-issue%0D%0Asend%20index">

ระบ body (เนอจดหมาย) สงเกตการใช %20 แทนอกขระ space (ชองวาง) และ %0D%0A แทน line break

<a href ="mailto:[email protected][email protected]&body=hello">

สงเกตการใชเครองหมาย & เมอตองการระบมากกวา 1 field (กรณนคอ cc และ body)

Ref: http://tools.ietf.org/html/rfc6068Web application development

http://tools.ietf.org/html/rfc6068


HTML <a> Tag [2]

Attribute ของ Tag <a> [2]target ก าหนดวาตองการใหแสดงผลหนาปลายทางในลกษณะใด<a target="value" href ="........">Click Here</a>

Tag Description

_blank เปด link และแสดงผลในหนาใหม หรอ tab ใหม

_self เปด link และแสดงผลใน frame ปจจบน (default)

_parent*เปด link และแสดงผลใน frame แม (parent frame) ของframe ปจจบน

_top*เปด link และแสดงผลเตมหนา browser (ทบหนาเดมทงหมดของทก frame)

framename*

เปด link และแสดงผลใน frame ทมการระบชอ

*เพอการอางองเทานน ไมแนะน าใหใช Frame ในการวาง Layout



HTML <a> Tag [3]

Attribute ของ Tag <a> [3]name หรอ id ก าหนดชอหรอ id ของ Anchor ซงท าใหใช Anchor นนๆ เปนจดปลายทาง (Destination Anchor) ได• การก าหนด id หรอ name ในเอกสารใดๆ ไมสามารถใชชอซ ากนได เนองจาก id และ name ใช name space เดยวกน

<a id="section2">Section 2</a>

• การก าหนด section2 เปนจดปลายทางท าไดจากจด Anchor ภายในหนาเอกสารอนหรอภายในหนาเอกสารเดยวกนกได

<a href="http://www.mypage.com/index.html#section2">Click</a>OR<a href="#section2">Click</a>



HTML Link Formatting

เชนเดยวกนกบ Element อนๆ เราสามารถจดรปแบบ Link ไดโดยใชProperty ตางๆ ใน style

Example 1: Text Decoration

text-decoration ก าหนดลกษณะการตกแตงตวอกษร• none - ตวอกษรปรกตไมมการตกแตง หากใชกบ Link จะไมมการเสนใต

• underline - มการขดเสนใตตวอกษร e.g. characters

• overline - มการขดเสนเหนอตวอกษร e.g. characters

• line-through - มเสนขดทบกลางตวอกษร e.g. characters• blink - อกษรกระพรบ

• inherit - ใชลกษณะเดยวกบ Parent ElementWeb application development


นอกจากนเรายงสามารถก าหนด Style ใหกบสถานะตางๆ ของ Link ไดโดยสถานะของ Link ทสามารถใช CSS ก าหนดรปแบบไดคอ

Link ทยงไมไดคลก (Unvisited Link) หรอ Link ในสถานะปรกตa:link {color:#8AC007;}

Link ทคลกไปแลว (Visited Link)a:visited {color:#8AC007;}

Link เมอน า Mouse มาช (Mouse Over Link)a:hover {color:#8AC007;}

Link ขณะถกคลก (Selected Link)a:active {color:#8AC007;}

การก าหนดรปแบบของ Link ตองท าในลกษณะ Style Sheet เทานน (Internal or External) ไมสามารถก าหนดแบบ inline ได

HTML Link Formatting [2]



Example 2<head>

<style>a:link {color:#8AC007;} a:visited {color:orange;}a:hover {color:red;}a:active {color:blue;}

</style></head>

การก าหนดรปแบบ Link สถานะตางๆ จ าเปนตองก าหนดตามล าดบกอนหลงทถกตอง กลาวคอ หากมการก าหนด a:link และ a:visited ตองก าหนดกอน a:hover

หากมการก าหนด a:hover ตองก าหนดกอน a:active

HTML Link Formatting [3]



ReferencesW3C HTML: Links http://www.w3.org/TR/html401/struct/links.html

URI Schemehttp://en.wikipedia.org/wiki/URI_scheme

mailto: URLhttp://tools.ietf.org/html/rfc6068

W3C CSS Selector Pseudo Classhttp://www.w3.org/wiki/CSS/Selectors#Pseudo-classes

W3Schools CSS Linkshttp://www.w3schools.com/css/css_link.asp


http://www.w3.org/TR/html401/struct/links.html

http://en.wikipedia.org/wiki/URI_scheme

http://tools.ietf.org/html/rfc6068

http://www.w3.org/wiki/CSS/Selectors#Pseudo-classes

http://www.w3schools.com/css/css_link.asp

Documents

Web application development · Web Development หรือ Web Programming คือการออกแบบ Software Application ที่ท างานบน Web Site (Web