Get Adobe Flash player

chatchai

การติดตั้ง 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 เพื่อยืนยัน

การใช้งาน 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> ดังรูปภาพ

 

Poster Studylife

การติดตั้ง Composer


     Composer คืออะไร การติดตั้งบน PHP Composer เช่น XAMPP , Appserv และอื่นๆ การพัฒนาโปรแกรม php เรากำลังอยู่ในยุคของการจัดการกับ Package และ Library ต่าง ๆ ที่เป็น Open Source ที่มีอยู่มากมายตามแหล่งต่างๆ ให้มีความเป็นระบบเรียบร้อย มีความปลอดภัยในการดาวน์โหลดและ นำมาใช้ เพราะก่อนหน้านี้เราจะเห็นว่าในกรณีที่จะต้องใช้ Library ต่างๆ นั้น จะต้องใช้วิธีการดาวน์โหลดไฟล์จากแหล่งนั้นมาใช้งาน ซึ่งจะพบกับความเสี่ยงต่างๆ จากการดาวน์โหลด ไม่ว่าจะเป็นความปลอดภัย ไวรัส มัลแวร์ ความน่าเชื่อถือ รวมทั้งไฟล์นั้นใช้งานตรงกับเวอร์ชั่นของ php ที่จะสามารถใช้งานได้หรือไม่ ซึ่งปัญหาเหล่านี้ได้ถูกพัฒนาจนมาถึงปัจจุบัน โดย Composer แนวคิดคือจะรวบรวมและจัดระเบียบ package และ library ต่างๆ ให้มาอยู่ในแหล่งเดียวกัน สามารถติดตั้ง Library ได้จาก Command ซึ่งโปรแกรมจะทำการตรวจสอลและดาวน์โหลด Package นั้นๆ มาใช้งาน 


เข้าไปยังเว็บไซต์

https://getcomposer.org/

 

คลิกไปยังปุ่ม Download

 

 

ดาวโหลดตัว Composer_Setup.exe

 

คลิกที่ปุ่ม Next >

 

เลือกโฟล์เดอร์ (Path ) ที่เราจะติดตั้ง

 

คลิกปุ่ม Next >

 

ตั้งค่า Proxy เชื่อต่อไปยังเครื่อง Sever (ถ้ามี)

คลิกปุ่ม Next >

 

กดปุ่ม Install

 

คลิกปุ่ม Next >

 

กดปุ่ม Finish

 

จากนั้นเปิด Command Line ขึ้นมา

 

พิมพ์คำว่า Composer จากนั้นจะได้ผลลัพธ์ตามรูปภาพ