EPL425 > Labs

Lab Schedule »

Week Description Exercise Solution
01
24/01		 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
31/01		 Introduction to HTML and CSS 1.
  • HTML elements, tags and attributes
  • CSS properties
 		LAB02 exercises,
(LAB02 Extended)
surfer.txt,
puerto-escondido-surfer.jpg		 SOL
03
07/02		 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		 HTML 1,
CSS 1,
HTML 2,
CSS 2
04
14/02		 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		 HTML 1, CSS 1, HTML 2, CSS 2
05
21/02		 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		 HTML, CSS (using position), CSS (using float)
06
28/02		 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

LAB06,
lab6-images.zip		 HTML, CSS
07
07/03		 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)		 SOL
08
14/03		 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		 HTML, JS
09
21/03		 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		 ZIP
10
22/03		 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
04/04		 RESTful API Server.
 LAB11,
RestAPISecureServer.zip
12
11/04		 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
02/05		 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