PC SOFT

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Opening project
  • Creating a "form" page
  • Creating the page
  • Creating controls
  • Improving the page
  • Modifying the style of "Login" and "Password" controls
  • Page test
  • Saving the data in a data file
  • Creating the data file
  • Saving data
  • Page test
  • Viewing the data typed
  • Adding input checks
  • Mandatory input
  • Checking the password
  • Simple search in a database
  • Creating the page
  • Creating controls
  • Page test
  • Conclusion
Lesson 1.3. My first pages
This lesson will teach you the following concepts
  • Creating a form page.
  • Saving data.
  • Checking inputs.
  • Simple search in a database.

Estimated time: 30 mn
Previous LessonTable of contentsNext Lesson
Overview
To start developing with WEBDEV, we are going to create pages.

Note

The pages are used to display or type information on the screen. The Web user can directly act on the pages via controls, buttons, ...
These examples will allow you to understand the operating mode of Internet/Intranet sites and will allow you to handle your first database.

Opening project

  • Start WEBDEV 25 (if not already done).
  • Open the "My_First_Pages" project.
    1. Display the WEBDEV home page (Ctrl + <).
    2. Click "Tutorial" and select the project named "My first pages (Exercise)".

      Important!

      		In this part, we will focus on the creation of simple pages. The "My_First_Pages" project is an empty project that was created beforehand.
      The project creation will be presented in another lesson.

      Answer

      		A corrected project is available. This project contains the different pages created in this lesson. To open the corrected project, in the WEBDEV home page, click "Tutorial" and select "My first pages (Answer)".
Creating a "form" page
We are going to create a registration form. This form will contain several controls used to identify the person.

Creating the page

  • To create the page:
    1. Click among the quick access buttons.
    2. The window for creating a new element is displayed. This window is used to create all elements that can be associated with a project.
    3. Click "Page" then "Page". The wizard for page creation starts.
    4. Select "Blank".
    5. Make sure that "Responsive Web Design mode" is unchecked. In this part, we will focus on the creation of simple pages. The pages in Responsive Web Design mode will be presented in Part 8 of this tutorial.
    6. Validate (green button at the bottom of window). The page is automatically created in the editor. The window for saving the page is displayed. This window displays:
      • The page title. This title will be displayed in the title bar of browser.
      • The page name. This name corresponds to the logical page name. This name will be used to handle the page by programming.
      • The location. This location corresponds to directory in which the file corresponding to the page will be saved.
    7. Type the page title: "Form".
    8. The page name (that will be used in programming) is automatically deduced from the page title. If this name does not suit you, you have the ability to modify it and to specify a title that differs from the page name.
    9. Validate (green button).

Note

For each page created in the editor, WEBDEV generates several types of files:
  • A "WWH" file that contains the page description for the page editor. This file is saved in the project directory.
  • An "AWL" file that corresponds to the page description for the WEBDEV engine in the EXE subdirectory of project.
  • An "HTM" file that contains the HTML code and the JavaScript code of the page that will be sent to the browser. This file is saved in the subdirectory "\<Project name>\XX" (one subdirectory per language, for example "UK" for English, "FR" for French, etc.)

Creating controls

Let's create the different form controls. These controls will allow the user to fill the data required for the registration.
The form includes the following controls:
  • Last name.
  • First name.
  • Address.
  • Email.
  • Login.
  • Password.
All these controls are edit controls, allowing the user to type data.
  • To create an edit control:
    1. On the "Creation" pane, in the "Usual controls" group, click .
    2. The control currently created follows the mouse movement.
    3. Click inside the blank page to create the control. The control is created and handles are displayed to indicate that the control is selected.

      Note

      		You must create a control? Display the "Creation" pane of WEBDEV: all available controls are accessible in this pane.
  • To modify the control caption:
    1. Click the control (simple click): the caption becomes editable. If you prefer to use the keyboard, press the Space key or the Enter key in order for the caption to become editable.
    2. Type "Last name" and press Enter to validate. The caption is immediately modified. The control name is also modified: it appears in the tooltip when the control is hovered by the mouse cursor: EDT_Last_name.

Note

Study the control name proposed by WEBDEV: this name starts with "EDT_". This prefix is automatically added because the project is using a programming charter.
The programming charter is used to define a prefix for each type of object, allowing you to quickly identify the element:
  • a page starts with "PAGE_" (we saw it when saving the page).
  • an edit control starts with "EDT_".
  • a button starts with "BTN_", etc.
You have the ability to disable this charter if you don't want to use it: in the ribbon, on the "Project" pane, in the "Other actions" group, expand "Charter" and uncheck "Use the charter".Study the control name proposed by WEBDEV: this name starts with the letters "EDT_". This prefix is automatically added because the project is using a code style.
The code style is used to define a prefix for each type of object, allowing you to quickly identify the element:
  • a page starts with "PAGE_" (we saw it when saving the page).
  • an edit control starts with "EDT_".
  • a button starts with "BTN_", etc.
If you do not want to use this code style, you can simply disable it: in the ribbon, on the "Project" pane, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
  • To modify the detailed control characteristics, all you have to do is double-click the control. A description window of control is displayed:
  • We are going to modify the maximum input size: all you have to do is type the new size (30 in our case) in the "Input size (characters)" control. Several other characteristics can be modified. To save the modifications, click the green validation button.
  • Now, it's your turn. Use the same method to create the following edit controls, below the "Last name" control:
    CaptionTypeSize
    First nameText30
    AddressMulti-line text
    EmailText255
    LoginText10
    PasswordPassword10
You may have noticed that these controls do not have the same type. To modify the type of edit control, display the description window of control.
The form base is created. We are now going to improve it.
Let's see the page that we want to get:
  • The "Address" edit control is used to type several lines.
  • The different edit controls are aligned.
  • The "Login" and "Password" controls have a red caption.

Improving the page

We are going to perform some modifications in the interface of this page.
First of all, let's take a look at the "Address" control. This control must display several lines on the screen. We are going to enlarge it.
Then, we are going to align the controls in the page.
Finally, we will modify the style of "Login" and "Password" controls.
  • To enlarge the "Address" control:
    1. Click the "Address" control.
    2. Handles appear.
    3. With the mouse, grab the handle at the bottom of input area and enlarge the area.
  • This allows you to increase the width of different page controls.
  • To align the controls in the page:
    1. Select the "Last name" control then all edit controls found in the window (hold the Ctrl key down while clicking the different controls).

      Note

      		Caution: the first selected control is essential. Indeed, the alignment options are based on:
      • The size of first selected control: it will be used as reference for the size of other controls.
      • The position of first selected control: all selected controls will be aligned in relation to the first selected control.
    2. Display the "Alignment" pane of WEBDEV menu. This pane contains all alignment options available for the controls.
    3. We want the left and right sides of controls to be aligned. Click "Justify (Ins and Out)".

      Note

      		If you don't know which alignment to choose, hover the different options proposed by the "Alignment" pane of WEBDEV. When an option is hovered by the mouse cursor, the controls selected in the page are automatically positioned according to the hovered option.
      If the positioning suits you, all you have to do is click the option.
      If the positioning does not suit you, all you have to do is click inside the page: the controls move back to their initial position.
    4. Save the page: click among the quick access buttons (or press Ctrl + S).

Modifying the style of "Login" and "Password" controls

