ประสบการณ์ & ความชำนาญ

วันพฤหัสบดีที่ 21 มีนาคม พ.ศ. 2567

การนำข้อมูล JSON จาก API มาใช้งาน

โดยทั่วไป API Endpoint จะ Response ข้อมูลออกมาใน Format เป็น JSON มาผ่านทางหน้าจอของ Browser หรือสามารถดูได้จากการใช้งาน Postman ซึ่งจะมี 2 รูปแบบ

ref : https://www.w3schools.com/whatis/whatis_json.asp

1.JSON Objects -ข้อสังเกตุ : ไม่มี [ ] ครอบข้อมูล

SON objects are written inside curly braces. Just like in JavaScript, objects can contain multiple name/value pairs:

{"firstName":"John", "lastName":"Doe"}

2.JSON Arrays -ข้อสังเกตุ : มี [ ] ครอบข้อมูล

JSON arrays are written inside square brackets. Just like in JavaScript, an array can contain objects:

"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]

Remark : use the JavaScript built-in function JSON.parse() to convert the string into a JavaScript object

ฉะนั้นการจพนำข้อมูลมาใช้งาน ต้องรู้ก่อนว่า Response มาใน Format ใด แล้วจึงจะสามารถเรียกใช้ได้ ดังเช่นตัวอย่างต่อไปนี้

1.กรณีที่ endpoint ส่ง response มาเป็น JSON Objects

const res = fetch(mlink);

const json = res.json();

console.log(json);

2.กรณีที่ endpoint ส่ง response มาเป็น JSON Arrays

const res = fetch(mlink);

const arrData = await res.json(); //ค่าที่รับเป็น array

const json = Object.assign({}, arrData[0]); //convert array to object

// arrData[0] เป็นตำแน่งที่อยู่ของข้อมูล

console.log(json);

หมายเหตุ : กรณีใช้ axios ก็เช่นเดียวกัน แต่จะสะดวกกว่า

ตัวอย่างของ Endpoint

if($rowcount>0){

while ($row = mysqli_fetch_assoc($result)) {

//$response = $row; //เตรียมส่งค่า response เป็น JSON Objects

$response[] = $row; //เตรียมส่งค่า response เป็น JSON Arrays

}

}else{

//$response['code'] = '400'; //เตรียมส่งค่า response เป็น JSON Objects

//$response['status'] = 'NOT FOUND'; //เตรียมส่งค่า response เป็น JSON Objects

$response[]=array('code'=>'400','status'=>'NOT FOUND'); //response JSON Arrays

}

echo json_encode($response, JSON_UNESCAPED_UNICODE); //แสดงข้อมูลเป็นภาษาไทย

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

การติดตั้งEmulator ใช้ LDPlayer สำหรับ B4A

การติดตั้งEmulator ใช้ LDPlayer สำหรับ B4A ทำงานได้อย่างรวดเร็วและ Realtime ขณะ Dev

มีขั้นตอนดังนี้

1.download LDPlayer

2.ตั้งค่า

-กำหนด device ที่ต้องการ/ขนาดจอที่ต้องการ (setting->การตั้วค่าชั้นสูง)

-กำหนด การตั้งค่าอื่นๆ->การดีบัก ADB (ให้เลือก 'เปิดการเชื่อมต่อ')

หมายเหตุ : เวลาใช้งานใน B4A คลิกที่ปุ่ม Run ได้เลย

Remark : TodayTips

-work มากเลย ทำ browser.apk ได้ขนาด 125 kb

-เปลี่ยน icon ได้จากเมนู project ขนาดภาพ .png เป็น 128x128

-Mode: Release จะสร้าง .apk / Mode: Debug ไว้ทดสอบกับ Emulator

-LDPlayer หลังจากset ค่าแล้ว จะใช้งานได้ทันที(ต้องเปิดรอ ไม่เปิด App B4ABridge)

-กรณีการเรียกใช้ WebView สามารถปิด ZoomEnabled ได้จาก propertiy ใน Designer

-กรณีการเรียกใช้ WebView แล้วเปิด web ที่ไม่มี SSL เช่น http:// (มิใช่ https://)

ต้องกำหนดค่า SetApplicationAttribute(android:usesCleartextTraffic, "true")

