SYST Web Development 2 SYST Web Development 2 Course Overview and Introduction Client/Server Overview

SYST /4/2015Wendi Jollymore, FAST/SAC2

9/4/2015Wendi Jollymore, FAST/SAC3 Professor Information Wendi Jollymore Ext Office: S401 (top of stairs near Second Cup) Social Networking Facebook :P

9/4/2015Wendi Jollymore, FAST/SAC4 Office Hours Office: S401 Hours: Tuesday 11am to 12pm Wednesday By Appointment Thursday 9am to 12pm Friday 1pm to 2pm

9/4/2015Wendi Jollymore, FAST/SAC5 Course Overview Topics: Introduction and Review Javascript - interactivity, form validation, DOM Canvas, basic drawing Forms and getting user input via the web XML Data - structure, syntax, file i/o PHP programming - variables, arrays, control structures, data validation, etc Database driven web sites using MySQL with PHP. Introduction to AJAX

9/4/2015Wendi Jollymore, FAST/SAC6 Course Overview Textbook: Online Stuff Books24x7 Software Aptana (development tool) Browser with developers’ tools Chrome, Firefox (Firebug): Ctrl-Shift J XAMPP (needed for PHP/database) We’ll install this later in the course when we need it

9/4/2015Wendi Jollymore, FAST/SAC7 Course Evaluation Evaluation: Mid Term Exam: 30% Week 7 Assignments: 40% 4 to 6 assignments, 5% to 10% each In-class Exercises/Quizzes: 10% 3 to 4, equally weighted Final Project: 20% Uses everything you’ve learned in both courses Focus on PHP/MySQL/AJAX

9/4/2015Wendi Jollymore, FAST/SAC8 Classroom Policies Behavior Respect each other! Don’t talk over others Don’t disrupt the class! Classroom Activities Devices silent No earphones/earpieces/etc; If you goof off, do it quietly; If you’re late, enter quietly

9/4/2015Wendi Jollymore, FAST/SAC9 Classroom Policies Academic You’re responsible for missed material See Assignment/Exam Policy See Academic Honesty Policy Profiles: If you have one, you must self-identify in person If having difficulty/issues, tell me! Don’t wait!

Web Dev 1 Review What did you cover?? HTML5 – tables, section etc, !DOCTYPE html Char encoding utf-8 (meta) CSS, CSS3** Media query Design principles Layout, navigation Server space ???? 9/4/2015Wendi Jollymore, FAST/SAC10

Web Dev 1 Review Exercise Display two section boxes on the screen One in the top left contains your name and has rounded corners Text is centred; 1.5 ems One in the bottom right contains the course code and has regular corners Text is right-justified; 2 ems Both boxes are 25% of screen width and height Both boxes have a solid border Choose any pair of colours you want 9/4/2015Wendi Jollymore, FAST/SAC11

Web Dev 1 Review Exercise 9/4/2015Wendi Jollymore, FAST/SAC12

9/4/2015Wendi Jollymore, FAST/SAC13 Client / Server Overview Devices connected to the Network/Internet -Laptops or PCs -Mobile devices -Etc. A browser is client software Computer systems that share their resources

Client / Server Overview How it pertains to web applications: Client: HTML defines the structure/content of a document CSS defines the layout and style of a document JavaScript Client-side scripting language Provides interactivity 9/4/2015Wendi Jollymore, FAST/SAC14

Client / Server Overview How it pertains to web applications: Server: PHP Server side scripting language File IO or Database access Processes data that can be sent to client Database (e.g. MySQL) Data storage that can be accessed by server side scripts 9/4/2015Wendi Jollymore, FAST/SAC15

Client / Server Overview 9/4/2015Wendi Jollymore, FAST/SAC16

Request / Response Browser/client sends requests E.g. send me Server processes request and sends a response 9/4/2015Wendi Jollymore, FAST/SAC17 Shamelessly stolen from Server-Model

Request / Response Example User types slate.sheridancollege.ca Request sent to Sheridan server for web page Sheridan server reads request Sees that you’re not authenticated Sends response A page with a message and a login form..to be continued… 9/4/2015Wendi Jollymore, FAST/SAC18

Request / Response Example User enters login information and presses “Log In” button Request sent to Sheridan server Request includes encrypted username and password input Let’s assume for now that you enter correct info…. 9/4/2015Wendi Jollymore, FAST/SAC19

Request / Response Example Sheridan server receives request Accesses database and authorizes user Looks up courses for this user Creates the front page with your courses, tools, preferences, etc Sends this result back to client Includes all assets (images, applications, etc) Client browser receives response Parses data and loads page 9/4/2015Wendi Jollymore, FAST/SAC20

Let’s Get Started! Web Dev 1 focused on client side technologies We’ll do a couple more: JavaScript (now!) AJAX (later…) Asynchronous JavaScript and XML Does server side tasks on the client We’ll talk about server side stuff later in the course 9/4/2015Wendi Jollymore, FAST/SAC21

JavaScript A client-side scripting langage NOT Java!! Looks similar in some ways, but completely unrelated Has control structures Supports OOP Loosely typed Var types determined by values Browsers include a JavaScript interpreter 9/4/2015Wendi Jollymore, FAST/SAC22

JavaScript Exercise You’ll find JavaScript fairly easy Try the (ungraded) quiz in SLATE2! 9/4/2015Wendi Jollymore, FAST/SAC23