Installation

In this book, I’ll guide you as you take your first steps beyond the static world of building web pages with the purely client-side technologies of HTML, CSS, and JavaScript. Together, we’ll explore the world of building websites, and discover the dizzying array of dynamic tools, concepts, and possibilities they open up. Whatever you do, don’t look down!

Okay, maybe you should look down. After all, that’s where the rest of this book is. But remember, you were warned!

Before you build your first dynamic website, you must gather together the tools you’ll need for the job. Like baking a cake, you’ll need the ingredients before you can start following the recipe. In this chapter, I’ll show you how to download and set up the software packages required.

If you’re used to building websites with HTML, CSS, and perhaps even a smattering of JavaScript, you’re probably familiar with uploading the files that make up your site to a certain location. It might be a web hosting service you’ve paid for, web space provided by your Internet service provider (ISP), or maybe a web server set up by the IT department of the company you work for. In any case, once you copy your files to any of these destinations, a software program called a web server is able to find and serve up copies of those files whenever they’re requested by a web browser like Microsoft Edge, Internet Explorer, Google Chrome, Safari, or Firefox. Common web server software programs you may have heard of include Apache HTTP Server (Apache), NGINX and Internet Information Services (IIS).

PHP is a server-side scripting language. You can think of it as a plugin for your web server that enables it to do more than just send exact copies of the files requested by web browsers. With PHP installed, your web server will be able to run little programs (called PHP scripts) that can do tasks like retrieve up-to-the-minute information from a database and use it to generate a web page on the fly, before sending it to the browser that requested it. Much of this book will focus on writing PHP scripts to do exactly that. PHP is completely free to download and use.

For your PHP scripts to retrieve information from a database, you must first have a database. That’s where MySQL comes in. MySQL is a relational database management system, or RDBMS. We’ll discuss the exact role it plays and how it works later, but briefly, it’s a software program that’s able to organize and manage many pieces of information efficiently while keeping track of how all those pieces of information are related to each other. MySQL also makes that information really easy to access with server-side scripting languages such as PHP. And, like PHP, it’s completely free for most uses.

The goal of this first chapter is to set you up with a web server equipped with PHP and MySQL. I’ll provide step-by-step instructions that work on recent versions of Windows, macOS and Linux, so no matter what flavor of computer you’re using, the instructions you need should be right here.

Your Own Web Server

Chances are, your current web host’s web server already has PHP and MySQL installed—which is one of the reasons PHP and MySQL are so popular. If your web host is so equipped, the good news is that you’ll be able to publish your first website without having to shop for a web host that supports the right technologies.

When developing static websites, you can simply load your HTML files directly from your hard disk into your browser to see how they look. There’s no web server software involved when you do this, which is fine, because web browsers can read and understand HTML code all by themselves.

However, when it comes to dynamic websites built using PHP and MySQL, your web browser needs some help. Web browsers are unable to understand PHP scripts. Instead, PHP scripts contain instructions for a PHP-savvy web server to execute in order to generate the HTML code that browsers can understand.

Even if you have an existing web host that supports PHP, you’re still going to want to be able to run PHP scripts yourself without needing to use someone else’s server. For this, you’ll need to set up your own web server. The word “server” might make you think of a large, air-conditioned room filled with big computers in racks. But don’t worry, you don’t need any fancy new hardware. Your laptop or desktop will work just fine.

To run PHP scripts on your web host, you need to write them in your editor, open your FTP or SSH client and upload them to the server. Only then can you see the result in your browser by navigating to the URI of the file you created. If you made a mistake and there’s an error, you’ll need to change the code, go back into your FTP program, upload the file again and then reload the page. This is tedious, and uses up precious time that you could be using to write code. By running a server on your own PC, you’ll be able to save a file in your editor and view the changes in your browser by simply refreshing the page—no file uploading required. This is a real time saver, and one of the biggest (although not only!) advantages of running a server on your PC—even if you have a perfectly good web host already.

So how do you get a web server running on your PC? There are three methods of achieving this, each with its own advantages and disadvantages.

Server Setup 1: Manually Installing All the Software Components

Apache is a web server, and like most software it comes with an installer that lets you easily set it up on your PC. Without much effort, you can have it serve web pages. However, there are hundreds of configuration options, and unless you know what you’re doing, it can be time consuming and confusing to get it working for developing PHP websites.

