How To Submit Summernote Content to Mysql Database in PHP?

How To Submit Summernote Content to Mysql Database in PHP?

In this tutorial, I will show you how to submit Summernote content to MySql database. Summernote is a popular #WYSIWYG (What You See Is What You Get) editor that allows users to format and style text, add images and videos, and more. In web applications, it's often used to allow users to create rich-text content that can be stored in a database and displayed later. If you're building a web application that uses #Summernote, you may want to store the content created by users in a MySQL database using PHP. In this article, we'll go over the steps required to accomplish this. Setting Up the Database The first step is to create a MySQL database and table to store the Summernote content. We'll assume you already have a MySQL server installed and running. If not, you can download and install MySQL from the official website. Create a new database using the following SQL command: 

CREATE DATABASE `summernote_example`;
Next, create a table to store the content. We'll call our table notes and include columns for the note's ID, title, and content. 
CREATE TABLE `notes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `content` longtext NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Creating the HTML Form

Once the database is set up, we can create an HTML form that allows users to enter a title and Summernote content for their note. Here's an example form: 
<form method="POST" action="save-note.php">
  <label for="title">Title:</label>
  <input type="text" name="title" id="title" required>

  <label for="content">Content:</label>
  <textarea name="content" id="content"></textarea>

  <button type="submit">Save Note</button>
</form>
Note that we've included a name attribute for each form input so we can reference them in our PHP code later.

Handling the Form Submission with PHP

When the user submits the form, we need to handle the data and store it in the MySQL database. We'll create a new PHP script called save-note.php to handle the form submission. Here's the PHP code to handle the form submission: 
<?php
// Connect to the MySQL server
$mysqli = new mysqli("localhost", "username", "password", "summernote_example");

// Check for errors
if ($mysqli->connect_errno) {
  die("Failed to connect to MySQL: " . $mysqli->connect_error);
}

// Escape the form data to prevent SQL injection attacks
$title = $mysqli->real_escape_string($_POST['title']);
$content = $mysqli->real_escape_string($_POST['content']);

// Insert the data into the MySQL database
$query = "INSERT INTO notes (title, content) VALUES ('$title', '$content')";
if (!$mysqli->query($query)) {
  die("Failed to save note: " . $mysqli->error);
}

// Redirect the user back to the form
header("Location: index.html");

Let's go over this code line by line:

  1. We create a new instance of the mysqli class and connect to the MySQL server.
  2. Check for any errors during the connection process.
  3. Escape the form data using the real_escape_string method to prevent SQL injection attacks.
  4. Construct a MySQL query to insert the data into the notes table.
  5. Check for any errors during the query execution.
  6. Redirect the user back to the form using the header function.

Displaying the Summernote Content

Now that we've stored the Summernote content in the MySQL database, we can display it on a webpage. We'll create a new PHP script called view-notes.php to retrieve the data from the database and display it in an HTML table. Here's the PHP code to retrieve and display the Summernote content: 
<?php
// Connect to the MySQL server
$mysqli = new mysqli("localhost", "username", "password", "summernote_example");

// Check for errors
if ($mysqli->connect_errno) {
  die("Failed to connect to MySQL: " . $mysqli->connect_error);
}

// Retrieve the notes from the MySQL database
$query = "SELECT * FROM notes";
$result = $mysqli->query($query);

// Check for errors
if (!$result) {
  die("Failed to retrieve notes: " . $mysqli->error);
}

// Display the notes in an HTML table
echo "<table>";
echo "<tr><th>ID</th><th>Title</th><th>Content</th></tr>";

while ($row = $result->fetch_assoc()) {
  $id = $row['id'];
  $title = $row['title'];
  $content = $row['content'];

  echo "<tr>";
  echo "<td>$id</td>";
  echo "<td>$title</td>";
  echo "<td>$content</td>";
  echo "</tr>";
}

echo "</table>";

Let's go over this code line by line:

  1. We create a new instance of the mysqli class and connect to the MySQL server.
  2. Next, we check for any errors during the connection process.
  3. Then we construct a MySQL query to retrieve all the notes from the notes table.
  4. Now execute the query and store the result in the $result variable.
  5. We check for any errors during the query execution.
  6. Loop through each row in the result set using the fetch_assoc method.
  7. For each row, we retrieve the id, title, and content values.
  8. Display the values in an HTML table row.
  9. Repeat steps 7-8 for each row in the result set.
  10. We close the HTML table.

Overview

In this article, we've gone over the steps required to store Summernote content in a MySQL database using PHP. We've covered creating the database and table, creating the HTML form, handling the form submission with PHP, and displaying the Summernote content on a webpage. With this knowledge, you can now build web applications that allow users to create rich-text content that can be stored and displayed later. Now that you have an idea of what it is all about, go to the next page for finished codes to see it in action.


Creating The Database

For our example in the video we create a database. We are going to call it "summernote". You can following along in the video or just enter this code into your sql in phpMyAdmin. 
CREATE TABLE `entries` (
  `id` int(11) NOT NULL,
  `content` text NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE `entries`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `entries`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

Create Index File

Now create a file and call it index.php and paste the following code into it. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
</head>
<body>
<h1>Summernote</h1>
<form method="post">
  <textarea id="editor" name="editordata"></textarea>
  <button id="save-btn">Save</button>
</form>
<div id="display"></div>;
<script>
$(document).ready(function(){
  $('#editor').summernote({
    height: 300
  });
$("#save-btn").click(function(){
var editor = $("#editor").val();
var dataString = 'editor1='+ editor;
if(editor=='')
{
$("#display").html("Please Enter Some Content");
}
else
{
$.ajax({
type: "POST",
url: "save.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
}
return false;
});
});
</script>
</body>
</html>

Create Save File

Now create a save.php file and copy and paste the following code into it. 
<?php $con = mysqli_connect("localhost","root","","summernote");
$content=mysqli_real_escape_string($con, $_POST['editor1']);
// Convert special characters to HTML entities
$content = htmlspecialchars($content, ENT_QUOTES, 'UTF-8');
$sql = "INSERT INTO entries (content) VALUES ('$content')";
if ($con->query($sql) === TRUE) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "<br>" . $con->error;
}
$con->close();
?>

Create A Display Page

Now create a display.php page and copy and paste this code into it. 
<?php ini_set('display_errors', 1);
ini_set('display_startup_errors', 1); 
error_reporting(E_ALL);
$con = mysqli_connect("localhost","root","","summernote");
// Check connection
if ($con->connect_error) {
  die("Connection failed: " . $con->connect_error);
}
echo "Connected successfully";

$result = $con->query("SELECT * FROM entries") ;
while ($row = $result->fetch_assoc()) {
  // Decode the HTML entities
$decoded_string = html_entity_decode($row['content']);
// Output the decoded string
echo $decoded_string;
//put horizonal line
echo '<hr/>';
}
$con->close();
 ?>

Conclusion

These are the codes that I used in the video. All you should have to do is copy and paste the codes into the files. If you are having any issues comment below. You can also download the files here.


Sign Up To Comment