คอมพิวเตอร์และอินเตอร์เน็ต,บรรยายวิชาการ,วิจัย,ศึกษากุรอาน,E-Book

แสดงบทความที่มีป้ายกำกับ คอมพิวเตอร์และอินเตอร์เน็ต แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ คอมพิวเตอร์และอินเตอร์เน็ต แสดงบทความทั้งหมด

วันศุกร์ที่ 8 มีนาคม พ.ศ. 2567

การส่งบันทึกข้อมูลด้วย API

 


การส่งบันทึกข้อมูลด้วย API ใน PHP

Sender

$data = array('title' => $title_value,
'author' => $author_value, 
'published_at' => $published_value
);
$data_json = json_encode($data);  // Data should be passed as json format

// API URL to send data
$url = 'http://209.15.98.146/apps/adi_test/test/api_add_data.php';

$ch = curl_init(); // curl initiate
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));
curl_setopt($ch, CURLOPT_POST, 1); // SET Method as a POST
curl_setopt($ch, CURLOPT_POSTFIELDS,$data_json); // Pass  data in POST command
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response  = curl_exec($ch); // Execute curl and assign returned data
curl_close($ch); // Close curl


Endpoint
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8"); // Set the content type to JSON
header("Access-Control-Allow-Methods: OPTIONS,GET,POST,PUT,DELETE");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
$method = $_SERVER['REQUEST_METHOD'];  // Handle HTTP methods
if($method=='POST'){
$data = json_decode(file_get_contents('php://input'), true);
$title = $data['title'];
$author = $data['author'];
$published_at = $data['published_at'];
$stmt = $pdo->prepare('INSERT INTO books (title, author, published_at) VALUES (?, ?, ?)');
$stmt->execute([$title, $author, $published_at]);
echo json_encode(['message' => 'Book added successfully']);
}else{
     http_response_code(405);
     echo json_encode(['error' => 'Method not allowed']);
}



วันอังคารที่ 27 กุมภาพันธ์ พ.ศ. 2567

ApexCharts.js ง่ายสุด

เขียน Chart อย่างง่ายด้วย ApexCharts : Modern & Interactive Open-source Charts
ดังนี้

1.กำหนด library path

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

2.กำหนดขนาดด้วย style

<style>   #chart {max-width: 650px; margin: 35px auto; } </style>

3.กำหนดที่สำหรับ render

<div id="chart"></div>

4.กำหนดลักษณะ chart ด้วย javascript

เช่น

<script>

  var options = {

  chart: {   

     type: 'bar'  },

    series: [{

        name: 'sales',

        data: [30,40,45,50,49,60,70,91,125]

  }],

  xaxis: {

    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]

  }

}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>


หมาเหตุ : มีตัวอย่างการดึงข้อมูลจาก Api มาแสดงกราฟได้ทันที

                https://apexcharts.com/docs/update-charts-from-json-api-ajax/

ตย.

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Axios Example </title>

    <style>

        #chart { max-width: 450px; margin: 35px auto; }

    </style>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>

</head>

<body>

    <div id="chart"></div>

    <script>

        var options = {

          series: [],

          chart: {

          height: 250,

          type: 'bar',

        },

        dataLabels: {

          enabled: false

        },

        title: {

          text: 'Ajax Example',

        },

        noData: {

          text: 'Loading...'

        },

        xaxis: {

          type: 'category',

          tickPlacement: 'on',

          labels: {

            rotate: -45,

            rotateAlways: true

          }

        }

        };

      var chart = new ApexCharts(document.querySelector("#chart"), options);

       chart.render();

      

        // AXIOS for GET DATA ///////////////////

        axios({

        method: 'GET',

        url: 'http://223.27.246.234/poe12-opendata/apexcharts_data/daily_passenger.php',

        })

        .then(function(response) {

            chart.updateSeries([{

            name: 'Passenger-in',

            data: response.data

            }])

        })

        /////////End Axios///////////////////////

    </script>  

</body>

</html>



วันพฤหัสบดีที่ 20 เมษายน พ.ศ. 2566

PHP Mobile Detection

 

PHP Mobile Detection

<?php //detect a mobile device in PHP

// Create the function, so you can use it

function isMobile() {

return   preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|

                                          hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i",  

                                         $_SERVER["HTTP_USER_AGENT"]);

}

// If the user is on a mobile device

if(isMobile()){

$x1='http://223.27.246.236/q-office/mobile/index.php';

}else{

   $x1='index.php';

}

?>


วันเสาร์ที่ 8 เมษายน พ.ศ. 2566

