Header Image

Introduction

PHP is one of the most commonly used back end programs. It is relatively simple to use. If you know JavaScript then the programming syntax in PHP is very similar. We will be going over all the different concepts in PHP and also use Bootstrap to setup websites quickly. I will concentrate more on how the concepts we learn in PHP can be directly used in a website or an app rather than just learning PHP as a programming language.

If you’ve built static sites with HTML/CSS you’d know how tedious it can get while creating many pages. But this can easily be overcome by using PHP to just import the standard sections of each page like the header, footer, sidebars, nav-bars and other such parts of the site. This allows us to just concentrate on the unique content of each page.

Before getting into PHP, I want to start by doing some setup using HTML/CSS and Bootstrap to make a simple website and get it up and running. Static websites which use HTML/CSS and Javascript can be directly run locally by just opening the html file using a browser like Chrome or Edge. If you’ve never used HTML/CSS before then I would highly recommend taking some lessons. There are some great free tutorials available online that you can learn from.

PHP needs a server to run. In the next post we’ll look at installing MAMP which is needed to run PHP locally. You can also just upload your php file into hosting sites that support PHP and run it like that. We’ll get into all this later.

Now let’s start with the setup required.

Code Editor

The first thing you’d need is a program that can help you write code easily. I highly recommend Sublime Text 2. It’s free and works both on Mac and PC. I’ll be using a Mac for these posts, but I also have a Windows PC. So if you run into some issues/errors on either Mac or Windows do contact me and I can help you solve them.

Create a folder on your desktop (or wherever you like) and call it learningPHP (Or any other name you like :p).

Bootstrap

You can download the course files from here

Next we’re going to go directly to Bootstrap’s official site and download a sample site. This will help us to avoid having to write a page from scratch. Go to http://getbootstrap.com/examples/navbar/ and then right-click on the site and click view page source. This will show you the html of the page. The html will look something like this —> view-source:http://getbootstrap.com/examples/navbar/

Copy all the content from this page and paste it in Sublime Text and save it as index.html (this is the most commonly used name for a home page) in the folder you had created previously. Now if you open the page in a browser it will look like this.

Page without bootstrap

Now to add some styling, go to http://getbootstrap.com/getting-started/ and download bootstrap.

Download Bootstrap

The downloaded file will have many folders and files. We are not going to use all the files. We will just use the bootstrap.css and bootstrap.js for now. Create two folders in your working folder as ‘css’ and ‘javascript’. Copy the bootstrap.css into the css folder and bootstrap.js into the javascript folder. Now you should have the below folders/files.

boostrap folders

We have to tweak the index.html a bit to make sure the page is connected properly to our css and javascript files. First we have to change the

<link href=”css/bootstrap.min.css” rel=“stylesheet”>into

<link href=”css/bootstrap.css” rel=“stylesheet”>

At the bottom of the page change

<script src=“../../dist/js/bootstrap.min.js”></script> into

<script src=“javascript/bootstrap.js”></script>

At the bottom there is also another link. This for using jQuery, which is a library that uses JavaScript. We need this line, so don’t delete it. I’ll get to explaining a little more about this at some point.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>

The way folders are setup and how the files inside a folder are accessed can get a little complex once we start using PHP. I’m going to try and make a cheat sheet to help understand this as I get confused with this all the time.

That’s all the setup that’s needed. Save this file and then open the index.html file using a web browser like Chrome or Edge. It should look exactly like http://getbootstrap.com/examples/navbar/. When you try to reduce the size of the window the items in the navigation bar should compress into a smaller dropdown. If this works well then it means your javascript is linked up correctly and working well.

QUICK SUMMARY

  1. Download Sublime Text 2
  2. Go to http://getbootstrap.com/examples/navbar/ – view page source and save the content into a file as index.html.
  3. Go to http://getbootstrap.com/getting-started/ and download the bootstrap files.
  4. Save the bootstrap.css and bootstrap.js in the folders css and javascript.
  5. Tweak the index.html file to make sure that the file is pointing correctly to bootstrap’s css and javascript files.

Refresh the page.

You can try checking out other bootstrap templates and get them working. If you run into errors or if your code isn’t working, do let me know and I can help you fix them.

Check out these two courses that I used to learn web development and wordpress

WordPress Theme Development with Bootstrap

Web-development The Complete Web Developer