Docker Portal using JavaScript & Python CGI

Another fun project!! For people who don’t want to go to the Black Screen, but still wish to try on technologies like Docker, I have created a Docker Web Portal with some functionalities.

This is my first hands-on Project using JavaScript. I understood how to use JS, HTML, & CSS, how they are managed in code files, and how each one complements the other.

Frontend ➡

• HTML
• CSS
• JavaScript

Backend ➡

• Python CGI

Using Python CGI Codes I am taking input from the client (via the web portal) & the code runs particular docker commands and gives the output back to JS functions that display it on the webpage.

Let’s get going!

Frontend

This is the file structure of the front end.

I have created different styling for the elements used in the webpage, present in the CSS folder.

For each function being called in the HTML page, a different JS file is made.

Photos folder consists of the images being used on the website.

The code is available on my Github. Feel free to put a ⭐.

My website is running in a Linux-hosted Apache webserver on RHEL8. So all these files are present in the /var/www/html folder.

How to set up a web server and all other details are mentioned in the GitHub link provided above.

JS & HTML

In the .js file, a function is created which is called on the button property of onclick.
In the function I am using XMLHttpRequest() function which can send and get result over http requests.
.send() function sends the request to the given URL — which is a CGI code.
.onload() gets the data and I am presenting it in the alert dialog.

Similarly, the code is written.

The backend files are present in the /var/www/cgi-bin folder.

All CGI Codes

These files run the backend docker commands that give output back on the screen.

1 Code to explain basic CGI Code

Similarly, all other CGI codes are written, which takes some input and based on command gives certain output back to the JS code.

Features of the Website:

1. Launch a Container
2. Stop a Container
3. Remove a Container
4. List all available images
5. List all containers with status
6. A Scale to keep a track of how many containers are launched on the server!

Video Demo

Do watch this short 2 min video

Wait for the Docker to move on the scale 😉. Do comment how you loved it ❤

This my first JS Project!
This project is done along with Khushi Thareja.
Do comment and share it if you like. 😃

I am always open to suggestions & available for fun projects as well !!

Connect with me over LinkedIn :)
Follow me on Medium…
Check out my Github!

This Repo — JS-Docker-Web_portal