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

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 Capstone Project Briefing

Lecture09 - Security
(Laravel Auth+A2)

08, 06+07 Mar Lecture10 - Performance & Scalability
08, 10 Mar
99% the birth day of Jemimah Charissa Halim (planned C-section)
Steven plans to take parental leave 9-14 Mar (6d 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
(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
-2
-3
61
-2
-3

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

This sub-section will be hidden once all project groups proposals have been approved.

  • 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, 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 2017 (Monday of Week 11).
  • 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). Propose a good idea of a medium-sized web application and ask the lecturer of the feasibility of such idea.

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-08Lab5-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... All proposals should be completed latest by Tuesday of Week 08 (07 March 2017) as Steven will be away on Week 09 and you all have to start your project anyway by Week 09...
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.