1. Tutorials
  2. PHP Tutorial
  3. Managing Page Content using PHP and Summernote Text Editor Tutorial

Managing Page Content using PHP and Summernote Text Editor Tutorial

Submitted by oretnom23 on Saturday, October 30, 2021 - 16:31.

This is simple Tutorial Code that tackles about Managing Page Content on a Web Application. This tutorial will help you to understand and have an idea of how to create a Page Content Management Feature for a CMS Website. This kind of feature can give your end-users a way to create or manage page content through the front-end or without managing the actual source code files. This can be useful for those who are planning to develop a Content Management System (CMS) using PHP Language.

Below, I provided a source code for a simple web-based application where end users can created a new page content. The source code below uses the following libraries:

Since we will be using PHP Language for our back-end codes, kindly download and install also a local web server such as XAMPP to run the PHP Scripts.

Creating the Interfaces

The below scripts are the PHP Files which contains the HTML Scripts for the interface and PHP Scripts. Save the following files according to the filename written above each scripts.

index.php

This file is the main page of the application which list all the created page content.

  1. <?php session_start(); ?>
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Creatin Page Content using Summernote</title>
  11.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  12.     <link rel="stylesheet" href="./summernote/summernote-lite.css">
  13.     <script src="./js/jquery-3.6.0.min.js"></script>
  14.     <script src="./summernote/summernote-lite.js"></script>
  15.     <script src="./js/bootstrap.min.js"></script>
  16.     <style>
  17.          :root {
  18.             --bs-success-rgb: 71, 222, 152 !important;
  19.         }
  20.        
  21.         html,
  22.         body {
  23.             height: 100%;
  24.             width: 100%;
  25.             font-family: Apple Chancery, cursive;
  26.         }
  27.         .btn-info.text-light:hover,.btn-info.text-light:focus{
  28.             background: #000;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body class="bg-light">
  34.     <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
  35.         <div class="container">
  36.             <a class="navbar-brand" href="https://sourcecodester.com">
  37.             Sourcecodester
  38.             </a>
  39.         </div>
  40.     </nav>
  41.     <div class="container py-3" id="page-container">
  42.         <h3>Creating Page Content using Summernote Library</h3>
  43.         <hr>
  44.         <?php
  45.        if(isset($_SESSION['msg'])):
  46.        ?>
  47.         <div class="alert alert-<?php echo $_SESSION['msg']['type'] ?>">
  48.             <div class="d-flex w-100">
  49.                 <div class="col-11"><?php echo $_SESSION['msg']['text'] ?></div>
  50.                 <div class="col-1 d-flex justify-content-end align-items-center"><button class="btn-close" onclick="$(this).closest('.alert').hide('slow')"></button></div>
  51.             </div>
  52.         </div>
  53.         <?php
  54.            unset($_SESSION['msg']);
  55.        endif;
  56.        ?>
  57.         <div class="col-12 my-2">
  58.             <a href="manage_page.php" class="btn btn-info text-light text-decoration-none"> + Add New Page Content</a>
  59.         </div>
  60.         <div class="row row-cols-sm-1 row-cols-md-3 row-cols-xl-4 gx-4 gy-2">
  61.         <?php
  62.        $pages = scandir('./pages');
  63.        asort($pages);
  64.        foreach($pages as $page):
  65.            if(in_array($page,array('.','..')))
  66.            continue;
  67.        ?>
  68.         <div class="col">
  69.             <div class="card border-right border-primary rounded-0">
  70.                 <div class="card-body">
  71.                     <div class="col-12 text-truncate"><a href="view_page.php?page=<?php echo urlencode($page) ?>" title="<?php echo $page ?>" class=""><b><?php echo $page ?></b></a></div>
  72.                     <div class="w-100 d-flex justify-content-end">
  73.                         <a href="manage_page.php?page=<?php echo urlencode($page) ?>" class="btn btn-sm rounded-0 btn-primary me-2">Edit</a>
  74.                         <a href="delete_page.php?page=<?php echo urlencode($page) ?>" class="btn btn-sm rounded-0 btn-danger delete_data">Delete</a>
  75.                     </div>
  76.                 </div>
  77.             </div>
  78.         </div>
  79.         <?php endforeach; ?>
  80.         </div>
  81.     </div>
  82.     <script>
  83.         $(function(){
  84.             $('.delete_data').click(function(e){
  85.                 e.preventDefault()
  86.                 var _conf = confirm("Are you sure to delete this page content?")
  87.                 if(_conf ===true){
  88.                     location.href=$(this).attr('href')
  89.                 }
  90.             })
  91.         })
  92.     </script>
  93. </body>
  94. </html>
manage_page.php

This file is the interface for the page content form. This is the page where the users create new and update page content file.

  1.         <?php session_start(); ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.  
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>Creatin Page Content using Summernote</title>
  10.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  11.     <link rel="stylesheet" href="./summernote/summernote-lite.css">
  12.     <script src="./js/jquery-3.6.0.min.js"></script>
  13.     <script src="./summernote/summernote-lite.js"></script>
  14.     <script src="./js/bootstrap.min.js"></script>
  15.     <style>
  16.          :root {
  17.             --bs-success-rgb: 71, 222, 152 !important;
  18.         }
  19.        
  20.         html,
  21.         body {
  22.             height: 100%;
  23.             width: 100%;
  24.             font-family: Apple Chancery, cursive;
  25.         }
  26.         input.form-control.border-0{
  27.             transition:border .3s linear
  28.         }
  29.         input.form-control.border-0:focus{
  30.             box-shadow:unset !important;
  31.             border-color:var(--bs-info) !important
  32.         }
  33.         .note-editor.note-frame .note-editing-area .note-editable, .note-editor.note-airframe .note-editing-area .note-editable {
  34.             background: var(--bs-white);
  35.         }
  36.     </style>
  37. </head>
  38.  
  39. <body class="bg-light">
  40.     <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
  41.         <div class="container">
  42.             <a class="navbar-brand" href="https://sourcecodester.com">
  43.             Sourcecodester
  44.             </a>
  45.         </div>
  46.     </nav>
  47.     <div class="container py-3" id="page-container">
  48.         <?php
  49.        if(isset($_SESSION['msg'])):
  50.        ?>
  51.         <div class="alert alert-<?php echo $_SESSION['msg']['type'] ?>">
  52.             <div class="d-flex w-100">
  53.                 <div class="col-11"><?php echo $_SESSION['msg']['text'] ?></div>
  54.                 <div class="col-1"><button class="btn-close" onclick="$(this).closest('.alert').hide('slow')"></button></div>
  55.             </div>
  56.         </div>
  57.         <?php
  58.            unset($_SESSION['msg']);
  59.        endif;
  60.        ?>
  61.         <div class="card">
  62.             <div class="card-header">
  63.                 Manage Page Content
  64.             </div>
  65.             <div class="card-body">
  66.                 <form action="save_page.php" id="content-form" method="POST">
  67.                     <input type="hidden" name="filename" value="<?php echo isset($_SESSION['POST']['filename']) ? $_SESSION['POST']['filename'] : (isset($_GET['page']) ? str_replace('.html','',$_GET['page']) : '')  ?>">
  68.                     <div class="form-group col-6">
  69.                         <label for="fname" class="control-label">File Name <span class="text-info"><small>([a-z0-9A-Z_-])</small></span></label>
  70.                         <input type="text" pattern="[a-z0-9A-Z_-]+" name="fname" id="fname" autofocus autocomplete="off" class="form-control form-control-sm border-0 border-bottom rounded-0" value="<?php echo isset($_SESSION['POST']['fname']) ? $_SESSION['POST']['fname'] : (isset($_GET['page']) ? str_replace('.html','',$_GET['page']) : '')  ?>" required>
  71.                         <span class="text-info"><small>This will be added with .html file extension upod saving.</small></span>
  72.                     </div>
  73.                     <div class="form-group col-12">
  74.                         <label for="content" class="control-label">Content</label>
  75.                         <textarea name="content" id="content" class="summernote" required><?php echo isset($_SESSION['POST']['content']) ? $_SESSION['POST']['content'] : (isset($_GET['page']) ? file_get_contents("./pages/{$_GET['page']}") : '')  ?></textarea>
  76.                     </div>
  77.                 </form>
  78.             </div>
  79.             <div class="card-footer">
  80.                 <button class="btn btn-sm rounded-0 btn-primary" type="submit" form="content-form">Save</button>
  81.                 <a class="btn btn-sm rounded-0 btn-light" href="./">Cancel</a>
  82.             </div>
  83.         </div>
  84.         </div>
  85.     </div>
  86.     <script>
  87.       $('.summernote').summernote({
  88.         placeholder: 'Create you content here.',
  89.         tabsize: 5,
  90.         height: '50vh',
  91.         toolbar: [
  92.           ['style', ['style']],
  93.           ['font', ['bold', 'underline', 'clear']],
  94.           ['color', ['color']],
  95.           ['para', ['ul', 'ol', 'paragraph']],
  96.           ['table', ['table']],
  97.           ['insert', ['link', 'picture', 'video']],
  98.           ['view', ['fullscreen', 'codeview', 'help']]
  99.         ]
  100.       });
  101.     </script>
  102. </body>
  103.  
  104. </html>
view_page.php

This file is the page that displays the page contents created.

  1. <?php session_start(); ?>
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.  
  7.     <meta charset="UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Creatin Page Content using Summernote</title>
  11.     <link rel="stylesheet" href="./css/bootstrap.min.css">
  12.     <link rel="stylesheet" href="./summernote/summernote-lite.css">
  13.     <script src="./js/jquery-3.6.0.min.js"></script>
  14.     <script src="./summernote/summernote-lite.js"></script>
  15.     <script src="./js/bootstrap.min.js"></script>
  16.     <style>
  17.          :root {
  18.             --bs-success-rgb: 71, 222, 152 !important;
  19.         }
  20.        
  21.         html,
  22.         body {
  23.             height: 100%;
  24.             width: 100%;
  25.             font-family: Apple Chancery, cursive;
  26.         }
  27.         .btn-info.text-light:hover,.btn-info.text-light:focus{
  28.             background: #000;
  29.         }
  30.     </style>
  31. </head>
  32.  
  33. <body class="bg-light">
  34.     <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
  35.         <div class="container">
  36.             <a class="navbar-brand" href="https://sourcecodester.com">
  37.             Sourcecodester
  38.             </a>
  39.         </div>
  40.     </nav>
  41.     <div class="container py-3" id="page-container">
  42.         <h3>Creating Page Content using Summernote Library</h3>
  43.         <hr>
  44.         <?php
  45.        if(isset($_SESSION['msg'])):
  46.        ?>
  47.         <div class="alert alert-<?php echo $_SESSION['msg']['type'] ?>">
  48.             <div class="d-flex w-100">
  49.                 <div class="col-11"><?php echo $_SESSION['msg']['text'] ?></div>
  50.                 <div class="col-1 d-flex justify-content-end align-items-center"><button class="btn-close" onclick="$(this).closest('.alert').hide('slow')"></button></div>
  51.             </div>
  52.         </div>
  53.         <?php
  54.            unset($_SESSION['msg']);
  55.        endif;
  56.        ?>
  57.         <div class="col-12 my-2">
  58.             <a href="./" class="btn btn-info text-light text-decoration-none"> Back to List</a>
  59.         </div>
  60.         <div class="content">
  61.             <?php echo isset($_GET['page']) && is_file("./pages/{$_GET['page']}") ? file_get_contents("./pages/{$_GET['page']}") : "<center>Unknown Page Content.</center>" ?>
  62.         </div>
  63.     </div>
  64. </body>
  65. </html>

Creating the PHP Scripts

The following scripts are the PHP files that contains the codes that saving,updating, and deleting the page content files. Save the following files according to the filename written above each scripts.

save_page.php

This is the script for saving the new page content or updating the existing page content.

  1. <?php
  3. if(isset($_SESSION['msg']))
  4. unset($_SESSION['msg']);
  5. if(isset($_SESSION['POST']))
  6. unset($_SESSION['POST']);
  7. $current_name = $_POST['filename'];
  8. $new_name = $_POST['fname'];
  9. $content = $_POST['content'];
  10. $i = 0;
  11. if(!is_dir("./pages"))
  12.     mkdir("./pages");
  13. if($current_name != $new_name){
  14.     $nname = $new_name;
  15.     while(true){
  16.         if(is_file("./pages/{$nname}.html")){
  17.             $nname = $new_name."_".($i++);
  18.         }else{
  19.             break;
  20.         }
  21.     }
  22.     $new_name = $nname;
  23. }
  24. if(!empty($current_name) && $current_name != $new_name){
  25.     rename("./pages/{$current_name}.html","./pages/{$new_name}.html");
  26. }
  27. $save = file_put_contents("./pages/{$new_name}.html",$content);
  28. if($save > 0){
  29.     $_SESSION['msg']['type'] = 'success';
  30.     $_SESSION['msg']['text'] = 'Page Content Successfully Saved.';
  31.     header('location:./');
  32. }else{
  33.     $_SESSION['msg']['type'] = 'danger';
  34.     $_SESSION['msg']['text'] = 'Page Content has failed to save.';
  35.     $_SESSION['POST'] = $_POST;
  36.     header('location:'.$_SERVER['HTTP_REFERER']);
  37. }
  38. ?>
delete_page.php

This is the script for deleting the existing page content.

  1. <?php
  3. if(isset($_SESSION['msg']))
  4. unset($_SESSION['msg']);
  5. if(isset($_SESSION['POST']))
  6. unset($_SESSION['POST']);
  7.  
  8. $page = $_GET['page'];
  9.  
  10. if(is_file("./pages/{$page}")){
  11.     $delete = unlink("./pages/{$page}");
  12.     if($delete){
  13.         $_SESSION['msg']['type'] = 'success';
  14.         $_SESSION['msg']['text'] = 'Page Content Successfully deleted.';
  15.     }else{
  16.         $_SESSION['msg']['type'] = 'danger';
  17.         $_SESSION['msg']['text'] = 'Page Content has failed to delete.';
  18.     }
  19. }else{
  20.     $_SESSION['msg']['type'] = 'danger';
  21.     $_SESSION['msg']['text'] = 'Page Content is unknown.';
  22. }
  23. header('location:'.$_SERVER['HTTP_REFERER']);

There you go. You can now test the web application on your end and see if it works like it was planned to. If you have encountered any errors, kindly review your source code with the source code I provided above. You may also download the working source code I created for this tutorial. The download is located below this article.

DEMO VIDEO

That's the end of this tutorial. I hope this simple PHP Tutorial will help you with what you are looking for and for your future CMS Projects.

Explore on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Tags
html text editor
php tutorial
PHP file_get_contents()
PHP file_put_contents()
PHP rename()
Summernote Library
HTML
css
Bootstrap
Javascript
jQuery
PHP Tutorial Code for Practice
PHP Tutorial Code for Beginners

Comments

Submitted by Anonymous (not verified) on Mon, 04/04/2022 - 16:41

hello myat

Submitted by primeiro (not verified) on Sun, 10/23/2022 - 04:21

Passos para o sucesso Segunda feira Terça feira Quarta feira

Add new comment

About text formats