PHPRad

PHPRad At a Glance.
This tutorial will show you basic functionalities in PHPRad and
 Creating New Project
Getting Started

To create new
Project.
Just click on the
button.
Fill In Project properties
• Enter the project name

• Set the project location. Make sure that the

location is in your web document root.

• Set the project site address

• Enter your database details for already existing

one or you can create a new database.
Setting Project Database

There are two ways to set project database.

Select from existing Create new database

database
Setting Project Database
To select from existing database

To Select from the exiting

databases, click on the select
control to select from the list
databases available.
Creating New Database

Enter the new database

name

Click “Create Database

” to proceed.
Creating Project Database
Managing Database Tables
New Project Created
To preview the project click on the preview tab
Preview our project in a browser
You can preview the project with default system browser. Just click on
Preview in Browser Button
PHPRad Designer Overview

Generated Pages
Project Field
for each database
Database Property
table

Page Fields
To manage the
database view,
right click on
the menu and
select an option

Page Properties
Component
PHPRad Designer Overview Components description

Click on the Click on the

button to button to
update the synchronize
database database
changes
Managing PHPRad Pages
You can customize your pages using this section in the PHPRad
environment.
• List : Displays all your database records in a table view or a
custom view format.
• View : Shows the details of a selected record from your
database.
• Add : Displays a form for you to add a new record to the
database.
• Edit : Allows you to edit records in your database.
 Page Properties (List)
Use the Page Properties settings to customize your list page
• Page Design:
▪ Display Type: Choose between Table List or Custom view in other to set
how records are displayed on a particular page. See List Page(table
view) and List Page (custom view) for more details.
▪ Header Title: Set the header title of the page which you want to
display.
▪ Page Title Icon: Choose the icon you want to be displayed by the side
of the page header title.
▪ Empty Record Message : If no records are found on your database, the
text set here will be displayed to your users.
• Default Query Combination (advance): Use this section, when you want to
add multiple tables to be displayed on your page. This is a custom database
query. See Database Query Configuration for more details.
• Page Components:
▪ List Sequence: set to true if you want to display numbering in the table
for the displayed records.
▪ Pagination Settings: customize the pagination display on the table
footer. See List Page pagination settings for more details.
▪ Action Button Display Style: choose how you would want to display the
action buttons on your table view. Styles are (icons, dropdown).
 Page Properties (List) Contd…
▪ Set true or false for each field if you want to display the following to
your users.
➢ Add Button – Enable adding record .
➢ Edit Button – Enable record editing .
➢ Delete Button – Enable record deleting.
➢ View Button – Enable record viewing.
➢ Check Button – Enable multiple record selection.
➢ Export Button – Enable export for displayed records.
➢ Search Field – Enable Searching for displayed records.

• Table Design:
▪ Table Boarder Style: Choose how you would like the table to be styled.
▪ Table Striped: Set to true of you want your table striped.
▪ Table Hover-able: Set to true if you want your table to be hover
enabled.
▪ Table Responsive: Set to true if you want your table to be responsive in
other to adjust to the viewing screen size.
 Page Properties (View)
Use the page properties settings to customize your view page
• Page Design:
▪ Display Type: Choose between Table List or Custom view in other to
set how records are displayed on a the view page.
▪ Header Title: Set the header title of the page which you want to
display.
▪ Page Title Icon: Choose the icon you want to be displayed by the
side of the page header title.
▪ Show Back To Listen: Gives you the option to insert a previous
button which takes you back to the previous page you left.

• General (Advance):
▪ Action After View: Gives you the option of customizing an action
after loading your page or viewing record by inputting your custom
code. E.g. Inserting the Total time spent in viewing the page into
database.

▪ Action Before View: Gives you the option of customizing an action

before loading your page or viewing record by inputting your
custom code. E.g. Updating the view count of that record.
 Page Properties (View) Contd…
• Page Components:
➢ Edit Button: Edit Button – Enable record editing .
➢ Delete Button – Enable record deleting.
➢ Export Button – Enable export for displayed records.

• Table Design:
▪ Table Boarder Style: Choose how you would like the table to be
styled.
▪ Table Striped: Set to true of you want your table striped.
▪ Table Hover-able: Set to true if you want your table to be hover
enabled.
▪ Table Responsive: Set to true if you want your table to be
responsive in other to adjust to the viewing screen size.
 Page Properties (Add)