วิธีรับค่า API ด้วย jQuery หรือ AXIOS อย่างง่าย

 



JQUERY

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<?

$my_link = 'http://223.27.246.234/q-office-v2/api_survices/user_login-v2.php?u='.$myuser.'&p='.$mypass.'&tk='.$mytoken;

?>

<script>

   $.getJSON('<?=$my_link;?>', function(data) 

       {

           var xcode,officode;

           xcode = data.code;  //รับค่าที่ไม่เป็น Array

          //alert(xcode);

          if(xcode=='200'){

              officode=data.itemdata[0].office_id; //รับค่าที่เป็น Array

               window.location.replace('pad_list.php?offi='+officode);//redirect

         }else{

              window.location.replace('pad_unautherize.php'); //redirect

          }             

    });  

</script>


AXIOS

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<?php

$my_link = 'http://223.27.246.234/q-office-v2/api_survices/user_login-v2.php?u='.$myuser.'&p='.$mypass.'&tk='.$mytoken;

?>

 <script>

   axios.get('<?=$my_link;?>')

   .then((response) => {    // ถ้าทำงานสำเร็จ

      officode = response.data.itemdata[0].office_id; //รับค่าที่เป็น Array

      window.location.replace('pad_list.php?offi='+officode);//redirect

   })

    .catch((error) => {  // ถ้าทำงานไม่สำเร็จ เกิดข้อผิดพลาด

        window.location.replace('pad_unautherize.php'); //redirect

   });

 </script>

วันศุกร์ที่ 8 เมษายน พ.ศ. 2565

CRUD ด้วย Datatable.js และ Bootstrap

 


การ CRUD ด้วย Datatable.js และ Bootstrap ดีมากๆ สวยดูดีและทำงานได้รวดเร็ว
ได้ลองประยุกต์ใช้แล้วใน LabLink ทำงานได้ดีมาก

download  ตัวอย่าง
download  ส่วนที่ประยุกต์ใช้ใน lablink เพิ่มการรับค่าตัวแปรจากภายนอก class 


การ Copy to Clipboard

 

ตัวอย่างการ Copy to Clipboard

JS:

<script>
        function copytoclipboard(txt){
            var cb = document.getElementById("cb");
            cb.value = txt;
            cb.style.display='block';
            cb.select();
            document.execCommand('copy');
            cb.style.display='none';
            
            alert("คัดลอกลิงก์แล้ว...");
         }
</script>


PHP:

<?php
$txttocopy="http://223.27.246.236/q-alert/".$filename;
?>
<a href="" onclick="copytoclipboard('<?=$txttocopy;?>');return false;" > 
    <font size=2 color=#8b7d6b>[คัดลอกลิ้งก์]</font>
</a>
<input id="cb" type="text" hidden>


วันอาทิตย์ที่ 27 มีนาคม พ.ศ. 2565

แก้ไขคำหรือCode ด้วย Replace Text

 


การแก้ไขคำในไฟล์ หรือ Code หรือ Script ของโปรแกรมด้วย Replace Text ทำได้สะดวกมาก สามารถแก้ได้ครั้งละหลายๆไฟล์ และหลายๆโฟลเดอร์

โดยสามารถคำหนดคำที่ต้อง Replace ได้หลายๆคำพร้อมๆกัน ...สุดยอดมาก..

วิธีการใช้

1.กำหนดคำที่ต้อง Replace (แทนที่)  -อย่าลืมสร้างกลุ่มและตั้งชื่อก่อนเสมอ กดปุ่ม Add Group


2.กำหนด property ของกลุ่ม(รายละเอียดของไฟล์ต่างๆที่ต้องการแทนที่ และกำหนดปลานทางที่ต้องการจัดเก็บ)



3.กดปุ่ม Start Replace
       

หมายเหตุ : -การกำหนดค่าของคำที่กำหนดเพื่อReplace จะบันทึกเป็นไฟล์ได้
                   -ค่าที่กำหนด property ของกลุ่ม จะบันทึกเป็นไฟล์ไม่ได้


CR : https://www.raymond.cc/blog/search-a-particular-word-in-multiple-editable-text-files/




วันเสาร์ที่ 26 มีนาคม พ.ศ. 2565

VB CABLE Virtual Audio ถอดเสียงจากคลิป MP3

 

VB CABLE Virtual Audio ถอดเสียงจากคลิป MP3 งานประชุม อบรมเป็นข้อความเวิร์ดเพื่อเขียนรายงานการประชุม หรือเปิดเสียงจาก Youtube ลองทำแล้ว work มาก

