Get Adobe Flash player

Monthly Archives: October 2017

การติดตั้ง Open edX ผ่าน Virtual machine

Download ไฟล์ Open edX จากเว็บไซต์

https://bitnami.com/stack/edx/virtual-machine

 

จากนั้นเปิดโปรแกรม Virtual Box ขึ้นมาเลือก “File -> Import”

 

 

Brows ไฟล์ OpenedX ที่ดาวน์โหลดมา จากนั้นกด Import

เปลี่ยน Guest OS Type เป็น Debian (64Bit หรือ 32 Bit)

Linux > Debian(ุ64 Bit)

กด Import

 

เมื่อโปรแกรมทำการ Import File เสร็จเรีัยบร้อยแล้วจากนั้น กด Start รอโปรแกรม Run จนขึ้นหน้า

รหัสที่ใช้ Login

User: bitnami

Password : bitnami

ขั้นตอนนี้จะเป็นการเปิดใช้งานหน้า Desktop โดยใช้คำสั่ง

กด Y เพื่อยืนยัน

วิธีแก้ปัญหา constructor error ใน phpmyadmin

  1. ใช้คำสั่ง sudo nano /usr/share/php/php-gettext/streams.php
  2. บรรทัดที่ 52 เปลี่ยนฟังก์ชั่น function StringReader ($str=”) { เป็น function __construct($str=”) {
  3. บรรทัดที่ 90 เปลี่ยนฟังก์ชั่น function FileReader($filename) { เป็น function __construct($filename) {
  4. บรทัดที่ 146 เปลี่ยนฟังก์ชั่น function CachedFileReader($filename) { เป็น function __construct($filename) {
  5. ใช้คำสั่ง sudo nano /usr/share/php/php-gettext/gettext.php
  6. บรรทัดที่ 36 เปลี่ยนฟังกชั่น function gettext_reader($Reader, $enable_cache = true) { เป็น function __construct($Reader, $enable_cache = true) {

ionic 2 : Create Page (ionic generate page)

ionic 2 : Create Page สร้าง Page ด้วยคำสั่ง ionic generate page เนื่องจาก ionic 2 เมื่อสร้างไฟล์ใหม่จะต้องมีไฟล์ที่ประกอบไปด้วย ไฟล์ .html, .ts (typescript), .scss (css) ใช้คำสั่งในการสร้าง Page จะได้ไฟล์ทั้งหมดทันทีดังภาพด้านล่าง

คำสั่งทั้งหมดที่เกี่ยวกับสร้าง Page

จัดทำรายงานสรุปการเข้าร่วมกิจกรรมของนักศึกษาบนระบบทรานสคริปกิจกรรม ปีการศึกษา 2560

จัดทำรายงานสรุปการเข้าร่วมกิจกรรมของนักศึกษาบนระบบทรานสคริปกิจกรรม ปีการศึกษา 2560 สามารถเข้าใช้งานได้ที่

http://activity.rmutp.ac.th/ และเลือกเมนู สรุปรายงานปีการศึกษา 2560

HTML5 picture element เพื่อทำ responsive image ที่ดีกว่า

ในปัจจุบันเป็นที่รู้กันว่าเราต้องทำเว็บไซต์ให้รองรับกับหน้าจอหลาย ๆ ขนาด (responsive web) รวมทั้งรูปภาพที่ใช้ในเว็บด้วย โดยวิธีที่ใช้กันมากคือการกำหนด CSS ให้ที่ทำให้รูปภาพมีความกว้างตามขนาดพื้นที่ที่มี เช่น

การใช้ CSS กำหนดให้รูปภาพเป็น responsive image สามารถใช้งานได้ดี แต่ก็ยังมีปัญหาเรื่องประสิทธิภาพ เพราะต้องเตรียมรูปภาพขนาดใหญ่เผื่อไว้รองรับหน้าจอขนาดใหญ่ เมื่อถูกเปิดด้วยหน้าจอขนาดเล็กก็ต้องโหลดรูปภาพขนาดใหญ่โดยไม่จำเป็น และหากพื้นที่เป็นแนวตั้ง แต่รูปภาพเป็นแนวนอน ก็จะส่งผลให้รูปภาพถูกย่อจนเล็กดังภาพ

 

ซึ่งในจุดนี้ HTML5 picture element จะเข้ามาช่วยได้ โดยการยอมให้เราเตรียมรูปภาพหลากหลายขนาดที่เหมาะสมกับหน้าจอขนาดต่าง ๆ และ picture element จะสั่งให้ web browser โหลดเฉพาะไฟล์ขนาดที่เหมาะสมตามที่เราตั้งค่าไว้  (เงื่อนไขเหมือนกับ media screen ของ CSS) โดยมีตัวอย่างดังนี้

ถ้าหน้าจอขนาด 600px ก็จะโหลดรูป img_pink_flowers แทน img_orange_flowers ทำให้ใช้ปริมาณเครือข่ายเท่าที่จำเป็น คือหน้าจอขนาดใหญ่โหลดภาพขนาดใหญ่ แต่ถ้าเป็นหน้าจอขนาดเล็กก็โหลดภาพขนาดเล็ก ดังภาพ

credit: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images–cms-21015

ปรับปรุงระบบลาออนไลน์ เพิ่มหน้าให้ผู้ดูแลของหน่วยงานกลาง ( กบ.) สามารถเข้าดูการลาทุกคนได้

ปรับปรุงระบบลาออนไลน์ เพิ่มหน้าให้ผู้ดูแลของหน่วยงานกลาง ( กบ.) สามารถเข้าดูการลาทุกคนได้

การใช้งาน Bootstrap 4

การใช้งาน Bootstrap 4

BOOTSTRAP 4 VS BOOTSTRAP 3 แตกต่างกันยังไง

ก่อนอื่นเลยคนที่เคยใช้ Bootstrap 3 มาก่อนน่าจะมีพอสมควรครับ ข้อแตกต่างของ Bootstrap 4 กับ Bootstrap 3 คือ:

  • โค้ดของ Bootstrap 4 เขียนขึ้นใหม่ทั้งหมดตั้งแต่ต้น
  • Bootstrap 3 รองรับตั้งแต่ Internet Explorer 8 ส่วน Bootstrap 4 รองรับตั้งแต่ Internet Explorer 9
  • Bootstrap 3 เขียนด้วย LESS CSS ส่วน Bootstrap 4 เขียนด้วย SASS
    แต่ใครไม่ได้ใช้ LESS / SASS ก็ไม่เป็นไร เพราะเค้ามีเวอร์ชั่น CSS ธรรมดาให้ด้วย และสำหรับโปรเจคส่วนใหญ่ CSS ก็เพียงพอแล้วครับ
  • Bootstrap 4 สามารถใช้ Grid แบบ Flexbox ได้ (มีทั้งเวอร์ชั่น Flexbox และเวอร์ชั่นไม่ใช่ Flexbox) – ข้อดีของ Flexbox คือ เราสามารถทำให้คอลัมน์สูงเท่ากันอัตโนมัติได้ และสลับตำแหน่งในแต่ละหน้าจอได้ ถ้าใครสนใจกริดแบบ Flexbox แอดขอแนะนำ Bulma CSS Framework ที่เขียนถึงไปก่อนหน้านี้ด้วยครับ
  • Bootstrap 4 ขนาดไฟล์เบากว่า Bootstrap 3 เล็กน้อย
    • Bootstrap 3 ขนาดไฟล์ CSS = 121kb + JS = 37kb รวมเป็น 158kb
    • Bootstrap 4 ขนาดไฟล์ CSS = 105kb + JS = 45kb รวมเป็น 150kb
  • Bootstrap 3 เปิดตัวมานานแล้ว จะหาวิธีแก้ปัญหาต่าง ๆ ใน Google / Stackoverflow ได้ง่ายกว่า
  • Bootstrap 4 เพิ่มกริดขนาด xl และปรับความกว้างในแต่ละระดับจาก Bootstrap 3

 

การใช้งาน Bootstrap แบบไม่ต้อง Download

Bootstrap มีสิ่งที่เราเรียกว่า CDN หรือ Content Delivery Network ซึ่งมีผู้ใหญ่ใจดีโฮสต์ไฟล์ CSS และ JavaScript ของ Bootstrap ให้เราเรียกมาใช้ฟรี ๆ โดยคลิกเข้าไปที่:

เว็บไซต์ของ Bootstrap 4 

 

– โดยสามารถ Copy โค๊ดด้านบนมาวางในไฟล์ HTML ของเราได้เลยโดยใส่ไว้ภายใน tag <head>

 

– การเพิ่ม Plugin Javascript , Jquery ทำได้โดย copy โค้ดไปวางก่อนปิด tag </body>

 

การใช้งาน BootStrap แบบ Download

– คลิกที่ Download Bootstrap

– จากนั้นแตกไฟล์แล้วจะได้ โฟล์เดอร์ ดังรูปภาพ

– โดย Copy โฟล์เดอร์ทั้งสองไปวางไว้ในโฟล์เดอร์งาน Project ของเรา

 

– ภายในไฟล์ HTML นั้น Bootstrap นั้นจะเรียกใช้ HTML DOCTYPE  ซึ่งถ้าไม่มีการเรียกใช้งานและการแสดงผลจะออกมาไม่สมบูรณ์

 

 

– การเรียกใช้งานจะใช้โค้ดดังรูปภาพด้านบนซึ่งจะเรียกตามที่อยู่ของไฟล์ css ในโฟล์เดอร์

– โดยนำโค้ดมาใส่ไว้ภายใน tag <head>..</head> ดังรูปภาพ

 

การสร้าง Web Form Method Post ของ ASP.NET คล้ายๆกับ Form method POST ของ PHP

การสร้าง Web Form Method Post  ของ  ASP.NET คล้ายๆกับ Form method POST ของ PHP

หน้า Form Post

หน้ารับค่า Post StudentListAddDo.aspx