This is the second part of a series of tutorials on making a website with PHP and MySQL templating. In this tutorial we will get started with bootstrap and our header page. To see what the tutorial is going to cover check out our intro to the series here. To get started, start with the first part of the series follow this link.
All of the files from the project are available on Github here.
Note: This tutorial is still being made and planned out, so if there is a feature you would like to be put in MC DewDropz site, let me know in the comments and if it’s cool and not way too specific, I will consider putting it in and giving step by step instructions.
So now that we’ve seen that we’re able to set up a basic PHP working enviroment and seen how we can use some basic templating and after we’ve taken a moment to pat ourselves on the back, we should reflect upon what we’ve done and acknowledge that it is still kinda lame.
I mean, “This is a header” and “I’m writing PHP!”? For this you went to college!? Let’s keep going.
header.php, write or copy and paste the following:
<!doctype html> <html> <head> <title>M.C. DewDropz Dewbious Intentionz</title> </head> <body>
Notice that we did not close the
<body> tag, which we will do in another file we’re about to make called — (can you guess?) —
Now we shall make the footer:
- In the same folder as
index.php, make a new file called
- In that file – place the closing
Doing good! Can you guess what we’re going to do next??
If you guessed go to
index.php and write or paste
<?php include 'footer.php'; ?> on the bottom – then 50 points for you! (While you’re there you can erase you
<h1>I'm writing PHP!</h1> – there’s no need to gloat about it).
Alright. Now for Bootstrap! Lets go to Bootstrap’s introduction page to get started!
If you read the docs there you will discover that you can use bootstrap just by inserting this link to the CSS within the
head tags (in our
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
body tags in
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
So, do that.
Using a Bootstrap Navbar
Now we’re ready to start using Bootstrap components to build our site. Bootstrap components are generally built to be responsive and look good everywhere. Let’s go to there Navbar Section and pick out a navbar! We’ll just take the first one we see and paste it in the
header.php file, right after the
<body> tag – like this:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
After that, Let’s make a heading that will go on every page, after the navbar, type or paste:
<div class="jumbotron text-center"><h1>M.C. DewDropz - Dubious Intentionz</h1></div> <div class="container">
footer.php put the closing
div tag! Go test the page in your local host and notice some improvement. 😉
(It should look like this)