Getting Started

Getting started with Wappler is really easy and it won’t take long to learn the basics.

Minimum Requirements

In order to use the latest version of Wappler, you must be running so Windows 7 64bit or newer, Mac OSX 10.10 64bit or newer, or Linux 64bit.

Downloading Wappler

Wappler can be downloaded for free from Wappler Download Page.

Registration

In order to purchase Wappler or get support you just need to register on community.wappler.io. Then use the same account when asked to log in when Wappler starts.

Support

Need further help getting started with Wappler? If you ever come across any issue related to Wappler, then just use our Community to get help.

Bug Reporting

No app is perfect, but just let us know and we will squash all the bugs out! Please use the Bug report option in Wappler for the best results! It is available at File / Submit error report menu or Alt+ctrl+P on Windows or Alt+cmd+P on Mac. Post your bugs in the Wappler General Bugs category

We hope you enjoy using Wappler!

The Interface

Wappler's interface is minimal and easy to navigate and use.


The toolbar on the left contains buttons which allow you to open/close the File Manager, Server Connect and Find & Replace panels located at the top and Project Manager, Options and Your Account details at the bottom:


The top toolbar contains tools and options for changing between Design and Code view, changing screen size options and Undo/Redo buttons:


The right panel allows you to select an element and edit its properties using the dedicated smart properties inspector or the Visual CSS Editor. Also you can add, delete, duplicate or remove elements here using the App Structure tree or DOM tree:


At the bottom of the screen you will find the publish panel and the console. Here you can define your project settings, targets, server model settings and publish it to multiple targets:


The most important part of Wappler screen is in the middle, where you see your design rendered. Here you can see how your website or mobile app looks, you can visually add elements (inside, before or after) the selected element, duplicate whole blocks of content or delete anything from the page or app layout.

App Connect Introduction

App Connect is a high performance front-end framework powerful just as React, Angular and VueJS but much easier to use due to its custom component structure and HTML5 Attributes binding. It comes with many custom components like: slideshows, galleries, dynamic charts, maps, animations and many more, which you can insert on your page and customize as you like. Also it is fully visual, thanks to the Wappler integration – so no coding is required!

Bootstrap 4 Integration

Bootstrap 4 doesn't need an introduction, so we'll skip this part and show you how it is integrated in Wappler.

No more searching the correct Bootstrap 4 class in the Bootstrap documentation - Wappler includes everything you need to create fully functional Bootstrap 4 websites. Build your layouts visually using the smart context panel which suggest only the suitable elements for your current selection.


Style the selected element using the properties inspector, which shows all the properties for your selection. Change colors, borders, margins and padding in a few clicks.

Smart CSS Designer

In order to use the visual CSS Designer integrated in Wappler you just need to open it by clicking Styles (1) and then select the element you'd like to style (2):

You can add new style property, edit existing style or remove a property from the selected element. Choose whether to add the style inline directly in the element.style {} rule, in an existing CSS file or choose whether to attach or create a new CSS file and set the rule there:

You can add an inline style by either using the color pickers for color/background color:

Where a nice color picker appears:

Or you can directly click in the rule and enter your property and value. Autocomplete popup appears when you start typing so you can use it to speed up your work:

You can see the changes immediately in Design View. Disable or remove rules by clicking the checkbox (1) or the remove button (2) for the selected rule:

In Wappler general settings you can setup the options for the CSS editor. You can enable the CSS autoprefixer and select the browser versions you want to support. On save the required prefixes will be added automatically. Also you can enable CSS prettify on save:

DOM Tree

Use the DOM Tree to explore the structure of your pages. You can access it by clicking the DOM button:

You can select an element on your page and then it is automatically highlighted in the DOM Tree:

You can explore its attributes and properties and setup them as you need in the properties inspector. They are different for different elements on your page, so the content of the properties inspector changes according to the selected element:

Right clicking an element allows you to insert any other element before, after or inside it:

DOM Tree toolbar allows you to add, duplicate and delete (1) elements in the tree or search for a specific element (2):

How-to Guides

