Software to get

Bunny

You'll need software on your PC for this course. Don't worry, it's free. Apart from hosting, everything used in this course is free. That includes this textbook.

Free is good. Didn't I mention that already?

Seriously, there is so much good free software out there. Post in the Moodle forum if you find something you really like.

I'll just talk about Windows s/w, for the most part. Much of the recommended software will run on Macs, as well. However, I've no experience with Macs. If you have trouble with Mac-specific stuff, I can't help.

You can google. You can ask other students, in the general forum on Moodle. If you find Mac content that would be good for this site to link to, let me know.

Duplicate environments

You'll write lots of code. Make it convenient for yourself. Get the code working on your own computer first, and then transfer it to your server once it's ready.

Local development

For this to work best, it's easiest if you have the same software (more-or-less) running on your PC, and your Reclaim server.

Same software on server and local PC

That's what this lesson is about.

Web app pieces

Three main pieces of software will work together to serve your apps:

  • Apache, a web server
  • MySQL, a database server
  • PHP, a programming language

You'll learn what they do later. For now, just know these are the things you need.

They're already set up on your Reclaim Hosting server (and just about every other cheap host, too). Even better, Reclaim gives you a tool to help you work with the Triumphant Trio (Apache, MySQL, and PHP), called cPanel. You'll be using cPanel quite a bit.

OK. The Triumphant Trio are running on your server. So, let's put the same three on your PC.

Ethan
Ethan

I'll need to download and install each one, right?

Actually, to make it easy, you can download and install them all in one step. That's what I did.

Go to Apache Friends, and download XAMPP for your system. There are versions for Windows, Mac, and Linux. It's free. Free is good.

Run the installation program. If you need them, there are many tutorials on installing XAMPP, like this one, and this one.

Some advice:

  • On Windows, don't install XAMPP into C:\Program files. Install it to C:\xampp instead. Or D:\xampp, or whatevs. I put mine in D:\xampp.
  • Install at least four things: Apache, MySQL, PHP, and phpMyAdmin. Install the fake email thing, too, if you want to play with that. It will let you write email-sending programs, without actually sending email.

(OK, for me, having your own programs send email for alerts and things, that's pretty cool.)

XAMPP has a control panel (CP) that lets you start Apache, start MySQL, and do other things. It works best if you run it as admin, especially if you want to change XAMPP's configuration.

What I do is hit the Windows key, then press x:

Starting the control panel

You'll see a list of programs starting with x:

List of X programs

One of the options for the CP is Run as administrator.

Run as administrator

Here are the CP buttons that will start the individual servers:

Starting the servers

Ports

When interwebbed computers send messages, they send them to a port on a computer. A port sounds like a physical thing, but it's just a number, like switching to channel 4 on cable.

Different programs use different ports. Web servers use port 80 by default, MySQL uses 3306, etc. That's how a computer separates messages sent to it. Messages to one port go to that program, messages to another port go to this program... otherwise, it would be a mess.

Here's what I see when I started the CP just now:

What I see

Notice Apache is using port 8080, rather than 80. I changed that myself. Why? Because my PC was already using port 80 for something else, probably another web server that's built-in to some other software I'm running.

The CP will complain if it can't use 80. If it does, change the port to 8080. Click Config in the upper right (not one of the other Config buttons).

Config button

Then Service and Port Settings:

Service and Port Settings

Change the main port for Apache:

Change the main port

If you click Save and get an Access denied error, it may be because you didn't run the CP as admin. Stop XAMPP, and restart it as admin. If that's not the problem, ask your Google friend, me, or the class forum.

Once you have XAMPP running, your PC will have the same Apache-MySQL-PHP setup that your server has. W00t!

Of OS and file names

One difference between your PC and your server is the operating system (OS). Your server is running Linux. Your PC is running Windows, or the Mac thing. That doesn't matter, except for file names. In Windows, file names are not case-sensitive. So DOG.HTML, Dog.Html, and dog.html are the same file. If you name a file Dog.html, and refer to it somewhere else as dog.html, no big. It will work fine.

Linux file names are case-sensitive. dog.html and Dog.html are different. Name a file Dog.html, and refer to it as dog.html, and you'll get a 404 (File not found) error.

That means you can make something that works on your PC, but breaks when you upload it to your server. Boo!

The solution: always make file names lowercase on your PC.

Also, don't put spaces in file names. Use -s instead, like i-am-geeky.html.

Doggo

IDE

You need software to edit your code. You could use a plain text editor, like Notepad++, but don't. Your life will harder than it needs to be. Use an IDE, or integrated development environment. It's a smart programming editor, with a bunch of nifty tools, all wrapped together.

I use PHPStorm, the favorite of many professional PHP programmers. It's free for students. Free is good.

PHPStorm does a lot of stuff, but don't let all the options throw you. We'll look at the features we need as we go through the course.

If you want to use Visual Studio, or whatevs, feel free. Just make sure you have a debugger.

Getting files to your server

There are various ways to do this. We'll look at some later. For now, install the FTP client FileZilla. Just the client, not the server. It's free. Of course.

In your welcome email from Reclaim, they gave you the username and password to use for FTP.

The download process can get a little strange. Here's what you might see when you hit the Download link:

Download FileZilla

Use the link at the bottom, rather than the Big Green Button of Doom. Then you'll see...

FileZilla - the REAL link

Thanks to Emily and Junior for their insights.

More deets on FTP later.

Image transformer

Sometimes you'll want to mess with images, like make them smaller. I like XNView for that, but you can use what you like.

Zipper

You'll need to zip files together, when you submit them. Windows can do that already, but I use 7-Zip. Use what you like.

I don't know about Mac zippers (Mac zippers sounds like fast food). Any recommendations from the Mac people?

Clipboard manager

This isn't necessary, but is incredibly useful. A clipboard manager remembers what you put on the clipboard, and can recall it, even after you've put other stuff on the clipboard. Windows has one, but a better option is Ditto. It will make you happy.

There must be something like that for the Mac. Recommendations?

Greenshot

Hunter suggests Greenshot as a screen capture tool. I've used it, too. It's good, and free.

Well, that's it! Quite a few bits and pieces. All of it free, for you, anyway.

Suggestions for other tools? Let me know.

Extensions in Windows Explorer

Most files have extensions, some characters on the end of the name, that tell you what kind of file it is. So a file named dogs.xlsx is an Excel workbook, because Excel owns (kinda) the extension xlsx. A file with the extension jpg is an image. html means it's an HTML file, for use with web browsers.

Say I made the file rosie.txt. txt is the extension for a plain text file. When I look at the file in Explorer, I see:

Extension hidden

Windows has "helped" me by hiding the extension. That's a pain, for the work we're doing.

Tell Explorer you want to see the extensions. There's a checkbox on the View menu.

Checkbox

Check the box, and the extensions will show.

Extensions showing

Do it now, before you forget.