หมายเหตุ : ต้องเลือกภาษา ใน Google Doc(MicroPhone) ให้ตรงกับเสียงที่อยู่ในคลิป




วันศุกร์ที่ 17 กันยายน พ.ศ. 2564

Trick การใช้ Bootstrap 5

 


จัดobjectให้อยู่ตรงกลาง


<div class="row justify-content-md-center" >                     
   <div class="col-md-auto" style=background-color:lightgray;>
       <h1>Adisak</h1>
   </div>
</div>

วันอังคารที่ 14 กันยายน พ.ศ. 2564

Javascript ทำ Login อย่างง่าย

 



<!-- Sweetalert2 -->
<script src="sweetalert2.all.min.js"></script>
<script>
  function myLogin(){ 
   Swal.fire({
        title: "Password required",
        text: "Please input correct password:",
        input: 'text',
        showCancelButton: true        
    }).then((result) => {
        if (result.value!='123') {
            Swal.fire({
              title: 'Wrong password..',
              text: "Use another passw is not : "+result.value,
              type: 'success',
                }).then(function (result) {
                if (true) {
                    location.reload();
                }
            })
        }else{
            return true
        }
    });
  }
  window.onload = myLogin;  // use or not-use
</script>

<!-- ORIGINAL Style -->
<script>
  function myLogin(){ 
    var password = prompt("Please enter your password", "");
    if (password == '2114') {
        return true
    }else{
        alert('Wrong password !')
        location.href = "mbook_generator.php"
        return false
    }
 }
 window.onload = myLogin;
</script>

วันจันทร์ที่ 13 กันยายน พ.ศ. 2564

การครอบ html tag บนข้อความเดิม

 


การครอบ html tag บนข้อความเดิม หรือ  how to quickly wrap text with HTML tags in Visual Studio

ด้วยวิธีติดตั้ง extenssion ชื่อ htmltagwrap

Link

     https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

Installation Options

Option 1. Search for htmltagwrap in VS Code extensions tab and install it.

Option 2. Go to the marketplace link mentioned above and click on install, it will prompt you to open it with VS Code and once you do that it'll be installed.

Usage

Select one or more blocks of text or strings of text.

Press Alt + W or Option + W for Mac.

Type the tag name you want.


หมายเหตุ : 

    ครั้งแรกที่กด Alt + W จะมาครอบด้วย tag <p>

    แล้วสามารถพิมพ์ทับด้วย tag ที่ต้องการได้เลย....work!!..สุดๆ

Zen Code ด้วย Emmet ใน VSCODE

 


ref : https://docs.emmet.io/cheat-sheet/

ตัวอย่างการเขียน zen coding ด้วย emmet ใน vscode  ที่จะทำให้การเขียนโปรแกรมได้เร็วขึ้นมาก


h2{Helloworld}

ผลลัพธ์

            <h2>Helloworld<h2>

             remark: {}คือใส่ข้อความ 

 

tabale>tr>td

ผลลัพธ์

            <table>

                <tr>

                    <td></td>

                </tr>

            </table>

        remark: > คือ ส่วนลูก chield

tabale>tr>td*3

ผลลัพธ์

           <table>

                <tr>

                    <td></td>

                    <td></td>

                    <td></td>

                </tr>

            </table>

      remark: * คือ ส่วนที่ทำซ้ำๆ 

  

table>tr*3>td*2

ผลลัพธ์

           <table>

                <tr>

                    <td></td>

                    <td></td>

                </tr>

                <tr>

                    <td></td>

                    <td></td>

                </tr>

                <tr>

                    <td></td>

                    <td></td>

                </tr>

            </table>

div.main

ผลลัพธ์

       <div class="main"></div>    remark: . คือ class 

   

div#main

ผลลัพธ์

       <div id="main"></div>     remark: # คือ id

   

ปล.:Snippets ending with + not work

วันศุกร์ที่ 10 กันยายน พ.ศ. 2564

Express ไม่ต้องติดตั้ง Body Parser แล้ว

 


You might not need to install the additional body-parser package to your application if you are using Express 4.16+. There are many tutorials that include the installation of body-parser because they are dated prior to the release of Express 4.16. (on 2018)

วันอาทิตย์ที่ 29 สิงหาคม พ.ศ. 2564

สร้าง CRUD ด้วย Node และ MongoDB

 


