Create a secure medical platform with NoCode-X (Part I): Creating a register page

In this tutorial series, we will learn how to create a simple no code medical platform web application in NoCode-X. Users will be able to create accounts and login, enter any health issues they may have and a doctor will analyze their symptoms and attempt a diagnosis. Obviously this application requires very robust security, because medical data is highly sensitive information. Luckily for us, NoCode-X has a plethora of security features built-in.

Before starting this tutorial, it is recommended to follow the Restaurant reviewing app series first. This will cover all the basics of creating web apps in NoCode-X. For more details about anything covered in these tutorials, we refer to the documentation.

Overview

In the first two parts of this tutorial, we will explore how we can create a login system for our app. This tutorial kicks things off by creating a register page. Detailed information about users in NoCode-X can be found on the Users page. The medical aspect of our app will be developed in later tutorials.

We will cover the following subjects:

1. Designing a navigation bar for our web application.
2. Creating a register page.
3. Allowing the register page to create new users.
4. Creating a login page.
5. Making a page that only logged in users can access.

Steps 1-3 will be handled in this tutorial, steps 4 and 5 in Part II.

The navigation bar

Designing navigation bars has been covered in detail in Part I of the Restaurant reviewing app series. We will make the navigation bar functional in Part III of this series. In this tutorial we have opted for a horizontal navigation bar at the top of the page. It looks like this:

It consists of the following components:

• A plane (cyan colored), which serves to contain all elements of the navigation bar.
• A horizontal list with 4 titles, each linking to a different web page.
• A logo, using an image.
• A title, which shows the name of the web app (NoDisease-X).

Refer to the All components page for more information about these components. In the next section we use NoCode-X’s template hierarchy functionality to apply this navigation bar to every page.

The register page design

Create a new child template from the navigation template to serve as our register page as follows:

1. Click the template hierarchy icon. This is indicated by a red arrow in the first image below.
2. Add a new child template by clicking the plus icon next to the master template. The result is shown in the second image below. You have to change the name of the new template first. This can be done in the template properties tab, as shown in the third image below.

Now we can create our register form. Add the following components to the template:

• A plane (with a double border) to contain the other components.
• Two input fields: one for the user’s first name and one for their last name.
• An email field.
• A password field.
• A date field for date of birth.
• A button, to submit the register form.

Each field is made mandatory.

The result can be seen in the image below:

The design for our register form is now complete! Of course we still have to add functionality to it, to make sure it actually behaves like a register form.

When the user clicks the Submit button, our application needs to fetch all data from the form fields and create a new user with this information. This can be done using actions:

Making the register page functional

Select the (Submit) button component, go to its Component menu and open the Actions tab:

Now click the plus button. We arrive in the action editor. Edit the new action’s attributes:

Then add the following function calls to the grid:

• Get answer of input field (twice)
• Get answer of email field
• Get answer of password field
• Get answer of date field
• Create user

Link them up like so:

We must now configure each function call’s Function call configuration. The first function call Get answer of input field corresponds with the input field component for the new user’s first name. We must select this component’s code from the list in the function call’s Arguments tab in its Invocation configuration:

The value entered by the user in this input field will then be saved in a variable. Enter a name for it in the function call’s Result tab. This is shown below:

The variable will now be stored in the variable scope. Repeat this procedure for every function call (except Start and Create user).

Finally, go to the Create user function call’s Arguments tab in the Invocation configuration and select the appropriate variable name for each field:

Done! In the next tutorial we will explore how to create the login page and a page only logged in users can access.