Introduction to PHP Setting Up Your Development Environment

Hello again, and welcome back to Educator.com's Introduction to PHP course.0000

In today's lesson, we are going to go over how to set up your development environment.0005

Specifically, we are going to talk about what development environments are, and then go over a couple different kinds of development environments:0010

one known as a remote development environment, and one known as a local.0017

We are going to talk about the software that we are going to be using in this course for our development environment.0021

And then, we are going to go over a couple of concepts related to web servers, and what is known as local development.0026

Basically, we are going to be talking about the loopback IP address, and we'll explain more about that, as well as the localhost host name.0033

We are also going to talk about the concept of a document root.0040

We are also going to go over a description of the different kinds of text editors that are available,0044

and go over our PSPAD installation, which is the text editor that we are going to be using for this course.0049

And then, we are going to finish up with a section that provides some additional resources for finding help in setting up your development environment,0055

and then also, introducing our first homework challenge.0062

What exactly is a development environment?0066

Well, essentially, it is just a setup for a programmer to be able to write and test and debug their software.0069

What we have done for this course is: we have chosen a default development environment setup that we are going to use throughout the course.0076

The reason for that is that, unfortunately, one of the biggest roadblocks to new PHP developers0084

is actually just getting their development environment set up so that they can actually run PHP code and test it.0090

Part of this reason is that PHP and Apache (which, as we learned in the last lesson, are two pieces of software that need to be configured to work together)0096

can be quite difficult to do that.0106

And so, we are going to install some software for this course that is going to help ease that problem.0108

For our default environment that we are going to be using, we are going to be running it on a Windows 7 platform.0115

The reason for that is: I feel that that is the most popular operating system, and will be able to reach most of the students out there,0121

the idea being that you will be able to mimic the steps that we take in this lesson,0127

so that you will be able to get your development environment set up with as much ease as possible.0132

Additionally, we are going to be including software components as part of our development environment that have a couple of key features.0140

We are selecting components that are free, so that all of the students will be able to download them.0148

We are picking things that are easy to install and configure.0152

And additionally, we are picking software that is available for most major operating systems.0156

So, even though we are going to be walking through the setup of the development environment on a Windows 7 machine,0160

all the software that we are going to be using (except for the text editor) is available for most operating systems,0165

so if you develop on a Macintosh or Linux or Unix machine, you will be able to get the same versions of the software we are going to be using.0172

The text editor, as mentioned, is only available on Windows machines; but there are literally hundreds of text editors out there on the Web,0180

so doing a simple Google search should be able to find you a compatible text editor that will work for use in this course.0187

Additionally, the software that we have chosen is well-documented.0195

It has a large user base, so that there is a lot of information out there that will help you if you get stuck in configuring it,0199

for example, if the default configuration that we set up in this course doesn't work for you.0205

Additionally, the software that we are going to be using is actually software that is used in the real world.0210

We are going to be using the latest version of PHP, and also the Apache web server, which is the most common web server that is used in the world.0214

The other thing to note is that the development environment we are going to be setting up for this course0223

is going to be the same development environment that we are going to use in the Advanced PHP course, with some slight modifications.0227

So, for those of you that continue on in the PHP course sequence here at Educator.com,0233

you will be able to continue to use that same development environment, without having to reinstall everything over again.0238

One thing I want to talk about first is: there is a thing about this remote development and local development.0246

Basically, "remote development" refers to where a programmer develops their code, or their websites, their PHP pages,0252

on their local machine, and then the way that they test them is by uploading them (typically by FTP)0260

to a remote server, where they can be run and be tested.0267

Now, we learned in our last lesson that, in order to basically view and serve PHP pages, we need three pieces of software.0271

On the client side, we need a web browser to request the web page to be viewed.0283