To display the caption of "Login" and "Password" controls, we are going to modify the default style associated with these controls.
  • To modify the default style:
    1. Select the "Login" control.
    2. Display the description window of control (double-click the control for example).
    3. In the "Style" tab, select the "Caption (CSS)" element.
    4. Expand the "Color" combo box and select the red color.

      Note

      		This style can be added to the style sheet of project in order to be re-used. To do so:
      1. Click the "Add this style to the project" button in the "WEBDEV style" pane displayed on the right of description window.
      2. Give a name to the style.
      3. Click the "Add" button.
      To re-use the created style and to associate it with another control:
      1. Select the control whose style must be modified.
      2. Display the popup menu of control (right mouse click) and select "Choose a WEBDEV style".
      3. In the window that is displayed, select the requested style and validate.
      Note: Choosing an existing style will be performed in lesson 5.
    5. Validate the description window of "Login" control.
  • To apply the same style to the "Password" control:
    1. Select the "Password" control.
    2. Press the F4 key.

      Note

      		The F4 key is used to apply the last modifications performed to the selected controls. In our case, the change of color is automatically applied to the "Password" control.
    3. You get the following interface:

Page test

  • Run the test of this page (click the icon among the quick access buttons). You have the ability to type data but this data will be neither processed, nor saved.
  • Close the browser.
Saving the data in a data file
When creating a form, the first thing that we want to do is save the data typed. This data can be saved in a text file, in an XML file or even in a database.
We have chosen the last option.
In WEBDEV, the database description is performed in a specific editor, the data model editor. This editor will be presented in details in the next section.
In this example, we are going to define the database linked to the created controls via a straightforward feature: the reverse engineering.

Creating the data file

  • To automatically create the data file:
    1. In the ribbon, on the "Page" pane, in the "Edit" group, expand "Other actions" and select "Generate a file description".
    2. A new editor appears: the data model editor. The data model editor contains the description of all data files that will be used by the project.
    3. The wizard for generating a data file starts.
    4. The name of the data file is automatically filled with the page name. We are now going to modify some elements:
      • Type "Registration" in the name.
      • Type "Registration" in the caption.
      • Type "a registration" in the last control.
    5. Go to the next step (yellow arrow at the bottom of wizard).
    6. Choose the controls to retrieve. In our case, all page controls correspond to an item.
    7. Go to the next step.
    8. This step is used to define the keys (also called indexes).

      Note

      		A key provides faster access during the searches (key with duplicates) and/or insures that the value of an item can be saved once only (unique key).
    9. In this example, the "Last_name" item will be a key with duplicates and the "Login" item will be a unique key. Therefore, the data file can contain two people with the same name but not with the same login.
    10. Go to the next step.
    11. Validate the summary. The file description appears in the data model editor.
    12. Save the analysis: click among the quick access buttons (or press Ctrl + S).
    13. Close the data model editor.
    14. A window is displayed, proposing to synchronize the project. It is used to check the differences between the created pages and the data defined in the analysis. This step is performed whenever the analysis is modified, when going back to the project pages.
    15. Click "Yes".
Let's not spend more time on the data model editor. It will be presented in details in an another lesson.

Saving data

  • Let's go back to the registration form in order to implement the addition of data typed by the Web user in the data file. The document bar is found at the bottom of editor. In this bar, a button is displayed for each document opened in the editor.
    • "P" represents the project.
    • "PAGE_Form" represents the "Form" page.
  • A button is required to save the data from our form. This button will be used to validate the information entered in the page and to save the data in the Registration data file.
  • To create a Button control:
    1. On the "Creation" pane, in the "Usual controls" group, click .
    2. The control currently created follows the mouse movement.
    3. Click inside the page to create the button (below the edit controls for example). The control is created.
    4. Press the space bar: the caption becomes editable.
    5. Type "Save".
    6. Press Enter to validate.
  • To type the code associated with the button:
    1. Display the popup menu of the control and select "Code" (or press the F2 key).
    2. The events associated with the button are displayed. Yellow codes correspond to the events performed on the server, and green codes correspond to the events performed on the browser.
    3. We want to save data in the database. The access to the database can be performed in Server code only: therefore, the code must be typed in the Server click code (yellow).
    4. Write the following code:
      PageToFile()
      HAdd(Registration)
      Info("Record successfully added.")
    5. Let's study this code:
      • PageToFile is used to retrieve the content of the edit controls found in the page in order to transfer it to the data file.
      • HAdd is used to write the transferred data into the data file.
      • Info is used to display a message.
    6. Save (Ctrl + S) and close the code editor (cross in the top right corner).

Page test

  • Run the test of this page:
    1. Click the icon among the quick access buttons.
    2. Type the following data:
      • Last name: Doe
      • First name: John
      • Address: Flower Rd, 75000 Paris
      • Email: john.doe@atandt.com
      • Login: john
      • Password: john
    3. Click on "Save". The browser displays a message indicating that the record is added!
    4. Close the browser.

Viewing the data typed

WEBDEV proposes a tool used to see the content of data files while developing the site (when the viewing pages have not been created yet for example).
This tool is named WDMap. We are going to use it in order to check whether the information typed was saved.
  • To start WDMap:
    1. In the ribbon, on the "Tools" pane, in the "Database" group, click "WDMap".
    2. Select the "Registration" data file. The data file content is displayed.
    3. We can find the data typed.
    4. Close WDMap ("Close" button).
Adding input checks
We are now going to improve our form by adding input checks. We are going to:
  • force the Web user to type the last name, email and login.
  • force the password to be typed twice in order to check it.

Mandatory input

  • Go back (if necessary) to the "PAGE_Form" page by clicking its name in the bar of opened documents.
  • To force the input in the "Last name" control:
    1. Double-click the "Last name" control: the description window of control is displayed.
    2. Display the "Details" pane.
    3. Check "Mandatory input". If this option is checked, WEBDEV will automatically check whether this edit control was filled.
    4. Validate the description window.
  • To apply this modification to the "Email" control:
    1. Select the "Email" control (mouse click).
    2. Press the F4 key: the last action performed on a control is re-run on the selected control.
  • Similarly, apply this modification to the "Login" control.
  • Run the test of this page:
    1. Click the icon among the quick access buttons.
    2. In the window that is displayed, click the "Save" button.
    3. An information box is automatically displayed to indicate that mandatory controls have not been filled.
    4. Validate the information box.
    5. Close the browser.

Checking the password

To check the password, we are going to create the edit control allowing the user to type his password twice. Then, we are going to type the code required for the check.
  • Create a new edit control. The caption of this control is "Check" and its type is "Password".
  • The code for checking the password must be typed in the events associated with the "Save" button.
    1. Click the "Save" button and press the F2 key.
    2. This check consists in comparing the value typed in the "Password" control and the one typed in the "Check" control. The server is not required to perform this check: it can be performed locally in the browser.
    3. We are going to type the following code in the browser "Click" event:
      IF EDT_Password<>EDT_Check THEN
      Info("Error, the passwords are different.")
      EDT_Password = ""
      EDT_Check = ""
      ReturnToCapture(EDT_Password)
      END
    4. Let's study this code:
      • The IF statement is used to perform an action on a condition. In our case, the action is performed if the "Password" and "Check" controls are different ('<>' operator).
      • In case of difference, the edit controls are "cleared": an empty string is assigned to them.
      • ReturnToCapture is used to position the cursor in the specified control (the "Password" control here) without running the code that follows. In our case, if the passwords typed are different, the "Password" control takes focus and the process is stopped: the server code that is used to save the information in the database will not be run.
  • Run the test of this page:
    1. Click the icon among the quick access buttons.
    2. Type the following information:
      • Last name: "Doe"
      • First name: "Peter"
      • Email: "Peter.Doe@gmail.com"
      • Login: "Peter"
      • Password: "Peter"
      • Check: "Louis"
    3. Click the "Save" button.
    4. An error message is automatically displayed to indicate that the passwords are different.
    5. Validate this message.
    6. Close the browser.
Simple search in a database
We have seen how to create an input form and how to save values in a database. Let's continue our first WEBDEV discovery by performing a search in the database.
We are going to create a login page where the login and the password will be typed. Then, we will check whether the information typed is correct.

Creating the page

  • To create the page:
    1. Click among the quick access buttons.
    2. The window for creating a new element is displayed: click "Page" then "Page". The wizard for page creation starts.
    3. Click "Page" then "Page". The wizard for page creation starts.
    4. Select "Blank".
    5. Make sure that "Responsive Web Design mode" is unchecked.
    6. Validate.
    7. The page is created and the save window is automatically displayed.
    8. Type the page title: "Login".
    9. Validate.

Creating controls

The login page will contain the following controls:
  • Two edit controls:
    • "Login" to type the login.
    • "Password" to type the password.
  • Two buttons:
    • "Connect" to check the login and password.
    • "Register" to open the registration page (that was created beforehand).
These types of controls have already been created, let's see a reminder of operations to perform:
  • To create an edit control:
    1. On the "Creation" pane, in the "Usual controls" group, click .
    2. Click inside the blank page to create the control.
    3. Click the control (simple click): the caption becomes editable.
    4. Type the caption ("Login" and "Password") and press Enter to validate. The caption is immediately modified.

      Note

      		The type of "Password" control must be "Password". To modify the type of edit control, display the description window of control.
  • To create a Button control:
    1. On the "Creation" pane, in the "Usual controls" group, click .
    2. Click inside the page to create the button (below the edit controls for example). The control is created.
    3. Press the space bar: the caption becomes editable.
    4. Type the caption ("Connect" and "Register") and press Enter to validate. The caption is immediately modified.
  • You get the following page:
  • Now let's see the operating mode of buttons. First, let's take a look at the "Register" button.
    1. Select the "Register" button.
    2. Display the description window of button (double-click the control).
    3. In the "General" tab, in the "Button action" area, we are going to specify the action to perform. In our case, we are going to open the registration page:
      • In the "Type" area, select "Display a page of the site".
      • In the "Page" area, select "PAGE_Form".
    4. Validate the description window.

      Note

      		No code is required: in the editor, the button is associated with the action to perform (opening a page in this case).
  • For the "Connect" button, we must type the WLanguage code required to perform the search:
    1. Select the "Connect" button and display the associated events (F2).
    2. Enter the following code in the "Click (server)" event:
      HReadSeekFirst(Registration, Login, EDT_Login)
      IF NOT HFound(Registration) THEN
      Error("Unknown login.")
      ELSE
      IF EDT_Password = Registration.Password THEN
      Info("OK, you are connected.")
      ELSE
      Error("Incorrect password.")
      END
      END
    3. Let's study this code:
      • This code is run in server code because a search is performed in the database that is located on the server.
      • HReadSeekFirst is used to find a value in a data file. The search is performed on the entire name by default. To perform a "Starts with" search, all you have to do is add a parameter: the hStartWith constant.
      • HFound is used to find out whether the search performed in the Registration data file was successful or not. The "IF NOT HFound" code is used to define the action to perform if the login is not found ("Login not found") as well as the action to perform if the login is found.
      • If the login is found, the password typed in the EDT_Password control is compared to the one found in the data file (for the specified login). If the two passwords are the same, then the user is connected, otherwise an error message is displayed.

        Note

        		The code presented here is for educational purpose. In a real project:
        • The password must not be stored in clear. We advise you to encrypt the password.
        • We advise you to display the same error message in case of incorrect login or password (to avoid an attempt to hack the logins).
    4. Save (Ctrl + S) and close the code editor (cross in the top right corner).

Page test

  • Run the test of this page:
    1. Click the icon among the quick access buttons.
    2. Type the following data:
      • Login: john
      • Password: polo1
    3. Click the "Connect" button. An error message is displayed.
    4. Validate the message and modify the password: "polo".
    5. Click the "Connect" button. You are connected.
    6. Close the browser.
Conclusion
By creating two pages only, we have discovered several WEBDEV features:
  • the creation of controls: edit controls and buttons,
  • the possibilities for aligning and organizing controls in the page,
  • the addition of records into data files,
  • the sequence of pages,
  • the search for record in the data files,
  • the use of server code and browser code.
  • ...
After this overview, we will go into more details in the next section, especially regarding the analysis and the definition of database characteristics before explaining how to develop a full site.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment