แจก!!! javascript function สำหรับตรวจเลขบัตรประชาชน แบบ Real time อย่างง่าย

เอามาแจกอีกแล้ว Onlymycode กับช่วงเทคนิคง่าย ๆ ที่ได้ใช้บ่อย วันนี้ ขอเสนอ Function สำหรับตรวจสอบเลขบัตรประชาชน

ตัวอย่างการใช้งาน javascript ตรวจสอบเลขบัตร

See the Pen เช็คเลขบัตรประชาชน by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

---

ตัวอย่างการใช้งาน

เริ่มที่ เรียกใช้งาน Stylesheet และ Javascript ใน Tag <header>....</header>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js' crossorigin="anonymous"></script>

ส่วนนี้คือตัวอย่าง Code ในฝั่งของ HTML

<div class="container1">
    <div class="row">
        <h1>ตัวอย่าง Script ตรวจเลขบัตร</h1><br/>
        <div class='col-lg-12'>
          <label>กรอกเลขบัตร</label>
          <input type="text" id="idcard" class="form-control" maxlength="13">
          <span class="error"></span>
        </div>
    </div>
</div>

และตัวอย่าง Code ในฝั่งของ Javascript / Code สีฟ้า ใช้สำหรับตรวจสอบ Form key และ Code สีส้ม คือ Function สำหรับตรวจสอบเลขบัตรประชาชนครับ

$(document).ready(function(){
  $('#idcard').on('keyup',function(){
    if($.trim($(this).val()) != '' && $(this).val().length == 13){
      id = $(this).val().replace(/-/g,"");
      var result = Script_checkID(id);
      if(result === false){
        $('span.error').removeClass('true').text('เลขบัตรผิด');
      }else{
        $('span.error').addClass('true').text('เลขบัตรถูกต้อง');
      }
    }else{
      $('span.error').removeClass('true').text('');
    }
  })
});

function Script_checkID(id){
    if(! IsNumeric(id)) return false;
    if(id.substring(0,1)== 0) return false;
    if(id.length != 13) return false;
    for(i=0, sum=0; i < 12; i++)
        sum += parseFloat(id.charAt(i))*(13-i);
    if((11-sum%11)%10!=parseFloat(id.charAt(12))) return false;
    return true;
}
function IsNumeric(input){
    var RE = /^-?(0|INF|(0[1-7][0-7]*)|(0x[0-9a-fA-F]+)|((0|[1-9][0-9]*|(?=[\.,]))([\.,][0-9]+)?([eE]-?\d+)?))$/;
    return (RE.test(input));
}

ตัวอย่าง Code ด้านบน การตรวจสอบเลขบัตรจะให้วิธีจับ Event แบบ on keyup คือ ตรวจสอบทันทีเมื่อมีการพิมพ์ที่ Form  หวัว่างโค้ดชุดนี้จะมีประโยชน์กับทุกคนนะครับ

Read More

แจก!!! PHP เลือก จังหวัด อำเภอ ตำบล ด้วย jQuery Ajax

กำลังบอกหาโค้ดสำหรับลือก จังหวัด อำเภอ ตำบล โดยไม่ต้อง Refresh หน้ากันอยู่ใช่รึป่าว วันนี้ Onlymycode เอา Code เลือก จังหวัด อำเภอ ตำบล ด้วย Jquery Ajax มาฝากกันจ้า


Download


เมื่อ Download เสร็จแล้วจะได้ไฟล์เหมือนในรูป โดยไฟล์ จะมีทั้งตัวอย่างฐานข้อมูล และไฟล์ตัวอย่างการใช้งาน jQeury Ajax ร่วมกับ Database ดังรูป

---

ตัวอย่างการใช้งาน jQuery Ajax เลือก จังหวัด อำเภอ ตำบล

ในการยกตัวอย่างการใช้งาน ผมจะขอนำเสนอในรูปแบบของการทำ jQuery Ajax รายชื่อจังหวัด อำเภอ ตำบล ของประเทศไทย (ลองใช้งานได้ ในกรอบด้านล่าง)

---

ตัวอย่างการใช้งาน

เริ่มที่ เรียกใช้งาน Javascript ใน Tag <header>....</header>

