Presentation is loading. Please wait.

Presentation is loading. Please wait.

Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012.

Similar presentations


Presentation on theme: "Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012."— Presentation transcript:

1 Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012

2 Week 10: Ajax using XML, JSON, MySQL Overcoming Ajax weaknesses Browser cache Introduction to XML; JSON 2

3 Disadvantages of Ajax: 3 Clearly the short-term leader Many problems: any page-based idea no longer applies page navigation different bookmarks don’t work ‘send me your URL’ search engines: dynamic content is ‘deep web’

4 Ajax: Made up of JavaScript and CSS over HTTP Has security issues like JavaScript, HTTP Graceful degradation, backwards compatibility Problem: no place to ‘step down’ to 4 XMLHttpRequest

5 Disadvantages of Ajax: Hijax: ‘simplified Ajax’ (Jeremy Keith) Hijax is an exercise in progressive enhancement Build site without Ajax, add progressive layers Link behaviors ‘Hijacked’ (kaçırmak) from HTML; progressively moved toward Ajax 5

6 Disadvantages of Ajax: 6 Hijax Ajax

7 Drags on performance: Number and type of files IE8 supports up to 6 connections per host HTTP resources are dealt with one-at-a-time Auto-loaded scripts interpreted before opening Javascript, ‘onload’ scripts interpreted before page opens Place essential scripts in head, load dynamically* 7

8 Drags on performance: Minimize HTTP requests (use one.js file) Code performance versus DOM manipulations Manage your cache; reuse items if it can Give all content cache life gZip static content Minimize ‘onload’ script; NO ERRORS 8

9 Drags on performance: 9 for(i=0; i

10 Making Ajax work better: Cache on the server side: generated JSON saved recordsets Cache on the client side: Results of Ajax calls Save data to JavaScript objects 10

11 11 Browser cache: Cache: brings resources closer temporarily CPU cache (register) L2 & L3 cache Resources (data) Resources (data)

12 12 Browser cache: Memory in HDD used by browser; “Internet Files” Keeps copies of files to speed re-use Stores images (banners, buttons, DATA, etc) Resources (data) Resources (data)

13 Browser cache: Browser caches: disk: primary cache memory: mail, SSL, ‘no-cache’ items image: for decompressed images (.gif,.png,.jpg) 13

14 Browser cache: Issues with the cache: may want to use more effectively may want to not use at all Web designers can manage the cache cut down on bandwidth; save time store partial processes; recordsets 14

15 Browser cache Problems with cache: many designers don’t consider it 55% of resources don’t specify max-age* may be turned off locally may be full (30%* of people in survey) mobile devices are a disaster non-cacheable elements (frames) 15 *stevesouders.com

16 Browser cache: Browser cache control based in: freshness: time check; uses current if fresh validation: cached response still good? invalidation: current page is over-written Commands used to check: 16 expires max-age last modified if-modified-since

17 3 main ways to control: meta tags (client side) with code (server side) web server configuration files 17 Browser cache:

18 Client side meta tags (normal web page) Meta: ‘thinking about’ or ‘describing itself’ 18 //old public | private | no-cache | no-store public: may be cached public private: may be cached private no-cache: do not cache no-store: may be cached, but not archived Browser cache:

19 Encoding links so each instance is unique Can use time (milliseconds) or random Works well in Ajax 19 url = “music.php?instrument=" +id + "&random=" +Math.random(); Browser cache:

20 jQuery/JavaScript 20 {Cache: false} Browser cache:

21 header(“Cache-Control: no-cache, must–revalidate”); header(“Expires: Sat, 18 Mar :59:59 GMT”); //past expire date Header(“Cache-Control: max-age= ); header(“Pragma: no-cache”); header(“Last-Modified: ”.some date); Server side defines cache settings before sent header() function creates HTTP requests 21 $_SERVER['HTTP_IF_MODIFIED_SINCE'] == time Browser cache:

22 web server configuration files: httpd.conf.htaccess HTTP header files 22 Browser cache:

23 Apache set ‘mod_expires’ and ‘mod_headers’ 23 ExpiresDefault " [plus] { }*" ExpiresByType type/encoding " [plus] { }*" ) : access, now, modification ‘plus’ keyword is optional : a number : years, months, weeks, days, hours, minutes, seconds ExpiresDefault “access plus 1 month” ExpiresByType image/gif “modification plus 5 hours 3 minutes” Browser cache:

24 24 Browser cache: Data in cache won’t update by F5 Can turn off cache, or cache everything (settings) abc F5 Reload Reloads page, not data

25 XML: eXtensible (genisletmek) Markup Language Meta (mecaz) language Purpose: store data in hierarchical format Can be rendered in browser (text); not intent 25 ¸

26 XML: Used to describe data and data relationships ‘Semantic information’ 26

27 XML: XHTML 2.0 was XML as page markup language Overall effect is same; not equal ideas 27 =++

28 XML: 28 Point: store data and context (baglam) of data Elements describe what they hold HTML: presentation of content HTML: element names defined XML: data relationships XML: name elements to make sense Steve //xml Steve //html ˘

29 XML: 29 Rules for XML: case sensitive tags/elements must be opened and closed proper nesting (FILO) attribute values must be in quotes root element (students)

30 XML: 30 Ali 20 MBBF Erkek Bahar 21 ITF Hanim “SML” (Students markup language) Table Fields Record Students NameAgeBolumGender Ali20MBBFErkek Bahar21ITFHanim XML: 2-dimensional (boyutlu) tables Maker of flatfile databases

31 XML: 31 living room dining room kitchen An XML markup language

32 XML: 32 Added ‘empty’ elements (item) Like instead of Hi in HTML attributes

33 XML: advantages/disadvantages Self-describing; use of custom tags adds clarity Human and machine readable Data and presentation are not mixed (HTML) Hierarchical (adds semantics) Model complex data relationships Cross-platform, language independent Parsed (ayrıstırmak) by many languages 33 ¸

34 XML: advantages/disadvantages Requires processing application (xslt) Redundant (gereksiz) syntax Lots of tags; heavy footprint; verbose (söz) Doesn’t support data types Issues with non-hierarchical data Translating out of XML a problem 34

35 Break

36 JSON: All data sources are like 2-dimensional arrays Table: records (rows) and fields columns 36 array = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]; [0,0][0,1][0,2][0,3] 1 [1,0][1,1][1,2][1,3] 2 [2,0][2,1][2,2][2,3] array[2][1];//9 array[1][3];//7

37 JSON: JavaScript Object Notation Data interchange (kavsak) format Passes objects as strings from server to client Basic form: uses name/value pairs 37 {“firstname”: “Canan”} firstname = “Canan”; ¸

38 JSON: Does have a logo Has a web site (json.org) Incorporated into ISO Douglas Crockford (2002) Part of ECMAScript, RFC

39 {“name”: “Ali”, “age”: 20, “bolum”: “MBBF” } JSON: Many string values identified in same “record” Information defining one person/entity Strings in quotes; numbers not 39

40 array = [[“Cem”, “Ali”, “Eda”],[18, 22, 24]]; { students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” } ] } JSON: Arrays used to represent many entities Curly brackets define entities Square brackets define entire source 40

41 students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” } ]; JSON: All three represent the same data; “records” Effectively a database table 41 students = [ {“name”: “Ali”, “age”: 20, “bolum”: “MBBF” }, {“name”: “Bahar”, “age”: 21, “bolum”: “ITF” } ]; Students NameAgeBolumGender Ali20MBBFErkek Bahar21ITFHanim students[1].age //21

42 JSON: An array of arrays or a database with 2 tables ‘Company’ is DB, tables ‘employees’, ‘managers’ var company = {“employees”: [ { "firstName":"John", "lastName":"Doe", "age":18}, { "firstName":"Anna", "lastName":"Smith", "age":20}, { "firstName":"Peter", "lastName":"Jones", "age":21} ], “managers”: [ { "firstName":“Alice", "lastName":“Williams", "age":19}, { "firstName":“Carla", "lastName":“Walker", "age":23}, { "firstName":“Joe", "lastName":“Evans", "age":22} ] } document.write(company.employees[2].firstName);//Peter document.write(company.managers[1].age);//23

43 JSON: Update table values also var company = {“employees”: [ { "firstName":"John", "lastName":"Doe", "age":18}, { "firstName":"Anna", "lastName":"Smith", "age":20}, { "firstName":"Peter", "lastName":"Jones", "age":21} ], “managers”: [ { "firstName":“Alice", "lastName":“Williams", "age":19}, { "firstName":“Carla", "lastName":“Walker", "age":23}, { "firstName":“Joe", "lastName":“Evans", "age":22} ] } company.employees[2].firstName= “Steve”;

44 JSON: JSON.parse converts strings into objects Native (dahil) in browsers since IE 8 44 JSONObj = JSON.parse(requestObject.responseText); document.getElementById(“a”).innerHTML = JSONObj[1].first; document.getElementById(“b”).innerHTML = JSONObj[1].last; [ {"first":"John", "last":"Doe", "age":18}, {"first":"Anna", "last":"Smith", "age":20}, {"first":"Peter", "last":"Jones“, "age":21} ]

45 JSON: JSON.parse: JSONObj = JSON.parse(requestObject.responseText); {“employees”: [ { "firstName":"John", "lastName":"Doe", "age":18}, { "firstName":"Anna", "lastName":"Smith", "age":20}, { "firstName":"Peter", "lastName":"Jones", "age":21} ], “managers”: [ { "firstName":“Alice", "lastName":“Williams", "age":19}, { "firstName":“Carla", "lastName":“Walker", "age":23}, { "firstName":“Joe", "lastName":“Evans", "age":22} ] } company.employees[2].firstName= “Steve”; 45

46 JSON:.json and.txt are both text file formats File holds an object/array (data source) Ajax calls object and extracts data 46 data.txt data.json

47 JSON: Concept: JSON data source on server Call server with address in array/database Update page without refreshing entire page 47 page.html array = [] json.txt data.json

48 JSON versus Ajax: 48 “students”= [ {“name”: “Ali”, “age”: “20”, “bolum”: “MBBF” }, {“name”: “Bahar”, “age”: “21”, “bolum”: “ITF” } ] Ali 20 MBBF Erkek Bahar 21 ITF Hanim

49 JSON versus XML: Both describe objects as strings Both suitable for use in web services Both enjoy broad support, libraries, etc. Tools to convert, or do so on your own 49 Steve “name”: “Steve”,

50 JSON advantages: JSON is JavaScript ‘XML with anorexia’; faster to parse* Easier to write, lightweight, less verbose True data format, not a meta language Language independent, cross platform Self-describing and human readable Hierarchical (values within values, detail on topics) 50

51 JSON disadvantages: JSON is JavaScript Requires use of ‘eval’ function* Reserved JavaScript keywords can’t be used as Element names XML is more familiar; more like HTML More precise tool (has its own DTD) Better support (libraries, etc) 51

52 JSON and UTF-8: JSON supports UTF-8; Notepad does not Must save UTF-8 files using UTF-8; not ANSI 52

53 JSON: x-dimensional array saved as ‘employees’ objname[i].fieldname 53 employees = [ { "firstName":"John", "lastName":"Doe", "age":18}, { "firstName":"Anna", "lastName":"Smith", "age":20}, { "firstName":"Peter", "lastName":"Jones", "age":21} ]; document.write(employees[1].age);//20

54 Making data sources: Arguably hardest part of labs/assignment Add data formats have same idea: ‘field name’ ‘data’ 54 Ali {“name”:“Ali”} Name Ali

55 Making data sources: Utilities do exist to transfer data Can manually convert using a language 55 Ali  {“name”:“Ali”} start = String.indexOf(“<”); end = String.indexOf(“>”); for(i=start+1; i”); end = String.lastIndexOf(“<”); for(i=start+1; i

56 Quiz: 1. What is the address of the value 24? [2, 1]

57 Quiz: 2. Place this array in the table: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

58 Quiz: 3. What XML tag is most like a record? 58 data data data

59 Quiz: 4. From, the address of ? 5. Child nodes of 6. What is the root node? 59 [0].childNodes[0]

60 Quiz: 7. Children of ? 8. Value of [0].childNodes[1].childNodes[0].nodeValue

61 Quiz: 9. JSON array of 3 names: 61 friends = [ {“name”:”Ali”, “name”:”Bahar”, “name”:”Canan”} ];

62 Quiz: 10. What is the value of company.employees[1].age? 62 var company = {“employees”: [ { "firstName":"John", "lastName":"Doe", "age":18}, { "firstName":"Anna", "lastName":"Smith", "age":20}, { "firstName":"Peter", "lastName":"Jones", "age":21} ], “managers”: [ { "firstName":“Alice", "lastName":“Williams", "age":19}, { "firstName":“Carla", "lastName":“Walker", "age":23}, { "firstName":“Joe", "lastName":“Evans", "age":22} ] } 20

63 Web Programming CS 450: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012

64 64 Installing Uniform Server Turn off Skype; turn on Windows Firewall Double click/extract “Coral_8_9_2.exe” To folder “C:\” (keep track of where it goes)

65 65 Installing Uniform Server After extraction, ‘Uniserver’ folder in ‘C’ drive

66 66 Installing Uniform Server Given two choices: Start as program (no registry – manual load) Start as service (added to registry – auto loads)

67 67 Installing Uniform Server Asked if UniServer is supposed to load Set up a MySQL password

68 68 Installing Uniform Server Click on ‘Start Both’

69 Starting Uniform Server Apache starts first You must unblock port (80) 69

70 Starting Uniform Server MySQL server starts next You must unblock port (3306) 70

71 Starting Uniform Server Lots to do here Access to: phpInfo phpMyAdmin UniServer page 71

72 72

73 73

74 74 Processes used by UniServer: Three running processes:

75 75 Installing Uniform Server Turn on UniServer: ‘Start Both’ Turn off: ‘Stop Both’

76 A “web page”: Labs: Register (validate, check user table) Folk music: DHTML XML JSON Assignment: Your hobby 76

77 Lab: harika harran’s Features: accept/reject new username using Ajax hash password (sha1) enable/disable the ‘Register’ button check area code/city code combination 77

78 Lab: harika harran’s Validate all entries (disable submit) Use.innerHTML to show status of errors image (green check or red X) text (error message) On successful completion, go to ‘thanks.html’ 78

79 Lab: harika harran’s 79

80 Lab: harika harran’s Make the database: registerdb 3 tables: register data (mix user and pass) area code city code 80

81 Lab: harika harran’s Make the database: registerdb Create table ‘users’ with 8 fields: usersId (int, 5, primary, auto-increment) username (unique varchar 12) password (varchar 32) lastname (varchar 50) firstname (varchar 50) telephone (varchar 11) (varchar 50) registerDate (timestamp, Attribute ON UPDATE) 81

82 Lab: harika harran’s Make the database: registerdb Create table ‘areacodes’ with 2 fields: codeId (int, 5, primary, auto-increment) areacode (varchar, 4, unique) 82

83 Lab: harika harran’s Make the database: registerdb Create table ‘officecodes’ with 3 fields: officeId (int, 5, primary, auto-increment) codeId (int, 5) officecode (int, 3, unique) 83

84 84 Lab: harika harran’s Insert data into your database INSERT INTO `users` VALUES(1, 'alib', 'denizyuz', 'Balikcioglu', 'Ali', ' ', ' :14:32'); INSERT INTO `users` VALUES(2, 'selmac', 'jogger', 'Canli', 'Selma', ' ', ' :32:12'); INSERT INTO `users` VALUES(3, 'Painterbey', 'pigments', 'VanGogh', 'Ernest', ' ', ' :42:05'); INSERT INTO `users` VALUES(4, 'Musichanim', 'cmajor', 'Kocakeskin', 'Erdinc', ' ', ' :51:47'); INSERT INTO `users` VALUES(5, 'futbol4ever', 'futbolpitch', 'Sehirbey', 'Pele', ' ', ' :06:19'); INSERT INTO `users` VALUES(6, 'fenerrules', 'roberto', 'Buyukbey', 'Bahar', ' ', ' :37:12'); INSERT INTO `users` VALUES(7, 'knitter', 'needleyarn', 'Ross', 'Benjamin', ' ', ' :14:37'); INSERT INTO `users` VALUES(8, 'ieustudent', 'balcova', 'Einstein', 'Robert', ' ', ' :12:12'); INSERT INTO `users` VALUES(9, 'kskrules', 'johann', 'Rooney', 'Mehmet', ' ', ' :06:41'); INSERT INTO `users` VALUES(10, 'sedasinger', 'mavigoz', 'Seviyorum', 'Ilkgenc', ' ', ' :42:15'); INSERT INTO `users` VALUES(11, 'asksong', 'forever', 'Yildizgoz', 'Gunus', ' ', ' :17:47'); INSERT INTO `users` VALUES(12, 'tenderheart', 'poemreader', 'Frost', 'Emily', ' ', ' :39:52);

85 85 Lab: harika harran’s Insert ‘registerdb.txt’ into your database INSERT INTO `areacodes` VALUES(1, 232); INSERT INTO `areacodes` VALUES(3, 287); INSERT INTO `areacodes` VALUES(2, 532); INSERT INTO `officecodes` VALUES(1, 1, 254); INSERT INTO `officecodes` VALUES(2, 1, 274); INSERT INTO `officecodes` VALUES(3, 1, 337); INSERT INTO `officecodes` VALUES(4, 2, 508); INSERT INTO `officecodes` VALUES(5, 2, 400); INSERT INTO `officecodes` VALUES(6, 2, 387); INSERT INTO `officecodes` VALUES(7, 3, 841); INSERT INTO `officecodes` VALUES(8, 3, 205); INSERT INTO `officecodes` VALUES(9, 3, 261);

86 Lab: harika harran’s 86 Open register folder, register.php: Form built, table started

87 Lab: harika harran’s 87 Make the form (tab at end of row to make new row) 25 pixels wide

88 Lab: harika harran’s 88 Use these names

89 Lab: harika harran’s 89 Add these ids and classes id=“usernamepix”id=“usererror” class="errortext" id=“passwordpix”id=“usererror” class="errortext" id=“verifypix”id=“usererror” class="errortext" id=“lastnamepix”id=“usererror” class="errortext" id=“firstnamepix”id=“usererror” class="errortext" id=“telephonepix”id=“usererror” class="errortext" id=“ pix”id=“usererror” class="errortext"

90 Lab: harika harran’s 90 Use ‘.innerHTML’ to announce errors: 3 rd column gets ‘red x’ 4 th column describes error When fixed, both error messages turn off

91 Lab: harika harran’s 91 What and how to validate: username: validated to table; entry rules telephone: area code/local must match all other fields: entry rules Turn ‘Submit’ on when all fields valid: check all fields are valid

92 Lab: harika harran’s 92 Username: 6 to 12 characters (letters/numbers) Password: 6 to 12 characters (letters/numbers) Password == Verify password

93 Lab: harika harran’s 93 Telephone: NAPN 11 digits 1: ==0 2: != 1 5: !=1 Area code in table Office code must match

94 Lab: harika harran’s

95 Lab: harika harran’s 95 prefix: 1 st, last chars cannot be “.” 6 to 15 chars cannot have 2 noktas in a 3-12 char total 1 st 3 chars cannot be nokta ends with:.net,.org,.com,.edu,.tr

96 Lab: harika harran’s 96 How about the submit button? for( ) { flag[i] = 0; }

97 Lab: harika harran’s 97 function validate(value, id) { has value? value is valid: flag = 1; no display if invalid flag = 0 errorentry(text, image, id) function errorentry() { display, focus, select; } function submit() { submit off loop ‘flag’ values if all ‘1’, submit on }

98 Lab: harika harran’s 98 General form: function validate(value) { if(value) { //error = value.match(regexp); validate all but Ajax validate Ajax valid flag failed length errorentry() failed content errorentry() }

99 Lab: harika harran’s 99 “error routine”: insert red “X” and error text (vary) reset focus, selection function errorentry(errortext, pix, box) { document.getElementById(box+"pix").innerHTML = pix; document.getElementById(box+"error").innerHTML = errortext; document.getElementById(box).focus(); document.getElementById(box).select(); }

100 Lab: harika harran’s 100 “submitbutton()”: function submitbutton() { document.getElementById("Submit").disabled=false; for (i=0; i<7; i++) { if(flag[i]==0) { document.getElementById("Submit").disabled=true; break; }

101 Lab: harika harran’s 101 Create.js file: scripts.js Save files, test window.onload = initPage; //scripts for register.php function initPage() { document.getElementById(“username”).focus(); document.getElementById(“Submit”).disabled = true; }

102 Lab: harika harran’s 102 Create embedded styles

103 Lab: harika harran’s 103 Initialize the flags (for validation) flag=[]; flag[0] = 0; flag[1] = 0; flag[2] = 0; flag[3] = 0; flag[4] = 0; flag[5] = 0; flag[6] = 0;

104 104 Username: function uservalidate(value, box) { if(value) { data = value.match(/[^A-Za-z0-9]/); if(value.length>5 && value.length<13 && !data) { ajaxRequest = new XMLHttpRequest(); queryString = "?username=" +value; url = "registerquery.php" +queryString; ajaxRequest.open(“GET", url, true); ajaxRequest.onreadystatechange = callback; ajaxRequest.send(null); function callback() {//IE only; FF has issues if(ajaxRequest.readyState == 4 && ajaxRequest.status==200) { if(!ajaxRequest.responseText) { document.getElementById("usernamepix").innerHTML = ""; document.getElementById("usernameerror").innerHTML = ""; flag[0] = 1; submitbutton(); } else { errorentry("Duplicate Username", " ", box); } if(value.length 12) errorentry("Username is wrong length", " ", box); if(data) errorentry("Illegal characters", " ", box); flag[0]=0; }

105 105 Username: function passvalidate(value, box) { data = value.match(/[^A-Za-z0-9]/); if(value) { if(value.length>5 && value.length<13 && !data) { document.getElementById("passwordpix").innerHTML = ""; document.getElementById("passworderror").innerHTML = ""; flag[1]=1; submitbutton(); } else { if(value.length 12) errorentry("Password is wrong length", " ", box); if(data) errorentry("Illegal characters", " ", box); flag[1]=0; }

106 106 Username: function verifyvalidate(value, box, pass) { if(value) { if(value == pass) { document.getElementById("verifypix").innerHTML = ""; document.getElementById("verifyerror").innerHTML = ""; flag[2]=1; submitbutton(); } else { errorentry("Passwords do not match", " ", box); flag[2]=0; }

107 107 Username: function lastnamevalidate(value, box) { data = value.match(/[^A-Za-z\-]/); if(value) { if(value.length<50 && !data) { document.getElementById("lastnamepix").innerHTML = ""; document.getElementById("lastnameerror").innerHTML = ""; flag[3]=1; submitbutton(); } else { if(value>50) errorentry("Last name is too long", " ", box); if(data) errorentry("Illegal characters in last name", " ", box); flag[3]=0; }

108 108 Username: function firstnamevalidate(value, box) { data = value.match(/[^A-Za-z\-]/); if(value) { if(value.length<50 && !data) { document.getElementById("firstnamepix").innerHTML = ""; document.getElementById("firstnameerror").innerHTML = ""; flag[4]=1; submitbutton(); } else { if(value>50) errorentry("First name is too long", " ", box); if(data) errorentry("Illegal characters in first name", " ", box); flag[4]=0; }

109 109 Username: function phonevalidate(value, box) { if(value) { value = value.replace(/[^0-9]/g, ""); if (value.length==11 && value.charAt(0)=="0" && value.charAt(1) != "1" && value.charAt(4) != "1") { areacode = value.substr(0,4); office = value.substr(4,3) ajaxRequest = new XMLHttpRequest(); queryString = "?areacode=" +areacode+ "&office=" +office; url = "registerquery.php" +queryString; ajaxRequest.open("GET", url, true); ajaxRequest.onreadystatechange = callback; ajaxRequest.send(null); function callback() { if(ajaxRequest.readyState == 4 && ajaxRequest.status==200) { if(!ajaxRequest.responseText) { document.getElementById("telephonepix").innerHTML = ""; document.getElementById("telephoneerror").innerHTML = ""; flag[5]=1; submitbutton(); } else { errorentry("Phone number invalid", " ", box); } else { errorentry("Phone number invalid", " ", box); flag[5]=0; }

110 110 Username: //registerquery.php

111 111 Username:

112 112 Username: //scripts at top of register.php

113 Break

114 Lab: folk music 114 Make web page/application Displays instruments & text ‘onclick’

115 Lab: folk music 115 Make dynamic application: No-jax (DHTML) 3 Ajax alternatives: XML JSON MySQL Use ‘highly-borrowed’ Turkish Folk Music site

116 Lab: folk music Our choices. Which is best? 116 page.html XMLHttpRequest

117 Lab: folk music 117 Process is same regardless of data source data to access identify a record insert values to layers

118 Lab: folk music 118 Making your data XML ud text images/ud.png tar text images/tar.png kaval text images/kaval.png Fields Record Table

119 Lab: folk music 119 Making your data JSON [ { “text”:“ud text”, “pix”:“images/ud.png” }, { “text”:“tar text”, “pix”:“images/tar.png" }, { “text”:“kaval text”, “pix”:“images/kaval.png” } ] Field Name value Record Table

120 Lab: folk music 120 Making your data MySQL CREATE TABLE `instruments` ( `text` varchar(1000) NOT NULL, `pix` varchar(250) NOT NULL ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ; INSERT INTO `turkishfolkinstruments` VALUES('ud text', 'images/ud.png'); INSERT INTO `turkishfolkinstruments` VALUES('tar text', 'images/tar.png'); INSERT INTO `turkishfolkinstruments` VALUES('kaval text', 'images/kaval.png');

121 Lab: folk music 121 Build web page Start with DHTML Modify for XML Modify for JSON Modify for MySQL

122 Lab: folk music – DHTML DHTML version Uses JavaScript functions to hold data Insert data dynamically 122 page.html

123 Lab: folk music – DHTML 123 Open ‘folkmusic’ and ‘index.html’ Application made up of 6 layers click on link purple: image blue: text about image uses ‘innerHTML’

124 Lab: folk music – DHTML 124 Turkish Folk Music >

125 Lab: folk music – DHTML 125.mainlayer { margin-left: -45%; position: absolute; height: 90%; width: 90%; left: 50%; background: -moz-radial-gradient(50% 25%, #FDF2CE, #F9E086); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FDF2CE', endColorstr='#F9E086',GradientType=0 ); background-color: #F9E086; border-radius: 10px; border: 5px solid #626A39; min-height: 790px; }.title { position: absolute; left: 1%; top: 1%; right: 1%; min-height: 380px; } body { font-family: Papyrus; font-size: 18px; } p { font-family: Papyrus; }

126 Lab: folk music – DHTML 126.ad { position: absolute; height: 40%; width: 18%; left: 1%; bottom: 1%; background-color: #999933; border-radius: 7px; border: 5px solid #000000; min-height: 311px; }.nav{ position: absolute; height: 40%; width: 18%; left: 21%; bottom: 1%; min-height: 311px; }.text { position: absolute; height: 40%; width: 38%; right: 1%; bottom: 1%; overflow: auto; min-height: 311px; }

127 127.pix { position: absolute; height: 40%; width: 20%; right: 40%; bottom: 1%; text-align: center; min-height: 311px; } h1 { font-family: Caliph; font-size: 72px; text-align: center; line-height: 52px; color: #653123; } a:link { color: #584424; line-height: 1.5em; } a:hover { color: #B33B12; line-height: 1.5em; } a:visited { color: #2E598F; line-height: 1.5em; } img.right { float: right; margin: 8px 0px 8px 8px; }

128 128 Turkish Folk Music Instruments Folk music playersI hope you enjoy my wesite about Turkish folk music instruments. Turkish folk music combines the distinct cultural values of all civilisations that have lived in Anatolia and the past territories in Europe and Asia. The instruments used can be classified as being stringed, wind, or percussion instruments. Lively Turkish folk music, which originated on the steppes of Central Asia, marks a complete contrast to the refined Turkish classical music of the Ottoman court. Until recently folk music was generally not written down, instead the traditions have been kept alive for generations by "asiklar", or troubadours and storyteller poets. Local Turkish folk music is comparatively more upbeat and lively than classical Turkish music. One genre of Turkish music is known as Turku which combines elements from both traditional Turkish music and western music and is quite popular in Turkey today. Advertisement here Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna

129 129 function uddisplay() { document.getElementById(“instrumenttext”).innerHTML = “TEXT STRING” obj = document.getElementById(“instrumentpix”); obj.style.top = document.getElementById("mainlayer").offsetHeight*.59 + obj.offsetHeight/ “px”; document.getElementById(“instrumentpix”).innerHTML = “IMAGE STRING” } Open data – dhtml.js Copy function 8 times Get string and image text from XML doc Lab: folk music – DHTML

130 130 function baglamadisplay() { xxx } function darbukadisplay() { xxx } function kabakkemanedisplay() { xxx } function kemencedisplay() { xxx } function kavaldisplay() { xxx } function tardisplay() { xxx } function uddisplay() { xxx } function zurnadisplay() { xxx } Lab: folk music – DHTML

131 131 Done! Open in browser and see how works Lab: folk music – DHTML

132 132 Up to this point: separation of concern structure presentation logic DHTML mixes logic and data; 4 th concern Lab: folk music – DHTML

133 133 Data Logic Presentation Structure Lab: folk music – DHTML

134 Lab: folk music – XML XML version 134 page.html XMLHttpRequest kaval <img src…> A Kaval… pix =

135 Lab: music store – XML 135 Data store in tag hierarchy; use DOM to find Browser incompatibilities on ‘childNodes’ 1 Darbuka A darbuka is a type of goblet drum commonly … basic rhythm. 2 Ud The ud is a pear-shaped Baghdad … the instrument.

136 Lab: music store – XML 136 Best solution; work from ‘instrument’ childNodes: id, instrument, text, pix instrument[value] which instrument childNodes[3] the picture element childNodes[0].value get its value 1 Darbuka A darbuka is a type of goblet drum commonly … basic rhythm. instrument[value].childNodes[3].childNodes[0].nodeValue;

137 Lab: music store – XML 137 Define picture and text separately Short DOM pathway; works in both browsers 1 Darbuka A darbuka is a type of goblet drum commonly … basic rhythm. image[value].childNodes[0].nodeValue; text[value].childNodes[0].nodeValue;

138 Lab: music store – XML 138 Cannot use ‘ ’; instead use < and > No need to escape quotes or apostrophes Easier to prepare data than JSON Data in data/xmldata.xml 1 Darbuka A darbuka is a type of goblet drum commonly … basic rhythm. …

139 Lab: music store – XML 139 Use the same style sheet Open xml.html Install ‘request object’ script function ajaxObject(value) { var requestObject = new XMLHttpRequest(); requestObject.onreadystatechange=function() { if (requestObject.readyState==4 && requestObject.status==200) { XMLObj = requestObject.responseXML; } requestObject.open("GET","data/xmldata.xml",true); requestObject.send(null); }

140 Lab: music store – XML 140 Add code to extract data from XML if (requestObject.readyState==4 && requestObject.status==200) { XMLObj = requestObject.responseXML; /*single object solution; only works in MS; counting on childNodes inst = XMLObj.getElementsByTagName("instrument"); document.getElementById("instrumentpix").innerHTML = inst[value].childNodes[3].childNodes[0].nodeValue; document.getElementById("instrumenttext").innerHTML = inst[value].childNodes[2].childNodes[0].nodeValue; */ image = XMLObj.getElementsByTagName("pix"); txtdesc = XMLObj.getElementsByTagName("text"); document.getElementById("instrumentpix").innerHTML = image[value].childNodes[0].nodeValue; document.getElementById("instrumenttext").innerHTML = txtdesc[value].childNodes[0].nodeValue; }

141 Lab: music store – XML 141 Build the links Index is the order number in XML file Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna

142 Lab: music store – XML 142 Done! Upload to server and test

143 Lab: folk music – JSON JSON version Can use any file that holds text (.js,.txt, etc) 143 json.html XMLHttpRequest jsondata.json {xxxxx, yyyyyy}

144 144 [ {"id":"1", "text":" A darbuka … ", "pix":" " }, {"id":"2", "text":" The ud … ", "pix":" " }, {"id":"3", "text":" The bağlama … ", "pix":" " }, {"id":"4", "text":" The kabak kemane … ", "pix":" " }, {"id":"5", "text":" The Karadeniz …. ”, "pix":" " }, {"id":"6", "text":" The kaval …, pix:”img src= … title="Kaval" />" }, {"id":"7", "text":" The tar … ", "pix":" " }, {"id":"8", "text":" The Zurna … ”, pix:" " } ] Issue: connect to data; find correct ‘record’ ‘Records’ identified by array counter File modified for use by ‘JSON.parse’ method Lab: folk music – JSON

145 145 The jobs: Check our data source (data/jsondata.json) Build request object on json.html (main page) [ {"id":"1", "text":" A darbuka … ", "pix":" " }, {"id":"2", "text":" The ud … ", "pix":" " }, {"id":"3", "text":" The bağlama … ", "pix":" " }, {"id":"4", "text":" The kabak kemane … ", "pix":" " }, {"id":"5", "text":" The Karadeniz …. ”, "pix":" " }, {"id":"6", "text":" The kaval …, pix:”img src= … title="Kaval" />" }, {"id":"7", "text":" The tar … ", "pix":" " }, {"id":"8", "text":" The Zurna … ”, pix:" " } ] Lab: folk music – JSON

146 146 Open ‘json.html’ Update title with your name Style sheet from ‘dhtml’ lab Mission is same: click on link, open image/text Lab: folk music – JSON

147 147 The request object: very compressed function ajaxObject(value) { var requestObject = new XMLHttpRequest(); requestObject.onreadystatechange=function() { if (requestObject.readyState==4 && requestObject.status==200) { JSONObj = JSON.parse(requestObject.responseText); document.getElementById("instrumentpix").innerHTML = JSONObj[value].pix; document.getElementById("instrumenttext").innerHTML = JSONObj[value].text; } requestObject.open("GET","data/jsondata.json",true); requestObject.send(); } Lab: folk music – JSON

148 148 Data string turned into object Object’s row found with ‘value’; data extracted Data located in ‘jsondata.json’ JSONObj = JSON.parse(requestObject.responseText); document.getElementById("instrumentpix").innerHTML = JSONObj[value].pix; document.getElementById("instrumenttext").innerHTML = JSONObj[value].text; requestObject.open("GET","data/jsondata.json",true); requestObject.send(); } Lab: folk music – JSON

149 149 Insert event handlers Index identifies which row to use in array Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna Lab: folk music – JSON

150 150 Done! Upload and test Lab: folk music – JSON

151 MySQL version PHP page is used as interface 151 page.html XMLHttpRequest Lab: folk music – MySQL

152 152 2-minute crash course Process very similar with ‘hello world’ Lab: folk music – MySQL mysql.php query.php

153 153 Our system: use HTML for view Data comes from database as a block of text Split and entered into layers Lab: folk music – MySQL mysql.html

154 154 Lab: folk music – MySQL Add data to database Turn on web server Open Create database ‘folkinstruments’ Insert text from ‘mysqldata.txt’

155 155 Lab: folk music – MySQL Open mysql.html function ajaxObject(value) { var requestObject = new XMLHttpRequest(); url = "query.php?id="+value; requestObject.onreadystatechange=function() { if (requestObject.readyState==4 && requestObject.status==200) { var MySQLObj = requestObject.responseText; output = MySQLObj.split("END"); document.getElementById("instrumentpix").innerHTML = output[1]; document.getElementById("instrumenttext").innerHTML = output[0]; } requestObject.open("GET",url,true); requestObject.send(null); }

156 156 Lab: folk music – MySQL Create ‘query.php’

157 157 Lab: folk music – MySQL Update the links Instruments: Baglama Darbuka Kabak Kemane Karadeniz Kemence Kaval Tar Ud Zurna

158 158 Lab: folk music – MySQL Done! Update and view your site

159 159 Assignment: your hobby Make an Ajax site Topic: your choice One type of data (XML, JSON, MySQL) At least 4 entries

160 Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012


Download ppt "Web Programming SE 480: Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012."

Similar presentations


Ads by Google