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.
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):
(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)||Jan-Apr 2015 (n=24/57)|
|Module feedback||Hopefully ▲||3.800 ▼||3.958|
|Module difficulty||Hopefully =||3.850||4.083|
|Steven's teaching||Hopefully ▲||3.986 ▼||4.165|
Teaching Assistants (TAs), all lab groups are on Monday at COM1-B111 starting from Week03 onwards, we will focus on Laravel this semester:
|1||10am-12pm||Dr Steven Halim|
|2||12-2pm||Qua Zi Xian|
|3||2-4pm||Tan Mun Aw|
10am-12pm, 12-2pm, 2-4pm
|01, 10 Jan||N/A yet||
Lecture01 - Introduction
Lecture02 - HTTP/S
|02, 17 Jan||N/A yet||
Lecture03 - HTML5
Lecture04 - CSS3
|03, 23+24 Jan||
Lecture05 - JS (jQuery)
Chinese New Year (CNY) on 28-29 Jan
(Monday, 30 Jan will also be a Public Holiday)
Online Lab2: First Version
(@ live web server)
Lecture06 - Front-End
(Bootstrap & Laravel Blade Templates)
05, 06+07 Feb
Lab3: Second Version
(Bootstrap & Laravel Blade Templates)
Lecture07 - PHP
(Laravel Form, Input Validation)
|06, 13+14 Feb||
Lab4: Back-End 1
(Laravel Form, Input Validation, Simple PHP)
Lecture08 - Database
(SQL/MySQL-very brief, Laravel Eloquent ORM)
No class, just do Back-End 2 lab
No class, but think of Capstone Project idea(s) too
|07, 27+28 Feb||
Lab5: Back-End 2
(Laravel Eloquent ORM,
Lecture09 - Security
Capstone Project Briefing
|08, 06+07 Mar||
Lab6: A1 and A2
Lecture10 - Performance & Scalability (1h)
Finalizing Capstone Project Ideas
|08, 10 Mar||
Steven takes parental leave 9-14 Mar (6d 5n)
Steven's Lab Group 1 is handled by Tan Mun Aw this day
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)
1516SEM2-CS3226 (theoretical test)
Alternatively, you can also use this 2 hours block for another possible capstone project meeting time
|10, 20+21 Mar||Project-Frontend||
Lecture11 - Web Server
Lecture12 - Miscellaneous Techniques
Long lecture with 2 topics in one session
|11, 27+28 Mar||
Additional: Test Preview (Monday)
30% Theoretical Test
(using Lecture Time)
|12, 03+04 Apr||Project-Tying loose ends||
Lecture13 - The Last Lecture
|13, 10+11 Apr||Project-Last Check (Monday)||
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||No class, no final assessment|
|Lab TA||Project||Student Name|
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.
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?...
This sub-section will be hidden once all project groups proposals have been approved.
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.
This sub-section will be updated over time.
|03||Early random pairing/tripling of project groups during Lab1 (Lab1 is still done individually)|
|04-06||Work 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-07||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; 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...|
|08||All 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).|
|09||Deeper Brainstorming/Prototyping week:
|10||Development work: Iteration 1, front-end and back-end have to be done in parallel, remember to manage manpower properly|
|11||Development work: Iteration 2; Details TBA.|
|12||Development work: Iteration 3; Details TBA, but some team members must already start thinking about A1 poster (for STePS) and PPT for Internal Presentation.|
|13||Evaluation week with the finale on Wednesday, 12 April 2017 (10th STePS)|
This all important sub-section is a STILL A DRAFT.
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.
The list of capstone projects and the (currently empty) scores will be added when it is available.
|Title+URL||Current Remarks (Updated on Week09-10)||Sum|
|DietLah.sg||Progress seems good, already have staging server, continue the work plan and I will check again next week||0|
|NUSChat||The chat must be substantial, not just the one using Pusher, consider exploring Telegram, please decide which one among various chat tools/libraries out there that your group wants to commit on. Consider the potential flooding of unrelated chat messages if you open the landing page to "any public comment from any NUS student"...||0|
||Initial work OK, but need to do proper scoping (NUS canteens, which canteens, which food, delivery pickup points: not everywhere in NUS but restricted to publicly accessible places, etc); Explore direct competitors: Deliveroo, FoodPanda, and also WhyQ (CBD version), need to explore payment method/system (how to use PayPal properly between buyer/deliverer), how to maintain quality of deliver if it is any random NUS student?||0|
|Project integration yesterday causes various Laravel errors so cannot test much. Please catch up...||0|
|NUSarcast||Ok, a different take of NUS webcast (single viewer, 'as is') into multiple viewers with synchronized (textual) comments, community feedback, some presentable progress. Need to convince other NUS students to use it (marketing) for crucial take-off.||0|
|Competitors/similar ideas: TimeRepublik, Fiverr, Freelancer, and last year's similar project for NUS context; Please move faster as after changing the main idea, your group's pace is now behind some other groups (at wireframe stage only)||0|
|Various similar apps exists, so need to define the scope well. Still at wireframe and some database seeding. Need to catch up with some other more established groups||0|
|Retellgram||Competitors/similar ideas: memegenerator, memes.com, also check various websites that provide viral contents like this. Will see if the strategy (gamification?) will lead to more legal (no copyright issue) content... Landing page and upload photo page are done. Progress looks fine.||0|