รวมเทคนิคต่าง ๆ ในการพัฒนาระบบ ที่น่าสนใจ รวมไว้ที่เดียว มีอะไรสอบถาม สามารถติดต่อผ่านช่องผ่าน Fanpage เราได้เลย

แสดงบทความที่มีป้ายกำกับ PHP แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ PHP แสดงบทความทั้งหมด

วันเสาร์ที่ 16 พฤษภาคม พ.ศ. 2563

แจก!!! 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 ถึงจะทำงานได้นะครับ ^ ^


Share:

ลดขนาดไฟล์รูปภาพตอนอัพโหลด ด้วยเทคนิค 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);

}





Share:

วันพฤหัสบดีที่ 7 พฤษภาคม พ.ศ. 2563

รูปแบบการแสดงผลตัวอักษรภาษาอังกฤษ PHP vs CSS


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

แสดงข้อความแบบตัวพิมพ์เล็ก
แสดงข้อความแบบตัวพิมพ์ใหญ่
แสดงข้อความขึ้นต้นด้วยตัวพิมพ์ใหญ่

ก่อนอื่นเรามาเริ่มที่ฝั่ง PHP กันก่อน
คำสั่ง strtolower() 
ตัวอย่าง echo strtolower("Hello WORLD!");
ผลลัพธ์ hello world!
------------------------------------------------------
คำสั่ง strtoupper() 
ตัวอย่าง echo strtoupper("Hello WORLD!");
ผลลัพธ์ HELLO WORLD!
------------------------------------------------------
คำสั่ง ucfirst() 
ตัวอย่าง echo echo ucfirst("hello world!");
ผลลัพธ์ Hello world!
------------------------------------------------------
คำสั่ง ucwords() 
ตัวอย่าง echo echo ucwords("hello world");
ผลลัพธ์ Hello World!

มาต่อที่ฝั่ง CSS กันเลย
คำสั่ง text-transform: lowercase;
ตัวอย่าง <div style="text-transform: lowercase;">Hello WORLD!</div>
ผลลัพธ์ hello world!
------------------------------------------------------
คำสั่ง text-transform: uppercase; 
ตัวอย่าง <div style="text-transform: uppercase;">Hello WORLD!</div>
ผลลัพธ์ HELLO WORLD!
------------------------------------------------------
คำสั่ง text-transform: capitalize;
ตัวอย่าง <div style="text-transform: capitalize;">Hello WORLD!</div>
ผลลัพธ์ Hello World!




Share:

วันอาทิตย์ที่ 3 พฤษภาคม พ.ศ. 2563

PHP for กับ foreach ต่างกันยังไง ใช้ตอนไหนดี


for และ foreach ทั้ง 2 คำสั่ง เป็นคำสั่งสำหรับวนลูป Array แต่ว่ามีข้อแตกต่างของทั้งสอง function คือ for จะวนลูปกับ Array ที่มี key เป็นตัวเลข และ เรียงลำดับกันเท่านั้น เช่น 0,1,2,3,4 ... แต่หาว่า Key Array นั้น เป็น 0,2,4,1,3 ... แบบนี้จะเหมาะกับการใช้ foreach สำหรับวนลูปมากกว่า

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

แบบที่ 1 เรียงจาก Key น้อยไปมาก
PHP CODE
$array = ['A', 'B' ,'C', 'D'];
for ($ = 0; $i < count($array); $i++) {
    echo $array[$i].'<br>';
}

ผลลัพธ์
A
B
C
D

แบบที่ 2 เรียงจากค่า Key มากไปน้อย
PHP CODE
$array = ['A', 'B' ,'C', 'D'];
for ($i = count($array)-1; $i >= 0; $i--) {
    echo $array[$i].'<br>';
}

ผลลัพธ์
D
C
B
A

Quote: ถึงแม้จะไม่เห็น key ใน Array แต่รูปแบบ Array แบบนี้จะมี Key เป็นตัวเลขระบุไว้อยู่ ดังนี้
['0'=>'A','1'=>'B','2'=>'C','3'=>'D']




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

