How to create admin panel with own theme in CakePHP

How to create admin panel with own theme in CakePHP

So you want a separate admin panel in your CakePHP app? To make one, we need to edit some files and make some new ones. We will also look into creating a theme for the admin panel, and utilize it when in admin.

We are using CakePHP 2.x for this tutorial.

1. Edit /app/Config/core.php

Find:
Configure::write('Routing.prefixes', array('admin'));

We add the admin prefix and uncomment it.

2.  Create a layout for admin
- go to /app/View/Layouts
- make a copy of default.ctp
- name it; admin.ctp

3. Edit admin.ctp layout
- make necessary modifications to the layout

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<?php echo $this->Html->charset(); ?>
	<title>Administrator | <?php echo $title_for_layout; ?></title>
	<?php
		echo $this->fetch('meta');
		echo $this->Html->css(array('admin'));
		echo $this->fetch('css');
		echo $this->fetch('script');
	?>
</head>
<body>
	<div id="container">
		<div id="header">
			<div class="logo"></div>
            <div class="clear"></div>
		</div>
		<div id="content-wrapper">
			<?php echo $this->fetch('content'); ?>
		</div>

        <div id="footer">
			© <?php echo date("Y");?> - All rights          
	</div>
    	     <?php echo $this->element('sql_dump'); ?>    
	</div>

</body>
</html>

4. create admin.css stylesheet
- /app/webroot/css/admin.css
- add your styling

5. edit AppController.php
- add a prefix check in your beforeFilter function to load your admin layout

public function beforeFilter() {
if ((isset($this->params['prefix']) && ($this->params['prefix'] == 'admin'))) {
$this->layout = 'admin';
}
}

6. Edit UsersController.php
- We need to tell UsersController that it needs to run the beforeFilter from AppController (remember to put this in all your controllers).

public function beforeFilter() {	
     parent::beforeFilter();
    	// Controller spesific beforeFilter
	}

- Create an admin function:

public function admin_dashboard() {
		$title_for_layout = 'Dashbord';
		$this->set(compact('title_for_layout'));
	}

- Create the view for the function (/app/Views/Users/admin_dashboard.ctp)

<h1>Dashboard</h1>
<p>Welcome to the Admin Panel</p>

 

7. Point browser to your admin location
- if you have login functions and Auth in play, try setting the auth allow to * in UsersController.php

$this->Auth->allow('*');

- Go to: your-domain.com/admin/users/dashboard

- Your new admin layout should now render, and you should see the “welcome to the admin panel” message.

8. Make more functions + Controllers + Views + Models
- remember to put admin_ on all admin functions/views
- When “admin_” prefix is in use, the admin layout will render.

Have Fun!!

 

Category: CakePHP 2.x Tags: , ,

You might also like:

  • lucky

    thanks, its really helpful…..

  • George

    nothing to do with themes I’m afraid!

    • http://energitilskudd.no/ Tom-Erik Johannessen

      Actually, this tells you exactly how to create an admin panel with a separate theme from frontend theme, as the title suggest.

  • Aashutosh Kumar

    Nice Tutorial for begineers :)

  • AstralProgrammer

    nice. Can I use this to create a back-end of the application?

    • http://energitilskudd.no/ Tom-Erik Johannessen

      yepp :)

      example:

      if ((isset($this->params['prefix']) && ($this->params['prefix'] == ‘admin’))) {

      $this->layout = ‘admin’;

      } else {

      $this->layout = ‘frontend’;

      }

  • nemértem

    Hi,

    thank you. But where is UserController?

  • Jim Barrett

    Nice. Thank you!

  • Webgrity Developer

    can we create a separate css, images folder for admin panel ?

    • http://energitilskudd.no/ Bauer

      yes, just link to it in admin.ctp header, example: admin.css

      Will work 100% separate from regular default layout.

  • test

    test

  • asdas

    asdasd

  • gfhfgggggggggggggggggggggggg

    asf