Lab Prerequisites

The laboratory sessions of this course will use Visual Studio Code (VS Code) as the integrated development environment (IDE), XAMPP (Apache, MySQL, PHP) for setting up the backend system for websites, and Git/GitHub for version control and assignment management. Students are expected to get familiar with these tools throughout the semester.

STEP 1: Install VSCode + Git: Before attending the first lab, please follow the provided development tools guide (especially sections 1 and 5) (GR version) and Lab 1 to install VS Code, XAMPP, and Git on your computer.

STEP 2: Set up your GitHub account and access Assignment in Classroom50: Please read the following guide Access Assignments Using GitHub, (GR version) which includes step-by-step instructions and screenshots for:

• creating a GitHub account
• joining Classroom50 for assignment management
• accepting Assignment (when posted)
• cloning Assignment repository in VS Code

GitHub will be used to track your development progress, securely store your code online, work on different features while maintaining previous versions, collaborate and share your work with others, and allow instructors to monitor your progress and contributions to team assignments.

Also read this guide on Git best practices (GR version) for software development and version control that will be used during the course.

Lab Schedule »

Week	Description	Exercise	Solution
01 11/09	Web Development Environment. Learn about the Web Applications: Websites, RESTful APIs Learn about entities in Web Application Development: Browser, Web Server, Application Server, Database Server Learn about different Web Servers / Application Servers: Apache HTTP Server, NGINX Web Server, Node.js, Apache Tomcat Learn about different Databases: MySQL, MariaDB, Postgresql, MongoDB Install XAMPP stack Install Node.js	LAB01
02 18/09	Introduction to HTML and CSS 1. HTML elements, tags and attributes CSS properties	LAB02 exercises, (LAB02 Extended) surfer.txt, puerto-escondido-surfer.jpg
03 25/09	Introduction to HTML and CSS 2. Block, inline, inline-block CSS class selector CCS id selector CSS Pseudo-classes	LAB03 exercises, (LAB03 Extended) lab3-exercise1.html, lab3-exercise2.html
04 02/10	Introduction to HTML and CSS 3. CSS Box Model CSS Positioning: static, fixed, absolute, relative Case study: Squarespace layout Random useful CSS: background properties, web fonts, web icons, overflow/shadow properties	LAB04 exercises, (LAB04 Extended) lab4-exercise1.html, lab4-exercise2.html, ucy-logo.png, ucy-cafe.jpg
05 09/10	Introduction to HTML and CSS 4. Responsive Webpage Development Using meta viewport tag CSS media queries Relative font sizes	LAB05, lab5-exercise1.html, ucy-cafe.jpg
06 16/10	Bootstrap front-end web development framework. Layout using container and container-fluid classes Grid system: row, col-*-* classes Typography Images Tables Figures Alerts Badges Buttons, button groups Cards, card groups Carousel Dropdown Forms: label, input, select, textarea Modal Nav, navbar Assignment 1 Announced (due: 4 weeks)	LAB06, lab6-images.zip
07 23/10	Introduction to JavaScript 1. Conditional statements (if, else) for, while loops Function definition Variable declaration: var, let, cons Arrays Objects and JavaScript Object Notation (JSON)	LAB07 exercises, (LAB07 Extended)
08 30/10	Introduction to JavaScript 2. Event-driven programming Document Object Model (DOM) Adding/removing event listeners DOM Object Properties: add/remove elements/classes Form manipulation AJAX (Asynchronous JavaScript and XML) for client-server communication Fetch API and XMLHttpRequest for asynchronous communication	LAB08 exercises, (LAB08 Extended) lab8-exercise1.html
09 06/11	Introduction to PHP 1. GET msg via HTML form submission and receive data using PHP GET msg via JavaScript (submit form or XMLHttpRequest) and receive data using PHP POST msg via HTML form submission and receive data/upload file using PHP POST msg via JavaScript (submit form or XMLHttpRequest) and receive data using PHP Connect to MySQL server Select database Run queries on tables and get results Iterate over results Close connection	LAB09, (LAB09 extended), ZIP, exercise1.html, exercise1.js
10 13/11	RESTful API Client. Resources and URIs HTTP Request Methods: GET, POST, DELETE, PUT, HEAD, OPTIONS HTTP Request Headers HTTP Status/Response Codes HTTP Response Headers RESTful APIs Use Postman RESTful API Client Application to send HTTP requests Use Spring Boot framework to develop RESTful API Client and in Java Use Jersey framework to develop RESTful API Client in Java	LAB10, RestClientBootApplication.java, Nationalize.java, Country.java
11 20/11	RESTful API Server. Use Spring Boot framework to develop RESTful API Server in Java Assignment 2 Announced (due: 2 weeks)	LAB11, RestAPIServer.zip, library.sql
12 27/11	Introduction to Node.js and Express.js. Node.js is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts. Express.js is a fast, unopinionated, minimalist web framework for Node.js	LAB12, library.sql
13 04/12	From Web Applications to Mobile Applications. Learn about Native and Hybrid mobile applications. Learn how to convert a web application to a mobile application. Introduction to Apache Cordova and Ionic Framework.	LAB13, myapp.zip