آموزش Codeigniter - جلسه شانزدهم: افزودن جاوا اسکریپت و سی اس اس

سه‌شنبه ۲۷ مهر ۱۳۹۵ - ۱۶:۰۰
مطالعه 5 دقیقه
در این جلسه از سری آموزش‌های Codeigniter، روش افزودن جاوا اسکریپت و استفاده از فایل‌های سی‌اس‌اس را در این فریم‌ورک به شما آموزش می‌دهیم.
تبلیغات

مطمئنا در طراحی رابط کاربری نهایی وب‌سایت‌ها، نیاز به استفاده از فایل‌های سی‌اس‌اس (CSS) و جاوا اسکریپت (JavaScript) خواهید داشت. همانطور که می‌دانید فایل‌های سی‌اس‌اس برای ایجاد قالب‌هایی استاندارد‌تر و منعطف‌تر مورد استفاده‌ی طراحان وب قرار می‌گیرد و جاوا اسکریپت نیز برای عملیات‌ پویا مثل اعتبارسنجی آنی فرم بکار می‌رود. در ادامه‌ی این مطلب با زومیت همراه باشید.

اضافه کردن جاوا‌ اسکریپت و سی‌اس‌اس در فریم‌ورک Codeigniter بسیار آسان است. بدین منظور ابتدا در ریشه‌ی فریم‌ورک باید دو پوشه به اسم JS و CSS ایجاد کرده و سپس فایل‌هایی که پسوند js. یا .css دارند را به ترتیب در این دو پوشه قرار دهید. در تصویر زیر، به صورت شماتیک این موضوع را به شما نشان داده‌ایم.

java script css in codeigniter

به عنوان مثال فرض کنید که یک فایل جاوا اسکریپت به نام sample.js و یک فایل سی‌اس‌اس به نام style.css در اختیار داریم و می‌خواهیم از این دو فایل در پروژه‌ی خود استفاده کنیم. حال به منظور افزودن دو فایل یاد شده به فایل‌های ویو اپلیکیشن تحت وب خود، ابتدا باید هلپر URL را در کنترلر مورد نظرتان لود کنید. همانطور که در جلسات قبل به صورت مفصل به شما توضیح داده بودیم، بدین منظور باید از کد زیر استفاده کنید:

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

پس از بارگذاری هلپر URL در کنترلر خود، به راحتی می‌توانید خطوط زیر را در فایل ویو مورد استفاده قرار دهید تا بدین طریق فایل‌ sample.js و نیز style.css در قالب نمای پروژه لود شود.

php echo base_url(); ?>css/style.css"><?</span><span class="pln">php echo base_url</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?></span><span class="pln">js</span><span class="pun">/</span><span class="pln">sample</span><span class="pun">.</span><span class="pln">js</span><span class="str">"></span><span class="tag">

همانطور که در کد بالا می‌بینید شیوه‌ی لود فایل css و javascript دقیقا مثل کدهای ثابت اچ‌تی‌ام‌ال است ولی در اینجا برای آدرس‌دهی درست مسیر این فایل‌ها در ابتدای مسیر از کد:

php echo base_url(); ?>

استفاده کرده‌ایم که این یعنی در مسیر محل نصب فریم‌ورک، و سپس آدرس پوشه‌های بعدی، فایل‌های مورد نظر بارگذاری شود. به عبارت دیگر، اگر فرض کنیم محل نصب فریم‌ورک آدرس /https://www.domain.com/ باشد، در این صورت کد بالا پس از اجرا تبدیل به آدرس یاد شده خواهد شد. نکته‌ای که در اینجا باید مد نظر قرار دهید این است که پس از این کد نباید از علامت اسلش برای آدرس‌دهی به پوشه‌های داخلی استفاده کنید چراکه در انتهای محل نصب فریم‌ورک به صورت خودکار یک اسلش اضافه خواهد شد.

مثال

نرم‌افزار سرور مجازی زمپ را اجرا کرده و سرورهای آپاچی و مای‌اس‌کیو‌ال را در حالت فعال قرار دهید. یک پوشه‌ی جدید در پوشه‌ی htdocs نرم‌افزار زمپ ایجاد کرده و فایل‌های اصلی فریم‌ورک Codeigniter را برای ایجاد یک پروژه جدید در این پوشه کپی کنید. ما اسم این پوشه‌ را codei-jscss گذاشته‌ایم. سپس طبق آموزش‌هایی که در جلسات اولیه‌ی این سری به شما داده بودیم، فریم‌ورک را نصب و پیکربندی کنید.

