I am kinda newbie to CodeIgniter. Somehow I set up the development environment and ready to go. But loading the CSS, JS into page seems a lot more confusing. Before moving, I googled a lot but the base_url solution is not helping.
Part of View :
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">
<link href='css/fullcalendar.css' rel='stylesheet'>
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'>
<link href='css/opa-icons.css' rel='stylesheet'>
<link href='css/uploadify.css' rel='stylesheet'>
Controller :
public function dashboard()
{
$this->load->helper('url');
$this->load->view('templates/css_styles');
$this->load->view('templates/top_bar');
$this->load->view('templates/left_menu');
$this->load->view('pages/dashboard');
$this->load->view('templates/footer');
$this->load->view('templates/js_end');
}
public function index()
{
$this->load->helper(array('form'));
$this->load->view('login');
}
route.php :
$route['default_controller'] = "welcome/dashboard";
$route['404_override'] = '';
$route['dashboard'] = 'welcome/dashboard';
If I put the dashboard method as default controller, the page is loading fine. But when I change it to just welcome, which is a login form and redirect to welcome/dashboard, the page doesn't load any CSS. Just all HTML texts. The dashboard page is just pure HTML, no PHP code written yet.
Please help me what might causing this.
What's wrong with base_url()?
<link href="<?php echo base_url('css/bootstrap-responsive.css')?>" rel="stylesheet">
make sure you load URL helper, I recommend autoloading it: go to application/config/autoload.php and add it to the helper array:
$autoload['helper'] = array('url');
You can use the link_tag() in html_helper.php to help get the paths correct.
First load the helper (I usually have it autoloaded)
$this->load->helper('html');
Then you can reference css like this:
echo link_tag('css/bootstrap-responsive.css');
The advantages are the function tries to build the correct absolute URL to the css file and it automatically sets the rel attribute to stylesheet and the type attribute to text/css.
Also you should have Chrome, Safari, or Firebug for Firefox so that you can inspect the code and see if the CSS files are being loaded or if they are not found. This will help with debugging.
Make sure you have a leading slash before your css folders:
<link href="/css/bootstrap-responsive.css" rel="stylesheet">
And make sure that the files are indeed located in /css off your web root, not inside the application folder.
first you need load helper url
$this->load->helper('url');
and then on controller
$this->data =site_url()."your css file";
then on your view
<link rel="stylesheet" type="text/css" href="<?php echo $css; ?>">
its simple.you can view full article load css/js
Related
i have problem on load asset css(bootstrap and image) on pagination php
my main / default page is
and of course the image and css is loaded
http://localhost:8080/iklan/
....
but when i entered page 2 into..
http://localhost:8080/iklan/iklan/index/2
the image and the css bootstrap wont show
...
maybe it because the function index controller $config["base_url"] = base_url().'/iklan/index';
my css is on asset
C:\xampp\htdocs\iklan\aset
while my image is on
C:\xampp\htdocs\iklan\upload_iklan
and i call css on view like this
<link rel="stylesheet" href="aset/bower_components/bootstrap/dist/css/bootstrap.min.css">
anyone know how to load the css?
Change your base url from
$config["base_url"] = base_url().'/iklan/index';
to
$config['base_url'] = site_url('/iklan/index');
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>aset/bower_components/bootstrap/dist/css/bootstrap.min.css" />
Hope this will help you :
First set ur base url in config.php
$config['base_url']= 'http://localhost/iklan/';
and load css and js by using site_url();
site_url() returns your site URL, as specified in your config file. The index.php file will be added to the URL automatically
<link rel="stylesheet" href="<?=site_url('aset/bower_components/bootstrap/dist/css/bootstrap.min.css');?>" >
Note : make sure your css file path is correct
For more : https://www.codeigniter.com/user_guide/helpers/url_helper.html
I have used css w/ codeigniter plenty of times in the past but I am just not able to configure it on a new server setup. I have looked at almost all the answers on Stack overflow but none of them seem to be working for me. I have created a very basic set of files for testing -
Controller (codeigniter/application/controllers/Pages.php)
<?php
class Pages extends CI_Controller{
public function testthis(){
$this->load->helper('url');
$this->load->view('testcss2');
}
}
?>
View (codeigniter/application/views/testcss2.php)
<html>
<head>
<title>CSS styled page</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?
>testcss.css">
</head>
<body>
<!-- Main content -->
<h1>Testing CSS styled page for codeigniter</h1>
<p>Welcome to my styled page!
<p>CSS Styled page
<address>7th July 2017
</address>
</body>
</html>
Config.php
$config['base_url'] = 'http://localhost/';
autoload.php
$autoload['helper'] = array('url');
The testcss.css file was placed in the root html folder on Ubuntu but I ended up copying it in almost every directory out of frustration of it not getting picked up.
The result -
The page gets displayed successfully but without any styling. If I copy the contents of the css file and paste it in the view file inline using the style tag, the css works ! But not while using external css.
Why is using css with codeigniter so frustrating !!!
For example your project name is "ProjectName",
Add folder assets and place css file inside of it.
Here in config change base_url
$config['base_url'] = 'http://localhost/ProjectName/';
After that in view use this way
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/testcss.css');?>">
I hope it will work for you.
If feel any issue please let me know. Thank you
Controllers/pages.php
<?php
class Pages extends CI_Controller{
function __construct() {
parent::__construct();
$this->load->helper('url');
}
public function index() {
$this->load->view('testcss');
}
}
?>
views/testcss.php
<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'>
</head>
</html>
Sometimes, you need to give permissions to use css and js from root. Putting them into folder gives you way to manage and include all from same path.
I have tried base_url() function, But I didn't understand where am I wrong?
I have also mentioned - $this->load->helper ('URL'); in function abc() in controller.
Here is my code,
<link href="<?PHP echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet" type="text/CSS"/>
Use below code to link your css :
<link href="<?php echo base_url(); ?>assets/css/style.css" rel="stylesheet" type="text/css">
make sure you have configure the CI configuration properly :
CONFIG.PHP
$config['base_url'] = 'http://localhost/your_project/';
$config['index_page'] = '';
AUTOLOAD.PHP
$autoload['helper'] = array('url');
It is because of the way you are referencing the css file. You can use this:
<link href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet">
Or you can use this:
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
Notice the / at the start of the link, this means the browser will look from the base of your website url (your domain). If you miss it out it will use the relative part of the url, so if you are referencing a controller it will assume this is a sub folder for the location of the css file too.
You are better off with the base_url format given first, if you are using a local host for development then you will not have any problems with the url base. If you app is moved to a sub folder on another site or with a sub domain etc you will not have any problems either.
So base_url is the way to go here. More info in the docs.
http://www.codeigniter.com/user_guide/helpers/url_helper.html#base_url
I am thinking you have not set tour base_url if your base url shows Ip address in links your css will not work
You need to set this value
$config['base_url'] = 'http://localhost/yourproject/';
Head
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/bootstrap.min.css'); ?>" rel="stylesheet">
Make sure your assets folder out side of application
application
assets
A good thing is to also autoload url helper lower case.
$autoload['helper'] = array('url');
Here is a part of my CI code:
class page extends CI_Controller {
var $Page;
public function __construct() {
parent::__construct();
$this->Page = 1;
$this->load->model('posts_model');
$this->load->helper('url');
}
public function index() {
$data['posts'] = $this->posts_model->get_posts($this->Page);
$this->load->view('header');
$this->load->view('main', $data);
$this->load->view('footer');
}
function page_num($page) {
$this->Page = $page;
$data['posts'] = $this->posts_model->get_posts($this->Page);
echo $this->Page;
$this->load->view('header');
$this->load->view('main', $data);
$this->load->view('footer');
}
}
And this is link tag of my View File:
<link rel="stylesheet" type="text/css" href="css/indexpage.css" media="all"/>
When I open the index file (/My-Site/), CSS works fine, but when I open for
example the url :
" /My-Site/page/page_num/3 ",
the page opens but with no CSS styles!
Can any body help me please?
use base_url() function to get the url of the site
base_url() gives the url of the website where the index file is located.
eg: /My-Site/
or you can give the file location as the parameter: base_url('/css/indexpage.css') then use it as <link rel="stylesheet" type="text/css" href="<?php echo base_url('/css/indexpage.css');?>" media="all"/>
Try it.
you can use base_url() in your css. see below code.
<link rel="stylesheet" href="<?php echo base_url(); ?>css/style.css" type="text/css" media="all" />
1 -
change it to :
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/indexpage.css');?>" media="all"/>
and you sould already know this , in
application/config/config.php
set
$config['base_url'] = 'www.yorsite.com';
2 -
you have to include the css only in one of your views
i.e
if you have include it in the header.php file
do not add it to the main.php or footer.php
It is usually a good practice to use
<base href="<?php echo base_url(); ?>" />
in your head section of the view page.
That way you don't have to worry about adding base_url to all your href and src attributes.
So if your css file is in codeigniter/assets/css folder, just use
<link type="text/css" rel="stylesheet" href="assets/css/style.css" />
Similarly for subsequent scripts and css you can just use "assets/js/filename" or "assets/css/filename".
Change URL here:
<link rel="stylesheet" type="text/css" href="css/indexpage.css" media="all"/>
to:
<link rel="stylesheet" type="text/css" href="/css/indexpage.css" media="all"/>
Slash at the beginning will point to domain without any sub categories.
When working with codeigniter remember that the only page that outputs HTML is the index.php file so your css should be relative to this file or you use absolute url. You can create a folder anywhere some developers create an asset folder at the webroot here they place their javascript folder image folder and css folder. But the safest way to go is to use absolute links for your assets-Javascript, css, and images.
The easiest way to use absolute link is to use base_url("assets/css/indexpage.css");
This is how to use it:
Load url helper in any of your controllers. $this->load->helper('url);
In your view the area where you want to do the linking use the base url function.
It depends on where you have placed the css file. Try ../css/indexpage.css
I am trying to learn Codeigniter. I have built a simple MVC following the tutorials on the CI site. This is my controller...
<?php
class Pages extends CI_Controller {
public function view($page = 'home'){
if(!file_exists(APPPATH.'/views/pages/'.$page.'.php')){
show_404();
}
$data['title'] = ucfirst($page);
$this->load->view('templates/header', $data);
$this->load->view('pages/'.$page, $data);
$this->load->view('templates/footer', $data);
}
}
Here is the header template...
<html>
<head>
<title><?php echo $title ?> - WurkWithUs</title>
<link rel="stylesheet" href="http://localhost/ci/CodeIgniter_2.1.2/css/bootstrap.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://localhost/ci/CodeIgniter_2.1.2/css/custom.css" type="text/css" media="screen"/>
</head>
<body>
<h1>Wurk With Us</h1>
The style sheets work when I use an absolute path like the one above. However if I try to use something like...
<link rel="stylesheet" href="<?= base_url()?>css/bootstrap.css" type="text/css" media="screen"/>
I get a blank page. When I "view page source" my style line looks like...
<link rel="stylesheet" href="
I have tried to follow the suggestions here and I get the same results i.e. document stops being parsed at the "href=" line.
What am I doing wrong? Is there a better way to load my stylesheets?
I've had this issue many, many times. I'd bet money you're not loading in the URL helper. It does not autoload, so either load it in your controller or autoload it.
If you choose to lead it in your controller, call
$this->load->helper('url');
before you load the view.
The reason you see the href blank in the source is because there was a PHP error at that point (it could not find the method base_url())
Try this:
<?php base_url("css/bootstrap.css"); ?>
Thanks
Try this in your controller
$this->load->helper('html');
and this in the head tag
<?=link_tag('css/style.css')?>
I think you need to load the "url" helper.
Load your helper in autoload.php
Like that way :: $autoload['helper'] = array('url');
This will auto load your helper every time. So, you need not to load it again and again in every controller.
or
If You want to load this helper for specific controller, then load the helper in your controller call
Like that way :: $this->load->helper('url');