Tutorial - My first WEBDEV website

Key points of this lesson

• define a database and link it to the previously created controls via a simple process called reverse-engineering.
• edit the page to save data in the database.
• add input checks.
• perform a simple search in the database.

1. If necessary, open "PAGE_Form" in the page editor. You can find the page using the Ctrl + E shortcut.
2. In the ribbon, on the "Page" tab, in the "Edit" group, expand "Other actions" and select "Generate a file description".
3. 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.
4. The data file generation wizard opens.
   
   The name of the data file is automatically filled with the page name.
5. We will modify some elements:
   • Enter "Registration" in the name.
   • Enter "Registration" in the caption.
   • Enter "a registration" in the last field.
6. Go to the next step ("Next" button at the bottom of the wizard).
7. Choose the desired controls. In our case, all the controls in the page correspond to an item.
   
8. Go to the next step.
9. 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.
   
10. Go to the next step.
11. Validate the summary. The file description appears in the data model editor.
12. Click in the quick access buttons or press Ctrl + S to save the analysis.
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 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:

In this bar:

• "P" represents the project.
• "PAGE_Form" represents the "Form" page.

Create the Button control

1. On the "Creation" tab, in the "Usual controls" group, click .
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 to edit the text.
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.

• 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

• Right-click the control and select "Code" in the context menu.
• Select the control and press F2.

PAGE_Form.ToFile()
Registration.Add()
Info("Record added.")

• <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.

Page test

1. Click 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

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.

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.
   
   The data was saved successfully.
3. Close WDMap ("Close" button).

• set the last name, email and username controls as required fields.
• create a new control to confirm the password.

Required input

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 to open the description window.
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. Validate the description window.

1. Select the "Email" control.
2. Press F4 to repeat the last action on the selected control.

1. Click 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.
   
4. Validate the information box.
5. Close the browser.

Password verification

• Create and Edit control to allow users to re-enter their password.
• Write the WLanguage code to implement the verification.

1. Click the "SAVE" Button control and press F2.
   
   

   This verification compares the values entered in the "Password" and "Confirm" controls. The verification can be made locally in the browser. There is no need to call the server.
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).
   • If there is a difference, the Edit controls are cleared. This means that 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. This means the server code that saves the data to the database will not be executed.

1. Click in the quick access buttons.
2. Enter the following information in the page that appears:
   • Last name: "Doe"
   • First name: "Alan"
   • Email: "Alan.Doe@gmail.com"
   • Username: "Alan"
   • Password: "Alan"
   • Confirm: "Luis"
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.

Creating the page

1. Click in the quick access buttons. The new element window appears.
2. Click "Page" then "Page". The page creation wizard opens.
3. Select "Blank".
   
4. Confirm.
5. The page is created and the save window opens automatically.
6. Enter the page title: "Login".
7. Confirm.

Creating the 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).

1. On the "Creation" tab, in the "Usual controls" group, click .
2. Click inside the blank page to create the control.
3. Click the control to edit the text.
4. Enter the text and confirm by pressing Enter. The caption changes immediately
   • For the username Edit control, enter "Username".
   • For the password Edit control, enter "Password".
     
     

     The "Password" control must be of type "Password". You can change the type of the Edit control in the description window.

1. On the "Creation" tab, in the "Usual controls" group, click .
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 to edit the text.
4. Enter the text and confirm by pressing Enter. The caption changes immediately.
   • For the first button, enter "LOG IN".
   • For the second button, enter "REGISTER".
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:

1. Select the "REGISTER" Button control.
2. Open the control description window (double-click the control).
3. On 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".
     
4. Validate the description window.
   
   

   No code is required required. In the editor, the Button control can be directly associated with the action to be performed (in this case, open a page).

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

1. Click 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. Close the message and change the password to "john".
5. Click the "LOG IN" button. You are logged in.
6. Close the browser.

• 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 - My first website", click "Open completed project".

Think mobile