For our purposes of running PHP scripts, a web server alone is not enough. For manual installation, you’ll also need to install PHP—which doesn’t have an installer—and configure it. As with Apache, there are lots of options, and the defaults are set up as if you’re running a live website. For developing code, this is bad, as there are no errors shown. If you made a mistake, you’ll get a blank page with no indication of what went wrong. Even a single character out of place—such as a missing brace or semicolon—will give you a blank page, with no indication of what caused the problem. To solve this, you’ll need to manually configure the PHP installation and tweak the settings to show error messages and enable other tools that make development a more pleasant task.

You’ll also need to configure Apache to talk with PHP, so that when someone connects to the server and requests a file with a .php extension, the file is first sent to PHP for processing.

For this book, you’ll also want MySQL, which means manually installing and configuring that as well.

Apache, MySQL and PHP each have dozens of configuration options, and unless you know exactly what you’re doing, they can be difficult to set up. Even if you’re an expert, it will take at least an hour to get everything working!

Manual installation requires a significant amount of knowledge or research and is beyond the scope of this book. Although being able to configure a server is a useful skill, it doesn’t help you learn how to program using PHP—which is what you’re really interested in if you’re reading this book.

This option is not for the faint hearted, and even for seasoned professionals it’s very easy to miss some important settings. Luckily for us, we don’t need to worry about setting up and configuring all the software individually.

Server Setup 2: Pre-packaged Installations

The problems with manual installations have been recognized by groups of developers over the years, and to overcome them they’ve built pre-packaged installations—a single installer that installs PHP, Apache, MySQL and other relevant software, all pre-configured with appropriate settings for developers like you. Some example packages are XAMPP (X, Apache, MySQL, PHP, Perl), WAMP (Windows, Apache, MySQL, PHP) and LAMP (Linux, Apache, MySQL, PHP).

This is obviously a lot simpler than manually installing each piece of software, and doesn’t require learning how to configure your server. It’s quick and easy and a lot better than a manual installation, though there are still a couple of problems you may encounter with this method:

Your web host is probably running Linux, but your PC probably isn’t. Although Apache, MySQL and PHP work in Windows, Linux or macOS, there are some big differences between the way the operating systems work. On Windows, file names are not case-sensitive, meaning that FILE.PHP is the same as file.php and fIlE.pHp. On your web host, this will almost certainly not be the case! This causes frequent problems when a script working perfectly on your Windows development server doesn’t work once it’s uploaded, because files are being referenced in the code with the wrong case.
Apache and MySQL are servers, and they run in the background. Even when you’re not developing software, they’ll be running, using up your computer’s RAM and processing power.
Pre-packaged software is always slightly out of date. Although security fixes aren’t a priority for a development computer (you shouldn’t be allowing people to access it across the web!), it’s always useful for developers to stay on the most recent versions of software to check for problems that might be encountered when the software on your web host is updated. If your web host is using a newer version of PHP than your development server, this can cause problems with features that have been changed or removed. Finally, developers like to play with new features as they’re released. You won’t be able to do this if you’re not using the latest versions!

Although pre-packaged installations are much better than installations, these problems don’t make them ideal. Luckily, there’s an even better approach!

Server Setup 3: Virtual Servers

The third method of getting a server up and running is a virtual server. A virtual server acts like a web server on a different computer. This computer can be running any operating system, and you can connect to it from your PC as if it were somewhere else in the world.

Virtualization software such as VMWare and VirtualBox is common. As a web developer, you may be familiar with tools such as modern.ie, a helpful service provided by Microsoft that lets you download virtual machines running various versions of Windows, Microsoft Edge and Internet Explorer. If you want to see what your website looks like in Internet Explorer 8 on Windows XP, you can download the relevant virtual machine and run it in a Window on your Windows 10/macOS/Linux desktop without having to actually install and run Windows 7 with Internet Explorer 8 inside your existing Windows 10, Linux or MacOS installation.

Windows 10 running inside Arch Linux — windows 10 running inside Arch Linux

Software like VirtualBox allows you to run an operating system inside another operating system. For testing Internet Explorer 8, you can run Windows 7 in a virtual machine. However, for our purposes of running PHP scripts, this allows us to do something a lot cooler: we can run a Linux web server with PHP, Apache and MySQL installed on our Windows or macOS PC.