Find step-by-step guides on how to accomplish common tasks in Wappler. You will learn how to quickly add any HTML element on you page, add margin or padding, duplicate elements and work with responsive images.

Including App Connect

In order to add App Connect on your page, select the Frameworks menu (1) and click App Connect (2). You will see a confirmation message, as soon as it is added on your page.

Including Bootstrap 4

In order to add Bootstrap 4 on your page, select the Frameworks menu (1) and click Bootstrap 4 (2). You will see a confirmation message, once it is added on your page.

Then, select whether to include it from a CDN (3) or include it locally (4). Also you can use any of the Bootswatch style themes for Bootstrap 4 included in Wappler.

Inserting Elements

Adding elements to your pages is a matter of couple of clicks. Starting with a blank new page, just click the blue plus add inside button (1) in Design View:

Then select the element, which you want to add (2) or explore the different element categories offered and add an element from there. Depending on which framework is added and what element is selected, the options displayed in the insert dialog will be different:

Then you can see your element added on the page and also in the App Tree (3):

You can continue adding elements the same way, selecting whether to add before, after or inside the element you just inserted.

Duplicating Elements

In order to duplicate an existing element on the page, just select it and click the duplicate icon (1):

This duplicates the element immediately and you customize it as needed. You can see the duplicated element in Design view and in App Structure:

Deleting Elements

Deleting an element is really easy. Select the element in Design View and click the delete icon (1):

Adding Class or Id

You can add classes or IDs to your elements, using the properties inspector. Just select your element either in Design View (1) or in App Structure (2) and add the ID (3) and Classes (4) you need in the properties inspector:

Margin and Padding

You can add margin or padding to any element in your Bootstrap 4 pages. Just select the element (1) and then in the properties inspector scroll to the Spacing options:

Add the required margin or padding. Select one of the available options: top, bottom, left, right or horizontal and vertical. Selecting horizontal or vertical margin or padding values adds margin or padding left and right or top and bottom:

Responsive Images

Adding responsive images in your Bootstrap 4 layout is another easy thing to do with Wappler. First, select the element you want to insert image into, and click the add inside button (1):

Click the Basic category (2):

Select the image element (3):

Then, in the src field browse to your image (4):

When you select your image, just check the responsive checkbox under image properties:

You can see your responsive image in Design View immediately:

Define URL Parameters

If you want to use URL parameters on the page - for example to filter a database query ir to show/hide specific page elements depending on URL parameter value you first need to define them in App Connect. Select App in the App Structure (1), make sure your App has an ID (2) and click the Define Query Params button:

In the query parameters dialog click the add new button:

And select add variable:

Add the name of your URL parameter:

Click Save:

The defined URL Parameter will now appear in the dynamic data pickers and you can use it for your dynamic expressions.

Drag & Drop Elements

You can drag any of the elements inside App Structure. Just select the element you want to move and start dragging it in the tree:

When the element which you are dragging cannot to be placed at specific locations, you will see a X - this means you can't drop it here as it is not allowed to move it here:

When the element can be placed at the selected location you will see a red arrow. You can drop the element there:

Inserting Common HTML Tags

In order to insert common HTML Tags, such as div, span, article, aside etc. you need to switch to DOM Tree panel as App Structure panel is used to display only components. We will show you how add a span inside a button, then add some text and assign class to it. First, select the button in design view, and click the DOM Tree button:

You will see your element highlighted in the tree:

Right click it, select Insert inside (1) and open the Styles and Semantics category (2):

Select span:

In the DOM Tree click on the span tag and in the Properties Inspector, in the Text field enter the content you want to show inside it:

Then add a class if you need to style it further. You can see your changes immediately in Design View:

This way you can add any common HTML Element directly in the DOM Tree.

Project Manager

Setting up a new project and managing existing projects in Wappler is really easy. Learn how to use the Project Manager and its options.

Creating New Project

Navigate to the Project Manager panel. If this is the first time you run Wappler then Project Manager will be automatically loaded.

You will see 2 demo projects which are included in Wappler and also options to open an existing project or create a new one:

