ภาพประกอบ :: asset-helper

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

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

ภาพประกอบ :: asset-helper

ภาพประกอบ :: asset-helper

เมื่อคราวที่แล้วเราได้รู้จักกับการเรียกไฟล์ css เข้ามาในระบบด้วยคำสั่ง link_tag ใน helper ของ html กันไปแล้วนะครับ แต่วันนี้เราจะมาทำความรู้จักกับอีกหนึ่งความสาารถนั้นก็คือการเรียกผ่านทาง asset ซึ่งจะสะดวกมากกว่าครับ

มารู้จักกันก่อนกับคำว่า asset

คำว่า asset ทางการบัญชีเป็นความหมายของสินทรัพย์นะครับ ซึ่งเจ้าของจะสามารถเอามาใช้ประโยชน์ได้ ซึ่งดูแล้วก็ตรงตัวดีทีเดียวสำหรับการนำมาใช้กับการทำเว็บ รูปแบบของ asset มันเป็นเหมือนชุด packet หนึ่งที่เราหยิบมาใช้งานในแต่ละหน้า แต่หน้าเว็บเราไม่ได้วาง url แบบเว็บที่สร้างบน php ทั่วๆไปจะเรียกเหมือนเดิมมันไม่สะดวก เราเลยหยิบเอาเจ้า asset นี้มา pack รวมกลุ่มไฟล์เหล่านี้ซะซึ่งจะประกอบไปด้วย css, js, images ประมาณนี้ ซึ่งการใช้งานจริงเราก็จะหยิบออกมาเฉพาะเพียงบางไฟล์ที่เราต้องการเรียกใช้งาน ซึ่งเหมาะมากกับการทำงานในรูปแบบของ Theme หรือ Template ต่างๆ

ทีนี้มาดูวิธีการใช้งาน asset ในส่วนของ framework อย่าง codeigniter กันบ้าง

ก่อนอื่นเลยคือเราจะต้องทำการสร้าง folder ขึ้นมาก่อนหนึ่ง folder วางไว้ในระบบของเราใน directory ขนานกันกับ folder application ไปเลย ใช้ชื่อว่า assets แบบนี้

ภาพประกอบ : folder assets

ภาพประกอบ : folder assets

จากนั้นให้เราทำการสร้าง folder ขึ้นมาอีก 3 folder โดยใช้ชื่อตามนี้เลยครับ css,js,images ซึ่งจะได้ออกมาเป็นแบบนี้

ภาพประกอบ : list-folder-in-assets

ภาพประกอบ : list-folder-in-assets

ทีนี้ให้เราสร้างไฟล์อีกไฟล์ขึ้นมาเป็น php function ที่เอาไว้เรียก path ของไฟล์ทั้ง 3 รูปแบบออกมาให้ถูกต้อง ซึ่งหลักๆก็คือการเรียกค่า config ในส่วนของ base_url ออกมา ตรงนี้ให้ download ไปเลยแล้วกันนะครับ เพราะมันยาว

GitHub : Download Assets Helper

จากนั้นให้คุณแตกไฟล์นี้แล้วเอาออกไปวางใน folder ที่ชื่อว่า system / helpers นะครับ จะได้แบบนี้

ภาพประกอบ :: assets file in helper

ภาพประกอบ :: assets file in helper

**เพิ่มเติม
เมื่อวางไฟล์เสร็จแล้วต้องทำการ เรียก helper เข้าไปไว้ในส่วนของ $autoload[helper] ที่หน้า autoload.php ด้วยนะครับ

ทีนี้ก็ถึงเวลาเรียกใช้งานจริงๆกันบ้างแล้ว ก่อนอื่นผมจะไป download ไฟล์ bootstrap ลงมาวางไว้ใน folder นี้จะได้มีครบเลยทั้ง js และ css ไม่ต้องมานั่งเขียนเอาใหม่

ทีนี้เวลาจะเรียกไฟล์ขึ้นมาใช้งาน ผมก็จะเรียกได้ง่ายๆแบบนี้นะครับ

<?php echo css_asset(); ?>
<?php echo js_asset(); ?>
<?php echo image_asset(); ?>

ทีนี้พอเราจะใช้เราก็แค่ระบุไฟล์เข้าไปในตำแหน่งที่เราต้องการนั้นแหละครับ

<?php echo css_asset('bootstrap.min.css'); ?>
<?php echo css_asset('font-awesome.min.css'); ?>
<?php echo js_asset('bootstrap.min.css'); ?>
<?php echo js_asset('jquery-1.11.1.min.css'); ?>

และในส่วนของรูปภาพก็ง่ายๆแบบนี้

<?php echo image_asset('christmas.jpg'); ?>
ภาพประกอบ :: welcome to codeigniter asset

ภาพประกอบ :: welcome to codeigniter asset

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

Link : Codeigniter

 

 

โฆษณา :: 20 Premium Bootstrap Themes Deal

โฆษณา :: 20 Premium Bootstrap Themes Deal