Archive | Examples

RSS feed for this section

Introduction

PHP Database Form builds amazing online forms with ease. It is designed for web developers, freelancers, IT consultants who wish to create professional online form quickly with minimum programming.

A basic web form requires only two lines of PHP code.

Quick Setup

Setup PHP Database Form is easy and very similar to setting up phpgrid by updating a few values in conf.php file.

Make sure to use the correct PDBF_PATH value. It represents the absolute URL to the phpDatabaseForm library folder on the web server. This value tells your script where to find phpDatabaseForm library on the web server.

For instance, if the URL to get to the PHP Database Form is http://www.yoursite.com/phpDatabaseForm, or http://localhost/phpDatabaseForm, the PDBF_PATH should be “/phpDatabaseForm”.

if the URL to phpDatabaseForm is http://www.yoursite.com/admin/phpDatabaseForm, or http://localhost/admin/phpDatabaseForm, the PDBF_PATH should be “/admin/phpDatabaseForm”,

and so forth.

The sample MySQL database “northwind” can be found inside examples/SampleDB folder.

// mysql example
define('PDBF_DB_HOSTNAME', 'localhost:3306'); // database host name
define('PDBF_DB_USERNAME', 'root'); // database user name
define('PDBF_DB_PASSWORD', ''); // database password
define('PDBF_DB_NAME', 'northwind'); // database name
define('PDBF_DB_TYPE', 'mysql'); // database type
define('PDBF_DB_CHARSET','utf8'); // ex: utf8(for mysql),AL32UTF8 (for oracle), leave blank to use the default charset

define('PDBF_PATH', '/phpDatabaseForm');

/******** DO NOT MODIFY ***********/
require_once('pdbf.php');
/**********************************/

Database Type

databases_supported

PHP Database Form supports wide range of database types. Simply define PDBF_DB_TYPE parameter value to your own database type. It can be one of the following strings. The default database type for is “mysql”.

PDBF_DB_TYPE string is case sensitive.

PDBF_DB_TYPE Description
mysql MySQL (default)
odbc_mssql SQL Server (Unix/Linux)
odbc_mssql_native SQL Server Windows native (Download PHP SQL Server Driver)
oci805 Oracle
postgres PostGreSql
access Microsoft Access
db2 DB2
db2-dsnless DB2 DSN-less connection
informix Informix
informix72 Alternative Informix Driver
odbc Generic ODBC

Build Your First Online Form

Build your first web form in two lines of PHP code. Below example generates the form from a database table named “employees”. When using star, it generates a web form with each form element ordered by database table column from the left most column to right most.

e.g.

SELECT * FROM...

or you can specify column names that only will be used. In this case, phpDatabaseForm generates form element only by the order column names specified.

SELECT col1, col2, col3... FROM...

At minimum, it requires only TWO lines of code.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> display();

Live demo

Change Form Element Label

By default form displays database column name as input element label. You can change it with method set_label().

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> display();

Live demo

Hide A Form Element

You can choose to hide certain fields from displayed on the form with set_hide() method.

Note set_hide() method hides the form elements using display:none in CSS. You should not use it to hide sensitive information such as password.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> display();

Live demo

Set Placeholder

Use set_placeholder to set placeholder text for an input element.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> display();

Live demo

Required Fields

To set field as required, use set_required() method. If required fields are left blank, an “* required” message will be displayed. One more more fields can be specified as required fields in this method.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> set_required(array("LastName"));
$dbForm -> display();

Sample output:

require_field_error

Live demo

Add A Section Header

You can divid a form into multiple subsections each with different header text. Use add_group_header() for this purpose.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> display();

Sample Output:

section_header

Live demo

Tooltip

The tooltip is a hint that displays information about an item being hovers over by mouse pointer. Tooltips do not appear on mobile operating systems, because there is no cursor. Use add_tooltip() to add tooltip to any form element by name. The default tooltip symbol is a question mark (?).

tooltip

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> display();

Live demo

Read Only Fields

When editing existing records on a form, you can set certain fields to be read only. set_readonly() method takes an array of fields that are read only during editing.

Note that you can only set read only fields when editing existing data. You cannot fields to be read only during new data entry. If you do not want a field to be editable when entering new data, you can hide a field from displaying using set_hide().

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> set_readonly(array('EmployeeID, LastName'));
$dbForm -> display();

Live demo

Input Element Type

PHP Database Form supports common form input types including

  • text (default input type)
  • textarea
  • select
  • autocomplete
  • checkbox
  • password
  • email
  • radio
  • checkbox (single checkbox .e.g true | false)
  • checkboxlist
  • wysiwyg

“select”, “autocomplete”, “radio”, “checkboxlist” all have a third parameter that can be either a list of key value pairs delimited by semicolon “;”, or a SQL SELECT.

“checkbox” also has a third parameter but with only a single key value pair. The default input type is always “text”.

Hint: add “:;” (colon semicolon) to the front of the the key value pairs to add a blank option. Do not include a trailing semicolon.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> set_readonly(array('EmployeeID, LastName'));
$dbForm -> set_ctrltype('Notes', 'wysiwyg');
$dbForm -> set_ctrltype("Country", "autocomplete", "SELECT Code, Name FROM Country");
$dbForm -> set_ctrltype("ReportsTo", "select", "SELECT EmployeeID, LastName FROM Employees");
$dbForm -> set_ctrltype('Email', 'email');
$dbForm -> set_ctrltype('Gender', 'radio', 'M:MMM;F:FFF;Y:YYY;Z:ZZZ');
$dbForm -> set_ctrltype('IsActive', 'checkbox', '1:0');  // single key value pair only
$dbForm -> set_ctrltype('Shift', 'checkboxlist', 'Regular:Regular;Gravy Yard:Gravy Yard');
$dbForm -> set_ctrltype('SSN', 'password');
$dbForm -> display();

Live demo

Data Validation

Use set_editrule() method to validate data using client side javascript function such as date format, phone number, SSN format, min-max ranges etc.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> set_readonly(array('EmployeeID, LastName'));
$dbForm -> set_ctrltype('Notes', 'wysiwyg');
$dbForm -> set_ctrltype("Country", "autocomplete", "SELECT Code, Name FROM Country");
$dbForm -> set_ctrltype("ReportsTo", "select", "SELECT EmployeeID, LastName FROM Employees");
$dbForm -> set_ctrltype('Email', 'email');
$dbForm -> set_ctrltype('Gender', 'radio', 'M:MMM;F:FFF;Y:YYY;Z:ZZZ');
$dbForm -> set_ctrltype('IsActive', 'checkbox', '1:0');  // single key value pair only
$dbForm -> set_ctrltype('Shift', 'checkboxlist', 'Regular:Regular;Gravy Yard:Gravy Yard');
$dbForm -> set_ctrltype('SSN', 'password');
$dbForm -> set_editrule("SSN", "SSN_validate"); // validate format with javascript
$dbForm -> display();

Social Security Number format validation (javascript)

function SSN_validate(value, colname){
    var re = /^(\d{3}-?\d{2}-?\d{4}|XXX-XX-XXXX)$/;
    if(!re.test(value)){
        return [false, colname + " is invalid."];
    }else{
        return [true, ""];
    }
}

Live demo

Set Field Max Length

Use set_maxlength() method to set maximum length of characters for a text field. It adds “maxlength” attribute to an input element.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> set_readonly(array('EmployeeID, LastName'));
$dbForm -> set_ctrltype('Notes', 'wysiwyg');
$dbForm -> set_ctrltype("Country", "autocomplete", "SELECT Code, Name FROM Country");
$dbForm -> set_ctrltype("ReportsTo", "select", "SELECT EmployeeID, LastName FROM Employees");
$dbForm -> set_ctrltype('Email', 'email');
$dbForm -> set_ctrltype('Gender', 'radio', 'M:MMM;F:FFF;Y:YYY;Z:ZZZ');
$dbForm -> set_ctrltype('IsActive', 'checkbox', '1:0');  // single key value pair only
$dbForm -> set_ctrltype('Shift', 'checkboxlist', 'Regular:Regular;Gravy Yard:Gravy Yard');
$dbForm -> set_ctrltype('SSN', 'password');
$dbForm -> set_editrule("SSN", "SSN_validate"); // validate format with javascript
$dbForm -> set_maxlength("FirstName", 12);
$dbForm -> display();

Live demo

Set Default Value

During data entry, sometimes you need to have default value for certain fields such as date and time, or arbitiry text. Use set_default() method to set default text.

Note that you can only set default text when entering new data. You cannot set default value when editing existing data on a form.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> set_readonly(array('EmployeeID, LastName'));
$dbForm -> set_ctrltype('Notes', 'wysiwyg');
$dbForm -> set_ctrltype("Country", "autocomplete", "SELECT Code, Name FROM Country");
$dbForm -> set_ctrltype("ReportsTo", "select", "SELECT EmployeeID, LastName FROM Employees");
$dbForm -> set_ctrltype('Email', 'email');
$dbForm -> set_ctrltype('Gender', 'radio', 'M:MMM;F:FFF;Y:YYY;Z:ZZZ');
$dbForm -> set_ctrltype('IsActive', 'checkbox', '1:0');  // single key value pair only
$dbForm -> set_ctrltype('Shift', 'checkboxlist', 'Regular:Regular;Gravy Yard:Gravy Yard');
$dbForm -> set_ctrltype('SSN', 'password');
$dbForm -> set_editrule("SSN", "SSN_validate"); // validate format with javascript
$dbForm -> set_maxlength("FirstName", 12);
$dbForm -> set_default('Title', 'N/A');
$dbForm -> display();

Sample Output (default value only applies during adding new record):

default_value

Live demo

Change Form Width and Height

By default the Database Form adjusts its dimension automatically to fit its contained elements. You can also set form width and height manually with set_form_dimension() method, which has two parameters, width and height.

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> set_readonly(array('EmployeeID, LastName'));
$dbForm -> set_ctrltype('Notes', 'wysiwyg');
$dbForm -> set_ctrltype("Country", "autocomplete", "SELECT Code, Name FROM Country");
$dbForm -> set_ctrltype("ReportsTo", "select", "SELECT EmployeeID, LastName FROM Employees");
$dbForm -> set_ctrltype('Email', 'email');
$dbForm -> set_ctrltype('Gender', 'radio', 'M:MMM;F:FFF;Y:YYY;Z:ZZZ');
$dbForm -> set_ctrltype('IsActive', 'checkbox', '1:0');  // single key value pair only
$dbForm -> set_ctrltype('Shift', 'checkboxlist', 'Regular:Regular;Gravy Yard:Gravy Yard');
$dbForm -> set_ctrltype('SSN', 'password');
$dbForm -> set_editrule("SSN", "SSN_validate"); // validate format with javascript
$dbForm -> set_maxlength("FirstName", 12);
$dbForm -> set_default('Title', 'N/A');
$dbForm -> set_form_dimension(800, 1200);  // set width and height for entire form
$dbForm -> display();

Live demo

Are You Human? Add CAPTCHA!

PHP Database Form has a built-in CAPTCHA (“Completely Automated Public Turing test to tell Computers and Humans Apart”), a type of challenge-response test used in computing to determine whether or not the user is human. Simply call add_captcha() method to add a CAPTCHA to the end of the form. No programming is required.

captcha control

$dbForm = new C_DatabaseForm("SELECT * FROM Employees", "EmployeeID", "Employees");
$dbForm -> set_label("EmployeeID", "Employee ID");
$dbForm -> set_label("LastName", "Last Name");
$dbForm -> set_label("FirstName", "First Name");
$dbForm -> set_label("BirthDay", "DOB");
$dbForm -> set_hide("Extension");
$dbForm -> set_hide("hireDate");
$dbForm -> set_placeholder('Title', 'official job title');
$dbForm -> add_group_header("EmployeeID", "Basic Info");
$dbForm -> add_group_header("Email", "Contact Info");
$dbForm -> add_tooltip("BirthDate", "Enter employee birth date"); // tooltip supports HTML as well
$dbForm -> set_readonly(array('EmployeeID, LastName'));
$dbForm -> set_ctrltype('Notes', 'wysiwyg');
$dbForm -> set_ctrltype("Country", "autocomplete", "SELECT Code, Name FROM Country");
$dbForm -> set_ctrltype("ReportsTo", "select", "SELECT EmployeeID, LastName FROM Employees");
$dbForm -> set_ctrltype('Email', 'email');
$dbForm -> set_ctrltype('Gender', 'radio', 'M:MMM;F:FFF;Y:YYY;Z:ZZZ');
$dbForm -> set_ctrltype('IsActive', 'checkbox', '1:0');  // single key value pair only
$dbForm -> set_ctrltype('Shift', 'checkboxlist', 'Regular:Regular;Gravy Yard:Gravy Yard');
$dbForm -> set_ctrltype('SSN', 'password');
$dbForm -> set_editrule("SSN", "SSN_validate"); // validate format with javascript
$dbForm -> set_maxlength("LastName", 8);
$dbForm -> set_default('Title', 'N/A');
$dbForm -> set_form_dimension(800, 1200);  // set width and height for entire form
$dbForm -> add_captcha(); // ARE YOU HUMAN?
$dbForm -> display();

Live demo

Load Form And Edit Existing Record

All we talked so far is adding new data using PHP Database Form, how about editing existing record? For that, we have a simple method called load_form(). Simply pass record unique identifier such as primary key to load existing record onto the form. That’s it.

In this example, it passes a hard coded value, 9; but You can certainly change that value dynamically.

// ... code omitted
$dbForm -> load_form(9); // load a single record with EmployeeID equals to 9
$dbForm -> display();

Live demo

Redirect After Successful Submission

In online forms such as membership signup, login etc, all require the form to redirect to another page such as welcome page after successful form submission. PHP Database Form has a method called redirect_after_submit() to handle redirect.

// ... code omitted
$dbForm -> load_form(9);
$dbForm -> redirect_after_submit("http://example.com");
$dbForm -> display();

Live demo

Mask Input

Input mask provides a general format to text field and enforces its structure as the user typing in values. It provides the user an idea about how they should enter the data. Use set_mask() method to mask any text input.

phpDatabaseForm uses an excellent jQuery Mask Input created by Igor Escobar available distributed under MIT license.

phone_mask

// ... code omitted
$dbForm -> load_form(9);
$dbForm -> redirect_after_submit("http://example.com");
$dbForm -> set_mask("HomePhone", "(000)000-0000", "{placeholder: '(___)__-____'}");
$dbForm -> display();

Live demo