ประยุกต์ PHP ฟังก์ชั่น กับ Bootstrap 4 Pagination Component

เขียนเมื่อ 5 ปีก่อน โดย Ninenik Narkdee
pagination ค้นหาข้อมูล แบ่งหน้า bootstrap 4

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ pagination ค้นหาข้อมูล แบ่งหน้า bootstrap 4

ดูแล้ว 33,374 ครั้ง


เนื้อหาเกี่ยวกับการสร้าง php ฟังก์ชั่น สำหรับจัดการการแบ่งหน้ารายการข้อมูล
ที่ดึงมาจากฐานข้อมูล เราเคยมีตัวอย่างไปแล้วในบทความ
    แนวทาง การค้นหาจาก หลายรูปแบบ และแบ่งหน้า อย่างง่าย http://niik.in/573 
 
และเนื้อหาต่อไปนี้ ก็จะมีรูปแบบคล้ายๆ กัน แต่เป็นการประยุก์เพิ่มเติม โดยสร้างฟังก์ชั่นสำหรับแบ่ง
หน้าโดยใช้งานร่วมกับ Pagination Component ของ Bootstrap 4 โดยในที่นี้จะนำเสนอใน
2 รูปแบบ คือแบบแรกเป็นการดึงข้อมูลมาแสดง โดยมีแค่เพียงการแบ่งหน้าข้อมูลเท่านั้น 
และแบบที่สอง คือมีการแบ่งหน้าข้อมูล และรองรับการค้นหา 
    แนวทางการประยุกต์จะยึดเนื้อหาของบทความจากลิ้งค์ด้านบนเป็นแนวทาง คือเป็นการดึงราย
การข้อมูลจังหวัดในประเทศไทย มาแสดงในตาราง
 

รูปแบบที่ 1 แสดงแบบแบ่งหน้าอย่างเดียว

 
ไฟล์ demo_001.php ไฟล์เริ่มต้นใช้งาน bootstrap
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
	<title>Document</title> 
	<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
    <style type="text/css">
		html{
			font-family:tahoma, Arial,"Times New Roman";
			font-size:14px;
		}
		body{
			font-family:tahoma, Arial,"Times New Roman";
			font-size:14px;
		}    
    </style>
</head>
<body>

<br>
<br>
<div class="container">

</div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
	
});
</script>
</body>
</html>
 
ไฟล์ dbconnect.php
 
<?php  
$mysqli = new mysqli("localhost", "root","","test");  
/* check connection */ 
if ($mysqli->connect_errno) {  
    printf("Connect failed: %s\n", $mysqli->connect_error);  
    exit();  
}  
if(!$mysqli->set_charset("utf8")) {  
    printf("Error loading character set utf8: %s\n", $mysqli->error);  
    exit();  
}
 
ไฟล์ pagination_function.php
 
<?php
function page_navi($total_item, $cur_page, $per_page=10, $query_str="", $min_page=5){

$total_page = ceil($total_item/$per_page);
$cur_page = (isset($cur_page))?$cur_page:1;
$diff_page = NULL;
if($cur_page>$min_page){
	$diff_page = $total_page-$cur_page;
}
$limit_page = $min_page;
$f_num_page = ($cur_page<=$min_page)?1:(floor($cur_page/$min_page)*$min_page)+1;
if($diff_page>$min_page){
	$limit_page = ($min_page + $f_num_page)-1;
}else{
	if(isset($diff_page)){
		$limit_page = $total_page;
	}else{
		$limit_page = $min_page;
	}
}
$show_page = ($total_page<=$min_page)?$total_page:$limit_page;
$l_num_page = 1;
$prev_page = $cur_page-1;
$next_page = $cur_page+1;
$temp_query_str = $query_str;
$query_str = "";
if($temp_query_str && is_array($temp_query_str) && count($temp_query_str)>0){
	array_pop($temp_query_str);
	$query_str = http_build_query($temp_query_str);
	if($query_str!=""){
		$query_str = "?".$query_str;	
	}
}
$mark_char = ($query_str!="")?"&":"?";

  echo '<nav>
      <ul class="pagination justify-content-center">
        <li class="page-item">
		<a class="page-link" href="'.$query_str.$mark_char.'page=1"> First</a>
		</li>
		';
	echo '
        <li class="page-item '.(($cur_page==1)?"disabled":"").'">
          <a class="page-link"  href="'.$query_str.$mark_char.'page='.$prev_page.'"> Previous</a> 
        </li>	
	';	
	for($i = $f_num_page; $i<=$show_page;$i++){
	echo '     
        <li class="page-item '.(($i==$cur_page)?"active":"").'"> 
          <a class="page-link" href="'.$query_str.$mark_char.'page='.$i.'"> '.$i.' </a> 
        </li>     
	';
	}
	echo '
        <li class="page-item '.(($next_page>$total_page)?"disabled":"").'"> 
			<a class="page-link"  href="'.$query_str.$mark_char.'page='.$next_page.'"> Next</a> 
        </li>   	
	';	
	echo '
        <li class="page-item">
          <input type="number" class="form-control" min="1" max="'.$total_page.'"
                  style="width:80px;" onClick="this.select()" onchange="window.location=\''.$query_str.$mark_char.'page=\'+this.value"  value="'.$cur_page.'" />
        </li>	
	';
	echo '
        <li class="page-item"> 
			<a class="page-link"  href="'.$query_str.$mark_char.'page='.$total_page.'"> Last</a> 
        </li>   	
      </ul>
    </nav>		
	';		
}
?>
 
ในฟังก์ชั่น page_navi() เรามีการใช้งาน paginaton component ของ bootstrap มาจัดรูปแบบ โดยตัว
ฟังก์ชั่นสำหรับแบ่งหน้าที่เราขึ้น จะมีรูปแบบตามรูปด้านล่าง
 


 
 
สามารถเลื่อนไปหน้าแรก ไปหน้าสุดท้าย หรือเลือกหน้าที่ต้องการ หรือไปหน้าก่อนหน้า หรือหน้าถัดไป
สามารถเลือกเปลี่ยนเลขหน้าที่ช่อง input เพื่อไปหน้าที่ต้องการได้
 
ตัวฟังก์ชั่น จะรับค่า parameter ต่างๆ ตามรูปแบบดังนี้
 
page_navi($total_item, $cur_page, $per_page=10, $query_str="", $min_page=5)
 
  • $total_item จำนวนรายการข้อมูลทั้งหมด 
  • $cur_page หน้าปัจจุบัน
  • $per_page=10 จำนวนรายการทีแสดงในแต่ละหน้า ถ้าไม่มีการส่งค่าจะใช้ค่าเท่ากับ 10
  • $query_str="" สำหรับรองรับการส่งค่าเพิ่มเติมกรณีมีการค้นหา ถ้าไม่มีการกำหนดจะเป็นค่าว่าง
  • $min_page=5 จำนวนเลขหน้าอย่างน้อยที่ต้องการแสดง ถ้าไม่กำหนด จะแสดงเลขหน้าไม่เกิน 5 ปุ่ม
 
ต่อไปเราจะนำไฟล์ต่างๆ มารวมกัน และประยุกต์ดึงข้อมูลจากฐานข้อมูลจังหวัดมาแสดง และแบ่งหน้า
จะได้ไฟล์ demo_001.php ปรับโค้ดเป็นดังนี้
 
ไฟล์ demo_001.php
 
<?php
require_once("dbconnect.php");
require_once("pagination_function.php");
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
	<title>Document</title> 
	<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
    <style type="text/css">
		html{
			font-family:tahoma, Arial,"Times New Roman";
			font-size:14px;
		}
		body{
			font-family:tahoma, Arial,"Times New Roman";
			font-size:14px;
		}    
    </style>
