Using Record Display Page Object
Below are the tutorials for creating front-end page and its functionality using 'Record Display' page object. Let's say, you've created a PC Catalog module and you wish to create a page to showcase your entire products information on your website. |
Create Page Object
|
 |
- Login to your One Admin area and click on the 'PC Catalog' in the module's pane to run module through back-end system. Otherwise, click on the Pro button in the One Admin panel to access Modules Builder Pro and create 'PC Catalog' module.
- Once you have completed step 1, proceed to module's Launch Builder and a page similar to above will prompt out. On this page, select Front-End design area and create a form using 'Record Display' page object.
- Name this page as 'Product Listing', select the existing 'Data' source name (Table's name in the database) in order to select the fields name that you wish to retrieve from the database and display them online.
- Define number of columns per row and number of records per page. If you check the 'Navigator' option box, you're able to browse the entire records easily. Check the 'Search' option to allow you to search records.
|
Using Simple SQL Wizard
|
 |
- Use Simple SQL Wizard to define your records selection from the database or enter your own SQL Clause to retrieve your records selection from the database.
- If you are new with SQL, you can click on the checkbox to select available fields in your database and define your records selection. Let's say, you wish to display a specific data, e.g. name. Therefore, add condition to this field on how you want it to display on your web page.
- Alternatively, you can modify SQL clause to retrieve records from database if you are familiar with SQL query. For your references, click on a list of fields available and view all data source tables.
Tips :
- There is no need to add ' ; ' at the end of your SQL Query.
- Important : To ensure the validity of your SQL Query, you need to update the SQL Query whenever you have modified the fields or made changes to the current table.
|
Design Block
|
 |
- Each record is displayed using a display block. A display block is a collection of HTML codes which will generate repeatedly to display the results.
- Click on the Design Block tab to create your own display layout using HTML editor where you can personalize font colors, insert images and hyperlinks, create tables, etc.
- In helping you to design, click 'Click here for a list of variables' and a page will prompt out. You can also build your own 'Custom Variables' such as using the SQL variables and combine them with additional image and anchor tags.
Tips : Create a new / custom variable to display image.
- Assume the existing variable of image in the Design Block is Photo: {photo}
- Insert values as following:
New Variable: photo_image
Existing Variable: photo
When value exists: <img src="{file_path}/{photo}">
When value doesn't exist: <img src="image/no_pic.gif">
- Replace the {photo} with {photo_image} in the Design Block, e.g: Photo: {photo_image}
- Click on the 'Add' button to add image variables into your block or click 'Delete' to remove them directly.
|
Insert/Edit Links
|
 |
- To insert/edit links on your product display page, click on the Design Block tab.
- In the HTML editor, select the existing variables and click on the 'Insert/Edit Link' icon in the toolbar. Then, enter a complete URL, e.g. 'pccatalog.php?category_id = {id}' or browse through your server. Click on the 'OK' button once you're done.
|
Front-End
|
 |
'Modules Builder Pro' will automatically generate the inclusion code for all the front end's page objects. Copy and paste the codes into a .php file of your client's web page and start running your 'PC Catalog' system. |
|
|
The Improved Version of Modules Builder Pro 4.1
We have released the Modules Builder Pro 4.1 (One Admin Pro) with new enhanced features and the One Admin 4.1 platform has been updated as well. Please refer to our knowledgebase article to download the updates and view the update guidelines.
>> What's new in Modules Builder Pro 4.1
|
Shop with Confidence
|
| • |
Risk Free Trial |
| • |
Free Installation |
| • |
Cost Saving Discount |
| • |
24/7 Secure Ordering |
|
FREE download modules packages, install them and customise features.
Click here >>>
|
|
