[email protected]/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1n˜"#˜...

21
954242 Web Programming [email protected]

Upload: others

Post on 09-Jun-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

954242 Web Programming

[email protected]

Page 2: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� ภาษาสครปต PHP นอกจากจะจดเปนภาษาโปรแกรมภาษาหน�งแลว ยงใชเปนตวสราง (generate) คาส�งภาษา HTML ซ�งเปนภาษาหลกในการแสดงผลบนหนาจอเวบเพจไดอกดวย โดยการใชคาส�ง echo หรอ print

Page 3: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� การสรางฟอรมในเวบเพจโดยท�วไปจะใชคาส�ง HTML ต >งแตการสรางฟอรม (form), ชองรบขอความหรอเทกซบอกซ (text box), ป มกด (button), กลองรายการหรอลสตบอกซ (list box), ป มเรดโอ (radio button) ไปจนถงเชคบอกซ (check box) การสรางฟอรมและองคประกอบของฟอรมเหลาน >ดวย HTML จะเปนลาดบข >นงาย ๆ และตรงไปตรงมา

Page 4: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� เวบเพจท�ตองมการรบคาจากผใชเพ�อนาไปประมวลผลหรอบนทกลงในระบบฐานขอมลน >น จาเปนตองมคอนโทรล (Controls) ตาง ๆ ไดแก ชองรบขอความ, ป ม,กลองรายการ, เชคบอกซ เพ�อเปนสวนท�ใชรบขอมลจากผใชและเม�อผ ใชกรอกขอความครบถวนแลว การสงขอมลเหลาน >ไปยงเพจท�ทาหนาท�ประมวลผล จาเปนตองอาศยแทก <form> ซ�งประกอบไปดวยแอตทรบวตท�สาคญดงน >� action ใชระบเพจปลายทางท�จะสงขอมลจากฟอรมไปใหเม�อฟอรมถก submit� method วธการท�ใชสงขอมลมอย 2 วธคอ GET และ POST ความแตกตาง

ระหวางการใช GET และ POST คอ เม�อใช GET ขอมลในฟอรมจะถกสงโดยพวงทายไปกบ URL ท�กาหนดไวท�แอตทรบวต action โดยจะแสดงใหเหนใน Address bar แตหากใช POST ขอมลในฟอรมจะถกสงไปยง เซรฟเวอรโดยไมแสดงใหเหนใน Address bar ดงน�นหากเปนขอมลท�มความสาคญและเปนความลบจงควรสงคาดวยวธ POST

� name ช�อฟอรม

Page 5: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘
Page 6: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� เม�อผ ใชคลกป ม Submit แลวไฟล registverify.php จะถกเรยกใหทางานโดยท�ฟอรม registForm น >จะสงคาของคอนโทรลตาง ๆ ในฟอรม (ตามท�ผ ใชไดปอน) ไปให และ PHP จะนาคาเหลาน >มาสรางเปนตวแปรท�มช�อตามช�อของคอนโทรลเหลาน >น (แตการเรยกใชตวแปรใน PHP จะตองใชสญลกษณ $ นาหนา)

Page 7: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� POST เปนการสงขอมลจากฟอรมไปยงสครปตโดยตรง โดยไมผาน URL ทาใหเราไมสามารถมองเหนขอมลดงกลาวไดดวยวธปกต เหมาะกบขอมลขนาดใหญ หรอตองปดเปนความลบ เชน หนาจอลอกอน

� GET เปนการสงขอมลจากฟอรมผานทาง URL ของเวบเพจโดยตรง วธน, ไมปลอดภยเพราะจะสามารถมองเหนขอมลท.สงไปใหสครปต บน URL ซ. งจะมองเหนไดในชอง Address Bar ของบราวเซอร

Page 8: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

<form id="form1" name="form1" method="post" action="showData.php">รหส: <input name="txtID" type="text" id="txtID"/><p>ช$อ - นามสกล:<input name="txtName" type="text" id="txtName" /><br />

<input type="submit" name="Submit" value="ตกลง" /></p></form>

สงขอมลแบบ post ไปยงไฟล showData.php

<?phpecho "ขอมลของคณคอ<br>";echo " รหส : ". $_POST[txtID];echo "<br>";echo "ช$อ-นามสกล : ". $_POST[txtName];?>

ไฟล showData.php รบตวแปรแบบPost มาจาก test.php

Page 9: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

<form name="form1" id="form1" method="get" action="showData.php" >รหส: <input name="txtID" type="text" id="txtID"/><p>ช$อ - นามสกล:<input name="txtName" type="text" id="txtName" /><br />

<input type="submit" name="Submit" value="ตกลง" /></p></form>

สงขอมลแบบ get ไปยงไฟล showData.php

ไฟล showData.php รบตวแปรแบบ Get มาจาก test.php

<?phpecho "ขอมลของคณคอ<br>";echo " รหส : ". $_GET[txtID];echo "<br>";echo "ช$อ-นามสกล : ". $_GET[txtName];?>

Page 10: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� ชองรบขอความ

คอชองท�ใหผ ใชกรอกขอความเพ�อสงไปประมวลผล การสรางชองรบขอความน >มคอนโทรลใหเลอกใชได 2 ชนดคอ แทก

<input> ท�เปนชองรบขอความบรรทดเดยว สามารถกาหนดความกวางและจานวนตวอกษรท�รบไดและแทก

Ex : <input type=“text” name=“mytext”>

<textarea> ซ�งเปนชองรบขอความหลายบรรทด โดยสามารถกาหนดความกวางและจานวนบรรทดได

Ex : <textarea name=“mytextarea” cols=“10” rows=“3”>

Page 11: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� ปมกด

การสรางป มดวย HTML ทาได 4 วธ แตละวธจะมความแตกตางกนในรายละเอยด� ปม submit โดยกาหนดแอตทรบวต type เปน submit และกาหนดขอวามท�ตองการให

แสดงท�แอตทรบวต value ดงตวอยาง

� ปมธรรมดา โดยกาหนดแอตทรบวต type เปน button ดงตวอยาง

� ปม reset ใชสาหรบคนคาเร�มตนใหแกคอนโทรลท >งหมดท�อยในฟอรมเดยวกนกบป ม reset

� ปมท$สรางจากแทก <button> เปนป มพเศษท�สามารถแสดงรปภาพได มอย 3 ชนดคอ submit, reset และ button (ซ�งเปนชนดท�มอยแลวในแทก <input> เพยงแตแทก <input> ไมสามารถใสรปภาพลงไปได) แมวาเราสามารถใช <input type=’image’ …> เพ�อใชรปภาพเปนป มรบคาส�งได แตป มท�ไดจะไมตอบสนองตอการกดเหมอนป มท�วไป (เวนแตวาจะเขยน JavaScript เพ�อใหตอบสนองตอเมาส) เพราะเหตน >แทก <button> จงมขอไดเปรยบกวา

Page 12: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� ชองรบรหสผาน

เปนชองรบขอความแบบหน�ง แตขอความท�พมพเขาไปจะไมปรากฏใหเหน โดยจะแสดงเปนเคร�องหมายดอกจน (*) หรอจดกลมแทนตวอกษรแตละตว นอกจากน >ผ ใชยงไมสามารถกอปป>ขอความในชองรบรหสผานได เพ�อเปนการรกษาความปลอดภย จงเหมาะท�จะใชในการรบขอมลท�เปนความลบ เชน รหสผานท�ใชลอกอนเขาสระบบเปนตน

Ex : <input type=“password” name=“mypassword”>

Page 13: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� เชคบอกซและปมเรดโอ

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

Page 14: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

14

� การเลอก โดยเลอกอยางไดอยางหน. ง จากหลาย ๆ ตวเลอก

Page 15: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

15

Page 16: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� ลสตบอกซ

