Admin dashboard – lesson 4


Step 1 - sections

At the beginning a bit of theory.

There are plenty of different way of keeping order in the project.

I prefer to keep it strictly structured. That means:

1. We divide the document into 3 main parts: header (for navigation), main (for content) and footer (for additional information and links).

2. The content within the main we divide into sections, which we use for big blocks of code.

3. Within a section, we use divs to divide a code into smaller blocks of code.

core layout ( header, main, footer) > section > div


Now let's divide main into 4 sections:


<!--Main layout-->
<main>
    <div class="container-fluid">

        <!--Section: Modals-->
        <section>



        </section>
        <!--Section: Modals-->

        <!--Section: Main panel-->
        <section class="mb-5">



        </section>
        <!--Section: Main panel-->

        <!--Section: Table-->
        <section class="mb-5">



        </section>
        <!--Section: Table-->

        <!--Section: Accordion-->
        <section class="mb-5">



        </section>
        <!--Section: Accordion-->

    </div>
</main>
<!--Main layout-->

Note: We've also added container-fluid to provide a proper construction for any grid we'll use in the further steps.

Step 2 - main panel

Main panel is an element dedicated for the charts and their settings.

However, before we use any specific components, we have to prepare panel itself.

We'll change main panel section into a card. Add these classes to the element:


<!--Section: Main panel-->
<section class="card card-cascade narrower mb-5">

Then add a grid with single row and 2 columns within:


<!--Section: Main panel-->
<section class="card card-cascade narrower mb-5">

    <!--Grid row-->
    <div class="row">
    
    <!--Grid column-->
    <div class="col-md-5">
    
    
    
    </div>
    <!--Grid column-->
    
    <!--Grid column-->
    <div class="col-md-7">
    
    
    
    </div>
    <!--Grid column-->
    
    </div>
    <!--Grid row-->

</section>
<!--Section: Main panel-->

Within first column we'll add a cascading header and body with another grid inside:


<!--Grid column-->
<div class="col-md-5">

    <!--Panel Header-->
    <div class="view py-3 gradient-card-header info-color-dark">
        <h5 class="mb-0">Sales</h5>
    </div>
    <!--/Panel Header-->

    <!--Panel content-->
    <div class="card-body">

        <!--Grid row-->
        <div class="row">

            <!--Grid column-->
            <div class="col-md-6 mb-4">



            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-6 mb-4 text-center">



            </div>
            <!--Grid column-->

        </div>
        <!--Grid row-->

    </div>
    <!--Panel content-->

</div>
<!--Grid column-->

Step 3 - select

To the first column of card-body add a following code:


<!--Date select-->
<p class="lead">
  <span class="badge info-color-dark p-2">Date range</span>
</p>
<select class="mdb-select colorful-select dropdown-info">
  <option value="" disabled selected>Choose time period</option>
  <option value="1">Today</option>
  <option value="2">Yesterday</option>
  <option value="3">Last 7 days</option>
  <option value="3">Last 30 days</option>
  <option value="3">Last week</option>
  <option value="3">Last month</option>
</select>

After saving the file you will notice nothing happened. That's because we have to initialize the select.

In the scripts section, below SideNav initialization, paste that code (similarly to the SideNav initialization):


// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});

Now it works!

To learn more about MDB select have a look at Select documentation.

Step 4 - datepicker

Select allows the user to choose a predefined date range.

We'll use Datepickers to let the user choose completely custom dates (which is useful if predefined ranges don't suit him).

Below the Select place the following code:


<!--Date pickers-->
<p class="lead my-4">
  <span class="badge info-color-dark p-2">Custom date</span>
</p>
<div class="md-form">
  <input placeholder="Selected date" type="text" id="from" class="form-control datepicker">
  <label for="date-picker-example">From</label>
</div>
<div class="md-form">
  <input placeholder="Selected date" type="text" id="to" class="form-control datepicker">
  <label for="date-picker-example">To</label>
</div>

Datepickers have to be initialized as well. Below Select initialization, paste this code:


// Data Picker Initialization
$('.datepicker').pickadate();

Save the file and you will notice datepickers work as expected.

Datepicker is a component with plenty of options. To learn more have a look at Datepicker documentation.

You can also check its twin component - Timepicker .


Previous lesson Download Live preview Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits