2. การสร้างฟอร์ม
Download
Report
Transcript 2. การสร้างฟอร์ม
COM PROGRAMMING
Cookie & Session
การสร้างฟอร์มร ับข้อมูล
และการแลกเปลีย
่ นข้อมูล
COM PROGRAMMING
แบบฟอร์ม
การสร้างฟอร์ม
ตัวอย่างการสร้างฟอร์ม
การแลกเปลี่ยนข้อมูลด้วย Cookie และ Session
้ หา
เนือ
COM PROGRAMMING
1. แบบฟอร์ม
ฟอร์มทางานอย่างไร
ทาหน้ าที่เพียงรับข้อมูลที่ผใู้ ช้ (User) กรอกเข้าไปเท่านัน้ ส่วนการ
ประเมินผลต่าง เช่น การนาข้อมูลทีผ่ ใู้ ช้กรอกเข้าไปเก็บลงฐานข้อมูล
(Database) หรือนาไปคานวณ โดยใช้ภาษาต่างๆ เช่น PHP , ASP และ
JSP เป็ นต้น
Input type=“text”
Input type=“password”
Input type=“checkbox”
Input type=“submit”
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
1. เริม่ แรกจะต้องใส่ Form TAG โดยคลิกเมนู Insert -> Form -> Form
<form id=“form1" name=" form1" method="post"
action="Printregister.php" >
</form>
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
2. Object การป้อนข้อมูล จะแบ่งออกเป็ น 2 กลุม่ ด้วยกัน โดยคลิกเมนู
Insert -> Form -> Text Field , -> Textarea
Text Field
Textarea
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
2. Object การป้อนข้อมูล จะแบ่งออกเป็ น 2 กลุม่ ด้วยกัน โดยคลิกเมนู
Insert -> Form -> Text Field , -> Textarea
<input name="logname" type="text" id="logname" size="20"
maxlength="15" />
<input name="pw" type="password" id="pw" size="20"
maxlength="15" />
<textarea name="address" cols="28" rows="4"
id="address"></textarea>
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
3. Object การเลือกข้อมูล จะแบ่งออกเป็ น 3 กลุม่ ด้วยกัน โดยคลิกเมนู
Insert -> Form -> Checkbox , -> Radio , -> List/Menu
Radio
List/Menu
Checkbox
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
3. Object การเลือกข้อมูล จะแบ่งออกเป็ น 3 กลุม่ ด้วยกัน โดยคลิกเมนู
Insert -> Form -> Checkbox (เลือกมากกว่าหนึ่งอย่าง)
<input name="hobby" type="checkbox" id="hobby" value="sport" />เล่นกีฬา
<input name="hobby2" type="checkbox" id="hobby2" value="read" />อ่านหนังสือ
<input name="hobby3" type="checkbox" id="hobby3" value="tour" /> ท่องเทีย่ ว
<input name="hobby4" type="checkbox" id="hobby4" value="game" />เล่นเกมส์
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
3. Object การเลือกข้อมูล จะแบ่งออกเป็ น 3 กลุม่ ด้วยกัน โดยคลิกเมนู
Insert -> Form -> Radio (เลือกอย่างใดอย่างหนึ่ง)
<input type="radio" name="gender" value="male" /> <label>ชาย</label>
<input type="radio" name="gender" value="female" /> <label>หญิง</label>
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
3. Object การเลือกข้อมูล จะแบ่งออกเป็ น 3 กลุม่ ด้วยกัน โดยคลิกเมนู
Insert -> Form -> List/Memu (เลือกอย่างใดอย่างหนึ่ง)
<select name="age" id="age">
<option value="3-18" selected="selected">3-18 ปี </option>
<option value="19-25">19-25 ปี </option>
<option value="26-45">26-45 ปี </option>
<option value="46-60">46-60 ปี </option>
<option value="61-80">61-80 ปี </option>
</select>
WEB PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
4. Object การส่งข้อมูล จะแบ่งออกเป็ น 3 กลุม่ ด้วยกัน โดยคลิกเมนู Insert > Form -> Button (ปุม่ ) , -> Image Field (รูปภาพ)
<input type="submit" name="Submit" value="ส่งข้อมูล" />
<input type="reset" name="Reset" value="ล้างข้อมูล" />
<input name="imageField2"
type="image" id="imageField2"
src="images/btn_submit.gif" />
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
5. Object การส่งข้อมูลแบบซ่อนรายละเอียด โดยคลิกเมนู Insert -> Form ->
Hidden Field
<input name="hiddenField" type="hidden" value="Tongpool
Heeptaisong" />
หมายเหตุ จะไม่แสดงค่าออกมาเมือ่ เราเรียกใช้งาน แต่จะเห็นค่าเมื่อเราใช้การ
มองแบบ View Source Code ใน Web Browser
COM PROGRAMMING
2. การสร้างฟอร์ม
การสร้างฟอร์ม
6. Object การแนบไฟล์ โดยคลิกเมนู Insert -> Form -> File Field
<input type="file" name="file" size="30"/>
COM PROGRAMMING 3. ตย. การสร้างฟอร์ม
ตัวอย่างการสร้างฟอร์ม
COM PROGRAMMING
4. Cookie และ Session
ภาพรวมการทางานของ Cookie และ Session
HTTP
Internet
HTTP
Web Browser :
• Internet Explorer
• Netscape / Firefox
• Opera
Web Server :
Database
• Apache
• IIS
Language :
ตัวแปร Cookie จะถูกจัดเก็บไว้ที่เครื่อง Client จะพบข้อมูลได้ที่
C:\Documents and Settings\username\Cookies
• ASP
• PHP
• JSP
ส่วนตัวแปร Session จะถูกจัดเก็บไว้ที่ Server
ไม่สามารถมองเห็นตัวแปรและข้อมูลได้
COM PROGRAMMING 4. รูจ้ ักและใชง้ าน Cookie
Cookie เป็ นวิธกี ารฝงั ข้อมูลขนาดเล็กๆ (ในรูปของเท็กซ์ไฟล์ขนาดไม่เกิน 4KB)
ไว้ในเครือ่ งของผูใ้ ช้งาน โดยข้อมูลทีฝ่ งั ก็คอื ข้อมูลทีแ่ ลกเปลีย่ นกัน ผลัดกันอ่าน
ผลัดกันเขียนข้อมูลนี้ได้ สาหรับ Cookie การเก็บข้อมูลประกอบด้วย 3 ส่วนคือ
– CookieName
– Value
– ข้อมูลประกอบอื่นๆ
คือ ชื่อ Cookie
คือ ค่าของข้อมูลที่ Cookie เก็บ
เช่นเวลาหมดอายุ, ข้อมูล Host และ Path
COM PROGRAMMING 4. รูจ้ ักและใชง้ าน Cookie
Cookie เป็ นวิธกี ารฝงั ข้อมูลขนาดเล็กๆ (ในรูปของเท็กซ์ไฟล์ขนาดไม่เกิน 4KB)
ไว้ในเครือ่ งของผูใ้ ช้งาน โดยข้อมูลทีฝ่ งั ก็คอื ข้อมูลทีแ่ ลกเปลีย่ นกัน ผลัดกันอ่าน
ผลัดกันเขียนข้อมูลนี้ได้ สาหรับ Cookie การเก็บข้อมูลประกอบด้วย 3 ส่วนคือ
– CookieName
– Value
– ข้อมูลประกอบอื่นๆ
คือ ชื่อ Cookie
คือ ค่าของข้อมูลที่ Cookie เก็บ
เช่นเวลาหมดอายุ, ข้อมูล Host และ Path
ตัวแปรคุกกีถ้ กู ประกาศขึน้ มาในสคริปต์ใดๆ กาหนดให้มอี ายุ 1 ชัวโมง
่ แม้วา่
สคริปต์ทส่ี ร้างตัวแปรคุกกีจ้ ะสิน้ สุดการทางาน แต่หากยังไม่ครบกาหนดเวลา ตัว
แปรคุกกีก้ ย็ งั คงสถานะอยู่ ไม่ถกู ทาลาย
COM PROGRAMMING 4. รูจ้ ักและใชง้ าน Cookie
ประโยชน์ ของคุกกี้ โดยส่วนมากเว็บไซต์ประเภท e-commerce นิยมใช้คุกกี้
เก็บข้อมูลส่วนตัวและพฤติกรรมของผูท้ เ่ี ข้าชมหรือลูกค้า เช่น
ข้อมูลประเภทการเข้าชม ความสนใจ การสังซื
่ อ้
ข้อมูลส่วนตัวของผูใ้ ช้ ถ้าเคยกรอกแบบฟอร์มมาก่อน ทีส่ ามารถขึน้ มาได้
โดยอัตโนมัติ เพือ่ ให้ลกู ค้าได้ประทับใจ
สามารถตรวจสอบการลงคะแนนของผูใ้ ช้ เพือ่ จากัดจานวนครัง้ ของการเข้า
โหวตในช่วงเวลาทีก่ าหนด
COM PROGRAMMING 4. รูจ้ ักและใชง้ าน Cookie
การสร้างคุกกี้
รูปแบบการกาหนดรายละเอียดให้ Cookie
setcookie(CookieName, Value, Timeout)
•
•
•
CookieName
Value
Timeout
คือ ชือ่ Cookie
คือ ค่าของข้อมูลที่ Cookie เก็บ
คือ เวลาหมดอายุ
$ckname = "RandomNumber";
$value = rand(0,9);
setcookie($ckname,$value,time()+60);
COM PROGRAMMING 4. รูจ้ ักและใชง้ าน Cookie
ตัวอย่างการสร้าง cookie
สาหรับตัวอย่างนี้จะมีการสร้าง Cookie ขึน้ มา จากนัน้ จะให้ผใู้ ช้งานดูคา่ Cookie
ทีส่ ร้างขึน้ , เปลีย่ นแปลงค่าใน Cookie หรือทาลาย Cookie นัน้ ๆ ไฟล์ทส่ี ร้างจะ
ประกอบด้วย
1)
2)
3)
4)
cookiestart.php
cookieview.php
cookiemodify.php
cookieclear.php
เพือ่ สร้างตัวแปร Cookie
เพือ่ ใช้ตรวจสอบค่า Cookie ทีไ่ ด้สร้างขึน้
เพือ่ เปลีย่ นแปลงค่าทีเ่ ก็บใน Cookie
เพือ่ ทาลาย Cookie ทีส่ ร้างขึน้
COM PROGRAMMING 5. รูจ้ ักและใชง้ าน Session
Session เป็ นตัวแปรคล้าย คุกกี้
Session ช่วยให้เราจดจาผูใ้ ช้และส่งข้อมูลระหว่างเพจได้
ข้อมูลทีถ่ ูกเก็บในตัวแปร session จะถูกบันทึกเป็ นไฟล์ session
ั ่ รฟ์ เวอร์
เช่นเดียวกับไฟล์คุกกี้ แต่ session จะเก็บไฟล์ไว้ทฝ่ี งเซิ
ความแตกต่างของ Cookie กับ Session คืออายุของตัวแปร
อายุของ Cookie ถูกกาหนดด้วยเวลา
อายุของ Session ถูกกาหนดด้วยการทางานของ Web Browser
COM PROGRAMMING 5. รูจ้ ักและใชง้ าน Session
ั ่ รฟ์ เวอร์เพียงแห่งเดียว แต่ทุกครัง้ ที่
ถึงแม้ไฟล์ session จะถูกเก็บทางฝงเซิ
ผูใ้ ช้เรียกสคริปต์ทม่ี กี ารประกาศตัวแปร session PHP จะสร้างไฟล์ session
เพือ่ เก็บข้อมูลตัวแปร session และกาหนด session ID ขึน้ มาสาหรับผูใ้ ช้แต่
ละคน ซึง่ session ID ทีก่ าหนดขึน้ มานัน้ จะมีคา่ ทีไ่ ม่ซ้ากัน และ session ID
จะเป็ นส่วนหนึ่งของชื่อไฟล์ session ด้วย
COM PROGRAMMING 5. รูจ้ ักและใชง้ าน Session
ฟังก์ชนั ที่ใช้งานกับตัวแปร
session_start()
คือ ฟั งก์ชนั ที่เริ่มต้นใช้งาน session
session_register() คือ ฟังก์ชนั การลงทะเบียนทาให้ตวั แปรนัน้
กลายเป็ นตัวแปร session
session_unregister() คือ ฟั งก์ชนั ที่ยกเลิกการ register ตัวแปร
session
session_destroy() คือฟังก์ชนั ที่ล้างข้อมูลทัง้ หมดของ session
ปัจจุบนั
COM PROGRAMMING 5. รูจ้ ักและใชง้ าน Session
รูปแบบการใช้งาน session
session_start();
session_register("UserName");
session_register("Password");
session_register("Email");
//session_register("UserName","Password","Email");
$_SESSION["UserName"] = $_POST["username"]; // หรือจะกาหนดค่าเลยก็ได้
$_SESSION["Password"] = $_POST["password"];
$_SESSION["Email"] = $_POST["email"];
session_destroy();
COM PROGRAMMING 5. รูจ้ ักและใชง้ าน Session
ตัวอย่าง
session-form.php คือ ไฟล์นี้จะมีฟอร์มสาหรับผูใ้ ช้งานระบุ
Username และ Password
session-set.php
คือ ไฟล์นี้จะสร้าง Session ตัวแปร Username
และ Password
session-view.php คือ ไฟล์นี้จะทาหน้ าที่ดขู ้อมูลต่างๆ ที่เก็บไว้ใน
ตัวแปร session
session-destroy.php คือ ไฟล์นี้จะทาลายข้อมูลใน session
COM PROGRAMMING