ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - WEBDEV overview
  • Lesson 2 - Web development and WEBDEV
  • Principle of Browser/Server
  • How does it work?
  • What about WEBDEV?
  • Practical example
  • How to create a website
  • To sum up

Tutorial - WEBDEV overview

Lesson 2 - Web development and WEBDEV
We will cover the following topics:
  • Principle of Browser/Server.
  • How to create a website.
Durée de la leçon 10 min
Principle of Browser/Server

How does it work?

An Internet or Intranet site works as follows:
  • The client (user) uses a browser to access the website.
  • The browser sends a request to the server that hosts the website. In this request, it indicates the page that must be displayed and the different parameters that allow 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 web pages.
Therefore, there are two types of events:
  • Events executed on the browser side, on the user's computer.
  • Events executed on the server side.
The code executed on the browser side is JavaScript. Browsers can only execute JavaScript code.

What about WEBDEV?

With WEBDEV, everything is developed:
  • in a WYSIWYG ("What You See Is What You Get") editor: the content of your pages appears in the editor exactly as it will look in the final output.
  • in WLanguage code.
WEBDEV converts the page you created in the editor to an HTML page that can be read by the browsers.
The events executed on the server side are written in WLanguage.
The events executed on the browser side are written in WLanguage and converted to Javascript.
To create a WEBDEV website, you only need to develop in WLanguage.
WEBDEV supports two types of code: server code and browser code.
The distinction between server and browser is made for performance reasons. The Internet connection stands between the browser and the server, which implies response times, latency, etc. Some simple operations can be performed directly on the browser, without returning to the server.
Server/Browser operations of a WEBDEV website
Practical example
To better understand the difference between server and browser events, we have prepared a simple example:
  1. From the WEBDEV home page, open the "Full_WEBDEV_Site" project: click "Tutorial", then in "Tutorial - Discover WEBDEV (Lesson 1 and 2)", double-click "Full WEBDEV Site - Answers".
    If UAC is enabled, a specific window may appear. This window indicates that the WD290Admin.exe program will be run on the current computer. Grant the authorization. This program corresponds to the local WEBDEV administrator that is used to test websites developed with WEBDEV. Its features will be presented later in this tutorial.
  2. Open the "PAGE_Product_form" page in the editor:
    • In the "Project explorer" pane, expand "Pages" then "Administration_pages".
    • Double-click "PAGE_Product_form".
  3. The page is displayed in the editor.
    Page in the editor
    This page is a form used to create and edit products.
Scroll down the page.
Page in the editor
This page contains Edit controls and an "OK" button at the bottom.
The "OK" Button control must do two things:
  • Check that all required fields have been filled.
  • Save the values from the controls to the database.
These actions are executed in the code of the button.
Code of the "OK" button:
  1. Select the "OK" button. Blue handles appear around the control.
  2. Press F2: the code editor appears. The WLanguage events of the Button control are displayed with the associated code.
    Button control events
Let's see the WLanguage code displayed:
  • The events associated with the Button control are: Initialization, onclick browser and server.
  • The different types of code are identified using colors:
    • The browser code, that will be executed on the end user computer, has a green header.
    • The server code, which will be executed on the server, has a yellow header.
In our example, all input checks are performed in browser code (green header). For example, the EDT_Reference control must not be empty. The corresponding code is as follows:
Click on BTN_OK (onclick browser event)
IF EDT_Reference ~= "" THEN
Error("Enter a reference.")
SetFocusAndReturnToUserInput(EDT_Reference)
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 waiting times: this improves the website navigation.
Once the browser code has been run, the page sends the values entered 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 to the database via the following code:
Click on BTN_OK (server)
PageToFile()
IF ImagePath<>"" THEN
Product.Visual = fLoadBuffer(ImagePath)
END
IF Product..NewRecord THEN
Product.Add()
ELSE
Product.Modify()
END
PAGE_List_of_products.Display()

This operation cannot be performed in browser code because the database is common to all website users and is located on the server.
Warning
We won't go into detail about the WLanguage code used in this lesson. We will use this example again in Create a WEBDEV website (back office and front office).
How to create a website
Now that we have covered the main web concepts, let's see how to design a WEBDEV website.
To create a WEBDEV website, follow the method below:
  • Design the website:
    • Page design (user experience).
    • Definition of CSS styles (if necessary).
    • Database structure design.
  • Develop the website in WEBDEV:
    • Creation of a project that groups all the elements of the website.
    • Creation of page templates, which will define the style of the website. These templates are based on the page design, CSS styles and WEBDEV styles.
    • Definition of a database (Data model), which can be based on an existing structure.
How to create a website
To sum up
We have covered the essentials of a website. We opened a project and saw the different types of code available. In the next tutorial, you will be able to create your first website.
We have completed this lesson. Don't forget to close the current project:
  1. On the "Home" tab, in the "General" group, expand "Close" and select "Close project".
  2. Save changes if necessary.
The WEBDEV home page appears.
Previous LessonTable of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/14/2023

Send a report | Local help