Creating a Web Application for Docker

Creating a Web Application for Docker

Task 07.1👨🏻‍💻
Task Description 📄

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.
📌 This app will help the user to run all the docker commands like:
👉 docker images
👉 docker ps
👉 docker run
👉 docker rm -f
👉 docker exec

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).

Code to create Docker

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)

The Page Application would look like this:

With the Images on it being interactive and be easy to use, the Icon’s below help in creating, deleting and knowing about all the lists in the container.

The JS part:

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;
}
}
}