NOTE: This is still work in progress. More content is yet to be added to this list!
As many new, inexperienced users start using Wappler, it can be confusing to get used to Wappler terminology and features. We are working on a Reference list for the features available in the UI, especially the Wappler specific ones. This way users can open this list and look for the term(s) or option(s) which are not clear for them.
We have currently added the fundamental terms, Wappler UI and some of the Server Connect features to this list and we will keep adding more features daily.
We will eventually integrate (where possible) these as help text in the Wappler UI when the list is finished.
Please review what we have done so far and let us know what do you think.
This reference provides detailed description of the terminology used in Wappler.
Fundamental Terms
The following terms are widely used across Wappler and its tutorials. They are fundamental for using Wappler and understanding how it works.
Framework
A framework, is a platform for developing software applications, web sites and apps. A framework usually includes predefined elements or functions which the developers can re-use for faster and easier development.
Front End / Client Side
Front end, or client side is the interface which the users see in their browsers, or on their devices when previewing a web site or app. The front end of your web site or app is made of HTML, CSS, and JavaScript and users can view and interact with it.
Back End / Server Side
The back end handles the ‘behind-the-scenes’ functionality of web sites and applications. It’s code that connects the web to a database, manages user connections, and powers the web site or application itself.
App Connect
App Connect is a high performance front end framework developed by Wappler’s team. It’s just as powerful as React, Angular and VueJS but much easier to use thanks to its custom component structure and visual integration. App Connect is the link between the front end of your web sites and apps and their back end.
Server Connect
Server Connect is a back end framework, developed by Wappler’s team. Server Connect offers visual programming without any coding. It includes many server-side workflow components, so you can connect to your databases, create advanced database queries, send emails, manage files and folders, process images or create login systems, fully visually.
Bootstrap 4
Bootstrap 4 is an open source front end component library. It is used for building responsive web sites, apps and interfaces. Bootstrap 4 includes a responsive grid for building your layouts and also many predefined components such as buttons, navbars, inputs and many more.
HTML
HTML stands for Hyper Text Markup Language. It allows the users to create and structure sections, paragraphs, headings, links, and other elements for web pages and applications.
CSS
CSS stands for Cascading Style Sheets. CSS is a language for specifying how documents are presented to users - how they are styled, laid out, etc., so basically CSS defines how your web sites or apps look.
Project
A project in Wappler is the definition of the web site or app you are working on. Every project is located in its own directory on your hard drive, with all its settings stored inside this directory.
Target
A target is a local or remote location for the files that belong to your project. Wappler targets provide a way to organize and manage all of the files in your project, upload your site to a web server or maintain the site by transferring updated files whenever you save them.
Web Server
A web server stores and delivers the content for web sites - such as text, images, video, and web site or app data. The users access web sites by using a web browser, which then loads and displays the requested content to them. Web servers can run locally, on your computer or on a remote web hosting, provided by any hosting company.
Web Hosting
Web hosting is a service that allows anyone to post a web site or app onto the Internet. Web sites are hosted or stored, on special computers called web servers, where the internet users can access the web site or app.
FTP
FTP is a way to transfer files online. FTP is used for moving your web site files from the computer you’re working on to the server where it is hosted.
Database
A database is an organized collection of structured data, stored electronically on a server. The data can then be easily accessed, managed, modified, updated, controlled, and organized. Most databases use structured query language (SQL) for writing and querying data.
Wappler’s Interface
Left Side
The panels and options located on the left side of Wappler window:
File Manager
The File Manager Panel allows you to manage your local and remote files and folders.
Git (Version Control)
The Git panel provides version control options in Wappler. You can create a Git repository for every Wappler project you wish to keep track on. Having a repository is great way to have a good backup of all your project files and their changes.
Server Connect
The Server Connect Panel is where you define your server workflows, visually. Connect to your databases, work with dynamic data, send emails, manage files and folders, process images, create login systems and more.
Routing
The Routing Panel allows you to create SEO friendly URLs for your web sites, using the visual URL Rewriting options.
Assets Manager
The Assets Manager Panel shows the image assets of your current project. You can directly drag images from any location on your computer to the assets panel to add them. You can also group your assets in different folders, change the preview size and more.
Search
Using the Search Panel you can do a site-wide search, or search and replace. The search results are displayed in the panel, so you can see them directly.
Projects Manager
The Projects Manager is where you define your projects or manage the existing ones. The project manager also supports importing Dreamweaver site definitions (.ste files).
Options
These are the general options for Wappler. Here you can customize different settings such as - Code Editor, Design View, FTP, System and more.
Right Side
The panels and options located on the right side of Wappler window:
App Structure
The App Structure Panel is one of the most important part of Wappler and probably the most used one. This is where you design the web site/app structure and appearance. Add elements and components on the page, adjust their dedicated properties in the properties panel.
Design
The design panel provides you with visual tools to style your page content. Here you can adjust the layout, position, text, background, colors, borders and many other CSS properties for any element on the page. You can design for different screen sizes, which creates the required styles and media queries for the selected device.
Styles
The styles panel allows you to write your own custom CSS rules, if you ever feel the need to write your own CSS by hand.
DOM
Unlike the App Structure Panel, which shows you only the components and properties of the frameworks you are using on your page, the DOM Panel gives access to all common HTML elements and their properties or attributes. This is where you will find properties that were not available in the App Structure panel.
Design Canvas
The options located in the center of the screen, related to the Design Canvas:
Design View
Probably the most important part of Wappler’s interface, where you see your design fully rendered. Here you can see how your web site or 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, and so much more.
Code View
Wappler generates clean semantic HTML, CSS and JS code, which you can modify directly in Code View, if you feel comfortable to do so.
Split View
Split View offers a mix of Design and Code views. You can edit the code and see the changes directly in the design part, or vice-versa.
Top
The top toolbar of Wappler offers you different options related to the design and site/app preview:
Undo
Undo the last change. You can undo all changes made since the last page load.
Redo
Redo an undo change.
Responsive Options
You can preview how does your site or app looks on different devices, using the responsive options in the top toolbar.
Toggle App Connect Mode
Turns off App Connect, so none of the dynamic data and attributes won’t be rendered.
Toggle Preview Mode
Disables editing in Design View and the page is served as in a browser, where you can click and interact with the elements on the page just as in your browser.
Open in Browser
Opens the current page in your default web browser.
Reload Design View
Refreshes Design View.
Bottom
Here you will find the publish panel and console. You can define your project settings, targets and publish or sync your site/app to the selected target:
Project
The project you are working on. You can change it by selecting another project from the popup dialog.
Project Settings
Here you can setup your project settings, like name, default frameworks included, assets folder, styles file and targets.
Target
The active target you are working on. This is where your project files will be published and where the saved files will automatically be uploaded.
Check
Checks the connection to the selected target. The results can be viewed in the Terminal, when it’s open.
Get
Gets the project files from the selected target.
Publish
Publishes the project files to the selected target.
Abort
Aborts the current action - Get/Publish if it’s running.
Server Connect
Basics
Server Action
A Server Action is a back end workflow that you build in the Server Connect panel. Here you define what your web site or app logic is, using the Server Action Steps.
Server Action Steps
These are the steps of your server action workflow and they are executed in the order they are defined. Using the Server Action Steps you can visually connect to your databases, create advanced database queries, send emails, manage files and folders, process images or create login systems.
Output Action Step
Some of the server action steps have an Output option available. Enable this to make the value(s) returned by this step available on the front end. Output is enabled by default for the database queries, as in most of the cases you need the query results to be available on the front end.
Disable Action Step
You can disable a specific server action step. The selected step won’t be executed when your server action runs. Useful for testing and debugging.
Globals
Globals or Global Variables is the place where you can define the global GET, POST, Session, Server and Cookie variables for your server action.
$_GET
$_GET variables are used to pass data from your page to the server action, for example to filter a database query, creating real-time filters etc. They can receive their values from inputs, URL parameters or any other dynamic value from your page.
$_POST
$_POST variables are used to collect form data after submitting a Server Connect Form. Here you can import the inputs of your HTML form and use them to insert database records, update database records, log users in, send email and any other action related to submitting a form.
$_SESSION
Here you define the server sessions which you want to set a value to or use in your server action.
Core Actions
Comment
Use this step to add a comment in your server action. This won’t affect the functionality of your server action.
Condition
Use this step to add a condition in your server action logic. Use an expression for the condition and select what should be executed if the condition is met
While
Use this step to execute specific step(s) as long as a specified condition is true.
Repeat
Repeat specific step(s) as many times as set in the repeat expression.
Set Value
Use this step to create a variable and set a value to it.
Set Session
Set a value to a server session, defined under $_SESSION.
Remove Session
Remove a server session value.
Response
Use this step to return a specific HTTP response status/code.
Database Actions
These are actions related to using a database, such as: connecting to a database, inserting and manipulating records in your database table.
Database Connection
The Database Connection step provides you with options to connect to your database. Once you add this step to your server action, you can add other steps, which rely on a database connection such as: database queries, database actions, user logins etc.
Database Query
This step allows you to create a database query, which returns all the records which match the conditions.
Database Paged Query
This step allows you to create a database query, which can be limited to show certain number of records per page. The results can be used with paging controls on your page.
Database Single Query
This step allows you to create a database query which returns a single record. That’s really useful in cases where you filter your data and expect a single result to be always returned, like retrieving the logged in user info, or a product detail etc.
Database Custom Query
Use the Custom Query in Server Connect in order to manually add a custom SQL query. You can define your own parameters, edit the schema and metadata and preview the results.
Database Insert
Use this step to insert records in a database.
Database Update
Use this step to update records in a database.
Database Delete
Use this step to delete records from a database.
Database Multi Insert
Use this step to insert multiple records in your database.
Database Multi Update
Use this step to update multiple records in your database.
