PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
New WEBDEV 28 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
  • Setting the style of the "Username" and "Password" controls
  • Think mobile
  • Page test
  • Saving 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.
  • Controlling data entry.
  • 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 some pages.

Note

Pages display information and allow users to enter data. Users can directly interact with 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 28.
  • 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 how to create 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 different controls to enter personal information.

Creating the page

  • To create the page:
    1. Click Creation button in the quick access buttons.
      Creation button (quick access buttons)
    2. The new element 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. 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. It will be used to programmatically handle the page.
      • The location. This location corresponds to the directory in which the page file will be saved.
    6. Enter the page title: "Form".
      Save page
    7. The page name (which will be used in the code) is automatically built from the page title. If you want, you can simply write a name different from the page title.
    8. 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 "EN" 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 will include the following controls:
  • Last name.
  • First name.
  • Address.
  • Email.
  • Username.
  • Password.
All these controls are Edit controls that will allow users to enter 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 with sizing handles and a box around it to indicate that it 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 change the control caption:
    1. Click the control (simple click): the text becomes editable. 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 changes immediately. The control name also changes: it appears in the tooltip when hovering over the control: EDT_Last_name.
      Tooltip of an Edit control

Note

Let's analyze the name suggested 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. The control description window appears:
    Edit control description
  • We will set the maximum input size: simply enter the new size (30 in our case) in "Input size (characters)". You can also set other features. 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 are not the same type. You can change the type of the Edit control in the description window.
Edit control description (Available types)
We have created the main elements of the form. We are now going to improve it.
Let's see the page that we want to get:
Form
  • The "Address" Edit control supports multiline text.
  • 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 multiple lines. We are going to enlarge it.
Then, we are going to align the controls in the page.
Finally, we will set the style of the "Username" and "Password" controls.
  • To enlarge the "Address" control:
    1. Click the "Address" control.
    2. The sizing handles appear.
    3. Click the bottom handle and drag it down to enlarge the area.
  • This allows you to increase the width of the different controls in the page.
  • To align the controls in the page:
    1. Select the "Last name" control, and then all the Edit controls in the page (hold the Ctrl key down and click the different controls).

      Note

      Caution: choose the first control carefully. The alignment options are based on:
      • The size of the first selected control: it will be used as a reference for the size of the 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 you don't want to choose any alignment option, simply 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).

Setting 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 of these controls.

  • To change 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, add it to the project style sheet. Simply:
      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 reuse the new style and apply it to another control:
      1. Select the control you want to apply the new style to.
      2. Right-click to open the context menu of the control and select "Choose a WEBDEV style".
      3. In the window that appears, select the desired style and validate.
      Note: We will see how to choose an existing style 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

Think mobile

Websites must work both on PC and mobile devices: this is commonplace knowledge. From the start, a website must be designed to be used on mobile devices.
To simplify the use of websites on both PC and mobile devices, WEBDEV provides you with the following layouts. By using layouts, only the interface of your page has to be adapted for mobile. The code does not change. You don't need to use two sets of pages. Your website remains the same.
As we are just getting started, we won't use layouts just yet. We will cover this topic in part 8, "Mobile-friendly website".

Page test

  • Test the page (click Test page in the quick access buttons). You can enter data but it is not processed or saved.
  • Close the browser.
Saving data in a data file
When creating a form, the first thing you want to do is save the data entered. This data can be saved in a text file, in an XML file or even in a database.
In this case, we have chosen the last option.
In WEBDEV, the database is defined in a specific editor, the data model editor. We will see this editor in detail in the next part of the tutorial.
In this example, we will define a database and link it to the previously created controls via a simple process: reverse engineering.

Creating the data file

  • To automatically create a 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 the data files that will be used in 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 will modify some elements:
      • Enter "Registration" in the name.
      • Enter "Registration" in the caption.
      • Enter "a registration" in the last field.
    5. Go to the next step ("Next" button at the bottom of the wizard).
    6. Choose the desired controls. In our case, all the controls in the page correspond to an item.
      Data file creation wizard
    7. Go to the next step.
    8. This step allows you to define the keys (also called indexes).

      Note

      keys enable faster searches (key with duplicates) and/or ensure that the value of an item is saved only once (unique key).
    9. In this example, "Last_name" will be a key with duplicates and "Username" 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 prompts you to synchronize the project. The consistency between the created pages and the data defined in the analysis is checked. This verification is performed when you go back to the project pages if changes have been made to the analysis.
    15. Click "Yes".
Let's not spend more time on the data model editor. It will be presented in detail in another lesson.

Saving data

  • Let's go back to the registration form to determine how the data entered by the user will be saved 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 becomes editable.
    5. Type "Save".
    6. Press Enter to validate.
  • To write the WLanguage code of 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 added.")
    5. Let's analyze this code:
      • <Page>.ToFile retrieves the data from the Edit controls and transfers it to the data file.
      • <Data file>.Add writes the data to the data file.
      • Info displays 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. Define 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 includes a tool to view the data from the data files while developing the site (when the pages have not yet been created, for example).
The name of this tool is 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. The data was saved successfully.
    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 the 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 applied to 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 compares the values entered in the "Password" and "Confirm" controls. It is not necessary to access the server to verify the password: it can be verified directly 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 sets a condition to perform an action. In this case, the action is performed if the "Password" and "Confirm" controls do not match ('<>' operator).
      • In the values are different, the Edit controls are "cleared": an empty string is assigned to them.
      • SetFocusAndReturnToUserInput positions the cursor in the specified control (in this case, the "Password" control) without executing the following code. In our case, if the passwords do not match, the "Password" control gains focus and the code being executed is stopped: the server code that saves the data in the database is not executed.
  • Test this page:
    1. Click Test page in the quick access buttons.
    2. Enter the following information in the page that appears:
      • Last name: "Doe"
      • First name: "Peter"
      • Email: "Peter.Doe@gmail.com"
      • Username: "Peter"
      • Password: "Peter"
      • Confirm: "Louis"
    3. Click "SAVE".
    4. An error message appears automatically 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. Now we will perform a search in the database.
We will create a login page to enter the username and password. Then, we will check the validity of the login credentials.

Creating the page

  • To create the page:
    1. Click Create an element in the quick access buttons.
    2. The new element window appears.
    3. Click "Page" then "Page". The page creation wizard starts.
    4. Select "Blank".
      Page creation wizard
    5. Validate.
    6. The page is created and the save window opens automatically.
    7. Enter the page title: "Login".
    8. 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 we 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 becomes editable.
    4. Type the caption ("Username" and "Password") and press Enter to validate. The caption changes immediately.

      Note

      The "Password" control must be of type "Password". You can change the type of the Edit control in 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 becomes editable.
    4. Type the caption ("Log in" and "Register") and press Enter to validate. The caption changes immediately.
  • You get the following page:
    Page in the editor
  • We will see the Button controls in detail. 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" option, select "Display a site page".
      • In the "Page" option, select "PAGE_Form".
        Button control description
    4. Validate the description window.

      Note

      No code is required: in the editor, the Button control can be directly associated with the action to be performed (in this case, open a page).
  • In the case of the "LOG IN" button, we need to write 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 executed in the server code because the search is performed in a database located on the server.
      • <Data file>.ReadSeekFirst searches for a value in a data file (in this case, the "Registration" data file). By default, a whole-word search is done. To perform a "Starts with" search, simply add the hGeneric constant as a parameter.
      • <Data file>.Found determines whether or not the search performed in the Registration data file was successful. "IF NOT Registration.found" defines the action to be performed if the username is not found (e.g., show "Unknown username"). The RETURN keyword exits 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 a readable format. 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:
      • Username: john
      • Password: john1
    3. Click the "LOG IN" button. An error message is displayed.
    4. Validate the message and change 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 to data files,
  • the sequence of pages,
  • the search for records in the data files,
  • the use of WLanguage events (server and browser),
  • ...
After this overview, we will go into more details in the next part, 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 28
Comments
Click [Add] to post a comment