Select Create New Project:

You can choose whether to use some of the included Bootstrap 4 starter pages and templates or create a blank project:

Let's start with a blank project:

Enter the project name (1), select a folder on your hard drive, where to store the project and its files (2) and select the project type (3). In this case we setup a website. Then click the Create button (4) in order to create the project:

Your project is now loaded in Wappler, so let's create a file. Open the File Manager:

And create a new HTML file. We will call it index.html:

Now you can open your file and start working on it:

Switching Projects

There are two ways of changing the project you are working on in Wappler.

  1. You can open the Project Manager and select the project you want to open:

  1. You can use the select menu, located in the bottom toolbar:

Removing Projects

You can remove the projects from the Project Manager by clicking the remove button which appears on hover:

A confirmation window will appear, just confirm that you want to remove this project from Wappler:

Bootstrap 4 Visual Designer

Build responsive, mobile-first projects on the web with the world's most popular front-end component library.

Layout Basics

Open your HTML file, and add App Connect and Bootstrap 4 frameworks to your page. Please check the How To Guide of the documentation to see how to include them.

First, let's add a container. Containers are the most basic layout element in Bootstrap and are required when using its grid system. Click on the add element button on your page:

Select Container:

Then, click the insert inside button:

The smart insert element dialog suggests you the most suitable elements to add inside the container. In order to create a multi-column layout using the Bootstrap grid, we should add a row inside the container:

Then, inside the row we should nest the columns. Click the add inside button:

And select column:

And now we have the column inserted in the row, on our page. You can see the column bot on the page, and in the App Structure Tree. Select it by clicking it either in Design view or in the App Structure tree:

In order to change the default column size check the properties inspector and under Column Properties (1) you will see the Column Sizing options (2). Here you can assign different column sizes for all device sizes or define a specific size for each of them:

We set the default size to 12. This means that if no specific size is defined for any of the screen sizes the column will always take 100% of the row width:

However if you wan want to have the column width to change on different devices, click on the device icons (1) and set specific column sizes (2) for each of them:

You can nest your content inside the columns. Let's add something simple inside. Click the add inside button:

Open the basic elements category:

And select paragraph:

Double click and edit the paragraph - just add whatever text you like inside.

You can add more columns, inside the row either by selecting the Insert After button (1) or by duplicating the current column, its properties and its contents using the Duplicate button (2):

We just duplicate the current column and you can see the new column in Design View and in the App Structure tree:

This way you can add as many containers with rows and columns, as you need for your page layout.

Creating Navbar

There are two ways of setting up a Bootstrap 4 Navbar on your page.

  1. You can use the predefined navbar templates.

Click the add button in Design View:

Open the Headers category:

You will find the different navbar templates here. Just select any of them and it will be added on the page. Then you can customize its options:

  1. Create one from scratch.

Click the add button in Design View:

Open the Navbars category:

Add Navbar:

Click the add inside button in order to add content inside the Navbar:

And add Navbar Brand:

Double click it to edit its default content and enter your brand name there:

After the brand we need to add the Navbar Toggler element and the collapse region which it toggles. While the brand element is selected, click the Add After button:

Select Navbar Toggler:

The toggler element also adds the collapse, which holds our navigation links. Click the add inside collapse element button:

Open the lists category:

Add Navbar Nav:

And then inside the Navbar Nav you can nest your links. You can do this in design view:

You can add more links in the App Structure tree as well:

Just click a link, select insert after and add a new link:

Style your Navbar by setting up the theme:

Choose on which device size it should be expanded. Just click on the device icon, and check the expand checkbox:

Select the Navbar position - choose from default, fixed top, fixed bottom or sticky top:

You can align the links in the Navbar, by selecting the Navbar Collapse element (1) and then adjusting the Justify property (2), so this allows you to align them left, right or center:

Using Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. We will show you how to insert cards in your layout.

We have an empty column, so we select insert inside:

Open the Cards category:

You can find different Card layout templates here. Just select the one you need:

