CS3226 - Web Programming and Applications

Introduction

This module introduces students to software development on the Web platforms. Students will be exposed to important computer science concepts, including networking, databases, computer security, user interface design, programming languages, and software engineering. These concepts will be tied together through hands-on practice in building a Web-based application using the current Web development technology. At the end of the module, students are expected to be able to design and develop a Web application, to appreciate the underlying technology needed to build a Web application, and to develop a fundamental understanding of related computer science concepts.

This module was previously known as CP3101B in Academic Years 2013/14 and 2014/15.

Note: This introductory message will not be prominent the next time you visit this URL again. This behavior is normal. You can view it again by scrolling to the top of this page. Btw, you will learn how to use HTML5 localStorage to emulate this behavior in your web application.

Course Registration

The quota of this class (Sem 2 AY2016/17) is 60 students, which is the same as the last three Academic Years.
There is now minor change about the pre-requisites and pre-clusions, see below.
Lab (hands-on) component with low Lab TA to students ratio and the long capstone project are critical to the success of this web programming module.

Useful information to help you decide on whether you should register for CS3226 (see CS3226 in nusmods.com):

  1. The current official pre-requesite of CS3226 is currently only CS1020 or its equivalent.

    The course difficulty of the first half of the semester will be set to those who have NOT learned HTML5, CSS3 (Bootstrap), JS (jQuery), PHP (Laravel), and SQL (MySQL) before. Those with prior experience with JavaScript (CS1101S), simple PHP and MySQL (CS2102), basics of Computer Networks (CS2105/CS3103), a bit of Computer Security (CS210/CS3225), a bit of Interaction Design (CS3240), a bit of User Interface Development (CS3249), a bit of Computer Graphics (CS3241) will have some advantage in this class. Although not officially precluded (yet), those who have taken either CS3216, CS3217, and/or Orbital will generally not encouraged (although not offically disallowed) to take CS3226 again as they will not learn that much from taking CS3226.

  2. CS3226 has no final assessment, i.e. it will have heavy 100% CA.

  3. Teaching staffs:

    (Senior) Lecturer: Dr Steven Halim, the key man behind VisuAlgo who created his first website 17 years ago and actively learning the latest web development techniques to keep this module up-to-date. Lectures are on Tuesdays, 10am-12pm at COM1-2-VCRm.

    Rating (out of 5.00) Jan-Apr 2017 (n=??/43) Jan-Apr 2016 (n=20/57)
    Module feedback Hopefully 3.800
    Module difficulty Hopefully = 3.850
    Steven's teaching Hopefully 3.986

    Teaching Assistants (TAs), all lab groups are on Monday at COM1-B111 starting from Week03 onwards, we will focus on Laravel this semester:

    Group Time Lab TA
    1 10am-12pm Dr Steven Halim
    2 12-2pm Qua Zi Xian
    3 2-4pm Tan Mun Aw
    4 4-6pm CANCELLED
  4. Do you have enough bid points?
    The quota is 60 students and the demand in the past two Academic Years are (much) higher than the supply although the bidding war decreases a bit in AY 2016/2017.

Note: This course registration section will not be prominent from Wednesday, 12 January 2017 onwards (after first lecture). This behavior is normal and you will learn how to use JavaScript to do all these. You can view it again by scrolling to the top of this page.

News

Date News

Lesson Plan

Week Tuesday Lecture
COM1-2-VCRm

10am-12pm
Past classes are highlighted with khaki color, current week is highlighted with light green color, future classes are not highlighted
01, 10 Jan Lecture01 - Introduction
Lecture02 - HTTP/S
02, 17 Jan Lecture03 - HTML5
Lecture04 - CSS3
03, 23+24 Jan Lecture05 - JS (jQuery)
04, 30+31 Jan Lecture06 - Front-End
(Bootstrap & Laravel Blade Templates)

05, 06+07 Feb
Lecture07 - PHP
(Laravel Form, Input Validation)

06, 13+14 Feb Lecture08 - Database
(SQL/MySQL-very brief, Laravel Eloquent ORM)

Recess Week No class, but think of Capstone Project idea(s) too
07, 27+28 Feb Lecture09 - Security
(Laravel Auth+A2)


Capstone Project Briefing

