Update ข้อมูลบน Modal Bootstrap
Update ข้อมูลบน Modal Bootstrap การแก้ไขข้อมูล หรือ Edit ข้อมูลบนตัว Modal มีหลายคนอาจจะยังไม่เข้าใจ ว่าเราจะส่งข้อมูล ออกไปจาก การวน loop เพื่อแสดงค่าของ PHP ออกไปแสดงบน form ที่อยู่ใน modal ได้อย่างไร อันนี้สามารถทำต่อจากเรื่องของ การสร้าง Form บน Modal ได้นะครับ มาลองดูวิธีการ ส่งค่าขึ้นไปบน Form modal แบบง่ายๆกัน
ภาพประกอบ : Modal form bootstrap
Update Data With Modal Bootsrap
ก่อนจะไปเนื้อหาในส่วนของ การแก้ไขข้อมูล แนะนำให้อ่านเรื่อง สร้าง FORM กรอกข้อมูลบน MODAL ซึ่งเป็นเรื่องของการ สร้าง Form สำหรับรับข้อมูลเอาไว้ก่อน ทีนี้ เรื่องการ Edit แก้ไข ก็เหมือนเป็นการ เอาเรื่องแรก มาเขียนต่อเพิ่มเติม ให้มันสมบูรณ์มากยิ่งขึ้น เพราะว่าแค่การ Add มันยังไม่จบ มันต้องแก้ไขได้ด้วย จะได้ครบครัน
ทีนี้เราจะมาสร้าง ตารางเพื่อดึงค่าข้อมูล ออกมาจากฐานข้อมูล เพื่อแสดงให้เห็นกันก่อน แล้วเดี๋ยวเราจะสร้าง ปุ่ม Action สำหรับ Edit กันไว้ที่ด้านหลัง เพื่อเรียกเจ้า Modal นี่ขึ้นมาแสดง
customer tbl
อันนี้เป็น ฐานข้อมูล ตัวอย่าง ที่เราจะเอามาใช้งาน เพื่อแสดงค่านะครับ ผมเก็บไว้ใน ตารางชื่อ customer_tbl ทีนี้ผมจะดึงออกมา แบบใช้ PHP เชื่อมต่อด้วย PDO เพื่อแสดงค่า โดย Code ชุดต่อไปด้านล่างนี้ มีหลายไฟล์เลยนะครับ อยากให้เห็นแบบใช้จริง
File Connect database
<?php
try {
// connect database
$db = new PDO('mysql:host=localhost; dbname=zendtut; charset=utf8', 'root', '');
// sql statement
$select = $db->query('SELECT * FROM customer_tbl');
// display on while loop
$customer = $select->fetchAll();
} catch (Exception $e) {
echo "Can not connect to database";
throw new Exception($e);
}
?>
แล้วผมก็แยกไฟล์ต่างๆเอาไว้เพื่อให้ใช้งานสะดวกตามนี้เลยครับ
File Header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Update Data With Modal Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/bootstrap.css" charset="utf-8">
<link rel="stylesheet" href="assets/css/font-awesome.css" charset="utf-8">
<link rel="stylesheet" href="assets/plugins/datatable/css/bootstrap.datatable.css" charset="utf-8">
</head>
<body>
<?php include('connect.php'); ?>
<div class="container">
ไฟล์ Header นี้ผมจะวางโครงของ HTML กับการดึงข้อมูลของ bootstrap เข้ามาใช้ นะครับ ต่อไปจะเป็น file footer
</div><!-- .container--> <script type="text/javascript" src="assets/js/jquery.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <script type="text/javascript" src="assets/plugins/datatable/js/jquery.dataTables.js"></script> <script type="text/javascript" src="assets/plugins/datatable/js/bootstrap.datatable.js"></script> <script type="text/javascript" src="assets/js/app.js"></script> </body> </html>
ไฟล์นี้ผมดึงเอา javascript ทั้งหลาย เข้ามาใช้งาน โดยวางไว้ที่ด้านล่างของไฟล์ จากนั้นก็แอบเพิ่มในส่วนของ Datatable เข้ามาด้วย จะได้จัดตารางง่ายๆสำหรับข้อมูลเยอะๆแบบนี้ สุดท้ายผมเพิ่มไฟล์ app.js เข้ามาเพื่อเรียกใช้งาน datatable
$(document).ready(function(){
$('.datatable').dataTable();
});
และเดี๋ยวเราจะเอามา ใช้สำหรับ เรียก Modal แล้วก็ส่งค่าขึ้นไปด้วย ทีนี้มาดูผมเรียกข้อมูลขึ้นมากันก่อนครับ
Index.php
<?php
include('header.php');
?>
<div class="row">
<div class="col-md-10 col-md-offset-2">
<h1>Update Data With Modal</h1>
</div>
</div><!-- /.row -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table datatable">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Country</th>
<th>IP Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
foreach ($customer as $c) {
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $c['first_name']; ?></td>
<td><?php echo $c['last_name']; ?></td>
<td><?php echo $c['email']; ?></td>
<td><?php echo $c['country']; ?></td>
<td><?php echo $c['ip_address']; ?></td>
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
class="drop-edit" data-toggle="dropdown">
<i class="fa fa-cog"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div><!-- /.dropdown -->
</td>
</tr>
<?php
$i++;
} // end foreach
?>
</tbody>
</table>
</div><!-- /.col-md-8 -->
<div class="col-md-2"></div>
</div>
<?php
include('footer.php');
?>
table
ตอนนี้แค่ดึงข้อมูลออกมานะครับ แต่ผมเตรียมพื้นที่ทำงานของ Post นี้เอาไว้แล้วคือ ตรงปุ่มด้านขวาสุด ผมจะเก็บเอาไว้ทำการสร้างการแก้ไขและลบข้อมูล โดยที่วันนี้เราจะเริ่มต้นด้วยการ แก้ไขข้อมูลกันก่อน แบบง่ายๆพื้นฐานเลยครับ มาดูวิธีกัน
ผมจะสร้าง Attribute เพิ่มสำหรับเป็น data เพื่อส่งข้อมูลไปยัง javascript อีกที มาลองดูวิธีการกันครับ
Edit
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" class="drop-edit" data-toggle="dropdown"> <i class="fa fa-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a class="edit-customer" data-id="<?php echo $c['id']; ?>" data-firstname="<?php echo $c['first_name']; ?>" data-lastname="<?php echo $c['last_name']; ?>" data-email="<?php echo $c['email']; ?>" data-country="<?php echo $c['country']; ?>" data-ip="<?php echo $c['ip_address']; ?>"> Edit </a> </li> <li><a href="#">Delete</a></li> </ul> </div><!-- /.dropdown -->
Element
ทีนี้เราก็พร้อมจะ จัดส่งไปให้กับ App.js แล้วครับ ในไฟล์นี้ ทีแรกเลย เราเตรียมเอาไว้แค่ เรียก datatable ขึ้นมาแสดง แต่เดี๋ยวเราจะส่งค่า data ชุดนี้ที่อยู่ใน Edit ไปให้ครับ
โดยเราจะเริ่มจากการประกาศตัวแปร เพื่อรับค่า จากฝั่งของ HTML ไปก่อน
$('.edit-customer').click(function(){
// get data from edit btn
var id = $(this).attr('data-id');
var firstname = $(this).attr('data-firstname');
var lastname = $(this).attr('data-lastname');
var email = $(this).attr('data-email');
var country = $(this).attr('data-country');
var ip = $(this).attr('data-ip');
// set value to modal
$("#id").val(id);
$("#firstname").val(firstname);
$("#lastname").val(lastname);
$("#email").val(email);
$("#country").val(country);
$("#ip").val(ip);
});
เรียบร้อย ทีนี้มาลองเช็คดูครับ ว่าเราได้ในส่วนของ ข้อมูลที่ถูกต้องมารึยัง ลอง Console.log ดูซักรอบ
log
OK มาถูกทางกันแล้ว แต่รู้สึกจะลืมสร้าง Modal Form งั้นมาสร้างกันต่อเลยครับ Modal ผมจะวางไว้ใน index ไฟล์นะครับ
Index.php
<!-- Modal Zone --> <div class="modal fade" id="formEditCustomer"> <div class="modal-dialog"> <form action="save.php" method="post"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title">Customer</h4> </div> <div class="modal-body"> <!-- Hidden Zone --> <input type="hidden" name="id" id="id" value=""> <div class="form-group"> <label for="firstname">Firstname</label> <input type="text" id="firstname" name="firstname"> </div> <div class="form-group"> <label for="lastname">Lastname</label> <input type="text" id="lastname" name="lastname"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email"> </div> <div class="form-group"> <label for="country">Country</label> <input type="text" id="country" name="country"> </div> <div class="form-group"> <label for="ip">IP Address</label> <input type="text" id="ip" name="ip"> </div> </div><!--/.modal-body--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> Close </button> <input type="submit" class="btn btn-primary" value="Save"> </div><!--/.modal-footer--> </div><!-- /.modal-content --> </form> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
ลองเปิดเมนู Edit กันดูครับเราจะเห็น Modal แบบที่ถูกต้อง
Modal
ตอนนี้เราก็พร้อมที่จะ นำข้อมูลไป Update ในฐานข้อมูลกันแล้วครับ มาดู ไฟล์ save.php ไฟล์สุดท้ายกันครับ
include('connect.php');
// Set Query SQL
$sql = "UPDATE customer_tbl SET
first_name = :first_name,
last_name = :last_name,
email = :email,
country = :country,
ip_address = :ip_address
WHERE id = :id";
$stmt = $db->prepare($sql);
$stmt->bindParam(':first_name', $_POST['firstname'], PDO::PARAM_STR);
$stmt->bindParam(':last_name', $_POST['lastname'], PDO::PARAM_STR);
$stmt->bindParam(':email', $_POST['email'], PDO::PARAM_STR);
$stmt->bindParam(':country', $_POST['country'], PDO::PARAM_STR);
$stmt->bindParam(':ip_address', $_POST['ip'], PDO::PARAM_STR);
$stmt->bindParam(':id', $_POST['id'], PDO::PARAM_INT);
$stmt->execute();
header('Location: index.php');
ตอนนี้ก็สามารถแก้ไขได้แล้ว เป็นการใช้ Modal ของ bootstrap เข้ามาช่วยเพิ่มความสามารถ ให้กับเว็บของเรา ทีนี้ก็สามารถใช่ร่วมกับ Form ตอนที่ Create ข้อมูลเข้ามาด้วยได้นะครับ
modal
ใครอ่านแล้วไม่เข้าใจ ก็ลองดู Video แล้วทำตามกันน๊า ไม่ยากครับ
Video
ตอนที่ 1
ตอนที่ 2
รบกวนหน่อยครับ พบปัญหาเมื่อ record มากกว่า 10 rec มื่อกดเปลี่ยนหน้า 2 ที่เราทำ edit ไว่มันไม่ขึ้นครับ form ครับ แต่พอไม่ใช้ datatable มันจะแสดงทั้งหมด จะกด edit ได้ครับ
น่าจะเป็นในส่วนของ Code Javascript ครับ ต้องทำห้ทำงานได้ทุกหน้าของ Datatable ต้องลองตรวจสอบการเรียก function ต่างๆการส่งค่าต่างๆใน javascript ดูครับ
สอบถามครับ จากบทความด้านบน หากผมต้องการนำ ค่า id ที่ถูกส่งไป edit form ไป SELECT * FROM อีก table โดยคำสั่ง SQL ภายใน modal ที่แสดงอีกครั้งนึงพอจะแนะนำวิีธีค่าจาก JS ไปใช้ได้ไหมครับ ขอบคุณครับ
อ่านคำถามแล้วยังไม่แน่ใจว่าผมสรุปถูกไหมนะครับ
ถามว่า = ต้องการนำ ID ที่ถูกส่งไป Edit แล้ว มาแสดงอีกครั้ง บน Modal เดิมทำอย่างไร
ผมสรุปถูกไหมครับ ถ้าถูกต้องก็คือ
สามารถทำได้โดยใช้ Ajax แทนใน jQuery ให้คืนค่ามาแต่ว่าไม่ต้อง Refresh ที่หน้าจอครับ
คือผมมี table อยู่ 2 table
สมมุติว่า
table1 จะมี id , name ,address
table2 มี no , editcount, detail , date
table แรก แสดงเป็นตารางรายละเอียด แล้วมีปุ่มกด edit พอกดแล้วก็แสดงหน้าสำหรับ edit พร้อมแสดง table2 ในหน้า modal เดียวกัน
โดยผมใช้จะคำสั่ง SELECT * FROM table2 where no=id เพื่อแสดง detail ตามจำนวน editcount
เหมือนกับว่าแสดงประวัติการแก้ detail ใน modal ด้วยนะครับ
แต่ที่นี้ form modal ที่แสดง รับค่าจาก js เป็น ซึ่งผมใส่ใน where ใน sql ไม่ได้แน่นอน ซึ่งโดยปกติผมจะใช้เป็น $ชื่อตัวแปร แต่ค่าที่ส่งมาจาก js ผมเรียกใช้ไม่เป็นไม่รู้ว่าควรใช้โค๊ดตัวไหน
บอกตามตรงว่า Ajax และ jQuery ผมยังไม่ค่องอย่างมาก รบกวนชี้แนะด้วยครับ ขอบคุณครับ
ผมพยายามจับใจความอยู่นะครับ ถ้าเป็นคำถามนี้
“ผมใช้จะคำสั่ง SELECT * FROM table2 where no=id เพื่อแสดง detail ตามจำนวน editcount
เหมือนกับว่าแสดงประวัติการแก้ detail ใน modal ด้วยนะครับ”
อันนี้คือ ตอนที่เราส่ง ID ไปจาก JS คุณก็เอาไปดึง Select มาก่อนจากประวัติเพื่อแสดงครับ ส่วนที่เป็น Form ก็แค่แสดงค่าปัจจุบันในนั้น
กับส่วนคำถาม
“form modal ที่แสดง รับค่าจาก js เป็น input type=”text” class=”form-control” name=”id” id=”id” ซึ่งผมใส่ใน where ใน sql ไม่ได้แน่นอน”
ครับ ปรกติเค้าไม่ทำกันแบบนั้นอยู่แล้ว เราจะรับแค่ ID แล้วส่งไปเป็น Post หรือ Get ให้กับ PHP แล้วค่อยเอาไปใช้ใน SQL ครับ
แต่ที่นี้ form modal ที่แสดง รับค่าจาก js เป็น input type=”text” class=”form-control” name=”id” id=”id” ซึ่งผมใส่ใน where ใน sql ไม่ได้แน่นอน ซึ่งโดยปกติผมจะใช้เป็น $ชื่อตัวแปร แต่ค่าที่ส่งมาจาก js ผมเรียกใช้ไม่เป็นไม่รู้ว่าควรใช้โค๊ดตัวไหน
ปล.ผมเผลอก๊อปเป็นโค๊ดไปด้านบนเลยไม่ขึ้น
ขอบคุณมากๆครับ
ถ้าต้องการให้ในหน้าแก้ไข ขึ้นข้อความใน se;ect option ต้องทำอย่างไรคะ
ทำไมผมใช้ชังก์ชั่น bindParam() ไม่ได้อะครับ
datatable หนูใช้ไม่ได้คะ