CS3226 - Web Programming and Applications (Not Mounted in Sem 2 AY 2017/18)
Prof Halim is no longer teaching CS3226.
This page below is very outdated.
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.
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.
CS3226 has no final assessment, i.e. it will have heavy 100% CA.
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)
Jan-Apr 2015 (n=24/57)
Module feedback
3.800 =
3.800 ▼
3.958
Module difficulty
3.700
3.850
4.083
Steven's teaching
4.100 ▲
3.986 ▼
4.165
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
Warning! Lesson Plan details are hidden on small viewport. Please view this page on large screen ≥ 992 pixels to avoid missing important deadlines.
HTTP/S
There will be a short recap about these concepts and terminologies: client-server, TCP/IP/HTTP/HTTPS protocol, port 80, DNS, RFC...
Students who have completed CS2105 (or other Computer Networks module, e.g. CS3103) have some advantages but those advantages are not essential to do well in CS3226.
JS
There will be a quick rerun of CS1010 - Programming Methodology style course but this time with JavaScript (using in-browser demos :O) to ensure that everyone know the basic of (Vanilla) JavaScript.
Students who have taken CS1101S - Programming Methodology that uses JavaScript (ECMAScript-262) clearly have the required background. Those students shall treat the early part of this lecture as revision to check if you miss any details back then.
From then on, we will learn more JavaScript stuffs like using jQuery to access DOM/event handling, manipulating HTML5 Canvas with JavaScript, using the AJAX technique, etc that are not covered in CS1101S. However, those who have taken CS3241 - Computer Graphics may find similarity between the JavaScript code for drawing on HTML5 Canvas and the OpenGL languaged covered in CS3241.
Design
In the past, some of CS3240 - Interaction Design projects are about creating (working) website design prototypes. Bootstrap is also discussed in CS3240. Therefore, those who have taken CS3240 or currently taking CS3240 should be able to apply better design principles for their CS3226 web applications.
Additionallly, CS3249 - User Interface Development also discusses UI for web applications. Therefore, those who have taken CS3249 or currently taking CS3249 should also be able to apply better design principles for their CS3226 web applications.
MySQL + PHP
Students who have taken CS2102 - Database Systems before taking CS3226 will have advantage in understanding some of the topics of this lecture. On the other hand, students who are planning to take CS2102 after CS3226 will then have major advantage in future semester.
This is because CS2102 has a course project that asks students to build simple web application that access MySQL database with PHP, just that I don't think it uses Laravel framework.
Past Web-Application Projects
This part may look similar to a CS3216 - Software Development on Evolving Platforms (Semester 1) course project as the end product of both modules is a web application and both require students to present their work at STePS.
In fact, ex CS3216 student is strongly encouraged NOT to take CS3226 anymore as the level of overlap is too high. You will need to justify your strong reason to the lecturer if you insist to take CS3226 despite having finished CS3216.
Note: CS3217 may also have some degree of overlap with CS3226.
Another note: Some students who took Orbital programme before have created some web application before — but purely on your own. This time, you will be more supervised and there will be stronger competition. Additionally, there are cases of students having done previous internships that deal with web application before but such background can never be captured formally. Bottom line: If you already have (rather strong) web-application project before, you will likely learn less in CS3226.
Security
Those who have taken CS2107/CS3235 may know much more about this topic than what we will cover in this CS3226 module.
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
Lab
Lecture
Past classes are highlighted with khaki color, current week is highlighted with light green color, future classes are not highlighted
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
Info: Roster details are hidden on small viewport and currently sorted based on his/her capstone project group, then based on his/her name. Please view this page on large screen ≥ 992 pixels.
This module is not mounted in Sem 2 AY 2017/18.
Labs Showcase
Info: Lab Showcase details are hidden on small viewport. Please view this page on large screen ≥ 992 pixels.
This module is not mounted in Sem 2 AY 2017/18.
Capstone Projects
Warning! Capstone Project details are hidden on small viewport. Please view this page on large screen ≥ 992 pixels.
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):
Another social media app (near impossible to fight with Facebook etc),
Another (discussion) forum related app (there are so many available out there like Stack Overflow, Quora, etc),
Another (NUS) calendar/timetabling/meeting planner app (there are NUSMods, doodle, etc),
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):