• Creating a form page.
• Saving data.
• Controlling data entry.
• Simple search in a database.

	Estimated duration: 30 mn

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

	Note	In this lesson, 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 completed project is available. This project contains the different pages created in this lesson. To open the completed 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 the page

• To create the page:
  1. Click in the 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".
     
  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".
     
  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

• Last name.
• First name.
• Address.
• Email.
• Username.
• Password.

• To create an edit control:
  1. On the "Creation" tab, in the "Usual controls" group, click .
     
  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.
     
  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.
     

	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:
  

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

  Caption	Type	Size
  First name	Text	30
  Address	Multiline text
  Email	Text	255
  Username	Text	10
  Password	Password	10

Let's see the page that we want to get:

• The "Address" Edit control supports multiline text.
• The different Edit controls are aligned.
• The "Username" and "Password" controls have a red text.

Page improvements

• 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.
     
  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 in the quick access buttons (or press Ctrl + S).

Setting the style of the "Username" and "Password" 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.
     
     
     

     	Note	To reuse this style, add it to the project style sheet. Simply: Click "Add this style to the project" in the "WEBDEV style" pane on the right of the description window. Give a name to the style. Click "Add". To reuse the new style and apply it to another control: Select the control you want to apply the new style to. Right-click to open the context menu of the control and select "Choose a WEBDEV style". 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:
     

Think mobile

Page test

• Test the page (click in the quick access buttons). You can enter data but it is not processed or saved.

• Close the browser.

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.
     
  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.
     
  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.
     
  10. Go to the next step.
  11. Validate the summary. The file description appears in the data model editor.
  12. Save the analysis: click 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".

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.
  
  • "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 .
  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 in the quick access buttons.
  2. The page is displayed in a browser.
  3. Define the following data:
     • Last name: Doe
     • First name: Paul
     • 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

• 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.
     
  3. The data was saved successfully.
  4. 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

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

Password verification

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

Creating the page

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

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

• To create the edit control:
  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 (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 .
  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:
  

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

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