You can see the card added in on the page, and you can also explore its features in the App Structure, where you can also add content to it, remove elements and style it:

Let's select an image for the card. Click the card image element and browse to an image source:

Then, you can double click the Card header and change the default text:

You can add a footer to the Card, by selecting its body and clicking the add after button:

You can see that the most suitable elements are suggested in the insert dialog. Select card footer:

You can add some content in the footer, just click the add inside button:

Editing a card and its elements' properties is easy. Just select the card (or any of its elements) and you will see all of the available properties in the properties inspector:

Working with Forms

You can quickly design your forms using Bootstrap 4 tools integrated in Wappler. In order to create a form first select where to insert it, in our example this is inside a Bootstrap 4 column:

Open the Forms category and select whether to use any of the predefined form templates, or create a new one from scratch. We select to create one from scratch, so click Form:

You can see the form added on our page. Click add inside in order to add form elements:

Open the Forms category:

And then inside it, select the element you want to add. In our example this is a text input group:

You can explore its structure in the App Structure panel:

Select any of the elements, like the input label and its properties will appear in the properties inspector. You can change the ID, Class, Size or Text here:

When you select the input its properties appear. Customize its type, name, placeholder text here. Setup its size and the rest of the properties:

You can delete a form element either in design view (1) or using the App Structure toolbar (2):

In order to add another element just select the current one, and click the insert before or insert after:

Open the forms group, and select the next element to be added:

You can find it in Design View and App Structure:

That's how to add a form and add different elements inside it. You can add unlimited elements inside the form - just customize the element properties as you need.

Using Modals

The first thing you need to do is to create the modal on your page. Right click App in the App Structure tree and open the modals category:

Then select Modal:

In order to be able to see the modal in Design view and add content in it, just select in the App Structure (1). You can see the modal properties in the properties inspector (2). Setup the settings as you like, then you see the changes directly in Live view:

Add elements in the modal body, by clicking the add inside button:

You will see the components you can add inside, suggested in the context popup. Just add whatever you need inside the modal, customize its settings and you are ready to go:

In order to open the modal you need either a link, a button or an anchor button. Select the button (or link) which should trigger the modal (1) and open the action toggle menu (2):

Select Modal:

And then select the modal, which you want to open by clicking the button:

Server-side Components

Wappler includes Server Connect - a powerful back-end framework which offers full visual programming without any coding. It includes many server-side workflow components. Connect to your databases, create advanced database queries, send emails, manage files and folders, process images or create login systems fully visual!

Connecting to a Database

It is really easy to connect to your database, using Wappler. The first thing you need to do is to open the Server Connect panel:

If you have not selected your server model when defining your project, then you will see a message saying that you need to specify one. Click the project options button:

Open the server model drop-down and select one - PHP, ASP.NET or Classic ASP:

In order to connect to a database, we also need to setup a target. You can do this by clicking the Targets menu (1) and then the Add new target button (2):

Enter the target name and URL:

Then select the Target Type. This can be a local folder on your computer, where you are running some server (WAMP, MAMP or IIS) or a remote server which you connect to using the required FTP details:

If you select FTP, then you need to enter the address, port, username, password and the remote directory (if this is required). You can test the FTP connection by clicking the Test Connection button:

In our case, we are using a local folder and a WAMP server, so we just selected Local Folder and setup the paths:

When you select a server model server connect shows you the toolbar and panels. The first thing you need to do, is to create a Server Action. Server Actions store your workflows, and execute the steps you visually set up. The toolbar allows you to create a server action, create a folder or delete a server action/folder. For a better structuring especially on large sites, using many server actions we recommend to group your server actions in folders. We create a new folder:

We call it "data". Inside it we create a new server action:

We add a name for it: "records"

When you create the server action you will see the action steps panel, with its options. Right click steps in order to add a new step:

We open the database actions menu:

Then we Add Database Connection:

Before clicking the database connection options, we need to make sure we selected the right target. This is the target we've already setup earlier:

Click the Connection Options button:

The Database Connection options window appears. Select your database type:

Then the database options will be displayed. Enter the sever address, port, username, password and database name:

You can test the connection by clicking the Test Connection button. If everything is OK you will see the Connection OK notification:

Click the Save button, in order to apply the connection settings:

You can see your connection in the server action. The blue link button after the connection name means that this connection is linked to your current site and you can reuse it in all of your action files by just loading it using the folder button:

Click the Save button in order to save your server action:

You will see a notification saying that the server action has been successfully saved:

NEXT: Learn how to setup a database query using this database connection

Creating Database Queries

After you created your Database Connection, now it's time to setup a Database Query. Right click the Database Connection step:

Open Database Actions:

Add Database Query:

Then click the Query Builder button, in order to setup your query:

Open the database tables drop-down and select a table:

If you want to add all the table columns to the query, you don't have to do anything else - the table is already added. If you want to add specific columns to the query, just select them and click the add button:

Then, click the Conditions tab:

Here you can setup your query conditions, just select a column:

Then select a condition:

And add a value for the condition:

You can add multiple conditions or groups of conditions to your queries:

Just select the operator for the new condition: AND or OR (1) and then setup your condition (2):

You can add sorting options to your query, select the Sorting tab:

Select the column you want to sort the query by (1) and add it to the sort list (2):

Then just select the sort order:

You can see the generated code for your database query, which you generated fully visual:

Click OK in order to apply the query options:

Do not forget to save your server action:

You can preview your query results by selecting the server action and then clicking the Open in Browser button:

The results will be loaded in your browser:

NEXT: Learn how to bind the data on your page

Binding Data on the Page

After you created your database query let's bind the data on your page. First you need to add the server action containing your database query to your page. Select App in the App Structure and click the add new component button:

Open the Data category:

And select Server Connect component:

Once you add it, select your server action:

The Server Action picker appears. It shows the server actions defined for your site. Click your server action containing the database query (1) and then click the select button (2):

Now when the page loads, the server action with the data will also be loaded. We need to bind the data on the page, so we can see it. We will create a simple data table, showing the query results. We click add component in a column on the page:

Open the Tables category:

And add a Table:

The table contains some dummy static data. You can see it both in design view and in the app structure.

We only need one table row, so we remove the rest of them. Then, we select Table Body (1) in App Structure and click the Make Repeat Children button (2). Repeat children will repeat the children in a parent>child structure as many times as records are returned by the query. A good example of a parent>child structures are lists (ul/ol), tables (body>row) or any other HTML structure having children elements inside a parent one:

Then, choose an expression for the repeater:

The expression should be the database query in your server action - the one we included on the page. So select the query and then click select.

You see the table rows are repeated as many times as records are returned. Table cells have static data, so let's bind the dynamic data instead. You can do this in two ways - one is to double click in the table cell and select the text:

And then click the dynamic data button:

Then under the repeat component select the binding which you want to insert in this cell:

You can see your data rendered immediately:

The other way is to select the cell in the App Structure, and then use the dynamic data picker for Text:

Then just select the binding you need here, and click Select:

Do this for all of your table cells. Once you finish binding the data, you will see it rendered in Design View:

NEXT: Learn how format dynamic data

Formatting Dynamic Data

There are different data format options, which you can use to format different data types on your page. The format options depend on the data type - text, numbers, dates etc. In order to format a dynamic value on your page, first select it either in design view or in App Structure:

Then, select the dynamic data picker:

And click the Data Formatter icon for the dynamic value:

When the Data Formats dialog appears, right click the value and you will see the available format options for this data type:

In our example we will use the Upper Case format, available under Conversion group:

You can see the formatting option applied, under the dynamic value. You can add more than one format options this way. Click select when you are done:

And then click select in order to apply the selected formatting options:

You can see the changes immediately in Design View:

Filter Data with Text Input

You can create a real-time search with Wappler - so the results will be filtered as you type!

We created a database query and displayed the results on our page. You already know how to create a database query and how to bind dynamic data on your page.

Let's add a dynamic filter option now. First, select your Server Action in Server Connect panel:

