www.jawaczregister.org Website Manual

Handling and developing PHP web pages locally

Obtaining and installing Easy PHP

Download Easy PHP here.

Save the file and then install it after download.

Easy PHP will install an icon in the system tray that looks like a black letter "e". There is a small red dot at the bottom of the e that flashes when Easy PHP is running, and does not flash when it is stopped. Right click the icon and choose Start or Stop. Easy PHP is very easy to use.

FTP

Download CuteFTP XP 5 Evaluation Copy, or buy it at a local retailer(about $40.00). The 30 day eval may be reactivated after the trial period by paying online.

Install Cute FTP. Cute FTP installs an icon on the desktop and it also may be found in Programs under Globalscape.

Open Cute FTP.

Setting up and Using Cute FTP

Create a new FTP connection using the File Manager

Click on New at bottom left of the Site Manager.

Fill in the Information as in the admin_info file that you have.

Connecting

A Windows Explorer style interface

Synching up

My Computer > Program Files > Easy PHP > WWW

The website files are all inside the directory on the server named mainwebsite_html. Double-click on the mainwebsite_html directory in the right pane. Be certain that the left pane is in the www folder. The address on the left should read C:\\Program Files\EasyPHP\WWW. See image below.

We do not need the first five folders. Click the images folder in the right pane once to highlight it. Then hold the shift key down and use your keyboard's down arrow to highlight all the folders and files or control click each one in turn untill all files are highlighted.

Now click the download arrow in the toolbar and downloading/duplicating will begin. You can view the progress at the lower area of Cute. The .php files will fly because they are pure text. Images will take a bit longer. Wait until all activity has ceased, (the server says "Done" up top)then close Cute FTP.

View the website locally

Adding/modifying content

So, in order to properly edit any page locally on the site we need to get straight to the original source. Here's how:

Using Internet Explorer, click File > Open > Browse.

Click the dropdown list in the Look In field at the top and choose Local Disk(C:). Then navigate to Program Files > EasyPHP > WWW.

Use the Up One Level button if neccesary to help you navigate.

Also, you need to use the "Files Of Type" dropdown list at the bottom to choose "All Files", since Internet Explorer shows only HTML files by default.

Two methods to open our .php files

Preferred method: Pick any file, such as index.php and double-click it. You'll then get an Open dialog where all you need to do is click OK.

If the resulting page does not open in Notepad use method 2.

Method 2: Again, using Internet explorer, click File > Open > Browse. Then click the dropdown list in the Look In field at the top and choose Local Disk(C:). Then navigate to Program Files > EasyPHP > WWW. Remeber to change the Files Of Type! You'll be doing it every time. This time right-click on index.php and choose Open With. From the sub menu choose Notepad.

Note that even if you must use method 2 you will probably want to do method 1 the first time when starting a session because that will set the Open dialog to the WWW directory inside EasyPHP, rather than needing to navigate back there every time you use File > Browse to start an editing session.

Editing your first file

Scroll the code and notice the PHP include commands for includes/nav.asp near the top and for includes/footer.asp near the bottom. Those short PHP code snippets do some evry powerful magic and also offer a clue on where to find the include files if you ever need to add a link to the navigation area or change the copyright year in the page footer.

Looking first at the web page displayed in Internet Explorer, choose some arbitrary text to modify. Just highlight one character and replace it to produce a mispelling for instance. Now click File > Save in the Notepad toolbar. Notice that Notepad remains open and ready for more edits. Now change your screens focus to the webpage displayed in Internet Explorer and notice that nothing has changed. Click Refresh in the browser toolbar to view your change.

That is the rithym of web page editing:

• View the page in question and think about what you want it to say.
• Navigate to the source file using your browser's File > Open > Browse commands.
• Open the source file.
• Edit.
• Click File > Save.
• Refresh the browser to view the changes.
• Re-edit as needed until you are happy with the result displayed in the browser.
• When finished close the source file and use Cute FTP to overwrite the file on the server.

Adding a new page to the website

Close the template.php file and open a fresh Notepad document: Start > Programs > Accessories > Notepad.

Paste the contents of the clipboard into Notepad using Edit > Paste or else right click inside the empty document and choose Paste.

Now we can edit the new page to change it from a generic web page template to our new page.

File naming conventions

Note that all filenames regardless of type, .php, .jpg, etc., must contain no spaces and no capitalization.

Underscores should be used between phrases to help make the filenames easier to read at a glance.

They should also be descriptive so that you can tell what it is just by looking at the file name.

If there are, for instance, 3 images of a members Jawa, then name the images thus:

smith_jawa_1.jpg, smith_jawa__2.jpg, smith_jawa__3.jpg

