ONLINE HELP
 WINDEV, WEBDEV AND WINDEV MOBILE
New WEBDEV 2025 feature!
Help / WEBDEV Tutorial / Tutorial - WEBDEV overview
Subscribe
  • Lesson 2 - Web development and WEBDEV
  • Principle of Browser/Server
  • How does it work?
  • What about WEBDEV?
  • Practical example
  • 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. This means 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 uses two types of code: code on the server side and code on the browser side.
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.
Practical example
To better understand the difference between server and browser events, we have prepared a simple example:
  1. On the home page, click "Tutorial", then in "Tutorial - WEBDEV overview", click "Open exercise project".
    If UAC is enabled, a specific window may appear. This window indicates that the WD300Admin.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 to open the code editor. The WLanguage events of the Button control are displayed with the associated code.
    Button control events
Let's see the WLanguage code displayed:
  • The Button control has three events: Initialization, click on the browser side and click on the server side.
  • 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 avoids unnecessary server requests, reduces waiting times and improves 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).
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 2025
Comments
Click [Add] to post a comment

Last update: 11/27/2024

Send a report | Local help