CODEWITHSUNDEEP
phpcodeignitergoogle-app-engineyaml
Shiran S Ekanayake
Shiran S Ekanayake

Reputation: 179

app.yaml loads the css only for index.php file in CodeIgniter

I have created a code-ignitor PHP project and I need it to deploy to the Google app engine. So far I have configured the app.yaml like below

 application: the-new-test-project
version: 1
runtime: php55
api_version: 1
#threadsafe: yes

handlers:

- url: /css
  static_dir: application/views/css

- url: /images
  static_dir: application/views/images

- url: /js
  static_dir: application/views/js

- url: /fonts
  static_dir: application/views/fonts

- url: /.*
  script: index.php

After running my project using Google app engine launcher, it loads the index.php page well with the applied stylesheets. I have link called "login" in my index.php file and when I click that the login.php page is loaded. That code is below :

<a href=<?php echo site_url('welcome/login'); ?>><i class="fa fa-lock"></i> Login</a>

My welcome controller class is like below :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

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

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

After clicking that "login" link on index.php page, it loads the login page but without applying the stylesheets. I could't find what is the problem. Is it the app.yaml file or have I done something silly in my php files? Please help..

login.php head section is like below :

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Login | E-Shopper</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/price-range.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="application/viewscss/main.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->       
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->

Upvotes: 0

Views: 428

Answers (1)

Dave W. Smith
Dave W. Smith

Reputation: 24966

Make the references absolute. I.e., instead of the relative form

<link href="css/bootstrap.min.css" rel="stylesheet">

use

<link href="/css/bootstrap.min.css" rel="stylesheet">

The difference is explained in Absolute vs relative URLs (but note that you most likely want the absolute form here, rather than the relative form recommended in that question).

Upvotes: 2

Related Questions