Blank screen on CI - simple code

Question

davy_yg 2 Posting Whiz

13 Years Ago

Hello,

I revised my previous discussion code by simplifying it.

controllers/page.php

<?php

class Page extends CI_Controller {

    public function index()
    {
    echo "Controller loaded";
    $this->load->view('homepage'); 
    }

}

?>

views/homepage.php

<!DOCTYPE html>
<html lang="en">

<head>
<link href= "<?php echo base_url('assets/css/style.css'); ?>" rel="stylesheet" type="text/css" media="screen"> 
</head>

<body>


TEST
</body>

</html>

assets/css/style.css

$('body').css('background-image', 'url("<?php echo base_url('assets/images/indonusa3.jpg'); ?>")');

RESULT:

Controller loaded

I wonder why the background image does not load. The following file does exist: assets/images/indonusa3.jpg . Also the text "TEST" does not appears if I add:

in the html in homepage.php

php:codeigniter

Edited 13 Years Ago by davy_yg

4 Contributors
16 Replies
608 Views
1 Week Discussion Span
Latest Post 13 Years Ago Latest Post by davy_yg

Dani AI

Generated 10 Months Ago

Short diagnosis and why it happened

The visible "Controller loaded" proves CodeIgniter executed the controller, so the problem was client-side: the stylesheet either never applied or it didn’t actually contain valid CSS the browser could use. As pointed out early on, putting JavaScript (and PHP) into a file served as plain .css will not work — the web server serves the file raw, the browser does not run JS found inside a stylesheet, and PHP inside a static .css won’t be executed unless the server is explicitly parsing that file through PHP.

Practical checklist to confirm and fix the problem

Confirm the stylesheet is being requested and returned as CSS (open the stylesheet URL shown in the page source and check the HTTP status and file contents).
Open the image URL directly in the browser to rule out a wrong path or permission problem.
Use browser DevTools Network and Console: look for 404/403, MIME-type warnings, or jQuery/JS errors (DOM-manipulating scripts must run after jQuery is loaded).
Remember that paths inside a CSS file are relative to the CSS file’s location — not the HTML page. If the CSS lives under assets/css/, the path to an image under assets/images/ must step up/down from that folder.
Check server/CI logs and Apache error logs for denied requests (see ’s suggestion to enable logging). File permissions and .htaccess rules can block access to an assets folder.

Best practices and small design notes

Keep CSS as plain CSS files and put JS into script blocks or separate .js files. If dynamic values are required, either generate a CSS response via PHP with the correct text/css header or pass fully-qualified asset URLs from the controller (a pattern recommended by ) and use them in the view.
Autoload or explicitly load CI’s URL helper so URL helpers are always available for building asset links.
Clear browser cache or force-reload after changes.

Summary

The most likely root cause was the stylesheet containing non‑CSS content or the image path being incorrect relative to the stylesheet. The steps above (DevTools checks, direct URL opens, correct file placement and helpers) are the fastest way to confirm and resolve the issue.

All 16 Replies

cereal 1,524 Nearly a Senior Poster

13 Years Ago

assets is outside the application directory? What do you get from CI logs?

Edited 13 Years Ago by cereal

stevie.whalen 0 Newbie Poster

13 Years Ago

I think you have entered .js script in .css file.

If you want to add .css code then you have to write like this:

body
{
    background-image: url('../images/indonusa3.jpg');
}

or else you have to write your code in .js file

<script>
    $('body').css('background-image', 'url("<?php echo base_url('assets/images/indonusa3.jpg'); ?>")'); 
</script>

Hope this will help you

cereal 1,524 Nearly a Senior Poster

13 Years Ago

CI logs are enabled? In /application/config/config.php search and change log_threshold to 4:

$config['log_threshold'] = 4;

Then be sure that /application/logs/ is writable. After that just by reloading the page you should find a log file with information and, eventually, errors.

Also is assets directory outside of the application directory?

Edited 13 Years Ago by cereal

veedeoo 474 Junior Poster

13 Years Ago

also, if you really want to put your css directory within the same level as the application directory, we can code the controller like this

<?php

class Page extends CI_Controller {

public function __construct(){

parent::__construct();

## load the url helper object
$this->load->helper("url");
}

public function index(){

## define the location of your css directory in reference to the application directory

$data['style'] = base_url().'assets/css/style.css',

$this->load->view('homepage', $data);
}
}

now your style.css can load the background image using this ../images/indonusa3.jpg

The homepage page should have ...

<head>
<link href= "<?php echo $style ; ?>" rel="stylesheet" type="text/css" media="screen">
</head>

That should do it for you...

Edited 13 Years Ago by veedeoo because: info added

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2013-08-27T10:36:49+00:00

How to check th CI logs?

I only have one file appears in application/logs/index.html

<html>
<head>
    <title>403 Forbidden</title>
</head>
<body>

<p>Directory access is forbidden.</p>

</body>
</html>

I revise the style.css

body{background-image:url('../images/indonusa3.jpg'); background-repeat: repeat-x; background-position: center top; height: 800px;}

RESULT:

Controller loaded

(no background image) - I wonder why? There suppose to be a background image.