Then under Globals right click $_GET:

And create a variable:

Let's call it "filter":

Select your database query (1) and click the query builder button (2) in order to open its options:

Go to Conditions tab:

Select the column which you want to search into / filter by:

Then select the condition. In this case the "Contains" suits best, so whatever is entered and it is contained in the productName column will be displayed:

Select the dynamic value picker:

And select the filter GET variable, which we created:

Click OK:

And save your server action:

Now back to our page. We inserted a simple text field on the page - it will be used to filter the data.

In app connect panel select the server connect component, used to bind data on the page (1) and you will see our GET variable "filter" (2) listed there under Input Parameters. Click the dynamic data picker:

When the data picker dialog appears, find the text input and select its value (1). Then click the select button (2):

Save your page and you are done:

Now you have a field which filters the data as you type:

Insert Database Records

Creating an insert record form with Wappler is an easy task as Wappler generates the form for you. The first thing you need to do is to create a server action, so open the Server Connect panel:

Then, create a new Server Action:

We call it "Insert":

Then right click steps under Action Steps:

Open Database Actions:

And add Database Connection:

Load your database connection, or setup a new one if you haven't done this yet:

Then right click the database connection step:

Open Database Actions:

Add Database Insert:

Click the Insert Options button, in order to setup your database insert action:

Select the database table, where you are going to insert records:

All of the database table columns are added. An input field will be generated for each of the column in the Insert Step. If you don't want to generate an input field for any of the columns, just select it and click the Delete icon in order to remove it from the list. Click Ok when you are done:

Save your server action!

The back-end part of the Database Insert is done. Now let's generate the form. We want to insert it in a Bootstrap 4 Column, so we select the Insert Inside button:

Open the Generators category:

Select Bootstrap 4 Form Generator:

In the Form Generator window click the select button:

And select your Insert Server Action, the one containing the Insert Step:

You can see a list of the form fields which will be included in the form. Select the form layout - horizontal, vertical or inline:

You can change the Name, Label and Type for each of the fields in your form by double clicking any of these properties:

The type drop-down holds all of the available form field types:

You can add a new form input, by clicking the Add button:

Customize the added input. In our example we add a Cancel button, which resets the form:

Click Ok in order to place the form on the page:

And here is the form in Design View:

You can customize each of the form groups and fields settings in the Properties Inspector. Edit or remove the labels, placeholders or help texts for each field:

We will show you how to clear the form fields, after the form has been successfully submitted. Select the form in App structure (1) and add new dynamic event (2):

Select Server Connect:

And then select the success event:

Click the dynamic event picker, in order to select what needs to be done on success:

Under your form select Reset and click the select button:

And you are done. As soon as the submit button is clicked and the data has been submitted to your database, your form fields will be cleared.

Security & Login

Create a complete login system for your site. Restrict all your pages and data APIs using the Security Provider tools, integrated in Wappler.

Setup Site Security

With the Security Provider you can define the security settings (single user, users list or database users) for the whole project and reuse them on all of your pages. We will go through each of the available options - from single user to database users and explain how to set them up.

The first thing you need to do is to navigate to Server Connect panel, and create a new server action:

We will place the server action inside a folder so it is easier to navigate later:

We call the folder - Security:

Create a new server action inside it:

Let's call it logIn. Right click steps:

Open the Security Provider group:

And add Security Provider:

We are going to use it everywhere in our site, so we call it siteSecurity:

Security provider step defines the user login options for your site. We start with the Single Security Provider type:

This is the simplest security option. Using it, you just define a single user for your site - so just enter the username and password here. This is very useful, when your site only has one user and you don't need database to store usernames and passwords:

The next option is Static Users list. Database is not required here as well. You define a list of users and permissions (optional) for them. Open the type menu, select Static (1) and click the Users and Permissions button (2):

First define a new user:

Enter the user's login details and click OK:

You can add as many users as you wish. Selecting a user from the list, allows you to edit his login details or to remove him from the list, using the buttons in the toolbar:

