CodeIgniter sử dụng kiến trúc Model-View-Controller (MVC) hoạt động trên kiến trúc ba lớp, tất cả các lớp đều tách biệt. Trong CodeIgniter bạn nên. css và. js nên được đặt trong thư mục CSS và JS Trong hướng dẫn này, chúng tôi sẽ giải thích cách chúng tôi có thể sử dụng css và js bên ngoài trong CodeIgniter Để tích hợp tệp css và js bên ngoài trong CodeIgniter, hãy thực hiện các bước sau - Tải xuống CodeIgniter từ trang web đó và giải nén chúng trong máy chủ cục bộ của bạn
- Bây giờ hãy tạo thư mục css và js trong thư mục gốc của dự án của bạn
- Sao chép của bạn. css trong thư mục CSS và sao chép. js trong thư mục JS
- Đối với hàm base_url(), bạn phải tải trình trợ giúp URL trong hàm tạo của bộ điều khiển
//Loading url helper
$this->load->helper('url');
Bây giờ bạn có thể sử dụng hàm base_url() trong chế độ xem <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<script type='text/javascript' src="<?php echo base_url(); ?>js/jquery.min.js"></script>
Ghi chú. hàm base_url() in url cơ sở dự án của bạn. Trong nguồn xem, nó sẽ tạo url hoàn chỉnh http://www.aorank.com/tutorial/codeigniter_css_and_js/css/style.css
http://www.aorank.com/tutorial/codeigniter_css_and_js/js/jquery.min.js
Bạn cũng có thể tham khảo bản demo trực tiếp của chúng tôi hoặc tải xuống tệp Script. Giải nén các tệp đã tải xuống, lưu nó vào máy chủ cục bộ của bạn và chạy nó bằng đường dẫn đã cho http://localhost/codeigniter_css_and_js/index.php/css_js_load
Tải xuống tập lệnh
Hướng dẫn Script chi tiếtDưới đây là chi tiết về mã được sử dụng trong hướng dẫn này với lời giải thích phù hợp Tập tin điều khiển. css_js_load. phpTrong bộ điều khiển, chỉ cần tải trình trợ giúp Url trong chế độ xem tải hàm tạo và hàm chỉ mục nơi css và js bên ngoài sẽ sử dụng <?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Css_js_load extends CI_Controller {
function __construct() {
parent::__construct();
// Load url helper
$this->load->helper('url');
}
public function index() {
// View "css_js_view" Page.
$this->load->view('css_js_view');
}
}
?>
Xem tài liệu. css_js_view. phpTrong chế độ xem, tải CSS và js bằng liên kết và thẻ script <html>
<head>
<title>Load css and javascript file in codeigniter</title>
<!--Load style.css file, which store in css folder.-->
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<!--Load jquery.min.js file, which store in js folder.-->
<script type='text/javascript' src="<?php echo base_url(); ?>js/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="css">
<p>This div is shown by style.css file, which you will found in your project's root css folder.</p>
</div>
<div class ="js">
<p>This div is perform by script.js and jquery.min.js file, which you will found in your project's root js folder.</p></div>
<button type="button" class="fg-button teal" id="click">Click For Javascript</button>
</div>
<div id="formget_ad">
<a href="https://www.formget.com/app/"><img id="fugo" src="<?php echo base_url(); ?>images/formGetadv-1.jpg" /></a>
</div>
<!--Load script.js file, which store in js folder.-->
<script type='text/javascript' src="<?php echo base_url(); ?>js/script.js"></script>
</body>
</html>
Tệp CSS. phong cách. cssTạo kiểu các phần tử HTML body {
font-family: 'Raleway', sans-serif;
}
.main{
margin:0,auto;
}
.css {
position: absolute;
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid black;
margin-top: 8%;
margin-left: 10%;
}
.js {
display:none;
position: absolute;
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid black;
margin-left: 38%;
margin-top: 8%;
}
button#click {
margin-left: 45%;
margin-top: 22%;
}
.fg-button{
position: relative;
top: 0;
border-radius: 4;
font-size: 18px;
padding: 8px 28px;
text-decoration: none;
border: 0px solid;
cursor: pointer;
border-bottom-width: 3px;
outline: none;
-webkit-transition: 0.3s background;
-moz-transition: 0.3s background;
transition: 0.3s background;
}
.fg-button:active{
top: 2px;
}
.fg-button.teal{
color: #fff;
border-color: #04A5A1;
background-color: #08BBB7;
}
.fg-button.teal:hover{
background: #0ACFCB;
}
Tệp Javascript. kịch bản. jsJavascript trong đó jQuery chức năng chuyển đổi được sử dụng trong sự kiện nhấp chuột. $('#click').click(function()
{
$('div.js').toggle(1000);
});
Phần kết luậnĐây là tất cả về cách chúng ta có thể sử dụng tệp CSS và js bên ngoài trong CodeIgniter. Hy vọng bạn thích nó, tiếp tục đọc các blog khác của chúng tôi
Đặt tệp CSS ở đâu trong CodeIgniter 4?
Thêm tệp JavaScript và CSS (Cascading Style Sheet) trong CodeIgniter rất đơn giản. Bạn phải tạo thư mục JS và CSS trong thư mục gốc và sao chép tất cả. js trong thư mục JS và. css trong thư mục CSS như trong hình.
Làm cách nào để tải tệp CSS trong CodeIgniter 4?
Trình đánh lửa mã. Đang tải tệp CSS và Javascript . Tải xuống CodeIgniter từ trang web đó và giải nén chúng trong máy chủ cục bộ của bạn Bây giờ hãy tạo thư mục css và js trong thư mục gốc của dự án của bạn Sao chép của bạn. css trong thư mục CSS và sao chép. . Đối với hàm base_url(), bạn phải tải trình trợ giúp URL trong hàm tạo của bộ điều khiển Tệp CSS ở đâu trong CodeIgniter?
Đặt css của bạn ở nơi nó thường thuộc về, trong site_root/css/ và sau đó sử dụng trình trợ giúp. Từ tài liệu CodeIgniter. . /ứng dụng/ /công cộng/ /công khai/css/ /công khai/img/ /công khai/js/ /hệ thống/ Thư mục nội dung trong CodeIgniter 4 ở đâu?
Thư mục nội dung nằm ở trong thư mục gốc của htdocs (Tôi đang sử dụng máy chủ apache xampp). | 