حالا باید کنترلر مورد نظرمان را برای این اپلیکیشن تحت وب ایجاد کنیم. بدین منظور در مسیر application/controller یک فایل جدید به نام Test.php ایجاد کرده و سپس کدهای زیر را در آن قرار داده و نهایتا فایل را ذخیره کنید.

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

کنترلر ما همانطور که در کد بالا مشاهده می‌کنید، فقط شامل تابع ()index بوده که در این تابع ابتدا هلپر url را لود کرده‌ایم و در خط بعدی نیز فایل ویویی به نام test را بارگذاری می‌کنیم.

برای ساخت فایل ویو به مسیر application/views در محل نصب فریم‌ورک رفته و سپس یک فایل جدید به نام test.php بسازید و سپس کد زیر را در فایل یاد شده قرار داده و آن را ذخیره کنید.

lang = "en"> charset = "utf-8"> </span><span class="pln">CodeIgniter View Example</span><span class="tag"> php echo base_url(); ?>css/style.css"> <?</span><span class="pln">php echo base_url</span><span class="pun">();</span><span class="pln"> </span><span class="pun">?></span><span class="pln">js</span><span class="pun">/</span><span class="pln">sample</span><span class="pun">.</span><span class="pln">js</span><span class="str">"></span><span class="tag"> href = 'javascript:test()'>Click Here to execute the javascript function.

همانطور که مشاهده می‌کنید در کد بالا و در بخش هدر آن، با استفاده از کد:

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

فایلی به نام style.css که در پوشه‌ی css قرار دارد را به صفحه‌ی اچ‌تی‌ام‌ال خود اضافه کرده‌ایم. سپس با کد زیر:

فایل جاوا اسکریپت sample.js را به فایل قالب یا همان ویو اضافه می‌کنیم.

حال باید فایل استایل‌مان را ایجاد کنیم. بدین منظور یک فایل جدید به نام style.css ایجاد کرده و آن را در مسیر css/style.css ذخیره می‌کنیم. کد زیر را نیز در این فایل قرار دهید:

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

مرحله‌ی بعد ایجاد فایل جاوا اسکریپت است. برای این کار نیز یک فایل به نام sample.js در مسیر js/sample.js ایجاد کرده و کدهای زیر را در آن قرار دهید:

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

کدهای بالا باید برای شما کاملا قابل درک باشند چراکه اگر در حال مطالعه‌ی این آموزش هستید حتما پیش‌نیازهای لازم یعنی اچ‌تی‌ام‌ال، سی‌اس‌اس و پی‌اچ‌پی را قبلا فرا گرفته‌اید.

در نهایت برای اجرای کنترلر خود مسیر دلخواهی را تعیین می‌کنیم. بدین منظور مثل همیشه نیاز به ایجاد تغییراتی در فایل routes.php داریم. این فایل که در مسیر application/config/routes.php قرار دارد باز کرده و سپس کدهای زیر را به انتهای کدهای موجود در آن اضافه کرده و نهایتا فایل را ذخیره کنید.

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

کد بالا باعث می‌شود با اجرای مسیر profiler در انتهای مسیر محل نصب فریم‌ورک، کنترلر Profiler_controller فراخوانی شود. یادآوری می‌کنیم که اگر کنترلری دارای متد ()index باشد، با اجرا آن کنترلر، به صورت پیش‌فرض تابع ایندکس فراخوانی خواهد شد. در خط دوم کد بالا نیز به شکل مشابه با اجرای مسیر profiler/disable در انتهای آدرس محل نصب فریم‌ورک، متد ()disable از کنترلر Profiler_controller را فراخوانی می‌کنیم.

حال اگر همه‌ی مراحل را به درستی انجام داده باشید، با باز کردن URL زیر در مرورگر خود، پروژه‌ی شما باید به خوبی اجرا شود.

http://127.0.0.1/codei-jscss/index.php/test

علاوه بر آدرس زیر می‌توان به جای 127.0.0.1 از عبارت localhost استفاده کنید. در این شرایط آدرس پروژه‌ی شما روی سرور محلی زمپ به صورت زیر نیز در دسترس خواهد بود:

http://localhost/codei-jscss/index.php/test

اگر سوال یا پیشنهادی در مورد مباحث مطرح شده در این جلسه دارید، آن را از طریق بخش نظرات با زومیت و سایر کاربران به اشتراک بگذارید.

تبلیغات
داغ‌ترین مطالب روز

نظرات

تبلیغات