tag:blogger.com,1999:blog-41288239960854639962024-03-10T22:16:33.798-07:00ประสบการณ์ & ความชำนาญบริการให้คำปรึกษาทางวิชาการและการประยุกต์ใช้คอมพิวเตอร์ในการทำงานอดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.comBlogger211125tag:blogger.com,1999:blog-4128823996085463996.post-71848513050111973912024-03-09T17:09:00.000-08:002024-03-10T18:00:39.312-07:00การติดตั้งEmulator ใช้ LDPlayer สำหรับ B4A<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://play-lh.googleusercontent.com/r9U9uoXnRLUlWuLUuEqiuyje0ZWUBncYMHMQ2NTv7A2RqTodP5Xwy7QtJPMmybZUjFA=s512" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="200" src="https://play-lh.googleusercontent.com/r9U9uoXnRLUlWuLUuEqiuyje0ZWUBncYMHMQ2NTv7A2RqTodP5Xwy7QtJPMmybZUjFA=w200-h200" width="200" /></a></div><div class="separator" style="clear: both; text-align: left;">การติดตั้งEmulator ใช้ LDPlayer สำหรับ B4A ทำงานได้อย่างรวดเร็วและ Realtime ขณะ Dev</div><div class="separator" style="clear: both; text-align: left;">มีขั้นตอนดังนี้</div><div class="separator" style="clear: both; text-align: left;">1.download LDPlayer</div><div class="separator" style="clear: both; text-align: left;">2.ตั้งค่า</div><div class="separator" style="clear: both; text-align: left;"> -กำหนด device ที่ต้องการ/ขนาดจอที่ต้องการ (setting->การตั้วค่าชั้นสูง)</div><div class="separator" style="clear: both; text-align: left;"> -กำหนด การตั้งค่าอื่นๆ->การดีบัก ADB (ให้เลือก 'เปิดการเชื่อมต่อ')</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>หมายเหตุ :</b> เวลาใช้งานใน B4A คลิกที่ปุ่ม Run ได้เลย</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b><span style="color: red;">Remark : TodayTips</span></b></div><div class="separator" style="clear: both; text-align: left;"> -work มากเลย ทำ browser.apk ได้ขนาด 125 kb</div><div class="separator" style="clear: both; text-align: left;"> -เปลี่ยน icon ได้จากเมนู project ขนาดภาพ .png เป็น 128x128</div><div class="separator" style="clear: both; text-align: left;"> -Mode: Release จะสร้าง .apk / Mode: Debug ไว้ทดสอบกับ Emulator</div><div class="separator" style="clear: both; text-align: left;"> -LDPlayer หลังจากset ค่าแล้ว จะใช้งานได้ทันที(ต้องเปิดรอ ไม่เปิด App B4ABridge)</div><div class="separator" style="clear: both; text-align: left;"> -กรณีการเรียกใช้ WebView สามารถปิด ZoomEnabled ได้จาก propertiy ใน Designer</div><div class="separator" style="clear: both; text-align: left;"> -กรณีการเรียกใช้ WebView แล้วเปิด web ที่ไม่มี SSL เช่น http:// (มิใช่ https://)</div><div class="separator" style="clear: both; text-align: left;"> ต้องกำหนดค่า <span style="background-color: #fefefe; color: #141414; font-family: inherit; font-size: 1em; white-space: inherit;">SetApplicationAttribute(android:usesCleartextTraffic, </span><span class="prism-token prism-string" style="background-color: #fefefe; box-sizing: border-box; color: #aa1111; font-family: inherit; font-size: 1em; white-space: inherit;">"true"</span><span style="background-color: #fefefe; color: #141414; font-family: inherit; font-size: 1em; white-space: inherit;">)</span></div><div class="separator" style="clear: both; text-align: left;"><span style="background-color: #fefefe; color: #141414; font-family: inherit; font-size: 1em; white-space: inherit;"> ใน Project Manifest ทุกครั้ง</span></div><div class="separator" style="clear: both; text-align: left;"><span style="background-color: #fefefe; color: #141414; font-family: inherit; font-size: 1em; white-space: inherit;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyII_IXkG02dKi3fV0hf1mMjJOEE6Mgj_TTGKq1JOMx4Tsh4oYzYA_DKvVF3SA7_zRf5XUjytEEPZ21ys6KC46KIb6b8DHXxn3niNAX0-xRila3VoRszwvopBXMNCn73oCY4VwISpanOQqb8ZTSS4tzPwNTI5N-P4cZG2c5vXJCIOKeP0r-4hwpiiXUU/s820/Screenshot%202024-03-11%20074801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="506" data-original-width="820" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyII_IXkG02dKi3fV0hf1mMjJOEE6Mgj_TTGKq1JOMx4Tsh4oYzYA_DKvVF3SA7_zRf5XUjytEEPZ21ys6KC46KIb6b8DHXxn3niNAX0-xRila3VoRszwvopBXMNCn73oCY4VwISpanOQqb8ZTSS4tzPwNTI5N-P4cZG2c5vXJCIOKeP0r-4hwpiiXUU/w318-h196/Screenshot%202024-03-11%20074801.png" width="318" /></a></div><br /><span style="background-color: #fefefe; color: #141414; font-family: inherit; font-size: 1em; white-space: inherit;"><br /></span></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>คลิปตัวอย่างการใช้งาน</b></div><div class="separator" style="clear: both; text-align: left;"><a href="https://www.youtube.com/watch?v=9mGd0DIa_yU">https://www.youtube.com/watch?v=9mGd0DIa_yU</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>Android App :</b> <a href="https://drive.google.com/file/d/1wE5DP1fD9JgRW7Wysx_qixjaYHZmT9tY/view?usp=sharing" target="_blank">iTarawih</a></div><br /><p></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-38801408067040447572024-03-08T16:45:00.000-08:002024-03-08T16:45:35.366-08:00การส่งบันทึกข้อมูลด้วย API<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://cdn-icons-png.flaticon.com/512/2164/2164832.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="512" data-original-width="512" height="200" src="https://cdn-icons-png.flaticon.com/512/2164/2164832.png" width="200" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">การส่งบันทึกข้อมูลด้วย API ใน PHP</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b><span style="color: red; font-size: medium;">Sender</span></b></div><p></p><div class="separator" style="clear: both;">$data = array('title' => $title_value,</div><div class="separator" style="clear: both;"><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>'author' => $author_value, </span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>'published_at' => $published_value</span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>);</span></div><div class="separator" style="clear: both;">$data_json = json_encode($data); // Data should be passed as json format</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">// API URL to send data</div><div class="separator" style="clear: both;">$url = 'http://209.15.98.146/apps/adi_test/test/api_add_data.php';</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">$ch = curl_init(); // curl initiate</div><div class="separator" style="clear: both;">curl_setopt($ch, CURLOPT_URL, $url);</div><div class="separator" style="clear: both;">curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));</div><div class="separator" style="clear: both;">curl_setopt($ch, CURLOPT_POST, 1); // SET Method as a POST</div><div class="separator" style="clear: both;">curl_setopt($ch, CURLOPT_POSTFIELDS,$data_json); // Pass data in POST command</div><div class="separator" style="clear: both;">curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);</div><div class="separator" style="clear: both;">$response = curl_exec($ch); // Execute curl and assign returned data</div><div class="separator" style="clear: both;">curl_close($ch); // Close curl</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;"><b><span style="color: red; font-size: medium;">Endpoint</span></b></div><div class="separator" style="clear: both;">header("Access-Control-Allow-Origin: *");</div><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">header("Content-Type: application/json; charset=UTF-8"); // Set the content type to JSON</div><div class="separator" style="clear: both;">header("Access-Control-Allow-Methods: OPTIONS,GET,POST,PUT,DELETE");</div><div class="separator" style="clear: both;">header("Access-Control-Max-Age: 3600");</div><div class="separator" style="clear: both;">header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");</div><div class="separator" style="clear: both;">$method = $_SERVER['REQUEST_METHOD']; // Handle HTTP methods</div><div class="separator" style="clear: both;">if($method=='POST'){</div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>$data = json_decode(file_get_contents('php://input'), true);</span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>$title = $data['title'];</span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>$author = $data['author'];</span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>$published_at = $data['published_at'];</span></div><div class="separator" style="clear: both;"><span style="white-space: normal; white-space: pre;"> </span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>$stmt = $pdo->prepare('INSERT INTO books (title, author, published_at) VALUES (?, ?, ?)');</span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>$stmt->execute([$title, $author, $published_at]);</span></div><div class="separator" style="clear: both;"><span style="white-space: normal; white-space: pre;"> </span></div><div class="separator" style="clear: both;"><span style="white-space: normal;"><span style="white-space: pre;"> </span>echo json_encode(['message' => 'Book added successfully']);</span></div><div class="separator" style="clear: both;"><span style="white-space: normal; white-space: pre;"> </span></div><div class="separator" style="clear: both;">}else{</div><div class="separator" style="clear: both;"> http_response_code(405);</div><div class="separator" style="clear: both;"> echo json_encode(['error' => 'Method not allowed']);</div><div class="separator" style="clear: both;">}</div><div><br /></div></div><div class="separator" style="clear: both;"><br /></div></div><p><br /></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-44399518404842861932024-03-07T19:32:00.000-08:002024-03-10T22:15:59.172-07:00Vue in Practicale Tutorial<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://media.geeksforgeeks.org/wp-content/uploads/20240103164616/Vuejs-Tutorial.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="341" data-original-width="800" height="85" src="https://media.geeksforgeeks.org/wp-content/uploads/20240103164616/Vuejs-Tutorial.png" width="200" /></a></div><p><br /></p><span style="color: red;"><b>สรุปขั้นตอนการใช้งาน vue.js ในแบบ SPA</b></span><p></p><p>1.เรียกใช้ vue.js (และอื่นๆเช่น Bootstrap และ Axios และ Font-awesom) ในส่วน <head></head></p><p><span style="color: #2b00fe; font-size: x-small;"><script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></span></p><p><span style="color: #2b00fe; font-size: x-small;"><script src="https://unpkg.com/axios/dist/axios.min.js"></script></span></p><p><span style="color: #2b00fe; font-size: x-small;"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"></span></p><p><span style="color: #2b00fe; font-size: x-small;"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script></span></p><p><span style="color: #2b00fe; font-size: x-small;"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"></span></p><div><br /></div><p>2.กำหนดตำแน่งสำหรับการแสดงผลใน HTML (ไว้ใน <body></body>)</p><p><span style="color: #2b00fe; font-size: x-small;"><div id="app"></span></p><p><span style="color: #2b00fe; font-size: x-small;"><br /></span></p><p><span style="color: #2b00fe; font-size: x-small;"></div></span></p><p><br /></p><p>3.เขียน Sccript (ไว้ด้านล่างสุด ของ <body></body>)</p><p><span style="color: #2b00fe; font-size: x-small;"><script></span></p><p><span style="color: #2b00fe; font-size: x-small;">new Vue({</span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>el: '#app',</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>data () {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>return {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>info: null,</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>todayDate: new Date().toLocaleDateString()</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>}</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>},</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>methods: {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>numberFormat(number) {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"> var number = parseInt(number) //conver to int</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>return number.toLocaleString()</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>},</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>fixTwoDigit(number){</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>var amount=parseFloat(number).toFixed(2)</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>return formattedString</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>}</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>},</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>mounted () {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>axios.get(targetURL)</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>.then(response => (this.info = response.data))</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>.then(response => (console.log(response)))</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>}</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>})</span></span></p><p><span style="color: #2b00fe; font-size: x-small;"></script></span></p><p><br /></p><p><b><span style="color: red;">คำอธิบาย Script แต่ละส่วน option ของ vue </span></b>(จะต้องวางเรียงกันตามลำดับ จะสลับกันไม่ได้)</p><p>1. data(){ } เป็นส่วนของการกำหนดข้อมูลทุกชนิดที่ตองการใช้ทั้งหมด</p><p>2. methods: { } เป็นส่วนที่ใช้ในการกำหนด function ต่างๆ ที่ต้องการใช้ทั้งหมด</p><p>3. mounted() { } เป็นส่วนที่ทำการแสดงผลเข้าใน Html ตามที่ระบุ id (id="app")</p><p> โดยส่วนนี้จะสามารถกำหนด activity ที่ต้องการกระทำทันทีได้ด้วย</p><p> เช่น การเรียกใช้ api ด้วย axios ตามตัวอย่าง เป็นต้น</p><p>*** methods: { } จะไม่มีวงเล็บ () ***ข้างในไม่ต้องระบุคำว่า function</p><p><br /></p><p><b><span style="color: red;">ตัวอย่างFull </span></b></p><p><span style="color: #2b00fe; font-size: x-small;"><!DOCTYPE html></span></p><p><span style="color: #2b00fe; font-size: x-small;"><html lang="en"></span></p><p><span style="color: #2b00fe; font-size: x-small;"><head></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <meta charset="UTF-8"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <title>COVID-19</title></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"></span></p><p><span style="color: #2b00fe; font-size: x-small;"></head></span></p><p><span style="color: #2b00fe; font-size: x-small;"><body style='background-color:#fff8e5'></span></p><p><span style="color: #2b00fe; font-size: x-small;"><nav class="navbar navbar-expand-lg navbar-dark bg-default" style="background-color:#113946"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <div class="container-fluid"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <a href="index.html" class="navbar-brand"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <i class="fa-regular fa-hospital"></i></span></p><p><span style="color: #2b00fe; font-size: x-small;"> COVID19-Weekly<sup>&copy;</sup></a></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <span class="navbar-toggler-icon"></span></span></p><p><span style="color: #2b00fe; font-size: x-small;"> </button></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <div class="collapse navbar-collapse" id="navbarCollapse"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <div class="navbar-nav"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> </div></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <div class="navbar-nav ms-auto"> </span></p><p><span style="color: #2b00fe; font-size: x-small;"> </div></span></p><p><span style="color: #2b00fe; font-size: x-small;"> </div></span></p><p><span style="color: #2b00fe; font-size: x-small;"> </div></span></p><p><span style="color: #2b00fe; font-size: x-small;"></nav></span></p><p><span style="color: #2b00fe; font-size: x-small;"> </span></p><p><span style="color: #2b00fe; font-size: x-small;"><div class="container"></span></p><p><span style="color: #2b00fe; font-size: x-small;"><br></span></p><p><span style="color: #2b00fe; font-size: x-small;"><div class="row" style="text-align:center"></span></p><p><span style="color: #2b00fe; font-size: x-small;"><center> </span></p><p><span style="color: #2b00fe; font-size: x-small;"> <div id="app"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <!-- {{info}} --></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span> <div class="row justify-content-md-center" > </span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><div class="col-md-auto"></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><h3>รายงานสถานการณ์ COVID-19 ประจำสัปดาห์</h3></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><table border="0" class="table table-success table-striped table-bordered border-success"></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><tbody></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><tr> </span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>ลำดับ&nbsp;</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>ปี พ.ศ.&nbsp;</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>สัปดาห์&nbsp;</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>จังหวัด</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>รายใหม่</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>รวมทั้งหมด</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>ตายใหม่</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>ตายรวม</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>%ตาย</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td><b>วันที่รายงาน</b></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span></tr></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><tr v-for="(row, index) in info" > </span></span></p><p><span style="white-space: pre;"><span style="color: #2b00fe; font-size: x-small;"> </span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{ index+1 }}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{row.year}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{row.weeknum}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{row.province}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{row.new_case}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{row.new_death}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{row.total_death}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province !='ทั้งประเทศ'">{{row.update_date}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span></tr></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><tr v-for="row in info" > </span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'"></td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{row.year}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{row.weeknum}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{row.province}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{row.new_case}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{row.new_death}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{row.total_death}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span><td v-if="row.province =='ทั้งประเทศ'">{{row.update_date}}</td></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span></tr></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span></tbody></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span></table> </span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span></div></span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span></div></span></span></p><p><span style="color: #2b00fe; font-size: x-small;"> </div></span></p><p><span style="color: #2b00fe; font-size: x-small;"></center> </span></p><p><span style="color: #2b00fe; font-size: x-small;"></div><!-- row --></span></p><p><span style="color: #2b00fe; font-size: x-small;"><br></span></p><p><span style="color: #2b00fe; font-size: x-small;"><footer></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <div class="row"></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <font size=1 color=gray><center></span></p><p><span style="color: #2b00fe; font-size: x-small;"> <p><i class="fa-regular fa-hospital"></i> COVID19-Weekly<sup>&copy;</sup> &nbsp;&nbsp;by KidmatApps, Copyright 2024 </p></span></p><p><span style="color: #2b00fe; font-size: x-small;"> </center></font> </span></p><p><span style="color: #2b00fe; font-size: x-small;"> </div></span></p><p><span style="color: #2b00fe; font-size: x-small;"></footer></span></p><p><span style="color: #2b00fe; font-size: x-small;"></div><!-- container --></span></p><p><span style="color: #2b00fe; font-size: x-small;"><br /></span></p><p><span style="color: #2b00fe; font-size: x-small;"><!-- ///////////////////////VUE.JS/////////////////////// --></span></p><p><span style="color: #2b00fe; font-size: x-small;"><script></span></p><p><span style="color: #2b00fe; font-size: x-small;">new Vue({</span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>el: '#app',</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>data () {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>return {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>info: null,</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>todayDate: new Date().toLocaleDateString()</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>}</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>},</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>methods: {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>numberFormat(number) {</span></span></p><p><span><span style="color: #2b00fe; font-size: x-small;"> var number = parseInt(number) //conver to int</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>return number.toLocaleString()</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>},</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>fixTwoDigit(number){</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>var amount=parseFloat(number).toFixed(2)</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>return formattedString</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>}</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>},</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>mounted () {</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>axios.get(targetURL)</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>.then(response => (this.info = response.data))</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>.then(response => (console.log(response)))</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>}</span></span></p><p><span style="white-space: normal;"><span style="color: #2b00fe; font-size: x-small;"><span style="white-space: pre;"> </span>})</span></span></p><p><span style="color: #2b00fe; font-size: x-small;"></script></span></p><p><span style="color: #2b00fe; font-size: x-small;"></body></span></p><p><span style="color: #2b00fe; font-size: x-small;"></span></p><p><span style="color: #2b00fe; font-size: x-small;"></html></span></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-43923480018128805522024-02-27T20:56:00.000-08:002024-02-28T16:58:42.750-08:00ApexCharts.js ง่ายสุด<div class="separator" style="clear: both; text-align: center;"><a href="https://camo.githubusercontent.com/1c6bf58773397d03c9e8e52acb8541bb8d732a47acbb4bc669824f73ad8112e4/68747470733a2f2f617065786368617274732e636f6d2f6d656469612f617065786368617274732d6c6f676f2e706e67" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="177" data-original-width="177" height="177" src="https://camo.githubusercontent.com/1c6bf58773397d03c9e8e52acb8541bb8d732a47acbb4bc669824f73ad8112e4/68747470733a2f2f617065786368617274732e636f6d2f6d656469612f617065786368617274732d6c6f676f2e706e67" width="177" /></a></div><span style="font-family: arial;">เขียน Chart อย่างง่ายด้วย <a href="https://apexcharts.com/" target="_blank">ApexCharts</a> : Modern & Interactive Open-source Charts</span><div><span style="font-family: arial;">ดังนี้<br /></span><p></p><p><span style="font-family: arial;"><b>1.กำหนด library path</b></span></p><p><span style="font-family: arial;"><script src="https://cdn.jsdelivr.net/npm/apexcharts"></script></span></p><p><b style="font-family: arial;">2.กำหนดขนาดด้วย style</b></p><p><span style="font-family: arial;"><style></span><span style="font-family: arial;"> #chart {max-width: 650px; margin: 35px auto; } </span><span style="font-family: arial;"></style></span></p><p><b style="font-family: arial;">3.กำหนดที่สำหรับ render</b></p><p><span style="font-family: arial;"><div id="chart"></div></span></p><p><b style="font-family: arial;">4.กำหนดลักษณะ chart ด้วย javascript</b></p><p><span style="font-family: arial;">เช่น</span></p><p><span style="font-family: arial;"><script></span></p><p><span style="font-family: arial;"> var options = {</span></p><p><span style="font-family: arial;"> chart: { </span></p><p><span style="font-family: arial;"> type: 'bar' },</span></p><p><span style="font-family: arial;"> series: [{</span></p><p><span style="font-family: arial;"> name: 'sales',</span></p><p><span style="font-family: arial;"> data: [30,40,45,50,49,60,70,91,125]</span></p><p><span style="font-family: arial;"> }],</span></p><p><span style="font-family: arial;"> xaxis: {</span></p><p><span style="font-family: arial;"> categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]</span></p><p><span style="font-family: arial;"> }</span></p><p><span style="font-family: arial;">}</span></p><p><span style="font-family: arial;">var chart = new ApexCharts(document.querySelector("#chart"), options);</span></p><p><span style="font-family: arial;">chart.render();</span></p><p><span style="font-family: arial;"></script></span></p><p><span style="font-family: arial;"><br /></span></p><p><span style="font-family: arial;"><b>หมาเหตุ :</b> มีตัวอย่างการดึงข้อมูลจาก Api มาแสดงกราฟได้ทันที</span></p><p><span style="font-family: arial;"> <a href="https://apexcharts.com/docs/update-charts-from-json-api-ajax/">https://apexcharts.com/docs/update-charts-from-json-api-ajax/</a></span></p><p>ตย.</p><p><span style="color: red; font-family: arial; font-size: xx-small;"><html lang="en"></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"><head></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <meta charset="UTF-8" /></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <title>Axios Example </title></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <style></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> #chart { max-width: 450px; margin: 35px auto; }</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> </style></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"></head></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"><body></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <div id="chart"></div></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> <script></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> var options = {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> series: [],</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> chart: {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> height: 250,</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> type: 'bar',</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> },</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> dataLabels: {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> enabled: false</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> },</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> title: {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> text: 'Ajax Example',</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> },</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> noData: {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> text: 'Loading...'</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> },</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> xaxis: {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> type: 'category',</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> tickPlacement: 'on',</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> labels: {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> rotate: -45,</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> rotateAlways: true</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> }</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> }</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> };</span></p><p><span style="color: red; font-family: arial; font-size: x-small;"> var chart = new ApexCharts(document.querySelector("#chart"), options);</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> chart.render();</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> </span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> // AXIOS for GET DATA ///////////////////</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> axios({</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> method: 'GET',</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> url: 'http://223.27.246.234/poe12-opendata/apexcharts_data/daily_passenger.php',</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> })</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> .then(function(response) {</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> chart.updateSeries([{</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> name: 'Passenger-in',</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> data: response.data</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> }])</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> })</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> /////////End Axios///////////////////////</span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"> </script> </span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"></body></span></p><p><span style="color: red; font-family: arial; font-size: xx-small;"></html></span></p><div><br /></div><p><br /></p></div>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-4093445569149581572024-02-26T21:52:00.000-08:002024-02-27T19:34:08.664-08:00การเขียนเอกสารประกอบ API<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://appmaster.io/api/_files/ksS4LREjVDEfr52cscyyaW/download/" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="447" data-original-width="800" height="179" src="https://appmaster.io/api/_files/ksS4LREjVDEfr52cscyyaW/download/" width="320" /></a></div><p><br /></p>การเขียนเอกสารประกอบ API (Application Programing Interface) สำหรับให้ผู้อื่นได้เข้าถึงข้อมูล อย่างมีประสิทธิภาพและปลอดภัย จะต้องเขียนให้ครอบคลุมประเด็นหัวข้อ 5 หัวข้อ ดังนี้<p><b>1.URL สำหรับขอ Request </b></p><p> ตำแหน่งของ URL endpoint ของ API</p><p><b>2.Method สำหรับ</b><span face=""Open Sans", "Helvetica Neue", Helvetica, Arial, 나눔바른고딕, "Nanum Barun Gothic", 맑은고딕, "Malgun Gothic", sans-serif" style="background-color: white; color: #222222; font-size: 16px;"><b>การเรียกใช้ API</b></span></p><p><span face=""Open Sans", "Helvetica Neue", Helvetica, Arial, 나눔바른고딕, "Nanum Barun Gothic", 맑은고딕, "Malgun Gothic", sans-serif" style="background-color: white; color: #222222; font-size: 16px;"> จะต้องใช้งานผ่าน HTTP Request ซึ่ง HTTP Request นั้นเป็นการส่งข้อคำขอเพื่อร้องขอข้อมูลกับทางผู้ให้บริการ เช่น การเข้าเว็ปไซต์ต่างๆจะเป็นการส่งคำขอเพื่อรับหน้าเว็ปมาแสดงผล โดย HTTP Request จะต้องระบุ method ที่ใช้งานโดยจากข้อที่แล้ว methed ที่ api กำหนดก็คือ GET</span></p><p><b>3.Parameter ที่ต้องใช้</b></p><p><span face=""Open Sans", "Helvetica Neue", Helvetica, Arial, 나눔바른고딕, "Nanum Barun Gothic", 맑은고딕, "Malgun Gothic", sans-serif" style="background-color: white; color: #222222; font-size: 16px;"> parameter เป็นข้อมูลที่ผู้ให้บริการต้องการใช้ เพื่อการใช้งาน api ตามปกติแล้วจะเป็นการเจาะจงข้อมูลที่ต้องการ เช่น เป็นข้อมูลของวันที่เท่าไหร่ หรือเป็นการใส่ api-key ที่เป็นการกำหนดว่าคนร้องขอเป็นใคร โดยส่วนมากจะต้องสมัครสมาชิกเพื่อรับ api-key ซึ่งจะไม่ซ้ำกับคนอื่น</span></p><p><b>4.Respond ที่ตอบกลับมา</b></p><p><span face=""Open Sans", "Helvetica Neue", Helvetica, Arial, 나눔바른고딕, "Nanum Barun Gothic", 맑은고딕, "Malgun Gothic", sans-serif" style="background-color: white; color: #222222; font-size: 16px;"> เมื่อกดส่งก็จะได้ข้อมูลลักษณะที่เป็นข้อมูลประเภทJSON (รูปแบบข้อมูล String ที่ใช้กันในการส่งข้อมูล) ซึ่งข้อมูลนี้คือผลลัพธ์ที่ทางผู้ให้บริการตอบกลับมาจากข้อมูลทั้งหมดที่ได้ร้องขอ หลังจากนี้คือหน้าที่ของผู้ร้องขอ ว่าจะเอาข้อมูลส่วนไหนไปทำอะไร</span></p><p><b>5.ข้อกำหนดและข้อตกลง</b></p><p><span face=""Open Sans", "Helvetica Neue", Helvetica, Arial, 나눔바른고딕, "Nanum Barun Gothic", 맑은고딕, "Malgun Gothic", sans-serif" style="background-color: white; color: #222222; font-size: 16px;"> เนื่องจาก API เป็นการร้องขอข้อมูลของคนอื่นมาใช้งาน ดังนั้นจึงต้องที่จะทำความเข้าใจในข้อตกลงและปฏิบัติตามอย่างเคร่งครัดด้วย เช่นบางที่อาจให้ใส่ credit หรือห้ามใช้ในเชิงพาณิชย์ เป็นต้น</span></p><div><br /></div><div><a href="https://drive.google.com/file/d/1Xhs15y4cG5ZO_v1KbWFC4FjFT1kdnDof/view?usp=sharing" target="_blank">ดูตัวอย่าง</a></div><div><br /></div><p>CR: <a href="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">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</a></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-24894273370463400972024-02-25T16:57:00.000-08:002024-02-28T03:00:34.609-08:00พื้นฐาน Vue.js Study Link Resources<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://cdn-media-1.freecodecamp.org/ghost/2019/03/vueart.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="800" height="197" src="https://cdn-media-1.freecodecamp.org/ghost/2019/03/vueart.png" width="351" /></a></div> <p></p><p><span style="font-family: verdana; font-size: x-small;"><b>BASCI VUE3</b></span></p><p><span style="font-family: verdana; font-size: x-small;"><a href="https://www.mindphp.com/developer/20-javascript/9721-getting-started-with-vue-js.html" target="_blank">https://www.mindphp.com/developer/20-javascript/9721-getting-started-with-vue-js.html</a></span></p><p><span style="font-family: verdana; font-size: x-small;"><br /></span></p><p><span style="font-family: verdana; font-size: x-small;"><b>REST API</b></span></p><p><span style="font-family: verdana; font-size: x-small;"><a href="https://www.youtube.com/watch?v=JmwgD3UOsHA" target="_blank">https://www.youtube.com/watch?v=JmwgD3UOsHA</a></span></p><p><span style="font-family: verdana; font-size: x-small;"><br /></span></p><p><span style="font-family: verdana; font-size: x-small;"><b>CODE SNIPPED</b></span></p><p><span style="font-family: verdana; font-size: x-small;"><a href="https://fontawesomeicons.com/fa/vue-js-post-form-data-to-api-using-axios" target="_blank">https://fontawesomeicons.com/fa/vue-js-post-form-data-to-api-using-axios</a></span></p><p><span style="font-family: verdana; font-size: x-small;"><br /></span></p><p><span style="font-family: verdana; font-size: x-small;"><b>ROUTE</b></span></p><p><span style="font-family: verdana; font-size: x-small;"><a href="https://shouts.dev/articles/vuejs-3-routing-from-scratch-using-cdn-without-cli" target="_blank">https://shouts.dev/articles/vuejs-3-routing-from-scratch-using-cdn-without-cli</a></span></p><p><span style="font-family: verdana; font-size: x-small;"><br /></span></p><p><span style="font-family: verdana; font-size: x-small;"><b>CRUD -PHP & MYSQL [API with Axios]</b></span></p><p><span style="font-family: verdana; font-size: x-small;"><a href="https://github.com/rudSarkar/php-mysql-vue" target="_blank">https://github.com/rudSarkar/php-mysql-vue</a></span></p><p><span style="font-family: verdana; font-size: x-small;"><br /></span></p><p><span style="font-family: verdana; font-size: x-small;"><b>Multiple Endpoint</b> </span><b style="font-family: verdana; font-size: small;">[API with Axios]</b></p><p><span style="font-family: verdana; font-size: x-small;"><a href="https://blog.logrocket.com/using-axios-all-make-concurrent-requests" target="_blank">https://blog.logrocket.com/using-axios-all-make-concurrent-requests</a></span></p><p>ตย.</p><p><span style="font-size: x-small;"><html lang="en"></span></p><p><span style="font-size: x-small;"><head></span></p><p><span style="font-size: x-small;"> <meta charset="UTF-8"></span></p><p><span style="font-size: x-small;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="font-size: x-small;"> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></span></p><p><span style="font-size: x-small;"> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></span></p><p><span style="font-size: x-small;"></head></span></p><p><span style="font-size: x-small;"><body> </span></p><p><span style="font-size: x-small;"> <div id="app"></span></p><p><span style="font-size: x-small;"> <p>Date : {{todayDate}}</p></span></p><p><span style="font-size: x-small;"> <!-- <p>{{ vsan }}</p> --></span></p><p><span style="font-size: x-small;"> <table border="1"></span></p><p><span style="font-size: x-small;"> <thead><tr><th>No</th><th>Office</th><th>T1</th></tr></thead></span></p><p><span style="font-size: x-small;"> <tbody></span></p><p><span style="font-size: x-small;"> <!-- index เป็นตัวนับ เริ่มจาก 0 เวลาไปใช้จึงต้อง +1 --></span></p><p><span style="font-size: x-small;"> <tr v-for="(row, index) in vsan"> <!-- :key="info.user_id" ต้องใส่เสมอ ป้องกันข้อผิดพลาดกรณีแก้ไขข้อมูล--></span></p><p><span style="font-size: x-small;"> <td>{{index+1}}</td></span></p><p><span style="font-size: x-small;"> <td>{{row.nick_name }}</td></span></p><p><span style="font-size: x-small;"> <td>{{row.t1}}</td></span></p><p><span style="font-size: x-small;"> </tr></span></p><p><span style="font-size: x-small;"> </tbody></span></p><p><span style="font-size: x-small;"> </table></span></p><p><span style="font-size: x-small;"> <!-- //////////////////////////// --></span></p><p><span style="font-size: x-small;"> <br></span></p><p><span style="font-size: x-small;"> <!-- <p>{{ qalert }}</p> --></span></p><p><span style="font-size: x-small;"> <table border="1"></span></p><p><span style="font-size: x-small;"> <thead><tr><th>No</th><th>Office</th><th>C19</th><th>YLF</th></tr></thead></span></p><p><span style="font-size: x-small;"> <tbody></span></p><p><span style="font-size: x-small;"> <!-- index เป็นตัวนับ เริ่มจาก 0 เวลาไปใช้จึงต้อง +1 --></span></p><p><span style="font-size: x-small;"> <tr v-for="(row, index) in qalert"> <!-- :key="info.user_id" ต้องใส่เสมอ ป้องกันข้อผิดพลาดกรณีแก้ไขข้อมูล--></span></p><p><span style="font-size: x-small;"> <td>{{index+1}}</td></span></p><p><span style="font-size: x-small;"> <td>{{row.nick_name }}</td></span></p><p><span style="font-size: x-small;"> <td>{{row.C19}}</td></span></p><p><span style="font-size: x-small;"> <td>{{row.YLF}}</td></span></p><p><span style="font-size: x-small;"> </tr></span></p><p><span style="font-size: x-small;"> </tbody></span></p><p><span style="font-size: x-small;"> </table></span></p><p><span style="font-size: x-small;"> <!-- //////////////////////////// --></span></p><p><span style="font-size: x-small;"> </div></span></p><p><span style="font-size: x-small;"> <script></span></p><p><span style="font-size: x-small;"> new Vue({</span></p><p><span style="font-size: x-small;"> el: '#app',</span></p><p><span style="font-size: x-small;"> data () {</span></p><p><span style="font-size: x-small;"> return {</span></p><p><span style="font-size: x-small;"> vsan:null,</span></p><p><span style="font-size: x-small;"> qalert:null,</span></p><p><span style="font-size: x-small;"> todayDate: new Date().toLocaleDateString(),</span></p><p><span style="font-size: x-small;"> }</span></p><p><span style="font-size: x-small;"> },</span></p><p><span style="font-size: x-small;"> mounted () { </span></p><p><span style="font-size: x-small;"> let endpoints = [</span></p><p><span style="font-size: x-small;"> 'http://223.27.246.234/poe12-opendata/vsan_t1.php',</span></p><p><span style="font-size: x-small;"> 'http://223.27.246.234/poe12-opendata/qalert.php'</span></p><p><span style="font-size: x-small;"> ]; </span></p><p><span style="font-size: x-small;"> axios.all(endpoints.map((endpoint) => axios.get(endpoint)))</span></p><p><span style="font-size: x-small;"> .then(</span></p><p><span style="font-size: x-small;"> axios.spread(({data: vsan}, {data: qalert}) => { </span></p><p><span style="font-size: x-small;"> this.vsan = vsan</span></p><p><span style="font-size: x-small;"> this.qalert = qalert </span></p><p><span style="font-size: x-small;"> console.log({ vsan, qalert });</span></p><p><span style="font-size: x-small;"> })</span></p><p><span style="font-size: x-small;"> );</span></p><p><span style="font-size: x-small;"> }</span></p><p><span style="font-size: x-small;"> })</span></p><p><span style="font-size: x-small;"> </script></span></p><p><span style="font-size: x-small;"></body></span></p><p><span style="font-size: x-small;"></html></span></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-25142691661317631412024-02-25T03:46:00.000-08:002024-02-25T19:01:36.519-08:00Vue.js & Axios.js Best Practis<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--NezlJcK9--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://i.blogs.es/99f0c0/vue/450_1000.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="336" data-original-width="800" height="138" src="https://res.cloudinary.com/practicaldev/image/fetch/s--NezlJcK9--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://i.blogs.es/99f0c0/vue/450_1000.png" width="329" /></a></div><br /><p></p><p><span style="font-family: verdana; font-size: x-small;">ครั้งแรกเริ่มทำด้วย vue.js และ Axios.js</span></p><p><span style="font-family: verdana; font-size: x-small;"><br /></span></p><p><span style="font-family: verdana; font-size: x-small;"><!DOCTYPE html></span></p><p><span style="font-family: verdana; font-size: x-small;"><html lang="en"></span></p><p><span style="font-family: verdana; font-size: x-small;"><head></span></p><p><span style="font-family: verdana; font-size: x-small;"> <meta charset="UTF-8"></span></p><p><span style="font-family: verdana; font-size: x-small;"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="font-family: verdana; font-size: x-small;"> <title>Document</title></span></p><p><span style="font-family: verdana; font-size: x-small;"> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></span></p><p><span style="font-family: verdana; font-size: x-small;"> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></span></p><p><span style="font-family: verdana; font-size: x-small;"></head></span></p><p><span style="font-family: verdana; font-size: x-small;"><body></span></p><p><span style="font-family: verdana; font-size: x-small;"> <div id="app"></span></p><p><span style="font-family: verdana; font-size: x-small;"> <p>{{today}}</p> <p>{{formattedDate}}</p></span></p><p><span style="font-family: verdana; font-size: x-small;"> <br></span></p><p><span style="font-family: verdana; font-size: x-small;"> {{info}}</span></p><p><span style="font-family: verdana; font-size: x-small;"> <br></span></p><p><span style="font-family: verdana; font-size: x-small;"> <!-- {{info.channel_mode}} --></span></p><p><span style="font-family: verdana; font-size: x-small;"> <!-- <p>{{info.person_results[0].id}}</p> --></span></p><p><span style="font-family: verdana; font-size: x-small;"> <p>บัตร ปชช. {{info.person_results[0].citizen_no}}</p></span></p><p><span style="font-family: verdana; font-size: x-small;"> <p>ชื่อ-สกุล {{info.person_results[0].pre_name}} {{info.person_results[0].f_name}}&nbsp;&nbsp;{{info.person_results[0].l_name}}</span></p><p><span style="font-family: verdana; font-size: x-small;"> <p>วดป.เกิด {{info.person_results[0].birth_date}}</p></span></p><p><span style="font-family: verdana; font-size: x-small;"> <p>ที่อยู่ปัจจุบัน {{info.person_results[0].present_address}}</p></span></p><p><span style="font-family: verdana; font-size: x-small;"> <!-- <p>{{info.person_results[0].vaccines[0].vacc_disease}}</p> --></span></p><p><span style="font-family: verdana; font-size: x-small;"> ประวัติการได้รับวัคซีน </span></p><p><span style="font-family: verdana; font-size: x-small;"> <!-- vaccine have more record, so will loop --></span></p><p><span style="font-family: verdana; font-size: x-small;"> <table border="1"></span></p><p><span style="font-family: verdana; font-size: x-small;"> <tr><td>No.</td><td>Vaccine Name</td><td>Date</td><td>Service place</td></tr></span></p><p><span style="font-family: verdana; font-size: x-small;"> <tr v-for="(rowvac, index) in info.person_results[0].vaccines"> </span></p><p><span style="font-family: verdana; font-size: x-small;"> <td>{{index+1}}</td></span></p><p><span style="font-family: verdana; font-size: x-small;"> <td>{{rowvac.vacc_disease }}</td></span></p><p><span style="font-family: verdana; font-size: x-small;"> <td>{{rowvac.vacc_date }}</td></span></p><p><span style="font-family: verdana; font-size: x-small;"> <td>{{rowvac.authorize_workplace_name }}</td></span></p><p><span style="font-family: verdana; font-size: x-small;"> </tr> </span></p><p><span style="font-family: verdana; font-size: x-small;"> </table> </span></p><p><span style="font-family: verdana; font-size: x-small;"> </div></span></p><p><span style="font-family: verdana; font-size: x-small;"><!-- ////////////////////////////////////////////////////////////////////////////// --></span></p><p><span style="font-family: verdana; font-size: x-small;"><script></span></p><p><span style="font-family: verdana; font-size: x-small;"> new Vue({</span></p><p><span style="font-family: verdana; font-size: x-small;"> el: '#app',</span></p><p><span style="font-family: verdana; font-size: x-small;"> data () {</span></p><p><span style="font-family: verdana; font-size: x-small;"> return {</span></p><p><span style="font-family: verdana; font-size: x-small;"> today: new Date().toLocaleDateString(),</span></p><p><span style="font-family: verdana; font-size: x-small;"> info: null,</span></p><p><span style="font-family: verdana; font-size: x-small;"> date: new Date()</span></p><p><span style="font-family: verdana; font-size: x-small;"> }</span></p><p><span style="font-family: verdana; font-size: x-small;"> },</span></p><p><span style="font-family: verdana; font-size: x-small;"> mounted () {</span></p><p><span style="font-family: verdana; font-size: x-small;"> const targetURL ='http://223.27.246.234/hujat-info/vaccination/api_intervac.php?p=3960400280121'</span></p><p><span style="font-family: verdana; font-size: x-small;"> axios.get(targetURL)</span></p><p><span style="font-family: verdana; font-size: x-small;"> .then(response => (this.info = response.data))</span></p><p><span style="font-family: verdana; font-size: x-small;"> .then(response =>console.log(response))</span></p><p><span style="font-family: verdana; font-size: x-small;"> },</span></p><p><span style="font-family: verdana; font-size: x-small;"> computed: {</span></p><p><span style="font-family: verdana; font-size: x-small;"> formattedDate() {</span></p><p><span style="font-family: verdana; font-size: x-small;"> const day = this.date.getDate().toString().padStart(2, "0");</span></p><p><span style="font-family: verdana; font-size: x-small;"> const month = (this.date.getMonth() + 1)</span></p><p><span style="font-family: verdana; font-size: x-small;"> .toString()</span></p><p><span style="font-family: verdana; font-size: x-small;"> .padStart(2, "0");</span></p><p><span style="font-family: verdana; font-size: x-small;"> const year = this.date.getFullYear().toString();</span></p><p><span style="font-family: verdana; font-size: x-small;"> const th_year = this.date.getFullYear()+543;</span></p><p><span style="font-family: verdana; font-size: x-small;"> return `${day}/${month}/${th_year}`;</span></p><p><span style="font-family: verdana; font-size: x-small;"> }</span></p><p><span style="font-family: verdana; font-size: x-small;"> }</span></p><p><span style="font-family: verdana; font-size: x-small;"> }) </span></p><p><span style="font-family: verdana; font-size: x-small;"></script> </span></p><p><span style="font-family: verdana; font-size: x-small;"></body></span></p><p><span style="font-family: verdana; font-size: x-small;"></html></span></p><p><span style="font-family: verdana; font-size: x-small;"><br /></span></p><p><span style="font-family: verdana; font-size: x-small;">หมายเหตุ</span></p><p><span style="font-family: verdana; font-size: x-small;">-การดึง API จาก enpoint ที่ติดปัญหาเรื่อง CORS</span></p><p><span style="font-family: verdana; font-size: x-small;">ให้แก้ด้วยการดึงด้วย PHP (ใช้ CURL) แล้วให้ส่งค่า Response เพื่อให้ Axios ดึงมาอีกที</span></p><p><span style="font-family: verdana; font-size: x-small;">(เพราะ PHP เป็น Server side Rendering อยู่แล้ว ไม่มีปัญหาเรื่อง CORS)</span></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-3550559820990809682023-04-20T17:22:00.003-07:002023-04-20T17:22:56.896-07:00PHP Mobile Detection <p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://mayecreate.com/wp-content/uploads/2013/12/php.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="376" data-original-width="576" height="209" src="https://mayecreate.com/wp-content/uploads/2013/12/php.png" width="320" /></a></div><p></p><p>PHP Mobile Detection</p><p><?php //detect a mobile device in PHP</p><p>// Create the function, so you can use it</p><p>function isMobile() {</p><p><span style="white-space: pre;"> </span>return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|</p><p> hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", </p><p> $_SERVER["HTTP_USER_AGENT"]);</p><p>}</p><p>// If the user is on a mobile device</p><p>if(isMobile()){</p><p><span style="white-space: pre;"> </span>$x1='http://223.27.246.236/q-office/mobile/index.php';</p><p>}else{</p><p> $x1='index.php';</p><p>}</p><p>?></p><div><br /></div>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-61276667690575458922023-04-08T23:19:00.005-07:002023-04-09T18:09:02.693-07:00วิธีรับค่า API ด้วย jQuery หรือ AXIOS อย่างง่าย<p> </p><div class="separator" style="clear: both; text-align: center;"><div style="text-align: left;"><a href="https://www.tutsmake.com/wp-content/uploads/2020/01/calling-rest-api-from-javascript-jquery.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="800" height="197" src="https://www.tutsmake.com/wp-content/uploads/2020/01/calling-rest-api-from-javascript-jquery.jpeg" width="217" /></a><a href="https://media.licdn.com/dms/image/C4D0BAQH193PTI04X1Q/company-logo_200_200/0/1678874664186?e=2147483647&v=beta&t=mt3_UoMRsnI98GFh1PaTteQhOZ7o6uC66a8HWXItYX4" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="200" data-original-width="200" height="200" src="https://media.licdn.com/dms/image/C4D0BAQH193PTI04X1Q/company-logo_200_200/0/1678874664186?e=2147483647&v=beta&t=mt3_UoMRsnI98GFh1PaTteQhOZ7o6uC66a8HWXItYX4" width="200" /></a></div><br /></div><br /><p></p><p><b>JQUERY</b></p><p><span style="font-family: verdana;"><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script></span></p><p><span style="font-family: verdana;"><?</span></p><p><span style="font-family: verdana;">$my_link = 'http://223.27.246.234/q-office-v2/api_survices/user_login-v2.php?u='.$myuser.'&p='.$mypass.'&tk='.$mytoken;</span></p><p><span style="font-family: verdana;">?></span></p><p><span style="font-family: verdana;"><script></span></p><p><span style="font-family: verdana;"> $.getJSON('<?=$my_link;?>', function(data) </span></p><p><span style="font-family: verdana;"> {</span></p><p><span style="font-family: verdana;"> var xcode,officode;</span></p><p><span style="font-family: verdana;"> xcode = data.code; //รับค่าที่ไม่เป็น Array</span></p><p><span style="font-family: verdana;"> //alert(xcode);</span></p><p><span style="font-family: verdana;"> </span><span style="font-family: verdana;"> if(xcode=='200'){</span></p><p><span style="font-family: verdana;"> officode=data.itemdata[0].office_id; //รับค่าที่เป็น Array</span></p><p><span style="font-family: verdana;"> window.location.replace('pad_list.php?offi='+officode);//redirect</span></p><p><span style="font-family: verdana;"> }else{</span></p><p><span style="font-family: verdana;"> window.location.replace('pad_unautherize.php'); //redirect</span></p><p><span style="font-family: verdana;"> }</span><span style="font-family: verdana;"> </span></p><p><span style="font-family: verdana;"> }); </span></p><p><span style="font-family: verdana;"></script></span></p><p><span style="font-family: verdana;"><br /></span></p><p><span style="font-family: verdana;"><b>AXIOS</b></span></p><p><span style="font-family: verdana;"><script src="https://unpkg.com/axios/dist/axios.min.js"></script></span></p><p><span style="font-family: verdana;"><?php</span></p><p><span style="font-family: verdana;">$my_link = 'http://223.27.246.234/q-office-v2/api_survices/user_login-v2.php?u='.$myuser.'&p='.$mypass.'&tk='.$mytoken;</span></p><p><span style="font-family: verdana;">?></span></p><p><span style="font-family: verdana;"> <script></span></p><p><span style="font-family: verdana;"> axios.get('<?=$my_link;?>')</span></p><p><span style="font-family: verdana;"> .then((response) => { // ถ้าทำงานสำเร็จ</span></p><p><span style="font-family: verdana;"> officode = response.data.itemdata[0].office_id; //รับค่าที่เป็น Array</span></p><p><span style="font-family: verdana;"> window.location.replace('pad_list.php?offi='+officode);//redirect</span></p><p><span style="font-family: verdana;"> })</span></p><p><span style="font-family: verdana;"> .catch((error) => { // ถ้าทำงานไม่สำเร็จ เกิดข้อผิดพลาด</span></p><p><span style="font-family: verdana;"> window.location.replace('pad_unautherize.php'); //redirect</span></p><p><span style="font-family: verdana;"> });</span></p><p><span style="font-family: verdana;"> </script></span></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-80110347901267843912022-09-21T18:11:00.010-07:002022-09-25T18:48:12.410-07:00คู่มือชาวด่านควบคุมโรคติดต่อระหว่างประเทศ<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://limberbutt.com/wp-content/uploads/2022/02/%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%8A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B5%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3-3.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="387" data-original-width="387" height="199" src="https://limberbutt.com/wp-content/uploads/2022/02/%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%8A%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%94%E0%B8%B5%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3-3.jpg" width="199" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"> เอกสารคู่มือที่จำเป็นสำหรับใช้ในการปฏิบัติงาน ณ ด่านควบคุมโรคติดต่อระหว่างประเทศ</div><div class="separator" style="clear: both; text-align: left;">ประกอบด่วย</div><div class="separator" style="clear: both; text-align: left;"><b>ก.เอกสารหลัก</b></div><div class="separator" style="clear: both; text-align: left;">1.<a href="https://drive.google.com/file/d/1Q7er-emV3YlbpkInFjmQRZyHunQ55taK/view?usp=sharing" target="_blank">กฏอนามัยระหว่างประเทศ 2548(IHR-2005)</a></div><div class="separator" style="clear: both; text-align: left;">2.<a href="https://drive.google.com/file/d/1Il5Z327Ul1oRbhH8UZ3Mq2wzZJQL7Gf2/view?usp=sharing" target="_blank">Core Capacity Assesment Tool(CCAT)</a></div><div class="separator" style="clear: both; text-align: left;">3.<a href="https://drive.google.com/file/d/1tzGiThzvCo8TOSI9vrgQnJs4LjP3fMvL/view?usp=sharing" target="_blank">พรบ.โรคติดต่อ 2558</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>ข.เอกสารอื่นๆ</b></div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/1L8UTfcOT-QitREgET5RJLAuNQ7R_ymGk/view?usp=sharing" target="_blank">โรคไข้เหลือง</a></div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/1aFTxl9lKSk3WTjJFhiGpqGA4GoRf-BwI/view?usp=sharing" target="_blank">พื้นที่ไข้เหลือง</a></div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/16WIQmu-ls6gP_52XdZULrV9zCItApfM4/view?usp=sharing" target="_blank">วัคซีนไข้เหลือง</a></div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/1sfYdURp0MTI_0bsfCSfYAW0OYovKGIda/view?usp=sharing" target="_blank">คำสั่งเจ้าพนักงานควบคุมโรค ฉ.3</a></div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/1IX84EkICwq0gjIEHP9mZw9-wKjAU4tAr/view?usp=sharing" target="_blank">เจ้าพนักงานตามประมวลกฏหมายอาญา</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">ค.อื่นๆ</div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/1jY72XQoCdP4x0IZppJjA2U0yvjCmdhXU/view?usp=sharing" target="_blank">Slide CCAT</a></div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/1Wwei_3YPUBAJO_mfitYSOB0LnQ5DcMaD/view?usp=sharing" target="_blank">สรุป CCAT</a></div><div class="separator" style="clear: both; text-align: left;">-<a href="https://drive.google.com/file/d/1hEGo0vm-7IFBGJXT_JVSQrElwaRxM4Pv/view?usp=sharing" target="_blank">Slide พรบ.85</a></div><div class="separator" style="clear: both; text-align: left;">-ตย.<a href="https://drive.google.com/file/d/1kFWge-KU1q-eyUknlkpbUMvEA8yB6WqQ/view?usp=sharing" target="_blank">หนังสือราชการภาษาอังกฤษ</a></div><div class="separator" style="clear: both; text-align: left;">-ตย.<a href="https://drive.google.com/file/d/1dhgnOv14JZJII5SBX2XGQI--zXdsAziq/view?usp=sharing" target="_blank">แบบส่ง ผป. ไทย-มาเลย์</a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><b>หมายเตุ</b></div><div class="separator" style="clear: both; text-align: center;"> Poster จัดเสวนา</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrIgOZKRIlTNqdl95ab7JF4fEP4AE8XPoN_mERUXG3K4Uyaop5k4-P_8SMCLzCYBQ51UAh0M3FPpQvceESiAB2HzLeMc9uW6tg7AviPsM3_Dtm_fDd3h1_nVmPvw8JZQDhnnPUp8lP7oTs413nTn3CNVSlrfqgO6cwc73z7k6_J4flGwpzEULTRKp/s2245/SmartPersonal.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2245" data-original-width="1587" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilrIgOZKRIlTNqdl95ab7JF4fEP4AE8XPoN_mERUXG3K4Uyaop5k4-P_8SMCLzCYBQ51UAh0M3FPpQvceESiAB2HzLeMc9uW6tg7AviPsM3_Dtm_fDd3h1_nVmPvw8JZQDhnnPUp8lP7oTs413nTn3CNVSlrfqgO6cwc73z7k6_J4flGwpzEULTRKp/w283-h400/SmartPersonal.png" width="283" /></a></div><div><br /></div><div><br /></div><div style="text-align: center;"> <a href="https://earth.google.com/earth/d/1K24s6OkRX2PV0HXjlmoRmpqdivolyYpY?usp=sharing" target="_blank">POE-Thai-Malaysia</a></div><div><div style="text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGMPe94ul8HbxYo-VcBmXgMBP_otuxk6jzABquoAfZJCnMkDX2SomkV4Xs9Upzk9W0s6MSk-VcthYgtWkWc8YImrpHxgqWujXJ9jIhEDB1j-XugxsosVBzGbnVQ6Dwxo5pRkBwFZsDoHubaNCUkrowuPb2xUPPfYr6sL8KNSU8PSWN-ra_1IHCC0S/s1027/Screenshot%202022-09-26%20084553.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="622" data-original-width="1027" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGMPe94ul8HbxYo-VcBmXgMBP_otuxk6jzABquoAfZJCnMkDX2SomkV4Xs9Upzk9W0s6MSk-VcthYgtWkWc8YImrpHxgqWujXJ9jIhEDB1j-XugxsosVBzGbnVQ6Dwxo5pRkBwFZsDoHubaNCUkrowuPb2xUPPfYr6sL8KNSU8PSWN-ra_1IHCC0S/s320/Screenshot%202022-09-26%20084553.png" width="320" /></a></div><br /></div><br /><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><br /><p></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-34776073911397246852022-04-08T16:55:00.003-07:002022-04-09T16:46:49.460-07:00CRUD ด้วย Datatable.js และ Bootstrap<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipU1suMCratbhuy5kHsFwwSZF3fujw7HPOXUHfz1LMCRxmVenpdkCswkSoZe9In0KvBiSe-dzTwDYxCHGY4xWnJ9Dpn8Z6J71gfMH0zDhDnqAnZXX3TxGBF91dmn_diYdd9H_TZ0s-Y2TIFNi5627qdHsgnqgdfeE3xL7j2fmS_1wl6yL-vK6RWj3U/s1441/Screenshot%202022-04-09%20064915.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="638" data-original-width="1441" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipU1suMCratbhuy5kHsFwwSZF3fujw7HPOXUHfz1LMCRxmVenpdkCswkSoZe9In0KvBiSe-dzTwDYxCHGY4xWnJ9Dpn8Z6J71gfMH0zDhDnqAnZXX3TxGBF91dmn_diYdd9H_TZ0s-Y2TIFNi5627qdHsgnqgdfeE3xL7j2fmS_1wl6yL-vK6RWj3U/w493-h219/Screenshot%202022-04-09%20064915.png" width="493" /></a></div><p><br /></p><div style="text-align: left;">การ CRUD ด้วย Datatable.js และ Bootstrap ดีมากๆ สวยดูดีและทำงานได้รวดเร็ว<br />ได้ลองประยุกต์ใช้แล้วใน LabLink ทำงานได้ดีมาก</div><p></p><div style="text-align: left;"><a href="https://drive.google.com/file/d/1z7dvkh8rgxMkRY6RreR1ZljG2TRiEfHr/view?usp=sharing" target="_blank">download </a> ตัวอย่าง<br /><a href="https://drive.google.com/file/d/1wse5Zopl8xVLpiP8hzCUI_r9Za2g2a_q/view?usp=sharing" target="_blank">download</a> ส่วนที่ประยุกต์ใช้ใน lablink เพิ่มการรับค่าตัวแปรจากภายนอก class </div><p><br /></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-47580388835705218952022-04-08T16:12:00.002-07:002022-04-08T16:12:17.389-07:00การ Copy to Clipboard<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://webdevtrick.com/wp-content/uploads/javascript-copy-to-clipboard.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="420" data-original-width="800" height="229" src="https://webdevtrick.com/wp-content/uploads/javascript-copy-to-clipboard.jpg" width="437" /></a></div>ตัวอย่างการ Copy to Clipboard<p></p><p><b>JS:</b></p><div style="text-align: left;"><span style="font-family: arial;"><script><br /></span><span style="font-family: arial;"> function copytoclipboard(txt){<br /></span><span style="font-family: arial;"> var cb = document.getElementById("cb");<br /></span><span style="font-family: arial;"> cb.value = txt;<br /></span><span style="font-family: arial;"> cb.style.display='block';<br /></span><span style="font-family: arial;"> cb.select();<br /></span><span style="font-family: arial;"> document.execCommand('copy');<br /></span><span style="font-family: arial;"> cb.style.display='none';<br /></span><span style="font-family: arial;"> <br /></span><span style="font-family: arial;"> alert("คัดลอกลิงก์แล้ว...");<br /></span><span style="font-family: arial;"> }<br /></span><span style="font-family: arial;"></script></span></div><p><br /></p><p><b>PHP:</b></p><div style="text-align: left;"><span style="font-family: arial;"><?php<br /></span><span style="font-family: arial;">$txttocopy="http://223.27.246.236/q-alert/".$filename;<br /></span><span style="font-family: arial;">?><br /></span><span style="font-family: arial;"><a href="" onclick="copytoclipboard('<?=$txttocopy;?>');return false;" > </span></div><div style="text-align: left;"><span style="font-family: arial;"> <font size=2 color=#8b7d6b>[คัดลอกลิ้งก์]</font></span></div><div style="text-align: left;"><span style="font-family: arial;"></a><br /></span><span style="font-family: arial;"><input id="cb" type="text" hidden></span></div><p><br /></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-33639378661768824832022-04-02T18:10:00.003-07:002022-04-02T18:10:39.232-07:00หนังสือสาสน์จากพระเจ้า เล่ม 1<p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKDK3JMwGidNKesnFeq7DvNVTISh3dVPSYgPLx_hYEcOPoDVVgojPH6GO5w2BJjcpYvbDM5hEx-Fj5A2WFjV_Kqnxtq_XrjMoMjvY14P8_lP1OSsQOwUuLMSpf9iYedPqorZ7NiCKYUDbUuHVzgOm8zvcIypirapc3fyoHVIbjZPTgDveZ_KFYGuRL/s697/Screenshot%202022-04-03%20080712.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="697" data-original-width="490" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKDK3JMwGidNKesnFeq7DvNVTISh3dVPSYgPLx_hYEcOPoDVVgojPH6GO5w2BJjcpYvbDM5hEx-Fj5A2WFjV_Kqnxtq_XrjMoMjvY14P8_lP1OSsQOwUuLMSpf9iYedPqorZ7NiCKYUDbUuHVzgOm8zvcIypirapc3fyoHVIbjZPTgDveZ_KFYGuRL/s320/Screenshot%202022-04-03%20080712.png" width="225" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div> หนังสือสาสน์จากพระเจ้า เล่ม 1 เป็นคัมภีร์อัลกุรอานฉบับที่มีคำแปลภาษาไทยล้วนๆ<p></p><p>สามารถ <a href="https://drive.google.com/file/d/1ZN2RwWVRfJBRb8PXc7ImTFwbeWJaJmBa/view?usp=sharing" target="_blank">Download ได้ที่นี่</a><br /> </p><p><br /></p><p><br /></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-40587014380706419762022-03-27T22:01:00.005-07:002022-03-27T22:07:24.791-07:00แก้ไขคำหรือCode ด้วย Replace Text<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8EjVn1H7qtyxtBkRXP8Du9R7kxlMbz2LrklQHSnF5x0WT7S3lSsXp0Z6EhwkS665GeOWUiBQZYRWV3KCGspPLaeGD1gnPAar6Hx27e96RGKcRwD5dcLk_9_qcctr8pAjzL6xa_rTjJCYKmpbfhhNLVFjHt2bWw2Y5h6oNGJTLRPdSoCoqGvJkF49/s737/Screenshot%202022-03-28%20114835.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="570" data-original-width="737" height="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8EjVn1H7qtyxtBkRXP8Du9R7kxlMbz2LrklQHSnF5x0WT7S3lSsXp0Z6EhwkS665GeOWUiBQZYRWV3KCGspPLaeGD1gnPAar6Hx27e96RGKcRwD5dcLk_9_qcctr8pAjzL6xa_rTjJCYKmpbfhhNLVFjHt2bWw2Y5h6oNGJTLRPdSoCoqGvJkF49/w400-h309/Screenshot%202022-03-28%20114835.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div>การแก้ไขคำในไฟล์ หรือ Code หรือ Script ของโปรแกรมด้วย <a href="https://www.raymond.cc/blog/download/did/1564/" target="_blank">Replace Text</a> ทำได้สะดวกมาก สามารถแก้ได้ครั้งละหลายๆไฟล์ และหลายๆโฟลเดอร์<p></p><p>โดยสามารถคำหนดคำที่ต้อง Replace ได้หลายๆคำพร้อมๆกัน ...สุดยอดมาก..</p><p>วิธีการใช้</p><p>1.กำหนดคำที่ต้อง Replace (แทนที่) -อย่าลืมสร้างกลุ่มและตั้งชื่อก่อนเสมอ กดปุ่ม Add Group</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-K_UzX5ka_CIagtJ6zy0lRVnfdx1WyIJ7aYqRElszHr9RzQr1P4XJzSNYH-vdIZTBiSlKjNKW-jgEFOPGFWNcAJX8aegVdC50PUOvW3NXop_DlAY2lVjcUhKw1XEDg93Du76YE3NhPcna0IzPhzCIBezZ4NxoBY1ITo7xUxlmnrQFohyu3hMeTj-/s737/Screenshot%202022-03-28%20115306.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="247" data-original-width="737" height="134" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ-K_UzX5ka_CIagtJ6zy0lRVnfdx1WyIJ7aYqRElszHr9RzQr1P4XJzSNYH-vdIZTBiSlKjNKW-jgEFOPGFWNcAJX8aegVdC50PUOvW3NXop_DlAY2lVjcUhKw1XEDg93Du76YE3NhPcna0IzPhzCIBezZ4NxoBY1ITo7xUxlmnrQFohyu3hMeTj-/w400-h134/Screenshot%202022-03-28%20115306.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">2.กำหนด property ของกลุ่ม(รายละเอียดของไฟล์ต่างๆที่ต้องการแทนที่ และกำหนดปลานทางที่ต้องการจัดเก็บ)</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2wmaOSHupyAiLVMpY6Tkt83PaYMkhg2xkBmlgZFejdz_3s25jpoIvsWf4WYEanzLmOmSCB_nekC-DQivlAj-a6t4NCVk-4xUIfvmf4YilVp_kN-AOe1ui9EUYTkC3aD-Pd4n8qt1ml1L0qzSxpj0zkIigaWKYab3Cilk4mB-il0WtOjHcSE0RLWv/s568/Screenshot%202022-03-28%20094133.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="342" data-original-width="568" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj2wmaOSHupyAiLVMpY6Tkt83PaYMkhg2xkBmlgZFejdz_3s25jpoIvsWf4WYEanzLmOmSCB_nekC-DQivlAj-a6t4NCVk-4xUIfvmf4YilVp_kN-AOe1ui9EUYTkC3aD-Pd4n8qt1ml1L0qzSxpj0zkIigaWKYab3Cilk4mB-il0WtOjHcSE0RLWv/w400-h241/Screenshot%202022-03-28%20094133.png" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_f5zrJdf4hSGqcaEg419QEDRH7hOOBAI-WuYZRN5QhaISWj9VlpauCNp_v0x3n__upA_IE1ncxeECrhOOxhambMjjY-fAW2Huz671RD0nFJpza8lmrKhjQpeuxO08ujOy57nwiO_apWqWv4YBGuCo4ccciw_GLCuMGaMN-mxD6osSvaE4-GH4Y5S/s572/Screenshot%202022-03-28%20094421.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="337" data-original-width="572" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_f5zrJdf4hSGqcaEg419QEDRH7hOOBAI-WuYZRN5QhaISWj9VlpauCNp_v0x3n__upA_IE1ncxeECrhOOxhambMjjY-fAW2Huz671RD0nFJpza8lmrKhjQpeuxO08ujOy57nwiO_apWqWv4YBGuCo4ccciw_GLCuMGaMN-mxD6osSvaE4-GH4Y5S/w400-h236/Screenshot%202022-03-28%20094421.png" width="400" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezdi4vlqn1CXWGwUmuLEuWsKIKC278jKOy82KHye1r2_NpfsGmvVw8i2S3fkErESQkbTpUX16n12SBTr2M_89sd-EC4JiSxynAqVzvAzj67OpWygw3iTw0uJCe6myBfJTBDt2yzkrJh4tH6YAjRokDNH68LBE7h2CswqsQaxaE_9VviVlRPAMoPN5/s571/Screenshot%202022-03-28%20094253.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="341" data-original-width="571" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiezdi4vlqn1CXWGwUmuLEuWsKIKC278jKOy82KHye1r2_NpfsGmvVw8i2S3fkErESQkbTpUX16n12SBTr2M_89sd-EC4JiSxynAqVzvAzj67OpWygw3iTw0uJCe6myBfJTBDt2yzkrJh4tH6YAjRokDNH68LBE7h2CswqsQaxaE_9VviVlRPAMoPN5/w400-h239/Screenshot%202022-03-28%20094253.png" width="400" /></a></div><div><br /></div>3.กดปุ่ม Start Replace<div> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_PLw27IYBunNbK1CbOMlRXD0EIb6C29JpevpQTvz_7yHz20QPD_w8c81Qagx_Hl8V1LoXdrNpGhj2VUJXjCBSXDmQrU703sNgmlQC1fhJzzNYdp91ax3v3KQPuAxBsdDHmbeuA935TuwraOuueCqRI1X52DBfLhVqiZIxwP7S1Kgk6JM828bN6EX/s416/Screenshot%202022-03-28%20115825.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="323" data-original-width="416" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_PLw27IYBunNbK1CbOMlRXD0EIb6C29JpevpQTvz_7yHz20QPD_w8c81Qagx_Hl8V1LoXdrNpGhj2VUJXjCBSXDmQrU703sNgmlQC1fhJzzNYdp91ax3v3KQPuAxBsdDHmbeuA935TuwraOuueCqRI1X52DBfLhVqiZIxwP7S1Kgk6JM828bN6EX/s320/Screenshot%202022-03-28%20115825.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">หมายเหตุ : -การกำหนดค่าของคำที่กำหนดเพื่อReplace จะบันทึกเป็นไฟล์ได้</div><div class="separator" style="clear: both; text-align: left;"><span> </span><span> </span><span> </span><span> </span><span> -ค่าที่กำหนด property ของกลุ่ม </span>จะบันทึกเป็นไฟล์ไม่ได้</div><div><br /></div><div><br /></div>CR : <a href="https://www.raymond.cc/blog/search-a-particular-word-in-multiple-editable-text-files/">https://www.raymond.cc/blog/search-a-particular-word-in-multiple-editable-text-files/</a><br /><br /><div class="separator" style="clear: both; text-align: left;"><br /></div><br /><p><br /></p></div>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-79715766615109474612022-03-26T20:23:00.009-07:002022-03-27T19:18:31.583-07:00การถือศีลอดในรอมฎอนให้ถูกต้องอย่างไร?-How to fast Ramadan correctly<p> </p><div class="separator" style="clear: both; text-align: center;"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/Dv2JaYmiTcg" width="320" youtube-src-id="Dv2JaYmiTcg"></iframe></div></div><div class="separator" style="clear: both; text-align: center;"><br /></div>การถือศีลอดในเดือนรอมฎอนให้ถูกต้องอย่างไร?-How to fast Ramadan correctly<p></p><p>บรรยายโดย <span face="sans-serif"><a href="https://backtracks.fm/discover/s/abu-bakr-zoud/63a17306fd4e1113" target="_blank">Abu Bakr Zoud</a></span></p><span face="sans-serif"><span style="color: #38761d;"><blockquote>Abu Bakr Zoud is a graduate of the Faculty of Quran from the Islamic University of Madinah, after which he continued his Qur’anic Studies in Egypt. He received numerous ijazaat in Hafs including one from Sh Ali Al-Hudhafy, the Imam of Masjid An-Nabwi. Abu Bakr Zoud specialises in Qir’aat and currently teaches Tafseer at the Islamic College Australia.</blockquote></span></span><div><span face="sans-serif">บรรยายเนื้อหาดีมากๆ อธิบายรายละเอียดจากฮาดีส</span></div><div><span face="sans-serif"><br /></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; white-space: pre-wrap;">قَالَ رَسُولُ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ: مَنْ صَامَ رَمَضَانَ إِيمَانًا وَاحْتِسَابًا غُفِرَ لَهُ مَا تَقَدَّمَ مِنْ ذَنْبِهِ.</span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;">
"He who observes fasting during the month of Ramadan with Faith while seeking its reward from Allah, will have his past sins forgiven."
(<a href="https://sunnah.com/bukhari:38" target="_blank">Bukhari</a> and Muslim)</span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><br /></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;">Since fasting is the main pillar and obligation of Ramadan, we must pay all our attention in doing it right from the beginning in order to receive the reward mentioned in the Hadith below.
Discussion Points:
1- How to fast Ramadan correctly?
2- How do we fast with Faith?
3- What is meant by seeking the reward from Allah
4- What sins are forgiven?</span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"><b><span style="color: red;"><br /></span></b></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"><b><span style="color: red;">Interested words</span></b></span></div><div><ul style="text-align: left;"><li><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"> Innee Sor-im, Innee Sor-im ( I am fasting, I am fasting )</span></li><li><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"> ignorance = ไม่ปฏิบัติตามความรู้ที่มี</span></li></ul></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><br /></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><b>completely & correctly</b></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><b> </b>Avoid food drink sexual relation + 3 things</span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"> 1.false & evil speech - Must be control your </span><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="font-size: 14px; white-space: pre-wrap;">tongue</span></span><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"> during the day</span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> </span><span> 2.evil actions - Must be control eye & ear & hand & feet</span><br /></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> 3.avoid ignorance - not doing what you knows (obligatry)</span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span><br /></span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"><span style="color: #030303;"> </span><span style="color: #030303;"> </span><span style="color: #030303;"> </span><span style="color: #030303;"> -</span><span style="color: red;">Fasting your tongue, eye, ear, hand, feet</span><span style="color: #030303;"><br /></span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"><span style="color: #030303;"> -</span><span style="color: red;">T</span></span><span face="Roboto, Arial, sans-serif" style="font-size: 14px; white-space: pre-wrap;"><span style="color: red;">ongue is lead the people to Jahannam</span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303; font-size: 14px; white-space: pre-wrap;"><br /></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> fasting = stomach + limb(แขนขา)</span><br /></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span><br /></span></span></div><div><span style="font-size: medium;"><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; white-space: pre-wrap;"><span><b>fasting with truly faith (</b></span></span><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; white-space: pre-wrap;">إِيمَانًا</span><b style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; white-space: pre-wrap;">)</b></span></div><div><b style="background-color: #f9f9f9; color: #030303; font-family: Roboto, Arial, sans-serif; font-size: 14px; white-space: pre-wrap;"> -</b><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;">abslutely with no doubt, is for ALLAH only</span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> -not fasting for diet or for good health </span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span><br /></span></span></div><div><span style="font-size: medium;"><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; white-space: pre-wrap;"><span><b>fasting with seeking the reward from ALLAH (</b></span></span><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; white-space: pre-wrap;">احْتِسَابًا)</span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"> -</span><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="font-size: 14px; white-space: pre-wrap;">sincerity to ALLAH</span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> -not like reword 10 dollar for children for motivated.</span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> -ให้พูดกับตัวเองเวลาที่หิวว่า Seeking Reward from ALLAH</span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> What rewards are you seeking from ALLAH</span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span> 1.forgive your sin(อภัยในบาป)</span></span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"><span><span> </span><span> </span><span> </span><span> 2.purify your hart(ให้ใจบริสุทธิ์)</span></span></span></div><div><span style="background-color: #f9f9f9;"><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="font-size: 14px; white-space: pre-wrap;"> 3.victory(ชัยชนะ) -truely, victory will came with patient(แท้จริงแล้ว,ชัยชนะจะมากับความอดทน)</span></span></span></div><div><span style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"> </span></div><div><span face="Roboto, Arial, sans-serif"><span style="color: #030303; font-size: medium; white-space: pre-wrap;"><span style="background-color: #f9f9f9;"> </span><a href="https://quran.com/2/153?translations=17,18,20,21,22,84,95,101" style="background-color: #f9f9f9;" target="_blank">2:153</a> يَـٰٓأَيُّهَا ٱلَّذِينَ ءَامَنُوا۟ ٱسْتَعِينُوا۟ بِٱلصَّبْرِ وَٱلصَّلَوٰةِ ۚ إِنَّ ٱللَّهَ مَعَ ٱلصَّـٰبِرِينَ </span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="font-size: 14px; white-space: pre-wrap;"><br /></span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303; font-size: 14px; white-space: pre-wrap;"> بِٱلصَّبْرِ นักอรรถาธิบายให้ความหมายว่าคือ การถือศีลอด(</span><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;">صَامَ)</span></div><div><span face="Roboto, Arial, sans-serif" style="background-color: #f9f9f9; color: #030303; font-size: 14px; white-space: pre-wrap;"> </span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"> intension for meet to ALLAH</span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"><br /></span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;">Purpers of fasting :Takwa to ALLAH</span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;">With correctly fasting ALLAH will forgive minor & major sin ( Abn. Taimiya )</span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: #030303;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"><br /></span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: red;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;">If you like to make something wrong in Romadon, please <b>make ISTIKHFAR at the end of the day</b>.</span></span></div><div><span face="Roboto, Arial, sans-serif" style="color: red;"><span style="background-color: #f9f9f9; font-size: 14px; white-space: pre-wrap;"><i>dont forget...!</i></span></span></div><div><br /></div><div><br /></div><div><br /></div>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-21875688127164745222022-03-26T18:52:00.000-07:002022-03-26T18:52:15.023-07:00VB CABLE Virtual Audio ถอดเสียงจากคลิป MP3<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://vb-audio.com/Cable/VBCable.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="200" data-original-width="440" height="200" src="https://vb-audio.com/Cable/VBCable.jpg" width="440" /></a></div><p></p><p>VB CABLE Virtual Audio ถอดเสียงจากคลิป MP3 งานประชุม อบรมเป็นข้อความเวิร์ดเพื่อเขียนรายงานการประชุม หรือเปิดเสียงจาก Youtube ลองทำแล้ว work มาก</p><p>หมายเหตุ : ต้องเลือกภาษา ใน Google Doc(MicroPhone) ให้ตรงกับเสียงที่อยู่ในคลิป</p><p><br /></p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/GBrBgw6KfDA" width="320" youtube-src-id="GBrBgw6KfDA"></iframe></div><br /><p><br /></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-28213381683538833002022-03-08T17:04:00.004-08:002022-03-08T17:11:45.567-08:00Trick การใช้ Node.js ที่จำเป็นต้องรู้<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://toupawa.com/content/images/2021/01/node-js-1.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="800" height="160" src="https://toupawa.com/content/images/2021/01/node-js-1.jpg" width="320" /></a></div><br /><p><br /></p><p><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick1 -ทำให้เปิดBrowser ได้ทันที่หลังการรัน Server</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">ด้วย Ctrl+คลิก บน url http://localhost:3000 </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">เกิดจากคำสั่ง</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">app.listen(3000, () => {</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> console.log('Server is running at http://localhost:3000');</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">});</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick2-ติดตั้ง nodemon ดังนี้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> npm i nodemon --save ( i = install --save = ให้เขียนค่าใน package.json)</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> *version ปัจจุบัน ไม่ต้องใส่ --save ก็ได้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick3-ถอน Modul ออก ดังนี้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> npm uninstall <ชื่อ module></span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick4-การรัน server (การเปิดโปรแกรมให้พร้อมใช้งาน จะรอตาม port ที่กำหนด)</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> ด้วยคำสั่ง 2 แบบ ดังนี้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> วิธีที่ 1 ใช้ </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> node <ไฟล์หลัก .js> (เป็นไฟลที่มีการกำหนด port เช่น app.js หรือ index.js) (หากติดตั้ง nodemon ก็ใช้ nodemon แทน node ได้เลย)</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> วิธีที่ 2 ใช้ </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> npm start (ข้อดีคือในคำสั่งนี้ตลอด แต่ต้องไปกำหนดค่าใน package.jsan ก่อน ดังนี้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "scripts": {</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "start": "nodemon app.js"</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> },</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick5-การติดตั้ง module สามารถทำได้ 2 วิธี</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> วิธีที่ 1 ติดตั้งผ่าน คำสั่ง npm install <ชื่อ module> --save</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> วิธีที่ 2 โดยการกำหนด module ที่ต้องการไว้ใน package.json เช่นดังนี้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "dependencies": {</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "body-parser": "1.18.3",</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "bootstrap": "4.0.0",</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "ejs": "2.6.1",</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "express": "4.16.3",</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "jquery": "3.3.1",</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "nodemon": "^2.0.12",</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> "popper.js": "1.12.9"</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> }</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> แล้วใช้คำสั่ง npm install จะเป็นการติดตั้ง module แบบรวดเดียวจากไฟล์ package.json</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick6-การcopy โปรเจก</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> สามารถ copy ได้เลยทั้งโปรเจก ยกเว้นโฟลเดอร์ node_modules</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> ซึ่งจะมีขนาดเล็กมาก ประมาณ 20.7 kb เท่านั้น</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> ส่วน module ต่างไสามารถสร้างเองทีหลังได้ด้วยคำสั่ง </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> npm install จะติดตั้ง module ให้เองตามที่มีใน package.json</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick7 การกำหนดเส้นทาง</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> การกำหนดเส้นทางที่ใช้ใน App หรือ route ทำได้ 2 วิธี</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> 1.เรียกผ่านตัวแปรที่กำหนด เช่น</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> var router = require('./my_route.js') </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> app.use('/',router) </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> 2. เรียกผ่าน callback function เช่น</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> var router = require('./my_route.js') </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> app.use('/', function(req, res, next) {</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> res.render('index.ejs'); </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> });</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick8 การลิงค์ทุกชนิด </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> การสร้าหน้าใหม่ ที่ต้องการลิ้งค์(Link) ทุกชนิด</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> จะต้องมีการกำหนด route ไว้แล้วเท่านั้น ....จำไว้...</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> เช่น</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> <a href="/about" >ABOUT</a></span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> ก็ต้องสร้าง route ไว้ใน app ไว้แล้วในส่วน server ของ app </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> ดังนี้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> router.get('/about', (req, res)=>{</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> res.render('about.ejs') //ไม่เขียน .ejs ก็ได้ </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> });</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> </span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;">Trick9 ใน ejs สามารถกำหนดค่าตัวแปรได้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> <% var test = 101; %> // variable created by ejs</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> <script></span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> var getTest = <%= test %>; //เรียกใช้</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> console.log(getTest); // แสดงผล</span><br style="background-color: white; color: #202124; font-family: Roboto, Arial, sans-serif; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;" /><span face="Roboto, Arial, sans-serif" style="background-color: white; color: #202124; font-size: 16px; font-variant-ligatures: none; letter-spacing: 0.1px; white-space: pre-wrap;"> </script> </span></p><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><p></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-51831889256757417612022-03-06T18:35:00.001-08:002022-03-06T19:09:14.401-08:00หนังสือการเขียนโปรแกรมแนวใหม่ NodeJS Express MySQL EJS<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgnHJN_psrxq0MUedI8QgL1UycUxmX8Ja0rF5oCXMOPTFYWt44EH3_Gl7cXLUvLo6wvUaFODDyp_XMtWVl7Wk2nQLr00fXD2Zl1lnwAgjOl639LpBxjP44ZsY9dfyvFl3EcL0togl30p7yKZyQrFrmEKXNeyE2ArKJ1qBxvf2xi91yu2z1BzKQLlWdc=s503" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="255" data-original-width="503" height="162" src="https://blogger.googleusercontent.com/img/a/AVvXsEgnHJN_psrxq0MUedI8QgL1UycUxmX8Ja0rF5oCXMOPTFYWt44EH3_Gl7cXLUvLo6wvUaFODDyp_XMtWVl7Wk2nQLr00fXD2Zl1lnwAgjOl639LpBxjP44ZsY9dfyvFl3EcL0togl30p7yKZyQrFrmEKXNeyE2ArKJ1qBxvf2xi91yu2z1BzKQLlWdc=s320" width="320" /></a></div><br /><p></p><p><br /></p><p>หนังสือการเขียนโปรแกรมแนวใหม่ NodeJS Express MySQL EJS</p><p><a href="https://drive.google.com/file/d/12miA0IKnM4viMI2kyk1PgNiFjVjth5Zm/view?usp=sharing" target="_blank">Doenload</a></p><p><br /></p><p>Guide-for_NodeJS-CRUD Simple</p><p><a href="https://drive.google.com/file/d/1goCxPFV5jFMkuWbnUVHhPf-A7B4VCh64/view?usp=sharing" target="_blank">Download</a></p><p><br /></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-22008575667556132932021-12-24T21:37:00.006-08:002021-12-24T21:37:58.912-08:00Node.js with MariaDB <p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FcPw7JmQYTW8S_fnSc34LcU3JWBzKzrMPPXO9qu8N6ImSfwHJ9OvIKxlsVLdd9S4paWg3QqdRepCRrx5kDo1aN5b-cTEd-zoQyTuPISbxYBrZhlo1jvga2OTcxCdU2HCZpkOX9Xx3DMt/s528/mariaDB.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="528" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FcPw7JmQYTW8S_fnSc34LcU3JWBzKzrMPPXO9qu8N6ImSfwHJ9OvIKxlsVLdd9S4paWg3QqdRepCRrx5kDo1aN5b-cTEd-zoQyTuPISbxYBrZhlo1jvga2OTcxCdU2HCZpkOX9Xx3DMt/s320/mariaDB.png" width="320" /></a></div><br /> <p></p><h1 class="single-title font-weight-light text-primary text-center" itemprop="headline" style="background-color: #fefefe; box-sizing: border-box; color: rgb(0, 131, 143) !important; font-family: adrianna, "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: 300 !important; letter-spacing: 0.5px; line-height: 1.2; margin-bottom: 1.5rem; margin-top: 0px; text-align: center !important;"><span style="font-size: small;">Getting Started with Connector/Node.js</span></h1><div><span style="font-size: small;"><a href="https://mariadb.com/resources/blog/getting-started-with-connector-node-js/">https://mariadb.com/resources/blog/getting-started-with-connector-node-js/</a></span></div>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-74417833517082954962021-09-17T01:24:00.005-07:002021-09-17T01:24:24.341-07:00Trick การใช้ Bootstrap 5<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://zemez.io/wp-content/uploads/2021/05/boostrap-5-release_featured-840x469.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="447" data-original-width="800" height="179" src="https://zemez.io/wp-content/uploads/2021/05/boostrap-5-release_featured-840x469.jpg" width="320" /></a></div><br /><p></p><p>จัดobjectให้อยู่ตรงกลาง</p><p><br /></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"row justify-content-md-center"</span> <span style="color: grey;">></span> </div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col-md-auto"</span> <span style="color: #9cdcfe;">style</span>=<span style="color: #ce9178;">background-color:lightgray;</span><span style="color: grey;">></span></div><div> <span style="color: grey;"><</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span>Adisak<span style="color: grey;"></</span><span style="color: #569cd6;">h1</span><span style="color: grey;">></span></div><div> <span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div></div>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-43879882982907752982021-09-14T20:24:00.005-07:002021-09-17T01:20:54.529-07:00Javascript ทำ Login อย่างง่าย<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/480px-Unofficial_JavaScript_logo_2.svg.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="480" data-original-width="480" height="200" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/480px-Unofficial_JavaScript_logo_2.svg.png" width="200" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><p></p><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: grey;"><div style="color: #d4d4d4; line-height: 19px;"><span style="color: #6a9955;"><!-- Sweetalert2 --></span></div></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">script</span> <span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"sweetalert2.all.min.js"</span><span style="color: grey;">></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div><div style="line-height: 19px;"><div><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div><div> <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">myLogin</span>(){ </div><div> <span style="color: #9cdcfe;">Swal</span>.<span style="color: #dcdcaa;">fire</span>({</div><div> <span style="color: #9cdcfe;">title:</span> <span style="color: #ce9178;">"Password required"</span>,</div><div> <span style="color: #9cdcfe;">text:</span> <span style="color: #ce9178;">"Please input correct password:"</span>,</div><div> <span style="color: #9cdcfe;">input:</span> <span style="color: #ce9178;">'text'</span>,</div><div> <span style="color: #9cdcfe;">showCancelButton:</span> <span style="color: #569cd6;">true</span> </div><div> }).<span style="color: #dcdcaa;">then</span>((<span style="color: #9cdcfe;">result</span>) <span style="color: #569cd6;">=></span> {</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">result</span>.<span style="color: #9cdcfe;">value</span>!=<span style="color: #ce9178;">'123'</span>) {</div><div> <span style="color: #9cdcfe;">Swal</span>.<span style="color: #dcdcaa;">fire</span>({</div><div> <span style="color: #9cdcfe;">title:</span> <span style="color: #ce9178;">'Wrong password..'</span>,</div><div> <span style="color: #9cdcfe;">text:</span> <span style="color: #ce9178;">"Use another passw is not : "</span>+<span style="color: #9cdcfe;">result</span>.<span style="color: #9cdcfe;">value</span>,</div><div> <span style="color: #9cdcfe;">type:</span> <span style="color: #ce9178;">'success'</span>,</div><div> }).<span style="color: #dcdcaa;">then</span>(<span style="color: #569cd6;">function</span> (<span style="color: #9cdcfe;">result</span>) {</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #569cd6;">true</span>) {</div><div> <span style="color: #9cdcfe;">location</span>.<span style="color: #dcdcaa;">reload</span>();</div><div> }</div><div> })</div><div> }<span style="color: #c586c0;">else</span>{</div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">true</span></div><div> }</div><div> });</div><div> }</div><div> <span style="color: #9cdcfe;">window</span>.<span style="color: #9cdcfe;">onload</span> = <span style="color: #9cdcfe;">myLogin</span>; <span style="color: #6a9955;">// use or not-use</span></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div></div></div><div><span style="color: grey;"><br /></span></div><div><span style="color: grey;"><div style="color: #d4d4d4; line-height: 19px;"><span style="color: #6a9955;"><!-- </span><span style="color: grey;">ORIGINAL Style</span><span style="color: #6a9955;"> --></span></div></span></div><div><span style="color: grey;"><</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div></div><div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div> <span style="color: #569cd6;">function</span> <span style="color: #dcdcaa;">myLogin</span>(){ </div><div style="line-height: 19px;"><div> <span style="color: #569cd6;">var</span> <span style="color: #9cdcfe;">password</span> = <span style="color: #dcdcaa;">prompt</span>(<span style="color: #ce9178;">"Please enter your password"</span>, <span style="color: #ce9178;">""</span>);</div><div> <span style="color: #c586c0;">if</span> (<span style="color: #9cdcfe;">password</span> == <span style="color: #ce9178;">'2114'</span>) {</div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">true</span></div><div> }<span style="color: #c586c0;">else</span>{</div><div> <span style="color: #dcdcaa;">alert</span>(<span style="color: #ce9178;">'Wrong password !'</span>)</div><div> <span style="color: #9cdcfe;">location</span>.<span style="color: #9cdcfe;">href</span> = <span style="color: #ce9178;">"mbook_generator.php"</span></div><div> <span style="color: #c586c0;">return</span> <span style="color: #569cd6;">false</span></div><div> }</div><div> }</div><div> <span style="color: #9cdcfe;">window</span>.<span style="color: #9cdcfe;">onload</span> = <span style="color: #9cdcfe;">myLogin</span>;</div></div><div><span style="color: grey;"></</span><span style="color: #569cd6;">script</span><span style="color: grey;">></span></div></div>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-1807794836099824492021-09-13T19:49:00.002-07:002021-09-13T19:49:31.681-07:00การครอบ html tag บนข้อความเดิม<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://helpdeskgeek.com/wp-content/pictures/2009/05/html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="366" data-original-width="650" height="180" src="https://helpdeskgeek.com/wp-content/pictures/2009/05/html.jpg" width="320" /></a></div><br /><p></p><p>การครอบ html tag บนข้อความเดิม หรือ how to quickly wrap text with HTML tags in Visual Studio</p><p>ด้วยวิธีติดตั้ง extenssion ชื่อ <b>htmltagwrap</b></p><p><b>Link</b></p><p> https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap</p><p><b>Installation Options</b></p><p>Option 1. Search for htmltagwrap in VS Code extensions tab and install it.</p><p>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.</p><p><b>Usage</b></p><p>Select one or more blocks of text or strings of text.</p><p>Press <b>Alt + W</b> or Option + W for Mac.</p><p></p><p>Type the tag name you want.</p><p><br /></p><p>หมายเหตุ : </p><p> ครั้งแรกที่กด <b>Alt + W</b> จะมาครอบด้วย tag <p></p><p> แล้วสามารถพิมพ์ทับด้วย tag ที่ต้องการได้เลย....work!!..สุดๆ</p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-17002422669550791412021-09-13T19:12:00.002-07:002021-09-13T19:17:34.710-07:00Zen Code ด้วย Emmet ใน VSCODE<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://raygun.com/blog/wp-content/uploads/2015/03/Zen-coding-emmet.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="168" data-original-width="700" height="77" src="https://raygun.com/blog/wp-content/uploads/2015/03/Zen-coding-emmet.png" width="320" /></a></div><br /><p></p><p>ref : <a href="https://docs.emmet.io/cheat-sheet/" target="_blank">https://docs.emmet.io/cheat-sheet/</a></p><p>ตัวอย่างการเขียน zen coding ด้วย emmet ใน vscode ที่จะทำให้การเขียนโปรแกรมได้เร็วขึ้นมาก</p><p><span style="font-family: georgia;"><br /></span></p><p><b><span style="font-family: georgia;">h2{Helloworld}</span></b></p><p><span style="font-family: georgia;">ผลลัพธ์</span></p><p><span style="font-family: georgia;"> <h2>Helloworld<h2></span></p><p><span style="font-family: georgia;"> remark: {}คือใส่ข้อความ </span></p><p><span style="font-family: georgia;"><span style="white-space: pre;"> </span> </span></p><p><b><span style="font-family: georgia;">tabale>tr>td</span></b></p><p><span style="font-family: georgia;">ผลลัพธ์</span></p><p><span style="font-family: georgia;"> <table></span></p><p><span style="font-family: georgia;"> <tr></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> </tr></span></p><p><span style="font-family: georgia;"> </table></span></p><p><span style="font-family: georgia;"> remark: > คือ ส่วนลูก chield</span></p><p><span style="white-space: pre;"><span style="font-family: georgia;"> </span></span></p><p><b><span style="font-family: georgia;">tabale>tr>td*3</span></b></p><p><span style="font-family: georgia;">ผลลัพธ์</span></p><p><span style="font-family: georgia;"> <table></span></p><p><span style="font-family: georgia;"> <tr></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> </tr></span></p><p><span style="font-family: georgia;"> </table></span></p><p><span style="font-family: georgia;"> remark: * คือ ส่วนที่ทำซ้ำๆ </span></p><p><span style="font-family: georgia;"><span style="white-space: pre;"> </span> </span></p><p><b><span style="font-family: georgia;">table>tr*3>td*2</span></b></p><p><span style="font-family: georgia;">ผลลัพธ์</span></p><p><span style="font-family: georgia;"> <table></span></p><p><span style="font-family: georgia;"> <tr></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> </tr></span></p><p><span style="font-family: georgia;"> <tr></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> </tr></span></p><p><span style="font-family: georgia;"> <tr></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> <td></td></span></p><p><span style="font-family: georgia;"> </tr></span></p><p><span style="font-family: georgia;"> </table></span></p><p><span style="white-space: pre;"><span style="font-family: georgia;"> </span></span></p><p><b><span style="font-family: georgia;">div.main</span></b></p><p><span style="font-family: georgia;">ผลลัพธ์</span></p><p><span style="font-family: georgia;"> <div class="main"></div> remark: . คือ class </span></p><p><span style="font-family: georgia;"><span style="white-space: pre;"> </span> </span></p><p><b><span style="font-family: georgia;">div#main</span></b></p><p><span style="font-family: georgia;">ผลลัพธ์</span></p><p><span style="font-family: georgia;"> <div id="main"></div> remark: # คือ id</span></p><p><span style="font-family: georgia;"><span style="white-space: pre;"> </span> </span></p><p><b><span style="font-family: georgia;">ปล.:Snippets ending with + not work</span></b></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-69970689787811925002021-09-10T22:11:00.004-07:002021-09-10T22:14:31.205-07:00Express ไม่ต้องติดตั้ง Body Parser แล้ว<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://miro.medium.com/max/365/0*9DOManw2fTfooK8u.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="201" data-original-width="365" height="201" src="https://miro.medium.com/max/365/0*9DOManw2fTfooK8u.png" width="365" /></a></div><br /><p></p><p><span style="background-color: white; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.063px;">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)</span></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0tag:blogger.com,1999:blog-4128823996085463996.post-34091377084961633242021-09-09T01:56:00.002-07:002021-09-09T01:56:09.950-07:00Node.js ดีกว่า PHP อย่างไร<p> </p><div class="separator" style="clear: both; text-align: center;"><a href="https://miro.medium.com/max/1236/1*RZgDgfyWQUHjeyEHfnHJyw.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="618" height="400" src="https://miro.medium.com/max/1236/1*RZgDgfyWQUHjeyEHfnHJyw.png" width="618" /></a></div><br /><p></p><p>cr :<a href="https://medium.com/@thammarath014/php-vs-node-js-e84b4b92021d" target="_blank"> https://medium.com/@thammarath014/php-vs-node-js-e84b4b92021d</a></p>อดิศักดิ์ วงศ์วิทยาพิทักษ์http://www.blogger.com/profile/07810111707815185918noreply@blogger.com0