Skeleton Skills

I talked a bit before about the web development project I am undertaking for my friend Elsie in the ‘My Rules!’ post. I just wanted to give a little update as to how that is going.

I have started to build the first evolution of the website. I did this using Skeleton – a light weight framework a bit like BootStrap but with a lot less to it. It’s mobile responsive already and uses columns to make pretty layouts. It’s real easy to work with if you make sure all the CSS you add is stored in a separate file. So far, I’m liking working with it. It’s brilliant for project which don’t require the full BootStrap power and saves you time and hassle of writing the layout from scratch. Check it out.

 

Perplexed by PHP

And further adventures in Ajax.

For my Web Technologies module this semester I have been tasked with building an online book club.

The personalised interactive book club should include the following functionality:
1. A user login page.
2. 2-3 pages, to display the books.
3. Interactive method to enable users to share book reviews.
a. To be able to submit reviews for the books on display.
b. To be able to read reviews left by other users for the books on display.
The following needs to be implemented using PHP:
1. A method of maintaining state as the user is browsing the different pages.
2. Interfacing with MySQL database to retrieve and submit book reviews.
3. Interfacing with the MySQL database to enable the user login functionality. The following needs to be implemented in Ajax (Javascript, HTML and CSS):
1. The interactive user interface (creativity and use of Javascript is essential).

I’m pretty proud with what I’ve managed to accomplish in quite a short period of time. I really got into this project and I’m nearly finished with it (bit of a shame really!).

I started by designing what database tables I’d need and then creating them and adding the necessary data.

I then created the absolute basic layout for the site. Again, I used Skeleton as the main framework since it makes mobile optimisation so easy (and brownie points for that!).

I used the base of what I created for the email client for the previous semester to create interactive elements. So I used a combination of php, sql and javascript to grab the different books from my table and dyamically insert them into the webpage by interacting with the DOM.

bookClub_home

I then started working on the individual book pages. This takes the ID of the selected book and stores it as a cookie which is used to grab all the relevant data from the books table. Again, this is dynamically displayed. The same is done to grab the reviews relevant to that book.

bookClub_book

To add a review the user goes to a book, clicks submit review and fills out the form. The book ID and user ID fields are automatically filled out with information from the session variables and cookies. When the user submits the review it is added to the database and should now show up on the book page. If they have already submitted a review for that book an alert will display to tell them so.

bookClub_review

I am currently extending the project to include a ‘my account’ page which shows user details as well as all the reviews they have left. I am also considering creating a reviews page which displays all the reviews left, ordered by newest first. Another way I am considering extending it is to give an option to only show books of a specified genre. I’ll update when I’ve finished!

Freelance Projects

Last week I had two meetings with new clients. Yep, 2 new clients – woohoo! And they look like pretty interesting projects too.

The first one is for the lovely David, he is a counsellor in Brighton and Hove and wants to advertise himself independently. The key thing for this site is it has to be non-triggering  as it cannot spark a potential episode in one of the users. What does this mean? Calming images, not lots of movement or animation, no flashing images etc, very easy to read text in small chunks, a natural colour scheme and easy navigation. This all seems pretty doable.
Because of the size of the website (relatively small) I figured Skeleton might be a good approach to this, so I’m currently working on building the layout using skeleton’s lovely grid system. I’m loving the fact it comes with normalize.css too as it immediately looks like a pretty decent website even with no custom CSS added yet! Looking forward to spending a bit more time on this one.

Just in case you were curious, this is how Dave and I know each other - hitting drums. Although not sure he'll appreciate me showing off his bald spot.

Just in case you were curious, this is how Dave and I know each other – hitting drums. He’s the one with the green flowers.

The other website is for Andrew The Artisan Craftsman. Oooh. He started off by telling me that what he wanted was ‘really simple’. An hour or two later he realised he had maybe underestimated the project and what a website would need to include for him to be a successful freelancer.
This site is going to predominantly feature a filterable gallery. This is one where the user can click on aa category and those images will show up in a little menu, with the first one being displayed full size. The user can then click on the thumbnails to see each image properly. Here is a mock up I quickly did of the basic layout:
mockUp of filterable gallery
I’ve started working on the gallery, attempting to code it in javascript from scratch. It’s going pretty well so far, but obviously work still needs to be done. I’m actually quite enjoying this, its a good challenge! I should probably save it for when my coursework is done though… Anyway, I will then need to integrate it into a fully fledged website, which again I may use skeleton for. As Andrew will want to upload new photos when he finishes a project I’m probably going to need to implement some sort of CMS too. But I guess we’ll cross that bridge when we get there.