EV-soft / Clever-Html-Engine

PHP2HTML - Build dynamic html pages with php functions...

php2html.lib = Clever-Html-Engine

The fast track to build UI components in your web applications.

php2html.lib.php also called "HTML clever engine" consists of a PHP library, with 50+ functions that generate HTML code for standard html elements (INPUT / CHECKBOX / RADIO-GROUP / TABLE), as well as other useful functions. You get a complete system to form the frontend part of your program. Built into the system is the easy use of several open-source modules (icons, advanced tables, HTML editor, jquery), and a complete system for changing user languages.

Standards: (PHP7) PHP8+, HTML5, CSS3, JavaScript.

Source must be in UTF-8, with no tabs, indent: 4 chars

When using PHP2HTML your code will be more compact, and easier to read, and you can have both backend and frontend code in one file.

As an example this height level PHP-code:

PHP8+:
htm_Input(type:'dec2', name:'dec2', valu:$dec2, labl:'@htm_Input(Dec2)',
          hint:'@Demo of htm_Input Field type dec2: number with 2 decimal', algn:'center', unit:'<$ ');

will generate this HTML-code:

<div class="inpField" id="inpBox" style="width: 200px; margin: auto; display: inline-block;">
   <input type= "text"  id="dec2" name="dec2"  value="$ 54 321,00"  class="boxStyle"
          style="text-align: center; font-size: 14px; font-weight: normal; width: 90%; " 
          oninvalid="this.setCustomValidity('Wrong or missing data in htm_Input(Dec2) ! ')" 
          oninput="setCustomValidity('')"  pattern="^\d*\.?((25)|(50)|(5)|(75)|(0)|(00))?$" />
   <abbr class= "hint">
       <label for="dec2" style="font-size: 12px; ">
            <div style="white-space: nowrap; margin-left:   auto;">htm_Input(Dec2)</div>
       </label>
       <data-hint style="top: 45px; left: 2px;">Demo of htm_Input Field type dec2: number with 2 decimal</data-hint>
   </abbr>
</div>

and looks like this:

Integrated benefits of the system:

• Advanced translation system
• Block-oriented provides compact code
• Possibility of Font-awesome Icons anywhere
• Hints/Tooltip for all html elements
• Placeholder/validation for all input elements
• Compact layout with advanced collapsible cards
• Option for user defined system blocks
• Advanced tables based on Mottie Table Sorter system
• TinyMCE integrated HTML-editor library
• Optional use of libraries locally or on the Web (CDN)
• Narrow cards suitable for automatic adaptation
• Easily enter dates with browsers date picker interface

About the powerfull externel libraryes:
jquery                  "jquery"                             Feature-rich JavaScript library
jquery-ui              "jquery-UserInterface"      User interface interactions
tablesorter           "Advanced tables"            Plugin for turning a standard HTML table into a sortable table
font-awesome     "Icons"                              Icon library and toolkit
tinymce                "HTML rich text editor"    Self hosted advanced WYSIWYG HTML editor
dialog-polyfill       "popup dialog"                Dialog element for a popup box

How to start your first project

Save system-files on your web-server in system-folder '{public-URL}/hello'

Create project-folder '/world' and create the file: '{public-URL}/hello/world/first.page.php' with this content:

< ? 
$GLOBALS["ØProgRoot"]= '../';
require_once ('../php2html.lib.php');
htm_Page_0(titl:'DEMO', info:lang('@PHP2HTML: My first page'), imag:'../_accessories/_background.png, attr:');
    htm_Caption(labl:'HELLO WORLD:', hint:'', algn:'center',styl:'color:#550000; font-weight:600; font-size: 18px;');
    htm_nl(2);
    htm_TextDiv(body:'This page is build with PHP2HTML', algn:'center', styl:'box-shadow: 3px 3px 6px 0px #ccc; padding: 5px; border: solid 1px lightgray;', attr:'background-color: white;');
htm_Page_00()
?>

(Correct: '< ?' to '<?' in the first line)

Now you can see the page in your browser at URL: '{public-URL}/hello/world/first.page.php'

Another more in-depth way is to follow the instructions in Quick_Proj/quickstart.page.php

Advanced example - see files in folder: '{public-URL}/hello/Proj.demo/'

More information...

You can see a combined documentation & demo and try the functions here: https://ev-soft.github.io/Clever-Html-Engine/

To learn the system and its possibilities, it is recommended to study the *.page.php files in the folder: Proj.demo

Online-Demo:

Get inspired and test the system.

Go to the full window demo and see advanced example: CustomerOrder

Use the top menu to view documentation and examples.

                  PHP is the language to make server-side backend programming.

        PHP2HTML is your tool/framework to make your client-side frontend programming in PHP.