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:
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.
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.
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.
The Extra Challenges for Lab2:
No such thing for this Lab2 as it is conducted online... Submissions that passes basic technical requirements will be given full 4% score for this online Lab2... Consider that CNY hongbao from us :)...
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...
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.
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...
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...
Lab TA Checklist
Make self available before CNY holiday and especially after CNY holiday, i.e. on the extra Public Holiday: Monday, 30 January 2017 night for online technical questions regarding this online lab...
Grade students who have completed Lab2 basic requirements (no extra challenge this time) after deadline.