1. Creating Databases Local storage. join & split Classwork: show 1 table application. Share designs for oscars application. Adaptive select. Homework: [Catch up]. Start studying for midterm.

2. 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.

3. Uses? ?

4. 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

5. Information gathered in cookies, localStorage, beacons, etc. For you, need to put it on (at least) two scales: Convenient to useless? Harmless to creepy?

6. HTML5 localStorage Items stored by name localStorage.setItem(“score”,String(score)); … lastscore = localStorage.getItem(“score”); localStorage.removeItem(“score”);

7. Error checking It makes sense to do error checking, for example, using try { } catch(e) { alert(“problem with local Storage “+e) }

8. Example http://faculty.purchase.edu/jeanine.meyer/ db/localstoragetest.htmlhttp://faculty.purchase.edu/jeanine.meyer/ db/localstoragetest.html Store time and compute elapsed time since last stored. Remove last time stored.

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

10. 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.

11. 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(“+”); produces the original array.

12. 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.

13. 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.

14. 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.

15. Oscars application Tables suggested were –people –Movies –Roles –Nominations So what is the ERD?

16. 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, people have only 1 role. Affleck is an exception. In most cases, awards are for 1 role. Producing is an exception. Some roles are not nominated for anything, hence the 0. 0

17. 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.me yer/oscars/inputpeople.phphttp://socialsoftware.purchase.edu/jeanine.me yer/oscars/inputpeople.php –http://socialsoftware.purchase.edu/jeanine.me yer/oscars/chooseperson.phphttp://socialsoftware.purchase.edu/jeanine.me yer/oscars/chooseperson.php

18. 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.

19. Adding people to db <?php require("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. \n"); } else { print ("The person was NOT successfully added. \n"); } $submitted = FALSE; mysqli_close($link); print (" Submit another person "); } //ends if submitted

20. else { print (" Add a person to the table of people \n "); print (" \n"); print ("Person's name \n"); print (" \n"); } ?>

21. Simple select script Select person Select a person NOTE: Start of program: goes to non-existent file Person <?php require ("opendbo.php"); $query="SELECT * FROM people"; $result = mysqli_query($link,$query); while ($row=mysql_fetch_array($result)) { $pid=$row['pid']; $pname=$row['pname']; print (" $pname</option \n"); } mysql_close($link); print (" "); print (" \n"); print (" "); ?>

22. 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

23. 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

24. Adaptive select http://socialsoftware.purchase.edu/jeanine. meyer/oscars/choosepersonA.phphttp://socialsoftware.purchase.edu/jeanine. meyer/oscars/choosepersonA.php

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

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

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

28. Select a person NOTE: start of application: invokes non-existent file Person

29. <?php require ("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 (" $pname \n"); } mysqli_close($link); print (" "); print (" \n"); print (" "); ?> Restore original list

30. 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.