• Page Design:
▪ Header Title: Set the header title of the page which you want to
display.
▪ Page Title Icon: Choose the icon you want to be displayed by the
side of the page header title.
▪ Show Back To Listen: Gives you the option to insert a previous
button which takes you back to the previous page you left
▪ Form Layout Type: Gives you the option to choose the format in
which your form would be displayed to your users.

• General :
▪ Redirect To After Add: Gives you the options to choose the page
your users should be redirected to after adding a record.
▪ Message After Add: Customize message to display after your users
add a record; either successfully or otherwise.
▪ Action After Add(advance): Gives you the option of customizing an
action after adding a record by inputting your custom code.
▪ Action Before Add(advance): Gives you the option of customizing
an action before adding a record by inputting your custom code.
▪ Server Side Validation: this Checks to see if a record inserted is
valid or not and it’s done on the server side.
 Page Properties (Edit)
• Page Design:
▪ Header Title: Set the header title of the page which you want to
display.
▪ Page Title Icon: Choose the icon you want to be displayed by the side
of the page header title.
▪ Show Back To Listen: Gives you the option to insert a previous button
which takes you back to the previous page you left
• General :
▪ Redirect To After Edit: Gives you the options to choose the page your
users should be redirected to after editing a record.
▪ Message After Edit: Customize message to display after your users
update a record; either successfully or otherwise.
▪ Action After Update(advance): Gives you the option of customizing
an action after updating your record by inputting your custom code.
▪ Action Before Update(advance): Gives you the option of customizing
an action before updating a record by inputting your custom code.
• Miscellaneous:
▪ Form Layout Type: Choose the pattern/Display format you would
want to display the form to uses.
▪ Server Side Validation: this Checks to see if a record inserted is valid
or not and it’s done on the server side.
Page Properties (Delete)
• General :
▪ Record Delete Settings: For some operation Deleting a record would
not be appropriate, using this field would allow you to either delete
the record or set a flag, to indicate that the record has been
deleted. E.g. Updating the records field in the database to
“deleted”.
▪ Prompt Message Before Delete: Indicate the message to prompt users
about a deletion that is about to occur.
▪ Message After Delete: Customize message to display after your users
delete a record; either successfully or otherwise.
▪ Redirect To After Delete: Gives you the options to choose the page
your users should be redirected to after deleting a record.
▪ Action After Delete(advance): Allows you to specify an action to be
executed after deleting a record by inputting your custom code.
▪ Action Before Delete(advance): Allows you to specify an action to be
executed before delete a record by inputting your custom code.
List page(Page Fields)
To remove a column from
your table untick the field
here.
The GROUP BY statement is often used with
aggregate functions (COUNT, MAX, MIN,
SUM, AVG) to group the result-set by one or
more columns
Search: untick the section
you wouldn’t like to be
searchable on the table.
Search Type: Select the
compare method to be used
for a column when searching
for record.
By definition, an aggregate function performs
a calculation on a set of values and returns a
single value. MySQL provides many aggregate
functions that include AVG, COUNT, SUM,
MIN, MAX, etc. An aggregate function ignores
NULL values when it performs calculation
except for the COUNT function. Use this
section to pick the type of aggregate
function you prefer.
View page(Page Fields)
Use these arrows to re-arrange
the fields .

By definition, an aggregate function performs

a calculation on a set of values and returns a
single value. MySQL provides many aggregate
To remove a column from functions that include AVG, COUNT, SUM,
your view untick the field MIN, MAX, etc. An aggregate function ignores
here. NULL values when it performs calculation
except for the COUNT function. Use this
section to pick the type of aggregate
function you prefer.
Add & Edit page(Page Fields)
Use these arrows to re-arrange
the fields .

To remove a column from

your form untick the field
here.
 List page (Table View)
Tabular List is the default view for record display type in PHPRad environment;
the resulting view is show below

Resulting View
List page (Custom View) Advance.
When Display type is set to custom view, a provision is made to customize record
display format, see image below for more details.

Use the Custom Html

view to provide your
customized view code

Resulting View
List page (Database Query Config) Advance.
This enables you to add multiple tables on a single page (if you want to display records from
different database tables on a single page, using a join statement in your query.) the Default
Query Configuration Section helps you to achieve that.
Select the
Select
table to
join type
add

Fields to
match on
Select the
both tables
(Collection) to
display this view

Ok to display
result on
List Page
Use to remove
Fields
unwanted table from
the joined tables
List page (Pagination Settings)
Paging means showing your query result in multiple pages instead of just put them all in one
long page. The Pagination setting is used to set the appearance of your table paging links.

Choose what format you

would like to display your
Click to pagination.
open

Used to display; Page

