ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
Help / WEBDEV Tutorial / Tutorial - Creating a website with back office processes
  • Lesson 4 - Adding a product
  • Overview
  • Adding a new product via the "Product form" page
  • Adding a product when the page is initialized
  • Adding a product when the page is validated
  • Adding a product in the page menu
  • Managing the product image
  • Testing the addition of a product
  • To sum up

Tutorial - Creating a website with back office processes

Lesson 4 - Adding a product
We will cover the following topics:
  • Creating a product.
  • Uploading data.
  • Improving the page design.
Durée de la leçon 50 mn
Overview
In the previous lesson, we saw how to edit a product. Now, we will see how to add a product. To do so, there is no need to create a new page: we will simply reuse the "PAGE_Product_form" page and adapt it to add elements.
We will also improve the page design, and implement data uploading.
Warning
This lesson uses the example project created in the previous lesson. You must have completed lesson 2.
Opening the example project:
In WEBDEV, open the "Full_WEBDEV_Site" project:
  1. Go to the WEBDEV home page (Ctrl + <).
  2. Click "Tutorial", then in "Tutorial - Create a WEBDEV website (Back Office and Front Office)", double-click "Full WEBDEV Site - Exercise".
Adding a new product via the "Product form" page

Adding a product when the page is initialized

Let's go back to our example.
First, we will change the opening mode of "PAGE_Product_form":
  1. Select the "Product form" page: click "PAGE_Product_form" in the open document tabs.
  2. Press F2 to open the different WLanguage events of the page.
  3. In the "Global declarations" event, we will assign a default value to the parameter passed to the page. When a record is modified, the parameter passed always corresponds to the identifier of the product to be modified. But when a record is added, the element does not yet have an identifier. To handle this case, we will set "-1" as the default value.
  4. Replace the following line of code in the "Global declarations" event:
    Global declarations of PAGE_Product_form (server)
    PROCÉDURE MyPage(NumProductToDisplay is 8-byte int)

    with the code:
    Global declarations of PAGE_Product_form (server)
    PROCÉDURE MyPage(NumProductToDisplay is 8-byte int=-1)
  5. We will now handle the "-1" value (when a record is added). Replace the following code:
    Global declarations of PAGE_Product_form (server)
    Product.ReadSeekFirst(ProductID, NumProductToDisplay)
    IF Product.Found() = False THEN
    // Display the list of products
    PAGE_List_of_products.Display()
    END
    Product.ToPage()

    with the code:
    Global declarations of PAGE_Product_form (server)
    IF NumProductToDisplay = -1 THEN
    Product.Reset()
    ELSE
    Product.ReadSeekFirst(ProductID, NumProductToDisplay)
    IF Product.Found() = False THEN
    // Display the list of products
    PAGE_List_of_products.Display()
    END
    END
    Product.ToPage()

    Let's analyze this code:
    • If the product identifier is set to -1, it means that a product is added. In this case, Reset is executed. This function initializes the item variables in the "Product" data file with the default values to add a new record.
    • If the product identifier has a value different from -1, we use the code to open the form in edit mode.
  6. Close the code window.

Adding a product when the page is validated

The "OK" Button control must also add the record.
  1. Select the "OK" button in "PAGE_Product_form".
  2. Open the WLanguage events associated with the control (F2).
  3. The code in the "Click xxx (browser)" event must not change: the checks to perform are the same. Only the server code must be modified.
  4. In the "Click xxx (server)" event, replace the existing code with the following code:
    Click (server)
    Product.FromPage()
    //IF ImagePath <> "" THEN
    // Product.Visual = fLoadBuffer(ImagePath) 
    //END
    Product.Save()
    PAGE_List_of_products.Display()

    Let's take a look at this code: <Data file>.Save checks whether the record is already in the "Product" data file and allows you to add it or modify it, where necessary.
  5. Save changes (Save element or Ctrl + S).
  6. Close the code window.

Adding a product in the page menu

We will modify the page menu to allow users to add a new product.
  1. Select the "List of products" page: click "PAGE_List_of_products" in the open document tabs.
  2. Right-click a menu option to open the context menu and select "Open template".
  3. In the page template, select the menu.
  4. Open the context menu and select "Edit menu". A yellow outline appears around the menu. This outline indicates that the menu is in "Edit" mode: it can be modified.
  5. Select the "Product form" option, right-click and select "Option description" in the context menu.
  6. In the "General" tab, in "Option action":
    • select "Display a site page".
    • select the "PAGE_Product_form" page.
  7. Validate.
  8. In the template bar, click Apply changes of the page template to apply the changes made to the template to all the pages that use it.
  9. In our case, the two project pages are proposed. Validate the page template update window.
  10. Close the page template.
