Blog

Chắc chắn rằng khi thiet ke website với Codeigniter bạn sẽ gặp phải vấn đề trong View của Codeigniter là view không thể gọi được CSS và Javascript nếu chúng ta đặt chúng vào thư mục views, vậy làm thế nào để Thêm CSS và Javascript vào trong Codeigniter?

Bài viết này Công ty thiết kế web OTVINA sẽ hướng dẫn các bạn Thêm CSS và JS dễ dàng vào trong Codeigniter.

Tạo thư mục chứa CSS và JS

Trước khi bắt đầu bạn chắc hẳn đã chuẩn bị cho mình các file CSS và JS, vậy hãy tạo riêng cho chúng 1 thư mục, chúng ta sẽ tạo 2 thư mục CSS và JS ngay thư mục gốc ngang hàng với index, vì vấn đề bảo mật nên nếu các bạn để vào trong thư mục views sẽ bị Codeigniter từ chối truy cập, vì vậy chúng ta sẽ để bên ngoài thư mục gốc nhé!

Thêm CSS và JS trong Codeigniter

Thêm CSS và JS trong Codeigniter

Trong 2 thư mục chúng ta sẽ có 2 file ví dụ là: vidu.css và vidu.js

Bây giờ, mỗi khi cần sử dụng CSS và JS cho website Codeigniter của bạn bạn chỉ việc thêm vào view đang sử dụng của mình thôi nhé!

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề</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>Chào mừng bạn đến với loạt bài hướng dẫn học Thiết kế website bởi OTVINA</body>
</html>

Ở trong này Công ty thiết kế website chuyên nghiệp OTVINA có sử dụng hàm base_url(); hàm này được Codeigniter xây dựng sẵn trong Helper Url nên để sử dụng được như mình các bạn cần gọi helper đó ra nữa nhé!

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

Vậy chúng ta có 1 website cơ bản với chi phí cực rẻ 0 đồng :D với nội dung như sau:

Ví dụ:

– Tạo controller vidu.php

<?php 
   class Vídu extends CI_Controller {
      public function index() { 
         $this->load->helper('url'); 
         $this->load->view('vidu'); 
      } 
   } 
?>

– View: vidu.php

<!DOCTYPE html> 
<html lang = "en">
   <head> 
      <meta charset = "utf-8"> 
      <title>Thiết kế website giá rẻ OTVINA</title> 
      <link rel = "stylesheet" type = "text/css" 
         href = "<?php echo base_url(); ?>css/vidu.css"> 
      <script type = 'text/javascript' src = "<?php echo base_url(); 
         ?>js/vidu.js"></script> 
   </head>
   <body> 
Chào mừng bạn đến với Công ty Thiết kế website giá rẻ OTVINA
   </body>
  
</html>

Như vậy là chúng ta đã thiết kế xong 1 website sử dụng Codeigniter và thêm giao diện tùy chỉnh với CSS và JS, Công ty thiết kế web bán hàng OTVINA hy vọng bài viết sẽ hữu ích với các bạn! <3