<script src="service/province.service.js" type="text/javascript"></script>

ส่วนนี้คือตัวอย่าง Code ในฝั่งของ HTML

<div class="container" style="margin-top: 25px;">
    <div class="row">
        <div class="col-lg-4">
            <label class="control-label">จังหวัด</label>
            <select class="form-control selectpicker" data-live-search="true" name="province" id="province" ></select>
        </div>
        <div class="col-lg-4">
            <label class="control-label">อำเภอ/เขต</label>
            <select class="form-control selectpicker" name="district" id="district" >
                <option value="">เลือก</option>
            </select>

        </div>
        <div class="col-lg-4">
            <label class="control-label">ตำบล/แขวง</label>
            <select class="form-control selectpicker" name="subdistrict" id="subdistrict">
                <option value="">เลือก</option>
            </select>
        </div>

    </div>
</div>

ตัวอย่าง Code ด้านบน เมื่อคุณทำการเรียกใช้งานไฟล์ js province.service.js พร้อมทั้งสร้าง Form ที่มี Field จังหวัด อำเภอ ตำบล Service จะทำให้ Form ของคุณเลือก จังหวัด อำเอภ ตำบล ได้เองแบบอัตโนมัติ

ข้อสำคัญ

id ของ Selectbox จะต้องเหมือนกับตัวอย่าง service ถึงจะทำงานได้นะครับ ^ ^

Read More

ลดขนาดไฟล์รูปภาพตอนอัพโหลด ด้วยเทคนิค Compress image PHP

วันนี้ Onlymycode มานำเสนอเทคนิคดี ๆ ที่ได้ใช้บ่อยอีกเทคนิคหนึ่ง นั้นก็คือการ Compress image file หรือที่ภาษาไทยเรียกว่า การลดขนาดรูปนั้นเอง ในวันนี้ทาง Onlymycode ขอนำเสนอเทคนิคอย่างง่ายก่อนนะครับ เพื่อง่ายสำหรับความเข้าใจ เผื่อท่านใดเป็นมือใหม่จะได้เข้าใจได้ ก่อนอื่น สามารถ Download ไปลองเล่นได้ ที่ปุ่มด้านล่าง


Download


ตัวอย่างหน้าจอ

ตัวอย่างการใช้งาน Code ลดขนาดไฟล์รูปภาพ Compress image PHP

Code HTML 

ส่วน Code HTML เป็นส่วนของหน้า Form Submit ธรรมดา ๆ + มี Dropdown เพื่อกำหนดค่า Quality ของรูปที่เราต้องการ Compress ทั้งนี้ คุณสามารถเพิ่มรายการเข้าไปได้เพิ่มเติมเช่น

<option value="95">95</option>
<option value="85" selected>85</option>

เป็นต้น

<div class="container" style="margin-top: 30px;">
    <div class="form-control" style="text-align: center">
        <div class="pre_view">
            <?php
            if(file_exists($location)){
                echo '<h1>Preview image</h1>';
                echo '<img src="'.$location.'"><br>';
                echo 'ลดขนาด จาก : '.round($fromSize / 1024, 2).'kb เป็น '.round($toSize / 1024, 2).'kb';
                echo '<hr>';
            }
            ?>
        </div>
        <form method='post' action='' enctype='multipart/form-data'>
            <label>คุณภาพรูป (Compress quality) :
                <select name="quality">
                    <option value="100">100</option>
                    <option value="90">90</option>
                    <option value="80" selected>80</option>
                    <option value="70">70</option>
                    <option value="60">60</option>
                    <option value="50">50</option>
                </select>
            </label>
            <br>
            <input type='file' name='imagefile' >

            <input type='submit' value='Upload' name='upload'>
        </form>
    </div>
</div>

Function Compress File (เอาไปวางไว้บรรทัดแรกที่ส่วนของ Body เว็บ)

ตัวอย่างด้านล่างนี้เป็นการ Copress File ด้วยภาษา PHP นะครับ จะเป็นรูปแบบ Submit Post ธรรมดาไม่ได้มี Event อะไรพิเศษแต่อย่างใด อธิบายให้คือเลือกไฟล์รูป กด Upload ก็สามารถอัพโหลดรูป + ลดขนาดไฟล์ได้เลย

<?php
$location = '';
if(isset($_FILES['imagefile']['name'])){
    // Getting file name
    $filename = $_FILES['imagefile']['name'];

    // Valid extension
    $valid_ext = array('png','jpeg','jpg');

    // Location
    $location = "images/".$filename;

    // file extension
    $file_extension = pathinfo($location, PATHINFO_EXTENSION);
    $file_extension = strtolower($file_extension);

    // Check extension
    if(in_array($file_extension,$valid_ext)){
        $fromSize = filesize($_FILES['imagefile']['tmp_name']);

        compressImage($_FILES['imagefile']['tmp_name'],$location,$_POST['quality']);
        $toSize = filesize($location);
    }else{
        echo "Invalid file type.";
    }
}

// Compress image
function compressImage($source, $destination, $quality) {

    $info = getimagesize($source);

    if ($info['mime'] == 'image/jpeg')
        $image = imagecreatefromjpeg($source);

    elseif ($info['mime'] == 'image/gif')
        $image = imagecreatefromgif($source);

    elseif ($info['mime'] == 'image/png')
        $image = imagecreatefrompng($source);

    imagejpeg($image, $destination, $quality);

}

Read More

สลับสีตาราง HTML ง่าย ๆ ด้วย CSS บรรทัดเดียว

เจอคำถามเรื่องการ Style สลับสีตาราง HTML มาบ่อย ๆ วันนี้เลยเอาบอกในบทความ เทคนิคง่าย ๆ แต่ได้ใช้บ่อย กันซะเลย

CSS บรรทัดเดียว สลับสีตาราง ได้เล๊ย!!!

เอา Code Css นี้ไปใส่ใน File stylesheet หรือเอาไปแปะไว้ที่ Tag <style>...</style> ของหน้าเว็บไซต์กันได้เลย ตัวอย่างนี้คือ ทำให้ Row ของตารางที่เป็นเลขคี่ (1,3,5 ....) ทั้งหมดมี Background เป็นสีเทา ด้วยคำสั่ง nth-child(odd)

tbody tr:nth-child(odd) {background-color: #ccc;}

เพิ่มเติมนิด ถ้าอยากให้กำหนดให้ใส่สีใน Row เลขคู่แทน เราก็สามารถเปลี่ยนคำสั่งจาก odd เป็น even ตามตัวอย่างนี้

tbody tr:nth-child(even) {background-color: #ccc;}

เพิ่มอีกหน่อย ถ้าอยากกำหนดสีให้ทั้ง Row เลขคู่ เลขคี่ ก็แบบนี้เลย

tbody tr:nth-child(even) {background-color: #ffc3a0;} //เลขคู่
tbody tr:nth-child(odd) {background-color: #e5ff7f;} //เลขคี่

Read More

ลบขีดเส้นใต้ link ทิ้ง css link ไม่มีขีดเส้นใต้

วันนี้ Onlymycode มาพร้อมกับเทคนิคง่าย ๆ แต่ได้ใช้บ่อย สำหรับคนที่เริ่มหัดเขียนเว็บใหม่ มักจะมีคำถามนี้เลย ทำยังไงถึงจะลบขีดเส้นใต้ ของ link ได้ ทำยังไงให้ link ไม่มีขีดเส้นใต้ วันนี้เรามีคำสั่งง่าย ๆ มาบอกกันครับ

ทำยังไง ให้ link ไม่มีขีดเส้นใต้

เอา Code Css นี้ไปใส่ใน File stylesheet หรือเอาไปแปะไว้ที่ Tag <style>...</style> ของหน้าเว็บไซต์กันได้เลย

a{text-decoration: none;}

แต่หากอยากให้หายไปเฉพาะบาง Class ก็กำหนดได้ดังนี้

a.onlyThisLink{text-decoration: none;}

วิธีใช้งาน

<a class="onlyThisLink">Link</a>

ตามนี้เลยครับ เทคนิคง่าย ๆ แต่ได้ใช้บ่อยของวันนี้ ขอบคุณที่เข้ามาอ่านครับ

Read More