3.
Goals of PresentationIntroduce web development concepts to webbeginner (experienced RPG programmer)Introduce major technical concepts and howcomponents interactIntroduce language syntaxShow-and-tell demos and code examples(fun stuff)Prepare you for labs on HTML/CSS, PHPand JavaScriptCome away with an idea of how to start

4.
What We Will CoverOverview of web application architectureHTML BasicsPHP BasicsGetting input from the browserCreating a database listing applicationIntroduction to CSSIntroduction to JavaScript

8.
What About That “Done” Part?HTTP is a “stateless” protocol Request initiates connection Response terminates connectionUnlike terminal session, connection doesnot persistSo how do we create applications thatinvolve more than one screen? (i.e., morethan one request?)

9.
Sessions and CookiesApplications need to maintain state between requests Store information about the user and application variables Customer#, Order#, etc…Need to simulate sessions in the browserPHP has Session variables Session variables are stored on server Cookie containing session ID is stored on client Simply use session_start() function in PHP, and add values to $_SESSION array. They’re available on subsequent requests.

16.
More Features of PHPFree – open source (download at php.net)Highly portable – supports most databases mySQL is very commonly used with PHPMany free applications and frameworksavailableDynamically typed variables Eg: Variable can change from string to integerVery robust function setArrays are very important many features of PHP implemented as arrays over 60 array handling functions

28.
What is JavaScript?It isn’t Java! (but similar syntax, based on C).Runs on the client-side (usually) i.e. in browserScripting language for web browsersAll browsers have built-in JavaScript interpreter –you don’t buy it or install it.Interpreted at run-time (as page loads)JavaScript code is downloaded with the HTMLdocument, but only runs in the browser.

30.
What Can JavaScript Do?Manipulate the HTML document after it has been sent tothe browser in a myriad of ways Validate input data Handle events e.g.: mouse clicks or cursor movement into/out of fields Control Dynamic HTML make things move around, appear and disappear Read and alter document elements, including HTML tags and CSS attributes Open & close windows, and communicate between windows. Read and write cookies Key technology in Ajax and Web 2.0 applications Demo menu 18

31.
Where Is JavaScript Coded in the HTML Document?Can be inserted just about anywhere, but must be enclosedin <script> </script> tagTypically, functions are defined in <HEAD> section.Can also be included as external file Function libraries, Frameworks Linked to document in <HEAD> sectionCan also be included as action in certain HTML tags:<form action=“checkInputs();”><button onclick=“alert(‘You clicked me.’)”><a href=“javascript:openHelpWindow();”>

32.
Present/Future State of Web DevelopmentMobile is King HTML 5 CSS 3JavaScript frameworks Simplify JS development and DHTML jQuery – select document sections to manipulate using CSS selectorsAjax – Asynchronous JavaScript and XMLApplication control Shift from server side (PHP) to Client side (JavaScript)