Skip to main content

convert html template into cakephp 3 template


Convert html template into cakephp 3 template

  to convert a html template into cakephp template please follow these steps

* first download cakephp latest version

extract it into a folder in your xampp/htdocs/newcake

now download your html template

* create a new database. navigate to localhost/phpmyadmin and create new database with name like newcake

* open cofig/app.php and setup database connection
go to line 217  change and change three elements value username , password and database.

Example-
 'Datasources' => [
        'default' => [
            'className' => 'Cake\Database\Connection',
            'driver' => 'Cake\Database\Driver\Mysql',
            'persistent' => false,
            'host' => 'localhost',
            'username' => 'root', //if you are on localhost then change deault username into into root
            'password' => '',    //left it as a blank
            'database' => 'newcake',  //chnage db name ...in our example our db name is newcake
            'encoding' => 'utf8',
            'timezone' => 'UTC',
            'flags' => [],
            'cacheMetadata' => true,
            'log' => false,



now navigate to localhost/newcake and you will see default home page of cakephp 3.

HTML Template Implementaion in cakephp 3


open your html template folder and navigate to css folder and copy all css and paste all css into htdocs/newcake/webroot/css

now open your jd folder of your template and copy all js and paste it into  htdocs/newcake/webroot/js

now open your template's index.html in your favourite text editor
navigate to htdocs/newcake/src/tempalte/element
and create two files header.php and footer.php and paste your header code in header.php and footer code in footer.php

example of index.html page of our theme or template

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap Admin Theme v3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- styles -->
    <link href="css/styles.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
      <div class="header">
         <div class="container">
            <div class="row">
               <div class="col-md-5">
                  <!-- Logo -->
                  <div class="logo">
                     <h1><a href="index.html">Bootstrap Admin Theme</a></h1>
                  </div>
               </div>
               <div class="col-md-5">
                  <div class="row">
                    <div class="col-lg-12">
                      <div class="input-group form">
                           <input type="text" class="form-control" placeholder="Search...">
                           <span class="input-group-btn">
                             <button class="btn btn-primary" type="button">Search</button>
                           </span>
                      </div>
                    </div>
                  </div>
               </div>
               <div class="col-md-2">
                  <div class="navbar navbar-inverse" role="banner">
                      <nav class="collapse navbar-collapse bs-navbar-collapse navbar-right" role="navigation">
                        <ul class="nav navbar-nav">
                          <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <b class="caret"></b></a>
                            <ul class="dropdown-menu animated fadeInUp">
                              <li><a href="profile.html">Profile</a></li>
                              <li><a href="login.html">Logout</a></li>
                            </ul>
                          </li>
                        </ul>
                      </nav>
                  </div>
               </div>
            </div>
         </div>
    </div>

    <div class="page-content">
        <div class="row">
         <div class="col-md-12">
              this is content part
          </div>
        </div>
    </div>

    <footer>
         <div class="container">
       
            <div class="copy text-center">
               Copyright 2014 <a href='#'>Website</a>
            </div>
          
         </div>
      </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/custom.js"></script>
  </body>
</html>


paste blue code in header.php and green code in footer.php


now open src/template/layout/default.ctp
we can call css and javascript using cakephp method
now load all css in head section and js at the bottom of the layout.php

example of default.ctp page after changes
<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.min.css') ?>
     <?= $this->Html->css('styles.css') ?>
    <?= $this->Html->css('mytheme.css') ?>
    <?= $this->html->css('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css') ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
     

<?= $this->element('header') ?>

<div class="page-content">
      <div class="row">
          <div class="col-md-12">
   
              <?= $this->fetch('content') ?>
     
         </div>
      </div>              
</div>
 
  
  
   <?= $this->element('footer') ?>

     <?= $this->Html->script('https://code.jquery.com/jquery.js') ?>
       <?= $this->Html->script('bootstrap.min.js') ?>
       <?= $this->Html->script('custom.js') ?>
</body>
</html>

Now open src/template/pages/home.ctp
and delete all code from it and paste your homepage code which you want to show on your homepage.

You have successfully converted html template into cakephp template.now you can check your new cakephp html template by navigate to localhost/newcake

//notes

if your js and css are not loading then read this how to solve cakephp 3 css and js not loading problem in 2 steps

Comments

  1. Interview Sortout12 September 2019 at 05:23

    Thanks for sharing such a nice information with us on PHP and related topics. Very useful lines and to the point. I appreciate your effort, keep sharing such wonderful things.

    In How many ways we can use Model in CakePHP

    ReplyDelete

Post a Comment

Popular posts from this blog

Run and compile sass scss file to css using node

  Today we learn how to use scss and generate css using node  or Run and compile sass scss file to css using node   So please follow simple  steps :-   Today we will create a project that can read scss file and generates css with it  Note: Make sure you have installed node in your system. If you want to help to install node js based on your system then check our other tutorial or check node js official website. Now create a blank folder and open  terminal(linux) or cmd(windows) and navigate to your current project folder by using cd command Now run below command npm init after enter it will ask you some package info that you can fill according to you or just keep enter until it finished. The above command will generate package.json file Now  we will install npm module that will convert our scss to css Run below command: npm install node-sass So we have installed node-sass package . Now open package.json file in your editor and add below code into it into
12 comments
Read more

How to retrieve Facebook Likes, share , comment Counts

function facebook_count($url){     // Query in FQL     $fql  = "SELECT share_count, like_count, comment_count ";     $fql .= " FROM link_stat WHERE url = '$url'";     $fqlURL = "https://api.facebook.com/method/fql.query?format=json&query=" . urlencode($fql);     // Facebook Response is in JSON     $response = file_get_contents($fqlURL);     return json_decode($response); } $fb = facebook_count('https://www.facebook.com/BahutHoGyiPadhai'); // facebook share count echo $fb[0]->share_count;  echo "like"; // facebook like count echo $fb[0]->like_count ; echo "comment"; // facebook comment count echo $fb[0]->comment_count;  ?>
18 comments
Read more

jQuery Datatable add date range filter

jQuery Datatable add date range filter Datatable is most useful jQuery plugin that helps to make our html tables more powerful and give powers to user to filter , search, sort, pagination etc, But Data table provides a common filter only and yes we can customize and add filter for each column, but still sometimes we need an advance filter like show results only between a date range, So today we will learn how to create a minimum and maximum date range fields and show date picker on it, and user can fill dates by selecting dates and data table will auto filter records based on it. Keep follow below steps :- I am using Bootstrap if you want to use any other framework then you can use. Create a new index.php file  and paste below code in it, i have used all required CDN like bootstrap, datatable, datepicker etc. <!DOCTYPE html> <html> <head>     <title>Datatable Date Range Filter Example</title>     <link rel="stylesheet" href="https://maxcd
Post a Comment
Read more