Welcome

Helpful Stuff

The first thing you need is a third party ftp software to access the files on the server. I recommend FileZilla, which you can download for free. But any ftp software will do.

The next thing you need is a text editor to edit the HTML files. I recommend Notepad++, but once again, any software will do.

The main folders in the server you will be concerned with are in the "www/new/" folder. From there you can gain access to the webpages, html files, pictures and stuff. You can actually see this in the url from the hompage: "http://polyhouse.org/new/home/index.php". The index.php file (in the /home/ folder) is the code that runs when you load polyhouse.org

Quick Questions

Do I need to know coding to update the website?

• No. All of the code is already written. You just need to be able to copy-paste new files in and maintain the format that is already here. It helps if you know some coding, so that don't accidently delete anything critical to the website. But ultimately, it's not a requirement.

Do I need to know coding to do anything besides updating the website?

• Yes. At least a little. There are some great resources out there to help you learn, if you're interested:
  • Codecademy
  • W3Schools Online Web Tutorials
  The main language you need to learn is HTML. The website style is in CSS. And a couple features are in PHP. Knowing Javascript could be useful as well, depending on what you want to do.

Walkthrough Of How To Update, Say, The Donor Page

If you've never done it before, go to the home page of Polyhouse.org and (if you're using Chrome or Firefox) right click and select view page source or view source code. (If you're using IE go to View menu tab then select view source code.) This is the code that the browser converts into the website that you see. One of the first things the code does is call the CSS style, called mainStyle.css and navStyle.css. Then the page loads the tabs across the top and the sidebar links. Finally the information for the year's Polyhouse client is loaded. All of this HTML code is coming from several files on the server.

Now go to the Donor page and view that source code. Towards the bottom you can see several large paragraphs with links, these are the image links for the donor logos. The url will tell you where to find that html file: "/new/donors/index.php"

All you need to do to update the donor page is change the image link to the correct logo or the text to the correct name. Easy, right?

Let's go through this step-by-step.
1. Connect to the server through FileZilla (or what-have-you).
   • This is where you need the login information from Roya.
2. Download the "/new/donors/index.php" to your computer.
   • It is helpful if you have all the files you intend to download from the server saved in one folder.
   • It's even more helpful if you name the folders the same as they are named on the server. For reference.
   • Just in case, you might also want to save the original file somewhere on your computer. For emergencies.
3. Get the most current list of donors from Roya.
   • Compare the current list with last year's list to see what changed and what stayed the same.
4. Change the Donor page to a new file. Update the sidebar.
   • In the "/resources/source.php" file you can find the code for the sidebar for the Donor page (along with all the other pages) add a new line of code for the last year, copy-paste and change the year. Then change the title of the "index" page (the first line of code in the "body" section) to the current year.
     • You can edit files in your text editor after downloading them to your computer through FileZilla.
   • Create a new file for the last year named in the same style as the previous years
     • It's important to name the file the in the same way so that the code that finds and displays the page knows where it is and what it's called.
   • Copy-paste the content of the "/donors/index.html" file into the new file you just created.
     • The purpose of this is to save the old donor page and make it accessible from the sidebar menu.
5. Add the new Donors to the "index.html" file.
   • The donor page is set-up with a table. All of the logos and names are in their own cells within the table.
   • To add an image:
     1. Find the image you want to use in the "/donors/logos/" folder. Make of note of its name.
     2. Go to the "/donors/index.html" file and locate the cell you want to put the image in.
        • If there is no image you can search for one on the internet and put it in the /logo/ folder or just type the company name with text.
     3. Change the name of the image in the image link to the one you want.
     4. Maintain the proper formatting!
   • To add a name:
     1. Find the cell you want to add the name to
     2. Change the text to the correct name.
     3. If you want to change an image link to text, look at examples of text cells to see what code you can delete and what code you must keep.
6. Upload the completed "index.html" file to the server through FileZilla.
7. Load the Donor page to see if you were successful.
   • Also check to see if the sidebar links are working properly.
8. Make adjustments.
   • It's okay. Everyone makes mistakes.
9. Success!

Tips

• Someone should download the /new/ folder on to their computer as a backup to prevent total loss of any files or folders. Try not to learn this the hard way.
• Only do one thing at a time.
• Use your text editor's "Run" or "Test" feature to see what the webpage will look like before you upload it to the server. This will only work for pages that don't refer to other files in the server. (e.g. the donor page which calls the images from the logo folder.)
• If you're not sure where a style attribute is coming from (e.g. font-size) use "inspect element".
• There's lots of little things that could be fixed or improved, keep an open mind, learn by doing.
• Have Fun!