This can be used to allow you to run the exact same versions of PHP, MySQL and Apache that are being used on your web host, on the exact same operating system, which prevents any issues that may exist due to version differences or differences in the operating systems being used.

One of the biggest advantages is that you can download pre-configured virtual machines, like the Windows XP and Internet Explorer 8 virtual machine provided by Microsoft, or a virtual machine that has PHP, Apache and MySQL installed and configured to work together. This is like the pre-configured package but runs on Linux as if it’s a real web server on your network.

The downside to all this is that you have to download an entire operating system in order to run your code. That means more downloading, but in the era of 10 Mbit/s+ internet connections and terabyte hard drives, this isn’t really an issue worth worrying about! Because this is a best-of-both-worlds approach, and has advantages over the other two methods, I’ll be showing you how to get a virtual server up and running. It’s a lot easier than you might think!

Your Own Virtual Server

Before writing any PHP code and developing your website, you’ll need to install several pieces of software to run a virtual server:

Git, which allows you to quickly and easily download other people’s code.
VirtualBox, the software that runs the virtual machines.
Vagrant, a tool that allows quick and easy configuration of virtual machines. This works with VirtualBox to create your server.

Installation on Windows

Firstly, download and install the latest versions of the following software:

Once you’ve installed all the software, use your Start menu to open a newly installed program called “Git Bash” and proceed to the Getting Started with Vagrant section below. All the commands given should be typed into the Git Bash program, not Windows Command Prompt.

Installation on macOS

Firstly, download and install the latest versions of the following software:

Once you’ve installed all the software, open up the Terminal program and proceed to the Getting Started with Vagrant section below.

Installation on Linux

Linux makes installing software very simple. On most distributions, this can be done via your package manager.

Debian/Ubuntu:

sudo apt-get install git dkms virtualbox virtualbox-dkms vagrant

Fedora/Red Hat:

sudo dnf install git VirtualBox vagrant vagrant-libvirt

Arch Linux:

sudo pacman -S git virtualbox vagrant

Once you’ve installed all the software, open up your favorite terminal program and proceed with the following steps below.

Getting Started with Vagrant

Now that you have all the software installed, it’s time to download a virtual server. From here on, the instructions are the same whether you’re using Windows, macOS or Linux. For a full tutorial on doing this, see the SitePoint article “ Quick Tip: Get a Homestead Vagrant VM Up and Running ”.

We’ll be using a pre-built virtual machine (or “box”) called Homestead Improved. This contains PHP, MySQL and NGINX already configured for development purposes. To download it, from your terminal prompt firstly navigate into the directory you wish to store your website’s files in, and then run these commands:

git clone https://github.com/swader/homestead_improved my_projectcd my_project; mkdir -p Project/publicbin/folderfix.sh

Using the Command Prompt to Navigate

If you don’t know how to navigate around using the command prompt, you use the cd command (short for change directory). Git Bash uses Unix style paths, so C:\Users\Tom\Desktop becomes /c/Users/Tom/Desktop. If you want to store your files inside your Documents directory, e.g. Documents/Website, you can navigate to it using cd /c/Users/[Account Name]/Documents/Website.

If you have any spaces in the directory names, simply surround the entire path with quotation marks, e.g. cd "/c/Users/[Account Name]/Documents/My Website".

After you’ve run the commands, several files will be created inside your project directory. These files contain instructions for creating and configuring the virtual server. Finally, you just need to start the server using this single command:

vagrant up

Running the Command in the Right Place

You must run the vagrant up command from the directory that stores the files that were downloaded via the git clone command earlier. If you type ls, you should see Vagrantfile listed. If you don’t see it, you’ll need to navigate to the correct directory using the cd command.

The server will start and you’ll see something like this:

If the `vagrant up` Command Hangs

If the vagrant up command hangs on the line Connection timed out. Retrying… for more than a few minutes, it’s likely your PC isn’t configured for virtualization, which it needs to be for running virtual machines. To fix this, you’ll need to boot into your PC’s BIOS and enable a technology called VT-x (if you have an Intel processor) or AMD-V (for AMD processors). To do this, refer to your computer’s manual, or use Google to find instructions for getting into the BIOS on your PC. This setting is sometimes called virtualization technology, VT-x, SVM or hardware virtualization, depending on the make of your PC.

