PHP2HTML - Introduction to the systems most used modules:

Clever html engine

INTRODUCTION Here you can read about the systems most useful modules:

PHP2HTML ? What is Clever html engine ?

Description What is PHP2HTML ?

Examples See and try examples of nearly all modules in the system...

Tiny editor Try the advanced online HTML editor

Advanced example Example of an Accounting program

Danish account plan Example of an account plan

Documentation Documentation of the system

MODULES

Systm modules

htm_Input

htm_Input() used for input and output of values of various variables

htm_Table

Example on module htm_Table()

htm_Card

Example and notes about htm_Card()

Page layout

About making page layout

Navigate

About menues an link buttons

Others

Buttons, Messages and dialog

FILES

Go to files.page.php

File naming

Go to files.page.php

Folders and files

Go to support.page.php

Quickstart

How to start the system

Minimal setup

How to create a mini system

TRANSLATE

Go to translate.page.php

FUNCTIONS

Go to functions.page.php

Overview

Go to functions.page.php

PHP2HTML

Clever html engine

☰PHP2HTML

Clever html engine

Procedural block-structured programming with the PHP2HTML

library gives you easy central maintenance of your UI-code.

The PHP2HTML library are used in PHP applications to produce dynamic HTML/CSS/JS code with advanced features.

Library consists of a collection of functions that produce both standard HTML elements and special usefull variants.

With this library you can program a complete program, both backstage and frontstage, source code in PHP.

From your compact block-structured source code, the generator produces the necessary html code in a >5:1 ratio

In other words, you only have to write code that takes up 20% of the final code...

The PHP2HTML system has built-in integration with several powerful open-source projects, Font-awesome, Tablesorter, Jquery, tinyMCE, which makes it easy to take advantage of these.

Benefits:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

Integrated advantages of the system:
Translation	Advanced translation system for your entire program interface
Icons	Option for font-awesome icons anywhere
User Advice	Tooltip, placeholder and pop-up user tip (hint/title) for all html elements
Context Menu	Popup menu-system activated on mouse Rightclick
Cards	Compact adaptive layout with collapsible cards
Tables	Advanced sortible tables based on Mottie Table Sorter system
HTML editor	TinyMCE integrated library
Library Location	Optional use of libraries locally or on the web (CDN)
Adaptive	Narrow cards suitable for adaptive fit
Date Lookup	Easily enter dates with the browser's date picker interface
Validation	Checks browser input validation
PHP 8.5+	Compatible with latest PHP
Block oriented	Provides compact and clearer code...

PHP is the language for producing server-side backend programming.
With PHP2HTML you can also produce client-side frontend programming in PHP.
Thus, you can now program your entire project in PHP.

Code and Time-saving when you are familiar with the system
Don't reinvent the Wheel, use PHP2HTML…

CODE EXAMPLE:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

Here is an example of how the system generates html code.
This compact height level code:

// php:
htm_Input(labl:'@Amount', icon:'fas fa-euro', vrnt:'dec2',
          hint:'@Demo of htm_Input Field variant dec2: number with 2 decimal',
          name:'dec2', valu:0, wdth:'150px', algn:'center', unit:'<$ ');

will produce css-data and this html code:

// HTML:
<div class="inpField" id="inpBox" style="margin: auto;  width: 150px; display: inline-block;"> 
    <input type= "text"  id="dec2" name="dec2"  value="$ 0,00"  class="boxStyle" 
        style="text-align: center; font-size: 14px; font-weight: 600; " 
        oninvalid="this.setCustomValidity('Wrong or missing data in htm_Input(Dec2) ! ')" 
        oninput="setCustomValidity('')"  
        placeholder="Enter..."  
        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;">
                Amount
            </div>
        </label>
        <data-hint style="top: 45px; left: 2px;">
            Demo of htm_Input Field Variant dec2: number with 2 decimal <br>Unit: <$ 
        </data-hint>
    </abbr>
</div>

And here are the output:

Amount

Demo of htm_Input Field variant dec2: number with 2 decimal
Unit: $

pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />

and it will have all the properties:
placeholder, validation, hint, colors, dimensions and much more...

As you can see, the source code is very compact. Less than 1/5 !

PHP2HTML - Introduction to the systems most useful modules:

