Lab2 - First Version (Online)

Normal Deadline: Tuesday, 31 January 2017, 11.59am

After looking at your prototype from Lab1, your company UWishWCode decides to hire you (together with your classmates).

Your client instructs your company, UWishWCode, to provide the interactive version of the prototype, called the first version, and this version has to be hosted in a live web-server. This version will gradually be updated as time progresses. Note that due to inability to meet face to face on Monday, 30 January 2017, the first introduction of Laravel will be deferred to next Lab. Here, you are still expected to use Vanilla web programming...

Basic technical requirements:

• Provide the ability to sort by column using client-side JavaScript (as you have not learned PHP commands to do this from server-side) like the one asked in Q1 of 1415SEM2-CP3101B.pdf. You are free to use any possible solution for this requirement and there is a much easier solution than answering that final assessment question using Vanilla JS programming...
• For row(s) that have the highest/second highest/third highest/lowest total Sum value, highlight them with Gold/Silver/Bronze/Pink color, respectively. This likely requires some custom JS coding work.
• Set the row height of row i+1 according to the difference of column Sum values between row i and row i+1. That is, the bigger the gap, the bigger the visual gap has to be (you are free to calibrate the gap rules as long as it is visually consistent). However, turn off this feature when user clicks on a column header as the sort order will likely be different. This likely requires some custom JS coding work.
• For each 9 column: MC/TC/SPE/HW/Bs/KS/AC/DIL/Sum, use client-side JavaScript (as we have not learned how to access database in web-server), highlight the cell(s) that contains the highest score for that particular column using Orange color. This likely requires some custom JS coding work.
• You have to write the JavaScript function(s) to do all these and store the JavaScript files as external files linked to the HTML file(s); As far as possible, modularize your code, i.e. do not dump everything in one big script; use JavaScript functions... As you will write (at least) three different files to complete this lab: HTML, CSS, and JS, we have somehow forced you to cultivate the habit of putting your CSS file(s) in subfolder /css and your JS file(s) in subfolder /js.
• Once you have added those little bit of interactivity using JavaScript, use GitHub education pack to sign up and then setup a Digital Ocean droplet (if the student edition is not working, please just use the 5 SGD/month option that you will use between the pair/triple of you until end of this module or beyond), select One-click apps: LAMP on (Ubuntu) 16.04 (the latest edition, avoid the older 14.04 or you will frequently get security warning updates), select Singapore 1 as the datacenter region (for faster network speed locally). See the screenshot below:
  
• A few moments later (should be not more than a few minutes), your Digital Ocean web server droplet should be ready. Point your web browser to http://aaa.bbb.ccc.ddd where aaa.bbb.ccc.ddd is the IP address of your DO droplet. You should see this standard image.
  
  
  
• Optional step for now, but will be increasingly important soon, read this note about securing your crucial Web Server written by the Lab TA of group 2: Qua Zi Xian
• Use an SFTP client (Steven uses Xftp 5, Home or school free license) to upload your web application files to the public folder of your newly created LAMP stack droplet (it will be at folder /var/www/html if you do not change the web server setup)
• Use chmod 711 (for public directories, esp your /css and /js subfolders, do not allow directory listing/read permission, but only execute permission; or if you know web server/UNIX operating system, execute sudo a2dismod autoindex) and 644 (allow public to read your web application files). Read this page that explains about UNIX file permission or ask your Lab TA...
• Now test your web application by pointing your web browser to http://aaa.bbb.ccc.ddd again. If everything is set up correctly, you should be able to see your index.html broadcasted live to the world (that is why you should use only fictional student data). Before deadline, tell this IP address to your Lab TA for checking.

To help you understand the basic requirements, here are a few OUTDATED screen shots (your Lab TA will demonstrate the details at the end of Lab1 as we do not meet you physically on Monday, 30 January 2017). Please visit the live version for the latest version of this app.

FAQ

1. Q: Help, I (and my team mate(s)) cannot setup a Digital Ocean droplet and then upload file(s) to it via Xftp (or other FTP client)...
   A: Please Google various troubleshooting guides about Digital Ocean droplet first... Last resort: Contact Lab TA...
2. Q: My/our implementation is slightly different from the screenshots above, is that OK?
   A: Minor variations are expected. It is hard for you to get 100% similar behavior as we have not really describe all possible situations in the document above.
3. Q: I/my team mate(s) can already set up httpS://somefancyname.com instead of http://aaa.bbb.ccc.ddd... Can I do that?
   A: We will do that later around Lab6... but if you already know how to register a domain name and setting an HTTPS certificate at this stage (Week03-04), it is either your progress is very fast or you actually have significant experience in web programming before...
4. Q: I encounter "Internal Server Error" when testing my lab work and I have no idea why... What should I do?
   A: We will discuss this later in PHP Lecture. However, you can do self investigation by yourself for now: Type in tail /var/log/apache2/error.log to echo (tail is a program name in UNIX) the last few (10) lines of a read-only error.log file that resides in this folder: /var/log/apache2. Use this information to help you debug...