JavaScript Integration with Docker

3 min readJun 19, 2021

Hello Guys!! In this article we will integrate multiple technologies like Python-CGI, HTML, CSS and JavaScript to provide the user a webpage from which he/she could execute Docker commands with out focusing on how to setup environment for the same.

Introduction

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.

Let’s Start

HTML and CSS CODE

Write a html code and to make our text look beautiful you can use CSS.

<style>* {box-sizing: border-box;}p.round2 {border: 2px solid red;border-radius: 8px;font-family: Georgia, 'Times New Roman', Times, serif;}p.round3 {border: 5px solid black;padding-top: 2px ;margin: auto;width: 200px;}p.dashed {outline-style: dashed;text-align: center;font-size: large;}.menu {float: left;width: 20%;text-align: center;color: black;}.menu a {background-color: greenyellow;padding: 8px;margin-top: 7px;display: block;width: 100%;color: black;}.main {float: left;width: 80%;padding: 0 20px;color: blue;text-align: center;}.right {background-color: yellow;float: left;width: 20%;padding: 15px;margin-top: 7px;text-align: center;color: blue;}.out{background-color: aquamarine;color: black;font-size: large;}</style><style>#docker_move {bottom: 5%;position: absolute;-webkit-animation: linear infinite;-webkit-animation-name: run;-webkit-animation-duration: 10s;}@-webkit-keyframes run {0% {right: 0;}50% {right: 80%;}100% {right: 0;}}</style></head><body style="font-family:Verdana;color:aquamarine"><div style="background-color:aqua;padding:15px;text-align:center;color:black"><h1>Containerization Tool DOCKER</h1></div><div style="overflow:auto"><div class="menu"><p class="round3">Commands Available</p><p class="round2">See Running Container</p><p class="round2">Run Container</p><p class="round2">See Docker Images Available</p><p class="round2">Remove Container</p><p class="round2">Execute Any Command</p></div><div class="main"><h2>Introduction to Docker</h2><div id="d1" class="out">[root@localhost]#<input id="input"/><button onclick="lw()">click</button><pre><div id="d2">Output</div></pre></div></div><div id="docker_move"><img src="https://i.pinimg.com/originals/f5/5e/80/f55e8059ea945abfd6804b887dd4a0af.gif" height="250" width="300"></div></body></html>

From the Html and CSS code I have made a webpage that will have following things:

Responsive Web Design
Will have an image moving from left to right
Have borders for the headline
Rounded Borders for the menu
Different background colors for the different sections in the webpage
Use the Python-CGI concept to run Docker commands
Using JavaScript
Used AJAX in client-side to create asynchronous web applications.

Python CGI Program

#!/usr/bin/python3
import cgi
import subprocess
import timeprint("content-type: text/html")
print()f=cgi.FieldStorage()
cmd = f.getvalue("x")
o = subprocess.getoutput("sudo " +  cmd)
print(o)

Above Program does the following things for us

Imported the libraries
Defining the context type which we will be receiving from the client
Retrieving the value from the webpage so we can run that command in the servers where we have Docker available