เนื้อหาต่อไปนี้เรามาดูเกี่ยวกับการใช้งาน Form
ซึ่งเป็นส่วนสำหรับรับค่าข้อมูลจากผู้ใช้ แล้วนำไป
จัดการต่อ เช่น บันทึกลงฐานข้อมูล แสดงผล นำไป
คำนวณ หรืออื่นๆ ในที่นี้จะแนะนำเฉพาะส่วนที่จำเป็น
เบื้องต้น บางฟังก์ชั่น และเราควรมีความเข้าใจเกี่ยวกับ
การใช้งาน Controller ในส่วนของ Incoming Request
สามารถทบทวนได้ที่บทความ
การใช้งาน IncomingRequest ใน CodeIgniter 4 http://niik.in/998
https://www.ninenik.com/content.php?arti_id=998 via @ninenik
การใช้งาน Form Element ใน CodeIgniter 4
เราจะมาดูเกี่ยวกับการสร้างฟอร์ม ใน Views และการส่งข้อมูลใน ฟอร์มเบื้องต้น โดยจะใช้งาน Helloworld
Controller ในการแสดงข้อมูลฟอร์ม และแสดงข้อมูลที่ถูกส่งจากฟอร์มเมื่อมีการกดส่งค่าหรือ submit ข้อมูล
app/Controllers/Helloworld.php
<?php namespace App\Controllers;
use CodeIgniter\Controller; // เรียกใช้งาน Controller class
class Helloworld extends Controller
{
public function index()
{
helper('form'); // ใช้งาน form helper ฟังก์ชั่น
// ตรวจสอบการ submit ข้อมูลจากฟอร์ม และแสดงข้อมูลที่ถูกส่งมาเบื้องต้น
if ($this->request->getMethod() === 'post'){
echo "<pre>";
$post = $this->request->getPost();
print_r($post);
echo "</pre>";
}
$data = [
'title' => 'test my form'
];
echo view('pages/myform', $data);
}
}
app/Views/pages/myform.php
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<title><?= esc($title) ?></title>
</head>
<body>
<!--กำหนด css style สำหรับฟอร์ม สำหรับทดสอบ -->
<style type="text/css">
form{ display: flex;flex-direction: column; }
</style>
<!-- ส่วนของข้อมูลฟอร์ม ที่เราจะเพิ่ม-->
<!-- สร้างลิ้งค์สำหรับรีโหลดหน้าทดสอบ-->
<?= anchor(current_url(),'Reload') ?>
</body>
</html>
เนื้อหานี้เราจะไม่พูดถึงการใช้งาน model หลักๆ จะใช้งานใน Controller และ View
เมื่อได้ไฟล์ข้างต้นแล้ว เราสามารถเรียกไปยัง URL
https://www.mysslweb.com/helloworld
จะเป็นหน้าทดสอบการใช้งานฟอร์ม
การใช้งาน Form Helper
ใน Controller ด้านบน เรามีการเรียกใช้งาน Form Helper ซึ่งจะมีฟังก์ชั่น ที่ใช้สำหรับสร้าง Element ต่างๆ ของฟอร์ม
ซึ่งรองรับการ escape ข้อมูลให้อัตโนมัติ แต่ไม่จำเป็นว่าเราต้องรู้จักหรือใช้งานทุกฟังก์ชั่น เพราะใน CI เราสามารถสร้าง
รูปแบบใน views ด้วยแท็ก HTML ได้ตามต้องการ อย่างไรก็ตาม เราก็จะยังใช้ในบางฟังก์ชั่น โดยเฉพาะฟังก์ชั่นสำหรับ
เป็นปิดแท็กฟอร์ม และฟังก์ชั่นสำหรับกำหนดค่าเริ่มต้นกับฟังก์ชั่นสำหรับแสดงค่าข้อมูลที่เพิ่ง submit หรือส่งค่าไปกรณี
ต้องการให้แสดงค่านั้นอีกครั้ง เมื่อมีบางฟิลด์ในฟอร์มที่ข้อมูลไม่ผ่านการตรวจสอบ ลักษณะนี้เป็นต้น
เราจะกำหนดการใช้งานในไฟล์ myform.php
form_open()
form_open_multipart()
เป็นฟังก์ชั่นสำหรับเปิดแท็กฟอร์ม <form> โดยทั้งสองฟังก์ชั่นมีรูปแบบการกำหนดและใช้งานคล้ายๆ กันแตกต่างกันที่
กรณีเป็น form_open_multipart() จะใช้สำหรับฟอร์มที่มี input file สำหรับอัพโหลดข้อมูล มาดูรูปแบบคำสั่ง และ การ
กำหนดค่า parameter ที่รองรับ จะเป็นดังนี้
form_open([$action = ''[, $attributes = ''[, $hidden = []]]]) form_open_multipart([$action = ''[, $attributes = ''[, $hidden = []]]])
Parameters:
$action (string) – กำหนดฟอร์ม action หรือ url ที่จะส่งข้อมูลไป
$attributes (mixed) – กำหนด attribute อาจจะเป็น string หรือ array ก็ได้
$hidden (array) – กำหนด input hiden ถ้าต้องการรูปแบบ array
form_close()
เป็นฟังก์ชั่นสำหรับปิดแท็กฟอร์ม </form>
เราจะลองกำหนดในไฟล์ myform.php แล้วดูผลลัพธ์ในที่นี้จะไม่กำหนด parameter ใดๆ สามารถทำได้ดังนี้
app/Views/pages/myform.php
<!-- ส่วนของข้อมูลฟอร์ม ที่เราจะเพิ่ม--> <?php echo form_open(); ?> <?php echo form_close(); ?>
ผลลัพธ์ได้ที่มีดูส่วนของ HTML กรณี form_open()
<!-- ส่วนของข้อมูลฟอร์ม ที่เราจะเพิ่ม--> <form action="https://www.mysslweb.com/helloworld" method="post" accept-charset="utf-8"> </form>
ผลลัพธ์ได้ที่มีดูส่วนของ HTML กรณี form_open_multipart()
<!-- ส่วนของข้อมูลฟอร์ม ที่เราจะเพิ่ม--> <form action="https://www.mysslweb.com/helloworld" enctype="multipart/form-data" method="post" accept-charset="utf-8"> </form>
จะเห็นว่าในกรณีเป็น form_open_multipart() จะมีส่วนของการอัพโหลด หรือค่า enctype เท่ากับ
multipart/form-data ในขณะที่กรณีเป็น form_open() จะมีค่า enctype เป็นค่า default หรือเท่ากับ
application/x-www-form-urlencoded ซึ่งจะกำหนดหรือไม่ก็ได้ ในข้างต้น จะเห็นว่าไม่มีกำหนดค่านี้
สำหรับค่า action หรือ url target หากไม่ได้กำหนด จะเป็น url ของหน้าเพจปัจจุบันที่โหลดในขณะนั้น
การเปิด ปิดแท็กฟอร์มข้างต้น สามารถใช้คำสั่งบรรทัดเดียวเพื่อให้กระชับดังนี้ได้
<!-- ส่วนของข้อมูลฟอร์ม ที่เราจะเพิ่ม--> <?= form_open() ?> <?= form_close() ?>
เราจะทดสอบสร้าง input text และ textarea สำหรับส่งค่าข้อมูล พร้อมปุ่ม submit เบื้องต้นดังนี้แทรกเข้าไป
<?= form_open('helloworld') ?>
<input type="text" name="input1" value="" >
<textarea name="textarea1" cols="30" rows="3"></textarea>
<button type="submit">Send</button>
<?= form_close() ?>
เมื่อทดสอบรัน และลองกรอกข้อมูลทดสอบเบื้องต้น แล้วกดปุ่ม ส่งข้อมูล จะได้ผลลัพธ์ประมาณนี้
เมื่อทดสอบกรอกข้อมูล แล้วกดส่ง ค่าของข้อมูลในฟอร์มจะเข้าเงื่อนไขการตรวจสอบใน Controller ว่ามีการส่งข้อมูล
โดย method แบบ post มาหรือไม่ ถ้ามี ก็ให้แสดง array ข้อมูลของตัวแปร $_POST ซึ่งใน CI ใช้เป็น
$this->request->getPost();
ข้อมูลจากฟอร์มแสดงผ่านคำสั่ง prrint_r() จากตัวแปร $post ที่เรากำหนด และนี้ก็คือรูปแบบการส่งข้อมูลจาก input
text และ texarea
set_value()
เป็นคำสั่งสำหรับกำหนดค่าเริ่มต้นให้กับ input text และ textarea รองรับรูปแบบ การกำหนด parameter ดังนี้
set_value($field[, $default = ''[, $html_escape = TRUE]])
Parameters:
$field (string) – ชื่อฟิลด์ หรือ element name
$default (string) – ค่าเริ่มต้นที่ต้องการกำหนด ถ้ามี
$html_escape (bool) – กรณีใช้งานกับ แท็กที่สร้างด้วย form helper สามารถปิดการ escape ได้
ในการใช้งานฟังก์ชั่น set_value() เราจะใช้กับกรณีต้องการแก้ไขข้อมูล โดยอาจจะมีข้อมูลที่ได้จากฐานข้อมูล
นำมาแสดงในฟิลด์ที่ต้องการแก้ไข หรือจะใช้สำหรับกรณีกำหนดเป็นค่าเริ่มต้น หรือจะใช้กำหนดค่าข้อมูลจากฟอร์ม
ที่เพิ่ง submit ค่าไป อย่างในตัวอย่างก่อนหน้า พอเราทำการ submit ข้อมูลไป ข้อมูลต่างๆ ในฟอร์มก็จะหายไป เป็น
ค่าว่าง แต่ถ้าเราต้องการให้ เมื่อ submit ข้อมูลไปหน้าเดิมแล้ว ขณะที่ฟอร์มยังแสดง เราต้องการให้ข้อมูลที่ ส่งนั้น
ยังคงแสดงในฟิลด์นั้นๆ อยู่ อาจจะไว้สำหรับตรวจสอบกรณีมีบางฟิลด์ข้อมูลไม่ถูกต้อง เป็นต้น ก็สามารถกำหนดได้ดังนี้
<input type="text" name="input1" value="<?= set_value('input1') ?>" >
<textarea name="textarea1" cols="30" rows="3"><?= set_value('textarea1') ?></textarea>
<button type="submit">Send</button>
ผลลัพธ์ที่ได้เมื่อส่งข้อมูล
เราสามารถกำหนดค่าข้อมูลเริ่มต้นใน parameter ตัวทีสอง ในกรณีสำหรับต้องการแก้ไขข้อมูลที่ดึงมาจาก db ก็สามารถ
ทำได้ดังนี้
<input type="text" name="input1" value="<?= set_value('input1','data from db test 1') ?>" >
<textarea name="textarea1" cols="30" rows="3"><?= set_value('textarea1','data from db test 2') ?></textarea>
ผลลัพธ์ทีได้
ในกรณี input นั้นกำหนดชื่อเป็นแบบ array ทั้งแบบ base zero key หรือแบบ name key กำหนดเอง เราสามารถกำหนด
ในส่วนของคำสั่ง set_value() ตรงชื่อฟิลด์เป็นดังนี้
<input type="text" name="input1[]" value="<?= set_value('input1[0]','data from db test 1') ?>" >
<input type="text" name="input1[]" value="<?= set_value('input1[1]','data from db test 2') ?>" >
จะเห็นว่าถ้ากำหนดชื่อเป็น base zero หรือ [] ค่าจะเริ่มต้นที่ 0 ดังนั้นชื่อของฟิลด์ที่กำหนดใน set_value() ก็จะเป็นชื่อ
ฟิลด์ตามด้วย [key] ของฟิลด์นั้นๆ ข้างต้นก็จะเป็น input1[0] และ input1[1] ตามลำดับ
ผลลัพธ์ที่ได้ จะเป็นดังนี้
แต่ถ้าใช้เป็นรูปแบบ name key ก็สามารถปรับเป็นดังนี้แทน
<input type="text" name="input1[firstname]" value="<?= set_value('input1[firstname]','data from db test 1') ?>" >
<input type="text" name="input1[lastname]" value="<?= set_value('input1[lastname]','data from db test 2') ?>" >
ผลลัพธ์ที่ได้ จะเป็นดังนี้
ในส่วนของการแสดงค่าหรือรับค่าตัวแปรที่กำหนดแบบ array สมมติใช้เป็น base zero เป็น name="input1[]"
หากเรารับค่าจาก $this->request->getPost('input1') ค่าที่ได้จะเป็น array
print_r($this->request->getPost('input1')); // แสดง array ข้อมูล
ดังนั้นหากต้องการเฉพาะ key เช่นต้องการแสดงข้อมูลเฉพาะ key แรกให้เรากำหนด key ให้กับชื่อฟิดล์ด้วย ดังนี้
$firstname = $this->request->getPost('input1[0]'); // สำหรับ base zero
// หรือ
$firstname = $this->request->getPost('input1[firstname]'); // สำหรับ name key
รูปแบบการกำหนด และการใช้งานคำสั่ง set_value() ร่วมถึงการอ้างอิงค่าตัวแปรที่เป็นแบบ array ที่อธิบายไปข้างต้น
สามารถปรับใช้งานได้กับ textarea และ Form element เหล่านี้ได้
<input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="hidden"> <input type="month"> <input type="number"> <input type="password"> <input type="search"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week">
set_select()
เป็นคำสั่งสำหรับจัดการค่าข้อมูลของ <select> element มีรูปแบบการใช้งาน และ parameter ที่รองรับดังนี้
set_select($field[, $value = ''[, $default = FALSE]])
Parameters:
$field (string) – ชื่อฟิลด์ หรือ element name
$value (string) – ค่าข้อมูลของฟิลด์
$default (string) – ค่าเริ่มต้นที่ต้องการกำหนด ถ้ามี ใช้คำว่า TRUE หรือ FALSE
เราเปลี่ยนส่วนของโค้ดทดสอบ เป็นการใช้งาน select แท็กตามรูปแบบดังนี้
<select name="myselect1"> <option value="">Select</option> <option value="1">Choice 1</option> <option value="2">Choice 2</option> <option value="3">Choice 3</option> </select> <button type="submit">Send</button>
กรณีที่เราต้องการให้ส่งค่าข้อมูลแล้ว ให้ข้อมูล select ที่ถูกเลือกแสดงเป็นค่าเริ่มต้น สามารถกำหนดได้ดังนี้
<select name="myselect1">
<option value="">Select</option>
<option value="1" <?= set_select('myselect1', '1'); ?> >Choice 1</option>
<option value="2" <?= set_select('myselect1', '2'); ?> >Choice 2</option>
<option value="3" <?= set_select('myselect1', '3'); ?> >Choice 3</option>
</select>
ก่อนส่งข้อมูลค่า default ที่ถูกเลือกจะอยู่ที่ option แรก เมื่อสมมติเราเลือกค่าเป็น 2 แล้วกดปุ่ม submit ข้อมูล
ค่าเริ่มต้นที่ถูกเลือกจะกลายเป็นรายการ option ที่เราเลือกล่าสุดแทน
แต่ถ้าเป็นกรณีเราต้องการกำหนดค่าเริ่มต้น ให้กับ option รายการใดๆ เราสามารถกำหนด
parameter ตัวที่ 3 ของรายการ option ที่ต้องการให้เป็นค่าเริ่มต้น เป็น TRUE ดังนี้ได้
<select name="myselect1">
<option value="">Select</option>
<option value="1" <?= set_select('myselect1', '1'); ?> >Choice 1</option>
<option value="2" <?= set_select('myselect1', '2', TRUE); ?> >Choice 2</option>
<option value="3" <?= set_select('myselect1', '3'); ?> >Choice 3</option>
</select>
หลักๆ แล้วคำสั่ง set_select() เป็นคำสั่งสำหรับกำหนดค่า selected attribute ให้กับ <select> แท็ก
ดูตัวอย่างโครงสร้าง html ที่ได้
<select name="myselect1"> <option value="">Select</option> <option value="1" >Choice 1</option> <option value="2" selected="selected" >Choice 2</option> <option value="3" >Choice 3</option> </select>
รายการ option ค่าที่เท่ากับ 2 จะเป็นค่าเริ่มต้นที่ถูกเลือก
หรือถ้าเป็นการประยุกต์กับเงื่อนไขจากฐานข้อมูล เราก็สามารถกำหนด parameter ที่เป็นค่าเริ่มต้น โดยอาศัยการสร้างเงื่อนไข
จากค่าของข้อมูลใน db ก็จะเป็นในลักษณะดังนี้
<?php
$db_v = 1;
?>
<select name="myselect1">
<option value="">Select</option>
<option value="1" <?= set_select('myselect1', '1', ($db_v==1)?TRUE:FALSE); ?> >Choice 1</option>
<option value="2" <?= set_select('myselect1', '2', ($db_v==2)?TRUE:FALSE); ?> >Choice 2</option>
<option value="3" <?= set_select('myselect1', '3', ($db_v==3)?TRUE:FALSE); ?> >Choice 3</option>
</select>
สำหรับการเรียกใช้งานในกรณีใช้ชื่อเป็น array ทั้งแบบ [] และ [key] ก็ให้ใช้รูปแบบเดียวกับการกำหนดใน input text
ตามที่อธิบายไปแล้วด้านบน ตัวอย่าง
<select name="myselect1[]">
<option value="">Select</option>
<option value="1" <?= set_select('myselect1[0]', '1', ($db_v==1)?TRUE:FALSE); ?> >Choice 1</option>
<option value="2" <?= set_select('myselect1[0]', '2', ($db_v==2)?TRUE:FALSE); ?> >Choice 2</option>
<option value="3" <?= set_select('myselect1[0]', '3', ($db_v==3)?TRUE:FALSE); ?> >Choice 3</option>
</select>
set_checkbox()
เป็นคำสั่งสำหรับจัดการค่าของ checkbox element มีรูปแบบการใช้งาน และ parameter ที่รองรับดังนี้
set_checkbox($field[, $value = ''[, $default = FALSE]])
Parameters:
$field (string) – ชื่อฟิลด์ หรือ element name
$value (string) – ค่าข้อมูลของฟิลด์
$default (string) – ค่าเริ่มต้นที่ต้องการกำหนด ถ้ามี ใช้คำว่า TRUE หรือ FALSE
เราเปลี่ยนส่วนของโค้ดทดสอบ เป็นการใช้งาน checkbox แท็กตามรูปแบบดังนี้
<input type="checkbox" name="mycheck1" value="1" /> Data 1 <input type="checkbox" name="mycheck2" value="2" /> Data 2 <button type="submit">Send</button>
กรณีเราต้องการให้เมื่อเลือก checkbox รายการใดๆ แล้ว หากส่งข้อมูล ให้คงการเลือกข้อมูลนั้นอยู่ สามารถกำหนด
ได้ด้วยรูปแบบดังนี้
<input type="checkbox" name="mycheck1" value="1" <?= set_checkbox('mycheck1','1') ?> /> Data 1
<input type="checkbox" name="mycheck2" value="2" <?= set_checkbox('mycheck2','2') ?> /> Data 2
เมื่อเราเลือกทั้งรายการที่ 1 และ 2 แล้วกดส่งข้อมูล รายการที่เลือกจะถูก กำหนดให้ถูกเลือกเป็นค่าเริ่มต้น
หลักๆ คำสั่งนี้ ก็คือการกำหนด checked attribute ให้กับ input checkbox ตามรูปแบบ HTML ดังนี้
<input type="checkbox" name="mycheck1" value="1" checked="checked" /> Data 1 <input type="checkbox" name="mycheck2" value="2" checked="checked" /> Data 2
เราสามารถกำหนดให้รายการ checkbox ใดๆ ถูกเลือกเป็นค่าเริ่มต้นได้ดังนี้
<input type="checkbox" name="mycheck1" value="1" <?= set_checkbox('mycheck1','1') ?> /> Data 1
<input type="checkbox" name="mycheck2" value="2" <?= set_checkbox('mycheck2','2', TRUE) ?> /> Data 2
เราสามารถปรับรายการที่ถูกเลือกเริ่มต้น ให้เป็นค่าที่ได้จากข้อมูลในฐานข้อมูลเป็นเงื่อนไข เช่นเดียวกับรูปแบบการ
กำหนดใน select แท็ก
<input type="checkbox" name="mycheck1" value="1"
<?= set_checkbox('mycheck1','1', ($db_v==1)?TRUE:FALSE) ?> /> Data 1
<input type="checkbox" name="mycheck2" value="2"
<?= set_checkbox('mycheck2','2', ($db_v==2)?TRUE:FALSE) ?> /> Data 2
โดยปกติ หรือส่วนใหญ่ที่เราพบ ถ้าเป็นการกำหนด checkbox จำนวนมากๆ มักจะใช้รูปแบบเป็น array ดังนั้น เราสามารถ
จัดการ checkbox ในกรณีใช้ชื่อเป็น array ทั้งแบบ [] และ [key] โดยใช้แนวทางเดียวกับอธิบายไปด้านบนได้เลย
แต่มีข้อควรระวังสำหรับ checkbox กรณีกำหนดเป็น base zero หรือ [] ให้เรากำหนดค่า key ไปด้วยเสมอ เพราะหาก
ไม่กำหนด เราเข้าใจอยู่แล้วว่า key จะเริ่มต้นที่ 0 แต่สำหรับ checkbox มีเงื่อนไขว่า ถ้ารายการนั้นไม่ได้ติ้กเลือก ตัวรายการ
นั้นจะไม่ถูกนับเป็น key แรก เกี่ยวกับเรื่องนี้ มีเนื้อหาเพิ่มเติมแนะนำ ลองอ่านได้ที่ http://niik.in/que_2933_6543
ดังนั้นในกรณี checkbox ให้เรากำหนด key ด้วยเสมอดังนี้
<input type="checkbox" name="mycheck[0]" value="1"
<?= set_checkbox('mycheck[0]','1', ($db_v==1)?TRUE:FALSE) ?> /> Data 1
<input type="checkbox" name="mycheck[1]" value="2"
<?= set_checkbox('mycheck[1]','2', ($db_v==2)?TRUE:FALSE) ?> /> Data 2
จะเห็นว่า เราจะใช้ name="mycheck[0]" และ name="mycheck[1]" แทนการกำหนด name="mycheck[]"
ซึ่งเมื่อมีค่า key แล้ว เราก็จะสามารถอ้างอิงชื่อของ element ในการกำหนดค่าได้ถูกต้อง
set_radio()
เป็นคำสั่งสำหรับจัดการค่าของ radio element มีรูปแบบการใช้งาน และ parameter ที่รองรับดังนี้
set_radio($field[, $value = ''[, $default = FALSE]])
Parameters:
$field (string) – ชื่อฟิลด์ หรือ element name
$value (string) – ค่าข้อมูลของฟิลด์
$default (string) – ค่าเริ่มต้นที่ต้องการกำหนด ถ้ามี ใช้คำว่า TRUE หรือ FALSE
เราเปลี่ยนส่วนของโค้ดทดสอบ เป็นการใช้งาน radio แท็กตามรูปแบบดังนี้
<input type="radio" name="myradio" value="1" /> Data 1 <input type="radio" name="myradio" value="2" /> Data 2 <button type="submit">Send</button>
โดยการใช้งานทั่ว่ไปแล้ว radio ใช้สำหรับกำหนดทางเลือกให้กับรายการ element หนึ่งๆ ว่าจะเลือกเป็นค่าใดๆ
ดังนั้นชื่อ ของ element ก็มักจเป็นชื่อเดียวกัน และมีค่าเป็นค่าแตกต่างกันไป
กรณีเราต้องการให้เมื่อเลือก radio รายการใดๆ แล้ว หากส่งข้อมูล ให้คงการเลือกข้อมูลนั้นอยู่ สามารถกำหนด
ได้ด้วยรูปแบบดังนี้
<input type="radio" name="myradio" value="1" <?= set_radio('myradio','1') ?> /> Data 1
<input type="radio" name="myradio" value="2" <?= set_radio('myradio','2') ?> /> Data 2
เราสามารถเลือกค่าของข้อมูล อย่างใดๆ อย่างหนึ่ง และเมื่อเลือกรายการนั้นแล้ว เมื่อส่งข้อมูล รายการก็จะถูกเลือก
เป็นค่าเริ่มต้น
หลักๆ คำสั่งนี้ ก็คือการกำหนด checked attribute ให้กับ input radio ตามรูปแบบ HTML ดังนี้
<input type="radio" name="myradio" value="1" /> Data 1 <input type="radio" name="myradio" value="2" checked="checked" /> Data 2
เราสามารถกำหนดให้รายการ radio ค่าใดๆ ถูกเลือกเป็นค่าเริ่มต้นได้ดังนี้
<input type="radio" name="myradio" value="1" <?= set_radio('myradio','1') ?> /> Data 1
<input type="radio" name="myradio" value="2" <?= set_radio('myradio','2', TRUE) ?> /> Data 2
เราสามารถปรับรายการที่ถูกเลือกเริ่มต้น ให้เป็นค่าที่ได้จากข้อมูลในฐานข้อมูลเป็นเงื่อนไข เช่นเดียวกับรูปแบบการ
กำหนดใน select แท็ก
<?php
$db_v = 1;
?>
<input type="radio" name="myradio" value="1"
<?= set_radio('myradio','1', ($db_v==1)?TRUE:FALSE ) ?> /> Data 1
<input type="radio" name="myradio" value="2"
<?= set_radio('myradio','2', ($db_v==2)?TRUE:FALSE) ?> /> Data 2
กรณีกำหนดชื่อเป็นแบบ array เราควรกำหนด key ในรูปแบบเดียวกับการใช้งาน checkbox
ใน Form Helper ยังมีฟังก์ชั่นอื่นๆ ที่สามารถใช้จัดการ หรือกำหนดแท็ก Element ในฟอร์มอื่นๆ ที่เราสามารถ
เลือกใช้งานได้ แต่อย่างไรก็ตาม อย่างที่บอกไปในตอนต้น ที่ว่า ไม่จำเป็นที่เราจะต้องกำหนด Element ต่างๆ
ของฟอร์มด้วยฟังก์ชั่นเสมอไป เราสามารถเลือกใช้ตามความเหมาะสม
การทดสอบเพื่อแสดงแนวทางข้างต้น เรากำหนดให้หน้ารับข้อมูลกับหน้าแสดงฟอร์ม อยู่ในหน้าเดียวกัน
เมื่อมีการส่งข้อมูล และเราต้องการให้ข้อมูลที่เลือก หรือที่กรอกแสดงในฟอร์มเดิม ก็สามารถทำได้ตามที่อธิบายไปแล้ว
แต่สมมติว่า เราทำการส่งข้อมูลไปยังอีกหน้า อาจจะเป็นหน้าสำหรับจัดการข้อมูลโดยเฉพราะ รวมถึงหน้าแสดงการ
ตรวจสอบความถูกต้องของข้อมูล เช่นการ validated data เราจะจัดการยังไง เมื่อส่งข้อมูลไปแล้ว และต้องการให้ข้อมูล
แสดงในฟอร์มอีกครั้ง กรณีมีการย้อนกลับมาแก้ไข
การ Redirect พร้อมข้อมูล Form
ตามที่ได้เกริ่นไปในย่อหน้าท้ายของหัวข้อด้านบน ที่เมื่อเราส่งข้อมูลจากฟอร์มไปยังอีกหน้าเพจ หรืออีก URL ที่ไม่ไช้
หน้าเดียวกันกับข้อมูลฟอร์ม แล้วเราอาจจะต้องการให้กลับมาแก้ไขหน้าฟอร์มเดิม และให้ข้อมูลที่เคยเลือกยังอยู่ จะสามารถ
ทำได้อย่างไร เราจะมาดูกันในหัวข้อนี้
เริ่มต้นแก้ไขส่วนของ Controller สมมติให้หน้าหลัก index method แสดงฟอร์ม และหน้าแสดงข้อมูล send method
ทำการ Redirect กลับมายังหน้าหลัก ดังนี้
app/Controllers/Helloworld.php
<?php namespace App\Controllers;
use CodeIgniter\Controller; // เรียกใช้งาน Controller class
class Helloworld extends Controller
{
public function index()
{
helper('form'); // ใช้งาน form helper ฟังก์ชั่น
$data = [
'title' => 'test my form'
];
echo view('pages/myform', $data);
}
public function send(){
// ตรวจสอบการ submit ข้อมูลจากฟอร์ม และแสดงข้อมูลที่ถูกส่งมาเบื้องต้น
if ($this->request->getMethod() === 'post'){
echo "<pre>";
$post = $this->request->getPost();
print_r($post);
echo "</pre>";
}
return redirect()->back()->withInput();
// หรือคำสั่งด้านล่างก็ได้เหมือนกัน
// return redirect()->to('/helloworld')->withInput();
}
}
เราทำการย้ายส่วนของการแสดงข้อมูลที่ส่งจากฟอร์มมายัง send method โดยเราจำลองให้ทำการ Redirect หลังจาก
แสดงข้อมูลแล้ว ในการทดสอบเราอาจจะไม่เห็นข้อมูลที่แสดง เมื่อเราทำการ ย้อนกลับมายังหน้าเดิม โดยใช้คำสั่ง redirect()
ตามด้วย path หรือ url ที่ต้องการย้อนกลับ หากกลับหน้าเดิมเราสามารถใช้คำสั่ง back() หรือหากต้องการระบุ path ก็สามารถ
ใช้คำสั่ง to() จากนั้นให้ทำการส่งข้อมูลจากฟอร์มกลับมาด้วย โดยใช้คำสั่ง withInput()
ก่อนไปต่อ ขอยกฟังก์ชั่น redirect() มาอธิบายรูปแบบตัวอย่างการใช้งานเพิ่มเติม ดังนี้
redirect()
เป็น global ฟังก์ชั่นที่เราสามารถเรียกใช้งานได้ทุกที่ในแอปของเรา โดยรองรับรูปแบบ และการกำหนด parameter ดังนี้
redirect(string $uri)
Parameters: $uri (string) – กำหนด URL หรือ path ที่ต้องการลิ้งค์ไป
มาดูตัวอย่างการกำหนด และใช้งาน
// กลับไปยังหน้าก่อนหน้า
return redirect()->back();
// ไปยังหน้าที่ต้องการ โดยระบุ path ปลายทางในคำสั่ง to()
return redirect()->to('/admin');
// ไปยังหน้า URL ที่กำหนดรูปแบบใน routes
return redirect()->route('named_route');
// ใช้เป็นแบบนี้แทนได้ return redirect('named_route'); // มีค่าเท่ากัน
// ย้อนกลับไปหน้าก่อนหน้า พร้อมให้คงข้อมูลในฟอร์มที่ถูส่งมา ใช้ร่วมคำสั่ง old()
return redirect()->back()->withInput();
// ย้อนกลับไปหน้าก่อนหน้า พร้อมส่งข้อความ Cookies ที่มีอายุชั่วคราวไปแสดง
return redirect()->back()->with('foo', 'message');
// ย้อนกลับไปหน้าก่อนหน้า พร้อมค่าข้อมูล Cookies ทุกตัว
return redirect()->back()->withCookies();
// ย้อนกลับไปหน้าก่อนหน้า พร้อมค่า header ทั้งหมด
return redirect()->back()->withHeaders();
กลับมาที่เนื้อหาของเราต่อ จากการใช้งานข้างต้น เราสนใจส่วนของการย้อนกลับมายังหน้าก่อนหน้าพร้อมข้อมูลฟอร์ม
เดิมที่ได้เคยเลือกหรือกรอกไว้ จะเห็นว่า กรณีใช้กับคำสั่ง withInput() เราต้องเรียกใช้งานคำสั่ง old() สำหรับ input text
และ textarea แทนคำสั่ง set_value() เราจะได้หน้าฟอร์มทดสอบ ดังนี้
app/Views/pages/myform.php
<!doctype html>
<html lang="th">
<head>
<meta charset="utf-8">
<title><?= esc($title) ?></title>
</head>
<body>
<!--กำหนด css style สำหรับฟอร์ม สำหรับทดสอบ -->
<style type="text/css">
form{ display: flex;flex-direction: column; }
</style>
<!-- ส่วนของข้อมูลฟอร์ม ที่เราจะเพิ่ม-->
<?= form_open('helloworld/send') ?>
<input type="text" name="input1" value="<?= old('input1') ?>" >
<textarea name="textarea1" cols="30" rows="3"><?= old('textarea1') ?></textarea>
<select name="myselect1">
<option value="">Select</option>
<option value="1" <?= set_select('myselect1', '1'); ?> >Choice 1</option>
<option value="2" <?= set_select('myselect1', '2'); ?> >Choice 2</option>
<option value="3" <?= set_select('myselect1', '3'); ?> >Choice 3</option>
</select>
<hr>
<input type="checkbox" name="mycheck1" value="1" <?= set_checkbox('mycheck1','1') ?> /> Data 1
<input type="checkbox" name="mycheck2" value="2" <?= set_checkbox('mycheck2','2') ?> /> Data 2
<hr>
<input type="radio" name="myradio" value="1" <?= set_radio('myradio','1') ?> /> Data 1
<input type="radio" name="myradio" value="2" <?= set_radio('myradio','2') ?> /> Data 2
<hr>
<button type="submit">Send</button>
<?= form_close() ?>
<!-- สร้างลิ้งค์สำหรับรีโหลดหน้าทดสอบ-->
<?= anchor(current_url(),'Reload') ?>
</body>
</html>
ในส่วนของ form_open() เรากำหนดไปยังหน้าใหม่ ด้วยคำสั่ง form_open('helloworld/send') และส่วนของการกำหนด
สำหรับ input text และ textarea ให้เราเปลี่ยน จากคำสั่ง set_value() เป็น old() ซึ่งเป็น global ฟังก์ชั่น ที่เราสามารถเรียก
ใช้งานได้เลย ไม่เหมือน set_value() ที่ต้องเรียกใช้งานผ่าน form helper นั่นหมายความว่า สำหรับ input text และ textarea
เราสามารถใช้คำสั่ง old() แทนได้ ส่วนตัว select checkbox และ radio เราก็ใช้รูปแบบคำสั่งเดิมได้
ดูตัวอย่างผลลัพธ์เมื่อกรอกข้อมูล แล้วกดส่ง แล้วมีการย้อนกลับมาหน้าเดิม พร้อมข้อมูลที่เคยเลือกไว้ ก็ยังคงอยู่
ข้อมูลที่ถูกเลือก และแสดงในฟอร์มในรูป คือค่าข้อมูลเดิมที่ได้กรอก และเลือกไว้
แนวทางนี้ใช้สำหรับกรณีทำการตรวจสอบความถูกต้องของข้อมูล แล้วพบว่ามีบางฟิลด์ไม่ถูกต้อง เราก็สามารถกำหนดให้ย้อน
กลับมาแก้ไขข้อมูลให้ถูกต้อง โดยไม่ต้องกรอกข้อมูลใหม่ทั้งหมด
หวังว่าเนื้อหาส่วนนี้จะเป็นแนวทางนำไปปรับประยุกต์ใช้งานต่อไป ในเนื้อหาเกี่ยวกับการใช้งานฟอร์ม ยังมีส่วนอื่นๆ ที่เกี่ยวข้อง
เพิ่มเติม จะได้นำมาแนะนำในลำดับต่อๆ ไป รอติดตาม
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง