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
Top Related