Course Overview and Introduction Client/Server Overview

SYST 10199

Web Development 2

SYST 10199

Web Development 2

Course Overview and Introduction

Client/Server Overview

SYST10199SYST10199

04/21/23 Wendi Jollymore, FAST/SAC 2

04/21/23 Wendi Jollymore, FAST/SAC 3

Professor InformationProfessor Information

Wendi [email protected]. 8797Office: S401

(top of stairs near Second Cup)

Social NetworkingFacebook :P

04/21/23 Wendi Jollymore, FAST/SAC 4

Office HoursOffice Hours

Office: S401Hours:

Tuesday11am to 12pm

WednesdayBy Appointment

Thursday9am to 12pm

Friday1pm to 2pm

04/21/23 Wendi Jollymore, FAST/SAC 5

Course OverviewCourse Overview

Topics:Introduction and ReviewJavascript - interactivity, form validation, DOMCanvas, basic drawingForms and getting user input via the webXML Data - structure, syntax, file i/oPHP programming - variables, arrays, control structures, data validation, etcDatabase driven web sites using MySQL with PHP.Introduction to AJAX

04/21/23 Wendi Jollymore, FAST/SAC 6

Course OverviewCourse Overview

Textbook:Online StuffBooks24x7

SoftwareAptana (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

04/21/23 Wendi Jollymore, FAST/SAC 7

Course EvaluationCourse Evaluation

Evaluation:Mid Term Exam: 30%

Week 7Assignments: 40%

4 to 6 assignments, 5% to 10% eachIn-class Exercises/Quizzes: 10%

3 to 4, equally weightedFinal Project: 20%

Uses everything you’ve learned in both coursesFocus on PHP/MySQL/AJAX

04/21/23 Wendi Jollymore, FAST/SAC 8

Classroom PoliciesClassroom Policies

BehaviorRespect each other!Don’t talk over othersDon’t disrupt the class!

Classroom ActivitiesDevices silentNo earphones/earpieces/etc; If you goof off, do it quietly;If you’re late, enter quietly

04/21/23 Wendi Jollymore, FAST/SAC 9

Classroom PoliciesClassroom Policies

AcademicYou’re responsible for missed materialSee Assignment/Exam PolicySee Academic Honesty PolicyProfiles: If you have one, you must self-identify in personIf having difficulty/issues, tell me! Don’t wait!

Web Dev 1 ReviewWeb Dev 1 Review

What did you cover??HTML5 – tables, section etc,

!DOCTYPE htmlChar encoding utf-8 (meta)

CSS, CSS3**Media query

Design principlesLayout, navigation

Server space ????

04/21/23 Wendi Jollymore, FAST/SAC 10

Web Dev 1 Review ExerciseWeb Dev 1 Review Exercise

Display two section boxes on the screenOne in the top left contains your name and has rounded corners

Text is centred; 1.5 emsOne in the bottom right contains the course code and has regular corners

Text is right-justified; 2 emsBoth boxes are 25% of screen width and heightBoth boxes have a solid borderChoose any pair of colours you want

04/21/23 Wendi Jollymore, FAST/SAC 11

Web Dev 1 Review ExerciseWeb Dev 1 Review Exercise

04/21/23 Wendi Jollymore, FAST/SAC 12

04/21/23 Wendi Jollymore, FAST/SAC 13

Client / Server OverviewClient / 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 OverviewClient / 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

JavaScriptClient-side scripting languageProvides interactivity

04/21/23 Wendi Jollymore, FAST/SAC 14

Client / Server OverviewClient / Server Overview

How it pertains to web applications:Server:

PHPServer side scripting languageFile IO or Database accessProcesses data that can be sent to client

Database (e.g. MySQL)Data storage that can be accessed by server side scripts

04/21/23 Wendi Jollymore, FAST/SAC 15

Client / Server OverviewClient / Server Overview

04/21/23 Wendi Jollymore, FAST/SAC 16

Request / ResponseRequest / Response

Browser/client sends requestsE.g. send me http://icanhascheezburger.com/

Server processes request and sends a response

04/21/23 Wendi Jollymore, FAST/SAC 17

Shamelessly stolen from http://demosthenes.info/blog/137/The-Client-Server-Model

Request / Response ExampleRequest / Response Example

User types slate.sheridancollege.caRequest sent to Sheridan server for web page

Sheridan server reads requestSees that you’re not authenticatedSends response

A page with a message and a login form

..to be continued…

04/21/23 Wendi Jollymore, FAST/SAC 18

Request / Response ExampleRequest / Response Example

User enters login information and presses “Log In” button

Request sent to Sheridan serverRequest includes encrypted username and password input

Let’s assume for now that you enter correct info….

04/21/23 Wendi Jollymore, FAST/SAC 19

Request / Response ExampleRequest / Response Example

Sheridan server receives requestAccesses database and authorizes userLooks up courses for this userCreates the front page with your courses, tools, preferences, etcSends this result back to client

Includes all assets (images, applications, etc)

Client browser receives responseParses data and loads page

04/21/23 Wendi Jollymore, FAST/SAC 20

Let’s Get Started!Let’s Get Started!

Web Dev 1 focused on client side technologiesWe’ll do a couple more:

JavaScript (now!)AJAX (later…)

Asynchronous JavaScript and XMLDoes server side tasks on the client

We’ll talk about server side stuff later in the course

04/21/23 Wendi Jollymore, FAST/SAC 21

JavaScriptJavaScript

A client-side scripting langageNOT Java!!Looks similar in some ways, but completely unrelatedHas control structuresSupports OOPLoosely typed

Var types determined by values

Browsers include a JavaScript interpreter

04/21/23 Wendi Jollymore, FAST/SAC 22

JavaScriptJavaScript

ExerciseYou’ll find JavaScript fairly easyTry the (ungraded) quiz in SLATE2!

04/21/23 Wendi Jollymore, FAST/SAC 23