ภาพประกอบ setupcss

CODEIGNITER รู้จักกับวิธีเรียกใช้ไฟล์ CSS

หลังจากที่เราทำความเข้าใจกับเรื่องของ MVC ใน Framework อย่าง Codeigniter ไปแล้วเราจะมาลองดูครับว่าเราจะติดตั้งไฟล์ CSS ที่ทำหน้าที่ช่วยในการแสดงผล ลงไปในงานของเราได้อย่างไร

ภาพประกอบ setupcss

ภาพประกอบ setupcss

การพัฒนาเว็บไซต์ของเราจะเพิ่มเติมความสมบูรณ์ให้ระบบ เราต้องใช้ภาษา CSS เพื่อช่วยในการแสดงผลที่สวยงามให้มากขึ้น เริ่มต้นผมจะวางไฟล์ CSS ให้ดูกันก่อนนะครับ ว่าเราจะเรียกใช้ CSS ได้อย่างไรใน CI ผมเริ่มจากสร้างไฟล์ CSS เล็กๆน้อยๆขึ้นมาเพื่อจะเรียกให้ดูเป็นตัวอย่างกันก่อนนะครับ

body {
 background-color: green;
 margin: 40px;
 font: 13px/20px normal Helvetica, Arial, sans-serif;
 color: #4F5155;
}
a {
 color: #003399;
 background-color: transparent;
 font-weight: normal;
}
h1 {
 color: #444;
 background-color: transparent;
 border-bottom: 1px solid #D0D0D0;
 font-size: 19px;
 font-weight: normal;
 margin: 0 0 14px 0;
 padding: 14px 15px 10px 15px;
}

จาก Code ชุดนี้ผมแค่แอบหยิบเอามาจากของเดิมในหน้าตัวอย่างของ Codeigniter นั้นแหละครับ ทีนี้ผมก็แค่หยิบมาสร้างเป็นไฟล์ css โดยใช้ชื่อว่า style.css จากนั้นผมก็เข้าไปสร้าง folder ชื่อ assets

ภาพประกอบ codeigniter-assets

ภาพประกอบ codeigniter-assets

แล้วเราก็ต้องมาทำความรู้จักกับ Helper ของทาง Codeigniter กันอีกหน่อยครับเพราะเราจำเป็นต้องใช้ Helper นั้นเป็นเครื่องมือที่ช่วยตั้งค่าต่างๆเอาไว้ให้เราแล้วนั้นแหละครับ เวลาเราเรียก Helper ขึ้นมาใช้เราก็เหมือนกับการเรียกเครื่องมือขึ้นมาเพื่อช่วยให้เราเขียน Code ได้เร็วมากขึ้นโดยที่ทาง Codeigniter นั้นได้ทำการระบุค่าเอาไว้ให้เราแล้ว

ตัวอย่างที่เราจะใช้กันเป็นชุดแรกคือ Helper ที่ชื่อว่า HTML เพราะว่าเราจะใช้เพื่อ Load ไฟล์แบบ CSS เข้ามาใช้กันนั้นเองครับ โดยต้องเข้าไปที่ไฟล์ autoload.php ที่อยู่ใน Folder Config

วิธีการ Load HTML Helper

$autoload['helper'] = array('html');

แบบนี้นะครับ จากนั้นเราก็เข้าไปที่หน้า view ของเรานะครับ แล้วทำการเรียกไฟล์ css เข้ามาใช้งานด้วยคำสั่ง link_tag() ซึ่งจะมีวิธีใช้แบบนี้ครับ

<?php echo link_tag('assets/css/style.css'); ?>

อันนี้เป็นตัวอย่างตามไฟล์ที่ผมใส่เอาไว้นะครับ เพียงเท่านี้เเราก็สามารถใช้งานไฟล์ css ได้แล้วครับ

ภาพประกอบ Welcome to CodeIgniter

ภาพประกอบ Welcome to CodeIgniter

เพียงเท่านี้เราก็สามารถที่จะติดตั้งไฟล์ CSS ไว้ใช้งานได้แล้วนะครับ