Count, Record Count,
Record Limit respectively,
untick to hide from
pagination view.

Tick to apply settings When using Numeric

to all pages of the PrevNext, this
Preview Panel indicate the
system.
number of pages
link to display.
 List & View page (Fields property)
The fields property is used to set your desire preference for each
column display.
Display Type: choose either plan text, Custom or Image in order to
display your column the way you prefer
• Plan Text: display the record as it is in the database.
• Image: render the record as an image using the text from DB.
• Custom: prove a custom code in order to display your record.

Sortable: this allows for making a field sortable when set to true.
Field Link: enables you to make a field into a link by specifying the link value, such that when clicked will open
a the specified link destination.
Column Width: used to set width for a specific column in the table. Normally in PX or %.
Display Label: Indicates the name of the column, this can be changed by simply typing your desired name.
See next page for mere info.
List & View page (Fields property) Contd…
Choose display type.
(Plan text, Custom & Image)

Provides link to link to another page/page record.

Enter
desired
name for
field record.
Provide code for custom display of record.
Set the display
column width

Set true to make

field sortable

Set Image display

size
Add & Edit Form Controls Properties
A form is a section of a document containing normal content, markup,
special elements called controls(checkboxes, radio, Text Area, File,
etc.), and labels on those controls.

The form Control Properties are used to define the characteristics of

an element, such as indicating an action to perform by that element.

Lets take a look at these controls;

Go to Next Page…
 Add & Edit Form Controls (Textbox) Choose the
display type.
The Textbox also know as input element can be displayed in several E.g. (Password
ways, depending on the type(Textbox Type) attribute. field)

The autocomplete attribute

allows for the browser to
automatically completes the input
values based on the data supplied.
See Auto Complete Data Source &
Option List Data Source on how to
populate the data.
Specify the default value if none is
supplied by the user
Add an additional information to
the input field for users.
Specify number of characters to
accept from users.

The disabled attribute specifies that the input field is disabled.

A disabled input field is unusable and un-clickable, and its value will not
be sent when submitting the form.
The read-only attribute specifies that the input field is read only (cannot
be changed)
Choose an icon to display, leave empty if you don’t want to display any.

Display Label is used to identify the information needed for the Textbox.
Add & Edit Form Controls (Textbox)
Contd…
The Textbox also know as input element can be displayed in several
ways, depending on the type(Textbox Type) attribute.

Choose the icon to display for the input field

The placeholder attribute specifies a short hint that describes the

expected value of an input field

Required: The required attribute specifies that an input field must be

filled out before submitting the form is set to true.
Validation error Message: Enter the required message to display if
validation error occurs.
Check Duplicate: this will check the database to see if entered value
already exist, it only happens if set to true.

Specify the width of the input field, leave empty for default
 Add & Edit Form Controls (Combo box)
The Combo Box (select) element defines a drop-down list with options to
choose from

Use the Option List Data Source to populate data to display on the
drop down list options.
See Auto Complete Data Source & Option List Data Source on how to
populate the data.

Start With Field Set Title: enable you to group form elements and
with the title you provide here.

Use Selectize: enable this, if you would like to make the select
field searchable.
Multiple Select: set to true if u want to allow for multiple select
Max Select: specify the max number of items to select from the list.
Use -1 for infinity.
 Add & Edit Form Controls (Checkbox)
Checkboxes let a user select ZERO or MORE options of a limited number of
choices

Use the Option List Data Source to populate data to display to users
for selection.
See Auto Complete Data Source & Option List Data Source on how to
populate the data.
 Add & Edit Form Controls (Radio button)
Radio buttons let a user select ONLY ONE of a limited number of choices

Use the Option List Data Source to populate data to display for the
radio button options.
See Auto Complete Data Source & Option List Data Source on how to
populate the data.
 Add & Edit Form Controls (Textarea)
Text Area : defines a multi-line text input control. A text area can hold an
unlimited number of characters

An HTML editor is a computer program for editing HTML, the

markup of a webpage. Although the HTML markup of a web page
can be written with any text editor, specialized HTML editors can
offer convenience and added functionality.
Enable this feature to use the editor in your Text Area field.

Specify the minimum required number of characters to accept from

user.
 Add & Edit Form Controls (File)
File: file input in HTML forms is to let users include entire files (pictures,
videos, documents, etc.) from their system into a form submission

Set to true if u want to enable drag and drop of files to the file
field.

Specify the file upload directory you would like to store files
uploaded by the user.

This allow you to specify the way the file name will be created.

Choose between saving the file full path or relative file path to your
database.

