Creating a Web Application for Docker

KARTHICK P
2 min readAug 11, 2021

Create HTML files first —

<html>
<head>
<title>docker terminal</title>
<script>
function lw()
{
var i = document.getElementById(“in1”).value

var xhr = new XMLHttpRequest();

xhr.open(“GET”, “http://192.168.0.109/cgi-bin/ayush.py?x=" + i, true);

xhr.send();

xhr.onload = function() {
var output = xhr.responseText;
document.getElementById(“d1”).innerHTML = output;
}

}

</script>
<style>
body
{
background-image: url(‘
https://steamuserimages-a.akamaihd.net/ugc/279604015251442858/0C35E96C35AA5433FDEE2C01B04BFAC2C6CB82A7/');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;

width:25%;
}

.button
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: auto;
transition-duration: 0.4s;
cursor: pointer;

}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
position:absolute;
top:80%;
left: 50%
}

.button1:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1 align=”center”>Welcome to Docker World</h1>
<marquee>docker terminal running</marquee>
<img src=”
https://www.docker.com/sites/default/files/social/docker_facebook_share.png" class=”center” />
<h2 align =”center”>root@localhost~]<input id=”in1" />
<br /></h2>
<h2 align=”center”>
<pre>
<div id=”d1">here output </div>
</pre>
</h2>
<button onclick=”lw()” class=”button button1">RUN </button>

</body>
</html>

<html>
<head>
<title>docker terminal</title>
<script>
function lw()
{
var i = document.getElementById(“in1”).value

var xhr = new XMLHttpRequest();

xhr.open(“GET”, “http://192.168.0.109/cgi-bin/ayush.py?x=" + i, true);

xhr.send();

xhr.onload = function() {
var output = xhr.responseText;
document.getElementById(“d1”).innerHTML = output;
}

}

</script>
<style>
body
{
background-image: url(‘
https://steamuserimages-a.akamaihd.net/ugc/279604015251442858/0C35E96C35AA5433FDEE2C01B04BFAC2C6CB82A7/');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;

width:25%;
}

.button
{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: auto;
transition-duration: 0.4s;
cursor: pointer;

}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
position:absolute;
top:80%;
left: 50%
}

.button1:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1 align=”center”>Welcome to Docker World</h1>
<marquee>docker terminal running</marquee>
<img src=”
https://www.docker.com/sites/default/files/social/docker_facebook_share.png" class=”center” />
<h2 align =”center”>root@localhost~]<input id=”in1" />
<br /></h2>
<h2 align=”center”>
<pre>
<div id=”d1">here output </div>
</pre>
</h2>
<button onclick=”lw()” class=”button button1">RUN </button>

</body>
</html>

Add the following code in CGI — bin

#! /usr/bin/python3

import cgi
import subprocess
import time

print(“content-type:text/html”)
print()

#time.sleep(10)

f = cgi.FieldStorage()
cmd = f.getvalue(“x”)
#print(cmd)
o=subprocess.getoutput(“sudo “ + cmd)
print(o)

--

--