|
|
|
|
- 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 overviewLesson 2 - Web development and WEBDEV We will cover the following topics: - Principle of Browser/Server.
- How to create a website.
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.
To better understand the difference between server and browser events, we have prepared a simple example: - 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. - Open the "PAGE_Product_form" page in the editor:
- In the "Project explorer" pane, expand "Pages" then "Administration_pages".
- Double-click "PAGE_Product_form".
- The page is displayed in the editor.
This page is a form used to create and edit products.
Scroll down the page.
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: - Select the "OK" button. Blue handles appear around the control.
- Press F2: the code editor appears. The WLanguage events of the Button control are displayed with the associated code.
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:
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. 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.
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: - On the "Home" tab, in the "General" group, expand "Close" and select "Close project".
- Save changes if necessary.
The WEBDEV home page appears.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|