บทความนี้เกี่ยวข้องกับ ระบบ Admin ใช้เรียกดูข้อมูล แก้ไข ลบ ข้อมูลสมาชิกจาก ฐานข้อมูล (Database )
โดยมีโค้ดหลักๆ อยู่ 4 ส่วน คือ เพิ่ม ดู แก้ไข ลบ ภาษาที่ใช้ HTML, JAVASCRIPT (jQuery), PHP โดยแต่ละไฟล์จะแบ่งการทำงานไว้เป็น ส่วนๆดังนี้
1. Show เป็นการดึงข้อมูลขึ้นมาดู จากฐานข้อมูล
2. Edit เป็นส่วนของการแก้ไข ข้อมูลแล้วบันทึกลงฐานข้อมูล
3. Del เป็นส่วนของการลบ ข้อมูลออกจากฐานข้อมูล
4. Insert เป็นส่วนของการเพิ่มข้อมูลเข้าฐานข้อมูล
โดยในแต่ละส่วนท่านสามารถ นำไปประยุกต์แยกใช้ได้ตามลักษณะของงาน
SQL สร้างตารางฐานข้อมูลสำหรับทดสอบ
CREATE TABLE `myweb`.`members` ( `member_id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL DEFAULT '', `password` varchar(255) NOT NULL DEFAULT '', `emailaddress` varchar(255) NOT NULL DEFAULT '', PRIMARY KEY (`member_id`) );
ไฟล์ config.php
<?php
$host = "localhost";
$us = "username";
$pw = "password";
$db = "database";
$link = mysql_connect($host,$us,$pw)or die ("Could not connect to MySQL");
mysql_select_db($db)or die ("Could not connect to Database");
?>ไฟล์ view_edit_del_memberdata.php
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="edit_del_members.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="cleaner_h20"></div>
<div id="show_id">
</div>
<div class="cleaner_h20"></div>
<table border="1" width="800">
<tbody><tr><th>Id</th>
<th>Username</th>
<th>Password</th>
<th>email</th>
<th>Edit</th>
<th>Del</th>
<?php
include 'config.php';
/* ---------------------------SHOWDATA---------------------------- */
$sql = "select * from members";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$i = 0;
while ($i < $num) {
$row = mysql_fetch_array($result);
$id = $row['member_id'];
$username = $row['username'];
$password = $row['password'];
$email = $row['emailaddress'];
echo "<tr>";
echo "<td>$id</td>";
echo "<td>$username</td>";
echo "<td>$password</td>";
echo "<td>$email</td>";
$show_id = $row['member_id']; //กำหนดตัวแปร edit_id ให้กับ link
echo "<td><span id='edit' onclick='show_members($show_id)'>
<img border=0 src='images/edit.png'/></span></td>";
$del_id = $row['member_id']; //กำหนดตัวแปร del_id ให้กับ link
echo "<td><span id='del' onclick='del_members($del_id)'>
<img border=0 src='images/drop.png'></span></td>";
echo "</tr>";
$i++;
}
?>
</tr></tbody></table>
<div> </div>
<!----------------------FORM INSERT MEMBER---------------------->
<div>
<form name="form1" method="post">
INSERT USER:>>
username:<input name="user" id="user" type="text">
password:<input name="password" id="password" type="password">
email:<input name="email" id="email" type="text">
<input value="submit" onclick="insertsql()" type="button">
</form>
</div>
</center>
</body>
</html>
ไฟล์ edit_del_members.js
/*-----------------------SHOW----------------------*/
function show_members(show_id){
//alert(show_id);
var str=Math.random();
var datastring='str='+str + '&show_id='+show_id ;
$.ajax({
type:'POST',
url:'edit_del_sql.php',
data:datastring,
beforeSend: function(){
$("#show_id").html('<img src="loading2.gif">');
},
success:function(data){
$("#show_id").html(data);
}
});
}
/*-----------------------EDIT----------------------*/
function edit_members(edit_id){
//alert(edit_id);
var str=Math.random();
var username = document.myform.username.value;
var password = document.myform.password.value;
var email = document.myform.email.value;
var datastring='str='+str + '&edit_id='+edit_id + '&username='+username
+ '&password='+password + '&email='+email;
$.ajax({
type:'POST',
url:'edit_del_sql.php',
data:datastring,
beforeSend: function(){
$("#show_id").html('<img src="loading2.gif">');
},
success:function(data){
window.location.reload("view_edit_del_memberdata.php");
}
});
}
/*-----------------------DEL----------------------*/
function del_members(del_id){
//alert(edit_id);
var str=Math.random();
var datastring='str='+str + '&del_id='+del_id;
$.ajax({
type:'POST',
url:'edit_del_sql.php',
data:datastring,
beforeSend: function(){
$("#show_id").html('<img src="loading2.gif">');
},
success:function(data){
window.location.reload("view_edit_del_memberdata.php");
}
});
}
/*-----------------------INSERT----------------------*/
function insertsql(){
var str=Math.random();
var user = $("#user").val();
var password = $("#password").val();
var email = $("#email").val();
var datastring='str='+str + '&user='+user
+ '&password='+password + '&email='+email;
//alert(datastring);
$.ajax({
type:'POST',
url:'edit_del_sql.php',
data:datastring,
beforeSend: function(){
$("#show_id").html('<img src="loading2.gif">');
},
success:function(data){
window.location.reload("view_edit_del_memberdata.php");
}
});
}ไฟล์ edit_del_sql.php
<?php
include 'config.php';
/*-----------------SHOW MEMBERS FOR EDIT--------------*/
$show_id = $_POST['show_id'];
if($_POST['show_id']){
$sql = "select * from members where member_id = '$show_id'";
$result = mysql_query($sql);
$row= mysql_fetch_array($result);
$edit_id=$row['member_id'];
$username=$row['username'];
$password=$row['password'];
$email=$row['emailaddress'];
echo "<div id='edit_id'>";
echo "<form name=myform>";
echo "<div style='margin-left:22px;margin-bottom:8px;'>
Username:
<input type='text' name='username' value='$username'size=25></div>";
echo "<div style='margin-left:25px;margin-bottom:8px;'>
Password:
<input type='text' name='password' value='$password'size=25></div>";
echo "<div style='margin-bottom:8px;'>
Emailaddress:
<input type='text' name='email' value='$email'size=25></div>";
echo "<div>
<input type='button' onclick='edit_members($edit_id)'
value='Edit'></div>";
echo "</form>";
echo "</div>";
}
/*--------------------EDIT MEMBERS---------------------*/
$edit_id = $_POST['edit_id'];
$username = $_POST['username'];
$password = $_POST['password'];
$email = $_POST['email'];
if($_POST['edit_id']){
if($username =="" || $password =="" || $email ==""){
echo "error";
}
else{
$sql = "update members set
username = '$username',
password = '$password',
emailaddress = '$email'
where member_id = '$edit_id'";
mysql_query($sql);
echo "success";
}
}
/*--------------------DEL MEMBERS---------------------*/
$del_id = $_POST['del_id'];
if($_POST['del_id']){
$sql = "delete from members where member_id = '$del_id'";
$result = mysql_query($sql,$link);
}
/*--------------------INSERT MEMBERS---------------------*/
$user = $_POST['user'];
$password = $_POST['password'];
$email = $_POST['email'];
if($_POST['user']){
if($password == "" || $email == ""){
exit();
}
else{
$sql = "insert into members (username,password,emailaddress)
values ('$user','$password','$email')";
mysql_query($sql,$link);
mysql_close();
}
}
?>สำหรับบทความนี้ก็จบเพียงแค่นี้ครับ.....
ลองเอามาใช้แล้วครับ
ตอบลบมันเพิ่มไม่ได้เลยครับ
เหลือนว่า สคริบตัว ajax จะไม่ทำงานอะครับ
เอาใส่ตรงไหนค่ะ กด submit ไม่ขึ้น
ตอบลบ