Dashboard Tutorial (II): HTML, CSS, PHP, and Heroku

Published in

Towards Data Science

7 min readJun 26, 2020

The layout of a webpage often comes as an element to display the content through the CSS Selectors. Through CSS, you can determine text color, content display, and webpage background and image. When it comes to deploying the web page on the server, Heroku is often the common deployment platform. In the Heroku platform, it can host the website for free, manage several app folders, and easily work with the terminal. For this blog, we’ll walk through the CSS Selector of web layout, file structure, and web deployment to Heroku.

In this article, you will learn to create a basic dashboard and deployment on Heroku server:

(1) Introduction to CSS layout

(2) Folder Structure of HTML, Javascript, and CSS files

(3) Deployment to Heroku

Introduction to CSS layout

CSS is a stylesheet language to decorate the webpages. CSS enables the webpage to display customized presentations with layout on blocks, margin, padding, fonts, etc. In this tutorial, we’ll dive in on the layout of Chart.JS plots with navbar.

CSS Grid layout

CSS Grid is a two-dimensional element with horizontal and vertical lines — one set defining columns, and the other, rows.

First, we create a grid container

A grid container is created by declaring display: grid or display: inline-grid. All direct children of that element become grid items. From the example below, there are 4 separate charts created with canvas tags along with h3 as the plots’ description. These 4 plots are wrapped within <div> elements of the class wrapper, and these children elements become grid items.

<div class="wrapper"><div><h3>Bar Chart of COVID active cases count in June</h3><canvas id="myChart" width="500" height="300"></canvas></div><div><h3>Line Chart of COVID cumulative cases in Canada</h3><canvas id="myChart1" width="500" height="300"></canvas></div><div><h3>Doughnut Chart of cumulative COVID cases count in Canada</h3><canvas id="myChart2" width="500" height="300"></canvas></div><div><h3>Bar Line Chart of COVID cases in Canada</h3><canvas id="myChart3" width="500" height="300"></canvas></div></div>

The example below shows the creation of a wrapper’s selector for the grid container. Next, we define grid tracks which are the space of 2 lines shown within the grid. In grid container, grid-template-columns and grid-template-rows are used to define the rows and columns. Property of grid-template-columns can define the size of the column tracks. Grid-template-columns is set to be an 800-pixel-wide column track. Also, I created both a 50-pixel gap on rows and columns.


.wrapper {display: grid;grid-template-columns: 800px 800px;column-gap: 50px;row-gap: 50px;}

Link CSS file and external resource

The example below shows the method of embedding on the CSS file. Both external and internal CSS source shall be included in <link> element, and the <link> element needs to be placed between the <head> and </head> tags. Therefore, the HTML webpage would be linked to the stylesheet from the <link> element.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><link rel="stylesheet" href="../static/styles/style.css">

Folder Structure of HTML, Javascript, and CSS files

For the dashboard, there are several different files like the dataset CSV files, plots javascript files, stylesheets CSS files, and webpages HTML files. It’s better to store different files in each folder under the project main directory. Typically, there’s a static folder to store all sorts of files in the subdirectory. For example, all my datasets are stored in the file folder, js files in the js folder, CSS files in the styles folder, and the HTML files in the template folder.

Interaction of Javascript and HTML file

Below, it shows the ChartJS plots being created in the HTML file with the canvas id of “myChart”.

<div><h3>Bar Chart of COVID active cases count in June </h3><canvas id="myChart" width="500" height="300"></canvas></div>

In the Javascript file, we’ll render the plot by calling the “myChart” id by using document.getElementById() function call .

var ctx = document.getElementById("myChart");

In the html file, we can call the Javascript file by using the <script> element. The directory is specified in the src parameter call. Besides, <script> elements are included within <body> and </body> tags.

<script src="../static/js/bar.js"></script><script src="../static/js/line_chart.js"></script><script src="../static/js/donut.js"></script><script src="../static/js/line_bar.js"></script>

CSS files selectors

Now, we dig into the fonts and text of CSS selection. We define the fonts for text by using the property font-family. The text alignment is specified as the center with text-align: center. It’s also an option to specify the font-size as font-size: 10px;for the webpage. In terms of the margin, it shows the space around the text. With margin: 0 0 0.1em, the text is displayed with the upper, down, left, and right margin followed by the sequence. Since <body> is the parent element of the content page, all elements inside it inherit the same text-align and font-family.

body {font-family: Helvetica Neue, Arial, sans-serif;
text-align: center;
font-size: 10px;
margin: 0 0 0.1em 0;
color: rgb(89, 112, 240);}

Next, we work on the block concept in the CSS selector. In the HTML file, we use<a> the tag to define a hyperlink, which is used to link from one page to another. In the CSS file, the block element can have margin and other spacing values applied to it. However, <a> tag is an inline element with no margin value on it. To apply margins to the hyperlink tag, we need to add display parameter display: block;.Then, we can give margin value on top by margin-top: 50px;

a {margin-top: 50px;display: block;color: #3e95cd;}

Heroku deployment

To deploy the dashboard on a web server instead of a local host on your machine, Heroku is often a popular option for the deployment. From Heroku, it supports Ruby, Node.js, Clojure, Python, Java, Gradle, Grails, Scala, Play, PHP, Go. However, the programming languages are not offered for the typical HTML, CSS, Javascript languages. The good solution is to build a PHP app for the web page. I’ll walk you through the steps of Heroku setup, git set up, PHP file creation, and the project deployment to the Heroku platform. And tada, the project is displayed with an HTML link which is sharable for the external visit.

(1) Sign up an account and get Heroku installed. (link1, link2)

(2) In the terminal, type Heroku login with the required credentials.

(3) Initialize a local Git repository and commit your application code.
In the terminal, type in the command line listed below

cd your_project
git config --global user.email “you@example.com”
git config --global user.name "Your Name"

(4) Prepare the PHP file to render the HTML pages. Head to the root directory of your project that contains index.html

(5) In this directory, run touch composer.json to create a file: composer.json. In the JSON file, add {}.

(6) In the same directory, run touch index.php to create a file: index.php. In the PHP file, add <?php include_once("index.html"); ?>

(7) In the terminal, we initialize the git repository and push the project folder to the Heroku server for deployment. In the terminal, type in the command line listed below

cd your_project
# Create a local git repository
git init 
# Add all your local files to repository
git add .
# Commit your files
git commit –m “First commit”
# Create an empty Heroku app, make sure the app name is unique with your own creation
heroku create php-dashboard-tutorial 
# push our application to Heroku
git push heroku master
# check one instance of the app is running
heroku ps:scale web=1

(8) The magic happens. Now, your dashboard is successfully deployed to the Heroku server and can be visited with an external web link.

In Conclusion:

CSS selector can be used to style the HTML tag elements defined with the class. Grid container can display column and row like layout for the web page items. <link> element is used to embed the internal and external CSS stylesheet in the HTML web file.
It’s better to store different files in a specific folder under the static directory. In the HTML file, we can call the Javascript file by using the <script> element. CSS files selectors can set the text and fonts display through the parameter call. In the stylesheet, the block element can be applied for an inline element to give margin and other spacing values.
Heroku is served as a web server platform that supports Ruby, Node.js, Clojure, Python, Java, Gradle, Grails, Scala, Play, PHP, Go. As an alternative, the dashboard with HTML, CSS, Javascript can work for Heroku deployment with an additional PHP file. Besides, Heroku is required with a git repository to push the project folder to the webserver.