2 min readJun 25, 2021
Task Description 📄
⚙️ 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 webportal 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
👉 add more if you want. (Optional)
👉 Make a blog/article/video explaining this task step by step.
HTML and CSS CODE
This is the HTML and CSS code from here we can get our UI.
<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>Python CGI Program
#!/usr/bin/python3
import cgi
import subprocess
import time
print("content-type: text/html")
print()
f=cgi.FieldStorage()
cmd = f.getvalue("x")
o = subprocess.getoutput("sudo " + cmd)
print(o)From the CGI command we can do the following things.
- 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
Thank You!!!!