You can setup different permissions and assign users to them. Later you can use these permissions to restrict access to the pages, depending on the permission or show/hide data on the page. Click the Permissions tab:

Then create a new one:

Add a name for this permission (1) and then select which users to assign it to (2):

Click OK:

Add as many permissions as you need, assign users to them and click OK when you are done:

The last and most advanced Security Provider type is the Database one. Before adding it you need to setup a database connection and add a database connection step in the server action. Then add the security provider step and select Databse from the type dropdown:

Select your database connection in the Connection field:

And open the Users & Permission options:

In the users panel, select the database table which stores your users data:

Select the identity column of your table:

Then select the table column which stores the usernames - the ones you ask users to enter on the login screen:

Do the same for the password field:

And you are done. If you need, you can add permissions and conditions for them. Click the Add new permission button. Note that this step is not mandatory, so if you don't need different permissions for your site just skip it.:

Add a name for this permission (1), and select the database table which you will use to check permissions (2). That is really useful if you have 2 different database tables - one for logins, and another which stores just the user ids with the permissions assigned to them. And then select the identity column of this database table (3):

Add a condition for this permission i.e. when should this permission apply and for which users:

Select a column, condition and a value. In our case, we select - when the column role equals "editor". So the permission we created will affect all users which permissions are set to "editor":

You can setup as many permissions and conditions as you need. Click Ok when you are done:

When you are done setting up any of the available Security Provider types you should click the "Link" icon, so that the security provider will be linked to a separate file, which will be available for the whole project:

Select Yes when the notification appears:

And Save your action file. You are done, now you can use this security provide to log users in, protect your data APIs and protect your pages.

NEXT: Learn how to create a login page and redirect users after they log in successfully.

Create Log In Page

Now after you added the security provide in your server action let's add the login functionality. Right click the security provider step (doesn't matter which security provider type you are using):

Open the Security Provider group:

And add Security Login:

In the login properties you see the Username, Password and Remember fields. Their values contain predefined POST variables - these are just the names of the form fields which this step expects. Of course you can change them, but the easiest way is to create a form with fields using these names instead of changing them later:

Select your Security Provider instance:

Save your server action, as we are done with the server-side part.

Then let's go to the page. We included App Connect and Bootstrap 4 on our page already. Click the add button, where you'd like to create the login form:

Create a Form which contains 3 inputs - username, password and a checkbox. The first field has a Name and ID of "username" and Type "text":

The second field has a Name and ID of "password" and Type "password":

The third input is a checkbox with a Name and ID of "remember" it also has a Static Value 1:

We also created a button and its Type is "submit":

Now, select your form:

And change its method to POST:

Then, open the Handler menu (1) and select DMXzone Server Connect (2). This is where we connect the form with the back-end, which expects the values of our form fields:

Click the select server action button:

And select the login server action:

We are done with the login part. Let's setup the redirect on success and an alert message, when wrong user details are provided. Select App in the App Structure and add a new component:

Open the Browser category:

And select Browser:

Select your Server Connect Form (1) and add new Dynamic Event (2):

Open Server Connect category:

And select on Success event:

Click the dynamic action picker button, in order to assign an action on success:

Under the Browser component, select Go To and click the Add button:

Enter the page where the user should be redirected after a successful log in. If you are entering a static URL, make sure to wrap it inside single quotes like: 'your-page.php'. If you are using the dynamic data picker to retrieve the URL from a dynamic data source, then quotes should not be used:

With the form still selected add a new Dynamic Event:

Open the server connect category:

And select on Unauthorized. This event is being triggered, when wrong user details are provided:

Click the dynamic action picker button:

Under Browser select Alert(1) and click the Add button (2):

Enter the alert text wrapped in single quotes, like "Wrong login details!":

And you are done! If the user provides correct login details he will be redirected and if the login details are wrong the alert will be displayed.

NEXT: Learn how to protect your pages and redirect unauthorized or not logged in users.

Restrict Access To Pages

After you created your login page, now you will learn how to restrict access to your pages.

First create a PHP or ASP page (depending on your server model) and save it. Security restrict page does not work on plain HTML pages:

