Using Record Display Page Object
Below are the tutorials for customizing front-end page using 'Record Display' page object. Let's say, you've installed Desktop Computer Catalog module on your 'Modules Builder Lite' and you wish to customize its existing page to showcase the entire products information on your website. |
Edit Page Object
|
 |
- Login to your 'Modules Builder Lite' and run 'Desktop Computer Catalog' module that you've installed. Otherwise, browse to the module's ZIP file on your PC and install it.
- Now, let's proceed to module's Launch Builder and a page similar to above will prompt out. On this page, select Front-End design area and click on the Edit Page Object. Begin your customization by simply select the page you wish to edit, e.g. 'Desktop Listing' page.
- Edit the existing page's name and select Table's name to retrieve records from your database, and select your preferred 'Fields' to display in the front-end web page.
- Define or edit how many columns per row and records to be displayed per page. If you check the 'Navigation' option, you're able to browse through the entire records easily in your front-end. Check the 'Search' option to allow you to search records. Subsequently, save the changes you've made.
|
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 add or edit links on your 'Desktop Listing' 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 - Desktop Listing
|
 |
- Integrate your 'Desktop Listing' page into your website. The inclusion codes have been generated automatically when creating page objects on 'Modules Builder Pro'.
- Therefore, the integration codes will also available when you installed a custom built module with 'Modules Builder Lite'. Copy and paste these codes into a .php file of your web page to display your products catalog.
|
|
|
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 >>>
|
|