08, 06+07 Mar Lecture10 - Performance & Scalability (1h)
Finalizing Capstone Project Ideas
08, 10 Mar
The birth day of Jemimah Charissa Halim (planned C-section)
Steven takes parental leave 9-14 Mar (6d 5n)
09, 13*+14 Mar Steven will not be present this day
Please use the extra 2 hours time to review these past papers (or the entire past lectures/labs)
1314SEM2-CP3101B (final)
1415SEM2-CP3101B (midterm)
1415SEM2-CP3101B (final)
1516SEM2-CS3226 (theoretical test)
Alternatively, you can also use this 2 hours block for another possible capstone project meeting time
10, 20+21 Mar Lecture11 - Web Server
(Digital Ocean)

Lecture12 - Miscellaneous Techniques
Long lecture with 2 topics in one session
11, 27+28 Mar 30% Theoretical Test
(using Lecture Time)
Here is our paper:
1617SEM2-CS3226 (theoretical test)
12, 03+04 Apr Lecture13 - The Last Lecture
(https://visualgo.net)

13, 10+11 Apr Capstone Project Evaluation Day
(using Lecture Time)


The 10th STePS
(on Wednesday night)


Good Friday and Easter Sunday Week
Reading Week No class, no final assessment

Class Roster

ProjectStudent Name

Labs Showcase

The table below will contain direct links to selected students' works for CS3226 past labs. Try them. Also please do a 'right click' and select 'view page source' (of the client-side files) to study how your peers managed to come up with a good web application given the same constraints.

LGroupPublic URL
1-Skipped
21-3http://cs3226.cwma.me/
-2-3http://cs3226.yuri-x.com/
-3-5http://cs3226.tk/
31-4http://139.59.111.224/
-2-3http://ranklist.yuri-x.com/
-3-1http://128.199.205.219/
41-6http://188.166.219.59/
-2-3http://ranklist.yuri-x.com/
-3-4https://app.lzr.im/
51-Ahttp://cs3226.cwma.me/
-2-Ahttp://188.166.214.134/
-3-Ahttp://cs3226officialranklist.tk
61-Bhttp://cs3226group2.tk
-2-Bhttps://ranklist.yuri-x.com/
-3-Bhttps://cs3226.tk/

Capstone Projects

Introduction

The success of module like CS3226 is best evaluated by the abilities of its graduates to produce working web applications that are useful rather than raw knowledge of the ever-changing technology stack (currently HTTP/S, HTML, CSS, JS, jQuery, Bootstrap, PHP, MySQL, Laravel, etc). If your capstone project is successful, you can proudly put a reference of it inside your Curriculum Vitae* that your prospective employer can visit before interviewing you.

Who will build the next useful web application (for NUS community or for worldwide audience) that survives the test of time (defined as this: It is still live and used by people at least one year after its launch)?
In AY 2014/15, it was NUSWhispers.
In AY 2015/16, it was NUS Hacks.
How about this AY 2016/17?...

Basic Technical Requirements

  • The web application must be about something that at least one student in the capstone project group has a strong desire to pick up as a self-maintained web application after this module is over. This cannot be really tested by the time this module is over and most students will just say that they will continue developing the application but the web application still disappear afterwards (broken SSL certificate, expiring domain name, expiring web hosting, attacked/has bug and nobody bother to fix, failed idea, etc). The bottom line is propose a project idea that is useful, relevant for at least one of the capstone project group member, and not about reinventing the wheel. Currently, the ideas that will be strongly opposed by the lecturer from the start includes (this list can be updated over time):
    1. Another social media app (near impossible to fight with Facebook etc),
    2. Another (discussion) forum related app (there are so many available out there like Stack Overflow, Quora, etc),
    3. Another (NUS) calendar/timetabling/meeting planner app (there are NUSMods, doodle, etc),
    4. Another module planner/plan-your-graduation app (without full access to SoC/NUS UG office or one with domain knowledge of graduation requirements that keep changing every year, this kind of app will not have meaningful use AS SOON AS YOU GRADUATE and no longer maintaining/in contact with SoC/NUS UG office...),
  • Has both client-side (HTML5, CSS3, JS, jQuery, front-end framework: Bootstrap for responsive design, Laravel Blade Template, and/or alternatives) and server-side (PHP, MySQL, Laravel PHP framework, and/or alternatives) components; The client-side and server-side components of your web application should also be roughly equal, i.e. your team cannot propose a web application with super heavy client-side components with 'very minimal' server-side components.
  • Utilizes persistent data storage across different sessions (Laravel Eloquent ORM, other RDBMS like MySQL, and/or alternatives).
  • Has reasonably good User Interface (UI) and gives a good User eXperience (UX), the front-end must use responsive web design.
  • Performs well, e.g. fast loading time, as far as possible, use AJAX technology when communicating between client and server (and the server has to process a lot of things before responding), minimizes network bandwidth usage, etc.
  • Uses some basic web application security principles, use user accounts for authentication/authorization purposes.
  • Has a nice logo (favicon).
  • Has a properly registered domain name (at least for one year, do not buy domain name that is more than 20 USD/project group).
  • Has to be hosted in a live web server (preferably just Digital Ocean to minimize administrative work) and its registered domain name is first made accessible to public latest by Monday, 27 March 03 April 2017 (Monday of Week 1112).
  • From that launch date until the 10th STePS (Wednesday, 12 April 2017), record its web traffic data recorded (use Google analytics), analyze, and react (if possible).
  • Optional: We hope that (some of) you still maintain the web application that you build (bug fixes, UI/UX improvements, adding new features, etc) for at least 2.5 more weeks after you finish CS3226. A small percentage of the capstone project marks will be finalized by Monday, 1 May 2017, when Steven freeze the final marks.

Remember that the manpower per group is [5..7] students (1-2 MORE than the previous two AYs) and the time window is approximately 5 weeks (Week09-10-11-12-13, about the same as last two AYs as we have to end the module by Wednesday of Week 13 instead of dragging it until Wednesday of Study week).

Rough Timeline

This sub-section will be updated over time.

WeekExpected Milestone
03Early random pairing/tripling of project groups during Lab1 (Lab1 is still done individually)
04-06Work on Lab2-4 as pairs; by end of Week 06, we will do another random grouping to make up project groups of size 5-6; the usage of version control software like GitHub is recommended
Recess-07Lab5-6 will be submitted according to capstone project grouping, i.e. merge the two (or three) versions into one better version per capstone project group; The capstone project group will start brainstorm possible capstone project ideas (medium sized), discuss the feasibility of such ideas with the Lab TAs or the lecturer with the lecturer having the final say. There is NO lecturer-proposed projects this time...
08All proposals should be completed latest by Tuesday of Week 08 (07 March 2017) as Steven will be away on 9-14 March (end of Week 08 - mid of Week 09) and you all have to start your project anyway by Week 09... Write down your project abstract at iSTePS system directly (read these instruction slides).
09Deeper Brainstorming/Prototyping week:
  1. Brainstorm the technical details of your group's web application. Remember that your group set the group's own target and Lab TA (Steven is away) will only roughly gauge whether it is feasible or not, whether it is a good challenge or too easy, etc.
  2. List of technological details that your team will use for this project, both for client-side and server-side.
    Everyone are expected to avoid Vanilla programming, but rather use a framework (e.g. Laravel for this semester).
    State those frameworks/templates that your group want to use especially those that are not officially covered in this module (but there is no guarantee that Steven and/or Lab TA can help with non official tools).
  3. A short analysis of:
    1. User needs — Is there a need to build what your team wants to build?
    2. Target website visitor profiles — who will likely visit your website and when?
    3. "What is currently out there?" (as of mid-March 2017) and what are they lacking? — especially for projects that are known to have direct competitors
      Explain why the web application that you want to build can potentially be better than the existing ones
    Note that you are not required to write long reports like in CS3240 (Interaction Design) module; A brief analysis is sufficient
  4. Write a timeline that roughly describes how your team is going to divide the resource (5-6 manpower) into 4+ more weeks (this week 09, 10, 11, 12, half of 13)
  5. Start working on Laravel project (Steven is assuming that most groups will use Laravel as any other framework will not be officially supported and your group will be on your own).
  6. Set up private GitHub repository for your group.
  7. Optional: Draw a mockup (drawing sketch, either hand-drawn, via photoshop-related software, or tool like this) or first screenshots (better) of the first draft of at least the landing page (index.html or index.blade.php) of your group's web application.
10Development work: Iteration 1, front-end and back-end have to be done in parallel, remember to manage manpower properly
  1. If already possible: Finalize the web application title and its domain name (quickly purchase it before it is taken by anyone else)
    (minimize change if possible although it is still possible to change the title and/or domain name before launch on Week13)
  2. After initial exploration of the initial implementation of your group's ideas, write down the more detailed list (than the abstract above) of core features that your website will have by Wednesday, 12 April 2017, in a written email to your Lab TA (cc-ing Steven-if he is not your Lab TA and all your group members). We will check this again by Week 13.
11Development work: Iteration 2
Manage your time properly between individual achievement (30% theoretical test) and group work.
After the individual theoretical test is over, this module is all about 2 week push of your capstone project.
12Development work: Iteration 3
For this week, I hope most capstone project groups have reached what we call MVP status...
It is better to start launching the app (invite your friends to try the app) by this week.
Please inform Steven about your app's final domain name to be linked/updated below (all done by Friday, 7 April).
Some team members must already start thinking about A1 poster (for STePS) and PPT for Internal Presentation.
Do not forget to print the poster by Friday, 7 April and send a soft copy to Steven via email before Friday, 7 April 23:59.
13Evaluation week:
Weekend leading to Monday, 10 April: TA testing on SP and IX components, try not to have buggy parts in your web app++.
Tuesday, 11 April: Internal presentation, 8m/group + 2m QnA with presentation order randomised (1-2 speakers/group, using own laptop).
Wednesday, 12 April: 10th STePS finale, test if your idea and product is really accepted by the market out there...

Grading

This all important sub-section is a more or less final.

The grading of this 41% course project is based on "combination of many factors" computed using a "complex but sophisticated ranking algorithm that resembles how Google Page Rank algorithm works" and adjusted based on feedback from the past 2 AYs. The rationale is that a good website (web application) should rank highly in search engine results (that takes in lots of factors and very hard to game the system...) and a weak website (web application) won't have that many visitors due to low search engine results. The details of this ranking system is shown below. The final ranking day of CS3226 course project is on Wednesday, 12 April 2017, during the 10th STePS. But generally we monitor each group's progress since Week 09-13.

Done:

  1. 3%: Has catchy D(omain) N(ame), categorical score: 3 or 2.5/very good, 2/average, 1.5 or 1/has/have potential issue(s), started by second Last Lab: Monday, 03 April and finalized by Last Lab: Monday, 10 AprilFriday, 07 April.
  2. 5%: Has fast page loading SP(eed)/response time (tested at various stages of the semester by us) and somewhat scalable (if applicable), categorical score from 5 or 4/the best performing-technically advanced team, 3/average, 2 or 1/slowest web application), finalized by last Lab: Monday, 10 AprilTuesday, 12 April.
  3. 5%: Has good UI, good UX, good responsive design, nice artworks/favicons, categorical score from 5 or 4/the best, 3/average, 2 or 1/worst), group members are not supposed to 'explain' how to use your application to Lab TA during testing, finalized by last Lab: Monday, 10 AprilTuesday, 12 April.
  4. 7%: Delivers good Internal Presentation (Tuesday, 11 April 2017), categorical score from 7/very good presentation, 4/average, 1/very awkward presentations, finalized by Tuesday, 11 April.
  5. 3%: Produces nice A1 PO(ster) (really attracts crowd on Wednesday, 12 April 2017) and prints it by Friday, 07 April 2017 (softcopy of the poster is presented as clickable link in this column), categorical score from 3/good/catchy for STePS, 2/average, 1/has/have potential issue(s), penalty 0.3 for printing on Monday (technically late by 3 days), finalized by Wednesday, 12 April.
  6. 3%: ST(ePS), a mere 3%, Steven will simply use the official 10th STePS voting statistics and award 3/2/1 for rank 1-2/rank 3-4-5-6/rank 7-8, respectively; Groups can use any strategies to attract crowds and obtain popularity votes; note that some people among the crowd are the important people from industry that have been pre-assigned to give higher weightage votes. Everyone are awarded full 3% ST scores by Dr Anand Bhojan, finalized by Wednesday, 12 April.