The first time vagrant runs, it will take a few minutes to load, as it requires downloading quite a large file. Don’t worry, it won’t take this long each time you want to start your server. In future, all the downloading and initial configuration is done.

Unlike using a manual NGINX/PHP/MySQL installation directly on your PC, the server is only started when you want it to be, by running vagrant up. You can stop the server at any time, by running vagrant halt, and boot it again using vagrant up when you need it.

You can also use vagrant suspend, which is like shutting the lid on your laptop. It pauses the virtual machine so it doesn’t need to reboot next time you run vagrant up. Unless you’re low on disk space, suspend is preferable, as the virtual machine will start up considerably faster.

One of the directories that was created is called Project. Open this directory and the public directory inside it. This is where you’ll store your PHP scripts, HMTL files, CSS files and images. Any files placed inside the public directory will be accessible on your virtual server.

Using your favorite text editor, create a file called index.html that contains the following code:

<!DOCTYPE html><html>    <body>        <h1>Hello World!</h1>    </body></html>

You can now view your web page on the server. The server acts like a computer on your local network and uses the IP address 192.168.10.10. If you open your browser and navigate to http://192.168.10.10/, you should see your Hello World test page. If you can see the page, it means your server is running and you’ve written your file to the right directory.

The numeric IP address may look at little strange. Usually, when you access to a website, you connect to something like http://www.sitepoint.com/ or http://www.google.com. However, behind the scenes all websites use an IP address. If you type http://216.58.201.46/ into your browser, you’ll see the Google home page.

It would be very hard to remember the IP address of every website you wanted to visit. (I struggle with my PIN!) So we typically buy a domain name and associate it with an IP address. When you type sitepoint.com into your web browser, the browser looks up the corresponding IP address and actually connects to that behind the scenes. You can think of it a bit like a phone book. Rather than remembering someone’s phone number, you can look through a contact list and find them by a more easily recognizable name. This process happens for every website you visit, and every website has an IP address similar to 129.168.10.10. (Now, or in the near future (depending on your ISP), you might start seeing IP addresses in the format 2001:0db8:85a3:0000:0000:8a2e:0370:7334. This is an IPv6 address, which works in the exact same way as the notation shown in this chapter. The problem with IP addresses in the format 0.0.0.0 (IPv4) is that there are only around 4 billion possible addresses. That sounds like a lot, but every single website, phone or computer connected to the Internet needs a unique IP address … and we’ve pretty much run out of them! The new IPv6 addresses will keep us going for quite a while longer.)

It would be possible to buy a domain name and associate it with 192.168.10.10, but for the purpose of this book we’ll just stick to the IP address, as we won’t need to type it often.

You can place files onto the server by writing them to the public directory. Any file that you place in this directory is accessible by both the virtual server and your physical computer. Any file in the public directory is available with the same name on the server's URL. For example, if you placed a file called about.html in the public directory then you could access it on the URI http://192.168.10.10/about.html and logo.png would be visible at http://192.168.10.10/logo.png. You can even create subdirectories to store your files. For example http://192.168.10.10/css/stylesheet.css, where the stylesheet directory was inside a directory called css within the public directory.

Linux Issues

If you’re using Linux and either the vagrant up command isn’t working or you’re unable to connect to the web server on http://192.168.10.10/, see Appendix B.

Text Editors

Text editors provided by your operating system, such as Notepad or TextEdit, aren’t really suitable for editing HTML and PHP scripts. However, there are a number of solid text editors with rich support for editing PHP scripts that you can download for free. Here are a few that work on Windows, macOS, and Linux:

These are all very similar, and for the purposes of this book, any of them is a good choice and will make your life as a developer a lot simpler than Notepad or TextEdit.

In this chapter, you’ve learned how to set up a web server with Homestead Improved, and how to host an HTML file on the server. I’ve only covered the basics in order to quickly get to the meat and bones of this book: actually programming in PHP. However, having a good development workflow as a PHP developer is a skill in its own right. For more information on Homestead Improved and PHP workflows, see Jump Start PHP Environment, by Bruno Škvorc. For our purposes, however, the server is up and running, and you’re ready to write your first PHP script.