Improving your Views - CSTutoring.ca

So far, we have user very minimalistic views to prove that our application works. However, if we ever want to roll out a product that will be used by anyone, it has to provide a feeling of being well-built. And if it looks bad, it does not feel well-built.

Let’s start using Bootstrap to make our views look better.

Contents

Using Bootstrap

We will start by proposing a base template for views. When you create a new view, it should automatically contain this material in order to provide the wanted look and feel:

```
<!doctype html>
```
```
<html lang="en">
```
```
  <head>
```
```
    
```
```
    <meta charset="utf-8">
```

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

```
 
```
```
    
```

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

```
 
```
```
    <title>TITLE</title>
```
```
  </head>
```
```
  <body>
```
```
    <div class='container'>
```
```
      <h1>HEADING</h1>
```
```
 
```
```
      
```

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->

      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

```
    </div>
```
```
  </body>
```
```
</html>
```

Buttons, submit inputs and hyperlinks

All we need to do now in integrate the proper classes on the proper elements to make them look better. The first category is that of buttons (see https://getbootstrap.com/docs/4.0/components/buttons/):

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-secondary">Secondary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

```
 
```

<button type="button" class="btn btn-link">Link</button>

The class='btn btn-BUTTONTYPE' attribute definition is what will give the button appearance to any submit input, button, or hyperlink that you want. Therefore, the following all have a button appearance:

<a href="CSTutoring.ca" class="btn btn-primary">CSTutoring.ca</a>

<button type="button" class="btn btn-secondary">Secondary</button>

<input type="submit" class="btn btn-success" value="Submit" />

Form Inputs

For forms to look adequate for a serious application, there are few modifications to make (see https://getbootstrap.com/docs/4.0/components/forms/):

```
<div class="form-group">
```

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

```
  </div>
```

Two changes are essential: 1) apply class="form-group" to a div element containing the label and input elements and 2) apply class="form-control" to the input elements (except type submit that you will format as a button, as above).

Tables

Bootstrap can really help with the appearance of tables (see https://getbootstrap.com/docs/4.4/content/tables/). My preferred type is the striped table as below:

```
<table class="table table-striped">
```
```
...
```
```
</table>
```

Custom CSS and JS

In the PHP MVC application structure proposed and used in this series of posts, it is possible to use custom CSS and JS, referred through script and link elements of your views. You can simply create css and js folders under the Web server document root. The current .htaccess configuration is made to allow access to all the contained resources.

htdocs: contains index.php and the folders below
- app: contains all models, views and controllers as well as core files.
- css: add your custom CSS
- js: add your custom JavaScript

Conclusion

For data-centric applications, it doesn’t take that much to make the application look acceptable. If anything, at least take the time to apply a Bootstrap theme on your application.