Enter text to add to the start of the file name. leave empty if none

Allow file extension: select the file type required. Use (*) for all types
Max number of files: set the number of files user can upload at once.
Max file size In MB: set max upload file size in megabyte.
Add & Edit Form Controls (None)
None: this indicates that the field will be hidden to the user. You can set a
default value for the field if it is required by the database.
Auto Complete Data Source & Option List
Data Source
The auto complete data source and Option list data source perform the same actions;
They provide a view for you to populate data for (select field, check box field, etc.)

In order to populate the data follow the instruction bellow:

Select the Option / Auto

complete data source to display
the data source view
Auto Complete Data Source & Option List
Data Source Contd…

Quick List:
set of predefined data has been provided. Choose from
the drop-down list.
Auto Complete Data Source & Option List
Data Source Contd…
Enter Values:
You can enter your custom value using this provide
field.
Value: the value you wish to submit to database.
Label: text to display to users to choose options from
Auto Complete Data Source & Option List
Data Source Contd…
Select Source from Database:
This allows you to populate your data source from
existing records in the database.

Select the table you wish to populate data from text to

display to
Choose the value field, which would be submitted to users to
database choose
options from
Select what field the data should be arranged with

Tick this field if you want to enable real time Tick to preven
search, such as looking up the value from the display of
database as user begins to type in the select field. multiple
records
Select what order the data should appear: in
ascending (ASC) or descending (DESC) order. Use
only if the “Order By” Field has been selected.
Auto Complete Data Source & Option List
Data Source Contd… (Advance)
Source from SQL Statement:
This allows you to write a custom SQL Statement in
order to populate your data source from existing
records in the database.

The example statement provided, should guide you on

how to write your custom SQL query.
Notice the “AS value” and “AS label” which specifies
which column should be used as value and which column
should be used as label; This should be available in all
custom SQL statement you write in order for the system
to detect the value and label fields.
Login and Registration
To configure user login and registration module, use the Configure Login
Button on the top left corner of the environment.
Fill in the popup form and click “Okay”. That’s all.
More details bellow:
Select the database table to use for user data storage.

Select the matching column for each given fields respectively.

Email and Photo are optional. Tick the Remember Me section if
you want to display that field to the users.

Select what info to accept in order to authenticate a user (either

Username, email or Username & email)

Allow users to register: obviously the idea. Enable this to allow

users to register.
Enable Password Reset: tick to allow users to recover there
password if forgotten.
Choose between force email verification or loin after register.
Note: Force email verification will not work on localhost. Use only
when system is hosted on a server.
Managing User Roles (Access Control)
Implementing Role Based Access Control (RBAC), use the Manage Permission
Button on the top left corner of the environment.
Select the column to use as the RBA from the authentication table used to
configure the login and registration, add a new role and tick the respective
field you would want users under that role to have access to and click “Okay”.
That’s all.
More details bellow:

Choose the column to use for access control

Add a new user role or delete a user role using this buttons.

Tick the pages you want users under that role to have access to.
Leave unticked if you do not want them to have access to those
pages
Menu Configuration
How to Configure the Menu. use the Menu Configuration Button on the top
left corner of the environment.
On the popup window, select the location to display your menu from the
dropdown list, fill out the menu property form for each menu and click
“Okay”. That’s all.
More details bellow:

Select your desired menu position from the dropdown list.

Use the Up & Down arrow to re-arrange the menus. Add or remove
a menu from the list using the green/red button respectively.

Path: choose or enter the page to open when the menu is clicked.
Display Label: title to display for the menu.
Target: this specifies a window or a frame where the linked
document is loaded (_self-load in same window, _black-load on a
new window, _parent-Will open in the next level up of a frame if
they were nested inside one another, _top-This breaks outside of
all the frames it is nested in and opens the link as top document
in the browser window).
Menu Icon: choose the icon to display before the menu title.
Page Components Design
How to Design a page. use the Page Design | Components Button on the top
left corner of the environment.
On the popup window, there are many components that will help you design
a page, such as adding bar chart, pie charts, information panel, also allows
your to build a custom view (I.e. writing custom HTML codes to your needs )
and many more.

Select the page you wish to

design

Drag components from this

panel onto your desired
Section on the selected page
This panel is used to
Use the New section menu customize each
to add rows to a page. component added to a
User the New Column to This panel represent section
add columns to a row in the your page
page
Page Components

Record Counts are used to add counts of records in the database, as

seen in the image bellow.

Menu: allow you to add menus to your page, either dynamic or static
menus

Used to represent data graphically in a page; Allows you to add

