Develop Template system in custom CMS

Page template system is awesome feature, this featured in wordpress to create your own template like single column data template, double column data template to show pages data as you want to in template, Define theme template in wordpress.

Develop template name in php files for custom #cms, I am just showing in quick method how to build this feature in custom cms

Create table with named page_data

CREATE TABLE IF NOT EXISTS `page_data` (
 `page_id` int(255) NOT NULL AUTO_INCREMENT,
 `page_title` varchar(255) NOT NULL,
 `page_content` text NOT NULL,
 `page_template_name` varchar(20) NOT NULL,
 PRIMARY KEY (`page_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

Create file with insert and update page content.

I have created page named index.php in main folder directory, in index.php file we add code of insert and update the page data.

 Create database connection for index.php file

$db_link = mysqli_connect('localhost','root','','sdtuts_template');

Insert and Update code for index.php file

if(isset($_POST) && !empty($_POST)){
    $page_title = $_POST['page_title'];
    $page_template_name = $_POST['page_template'];
    $page_content = $_POST['page_content'];
    if($_POST['update_id']){
        $update_id = $_POST['update_id'];
        //FOR UPDATE QUERY
        $run_query = 'UPDATE page_data set page_title="'.$page_title.'", page_content="'.$page_content.'", page_template_name="'.$page_template_name.'" ';
    } else {
        //FOR INSERT QUERY
        $run_query =  'INSERT INTO page_data (page_title,page_content,page_template_name) values("'.$page_title.'","'.$page_content.'","'.$page_template_name.'") ';
    }
    mysqli_query($db_link,$run_query);
}

Code for get page record for update from url get parameter

if($_GET['update_id']){
    $update_id = $_GET['update_id'];
    $sel_record = 'SELECT * FROM page_data  where page_id = "'.$update_id.'" ';
    $records = mysqli_query($db_link,$sel_record);
    $records = mysqli_fetch_assoc($records);
    $update_page_title = $records['page_title'];
    $update_page_content = $records['page_content'];
    $update_page_template_name = $records['page_template_name'];
}

Create form for page content add and update

<form method="POST">
    <!-- Main component for a primary marketing message or call to action -->
    <h3>Add Edit Page</h3>

    <div class="input-group">
        <span class="input-group-addon" id="basic-addon2">Page title</span>
        <input type="text" value="<?php echo $update_page_title; ?>" class="form-control" name="page_title">
        <input type="hidden" value="<?php echo $update_id ?>" name="update_id"/>
    </div>
    <hr/>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon2">Page template</span>
        <select class="form-control" name="page_template"></pre>

Here is main step between form.

to get the templates defined in php files and show in field options

//GET LIST OF FILES FROM TEMPLATE DIRECTORY
$dir_files = scandir(dirname(__FILE__) . '/templates');
foreach ($dir_files as $dirfile => $filename) {
    //CHECK IF FILE EXTENSION IS PHP
    if (pathinfo($filename, PATHINFO_EXTENSION) == 'php') {
        //STORE ABSOLUTE PATH OF PHP FILE IN $ABS_FILE_PATH VARIABLE
        $abs_file_path = dirname(__FILE__) . '/templates/' . $filename;
        $file_content = ob_start();
        //SHOW_SOURCE FUNCTION GET THE WHOLE CODE OF FILE AND ITS PRINT THE CODE AUTOMATICALLY, BUT WE ARE STORING THE WHOLE FILE CODE IN VARIABLE $FILE_CONTENT
        show_source($abs_file_path);
        $file_content = ob_get_contents();
        //NOW CLEANING THE OBJECT CONTENT
        ob_clean();
        //GET THE TEMPLATE NAME IN WITH HELP OF REGEX (REGULAR EXPRESSION) FUNCTION OF PREG_MATCH
        preg_match('#(?>sdtemplatename:)\w+#', $file_content, $output);
        $output = str_replace('sdtemplatename:', '', $output['0']);
        if ($output != null) {
            $sel_value = $update_page_template_name == $output ? ' SELECTED="SELECTED" ' : '';
            echo '<option ' . $sel_value . ' value="' . $output . '">' . $output . '</option>';
        }
    }

}

 </select>
 </div>
 <hr/>
 <div class="input-group">
 <span class="input-group-addon" id="basic-addon2">Page content</span>
 <textarea class="form-control" name="page_content" rows="10"><?php echo $update_page_content; ?></textarea>
 </div>
 <hr/>
 <div class="btn-group">
 <button type="submit" class="btn btn-success">Save Change</button>
 </div>
 </div>
</form>

Create php file named page.php

Now we can view page data through main file page.php and then include the required template which selected from index.php file, I am using parameter of get method to pass the ID to get page like I am using it in localhost so just go to http://localhost/sdtuts_template/page.php?id=1

$db  = mysqli_connect('localhost','root','','sdtuts_template');
if($_GET['id']){
    $page_id = $_GET['id'];
    $query = 'SELECT * FROM page_data where page_id = "'.$page_id.'" ';
    $query_run = mysqli_query($db,$query);
    $page_data = mysqli_fetch_assoc($query_run);
    $page_title = $page_data['page_title'];
    $page_content = $page_data['page_content'];
    $page_template_name = $page_data['page_template_name'];
    include(dirname(__FILE__).'/templates/'.$page_template_name.'.php');
}

Create template file in template directory.

In this tutorial I am using #bootstrap for layout, so I just here post code of one template other templates are shown in video tutorial, in this file we do most important things to define template name and get page data from database using above php code and echo title page_data and other content.

  <div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">

            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1><?php echo $page_title;?></h1>
        <?php echo $page_content;?>
      </div>

    </div>