58.3k How to avoid duplicate data in

35.6k How to Make Forgot Password in

34.2k Check Email Already Exists wit

33.8k What should be Valid OAuth red

29.9k Deleting Caches in Codeigniter

26.9k Best 5 Lightweight PHP Framewo

prev 1 2 3 … 361 next

Integrate theme in Cakephp 3.x

almost 8 years ago

0
0
Positive Vote
0
Negative Vote
0
Save Favourite
0
0
0
0
2.90k

Comment on it

Theme in Cakephp 3.x

Hello friends welcome to findnerd. Today I am going to tell you how to install / create theme in Cakephp 3. Before starting with theme, let us understand what is a theme and why it is used in Cakephp. Themes are used on websites to make them interactive and user friendly. It changes the look and feel of the website. You can install multiple themes and choose your favourite among them. You also don't need to change the content and can switch themes quickly. Lets start integrating theme in Cakephp 3.

Installing Cakephp 3

If you haven't installed cakephp 3, you can install it by using the composer. Write the command to install :

$ sudo composer self-update && composer create-project --prefer-dist cakephp/app cakephp3_project

After setting up database and file permissions, you can run the project on the browser and see the following output page:

In my case the version of Cakephp is 3.3.14 Red Velvet. Presuming that you have created tables in your database, I am creating model, view and controller of Users with the help of bake command:

$ sudo bin/cake bake all users

Above command will generate model, controller and Template files for Users in the respective directories:

Model:

src/Model/Entity/User.php
src/Model/Table/UsersTable.php

Controller:

src/Controller/UsersController.php

View:

src/Template/Users/index.ctp
src/Template/Users/add.ctp
src/Template/Users/edit.ctp
src/Template/Users/delete.ctp

Integrating Theme

Themes are plugins in Cakephp 3. You can set the name of theme which suits you best. In my case, I have named theme to 'Amuk'. Now write down the following command to bake plugin. This will create files required for theme.

$ Console/cake bake plugin Amuk

You can see your theme files within plugins/Amuk/src/Template. For using this theme you need to set the theme name in UsersController or any other Controller where you want to use it. Or if you want to use the theme in the entire project then you will have to set the theme name in AppController. This code will set the theme name: $this->viewBuilder()->theme('Amuk');

class UsersController extends AppController
{   
   // public $theme = 'Modern';   // Uncomment this line if you are using CakePHP version before 3.1

    public function beforeFilter(Event $event)
    {
        parent::beforeFilter($event);
        $this->viewBuilder()->theme('Amuk');
    }
}

Folder structure for plugin is same as cake3_projectname/src/Template/ .Layout file for this theme will be plugins/Amuk/src/Template/Layout. Create default.ctp file inside the Layout folder and add your content. In my case it is:

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @since         0.10.0
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */

$cakeDescription = 'CakePHP: the rapid development php framework';
?>
<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 
        <?= $cakeDescription ?>:
        <?= $this->fetch('title') ?>
    </title>
    <?= $this->Html->meta('icon') ?>
    <?= $this->Html->css(['bootstrap/bootstrap.min.css']) ?>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

    <?= $this->Html->css(['dist/AdminLTE.min.css','iCheck/square/blue.css','cake.new.css','custom.cake.css','dist/skins/_all-skins.min.css']) ?>
    <?php echo $this->Html->script(['jQuery-2.1.4.min.js','bootstrap.min.js','plugins/daterangepicker/moment.min.js','plugins/slimScroll/jquery.slimscroll.min.js','plugins/fastclick/fastclick.min.js','dist/app.min.js','dist/demo.js','plugins/datatables/jquery.dataTables.min.js','plugins/datatables/dataTables.bootstrap.min.js']); ?>
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    <?php echo $this->Html->css('datepicker/bootstrap-datetimepicker.min.css'); ?>

    <?= $this->fetch('meta') ?>
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <?php echo $this->element('header'); 
              echo $this->element('sidebar');
        ?>
    
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <?php echo $this->Flash->render(); ?>
        <?= $this->fetch('content') ?>
    </div><!-- /.content-wrapper -->
    <?php echo $this->element('footer'); ?>
    <?php //echo $this->element('sql_dump'); ?>
    </div><!-- ./wrapper -->
