Hosting

When it comes to hosting, there are several things required: a domain and a database / hosting.

On the issue of hosting, I sent the student council an email alongside with an attachment that addressed the problem at hand, by including: the problem itself, potential solutions, and the costs to those solutions.

General Costs for Hosting and Database

General Costs to Purchase Domain

Overall Overview

Overall, there isn't that much of a difference between A2Hosting and GoDaddy. They both offer a similar package at similar prices. However, in the short term, GoDaddy can be cheaper as they allow users to pay 5 HKD to rent domain name if they purchase a GoDaddy product. On the other hand, A2Hosting generally has lower prices. As the council is uncertain of the website's success, it would be best to purchase GoDaddy in the short run and if everything works well, we can consider switching to a cheaper alternative.

Email to the student council

After sending the email to the student council, they invited me to join in on one of their meetings to further discuss about it. In the end, the committee gave me a budget of 500 HKD to set up everything for 6 months.

I decided to stick with GoDaddy and later found out that there were promo-codes online that could reduce the price. All there was to do was to input the codes before confirming a purchase and the reduction would be directly applied to the final cost.

Once I purchased the website, I had to figure out how to upload my offline files to the server so that anybody can access them. By messing around with the user interface, I found cPanel, which effectively is a CMS for users to control their website without programming.

How cPanel looks like

To input personal files to the server, all you have to do is go into a File Manager, find the upload button and drag and drop all the necessary files.

File Manager

Online mySQL Database

On the other hand, for the mySQL databases, I had to export the existing one (from WAMP) and import then use that file to import the tables from the offline one to the online one.

Once that's done, there's an issue where the nothing would connect to the database. This is because the password of the online database (unlike the offline one) cannot be blank and will hence be different to the offline one. To solve that all that's necessary is a slight modification in the file "connect.php" (change the password).

Testimonial Section

Upon hearing the council's request on wanting a testimonial section I went on to research the Javascript plugin slick.js. Slick.js is a pre-made carousel template that can be easily modified by simply adding or subtracting a line in the Javascript (eg. If I wanted to add dots at the bottom of the slider, to indicate the page number, all I'd have to do is add the clause dots:true).

Whilst it looked rather complicated at the start, I soon found out just how easy the plugin was to use. All I had to do was add a certain class to a div with multiple sub-divs, initialize the slider through a separate Javascript file and include all of the slider.js files and everything would work perfectly.

To customize the words and placing, all I had to do was create a separate CSS file and modify specific classes and IDs. To modify how the slider works itself, I'd have to modify the Javascript file that initializes the slider. So in this case all I had to do was:

There was a manual on the slick.js downloads page that clarifies each individual clause above. Here are just a few:

Client Feedback

Once I finished building the draft of my final website, I did a short screencast on it and sent it to the client. The video simply goes through the different aspects of the website, giving a brief showcase of the website's aesthetics as a whole.

After sending the video, I got feedback from Jennifer, the chair of the student council. Below is the email sent.

In summary, the council liked the aesthetics of the website and wanted to add a section to incorporate a section for testimonials.

I did a bit of research and found out that most overviews looked like this.

Seeing the basic layout of a testimonial, I got the idea to make a moving slider with the text and name, with the content fully modifiable by a CMS. Research on a moving slider lead me to implement the Javascript plugin slick.js

Final Screencast

I took all the previous points I scripted a screencast around it. I was aiming for the entire screencast to be around 5 minutes long. From rough estimations, approximately 300-400 words should be enough for the whole video (excluding a demonstration and client feedback). 

My introduction briefly introduces my client.

Next I talked about how I would attempt to solve the solution I came up with.

After that I went through each of my 3 videos explaining what I did and why I did it. I covered all the major making steps and how I did it.

The last section is the handover and feedback section. I gave the client a few questions to answer and after that I included a short evaluation of my own just covering what I could've improved on.

Here's the video:

Here is a copy of my script:

Introduction to the client:

My client for my ICT project was my school’s student council. Just like the name dictates, it is a council where students from the higher years hold regular meetings to make changes to the school.

Problem & Solution:

Recently, the student council is currently facing an issue of transparency. By having a more specialized website, they hope to improve communications with the student body and inform them about the projects they’ve been working on. Furthermore, the website would be a great place to share the council’s weekly minutes; allowing the rest of the school to indirectly listen into the council’s meetings.

Development:

Before I started making the website, I had to design the website. I started out by creating a brief wireframe that I’d show the client for feedback. This client liked the idea so I went on to make the page. At first, I started at looking how I could use the template fullPage.js as it looked rather similar to the webpage I’d be creating. I went on finding an alternative as the template was too hard to modify. I ended taking the first page of the template though, as that looked rather nice. For the other pages, I used a mixture of Bootstrap and code to create each section. I took inspiration of different professional websites for some aesthetical aspects, as I was unable to think of any.

After I’d make section, I could then put them all together on my final home page.

For the CMS, I had to do quite a bit of research first. Once I figured out how to link the information from the database to the website, I made myself a CMS, where I could change the content from the database from a user-friendly site that I made myself. Here’s a demonstration.

Client handover:

Q: Please give an overview of what the project's aim is?

A: (Talks about the question)

Q: Does the website fullfill all of your design specifications?

A: (Talks about the question)

Q: What do you think of the aesthetic?

A: (Talks about the question)

Q: Any overall comments? 

A: (Talks about the question)

Mini-evaluation:

Overall, I recieved a lot of positive feedback on the project. Both the customer and I are incredibly happy about the technical and aesthetical level of the website. I believe I've fullfilled the specifications and much more and am incredibly grateful for being able to work alongside the council. Thank you.