Bootstrap, FontAwesome, jQuery and PHP

Now I'd like us all to become comfortable with using Bootstrap (the most popular UI framework) and FontAwesome (the most popular iconography set), whilst we also incorporate working briefly with jQuery and PHP. Before we move onto using them however, I'd like us to perform a few small PHP implementations to our site that we've been working on from our Git repo.

1. Dividing Our HTML using PHP

Firstly I'd like us to begin by using a small piece of PHP's capability and dividing the contents of the index.php file we created from our previous sections. I'd like us to create two new files:

header.php
footer.php

These files will contain the header and footer for our site respectively. From your index.php file I'd like you to take the entire top section of the file (from the first line) to the opening <body> (including the body) tag and placing it into the header.php file (i.e. cut & paste).

Now for the footer.php file I'd like you to cut from your index.php file your scripts and closing tags (i.e. from the scripts to the end of the file) and paste them into footer.php.

Next in your index.php file, add the following line of code to the top of the file (i.e. on line 1):

<?php $title = 'Hello World!'; include_once('header.php'); ?>

Here we're defining a variable called $title with the string value of 'Hello World!' and the statement is closed with a semi-colon. We then include the header file.

We can now add our footer, so at the end of your index.php file add the following line of code:

<?php include_once('footer.php'); ?>

With the above line of code, we're not declaring any variables but simply just including the footer file. If you now save your index.php file and visit the page in your browser, you'll see nothing has changed but behind the scenes we've separated out our header and footer. This will allow us to create multiple pages whilst retaining the same look and feel throughout the site, along with reducing the duplication of code.

Finally to complete the division, I'd like you to make use of the $title variable by setting it as the page's title. You can do this by editing the header.php file and adding the following line of code inside the <head> element:

The above code echo's out (i.e. prints to the screen) the contents of the $title variable. In PHP this only works on certain types of variables, those which contain values which are of string, boolean, integer and etc. If the variable contains an array or an object, the contents would not be printed. (We'll go much more in depth with PHP in the later sections, as it will become our primary language in our development.)

2. Add a Basic Copyright Notice

A common practice on most (if not all) websites is to place a copyright notice on the footer; therefore I'd like you to add a copyright notice on the footer of your site. Using PHP I'd like for you to have the year dynamically set. This can be achieved using the following code (e.g.):

Here we've typed in static text but the year is dynamically populated, which will update automatically every year. This uses PHP's date() function. The function takes parameters, in our case we've passed in the Y parameter to denote that we want to return the current year. The date function is not limited to printing out only the year but the current date and time, hence it is capable of printing down to the micro-seconds, return if the current year is a leap year, the current time zone and amongst other capabilities. To see an exhaustive list of the parameters the PHP date() function accepts, you can read the DateTime PHP Manual (it is worth understanding).

Adding a copyright notice of course is not necessary on the site we're building but I wanted to demonstrate an additional feature (albeit another micro feature) of PHP.

3. Loading Libraries

To get started with using Bootstrap (along with FontAwesome and jQuery) we must load these libraries onto our site.

We can load the libraries using NPM (which we made use of in the last sections via the CLI) however for now, we'll be using CDNs (Content Delivery Network, i.e. packages hosted by third-parties). We're taking the CDN route even though we have NPM installed in order to keep the process simple for now, as otherwise we'd need to configure a module bundler (which we will progress onto later in this course).

To load the libraries, add before your closing </body> tag the following scripts in your footer.php file (above your own JS file):

Ensure to place these lines above your own JS file, as by placing your JS file last you will be able to execute any functionality these libraries introduce.

Finally load the Bootstrap CSS by adding the following in your header.php file inside the <head> element:

The stylesheet should be placed before/above your own CSS file, so your CSS file will take precedence on styling.

4. Using Bootstrap and FontAwesome

Now that we've loaded all the libraries, we can begin to make use of them.

4.1. Bootstrap

I'd like you to begin experimenting with Bootstrap by creating navbars, setting your content inside containers, laying out your pages' content inside grids and making use of a modal.

I'd recommend browsing the Bootstrap Documentation and taking a look at the components. You can find their extensive offerings by browsing their left-hand side navigation. Within their documentation you'll see demos and corresponding code. By copying the code from the docs into your own page, the component will be immediately implemented onto your site. (As a note, I'd recommend placing navbars within the header.php file so that all pages feature a navigation.)

Bootstrap also handles ensuring your website is responsive (i.e. compatible with mobile devices) where it possibly can. You can test your site on mobile devices directly in Google Chrome. You can do this by right clicking anywhere on the page in Chrome -> Inspect -> then click the 'devices' icon on the top-left of the inspector window that appeared (to exit, click the devices icon again). You can select the device to test from the drop-down below the address bar.

4.2. FontAwesome

To make use of FontAwesome, you should browse their library of free icons. You can search for icons using keywords. Once you find one you're fond of, you can click on the icon within the FontAwesome website and then press the 'Start Using This Icon' button. A modal/pop-out will appear, from here copy and paste the provided HTML into your site.

FontAwesome's iconography are delivered through fonts, therefore you can control the styling of the icon using CSS' font styling properties, e.g. font-size, colour and etc.

Please spend time to build your site experimenting with and implementing features from Bootstrap whilst applying your own styling via Sass (as you already may have done from the previous lessons). We will eventually move onto using Bootstrap for our web applications we develop, so any experimentation at this stage will be beneficial for later on down the line as you become accustomed to using the UI framework.

Author(s)

Arif Ullah

Developer & CEO