Đặt CSS ở đâu trong CodeIgniter?

Tải xuống phiên bản CodeIgniter 4 mới nhất và giải nén mã nguồn vào thư mục mới có tên LearnCodeIgniter4WithRealApps

Cắt chỉ số. php và htaccess trong thư mục chung vào thư mục gốc của dự án

mở chỉ mục. php trong thư mục gốc tìm đến dòng 16 thay thế đường dẫn thành Đường dẫn. tập tin php như dưới đây

$pathsPath = realpath(FCPATH . '/app/Config/Paths.php');

Mở chương trình. php trong thư mục app/Config tìm đến dòng 36 xóa chỉ mục. chuỗi php trong biến $indexPage như bên dưới

public $indexPage = '';




Đặt URL CƠ SỞ

Mở chương trình. php trong thư mục app/Config. Đặt giá trị cho biến $baseURL như bên dưới

public $baseURL = 'http://localhost:8095/LearnCodeIgniter4WithRealApps/';

Tạo thư mục tài sản

Tạo thư mục mới có tên là tài sản trong thư mục chung. Trong thư mục này, tạo các thư mục mới như bên dưới

thư mục hình ảnh

Tạo thư mục mới có tên hình ảnh trong thư mục nội dung. Sao chép hình ảnh cần sử dụng trong dự án vào thư mục hình ảnh

Thư mục CSS

Tạo thư mục mới có tên css trong thư mục tài sản. Trong thư mục này, tạo tệp css mới có tên style. css như bên dưới

.format-text {
	color: red;
	font-size: 20px;
}

img {
	width: 120px;
	height: 100px;
}

Thư mục JS

Tạo thư mục mới có tên js trong thư mục tài sản. Trong thư mục này, tạo tệp javascript mới có tên mylib. js như bên dưới

function clickMe() {
	alert('Hello World');
}




Tạo bộ điều khiển

Tạo tệp PHP mới có tên là Demo. php trong thư mục app/Controllers như bên dưới

Tạo Chế độ xem

Tạo thư mục mới có tên demo trong thư mục app/Views. Trong thư mục này, tạo tệp PHP mới có tên là index. php như dưới đây


	
		Demo Page
		
		
	
	

		

Demo Page

Đặt CSS ở đâu trong CodeIgniter?




Xác định tuyến đường

Mở tuyến đường. php trong thư mục app/Config. Đặt bộ điều khiển mặc định như bên dưới

$routes->get('/', 'Demo::index');

Cấu trúc của dự án CodeIgniter 4

Đặt CSS ở đâu trong CodeIgniter?




Chạy ứng dụng

Truy cập hành động chỉ mục trong bộ điều khiển Demo với url sau. http. //máy chủ cục bộ. 8095/LearnCodeIgniter4WithRealApps/demo/index

Trong bài viết ngắn này, tôi sẽ giải thích các phương pháp tải kiểu và tập lệnh trong CodeIgniter. Để xây dựng một trang web thân thiện với người dùng, việc sử dụng CSS và JavaScript là bắt buộc. Nếu không có những thứ này, chúng tôi không thể làm cho trang web của mình bắt mắt vì đây sẽ chỉ là một trang trắng đơn giản. Đầu tiên tôi sẽ giải thích cách tải tệp CSS trong CodeIgniter, sau đó sẽ giải thích cách tải tệp JavaScript

Trước khi tải các tệp CSS và JavaScript, chúng tôi cần lưu chúng trên máy chủ web của mình. Tôi khuyên bạn nên đặt tất cả các tệp này trong các thư mục riêng biệt. Vì vậy, hãy tạo thư mục 'css' để lưu trong tệp CSS và thư mục 'js' vào tệp JavaScript. Một điều nữa mà tôi thích là tạo một thư mục nội dung trong thư mục gốc. Và đặt các thư mục CSS và js trong thư mục này

Vì vậy, theo cấu trúc thư mục này, nếu chúng ta có phong cách. css, nó sẽ được đặt trong tài sản/css/style. css. Tương tự như vậy, tùy chỉnh của chúng tôi. js sẽ có đường dẫn nội dung/js/tùy chỉnh. js. Bây giờ, chuyển sang quy trình tìm hiểu cách đưa các kiểu và tập lệnh vào trang web CodeIgniter

Trước khi tìm hiểu cách Tải CSS và JavaScript trong CodeIgniter, vui lòng tham khảo cài đặt và thông tin cơ bản về CodeIgniter tại đây

  • Cách tạo dự án CodeIgniter mới
  • Tìm hiểu cách xóa chỉ mục. php từ URL CodeIgniter theo các bước

Cách tải CSS trong CodeIgniter

Để tải các kiểu từ các tệp CSS bên ngoài trong CodeIgniter, chúng ta có thể chọn bất kỳ phương pháp nào sau đây

Load CSS files in CodeIgniter by HTML Tag

Điều chúng ta có thể làm là sử dụng thẻ liên kết của HTML. Đặt mã này trong phần đầu của trang. Ví dụ. Đang tải kiểu. css với đường dẫn như được giải thích trong đoạn trên

1

2

<liên kết rel = "biểu định kiểu" href=" echo base_url(assets/css/style.css ' ) ?>" type="text/css" />

 

Giải thích mã

hàm base_url() sẽ tạo URL trang web của bạn (ví dụ:. http. //myweb. com/) và giá trị src hoàn chỉnh sẽ giống như http. //myweb. com/nội dung/js/tùy chỉnh. css

Tôi nên đặt CSS ở đâu trong CodeIgniter?

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 CSS trong CodeIgniter?

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

Các tệp CSS nên được đặt ở đâu?

Giá trị và thuộc tính CSS vẫn được đặt, nhưng thay vì được đặt bên trong thuộc tính kiểu, nó được đặt bên trong dấu ngoặc vuông và được xác định bởi . Bộ quy tắc này sau đó được bọc trong các thẻ và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML. và được tìm thấy trong phần đầu của tệp HTML.

Bạn nên đặt hình ảnh JavaScript và CSS ở đâu?

thư mục hình ảnh . Thư mục này sẽ chứa tất cả các hình ảnh mà bạn sử dụng trên trang web của mình. Tạo một thư mục có tên là images , bên trong thư mục trang web thử nghiệm của bạn. thư mục phong cách. Thư mục này sẽ chứa mã CSS được sử dụng để tạo kiểu cho nội dung của bạn (ví dụ: đặt văn bản và màu nền).