1. Course Overview and Introduction Client/Server Overview

2. SYST10199 Wendi Jollymore, FAST/SAC

3. Professor Information • Wendi Jollymore • wendi.jollymore@sheridanc.on.ca • Ext. 8797 • Office: S401 • (top of stairs near Second Cup) • Social Networking • Facebook :P Wendi Jollymore, FAST/SAC

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

5. 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 Wendi Jollymore, FAST/SAC

6. 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 Wendi Jollymore, FAST/SAC

7. 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 Wendi Jollymore, FAST/SAC

8. 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 Wendi Jollymore, FAST/SAC

9. 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! Wendi Jollymore, FAST/SAC

10. 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 ???? Wendi Jollymore, FAST/SAC

11. 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 Wendi Jollymore, FAST/SAC

12. Web Dev 1 Review Exercise Wendi Jollymore, FAST/SAC

13. 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 Wendi Jollymore, FAST/SAC

14. 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 Wendi Jollymore, FAST/SAC

15. 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 Wendi Jollymore, FAST/SAC

16. Client / Server Overview Wendi Jollymore, FAST/SAC

17. 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-Client-Server-Model Wendi Jollymore, FAST/SAC

18. 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… Wendi Jollymore, FAST/SAC

19. 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…. Wendi Jollymore, FAST/SAC

20. 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 Wendi Jollymore, FAST/SAC

21. 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 Wendi Jollymore, FAST/SAC

22. 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 Wendi Jollymore, FAST/SAC

23. JavaScript • Exercise • You’ll find JavaScript fairly easy • Try the (ungraded) quiz in SLATE2! Wendi Jollymore, FAST/SAC