How to Setup Complex Forms in PHP in a Simple Way - Complex PHP Form Design and Generator package blog

Recommend this page to a friend!
  All package blogs All package blogs   Complex PHP Form Design and Generator Complex PHP Form Design and Generator   Blog Complex PHP Form Design and Generator package blog   RSS 1.0 feed RSS 2.0 feed   Blog How to Setup Complex ...  
  Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  

Author:

Updated on: 2021-05-27

Posted on: 2021-05-27

Package: Complex PHP Form Design and Generator

Creating forms can be a complex task when forms have many fields. However, if you can load the definitions of the fields from an external configuration file, you can simplify your code by separating the configuration from the processing logic, so each of those parts is defined in different files.

Read this article to learn how the Complex PHP Form Design and Generator package can help you to simplify the development of pages that display and process forms.

The package provides functions with behavior that is configurable in the external configuration file. This article explains options for changing the language and country-specific aspects. It also provides details on how to configure how the package finds all the resources and values used to determine the appearance.




In this article you can learn about:

How to Find Examples of Usage of this Package

How to Set the Location of the Necessary JavaScript Files

How to Translate the Texts Used Internally by the Package

  • Form messages.
  • Text of all default buttons (Save, Cancel, ...).
  • Week day and month names for the date picker.
  • Tooltips of the internal used images.

How to Change Images Needed for General Purposes

How to Adjust Locale Dependent Values of Date, Time and Numeric Input Fields

  • Date.
  • Time.
  • Integer, Floating-point and Currency.

How to Adjust the Settings for the Color Picker

  • Appearance.
  • Colors that can be selected from a palette.

How to Adjust the Settings for CKEditor HTML Editor

How to Adjust the Settings for the RichFilemanager

How to Download the Complex PHP Form Design and Generator or Install It with PHP Composer


How to Find Examples of Usage of this Package

See the example configuration files FormGenerator.json in the examples directory and in the examples/MSO-Theme directory.

Best practice will be to use one of this example files and adapt it to your own requirements.

All values are case sensitive.

How to Set the Location of the Necessary Javascript Files

Some Javascript files are needed by the HTML code generated by this package to make the forms work properly. You can find all necessary files in the directory script.

In the PHP script for your form you only have to include the FormGenerator.js file in the header section:

<head>
    ...
    <script type="text/javascript" 
src
="YOUR PATH TO THE SCRIPT FILES/FormGenerator.js">
</
script> </head>

All JavaScript files MUST be located in the same directory and will be automatically loaded when they are needed.

This JavaScript path value must also be specified in the configuration, so that the additionally required scripts can be loaded.

   JavaScript
        Path : path (YOUR PATH TO THE SCRIPT FILES), NO default value

The path must be specified either:

  • by the relative to the location of the PHP file containing the form definition
  • by the absolute from the server document root (recommended)
  • as complete URL
dtsel.jsDate- and time picker.
dtsel-LICENSElicense field for the date- and time picker.
FormCKEdit.jsscript to create an embedded WYSIWIG editor control.
FormDataValidator.jsForm validation (date, time, float, integer).
FormGenerator.jsSome general Form Functionality and loading of all other JS-Files.
FormPicker.jsScript to auto-create the pickers.
jscolor.jsthe color picker.
jscolor.min.jsminimized version of the color picker.
RichFmConnector.jsConnector to use the RichFilemanger.

How to Translate the Texts Used Internally by the Package

The default language is English. You can define the text strings used by the package in configuration files.

Message that is displayed to the user, if any validation of the form failed:

    FormDataValidation:
        errorMsg     :  string, NO default value

There is no default text for this value!

Default Buttons

The Buttontext for all standard buttons inside a ButtonBox can be changed in this section.

    ButtonBox:
        ButtonText:
            OK       :  string, default "OK"
OPEN : string, default "Open" SAVE : string, default "Save" YES : string, default "Yes" NO : string, default "No" CANCEL : string, default "Cancel" CLOSE : string, default "Close" DISCARD : string, default "Discard" APPLY : string, default "Apply" RESET : string, default "Reset" RETRY : string, default "Retry" IGNORE : string, default "Ignore" BACK : string, default "Back"

Text for the Date and Time Picker

To give the users the posibility to select date and/or time values in a picker, the package has a modified version of the datetime selector from the dtsel package included. Modifications on the original source were made only to make the date picker adaptable to the current locale language.

The names can be localized in the DTSel section:

    DTSel:
        direction       : "TOP" or "BOTTOM", default value "TOP"
        months          : array of 12 strings, 
                          default 
["January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December"], monthsShort : array of 12 strings, default
["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], weekdays : array of 7 strings (week starts with Sunday!), default
["Sunday", "Monday", "Tuesday", "Wednesday",
"Thursday", "Friday", "Saturday"], weekdaysShort : array of 7 strings (week starts with Sunday!), default
["So", "Mo", "Tu", "We", "Th", "Fr", "Sa"], timeDescr : array of 3 strings
(short for 'Hour:', 'Minute', 'Second'), default
["HH:", "MM:", "SS:"]

The appearance of the pickers can be changed by editing the FormGenerator.css stylesheet file.

How to Change Images Needed for General Purposes

Some graphics are defined for various common standard purposes, which can be changed in this section and labeled in a language-specific manner.

Defined standard images:

DeleteImage that can be used for deletion of the content of a read only input field or to reset any other content or setting.
SearchDefault image used for input field with select button specified.
BrowseDefault image used for input field connected to file browser.
DatePickerImage showing that the field has a date picker.
TimePickerImage showing that the field has a time picker.
InsertDTUImage showing the 'insert Date, Time and User' - functionality.

    Images:
        Path           : path (YOUR PATH TO THE IMAGE FILES), 
NO
default value StdImages: Delete: Image : filename, default "delete.png" Text : string, default "Delete content" Search: Image : filename, default "search.png", Text : string, default "Select" Browse: Image : filename, default "browse.png", Text : string, default "Browse on server" DatePicker: Image : filename, default "datepicker.png", Text : string, default "Select date" TimePicker: Image : filename, default "timepicker.png", Text : string, default "Select time" InsertDTU: Image : filename, default "insert_dtu.png", Text : string,
default "insert current date, time and user"

If no path is specified, the images are loaded from the directory StdImages in the source folder of the package (.../SKien/Formgenerator). If a path is specified, it must be relative to the script that contains the form definition or absolute from the document root.

The text is used as label for the images.

How to Adjust Locale Dependent Values of Date, Time and Numeric Input Fields

Until the onsubmit attribute of the form occurs, the form elements are not changed by any JavaScript code of this package. The package performs an automatic validation using JavaScript for some field types.

The placeholder value is used to set the HTML5 attribute of the respective input type. This value can be redefined for each element.

Date input

    Date:
        Format           : string "YMD", "DMY" or "MDY", default "YMD"
        Separator        : string (1 char), default "-",
        Placeholder      : string, default empty
        UseHTML5Type     : boolean, default false

If the value of UseHTML5Type option is set to true, the HTML5 input type 'date' is used instead of the internal validation mechanism. This option is in a 'beta' state (nearly untested) since the date input currently is supported only by a few browsers and always works internal with the english date format.

Time input

    Time:
        Separator        : string (1 char), default ":",
        Seconds          : boolean, default false,
        AllowMinutesOnly : boolean, default true,
        Placeholder      : string, default empty
  • The Seconds option determines whether the time is specified with the seconds value.
  • The MinutesOnly option determines whether it is possible to enter minutes without the hours value. An entry of for instance 100 is recognized as correct input when the form is sent. In that case it will be converted to the time value '1:40'.

Integer input

    Integer:
        RightAlign       : boolean, default true
        Placeholder      : string, default empty

Floating point input

    Float:
        DecimalPoint     : string (1 char), default see annotation below
        ThousandsSep     : string (1 char), default see annotation below
        RightAlign       : boolean, default true
        Placeholder      : string, default empty

The default value for the decimal point and the thousands separator depends on the data based upon the current locale as set by setlocale(). If no locale settings are available, the default values are "." for DecimalPoint and "," for ThousandsSep.

Currency Input

    Float:
        Symbol           : string, default see annotation below 
        DecimalPoint     : string (1 char), default see annotation below
        ThousandsSep     : string (1 char), default see annotation below
        RightAlign       : boolean, default see annotation below
        Placeholder      : string, default empty

The default values for the decimal point and the thousands separator depends on the settings for the floating point input but can be modified separate for currency inputs.

The default value for the currrency symbol depends upon the current locale. It is set to "USD" if no locale value is available.

How to Adjust the Settings for the Color Picker

To make it easier for the user to enter color values, the package has a visual color picker for color selection. The JSColor package is included in this package to implement a visual color picker.

!!! For commercial use take care of the JSColor licence conditions !!!

Since the appearance of JSColor is not based on a stylesheet, some settings can be made via the configuration.

In addition, an individual palette can be specified containing any number of color values. The colors of that palette are displayed in the picker as directly as colors that the user can select.

    Color:
        borderColor      : color string, default "#000000"
        borderRadius     : integer, default 0
        padding          : integer, default 12
        backgroundColor  : color string, default "#FFFFFF"
        position         : string "bottom", "left", "right" or "top", 
default
"bottom" palette : array of color strings , default empty

How to Adjust the Settings for CKEditor HTML Editor

Since the integration of the CKEditor is a complex matter, it is dealt with in a separate description in which the setting options via the configuration are also explained in detail.

How to Adjust the Settings for the RichFilemanager

The connection with the RichFilemanager also requires a more detailed description, which also goes into its configuration.

How to Download the Complex PHP Form Design and Generator or Install It with PHP Composer

The Complex PHP Form Design and Generator package can be downloaded from download page or be installed using the PHP Composer tool following instructions in the Composer install instructions page.




You need to be a registered user or login to post a comment

1,579,779 PHP developers registered to the PHP Classes site.
Be One of Us!

Login Immediately with your account on:

FacebookGmail
HotmailStackOverflow
GitHubYahoo


Comments:

No comments were submitted yet.




  Post a comment Post a comment   See comments See comments (0)   Trackbacks (0)  
  All package blogs All package blogs   Complex PHP Form Design and Generator Complex PHP Form Design and Generator   Blog Complex PHP Form Design and Generator package blog   RSS 1.0 feed RSS 2.0 feed   Blog How to Setup Complex ...  

For more information send a message to info at phpclasses dot org.