GrapesJs and PHP - store and load data to show in editor and as HTML page as well

You're supposed to setup a RESTful API, for example:

sql

CREATE DATABASE gjs;
CREATE TABLE IF NOT EXISTS `pages` (
   `id` int(20) NOT NULL AUTO_INCREMENT,
   `assets` TEXT NOT NULL DEFAULT '[]',
   `components` TEXT NOT NULL DEFAULT '[]',
   `css` TEXT NOT NULL DEFAULT ' ',
   `html` TEXT NOT NULL DEFAULT ' ',
   `styles` TEXT NOT NULL DEFAULT '[]',
    PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 ;

db.php

// Enter your Host, username, password, database below.
$con = mysqli_connect("localhost","root","","gjs");
if (mysqli_connect_errno()){
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  die();
}

store.php

<?php
header("Content-Type:application/json");
include('db.php');
$data = json_decode(file_get_contents("php://input"));
$assets = $data['gjs-assets'];
$components = $data['gjs-components'];
$css = $data['gjs-css'];
$html = $data['gjs-html'];
$styles = $data['gjs-style'];
if (isset($_POST['id']) && $_POST['id']!="") {
  $result = mysqli_query(
  $con,
  "UPDATE `pages`
   SET assets=$assets, components=$components, css=$css, html=$html, styles=$styles 
   WHERE id=$id");
  mysqli_close($con)
}else{
 $result = mysqli_query(
 $con,
 "INSERT INTO `pages` (assets, components, css, html, styles)
  VALUES ($assets, $components, $css, $html, $styles");
  mysqli_close($con);
}
response($id, $assets, $components, $css, $html, $styles);
 
function response($id, $assets, $components, $css, $html, $styles){
 $response['id'] = $id;
 $response['gjs-assets'] = $assets;
 $response['gjs-components'] = $components;
 $response['gjs-css'] = $css;
 $response['gjs-html'] = $html;
 $response['gjs-styles'] = $styles;
 
 $json_response = json_encode($response);
 echo $json_response;
}
?>

load.php

<?php
header("Content-Type:application/json");
if (isset($_GET['id']) && $_GET['id']!=""
  include('db.php');
  $id = $_GET['id'];
  $result = mysqli_query(
  $con,
  "SELECT * FROM `pages` WHERE  id=$id");
  if(mysqli_num_rows($result)>0){
    $row = mysqli_fetch_array($result);
    $assets = $row['assets'];
    $components = $row['components'];
    $css = $row['css'];
    $html = $row['html'];
    $styles = $row['styles'];
    response($id, $assets, $components, $css, $html, $styles);
    mysqli_close($con);
  }else{
    response(NULL, NULL, 200,"No Record Found");
  }
}else{
 response(NULL, NULL, 400,"Invalid Request");
}
 
function response($id, $assets, $components, $css, $html, $styles){
 $response['id'] = $id;
 $response['gjs-assets'] = $assets;
 $response['gjs-components'] = $components;
 $response['gjs-css'] = $css;
 $response['gjs-html'] = $html;
 $response['gjs-styles'] = $styles;
 
 $json_response = json_encode($response);
 echo $json_response;
}
?>

.htaccess

Add this to your .htaccess file

RewriteEngine On    # Turn on the rewriting engine

RewriteRule ^store store.php [NC,L] 
RewriteRule ^store/([0-9a-zA-Z_-]*)$ store.php?id=$1 [NC,L]
RewriteRule ^load/([0-9a-zA-Z_-]*)$ load.php?id=$1 [NC,L]

Given you add the files to a folder called api you'll have the following endpoints:

http://localhost/api/load/{id} load a project with given id http://localhost/api/store/{id} update project with given id http://localhost/api/store create a project

@Ju99ernaut , Q1) are all my frontend code snippets right ? Q2) How can I get the $_POST variable ? In the browser network inspection tab, I only see request payload. $_POST is empty there. Q3) For loading purpose, will the saved data be automatically attached to the editor ?

I guess the $_POST variable only works for url parameters, I've updated the code to use the $data variable, your front end snippets are fine however on load the data will not be automatically attached to the editor since the load method only sends a GET request, you will have to tell the editor what to do once the data is loaded.

For example:

//append to frontent code
editor.on('load', () => {
   const rs = editor.StorageManager.get('remote-storage');
   rs.load(res => {
      editor.setComponents(JSON.parse(res['gjs-components'].replace(/^"|"$/g, "")));
      editor.setStyle(JSON.parse(res['gjs-styles'].replace(/^"|"$/g, "")));
   }, err => {
      console.log("An error occured", err);
   });
});

Also update these in storage manager

autoload: false,
urlStore: 'http://localhost/api/store', //OR 'http://localhost/api/store/{id}' {id} should be the id of page you want to update
urlLoad: 'http://localhost/api/store/{id}', //{id} should be the id of page you want to load

You may also have to setup a way to keep track of which page you are editing

You can also check out this tutorial on RESTful APIs using php.