CSE 154: Web Programming, Autumn 2016

Phpstorm

created 10/1/2016 with PhpStorm 2016.2

These instructions are specifically for PhpStorm. It should replace the need to have both a text editor (like Notepad++) and the FTP program (Filezilla, etc)

To get started, first, download and install PhpStorm: JetBrains PhpStorm

Quick sidenote: Phpstorm will let you evaluate for 30 days, but as a student you as can get a free year of usage. In order to do this, you create a Jetbrains Account with an .edu email address. There is more information here. You can follow these instructions, and then register your installation after.

Project Setup (~15 minutes)

You want to create new project from existing files. (The "files" that exist are your folders on webster)

Select the "Web Server is on remote host, files are accessible via FTP/SFTP/FTPS" option, and click next.

Give your project a name, I called mine cse154, and click next.

Now you are telling phpstorm about the server itself:

1. Give the server a name. (I called mine WebsterServer), and select SFTP. This should also change the port number to 22.
2. Put in the server hostname: webster.cs.washington.edu
3. Enter your uwnetid username and password. (Save the password so you don't have to type it in if you like)
4. Change the protocol of the web server to https
5. Click Auto-detect for it to fill out the 'Root Path' field -- this is where your files are stored on webster.

If you can't connect to webster, or if autodetecting won't fill out the root path, your TA or instructors can help you.

After you click autodetect, yours should fill out with /www/students/<uwnetid> even though mine says staff.

This one is a little weird. You have to tell PhpStorm where your project root is. Click the folder, and then click the 'Project Root' button.

Now, we're telling php how to find your files over a web browser. Enter /students/<uwnetid>, even though mine says staff

Click finish, and now we should have a project!

Intermission.

Get up and get a drink of water and a snack.

We still have to set a couple settings that PhpStorm isn't smart enough to on it's own:

First, we have to get PhpStorm to find your 'html' directory. Use the menu items to 'browse remote host' -- that is, look at your files that are on webster.

The 'html' directory should show up, but it will be crossed out. Right-click it, and 'download from here'.

Next up, we'll configure PhpStorm to automatically upload the files that we change locally. This is optional -- you can choose to upload them one at a time if you prefer.

Path mappings

This part is a little confusing. Webster will only serve what's in your html directory, and because of that, PhpStorm thinks that it should put a "/html" in the url when it makes links to your pages.

This is how you fix that.

Open the Preferences menu.

Open the Build, execution and deployment menu, and go into Deployment

Choose the 'mappings' tab.

In the local path box, enter the path on your computer to the html directory inside your project.

In the web path box, enter /students/<uwnetid>

And click ok! Your project should now be set up for development! Make a new folder in html:

And a new html file.

Add some content to it, and save the file. The dialog box below should indicate that the file was uploaded.

Now, let's view it! Right click the file, go 'Open in Browser', pick your favorite one and go!

And you should see something like this!

Aaaand done! Excellent work!