การสรางลสตบอกซดวย HTML จะมแทกท�ใชรวมกนอย 3 แทกคอ <select>, <optgroup> และ <option>� แทก <select> จะเปนตวกาหนดลกษณะและรปแบบของลสตบอกซ เชนจะใหมช�อวาอะไร

, ขนาดก�บรรทด และตวเลอกสามารถถกเลอกไดพรอมกนมากกวา 1 ตวเลอกหรอไม

� แทก <optgroup> เปนการกาหนดกลมของตวเลอก

� แทก <option> เปนตวกาหนดตวเลอกแตละอน

Page 17: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

� ลสตบอกซ

การสรางลสตบอกซดวย HTML จะมแทกท�ใชรวมกนอย 3 แทกคอ <select>, <optgroup> และ <option>� แทก <select> จะเปนตวกาหนดลกษณะและรปแบบของลสตบอกซ เชนจะใหมช�อวาอะไร

, ขนาดก�บรรทด และตวเลอกสามารถถกเลอกไดพรอมกนมากกวา 1 ตวเลอกหรอไม � แทก <optgroup> เปนการกาหนดกลมของตวเลอก � แทก <option> เปนตวกาหนดตวเลอกแตละอน � การกาหนดคาเร$มตนใหแกลสตบอกซ เม�อตองการใหตวเลอกบางตว (หน�งตวเลอกหรอ

มากกวา) ถกเลอกไวต >งแตเปดเพจมาคร >งแรกเพ�อเปนคาเร�มตนใหแกผใช จะทาไดดวยการระบแอตทรบวต selected ไวภายในแทก <option> ของตวเลอกท�ตองการใหถกเลอกน >น

� เราสามารถกาหนดใหตอนเร�มตนมการเลอกตวเลอกไวหลาย ๆ ตวได โดยการระบแอตทรบวต selected ลงในแทก <option> ทกอนท�ตองการ แตในกรณท�ใช selected กบหลาย ๆ ตวเลอกน >จะตองกาหนดแอตทรบวต multiple ไวในแทก <select> ดวย มฉะน >นอาจเกดขอผดพลาดหรอใหผลลพธไมตรงกบความตองการ

Page 18: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

18

� การเลอกจากใน list หน. งอยาง

� selected=‘selected’ ชวยในการกาหนดคาเร. มตน

<select name=‘sname’>

<option value=‘1’> One </option>

<option value=‘2’ selected=‘selected’> Two </option>

<option value=‘3’> Three </option>

</select>

Page 19: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘
Page 20: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

Querystring คอขอมลท. Browser สงตอทาย URL ของ Page ท.ตองการใชไปยง Web Server โดยขอมลจะประกอบไปดวยช. อของขอมลและคาของขอมลรปแบบ http://127.0.0.1/file-name.php?var-name=value

หากตองการสงคามากกวาหน�งคา ใหใชเคร�องหมาย & ข"นระหวางตวแปร รปแบบ http://127.0.0.1/file-name.php?var-name1=value&var-name2=value

การอานขอมลจาก Querystringสามารถอานไดจากคา var-name ท. เราต,งข,นมาไดเลย

เชน $var-name echo"$var-name";

20

Page 21: krittawaya@gmailmyweb.cmu.ac.th/wijit.a/954242/week5/wk5.pdf · 2 3 =5˝ ˜ ˛ˇ5 2? 1N˜"#˜ 39˝ ,4 ˇ ˚1˚ˆ9 2 =˙ ˚˛" 22 O C˜ ˇN˚ > , ˜ ˛ˇ5 =˚ (Controls) ?˛ M 4 ˜˘

sample2.php<html>

<body>

ช. อ <? echo "$_GET[name]" ?><br>

อาย<?echo "$_GET[old]" ?></body></html>

sample1.php<html>

<body>

<?

$name="วระชย นกจรมย";$old=21;?>

<a href="sample2.php?name=<?echo"$name"; ?>&old=<? echo"$old"; ?>">Test Querystring </a> </body> </html>