PHP Classes

FormE: Build form and manage MySQL table records with XML

Recommend this page to a friend!
     
  Info   Example   Demos   Screenshots   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 79%Total: 241 All time: 8,029 This week: 46Up
Version License PHP version Categories
forme 1.0.0MIT/X Consortium ...7HTML, PHP 5, Databases
Description 

Author

Fabio Pintore

This package can build form and manage MySQL table records with XML.

It takes a definition of a form layout and field types in a XML format and generates HTML for a form presented with Bootstrap with support for many types of inputs besides those supported by HTML.

The generated forms can be used to manipulate table records stored in a MySQL database.

Innovation Award
PHP Programming Innovation award nominee
October 2017
Number 5		 This package can build form and manage MySQL table records with XML.

It takes a definition of a form layout and field types in a XML format and generates HTML for a form presented with Bootstrap with support for many types of inputs besides those supported by HTML.

The generated forms can be used to manipulate table records stored in a MySQL database.

Manuel Lemos
Picture of Fabio Pintore
  Performance   Level  

Level 1 Star

 Innovation award
Innovation award
Nominee: 1x

 

Recommendations

HTML forms from XML document with PHP
I need to parse XML document using PHP parse functions

I need to pick a date and return it to a form
I require the date to return in MySQL/Oracle format

Example

<?php
    
    include ("lib/FormE.class.php");
    include ("lib/FormE.func.php");
   
    // User PHP Function
    function AnagModForm($dataTable){
       
        @list($ipStart, $ipEnd) = explode ( "-", $dataTable["ANAIp"]);
       
        $dataTable["IPStart"] = $ipStart;
        $dataTable["IPEnd"] = $ipEnd;
       
        unset($dataTable["ANAIp"]);

       
        return ($dataTable);
    }

?>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap3.min.css" rel="stylesheet">
   
    <!-- Datepicker CSS (remove if don't use DBDateXX) -->
    <link href="css/datepicker3.css" rel="stylesheet">

    <!-- File CSS (remove if don't use DBInputFile) -->
    <link href="css/fileinput.css" rel="stylesheet">
    <!-- <link href="css/jasny-bootstrap.min.css" rel="stylesheet"> -->

    <!-- Font CSS x Bootstrap -->
    <link href="css/font-awesome.css" rel="stylesheet">
   
    <!-- JQuery UI CSS -->
    <link href="css/jquery-ui.min.css" rel="stylesheet">
   
    <style>
        .errorInput{color:#ffffff; background-color:#ff0000;}
    </style>
   
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- <script src="js/jquery-3.2.1.min.js"></script> -->
    <script src="js/jquery-ui.min.js"></script>
   
    <!-- Reference to the Bing Maps SDK (remove if dont'use DBMapBing)-->
    <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental' async defer></script>

    <!-- Main Script (Don't Remove !!)-->
    <script src="js/FormE.js"></script>

  </head>
  <body>
    <h1>Main Form - Test (with BootStrap v3)</h1>
    
    
    
    <?php
        //$myForm = new Forms("testLevel.xml");
       
        // $myForm = new Forms("frmAnag5_horizontal.xml", "ANAId=1");
        $seek = !isset($_GET["ANAID"]) ? "false" : "ANAId=".$_GET["ANAID"];
        $myForm = new Forms($_GET["xml"], $seek );
       
        // $myForm = new Forms("frmAnag5_block.xml", "ANAId=1"); // update records with ANAID=1
        // $myForm = new Forms("frmAnag5_block.xml"); // Insert NEW Record
        $myForm->registerCallbackFuncForm("AnagModForm",""); // callableFunction, optionalParameters -> at composite of form
        $myForm->registerCallbackFuncPost("AnagModPost"); // callableFunction -> at post fase . include the function in formPost.php
       
        $cHTML = $myForm->Start();
       
        echo $cHTML;
    ?>

   
    <script>
   
    // Remove this code block if Don't use DBInputFile
    $(function() {
        // We can attach the `fileselect` event to all file inputs on the page
        $(document).on('change', ':file', function() {
            var input = $(this),
                numFiles = input.get(0).files ? input.get(0).files.length : 1,
                label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });
       
        // We can watch for our custom `fileselect` event like this
        $(document).ready( function() {
                $(':file').on('fileselect', function(event, numFiles, label) {
       
                    var input = $(this).parents('.input-group').find(':text'),
                        log = numFiles > 1 ? numFiles + ' files selected' : label;
       
                    if( input.length ) {
                        input.val(log);
                    } else {
                        if( log ) alert(log);
                    }
       
                });
        });
    });
   
   
    $( window ).on( "load", function() {
 
        // Include this row if you use DBMapBing
        $('div[onload]').trigger('onload');

        // Remove this code block if Don't use DBSearch
        $( "._autocomplete_" ).each(function(){
            var compose = $(this).attr("compose");
           
            $(this).autocomplete({
                source: "_feAutoComplete.php?compose="+compose // name of controller followed by function
            }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append(item.label)
                    .appendTo( ul );
            };
        });
    });
    
   
    
    //
    // USER Javascript Function
    //

    function showSearch(t) { alert ( "you have select: "+$("#_id_srch_frmAnagrafica_ANASearch").val() ); }

    function showMap(t){
        var q="";
        switch(t.id) {
       
            case "_id_cbox_frmAnagrafica_COId":
                q += $("#_id_cbox_frmAnagrafica_COId option:selected").text();
                break;
               
            case "_id_cbox_frmAnagrafica_STId":
                q += $("#_id_cbox_frmAnagrafica_STId option:selected").text();
                q += ", "+$("#_id_cbox_frmAnagrafica_COId option:selected").text();
                break;
               
            case "_id_cbox_frmAnagrafica_CTId":
           
                q += $("#_id_cbox_frmAnagrafica_CTId option:selected").text();
                q += ", "+$("#_id_cbox_frmAnagrafica_STId option:selected").text();
                // q += ","+$("#_id_cbox_frmMappa_COId option:selected").text();
                break;
               
            case "_id_inp1_frmAnagrafica_ANAVia":
           
                q += $("#_id_cbox_frmAnagrafica_DUGId option:selected").text();
                q += " "+$("#_id_inp1_frmAnagrafica_ANAVia").val();
                q += ", "+$("#_id_cbox_frmAnagrafica_CTId option:selected").text();
                // q += ","+$("#_id_cbox_frmMappa_STId option:selected").text();
                // q += ","+$("#_id_cbox_frmMappa_COId option:selected").text();
                break;
               
            case "_id_inp1_frmAnagrafica_ANACoordText":
                q = $("#_id_inp1_frmAnagrafica_ANACoordText").val();
                break;
               
            default:
                break;
        }
       
        FPMap.Search(q, "_id_mapb_frmAnagrafica_ANAMap" );
       
    }
       
       
    function checkEmail(t) {

        // var email = document.getElementById('txtEmail');
        var email = t;
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
   
        if (!filter.test(email.value)) {
           
            email.focus;
            _setErrorInput(t, "on");
           
            return false;
           
        }else{
            _setErrorInput(t, "off");
        }
       
    }
   
    function validCitta(t){
        $("#_id_frmAnagrafica_DUGId").val("");
       
        $( t ).offsetParent().addClass("has-warning"); // boxInput
        $( t ).addClass("form-control-warning"); // input field
    }
   
    function myFuncExit(objJson){
        alert ("FOR TEST ONLY !! MyFunct error :"+objJson.Err.Status+" - ID : "+objJson.ID.Value);
        return false;
    }
   
    </script>
    <!-- Includere per Mappe BING (spostato sopra) -->
    <!-- <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=loadMapScenario' async defer></script> -->

    <!-- https://bootstrap-datepicker.readthedocs.io/en/latest/ -->
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/locales/bootstrap-datepicker.it.js" charset="UTF-8"></script>
    <script src="js/locales/bootstrap-datepicker.en-GB.js" charset="UTF-8"></script>
 
    <!-- http://igorescobar.github.io/jQuery-Mask-Plugin/ -->
    <!-- <script src="js/jquery.mask.min.js"></script> -->
    <script src="js/jquery.mask.js"></script> <!-- Modified version by FP -->
   
    <!-- http://jasny.github.io/bootstrap/ -->
    <script src="js/jasny-bootstrap.min.js"></script>
   
    <!-- Include all compiled plugins (below), or include individual files as needed for bootstrap v3 (respect the order) -->
   <script src="js/bootstrap3.min.js"></script>
 
  </body>
</html>



Details

FormEasy (Build your Form in easy way with XML)

FormE is a php class for manage tables in MySql Databases. Create your own form only manipulating xml files. Lot of component, help you to write your form.

Input, password, date, checkbox, radio, Bing map, linked combobox and so on in Bootstrap framework, use template for personalize input.

You can see examples here.

Usage

First of all:

  • Look at main_v3.php or main_v4.php for .CSS, .JS, linked file and .PHP to include in your main page (v3 and v4 referres to Bootstrap 3 and Bootstrap 4[alpha] frameworks). 
  • Create an instance of a class:

Then create your xml (myXML.xml) file:



### Add "form" Tag :
  • name = name of form
  • class = form-horizontal or none
  • x-table = table of mysql database
  • x-layout = phones (col-xs-), tablets (col-sm-), desktops (col-md-), larger (col-lg-)

Draw your grid :

form type "block"

<row x-col="10" style="..." class="..." >
   <boxInput x-col="2" style="..." class="...">
   </boxInput>
   <boxInput x-col="3">
   </boxInput>
   <boxInput x-col="5">
   </boxInput>
</row>	

<row x-col="10" style="...">
   <boxInput x-col="2">
   </boxInput>
   <boxInput x-col="2" style="..." class="...">
   </boxInput>
   <boxInput x-col="2">
   </boxInput>
   <boxInput x-col="2" class="...">
   </boxInput>
   <boxInput x-col="2">
   </boxInput>
</row>

form type "horizontal" is quite different 

<boxInput x-col="9">
	<label x-col="2">Avatar</label>
	<DBIcon x-col="3" style="width:150px; height:150px">ANAAvatar2</DBIcon>
</boxInput>

<boxInput x-col="9">
	<label x-col="2">ID</label>
	<DBInput x-col="1">ANAId</DBInput> 
</boxInput>

optionally use "style" and/or "class" for personalize yours tags

Insert your Input Type in boxInput, examples:

  <label>Name</label>
  <DBInput placeholder="Name" required="required">ANAName
	<help x-title="Name">Insert the Name...</help>
  </DBInput>

OR

  <label>Name</label> 
  <DBInput2 placeholder="Name" x-image="user">ANAName</DBInput2>

OR

  <label>Birthday</label>
  <DBDateIT>ANADtNasc</DBDateIT>

... FINALLY insert DBApply tag for send data in MySql Database 

  <DBApply>Salva</DBApply>

Input Type

General information

  • in input tag, the "name" and "id", is assigned automatically by system. Is not possible assign your own.
  • attribute "x-" are particulary of the system, and add information at the corresponding HTML tag
  • you can use style, class, and attribute in according with corresponding html tag like: width, height, size, multiple, checked, disabled, readonly, etc....

Label:

   <label>Name</label>

label of Input

DBInput

   <DBInput placeholder="Name" required="required" >ANAName
     <help x-title="Name title">Insert Name ...</help>
   </DBInput> 
				
   <DBInput size="20" data-mask='099.099.099.099' placeholder="To IP">IPEnd
     <help x-title="IP">Insert IP in range of 192.168.0.1-192.168.0.254 !!!</help>
   </DBInput>
  • placeholder : placeholder of input (optional)
  • required : "required", if specified and not present in form, display the text in "help" tag (optional)
  • x-valid : x-valid="test" a callable javascript function "test(this)" when change the value of tag. (optional)
  • data-mask : refer to igorescobar - plugin (optional)
  • ANAName/IPEnd: Corresponding column in MySql Table specified in form->x-table

DBInput2

   <DBInput2 placeholder="Nome" x-image="user">ANANome</DBInput2>

like input with image - x-image = specify the icon at the left of input fontawesome

DBDateIT / DBDateEN

   <DBDateEN data-defaultViewDate="today">ANADtIscr</DBDateEN>

Input date with notation dd-mm-yyyy (IT) or mm/dd/yyyy (EN). It is possible specify many other parameters according with bootstrap-datepicker

DBCheck

   <DBCheck x-descr="Rock"    x-states="Rock|norock">ANAmuRock</DBCheck>
   <DBCheck x-descr="Disco"   x-states="Yes|No">ANAmuDisco</DBCheck>
   <DBCheck x-descr="Lyrics"  x-states="1|0">ANAmuClas</DBCheck>
  • x-descr = Description of checkbox
  • x-states = Value True and False to write in Database (syntax:True|False)

DBRadio

   <DBRadio>ANATipo
     <option value="CA">Caucasico</option>
     <option value="AS">Asiatico</option>
     <option value="AF">Africano</option>
     <option value="MO">Mongolico</option>
     <option value="AM">Americano</option>
</DBRadio>

DBComboBox

   <DBComboBox size="1" placeholder="Dug">ANAGR_DUGId
     <DBOption x-tbRef="Dug" x-tbKey="DUGId" x-tbDescr="DUGDescr" x-tbOrder="DUGDescr"></DBOption>
   </DBComboBox>

DBOption parameters - x-tbRef = Linked table in MySql Database - x-tbKey = Key of linked table that match with value of tag DBComboBox - x-tbDescr = Value of field (of linked Table) to show in combobox - x-tbOrder = Order to linked table

(select * from Dug where Dug.DUGId=ANAGR.ANAGR_DUGId order by Dug.DUGDescr)

DBComboBoxCascade

   <boxInput x-col="2">
     <label>Continente</label>
     <DBComboBoxCascade size="1" placeholder="Continenti" x-cbCascade="grpAA" x-valid="showMap">ANAG_COId
        <DBOption x-tbRef="Continenti" x-tbKey="COId" x-tbDescr="CODescr" x-tbOrder="CODescr"></DBOption>
     </DBComboBoxCascade>	
   </boxInput>
	
   <boxInput x-col="2">
     <label>Stato</label>
     <DBComboBoxCascade size="1" placeholder="Stato" x-cbCascade="grpAA" required="required" x-valid="showMap">ANAG_STId  
        <DBOption x-tbRef="Stato" x-tbKey="STId" x-tbDescr="STDescr" x-tbOrder="STDescr" x-tbParentKey="COId"></DBOption>
     </DBComboBoxCascade>	
   </boxInput>
			
   <boxInput x-col="3">
     <label>Citta</label>
     <DBComboBoxCascade size="1" placeholder="Citta" x-cbCascade="grpAA" x-valid="showMap">ANAG_CTId
        <DBOption x-tbRef="Citta" x-tbKey="CTId" x-tbDescr="CTDescr" x-tbOrder="CTDescr" x-tbParentKey="STId"></DBOption>
     </DBComboBoxCascade>	
   </boxInput>

DbComboBoxCascade is an extension of DbComboBox and use for linked combobox - x-cbCascade = Identifier of linked group of combobox (obbligatory), the order in xml file is important ! DBOption - x-tbRef/x-tbKey/x-tbDescr/x-tbOrder = like in DBOption of DBComboBox - x-tbParentKey = Key of linked table to parent Table

example Stato: (select * from Stato where Stato.STId=ANAGR.ANAG_STId and Stato.COId=ANAGR.ANAG_COId order by Stato.STDescr)

DBSearch

   <DBSearch placeholder="Search..." x-valid="showSearch" x-SearchTable='Stato' x-SearchField='STDescr' x-SearchReturn='STDescr'>ANASearch
     <DBSearchReturn>
	<span>
	  <img src="img/@STFlag@"/>  @STDescr@
	</span>
     </DBSearchReturn>  
   </DBSearch>

DBSearch is a text control that auto-populate in according with text entered

  • x-SearchTable = MySql table
  • x-SearchField = Fields of MySql table with a values of search
  • x-SearchReturn = Return value in field text
  • x-valid = user javascript function

DBSearchReturn: contain a block of data for populate the window that appear in bottom at text control, it is crypted with a key that you have specified in FormE.ini.php

DBInputFile

   <DBInputFile placeholder="File" x-upload="upload2">ANAlinkFile1</DBInputFile>

Upload a File - x-upload = Directory where the file are uploaded, if not specified the default value is stored in FormE.ini.php

DBMapBing

   <DBMapBing style="width:400px; height:400px">ANAMap</DBMapBing>

Show a map in your page. Look the examples for a simple use of that control.

DBIcon

   <DBIcon style="width:150px; height:150px" x-descr="[drag here !!]">ANAAvatar2</DBIcon>

Small images in MySql table, use LONGTEXT. Drag and Drop into this control

DBTextArea

   <DBTextArea rows="8" cols="200">ANANote</DBTextArea>

:+1:


  FormEExternal page  
Screenshots (2)  
  • v3_block.png
  • v3_horiz.png
  Files folder image Files (365)  
File Role Description
Files folder imagecss (8 files)
Files folder imagefonts (1 file)
Files folder imageimg (250 files)
Files folder imagejs (13 files, 1 directory)
Files folder imagelib (4 files)
Accessible without login Plain text file FormE.ini.php Aux. Auxiliary script
Accessible without login Plain text file FormE.sql Data Auxiliary data
Accessible without login Plain text file frmAnag5_block.xml Data Auxiliary data
Accessible without login Plain text file frmAnag5_horizontal.xml Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file main_v3.php Example Example script
Accessible without login Plain text file main_v4.php Example Example script
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file _feAutoComplete.php Example Example script
Accessible without login Plain text file _feCascade.php Example Example script
Plain text file _fePost.php Class Class source

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
Downloadforme-2017-10-04.zip 996KB
Downloadforme-2017-10-04.tar.gz 920KB
Install with ComposerInstall with Composer
 Version Control Unique User Downloads Download Rankings  
 99%
Total:241
This week:0
All time:8,029
This week:46Up
 User Ratings  
 
 All time
Utility:100%StarStarStarStarStarStar
Consistency:100%StarStarStarStarStarStar
Documentation:100%StarStarStarStarStarStar
Examples:91%StarStarStarStarStar
Tests:-
Videos:-
Overall:79%StarStarStarStar
Rank:31
  

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.