WYSIWYG Web Builder • CMS Chat Transcript

Based on the MCP metadata and schemas for WYSIWYG Web Builder, the software provides two distinct built-in Content Management System (CMS) architectures:

1. The Database-Driven CMS (MySQL + PHP): A full-featured dynamic publishing system for multi-page articles, blogs, scheduled publishing, and dynamic navigation.
2. The Editable Content CMS (Flat-file JSON + jQuery): A lightweight, database-free solution designed to let clients edit specific text blocks directly on static pages.

---

Comparison of the Two Built-in CMS Architectures

---

1. Database-Driven CMS Components

This system runs on PHP and MySQL. It automatically manages database tables (default prefix CMS_, creating CMS_PAGES, CMS_SEARCH_WORDS, and CMS_SEARCH_WORDMATCH) and powers end-to-end dynamic content.

A. cmsAdmin (CMS Administration Panel)

• Purpose: The web-based backend management dashboard where administrators or clients log in to create, edit, reorder, and publish CMS pages and articles.
• Authentication & Access: Configured with cms.adminPassword, cms.sessionTimeout, allowed user lists (cms.users), and cms.disablePageManagement to restrict standard users from altering site structure.
• Pluggable WYSIWYG Editors: Supports 10 built-in editor options (cms.editor.type):
• textarea, wwbeditor, cleditor, tinymce, ckeditor, nicedit, sceditor, trumbowyg, summernote, suneditor.
• Publishing & Scheduling: Manages database fields including publish_at, unpublish_at, parent/child page hierarchies, SEO-friendly URLs, category IDs, visibility toggles, and search indexing flags.
• Email Notifications: Automatically notifies the webmaster when pages are created or modified (cms.email.address, cms.email.mailEngine, cms.email.message).
• Plugins: Supports server-side CMS extensions via cms.plugins.
• Theme & UI Styling: Offers full control over admin interface styles (header colors, zebra-striped row colors, button styling, and form input controls).

B. cmsView (Dynamic Content Viewport)

• Purpose: The primary public-facing display container that fetches and renders CMS content from the database.
• Display Modes (cmsview.mode):

1. Variable Content (Mode 0): Dynamically renders the requested page/article based on the URL parameter (?page=...) or SEO rewrite.
2. Fixed Content (Mode 1): Locked to render a specific article ID (cmsview.page_id).
3. Page List / Blog View (Mode 2): Lists recent articles/posts in reverse-chronological order up to a configurable limit (m_nMaximumItems), complete with "Read more" links.
4. Popular Articles (Mode 3): Automatically ranks and displays articles by view count (views).

• Dynamic SEO Integration: When cmsview.include_meta_tags is enabled, page titles, descriptions, and keywords are injected directly from the database into the page headers.
• AJAX Support: cmsview.enable_ajax allows article navigation and paging without reloading the whole browser page.

C. cmsSearch (Dedicated CMS Search)

• Purpose: Form input widget for searching CMS articles and views.
• CMS vs. Static Search: Unlike the standard search object (which indexes static HTML pages), cmsSearch queries MySQL relational tables (CMS_SEARCH_WORDS and CMS_SEARCH_WORDMATCH).
• Key Properties: Autocomplete suggestions (cmsSearch.enableAutoComplete), keyword and description toggles, configurable result title colors, and customizable empty search messages (cmsSearch.noResultsText).

D. cmsLabel (Dynamic Field Display)

• Purpose: A granular display block used to output specific CMS variables anywhere on a page template or layout grid.
• Template Variables: Evaluates PHP variables directly, including:
• $cms_name, $cms_title, $cms_created_by, $cms_create_date, $cms_last_update_date, $cms_views, $cms_extra_data.
• Design Integration: Supports fonts, background modes, custom borders, drop shadows, responsive breakpoints, and animations.

E. cmsCard (Dynamic Bootstrap Card)

