PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Principle of Browser/Server
  • How does it work?
  • And in WEBDEV?
  • Practical example
  • Intranet/Extranet/Internet
  • Principle
  • And in WEBDEV? (Classic/AWP, PHP, Static)
  • Practical example
  • The method for creating a site
Lesson 1.2. The Web development and WEBDEV
This lesson will teach you the following concepts
  • Principle of Browser/Server.
  • Intranet/Extranet/Internet.

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Principle of Browser/Server

How does it work?

An Internet or intranet site operates as follows:
  • The client (the Web user) is using a browser to access the site.
  • The browser sends a request to the server that is hosting the requested site. In this request, it indicates the page that must be displayed and different parameters allowing the server to build the corresponding page.
  • The server receives this request, processes it and returns the corresponding "HTML" page. HTML (HyperText Markup Language) is the language used by all browsers to display the Web pages.
Therefore, there are two types of events:
  • Events run at browser level, on the Web user's computer.
  • Events run at server level.
The code run at browser level is called JavaScript code. The browsers can only run JavaScript code.

And in WEBDEV?

With WEBDEV, everything is developed:
  • in WYSIWYG ("What You See Is What You Get") in the editor: your pages are visually identical in creation and at run time.
  • in WLanguage for the programming side.
WEBDEV converts your page created in the editor into HTML page that can be read by the browsers.
The server code is run in WLanguage.
The browser code is converted into JavaScript.
To create a site with WEBDEV, a single language is required: WLanguage.
However, two types of code are available: server code and browser code.
Why this distinction between server/browser? For performance reasons. Indeed, between the browser and the server stands Internet, with its response time, latency, ... Some simple operations can be performed on the browser directly, without having to go back to the server.

Practical example

  • To better understand the difference between server and browser events, we have prepared a simple example:
    1. Start WEBDEV 23 (if not already done). Display (if necessary) the WEBDEV home window: press Ctrl + <.
    2. Open the "WEBDEV concepts" project. To do so, in the home window, click "Tutorial" and select the project named "WEBDEV concepts (Exercise)".

      Tip

      If the home window is not displayed, on the "Home" pane, in the "Online help" group, expand "Tutorial" and select "WEBDEV concepts (Exercise)".
      All projects found in the tutorial are available from this menu.

      Note

      If the UAC is enabled in Windows, a specific window may be displayed. This window indicates that the WD230Admin.exe program will be run on the current computer. Grant the authorization. This program corresponds to the local WEBDEV administrator that is used to run the test of sites developed with WEBDEV. Its features will be presented later in this tutorial.
  • Open the "PAGE_Registration" page in the editor: double-click its name in the project explorer.

    Note

    The project explorer is used to display in the environment the list of all elements found in the project. These elements are grouped by theme: Pages, Procedures, ...
    To display the project explorer:
    1. On the "Home" pane, in the "Environment" group, expand "Panes".
    2. In the list of panes that is displayed, select "Project explorer".
Page in the editor
  • This page contains edit controls and a "Register" button. The "Register" button must perform two things:
    1. Check that all controls have been filled.
    2. Save the values of controls in the database.
  • Let's see the code associated with the button:
    1. Select the "Register" button.
    2. Display the popup menu of button (right mouse click) and select "Code".
    3. The code editor is displayed with the different events linked to the Button control. To see all processes associated with the button, press the Page Up key.
      Events associated with the button

Note

The code editor allows you to write the code of your processes.
The code editor presents the events associated with each control, which means the events on which a specific process can be run.
Note: Events are displayed in the order in which they will be run.
For example, the events associated with the Button control are:
  • Initialization.
  • Browser click.
  • Server click.
  • Let's study the code displayed: the server code and the browser code are identified by different colors:
    • The browser code, that will be run on the computer of Web user, is displayed in green.
    • The server code, that will be run on the server, is displayed in yellow.
In our example, all input checks are performed in browser code (green code). For example, the EDT_LastName control must not be empty. The corresponding code is as follows:
// Check whether the "EDT_LastName" control is equal to empty string
// (excluding spaces and punctuation)
IF EDT_LastName ~= "" THEN
// The control is empty, display an error message to
 // the user
Error("Type your last name")
// Return in edit into the "EDT_LastName" control (without running
// the rest of code)
ReturnToCapture(EDT_LastName)
END