ใน Project Manifest ทุกครั้ง

คลิปตัวอย่างการใช้งาน

https://www.youtube.com/watch?v=9mGd0DIa_yU

Android App : iTarawih

วันศุกร์ที่ 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']);

}

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

Vue in Practicale Tutorial

สรุปขั้นตอนการใช้งาน vue.js ในแบบ SPA

1.เรียกใช้ vue.js (และอื่นๆเช่น Bootstrap และ Axios และ Font-awesom) ในส่วน <head></head>

2.กำหนดตำแน่งสำหรับการแสดงผลใน HTML (ไว้ใน <body></body>)

</div>

3.เขียน Sccript (ไว้ด้านล่างสุด ของ <body></body>)

new Vue({

el: '#app',

data () {

return {

info: null,

todayDate: new Date().toLocaleDateString()

}

methods: {

numberFormat(number) {

var number = parseInt(number) //conver to int

return number.toLocaleString()

fixTwoDigit(number){

var amount=parseFloat(number).toFixed(2)

var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

return formattedString

}

mounted () {

const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'

axios.get(targetURL)

.then(response => (this.info = response.data))

.then(response => (console.log(response)))

}

})

</script>

คำอธิบาย Script แต่ละส่วน option ของ vue (จะต้องวางเรียงกันตามลำดับ จะสลับกันไม่ได้)

1. data(){ } เป็นส่วนของการกำหนดข้อมูลทุกชนิดที่ตองการใช้ทั้งหมด

2. methods: { } เป็นส่วนที่ใช้ในการกำหนด function ต่างๆ ที่ต้องการใช้ทั้งหมด

3. mounted() { } เป็นส่วนที่ทำการแสดงผลเข้าใน Html ตามที่ระบุ id (id="app")

โดยส่วนนี้จะสามารถกำหนด activity ที่ต้องการกระทำทันทีได้ด้วย

เช่น การเรียกใช้ api ด้วย axios ตามตัวอย่าง เป็นต้น

*** methods: { } จะไม่มีวงเล็บ () ***ข้างในไม่ต้องระบุคำว่า function

ตัวอย่างFull

<!DOCTYPE html>

<head>

<title>COVID-19</title>

</head>

COVID19-Weekly<sup>©</sup></a>

</button>

</div>

</div>

</nav>

<br>

<h3>รายงานสถานการณ์ COVID-19 ประจำสัปดาห์</h3>

<tbody>

<tr>

<td><b>ลำดับ </b></td>

<td><b>สัปดาห์ </b></td>

<td><b>จังหวัด</b></td>

<td><b>รายใหม่</b></td>

<td><b>รวมทั้งหมด</b></td>

<td><b>ตายใหม่</b></td>

<td><b>ตายรวม</b></td>

<td><b>วันที่รายงาน</b></td>

</tr>

<td v-if="row.province !='ทั้งประเทศ'">{{ index+1 }}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.weeknum}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.province}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.new_death}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.total_death}}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td>

<td v-if="row.province !='ทั้งประเทศ'">{{row.update_date}}</td>

</tr>

<td v-if="row.province =='ทั้งประเทศ'">{{row.weeknum}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.province}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.new_death}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.total_death}}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td>

<td v-if="row.province =='ทั้งประเทศ'">{{row.update_date}}</td>

</tr>

</tbody>

</table>

</div>

</center>

</div>

<br>

</center></font>

</div>

</footer>

</div>