PAGE:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

A page is a browser window with html objects.
It is build with two functions: htm_Page_() and htm_Page_end()
Here are the page title, the window background and content align setup.
All the needed preparing (calling libraries) is done here.
Example: htm_Page_(htm_Page_(titl:'', hint:'', info:'', inis:'', algn:'center', imag:'', attr:'', pbrd:true);Parameters) and htm_Page_end()
Mouse-over "Paremeters" shows hint !

CARDS:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

Cards is a container for html-objects.
It is build with two functions: htm_Card_() and htm_Card_end()
It consists of: icon + header - a body with content - and a footer that can be hidden.
The header-caption is automatic translated to the current selected language.
When clicking the caption-text in the header, it will show/hide the body&footer-content.
In the headers right side there are icons to open/close all the cards in the window.
Cards has predefined widths, and its position will swap, if the window-width is to small.
Cards can be used as a "Local Menu" and to keep overview...
Example: htm_Card_(

htm_Card_(capt:'@CARDS:', icon:'fas fa-info', hint:'', form:'', acti:'', clas:'cardW720', wdth:'', styl:'background-color: white;', attr:''

Parameters) and htm_Card_end( htm_Card_end(

labl:'@Save', icon:'', hint:'', name:'', form:'', subm:true, attr:'', akey:'', kind:'save', simu:false)

Parameters)

LAYOUT:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

If you will not let cards fill the window-width, you can use the functions:
htm_RowCol_() / htm_RowCol_next() / htm_RowCol_end() to create a column layout.
Example: htm_RowCol_(htm_RowCol_0 (wdth:240) Parameters) and htm_RowCol_next(htm_RowCol_next(wdth:320)Parameters)
and htm_RowCol_end()

INPUT:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

Input fields is the interface to interact with the users data of varies variants.
It is build with function htm_Input()
It contains a Border, - a Label - and a Data-field
The Label: is a translated caption for the field. When howering a translated hint will be shown.
The Data-field: If NULL data, a translated placeholder is shown.
The Border: can be colored to signale special conditions.
At this time there are 25 htm_Input() variants: 'intg', 'text', 'dec0', 'dec1', 'dec2',
'num0', 'num1', 'num2', 'num3', 'barc', 'mail', 'link', 'sear', 'file', 'imag',
'date', 'time', 'week', 'mont', 'rang', 'butt', 'colr', 'phon', 'pass', 'area'
Example: htm_Input(htm_Input(vrnt:'text', name:'deliphon', valu: arrDeliver[$name], $labl:'@Phone', hint:'@Enter Recipient`s Phone', plho:'@Phone...');Parameters)

TABLE:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

The function htm_Table() is a advanced module to show and input user data.
It has fixed (sticky) column headers, and Scrolling content-window.
Column wise it can: Filter - Sort - Width-Resize
Row wise it can: Create - Change - Delete - Spec. Buttons - set background color
Above and underneth the table, you can use special captions and notes.
Example: htm_Table(htm_Table(capt:[], pref:[], body:[],suff:[], note:'', data:[],filt:true,sort:true,crea:true, modi:true, vhgh:'400px', styl:'', from:__FILE__,list:[],expo:'')Parameters)

SPECIAL:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

In addition to standard html features, there are a number of specialized features:
Examples:
htm_MultistateButt(); - A button with 3 or more states
htm_Dialog(); - A system with messages to the user.
Pmnu_(); / Pmnu_end(); - A context popup menu system.

NAMING rules:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

Rules for naming files:
{file-name}.{content-type}.{file-type}

{file-names}: settings index
{content-types}: .page .inc .lib .min .css .js (the secundary type)
{file-types}: .png .php .htm .txt .json (the primary type)

Example: intropage.css.php

Rules for naming funktions:
Block-start: {name}_
Block-end: {name}_end
{name} could be htm_page / htm_card

NOTES:

TOGGLE-height: Click icon to toggle viewHeight for this card

WIDE: Click to maximize/normalize this card width

COLLAPSE: Click to close all cards;"

EXPAND: Click to open all cards;"

Click on the cards caption to show/hide the content
The '@'-prefix in strings indicates that it is a translatable text.
This introduction is of course developed with the PHP2HTML-system.