Evaluation and Reflection

Once I finished my project, I had to fill in a self-assessment sheet for my project evaluation. I went through each category and gave myself a score out of 3 or 4. Following the rubric, here's what I decided to give myself.

Analysis of Marks

Research & Planning

I gave myself at 3 as I showed evidence of conversations with the client and evidence of comparative research to other possibilities for the development of certain sections of the website. I have also devised a Gantt Chart which also helped me plan out my time. For the majority of plugins I've used, I've shown evidence that I understand and know how to use it.

Technical Competencies

I gave myself a 3 for this section.Throughout the course of the project, I've learned a wide range of skills. Not only have I made less typos and technical mistakes, I've also learnt and implemented PHP and mySQL, languages I've never used before. Using HTML and CSS, I've developed an aesthetically pleasing, interactive and scalable website. I also had to properly set up software like WAMP and it's databases to ensure that nothing goes wrong. I took this a step further and managed to set up the same database online where all the procedures were different.

Originality & Creativity

For this section, I also gave myself a 3. Whilst some parts of the website were inspired from other existing ones, the fact that I was able to put all the pieces together to form a pleasing website. The ability to visualize and enforce such ideas was worth giving it a 3 out of 4.

Evaluation

I gave myself a 2 here as I felt that, whilst I did manage to address the issue, I may have been lacking a bit in evaluation, lacking specific criterias to check off as I finished a section of the website.

Communication

I gave myself a 2 in this section as I felt I used my blog decently throughout the project to reveal what I was doing and why I was doing. I frequently added images and linked a few videos in too. My language has been relevant and accurate as well.

Commitment & Involvement 

I gave myself a 2 here. Throughout the entire project I put plenty of effort into every aspect of my project. I went deep into my own hours to make sure the project went well and on time. The only negative aspect is that my submission for my solution when going for alpha testing was late and I had to go into the holidays to finish.

Fitness for Purpose

I gave myself a 4 here as I managed to answer all of my client's demands, including the any new ones given to me at a late time. The client has expressed its liking towards the website's aesthetics, and from my perspective, I believe that that is an indication to a job well done.

Wrapping Up

Overall, I believe that this journey has been a challenging, exciting yet tiring one. Throughout this ICT course, I have learnt and applied many new pieces of knowledge. I've gained the ability to write in a new language and have decreased my thinking time and increased my technical accuracy. Both I and the client are satisfied with the product and have put in great amounts of effort to successfully accomplish this project. 

The website I've created has resolved all of the requests as per the specification and has managed to satisfy all of the client's late demands. Over these months I have changed from an average IT student to someone with the ability to make nice looking, operational websites! I hope that this would benefit me in the future and look forward to making even more websites!

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.

Draft of the final website

After finishing the basic layout of each section (and also creating an individual CMS for each section), I started drafting my final website. This website would simply be all the different sections put together inside 1 single HTML file. 

Bearing in mind that there may be some overlapping C

Adding the Weekly Minutes (Part 2)

After creating the basic layout of the weekly minutes section, I added it to the website and added a layer of Javascript to make it more interactive. Using the font-awesome CSS, I added a few symbols so that users wouldn’t be lost when navigating through the website. The javascript I added specifically targeted these symbols.

Javascript Code

Effectively, what these lines of code would do is that they would is that they would hide the menu. When the “X” button is pressed, the class “hide_menu” would be added and the div would apply a negative margin of 250px, which would shift the div to the right effectively hiding it. The reverse would happen when the class is removed.