This check is performed in browser code because there is no need to go back to the server to check that the controls are filled.
This is used to avoid useless round trips and to reduce the wait for the Web user: the navigation is more fluid.
Once the browser code was run, the page sends the values typed to the server. Then, the server runs the server code. In the server code, you have the ability to process the information received.
In our example, the information received is added into the database via the following code:
// Reset the customer structure
HReset(Customer)
 
// Get the values of controls in
// the customer structure
ScreenToFile()
 
// Add the customer into the database
HAdd(Customer)
This operation cannot be performed in browser code because the database is common to all site users and therefore it is located on the server.
  • Close the code window (click the cross in the top right corner).
  • Close the page displayed in the editor (click the cross in the top right corner).
Intranet/Extranet/Internet

Principle

An Intranet or Extranet site is often considered as being a management application in Web mode, which means an application run in a browser.
This Web application can present:
  • business features intended for specific users,
  • processes that must be secured: not everyone should be able to access the application
The Web application can be accessed:
  • from a company network only, in which case we talk of Intranet site.
  • from Internet, in which case we talk of Extranet site.
In both cases, the Web application is secured by managing logins, passwords, rights, etc.
An Internet site is a site meant for "public" consumption (business users or regular users). An Internet site must be easily found on the Web. Some examples: presentation site, e-commerce site, ...
To bring more Web users to your site, the site must be referenced by the search engines. In order for the search engines to reference each page properly, an additional constraint appears: the site pages must be accessible at any time. But this constraint is also a guarantee of simplicity for the Web user: he can easily copy/paste a link from a page and re-use this link whenever required.

And in WEBDEV? (Classic/AWP, PHP, Static)

In WEBDEV, to develop an Intranet or Extranet site, the "classic" mode is more suitable because it includes the following features: integrated security, automatic contexts. Indeed, the classic mode includes automatic sessions. The session identifier is included in the URL. The address for the pages depends on this identifier which changes for each connection.
Drawback: The search engines cannot index this site.
In WEBDEV, to develop an Internet site, you can choose one of the following modes:
  • The AWP mode (Active WEBDEV Page).
  • The PHP generation mode.
  • The static mode if your site contains preset pages only (no database).

Practical example

  • First of all, let's see the operating mode of an Internet page:
    1. In the "WEBDEV_Concepts" project (that was opened at the beginning of this lesson), open the "PAGE_Internet" page in the editor: double-click its name in the project explorer.

      Tip

      To quickly find a page in the current project, press Ctrl + E. A window is displayed, allowing you to perform a search on all pages containing the set of letters typed in the search area. All you have to do is select the requested page and validate in order for this page to be opened in the editor.
    2. Let's check the page type:
      • On the "Page" pane, in the "Description" group, click "Description" (you can also select "Description" from the popup menu of the page).
      • In the "General" tab, the page is defined as a dynamic page with a generation in AWP mode.
        'General' tab of the page
      • Validate the page description window.
    3. Run the test of this page: click the Page Go icon among the quick access buttons.
    4. The page is displayed in your default browser.
    5. Study the address displayed in the browser: this page has a fixed address. If you copy this address and if you paste it in a new browser, the same page will be displayed!
      Fixed address
    6. Close the browser.
  • Now, let's check the behavior of an Intranet page:
    1. Open the "Page_Home_of_Intranet_site" page in the editor: double-click its name in the project explorer.
    2. Let's check the page type:
      • On the "Page" pane, in the "Description" group, click "Description" (you can also select "Description" from the popup menu of the page).
      • In the "General" tab, the page is defined as a dynamic page without generation in AWP mode. This type of page is used in Intranet/Extranet mode.
    3. Run the test of this page: click the Page Go icon among the quick access buttons.
    4. The page is displayed in the browser.
    5. Study the address displayed in the browser. The URL has the following format: http://localhost/WEBDEV_Concepts/CONNECT_TESTMODE/<Connection Identifier> where <Connection Identifier> is a string that changes at each connection. The address changes at each connection therefore the security is improved. However, this behavior is not compatible with a referenceable site.
      Non-fixed address
    6. Close the browser.
The method for creating a site
Now that the main Web concepts have been presented, let's see how to develop a WEBDEV site.
To create a site with WEBDEV, use the following method:
  • Creating the site model:
    • Model of pages (user experience).
    • Definition of CSS styles (if necessary).
    • Designing the database structure.
  • Development in WEBDEV:
    • Creating a project that groups all the site elements.
    • Creating the page templates that will define the site style. These templates are based on the model of pages, the CSS styles and the WEBDEV styles.
    • Defining the database (Analysis), that can re-use an existing structure.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 23
Comments
Click [Add] to post a comment