Lab4 - Back-End 1

Date: Monday, 13 February 2017

You will continue expanding your exposure to Laravel in this Lab4. We will create TWO (2) HTML5 forms (you can split the work among team mates), validate the entered data, and either process the data (update the 'dummy Model' and related views) or display the error messages if the entered data is invalid. For this Lab4, we will simulate this dynamic behavior using PHP array as our 'dummy Model' instead of using Database (but nothing can stop you to learn stuffs by yourself).

Basic technical requirements:

• Two of the JavaScript challenges in Lab2 should be re-coded in PHP (server-side) to hide "intellectual property":
  1. The assignment on which row has CSS class first/second/third/last.
  2. The assignment on which cell has CSS class highest (for having the highest score) for each column.
  Then, the client will only take those classes and use the CSS rules to apply the appropriate styling.
  Actually Steven has done this in his live version to hide the JavaScript answer from you all during Lab2 :).
  Note that the dynamic table sorting and the row height determination can be left done in client side (as it is more efficient that way).


• All the extra challenges in Lab3:
  1. The inclusion of Navbar+Footer,
  2. At least N = 50 rows of (faked) data stored inside a PHP array inside StudentController to be used for the generation of the ranklist and the detailed views (you can use a fixed random seed so that the 50 faked data remains the same across sessions although you don't "hardcode" them after faking 50 rows
     (if your group is attempting the Database Challenge below, you can skip using PHP array and just jump into Database), and
  3. The radar chart in detail page (you can use this if you struggle to make your own version — and you don't have to reinvent the wheel).
  must be implemented in your group's web application by now (if your group skipped some of it last week) so that all groups have roughly similar baseline for Lab4.


• Adding a new view: Create Form:
  Thus far, your Ranklist app from Lab1-3 are still mostly 'static'. You cannot add new data yet (in the context of our application: add new student). Therefore, in this Lab4, we will add a simple HTML5 form so that we can add new entry (it is recommended to just use LaravelCollective discussed in PHP lecture, but first... you will need to install this package first). The Create Form (let's name it as resources/views/create.blade.php) just requires three text boxes to ask user (the admin/Lecturer, or actually, as we haven't talk about A1+A2 yet, anybody else who knows the direct URL/the route...) to enter three information: Nick name, Full name, Kattis Account, and one drop down list to select flag/nationality. The flag/nationality Drop-Down List must contains at least SGP (for Singaporean), CHN (for Chinese), VNM (for Vietnamese), IDN (for Indonesian), and OTH (for Other Nationality). The screenshot below is just the current basic interpretation of this requirement and you are free (and encouraged) to improvise further.


• Adding Validator for Create Form inside the StudentController:
  The full name, nick name, and Kattis field should not be blank. They must also have at least 5 characters and at most 30 characters. The Flag/Nationality Drop-Down List has to be selected. Display appropriate error messages if the data is not validated properly upon submission (clicking the 'Create' button). The screenshot below is a simple way of displaying all error messages at the top of the form. It is more user friendly to highlight fields with error(s) and display an error message near its relevant field and you are encouraged to do so.



A Basic Example of Create Form with 4 Wrong Data Entry.



• Updating the Relevant Views After a Successful Create:
  If the data is successfully validated, you need to add new student into the student array in StudentController (with default 'zero' values for the individual score components), subsequently appear at the bottom of the ranklist as its score sum should be still zero (using resources/views/index.blade.php), and the details of that new student must be subsequently view-able (using resources/views/detail.blade.php, after passing the newly created student {id}). You will need to add at least two relevant routes at routes/web.php: one to display the Create Form and one more to validate (and subsequently add) the newly POSTed Student data.









• Add another new view: Edit Form:
  This time, we will describe the requirements in lesser detail as this step is similar as the Create Form above. In fact, we will only show you two relevant screenshots (of the live version as none of you have admin rights to do this creation/editing/deletion action(s)). Note that the displayed screen shot is still very basic. For example, you can make the field Mini Contest, instead of using a comma-separated scores for the 9 Mini Contest scores (and have limited validation, unless you use Regex -- see the Regex challenge below), use 9 number input fields that have restricted range of [0.0, 0.5, 1.0, ..., 3.5, 4.0] according to the CS3233 scoring scheme that can be validated easier. Notice the darkened "Sum of scores (automatically computed)" that uses client side JavaScript to help the one editing the student data to see the updated total score immediately (even before POSTing the data to the server).









• Add Delete (Existing) Student Feature:
  Add a "Delete" button (with appropriate warning box, currently just showing a basic default JavaScript confirm dialog) and upon confirmation, remove the selected student from the student array in StudentController and update all the relevant views.









• If you (and your team mate(s)) have reached this step successfully, congratulations, you are one step away to have a dynamic web application. We will learn Database very soon to make all these changes persistent (or self learn that by yourself first, see the extra challenge below)... You can get 3 marks for this Lab4 even if you do not do the Database challenge below, although the limit is high for those aiming for perfect 4 marks...

FAQ

1. Q: Help, me and my team mate(s)' are still unable to set up Laravel framework and subsequently our Lab3 work is still incomplete... how should I continue with this Lab4?
   A: You really have no choice but to catch up and clear Lab3 first. You need to observe deadlines and meet targets. Based on Steven and TAs observations, very few groups still encounter this problem as of Monday, 06 Feb 2017 and will be helped separately.
2. Q: Help... I encounter that HTTP 500 "Internal Server Error" so many times and I have no idea what to do...
   A: As explained in PHP lecture, type tail /var/log/apache2/error.log to echo the last few (default 10) lines of a read-only error.log file that resides in folder /var/log/apache2.
3. Q: This lab seems longer than usual... What happen?
   A: I observe that some better students in some groups solo-ing (or doing the most work) in Lab3. By having more different subtasks and extra challenges, I hope to spread the workload more across team members. Remember to use version control software like GitHub to manage the concurrent project updates from two (or three) of you and to make it easier to sync the project files with the actual web server in your DO droplet. Note that if you use GitHub, you need to ensure that the project setting is private (to your project mates only).