Modern web is no longer limited to static websites. The Internet has moved everything into the cloud, and evolved into dynamic web applications using big data, real-time updates, user locations, user preferences, artificial intelligence, and much more. With support of latest technologies, modern websites are unique to each user.
To simplify the development of modern web apps and robust websites, the popular DIY (Do It Yourself) website builder platform Wix has launched Wix Code, a simple way to create complex websites and web apps using its drag-and-drop interface.
In this tutorial, we will learn how to use Wix Code to create a simple web app.
What is Wix Code?
Wix Code is an integrated development environment (popularly known as IDE among web app developers) to easily create powerful web applications with custom logic and stunning user interface (front-end design). It offers the easiest way to build web applications of all kinds.
Created for all types of users — website creators, developers and designers — Wix Code offers enhanced capabilities such as collecting and storing data, providing front-end interaction, back-end functionalities and much more. You can now include advanced features in your web app without custom coding. Even non-developers can easily build web apps using databases, user interface components, custom input controls through its drag-and-drop technology.
With Wix Code, you also need not worry about the hassle of setting up your web server and maintaining web environments. Just focus on your application logic, and Wix Code handles the rest for you.
Using Wix Code, you can easily create features that until now required complex coding, eg: user registration, data collection, dynamic interaction, using APIs to store and retrieve database, etc. For instance, you can create a web app for your restaurant that allows your customers to place orders online. Imagine the power that a DIY coding interface offers to small businesses and entrepreneurs who have an exciting idea to build an online website or app, but cannot afford a coder / programmer to build their web app.
Create an Event Registration Web App Using Wix Code
For this tutorial, we will create a simple web app that allows the users to register for an event using a simple web form that saves the input information in a database accessible only by the administrators. This is a simple example of storing information via submitted forms. You will have to simply click and drag the elements, and change the configurations to get your custom database and registration form working in no time. It is a basic example, but the scope is limitless as you can add more data fields and complex logic on your website or app.
Log in to your Wix account dashboard, go to Wix Editor, and start the steps illustrated below.
1. Turn on Wix Code Developer Tools
Wix Code adds advanced functionality to the Wix website editor, allowing you to create a dynamic website. To turn on Developer Tools, select the checkbox in the Tools menu of the Wix Editor. It will add more sophisticated options to the Editor so that you can make use of the Wix Code features.
2. Create Database Collection
For a dynamic web app, we need a database to store the information. Create a database collection with the required permissions to control what users can do with the data.
To create a database collection, follow these steps:
- In the Site Structure sidebar, click the + (plus) icon next to Database and select New Collection. In the pop-up screen, click on Start Creating.
- In the Create a Database Collection screen, give a name to your database and select the intended use. Consider whether you want your users to be able to read, write, modify, or delete your data entries. Since we are going to use a form, choose Form Input, which will allow anyone to submit to the database, but allow only an admin to modify the entries.
- Click Create Collection. You can add data using the Content Manager, but we do not need this for our example as the database is intended to be populated by users only.
3. Configure Database Collection
For our example, we want visitors to be able to register by submitting their information via the web form. We need to add a field for each piece of information we want our users to submit. For this registration form, we will include the following fields: name, email, phone number and a comment textbox field.
To set up a collection, follow these steps:
- In the Content Manager, click the + (plus) icon to add fields to your database.
- Set up the fields to match the information content by selecting the right data type.
- Define a new field for each of our information elements.
4. Design Web Form
Now, we need a web form where our users can register for the event. Your form must include elements to enter the information we want to collect.
To add user input fields to the form, follow these steps:
- Go to the Add menu and select User Input.
- Drag elements from User Input onto your webpage to design your registration form. In our case, we will have a text input for name, email, and phone number, and a textbox for the comment field.
5. Configure Form Elements
Now that we have added all the User Input elements, let us configure each element using its Settings panel, which allows us to set the type of the input, placeholder text, whether the input element is a required field, etc. For this, simply select a User Input element, click on the Settings icon, and use the options to configure it.
6. Add & Configure Dataset
To save our form data, we need to connect the form input with our database using a dataset.
To add a dataset to your webpage with the registration form, follow these steps:
- Go to the Add menu. Click on Database, and then on Dataset.
- Select the dataset and click Manage Dataset to open the Dataset Settings panel.
- Under Connect a Collection, select your database collection.
- Select Write-only for the Mode as we do not want our users to modify the data once submitted.
7. Connect Web Form Elements
Now, we need to connect the form fields to the appropriate data fields in the database collection. Connect each form input field to the dataset we have defined earlier. You will have to select which field in your database collection should store the input data.
8. Create a Submit Button
Once you have created and connected all the form fields with the database via the dataset, add a button to your page, connect it to the same dataset as the other elements, and define its click action (Link connects to) to Submit.
Here are the steps to create a Submit button:
- Add a button to your page and change its text to Submit/Register.
- Click on the Connect to Data button, and select your dataset.
- Under Link connects to, select Submit.
- Under When successful, navigate to, the default is Stay on this page. We want our users to know they have successfully registered. So, we will choose the A link… option to send users to another webpage confirming their registration. Make sure that you have already created the webpage where you want to redirect users on successful registration.
9. Test Your Registration Form
Now, turn on the Preview mode and test your form with some dummy registration form submissions. The dummy testing data will be saved to your Sandbox Database, visible only in the Preview mode. Check if all the fields are populated each time you submit the form. If not, you must check the settings to configure and connect all the fields. Keep testing until your app is functioning properly. Do not worry. The data added during testing will not be visible once the web app is live.
10. Make Your Registration Site Live
Now, it’s time to publish your website so that users can register for the event using the registration form. In the Wix Editor, click Publish to publish your website. Publishing your website creates an empty version of your database collection with all the fields that you have defined. The registration form content submitted by users is saved to your Live Database. You can check the form entries by viewing the database collection through the Wix Database app in your account dashboard.
With these steps, you have successfully created a web app for registration to your event. If you want a webpage to display the list of people who have registered for the event, the process is fairly simple, quite similar to the form submission page, with the difference being the dataset being a read-only option to read the database and populate the list. Here is a detailed tutorial for this on Wix Code tutorial website.
Wix Code: Web Apps Without Coding
Apart from the function illustrated in our example, you can use Wix Code for much more complex functions and add lots of custom features as per our business logic and requirements. Here is a quick list of functions that you can execute using Wix Code.
- Create & Manage Database: Manage content and user information in a database and use it on your website.
- Create Dynamic Webpages: Along with a database, you can create dynamic webpages with unique URLs for SEO compatibility.
- Custom Interactions: Engage your users with webpage interactions such as sliding, toggling, hovering and more.