Web Systems Development (CSC-215) Lecture 1: Introduction & Orientation Monday 29th January 2018

Course orientation

Course Format 3 credit hour course 2 lectures per week Programming assignments and class activities throughout Reading assignments on current web related issues Project at end of semester

Contact Hours Mondays & Wednesdays 12:30pm – 2:00pm

https://sites.google.com/site/scitwebsystemsdevelopment/ All course material will be available on the course website. https://sites.google.com/site/scitwebsystemsdevelopment/

Assignment Submissions huda.scit.submissions@gmail.com

For queries Huda.sarfraz@bnu.edu.pk

Course Objective Basic web programming concepts across the stack

Learning Outcomes To have a clear understanding of web programming concepts Broad level overview of types of web technologies

Text Book Learning PHP, MySQL, JavaScript, CSS & HTML by Robin Nixon. Soft copy of required chapters available via website.

Course outline & Schedule

Division of Marks Class Tests (3) – 15% Assignments – 10% Midterm Tests (2) – 25% Project – 10% Final Exam – 40%

Project Groups of up to three Deliverables Implementation Report Presentation/Evaluation

Administrative Rules Marks will be deducted for late submissions No makeups for missed tests and midterms Any evidence of plagiarism will result in complete deduction of marks for that assignment Any evidence of cheating will result in complete deduction of marks for that test/exam

introduction

Scope Client side technologies Server side technologies Data storage and manipulation technologies

Introduction Web evolving since its conception in early 90s Hyper Text Transfer Protocol Hyper Text Markup Language … But pages were still static and boring How were rich and dynamic experiences enabled Shopping carts Search engines Social networks

HTTP Communication standard governing the requests and responses that take place between Browser on end user’s computer Web server

Server Accepts the request and replies in a meaningful way Serves up the requested page Can handle multiple simultaneous connections

Request/Response Procedure

For Dynamic Pages Takes place for each object

JavaScript The returned pages may include JavaScript which is interpreted in the browser Can then possibly initiate another request

PHP, MySQL, JavaScript, CSS, and HTML5 After the static Web, technologies introduced for browser enhancements (client side) JavaScript JScript Active X …

Server Side Using scripting languages on the Common Gateway Interface (CGI) Server side scripting – creating HTML files dynamically Perl …

Popular Technologies PHP MySQL JavaScript CSS HTML Ajax

Using PHP Give .php extension

Flexibility

Advantage Not fast like C++, but integrates seamlessly with HTML

PHP (Or any other server side language) Unlimited control over your web server Modify HTML at run time Process a credit card Add user details to a database Fetch information from a third party website

MySQL Dynamic changes are not much use without a storage facility Very early on data like user names and passwords was stored in flat text files Handling multiple accesses was problematic Can become too big to properly manage Merging, complex searching etc. becomes difficult So relational databases and structured querying became essential

MySQL Free Available on most servers Robust and fast

MySQL Database Tables Users Surname Firstname Email Structured Query Language

PHP & MySQL All of these queries can be sent via your PHP code Results can then be saved in arrays for processing Multiple lookups can be made, dependent on results from previous ones

JavaScript Created to enable scripting access to all the elements of an HTML document Enables dynamic user interaction Verifying email address formats Prompts for confirmation … (But security is not handled here at the client end)

JavaScript When used alongside CSS, powers pages that changes very rapidly (instead of changing after data has been sent from the server) Can be tricky to use because of compatibility issues caused by browser manufacturers especially in the past

JavaScript

JavaScript & Ajax Being used more for Ajax Exchanging data with a server to partially update a web page - without reloading the whole page (e.g., updating a single element only, like a profile picture)

Ajax

CSS New level of dynamic interactivity with CSS3 supported by JavaScript Animated transitions and transformations

CSS

HTML5 Until recently, there was no way to manipulate graphics in the web browser without resorting to technologies like Flash Similar situation for audio and video Problems in HTML evolution as well (HTML vs. XHTML) HTML5 addresses all of these issues

HTML5 Development began in 2004 First draft prepared by Mozilla Foundation & Opera Software Final draft submitted to W3C in 2014 Formally accepted as a standard in October 2014

HTML5 Additions Markup New APIs Applications <nav>, <footer> added <font> etc. deprecated New APIs <canvas>, <audio>, <video> Local storage, geolocation Applications MathML (Math Markup Language) SVG (Scalable Vector Graphics)

Apache Web Server In addition to pages, serves up Flash, RSS, MP3 etc. These are also generated by PHP at run time

Open source and most commonly used PHP, Apache, & Mysql

Php, mysql, javascript, css, & html Work together seamlessly Php, mysql, javascript, css, & html

Questions?

Lecture content adapted from Learning PHP, MySQL, JavaScript, CSS & HTML5, 3rd Edition, by Robin Nixon.