Current Version 8.4

Organisation, Files and URLs

 

Prerequisites

We have already completed the "Hello World" exercise and have a responsive design web site at http://localhost/dbnetrd. 

Our developer tools are at: http://localhost/dbnetrd?ac=dev 

The web site's physical folder is at: c:\inetpub\wwwroot\dbnetrd

 

Objective

  • Create two new sections and pages in those sections for your marketing and support groups.  In this exercise we'll understand:  
    • how work folders, urls and pages are related and organised
    • the role of the query string prameter dbpage in targeting pages
    • the locations of supporting resource (res) files (css, fonts etc.)

 

Decide on URLs

In DesignBais, responsive design pages are opened using the query string parameter "dbpage".

A typical responsive design page has the format: http://domain/?dbpage=workfolder-pagename

So our new urls for our marketing and support groups could be:

For the marketing group:

http://localhost/dbnetrd?dbpage=marketing-newproducts 

http://localhost/dbnetrd?dbpage=marketing-upgrades 

http://localhost/dbnetrd?dbpage=marketing-discounts

etc., 

and for the support group:

http://localhost/dbnetrd?dbpage=support-installation

http://localhost/dbnetrd?dbpage=support-releasenotes 

http://localhost/dbnetrd?dbpage=support-manual

etc.. 

Having determined our urls, we'll now implement these in DesignBais.

 

Select your Database Account

Open your developer tools in http://localhost/dbnetrd?ac=dev 

Change account to MARKETING. This is achieved by clicking the Account Selection option on the top menu of the Developer Tools form.

Note that we are using the name MARKETING for the database account in which we wish to develop our application. You can utilise an account of your choice from your development environment. 

Open Responsive Design Form Designer from the side menu.

 

Create Work Folder (marketing)

  • Open Menu > File > Work Folder
  • Click the top folder ("/")
  • Enter "/marketing" in the "Selected" field.
  • Click "Set".

Our "marketing" work folder has been created.  The name of this work folder (i.e. marketing) will appear in our urls as follows:  http://localhost/dbnetrd?dbpage=marketing-pagename

The pages that we create in this work folder will appear in urls after the work folder name:

http://localhost/dbnetrd?dbpage=marketing-pagename

 

Create your first page (newproducts)

We're in our RD Form Designer, our work folder is set to marketing and we have one blank row on the page.  We want to create some HTML text on this page and save the page with tne name "newproducts".

  • Click the blank row to highlight.  Right click > Column > Insert Form Row > Right Click > Form Row > Insert Element > HTML  ..or,
  • Instead of using the right click context menu, you can use the shortcut key CTRL+K to insert an HTML segment into the page.

The inserted HTML segment reads "Lorem ipsum" and it's just a placeholder.

  • Click the words "Lorem ipsum" and click CTRL+Q to edit the html text. Change the text to "New Products" and set its Format to "Heading 1"
  • Save and exit from the HTML editor.

The page is now updated with your changes.  

Save the file:  Menu > File > Save (or ALT+S), enter file name as "newproducts" and save.

Your page has been saved.  You can close the file and open some other time to continue with your work.

Publish the file:  Menu > File > Publish (or ALT+L).  Your page has now been published and ready for data linking in DesignBais Developer Tools.

 

Form Data Links

Switch to your first browser tab (DesignBais Developer Tools), and on the side menu click Responsive Design > Form Data Links.

Select page name "marketing-newproducts" from the dropdown.

Enter the database filename and form name to which the page is to be linked.

This step allows you to define which database fields are to be linked to the form elements that you have created in your new page. If, for example, you have an Input form element on your page in which you want to enter a product id then you can link this input element to the key field of your database product file.

In addition you can define what process will execute in a field change event or a button click event.

You must define a Filename and Form Name even if you do not intend to link any RD form elements to a field in the database. These two fields define the record id of a record stored in DBIFORMS. This record has the same layout as a traditional DesignBais form record and stores the form linking details, field names, field properties and the names of subroutines to be run from various slots such Process After. If no linking details are required then this DBIFORMS record must still exist but will be largely empty.

 

Test Point

We have created a new work folder  named "marketing" and also created a  page named "newproducts" in that work folder.  

Following the general DesignBais RD url format: http://domain/?dbpage=workfolder-pagename, the url of our page should be:

http://localhost/dbnetrd/marketing-newproducts

So open a new tab and navigate to this url and verify that it works.

 

Resource Files

DesignBais creates a number of resource folders for each work folder.  In this example, we've created a work folder named "marketing".   The resource files associated with that work folder are found at:

c:\inetpub\wwwroot\dbnetrd\res\marketing\

  • css
  • fonts
  • images
  • meta

When you deploy your website to another webserver (e.g. live, production) the "marketing" folder is the only folder that you should worry about copying from your development server.  This folder includes all stylesheets, fonts, images and other resources that you need in getting the "marketing" running on your production server.

The role of resource folders is explained in our other blogs.