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

2. Course orientation

3. 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

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

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

6. Assignment Submissions

7. For queries

8. Course Objective
Basic web programming concepts across the stack

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

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

11. Course outline & Schedule

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

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

14. 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

15. introduction

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

17. 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

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

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

20. Request/Response Procedure

21. For Dynamic Pages
Takes place for each object

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

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

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

25. Popular Technologies
PHP
MySQL
JavaScript
CSS
HTML
Ajax

26. Using PHP
Give .php extension

29. Flexibility

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

31. 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

32. 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

33. MySQL
Free
Available on most servers
Robust and fast

34. MySQL Database Tables Users Surname Firstname Email
Structured Query Language

35. 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

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

37. 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

38. JavaScript

39. 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)

40. Ajax

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

42. CSS

43. 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

44. 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

45. 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)

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

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

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

49. Questions?

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