71561

CodeIgniter 3.x - Reload View with Different CSS File Using User Input

Question:

<strong>Problem:</strong>

I created a static page view (in its own view folder) that demos the new Sakura.css framework. The framework comes with four CSS themes. I want to be able to select a theme from a list of links and reload the same view with the associated CSS theme file via the controller. <em>I also need the view to default to the 'standard.css' theme.</em> Finally, I'd like to avoid JavaScript/jQuery solutions.

I'm struggling to grasp the relationship between controller function names, custom routing, and the URI. I think I'm at the brink of an 'aha' moment, and finding a solution this issue out is definitely going to help.

<strong>Current Code:</strong>

<em>Note: I've also set .htaccess to remove index.php from the URL.</em>

views/sakura/index.php

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Sakura Demo</title> <link rel="stylesheet" href="<?php echo asset_url() ;?>css/<?php echo $theme; ?>.css" media="screen" /> </head> <body> <header> <nav> <ul> <li><a <?php if (isset($theme) && ($theme = 'standard')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/standard'); ?>">Standard</a></li> <li><a <?php if (isset($theme) && ($theme = 'dark')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/dark'); ?>">Dark</a></li> <li><a <?php if (isset($theme) && ($theme = 'earthly')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/earthly'); ?>">Earthly</a></li> <li><a <?php if (isset($theme) && ($theme = 'vader')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/vader'); ?>">Vader</a></li> </ul> </nav> </header> <main>

Sakura.css Demo

Sakura.css is a minimal css framework/theme that can be dropped into any project for an instantaneous modern-looking website.

</main> <footer>

Footer Text

</footer> </body> </html>

controllers/Sakura.php

<?php class Sakura extends CI_Controller { public function theme($theme) { $data['theme'] = array( 'standard' => "standard", 'dark' => "dark", 'earthly' => "earthly", 'vader' => "vader" ); $this->load->view('sakura/theme', $data); } }

config/routes.php

<?php $route['sakura/(:any)'] = 'sakura/$1'; $route['sakura'] = 'sakura'; $route['default_controller'] = 'pages/view'; $route['404_override'] = ''; $route['translate_uri_dashes'] = FALSE;

The only way I've been able to get the view to load at all is with this function in the Sakura.php controller:

public function index() { $data['theme'] = "standard"; $this->load->view('sakura/index', $data); }

<strong>Desired URL Structure:</strong> <-- Not necessary, but would be great!

Default View: mywebsite.com/sakura/ <strong>-or-</strong> mywebsite.com/sakura/standard

Theme View: mywebsite.com/sakura/selected-theme

<strong>Final Thoughts:</strong>

Thank you all in advance for any help on this issue. I rely on the StackOverflow community often and I greatly appreciate the time and consideration that goes into solving my issues.

Answer1:

Just a guess, but try something like...?

Controller

$css = $this->uri->segment(2); $allowed_input = array('standard', 'dark', 'earthly', 'vader'); if ((isset($css)) && (!in_array($css, $allowed_input))) { echo 'Filthy human!'; } $data['css'] = $css; // You can probably just do this above, it's just harder to type.

View

<link rel="stylesheet" href="<?php echo asset_url() ;?>css/<?php echo (!isset($css) ? 'standard' : $css);?>.css" media="screen" />

Route

Change the first line to:

$route['sakura/(:any)'] = 'sakura/index/$1';

Then mywebsite.com/sakura/standard should work, but if the "standard" bit isn't there, it'll load the standard by default. Threw in the in_array() bit as a small sanity check, but you'll probably want to be more thorough in your validation.

Answer2:

I don't think you need to deal with routes to achieve it. This is how I would solve it:

<strong>Controller (Sakura.php)</strong>

class Sakura extends CI_Controller { public function index() { $this->load->view('welcome_message'); } public function theme($theme='standard') { $data['theme']=$theme; $data['main_content'] = 'sakura/sakura_view'; $this -> load -> view('sakura/sakura_view', $data); } }

Notice that I used public function theme($theme='standard') so it defaults to standard if there is no a parameter defined on the third URI segment.

<strong>View (views/sakura/sakura_view.php)</strong>

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Sakura Demo</title> <link rel="stylesheet" href="<?php echo asset_url() ;?>css/<?php echo $theme; ?>.css" media="screen" /> </head> <body> <header> <nav> <ul> <li><a <?php if (isset($theme) && ($theme = 'standard')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/standard'); ?>">Standard</a></li> <li><a <?php if (isset($theme) && ($theme = 'dark')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/dark'); ?>">Dark</a></li> <li><a <?php if (isset($theme) && ($theme = 'earthly')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/earthly'); ?>">Earthly</a></li> <li><a <?php if (isset($theme) && ($theme = 'vader')) { echo 'class="current"'; } ?>href="<?php echo base_url('sakura/vader'); ?>">Vader</a></li> </ul> </nav> </header> <main>

Sakura.css Demo

Sakura.css is a minimal css framework/theme that can be dropped into any project for an instantaneous modern-looking website.

</main> <footer>

Footer Text

</footer> </body> </html>

Recommend

  • Overriding window.location on Webbrowser Control
  • Declaration of does not work with Ionic's ion-nav-view in IBM MobileFirst
  • Embedding a Google map
  • jinja2 template not found and internal server error
  • How to add regEx in angular filter
  • How secure are apple APNS push notifications?
  • Why does the font in these TD elements render at different sizes?
  • Flask not finding files in my package's 'static' directory
  • google maps autocomplete bounces back already cleared text …odd…odd…odd
  • I am receiving HibernateException “No Hibernate Session bound to thread, and configuration does not
  • MySQL: Update rows in table by iterating and joining with another one
  • Javascript CORS - No 'Access-Control-Allow-Origin' header is present
  • How do I retrieve the user information of a user authenticated with Apache's mod_ldap?
  • How can I include If-None-Match header in HttpRequestMessage
  • Sending cookie value via httpget but not getting the desired response
  • Why isn't obj.style.left = “200px”; working in this code?
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Tell Git to stop prompting me for conflicts when none really exist?
  • JBoss External Properties Files in Classpath
  • Parse a date string in a specific locale (not timezone!)
  • Android - Material Design - NavigationView - How to put vertical scroll?
  • Jquery UI tool tip close icon
  • Display issues when we change from one jquery mobile page to another in firefox
  • SSO with signing and signature validation doesn't work
  • Do I've to free mysql result after storing it?
  • Python - Map / Reduce - How do I read JSON specific field in using DISCO count words example
  • Hibernate gives error error as “Access to DialectResolutionInfo cannot be null when 'hibernate.
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • coudnt use logback because of log4j
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • JaxB to read class hierarchy
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal