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.

  • Example of the Updated Ranklist After Creating a New Student
    (the missing image is an Extra Challenge)
    Example of the Blank Detail Page of the Newly Created Student
    (the missing image is an Extra Challenge)

  • 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).

  • Example of Editing an Existing Student
    Example of the Updated Ranklist After Edit

  • 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.

  • Example of Confirmation Box for the Delete Action
    Example of the Updated Ranklist After Deletion

  • 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...

The Extra Challenges for Lab4:

    As we navigate from one web page to another in our web application, it is nicer to have additional visual indicator in our navigation bar (not just the address bar). Notice the navigation bar shown in the screen shots above and try to do the same. Those who are using Bootstrap navbar should encounter 'interesting issue' about navbar-brand... I will let you handle this yourself.

    Notice that the image is missing in the basic technical requirements above. During a Create action, add one more button to select an image file to be uploaded to the web server to be the profile picture of that newly added student (you frequently do this in Facebook). You need to ensure that the image file uploaded is a valid image and not a gigantic image file. To pass this challenge, you will have to Google enough to figure out the required steps yourself and ensure all your views are all consistent.

    For some of you who knows Regular Expression (RegEx) or want to self-study. You can add stronger validation for the simple Edit form shown above. For example, for the Mini Contest field, instead of just weakly verifying that the entered data is a string of exactly of length 35 characters 'x.y,x.y,x.y,x.y,x.y,x.y,x.y,x.y,x.y', you can also test if the string is of correct x.y format, repeated 9 times, separated by 8 commas, where x can be either [0, 1, 2, 3, or 4] and y can be either [0 or 5] to represent values between [0.0, 0.5, 1.0, ..., 3.5, 4.0] (note that you can't rule out 4.5 with this RegEx although this is not allowed in the CS3233 scoring scheme). You may want to go even further and split these various comma-separated scores into various individual number input that can be validated in a stricter manner. It is up to you.

    This will become a basic requirement for Lab5. But anyone who wants to study in advance are encouraged to self learn this in advance (or leave it until Lab5). Basically what your group is doing in this Lab4 will not be saved in the server at all, i.e. once you close your web browser (or even the web browser tab that loads your web application), all these creation and/or deletion of data is not going to be persistent... Use database instead of using PHP array to store the N students... To test whether your group has done this is simple. We will load your ranklist app, edit a few numbers, see the updated ranklist, CLOSE that web browser, open an incognito mode (or using another computer), and see whether your ranklist app still show the updated data or not...


  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).

Lab TA Checklist

  1. Showcase the selected best Lab3 work so far.
  2. Review the concept of Laravel Form handling using LaravelCollective package, form validation strategies, showing error messages (the basic form and the better user-friendly idea) and adding new routes/controllers to display form and to act upon form submission.
  3. Verify that no group still have issue with setting up (basic) Laravel in their own DO droplet (should be near 0 by Lab4).
  4. Help group who struggles with the installation of LaravelCollective package.
  5. Grade groups who have completed Lab4 basic requirements and nominate the best two lab works in your lab group so far to be showcased, especially those who have interesting nice features that differentiate them with the other groups (page indicator, image upload :O, regex usage, groups that already use database, or any other nice surprises).
  6. Optional: Show how you use local web server, e.g. xampp for local testing @ own laptop, and/or GitHub for your typical web development works (especially the one in group setting) to inspire your Lab group to do the same.