CS3226 - Web Programming and Applications (Not Mounted in Sem 2 AY 2017/18)

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

If you arrive at this page via its direct URL, notice that this module is currently NOT mounted in Sem 2 AY2017/18.
The information below was from Sem 2 AY2016/17.

  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 staff:

    (Senior) Lecturer: Dr Steven Halim, the key man behind VisuAlgo who created his first website back in year 2000 and actively learning the latest web development techniques to keep this module up-to-date.

    Rating (out of 5.00) Jan-Apr 2017 (n=15/44) Jan-Apr 2016 (n=20/57)
    Module feedback 3.800 = 3.800
    Module difficulty 3.700 3.850
    Steven's teaching 4.100 3.986

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

The following Lesson Plan below is for Sem 2 AY 2016/17 that has passed.
Other students can peruse some of the publicly available material (not all links are available).
Note that the lecture notes is already outdated (1 year old as per January 2018) and will continue getting outdated as Steven does not maintain it at the moment...

Week Lecture
Past classes are highlighted with khaki color, current week is highlighted with light green color, future classes are not highlighted
01 Lecture01 - Introduction
Lecture02 - HTTP/S
02 Lecture03 - HTML5
Lecture04 - CSS3
03 Lecture05 - JS (jQuery)
04 Lecture06 - Front-End
(Bootstrap & Laravel Blade Templates)

05 Lecture07 - PHP
(Laravel Form, Input Validation)

06 Lecture08 - Database
(SQL/MySQL-very brief, Laravel Eloquent ORM)

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


Capstone Project Briefing

08 Lecture10 - Performance & Scalability (1h)
Finalizing Capstone Project Ideas
09 No class
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 Lecture11 - Web Server
(Digital Ocean)

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

13 Capstone Project Evaluation Day
(using Lecture Time)


STePS
(on Wednesday night)

Reading Week No class, no final assessment

Class Roster

This module is not mounted in Sem 2 AY 2017/18.

Labs Showcase

This module is not mounted in Sem 2 AY 2017/18.

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 (still alive!!).
In AY 2015/16, it was NUS Hacks (unfortunately it has died).
In AY 2016/17, it was DietLah.sg (unfortunately it has died).

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.

List of Projects

The list of capstone projects of Sem 2 AY 2016/17 and their scores (all URLs are now broken though):

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