Form-based WebApp on Joomla!
We will create a simple yet expandable example of a Form-based WebApp on Joomla! CMS.
This simple example is using a form input from the user, doing a simple math operation on the server, and returning the result to client via AJAX method.
At a glance, we will install 2 Joomla extensions, create a custom html module, a page with the module and a link to it, a custom html file and a custom php file.
This article will use Joomla version 4, but should be applicable to version 3 as well. Simple WebApp will look like below image, except since this article will not cover CSS, form’s style will be different.
Installing Necessary Joomla Extensions
We will install 2 Joomla extensions. These can be installed either by Joomla Extensions Directory (System>Install>Extensions), or by the links below.
First one is Sourcerer, which enables us to place PHP/HTML/CSS/JavaScript codes right into our content. Second one is Phoca Commander, which is a file manager (like Total Commander) enabling accessing and editing files directly in Joomla.
Creating Custom Html Module
Custom html module’s only function will be to include our custom html file. We will use Sourcerer tags and php codes, so switching Joomla module editor to CodeMirror is necessary to be able to input tags and codes instead of formatted text, which can be done at System>Setup>Global Configuration>Site tab>Default Editor>CodeMirror.
To create custom html module, go to Content>Site Modules, click New button, from list of module types, select Custom. At module editing page, write a name like “WebApp module” to the Title field. And to the main text field, paste the code below.
{source raw="true"}<?php
readfile(JPATH_SITE.'/webapp/form.html');
?>{/source}source raw=”true” is necessary since we are not using a WYSIWYG editor, as explained in here.
We will be creating form.html later. If needed, one could also include a php file by adding line:
include JPATH_SITE.’/webapp/form.php’;
Creating WebApp Page
A WebApp page is necessary only for displaying custom html module. Creating a new page highly depends on the Joomla template. Steps here are for SP Page Builder, but should be easy enough for other builders and templates too.
Go to the site’s pages list (Components>SP Page Builder>Pages). Click Add New Page button, enter “WebApp page” as page name. Add a new section and a Joomla Module in it, then assign WebApp module to it. Final layout looks like below image.
Creating Page Link
In order to make the app page accessible through browsers, a link to the app page needs to be created. To do this, go to Menus>Main Menu and click New button. Write “Web Application” to Title field.
Click Select button next to Menu Item Type field. Under SP Page Builder group (or whichever builder/template is used), choose Page. Then click Select button next to Select Page field and choose WebApp page. Create the link by clicking Save & Close. As we didn’t explicitly input an alias, it is generated as “web-application”, meaning the app page can be accessed by appending /web-application to your site’s domain name.
Creating Custom Html File
The app page is empty because its module is missing webapp/form.html file. We will use Phoca Commander for creating and editing files and folders. Go to Components>Phoca Commander>Control Panel. We are at public_html of our server by default. Click New Folder (F7), input “webapp” as name and click Create, and click webapp to enter the new folder. There may exists an index.html file there, delete it by selecting it and clicking Delete (F8).
Phoca Commander doesn’t support directly creating files. So at any place in your computer, create “form.html”, paste below form code in it and save.
<h2>Example Web App</h2><br>
<p>This is a form-based WebApp on Joomla!</p><br>
<form id="WebAppForm" onsubmit="return Calculate()">
<fieldset>
<legend>Numbers:</legend>
<table>
<tr>
<td><label for="Number1">First number:</label></td>
<td><input type="number" id="Number1" name="Number1" value="5" min="0" max="100" step="any" required></td>
</tr>
<tr>
<td><label for="Number2">Second number:</label></td>
<td><input type="number" id="Number2" name="Number2" value="15" min="1" max="100" step="any" required></td>
</tr>
</table><br>
<label for="Operation">Math operation:</label><br>
<select id="Operation" name="Operation">
<option value="0" selected>Addition</option>
<option value="1">Substraction</option>
<option value="2">Multiplication</option>
<option value="3">Division</option>
</select><br>
</fieldset><br>
<input type="submit" value="Calculate">
</form><br>
<div id="results"></div>
<script type="text/javascript">
function Calculate() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("results").innerHTML = this.responseText;
}
var WebAppFormData = new FormData(document.getElementById("WebAppForm"));
xhttp.open("POST", "webapp/calculator.php");
xhttp.send(WebAppFormData);
return false;
}
</script>FormData usage at the submit code makes packaging of form data automated, thus, changing fields of the form doesn’t require an update at the submit code. Also note that this form performs client-side input validation, like not accepting negative numbers. Html tags, attributes and methods used at this code are out of scope of this article, but can be searched at w3schools.
At Phoca Commander, while we are at webapp folder, click Upload (F10), drag&drop form.html and click Start Upload. When we refresh our page, we will see a form, having fields for 2 numbers and a math operation.
Creating Custom PHP File
In order to Calculate button work, a custom php file needs to be created to be executed at server side. As we created form.html, now we will create calculator.php at the same folder, as referred in the form submit script.
At any place in your computer, create “calculator.php”, paste below php code in it and save.
<?php
// function that applies certain filters to input for security
function FilterInput($data) {
$data = trim($data); // trim whitespaces
$data = stripslashes($data); // strip backslashes
$data = htmlspecialchars($data); // convert special characters to HTML entities
return $data;
}
// filter inputs
$IN = array(); // 1D Associative Array for form input
foreach($_POST as $key => $value) {
$IN[$key] = FilterInput($value);
}
// validate inputs
if (!isset($IN["Number1"]) || $IN["Number1"] < 0 || $IN["Number1"] > 100 ||
!isset($IN["Number2"]) || $IN["Number2"] < 1 || $IN["Number2"] > 100 ||
!isset($IN["Operation"]) || $IN["Operation"] < 0 || $IN["Operation"] > 3) {
echo "<p>Inputs are not valid.</p>";
exit;
}
// perform calculation
switch ($IN["Operation"]) {
case 0:
// Addition
$result = $IN["Number1"] + $IN["Number2"];
break;
case 1:
// Substraction
$result = $IN["Number1"] - $IN["Number2"];
break;
case 2:
// Multiplication
$result = $IN["Number1"] * $IN["Number2"];
break;
case 3:
// Division
$result = $IN["Number1"] / $IN["Number2"];
break;
}
// print result
echo "<p>Result is: $result</p><br>";
?>FilterInput function is an important security measure, and is explained at this w3schools page as test_input function. Also note that this code performs server-side input validation, in addition to performed at client-side.
At Phoca Commander, while we are at webapp folder, click Upload (F10), drag&drop calculator.php and click Start Upload. If a type error is received, one can change the file’s extension to i.e. html, upload, and change back to php again. When we click on Calculate button, we will see the result of the selected math operation which is done on input numbers.
We have created a simple example of a Form-based WebApp on Joomla! CMS. This architecture can easily be expanded to handle lots of inputs from client-side and to perform complex operations at server-side.
