File: ./Proj.demo/PHP2HTML-intro.page.php - Ver:1.7.3
Open source - π˜“π˜π˜Šπ˜Œπ˜•π˜šπ˜Œ & 𝘊𝘰𝘱𝘺𝘳π˜ͺ𝘨𝘩𝘡 Β© 2019-2026 EV-soft *** See the file: LICENSE
Skip to the contentGo to the view tools

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 System 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

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.



MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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…

Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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:
Show the codeHide the 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:
Demo of htm_Input Field variant dec2: number with 2 decimal
Unit: $
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 !
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.
PHP2HTML - Introduction to the systems most useful modules:
MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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 !
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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:'', wdth:'', styl:'background-color: white;', attr:'', clas:'cardW720' Parameters) and htm_Card_end( htm_Card_end(labl:'@Save', icon:'', hint:'', kind:'save', name:'', form:'', attr:'', subm:true, akey:'', simu:false) Parameters)
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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()
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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)
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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:'', list:[], data:[], wdth:'98%', vhgh:'400px', styl:'', filt:true, sort:true, crea:true, modi:true, from:__FILE__, expo:'')Parameters)
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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.

Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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

Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width. MOVE: Drag to place this card elsewhere among the cards. Alt + arrow up/down: one place. The order is remembered in this browser.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.
Drag to resize the card (or use the arrow keys). Double-click or Home: original sizeColumn view: the column decides the width of the card - only the height can be dragged (down to less than the content). Turn the column view off to change the width.