davy_yg 2 Posting Whiz · Answer 2 · 2013-08-28T03:33:45+00:00

How to create links to another views/ filename ? The image file already works. Now, those images must link to another views/ filenames.

homepage.php

<div id="products">
<a href="connection.php"><img src="<?php echo $connection; ?>"></a>
<a href="collaboration.php"><img src="<?php echo $collaboration ?>"></a>
<a href="solution.php"><img src="<?php echo $solution ?>"></a>
</div>

veedeoo 474 Junior Poster Featured Poster · Answer 3 · 2013-08-28T16:22:07+00:00

define the image directory and pass it on to the view side..

$data['images'] = base_url().'assets/images',

you can also send this to the header if you want, the view files can then use the url

<div id="products">
<a href="connection.php"><img src="<?php echo $images; ?>/connectionImage.jpg" /></a>

</div>

davy_yg 2 Posting Whiz · Answer 4 · 2013-08-29T06:32:21+00:00

I think I have to use anchor to create the link:

views/homepage.php

<!DOCTYPE html>
<html lang="en">

<head>
<link href= "<?php echo $style; ?>" rel="stylesheet" type="text/css" media="screen">
</head>

<body>


<div id="products">
<a href="connection.php"><img src="<?php echo $connection; ?>"></a>
<a href="collaboration.php"><img src="<?php echo $collaboration ?>"></a>
<a href="solution.php"><img src="<?php echo $solution ?>"></a>
</div>


#assumed you want to link to a controller called "Connection"
<?php echo anchor('page/connection', '<img src="<?php echo $connection; ?>">') ?>;

</body>

</html>

controllers/page.php

<?php

class Page extends CI_Controller {

    public function __construct(){

    parent::__construct();

    ## load the url helper object
    $this->load->helper("url");
    }

    public function index()
    {

    ## define the location of your css directory in reference to the application directory
    $data['style'] = base_url().'assets/css/style.css';
    $data['connection'] = base_url().'assets/images/connection.jpg';
    $data['collaboration'] = base_url().'assets/images/collaboration.jpg';
    $data['solution'] = base_url().'assets/images/solution.jpg';


    $this->load->view('homepage', $data); 
    }

    public function connection()
    {
    $this->load->view('connection'); 
    }

    public function collaboration()
    {
    $this->load->view('collaboration'); 
    }

    public function solution()
    {
    $this->load->view('solution'); 
    }

}

The anchor does not work yet. How to write the correct anchor code ? The images should like to another view pages.

veedeoo 474 Junior Poster Featured Poster · Answer 5 · 2013-08-31T12:31:09+00:00

these are good for the images and the css files..

 $data['style'] = base_url().'assets/css/style.css';
$data['connection'] = base_url().'assets/images/connection.jpg';
$data['collaboration'] = base_url().'assets/images/collaboration.jpg';
$data['solution'] = base_url().'assets/images/solution.jpg';

for the pages like connection.php, you can difine them like so..

'connectionUrl'=>base_url().'index.php/connection/';
'collaborationUrl' => base_url().'index.php/collaboration/';
'solutionUrl' => base_url().'index.php/solution/';

by doing so, you don't even have to write a route for those pages..except when pagination is utilized.

connection.php coltroller page example

Class Connection extends CI_Controller {

    function __construct() {
    parent::__construct();

    ## use only the model part if the content of the connection.php are coming from the database. Else, just leave it as is
    //$this->load->model('connection_model');

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

    }

    public function Connection(){

    //give this function a job

    //assign the return of this function to the view

    }

    }

Do the same to the remaining files.. Always create a model if the content is coming from the database..

CI naming standard for the model is similar to the controller's but it is a Pear style and not the Pascal style or camel style. This has to be named as connection_model.php

class Connection_model extends CI_Model {

public function __construct()
{
    parent::_construct();
    ## must load database module
    //$this->load->database();

}

public function someFunction(){

}
}

davy_yg 2 Posting Whiz · Answer 6 · 2013-09-02T03:12:17+00:00

Parse error: syntax error, unexpected '=>' (T_DOUBLE_ARROW) in C:\xampp\htdocs\IndonusaCI\application\controllers\page.php on line 23

line 23: 'connectionUrl' => base_url().'index.php/connection/';

Then, how to create the views/homepage.php ?

davy_yg 2 Posting Whiz · Answer 7 · 2013-09-02T03:19:55+00:00

Do you mean like this:

controllers/page.php

public function index()
    {

    ## define the location of your css directory in reference to the application directory
    $data['style'] = base_url().'assets/css/style.css';
    $data['connection'] = base_url().'assets/images/connection.jpg';
    $data['collaboration'] = base_url().'assets/images/collaboration.jpg';
    $data['solution'] = base_url().'assets/images/solution.jpg';

    $data['connectionUrl'] = base_url().'connection/';
    $data['collaborationUrl'] = base_url().'index.php/collaboration/';
    $data['solutionUrl'] = base_url().'index.php/solution/';


    $this->load->view('homepage', $data); 
    }

    public function connection()
    {
    $this->load->view('connection'); 
    }

