PHPRad. PHPRad At a Glance. This tutorial will show you basic functionalities in PHPRad and

Transcription

1 PHPRad PHPRad At a Glance. This tutorial will show you basic functionalities in PHPRad and

2 Getting Started Creating New Project To create new Project. Just click on the button.

3 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.

4 Setting Project Database There are two ways to set project database. Select from existing database Create new database

5 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.

6 Creating New Database Enter the new database name Click Create Database to proceed.

7 Creating Project Database

8 Managing Database Tables

9 New Project Created To preview the project click on the preview tab

10 Preview our project in a browser You can preview the project with default system browser. Just click on Preview in Browser Button

11 PHPRad Designer Overview Project Database Generated Pages for each database table Field Property Page Fields To manage the database view, right click on the menu and select an option Page Properties Component

12 PHPRad Designer Overview Components description Click on the button to update the database Click on the button to synchronize database changes

13 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.

14 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).

15 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.

16 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.

17 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.

18 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.

19 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.

20 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.

21 List page(page Fields) 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. 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 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.

22 View page(page Fields) Use these arrows to re-arrange the fields. To remove a column from your view untick the field here. 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.

23 Add & Edit page(page Fields) Use these arrows to re-arrange the fields. To remove a column from your form untick the field here.

24 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

25 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

26 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 table to add Select join type Select the (Collection) to display this view Fields to match on both tables Use to remove unwanted table from the joined tables Ok to display result on List Page Fields

27 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. Click to open Choose what format you would like to display your pagination. Used to display; Page Count, Record Count, Record Limit respectively, untick to hide from pagination view. Preview Panel Tick to apply settings to all pages of the system. When using Numeric PrevNext, this indicate the number of pages link to display.

28 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.

29 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. Set the display column width Provide code for custom display of record. Set true to make field sortable Set Image display size

30 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

31 Add & Edit Form Controls (Textbox) The Textbox also know as input element can be displayed in several ways, depending on the type(textbox Type) attribute. Choose the display type. E.g. (Password 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.

32 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

33 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.

34 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.

35 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.

36 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.

37 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.

38 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.

39 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

40 Auto Complete Data Source & Option List Data Source Contd Quick List: set of predefined data has been provided. Choose from the drop-down list.

41 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

42 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 Choose the value field, which would be submitted to database Select what field the data should be arranged with Tick this field if you want to enable real time search, such as looking up the value from the database as user begins to type in the select field. Select what order the data should appear: in ascending (ASC) or descending (DESC) order. Use only if the Order By Field has been selected. text to display to users to choose options from Tick to preven display of multiple records

43 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.

44 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. 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, or Username & ) 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 verification or loin after register. Note: Force verification will not work on localhost. Use only when system is hosted on a server.

45 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

46 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.

47 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 Use the New section menu to add rows to a page. User the New Column to add columns to a row in the page This panel represent your page This panel is used to customize each component added to a section

48 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

49 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 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. Resulting View

50 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 Fixed: set to true if you would want the menu not to scroll along with the page contents. Click (Collection) to open the menu configuration windows 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.

51 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).

52 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. Use the query builder to generate SQL statement Set a title. Label Field: Choose the field to use as label for the chart data. Value Field: Choose the field to use as counts for the chart. Click on the (collection) to populate the chart using the pop up window. Or manually enter your SQL statement here Click Okay when done

53 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

54 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

55 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.

56 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

57 Application settings To send mail with the PHP default mail function. Enter/Edit the sender s Enter/Edit the 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 address of the account) Enter/Edit the your /account password Set/edit the host provider of your (for Gmail use : smtp.gmail.com). Set/edit the server port of your provider. (for Gmail use: 465 or 587 for secured connection)

58 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