Wireframes

Click to see wireframes for my website:

Main page

Bio page

Artworks Page (Paintings and Photography)

Writings Page

Artist's Statement

Shows

Mailing List

Contact Info

Final Project Idea

For my final project, I intent to build a site to showcase the portfolio of one of my artist friends. For the most part, artist's sites are fairly bare, mostly showcasing the works, so I am going to try to add in interactivity in an unobtrusive manner.

CSS:
I am thinking of a top nav that directs you to general pages like Artwork, Biography, Artist's Statement, Shows, Contact/Mailing List, maybe a Blog, etc. When you select Artwork, a left nav will appear with the names of artistic series (e.g. Hand Paintings, Black and White photography) - I want a similar thing for the Shows option (left nav will have show names, locations.

Thumbnails of the artworks will appear in a style much like the eCommerce project we did and when you click on them, a window will pop up to show a larger version (see JavaScript ideas).

The overall look itself will be dark/mystical to match the feel of her paintings.

JavaScript:
I noticed that a lot of people used lightbox.js for their image uploader - I want to implement this for the artwork pages.

If I decide to make a blog, I also want to use JavaScript to implement a show/hide feature for the comments left by others.

PHP/mySQL:
I will create a mailing list sign-up that will allow my friend to send out reminders about shows, news, etc. If I decide to create a blog, there will be an authentication required for people to leave comments.

I'm sure more programming ideas will come to me in the next week.

Class 8 - Authentication & Blog Comments

So far I have the authentication working, but I've been having issues getting the comments to post to my blog - it looks like the comments don't capture the username, nor the comments themselves. Instead of comments, the blogger_id comes up. I've been staring at all of this for a while, so I'm probably just going to have to give it a break for now until I flesh out my final project idea.

No styling as of yet - I want to get the comments working!

Update to Image Uploader

I was able to correct a lot of the problems I had:

• I seemed to be able to fix the log-in issue by including /joannaslotkin in the path name instead of leaving this blank - I'm not sure if this was the real issue, but it seemed to fix it
  
• Now you can see everyone's uploaded files - whenever I replaced the files folder on the server, it would clear out any images I had
  
• Logging out works now because I actually directed it to the correct directory and file name :-p
  

I have had quite a bit of trouble formatting pages and remembering what classes are named where. The next time I do a project like this, I will be sure to leave a LOT of comments on my CSS sheet.

Class 7 - Image Uploader

So...I had a lot of trouble with this and there are still some things that don't work:

• For log-ins, you can register whatever username and password you want, but the usernames keep going in as the initial username you entered on the logins.txt page - if you try to login with a new username you register on the same computer, it doesn't work. It works if you enter your initial username and the new password you registered. Weird! Must be a cookie problem.
  
• Even though I changed the file permissions, you can only see the images you uploaded, not what others uploaded.
• Logging out doesn't work - I set the logout to go up a directory to the index page and show the message "Logout successful," but it keeps going up a directory and looking for images.php which is the name of my image services page

I still need to format the images page. Ugh!

Assignment Links

Here are links to the assignments I have completed in class so far:

Class 1 - Information Architecture - Wireframing

Class 2a - Basic XHTML / CSS Layout
Class 2b - Pet Shop

Class 3 - Intermediate XHTML / CSS Layout

Class 4 - Forms with Javascript

Class 5 - Advanced XHTML / CSS / Javascript

Class 6 - PHP (2 pages - click on page 2 or Next)

PHP Forms

Important link for all your php needs: php.net

For PHP forms you can use either the GET or POST parameters; alternately the REQUEST parameter will both GET and POST.

If somebody submits a form without entering any information, you can send them back to the form like so:

if (empty($fullName)) { //empty is a built-in php function
header("Location:forms.html"); //special HTTP header
}

You can also send an alert once they have been returned to the main form:

if (empty($fullName)) { //empty is a built-in php function
header("Location:forms.php?error=true"); //special HTTP header
}


In the body, you can put:

<?php if($hasError): ?> //: is an alternative to { } offered in php ?>
<p><? = $errorMessage ?></p>
<?php endif ?>


In the php section put:

<?php

$hasError = false; //initially false on first visit because they have not clicked submit yet
if ($_REQUEST['error'] == 'true') { //error is the name or key
$errorMessage = "Please enter something";
$hasError = true; //sets the flag to true
}
?>