views/homepage.php

<div id="products">
<a href="<?php echo $connectionUrl; ?>"><img src="<?php echo $connection; ?>"></a>

If I click the image, it will carries me to http://localhost/IndonusaCI/connection/

Object not found!

The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

If you think this is a server error, please contact the webmaster.
Error 404
localhost
Apache/2.4.3 (Win32) OpenSSL/1.0.1c PHP/5.4.7

Looks like I need routes.

veedeoo 474 Junior Poster Featured Poster · Answer 8 · 2013-09-02T03:59:52+00:00

these were wrong.. I didn't even realized it, until when you brought if up.

'connectionUrl'=>base_url().'index.php/connection/';
'collaborationUrl' => base_url().'index.php/collaboration/';
'solutionUrl' => base_url().'index.php/solution/';

correct way

'connectionUrl'= base_url().'index.php/connection/';
'collaborationUrl' = base_url().'index.php/collaboration/';
'solutionUrl' = base_url().'index.php/solution/';

You need to create a new page called connection, collaboration, and solution , in order for it to work.

You probably don't even need to route it. As long as you have pages in the controller directory, the CI autoloader will look for it.

davy_yg 2 Posting Whiz · Answer 9 · 2013-09-02T04:22:37+00:00

I do have connection.php, collaboration.php and solution.php page.

How to code the:

views/homepage.php ?

<a href='connectionUrl'><img src="<?php echo $connection; ?>"></a>

Parse error: syntax error, unexpected '=' in C:\xampp\htdocs\IndonusaCI\application\controllers\page.php on line 23

veedeoo 474 Junior Poster Featured Poster · Answer 10 · 2013-09-02T05:55:11+00:00

Ok,... let's take care of this puppy once and for good.. I normally assign everything as an array, because it saves time and variables are easy to track and update. So, this example application will not be the same as what we could find on the web. By doing the same construct, it will be a lot easier to upgrade your CI with Smarty, Twig, or TinyButStrong package in the future.

controllers/page.php

<?php
class Page extends CI_Controller {

public function __construct(){
parent::__construct();
$this->load->helper('url');

}
public function index()
{
## define the location of your css directory in reference to the application directory

$data = array(
        'style' => base_url().'assets/css/style.css',
        'connection' => base_url().'assets/images/connection.jpg',
        'collaboration' => base_url().'assets/images/collaboration.jpg',
        'solution' => base_url().'assets/images/solution.jpg',
        'connectionUrl'=> base_url().'index.php/connection/',
        'collaborationUrl' => base_url().'index.php/collaboration/',
        'solutionUrl' => base_url().'index.php/solution/'

        );

$this->load->view('homepage', $data);
}

}

views/homepage.php

    <a href="<?php echo $connectionUrl; ?>"><img src="<?php echo $connection; ?>"></a>
<a href="<?php echo $collaborationUrl; ?>"><img src="<?php echo $collaboration ?>"></a>
<a href="<?php echo $solutionUrl; ?>"><img src="<?php echo $solution ?>"></a>

controllers/connection.php

class Connection extends CI_Controller {

public function __construct(){

 parent::__construct();
 $this->load->helper('url');

}
public function index(){



 $data = array(
            'connection'=>'Type your connection content here'
            );

 $this->load->view('connection',$data);


}

}

controllers/collaboration.php

class Collaboration extends CI_Controller {

public function __construct(){

 parent::__construct();
 $this->load->helper('url');

}
public function index(){



 $data = array(
            'collaboration'=>'Type your collaboration content here'
            );

 $this->load->view('collaboration',$data);


}

}

controllers/solution.php

class Solution extends CI_Controller {

public function __construct(){

 parent::__construct();
 $this->load->helper('url');

}
public function index(){



 $data = array(
            'solution'=>'Type your solution content here'
            );

 $this->load->view('solution',$data);


}

}

views/connection.php

<?php echo $connection;?>

views/collaboration.php

<?php echo $collaboration; ?>

Views/solution.php

<?php echo $solution; ?>

config/routes.php .. I guess we should create a route, so that we are looking at the same application.

$route['collaboration'] = 'collaboration';
$route['connection'] = 'connection';
$route['solution'] = 'solution';

That's it....

davy_yg 2 Posting Whiz · Answer 11 · 2013-09-03T04:31:06+00:00

Thanks. Now it works.

One more thing: how to pass the url link to the css file. style.css for example?

In my style.css I have (a few image files link):

body{background-image:url('../images/indonusa3.jpg'); background-repeat: repeat-x; background-position: center top; height: 200px;}

#navigation {background-image:url('../images/nav.jpg'); background-repeat: repeat-x; width: 900px; height: 80px; z-index: 2; border-radius: 10px; border-style:solid; border-width: 1px; border-color: gray; margin-left: auto; margin-right: auto; margin-top: 50px;}

davy_yg 2 Posting Whiz · Answer 12 · 2013-09-03T08:37:15+00:00

Nevermind, it works. I can just keep it the way it is.

Blank screen on CI - simple code

Dani AI

Recommended Answers Collapse Answers

All 16 Replies

Recommended Answers