• Purpose: Merges the responsive styling of WWB Bootstrap Cards with CMS data bindings.
• Data Integration: Card items (headers, images, titles, bodies, and action buttons) can bind to variables like $cms_title, $cms_content, $cms_created_by, and smart links (smartlink://...?page=$cms_page_id).
• Responsive Behavior: Inherits modern card features such as flexbox alignment, aspect ratio height modes, hover transitions, and dark mode support.

F. cmsMenu & "Use for CMS" Navigation

• cmsMenu: Dedicated menu that queries MySQL to build a dynamic navigation tree of active, published CMS pages.
• Standard Menus with CMS Integration: WWB also allows standard navigation components (such as cssMenu, responsiveMenu, panelMenu, overlayMenu, breadcrumb, and pagination) to enable "Use for CMS" (m_bUseForCMS), dynamically populating their links from the CMS database while keeping the site's responsive navigation styling.

---

2. Editable Content CMS (Flat-file / JSON)

Designed for scenarios where clients want simple inline editing of static text regions without configuring a MySQL server.

A. cmsContentAdmin (Editable Content Administrator)

• Purpose: Password-protected administrative login page designed exclusively for managing static page content blocks.
• Page Management: Allows the administrator to restrict editing to specific project pages via cmsContent.pages.
• Rich Text Editing: Uses the same selectable editor engines (Summernote, CKEditor, TinyMCE, Trumbowyg, etc.) as the full CMS.
• Storage: Directly updates and commits changes to a <pagename>.json file on the web server.

B. cmsContent (Editable Content Block)

• Purpose: Placed directly on responsive static pages as an editable text area.
• Client-Side Hydration:
• Renders initial fallback text in HTML/CSS.
• Injects a jQuery snippet on document.ready that fetches <pagename>.json?v=<timestamp> and dynamically updates #wb_<object_id> with the latest saved version.

---

MCP Best Practices & Guidance

1. Responsive Flow Layouts: Both cmsView, cmsCard, and cmsContent support flexible layout containers. Place them inside layoutGrid, flexBox, or flexGrid containers rather than using absolute coordinates.
2. Search Object Selection:

• Use search for static, standard site pages.
• Use cmsSearch when indexing and searching dynamic CMS articles stored in MySQL.

1. Card Selection:

• Use card or cardContainer for static presentation cards.
• Use cmsCard when card content must be dynamically driven from the CMS article database.

1. Breakpoints: Use standard page breakpoints (create_page_breakpoint) to control responsive reflow of CMS templates, keeping database connection and styling properties global.

A complete CMS demonstration project has been created directly in WYSIWYG Web Builder via MCP.

The project demonstrates both CMS systems available in WYSIWYG Web Builder:

1. The Full Database CMS (MySQL + PHP): Dynamic articles, article search, metadata labels, and dynamic cards.
2. The Flat-File Editable Content CMS (JSON + jQuery): Database-free editable blocks managed via a dedicated web administrator.

---

Project Structure & Pages

graph TD
    Index["index.php (Home / Portal)
• cmsView (Dynamic article viewer)
• cmsSearch (Database article search)
• cmsLabel (Author, Date, Views)
• cmsCard (Dynamic Bootstrap Card)"]
    CmsAdmin["cmsadmin.php (Database Admin)
• cmsAdmin (Summernote editor, scheduling)"]
    Editable["editable.php (Flat-file Demo)
• cmsContent 1 (Company announcement)
• cmsContent 2 (Weekly highlights)"]
    EditableAdmin["editableadmin.php (Content Admin)
• cmsContentAdmin (Flat-file JSON editor)"]

    Index -->|Navigation| CmsAdmin
    Index -->|Navigation| Editable
    Editable -->|Admin CTA| EditableAdmin
    CmsAdmin -->|Return Link| Index
    EditableAdmin -->|Return Link| Index

---

Page Breakdown & Implemented CMS Tools

1. index.php — Dynamic CMS Portal

• Layout: Built entirely with responsive layoutGrid containers.
• Header & Navigation (navGrid):
• Branding: heading set to "CMS Portal".
• Navigation: responsiveMenu with links to Home (index.php), CMS Admin (cmsadmin.php), Editable Content (editable.php), and Content Admin (editableadmin.php).
• Hero & Search (searchHeroGrid):
• cmsSearch: Form input bound to the MySQL search index with the placeholder "Search dynamic CMS articles...".
• Main Content & Sidebar (contentGrid — 8:4 column split):
• Main Column (8 units):
• cmsView (mainCmsView): Primary viewport configured to render the active dynamic article from the MySQL database (cmsdemo, table prefix CMS_).
• Sidebar (4 units):
• cmsLabel widgets: Four discrete dynamic field labels evaluating server-side PHP variables:
• Title: $cms_title
• Author: $cms_created_by
• Date: $cms_create_date
• Views: $cms_views
• cmsCard (featuredCmsCard): Responsive Bootstrap Card automatically mapped to $cms_title, $cms_content, $cms_created_by, $cms_last_update_date, and smart read-more links (index.php?page=$cms_page_id).
• Footer (footerGrid): Responsive footer notes.

---

2. cmsadmin.php — Full CMS Administration Dashboard

• Purpose: Web-based administration panel for managing database articles, categories, and publishing schedules.
• Header (adminNavGrid): Portal title and return button (button type link pointing to index.php).
• Admin Container (adminMainGrid):
• cmsAdmin (adminPanel):
• Database Connection: Configured for cmsdemo database on localhost with table prefix CMS_.
• Authentication: Password protected (admin123).
• Editor Engine: Configured to use the Summernote rich text editor.

---

3. editable.php — Flat-File "Editable Content" Demo

• Purpose: Demonstrates client-editable page regions that require no MySQL database, saving directly into JSON files.
• Header (editNavGrid): Showcase branding and a return button to index.php.
• Content Blocks (editBlocksGrid):
• companyAnnouncement (cmsContent): Editable block initialized with fallback announcement copy.
• weeklyHighlights (cmsContent): Second independent editable block initialized with feature highlights.
• Behind the scenes: On page load, client-side jQuery automatically queries editable.json?v=<timestamp> and injects the updated content into the respective DOM elements.
• Call to Action (editActionGrid): Button linking directly to editableadmin.php.

---

4. editableadmin.php — Editable Content Administrator

• Purpose: Dedicated lightweight administration console where clients can edit static page content blocks online.
• Admin Container (contentAdminMainGrid):
• cmsContentAdmin (contentAdminPanel): Password-protected interface (editor123) with rich text editing capabilities that writes directly to the server's <page>.json files.

---

How to Test the Project

1. Publish to a PHP-enabled Server / Localhost (e.g. XAMPP, WampServer, or Docker).
2. Database CMS:

• Create a MySQL database named cmsdemo.
• Open cmsadmin.php, log in with password admin123.
• Create an article (the tables CMS_PAGES, CMS_SEARCH_WORDS, and CMS_SEARCH_WORDMATCH will be auto-generated).
• Open index.php to see the article, search it via cmsSearch, and inspect the cmsLabel metadata and cmsCard.

1. Editable Content CMS:

• Open editableadmin.php, log in with password editor123.
• Edit the text for companyAnnouncement or weeklyHighlights and save.
• Open editable.php to observe the content hydrate dynamically via JSON.

The CMS demo project has been upgraded into a clean, modern, enterprise SaaS aesthetic.

---

Visual & Architectural Design System

All 4 pages are built around a unified modern design system:

---

Project Structure & Page Showcase

graph TD
    subgraph Frontend Pages
        A["index.php
(MySQL Dynamic CMS Portal)"]
        C["editable.php
(Flat-File JSON CMS)"]
    end

    subgraph Admin Dashboards
        B["cmsadmin.php
(Database Management Console)"]
        D["editableadmin.php
(In-Browser Block Editor)"]
    end

    A <-->|Manage Articles| B
    C <-->|Edit Content| D
    A <-->|Direct Navigation| C

---

Page-by-Page Overview

1. index.php — Dynamic MySQL CMS Portal

• Header (navGrid): Floating white card bar (1200px max-width, 10px radius) with Inter 18pt brand identity and a responsive pill menu linking all 4 pages.
• Hero & Search Banner (searchHeroGrid): Slate-900 panel (#0F172A, 12px radius, 32px padding) housing a hero statement and a dark search box (#1E293B background, #334155 border) wired into the multi-word MySQL search engine.
• Main Content Grid (contentGrid): 8:4 column split (66.67% / 33.33%) with 24px gutter and separate rounded card surfaces (#FFFFFF, 12px radius):
• Left (Main View): Dynamic Article View (cmsView) with Slate-50 background, Inter font, custom heading scale, and scroll container displaying $cms_content.
• Right (Sidebar & Teaser):
• Metadata Badges: Dynamic cmsLabel chips (Title, Author, Date, Views) with #F1F5F9 pill background and Slate-200 border.
• Featured CMS Card (cmsCard): Styled card container with header, bold title, excerpt, divider, royal blue CTA button (#2563EB), and muted timestamp footer.
• Footer (footerGrid): Center-aligned Slate-400 copyright banner.

2. cmsadmin.php — Database CMS Dashboard

• Header (adminNavGrid): Matching white card header with brand title and a primary blue "← Return to Home" button.
• Main Surface (adminMainGrid): Card container with Inter 20pt title and subtitle description.
• Admin Console (adminPanel): Built-in CmsAdmin component themed to match the design palette:
• Font: Inter
• Alternating rows: #F8FAFC
• Row hover state: #F1F5F9
• Table headers: #0F172A Slate-900 with white text
• Action buttons: #2563EB Royal Blue with 6px radius
• Form inputs: Slate-300 borders with royal blue focus outlines

3. editable.php — Flat-File / JSON Editable Content Demo

• Header (editNavGrid): Matching header bar with quick navigation.
• Explainer Panel (editHeroGrid): Dark Slate-900 accent hero explaining that this modality uses zero MySQL databases and loads content via lightweight JSON files.
• Block Display Grid (editBlocksGrid): 2-column (50% / 50%) layout featuring:
• companyAnnouncement: Dynamic editable block with Inter 11pt typography.
• weeklyHighlights: Second independent editable block.
• Generated with automated jQuery JSON hydration script ($.getJSON('editable.json')) and smooth unhiding.
• Call-to-Action Bar (editActionGrid): Primary blue CTA linking directly to the flat-file administrator console.

4. editableadmin.php — Flat-File Content Administrator

• Header (contentAdminNavGrid): Matching clean header bar and return link.
• Main Surface (contentAdminMainGrid): Floating card surface with Inter 20pt section header and usage instructions.
• Content Manager Panel (contentAdminPanel): EditableContentAdmin component themed with:
• Font: Inter
• Table background: #FFFFFF with #F8FAFC alternating rows
• Header: #0F172A
• Buttons: #2563EB with 6px border radius
• Password protection configured (Admin Password: editor123).

---

How to Preview & Test

1. Publish to PHP Server:

• In WYSIWYG Web Builder, publish the project to a local web server (e.g. XAMPP, WampServer, or PHP built-in server: php -S localhost:8000).

1. Database CMS Setup (index.php / cmsadmin.php):

• Create a MySQL database (default configured as cmsdemo on localhost with user root and empty password; these can be adjusted in page properties).
• Navigate to cmsadmin.php to set up tables, add demo articles, and test Summernote rich-text editing.

1. Flat-File CMS (editable.php / editableadmin.php):

• Navigate to editableadmin.php, log in with password editor123.
• Update companyAnnouncement or weeklyHighlights and save. The edits write directly to editable.json and reflect on editable.php without database configuration.