creating databases local storage. join & split classwork: show 1 table application. share...

Creating DatabasesLocal storage. join & split

Classwork: show 1 table application.Share designs for oscars application.

Adaptive select. Homework: [Catch up]. Start studying

for midterm.

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.

Uses?

• ?

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

Information gathered

in cookies, localStorage, beacons, etc. For you, need to put it on (at least) two scales:

• Convenient to useless?

• Harmless to creepy?

HTML5 localStorage

• Items stored by name

localStorage.setItem(“score”,String(score));

…

lastscore = localStorage.getItem(“score”);

localStorage.removeItem(“score”);

Error checking

• It makes sense to do error checking, for example, using

• try { }catch(e) { alert(“problem with local Storage “+e)}

Example

• http://faculty.purchase.edu/jeanine.meyer/db/localstoragetest.html

• Store time and

• compute elapsed time since last stored.

• Remove last time stored.

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– ????

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.

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.

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.

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.

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.

Oscars application

• Tables suggested were– people– Movies– Roles– Nominations

• So what is the ERD?

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

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

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.

<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

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>

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>

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

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

Adaptive select

• http://socialsoftware.purchase.edu/jeanine.meyer/oscars/choosepersonA.php

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;}

function adjustlist(){ var start = document.f.field.value; while (plistref.options.length) { if (start > plistref.options[0].text) {

plistref.remove(0); } else { break; }

}

}

</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">

<?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>

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.

creating databases local storage. join & split classwork: show 1 table application. share...

Documents