۲۳
اسفند

جلسه ۲۲ : آموزش افزودن JS و CSS در CodeIgniter

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که دوره آموزش codeigniter را دنبال می کنند. در جلسه قبل به معرفی معیار سنجش در codeigniter پرداختیم. در این جلسه قرار است به معرفی و آموزش افزودن JS و CSS در codeigniter بپردازیم.

آموزش افزودن JS و CSS در codeigniter

افزودن فایل جاوا اسکریپت و CSS در codeigniter بسیار ساده است.
برای این کار کافی است مطابق تصویر زیر پوشه JS و CSS را در دایرکتوری ریشه ایجاد کنید و تمام فایلهای js. را در پوشه JS و فایلهای CSS. در پوشه CSS کپی کنید.

adding js and css

برای مثال فرض کنید که یک فایل جاوا اسکریپت sample.js و یک فایل style.css ،CSS ساخته اید.
حالا برای افزودن این فایل ها به نمایه یا URL helper ،views را طبق دستور زیر بارگذاری کنید.

مثال :

$this->load->helper('url');

1	$this->load->helper('url');

پس از بارگیری URL helper در کنترل کننده، به سادگی خطوط زیر را در فایل view اضافه کنید تا نمونه فایل های sample.js و style.css را به صورت زیر بارگیری نمایید.

مثال :

<link rel = "stylesheet" type = "text/css" 
   href = "<?php echo base_url(); ?>css/style.css">

<script type = 'text/javascript' src = "<?php echo base_url(); 
   ?>js/sample.js"></script>

href = "<?php echo base_url(); ?>css/style.css">

?>js/sample.js"></script>

مثال

یک کنترل کننده با عنوان Test.php ایجاد کنید.
این کنترل کننده را در application/controller/Test.php ذخیره نمایید.

مثال :

<?php 
   class Test extends CI_Controller {
	
      public function index() { 
         $this->load->helper('url'); 
         $this->load->view('test'); 
      } 
   } 
?>

<?php

class Test extends CI_Controller {

public function index() {

$this->load->helper('url');

$this->load->view('test');

}

یک فایل نمایه یا view file با عنوان test.php بسازید.
فایل ایجاد شده را درapplication/views/test.php ذخیره کنید.

مثال :

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>CodeIgniter View Example</title> 
      <link rel = "stylesheet" type = "text/css" 
         href = "<?php echo base_url(); ?>css/style.css"> 
      <script type = 'text/javascript' src = "<?php echo base_url(); 
         ?>js/sample.js"></script> 
   </head>
	
   <body> 
      <a href = 'javascript:test()'>Click Here</a> to execute the javascript function. 
   </body>
	
</html>

<!DOCTYPE html>

<head>

<title>CodeIgniter View Example</title>

href = "<?php echo base_url(); ?>css/style.css">

?>js/sample.js"></script>

</head>

<body>

<a href = 'javascript:test()'>Click Here</a> to execute the javascript function.

</body>

</html>

یک فایل CSS با عنوان style.css ایجاد کنید.
این فایل را در css/style.css ذخیره کنید.

مثال :

body { 
   background:#000; 
   color:#FFF; 
}

body {

background:#000;

color:#FFF;

}

یک فایل JS با عنوان sample.js ایجاد کنید.
این فایل را در js/sample.js ذخیره نمایید.

مثال :

function test() { 
   alert('test'); 
}

function test() {

alert('test');

}

فایل routes.php را در application/config/routes.php تغییر دهید.
این کار موجب اضافه شدن مسیر به کنترل کننده بالا می شود. سپس خط زیر را در انتهای فایل اضافه کنید.

مثال :

$route['profiler'] = "Profiler_controller"; 
$route['profiler/disable'] = "Profiler_controller/disable"

1 2	$route['profiler'] = "Profiler_controller"; $route['profiler/disable'] = "Profiler_controller/disable"

برای اجرای مثال بالا از URL زیر در مرورگر خود استفاده کنید.

مثال :

http://yoursite.com/index.php/test

1	http://yoursite.com/index.php/test

کلام آخر

در این جلسه از سری آموزش codeigniter، آموزش افزودن JS و CSS در codeigniter به شما ارائه شد. در جلسه بعدی به مسئله بین المللی سازی در codeigniter خواهیم پرداخت.

QR: جلسه ۲۲ : آموزش افزودن JS و CSS در CodeIgniter

به اشتراک بگذارید

CodeIgniter چیست ,آموزش CodeIgniter ,آموزش افزودن JS و CSS در codeigniter ,آموزش کدایگنایتر ,آموزش کدایگنیتر

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۲ : آموزش افزودن JS و CSS در CodeIgniter

مقدمه

آموزش افزودن JS و CSS در codeigniter

مثال

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