creating databases local storage. join & split classwork: show 1 table application. share...
TRANSCRIPT
![Page 1: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/1.jpg)
Creating DatabasesLocal storage. join & split
Classwork: show 1 table application.Share designs for oscars application.
Adaptive select. Homework: [Catch up]. Start studying
for midterm.
![Page 2: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/2.jpg)
Local storage
• HTML5 version of cookies
• Small file(s) stored as text on local (client) computer
• Browser specific
• Only programs (scripts, files) from same domain can use the information.
• Can be prevented by user.
![Page 3: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/3.jpg)
Uses?
• ?
![Page 4: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/4.jpg)
Uses include
• Convenience– Store ids and passwords.– Note: browser may do this independently– Customer information, including credit cards
• The company’s convenience– Used for marketing
![Page 5: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/5.jpg)
Information gathered
in cookies, localStorage, beacons, etc. For you, need to put it on (at least) two scales:
• Convenient to useless?
• Harmless to creepy?
![Page 6: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/6.jpg)
HTML5 localStorage
• Items stored by name
localStorage.setItem(“score”,String(score));
…
lastscore = localStorage.getItem(“score”);
localStorage.removeItem(“score”);
![Page 7: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/7.jpg)
Error checking
• It makes sense to do error checking, for example, using
• try { }catch(e) { alert(“problem with local Storage “+e)}
![Page 8: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/8.jpg)
Example
• http://faculty.purchase.edu/jeanine.meyer/db/localstoragetest.html
• Store time and
• compute elapsed time since last stored.
• Remove last time stored.
![Page 9: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/9.jpg)
Encoding data• What if you have a lot of data….• You can store each thing as its own item OR
combine• Processing an array--encoding
– Change items to character strings using String– Use join to combine into one big string, with a separator
of your choosing
• Decoding– Split– ????
![Page 10: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/10.jpg)
Warning
• join is a JavaScript method and a php method for constructing a string out of elements in an array
• JOIN is a term that can be used in an SQL SELECT statement to gather records from multiple files.
![Page 11: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/11.jpg)
join and split
• Let class be an array of names:[“Larry”, “Curly”, “Moe]
• class.join(“+”) produces:“Larry+Curly+Moe”
list = class.join(“+”);
• Then newclass = list.split(“+”); producesthe original array.
![Page 12: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/12.jpg)
JavaScript Object Notation: json
• System of encoding– Ordered lists– Key-value pairs
• Supported in JavaScript and php
• Can be used to encode (aggregate, combine) information, store, and later decode.
![Page 13: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/13.jpg)
Persistent storage
So, you have a choice for persistent storage
•On the local computer, using HTML5's localStorage or (older) JavaScript cookies
OR
•In a database
OR
•Other options: session variables: kept on the server. Extra credit opportunity.
![Page 14: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/14.jpg)
Book mark project
(subject of book chapter and zipped file to be made available)
Uses
• localStorage to store id and password on client computer
• database to store the sites and the finders– included the encrypted digest of the
passwords.
![Page 15: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/15.jpg)
Oscars application
• Tables suggested were– people– Movies– Roles– Nominations
• So what is the ERD?
![Page 16: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/16.jpg)
My answer
• 4 tables
movies
mid
name
….
people
pid
name
…
roles
rid
mid
pid
role (director,actor,etc.)
nominations
aid
rid
category
win
…
In most cases, peoplehave only 1 role. Affleck is an exception.In most cases, awards are for 1 role. Producingis an exception. Some roles are notnominated for anything,hence the 0.
0
![Page 17: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/17.jpg)
Adaptive select options
• Background: for the oscars application, would need to locate a movie and a person to enter information on role
• Made a first attempt.– very simple people table– http://socialsoftware.purchase.edu/
jeanine.meyer/oscars/inputpeople.php– http://socialsoftware.purchase.edu/
jeanine.meyer/oscars/chooseperson.php
![Page 18: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/18.jpg)
Recall
• multi-use php scripts
• Combine the html form script with the php responding to the form script.
• Advantages: fewer scripts and make changes in both
• Disadvantages: more complex
• I used this technique for script to enter new people into table.
![Page 19: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/19.jpg)
<html><head><title>Adding people to db</title> </head><body><?phprequire("opendbo.php");$tname = "people";if (isset($_POST['submitted'] )) {$pname = $_POST['pname'];$pname = trim($pname);$pname = addSlashes($pname);$query = "INSERT INTO $tname values ('0','$pname')";$result = mysqli_query($link,$query);if ($result) {
print("The person was successfully added.<br>\n"); }else {
print ("The person was NOT successfully added. <br>\n"); }$submitted = FALSE;mysqli_close($link);print ("<a href=\"inputpeople.php\">Submit another person </a><br>");} //ends if submitted
![Page 20: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/20.jpg)
else {print ("<h1>Add a person to the table of people <br>\n
</h1> ");print ("<form action=\"inputpeople.php\" method=post>\n");print ("Person's name <input type=text name=\"pname\"
size=50><br>\n");print ("<input type=hidden name=\"submitted\"
value=\"TRUE\"><br>\n");print ("<input type=submit name=\"submit\" value=\"Submit
person.\"><br>\n");print ("</form><br>\n");}?></body></html>
![Page 21: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/21.jpg)
Simple select script<html><head><title>Select person </title> </head> <body><h3> Select a person </h3>NOTE: Start of program: goes to non-existent file<form action="blah.php" ><p>Person <select name='person'><?phprequire ("opendbo.php");$query="SELECT * FROM people";$result = mysqli_query($link,$query);while ($row=mysql_fetch_array($result)){ $pid=$row['pid']; $pname=$row['pname']; print ("<option value='$pid'>$pname</option \n"); }mysql_close($link);print ("</select>");print ("<input type=submit name=submit value=\"Choose!\"> <br>\n");print ("</form>");?></body> </html>
![Page 22: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/22.jpg)
What's wrong?
• Doesn't really scale.
• There could be a very long list
• So…make it so that early items on list are dropped if they are before what the user types into a field
![Page 23: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/23.jpg)
How
• Use two fields: regular text box input and select
• use onkeyup to invoke a program to remove items
• Also felt need to add feature to re-populate the list
• Mostly done using JavaScript: on the client machine, after the php has produced the original select HTML markup
![Page 24: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/24.jpg)
Adaptive select
• http://socialsoftware.purchase.edu/jeanine.meyer/oscars/choosepersonA.php
![Page 25: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/25.jpg)
var plistref;var wholelist = new Array();function init() { plistref=document.getElementById("plist"); plistref.selectedIndex = 0; for (var i=0;i<plistref.length;i++){ wholelist.push(plistref.options[i]); } document.f.field.value = ""; return false;}
![Page 26: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/26.jpg)
function repopulatelist(){ while(plistref.options.length){ plistref.remove(0); } for (var i=0;i<wholelist.length;i++){ plistref.options.add(wholelist[i]);
} plistref.selectedIndex = 0; document.f.field.value = ""; return false;
}
![Page 27: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/27.jpg)
function adjustlist(){ var start = document.f.field.value; while (plistref.options.length) { if (start > plistref.options[0].text) {
plistref.remove(0); } else { break; }
}
}
![Page 28: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/28.jpg)
</script>
</head>
<body onload="init();">
<h3> Select a person </h3>
<br/> NOTE: start of application: invokes non-existent file
<form name="f" action="blah.php" >
<p>Person
<input type="text" name="field" onkeyup="adjustlist();"/> <br/>
<select name='person' id="plist">
![Page 29: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/29.jpg)
<?phprequire ("opendbo.php");$query="SELECT * FROM people ORDER BY pname";$result = mysqli_query($link,$query);while ($row=mysql_fetch_array($result)){ $pid=$row['pid']; $pname=$row['pname']; print ("<option value='$pid'>$pname</option> \n"); }mysqli_close($link);print ("</select>");print ("<input type=submit name=submit
value=\"Choose!\"> <br>\n");print ("</form>");?><button onClick="repopulatelist();">Restore original list
</button></body> </html>
![Page 30: Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch](https://reader036.vdocument.in/reader036/viewer/2022070400/56649f125503460f94c24f5a/html5/thumbnails/30.jpg)
Classwork/Homework
• Practice with creating tables, writing scripts for input AND display– including using SELECT query for specific set of
records
• Study notes and study resources• Start studying for midterm.
– there will be ER/DFD questions for something…
• Come to next class with questions.