Social Network, Part 3

Over the past few weeks, I have been working on building a web based social network in order to teach myself PHP, MySQL, HTML, CSS, Javascript, and other web technologies. Over the first two versions, as I have added more features, the user interface has gotten more and more clumsy. For this version, I wanted to add search. Unfortunately, an addition of another option pushed my user interface to its limit. Especially since I was not using that much CSS. Therefore, in this version, I rewrote the top navigation so that it worked better. It has an all new design. Some highlights are below:

  • Built using CSS font and alignment properties.
  • I designed and made a custom logo using The Gimp to replace what was a text link
  • All the navigation items are now buttons instead of text links. This provides more surface area for users to click.
  • The content of the page between the navigation top and the bottom footer is now enclosed in a table to provide a uniform look.
  • The navigation top is flush with the top and sides of the window.

Beyond the redesign that allowed me to learn a lot about CSS, I took the time to implement some features that I thought were needed.

  • People Search. Users can now search for other users by either first or last name OR first and last name and then add them directly from the search results.
  • Profile Picture: User can now upload a picture to use as a profile picture. This image is automatically resized to the proper size. The system will make sure the picture is displayed properly.
  • I built the picture upload mechanism in such a way that it will be easy to add uploading of non-profile picture pictures in a future release.
  • There is rudimentary support of XML. It is possible to generate an XML file of a friends list. Nothing is done with it right now, but the hope is to create an AJAX friends list on the profile in a future release.
  • Now when on the pages of other users, a user can add their friends as his os her friends directly without having to navigate to that users page.

Screenshots below: