PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WEBDEV 27 feature!
  • In this lesson you will learn the following concepts
  • Overview
  • Opening the project
  • Creating a "form" page
  • Creating the page
  • Creating controls
  • Page improvements
  • Modifying the style of the "Username" 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
  • Required input
  • Password verification
  • Simple search in a database
  • Creating the page
  • Creating controls
  • Page test
  • Conclusion
Lesson 1.3. My first pages
In this lesson you will learn the following concepts
  • Creating a form page.
  • Saving data.
  • Checking inputs.
  • Simple search in a database.
Lesson duration

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

Note

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

Opening the project

  • Start WEBDEV 27.
  • Open the "My_First_Pages" project.
    1. Go to the WEBDEV home page (Ctrl + <).
    2. Click "Tutorial", then in "Part 1 - Lesson 1.3 - My first pages", double-click "My first pages (Exercise)".

Important!

In this part, we will focus on the creation of simple pages. "My_first_pages" is an empty project that has been created previously.
In another lesson, we will see how to create a project.

Answers

A corrected project is available. This project contains the different pages created in this lesson. To open the corrected project, go to the WEBDEV home page and click "Tutorial", then in "Part 1 - Lesson 1.3 - My first pages", double-click "My first pages (Answers)".
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 Creation button in the quick access buttons.
      Creation button (quick access buttons)
    2. The creation window appears. This window is used to create all elements that can be associated with a project.
    3. Click "Page" then "Page". The page creation wizard starts.
    4. Select "Blank".
      Creating a page
    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 ("OK" button). The page is automatically created in the editor. The page save window appears. This window displays:
      • The page title. This title will be displayed in the browser title bar.
      • The page name. This name corresponds to the logical page name. This name will be used to handle the page through programming.
      • The location. This location corresponds to directory in which the file corresponding to the page will be saved.
    7. Enter the page title: "Form".
      Save page
    8. The page name (that will be used in programming) is automatically built from the page title. If you want to choose another name, you can change it and enter a title different from the page name.
    9. Validate ("OK" 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 the 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 "\<Project name>_WEB\XX" subdirectory (one subdirectory per language, for example "US" for English, "ES" for Spanish, 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.
  • Username.
  • Password.
All these controls are edit controls, allowing the user to type data.
  • To create an edit control:
    1. On the "Creation" tab, in the "Usual controls" group, click Create an edit control.
      Creating an edit control
    2. The new control follows the mouse cursor.
    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

      Do you want to create a control? Go to the WEBDEV "Creation" tab: in this tab you will be able to access all available controls.
  • To modify the control caption:
    1. Click the control (simple click): the text can be edited. If you prefer to use the keyboard, press Space or Enter to edit the text.
      Caption of an edit control in edit mode
    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 hovering over the control: EDT_Last_name.
      Tooltip of an edit control

Note

Let's analyze the name proposed by WEBDEV: it starts with the letters "EDT_". This prefix is automatically added because the project uses 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" tab, in the "Other actions" group, expand "Code style" and uncheck "Use code style".
  • Simply double-click the control to edit its characteristics. A control description window appears:
    Edit control description
  • We are going to modify the maximum input size: simply enter the new size (30 in our case) in "Input size (characters)". Several other characteristics can be modified. Click "OK" to save changes.
  • Now, it's your turn. Use the same method to create the following edit controls, below the "Last name" control:
    CaptionTypeSize
    First nameText30
    AddressMultiline text
    EmailText255
    UsernameText10
    PasswordPassword10
You may have noticed that these controls do not have the same type. To modify the type of the edit control, simply open the description window.
Edit control description (Available types)
The form base is created. We are now going to improve it.
Let's see the page that we want to get:
Form
  • The "Address" edit control is used to type several lines.
  • The different edit controls are aligned.
  • The "Username" and "Password" controls have a red text.

Page improvements

We are going to make some changes to 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 the "Username" 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 the first selected control: it will be used as reference for the size of other controls.
      • The position of the first selected control: all selected controls will be aligned in relation to the first selected control.
    2. Go to the "Alignment" tab of the WEBDEV menu. This tab contains all alignment options available for the controls.
      Alignment options
    3. We will align the left and right sides of the controls. Click "Justify (Ins and Out)".

      Note

      If you don't know which alignment to choose, hover over the different options available in the "Alignment" tab. When an option is hovered by the mouse cursor, the controls selected in the page are automatically positioned according to the hovered option.
      To apply the alignment, click the desired 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 Save an element in the quick access buttons (or press Ctrl + S).

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

To show the text of the "Username" and "Password" controls in red, we will change the default style associated with these controls.

  • To modify the default style:
    1. Select the "Username" control.
    2. Open the control description window (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.
      Style of a control

      Note

      To reuse this style, it can be added to the project style sheet. To do so:
      1. Click "Add this style to the project" in the "WEBDEV style" pane on the right of the description window.
      2. Give a name to the style.
      3. Click the "Add" button.
        Adding a style
      To re-use the created style and to associate it with another control:
      1. Select the control whose style must be modified.
      2. Open the context menu of the control (right click) and select "Choose a WEBDEV style".
      3. In the window that appears, select the desired style and validate.
      Note: Choosing an existing style will be performed in lesson 5.
    5. Validate the description window of the "Username" control.
  • To apply the same style to the "Password" control:
    1. Select the "Password" control.
    2. Press F4.

      Note

      F4 applies the last action to the selected controls. In our case, the new color is automatically applied to the "Password" control.
    3. You get the following UI:
      Form

Page test

  • Test the page (click Test page in 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" tab, 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 data file generation wizard starts.
      Data file creation wizard
    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 ("Next" button at the bottom of the wizard).
    6. Choose the controls to retrieve. In our case, all page controls correspond to an item.
      Data file creation wizard
    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 "Username" item will be a unique key. Therefore, the data file can contain two people with the same name but not with the same username.
      Data file creation wizard
    10. Go to the next step.
    11. Validate the summary. The file description appears in the data model editor.
    12. Save the analysis: click Save an element in 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 set up the addition of data entered by the user in the data file. The open document tabs are at the top of the editor. Each tab represents an open document in the editor.
    Open document tabs
    • "P" represents the project.
    • "PAGE_Form" represents the "Form" page.
  • We need a Button control to save the data from our form. This control will be used to validate the information entered in the page and save the data in the Registration data file.
  • To create a Button control:
    1. On the "Creation" tab, in the "Usual controls" group, click Create a Button control.
    2. The new control follows the mouse cursor.
    3. Click inside the page to create the control (below the edit controls for example). The control is created.
    4. Press the space bar: the text can be edited.
    5. Type "Save".
    6. Press Enter to validate.
  • To write the WLanguage code associated with the Button control:
    1. Open the context menu of the control and select "Code" (or press F2).
    2. The events associated with the control are displayed. You will see the headers of the events executed on the server and on the browser.
    3. We will save the data in the database. The database can be accessed in Server code only: the WLanguage code must be entered in the "Server Click" event (yellow).
    4. Write the following WLanguage code:
      PAGE_Form.ToFile()
      Registration.Add()
      Info("Record successfully added.")
    5. Let's analyze this code:
      • <Page>.ToFile is used to retrieve the content of the edit controls in the page and transfer it to the data file.
      • <Data file>.Add is used to write the transferred data to the data file.
      • Info is used to display a message.
    6. Save (Ctrl + S) and close the code editor (click "X" in the upper-right corner).

Page test

  • Test this page:
    1. Click Test page in the quick access buttons.
    2. The page is displayed in a browser.
    3. Enter the following data:
      • Last name: Doe
      • First name: John
      • Address: 5th avenue, New York
      • Email: john.doe@atandt.com
      • Username: john
      • Password: john
    4. Click "SAVE". The browser displays a message to confirm that the record has been added!
    5. 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" tab, in the "Database" group, click "WDMap".
    2. Select the "Registration" data file. The data file content is displayed.
      Viewing records with WDMap
    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:
  • set the last name, email and username controls as required fields.
  • create a new control to confirm the password.

Required input

  • Go back (if necessary) to the "PAGE_Form" page by clicking its name in the open document tabs.
  • To set the "Last name" control as a required field:
    1. Double-click the "Last name" control: the control description window is displayed.
    2. Go to the "Details" tab.
    3. Check "Required 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.
    2. Press F4: the last action performed on a control is rerun on the selected control.
  • Similarly, apply this modification to the "Username" control.
  • Test this page:
    1. Click Test page in the quick access buttons.
    2. In the window that appears, click "SAVE".
    3. An information box is automatically displayed to indicate that mandatory controls have not been filled.
      Information dialog box
    4. Validate the information box.
    5. Close the browser.

Password verification

To verify the password, we will create an edit control that allows users to confirm their passwords. Then, we will write the WLanguage code required to verify the passwords.

  • Create a new edit control. Name this control "Confirm" and select the type "Password".
  • The WLanguage code for verifying the password must be written in the events associated with the "SAVE" Button control.
    1. Click the "SAVE" Button control and press F2.
    2. This verification consists in comparing the value entered in the "Password" control against the one entered in the "Confirm" control. It is not necessary to access the server to verify the password: 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_Confirm THEN
      Info("Error, the password and confirmation password do not match.")
      EDT_Password = ""
      EDT_Confirm = ""
      SetFocusAndReturnToUserInput(EDT_Password)
      END
    4. Let's analyze this code:
      • The IF statement is used to perform an action on a condition. In this case, the action is performed if the "Password" and "Confirm" controls do not match ('<>' operator).
      • In case of difference, the edit controls are "cleared": an empty string is assigned to them.
      • SetFocusAndReturnToUserInput 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 entered are different, the "Password" control takes the focus and the code being run is stopped: the server code that is used to save the information in the database will not be run.
  • Test this page:
    1. Click Test page in the quick access buttons.
    2. Enter the following information in the page that appears in a browser:
      • Last name: "Doe"
      • First name: "Peter"
      • Email: "Peter.Doe@gmail.com"
      • Username: "Peter"
      • Password: "Peter"
      • Confirm: "Louis"
    3. Click "SAVE".
    4. An error message is automatically displayed to indicate that the passwords do not match.
    5. Validate this message.
    6. Close the browser.
Simple search in a database
We have seen how to create an input form and save values in a database. Let's continue exploring WEBDEV by performing a search in the database.
We will create a login page to enter the username and password. Then, we will check whether this information is correct.

Creating the page

  • To create the page:
    1. Click Create an element in the quick access buttons.
    2. The window for creating a new element is displayed.
    3. Click "Page" then "Page". The page creation wizard starts.
    4. Select "Blank".
      Page creation wizard
    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. Enter the page title: "Username".
    9. Validate.

Creating controls

The login page will contain the following controls:
  • Two edit controls:
    • "Username" to enter the username.
    • "Password" to type the password.
  • Two Button controls:
    • "Log in" to check the username and password.
    • "Register" to open the registration page (that was created previously).
We have already created these types of controls, let's see the steps to follow again:
  • To create the edit control:
    1. On the "Creation" tab, in the "Usual controls" group, click Create an edit control.
    2. Click inside the blank page to create the control.
    3. Click the control (simple click): the text can be edited.
    4. Type the caption ("Username" and "Password") and press Enter to validate. The caption is immediately modified.

      Note

      The type of the "Password" control must be "Password". To modify the type of the edit control, simply open the description window.
  • To create each Button control:
    1. On the "Creation" tab, in the "Usual controls" group, click Create a Button control.
    2. Click inside the page to create the Button control (below the edit controls for example). The control is created.
    3. Press the space bar: the text can be edited.
    4. Enter ("Log in" and "Register") and press Enter to validate. The caption is immediately modified.
  • You get the following page:
    Page in the editor
  • We will now see in detail how Button controls work. First of all, let's look at the "REGISTER" Button control.
    1. Select the "REGISTER" Button control.
    2. Open the control description window (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 site page".
      • In the "Page" area, select "PAGE_Form".
        Button control description
    4. Validate the description window.

      Note

      No code is required: in the editor, the Button control is associated with the action to perform (opening a page in this case).
  • For the "LOG IN" Button control, we must write the WLanguage code to perform the search:
    1. Select the "LOG IN" Button control and open the associated events (F2).
    2. Write the following WLanguage code in the "Click xxx (server)" event:
      Registration.ReadSeekFirst(Username, EDT_Username)
      IF NOT Registration.Found() THEN
      Error ("Unknown username.")
      RETURN
      END
       
      IF EDT_Password = Registration.Password THEN
      Info("You are logged in.")
      ELSE
      Error ("Wrong password.")
      END
    3. Let's take a look at this WLanguage code:
      • This code is run in server code because a search is performed in the database that is located on the server.
      • <Data file>.ReadSeekFirst searches for a value in a data file (in this case, the "Registration" 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.
      • <Data file>.Found is used to find out whether the search performed in the Registration data file was successful or not. The code "IF NOT Registration.found" defines the action if the username is not found (show "Unknown username"). Use RETURN to exit the current process. If the Username is not found, there is no need to execute the following code.
      • If the username is found, the password entered in EDT_Password is compared to the one in the data file (for the specified username). If the two passwords match, the user logs in, otherwise an error message appears.

        Note

        The code presented here is for educational purposes. In a real project:
        • The password must not be stored in plain text. We advise you to encrypt the password.
        • It is recommended to show the same error message in case of wrong usernames or passwords (to avoid hacking attempts).
    4. Save (Ctrl + S) and close the code editor (click "X" in the upper-right corner).

Page test

  • Test this page:
    1. Click Test page in the quick access buttons.
    2. Enter the following data in the page that appears in a browser:
      • Username: john
      • Password: john1
    3. Click the "LOG IN" button. An error message is displayed.
    4. Validate the message and modify the password: "john".
    5. Click the "LOG IN" button. You are logged in.
    6. Close the browser.
Conclusion
By creating two pages only, we have discovered several WEBDEV features:
  • the creation of controls: edit controls and Button controls,
  • the possibilities for aligning and organizing controls in the page,
  • the addition of records into data files,
  • the sequence of pages,
  • the search for records in the data files,
  • the use of WLanguage server and browser events,
  • ...
After this overview, we will go into more details in the next section, especially regarding the analysis and the definition of the database characteristics before explaining how to develop a full site.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 27
Comments
Click [Add] to post a comment