การเขียนโปรแกรมจัดการฐานข้อมูล CRUD สมัยใหม่นิยมแบ่งลักษณะของการเขียนเป็น Front-End และ Back-End แยกกัน โดยเรียกผ่านทาง API ซึ่งที่ทำให้การเขียนโปรแกรมสามารถทำได้สะดวกยิ่งขึ้นมาก และยังสามารถนำมาใช้ร่วมกับ Webserver ที่มีการใช้ในปัจจุบัน

Download หนังสือ


วันอังคารที่ 3 สิงหาคม พ.ศ. 2564

MySQL to PostgreSQL Convert

 


                       การ convert ข้อมูลจาก Mysql เข้าใน PostgreSQL จะมีปัญหาเรื่องการ set ค่า Default ของฟิวด์ที่เป็น Date ซึ่ง Postgres จะรับค่า Default Date (กรณีไม่กรอกค่าDate) ต้องเป็นค่า NULL เท่านั้น(แต่ใน Mysql จะเป็นค่า '0000-00-00' เว้นแต่ต้องระบุที่ field ว่าเป็นค่า NULL เท่านั้น)

วิธีแก้ ดังนี้

1.ต้องระบุที่ field date ว่า default เป็น NULL (ติ๊กที่ null ในแก้ไขฟิวด์ของ phpmyadmin)

2.Run คำสั่ง SQL ของทุกฟิวด์ที่เป็น Date ดังนี้ เช่น

     UPDATE qa_self_t8 SET vac_date=NULL WHERE vac_date='0000-00-00'

3.แล้วค่อย export เป็น CSV (ไม่ใช่ CSV for MS Excel)

4.import ด้วย HeidiSQL ดังนี้


ปล.  อย่าลืมสร้างตารางใน PostgreSQL รอก่อน โดยใช้บริการแปลง SQL จาก http://www.sqlines.com/online




วันพฤหัสบดีที่ 29 กรกฎาคม พ.ศ. 2564

วิธี Backup ข้อมูลขนาดใหญ่ จาก Mysql


 วิธี Backup ข้อมูลขนาดใหญ่ จาก Mysql

1.Run script ของ mysqldumper จากServer

2.Download ไฟล์ที่ได้จากข้อ (1)

3.แตก zip ให้เป็น .sql

4.ใช้โปรแกรม HeidiSQL

5.นำเข้า Mysql ใน PC ด้วยคำสั่ง File->Run SQL File


ตัวอย่าCode PHP MongoDB

 


//read all data
//$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$mng = new MongoDB\Driver\Manager("mongodb://root:testtest@localhost:27017");
$query = new MongoDB\Driver\Query([]); 
$rows = $mng->executeQuery("q_alert_db.qa_sys_user", $query);
foreach ($rows as $man) {
 echo "$man->fname  $man->lname<br>";
}


//read with sort and limit 5
//$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$mng = new MongoDB\Driver\Manager("mongodb://root:testtest@localhost:27017");
$query = new MongoDB\Driver\Query([], ['sort' => [ 'fname' => 1], 'limit' => 5]);  
/* 'sort' => [ 'fname' => -1]  */ 
$rows = $mng->executeQuery("q_alert_db.qa_sys_user", $query);
foreach ($rows as $man) {
    echo "$man->fname  $man->lname<br>";
}


//filter and wilde card
//$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$mng = new MongoDB\Driver\Manager("mongodb://root:testtest@localhost:27017");
$filter = [ 'office_id' => array('$regex' => '12')]; 
$options = ['projection' => ['_id' => 0],'sort' => ['office_id' => -1]]; 
$query = new MongoDB\Driver\Query($filter, $options);     
$res = $mng->executeQuery('q_alert_db.qa_sys_user', $query);
$c=1;
foreach ($res as $man) {
    if(substr($man->office_id,0,2)=='12'){ //แก้ปัญหา ที่จะแสดงทุกค่าที่มี 12
        echo "$c $man->fname  $man->lname $man->office_id<br>";
        $c++;
    }
}


//insert or write data
//$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$mng = new MongoDB\Driver\Manager("mongodb://root:testtest@localhost:27017");
$bulk = new MongoDB\Driver\BulkWrite;
$doc = ['_id' => new MongoDB\BSON\ObjectID, 
        'username' => 'Toyota', 
        'password' => 'aaa',
        'login_type' =>'1',
        'login_status' =>'1'
    ];
$bulk->insert($doc);
/*
$bulk->update(['name' => 'Audi'], ['$set' => ['price' => 52000]]);
$bulk->delete(['name' => 'Hummer']);
*/
$mng->executeBulkWrite('q_alert_db.qa_sys_user', $bulk);
echo "Insert Data Already\n";