About to be finalised:

  1. 5%: Has good L(aunch) P(hase): Have its first launch latest by one week before the 10th STePS (that is by 12-7 = 5 April 2017), with earlier launch (whenever your web application is ready), marketing strategy (the more aggressive/creative the better), and in reacting to feedback/bug reports from initial users, including us (the more reactive the better), finalized at random time before Steven has to submit the final letter grade (Monday, 1 May 2017).
  2. 3%: R(easonably) S(ecure)... does not break down under typical attacks (around the Launch Phase); categorical score from 3/no loophole found, 2/at most one loophole found, 1/more than one loopholes found...), finalized at random time before semester ends.

Ongoing:

  1. 7%: Has good T(eam) D(ynamics), with each member contributing as equally as possible, checked via group's GitHub repository and various interviews during Week09-13 by Lab TA. All members of the capstone project group starts with equal 4 points with better performing members get up to 7% and members who piggy-backed the group get as low as 1%, finalized by last Lab: Monday, 10 April, but this individual component will be kept secret until Monday, 1 May 2017.

List of Projects

The list of capstone projects and the scores:

Title+URL Sum
DietLah.sg 0
NUSChat.com 0
NUSFood.com 0
IdeaOverflow.io 0
NUSarcast.com 0
SkillXchg.com 0
SportyKaki.com 0
Retellgram.com 0