charts to represent data graphically, as show in the image bellow.

Allow you to provide your custom view code

Allow you to add a page as sub page in another page

Page Components (Record Count)
Title: set/edit the title of the record count view
SQL: the code which does the database record counting.
Value Prefix & Value Suffix: enter any value you wish to
display before or after the count number (E.g. $100,
300%), useful for when you want to display currency
before or after the number.
Progress Bar: set to true if you want to display a bar.
Progress Bar Max Value: set the max number for the
progress bar in order to display current position of the
count.
Display Style: Choose the format you want to display
the view.
Link: choose/set the page to open when the view is
clicked.
Icon: choose an icon to indicate what type of record
Resulting View
count is displayed.
CSS Class: choose the color to use for the view (I.e.
info-is the primary color of the app theme, danger-is red
color, success-is green color etc.).
Short Description: Describe the record count you are
displaying.
Page Components (Menus static-menu)
Menu Header Title: Enter desire menu title to
display

Style: select the format you would want to display

the menu Click (Collection) to open
the menu configuration
Fixed: set to true if you would want the menu not to windows
scroll along with the page contents.

Stacked: set to true if you want to display the menu

vertically. Set false for horizontal view.

Go to Menu and see how to configure

your menus.
Page Components (Menus dynamic-menu)
Click “Menu Data Source” to open the Form
Menu Data Source windows

“Menu link path”, “Menu Label” : this paths

will be filled after setting your data source

Menu Header Title: set the header title name

of the menu

Table Name: Set the database table name you

want to use as the dynamic menu set.
Menu Display Field : Chose the column you
want to display as the link title of your menu.
Order By: Choose the column to order by set
the order at which you want to display the
menu. (I.e. A-Z).
Page Components (Charts) Advance
Used to represent data graphically in a page; Allows you to add charts to
a page.
Choose the type of chart you want to display.
Set the title of the chart.
Set a short description for the field.

Label Field: Choose the field to Click on the

use as label for the chart data. (collection) to
Set a title. Value Field: Choose the field to populate the chart
use as counts for the chart. using the pop up
Use the window.
query
builder to
generate
SQL
statement

Click “Okay”
Or manually enter your SQL
when done
statement here
Page Components (Custom View)
In order to render your own custom view in a page, click
the button next to “CustomCode” here
A window will be open, which you can use to supply your custom view codes to render to a page as show
below.

Use this view to supply your custom code

Click “Okay”
when done
Page Components (Sub Page)
Sub page is used for , when you want to display/imbed a page inside another page. The sub
page can be customized to be imbedded in different format such as (Modal , As is or customize
the default page to suit your need).
See image below.

If you choose Custom View or Custom

View Modal, a custom code property
will appear giving you the ability to
customize the code in it
Selecting Your application Theme
How to set the application theme. use the Project Theme Button on the top.

On the popup window, Select your preferred theme from the dropdown list,
and click “Okay”. That’s all.
More details bellow:

Navigate between these menu to see how the selected theme

would be applied on the various view.

Choose your desired theme from the dropdown list.

Tick the navbar inverse to invert the selected color of the
navigation bar

This is the Preview panel which shows you the current active
theme which you have selected.
 Application settings
How to customize your preference/settings: use the Project Settings button
To open the setting windows. Fill out the from and click “Okay”.

• Enter/Edit the project name

• Set/edit the project location. Make sure that the

location is in your web document root.

• Set/edit the project site address

• Set or Edit the Author name

• Set/edit the system key word, which would be used

by google when indexing the application for users to
easily find this system when search for.

• Set/edit the project description

• Select an image for the system favicon

• Select an image for the system logo

Application settings
To send mail with the PHP default mail function.
• Enter/Edit the email sender’s email

• Enter/Edit the email sender’s name

• Set/edit the project site address

To send mail with your Gmail account or any other

account.
• Enter/Edit the username of the account (this is
usually the email address of the account)

• Enter/Edit the your email/account password

• Set/edit the host provider of your email (for

Gmail use : smtp.gmail.com).

• Set/edit the server port of your email provider.

(for Gmail use: 465 or 587 for secured
connection)
Publish Application
In order to publish the application. use the Publish Button on the top right
corner of the environment.
On the popup window, you can also edit the application setting. Untick the
files you don’t want to push and click “Okay”. That’s all.
More details bellow:

Note: Selected files will be published.

Any manuals changes made to file will
be overridden

Untick any file you don’t wish to publish.

This is usefully for when you don’t want
to override any file you have manually
edited

You can also modify the application

settings here