|
|
- In this lesson you will learn the following concepts
- Principle of Browser/Server
- How does it work?
- And in WEBDEV?
- Practical example
- Intranet/Extranet/Internet
- Principle
- And in WEBDEV? (Session/AWP, PHP, Static)
- Practical example
- Method to create a site
Lesson 1.2. Web development and WEBDEV In this lesson you will learn the following concepts - Principle of Browser/Server.
- Intranet/Extranet/Internet.
Principle of Browser/Server How does it work? An Internet or Intranet site works as follows: - The client (the Web user) uses a browser to access the site.
- The browser sends a request to the server that hosts the site. 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 run at browser level, on the user's computer.
- Events run at server level.
The code run at browser level is called JavaScript code. 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 when being created and at runtime.
- in WLanguage (code).
WEBDEV converts the page you created in the editor to an HTML page that can be read by the browsers. The server code is run in WLanguage. The browser code is converted to 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. 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:
- Start WEBDEV 28. Go to the WEBDEV home page if necessary: press Ctrl + <.
- Open the "WEBDEV concepts" project. To do so, in the home page click "Tutorial", then in "Part 1 - Lesson 1.2 - Web development and WEBDEV", double-click "WEBDEV concepts - Exercise".
| | |  | Note | If the UAC is enabled in Windows, a specific window may be displayed. This window indicates that the WD280Admin.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 the 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" pane.
| | | | Note | The "Project explorer" pane in the environment shows a list of all the elements in the project. These elements are grouped by theme: Pages, Procedures, etc. To open the "Project explorer" pane: - On the "Home" tab, in the "Environment" group, expand "Panes".
- In the list of panes that is displayed, select "Project explorer".
|
- This page contains Edit controls and a "REGISTER" Button control. The "REGISTER" Button control must do two things:
- Check that all controls have been filled.
- Save the values of controls in the database.
- Let's see the WLanguage code associated with the Button control:
- Select the "Register" Button control.
- Right-click the control and select "Code" in the context menu.
- The code editor is displayed with the different events linked to the Button control. To see all the events associated with the Button control, press the Page Up key.
| | | | Note | The code editor allows you to write the WLanguage 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.
Remark: 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 take a closer look at the WLanguage code displayed: the server code and the browser code are identified by different colors:
- The browser code, that will be run on the end user computer, 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 empty
// (excluding spaces and punctuation)
IF EDT_LastName ~= "" THEN
// If the control is empty, display an error message to the user
Error("Enter your last name")
// The "EDT_LastName" control gains focus again (without running the rest of the code)
SetFocusAndReturnToUserInput(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 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:
// Reset the customer structure
Customer.Reset()
// Retrieve the values of controls in the customer structure directly
MyPage.ToFile()
// Add the customer to the database
Customer.Add()
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 "X" in the upper-right corner).
- Close the page displayed in the editor (click "X" in the upper-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, i.e., an Intranet site.
- from Internet, i.e., an Extranet site.
In both cases, the Web application is secured with usernames, passwords, permissions, etc. An Internet site is a site meant for "public" use (regular or professional users).
An Internet site must be easily found on the Web. For example: presentation site, e-commerce site, etc. To drive more traffic to your website, it must be optimized by search engines. There is an additional constraint if you want to use SEO correctly on each page: the site pages must be accessible at any time. But this constraint is also a guarantee of simplicity for Internet users: they can easily copy/paste a link from a page and use it whenever required. And in WEBDEV? (Session/AWP, PHP, Static) In WEBDEV, to develop an Intranet or Extranet site, the "Session" mode is more suitable because it includes the following features: integrated security and automatic contexts.
The Session mode includes automatic sessions. The session identifier is included in the URL. The address of the pages depends on this identifier, which changes at each connection. Drawback: 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).
| | | | Note | WEBDEV also includes a Session mode to create SEO-ready pages, each with its own URL. There are many advantages of having an SEO-ready page:- The page can be ranked among Google search results,
- This page has a fixed URL, which can be copied, emailed and set as a bookmark,
- There is no timeout to access this page,
For more details, see SEO-ready page in session mode. |
Practical example - First, we will see how an Internet page works:
- 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" pane.
| | |  | 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. Simply select the desired page and validate to open it in the editor. |
- Let's check the page type:
- On the "Page" tab, in the "Description" group, click "Description" (you can also select "Description" in the context menu of the page).
- In the "General" tab, the page is in AWP mode.
- Validate the page description window.
- Test this page: click
 in the quick access buttons. - The page is displayed in your default browser.
- Notice the address displayed in the browser: the page has a fixed address. If you copy and paste the address in a new browser, the same page will be displayed!
Remark: if you use the IIS Express Web server, "localhost" can be followed by the port number. - Close the browser that displays the test page.
- Now, let's see the behavior of an Intranet page:
- Open "PAGE_Home_of_Intranet_site" in the editor: double-click its name in the "Project explorer" pane.
- Let's check the page type:
- On the "Page" tab, in the "Description" group, click "Description" (you can also select "Description" in the context menu of the page).
- In the "General" tab, the page is in session mode, a mode for Intranet/Extranet sites.
- Test this page: click in the quick access buttons.
- The page is displayed in the browser.
- Notice 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, which improves security. However, this behavior is not compatible with SEO ready-sites.
Remark: if you use the IIS Express Web server, "localhost" can be followed by the port number. - Close the browser.
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).
- Defining the 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.
|
|
|
|
|
|
|