Web Based Application (HTML) Form Creation & Submission in Node-Red

Expt 1 Web Based Application (HTML) Form Creation & Submission
in Node-Red
Aim:
To create and submit web based application(HTML) form in Node-Red.
Software used:
Node-Red
Theory:
Node-RED:
 Built over Node.js
 Modules for web development
Everything can be a “thing”.
 Sensors (weather, traffic, home automation..)
 Instant messages, e-mails, posts, news, videos .
 Web requests and responses
 Message-data or command
Full stack:
Full stack development refers to the end-to-end application software
development, including the front end and back end. The front end consists of
the user interface, and the back end takes care of the business logic and
application workflows.
Web API:
 Web API as the name suggests, is an API over the web which can be
accessed using HTTP protocol. It is a concept and not a technology.
 We can build Web API using different technologies such as Java, .NET
etc.
Nodes required:
Procedure:
1. Trigger the node-red by typing node-red-v in command prompt.
2. Go to http://127.0.0.1:1880/ in browser.
3. Open new flow and name it.
4. Now insert http in node, function node, template node and http response
node.
5.Edit Http in node.
6.Edit function node.
Code:
msg.url="Project";
return msg;
7. Edit template node.
Code:
<!DOCTYPE html>
<html>
<head>
<h1 style="background-color:DodgerBlue;">IoT Domain</h1>
</head>
<body>
<p style="background-color:Tomato;">
<OL>
<LI> Enter your Name.
<LI> Registration Number.
</OL>
<h4>
<a href="https://projectmark.com/"> Project Mark</a>
</h4>
<form method="post" action="/{{url}}">
<label for="name">First name:</label><br>

<input type="text" id="fname" name="fname"><br>
<label for="reg">Reg No:</label><br>

<input type="text" id="reg" name="reg" ><br><br>
<label for="topic">Project Title:</label><br>

<input type="text" id="topic" name="Project Topic" ><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset" >
</form>
</body>
</html>
8. Edit http response node.
9.Now login form has been created with the above steps.
10.To create submission form ,insert http in node,json node, function node,
debug node and https response node,
11.Edit https in node
12.Edit json node
13.Edit function node.
Code:
msg.payload = "Data Submitted and is available in debug window; " +
msg.payload;
return msg;
14.Edit http response node
15. Edit debug node
16. To create smart parking system, edit template node as such.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<OL>
<LI> Enter your Name.
<LI> enter your car number.
</OL>
<h4>
<a href="https://projectmark.com/"> Project Mark</a>
</h4>

<label for="carnumber">car Number:</label><br>

<input type="text" id="carnumber" name="carnumber" ><br><br>
<label for="topic">phone number:</label><br>

<input type="text" id="ph number" name="phone number" ><br><br>
</form>
</body>
</html>
17. To create hyperlink to display parking rates, just edit template node.
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h4>
<a href="https://www.bing.com/ck/a?!
&&p=2dcd44a9eeb2e8a2JmltdHM9MTcwNDg0NDgwMCZpZ3VpZD0zMDViNTM0Yi0zZTFmLTZkODQtMT
hkOS00MGIwM2ExZjYzYzUmaW5zaWQ9NTI0MA&ptn=3&ver=2&hsh=3&fclid=305b534b-3e1f-
6d84-18d9-
40b03a1f63c5&psq=chennai+metero+parking+rates&u=a1aHR0cHM6Ly9jaGVubmFpbWV0cm9y
YWlsLm9yZy93cC1jb250ZW50L3VwbG9hZHMvMjAyMC8xMC9QYXJraW5nLVRhcmlmZi11cGRhdGVkLn
BkZg&ntb=1"> chennai metro parking rates</a>
</h4>
<TABLE BORDER=10>
<TR>
<TD>VEHICLE</TD>
<TD>RATE</TD>
</TR>
<TR>
<TD>CAR</TD>
<TD>200</TD>
</TR>
<TR>
<TD>TWOWHEELER</TD>
<TD>100</TD>
</TR>
<TR>
<TD>AUTO</TD>
<TD>150</TD>
</TR>
</TABLE>

<label for="carnumber">car Number:</label><br>

<input type="text" id="carnumber" name="carnumber" ><br><br>
<label for="topic">phone number:</label><br>

<input type="text" id="ph number" name="phone number" ><br><br>
</form>
</body>
</html>
Results:
1) Create login and submission form.
Connection 1:
Output 1:
2) Using Nodered build a web based application to automate Smart
Parking System in Metro Station. Create a creative and stylish form
(through HTML and CSS) to get Car owner details to automate the
parking system. Display the retrieved details in UI and debug
monitor.
Connection 2:
Output 2:
3) Create a hyper link to know the parking rates of the Metro station.
Connection 3:
Output 3:
Output verification:
Result:
Hence forms ,smart car parking system and hyperlink to display parking rates
has been created using node-red.

Web Based Application (HTML) Form Creation &amp; Submission in Node-Red

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Based Application (HTML) Form Creation &amp; Submission in Node-Red

Uploaded by

Copyright:

Available Formats

Expt 1 Web Based Application (HTML) Form Creation & Submission

6.Edit function node.

<form method="post" action="/{{url}}">

<label for="name">First name:</label><br>

<label for="reg">Reg No:</label><br>

<label for="topic">Project Title:</label><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset" >

8. Edit http response node.

11.Edit https in node

12.Edit json node

13.Edit function node.

15. Edit debug node

16. To create smart parking system, edit template node as such.

<form method="post" action="/{{url}}">

<label for="name">First name:</label><br>

<label for="carnumber">car Number:</label><br>

<label for="topic">phone number:</label><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset" >

<form method="post" action="/{{url}}">

<label for="name">First name:</label><br>

<label for="carnumber">car Number:</label><br>

<label for="topic">phone number:</label><br>

<input type="submit" value="Submit">

<input type="reset" value="Reset" >

You might also like

Web Based Application (HTML) Form Creation & Submission in Node-Red

Web Based Application (HTML) Form Creation & Submission in Node-Red