CS3226 - Web Programming and Applications


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 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=??/50) 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.


Date News

Lesson Plan

Week Tuesday Lecture

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

05, 06+07 Feb
Lecture07 - PHP
(Laravel Form, Input Validation)
06, 13+14 Feb Lecture08 - SQL
(MySQL, Laravel Eloquent ORM)
Recess Week No class
07, 27+28 Feb Capstone Project Briefing

Lecture09 - Security
(Laravel Auth+A2)
08, 06+07 Mar Lecture10 - Performance & Scalability
08, 10 Mar
99% the birth day of Jemimah C? Halim (planned C-section)
Steven plans to take parental leave 10-14 Mar (5d 4n)
09, 13*+14 Mar ONLINE? Course Review with past papers:
Steven MAY not be physically present this day
If that is so, he will conduct online review of these past papers
1314SEM2-CP3101B (final)
1415SEM2-CP3101B (midterm)
1415SEM2-CP3101B (final)
1516SEM2-CS3226 (test)
10, 20+21 Mar Lecture11 - Web Server
(Digital Ocean)
Lecture12 - Miscellaneous Techniques
11, 27+28 Mar 30% Theoretical Test
(using Lecture Time)
12, 03+04 Apr Lecture13 - The Last Lecture
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.


Capstone Projects


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

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-08Brainstorming of capstone project ideas (medium sized), Lab5-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.
09-13Capstone project work, ends by Wednesday, 12 April 2017, during the 10th STePS; everyone are expected to avoid Vanilla programming, but rather use a framework (e.g. Laravel for this semester)

List of Projects

The list of capstone projects will be added when it is available.