new Vue({

el: '#app',

data () {

return {

info: null,

todayDate: new Date().toLocaleDateString()

}

methods: {

numberFormat(number) {

var number = parseInt(number) //conver to int

return number.toLocaleString()

fixTwoDigit(number){

var amount=parseFloat(number).toFixed(2)

var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")

return formattedString

}

mounted () {

const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'

axios.get(targetURL)

.then(response => (this.info = response.data))

.then(response => (console.log(response)))

}

})

</script>

</body>

</html>

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

ApexCharts.js ง่ายสุด

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

ดังนี้

1.กำหนด library path

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

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

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

เช่น

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/

ตย.

<head>

<title>Axios Example </title>

<style>

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

</style>

</head>

<body>

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>

วันจันทร์ที่ 26 กุมภาพันธ์ พ.ศ. 2567

การเขียนเอกสารประกอบ API

การเขียนเอกสารประกอบ API (Application Programing Interface) สำหรับให้ผู้อื่นได้เข้าถึงข้อมูล อย่างมีประสิทธิภาพและปลอดภัย จะต้องเขียนให้ครอบคลุมประเด็นหัวข้อ 5 หัวข้อ ดังนี้

1.URL สำหรับขอ Request

ตำแหน่งของ URL endpoint ของ API

2.Method สำหรับการเรียกใช้ API

จะต้องใช้งานผ่าน HTTP Request ซึ่ง HTTP Request นั้นเป็นการส่งข้อคำขอเพื่อร้องขอข้อมูลกับทางผู้ให้บริการ เช่น การเข้าเว็ปไซต์ต่างๆจะเป็นการส่งคำขอเพื่อรับหน้าเว็ปมาแสดงผล โดย HTTP Request จะต้องระบุ method ที่ใช้งานโดยจากข้อที่แล้ว methed ที่ api กำหนดก็คือ GET

3.Parameter ที่ต้องใช้

parameter เป็นข้อมูลที่ผู้ให้บริการต้องการใช้ เพื่อการใช้งาน api ตามปกติแล้วจะเป็นการเจาะจงข้อมูลที่ต้องการ เช่น เป็นข้อมูลของวันที่เท่าไหร่ หรือเป็นการใส่ api-key ที่เป็นการกำหนดว่าคนร้องขอเป็นใคร โดยส่วนมากจะต้องสมัครสมาชิกเพื่อรับ api-key ซึ่งจะไม่ซ้ำกับคนอื่น

4.Respond ที่ตอบกลับมา

เมื่อกดส่งก็จะได้ข้อมูลลักษณะที่เป็นข้อมูลประเภทJSON (รูปแบบข้อมูล String ที่ใช้กันในการส่งข้อมูล) ซึ่งข้อมูลนี้คือผลลัพธ์ที่ทางผู้ให้บริการตอบกลับมาจากข้อมูลทั้งหมดที่ได้ร้องขอ หลังจากนี้คือหน้าที่ของผู้ร้องขอ ว่าจะเอาข้อมูลส่วนไหนไปทำอะไร

5.ข้อกำหนดและข้อตกลง

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

ดูตัวอย่าง

CR: https://www.borntodev.com/c/webdeveloper/%E0%B8%88%E0%B8%B0%E0%B9%83%E0%B8%8A%E0%B9%89-api-%E0%B8%8A%E0%B8%B2%E0%B8%A7%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%95%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%94%E0%B8%B9%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3%E0%B8%9A%E0%B9%89%E0%B8%B2%E0%B8%87-5fa4fe4b04367

วันอาทิตย์ที่ 25 กุมภาพันธ์ พ.ศ. 2567

พื้นฐาน Vue.js Study Link Resources

BASCI VUE3

https://www.mindphp.com/developer/20-javascript/9721-getting-started-with-vue-js.html

REST API

https://www.youtube.com/watch?v=JmwgD3UOsHA

CODE SNIPPED

https://fontawesomeicons.com/fa/vue-js-post-form-data-to-api-using-axios

ROUTE

https://shouts.dev/articles/vuejs-3-routing-from-scratch-using-cdn-without-cli

CRUD -PHP & MYSQL [API with Axios]

https://github.com/rudSarkar/php-mysql-vue

Multiple Endpoint [API with Axios]

https://blog.logrocket.com/using-axios-all-make-concurrent-requests

ตย.

<head>

</head>

<body>

<p>Date : {{todayDate}}</p>

<thead><tr><th>No</th><th>Office</th><th>T1</th></tr></thead>

<tbody>

<td>{{index+1}}</td>

</tr>

</tbody>

</table>

<br>

<thead><tr><th>No</th><th>Office</th><th>C19</th><th>YLF</th></tr></thead>

<tbody>

<td>{{index+1}}</td>

</tr>

</tbody>

</table>

</div>

new Vue({

el: '#app',

data () {

return {

vsan:null,

qalert:null,

todayDate: new Date().toLocaleDateString(),

}

mounted () {

let endpoints = [

'http://223.27.246.234/poe12-opendata/vsan_t1.php',

'http://223.27.246.234/poe12-opendata/qalert.php'

];

axios.all(endpoints.map((endpoint) => axios.get(endpoint)))

.then(

axios.spread(({data: vsan}, {data: qalert}) => {

this.vsan = vsan

this.qalert = qalert

console.log({ vsan, qalert });

})

);

}

})

</script>

</body>

</html>

Vue.js & Axios.js Best Practis

ครั้งแรกเริ่มทำด้วย vue.js และ Axios.js

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>{{today}}</p> <p>{{formattedDate}}</p>

<br>

<p>บัตร ปชช. {{info.person_results[0].citizen_no}}</p>

<p>ชื่อ-สกุล {{info.person_results[0].pre_name}} {{info.person_results[0].f_name}}  {{info.person_results[0].l_name}}

<p>วดป.เกิด {{info.person_results[0].birth_date}}</p>

<p>ที่อยู่ปัจจุบัน {{info.person_results[0].present_address}}</p>

ประวัติการได้รับวัคซีน

<tr><td>No.</td><td>Vaccine Name</td><td>Date</td><td>Service place</td></tr>

<td>{{index+1}}</td>

<td>{{rowvac.vacc_disease }}</td>

<td>{{rowvac.vacc_date }}</td>

<td>{{rowvac.authorize_workplace_name }}</td>

</tr>

</table>

</div>

new Vue({

el: '#app',

data () {

return {

today: new Date().toLocaleDateString(),

info: null,

date: new Date()

}

mounted () {

const targetURL ='http://223.27.246.234/hujat-info/vaccination/api_intervac.php?p=3960400280121'

axios.get(targetURL)

.then(response => (this.info = response.data))

.then(response =>console.log(response))

computed: {

formattedDate() {

const day = this.date.getDate().toString().padStart(2, "0");

const month = (this.date.getMonth() + 1)

.toString()

.padStart(2, "0");

const year = this.date.getFullYear().toString();

const th_year = this.date.getFullYear()+543;

return `${day}/${month}/${th_year}`;

}

})

</script>

</body>

</html>

หมายเหตุ

-การดึง API จาก enpoint ที่ติดปัญหาเรื่อง CORS

ให้แก้ด้วยการดึงด้วย PHP (ใช้ CURL) แล้วให้ส่งค่า Response เพื่อให้ Axios ดึงมาอีกที

(เพราะ PHP เป็น Server side Rendering อยู่แล้ว ไม่มีปัญหาเรื่อง CORS)

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

PHP Mobile Detection

<?php //detect a mobile device in PHP

// Create the function, so you can use it

function isMobile() {

$_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

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

$.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

<?php

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

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>

วันพุธที่ 21 กันยายน พ.ศ. 2565

คู่มือชาวด่านควบคุมโรคติดต่อระหว่างประเทศ

เอกสารคู่มือที่จำเป็นสำหรับใช้ในการปฏิบัติงาน ณ ด่านควบคุมโรคติดต่อระหว่างประเทศ

ประกอบด่วย

ก.เอกสารหลัก

1.กฏอนามัยระหว่างประเทศ 2548(IHR-2005)

2.Core Capacity Assesment Tool(CCAT)

ข.เอกสารอื่นๆ

-คำสั่งเจ้าพนักงานควบคุมโรค ฉ.3

-เจ้าพนักงานตามประมวลกฏหมายอาญา

ค.อื่นๆ

-Slide CCAT

-สรุป CCAT

-Slide พรบ.85

-ตย.หนังสือราชการภาษาอังกฤษ

-ตย.แบบส่ง ผป. ไทย-มาเลย์

หมายเตุ

Poster จัดเสวนา

POE-Thai-Malaysia

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

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

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

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

การ Copy to Clipboard

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

JS:

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>

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

วันพฤหัสบดีที่ 21 มีนาคม พ.ศ. 2567

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

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

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

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

วันจันทร์ที่ 26 กุมภาพันธ์ พ.ศ. 2567

วันอาทิตย์ที่ 25 กุมภาพันธ์ พ.ศ. 2567

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

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

วันพุธที่ 21 กันยายน พ.ศ. 2565

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