</head>
<body>

<br>
<br>
<div class="container">

<div class="table-responsive-sm">
<table class="table table-bordered table-striped table-hover table-sm">
  <thead >
    <tr class="table-primary">
      <th class="text-center" scope="col" width="30">#</th>
      <th class="text-left" scope="col">ชื่อจังหวัด</th>
    </tr>
  </thead>
  <tbody>
<?php
$num = 0;
$sql = "
SELECT * FROM province_th WHERE 1 
";  
$result=$mysqli->query($sql);
$total=$result->num_rows;

$e_page=10; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า   
$step_num=0;
if(!isset($_GET['page']) || (isset($_GET['page']) && $_GET['page']==1)){   
	$_GET['page']=1;   
	$step_num=0;
	$s_page = 0;	
}else{   
	$s_page = $_GET['page']-1;
	$step_num=$_GET['page']-1;	
	$s_page = $s_page*$e_page;
}   
$sql.=" ORDER BY province_id  LIMIT ".$s_page.",$e_page";
$result=$mysqli->query($sql);
if($result && $result->num_rows>0){  // คิวรี่ข้อมูลสำเร็จหรือไม่ และมีรายการข้อมูลหรือไม่
    while($row = $result->fetch_assoc()){ // วนลูปแสดงรายการ
		$num++;
?>
    <tr>
      <th class="text-center" scope="row"><?=($step_num*$e_page)+$num?></th>
      <td class="text-left" ><?=$row['province_name']?></td>
    </tr>
<?php
    }   
}
?>      
  </tbody>
</table>

<?php
page_navi($total,(isset($_GET['page']))?$_GET['page']:1,$e_page);
?>
</div>

<br>
</div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
	
});
</script>
</body>
</html>
 
บรรทัดที่เราสามารถแก้ไข กรณีนำไปประยุกต์ใช้ คือบรรทัดที่ highlight ไว้ ได้แก่
บรรทัดที่ 40-42 เป็นส่วนของคำสั่ง SQL ที่ต้องการ ในตัวอย่างเรากำหนด WHERE 1 ไว้เพื่อรองรับ
การเพิ่มเงื่อนไขที่อาจจะมีในอนาคต
บรรทัดที่ 46 จำนวนรายการที่จะแสดงในแต่ละหน้า 
บรรทัดที่ 57 เงื่อนไขการเรียงข้อมูล เปลี่ยนไปตามรูปแบบที่ต้องการ แต่ให้คง LIMIT ".$s_page.",$e_page ไว้
 
ในส่วนบรรทัดที่ 75 การเรียกใช้งานฟังก์ชั่นแบ่งหน้า page_navi()
 
page_navi($total,(isset($_GET['page']))?$_GET['page']:1,$e_page);
 
เรามีการส่งค่าไปทั้งหมด 3 ค่า คือ 
$total
    จำนวนรายการทั้งหมด
 
(isset($_GET['page']))?$_GET['page']:1 
    หน้าปัจจุบัน ใช้การเช็คว่ามีการส่งค่าหน้าหรือไม่ ถ้า
ยังไม่มีการส่งค่าหน้าผ่านตัวแปร $_GET'page'] ให้หน้าเริ่มต้นเป็นหน้าที่ 1
 
$e_page
    จำนวนรายการที่แสดงแต่ละหน้า เราใช้ค่าจากตัวแปรที่กำหนดด้านบท คือ 10 รายการต่อหน้า
 
 

ทดสอบตัวอย่างและผลลัพธ์ได้ที่ https://www.ninenik.com/demo/bootstrap4/demo_001.php

 
สมมติเราเพิ่มจำนวนการแสดงปุ่มเลขหน้า เข้าไปเป็น 10 ด้วยการเรียกใช์ดังนี้
 
page_navi($total,(isset($_GET['page']))?$_GET['page']:1,$e_page,'',10);
 
