Skip to content
Advertisement

How do I load an External CSS Style Sheet UNDER an IF condition in CodeIgniter

Here is the server versions I know you might need:

  • CodeIgniter Version: 3.1.9
  • PHP Version: 7.3.6

I am new to php and web design in general.

This is particularly true when it comes to CodeIgniter’s PHP shorthand tools. A friend of mine who has become increasingly hard to get in touch with due to her “day job” is the one who wrote the code for this site a couple years ago. Recently, I have been on my own with it for awhile now and I am learning a lot. But, I recently encountered a small issue that I wonder if anyone could help me with:

Originally all my CSS files were all external stylesheets. Of those stylesheets, ALL of them were loading 100% of the time. So, I got to thinking: “I wonder if it is possible to have individual stylesheets load in CodeIgniter at specific times for specific pages. What brought about this idea is my “main.css” holds the bulk of my site styles but it is now getting into some 585 lines of styles. It would make things go much easier from an updating perspective if I could offload some of that into individual stylesheets for easier editing that would make life a lot easier.

To all you coders out there that may sound simple enough right? Well, there is a slight catch with the fact that I am trying to load in specific styes at a specific time. To better explain this, I should note that there are two areas of the site. One is the public side that everyone can see. The other is what I call the “Admin Side” but all that is really there is the edit console to add pages, see server code versions, etc. That brings me to the heart of my question. How do I add a stylesheet in CodeIgniter’s PHP framework that only applies if a user is “logged in”? This is because these styles only apply to that content. I already have a system in place to load in “admin only items” like a Q&A/Notes nav bar in what she set up as “if $admin….” I don’t know if that helps but that is the point that I want this “admin.css” file to load at.

So, here is where I am lost. I realize you guys need to see some files in order to help but I don’t know which ones.

I know you might need to see the main “Site” controller so here is that one

Site.php

<?php
class Site extends MY_Controller{

 function __construct() {
  parent::__construct();
   $this->load->helper('url');
   $this->session->set_flashdata('uri', $this->uri->uri_string());
   $this->load->model('page_model');
 }

 function index(){
  $uri = $this->uri->rsegment(3);
  if(!isset($uri) or $uri == ''){
   $uri = 'home';
  }
  else if($uri == 'admin'){
   $this->require_login();
   $uri = 'admin/'.$this->uri->rsegment(4);
  }
  $page = $this->page_model->read($uri);
  if(!isset($page)){
   show_404('page');
   die;
  }
  $data = array(
     'title' => "Shirley's Recipes:".$page['title'],
        'id' => $uri,
   'columns' => array('toc', 'page'),
      'page' => $page,
   'updated' => $this->format_date($page['updated'])
  );
  $this->load->view('includes/template', $data);
 }

 function add(){
  $this->require_login();
  if($this->input->post('submit')){
   $id = $this->input->post('name');
   if($this->input->post('admin') == 'admin'){
    $id = 'admin/'.$id;
   }
   $data = array(
       'id' => $id,
    'title' => $this->input->post('title'),
     'page' => $this->input->post('page')
   );
   $this->page_model->create($data);
   redirect('site/'.$id);
  }
  else{
   $data = array(
      'title' => "Shirley's Recipes:Add New Page ",
    'columns' => array('toc', 'admin/page_edit'),
         'id' => '',
       'page' => array('title' => '', 'page' => ''),
       'edit' => False
   );
   $this->load->view('/includes/template', $data);
  }
 }

 function edit(){
  $this->require_login();
  $uri = $this->uri->rsegment(3);
  if(!isset($uri) or $uri == ''){
   echo 'URI must specify page to be edited: domain.com/site/edit/[pagename]';
   die;
  }
  else if($uri == 'admin'){
   $uri = $this->uri->rsegment(4);
   if(!isset($uri) or $uri == ''){
    echo 'URI must specify page to be edited: domain.com/site/add/admin/[pagename]';
    die;
   }
   else{
    $uri = 'admin/'.$uri;
   }
  }
  if($this->input->post('submit')){
   $data = array(
       'id' => $uri,
    'title' => $this->input->post('title'),
     'page' => $this->input->post('page')
   );
   $this->page_model->update($uri, $data);
   redirect('site/'.$uri);
  }
  else{
   $page = $this->page_model->read($uri);
   $data = array(
      'title' => "Shirley's Recipes:Edit Page : ".$uri,
    'columns' => array('toc', 'admin/page_edit'),
         'id' => $uri,
       'page' => $page,
       'edit' => True
   );
   $this->load->view('/includes/template', $data);
  }
 }

 function delete(){
  $this->require_login();
  $uri = $this->uri->rsegment(3);
  if(!isset($uri) or $uri == ''){
   echo 'URL must specify page to be deleted: domain.com/site/delete/[pagename]';
   die;
  }
  else if($uri == 'admin'){
   $uri = 'admin/'.$this->uri->rsegment(4);
  }
  $this->page_model->delete($uri);
  redirect('/');
  }
 }
// End - site.php
?>

The template page the css needs to load in:

template.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta content="en-us" http-equiv="Content-Language" />
 <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
 <title><?=$title ?></title>
 <link rel="shortcut icon" href="/assets/images/icons/favicon.ico">
 <link rel="stylesheet" type="text/css" href="/assets/css/main.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="/assets/css/admin.css" media="screen" />
 <!-- <link rel="stylesheet" type="text/css" href="/assets/css/mobile.css" media="screen" /> -->
 <link rel="stylesheet" type="text/css" href="/assets/css/recipe.css" media="screen" /> 
 <link rel="stylesheet" type="text/css" href="/assets/css/calc.css" media="All" />  
 <link rel="stylesheet" type="text/css" href="/assets/css/pagination.css" media="screen" />
 <link rel="stylesheet" type="text/css" href="/assets/css/print.css" media="print" />
 <link rel="stylesheet" type="text/css" href="/assets/css/wmd.css" media="screen"/>
</head>
<body>
 <div id="main-wrapper">
  <div id="parent-container">
   <div id="logo" class="box">
    <a href="/"><img alt="Shirley's Recipes" src="/assets/images/logo/logoh1.png"></a>
   </div>
   <div id="searchform" class="box noprint">
    <?php
     echo form_open('recipe/search', array('class' => 'form'));
     echo form_input(array('name' =>'query','onfocus' => "this.value = '';", 'onblur' => "if(this.value == ''){this.value ='Recipe Search'}", 'value' => 'Recipe Search'));
     echo form_submit('submit', '', 'class="button"');
     echo form_close();
    ?>
   </div>    
   <nav id="topnav" class="box menu horizontal noprint">
    <ul>
     <li style="z-index: 4;"><a href="/">Home</a></li>
     <li style="z-index: 3;"><a href="/contact">Contact</a></li>
     <li style="z-index: 2;"><a href="/site/dedication">Dedication</a></li>
     <li style="z-index: 1;"><a href="/site/bookinfo">Recipe Book Info</a></li>
     <?php 
      if($admin){ 
       echo '<li class="adminbutton"><a href="/logout">Logout</a></li>';  
      }
      else{ 
       echo '<li class="adminbutton"><a href="/login">Admin Login</a></li>';  
      }
     ?>
    </ul>   
     <script>
      var navs = document.getElementById('topnav').getElementsByTagName('a');
       for (var i = 0; i < navs.length; i++) {
        if (navs[i].getAttribute("href") == window.location.pathname) {
         navs[i].className += " active_nav";
        }
       }
     </script>
    </nav>
    <?php 
     if($admin) {
      $this->load->view('admin/notesnav');
     }
    ?>
    <div id="columns">
     <?php 
      if($admin) {
       $start = array_slice($columns, 0, 1);
       $end = array_slice($columns, 1);
       $columns = array_merge($start, $end);
      }
      foreach($columns as $column){
       $this->load->view($column);
      }
     ?>
    </div>
    <div id="footer">
     &copy;copyright <a href=<?=site_url() ?>>Shirley's Recipes</a><br>
     <div id="codeversion" class="noprint">
      <?php 
       if($admin){
        echo '<a href="https://codeigniter.com/">CodeIgniter</a> Version: 3.1.9<br>';
        echo '<a href="http://www.php.net/">PHP</a> Version: 7.3.6<br>';
       }
      ?>
     </div>   
    </div>
   </div>
 </body>
</html>

I am not sure what else you might need to see. So, please reply back and I will provide anything else that may be required.

Thank you all in advance!

Josh

Advertisement

Answer

In your view ie template.php(here), you just have to check the condition as you’re checking in your controller – 

<?php 
    $uri = $this->uri->rsegment(3);

    if(!isset($uri) or $uri == ''){

        // All your common stylesheets and scripts 
        echo '<link rel="stylesheet" type="text/css" href="bla bla" />';   
        echo '<link rel="stylesheet" type="text/css" href="bla1 bla1" />';

   }else if($uri == 'admin'){ 

        // All your specific stylesheets and scripts for admin
        echo '<link rel="stylesheet" type="text/css" href="bla2 bla2" />';
        echo '<link rel="stylesheet" type="text/css" href="bla3 bla3" />';

    } 
?>

Also, you’re checking the condition in your view with $admin to show login and logout button, you can do just that – 

if($admin){
    // your specific files here
    echo '<link rel="stylesheet" type="text/css" href="bla4 bla4" />';
}else{
    // common files here
    echo '<link rel="stylesheet" type="text/css" href="bla5 bla5" />';
}

See if this helps you.

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement