คอมพิวเตอร์และอินเตอร์เน็ต,บรรยายวิชาการ,วิจัย,ศึกษากุรอาน,E-Book
- คอมพิวเตอร์และอินเตอร์เน็ต
- บรรยายวิชาการ
- วิจัย
- ศึกษากุรอาน
- B4A
- E-Book
- vue.js
วันศุกร์ที่ 8 มีนาคม พ.ศ. 2567
การส่งบันทึกข้อมูลด้วย API
วันอังคารที่ 27 กุมภาพันธ์ พ.ศ. 2567
ApexCharts.js ง่ายสุด
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
ได้ลองประยุกต์ใช้แล้วใน LabLink ทำงานได้ดีมาก
การ Copy to Clipboard
ตัวอย่างการ Copy to Clipboard
JS:
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:
$txttocopy="http://223.27.246.236/q-alert/".$filename;
?>
<a href="" onclick="copytoclipboard('<?=$txttocopy;?>');return false;" >
<input id="cb" type="text" hidden>
วันอาทิตย์ที่ 27 มีนาคม พ.ศ. 2565
แก้ไขคำหรือCode ด้วย Replace Text
โดยสามารถคำหนดคำที่ต้อง Replace ได้หลายๆคำพร้อมๆกัน ...สุดยอดมาก..
วิธีการใช้
1.กำหนดคำที่ต้อง Replace (แทนที่) -อย่าลืมสร้างกลุ่มและตั้งชื่อก่อนเสมอ กดปุ่ม Add Group
วันเสาร์ที่ 26 มีนาคม พ.ศ. 2565
VB CABLE Virtual Audio ถอดเสียงจากคลิป MP3
VB CABLE Virtual Audio ถอดเสียงจากคลิป MP3 งานประชุม อบรมเป็นข้อความเวิร์ดเพื่อเขียนรายงานการประชุม หรือเปิดเสียงจาก Youtube ลองทำแล้ว work มาก
หมายเหตุ : ต้องเลือกภาษา ใน Google Doc(MicroPhone) ให้ตรงกับเสียงที่อยู่ในคลิป
วันอาทิตย์ที่ 6 มีนาคม พ.ศ. 2565
วันศุกร์ที่ 24 ธันวาคม พ.ศ. 2564
วันศุกร์ที่ 17 กันยายน พ.ศ. 2564
Trick การใช้ Bootstrap 5
จัดobjectให้อยู่ตรงกลาง
วันอังคารที่ 14 กันยายน พ.ศ. 2564
Javascript ทำ Login อย่างง่าย
วันจันทร์ที่ 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)
วันพฤหัสบดีที่ 9 กันยายน พ.ศ. 2564
วันอาทิตย์ที่ 29 สิงหาคม พ.ศ. 2564
สร้าง CRUD ด้วย Node และ MongoDB
การเขียนโปรแกรมจัดการฐานข้อมูล CRUD สมัยใหม่นิยมแบ่งลักษณะของการเขียนเป็น Front-End และ Back-End แยกกัน โดยเรียกผ่านทาง API ซึ่งที่ทำให้การเขียนโปรแกรมสามารถทำได้สะดวกยิ่งขึ้นมาก และยังสามารถนำมาใช้ร่วมกับ Webserver ที่มีการใช้ในปัจจุบัน
วันอังคารที่ 3 สิงหาคม พ.ศ. 2564
MySQL to PostgreSQL Convert
วิธีแก้ ดังนี้
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 ดังนี้
วันพฤหัสบดีที่ 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





















