สารบัญคู่มือ Yii Framework 2 (Yii2)
พื้นฐาน Yii Framework คืออะไร หลักการทำงานของ Yii Framework 2 Request Life Circle ทำความเข้าใจ MVC ใน Yii Framework 2 ทำความเข้าใจเส้นทาง (R…
admin
69,371
บทเรียนที่เกี่ยวกับ “css”
พบ 52 บทเรียน
admin
69,371
การสร้าง Theme จาก Material Design ใน Yii2 Advanced
สำหรับบทความชุดนี้เป็นแนวทางสำหรับการทำ Theme ในรูปแบบ Material Design สำหรับ Yii2 Advanced Application Template นะครับ โดยมีขั้นตอนดังต่อไป…
admin
22,002
Cascading Style Sheet (CSS)
CSS เป็นรูปแบบของการจัดการกับ Tag ใดๆ ของ HTML โดยสามารถกำหนดรูปแบบ หรือ Attribute ให้กับ Tag ต่างๆ ได้อย่างสวยงามและเป็นรูปแบบตามต้องการได้…
admin
5,361
การใส่ CSS แบบ Import File
ไฟล์ที่เป็น CSS นั้น จะมีนามสกุล หรือ Extension เป็น .css ซึ่งโดยทั่วไปแล้วจะสร้างไฟล์ CSS แยกอิสระจากไฟล์ html เพื่อให้มีการจัดการได้ง่ายมา…
admin
8,141
Class และ ID
การใช้งานแบบ Inline และ การใส่ CSS ที่ <head> นั้นทำให้รูปแบบของ html tag ถูกกำหนดค่าใหม่ ในการเรียกใช้ทุกๆ ครั้งก็จะเป็นค่าใหม่ เช่น เมื่อเ…
admin
8,962
Pseudo Class
เป็นการกำหนดรูปแบบ css แบบหลายชั้น ตัวอย่างเช่น การกำหนด css ให้กับ tag a เป็นการกำหนดรูปแบบให้กับการเชื่อมโยงหรือลิ้งค์ 1. A:LINK การเชื่อม…
admin
3,976
การติดตั้ง Yii Booster Extension
Bootstrap เป็น CSS Framework ที่พัฒนาโดย Twitter จากนั้นมีผู้นำมาพัฒนาต่อเป็น Extension ให้สามารถใช้ได้กับ Yii Framework โดยรวบรวมทำเป็น Wid…
admin
6,581
Extension การสร้างรายงานในรูปแบบไฟล์ PDF ด้วย mPDF
ทำไมต้อง PDF? แน่นอนครับ คงเป็นเรื่องที่ยุ่งยากแน่ๆ เมื่อเราจะสร้างไฟล์ pdf โดยใช้เทคโนโลยีด้าน Web Application นั่นก็หมายความว่าเราจะเอาคำส…
admin
29,097
สารบัญ Bootstrap 3.x
สารบัญ Bootstrap 3.x Bootstrap คืออะไร? เรียนรู้ระบบ Grid ใน Bootstrap 3 การแสดงผลตัวอักษร (Typography) การนำ Bootstrap ไปใช้ใน Webpage การแ…
admin
6,437
Bootstrap คืออะไร?
Bootstrap คืออะไร? Bootstrap คือ Frontend Framework ที่รวม HTML, CSS และ JS เข้าด้วยกันสำหรับพัฒนา Web ที่รองรับทุก Smart Device หรือ เรียกว…
admin
71,691
การ Register ไฟล์ JavaScript และ CSS
เราสามารถ Register ไฟล์ JavaScript และ CSS ในหน้า Layout และหน้าเว็บของเราได้โดยใช้ Script ดังนี้ การ Register Core Script เป็นการโหลด Scrip…
admin
8,378
การลงทะเบียน (Register) ไฟล์และสคริป CSS JavaScript (Client Script) ใน Web Application ด้วย Yii Framework 2
ในการพัฒนา Web Application นั้น คงหนีไม่พ้นการนำ CSS และ JavaScript หรือเรียกว่าเป็น Client Script หรือสคริปที่ทำงานฝั่งไคลเอนต์ มาใช้งาน ซึ…
admin
12,123
การเขียนโปรแกรม Upload ไฟล์ด้วย Yii Framework 2
สำหรับการ Upload ไฟล์นั้นแน่นอนว่าเกือบทุก Web Application จะต้องมีการ Upload ไฟล์ ขึ้นไปที่ Server ทั้ง Upload แบบไฟล์เดียวหรือ Upload ทีละ…
admin
17,756
การใส่เครื่องหมายดอกจัน (*) สีแดงหลัง Label ที่เป็นแบบ Required ใน Yii Framework 2
ใน Yii Framework 1 นั้น Label ที่เป็นแบบ Required จะมีดอกจันมาพร้อม แต่เมื่อเป็น Yii Framework 2 ซึ่งเป็น Bootstrap แล้วไม่มี ดังนั้นเรามาเพ…
admin
14,901
การสร้างและแสดง Flash Message สำหรับ Yii Booster Extension
Flash Message คือข้อความที่แสดงเมื่อมีการกระทำใน Action ตัวอย่างเช่น หากมีการเข้าสู่ระบบสำเร็จก็แสดงข้อความบอกว่าเข้าสู่ระบบเรียบร้อย แต่หาก…
admin
4,606
รวม Package ที่ควรมีติด Atom สำหรับ Web Developer
รวม Atom Package ที่ควรมีติดไว้ใช้งาน Emmet Emmet ช่วยให้สามารถเขียน HTML และ CSS ได้รวดเร็วมากยิ่งขึ้น สามารถดู Cheat Sheet เพิ่มเติมได้ ht…
admin
26,489
การสร้าง PDF Barcode ด้วย Yii Framework 2
การสร้าง Barcode ด้วย Yii Framework 2 นั้นสามารถทำได้โดยใช้ Extension yii2-mpdf https://packagist.org/packages/kartik-v/yii2-mpdf ซึ่งสามารถ…
admin
13,900
การติดตั้งและใช้งาน Bower Package ใน Yii Framework 2
Bower เป็นแหล่งรวบรวม Package เช่น JavaScript, CSS Package ตัวอย่าง Bootstrap, Highcharts เป็นต้น ในที่นี้เราจะติดตั้ง Highcharts และทดลองใช…
admin
8,270
การทำเว็บไซต์ให้เป็นสีเทาด้วย CSS
สวัสดีครับ สำหรับบทเรียนรู้นี้เรามาพูดถึงการปรับแต่งหน้าเว็บไซต์ให้แสดงผลสีเทา โดยการใช้ CSS ซึ่งสามารถทำได้โดยใช้คำสั่งต่อไปนี้ <style> htm…
admin
11,860
การนำ Bootstrap ไปใช้ใน Webpage
สำหรับการนำ Bootstrap ไปใช้ใน Webpage นั้นสามารถทำได้หลายช่องทาง โดยใช้เครื่องมือต่างๆ หรือจะดาวน์โหลดมาใช้งานโดยตรงก็ได้ โดยมาดูรายละเอียดต…
admin
17,089
สร้าง PDF ภาษาไทยไฟล์แรกด้วย mPDF
ในบทเรียนรู้นี้เรามาทดลองการสร้างไฟล์ PDF เพื่อทดลองใช้งานภาษาไทย ในที่นี้จะใช้ข้อความจาก http://lorem.in.th/ ซึ่งเป็น Website ไว้สร้างข้อคว…
admin
30,510
การใส่ Font TH Sarabun ใน mPDF
สำหรับบทเรียนรู้นี้เรามาใส่ Font TH Sarabun ใน mPDF เพื่อสร้างเอกสาร PDF กันครับ ซึ่งส่วนใหญ่แล้วงานราชการจะนิยมใช้ Font TH Sarabun กัน โดยเ…
admin
50,472
Vue.js: Component ที่มี props
อีกคุณสมบัติหนึ่งของ vue เราสามารถกำหนด props ใน component ได้ ดังตัวอย่างต่อไปนี้ index.html <html> <head> <link rel="stylesheet" href="ind…
admin
10,563
มาฝัง font สวยๆ ลงใน web page กันเถอะ
ในบทเรียนรู้นี้เรามาเรียนรู้การฝัง font ลงใน web page โดยเป็น font หรือ แบบอักษร ที่ไม่มีทั่วไป ให้สามารถแสดงผลกับทุก browser ในทุกๆ เครื่อง…
admin
40,196
Angular คืออะไร
Angular คือ เฟรมเวร์ค (framework) สำหรับสร้างแอพลิเคชั่นในฝั่งไคลเอ็นในรูปแบบของ HTML, CSS และ JavaScript/TypeScript ซึ่ง TpyeScript จะถูก c…
admin
39,186
สถาปัตยกรรมใน Angular Apps
สถาปัตยกรรมของ Web Application ในยุคใหม่นี้ประกอบไปด้วย 2 ส่วนใหญ่ๆ ด้วยกันนั้นคือ Front-end และ Back-end Front-end ทำงานที่ฝั่ง Client ผ่าน…
admin
8,126
สร้าง Angular App แรกกัน
ในขั้นตอนนี้เรามาสร้าง Angular App แรก กันโดยพิมพ์คำสั่ง ng new hello-world โดยที่ hello-world คือชื่อของ Project ที่เราต้องการสร้าง ซึ่ง ng…
admin
7,862
ใช้งานฟอนท์ THSarabun ใน html2pdf
เนื่องจาก html2pdf ใช้ library จาก TCPDF มาเพิ่มเติมคำสั่งด้าน html css ให้สมบูรณ์ยิ่งขึ้น และการใช้งาน html2pdf จะต้อง import TCPDF ด้วย เร…
fucyber
5,905
การติดตั้งและใช้งาน SweetAlert2 โดยไม่ใช้ Extension ใน Yii Framework 2
sweet alert 2 เป็น css และ js ที่ช่วยในการทำ alert ต่างๆ ในที่นี้เราเปลี่ยน alert ใน yii framework 2 ไปใช้ sweet alert แทน https://limonte.g…
admin
12,750
ติดตั้งและใช้งาน Bootstrap4 ใน Yii Framework 2
Bootstrap4 ใน Yii Framework 2 นั้นจะมาใน Yii version 2.1 ซึ่งก็คงต้องรออีกสักระยะ และประกอบกับ Bootstrap4 เอง ณ ตอนนี้ก็ยังเป็น version beta…
admin
14,193
บีบอัด JavaScript และ Cascade Style Sheet ใน Yii Framework 2
สำหรับบทเรียนรู้นี้เรามาทำการรวมไฟล์ JavaScript และ ไฟล์ CSS เพื่อบีบอัดให้มีขนาดเล็กลง ซึ่งแน่นอนจะทำให้การโหลดเว็บไซต์ได้ไวมากยิ่งขึ้น โดย…
admin
4,242
สร้าง QR Code ด้วย mPDF
ใน mPDF เราสามารถสร้าง QR Code แทน Barcode ได้โดยเปลี่ยน type ของ barcode ดังนี้ <?php $qr = 'data or link'; ?> <barcode code="<?=$qr?>" typ…
admin
9,074
การติดตั้ง bower package ใน Yii Framework 2 และ การสร้าง theme ด้วย materialize
bower เป็น package js และ css ที่สามารถนำไปใช้ใน package ส่วนใหญ่ที่เป็น js web application เช่น nodejs เป็นต้น โดยการนำมาใช้กับ Yii Framewo…
admin
3,866
Yii Framework2 กับ VueJS เรียก JSON ด้วย Axios
ในบทความนี้เป็นแนวทางในการนำ VueJS มาใช้ร่วมกันกับ Yii Framework 2 ในการโหลดข้อมูล API / JSON มาแสดงผลด้วย Axios โดยไม่ได้ Refresh หน้าเว็บ…
admin
10,111
Vue.js: สวัสดีชาวโลก!
สำหรับบทเรียนรู้นี้มาสวัสดีชาวโลกหรือ Hello World กับ Vue.js กันนะครับ ในที่นี้จะใช้การเรียก Vue.js ผ่าน Browser โดยไม่ได้ติดตั้งผ่าน cli เพ…
admin
6,034
Vue.js: การจัดการเมื่อผู้ใช้คลิกปุ่ม
เมื่อผู้ใช้ทำบางอย่างเช่นการคลิกปุ่ม เราสามารถเขียนโปรแกรมให้ทำงานบางอย่างได้ผ่าน method โดยเมื่อเกิด action เช่น click ให้เรียก method ที่ต…
admin
6,113
Vue.js: v-model
v-model เป็นการ 2 way binding คือเมื่อเปลี่ยนแปลงค่าฝั่ง html ฝั่ง program data ก็เปลี่ยนตาม เช่นกันเมื่อเปลี่ยนฝั่ง program data ฝั่ง html…
admin
8,131
Vue.js: Components
Components ใน Vue เป็นการกำหนดชิ้นส่วนการแสดงผลใน vue application ซึ่งเราสามารถแบ่งการทำงานให้เป็นอิสระต่อกันได้ index.html <html> <head> <l…
admin
4,209
ใส่ ... เมื่อข้อความยาวด้วย CSS
ตัวอย่างนี้เป็นการกำหนดให้ข้อความตัดอัตโนมัติเมื่อยาวเกินกว่าขอบเขตการแสดงผล โดยใช้ css ในการตัดด้วยคำสั่ง overflow โดยมีการกำหนดดังนี้ <div…
admin
4,520
กำหนดให้รูปภาพย่อ-ขยายอัตโนมัติตามขนาดหน้าจอด้วย CSS
สำหรับบทเรียนรู้นี้เป็นการกำหนดให้รูปภาพย่อขยายอัตโนมัติตามขนาดหน้าจอที่เปิด โดยกำหนดดังนี้ <div class="page-content"> <img src="path/to/ima…
admin
30,610
สร้าง theme bulma ใน Yii Framework 2
Bulma เป็น CSS Framework อีกตัวหนึ่งที่มีความนิยมไม่แพ้ Bootstrap ซึ่งเราสามารถนำมาใส่ใน Yii Framework 2 เราได้เหมือนกัน ติดตั้ง Bulma ก่อนอ…
admin
6,007
การติดตั้ง Package yii2-bootstrap4 สำหรับ Yii Framework 2
หลังจากที่รอคอยมายาวนานหลังจาก Bootstrap ออก version 4 ตอนนี้ Yii Framework ก็ได้ออก Package สำหรับสาวก Bootstrap 4 เรียบร้อยแล้ว โดยใช้ชื่อ…
admin
8,061
การเพิ่ม Font ใน mPDF (Yii2 กับ kartik mpdf และ mPDF version 7.x)
ในบทเรียนรู้นี้เรามาเพิ่ม Font ใน mPDF version 7 กัน โดย Concept คือ เพิ่ม Font Angsana และ Sarabun โดยมีขั้นตอนดังนี้ 1.นำ Font Angsana.ttf…
admin
7,171
เริ่มต้นทำ Web Application ด้วย NuxtJS
Nuxt.js เป็น JavaScript Framework ที่ Base on Vue.js libary (vue, vue-router และ vuex) และเครื่องมือพัฒนาอันทรงพลัง (webpack, Babel และ Post…
admin
12,895
การนำ Bootstrap4 มาใช้กับ NuxtJS
Bootstrap4 เป็น CSS Framework จาก Twitter ที่มีคนใช้งานเป็นจำนวนมาก สามารถดูเพิ่มเติมได้จากเว็บไซต์ getbootstrap.com ซึ่งเราสามารถนำมาใช้กับ…
admin
7,304
การสร้างไฟล์ CSS ไว้ใช้งานแบบ Global ใน Web Application NuxtJS
ในบทเรียนรู้นี้เรามาสร้างไฟล์ CSS แล้วนำมาโหลดเข้าใช้งานแบบ Global CSS ใน NuxtJS โดยเราจะสร้างไฟล์ main.css ใน assets/styles/main.css จากนั้…
admin
4,132
การใช้ Font จาก Google Font ใน Web Page
ไม่ได้เข้า Google Font หลายวัน วันนี้มีโอกาสได้เข้า https://www.google.com/fonts มีตัวเตือนว่า A new version of Google Fonts is available. T…
admin
59,697
Editor และ Integrated Development Environment (IDE) สำหรับนักพัฒนา (Developer)
Web Developer EditPlus EditPlus เป็น Editor ที่ได้รับความนิยมมายาวนาน ซึ่งเป็น Editor ตัวเล็กๆ โหลดได้ไวรองรับการทำงานได้หลายภาษาเช่น HTML,…
admin
9,633
บีบอัดข้อมูลเว็บไซต์ให้เล็กลงด้วย Apache Mode Deflate
สำหรับบทเรียนรู้นี้เป็นการใช้งาน Apache Modules ในการบีบอัดเว็บไซต์ ให้เล็กลงก่อนส่งให้ Client (อาจไม่เกี่ยวกับ Yii2 นะครับ แต่ก็ใช้กับ Yii2…
admin
5,250
Vue.js: วนลูปด้วย For
ในการวนลูปด้วย Vue นั้นเราสามารถใช้ v-for ในการวนลูปได้ดังตัวอย่างต่อไปนี้ index.html <html> <head> <link rel="stylesheet" href="index.css">…
admin
5,951
Vue.js: เงื่อนไข (Conditionals)
สำหรับเงื่อนไขในการเขียนโปรแกรมใน Vue จะใช้คำสั่งที่เรียกว่า v-if นั่นเอง โดยมีตัวอย่างของการเขียนดังต่อไปนี้ index.html <html> <head> <link…
admin
6,758