ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - My first WEBDEV website
  • Lesson 2 - Managing a database
  • Let's go back to our example
  • Key points of this lesson
  • Creating the data file
  • Editing the page to save data
  • Create the Button control
  • WLanguage code of the Button control
  • Page test
  • Viewing the data typed
  • Adding input checks
  • Required input
  • Password verification
  • Simple search in a database
  • Creating the page
  • Creating the controls
  • Page test
  • To sum up
  • Think mobile

Tutorial - My first WEBDEV website

Lesson 2 - Managing a database
We will cover the following topics:
  • Saving data in a database.
  • Controlling data entry.
  • Simple search in a database.
Durée de la leçon 30 min
Let's go back to our example
In the previous lesson, we used the "My_First_Pages" project. We will use this project again to continue discovering WEBDEV.

Key points of this lesson

In the previous lesson, we created a form. 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 this lesson, we are going to:
  • define a database and link it to the previously created controls via a simple process: reverse engineering.
  • edit the page to save data in the database.
  • add input checks.
  • perform a simple search in the database.
Creating the data file
WEBDEV features a wizard that helps you create a data file from the controls used on a page:
  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.
    In WEBDEV, the database is defined in a specific editor, the data model editor. The data model editor contains the description of all the data files that will be used in the project. We will take a closer look at this editor in Creating a project and its analysis.
  3. The data file generation wizard opens.
    Data file creation wizard
    The name of the data file is automatically filled with the page name.
  4. 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).
    keys enable faster searches (key with duplicates) and/or ensure that the value of an item is saved only once (unique key).
    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
  9. Go to the next step.
  10. Validate the summary. The file description appears in the data model editor.
  11. Save the analysis: click Save an element in the quick access buttons (or press Ctrl + S).
  12. Close the data model editor.
  13. 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.
  14. Click "Yes".

Let's go back to the registration form to determine how the data entered by the user will be saved in the data file. To do so, simply use the open document tabs at the top of the editor:
Open document tabs
In these tabs:
  • "P" represents the project.
  • "PAGE_Form" represents the "Form" page.
Click "Page_Form" to open the corresponding page in the editor.
Editing the page to save data
To save data from our form, the user should be able to click a Button control. The WLanguage code of this button will validate the information entered in the page and to save the data in the Registration data file.

Create the 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.
Save the page (Ctrl + S). An icon appears on the right of the control.
This icon indicates that there is a UI error or a potential improvement. Hover over the icon for more details.
In our case, no keyboard shortcut is associated with the Button control. This problem can be fixed automatically:
  • Click the icon.
  • In the window that appears, click "Fix".
  • The Enter shortcut is automatically associated with Button control. The icon disappears.

WLanguage code of the Button control

We are now going to define the actions to be performed when the Button control is clicked, using WLanguage code.
Let's see the various WLanguage events associated with the control. To do so, we have two options:
  1. Right-click the control to open the context menu and select "Code".
  2. Select the control and press F2.
The events associated with the control are displayed in the code editor. You will see the headers of the events executed on the server and on the browser.
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).
Write the following WLanguage code:
Click on BTN_Save (server)
PAGE_Form.ToFile()
Registration.Add()
Info("Record added.")
Let's analyze this code:
  • <Page>.ToFile retrieves the data from the Edit controls in PAGE_Form and transfers it to the Registration data file.
  • <Data file>.Add writes the data to the Registration data file.
  • Info displays a message.
Save (Ctrl + S) and close the code editor (click "X" in the upper-right corner).

Page test

Let's test the page and try to save the data entered:
  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 an easy-to-use tool for viewing the contents of data files: WDMap. We are going to use it in order to check whether the information typed was saved.
WDMap allows you to view the contents of data files during the development stage (for example, if the pages used to view the data have not yet been created). This tool is not redistributable and can only be used on the development computer.
To view data on the client computer, you can use the HSQL Control Center. We will take a closer look at this tool in Managing an HFSQL Client/Server database.
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.
    View records with WDMap
    The data we previously entered appears in the file.
  3. 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

To set the "Last name" control as a required field:
  1. Go back (if necessary) to the "PAGE_Form" page by clicking its name in the open document tabs.
  2. Double-click the "Last name" control: the control description window is displayed.
  3. Go to the "Details" tab.
  4. Check "Required input". If this option is checked, WEBDEV will automatically check whether the Edit control was filled.
  5. Confirm changes and close the description window.
To apply these changes to the "Email" control, we don't need to go over all these steps again: WEBDEV does it automatically. Simply:
  1. Select the "Email" control.
  2. Press F4: the last action performed on a control is applied to the selected control.
It's your turn: Apply these changes to the "Username" control using the same method.

We can check that these fields are now required by doing a quick test:
  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 required fields have not been filled.
    Information dialog box
  4. Validate the information box.
  5. Close the browser.

Password verification

To check the password, we will:
  • Create and Edit control to allow users to re-enter their password.
  • Write the WLanguage code to implement the verification.
It's your turn: 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.
    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.
  2. Write the following code in the browser "Click" event:
    Click on BTN_Save (onclick browser 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
  3. 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.
Let's run a quick test:
  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. The new element window appears.
  2. Click "Page" then "Page". The page creation wizard starts.
  3. Select "Blank".
    Page creation wizard
  4. Validate.
  5. The page is created and the save window opens automatically.
  6. Enter the page title: "Login".
  7. Validate.

Creating the 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 once: the text becomes editable.
  4. Type the caption ("Username" and "Password") and press Enter to validate. The caption changes immediately.
    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.
  5. Save the page.
As on the previous page, an icon appears in the upper-right corner of the "LOG IN" button. Here again, there is a missing keyboard shortcut.
  • Click the icon.
  • In the window that appears, click "Fix".
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 page of the site".
    • In the "Page" option, select "PAGE_Form".
      Button control description
  4. Confirm changes and close the description window.
    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:
    Click on BTN_Log_in (server)
    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.
      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.
To sum up
In this lesson, we discovered new possibilities in WEBDEV:
  • how to add records to data files,
  • how to go to a specific page,
  • how to search for records in the data files,
  • how to use server and browser WLanguage events,
  • ...
Completed project
If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the different pages created in the lessons of this part. This project illustrates the expected end result.
To open the completed project, go to the WEBDEV home page and click "Tutorial", then in "Tutorial - First website", double-click "My first pages - Answers".

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 layouts. By using layouts, only the interface of your page has to be adapted for mobile devices. 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 "Mobile-friendly website".
Previous LessonTable of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/07/2023

Send a report | Local help