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 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>
โปรดรอ
cymiz.com insurance