Select App in the App Structure (1) and click the Security Provider Enforcer button (2):

When the dialog appears enable Restrict Access:

And select your security provider from the dropdown. Only the security providers which are linked for the entire project will appear here:

If you need to restrict access and enable access only for users belonging to a certain access level, then select it:

We want to allow access for all the logged in users, so we don't select any permission here.

Select a page, where the not logged in users should be redirected to if they try to load this page:

Then select a page, where the unauthorized(with no access permissions) users should be redirected to if they try to load this page:

Click OK and you are done. Your page is now fully secured and cannot be accessed from not-authorized users.

NEXT: Learn how to secure your Server Actions.

Secure the Server Actions

Using the security provider tools you can secure your server actions so that no data will be shown to not-authorized users, if they somehow access the link to this server action.

Here's our server action, which contains a database query:

Right click the step before the query:

Open the security provider menu:

And add security provider:

Load the same security provider, which you defined for the login action:

Then right click the security provider step:

Open the security provider group:

And add Security Restrict:

Select your security provider from the dropdown:

And select if this server action requires any specific permissions. In our case it doesn't require any permissions so we select - All Logged In:

Save your server action:

And you are done. You won't be able to preview the server action results (using the preview in browser button) as you are not logged in.

NEXT: Learn how to log out users using a button.

Log Out Users

In order to log users out you need to create a server action and link it to a Log Out button, so that when clicked it logs users out.

First, create a new server action:

We call it logOut:

Right click its steps:

Open security provider group:

And add Security Provider:

Click the load icon (1) and select the security provider you linked for your site (2):

Then right click the security provider step:

Open the security provider group:

And add Security Log Out:

Save your server action and we are done with the server-side part:

On your page select App in the App Structure:

Add new component (1) and open the Data group (2):

Add server connect:

Then click the select server action button:

And select the logOut action we've just created:

This is really important - do not forget to turn the NO AUTO LOAD option on. This will prevent server action from auto executing when the page loads. You don't want to load the log out action, when the people load your page, right?

We want it to run only, when the log out button is clicked. So - select the log out button (1) and add dynamic event (2):

Select mouse:

And then on click:

Click the dynamic action picker button:

And under the logout server connect component, select Load (1) and click the Add button (2):

Click the select button, when you are done:

Now, as we are done setting up the log out action and button - let's add a redirect when the user logs out. Select App in the App structure:

Add new component (1) and open the Browser group:

Add Browser component:

And select your logOut server action:

Add new dynamic event:

Open the server connect group:

And select on Success:

Select a dynamic event to run on success:

Under the Browser component select Go To (1) and click the Add button (2):

Enter the page where users should be redirected on log out. If you are entering a static value, you must wrap it in single quotes like: 'page.html':

And you are done!

Get Logged User Details

You can get the logged in user details by filtering the user table, by the logged user ID. First you need to create a new server action:

We call it userDetails:

Right click steps:

Select Database Actions:

And add a Database Connection:

Load your database connection:

Then right click database connection step and open Security Provider:

Add security provider:

And load the security provider instance, which you are using for your site:

Right click the security provider step and open security provider:

Then add security restrict. This is to protect our data from unauthorized access:

Now as the protection is set up, let's add a database query. Right click the security restrict step:

Open Database Actions:

And add database query:

Then click the query builder button:

And add the table storing your users details:

Open the conditions tab:

And select the user ID column:

Select equal:

And select the dynamic data picker button, to select a dynamic value:

This dynamic value must be the identity returned by the security provider:

Click select:

And click ok in order to apply query settings:

Save your server action:

Now on your page, in app connect panel add new component:

Open Data:

And select Server Connect:

We call it userdetails (1) and then click the server action button (2):

Select the userDetails server action, and click Select:

Then, on the page - double click where you need to populate some of the users data and select the dynamic data picker:

Under the userdetails server connect, select the data you want to bind and click the select button:

Do the same for every binding you need to insert on the page:

Then, when the user logs in he will see his details: