Transcript CPGM21X1 - Sheridan College

SYST 10199
Web Development 2
Course Overview and Introduction
Client/Server Overview
SYST10199
7/21/2015
Wendi Jollymore, FAST/SAC
2
Professor Information
Wendi Jollymore
[email protected]
Ext. 8797
Office: S401
(top of stairs near Second Cup)
Social Networking
Facebook :P
7/21/2015
Wendi Jollymore, FAST/SAC
3
Office Hours
Office: S401
Hours:
Tuesday
11am to 12pm
Wednesday
By Appointment
Thursday
9am to 12pm
Friday
1pm to 2pm
7/21/2015
Wendi Jollymore, FAST/SAC
4
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
7/21/2015
Wendi Jollymore, FAST/SAC
5
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
7/21/2015
Wendi Jollymore, FAST/SAC
6
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
7/21/2015
Wendi Jollymore, FAST/SAC
7
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
7/21/2015
Wendi Jollymore, FAST/SAC
8
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!
7/21/2015
Wendi Jollymore, FAST/SAC
9
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 ????
7/21/2015
Wendi Jollymore, FAST/SAC
10
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
7/21/2015
Wendi Jollymore, FAST/SAC
11
Web Dev 1 Review Exercise
7/21/2015
Wendi Jollymore, FAST/SAC
12
Client / Server Overview
Devices
connected to the
Network/Internet
- Laptops or
PCs
- Mobile
devices
- Etc.
Computer
systems that
share their
resources
A browser is
client software
7/21/2015
Wendi Jollymore, FAST/SAC
13
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
7/21/2015
Wendi Jollymore, FAST/SAC
14
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
7/21/2015
Wendi Jollymore, FAST/SAC
15
Client / Server Overview
7/21/2015
Wendi Jollymore, FAST/SAC
16
Request / Response
Browser/client sends requests
E.g. send me
http://icanhascheezburger.com/
Server processes request and sends
a response
Shamelessly stolen from http://demosthenes.info/blog/137/The-ClientServer-Model
7/21/2015
Wendi Jollymore, FAST/SAC
17
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…
7/21/2015
Wendi Jollymore, FAST/SAC
18
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….
7/21/2015
Wendi Jollymore, FAST/SAC
19
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
7/21/2015
Wendi Jollymore, FAST/SAC
20
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
7/21/2015
Wendi Jollymore, FAST/SAC
21
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
7/21/2015
Wendi Jollymore, FAST/SAC
22
JavaScript
Exercise
You’ll find JavaScript fairly easy
Try the (ungraded) quiz in SLATE2!
7/21/2015
Wendi Jollymore, FAST/SAC
23