We were unable to do much in Lab2 last week as it was a public holiday so some parts of Lab2 is deferred to this Lab3... Hang on...
This short guide assumes that the pair/triple of you have cleared the important task in online Lab2, i.e. spinning a new Digital Ocean (DO) Droplet with LAMP (Linux/OS Apache/Web-server MySQL/Database PHP/Server-side-scripting) stack on Ubuntu 16.04 and understand how to upload your Lab1-2 work (your HTML/JS/CSS files) there so that your (currently static) web application can be publicly accessed by anyone who has Internet access and knows the IP address of your DO droplet.
We will now proceed to install the Laravel dependencies, spin up a new Laravel project, and get it working.
This section is actually optional if you+your team mate(s) have setup and use Laravel beforehand (and still remember the exact steps). But since almost all of you have never used Laravel before (except 2-3 out of 49 students; based on Lecture 01 quick survey and Lab1 observation), please read on.
Here are a few more detailed steps to install Laravel at fresh copy of DO droplet with LAMP stack on Ubuntu 16.04. If you use another web server with different setup (different OS or OS version/web server/database/server-side scripting language), this guide may be 'wrong' and you have to find the solution yourself... Unfortunately there is no faster way as there is not yet one-click app to auto-prepare a DO droplet with Laravel setup yet... Btw, in the event you get stuck, try Googling online for potential solutions before asking your Lab TA. Note that some of these steps may have changed (a bit?) by the time you read this document...:
# you can read online documentation at https://getcomposer.org (Composer website) # to self-learn the details about installing Laravel and the required PHP libraries # that are needed by Laravel (version 5.3 or the newly released 5.4) # but not installed by default in DO droplet with LAMP stack on Ubuntu 16.04 sudo apt-get install composer php-mbstring php-xml zip unzip php7.0-zip # change directory to /var/www/html/ and create a new Laravel project (will take time) cd /var/www/html/ && composer create-project laravel/laravel [YOURPROJECTNAME] # change a few directory permissions so that Laravel can write new files on them: chmod o+w /var/www/html/[YOURPROJECTNAME]/storage/framework/cache chmod o+w /var/www/html/[YOURPROJECTNAME]/storage/framework/sessions chmod o+w /var/www/html/[YOURPROJECTNAME]/storage/framework/views chmod o+w /var/www/html/[YOURPROJECTNAME]/storage/logs
<VirtualHost *:80> DocumentRoot <path_to_your_project_folder>/public Errorlog <path_to_your_project_folder>/storage/logs/error.log <Directory <path_to_your_project_folder>/public> Require all granted </Directory> </VirtualHost>We use this step so that the document root is no longer the default
/var/www/html
but path_to_your_project_folder/public
(do not forget the /public subfolder so that we only expose the public folder of our project to the Internet but not anything else...)Finally... a working dummy Laravel project. At this point, you may want to repeat the example from Lecture 06 - Front-End about Laravel basic Routing, Blade Template, Child Pages, and Custom Controller to strengthen your understanding of these concepts...
Now look back at your Lab2 work. If you have completed Lab2 successfully, you should have 'index.html', 'help.html', and at least 3 student-detail-page.html'.
Now let's migrate into Laravel format and appreciate that some steps that you have did in Lab1-2 are now much easier with this framework (after you understand how to use it).
First, make FOUR (4) Views in Blade format:
Then, make ONE (1) Controller: 'app/Http/Controller/StudentController.php' to control TWO (2) different routes: '/
' and 'student/{id}
' (for now).
Then, update 'routes/web.php' to contains at least these THREE (3) routes (with additional route 'help
'):
<?php
Route::get('/', 'StudentController@index');
Route::get('student/{id}', 'StudentController@detail');
Route::get('help', function() { return view('help'); }); // direct controller
The StudentController must take in an {id}
and for now, generate a dummy detail view with just one simple statement: "This page will show the details of student with this id.".
This {id}
can be any integer from [1..N], not just for 3 out of N students as with Lab1-2.
Notice that your project starts growing bigger.
Please use GitHub (or other relevant software) for version control and for collaboration with your team mate.
The ranklist app in Lab2 does not look as good as the version on the computer if loaded on small screen. The text and pictures are too small and the user has to zoom in and out, scroll left/right/up/down to see the entirety of the ranklist/detail page. Please make the application works well on mobile devices too. Prevent side scrolling and ensure that users on mobile devices just need to scroll vertically. You are allowed to collapse/hide some details on smaller screen.
As an example, see the behavior of the live version and try to mimic (or even improve) on it.
Use Bootstrap to make the appearance of your ranklist app as good as possible on various screen resolutions as taught in Front-End (Bootstrap) lecture.
{id}
, i.e. "This page will show the details of student with this id." when route student/{id}
is accessed. You have learned JavaScript array by now and will learn similar PHP array soon. Why don't you store the (currently random/dummy) scores of ALL N students in your StudentController (yes, bad practice for now; we will use Model/Laravel Eloquent database soon) so that the ranklist is generated from this array data and whenever the details of a student with a certain {id}
is requested, we can generate the customized view from this array data too. We will test this by asking you to populate N = 50 (not just N = 7) random students data, and your ranklist (the sums, etc) and detail page of every student must be consistent with the one displayed in the ranklist. During checking, we will ask you to change one random number of random student on the spot, and only by changing that one number, the ranklist and the detail page are also updated accordingly (including all the highlight for gold/silver/bronze/pink that you have done in Lab2, etc). PS: You will not want to enter 50 random data manually, so we recommend you to self-learn this.{id}
(route /student/id
), there should be 6 variables in the chart: MC, TC, HW, Bs, KS, and Ac that describes {id}
's scores on those components against the possible maximum scores (or against the current leader's score). This visualization can give viewer the rough information on what component this student is strong/weak at... in a glance... As we have not learn how to access Database, just make up the numbers randomly for now. What is tested is the drawing part. But if you are claiming for the previous "PREPARATION FOR DATABASE ACCESS" above, your (random) numbers must be consistent!...We concentrate on Laravel in Lab3-6.
However, if you are interested to build Single Page Application (SPA) especially using Node.js, here is additional self challenge for you/your group (optional):