Image conventions:

In Paint Shop Pro we only need to specify the width when resizing. The height will automatically adjust.

All images need to be optimized for the web using PSP.

Image Prep Using PSP

Creating duplicate images for optimizing for the web

Create a folder inside the website file in the www folder inside easy PHP for storing original images. Name it originals.

C:\\ > Program Files > EasyPHP > WWW

A good rule of thumb and good habit to get into is to use no capitalization on directory or file names. On a windows computer it doesn't matter but once you upload to the Linux/Unix server it can cause problems.

Once your full sized images are uploaded into the originals folder, open Paint Shop Pro(PSP), and click File > Browse. Use PSP's left pane to drill down to your originals folder. Either use Edit > Select All if you want to select all of the pictures, or click a single picture once to highlight it and then hold the control key while you click to select multiple images. We have now grouped all the images together and we are ready to perform a group Copy To.

Right click any of the blue highlighted images and choose Move To from the context menu. A Browse for folder dialog box pops up allowing you to navigate to a destination folder for PSP to copy the selected images to. Our target folder in this case is the images subfolder in the website directory. Once you find the folder in the dialog box and click it, you will see how the tiny folder icon opens slightly. It is subtle but noticable. Click OK.

If the destination folder is not yet created, navigate to the folder you would like your new folder in and then click the New Folder icon and a new folder will be created and highlighted in blue ready for you to type in a name for it.

Note: Be aware of the difference between Copy To and Move To ! Copy to leaves the original file.

Compressing images(optimizing) for web

They should be there. Now double click any image to open it in it's own window. Click Image > resize. The dialog box settings should be as follows: Pixel Size button checked, Resize Type Smart size, resize all layers and maintain aspect ratio box checked. PSP will always remember your setting once you set them. Now change the width in the resize dialog to 350 pixels. The height will automatically set itself. Click OK.

Now click file > Export > JPEG. The JPEG Saver dialog pops up, showing the uncompressed file size on the left and the compressed file size on the right. Set the compression value to 25, and click OK.

Repeat for each image. Notice that PSP remembers the Copy To and image resize settings each time once they are set on the first one.

Notice how PSP drastically reduces the file size after exporting as a .jpg.

At the end of the export process, when you click the Save button a warning box will pop up telling you that the file already exists and asking if you want to replace it. Cick Yes.

Now close the image. If you get another popup about wether you want to save the changes click NO.

You need to keep track somehow of what images have been compressed because if you forget and compress them a second time they will start to look bad.

Here is one way to keep track of it.

Immediately after resizing do the File > Export > Jpeg operation. That way if you get distracted for a few moments and forget where you were, you'll know that everything that is 350 pixels wide is compressed.

Be careful not to compress an image twice. A single compression at 25 % does not noticabley effect image quality. A second time would.

A word about .JPG & .GIF's

The .gif file type is perfect for logos and line drawings that contain fewer colors. For instance, all of the screenshot images on this page were saved as .gif's.

HTML Comments

Adding a part page:

1. Open the template "part_page_template.php".
2. Perform a "Select All", then "Copy".
3. Close the file. In this way we always keep our source code templates safe. If we end up breaking the copy we just made, no problem. Just delete it and start fresh. Might even be a good idea to make a backup copy of all the templates and save them in a seperate location.
4. Open a new Notepad document and paste in the code you just copied.
5. While it is fresh in your mind, click "File" > "Save As" and name the file using our naming convention:

   Example: 1981_kawazuki_smegma_carbs.php

5. Start with the page title. Use your mouse to highlight the existing text and then type in the new title text.
   The second part of the title is always left intact( ~ www.vtcycle.com)
6. Next, edit the meta-keywords, and meta-content tags.
7. Scroll down and edit the page heading, the description table and the image tag.
8. Finally, we need to edit the shopping cart "Add To Cart" code.
9. There are two values to edit: item_name and value.
10. Click the X at top right to close the window and then click OK to confirm the changes.
11. View the page in your web browser and review title, heading, text and image to make sure everything is up to snuff.
12. If needed go back and re-edit.

Getting it all in and linking it all together

Visitors go like this:

1. Enter site
2. Find a make and click on it.
3. Peruse the parts available and click one for details.
4. Examine condition and price. Add to cart. Backup and repeat.
5. After a new page is created, it needs to be linked. If you are adding a bike, add a bike table to the page for that bike's make.

Work backwards

1. Find a bike to add.
2. Photograph all the parts.
3. Rename, resize, thumbnail and optimize all the images.
4. Produce the part pages 1st.
5. Add the thumbnail and description to the bikes page.
6. Methodically upload all the new content to the web server.

Email