On the server side (in this case, it's called the remote server), we need the Apache web server that is able to serve HTML documents,0288

and also is able to pass on--if PHP files are requested--those requests to the PHP Interpreter,0296

so that the PHP Interpreter can generate HTML output and pass it back to Apache to pass it back to the client.0304

So, in order to be able to serve and view PHP pages, we need a web browser, the Apache web server, and the PHP Interpreter.0310

Additionally, for development, we need a way to code our text files or our PHP files that we are going to be using.0321

And so, we need a fourth piece of software that is going to be a text editor.0327

And basically, the way that it works in a remote development environment is that, typically,0332

the web browser and text editor are on your local machine, and the remote server contains the web server0336

and the version of PHP running that is going to generate your dynamic web pages.0343

What happens is: you will create some PHP file on your local machine (for example, a .php file).0349

And then, what you will do is: you will typically use FTP to upload that PHP file to your web server.0356

Then, in order to test the software, you are going to open up your web browser,0364

create an http request for the particular PHP file that you are wanting to test,0369

and then the typical process for loading a PHP file occurs.0376

Apache is going to let PHP know that a PHP file has been requested.0380

PHP will load it from the hard drive, parse it, and generate HTML, which it will pass back to Apache, which Apache then forwards on to the client.0385

This is basically the scenario that happens.0396

For those of you that have been Web developers before, that have a web host,0397

typically what you do is: you develop your HTML files on your local computer.0402

You upload them to your web host, maybe to a temporary directory, and then view them there to test them out.0406

This is an example of remote development.0412

What we are going to be doing in this course is setting up a scenario for a local development, or a local development environment.0415

What you can see is that, over here, we actually don't have this remote machine involved anymore.0421

All of the software that we had in the remote development environment, we are still going to have,0426

but it is all going to be run on our local development machine.0431

So, on whatever computer you are developing on--your Windows 7 machine--we are going to have the Firefox web browser software installed.0434

We are going to install the Apache web server; we are going to have PHP installed; and then, we are also going to have a text editor installed.0442

What happens is: basically, there are a number of benefits to doing this.0450

A lot of it has to do with increasing your efficiency as a developer, because now, when you create a PHP file,0455

in your text editor, on your local machine, instead of having to FTP it across the Internet to Apache,0464

that FTP simply becomes a local saved file to your hard drive.0471

Because your Apache server is running on your local computer, Apache and PHP just need to load that file from the local hard drive.0475

So, we don't need that FTP operation, and we eliminate one of the network interactions that takes time.0482

It takes time to upload files by FTP.0491

Additionally, when we want to test a file, we don't actually have to go out on the Internet.0495

We just point our browser at our local Apache server, and it is still going to generate an http request,0499

but it is not going to go out over the Internet.0505

It is going to stay local within your computer.0507

So that, again, eliminates another network connection that you have.0510

Another added benefit of this is that, by having your web server and PHP all on your local development machine,0513

you can actually develop while you are offline--while you are not connected to the Internet--0520

because you don't need to be able to FTP to a remote server, nor do you need to connect to a remote server to test your pages.0524

The other benefit that you get from having these things installed locally is that you have access to all of the configuration files--0532

for example, for the Apache server and for the PHP Interpreter.0540

You have access to those configuration files, whereas for example, if you are using a web host and have a shared web hosting account,0545

you may not be able to alter the PHP configuration.0552

Now, because we are going to be developing,0556

we may want to set some configuration settings that will be useful for development, so we want to be able to make those changes.0558

And also, as we are learning PHP, we are going to be changing some of these settings.0563

And by having that configuration file that we can edit on our local machine, we will be able to experiment with different settings,0567

and it will help us in learning PHP and how to do PHP development.0574

The software that we are going to be using in this course, basically,0583

is the four pieces of software that we talked about: a web browser, Apache, PHP, and a text editor.0586

For the web browser, we are going to be using Firefox, which is an open source web browser that is free.0592

One of the main reasons we are going to be using it is because it has an add-on called Firebug,0600

which basically adds a bunch of Web developer tools to the browser that make it easier to do Web development,0603

and also that we will be able to use to help us diagnose problems with our PHP scripts,0610

for example, when we get into dealing with input data from HTML forms, such as something known as GET input data.0615

Actually, if we go and take a look--I have already installed Firefox, and basically, this is the link provided on that slide,0623

which will also be provided in Quick Notes, to where you can download Firefox.0630

Simply click on the download link; it is going to pop up a window allowing you to download an executable file.0633

And you simply run and install it, just as you would any other Windows application; it's a pretty straightforward and quick process.0639

Now, to install the Firebug add-on--that is actually something you do directly from Firefox.0646

The way you do that is: you go to the Firefox menu; you click on the Add-ons option, and Get Add-ons is going to load up.0650

In the Search Add-ons box, simply type Firebug.0659

What that does is searches all of the plug-ins and add-ons that are available for Firefox.0662

And we can see that Firebug pops up as one that is available.0668

We simply click on the Install button; what it is going to do is actively download that add-on in real time.0672

It has basically already installed it in this short amount of time, and then it asks you to restart Firefox in order for the changes to take effect.0680

If we click on Restart Now and wait a couple of seconds while the browser reloads (and actually, you can see that it already has),0688

what you will notice, actually--it's kind of subtle, but in the bottom right-hand corner of the screen, you will notice this little bug.0702

If you click on it, it opens up this tool panel at the bottom.0709

This is what Firebug is: it's a panel of different tools that allow you to diagnose and figure out problems that are going on with your web application.0714

And so, that is how you know it successfully installed--the little bug appears down here.0724

You can go ahead and close that by clicking on the bug again.0727

That is Firefox and the installation of the Firebug add-on.0730

The other piece of software we are going to be installing is actually a software distribution; it is called XAMPP.0736

What it is: it is a combination of a number of different pieces of software that are combined together in one distribution,0742

and set up so that they are easy to configure with one another.0749

In particular, XAMPP contains PHP (in this case, for the version we are going to be using--1.7.4).0753

It contains PHP version 5.3.5, and it contains the Apache web server version 2.2.17.0760

What we do is: we simply download this software distribution.0768

It is going to contain Apache; it is going to contain PHP, along with a number of other different pieces of software.0771

For example, it is also going to include the MySQL database.0776

And what it does is: it also provides some configuration files that make it easy for you to get Apache and PHP set up to work together.0780

That is one of the main reasons that we are using this software distribution:0788

because getting Apache and PHP to work together can be a very difficult task.0792

Also, the other piece of software that we are going to be using, that is mentioned, is the PSPAD text editor.0798

It is a Windows-based text editor, and it can be accessed at this link.0803

You simply go and download the executable file and run it, just like you did for Firefox; it's pretty simple.0807

For XAMPP, it's going to be a little bit different.0814

There are a couple of different options available at this link, which again, will be available in the Quick Notes.0816

I'm going to have you download the ZIP archive, and not the EXE file.0821

And actually, I'm going to walk through that XAMPP installation now.0825

The first thing for the XAMPP installation is actually: let's go look at the XAMPP website.0831

It is at a website called ApacheFriends.org; we want XAMPP for Windows.0837

If you scroll down this page and pull it up a little bit, you can see the different downloads.0842

There is going to be a Windows Installer and then a .zip file.0847

What we want is: we want to install the .zip archive; we want to download the .zip archive.0853

I have already downloaded that; and the first thing you do is: we are going to unzip that software distribution.0859

Now, I have actually already gone ahead and done that, because it takes a while; it's a pretty large file--it takes a while to unzip all of the contents.0869

But for this course, we are going to unzip that XAMPP software distribution into a directory called XAMPP.0874

You should put it in your Windows User directory.0882

The reason for that is related to permissions: we could install it in the Program Files directory, or maybe on the root hard drive (for example, the C drive);0886

however, because one of the things we mentioned that we want to be able to do as new developers is0895

to play with the configuration files, if you install, for example, the XAMPP distribution in the Program Files directory,0900

you run into problems when trying to edit the configuration files; you run into permissions issues.0907

Typically, that can be avoided by placing the XAMPP distribution within your User directory,0912

because you have full read and write permissions,0917

which will allow us to pretty easily change the configuration for PHP, and if we need to, Apache as well.0919

You unzip the file into an XAMPP directory in your user directory, and then the next thing you do is:0926

you run this setup script, or a batch script, that XAMPP provides for you, that is going to get everything configured and set up to work together.0932

If we go to where...Educator1 is the name of our user directory on this computer--0941

we have gone ahead and unzipped the XAMPP distribution into the XAMPP directory.0947

And you can see here, this is the contents of the XAMPP distribution.0954

What we are going to do is run the file called setup_xampp.bat, and that is the batch file that is going to set up XAMPP on your computer.0958

If we go ahead and click on that, what is going to happen is: a Windows command prompt is going to pop up.0966

And you may or may not be able to see the text in this window, but it basically says, in this case,0971

that it was successfully installed and configured, and press any key to continue.0977

If we go ahead and do that, XAMPP is properly set up on this computer.0980

Now, that being said, the next step that you want to take is to verify that the installation actually worked.0988

There can be some problems that occur.0993

The first thing that you do is: you start XAMPP; and you do that by running a file called xampp-control.exe in the XAMPP directory.0996

If we go ahead and go to our XAMPP directory, and we double-click on xampp-control.exe, this control panel for XAMPP is going to pop up.1005

And you can see, it has a number of different buttons on here.1013

The first one is a start button that relates to the Apache web server.1016

The next step that we are going to take, when we start XAMPP,1020

is to go ahead and click the Start button next to Apache, so that our Apache server will be up and running,1023

because we need that to serve files locally on our computer.1029

So, assuming everything works right, you will see a little message here that says "running," that lets us know that Apache is up and running.1032

One recommendation I would have would be to put a shortcut somewhere to this xampp-control.exe,1040

for example, on your taskbar, so that it is easy to access, because when we are changing configuration files,1045

you are going to want to be able to access that to start and stop Apache.1052

The next step that we are going to do, now that Apache is started and we know that that was successful1057

(if it wasn't, we would have gotten some sort of error message):1061

we are going to open our browser and browse to this address: http://127.0.0.1.1064

What that is: basically, we are saying we want to view the contents of the root of a web server at this IP address here, using the http protocol.1072

And if XAMPP was installed successfully, and Apache works correctly, we should see a splash screen up here.1085

So, if we go to our web browser, we open a new tab, and we go to http://127.0.0.1, and we click Enter,1092

(oops, I'm sorry, I mistyped http),1104

we see the XAMPP splash screen that is going to allow you to select a language.1109

For this course, we will be using English, so we click the English link.1113

What comes up is the XAMPP control panel; it is another one of the advantages of using a software distribution like XAMPP.1116

It provides a control panel that allows you to configure and play around with the different pieces of software that come with it,1125

especially things besides Apache and PHP, like your MySQL database and so forth.1132

So now, we know that our XAMPP distribution is up and running.1138

If you get to this point, you know that you have successfully installed XAMPP, and your Apache server is working correctly.1140

Now, what you will notice from the last slide is that we went to the address 127.0.0.1, which is an IP address.1149

It is known as a loopback IP address.1158

Basically, what it does is: when you type that in your web browser, your computer knows that when you go to that address,1160

it is not going to search for a computer on the network that has that IP address.1167

It knows that that address refers to itself--the local computer.1171

When you type that address in your web browser, your computer is going to know that it means,1175

"I want to look for a web server that is running on my local machine," so it is going to look for a local Apache web server.1179

Now, one other way to refer to this IP address is using the host name localhost.1188

Localhost is a name you can type in your browser; it works like domain names...for example, just like amazon.com does.1194

Whereas amazon.com, using DNS, translates to a specific IP address--1200

and it's an IP address that computers use to communicate, but you can access it in your web browser by typing amazon.com,1205

in that same way, we can use localhost and type that host name in our browser,1211

and that is going to refer to this loopback IP address, as well.1215

For the remainder of this course, we are always going to be using localhost to refer to our local web browser,1221

rather than the loopback IP address.1226

We are going to do that for pretty much the same reason why, when you go to amazon.com,1228

you don't type in the IP address: the domain name or the host name is easier to remember than the IP address.1231

Now, because those refer to the same IP address (localhost refers to 127.0.0.1),1238

if we go back to XAMPP or to our web browser, and we type http://, and type localhost this time,1245

what we should be able to do is make a request to our local web browser.1255

And if we hit Enter, we can see that that actually happens.1262

So, localhost and 127.0.0.1 both refer to our local machine with Apache running on it.1266

Now, one thing I want to talk about is a term called a document root.1277

Basically, what a document root is: it refers to a folder on your local hard drive1281

that contains all of the files that are accessible by your web server.1286

Basically, only files that are contained in a web server's document root or its subfolders are typically accessible by the web server.1291

For example, for those of you that have worked with web hosts before,1301

maybe your document root was named something like public_html, or www.1304

And basically, what your web hosting provider would tell you--they would say,1310

"Any files that you want to be made available on your web server--you put them in these directories."1313

For example, every file on your computer is not available by your web server; only files that are put in these specific directories--1320

the document root or its subfolders--are available by the web server.1327

For Apache and the XAMPP installation, the document root is a folder named htdocs that is located in the XAMPP root installation folder.1334

For example, if we go and look at our XAMPP directory, we can see, there is an htdocs folder.1347

And anything that we want to be able to test--that we want to be able to view through the Apache server,1351

which is going to be all of our PHP files, needs to go in this directory or below it.1356

What I am going to do is create a folder that we are going to be using throughout this course1361

to contain example files and the web application we are developing; and I'm going to call it intro2php, with the number 2.1364

So basically, I have created a new directory within our document root.1375

And then, I am going to use PSPAD (which we haven't talked about yet,1379

but it's the text editor that we are going to be using for this course) to create a simple HTML file.1382

It is going to be a bare-bones file that just has the HTML and body tags, as well as a header tag.1391

We are just going to include a header that says some message.1405

We'll call the file sample.html, so we're going to say, "This is sample.html."1412

My typing is off.1423

When we go ahead and try to save this file using the Save As command, we are going to browse to the htdocs folder in our XAMPP directory.1429

And within that, we are going to browse to the intro2php folder, and we are going to save this file as sample.html.1441

Now, if we go back and we look at our intro2php file, we have this sample.html file here.1452

Well, because this directory (intro2php) is contained within our document root,1458

the files within it are accessible by our web servers, so we can use a web browser to access them.1462

So, because when you go to the localhost and just look at the root directory, what it shows you is the contents of the document root--1469

well, we are not interested in the document root; we are interested in the sample.html file in the intro2php directory within the document root,1481

so we are going to type the URL: intro2php/sample.html.1490

And as you remember, when we talked about URL's, everything after the host name is a path.1496

So, we are saying that we want to find the sample.html file in the intro2php directory1502

that is within the document root of our web host (in this case, our local web server).1509

And if we go ahead and browse to that page, we can see that our web page loads up.1514

And if we look at the code, we can see that load up some...we can see the source code that we typed.1518

And so, that is how URL's map to files in your local file system.1525

In this example, sample.html, contained in the intro2php directory, contained in the htdocs directory,1533

is accessible by localhost/intro2php/sample.html.1541

That is how URL's map to files within the file system.1547

And also, this is typically how local development is going to go: you are going to be creating a text file in your text editor.1553

You are going to be saving it somewhere within the document root (in this case, into the intro2php folder).1560

And then, using your web browser, you are going to browse to it using localhost to see if it works as expected.1565

Now, I just want to talk a little bit about text editors.1574

To code PHP files--PHP files are just essentially plain text files, and there are a number of different text editors out there which can do that.1577

There is sort of a spectrum of text editors.1588

On one end, you have, for example, Windows Notepad, which is basically a bare-bones text editor.1590

It just allows you to create a text file and save it.1594

On the other end is something like Zend Studio, which is an IDE, or an Integrated Development Environment.1598

What that does is: that is sort of like a text editor on steroids.1604

It provides all sorts of features in addition to just being able to edit text files.1609

For example, it allows things like code completion, code refactoring...it might include some debugging tools or some build tools.1616

What we are going to be using is PSPAD, which is somewhere in the middle of the spectrum.1623

It is actually more towards the bare-bones end.1627

And essentially, PSPAD is a bare-bones text editor with a few little features added on top of it that we are going to make use of.1629

One thing to note is that we are not using Zend Studio or any of the IDE's that are available out there.1638

And there is a specific reason for that, and that is because these IDE's, while very powerful1643

(and they can really make a programmer's life much easier by doing things automatically),1648

that is part of the problem: for example, it will do things automatically for you behind the scenes.1654

And as a new programmer to PHP, you want to really know what is going on.1658

We want to be able to do everything ourselves, so we can really learn how it is going on.1662

If we use the IDE, it is going to be doing things, and we are not really going to be understanding what is going on,1666

which is why we have chosen a more bare-bones text editor.1671

Now, that said, once you become an experienced PHP programmer, it would be great to move to the IDE.1675

That is what professional programmers use, because you allow it to do mundane tasks that you understand how they work,1680

but they are sort of a pain to do; let them do that for you.1688

We need to sort of work through those pains in order to see what is actually going on behind the scenes, to learn how things work.1691

PSPAD is installed, as mentioned before, just by downloading an EXE file from pspad.com.1699

You are going to download the Windows Installer; and when you install it, you just run through it like a typical installation.1707

This is what PSPAD is going to look like when you open it up.1714

Now, there are a couple things to note.1716

One is: it has sort of a sidebar here that you can disable if you want more screen real estate.1718

You simply do that by clicking on this Tool Panel button in the View bar.1724

Additionally, we are going to be debugging our PHP application, so we are often going to want the line numbers of where errors occur.1730

There is an icon in the Menu bar at the top over here that, when you click on it, goes ahead and shows the line numbers of the pages.1736

That might be something that you want to do.1744

Additionally (and the main reason we have chosen PSPAD)--1747

the additional feature that it provides on top of Windows Notepad is what is known as syntax highlighting.1751

What that does is provides visual cues to you as the programmer to make your files easier to read and to see if you made mistakes.1756

For example, this file, sample.html, that we have right now, that has been saved, doesn't have any syntax highlighting.1764

Everything looks the same--it is all the same color.1770

However, if we go down here, and we click on Text at the bottom of the screen,1772

PSPAD allows us to pick a syntax to view the file in.1776

So, if you click on HTML, you can see that now, the (I'm going to go ahead and blow up the text size here)...1780

You can see that it has color-coded our tags, which provides visual cues that you are using one tag over another.1798

And then, also, for example, let's say we improperly close this H1 tag.1806

Well, now it turns red; and so, that provides you a visual cue as a programmer that,1811

"Hey, you have made a mistake in your code, and you can go back and correct it."1815

That is the advantage of using PSPAD, and is why we have chosen that, for this added feature.1818

Now, I just want to talk about finding help if you get stuck in setting up your development environment.1827

As mentioned, it can be kind of complicated, setting things up;1832

and if things don't go as smoothly as they have in this lecture,1834

I wanted you to be able to have some resources available to go out on the Internet1837

and be able to find ways to help you solve your problems.1842

Fortunately, there is an abundance of resources on the Web.1846

Two useful ones (and these links will be in the Quick Notes, as well) are:1848

the first one is for the PHP manual, and this is the installation instructions on the manual,1851

and then also, the link to the documentation for the Apache web server.1856

Additionally, often, a quick Google search will direct you to the answers that you might need.1861

And one thing I want to note is that one of the more common problems in getting Apache up and running and to run locally on your machine1867

is if you have another program that is already bound to port 80.1873

As we learned, a web server takes http requests by listening on port 80.1878

And so, if you have a program--only one program on a computer can be bound to that port at the same time,1884

so if you have another program that might already be bound to that, when Apache tries to start, it is going to have problems.1888

That is one of the more common problems.1894

Now, I am going to introduce your first homework challenge.1898

The first thing I want you to do is go through and complete and verify the setup of your PHP development environment,1900

just like we did in the course.1905

And then, I want you to go ahead and--after you have seen the splash screen and seen that everything works--1907

go ahead and stop Apache and XAMPP; and that will give you practice with stopping and starting those two,1912

because that is something you are going to be doing often.1916

Then, I want you to use PSPAD to create a file named sample.html that contains whatever random HTML markup you want.1919

And then, I want you to save it in the appropriate folder on your computer so that you can browse to it at this URL here.1926

You are going to have to understand what we talked about when we talked about the document root1934

and where the document root is on the XAMPP installation, so that you can do this file successfully.1938

And then, I want you to go ahead and attempt to view sample.html at this address.1944

And assuming you followed step 2 above, the XAMPP and Apache are going to be turned off,1948

so you are going to get an error saying that you can't make a connection to 127.0.0.1.1952

What I want you to do is go ahead, restart XAMPP and Apache, and then verify that you can successfully view that sample.html page.1959

That is going to give you practice learning how files on your local hard drive map to URL's in a web browser.1967

And then, also, I just want you to verify that you can view that same file, using the localhost host name, as opposed to the IP address.1975

That is the common convention that we are going to be using throughout the rest of this course.1981

That ends today's lesson; thank you for watching Educator.com--I look forward to seeing you next time.1987