NodeJS WebForms Class Update to WebFormsJS 1.6

The WebForms class for NodeJS has been updated to the latest version of WebFormsJS, 1.6. The WebForms class on the server and the WebFormsJS library on the client constitute the WebForms Core technology.

WebForms Core is a high-level technology for manipulating HTML tags on the server, introduced by Elanat in 2024. It works both online and offline without requiring repeated requests to the server. With WebForms Core, there is no need to develop front-end (use front-end frameworks or write JavaScript code on the client).

Differences between WebForms.js and WebFormsJS and web-forms.js

WebForms.js: WebForms classes are used in Back-End programming languages. The extension of these classes indicates the programming language. WebForms.php is the WebForms class in PHP and WebForms.py is the WebForms class in Python. Since the extension of script files in NodeJS is ".js", the name of this class is WebForms.js.

WebFormsJS: WebFormsJS is a client-side JavaScript library that automatically communicates with WebForms classes on the server. The physical name of this library is "web-forms.js".

WebForms Core technology has many advanced features. The video below shows how to cache HTML tags in this technology.

Download Links

You can download the WebForms class for the JavaScript (NodeJS) programming language from the link below.

WebForms.js

To download the latest version of WebFormsJS, visit the following link.

Download WebFormsJS

Example: Using WebForms Core in Express

Below is an example of how to use the updated WebForms class in a Express application. This example checks for illegal characters in the textarea text and displays a message to the user.

const express = require('express');
const bodyParser = require('body-parser');
const { WebForms, InputPlace } = require('./WebForms');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', (req, res) => {
    const form = new WebForms();

    let htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <title>Using WebForms Core</title>
      <script type="text/javascript" src="/script/web-forms.js"></script>
    </head>
    <body>
        <h1>WebForms Core Technology in NodeJS</h1>
        <form action="/" method="post">
            <b>Contact</b>
            <br>
            <textarea id="Text" name="Text1"></textarea>
            <br><br>
            <input type="submit" name="Button1" value="Send contact">
        </form>
    `;

    form.setWidth(InputPlace.tag('textarea'), 550);
    form.setHeight(InputPlace.tag('textarea'), 300);
    form.setFontSize(InputPlace.tag("textarea"), 20);
    form.setBackgroundColor(InputPlace.name("Button1"), "lightblue");

    htmlContent += form.exportToWebFormsTag();

    htmlContent += `
    </body>
    </html>
    `;

    res.send(htmlContent);
});

app.post('/', (req, res) => {
    const form = new WebForms();

    if (req.body.Button1) {
        const contentText = req.body.Text1;

        form.addTag(InputPlace.tag("form"), "h4");
        form.setFontSize(InputPlace.tagWithIndex("h4", -1), 32);

        if (contentText.includes("<") || contentText.includes(">")) {
            form.setText(InputPlace.tagWithIndex("h4", -1), "The entered text contains illegal characters.");
            form.setTextColor(InputPlace.tagWithIndex("h4", -1), "red");
            form.setBackgroundColor(InputPlace.tagWithIndex("h4", -1), "#ffe0de");
        } else {
            form.setText(InputPlace.tagWithIndex("h4", -1), "There are no illegal characters in the entered text.");
            form.setTextColor(InputPlace.tagWithIndex("h4", -1), "green");
            form.setBackgroundColor(InputPlace.tagWithIndex("h4", -1), "#deffe3");
        }

        form.delete("<form>|<h4>");
        form.assignDelay(3);

        return res.send(form.response());
    }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

In this example when a user click on the button, they will receive feedback based on their input:

If illegal characters are detected:

Text will be displayed in red with a light red background.

If no illegal characters are found:

Text will appear in green with a light green background.

The GIF image below shows how the above code works.

Initialization

First, it loads the file named WebForms.js and extracts the WebForms and InputPlace classes in this file.

GET request (Initial Page Load):

When a GET request is made to the root path /, the server responds by generating an HTML form.

A new instance of WebForms is created.

Basic HTML structure is defined, including a form with a textarea and a submit button.

The form is styled using methods from the WebForms instance:

form.setWidth(InputPlace.tag('textarea'), 550);
form.setHeight(InputPlace.tag('textarea'), 300);
form.setFontSize(InputPlace.tag("textarea"), 20);
form.setBackgroundColor(InputPlace.name("Button1"), "lightblue");

htmlContent += form.exportToWebFormsTag();

Check after form submit

When the form is submitted (POST request to /), the server processes the form data.

A new instance of WebForms is created.

The form submission is checked for the presence of "Button1" (submit button) and the textarea content ("Text1").

The content is validated to check for illegal characters (< and >):

The messages are styled appropriately using the WebForms methods:

const contentText = req.body.Text1;

form.addTag(InputPlace.tag("form"), "h4");
form.setFontSize(InputPlace.tagWithIndex("h4", -1), 32);

if (contentText.includes("<") || contentText.includes(">")) {
    form.setText(InputPlace.tagWithIndex("h4", -1), "The entered text contains illegal characters.");
    form.setTextColor(InputPlace.tagWithIndex("h4", -1), "red");
    form.setBackgroundColor(InputPlace.tagWithIndex("h4", -1), "#ffe0de");
} else {
    form.setText(InputPlace.tagWithIndex("h4", -1), "There are no illegal characters in the entered text.");
    form.setTextColor(InputPlace.tagWithIndex("h4", -1), "green");
    form.setBackgroundColor(InputPlace.tagWithIndex("h4", -1), "#deffe3");
}

form.delete("<form>|<h4>");
form.assignDelay(3);

return res.send(form.response());

Finally, the form is deleted (whit delay) is assigned to the response.

Response

The following response is sent when an illegal character is not sent to the server.
The following commands are sent through the WebForms class on the server to WebFormsJS on the client. WebFormsJS renders these commands and then parses them into the HTML page.

[web-forms]
nt<form>=h4
fs<h4>-1=32px
st<h4>-1=There are no illegal characters in the entered text.
tc<h4>-1=green
bc<h4>-1=#deffe3
:3)de<form>|<h4>=1

Note: Please note that when the HTML page is requested for the first time, if you are using the WebForms class, use the exportToWebFormsTag method. For secondary requests, use the response method.

The overall structure of the code suggests that WebForms Core aims to make form handling straightforward. It abstracts away many of the complexities involved in traditional form handling and styling. WebForms Core is a handy tool for managing web forms in NodeJS. It offers a blend of simplicity, flexibility, and functionality that could be very appealing, especially for developers looking to streamline their form handling processes.

You can get the sample code in link below.
https://elanat.net/content/29/NodeJS WebForms Class Update to WebFormsJS 1.6.html

Conclusion

The update to WebFormsJS 1.6 significantly enhances NodeJS applications by providing a robust framework for handling web forms without extensive front-end development. Developers can leverage this technology to create efficient and user-friendly web applications while focusing more on backend logic rather than frontend intricacies.

Author Of article : Elanat Framework Read full article