จะได้ผลลัพธ์ในส่วนของการแบ่งหน้าเป็นดังนี้
 


 
 
เนื่องเรามีรายชื่อจังหวัดทั้งหมดเพียง 77 จังหวัด แสดงหน้าละ 10 เราจะสามารถแบ่งได้ทั้งหมด 8 หน้า
ดังนั้นเมื่อเรากำหนดให้แสดงปุ่มเลขหน้าอย่างน้อย 10 ปุ่ม จำนวนปุ่มที่แสดงจริง จึงเท่ากับ 8 ตาม
จำนวนหน้าทั้งหมดที่มีอยู่จริง
    แต่กรณีแรก เราไม่ได้มีการกำหนดจำนวนปุ่ม ทำให้มีการใช้ค่าเริ่มต้นคือ 5 เราจึงเห็นจำนวนปุ่มแสดง
แค่เพียง 5 รายการ และถ้าเรากดไปที่หน้าที่ 6 ก็จะแสดงปุ่มหน้าที่ 6-8 โดยเริ่มปุ่มแรกที่ปุ่มหน้าที่ 6 
ตามรูปด้านล่างประกอบ
 


 
 


 

รูปแบบที่ 2 แสดงแบบแบ่งหน้า และการค้นหาข้อมูล

 
รูปแบบที่สองนี้ ก็จะเป็นการประยุกต์เพิ่มเติมจากรูปแบบแรก คือ การแบ่งหน้า จะรองรับกรณีการค้นหาข้อมูล
ด้วยเงื่อนไขต่างๆ ด้วย ซึ่งเมื่อมีการค้นหาข้อมูล รายการข้อมูล ก็จะแปรเปลี่ยนไปตามเงื่อนไขของตัวแปร
ที่ส่งเข้ามา ให้เราใช้ตัวอย่างจากไฟล์แรก แล้วเปลี่ยนชื่อไฟล์เป็น demo_002.php แล้วปรับโค้ดใหม่
เป็นดังนี้
 
ไฟล์ demo_002.php
 
<?php
require_once("dbconnect.php");
require_once("pagination_function.php");
?>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
	<title>Document</title> 
	<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.1.0/dist/css/bootstrap.min.css" >
    <style type="text/css">
		html{
			font-family:tahoma, Arial,"Times New Roman";
			font-size:14px;
		}
		body{
			font-family:tahoma, Arial,"Times New Roman";
			font-size:14px;
		} 
		.margin_top_5{
			margin-top: 5px;	
		}
    </style>
</head>
<body>

<br>
<br>
<div class="container">

<form name="form1" method="get" action="">
<div class="form-group row">
    <label for="keyword" class="col-sm-4 col-form-label text-right">
    พิมพ์บางคำ บางตัว หรือไม่พิมพ์ก็ได้ 
    </label>
    <div class="col-sm-3">
      <input type="text" class="form-control" name="keyword" id="keyword"  
       value="<?=(isset($_GET['keyword']))?$_GET['keyword']:""?>">
    </div>
</div>    
<div class="form-group row">
    <label for="myselect" class="col-sm-4 col-form-label text-right">
    เลือกอย่างหนึ่งอย่างใด หรือไม่เลือกก็ได้
    </label>
    <div class="col-sm-3">
        <select class="custom-select" name="myselect" id="myselect">
            <option value="">เลื่อกเงื่่อนไข</option>
            <option value="ก" <?=(isset($_GET['myselect']) && $_GET['myselect']=="ก")?" selected":""?> >ขึ้นต้นด้วย ก</option>
            <option value="อุ" <?=(isset($_GET['myselect']) && $_GET['myselect']=="อุ")?" selected":""?> >ขึ้นต้นด้วย อุ</option>
        </select>
    </div>
</div>    
<div class="form-group row">
    <label for="" class="col-sm-4 col-form-label text-right">
    เลือกอย่างหนึ่งอย่างใด หรือไม่เลือกก็ได้
    </label>
    <div class="col-sm-3">
        <div class="custom-control custom-radio custom-control-inline margin_top_5">
          <input type="radio" id="myradio1" name="myradio" value="จ" 
          <?=(isset($_GET['myradio']) && $_GET['myradio']=="จ")?" checked":""?> class="custom-control-input">
          <label class="custom-control-label" for="myradio1">มี "จ"</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline margin_top_5">
          <input type="radio" id="myradio2" name="myradio" value="ม" 
          <?=(isset($_GET['myradio']) && $_GET['myradio']=="ม")?" checked":""?> class="custom-control-input">
          <label class="custom-control-label" for="myradio2">มี "ม"</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline margin_top_5">
          <input type="radio" id="myradio3" name="myradio" value="ส" 
          <?=(isset($_GET['myradio']) && $_GET['myradio']=="ส")?" checked":""?> class="custom-control-input">
          <label class="custom-control-label" for="myradio3">มี "ส"</label>
        </div>        
    </div>        
</div>
<div class="form-group row">
    <label for="" class="col-sm-4 col-form-label text-right">
    เลือกอย่างหนึ่งอย่างใด หรือเลือกทั้งสอง หรือไม่เลือกก็ได้
    </label>
    <div class="col-sm-3">
        <div class="custom-control custom-checkbox custom-control-inline margin_top_5">
          <input type="checkbox" id="mycheckbox1" name="mycheckbox1" value="นี"
          <?=(isset($_GET['mycheckbox1']) && $_GET['mycheckbox1']=="นี")?" checked":""?>  class="custom-control-input">
          <label class="custom-control-label" for="mycheckbox1">ลงท้ายด้วย "นี"</label>
        </div>
        <div class="custom-control custom-checkbox custom-control-inline margin_top_5">
          <input type="checkbox" id="mycheckbox2" name="mycheckbox2" value="คร" 
          <?=(isset($_GET['mycheckbox2']) && $_GET['mycheckbox2']=="คร")?" checked":""?> class="custom-control-input">
          <label class="custom-control-label" for="mycheckbox2">ลงท้ายด้วย "คร"</label>
        </div>  
    </div>        
</div>
<div class="form-group row">
    <div class="col-sm-4 offset-sm-4">
      <button type="submit" class="btn btn-primary" name="btn_search" id="btn_search">ค้นหา</button>
      &nbsp;&nbsp;
      <a href="demo_002.php" class="btn btn-danger">ล้างค่า</a>
    </div>
</div>
</form>

<div class="table-responsive-sm">
<table class="table table-bordered table-striped table-hover table-sm">
  <thead >
    <tr class="table-primary">
      <th class="text-center" scope="col" width="30">#</th>
      <th class="text-left" scope="col">ชื่อจังหวัด</th>
    </tr>
  </thead>
  <tbody>
<?php
$num = 0;
$sql = "
SELECT * FROM province_th WHERE 1 
";  

//////////////////// MORE QUERY 
// เงื่อนไขสำหรับ radio
if(isset($_GET['myradio']) && $_GET['myradio']!=""){
	// ต่อคำสั่ง sql 
	$sql.=" AND province_name LIKE '%".trim($_GET['myradio'])."%' ";	
}

// เงื่อนไขสำหรับ input text
if(isset($_GET['keyword']) && $_GET['keyword']!=""){
	// ต่อคำสั่ง sql 
	$sql.=" AND province_name LIKE '%".trim($_GET['keyword'])."%' ";	
}

// เงื่อนไขสำหรับ select
if(isset($_GET['myselect']) && $_GET['myselect']!=""){
	// ต่อคำสั่ง sql 
	$sql.=" AND province_name LIKE '".trim($_GET['myselect'])."%' ";	
}