</body>
</html>

Now create the folder for Users in the following directory plugins/Amuk/src/Template/ and create the file index.ctp in plugins/Amuk/src/Template/Users/

<!-- Content Header (Page header) -->
<section class="content-header" style="margin-bottom: 10px;">
  <ol class="breadcrumb" style="padding: 0px">
    <li>
        <?php echo $this -> Html -> link('<i class="fa fa-dashboard"></i>Home', array('controller' => 'users', 'action' => 'index', 'admin'=>true), array('escape' => false)); ?>
    </li>
    <li><?php echo $this -> Html -> link('Users', array('controller' => 'users', 'action' => 'index','admin'=>true)); ?>
    </li>
    <li class="active">Index</li>
  </ol>
</section>

<section class="content-header">
    <h1 style="display: inline;">
    <?php echo __('User List'); ?>
  </h1>
    <div style="margin-right: 15px;" class="btn-group pull-right add_btn"> 
        <?php echo $this->Html->link(__('Add User'), array('action' => 'add','admin'=>true),array('class'=>'content-button-class btn btn-primary')); ?>
    </div>

</section>



 <!-- Main content -->
<section class="content">
<div class="consultantCategories row">
<div class="col-xs-12">
<div class="box">
    <table cellpadding="0" cellspacing="0" class="table table-bordered table-hover dataTable">
    <thead>
    <tr>
        <th scope="col"><?= $this->Paginator->sort('id') ?></th>
        <th scope="col"><?= $this->Paginator->sort('username') ?></th>
        <th scope="col"><?= $this->Paginator->sort('email') ?></th>
        <th scope="col"><?= $this->Paginator->sort('password') ?></th>
        <th scope="col"><?= $this->Paginator->sort('role') ?></th>
        <th scope="col"><?= $this->Paginator->sort('created') ?></th>
        <th scope="col"><?= $this->Paginator->sort('modified') ?></th>
        <th scope="col" class="actions"><?= __('Actions') ?></th>
    </tr>
    </thead>
    <tbody>
            <?php if(empty($users)){ ?>
            <tr><td colspan="8" class="no-records-found" style="text-align: center;"> No records found.</td> </tr>
            <?php } ?>
    <?php foreach ($users as $user): ?>
        <tr>
            <td><?= $this->Number->format($user->id) ?></td>
            <td><?= h($user->username) ?></td>
            <td><?= h($user->email) ?></td>
            <td><?= h($user->password) ?></td>
            <td><?= h($user->role) ?></td>
            <td><?= h($user->created) ?></td>
            <td><?= h($user->modified) ?></td>
            <td class="actions">
                <?= $this->Html->link(__('View'), ['action' => 'view', $user->id]) ?>
                <?= $this->Html->link(__('Edit'), ['action' => 'edit', $user->id]) ?>
                <?= $this->Form->postLink(__('Delete'), ['action' => 'delete', $user->id], ['confirm' => __('Are you sure you want to delete # {0}?', $user->id)]) ?>
            </td>
        </tr>
<?php endforeach; ?>
    </tbody>
    </table>
</div>
    <p>
    <?= $this->Paginator->counter(['format' => __('Page {{page}} of {{pages}}, showing {{current}} record(s) out of {{count}} total')]) ?> </p>
    <div class="paging">
        <?= $this->Paginator->first('<< ' . __('first'), array(), null, array('class' => 'prev disabled')) ?>
        <?= $this->Paginator->prev('< ' . __('previous')) ?>
        <?= $this->Paginator->numbers() ?>
        <?= $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled')) ?>
        <?= $this->Paginator->last(__('last') . ' >>') ?>
    </div>

</div>
</div>
</section>

You can create css and js folders inside plugins/Amuk/webroot/ and save css and js files.

Reload the browser and enjoy theme!

Thanks for reading the blog.

Integrate theme in Cakephp 3.x

Theme in Cakephp 3.x

Installing Cakephp 3

Integrating Theme

0 Comment(s)

Comment on it

Unable to start Java!! Mr. Nerd figure out why..

Positive Votes

Negative Votes

Delete Comment

Post Projects

Manage Company