ตามธรรมเนียมไทยใครไปเยือนบ้านไหน ต้องไหว้เจ้าของบ้าน ไปเยือนสถานที่ก็ต้องให้ความเคารพสถานที่นั้น การเขียนโปรแกรมก็เหมือนกัน ก่อนเริ่มต้นที่จะพัฒนาโปรแกรมด้วยภาษานั้นๆ ก็ต้องทักทายเพื่อทำความคุ้นเคย เสมือนกับการให้ความเคารพเจ้าของบ้านเพื่อที่ต่อไปจะได้เขียนโปรแกรมได้อย่างสะดวกราบรื่น error หรือ bug ไม่มาแผ้วพาน
ดังนั้นเดี่ยวเรามาเริ่มต้นใช้ Bootstrap กัน โดยการเขียนโปรแกรมที่ classic ที่สุดในโลกก็คือ “Hello World” ( ^-^ ) เริ่มต้นนะครับ เราจะใช้ NetBeans สร้าง project โดยทำการ new project ดังรูป

หลังจากนั้น กรอกชื่อ project แนะนำว่าให้เป็นตัวอักษรภาษาอังกฤษทั้งหมด เพราะ NetBeans จะนำเอาชื่อ project ไปสร้าง folder เพื่อเก็บ file web ในที่นี้ผมสร้างชื่อ hellobt จากรูปจะเห็นว่า ที่อยู่ที่เก็บไฟล์จะเป็นที่อยู่ที่ folder ที่เราติดตั้ง web server เช่น bitnami/wampstack-5.4.33-0/apache2/htdocs

ขั้นตอนถัดไปก็คือเลือก template ที่จะใช้ ตรงนี้แหละที่เป็นการติดตั้ง Bootstrap เข้าไปใน web เรา ให้เลือกเป็น “Select Template” (ในกรณีที่ไม่มี file Bootstrap ให้เลือกแบบ online แทน NetBeans จะไปนำ Bootstrap มาจาก site หลักเอง) เมื่อเลือกเสร็จให้ browse ไปที่ file zip ของ Bootstrap ที่เตรียมไว้ตั้งแต่บทความที่แล้ว

หลังจากนั้นมากำหนด JavaScript ซึิ่งที่เห็นในรูปจะเป็นการติดตั้งแบบ load มาจาก internet แต่ผมจะติดตั้งแบบเรามี file เรียบร้อยแล้ว ดังนั้นขั้นตอนนี้ก็ข้ามไปได้เลย ซึ่งก็คือการกด finish ที่หน้าจอนั่นเอง ถือว่าเสร็จสิ้นในการสร้าง project web บน NetBeans

เมื่อเราสร้างเสร็จใน NetBeans ก็จะมี project ใหม่เกิดขึ้นด้านซ้าย ดังรูป

ต่อไปเรามาดูโครงสร้างของ Bootstrap กันว่ามี file folder อะไรบ้าง ปกติ Bootstrap จะมี folder ที่เกี่ยวข้อง 3 folders คือ

  • css
  • fonts
  • js

โดยพระเอกคือ file css ที่อยู่ใน folder css ซึ่งจะมี file css ธรรมดา กับ file .min.css ซึ่งถ้าเราจะดู source code ให้ดู file .css ธรรมดา แต่เวลาเอาไปใช้จริงให้ใช้ .min.css เพราะเป็นไฟล์ที่ผ่านการบีบอัดแล้ว (คือตัดช่องว่างและการขึ้นบรรทัดใหม่ออก) ทำให้มีขนาดเล็ก เวลาผู้ใช้งานเปิด web เรา จะได้เปิดไว โดยเฉพาะในอุปกรณ์พกพา จำเป็นใช้ขนาดเล็ก ถึงจะดีที่สุด ส่วน js ก็เหมือนกันมีแบบ .min.js ด้วย

file .css เป็น file หลัก ที่จะทำการตกแต่ง web ให้เป็นไปตามต้องการ ตรงนี้ก็คือ css framework ที่ชื่อ Bootstrap นั่นแหละครับ ส่วน js ก็คือ JavaScript ที่จะมาช่วยเรื่อง interactive กับผู้ใช้ ซึ่งต้องใช้ jQuery ช่วยทำงาน ดังนั้นใน project ที่สร้างขึ้นต้อง copy jQuery .js file มาใส่ใน folder js ด้วย จะได้ดังรูป

ส่วน folder fonts ก็จะเก็บ file icon ที่ไว้สำหรับตกแต่งใน ui ต่างๆ ของ Bootstrap (ซึ่งเราจะได้ใช้กันในโอกาสต่อไปครับ)

ต่อไปเราจะมาเริ่มสร้าง file web ที่เรียกใช้ Bootstrap ในตอนที่เราสร้าง project นั้น NetBeans ก็ได้สร้าง index.html ให้เราโดยอัตโนมัติ ซึ่งเราจะใช้ file นี้เป็น file แรกและเป็น file หลัก
ขั้นตอนแรกต้องมีการประกาศประเภทเอกสารก่อน ซึ่งเราจะใช้ประเภทเป็น HTML5 ส่วนบนสุดจะต้องมี <!DOCTYPE html>
ส่วนต่อมา ส่วน head ของ html จะมีการประกาศดัง code นี้ <meta name="viewport" content="width=device-width, initial-scale=1.0"> ซึ่งจะเป็นการกำหนดให้ขนาดการแสดงผลมีขนาดความกว้างเท่ากับความกว้างของหน้าจอคอมพิวเตอร์หรืออุปกรณ์พกพาที่เปิด web นี้

หัวใจสำคัญของการประกาศเร่ิมต้น คือการเรียกใช้ file css ถ้าขาดกระบวนการนี้ไป web ที่เราพัฒนาขึ้นก็จะกลายเป็น web ธรรมดา โดยในส่วน head นั้นจะมีการ link ไปที่ css ของ Bootstrap ดังนี้ <link href="css/bootstrap.min.css" rel="stylesheet"> โดยเฉพาะ rel นั้น ต้องมีนะครับ ขาดไม่ได้ เพราะเป็นการบอกถึงความสัมพันธ์ของ file ที่เป็นแบบ stylesheet ครับ

ส่วน JavaScript เราจะมีการประกาศไว้ก่อนปิด body ด้วยเหตุผลที่ว่าการประมวลผลจะเร็วกว่า และที่สำคัญรองรับการทำงานกับ element ของ html ที่เกิดใหม่หลังจากหน้า web ถูกสร้างครับ โดยมีการ include jQuery เข้ามาก่อน เพราะต้องมีตัว core file ของ jQuery ก่อน แล้วถึงจะเรียกใช้ของ Bootstrap ดังตัวอย่าง <script src="js/jquery-1.11.1.min.js"></script> และ <script src="js/bootstrap.min.js"></script>

ใน body ของ html ให้ใส่ code เพื่อที่จะทำความเคารพเจ้าของสถานที่ คือ <div class="jumbotron"><h1>Hello World</h1></div> ซึ่งเมื่อไป run ผ่าน browser (ขอแนะนำให้ใช้ chrome หรือไม่ก็ firefox) จะได้ผลดังรูปต่อไปนี้

ถ้าใครได้รับผลดังกล่าวไม่ error ก็แปลว่า Bootstrap ยอมรับคุณเข้าสู่โลกของเขาแล้ว เดี่ยวตอนต่อไปผมจะอธิบายการเริ่มใช้งานส่วนต่างๆ ต่อไปครับ  ^^ Bye Bootstrap!!!

ปล. code เต็มๆ ครับ

Comments are closed.