// เงื่อนไขสำหรับ checkbox
if((isset($_GET['mycheckbox1']) && $_GET['mycheckbox1']!="") 
|| (isset($_GET['mycheckbox2']) && $_GET['mycheckbox2']!="")){
	// ต่อคำสั่ง sql 
	if($_GET['mycheckbox1']!="" && $_GET['mycheckbox2']!=""){
		 $sql.=" 
		 AND (province_name LIKE '%".trim($_GET['mycheckbox1'])."' 
		 OR province_name LIKE '%".trim($_GET['mycheckbox2'])."' )
		 ";	
	}elseif($_GET['mycheckbox1']!=""){
		 $sql.=" AND province_name LIKE '%".trim($_GET['mycheckbox1'])."' ";	                
	}elseif($_GET['mycheckbox2']!=""){
		 $sql.=" AND province_name LIKE '%".trim($_GET['mycheckbox2'])."' ";	                
	}else{
		
	}
}
//////////////////// MORE QUERY 
$result=$mysqli->query($sql);
$total=$result->num_rows;

$e_page=10; // กำหนด จำนวนรายการที่แสดงในแต่ละหน้า   
$step_num=0;
if(!isset($_GET['page']) || (isset($_GET['page']) && $_GET['page']==1)){   
	$_GET['page']=1;   
	$step_num=0;
	$s_page = 0;	
}else{   
	$s_page = $_GET['page']-1;
	$step_num=$_GET['page']-1;	
	$s_page = $s_page*$e_page;
}   
$sql.=" ORDER BY province_id  LIMIT ".$s_page.",$e_page";
$result=$mysqli->query($sql);
if($result && $result->num_rows>0){  // คิวรี่ข้อมูลสำเร็จหรือไม่ และมีรายการข้อมูลหรือไม่
    while($row = $result->fetch_assoc()){ // วนลูปแสดงรายการ
		$num++;
?>
    <tr>
      <th class="text-center" scope="row"><?=($step_num*$e_page)+$num?></th>
      <td class="text-left" ><?=$row['province_name']?></td>
    </tr>
<?php
    }   
}
?>      
  </tbody>
</table>

<?php
page_navi($total,(isset($_GET['page']))?$_GET['page']:1,$e_page,$_GET);
?>
</div>

<br>

<br>
</div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
	
});
</script>
</body>
</html>
 
สำหรับในรูปแบบที่สอง สิ่งที่เราเพิ่มเข้ามาก็คือส่วนของฟอร์ม ที่เป็นเงื่อนไขเพิ่มเติมในการค้นหา
หรือใช้ในการกรองข้อมูล โดยเราจะใช้วิธีการส่งค่าแบบ GET 
    เมื่อมีฟอร์มแล้ว เราก็ต้องมีส่วนของการกำหนดเงื่อนไขคำสั่ง sql เพิ่มเติม โดยใช้ค่าจาก element
ต่างๆ ในฟอร์มที่ส่งมา ใช้เป็นตัวกำหนดเงื่อนไข ตามบรรทัดที่ 117-153
    ส่วนสุดท้ายที่เพิ่มเข้ามาเล็กน้อย ในการส่ง parameter เข้าไปในฟังก์ชั่นแบ่งหน้าคือตัวแปร $_GET
ตามรูปแบบการเรียกใช้งานในบรรทัดที่ 186
 

ทดสอบตัวอย่างและผลลัพธ์ได้ที่ https://www.ninenik.com/demo/bootstrap4/demo_002.php

 
แนวทางการประยุกต์ข้างต้น เราสามารถนำไปดัดแปลงเพิ่มเติม เช่น อาจจะสร้างในรูปแบบ class ไว้ใช้งาน
หรือปรับแต่ง เพิ่มเติมได้ตามต้องการ หวังว่าแนวทางนี้ จะทำให้เราสามารถนำไปใช้งานในส่วนของ
การแบ่งหน้าได้สะดวกและง่ายขึ้น





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ







เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