Working on the Amped Up website

Working with clients is harder than you think. I found this out last year when I was required to create  website for a client in order to pass the subject. This time my expectations  of communication were no different. However I have found that the client for this ‘Amped Up’ website is harder to keep track of than my last client and the two week dead line has turned into a 1 month project.

Initially when I first met with the client he told me that this was for his own assessment in music. My job was to promote and collect bands for his ‘battle of the bands’ show case at the end of the semester. I wasn’t given any design limits or a logo but was told that the logo was going to have red, yellow and white. He asked me to get it done as soon as I could and that he would do whatever he could to help me, to this I asked him questions about what specific things he wanted the website to do aside from advertise his assessment and clarified that I would need all content in order to complete the website. Which is where the real problems began.

As part of this I was also going to host his website for him and get his domain name  I was still unsure about hosting a website as last time I tried this I lost $400 and only got back half of it. However earlier I found a tutorial that showed me step by step how to host a website of HostGator plus a 10% off coupon which was great! Anyway, I sent him a few websites such as HAOB- Battle of the Bands and Vans Warped Tour as examples of layout or design. He liked the HABOB website so my design stems from their website a lot. He also wanted all of the same information that was on the HBOB website. With this in mind I was able to come up with this design for the home page:

  

The client was happy with the design so still not in possession of the content for the website I got to work on the aspects of the website that I could do without it, then waited for the content to be ready. The problem was that this was due in wk11 of this semester for my client so he hadn’t gotten to sort out exactly what he wanted in his website. Although it is now wk 7 and he still does have time to give me the content I am still anxious to get the content from him do that I can do my part and help him with his assessment. This being said it has given me time to de-bug the website and make sure it is working responsively.

But the question is still there what does a web developer do without content?   

I am looking forward to completing this website to see how it goes and how it helps his project. Also it will be the first website I can go to on the internet and say I designed and developed that!

Working with Joomla

When I first started researching Joomla I couldn’t even say the name without getting tongue tied, however I had played around with some of the setting and thought “hey this isn’t so bad I kind of know what I’m doing, maybe I can use this for my next assessment?”.

Well lets just say it defiantly wasn’t as simple to edit as I thought it was. At fist I thought you could just edit the index.php page in the front of the folder but later I realised that Joomla does indeed work with themes and templates in much he same way wordpress does.

With this in mind I tried to figure out how to figure out how I was going to create a theme from scratch and manipulate it to work in Joomla. This proved to be a struggle in itself as I sent the next trying to find tutorials that could help me achieve this. While not all of them were helpful I did found some articles that had extra information on them that will be able to help me in the future. For example one tutorial went through how to register the website onto a host website as well as how to set the website up in the CPannel. I found this really helpful as I still wasn’t quite sure how to host a website. It probably didn’t help that last time I tried it ended up costing me $400 and I only got half the money back when I canceled the host. Anyway this tutorial went through the process of styling a theme and then hosting it so it wasn’t exactly what I was looking for but it was still useful in other ways. The tutorial also gave me a Host Gator coupon that could get me 10% off the pricing which was a great plus!

After almost giving up ( by this time it was nearing the end of the week) I managed the combine two tutorials together using information form both of them to create a theme and successfully integrate it onto Joomla. After that happened I had two more weeks to design the website and add in the functions that were required for the assessment.

Create a blog and add a shopping cart … it sounded reasonable with the amount of time I had to do it I took into consideration that I had never used Joomla before but I thought that  it would be possible. It would have to be possible.

Problems

I had many problems while I was creating this website the first was being able the create a theme from scratch which I take about above but there were also lots of little problems that all added up in the end.

The first one was when I was creating the blogging system I had no idea what the posts and pages were called. After hunting around Joomla’s support website I found that Joomla called pages articles and posts modules. Now the only  thing left to do was to display the models for the blog page. This brings me to my next problem.

Displaying the modules wasn’t a problem per say but I did get stuck with finding a way to display several posts not the same page that could come from the page. The answer was that it could but not in the way that I expected it to.  Each blog post is an article that has the came set category, which connects them to a modules which you is where you have set to pick up a particular category. Then once that is set up all you have to do is post this code

{loadposition position}

into the original/ main blog page article and type in the position of the module you created and whaalaa! a blog posting system is created.

My third problem was a design one as I wanted the nav bar to be positioned into different places  and the logo to change depending the page the user was on.

 

this proved to be not as difficult as I thought it would be in the beginning I thought it would have something to to with finding out the id of the body and then altering the CSS of both objects from there. It would have helped if I was thinking about jQuery instead of PHP which of course the action was impossible for PHP to accomplish. However once I got onto the right track I started looking at jQuery functions such as append(), which only worked if I wanted to move an object inside another object. From here I started looking at the after() function. This was them wrapped in a loop where it checked if the body id was equal to certain variables and then displayed certain functions that altered the CSS and changed the position of the nave bar. This function was the one I was looking for as in order to solve my problem I needed to move the nav content above the article content as on the home page the nav bar was underneath the body content. Once this was achieved I loved on to changing the logo which wasn’t that hard once I wrapped my head around how jQuery was written. All I had to do was set the logo on the back end and then hide on the home page using the hide() function and the show() it in the if statement on the other pages. Although I did have to add use the addClass() function to add a class to the second logo but as there was nothing the specifically tie it to the image so I had to add the class to all of the images and then  use the removeClass() function to get rid it. This method in hindsight was probably not the best idea as from then on very image  posted on the website would need to have that class removed.

The shopping cart… this was the biggest problem that I had throughout the whole project. At first I tried to use a simple pay pal plugin. I had used this before and I knew it worked however I could figure out a way to make the plugin to appear on the page let alone how it connected to the shopping items. after many failing trial and error attempts I decided to move on and find another plug in I found one that had exactly what I wanted. The plugin was called Pay Cart it enabled you to add items and it you so chose to sort them by category. However once I installed it and added some items in there and tried to view it via the {loadposition position}. When nothing worked and did some digging and found out that it needed to be added as a menu item instead, however when I tried that it still didn’t want to display on the page. It was only later that afternoon when I discovered that the pay cart had its own menu from which to show their items but if I used it it would have ruined my existing navigation.

LESSON LEANT : IF MAKING A SHOPPING WEBSITE PUT THE SHOPPING CART IN FIRST

Overall I was happy with the result that I produced and I was really happy with my logo as I think it was the best thing I have designed so far through this course (logo wise). Plus I was able the have most of the content on the website to be dynamic form navigation to the blog posts page. Although I would use Joomla in the future as it was hard to navigate through especially if would be to give it to a client who may not know much about the web.