Creating a Web Application for Docker

Task 07 👨🏻‍💻Summer Program 2021

Task Description 📄
Javascript Integration with Docker

Task 7.1

📌 In this task you have to create a Web Application for Docker (one of the great Containerization Tool which provides the user Platform as a Service (PaaS)) by showing your own creativity and UI/UX designing skills to make the web portal user friendly.

We are now going to create an application for Docker which is one of the great Containerization tools which provides the user Platform as a Service(PaaS). The application looks like the image given below:

Now, each image on the corners has its own actions that perform the given tasks. Each of them is assigned to do the tasks shown in the following images.

These individual icons depict the actions of a particular field to have some changes in the application.

The above images are the .png images used in the applications so that it performs some actions.

Code to create

import cgi
import subprocess

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

f = cgi.FieldStorage()
img = f.getvalue(‘i’)
cname = f.getvalue(‘n’)
cmd = “sudo docker run -itd — name {} {}”.format(cname,img)
op = subprocess.getoutput(cmd)
print(op)

Code to delete

import cgi
import subprocess

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

f = cgi.FieldStorage()
cname = f.getvalue(‘n’)
cmd = “sudo docker rm -f {}”.format(cname)
op = subprocess.getoutput(cmd)
print(op)

Code for image

import cgi
import subprocess

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

f = cgi.FieldStorage()
img = f.getvalue(‘i’)
cmd = “sudo docker pull {}”.format(img)
op = subprocess.getoutput(cmd)
print(op)

Code for list

import cgi
import subprocess

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

cmd = ‘sudo docker ps -a | cut -d “ “ -f 1,2,5,4,10,8,17,18,19,40,31’
op = subprocess.getoutput(cmd)
print(op)

After all this, by entering “Your image name” and “container name”, a container will be created. Let’s name the container “ XYZ”.

Container Created!!

By entering the command “docker ps”, you can verify that the container is successfully created.

And by clicking on the “list all container”, it will display all the containers you have created.

Finally, if you want to delete the container, then simply click on the “delete container” icon and enter the container name and it will delete the container it was previously created. It will prompt a message regarding whether you are sure to delete the container or not. By clicking “OK” you agree to delete it.

feature.js

function create(){
decision = confirm(“Are you sure, you want to ‘create’ this container”);
if(decision == true){
img = document.getElementById(“c_i_name”).value;
cname = document.getElementById(“c_c_name”).value;
xhr = new XMLHttpRequest();
xhr.open(‘GET’,’http://192.168.43.51/cgi-bin/create.py?i='+img+'&n='+cname,'true');
xhr.send();
xhr.onload=function (){
output = xhr.responseText;
document.getElementById(“im”).innerHTML = “ “;
output = output + “\n\n!!! Container Created !!!”;
document.getElementById(“op”).innerHTML = output;
}
}
}

function image(){
img = document.getElementById(“p_i_name”).value;
xhr = new XMLHttpRequest();
xhr.open(‘GET’,’http://192.168.43.51/cgi-bin/image.py?i='+img,'true');
xhr.send();
xhr.onload=function (){
output = xhr.responseText;
document.getElementById(“im”).innerHTML = output;
}

}

function list(){
xhr = new XMLHttpRequest();
xhr.open(‘GET’,’http://192.168.43.51/cgi-bin/list.py','true');
xhr.send();
xhr.onload=function(){
output = xhr.responseText;
document.getElementById(“im”).innerHTML = “ “;
document.getElementById(“op”).innerHTML = output;
}

}

function del(){
decision = confirm(“Are you sure, you want to ‘Delete’ this container”);
if(decision == true){
cname = document.getElementById(“d_c_name”).value;
xhr = new XMLHttpRequest();
xhr.open(‘GET’,’http://192.168.43.51/cgi-bin/del.py?n=’+cname,'true');
xhr.send();
xhr.onload=function (){
output = xhr.responseText;
document.getElementById(“im”).innerHTML = “ “;
output = “Container “ + output + “ Deleted”
document.getElementById(“op”).innerHTML = output;
}
}
}

Conclusion: This is how we create a Web Application for Docker (one of the great Containerization Tool which provides the user Platform as a Service (PaaS).