DEV Community

Cover image for WebForms Core Technology in Python, PHP, Java, NodeJS, ...
elanatframework
elanatframework

Posted on • Edited on

WebForms Core Technology in Python, PHP, Java, NodeJS, ...

#python #php #java #javascript

Elanat is trying to release WebForms Core technology for all programming languages ​​and web frameworks (back-end) as well.

WebForms Core is a new technology in CodeBehind framework belonging to Elanat. With the release of WebForms Core, Elanat offers a new approach to managing HTML elements on the server side. In this technology, the WebFormsJS library on the client side renders the control action sent from the server and then applies it to the HTML page. In this technology, processing is done on the client side and the server sends an INI file as a response to the client. Using WebForms Core, there is no need to develop front-end and everything is controlled from the server. This new structure creates a big challenge for front-end frameworks like React, Vue and Angular.

This is a video of how WebForms Core technology works in the CodeBehind framework:

The following articles also introduce WebForms Core technology well:
https://dev.to/elanatframework/surprise-2024-web-forms-back-to-aspnet-core-j1h
https://dev.to/elanatframework/using-webforms-core-36ka

We have now rewritten the WebForms class for four programming languages ​​with the help of AI.
We converted the WebForms class for Python, PHP, Java, and JavaScript (NodeJS), and soon this class will be converted to other programming languages ​​as well.

These classes are added to the following repository:
https://github.com/elanatframework/Web_forms_classes

WebForms Core for Python, PHP, Java and NodeJS

Now you can use the WebForms class in these four programming languages. Please note that WebForms Core is fully compatible with the CodeBehind framework and goes beyond implementing the WebForms class.

For example, WebForms Core in the CodeBehind framework also supports changing the View, and the Action Control of WebForms Core technology first replaces the new View, and then the changes are applied to the new View.

We encourage developers to add a module to popular web frameworks based on the WebForms class to achieve full compatibility between the WebForms class and the framework.

Soon we will write an article about how to synchronize the WebForms class on web frameworks.

Examples of using the WebForms class

Please note that we in the Elanat team are not fluent in all programming languages ​​(even at an intermediate level). Please submit a pull request on the repository below if you see any issues with the working of these examples.

https://github.com/elanatframework/Web_forms_classes

Python (Flask framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

Python WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/python/WebForms.py

View file

from flask import Flask, request, render_template_string
from WebForms import WebForms, InputPlace 

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST' and 'btn_SetBodyValue' in request.form:
        name = request.form['txt_Name']
        background_color = request.form['txt_BackgroundColor']
        font_size = int(request.form['txt_FontSize'])

        form = WebForms()

        form.set_font_size(InputPlace.tag('form'), font_size)
        form.set_background_color(InputPlace.tag('form'), background_color)
        form.set_disabled(InputPlace.name('btn_SetBodyValue'), True)

        form.add_tag(InputPlace.tag('form'), 'h3')
        form.set_text(InputPlace.tag('h3'), f"Welcome {name}!")

        return form.response()

    return render_template_string('''
    <!DOCTYPE html>
    <html>
    <head>
      <title>Using WebForms Core</title>
      <script type="text/javascript" src="/script/web-forms.js"></script>
    </head>
    <body>
        <form method="post" action="/">
            <label for="txt_Name">Your Name</label>
            <input name="txt_Name" id="txt_Name" type="text" />
            <br>
            <label for="txt_FontSize">Set Font Size</label>
            <input name="txt_FontSize" id="txt_FontSize" type="number" value="16" min="10" max="36" />
            <br>
            <label for="txt_BackgroundColor">Set Background Color</label>
            <input name="txt_BackgroundColor" id="txt_BackgroundColor" type="text" />
            <br>
            <input name="btn_SetBodyValue" type="submit" value="Click to send data" />
        </form>
    </body>
    </html>
    ''')

if __name__ == '__main__':
    app.run(debug=True)
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

PHP

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

PHP WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/php/WebForms.php

View file

<?php
include 'WebForms.php';

if (!empty($_POST['btn_SetBodyValue']))
{
    $Name = $_POST['txt_Name'];
    $BackgroundColor = $_POST['txt_BackgroundColor'];
    $FontSize = (int) $_POST['txt_FontSize'];

    $form = new WebForms();

    $form->setFontSize(InputPlace::tag('form'), $FontSize);
    $form->setBackgroundColor(InputPlace::tag('form'), $BackgroundColor);
    $form->setDisabled(InputPlace::name('btn_SetBodyValue'), true);

    $form->addTag(InputPlace::tag('form'), 'h3');
    $form->setText(InputPlace::tag('h3'), "Welcome " . $Name . "!");

    echo $form->response();
    exit();
}
?>
<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <form method="post" action="/" >

        <label for="txt_Name">Your Name</label>
        <input name="txt_Name" id="txt_Name" type="text" />
        <br>
        <label for="txt_FontSize">Set Font Size</label>
        <input name="txt_FontSize" id="txt_FontSize" type="number" value="16" min="10" max="36" />
        <br>
        <label for="txt_BackgroundColor">Set Background Color</label>
        <input name="txt_BackgroundColor" id="txt_BackgroundColor" type="text" />
        <br>
        <input name="btn_SetBodyValue" type="submit" value="Click to send data" />

    </form>
<body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

NodeJS (Express framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

NodeJS WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/nodejs/WebForms.js

View file

const express = require('express');
const bodyParser = require('body-parser');
const WebForms = require('./WebForms');

const app = express();
const PORT = 3000;

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

app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>Using WebForms Core</title>
          <script type="text/javascript" src="/script/web-forms.js"></script>
        </head>
        <body>
            <form method="post" action="/" >

                <label for="txt_Name">Your Name</label>
                <input name="txt_Name" id="txt_Name" type="text" />
                <br>
                <label for="txt_FontSize">Set Font Size</label>
                <input name="txt_FontSize" id="txt_FontSize" type="number" value="16" min="10" max="36" />
                <br>
                <label for="txt_BackgroundColor">Set Background Color</label>
                <input name="txt_BackgroundColor" id="txt_BackgroundColor" type="text" />
                <br>
                <input name="btn_SetBodyValue" type="submit" value="Click to send data" />

            </form>
        <body>
        </html>
    `);
});

app.post('/', (req, res) => {
    if (req.body.btn_SetBodyValue) {
        const Name = req.body.txt_Name;
        const BackgroundColor = req.body.txt_BackgroundColor;
        const FontSize = parseInt(req.body.txt_FontSize, 10);

        const form = new WebForms();

        form.setFontSize(InputPlace.tag('form'), FontSize);
        form.setBackgroundColor(InputPlace.tag('form'), BackgroundColor);
        form.setDisabled(InputPlace.name('btn_SetBodyValue'), true);

        form.addTag(InputPlace.tag('form'), 'h3');
        form.setText(InputPlace.tag('h3'), `Welcome ${Name}!`);

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

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Java (Spring Boot framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

Java WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/java/WebForms.java

View file

<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
    <form method="post" action="/" >
        <label for="txt_Name">Your Name</label>
        <input name="txt_Name" id="txt_Name" type="text" />
        <br>
        <label for="txt_FontSize">Set Font Size</label>
        <input name="txt_FontSize" id="txt_FontSize" type="number" value="16" min="10" max="36" />
        <br>
        <label for="txt_BackgroundColor">Set Background Color</label>
        <input name="txt_BackgroundColor" id="txt_BackgroundColor" type="text" />
        <br>
        <input name="btn_SetBodyValue" type="submit" value="Click to send data" />
    </form>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Also, create a Controller class file as follows.

Controller class

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MyController {

    @PostMapping("/")
    public String handleFormSubmission(
            @RequestParam(name = "txt_Name", required = false) String name,
            @RequestParam(name = "txt_BackgroundColor", required = false) String backgroundColor,
            @RequestParam(name = "txt_FontSize", required = false, defaultValue = "16") int fontSize,
            @RequestParam(name = "btn_SetBodyValue", required = false) String button) {

        if (button != null) {
            WebForms form = new WebForms();

            form.setFontSize(InputPlace.tag("form"), fontSize);
            form.setBackgroundColor(InputPlace.tag("form"), backgroundColor);
            form.setDisabled(InputPlace.name("btn_SetBodyValue"), true);

            form.addTag(InputPlace.tag("form"), "h3", null);
            form.setText(InputPlace.tag("h3"), "Welcome " + name + "!");

            return form.response();
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Please share your success or failure in implementing WebForms Core in the comments section.

Top comments (0)

Read next

mohammadpooladi profile image

Synchronous Applications

Mohammad Pooladi -

frorning profile image

Benchmarking in Node.js vs Deno: A Comprehensive Comparison

Piyush Chauhan -

velan profile image

2024 Update: Top 10 Alternatives to Postman

Velan<> -

sharathchandark profile image

Building an Interactive Add To Cart Feature Using HTML, CSS, and JavaScript

sharathchandark -