Upload
others
View
8
Download
0
Embed Size (px)
Citation preview
Computer Science, CMU
Web application development
Web application development
PART I
Web application development
Computer Science, CMU
Web Development หรอ Web Programming คอการออกแบบ Software Application ทท างานบน Web Site (Web Applications: WebApps)
Web Development
Web application development
Computer Science, CMU
สรางเวปเพจทท างานเหมอน twitter
มการควบคมสทธในการใชงานแอดมนสามารถ สราง แกไขหรอ ลบขอความได
ผเขาชมสามารถดไดอยางเดยว
ตกแตงหนาตาเวปใหสวยงาม
เพมเตมพเศษใหผชมสามารถเขยนคอมเมนทไดดวย
Project (mini-twitter)
Web application development
Computer Science, CMU
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
Web application development
CLIENT-SERVER ARCHITECTURE FOR WEB SERVICE
Web application development
Computer Science, CMU
สถาปตยกรรมแบบ 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
Web application development
Computer Science, CMU
Three-Tier Architecture [2]
The design of a three-tier client/server system
Web application development
Computer Science, CMU
Web browser
คอซอฟทแวรทมหนาทรบขอมลจาก server มาประมวลและแสดงผล ภาษาหลกในการสอสารระหวาง server กบ web browser คอภาษา HTML
1st Tier: Presentation
Web application development
Web application development
TWO TYPES OF WEBPAGES
Web application development
Computer Science, CMU
Static Web Page คอ เวบเพจทสรางขนมาจากภาษา HTML เพยงอยางเดยวจะมลกษณะเปนเวบเพจอยางงาย น าเสนอขอมลทเปนขอความภาพ และเสยงแบบธรรมดา ไมมการโตตอบกบผใช (Interactive)
Static Webpage
Web application development
Computer Science, CMU
Dynamic Web Page คอ เวบเพจทมลกเลนตาง ๆ มการโตตอบกบผใช มการประมวลผลตาง ๆ มการตดตอกบฐานขอมล ไดแกเวบเพจทพฒนามาจากภาษา PHP, ASP, JSP, JavaScript, VbScript เปนตน
Dynamic Webpage
Web application development
TWO PARADIGMS OF DYNAMIC WEB PROGRAMMING
Web application development
Computer Science, CMU
Client-side programming เปนการเขยนโปรแกรมทท างานบนBrowser ทฝ ง Client
อยใน 1nd Tier ของ multi-tier architecture
ตวอยางเชน JavaScript เปน ภาษา Client-side scripting ทชวยให Web Developer สรางdynamic web page ทโตตอบกบผใชได (interactive)
ใชในการค านวณหรอตรวจสอบขอมลทไมซบซอน
Client-side programming
Web application development
Computer Science, CMU
Server-side Programming เปนการเขยนโปรแกรมทท างานบนฝ ง Web Server
อยใน 2nd Tier ของ multi-tier architecture
สามารถใชภาษาเกอบทกภาษาเขยนไดผานระบบทเรยกวา CGI
แตทนยมมากกจะเปน scripting languageasp, php, ruby on rails
Server-Side Programming
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
ในการประมวลผลขอมล มความจ าเปนตองจดการขอมลจ านวนมากอยางมประสทธภาพ ซงโดยทวไป จ าเปนตองใช ฐานขอมล (Database)โดยฐานขอมลจะถกจดการโดยระบบจดการฐานขอมล (Database Management System: DBMS)MySQL (My S-Q-L) เปน DBMS ทไดรบความนยมเปนอนดบสองของโลก (July 2013: Wikipedia)
Open Source Owned By Oracle Free
3rd Tier: Database: MySQL
Web application development
Computer Science, CMU
Summarising
JAVA SCRIPT PHP Interpreter MySQL
Web application development
Computer Science, CMU
HTML เปนภาษาทใชในการเขยน Web Page ซงสามารถสรางใหแสดงผลใหอยในรปของตวอกษร ภาพนง ภาพเคลอนไหว เสยง และยงสามารถเชอมโยงไปยงเวบไซตอนๆในระบบ Internet
หนวยงานหลกทท าหนาทก าหนดมาตรฐาน HTML คอ World Wide Web Consortium (W3C)
HTML Introduction
Web application development
Computer Science, CMU
HTML ยอมาจาก HyperText Markup LanguageHyperText คอ ขอความทมลงค (Hyperlink or Link) เชอมโยงกบขอความอน
Markup Language คอภาษาทประกอบดวย Markup Tags ตางๆ
HTML Introduction [2]
Web application development
Computer Science, CMU
เอกสาร HTML จะประกอบดวย Tag และ ขอความ
<tagname>content</tagname>
ตว Tag รวมทงขอความระหวาง Tag เปดและปด รวมแลวเรยกวา HTML Element
เอกสาร HTML มนามสกลเปน .htm หรอ .html
HTML Tags
Web application development
Computer Science, CMU
เนองจากมมาตรฐาน 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
Web application development
Computer Science, CMU
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)
Web application development
Computer Science, CMU
การเขยนเอกสาร 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]
Web application development
Computer Science, CMU
การสรางเอกสาร HTML [2/2]
Web application development
Computer Science, CMU
เอกสาร HTML ประกอบดวย 2 สวน คอ สวนของค าสง คอ tag เขยนอยภายในเครองหมาย < > เชน <br> โดยการแสดงผลใน Webpage จะไมแสดง Tag เหลาน
สวนของขอความทตองการแสดงบน webpage
เราสามารถเรยกด HTML Tag บนแตละหนา Webpage บน Browser โดยการเรยก Menu “View Source” (Chrome) หรอ “View Page Source” (Firefox) เปนตน
เอกสาร HTML
Web application development
Computer Science, CMU
Tag ม 2 แบบTag เดยว: Tag ทมค าสงเดยว สามารถใชงานค าสงได ณ ต าแหนงทเราระบ เชน <br>
Tag ค: Tag ทม 2 สวน คอ Tag เปด และ Tag ปด
โดย Tag ปดมรปแบบเหมอน Tag เปด แตมเครองหมาย / น าหนา
<ชอค าสง> ขอความทตองการแสดง </ชอค าสง>
เชน
<html> ขอความทตองการ </html>
เอกสาร HTML [2]
Web application development
Computer Science, CMU
โดยปกตแลวเราสามารถเขยน HTML Tag ดวยตวพมพเลก (Lowercase) หรอตวพมพใหญ (Uppercase) กได
<HTML> <html>W3C แนะน าใหใชตวพมพเลกใน HTML4 และ บงคบใหใชตวพมพเลกใน XHTML
HTML Tags
Web application development
Computer Science, CMU
ในการเขยนเอกสาร HTML 1 หนา จะตองประกอบไปดวยค าสงหลกอย 4 ค าสง
<html>…</html> เปนค าสงทท าหนาทบอกจดเรมตน และจดสนสดของเอกสาร HTML
<head>…</head> เปนค าสงทท าหนาทก าหนดสวนหวเรอง
<title>…<title> เปนค าสงทก าหนดขอความทตองการ แสดงผลบนแถบชอเรอง
<body>…</body> เปนค าสงทท าหนาทก าหนดขอความและรปแบบค าสงใดๆ ทตองการปรบแตงเอกสารบนสวนของจอภาพ และจะแสดงผลบนจอภาพเมอถกเรยกใชจาก Web Browser
โครงสรางภาษา HTML
Web application development
Computer Science, CMU
<html>
<head>
<meta charset="utf-8"/><title>
ขอความทตองการแสดงผลบน Title Bar</title>
</head>
<body>
ขอความและค าสงใดๆทตองการปรบแตงเอกสารบนสวนของจอภาพ</body>
</html>
โครงสรางภาษา HTML [2]
Web application development
PHP - BASICS
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
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
Computer Science, CMU
แตละบรรทดของค าสงในภาษา 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
Computer Science, CMU
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 = …
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
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.
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
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
… …
Web application development
PHP - CONTROL STRUCTURES
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
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.
Web application development
Computer Science, CMU
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)
Web application development
Computer Science, CMU
มาลองเตมโคดทกลาวค าทกทายไดถกตองตามชวงเวลาตอไปนใหสมบรณ
Exercise 1
<?php
date_default_timezone_set("Asia/Bangkok");$dd = date("H");
...
?>
Web application development
Computer Science, CMU
ฟงกชน date_default_timezone_set("Asia/Bangkok")เอาไวใชบอกให php รวาเราอยในเขตเวลาไหน
ในกรณน เราบอกวา เราอยทวป Asia เมอง Bangkok
ฟงกชน date("H")เอาไวเรยกวนทหรอเวลาปจจบน
การระบรปแบบของผลลพธท าไดโดยก าหนดคาของตวแปรขาเขา
H เปนการระบวา ใหฟงกชนบอก hour of the day ในรปแบบ 24 ชวโมง
ถาใช h (อกษรตวเลก) เราจะได hour of the day ในรปแบบ 12 ชวโมง
+ Note +
Web application development
Computer Science, CMU
สามารถท างานไดเหมอน 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";
}
Web application development
Computer Science, CMU
<?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
Web application development
Computer Science, CMU
จงปรบปรงโปรแกรมกอนหนาน ใหแสดงผลเวลาเปนค าในภาษาไทย
ดงตาราง ถา $dd เทากบ 1 ใหแสดงผลวา ต 1 ไลไปเรอยๆ ถง ต 5
ถา $dd เทากบ 6 ใหแสดงวา 6เชา ไปเรอยๆถง 11โมงเชา
ถา $dd เทากบ 12 ใหแสดงวา เทยงวน
ถา $dd เทากบ 13 ใหแสดงวา บาย 1 โมง ไปเรอยๆถง บาย 5 โมง
ถา $dd เทากบ 18 ใหแสดงวา หกโมงเยน
ถา $dd เทากบ 19 ใหแสดงวา 1 ทม ไลไปเรอยๆ จนถง 5 ทม
ถา $dd เทากบ 0 ใหแสดงวา เทยงคน
Exercise 2
Web application development
Computer Science, CMU
Loop เปนค าสงการวนท างานตามเงอนไขทก าหนด
ค าสงวนลปใน PHP ประกอบดวยwhile เชคเงอนไขกอนท างาน
do..while ท างานกอนเชคเงอนไข
for ก าหนดคาและเชคเงอนไขกอนท างาน
foreach ใชรวมกบตวแปรประเภท array
ค าสงเพอกระโดดออกจากลปเปนกรณพเศษBreak; Continue;
PHP Control Statement:Loop
Web application development
Computer Science, CMU
สวนประกอบทส าคญก าหนดคาเรมตนของเงอนไข
ตรวจสอบเงอนไข
ชดค าสงทตองการท างานแบบลป
ปรบปรงคาเงอนไข
PHP Control Statement:Loop[2]
Web application development
Computer Science, CMU
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. ค าสงทตองการวนลป
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
Syntax Example
PHP Control Statement: do while
do{statement;...
} while (expr);
<?php$i = 1;
do{echo $i;$i++;
} while ($i <= 10);
?>
ก ำหนดคำเรมตน
ตรวจสอบเงอนไข
ปรบปรงคำเงอนไข
ค ำสงทตองกำรวนลป
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
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 - การปรบปรงคา
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
จงเขยนโปรแกรมเพอแสดงค าวา cuckoo เทากบคาของชวโมงทไดจาก function date()
แสดง cuckoo แตละครงใหเวนบรรทดดวย
Exercise 3
Web application development
Computer Science, CMU
ใชส าหรบท างานกบขอมลทเกบไวในตวแปร Array
Syntax
PHP Control Statement: foreach
foreach (array_expression as $value){statement
}
foreach (array_expression as $key => $value){statement
}
ส าหรบ Array ทมการก าหนด value เพยงอยางเดยว
ส าหรบ Array ทมการก าหนด key และ Value
Web application development
Computer Science, CMU
Sourcecode<?php
$colors =array("red","green","blue","yellow");
foreach ($colors as $value)
{
echo "$value <br>";
}
?>
Resultredgreenblueyellow
PHP Control Statement: foreach[2]
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
เปนค าสงในการออกจากลป หรอโครงสราง 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 -----┐|
|<-------------------------┘
Web application development
Computer Science, CMU
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]
Web application development
HTML - FORM
Web application development
Computer Science, CMU
เขยนโปรแกรม PHP เพอสรางเอกสาร HTML
รบขอมลจาก Form แลวประมวลผล แลวสรางเอกสาร HTMLขนมาโตตอบ
PHP-HTML
Web application development
Computer Science, CMU
text input checkbox radio file
resetsubmit textareaselect
ฟอรมในเอกสาร HTML คอสวนหนงของเอกสาร ทมหนาทสงขอมลไปยง Server โดยนอกจาก Element ปรกต แลวยงประกอบดวย Element พเศษ ทเรยกวา Control
Control คอ Element ทใชโตตอบ (Interact) กบ User ซงมหลายชนดไดแก
HTML Forms and Input
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
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"…
Web application development
Computer Science, CMU
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
HTML Control Elements [2]
*textarea อยนอก Tag <form> แตถอเปนสวนหนงของ form และอางถง form id โดยใช attribute form
Web application development
Computer Science, CMU
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
HTML Control Elements [3]
Attribute value คอคาทจะถกสงไปยง script เมอมการ submit ฟอรม (ในกรณน จะเปนคาของตวแปรชอ vehicle)
Example From: http://w3schools.com/html/html_forms.aspWeb application development
Computer Science, CMU
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)
HTML Control Elements [4]
Example From: http://w3schools.com/html/html_forms.aspWeb application development
Computer Science, CMU
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>
HTML Control Elements [5]
Ref: http://www.w3.org/TR/html401/interact/forms.htmlWeb application development
Computer Science, CMU
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
HTML Control Elements [6]
*Notice the method attribute
Web application development
Computer Science, CMU
การสงฟอรม (Form Submission) สามารถท าไดสองวธ สงผาน Method get • ขอมลทสงไปจะสงไปในลกษณะเปนสวนตอของ URI ทระบใน attribute
action คนดวยเครองหมาย ? และ & เชน– http://www.somesite.com/login.php?user=adam&password=1234
สงผาน Method post• ขอมลจะไมแสดงบน URI ท าใหปลอดภยกวาและรองรบปรมาณขอมลทมากกวา
The method Attribute
Web application development
Computer Science, CMU
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
HTML Control Elements [7]
Example From: http://www.w3schools.com/tags/tag_select.asp
Output
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
สรางฟอรมดวย HTML ทมชองไวกรอกน าหนกและสวนสง
สรางปมกดดวย
Exercise 4
Web application development
PHP-FORM PROCESSING
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
จงสรางโปรแกรมเพอค านวณคา ดชนมวลกาย (BMI) ของผใช โดยโปรแกรมมฟอรมเพอ ใหผใช กรอกชอ น าหนกและสวนสงจากนน BMI สามารถค านวณไดจากสตร
BMI = น าหนก หารดวย สวนสงยกก าลงสอง
จากผลการค านวณใหแสดงผลดงตอไปนถา BMI < 20 ใหแสดงผลวา Underweightถา BMI อยระหวาง 20 ถง 24.9 ใหแสดงวา Normalถา อยระหวาง 25 ถง 29.9 ใหแสดงวา Overweightถามากกวาน ใหแสดงวา You are fat
Exercise 5: HTML-Form & PHP basic
Web application development
PHP - FUNCTION
Web application development
Computer Science, CMU
PHP Function: Function Type
ฟงกชน (Function) เปนกลมของค าสงสามารถเรยกใชเปนชด Predefined Function เปนฟงกชนทอยใน libraries ของ PHP แลว สามารถเรยกใชงานไดทนท เชน• การเชอมตอฐานขอมล
• การท างานเกยวกบตวแปรประเภทตางๆ เชน String, Array
• รปแบบการแสดงผล Date-Time
• ตรวจสอบคาของตวแปร (Variable Handling- isset(), empty() )
User defined Function เปนฟงกชนทผใชงานเขยนขนเองเพอสามารถเรยกใชซ าได
Web application development
Computer Science, CMU
PHP: User-defined Functions
เปนฟงกชนประเภททโปรแกรมเมอรสามารถเขยนขนเอง โดยมการระบรปแบบตวแปรรบเขาและสงออก (parameter andreturn type)
ประโยชนใชเพอแตกปญหาเปนงานยอยๆ ทมขอบเขตชดเจน
สามารถเรยกใชงานซ าๆไดโดยใชโคดชดเดม
งายตอการแกไขโปรแกรม
Web application development
Computer Science, CMU
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;?>
Web application development
Computer Science, CMU
The Need of Function
ใหแสดงผลการค านวณ เสนผาศนยกลาง, เสนรอบวงและพนท ของ วงกลมทมรศมดงตอไปน โดยให = 3.14
Radius = 2, 4, 5, 7, 11
จากตวอยางโคดกอนหนา เราตองเขยนซ า 5 ครงโดยเปลยนตวแปรคา radius ไปเรอยๆ
เสยเวลา
ถามการแกไขหรอเพมเตม เราตองแกทงหมด
ถาลมแกไขคา radius ผลลพทกไมถกตอง
Web application development
Computer Science, CMU
PHP: User-defined Functions
จากโจทย ใหค านวณคา เสนผาศนยกลาง, เสนรอบวงและพนทวงกลม
แตกปญหาออกเปนค านวณเสนผาศนยกลาง
ค านวณเสนรอบวง
ค านวณพนทวงกลม
แสดงผลการค านวณ
การท าซ าส าหรบคา R ทเปลยนไป
Web application development
Computer Science, CMU
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);
?>
Web application development
Computer Science, CMU
<?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
Web application development
Computer Science, CMU
PHP Function: Parameter and Return Type
ฟงกชนประกอบดวยสวนค าสงในฟงกชน -ชดค าสงทตองการใหโปรแกรมท างานในฟงกชนนนๆ
พารามเตอร - คาตวแปรทรบเขามาค านวนในฟงกชน
การคนคา – ผลลพททไดจากฟงกชน (อาจมหรอไมมกได)
Web application development
Computer Science, CMU
PHP Function: Parameter
การรบคาพารามเตอรของ PHP มไดสองแบบPass by Value –สงคาของตวแปร
Pass by Reference – สงคาทอยของตวแปร
function swap(&$a, &$b) {
function add($a, $b) {
Pass by Reference
Pass by Value
Web application development
Computer Science, CMU
จงท าการปรบปรงโปรแกรม BMI โดยใหยายขนตอนการค านวณBMI เขาไปอยในฟงกชนทช อ compute_bmi()ตวอยาง
<?php
…
$bmi = compute_bmi(x,y,z)
…
?>
Exercise 6
Web application development
PHP - STRING
Web application development
Computer Science, CMU
ในภาษา 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)
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
ในการใช 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
Web application development
Computer Science, CMU
Concatenation operator (.)
<?php
$Destination = "Paris";
$Location = "France";
$Destination = $Destination . “ is in ”. $Location . ".";
echo $Destination;
?>
Result: Paris is in France.
PHP: String Operator
Web application development
Computer Science, CMU
ในกรณทตองการใสอกขระพเศษในสตรงทตองการ สามารถใช\ ในการก าหนดตวอกขระทตองการได เชน
echo "\“Apple\” is a healthy fruit.";
Result “Apple” is a healthy fruit.
PHP String: Escape Character
Web application development
Computer Science, CMU
เราสามารถจดการกบ String ไดโดยใชฟงกชนของ PHP
String Function ชวยใหการแสดงผลในหนา HTML ท าไดงายขน
ตวอยางประเภทของ String Function
PHP: String Function
substr() แสดง String ตามชวงความยาวทตองการ
substr_compare() เปรยบเทยบสวนของ String
substr_count() นบจ านวน String ทปรากฏในเอกสาร
substr_replace() แทนคา String ทเจอดวยค าทตองการ
trim() ตดสวนทเปน Whitespace ทงดานหนาและดานหลง
Web application development
Computer Science, CMU
ส าหรบฟงกชนทมกใชงานกบ String สามารถแยกเปนกลมๆ ไดดงน
ฟงกชนการแสดงผล เชน echo(); print();
เปรยบเทยบหรอตรวจสอบคา เชน substr_compare(); isset(); isstring();
ตดหรอตอสตรง เชน substr();
คนหาและแกไขสตรง เชน strpos(); substr_replace();
รปแบบการแสดงผล เชน strtoupper(); strtolower();
PHP: String Function
Web application development
Computer Science, CMU
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();
Web application development
Computer Science, CMU
ใชคนหาตวอกษร หรอสตรงทตองการในสตรงหลก
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();
Web application development
Computer Science, CMU
จงออกแบบโปรแกรมเพอรบ 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
Web application development
PHP-ARRAY
Web application development
Computer Science, CMU
Array คอ ชดของขอมลทมการเรยงกนอยางเปนล าดบ
ขอมลทอยใน Array จะเรยกวา Element
การอางองถง Element จะมการระบ Key ไวในตวแปร Array<?php
$arrayA = (“one”, “two”, “three”);
echo $arrayA[‘2’];
?>
Result: two
PHP: Array (Recap.)
Web application development
Computer Science, CMU
ก าหนดคาใหตวแปรแบบไมม 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
Web application development
Computer Science, CMU
Array Function เปนกลมฟงกชนทจะท างานเพอจดการขอมล (Element) ทอยในตวแปร Array
วนลปเพอจดการคาใน Array (foreach, each)
แปลงคาในอาเรยใหเปนสตรง (implode)
การรวมอาเรย (merge and combine)
เรยงขอมลในอาเรย (sort)
PHP: Array Function
Web application development
Computer Science, CMU
Sourcecode<?php
$colors = array("red","green","blue","yellow");
foreach ($colors as $value)
{
echo "$value <br>";
}
?>
Resultredgreenblueyellow
PHP Array: foreach (Recap.)
Web application development
Computer Science, CMU
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.)
Web application development
Computer Science, CMU
One Two Three Four Five
Array Traversal
reset($arrayA);
foreach($arrayA);
current($arrayA);
end($arrayA);
next($arrayA);previous($arrayA);
each($arrayA);
Web application development
Computer Science, CMU
<?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
Web application development
Computer Science, CMU
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();
Web application development
Computer Science, CMU
เปนฟงกชนในการจดการขอมลซ าทอยในอาเรย
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
Web application development
Computer Science, CMU
เปนฟงกชนการรวม element ในหลาย Array ใหเปน Arrayเดยวกน
รปแบบการใชงาน$arrayA+ $arrayB***
array_merge($arrayA , $arrayB);***
*** สองกรณนจะใหผลตางกนในกรณท Array ทน ามารวมกนมการเซตคา key ซ ากน
PHP:Array merge
Web application development
Computer Science, CMU
<?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
Web application development
Computer Science, CMU
เปนฟงกชนใชเพอรวมอาเรย 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
Web application development
Computer Science, CMU
Function Meaning
sort() จดเรยง Value และ Key ในอาเรยจากนอยไปมาก
rsort() จดเรยงValue และ Key ในอาเรยจากมากไปนอย
asort() จดเรยง Value ในอาเรยจากนอยไปมาก
arsort() จดเรยง Value ในอาเรยจากมากไปนอย
ksort() จดเรยง Key ในอาเรยจากนอยไปมาก
krsort() จดเรยง Key ในอาเรยจากมากไปนอย
PHP Array: Sorting Function
Web application development
Computer Science, CMU
สรางฟอรมเพอรบจ านวนตวเลข n เขามา
เมอ user ท าการ submit ใหประมวลผลโดยการ สรางฟอรมอกหนงอนซงมจ านวนชองใหใสตวเลข n ชอง
เมอ user ใสตวเลขครบทง n ตวและท าการ submit แลว
ใหประมวลผลโดยการหา คา max คา min และคาเฉลยของตวเลขเหลานน
Exercise 8: PHP Array and control statement
Web application development
PART II
Web application development
PHP-SESSION
Web application development
Computer Science, CMU
การสงขอมลระหวาง webpage จะตองอาศย form เปนตวกลางในการสงขอมล ซงหากเราตองการใชขอมลในwebpage หลายๆหนา เราตองสราง form ทกครง อกทงไมสามารถใช <a></a> ในการลงคไปหนาอนๆได (เนองจากขอมลจะไมถกสงตออยางตอเนอง)
ส าหรบ web application เราสามารถจดการกบปญหานไดโดยการให Web Browser จ าขอมลเหลานน ซงสามารถท าไดสองวธคอ Cookies (Java script) และ Sessions (PHP)
Information Flow
Web application development
Computer Science, CMU
การจดจ าขอมลในรปแบบของตวแปร เราจะใชระบบ Sessions ท PHP สรางขน
ผเขาชมเวบจะไดรบ Session ID หรอมกเรยกวา Unique ID (UID) ซงจะถกบนทกลงใน Cookie หรอสงตอผาน URL
PHP Sessions อนญาตใหเราบนทกขอมลลงใน SuperglobalArray ทชอวา $_SESSION
Memorization
Web application development
Computer Science, CMU
กอนทเราจะสงให PHP Sessions จดจ าขอมลของเรา เราจะตองท าการเรยกใช PHP Sessions กอน ดวยค าสง
session_start();
ค าสงขางตนเปนการสงใหเวบของเราเรมการท างานของ PHP Sessions ซงจะตองประกาศไวในสวนแรกสดของทกไฟล PHP ทตองการใชหรอบนทกขอมลใน session
Sessions preprocessing
Web application development
Computer Science, CMU
หลงจากเราเรยกใชงาน PHP Sessions เราสามารถบนทกขอมลลงใน Superglobal array $_SESSION ดงตวอยางดานลาง
<?php
session_start(); // เรยกใช PHP Session
$_SESSION[‘username’] = “admin”
$_SESSION[‘age’] = 20;
?>
Information Storing
Web application development
Computer Science, CMU
หลงจากทเราบนทกขอมลลงใน superglobal array $_SESSION แลวนน เราสามารถดงขอมลมาใชไดโดยไมตองสงขอมลผาน Form อก
Information retrieval
Web application development
Computer Science, CMU
ขอควรระวงในการเรยกใช Superglobal Array $_SESSION คอ การเรยกใชขอมลทยงไมเคยมการบนทกมากกอน
หากเปนเชนนนจะเกด Error Undefined Index
เพอเลยงปญหานเราสามารถตรวจสอบวาตวแปรนนถกบนทกไวหรอไมดวยฟงกชน isset
Existence Validation
Web application development
Computer Science, CMU
หากเราตองการท าลายขอมลทบนทกไว เราสามารถท าไดดวยค าสง
session_unset(); // ลบตวแปรทงหมด
session_destroy(); // จบการท างานของ sessions
Terminating sessions
Web application development
Computer Science, CMU
ระบบ Login เปนระบบทท าการจดจ าการลงชอเขาใช โดยระบบจะตองจดจ าขอมลส าคญส าหรบยนยนตวตนเชน username, email และไมควรจดจ า password
ระบบ Login จะประกอบไปดวยสองสวนหลก คอLogin.php ท าหนาทตรวจสอบวา username และ password ไดผานการลงทะเบยนมาหรอไม หากใช ใหบนทก username ลงใน session
Logout.php ท าหนาทลบขอมลการ login ออกจากระบบ
Login system
Web application development
Computer Science, CMU
Login system [2]
Web application development
Computer Science, CMU
จงออกแบบระบบ 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
Web application development
PHP - MYSQL
Web application development
Computer Science, CMU
มสามขนตอน ขนตอนตดตอกบฐานขอมล
ขนตอนดงขอมล
ขนตอนตดการเชอมตอกบฐานขอมล
การดงขอมลจากฐานขอมลผาน PHP
Web application development
Computer Science, CMU
การเรมการเชอมตอกบฐานขอมล
ท าไดโดยเรยกใชฟงกชน mysqli_connect()
ม syntax ในการเรยกใชดงน
mysqli_connect($host, $username, $password, $database_name)
ถาเชอมตอส าเรจ mysqli_connect() จะรเทรน object ทแสดงการเชอมตอ หากไมส าเรจจะรเทรน FALSE
ขนตอนแรก Connect
Web application development
Computer Science, CMU
<?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”;
}
?>
ตวอยาง
Web application development
Computer Science, CMU
สามารถท าไดโดยใชฟงกช น 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
Web application development
Computer Science, CMU
$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";
}
ตวอยาง
Web application development
Computer Science, CMU
เปนการปดการเชอมตอกบฐานขอมลเมอเราใชงานเสรจแลว
สามารถท าไดโดยใชฟงกชน mysqli_close()
ตวอยาง mysqli_close($conn);
ขนตอนสดทาย Close
Web application development
Computer Science, CMU
มไวเพอเตมอกขระอนๆลงไปในขอความ (string)
% เตมอกขระอะไรกไดตงแต 0 ตวขนไป
_ เตมอกขระอะไรกไดตวเดยว
มประโยชนในการเทยบหา substring ใน database
ตวอยาง %ber% จะเทยบตรงกบ number , berlin, uber
_ber จะเทยบตรงกบ uber
SQL Wildcard
Web application development
Computer Science, CMU
SELECT * FROM Customers
WHERE City LIKE ‘ber%’;
เลอกทกคอลมนจากตาราง customers ทชอเมองขนตนดวย ber
การใช Wildcard ในค าสง Select
Web application development
Computer Science, CMU
แสดงผลลพธทไดเรยงตามล าดบ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
Web application development
Computer Science, CMU
จงปรบปรงโปรแกรมใน exercise 9 ใหตรวจสอบ username และ password ทดงมาจากฐานขอมลแทน
Exercise 10 (mini boss)
Web application development
PHP MYSQL II
Web application development
Computer Science, CMU
ค าสงปรบปรงเปลยนแปลงฐานขอมล ไมสงผลลพธกลบมา เหมอนค าสง SELECT
ค าสงทเกยวของกบการปรบปรงฐานขอมล1. INSERT
2. DELETE
3. UPDATE
Database Modification
Web application development
Computer Science, CMU
SyntaxINSERT INTO table
VALUES (‘value1’, ‘value2’, ‘value3’,… );
ตวอยางINSERT INTO Likes
VALUES(‘Sally’, ‘Singha’);
Insertion
Web application development
Computer Science, CMU
SyntaxDELETE FROM tableWHERE condition;
ตวอยาง DELETE from LikesWHERE drinker=‘Sally’;
DELETE from LikesWHERE drinker=‘Sally’ AND beer=‘Singha’;
DELETION
Web application development
Computer Science, CMU
DELETE FROM table;
ไมตองม WHERE clause
ตวอยางDELETE FROM Likes
การลบทงหมด
Web application development
Computer Science, CMU
ใชในการเปลยน attribute บางตวของ record ใน table
SyntaxUPDATE tableSET <list of attribute assignments>WHERE condition;
ตวอยางUPDATE DrinkersSET phone=‘0818889999’WHERE name=‘Fred’
UPDATES
Web application development
Computer Science, CMU
จงปรบปรงโปรแกรม login ขางตน ใหมหนาและฟงกชนตอไปน
register.php เพอใหผใชสามารถลงทะเบยนใหมได
edit.php เพอใหผใชสามารถเขามาแกไขขอมลสวนตวได
Exercise 11
Web application development
PART III: HTML AND CSS
ปรบปรงโดย อ. กตตพชญ คปตะวาณช
และ อ. สทธโชค ทรพยไพบลยกจ
Web application development
HTML ค าสงในการจดตวอกษร
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
HTML Formatting
More HTML Text Formatting Tags
Tag Description
<small> ส าหรบ text ขนาดเลก (smaller)
<ins> ส าหรบ text ทแทรกมา (inserted)
<del> ส าหรบ text ทถกลบ (deleted)
<mark> ส าหรบ text ทถก highlight (marked)
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
HTML Styles - CSS
What is CSS?CSS ยอมาจาก Cascading Style Sheet
Style ใชเพอก าหนดรปแบบการแสดงผล HTML element
CSS ถกสรางมาเพอแยกรปแบบการแสดงผล (Style) ออกจากเนอหา (Content)
Web application development
Computer Science, CMU
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
Computer Science, CMU
HTML Styles – CSS [3]
CSS Example - Result
Web application development
Computer Science, CMU
HTML - Adding CSS
การก าหนด Style สามารถท าได 3 วธคอ1. ก าหนดแบบ Inline โดยระบเปน Attribute "style" ในแตละ Element
<p style="color:blue;margin-left:20px;">Some text</p>
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
HTML Style Example [3]
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>
Web application development
Computer Science, CMU
HTML Style Example [4]
Example 3: Border (เสนขอบ)border-style ก าหนดแบบเสนขอบ • none คอไมมขอบ
Web application development
Computer Science, CMU
HTML Style Example [5]
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>
Web application development
Computer Science, CMU
HTML Style Example [6]
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">
Web application development
HTML การก าหนดเครองหมายหนาหวขอและเลขล าดบรายการ
Web application development
Computer Science, CMU
HTML Lists
การท า List (รายการ) ในเอกสาร HTML ท าใหขอมลในเวบเพจอานไดงาย และเปนการจดระเบยบเนอความ โดยใชการแสดงเครองหมายหรอเลขล าดบรายการหนาหวขอ
List ในเอกสาร HTML ทใชมากทสดคอList แบบไมเรยงล าดบ <UL> (Unordered Lists)
List แบบเรยงล าดบ <OL> (Ordered Lists)
มาตรฐาน HTML ไมอนญาตใหใส List Tag ภายใน Paragraph Tag <p>
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
HTML Unordered Lists
เปนการแสดงรายการกลมทเกยวพนกนแตไมจ าเปนตองเรยงล าดบ โดยแตละรายการจะมหวขออยในรปแบบวงกลมทบ
<p>Things to buy:</p><ul>
<li>Coffee</li><li>Milk</li>
</ul>
Web application development
Things to buy:
• Coffee• Milk
Computer Science, CMU
HTML Ordered Lists
เปนการแสดงรายการทมล าดบกอนหลง โดยคา Default จะเปนตวเลขเรมจากล าดบท 1.
<p>Things to buy:</p><ol>
<li>Coffee</li><li>Milk</li>
</ol>
Web application development
Things to buy:
1. Coffee2. Milk
Computer Science, CMU
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>
Web application development
Things to buy:
e. Coffeef. Teag. Milk
Computer Science, CMU
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
Web application development
Computer Science, CMU
HTML 4. การสรางตาราง
รวบรวมโดย อ. กตตพชญ คปตะวาณช
Web application development
Computer Science, CMU
HTML Tables
การสรางตารางในเอกสาร HTML ท าไดโดยการใช Tag <table>
ตารางในเอกสาร HTML ประกอบแถวในแนวนอน (Row)ก าหนดดวย Tag <tr> (tr: table row)
ในแตละ Row จะประกอบดวยชองทเรยกวา Data Cellก าหนดดวย Tag <td> (td: table data)
ในแตละ Cell จะสามารถใส Content ไดหลายประเภท เชน ขอความ รปภาพ ลสต พารากราฟ ฟอรม หรอตาราง
Web application development
Computer Science, CMU
<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
Web application development
หากไมมการก าหนดคาให Attribute "border" ตารางทไดจะไมมเสนกรอบทงภายใน (ระหวาง Cell) และภายนอกตาราง ขนาดของ border ทระบจะเปนความกวางของเสนรอบนอกตารางเทานน
ใชเครองหมาย "" และไมมหนวย
Computer Science, CMU
HTML Table Tags
Tags ทใชบอยในการสรางตารางไดแก
Tag Description
<table> ก าหนดตาราง<th> ก าหนดหวตาราง (table header)<tr> ก าหนดแถว (table row)<td> ก าหนดชองในตาราง (table data)<caption> ก าหนดชอเรองของตาราง
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
HTML Table Attributes
Attribute ตางๆ ทสามารถใชกบ Tag <table> ไดแก
Web application development
Attribute Description
summary สรปเนอหาตาราง (ใชส าหรบโปรแกรม Text-to-Speech กรณผมปญหาทางการมองเหน)
width ความกวางของตารางborder ความกวางของเสนกรอบรอบนอกตาราง
หากไมระบจะไมมเสนระหวาง Cellcellspacing ระบระยะหางระหวาง Cellcellpadding ระบระยะหางระหวางตวอกษรและขอบ Cell
Note: HTML5 จะ support แค border เทานน
Computer Science, CMU
cellspaceing and cellpadding
Web application development
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)
Computer Science, CMU
CSS Units
หนวยทสามารถใชไดใน CSS มหลายแบบ บางชนดเปนหนวยทใชในงานดานการออกแบบตวอกษร (Typography) มากอน เชน pc (pica) และ pt (point)
หรอหนวยเปนหนวยความยาวพนฐานได เชน cm, mm และ in (inch)
หนวยทสรางขนมาเพอใชกบ CSS โดยเฉพาะคอ px (pixel)
หนวย em และ ex เปนหนวยทอางองจากความกวางและความสงของ Font ทใชอย ตามล าดบ
สามารถใชหนวยเปน % อางองจาก Parent Element
Web application development
Computer Science, CMU
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
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>
Computer Science, CMU
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)
Web application development
HTML Table Formatting [2]
margin: 5px 10px 15pX 20px;
Computer Science, CMU
HTML Table Formatting [3]
สามารถก าหนดคา ให 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
Web application development
กรณ นอยกวา 4 คา: เรมจาก top ไป right ไป bottomไป left ถาคาไหนหายไป ใหใชคาจากทศฝงตรงขาม
Computer Science, CMU
HTML Table Formatting [4]
ในการจดรปแบบตาราง การก าหนด style ใหแตละ element ทมรปแบบเหมอนกนเปนจ านวนมาก (เชนการก าหนดขนาด Font ในCell <td> ใหเหมอนกนทงตาราง) ควรใชวธก าหนดผาน Internalหรอ External Style Sheet
ไมควรใชวธก าหนดคาแบบ Inline ทละ Element จนครบ T _ T
<head><!--internal SS --><style type="text/css">
…</style>
</head>
<head><!--external SS --><link rel="stylesheet" type="text/css"href="mystyle.css">
</head>
Note: Comments in HTML are denoted by <!-- text -->
Web application development
Computer Science, CMU
HTML Table Formatting [6]
vertical-align ก าหนดต าแหนงการจดวางตวอกษรในแนวดง(top, middle, bottom)
td{height:50px;vertical-align:bottom;
}
height ก าหนดความสงของ cell
Example 3: Fancy Table
top
middle
bottom
50px
Web application development
Computer Science, CMU
HTML Table Formatting [7]
padding, padding-top, padding-bottom, padding-left, และ padding-right ใชก าหนดระยะหางระหวาง Content ของ Cell และขอบดานในของ Cell โดยม Syntax เหมอน "margin"
Web application development
Computer Science, CMU
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>
Web application development
rowspan
2 3
colspan
5 6
Computer Science, CMU
ในการสรางตารางใหมลกษณะ 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]
Web application development
a bc
d e
f G
HTML Cell Spanning [2]
Computer Science, CMU
<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]
Web application development
a [r1] b [r1]c [r1]
d [r2] e [r2]
f [r3] g [r3]
แลวจงพจารณาวา Cell ไหนมลกษณะ Spanning ขาม Row หรอ Column
Computer Science, CMU
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
Web application development
Computer Science, CMU
HTML 7. การตกแตงเวบเพจดวยรปภาพ
รวบรวมโดย อ. กตตพชญ คปตะวาณช
Web application development
Computer Science, CMU
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
Web application development
Computer Science, CMU
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 ก าหนดค าอธบายรปภาพ
Web application development
Computer Science, CMU
The alt Attribute [2]
ในกรณทรปภาพไมสามารถแสดงผลบนเอกสาร HTML ได
มปญหาดาน Internet (Speed, Connection, etc)
ไมสามารถเขาถง Resource (รปภาพ) ได
ขอความทก าหนดไวท Attribute alt กจะแสดงผลแทน
ในบาง Browser เชน IE (Internet Explorer) ขอความทก าหนดโดย alt จะแสดงผลในลกษณะ Tooltip
ไมใชการแสดง alt ตามมาตรฐานทก าหนด หากตองการแสดง Tooltipควรใช Attribute title แทน
Web application development
Computer Science, CMU
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 ในการบรรยายภาพ
Web application development
Computer Science, CMU
HTML 6. การเชอมโยงเวบเพจ (HYPERLINK)
รวบรวมโดย อ. กตตพชญ คปตะวาณช
Web application development
Computer Science, CMU
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, ไฟลเสยง หรอไฟลชนดอนๆ
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
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
Web application development
URI หรอ Uniform Resource Identifier เปนกลมอกขระ ทใชระบ หรออางถง ทรพยากร (Resource) ตางๆ บน Web เชน
สวนทอยซายสด กอนเครองหมาย : คอ URI scheme
URL คอ URI ทมการระบวธในการเขาถงขอมลนนๆ เชน http: ftp: mailto:
Computer Science, CMU
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
Computer Science, CMU
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
Web application development
Computer Science, CMU
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>
Web application development
Computer Science, CMU
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
Computer Science, CMU
นอกจากนเรายงสามารถก าหนด 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]
Web application development
Computer Science, CMU
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]
Web application development
Computer Science, CMU
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
Web application development