มานพ กองอุ่น
มานพ กองอุ่น
เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009
-
ติดตั้งและใช้งาน reCaptcha ใน Yii Framework 2
28 มี.ค. 2020 Tutorialในบทเรียนรู้นี้เรามาติดตั้งและใช้งาน reCaptcha ใน Yii Framework 2 กันนะครับ reCaptcha เป็นบริการหนึ่งของ Google ครับ ซึ่งให้บริการในการ Validate ตัวอักขระรูปภาพ เพื่อป้องกันการ Submit จาก Bot หรือ Script ต่างๆ โดยทำให้แน่ใจว่าถูก Submit ด้วยมนุษย์นั่นเอง ก่อนอื่นเข้าไปสร้าง Key กันก่อนโดยเข้า...
-
กำหนดให้ Module เปลี่ยน Theme แตกต่างจาก Theme หลัก ใน Yii Framework 2
8 ก.พ. 2020 Tutorialหลายๆ ครั้งที่เราเขียน Web Application ด้วย Yii Framework 2 นั้น เราต้องการเปลี่ยน Theme ในแต่ละ Module นั้นก็สามารถทำได้ เช่น เรามี Theme หลักของเว็บอยู่แล้ว แต่ต้องการเปลี่ยน Theme ใน Module user เพื่อให้ user ที่ login เข้ามาเห็นหน้าจอที่แตกต่างจาก Theme หลัก เป็นต้น วิธีการตั้งค่า ให้เปิดไฟล์...
-
แสดงหน้าเว็บ 1 รายการจาก API ด้วย Nuxt
29 ธ.ค. 2019 Tutorialบทเรียนรู้นี้เรามาเขียนโปรแกรมแสดงหน้าเว็บ 1 รายการจากหน้า index ที่รวมเนื้อหาไว้ เช่น หน้ารวมของ Blog เมื่อคลิกแต่ละเรื่องก็จะแสดงรายละเอียด เป็นต้น ในบทเรียนรู้นี้เรามาเขียนโปรแกรมแสดงรายละเอียดกัน สร้างไฟล์ pages/posts/_id/index.vue จากนั้นเขียนโปรแกรมดังนี้ <template> &l...
-
สร้าง Component และเรียกใช้ Component ใน Nuxt
29 ธ.ค. 2019 Tutorialในบทเรียนรู้นี้เรามาสร้าง Component ใน NuxtJS และเรียกใช้งาน โดยจะดึงข้อมูลมาจาก API จากนั้นนำมาใส่ใน Card ของ Bootstrap4 ดังนี้ สร้างไฟล์ components/Card.vue จากนั้นเขียนคำสั่งดังนี้ <template> <div class="col-md-4"> <div class="card bg-light mb-3 shadow">...
-
ดึงข้อมูล API ด้วย Axios ใน NuxtJS
22 ธ.ค. 2019 Tutorialใน nuxtjs มี package axios ที่ embbed มาด้วย ชื่อ @nuxtjs/axios ดังนั้นเราสามารถเรียกใช้งานได้ ในที่นี้จะทดสอบเรียก api จาก jsonplaceholder โดยเขียนโปรแกรมที่ไฟล์ pages/posts/index.vue ลักษณะดังนี้ <template> <div> <h4>Posts page</h4> <div class...
-
การสร้างไฟล์ CSS ไว้ใช้งานแบบ Global ใน Web Application NuxtJS
22 ธ.ค. 2019 Tutorialในบทเรียนรู้นี้เรามาสร้างไฟล์ CSS แล้วนำมาโหลดเข้าใช้งานแบบ Global CSS ใน NuxtJS โดยเราจะสร้างไฟล์ main.css ใน assets/styles/main.css จากนั้นเขียนคำสั่ง CSS ลักษณะดังนี้เพื่อให้เห็นการเปลี่ยนแปลง body { background-color: aquamarine; } จากน้ันเพิ่มไฟล์ main.css ใน config ของ nuxtjs โดยเ...
-
การใช้งาน Nuxt Link
22 ธ.ค. 2019 TutorialNuxt Link เป็นการกำหนด Link ไปยังหน้าต่างๆ ที่มีใน Web Application โดยจะใช้คำสั่ง nuxt-link ซึ่งมีลักษณะการใช้งานดังตัวอย่างต่อไปนี้ <template> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Nuxt</a> &l...
-
การสร้างหน้าแสดง Error ใน NuxtJS
22 ธ.ค. 2019 Tutorialเราสามารถเขียนหน้าจอแสดง Error หากไม่พบหน้า โดยสร้างไฟล์ layouts/error.vue จากนั้นใส่คำสั่งแสดง error ตามต้องการลักษณะดังนี้ <template> <div class="container"> <h3>ไม่พบหน้านี้</h3> </div> </template> ตัวอย่างเมื่อแสดงผล
-
การสร้าง Nav components ใน Nuxt และการเรียกใช้งาน
22 ธ.ค. 2019 Tutorialในขั้นตอนนี้เรามาสร้าง Navbar แบบ component ใน nuxtjs โดยสร้างไฟล์ components/Nav.vue จากนั้นเขียนคำสั่งดังนี้ <template> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Nuxt</a> <button class="navbar...
-
การนำ Bootstrap4 มาใช้กับ NuxtJS
21 ธ.ค. 2019 TutorialBootstrap4 เป็น CSS Framework จาก Twitter ที่มีคนใช้งานเป็นจำนวนมาก สามารถดูเพิ่มเติมได้จากเว็บไซต์ getbootstrap.com ซึ่งเราสามารถนำมาใช้กับ Web Application NuxtJS ของเราได้ โดยสามารถนำมาใช้งานใน 2 รูปแบบด้วยกันคือ เรียกใช้งานผ่าน CDN ติดตั้งเป็น npm package มาใน project ของเรา 1 ติดตั้...
-
ทำความเข้าใจกับ Nuxt child components
21 ธ.ค. 2019 Tutorialสำหรับ nuxt-child component นั้น ให้มองถึง layout หลัก กับ ไฟล์ที่ render แต่ละหน้า แต่ในที่นี้จะมาดูตัวอย่างใน pages เช่นเรามี folder pages/posts จากนั้นสร้างไฟล์ pages/posts.vue จากนั้นเขียนโปรแกรมให้มี nuxt-child component ลักษณะดังนี้ <template> <div> <h3>Pos...
-
Method สำหรับการ Validate ข้อมูลใน NuxtJS
21 ธ.ค. 2019 Tutorialเราสามารถเขียน method สำหรับการ validate ข้อมูลใน NuxtJS ได้ เช่นตัวอย่างนี้จะเป็นการตรวจสอบ params ที่ request ว่าให้เป็นตัวเลขเท่านั้น pages/posts/_id/index.vue <template> <h1>Posts page id {{$route.params.id}}</h1> </template> <script> export defaul...
-
Route Parameter ใน NuxtJS
21 ธ.ค. 2019 Tutorialเราสามารถเข้าถึง route parameter ของ nuxtjs ได้โดยใช้ $route โดยสามารถกำหนดในไฟล์ดังนี้ {{$route.params.id}} ตัวอย่างไฟล์ pages/users/_id/index.vue <template> <h1>Posts page id {{$route.params.id}}</h1> </template> ทดลองเปิดใน browser http://localhost:3000/po...
-
การสร้างหน้า Page แบบ Nested Page
21 ธ.ค. 2019 Tutorialใน nuxtjs page เราสามารถสร้างหน้า page แบบ nested ได้ ตัวอย่างการเรียกใช้งานส่วนใหญ่ เช่นการเปิด posts/index จะเรียก post ทั้งหมด หากเปิด post เข้าไป จะส่ง id ของ post ไปด้วย เป็นต้น /posts /posts/99 ในที่นี้ให้สร้าง folder posts ใน pages - pages/post จากนั้นสร้างไฟล์ index.vue...
-
การสร้างหน้า Page ใน NuxtJS
21 ธ.ค. 2019 Tutorialสำหรับ NuxtJs นั้นเราสามารถสร้างหน้า page เก็บไว้ใน folder pages โดย NuxtJS จะนำชื่อไฟล์ไปสร้างเป็น route ให้โดยอัตโนมัติ เช่น ไฟล์ชื่อ posts.vue pages/posts.vue <template> <h1>Posts page</h1> </template> เราสามารถเปิดจาก browser ได้ผ่าน url http://localhost:...
-
เริ่มต้นทำ Web Application ด้วย NuxtJS
21 ธ.ค. 2019 TutorialNuxt.js เป็น JavaScript Framework ที่ Base on Vue.js libary (vue, vue-router และ vuex) และเครื่องมือพัฒนาอันทรงพลัง (webpack, Babel และ PostCSS) เป้าหมายของ Nuxt คือการทำให้การพัฒนาเว็บไซต์มีประสิทธิภาพโดยคำนึงถึงประสบการณ์ของนักพัฒนาที่ยอดเยี่ยม การติดตั้ง สำหรับการติดตั้งนั้นต้องทำใ...
-
Flutter สำหรับทำ Web
15 ธ.ค. 2019 Tutorialในบทเรียนรู้นี้มาทำ Web โดยใช้ Flutter นะครับ ก่อนอื่น Flutter สำหรับ Web ยังไม่ Stable นะครับ ให้เลือก channel ที่เป็น beta ก่อนนะครับ โดยใช้คำสั่งนี้ flutter channel beta flutter upgrade flutter config --enable-web จากนั้นสร้าง Project ด้วยคำสั่ง flutter create myweb จากนั้...
-
แปลง Collation ทุก Column ในทุก Table ให้เป็นชนิดที่ต้องการด้วย phpMyAdmin สำหรับ MariaDB และ MySQL
7 ธ.ค. 2019 Tutorialหลายครั้งที่เกิดปัญหาเมื่อใช้คำสั่งเช่นการ UNION เพื่อสร้าง View ประสบปัญหา Error Collation ของข้อความไม่ตรงกัน ทำให้ไม่สามารถใช้คำสั่งดังกล่าวได้ ในฐานข้อมูล MariaDB และ MySQL ทั้งนี้เราสามารถใช้ phpMyAdmin เพื่อกำหนดให้ข้อความเปลี่ยน Collation ได้ทั้งหมด โดยมีขั้นตอนดังนี้ เลือกฐานข้อ...
-
UML Designer อีกเครื่องมือคู่กายสำหรับนักพัฒนาซอร์ฟแวร์
19 พ.ย. 2019 Tutorialการจะสื่อสารทั้งกับลูกค้าและทีมนักพัฒนาซอร์ฟแวร์ และโปรแกรมเมอร์เองก็ตาม เป็นความยากลำบากมากเหมือนกันที่จะคุยเห็นภาพเข้าใจตรงกัน การใช้เครื่องมือที่ออกแบบตั้งแต่กรอบความคิดจนถึง Class นี่ก็มีความจำเป็นเช่นกัน วันนี้จะมานำเสนอ Software ในการออกบบ Unified Modeling Language หรือที่เรียกกันย่อๆ ว่า U...
-
NOSTRA MAP API แผนที่ประเทศไทย ใช้งานง่าย พัฒนาโดยคนไทย
2 พ.ย. 2019 TutorialNostra map ถือเป็นผลิตภัณฑ์หนึ่งที่หลายคนน่าจะเคยได้ยินกันมาบ้าง พัฒนาโดยบริษัท โกลบเทค จำกัด ซึ่งเป็นผู้นำด้านแผนที่ดิจิตอลประเทศไทยและภูมิภาคอาเซียนอย่างครบวงจร อีกทั้งยังให้บริการด้านการวิเคราะห์ข้อมูลเชิงพื้นที่สำหรับธุรกิจ (Map for GIS) ระบบนำทางแผนที่บนรถยนต์ชื่อดังหลายค่าย (Map for Naviga...
