Copyright © Steven W. Johnson SE 480: Web Programming Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012
Week 10: Ajax using XML, JSON, MySQL Overcoming Ajax weaknesses Browser cache Introduction to XML; JSON 2 2
Disadvantages of Ajax: 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’ 3 3
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 XMLHttpRequest 4 4
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 5
Disadvantages of Ajax: Hijax Ajax 6 6
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 <head> Javascript, ‘onload’ scripts interpreted before page opens Place essential scripts in head, load dynamically* 7 7
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 8
Drags on performance: for(i=0; i<array.length; i++) { do something } end = array.length; for(i=0; i<end; i++) { 9 9
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 10
Browser cache: Cache: brings resources closer temporarily CPU cache (register) L2 & L3 cache Resources (data) Resources (data) 11 11
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) 12 12
Browser cache: Browser caches: disk: primary cache memory: mail, SSL, ‘no-cache’ items image: for decompressed images (.gif, .png, .jpg) 13 13
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 14
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 15
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: expires max-age last modified if-modified-since 16 16
Browser cache: 3 main ways to control: meta tags (client side) with code (server side) web server configuration files 17 17
Browser cache: Client side meta tags (normal web page) Meta: ‘thinking about’ or ‘describing itself’ <meta name=“Keywords” content=“folk, music”> <meta name=“Description” content=“Turkish folk music”> <meta http-equiv=“Cache-control” content=“public”> <meta http-equiv=“pragma” content=“no-cache”> //old <meta http-equiv=“Expires” content=“-1”> 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 18 18
Browser cache: Encoding links so each instance is unique Can use time (milliseconds) or random Works well in Ajax url = “music.php?instrument=" +id + "&random=" +Math.random(); 19 19
Browser cache: jQuery/JavaScript {Cache: false} 20 20
Browser cache: Server side defines cache settings before sent header() function creates HTTP requests header(“Cache-Control: no-cache, must–revalidate”); header(“Expires: Sat, 18 Mar 2002 23:59:59 GMT”); //past expire date Header(“Cache-Control: max-age=32436000); header(“Pragma: no-cache”); header(“Last-Modified: ” .some date); $_SERVER['HTTP_IF_MODIFIED_SINCE'] == time 21 21
Browser cache: web server configuration files: httpd.conf .htaccess HTTP header files 22 22
Browser cache: Apache set ‘mod_expires’ and ‘mod_headers’ ExpiresDefault "<base> [plus] {<num> <type>}*" ExpiresByType type/encoding "<base> [plus] {<num> <type>}*" ) <base>: access, now, modification ‘plus’ keyword is optional <num>: a number <type>: years, months, weeks, days, hours, minutes, seconds ExpiresDefault “access plus 1 month” ExpiresByType image/gif “modification plus 5 hours 3 minutes” 23 23
Browser cache: Data in cache won’t update by F5 Can turn off cache, or cache everything (settings) abc abc F5 Reload Reloads page, not data 24 24
XML: eXtensible (genisletmek) Markup Language Meta (mecaz) language Purpose: store data in hierarchical format Can be rendered in browser (text); not intent ¸ 25 25
XML: Used to describe data and data relationships ‘Semantic information’ 26 26
XML: XHTML 2.0 was XML as page markup language Overall effect is same; not equal ideas + = + 27 27
XML: 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 ˘ <Name>Steve</Name> //xml <h2>Steve</h2> //html 28 28
XML: Rules for XML: case sensitive tags/elements must be opened and closed proper nesting (FILO) attribute values must be in quotes root element (students) 29 29
XML: XML: 2-dimensional (boyutlu) tables Maker of flatfile databases <?xml version=“1.0” encoding=“utf-8”?> <students> <student> <name>Ali</name> <age>20</age> <bolum>MBBF</bolum> <gender>Erkek</gender> </student> <name>Bahar</name> <age>21</age> <bolum>ITF</bolum> <gender>Hanim</gender> </students> “SML” (Students markup language) Table Record Students Name Age Bolum Gender Ali 20 MBBF Erkek Bahar 21 ITF Hanim Fields 30 30
XML: An XML markup language <?xml version=“1.0” encoding=“utf-8”?> <building> <apartment> <room>living room</room> <room>dining room</room> <room>kitchen</room> </apartment> </building> 31 31
XML: Added ‘empty’ elements (item) Like <br /> instead of <p>Hi</p> in HTML <?xml version=“1.0” encoding=“utf-8”?> <building> <apartment> <room type=“bedroom”> <item type=“shirt” color=“blue” /> <item type=“pants” color=“green” /> <item type=“clock” kind=“digital” /> </room> </apartment> </building> attributes 32 32
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 33
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 34
Break 35
JSON: All data sources are like 2-dimensional arrays Table: records (rows) and fields columns array = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]]; 1 2 3 4 5 6 7 8 9 10 11 1 2 3 [0,0] [0,1] [0,2] [0,3] [1,0] [1,1] [1,2] [1,3] [2,0] [2,1] [2,2] [2,3] array[2][1]; //9 array[1][3]; //7 36 36
{“firstname”: “Canan”} JSON: JavaScript Object Notation Data interchange (kavsak) format Passes objects as strings from server to client Basic form: uses name/value pairs ¸ {“firstname”: “Canan”} firstname = “Canan”; 37 37
JSON: Does have a logo Has a web site (json.org) Incorporated into ISO Douglas Crockford (2002) Part of ECMAScript, RFC 4627 38 38
JSON: Many string values identified in same “record” Information defining one person/entity Strings in quotes; numbers not {“name”: “Ali”, “age”: 20, “bolum”: “MBBF” } 39 39
JSON: Arrays used to represent many entities Curly brackets define entities Square brackets define entire source array = [[“Cem”, “Ali”, “Eda”],[18, 22, 24]]; { students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” } ] } 40 40
JSON: All three represent the same data; “records” Effectively a database table students = [ {“name”:“Ali”, “age”:20, “bolum”:“MBBF” }, {“name”:“Bahar”, “age”:21, “bolum”:“ITF” } ]; Students Name Age Bolum Gender Ali 20 MBBF Erkek Bahar 21 ITF Hanim students = [ {“name”: “Ali”, “age”: 20, “bolum”: “MBBF” }, {“name”: “Bahar”, “age”: 21, “bolum”: “ITF” } ]; 41 students[1].age //21 41
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 42
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”; 43
JSON: JSON.parse converts strings into objects Native (dahil) in browsers since IE 8 [ {"first":"John" , "last":"Doe" , "age":18}, {"first":"Anna" , "last":"Smith" , "age":20}, {"first":"Peter" , "last":"Jones“ , "age":21} ] JSONObj = JSON.parse(requestObject.responseText); document.getElementById(“a”).innerHTML = JSONObj[1].first; document.getElementById(“b”).innerHTML = JSONObj[1].last; 44 44
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 45
JSON: .json and .txt are both text file formats File holds an object/array (data source) Ajax calls object and extracts data data.txt data.json 46 46
JSON: Concept: JSON data source on server Call server with address in array/database Update page without refreshing entire page json.txt array = [] page.html data.json 47 47
JSON versus Ajax: “students”= [ {“name”: “Ali”, “age”: “20”, “bolum”: “MBBF” }, {“name”: “Bahar”, “age”: “21”, “bolum”: “ITF” } ] <?xml version=“1.0” encoding=“utf-8”?> <students> <student> <name>Ali</name> <age>20</age> <bolum>MBBF</bolum> <gender>Erkek</gender> </student> <name>Bahar</name> <age>21</age> <bolum>ITF</bolum> <gender>Hanim</gender> </students> 48 48
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 <name>Steve</name> “name”: “Steve”, 49 49
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 50
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 51
JSON and UTF-8: JSON supports UTF-8; Notepad does not Must save UTF-8 files using UTF-8; not ANSI 52 52
JSON: x-dimensional array saved as ‘employees’ objname[i].fieldname { "firstName":"John" , "lastName":"Doe" , "age":18}, { "firstName":"Anna" , "lastName":"Smith" , "age":20}, { "firstName":"Peter" , "lastName":"Jones" , "age":21} ]; document.write(employees[1].age); //20 53 53
Making data sources: Arguably hardest part of labs/assignment Add data formats have same idea: ‘field name’ ‘data’ <name>Ali</name> {“name”:“Ali”} Name Ali 54 54
Making data sources: Utilities do exist to transfer data Can manually convert using a language <name>Ali</name> {“name”:“Ali”} start = String.indexOf(“<”); end = String.indexOf(“>”); for(i=start+1; i<end-1; i++) { field += string.charAt(i); } start = String.indexOf(“>”); end = String.lastIndexOf(“<”); value += string.charAt(i); write ‘{“’ +field+ ‘”:“’ +value+ ‘”}’ 55 55
Quiz: 1. What is the address of the value 24? [2, 1] 12 16 17 5 8 3 24 56 56
Quiz: 2. Place this array in the table: [[1, 2, 3], [4, 5, 6], [7, 8, 9]] 1 2 3 4 5 6 7 8 9 57 57
Quiz: 3. What XML tag is most like a record? <bbb> <aaa> <bbb> <ccc>data</ccc> <ccc>data</ccc> <ccc>data</ccc> </bbb> </aaa> 58 58
Quiz: 4. From <aaa>, the address of <bbb>? 5. Child nodes of <ccc> 6. What is the root node? <aaa>[0].childNodes[0] <aaa> <aaa> <bbb> <ccc>11</ccc> <ccc>22</ccc> <ccc>33</ccc> </bbb> </aaa> 59 59
Quiz: 7. Children of <aaa>? 1 8. Value of <bbb>[0].childNodes[1].childNodes[0].nodeValue 1 22 <aaa> <bbb> <ccc>11</ccc> <ccc>22</ccc> <ccc>33</ccc> </bbb> </aaa> 60 60
Quiz: 9. JSON array of 3 names: friends = [ {“name”:”Ali”, “name”:”Bahar”, “name”:”Canan”} ]; 61 61
Quiz: 10. What is the value of company.employees[1].age? 20 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} ] } 62 62
Copyright © Steven W. Johnson CS 450: Web Programming Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012
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) 64 64
Installing Uniform Server After extraction, ‘Uniserver’ folder in ‘C’ drive 65 65
Installing Uniform Server Given two choices: Start as program (no registry – manual load) Start as service (added to registry – auto loads) 66 66
Installing Uniform Server Asked if UniServer is supposed to load Set up a MySQL password 67 67
Installing Uniform Server Click on ‘Start Both’ 68 68
Starting Uniform Server Apache starts first You must unblock port (80) 69 69
Starting Uniform Server MySQL server starts next You must unblock port (3306) 70 70
Starting Uniform Server Lots to do here Access to: phpInfo phpMyAdmin UniServer page 71 71
72 72
73 73
Processes used by UniServer: Three running processes: 74 74
Installing Uniform Server Turn on UniServer: ‘Start Both’ Turn off: ‘Stop Both’ 75 75
A “web page”: Labs: Register (validate, check user table) Folk music: DHTML XML JSON Assignment: Your hobby 76 76
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 77
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 78
Lab: harika harran’s 79 79
Lab: harika harran’s Make the database: registerdb 3 tables: register data (mix user and pass) area code city code 80 80
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) email (varchar 50) registerDate (timestamp, Attribute ON UPDATE) 81 81
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 82
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 83
Lab: harika harran’s Insert data into your database 84 INSERT INTO `users` VALUES(1, 'alib', 'denizyuz', 'Balikcioglu', 'Ali', '02325551234', 'alib@gmail.com', '2012-01-16 09:14:32'); INSERT INTO `users` VALUES(2, 'selmac', 'jogger', 'Canli', 'Selma', '05324029876', 'fastrunner@ttt.net', '2012-01-17 21:32:12'); INSERT INTO `users` VALUES(3, 'Painterbey', 'pigments', 'VanGogh', 'Ernest', '05324558525', 'acrylics@ttnet.com', '2012-01-19 14:42:05'); INSERT INTO `users` VALUES(4, 'Musichanim', 'cmajor', 'Kocakeskin', 'Erdinc', '08756512785', 'fugue@ttonline.net', '2012-01-23 17:51:47'); INSERT INTO `users` VALUES(5, 'futbol4ever', 'futbolpitch', 'Sehirbey', 'Pele', '04954286751', 'Futbol77@izmirekonomi.tr', '2012-01-24 08:06:19'); INSERT INTO `users` VALUES(6, 'fenerrules', 'roberto', 'Buyukbey', 'Bahar', '09452331425', 'Baharfutbol@ttnet.com', '2012-01-24 09:37:12'); INSERT INTO `users` VALUES(7, 'knitter', 'needleyarn', 'Ross', 'Benjamin', '09427254392', 'flagmaker@izmirnet.com', '2012-01-26 09:14:37'); INSERT INTO `users` VALUES(8, 'ieustudent', 'balcova', 'Einstein', 'Robert', '06427356284', 'smartrobert@ttonline.net', '2012-01-27 22:12:12'); INSERT INTO `users` VALUES(9, 'kskrules', 'johann', 'Rooney', 'Mehmet', '08436184287', 'mehmetgol@ttnet.com', '2012-01-27 23:06:41'); INSERT INTO `users` VALUES(10, 'sedasinger', 'mavigoz', 'Seviyorum', 'Ilkgenc', '04852579561', 'ilkgenc44@yahoo.com', '2012-02-01 11:42:15'); INSERT INTO `users` VALUES(11, 'asksong', 'forever', 'Yildizgoz', 'Gunus', '05134798561', 'yildiz444@hotmail.com', '2012-02-03 13:17:47'); INSERT INTO `users` VALUES(12, 'tenderheart', 'poemreader', 'Frost', 'Emily', '05524354189', 'poetcorner@ttonline.com', '2012-02-03 16:39:52); 84 84
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); 85 85
Lab: harika harran’s Open register folder, register.php: Form built, table started 86 86
Lab: harika harran’s Make the form (tab at end of row to make new row) 25 pixels wide 87 87
Lab: harika harran’s Use these names 88 88
Lab: harika harran’s Add these ids and classes id=“usernamepix” id=“usererror” class="errortext" id=“passwordpix” id=“verifypix” id=“lastnamepix” id=“firstnamepix” id=“telephonepix” id=“emailpix” 89 89
Lab: harika harran’s Use ‘.innerHTML’ to announce errors: 3rd column gets ‘red x’ 4th column describes error When fixed, both error messages turn off 90 90
Lab: harika harran’s 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 91 91
Lab: harika harran’s Username: 6 to 12 characters (letters/numbers) Password: 6 to 12 characters (letters/numbers) Password == Verify password 92 92
Lab: harika harran’s Telephone: NAPN 11 digits 1: ==0 2: != 1 5: !=1 Area code in table Office code must match 93 93
Lab: harika harran’s 0232 0532 0287 254 508 841 274 400 305 337 387 261 94 94
Lab: harika harran’s Email prefix: 1st, last chars cannot be “.” 6 to 15 chars cannot have 2 noktas in a row @ 3-12 char total 1st 3 chars cannot be nokta ends with: .net, .org, .com, .edu, .tr 95 95
Lab: harika harran’s How about the submit button? for( ) { flag[i] = 0; } 96 96
Lab: harika harran’s 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 97 97
Lab: harika harran’s 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() } 98 98
Lab: harika harran’s “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(); } 99 99
Lab: harika harran’s “submitbutton()”: function submitbutton() { document.getElementById("Submit").disabled=false; for (i=0; i<7; i++) { if(flag[i]==0) { document.getElementById("Submit").disabled=true; break; } 100 100
Lab: harika harran’s Create .js file: scripts.js Save files, test //scripts for register.php function initPage() { document.getElementById(“username”).focus(); document.getElementById(“Submit”).disabled = true; } <script src=“validate.js”></script> <script type=“text/javascript”> window.onload = initPage; </script> 101 101
Lab: harika harran’s Create embedded styles <style type="text/css"> <!-- .mainlayer { position: absolute; top: 25px; margin-left: -260px; width: 520px; left: 50%; background-color: #FFFFFF; border: 1px solid #000000; } body { font-family: Arial, Helvetica, sans-serif; font-size: 15px; background-color: #FFFFF4; .errortext { color: #FF0000; --> </style> 102 102
Lab: harika harran’s Initialize the flags (for validation) flag=[]; 103 103
Username: 104 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", "<img src='images/redx.png'>", box); if(value.length<6 || value.length>12) errorentry("Username is wrong length", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters", "<img src='images/redx.png'>", box); flag[0]=0; Username: 104 104
Username: 105 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<6 || value.length>12) errorentry("Password is wrong length", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters", "<img src='images/redx.png'>", box); flag[1]=0; Username: 105 105
Username: 106 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", "<img src='images/redx.png'>", box); flag[2]=0; Username: 106 106
Username: 107 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", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters in last name", flag[3]=0; Username: 107 107
Username: 108 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", "<img src='images/redx.png'>", box); if(data) errorentry("Illegal characters in first name", flag[4]=0; Username: 108 108
Username: 109 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", "<img src='images/redx.png'>", box); flag[5]=0; Username: 109 109
<?php include ('connection.php'); ?> //registerquery.php if ($_GET['username']) { $username = $_GET['username']; $query = mysqli_query($con, "SELECT userId FROM users WHERE username = '$username'") or die("Error number: " . mysql_errno() ."<br / >". mysql_error()); $row = mysqli_num_rows($query); if ($row == 0) { echo ""; } else { echo "Duplicate Username"; //passes null or something if ($_GET['areacode']) { $areacode = $_GET['areacode']; $office = $_GET['office']; $query = mysqli_query($con, "SELECT officeId FROM areacodes, officecodes WHERE areacodes.codeId=officecodes.codeId AND officecode='$office' AND areaCode='$areacode'") or die("Error number: “.mysql_error()); echo "Invalid"; echo ""; //passes null or something ?> Username: 110 110
Username: 111 <?php //connection.php $host = "127.0.0.1"; $username = “username"; $password = “password"; $database = "registerdb"; $con = mysqli_connect($host, $username, $password, $database) or trigger_error(mysqli_error(),E_USER_ERROR); ?> Username: 111 111
<. php include ('connection. php');. > <?php include ('connection.php'); ?> //scripts at top of register.php <?php if (isset($_POST['Submit'])) { $salt = "This is the salt"; $username = $_POST['username']; $password = $_POST['password']; $lastname = $_POST['lastname']; $firstname = $_POST['firstname']; $telephone = $_POST['telephone']; $email = $_POST['email']; $password = sha1($salt.$password); //crypt() $lastname = strtoupper($lastname); $query = "INSERT INTO users (username, password, lastname, firstname, telephone, email) VALUES ('$username', '$password', '$lastname', '$firstname', '$telephone', '$email')"; mysqli_query($con, $query) or die("Failed Query of " . $query); header("location: thanks.html"); mysqli_close($con); } ?> Username: 112 112
Break 113
Lab: folk music Make web page/application Displays instruments & text ‘onclick’ 114 114
Lab: folk music Make dynamic application: No-jax (DHTML) 3 Ajax alternatives: XML JSON MySQL Use ‘highly-borrowed’ Turkish Folk Music site 115 115
Lab: folk music Our choices. Which is best? page.html XMLHttpRequest 116 116
Lab: folk music Process is same regardless of data source data to access identify a record insert values to layers 117 117
Lab: folk music Making your data XML Table Record Fields <xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <text>ud text</text> <pix>images/ud.png</pix> </instrument> <instrument> <text>tar text</text> <pix>images/tar.png</pix> </instrument > <text>kaval text</text> <pix>images/kaval.png</pix> </instrument > </instruments> Record Fields 118 118
Lab: folk music Making your data JSON Field Table Record Name value [ { “text”:“ud text” , “pix”:“images/ud.png” }, { “text”:“tar text” , “pix”:“images/tar.png" }, { “text”:“kaval text” , “pix”:“images/kaval.png” } ] Record 119 119
Lab: folk music 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'); 120 120
Lab: folk music Build web page Start with DHTML Modify for XML Modify for JSON Modify for MySQL 121 121
Lab: folk music – DHTML DHTML version Uses JavaScript functions to hold data Insert data dynamically page.html 122 122
Lab: folk music – DHTML Open ‘folkmusic’ and ‘index.html’ Application made up of 6 layers click on link purple: image blue: text about image uses ‘innerHTML’ 123 123
Lab: folk music – DHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Turkish Folk Music <<Your_Name>></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="data/dhtml.js"></script> </head> 124 124
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 { left: 1%; top: 1%; right: 1%; min-height: 380px; body { font-family: Papyrus; font-size: 18px; p { 125 125
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{ left: 21%; .text { width: 38%; right: 1%; overflow: auto; 126 126
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; line-height: 52px; color: #653123; a:link { color: #584424; line-height: 1.5em; a:hover { color: #B33B12; a:visited { color: #2E598F; img.right { float: right; margin: 8px 0px 8px 8px; 127 127
<body> <div id="mainlayer" class="mainlayer" z-index:1"> <div id="title" class="title" z-index:2"> <h1>Turkish Folk Music Instruments</h1> <p><img class="right" src="images/players.png" width="137" height="225" alt="Folk music players" title="Folk music players" />I 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.</p> <p>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.</p> </div> <div id="advertisement" class="ad" z-index:2">Advertisement here</div> <div id="instrumentnav" class="nav" z-index:2"> Instruments:<br /> <a href="#" onclick="baglamadisplay()">Baglama</a><br /> <a href="#" onclick="darbukadisplay()">Darbuka</a><br /> <a href="#" onclick="kabakkemanedisplay()">Kabak Kemane</a><br /> <a href="#" onclick="kemencedisplay()">Karadeniz Kemence</a><br /> <a href="#" onclick="kavaldisplay()">Kaval</a><br /> <a href="#" onclick="tardisplay()">Tar</a><br /> <a href="#" onclick="uddisplay()">Ud</a><br /> <a href="#" onclick="zurnadisplay()">Zurna</a><br /> <div id="instrumentpix" class="pix" z-index:2"></div> <div id="instrumenttext" class="text" z-index:2"></div> </body> </html> 128 128
Lab: folk music – DHTML Open data – dhtml.js Copy function 8 times Get string and image text from XML doc function uddisplay() { document.getElementById(“instrumenttext”).innerHTML = “TEXT STRING” obj = document.getElementById(“instrumentpix”); obj.style.top = document.getElementById("mainlayer").offsetHeight*.59 + obj.offsetHeight/2-125 + “px”; document.getElementById(“instrumentpix”).innerHTML = “IMAGE STRING” } 129 129
Lab: folk music – DHTML function baglamadisplay() { xxx } function darbukadisplay() { function kabakkemanedisplay() { function kemencedisplay() { function kavaldisplay() { function tardisplay() { function uddisplay() { function zurnadisplay() { 130 130
Lab: folk music – DHTML Done! Open in browser and see how works 131
Lab: folk music – DHTML Up to this point: separation of concern structure presentation logic DHTML mixes logic and data; 4th concern 132 132
Lab: folk music – DHTML Structure Presentation Logic Data 133 133
Lab: folk music – XML XML version page.html XMLHttpRequest 134 134 <instruments> <name>kaval</name> <image><img src…> <text>A Kaval…</text> pix = <img src=… text = “A Kaval… page.html XMLHttpRequest 134 134
Lab: music store – XML Data store in tag hierarchy; use DOM to find Browser incompatibilities on ‘childNodes’ <xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument> <instrumentId>2</instrumentId> <instrument>Ud</instrument> <text><p>The ud is a pear-shaped Baghdad … the instrument.</p></text> <pix><img src="images/ud.png" width="233" height="250" /></pix> </instruments> 135 135
Lab: music store – XML 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 instrument[value].childNodes[3].childNodes[0].nodeValue; <xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument> </instruments> 136 136
Lab: music store – XML Define picture and text separately Short DOM pathway; works in both browsers image[value].childNodes[0].nodeValue; text[value].childNodes[0].nodeValue; <xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument> </instruments> 137 137
Lab: music store – XML Cannot use ‘<‘ or ‘>’; instead use < and > No need to escape quotes or apostrophes Easier to prepare data than JSON Data in data/xmldata.xml <xml version “1.0” encoding=“utf-8”> <instruments> <instrument> <instrumentId>1</instrumentId> <instrument>Darbuka</instrument> <text><p>A darbuka is a type of goblet drum commonly … basic rhythm.</p> <pix><img src="images/darbuka.png" width="233" height="250" /></pix> </instrument> … </instruments> 138 138
Lab: music store – XML Use the same style sheet Open xml.html Install ‘request object’ script <script type="text/javascript"> 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); </script> 139 139
Lab: music store – XML 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"); image[value].childNodes[0].nodeValue; txtdesc[value].childNodes[0].nodeValue; } 140 140
Lab: music store – XML Build the links Index is the order number in XML file Instruments:<br /> <a href="#" onclick="ajaxObject(2)">Baglama</a><br /> <a href="#" onclick="ajaxObject(0)">Darbuka</a><br /> <a href="#" onclick="ajaxObject(3)">Kabak Kemane</a><br /> <a href="#" onclick="ajaxObject(4)">Karadeniz Kemence</a><br /> <a href="#" onclick="ajaxObject(5)">Kaval</a><br /> <a href="#" onclick="ajaxObject(6)">Tar</a><br /> <a href="#" onclick="ajaxObject(1)">Ud</a><br /> <a href="#" onclick="ajaxObject(7)">Zurna</a><br /> 141 141
Lab: music store – XML Done! Upload to server and test 142 142
Lab: folk music – JSON JSON version Can use any file that holds text (.js, .txt, etc) {xxxxx, yyyyyy} XMLHttpRequest json.html jsondata.json 143 143
Lab: folk music – JSON Issue: connect to data; find correct ‘record’ ‘Records’ identified by array counter File modified for use by ‘JSON.parse’ method [ {"id":"1", "text":"<p>A darbuka … </p>", "pix":"<img src=“ … title="Darbuka" />" }, {"id":"2", "text":"<p>The ud … </p>", "pix":"<img src … title="Ud" />" }, {"id":"3", "text":"</p>The bağlama … </p>", "pix":"<img src … title="Baglama" />" }, {"id":"4", "text":"<p>The kabak kemane … </p>", "pix":"<img src= … title="Kabak Kemane" />" }, {"id":"5", "text":"<p>The Karadeniz ….</p>”, "pix":"<img src= … title="Karadeniz" />" }, {"id":"6", "text":"<p>The kaval … </p>, pix:”img src= … title="Kaval" />" }, {"id":"7", "text":"<p>The tar … </p>", "pix":"<img src= … title="Tar" />" }, {"id":"8", "text":"<p>The Zurna … </p>”, pix:"<img src … title="Zurna" />" } ] 144 144
Lab: folk music – JSON The jobs: Check our data source (data/jsondata.json) Build request object on json.html (main page) [ {"id":"1", "text":"<p>A darbuka … </p>", "pix":"<img src=“ … title="Darbuka" />" }, {"id":"2", "text":"<p>The ud … </p>", "pix":"<img src … title="Ud" />" }, {"id":"3", "text":"</p>The bağlama … </p>", "pix":"<img src … title="Baglama" />" }, {"id":"4", "text":"<p>The kabak kemane … </p>", "pix":"<img src= … title="Kabak Kemane" />" }, {"id":"5", "text":"<p>The Karadeniz ….</p>”, "pix":"<img src= … title="Karadeniz" />" }, {"id":"6", "text":"<p>The kaval … </p>, pix:”img src= … title="Kaval" />" }, {"id":"7", "text":"<p>The tar … </p>", "pix":"<img src= … title="Tar" />" }, {"id":"8", "text":"<p>The Zurna … </p>”, pix:"<img src … title="Zurna" />" } ] 145 145
Lab: folk music – JSON Open ‘json.html’ Update title with your name Style sheet from ‘dhtml’ lab Mission is same: click on link, open image/text 146 146
Lab: folk music – JSON The request object: very compressed 147 <script type="text/javascript"> 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(); </script> 147 147
Lab: folk music – JSON 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(); } </script> 148 148
Lab: folk music – JSON Insert event handlers Index identifies which row to use in array <a href="#" onclick="ajaxObject(0)">Baglama</a><br /> <a href="#" onclick="ajaxObject(1)">Darbuka</a><br /> <a href="#" onclick="ajaxObject(2)">Kabak Kemane</a><br /> <a href="#" onclick="ajaxObject(3)">Karadeniz Kemence</a><br /> <a href="#" onclick="ajaxObject(4)">Kaval</a><br /> <a href="#" onclick="ajaxObject(5)">Tar</a><br /> <a href="#" onclick="ajaxObject(6)">Ud</a><br /> <a href="#" onclick="ajaxObject(7)">Zurna</a><br /> 149 149
Lab: folk music – JSON Done! Upload and test 150 150
Lab: folk music – MySQL MySQL version PHP page is used as interface page.html XMLHttpRequest 151 151
Lab: folk music – MySQL 2-minute crash course Process very similar with ‘hello world’ query.php mysql.php 152 152
Lab: folk music – MySQL Our system: use HTML for view Data comes from database as a block of text Split and entered into layers mysql.html query.php 153 153
Lab: folk music – MySQL Add data to database Turn on web server Open http://localhost/apanel/phpmyadmin Create database ‘folkinstruments’ Insert text from ‘mysqldata.txt’ 154 154
Lab: folk music – MySQL Open mysql.html <script type="text/javascript"> 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); </script> 155 155
Lab: folk music – MySQL Create ‘query.php’ <?php $id = $_GET['id']; $host = "127.0.0.1"; $username = “username"; $password = “password"; $database = "folkinstruments"; $con = mysqli_connect($host, $username, $password, $database) or trigger_error(mysqli_error(),E_USER_ERROR); $query = mysqli_query($con, "SELECT text, pix FROM instruments WHERE instrumentid = '$id'") or die("A MySQL query error has occurred.<br />Error number: ". mysql_errno() ."<br / >". mysql_error()); $row = mysqli_fetch_assoc($query); echo $row['text']."END".$row['pix']; mysqli_free_result($query); mysqli_close($con); ?> 156 156
Lab: folk music – MySQL Update the links Instruments:<br /> <a href="#" onclick="ajaxObject(3)">Baglama</a><br /> <a href="#" onclick="ajaxObject(1)">Darbuka</a><br /> <a href="#" onclick="ajaxObject(4)">Kabak Kemane</a><br /> <a href="#" onclick="ajaxObject(5)">Karadeniz Kemence</a><br /> <a href="#" onclick="ajaxObject(6)">Kaval</a><br /> <a href="#" onclick="ajaxObject(7)">Tar</a><br /> <a href="#" onclick="ajaxObject(2)">Ud</a><br /> <a href="#" onclick="ajaxObject(8)">Zurna</a><br /> 157 157
Lab: folk music – MySQL Done! Update and view your site 158 158
Assignment: your hobby Make an Ajax site Topic: your choice One type of data (XML, JSON, MySQL) At least 4 entries 159 159
Copyright © Steven W. Johnson SE 480: Web Programming Week 10: Ajax Data Sources Copyright © Steven W. Johnson October 1, 2012