Transcription
Introduction to WebApplicationDevelopment, forCS437/637Plan for course (more details on syllabus)1.2.3.4.Introduction (today)HTML (HTML5) and CSS using Duckett, HTML&CSSPHP: using Murach &Harris (2ed or 3ed), PHP and MySQLJavascript: using Purewal, Learning Web App Development(O’Reilly)5. REST web services, using web resourcesHW1: get started as soon as possible!Password for slides Call roll INSTRUCTOR: BET TY O’NEILCLASS MEETS MW 4:00 -5:15 ONLINE WITH ZOOM1Introduction: Internet vs.World Wide Web2INSTRUCTOR: BETTY O'NEILHow the Internet evolvedInternet is an interconnected network ofthousands of networks and millions of computers(sometimes called host computers or just hosts).The Internet, then known as the ARPANET(Advanced Research Projects Agency Network),began in 1969, soon file transfers, emails wereflowing.The World Wide Web, or Web for short, is one ofthe Internet’s most popular services, providingaccess to over one billion Web pages.The Web runs over the Internet, using its ability totransfer data reliably (using TCP).The current TCP/IP protocols date from 1983. TheInternet was already international then, butrestricted to non-commercial use.In 1990, it was opened to commercial use .INSTRUCTOR: BETTY O'NEIL34INSTRUCTOR: BETTY O'NEILThe architecture of the InternetAHierarchy of Networks Every computer that is connected to the Internet is partLANof a network.LANLANLANWANIXPIXPWANIXPWANLAN When you connect to your ISP, you become part of theirnetwork. The ISP may then connect to a larger networkand become part of their network. The Internet issimply a network of networks.INSTRUCTOR: BETTY O'NEILLANWAN You may use a cable or DSL modem to an InternetService Provider (ISP). At work, you may be part of alocal area network (LAN) using an ISP that yourcompany has contracted with.LAN5Murach's PHP and MySQL, C1LANLANLANLAN 2014, MIKE MURACH & ASSOCIATES, INC.LANSlide 61
Internet Domain NamingSystemLuckily, the Internet can be viewed likethis for our purposes Provides unique ids for all the hosts directly connected to the Internet Example hostname www.cs.umb.edu, a unique hostname across theInternet.ClientWeb ServerDatabase Server Domain naming system (in use since 1983):TheInternetClientMurach's PHP and MySQL, C1 The Internet’s Domain Naming Service (DNS) servers translate ahuman-readable domain name into the machine-readable IP address.Email Server 2014, MIKE MURACH & ASSOCIATES, INC.Top-level domain name: eduUMB’s domain name: umb.eduDepartmental subdomain: cs.umb.eduFull hostname www.cs.umb.edu, specifying the departmental web serverhost The IP address of www.cs.umb.edu is 158.121.106.222, also unique acrossthe InternetINSTRUCTOR: BETTY O'NEILSlide 7The World Wide WebWebAccessibility Web accessibility means that people with The Web runs over the Internet, using itsability to transfer data reliably (using TCP) andspecify hosts with domain names and IPaddresses.disabilities can use the Web. More specifically, Web accessibility means thatpeople with disabilities can perceive,understand, navigate, and interact with theWeb, and that they can contribute to the Web. The crucial web protocol is HTTP (HypertextTransfer Protocol) The Web dates from the early 90s. HTML, especially HTML5, plays an importantrole by providing a standard way of describingwhat’s on the screen. Since the Internet was already aninternational presence, so was the Web. Our web apps will send HTML5 to our users,and so provide base-level accessibility.9INSTRUCTOR: BETTY O'NEILUniform Resource Locator(URL)INSTRUCTOR: BETTY O'NEIL10What is a web application?App vs. web app:URLs specify locations on the Internet, along with the protocolneeded for accessing something there.We say URLs specify “resources”.A simple URL has the following format:An app (desktop or mobile) is a program that runs directly on theOS of the device. Thus has sub-species: Android app, ioS app, Linux app, Windows app, MacOSapp, etc., and each works only on its own OS. An organization that wants all its users to use “its app” needs to implement allthese versions. protocol :// hostname or IP address / path Example: https://https://www.cs.umb.edu/cs637(our classhomepage)A web app runs inside a web browser. The web browser itself is anapp on the desktop or mobile device.Here hostname www.cs.umb.eduUsing IP address: https://158.121.106.224/cs637(however, this no longer works because of heightened securityfor our web server)INSTRUCTOR: BETTY O'NEIL811 Thus we would expect sub-species Chrome app, Safari app, Firefox app But browsers are much more standardized than OSs, so we just say “web app”and expect it to run on any of these modern browsers. An organization that wants all its users to use “its webapp” should only need toimplement one version (possibly with some conditional code if using nonstandardized features).INSTRUCTOR: BETTY O'NEIL122
A web application has awebsiteHow static web pages are processedHTTP requestA web app pulls its pages, etc., from a website on aserver connected to the Internet (or possibly a smallernetwork).HTMLfileHTTP responseWeb BrowserA web app can accept user input and send it back to itsserver for processing (the PHP way), or process it right inthe browser (the Javascript way). A static web page is a simple HTML file, no PHP orJavascript involved. HTTP is the network protocol that delivers HTMLand many other data formats to the client webbrowser, including Javascript code. Note the web browser is very likely to be in amobile device today, so this picture is a little dated.A web app depends on its server for saving datapersistently.A web app UI is much like an app UI: buttons, forms, textinput, etc., but may be slowed down by the network.INSTRUCTOR: BETTY O'NEILWeb Server13One page can involve many HTTPrequestsMurach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 14A simple HTTP requestGET / HTTP/1.1Host: www.example.comA simple HTTP responseHTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 136Server: Apache/2.2.3 html head title Example Web Page /title /head body p This is a sample web page /p /body /html From OverviewMurach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 16The response HTML* is carried by HTTP,itself carried by TCP, itself carried by IPA simple HTTP requestGET / HTTP/1.1Host: www.example.comA simple HTTP responseHTTP/1.1 200 OKContent-Type: text/htmlContent-Length: 136Server: Apache/2.2.3 html head title Example Web Page /title /head body p This is a sample web page /p /body /html If this HTML text was just read from a file onthe server, this is static HTML.If a program helped generate it, it is dynamicHTML.*HTML or CSS or Javascript code, also images, etc.From OverviewMurach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 17INSTRUCTOR: BETTY O’NEIL183
How dynamic web pages are processed with PHPJavascript Execution StepsGET HTTP request1. User browses to something.html2. Server sends HTML to the client, as we have just seenHTTP responseWeb BrowserHTML In that HTML: link to URL for Javascript codeWeb Server3. Browser finds link, does second HTTP request forJavascript (JS) code, again to a server.Database ServerPHPScript The PHP code is not seen by the client, only the servergenerated HTML. Any user click/taps cause another HTTP request to the serverfor processing.Murach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 19Clients: Desktops and Mobile Devices No server involvement unless persistent changes areneeded.Murach's PHP and MySQL, C1Slide 20 Using just PHP, we can’t detect any of these,or drag or double-click either, so we willconcentrate on click/tap, and text input Using Javascript, we can detect the others Slide 21Murach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 22Web browsersKey terms Chrome HyperText Markup Language (HTML) Firefox static web page Internet Explorer/Edge HTTP request Safari HTTP response. dynamic web page Opera PHP interpreterWeb servers database server Apache render IIS (Microsoft’s Internet Information Services) round tripMurach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Differences Not all desktop screens are touch screens Can’t “hover” with touch screens Can’t “pinch” or “spread” with non-touchscreens Other less common touch-screen gestures:long press, flick Based on these similarities, we want to beable to write webapps that run on both usingthe same codebase. 2014, MIKE MURACH & ASSOCIATES, INC.JS code is loaded into browser memoryClients: Desktops and Mobile DevicesSimilarities Both have rectangular hi-res color screens Both can accept keyboard input Both can accept click/tap selection of buttons,etc. Both can accept drag and drag-and-drop usergestures Both can accept double-click, but this isalmost never used in webapps, just in appsMurach's PHP and MySQL, C1 4. The JS code can detect load event, start executing toset things up for itself. Can build more HTML elements, for example.5. Later, when user clicks on something, it can behandled by JS immediately 2014, MIKE MURACH & ASSOCIATES, INC.Slide 23Murach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 244
Server-side languagesHighlights in the history of PHP PHPVersion2345 JSP ASP.NET Python RubyClient-side languages Javascript (can also run on server side)67Year1995199820002004DescriptionPersonal Home PagePHP: Hypertext ProcessorIntroduced the Zend EngineIntroduced the Zend Engine II.Improved support for OOPAdded the PHP Data Objectsextension-PHP6, meant to have nativeUnicode, abandoned12/3/2015 Zend Engine 3, types for scalararguments, 64-bit integer supporton Windows, Note: we’ll use version 7.0 on pe07 (or 7.2 on XAMPP)Murach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 25PHP AdvantagesMurach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 26PHP Uses Considered easy to use, focuses on web Free, open-source (implemented in C) Provides decent performance In particular, efficient with server memory use Available on many platforms other than mobile devices Small sites Prototypes for larger sitesPHP disadvantages Server-side code for Javascript/Ajax running inweb pages PHP strings are not in Unicode, so hard to provide non-Englishlanguage websites. (There are library calls for Unicode) “Too easy” so “lots of bad PHP exists”, including insecure sites. Missing large-software features, like Java’s package system. Not available for execution inside mobile platforms. Has no equivalent to JDBC, a widely supported generic databaseaccess API for Java. Most PHP webapps just use mysql. Server-side code for providing data forprograms running in mobile devices Note no significant use inside mobile devices.Murach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 27PHP vs. Javascript28Javascript and PHPJavascript (JS for short) has become very important for webapps, especially ones that need to work nicely onsmartphones.JS runs in the browser, so is closer to the user than PHP orJava, which run only on the server.JS can detect the advanced user gestures like pinch/spread.JS now can run on the server too (with nodejs), providing asingle language for both sides.JS is a completely different language from Java or PHP,themselves in the same family. It does use Java-like syntaxfor conditionals, loops, etc.INSTRUCTOR: BETTY O’NEILINSTRUCTOR: BETTY O'NEILWebsites often use a combination of JS and PHP (or JS andJava) along with HTML and CSS. The actions that need fast response to user requests, like gameplaying or device control, are in JS Ancillary support, like UI for changing a password, or findingdocumentation, are in PHP. Server support, like accessing a database, can be in PHP or JS.The user often doesn’t know what language is in use. Either language can do buttons, forms, links, etc. But if there’s a bug running around the screen, that’s JS. Or the restaurant menu folds up for you (this also uses advanced CSS). On the other hand, you don’t need JS for a photo carousel, so motionby itself doesn’t necessitate JS.29INSTRUCTOR: BETTY O'NEIL305
Highlights in the history of MySQLDatabase servers MySQL and its descendent MariaDB Oracle DB2 MS SQL Server MongoDB (a No-SQL .120085.520105.62011DescriptionThe original version of MySQLIntroduced support for unions.Introduced support for subqueriesand prepared statements.Introduced support for storedprocedures, triggers, views, andtransactions.Introduced support for row-basedreplication and server log tables.Default storage engine nowsupports referential integrity.Introduced support for big data. Apache HBase (also No-SQL, part of Hadoop project)We’ll use MySQL version 5.6 , or MariaDBMurach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 31Murach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.MySQL notesHello World in PHP MySQL is owned and sponsored by MySQL AB, a for-profitfirm. Source file hello.php: ?phpecho 'Hello World!';? In 2008, Sun Microsystems acquired MySQL AB. In 2009, Oracle Corporation acquired Sun Microsystems. Local execution: use php command Note no compilation step! It’s a scripting language. In 2009, many of the original developers of MySQL left MySQLAB and begin working on different forks of the open-source code.One of the most popular of these forks is MariaDB. php hello.phpHello World! In 2012, tech writers reported that Oracle was holding backMySQL Server test cases and no longer synchronizing theirchanges with the public source repository. Also, several Linuxdistributions, Wikipedia and Google, began to replace MySQLwith MariaDB. Normal execution: put hello.php in right place for webserver execution, say in c:\xampp\htdocs Browse to http://localhost/hello.php, see:XAMPP comes with MariaDB now, so we’ll be using that on ourdevelopment systems, and mysql itself on the Linux servers atcs.umb.edu.Murach's PHP and MySQL, C1 2014, MIKE MURACH & ASSOCIATES, INC.Slide 32Hello World!INSTRUCTOR: BETTY O'NEILSlide 33PHP derives lots of its syntax from C, so doesJava and JS (but not Python)34But PHP has differences too Good news! Associative Arrays C/Java: only integers can be used as array indexes PHP, JS and other scripting languages: We can use strings as “keys” in array lookup! This includes Python, which has Dictionaries C-syntax control structures, increment operators But PHP variable names are prefixed with Java-type comments or # line comments// calculate the future value future value investment;for ( i 1; i years; i ) { future value future value ( future value * interest rate * .01);}PHP Example, pg. 321 tax rates array(); // or []; tax rates[‘NC’] 7.75; tax rates[‘CA’] 8.25; // Akk! payment price*(1 tax rates[ state]); Could rewrite last assignment, as in Java, with : future value future value* interest rate*.01;INSTRUCTOR: BETTY O'NEIL35INSTRUCTOR: BETTY O'NEIL366
PHP is made for web appsPHP is loosely, dynamically typed x x x x It maintains global arrays for easy access to HTTPrequest parameters, HTTP headers, sessionvariables, and cookies.12; // an integer2.3; // now a doublenull; // now a null‘abc’; // now a stringDon’t worry if this doesn’t make sense yet! x remembers its type, determined from thevalue on the rhs of the assignment.It deallocates or saves away memory data aftereach request cycle is done, to minimize memoryfootprint. In other words, it assumes it is sharingthe system with many other requestors. Good programming practice: types should bekept as static as possible Netbeans complains on multiple assignmentsto a variable, even of the same type values.INSTRUCTOR: BETTY O'NEIL37INSTRUCTOR: BETTY O'NEIL38Next time: look at HTML viaDuckett’s book I’ll send out another Zoom link byUMB email.7
Introduction (today) 2. HTML (HTML5) and CSS using Duckett, HTML&CSS 3. PHP: using Murach &Harris (2ed or 3ed), PHP and MySQL 4. Javascript: using Purewal, Learning Web App Development (O’Reilly) 5. REST web