foreach เหมาะกับการวนลูป Array แบบที่มี Key ทั้งเป็นแบบตัวเลขและตัวอักษร ซึ่ง foreach จะวนลูปตามลำดับของ Key ของข้อมูล โดยมีรูปแบบการใช้งานอยู่ 2 แบบ

แบบที่ 1 foreach โดยให้ผลลัพท์ทั้ง key และ value ออกมา
PHP CODE
$array = ['one'=>'A', 'two'=>'B', three'=>'C', 'four'=>'D'];
foreach($array as $key => $value) {
    echo 'Key '.$key.' = Value '.$value.'<br>';
}

ผลลัพธ์
Key one = Value A
Key two = Value B
Key three = Value C
Key four = Value D

แบบที่ 2 foreach โดยให้ผลลัพท์เฉพาะ value ออกมา
PHP CODE
$array = ['one'=>'A', 'two'=>'B', three'=>'C', 'four'=>'D'];
foreach($array as  $value) {
    echo '  Value '.$value.'<br>';
}

ผลลัพธ์
Value A
Value B
Value C
Value D

Quote: foreach จะเหมาะกับการใช้งานในการเขียนโปรแกรมจริง มากกว่า for เนื่องจากมีความเร็วในการประมวลผลที่ดีกว่า อีกทั้งยังสามารถนำไปประยุกต์ใช้งานได้หลากหลายมากกว่า โดยหลัก ๆ ที่จะใช้งานกันบ่อย ๆ คือ การนำไปวนลูปข้อมูลที่ได้จากฐานข้อมูล




Share:

แจก!!! ใช้งาน Autocomplete ร่วมกับฐานข้อมูล ตัวอย่าง Autocomplete จังหวัดในไทย


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


Download


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



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

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




ตัวอย่างการใช้งาน Text Autocomplete ร่วมกับ Database


เริ่มที่ เรียกใช้งาน StyleSheet และ Javascript ใน Tag <header>....</header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./inc/demo.css">
<link rel="stylesheet" href="inc/jquery.autocomplete.css">
<script src="./inc/jquery.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="inc/jquery.autocomplete.js" type="text/javascript"></script>

เชื่อมต่อฐานข้อมูลและดึงข้อมูลจากจังหวัดจากฐานข้อมูลออกมาแสดง จากตัวอย่างด้านล่าง เราจะเก็บชื่อจังหวัดที่
$connect = mysqli_connect('localhost', 'root', '1234', 'test');
mysqli_set_charset($connect, 'utf8');

/************************ ดึงข้อมูลจังหวัดจากฐานข้อมูล *********************/
$sql = "SELECT
pv.name_th
FROM
province AS pv
ORDER BY
CONVERT( pv.name_th USING tis620 ) ASC";
$result = mysqli_query($connect, $sql);
$php_list = '';
foreach ($result as $key => $val){
    $php_list .= "'".$val['name_th']."', ";
}
/********** เก็บค่ารายชื่อจังหวัดทั้งหมดไว้ในตัวแปร ********/
$php_list = substr($php_list,0, strlen($php_list) - 2);

ส่วนฝั่งของ HTML สร้าง Input field ที่ต้องการทำให้เป็น Autocomplete พร้อมกำหนด id ให้กับ Input นั้น เช่น id="province_auto"
<div class="auto" style="padding: 25px; width: 400px;">
<div class="form-group" style="margin:0px;">
<strong>กรอกจังหวัด</strong>
<input type="text" class="form-control" id="province_auto" placeholder="กรอกจังหวัด">
</div>
</div>

ในส่วนของ Script กำหนดค่าตัวแปร province เป็นรายชื่อจังหวัดจากนั้นเรียกใช้งานผ่าน jQuery ด้วยคำสั่ง .autocomplete
<script>
    var province = [<?php echo $php_list?>];

    $('#province_auto').autocomplete({
        source:[province],
        limit: 10
    });
</script>

ขอบคุณความรู้ดี ๆ จาก https://xdsoft.net/


Share:

บทความที่ได้รับความนิยม

Search

บทความอื่น ๆ