เพิ่ม ลบ แก้ไข เช็คฟอร์ม แบ่งหน้า อัพรูป ในโค้ดเดียว
มีฟังก์ชั่น php ต่างๆ ที่ประยุกต์ใช้งาน เช่น
ฟังก์ชั่นการแบ่งหน้า
ฟังก์ชั่นการอัพโหลดรูป
มีการใช้งาน css เช่น
การใช้งาน bootstrap css
การปรับแต่งการแบ่งหน้า ด้วย css
มีรูปแบบการทำงานกับฐานข้อมูล เช่น
การแสดงข้อมูล
การบันทึกข้อมูล
การแก้ไขข้อมูล
การลบข้อมูล
การแบ่งหน้าข้อมูล
มีการใช้งาน jquery เช่น
การตรวจสอบฟอร์ม
การแสดงพรีวิวรูปก่อนอัพโหลด
มีรูปแบบฐานข้อมูลตัวอย่างประกอบ
ทั้งหมดรวมไว้ในไฟล์เดียว สามารถนำไปแยกและทำเป็น include
หรือเรียกใช้แบบ external ได้
ตาราง db ฐานข้อมูลสำหรับทดสอบ
โค๊ด: [Select]
CREATE TABLE `tbl_user` (
`user_id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_name` VARCHAR( 100 ) NOT NULL ,
`user_pic` VARCHAR( 50 ) NOT NULL
) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_unicode_ci;
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// เชื่อมต่อกับฐานข้อมูล
$link=mysql_connect("localhost","root","test"); // เชื่อมต่อ Server
mysql_select_db("test"); // ติดต่อฐานข้อมูล
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล
$php_filename=basename($_SERVER['PHP_SELF']); // เก็บชื่อไฟล์ปัจจุบันไว้ในตัวแปร
?>
<?php
// ฟังก์ชั่นสำหรับอัพรูปภาพ ดูเพิ่มเติมได้ที่
// http://www.ninenik.com/content.php?arti_id=497
function uppic_only($img,$imglocate,$limit_size=2000000,$limit_width=0,$limit_height=0){
$allowed_types=array("jpg","jpeg","gif","png");
if($img["name"]!=""){
$fileupload1=$img["tmp_name"];
$data_Img=@getimagesize($fileupload1);
$g_img=explode(".",$img["name"]);
$ext = strtolower(array_pop($g_img));
$i_num=1;
$file_up=time()."-".$i_num.".".$ext;
$canUpload=0;
if(isset($data_Img) && $data_Img[0]>0 && $data_Img[1]>0){
if($img["size"]<=$limit_size){
if($limit_width>0 && $limit_height>0){
if($data_Img[0]<=$limit_width && $data_Img[1]<=$limit_height){
$canUpload=1;
}
}elseif($limit_width>0 && $limit_height==0){
if($data_Img[0]<=$limit_width){
$canUpload=1;
}
}elseif($limit_width==0 && $limit_height>0){
if($data_Img[1]<=$limit_height){
$canUpload=1;
}
}else{
$canUpload=1;
}
}
}
if($fileupload1!="" && @in_array($ext,$allowed_types) && $canUpload==1){
@copy($fileupload1,$imglocate.$file_up);
@chmod($imglocate.$file_up,0777);
}else{
$file_up="";
}
}
return $file_up; // ส่งกลับชื่อไฟล์
}
?>
<?php
// ฟังก์ชั่นสำหรับการแบ่งหน้า NEW MODIFY
// http://www.ninenik.com/content.php?arti_id=497
function page_navi($before_p,$plus_p,$total,$total_p,$chk_page){
global $urlquery_str;
$pPrev=$chk_page-1;
$pPrev=($pPrev>=0)?$pPrev:0;
$pNext=$chk_page+1;
$pNext=($pNext>=$total_p)?$total_p-1:$pNext;
$lt_page=$total_p-4;
if($chk_page>0){
echo "<a href='$urlquery_str"."pages=".intval($pPrev+1)."' class='naviPN'>Prev</a>";
}
if($total_p>=11){
if($chk_page>=4){
echo "<a $nClass href='$urlquery_str"."pages=1'>1</a><a class='SpaceC'>. . .</a>";
}
if($chk_page<4){
for($i=0;$i<$total_p;$i++){
$nClass=($chk_page==$i)?"class='selectPage'":"";
if($i<=4){
echo "<a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";
}
if($i==$total_p-1 ){
echo "<a class='SpaceC'>. . .</a><a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";
}
}
}
if($chk_page>=4 && $chk_page<$lt_page){
$st_page=$chk_page-3;
for($i=1;$i<=5;$i++){
$nClass=($chk_page==($st_page+$i))?"class='selectPage'":"";
echo "<a $nClass href='$urlquery_str"."pages=".intval($st_page+$i+1)."'>".intval($st_page+$i+1)."</a> ";
}
for($i=0;$i<$total_p;$i++){
if($i==$total_p-1 ){
$nClass=($chk_page==$i)?"class='selectPage'":"";
echo "<a class='SpaceC'>. . .</a><a $nClass href='$urlquery_str"."pages=".intval($i+1)."'>".intval($i+1)."</a> ";
}
}
}
if($chk_page>=$lt_page){
for($i=0;$i<=4;$i++){
$nClass=($chk_page==($lt_page+$i-1))?"class='selectPage'":"";
echo "<a $nClass href='$urlquery_str"."pages=".intval($lt_page+$i)."'>".intval($lt_page+$i)."</a> ";
}
}
}else{
for($i=0;$i<$total_p;$i++){
$nClass=($chk_page==$i)?"class='selectPage'":"";
echo "<a href='$urlquery_str"."pages=".intval($i+1)."' $nClass >".intval($i+1)."</a> ";
}
}
if($chk_page<$total_p-1){
echo "<a href='$urlquery_str"."pages=".intval($pNext+1)."' class='naviPN'>Next</a>";
}
}
?>
<?php
// เมื่กดปุ่ม เพื่อบันทุกข้อมูล
if(isset($_POST["bt_upload"])){
// อัพโหลดรูปในโฟลเดอร์ชื่อ picup
// ตัวอย่างการใช้งานแบบปกติ อัพรูปภาพขนาดไม่เกิน 2 MB
$dataUpPic=uppic_only($_FILES["pic_upload"],"picup/");
if(isset($_POST['h_user_id']) && $_POST['h_user_id']!=""){ // กรณีแก้ไขข้อมูล
$full_pic_path="picup/".$_POST['h_user_pic'];
if(file_exists($full_pic_path) && $_POST['h_user_pic']!=""){
if($dataUpPic!=""){
unlink($full_pic_path);
}else{
$dataUpPic=$_POST['h_user_pic'];
}
}
$q="
UPDATE tbl_user SET
user_name='".$_POST['name']."',
user_pic='".$dataUpPic."'
WHERE user_id='".$_POST['h_user_id']."'
";
mysql_query($q);
}else{ // กรณีเพิ่มข้อมูล
$q="
INSERT INTO tbl_user(
user_id,
user_name,
user_pic
)VALUES(
NULL,
'".$_POST['name']."',
'".$dataUpPic."'
)
";
mysql_query($q);
}
header("Location:".$php_filename);
exit;
}
?>
<?php
if(isset($_GET['d_user_id']) && $_GET['d_user_id']!=""){
$q="
SELECT * FROM tbl_user WHERE user_id='".$_GET['d_user_id']."'
";
$qr=mysql_query($q);
if($qr){
$rs=mysql_fetch_assoc($qr);
$full_pic_path="picup/".$rs['user_pic'];
if(file_exists($full_pic_path) && $rs['user_pic']!=""){
unlink($full_pic_path);
}
$q="
DELETE FROM tbl_user WHERE user_id='".$_GET['d_user_id']."'
";
$qr=mysql_query($q);
}
header("Location:".$php_filename);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">-->
<style type="text/css">
#thumbnail img{height:100px;margin:5px;}
canvas{border:1px solid red;}
</style>
<style type="text/css">
/* css แบ่งหน้า */
.browse_page{
clear:both;
margin-left:12px;
height:25px;
margin-top:5px;
display:block;
}
.browse_page a,.browse_page a:hover{
display:block;
width: 2%;
font-size:14px;
float:left;
margin:0px 5px;
border:1px solid #CCCCCC;
background-color:#F4F4F4;
color:#333333;
text-align:center;
line-height:22px;
font-weight:bold;
text-decoration:none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.browse_page a:hover{
border:1px solid #CCCCCC;
background-color:#999999;
color:#FFFFFF;
}
.browse_page a.selectPage{
display:block;
width:45px;
font-size:14px;
float:left;
margin-right:2px;
border:1px solid #CCCCCC;
background-color:#999999;
color:#FFFFFF;
text-align:center;
line-height:22px;
font-weight:bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.browse_page a.SpaceC{
display:block;
width:45px;
font-size:14px;
float:left;
margin-right:2px;
border:0px dotted #0A85CB;
background-color:#FFFFFF;
color:#333333;
text-align:center;
line-height:22px;
font-weight:bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.browse_page a.naviPN{
width:50px;
font-size:12px;
display:block;
/* width:25px; */
float:left;
border:1px solid #CCCCCC;
background-color:#999999;
color:#FFFFFF;
text-align:center;
line-height:22px;
font-weight:bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* จบ css แบ่งหน้า */
</style>
</head>
<body>
<br>
<?php
if(isset($_GET['e_user_id']) && $_GET['e_user_id']!=""){
$edit_mode=1;
$q="
SELECT * FROM tbl_user WHERE user_id='".$_GET['e_user_id']."'
";
$qr=mysql_query($q);
if($qr){
$rs=mysql_fetch_assoc($qr);
$edit_user_id=$rs['user_id'];
$edit_user_name=$rs['user_name'];
$edit_user_pic=$rs['user_pic'];
}
}
?>
<div style="margin:auto;width:80%;">
<h3> บันทึกข้อมูล</h3>
<form class="form" id="myFrom" method="post" action="" role="form" enctype="multipart/form-data">
<div class="form-group has-feedback">
<lable class="control-label">Name : </lable>
<input type="text" autocomplete="off" class="form-control css-require" name="name" value="<?=$edit_user_name?>"> <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<lable class="control-label">Picture : </lable>
<input id="file_upload" style="display:none" name="pic_upload" type="file" >
<div id="upload" class="btn btn-info">
Upload File
</div>
<div id="thumbnail"></div>
</div>
<input type="hidden" name="h_user_id" value="<?=$edit_user_id?>">
<input type="hidden" name="h_user_pic" value="<?=$edit_user_pic?>">
<a href="<?=$php_filename?>" class="btn btn-default">ยกเลิก</a>
<button type="submit" name="bt_upload" class="btn btn-primary">บันทึกข้อมูล</button>
</form>
<br>
<br><br>
<table class="table table-bordered table-condensed">
<tr class="active">
<th width="50" class="text-center">#</th>
<th>Name</th>
<th width="150" class="text-center">Mange</th>
</tr>
<?php
// ส่วนของการแสดงข้อมูล จากฐานข้อมูล สนใจเรื่องแบ่งหน้าดูได้ที่
//
$i=0;
$q="
SELECT * FROM tbl_user
";
$qr=mysql_query($q);
$total=@mysql_num_rows($qr);
$e_page=2; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า
if(!isset($_GET['pages'])){
$_GET['pages']=0;
}else{
$_GET['pages']=$_GET['pages']-1;
if($_GET['pages']<0){
$_GET['pages']=0;
}
$chk_page=$_GET['pages'];
$_GET['pages']=$_GET['pages']*$e_page;
}
$q.=" ORDER BY user_id LIMIT ".$_GET['pages'].",$e_page";
$qr=@mysql_query($q);
if(@mysql_num_rows($qr)>=1){
$plus_p=($chk_page*$e_page)+@mysql_num_rows($qr);
}else{
$plus_p=($chk_page*$e_page);
}
$total_p=ceil($total/$e_page);
$before_p=($chk_page*$e_page)+1;
/// END PAGE NAVI ZONE
while($rs=mysql_fetch_assoc($qr)){
$i++;
?>
<tr>
<td class="text-center"><?=$i?></td>
<td>
<?=$rs['user_name']?>
[ <img src="picup/<?=$rs['user_pic']?>" style="height:20px;"> <?=$rs['user_pic']?>]
</td>
<td class="text-center">
<a href="?e_user_id=<?=$rs['user_id']?>" class="btn btn-success btn-xs" >
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
<a href="?d_user_id=<?=$rs['user_id']?>" class="btn btn-danger btn-xs btn-remove" >
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</td>
</tr>
<?php } ?>
</table>
<div style="margin:auto;width:100%;">
<?php if($total>$e_page){ ?>
<div class="browse_page">
<?php
if(count($_GET)<=1){
$urlquery_str="?";
}else{
$para_get="";
foreach($_GET as $key=>$value){
if($key!="pages"){
$para_get.=$key."=".$value."&";
}
}
$urlquery_str="?$para_get";
}
// เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
page_navi($before_p,$plus_p,$total,$total_p,$chk_page);
?>
</div>
<?php } ?>
</div>
<br />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" >
$(function () {
// ส่วนของการถามยืนยันการลบข้อมูล
$(".btn-remove").on("click",function(){
if(confirm("ยืนยันการลบข้อมูล?")){
}else{
return false;
}
});
// ส่วนของการซ่อนแสดง input file เมื่อคลิกที่ปุ่มที่เรากำหนด
$("#upload").on("click",function(e){
$("#file_upload").show().click().hide();
e.preventDefault();
});
// ส่วนของการแสดงรูปพรีวิวเมื่อมีการเปลี่ยนแปลง
$("#file_upload").on("change",function(e){
var files = this.files
showThumbnail(files)
});
// ส่วนของการแสดงรูปพรีวิวก่อนอัพโหลด
function showThumbnail(files){
$("#thumbnail").html("");
for(var i=0;i<files.length;i++){
var file = files[i]
var imageType = /image.*/
if(!file.type.match(imageType)){
// console.log("Not an Image");
continue;
}
var image = document.createElement("img");
var thumbnail = document.getElementById("thumbnail");
image.file = file;
thumbnail.appendChild(image)
var reader = new FileReader()
reader.onload = (function(aImg){
return function(e){
aImg.src = e.target.result;
};
}(image))
var ret = reader.readAsDataURL(file);
var canvas = document.createElement("canvas");
ctx = canvas.getContext("2d");
image.onload= function(){
ctx.drawImage(image,100,100)
}
} // end for loop
} // end showThumbnail
// ส่วนของการเช็ค ฟอร์ม ก่อน submit ดูเพิ่มเติมได้ที่
// http://www.ninenik.com/content.php?arti_id=579 via @ninenik
var obj_check=$(".css-require");
$("#myFrom").on("submit",function(){
obj_check.each(function(i,k){
var status_check=0;
if(obj_check.eq(i).find(":radio").length>0 || obj_check.eq(i).find(":checkbox").length>0){
status_check=(obj_check.eq(i).find(":checked").length==0)?0:1;
}else{
status_check=($.trim(obj_check.eq(i).val())=="")?0:1;
}
formCheckStatus($(this),status_check);
});
if($(this).find(".has-error").length>0){
return false;
}
});
obj_check.on("change",function(){
var status_check=0;
if($(this).find(":radio").length>0 || $(this).find(":checkbox").length>0){
status_check=($(this).find(":checked").length==0)?0:1;
}else{
status_check=($.trim($(this).val())=="")?0:1;
}
formCheckStatus($(this),status_check);
});
var formCheckStatus = function(obj,status){
if(status==1){
obj.parent(".form-group").removeClass("has-error").addClass("has-success");
obj.next(".glyphicon").removeClass("glyphicon-warning-sign").addClass("glyphicon-ok");
}else{
obj.parent(".form-group").removeClass("has-success").addClass("has-error");
obj.next(".glyphicon").removeClass("glyphicon-ok").addClass("glyphicon-warning-sign");
}
}
});
</script>
</body>
</html>