File: ../Proj.demo/Demo.page.php - ver:1.4.1
Open source - 𝘓𝘐𝘊𝘌𝘕𝘚𝘌 & 𝘊𝘰𝘱𝘺𝘳𝘪𝘨𝘩𝘵 © 2019-2026 EV-soft *** See the file: LICENSE

Clever-Html-Engine / php2html-Demo:

Clever html engine
PHP2HTML


Test site and documentation for Clever html engine • Errors may occur and future news may be shown • ver.1.4.1: 60+ core functions.

Be inspired - Here you can see examples of almost all htm_ system functions...

The variants of Input / Output: 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm

TEXT variants
Demo of htm_Input Field type single-line text
Demo of htm_Input Field type barc: shown with font barcode
Demo of htm_Input Field type html: Multi-line formatted html-text

Demo of htm_Input Field type area: Multi-line text
You can put anything html-code in htm_Inbox().
Here it is a QR-code.
You can put anything in htm_Inbox().
Here it is a Code128 barcode.


Demo of htm_Input Field type mail with syntax control
pattern="^[a-zA-Z0-9.!#$%&]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" />
Demo of htm_Input Field type url with syntax control
https?:/.+ />
Show/Hide password
Demo of htm_Input Field type pass with "hidden" output


NUMBER variants
Demo of htm_Input Field type intg: centered integer
Demo of htm_Input Field type dec0: centered number with 0 decimals
Unit: %
pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />
Demo of htm_Input Field type dec1: number with 1 decimal
Unit: Unit prefix
pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />
Demo of htm_Input Field type dec2: number with 2 decimal
Unit: Unit suffix
pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />


Demo of htm_Input Field type dec0: left aligned number with %-suffix
Unit: %
pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />
Demo of htm_Input Field type dec1: centered number with %-suffix
Unit: %
pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />
Demo of htm_Input Field type dec2: right aligned number with %-suffix
Unit: %
pattern="^[$\-\s]*[\d,]*?([.]\d{0,2})?\s$" />


Demo of htm_Input Field type numb: number with 1 decimal
pattern="(\d{3})([\.])(\d{2})" />
Demo of htm_Input Field type numb: left-justified number
pattern="(\d{3})([\.])(\d{2})" />
Demo of htm_Input Field type date with browser popup selector


SELECT variants
Demo of htm_Input Field type opti: left aligned number with %-unit
Unit: %
Demo of htm_Input Field type chck: Multi-line formatted chck-text
Demo of htm_Input Field type chck: Multi-line formatted chck-text, vertical layout





Demo of htm_Input Field type radio, vertical layout


30
min=0 max=50
Demo of htm_Input Field type range: 0..50
Demo of htm_Input Field type checkbox in a row, horisontal layout
   Demo of htm_Input Field type radio in a row, horisontal layout


OTHER variants
Demo of htm_Input Field type search
Demo of htm_Input Field type time
NOT supported by all browsers
Demo of htm_Input Field type week
NOT supported by all browsers
Demo of htm_Input Field type month
NOT supported by all browsers


Demo of htm_Input Field type file
Demo of htm_Input Field type image
Demo of htm_Input Field type color
Demo of htm_Input Field type button
Example of htm_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;" HELP:Click icon to goto custom help for this card: CustHelp.htm

Inland VAT (incoming):
No. Position number in the group
{Editable}
Description Item Description. A descriptive text of your choice
{Editable}
Account The number in the statement of account to which the sales tax must be posted.
{Editable}
%-rate VAT % rate
{Editable}
Note Note about the record
{Editable}
Delete Click the red cross to delete a entry


Notes about htm_Table():
Records can be sorted, filtered, created, modifyed and more...
The visibly rows can be scrolled in a window below the fixed header.
PHP Source-code: htm_Table();View part of the demo source-code. ! 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm

function htm_Table(# capt:[], pref:[], body:[]',suff:[], note:'', data:[], filt:true, sort:true, crea:true, modi:true, vhgh:'400px', styl:'', from:__FILE__,list:[],expo:'');
    $capt= [ # ['0:Label',   '1:Width',    '2:Type',     '3:OutFormat', '4:horJust',       '5:Tip',    '6:placeholder', '7:Content';], ...
           ],
    $pref= [ # ['0:ColLabl', '1:ColWidth', '2:ContType', '3:OutFormat', '4:[horJust_etc]', '5:ColTip', '6:Html'], ...
           ],           // if (($ModifyRec) or ($RowBody[0][2]!='indx')) is 2% ColWidth can be used to => row-select-button
    $body= [ # ['0:ColLabl', '1:ColWidth', '2:ContType', '3:OutFormat', '4:[horJust_etc]', '5:fldKey', '6:ColTip','7:placeholder','8:default','9:[selectList]'], ...
           ],           # Field 4: $FieldProporties - is composed of: [horJust, FieldBgColor, FieldStyle, TdColor, SorterON, FilterON, SelectON,
    $suff= [ # ['0:ColLabl', '1:ColWidth', '2:ContType', '3:OutFormat', '4:[horJust_etc]', '5:ColTip', '6:value! '], ...
           ],
    $note= '',         # string: HTML-string - note to be shown below the table
   &$data,             # array:  [{"name_0":value_0, "name_1":value_1, "name_2":value_2, "name_3":value_3, "name_4":value_4, "name_5":value_5, "name_6":value_6, "name_7":value_7, "name_8":value_8, "name_9":value_9},{...},{...}]
    $filt= true,       # bool:   Ability to hide records that do not match filter // Does not work with hidd fields!
    $sort= true,       # bool:   Ability to sort records by column content
    $crea= true,       # bool:   Ability to create a records - string: Labeltext on createButton
    $modi= true,       # bool:   Ability to select and change data in a row
    $vhgh= '400px',    # string: The height of the visible part of the table's data
    $styl= '',         # string: Style for the span that holds the table;
    $from= __FILE__,   # string: = __FILE__ / __FUNCTION__ (debugging: locate error)
    $list= ['',''],    # array:  LookupLists for options // Test [DataKolonneNr, > grænseværdi] Undlad spec. FieldColor
    $expo= ''          # string: Export values in table data fields to CSV-file
)


Containers 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
The system includes the following functions of container-type:.
htm_Page_()
htm_Card_()
htm_Fieldset()
htm_wrapp_()

An example of htm_Page_() is this actual page.
On this page you also see examples on multiple cards
Tables... (also a container-type)

Caption: You can use hints You place your html-objects here inside fieldset-frames...
Caption: You can use hints You place your html-objects here inside fieldset-frames...
PHP Source-code: htm_Field_0_(); 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
// PHP7-syntax: (Fixed order)
htm_Fieldset($capt='@Caption: ',
             $hint='@You can use hints',$icon='',
             $wdth='180px',$marg='',
             $attr='background-color:MintCream',
             $rtrn=false); 

// PHP8-syntax: (Named, free order, can be omitted)
htm_Fieldset(capt:'@Caption: ',
             hint:'@You can use hints',
             wdth:'180px',
             attr:'background-color:MintCream'),
             rtrn:false); 

// htm_Fieldset() must be followed by the html-content and htm_Fieldset_end() !
    
htm_Fieldset_end(rtrn:false);
echo 'You place your html-objects here inside fieldset-frames...';


HTML-Content
in container htm_Field()
---
Tip for htm_Field()
htm_Field($labl='Label with hint',$hint='HINT for htm_Field()',$icon='',$name='fld',$html='HTML-Content
in container htm_Field()
---',$width='',$margin='',$ftop='',$attr='',$rtrn=false);
PHP Source-code: htm_Field(); 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
// PHP8-syntax:
htm_Field(labl:'Label with hint',
          hint:'Tip for htm_Field()',
          icon:'',name:'fld',
          html:'HTML-Content <br>in container htm_Field() <br>---',
          wdth:'',
          marg:'',ftop:'',attr:'',
          rtrn:false);
               
You place your html-objects here inside Wrapper-window...

A Wrapper-window is a window with a fixed height
in with you can scroll the content
if it owerflow the window-height


PHP Source-code: htm_wrapp_(); 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
// PHP7-syntax:
htm_wrapp_($ViewHeight='60px'); // htm_wrapp_() must be followed by htm_wrapp_end() !
    echo 'You place your html-objects here inside Wrapper-window...<br><br>
          A Wrapper-window is a window with a fixed height<br>
          in with you can scroll the content<br>
          if it owerflow the window-heigh';
          
htm_wrapp_end();
    




Examples of foldable card-system:

Htm_Card_(W= 560px) (click to close/open) 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
Cards are used to display a collection of html-objects.
They are defined i 14 widths from 160px to 1200px and width 100%.
The height adapts to the content.

The card content can be displayed/hidden by clicking card-header text.
In the header you see som icons which can controle
actual or all cards dimensions.


Signup: 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 name of the accounting for wich you have access
Type your email as your accont
pattern="^[a-zA-Z0-9.!#$%&]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" />
Show/Hide password
Type your password for your account
Click to request a new password


   Remember me

Confirm you are not a robot
Are you human? Grab and slide to right to change state


Orange frames: required field !

Login with the given data


Contact info: 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
Demo of htm_Input Field type area: Multi-line text
Demo of htm_Input Field type mail
pattern="^[a-zA-Z0-9.!#$%&]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" />
Demo of htm_Input Field type chck

Demo of htm_Input Field type date with browser popup selector
Demo of htm_Input Field type date with browser popup selector

Save data in this card




User rights:In this card, you see a DEMO of the Multi-state button 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
Users
Name: Title:Chart of AccountsAccount settingsJournal Entry Financial AccountingFinancial reportsDebtor ordersDebtor accountsDebtor reportsCreditor ordersCreditor accountsCreditor reportsItem stockProduct receptionProduct receptionProduction ordersProgram settingData backupSecurity
admAdministrator

bokBookkeeper

audAuditor

 
Create New User
Rights:

Password: Repeat:
 
 Meaning:

: No access

: Read only

: Full access

: Undefined
CLICK symbol to change 
Create new user

This is an example of using the multi-state button.

Save data in this card
Popup menues:Examples of context popup menues 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;" HELP:Click icon to goto custom help for this card: CustHelp.htm
You can build popup-menues with the PHP2HTML-system.
Both left-click and context right-click triggered.

Here you can test it:
Try clicking me
to test popup-menues
Try right-clicking me
to test context-menu


Switch buttons: (Under development) 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 to toggle setting
Switch accepting Here you can toggle setting
Toggleable Tabs:How to use Toggleable Tabs 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 you see the htm_Tabs_() - Toggleable tabs system:
 
FOOTER for Toggleable Tabs
Containers:The fieldset container 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;"
This is af fieldSet container
Tabels, Cards, Tabs and Fieldsets is areas that contains other elements.
Navigate functions:Various buttons to link to project pages 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;"
To navigate in your project, you can use the Menu_Topdropdown() shown on top of all demo pages.
You can also use various buttons for that...
About function parameters:PHP rules for reference to functions parameters 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 new way to give parameters to functions in PHP 8+ is:
Named arguments
  --> Specify only required parameters, skipping optional ones. (free order!)   --> Arguments are order-independent and self-documented.

That means a simpler way to call functions.

Example PHP 7: (fixed order!)
htm_Input($labl='@htm_Input(Dec2)', $plho='', $hint='@Demo of htm_Input Field type dec2: number with 2 decimal', ,
$type='dec2', $name='dec2', $valu=$dec2, $wdth='', $algn='center', $unit='<$ ');


Example PHP 8: (free order!)
htm_Input(labl:'@htm_Input(Dec2)', type:'dec2',name:'dec2',valu:$dec2,unit:'<$ ',hint:'@Demo of htm_Input Field type dec2: number with 2 decimal');


Be aware of PHP 7.4 is a supported version until 2023/24 !
Use PHP 8 syntax...
Demo of most recent functions (2024):System functions developed in 2024 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 logo

@Missing image !
EV-soft
Here you see mine Github-logo
Demo for htm_Figure()

Details

Summery first
This is the first details...
These are summaries with collapsible details
Summery second
This is the second details...
Collapsible details

Demo of htm_Details()
Also new in 2024 is htm_GoTopButt()
You see it on this page button to the right.
Demo of htm_List_() li list type
Marker: upper-roman
  • htm_List_(li):
  • Description1
  • Description2
  • Description3
  • Demo of htm_List_() ul unordered type
      htm_List_(ul):
        Description1
        Description2
        Description3
    Demo of htm_List_() ol ordered type
    Marker: square
      htm_List_(ol):
    1. Description1
    2. Description2
    3. Description3
    Demo of htm_List_() dl destriptive type
    htm_List_(dl):
    Label1
    Description1
    Label2
    Description2
    Label3
    Description3






    Program name


    The htm_Card() can also be used as a program window,
    with icon-links for menu and settings to the right.



    The htm_DataGroup() function
    Caption
    Hint for this datagroup
    Header
    Label1:Data1
    Label2:Data2
    Label3:Data3
    Label4:Data4
    Footer


    Use datalist to pick a value from list



    PDF-viewer: imapsync_2020_gulliver_fdln.pdf 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;"



    Under development
    Simple table: Just a demo 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;"
    Name.
    {Editable}
    Age
    {Editable}
    Email
    {Editable}
    Create an empty row, so you can fill in data in the yellow fields !

    Table-Filtering/Searching: Hold mouse over the colored row below the column headers.