Now, we want the "Product form" option to be selected when the corresponding page is displayed. To do so, we will override the menu displayed in "PAGE_Product_form", and then the "Product form" option.
Perform the following actions:
  1. Right-click the "Product form" option and select "Override control".
  2. Open the context menu of the menu again and select "Edit menu". The menu switches to edit mode: a yellow outline appears around the menu.
  3. Right-click the "Product form" option and select "Override control".
  4. Right-click the "Product form" option once again and select "Set this menu option as selected".
  5. Press Esc to exit edit mode.
  6. Save the page (Ctrl + S).
The page is ready to be tested.

Managing the product image

In the Product data file, an item is used store the image associated with the product.
We have already inserted an Image control in the page to view the image. Now we will define the options to allow users to change the product image.
Users will be able to upload an image from their computer and it will be bound to an item in the data file. We will use an Upload control.
Uploading consists in copying a file from the client computer to the server.
Downloading, on the other hand, consists in copying a file from the server to the client computer.
WEBDEV features an Upload Smart control.
To create the Upload control:
  1. On the "Creation" tab, in the "Usual controls" group, expand "Button". The list of available types of buttons is displayed.
  2. Select "File upload".
  3. Click at the desired location to create the control in the page (below the Image control, for example).
    Creating the Upload control
The Upload control includes:
  • a cell containing:
    • a Static control,
    • a Looper control used to display the characteristics of the files to upload.
  • an Add button enabling the user to select the files to upload,
  • a Send button enabling the user to send files to the server.

Now we will adapt the control's code to upload files in our site.
To configure the Upload control:
  1. Open the code of the "ADD" Button control: select the control and press F2.
  2. Different WLanguage events are associated with the Upload control. We will modify the "Receive files uploaded" event to copy the image to the site data directory.
  3. Write the following code in the "Receive files uploaded" event (ignore compilation errors, we will correct them later):
    Receive files uploaded from UPL_Upload
    UploadCopyFile(MySelf, fDataDir(), UploadFileName(MySelf, False))
    ImagePath = fDataDir() + [fSep()] + UploadFileName(MySelf, False)
    IMG_Visual = ImagePath
  4. Let's analyze this code:
    • UploadCopyFile saves the file uploaded by the user on the server. In our case, the file is copied to the data directory (returned by fDataDir). The file name is kept.
    • The path of the uploaded image is then stored in a global variable named ImagePath.
      Why use a global variable?
      A global variable is required here because the image path will be used in the code of the "OK" button, to save the new image in the data file.
      For more details on the conditions for using local and global variables, see the WLanguage tutorial.
    • fSep gets the separator to be used on the server's operating system ("\" for Windows and "/" for Linux). Therefore, your site is independent of the server where it is installed!
    • Then, the uploaded image is displayed in the IMG_Visual Image control.
  5. In the code editor, the ImagePath variable is displayed in red and a compilation error appears next to the lines of code: "The element 'ImagePath' is unknown or inaccessible". We have not declared this global variable yet. These errors also appear in the compilation errors pane.
  6. To declare the global variable:
    • Go to the "Global declarations" event of the page (for example, in the Code editor, go to the "Code" tab, and select "Global declarations" in the combo box that lists all the events).
      Events of an element
    • Type the following code after the procedure declaration:
      Global declarations of PAGE_Product_form (server)
      ImagePath is string
  7. Save changes by clicking Save an element in the quick access buttons. The compilation errors disappear.
  8. Close the code editor.
Our image can now be uploaded on the server. Now we only need to save the image in the database.
To save the image in the Product data file:
  1. Open the code of the "OK" Button control:
    • Select the "OK" button.
    • Press F2.
  2. In the "Click xxx (server)" event of the Button control, enter the following code AFTER the call to <Data file>.FromPage:
    Click on BTN_OK (server)
    IF ImagePath<>"" THEN
    Product.Visual = fLoadBuffer(ImagePath) 
    END
  3. Let's take a look at this WLanguage code:
    • This code checks the content of the ImagePath global variable. If this variable does not correspond to an empty string, it means that the image was uploaded by the user. In this case, the "Visual" item of the Product data file is updated with the binary content of the image. This content is retrieved with fLoadBuffer.
    • <Data file>.Modify (already used in the code) saves changes in the data file.
  4. Save changes (Save an element or Ctrl + S).
  5. Close the code window.

Testing the addition of a product

We have made all the changes required to add a product. Now, we can simply run a test.
To test the addition of a product:
  1. Test the project (click Test project in the quick access buttons). The page containing the list of products appears.
  2. Click "Product form".
  3. Enter a new product with the following characteristics:
    • Reference: M49629
    • Caption: Xxx bag
    • Description: Leather bag
    • Price: 150
  4. Validate. The new product appears in the list of products.
To sum up
In this lesson, we saw how to change text according to variables, and we also used cells and styles in WEBDEV to improve the design of a page.
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 - Create a WEBDEV website (Back Office and Front Office)", double-click "Full WEBDEV Site - Answers".
Previous LessonTable of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/12/2023

Send a report | Local help