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 ดูครับ