1. Most Difficult and Confusing Topics Pre-Class Face-to-Face Meeting LIS 7008 Information Technologies LSU/SLIS

2. Outline Web page & HTML Course Project FTP Entity-Relationship Modeling for Database Design Javascript

3. Web page & HTML We will talk a lot about HTML tags The text is a good resource –Rob Huddleston, "HTML, XHTML, and CSS: Your visual blueprint for designing effective Web pages” A very simple Web page: –http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/hw/ hw1.htmlhttp://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/hw/ hw1.html –See HTML code In IE: View  Source; in Firefox: View  Page Source

4. Project Project Description –http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/proj ect/index_su09.htmlhttp://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/proj ect/index_su09.html –Start to think about it early –Start to contact your client at the beginning of the semester (to collect needs and content) Best approach to the project –Rapid prototyping + waterfall model –Solicit needs and some content, build the structure with incomplete content, solicit feedback from client, collect more content, build a full-blown Website, test, fix, test more …

5. Three Software Design Models Waterfall model Spiral model Rapid prototyping model Combined: rapid prototyping + waterfall

6. The Waterfall Model Key insight: invest in the design stage –An hour of design can save a week of debugging! Requirements –Specifies what the software is supposed to do Specification –Specifies the design of the software Test plan –Specifies how you will know that it did it

7. The Waterfall Model Requirements Specification Software Test Plan

8. The Spiral Model Build what you think you need –Perhaps using the waterfall model Get a few users to help you debug it –First an “alpha” release, then a “beta” release Release it as a product (version 1.0) –Make small changes as needed (1.1, 1.2, ….) Save big changes for a major new release –Often based on a total redesign (2.0, 3.0, …)

9. The Spiral Model 1.0 0.5 2.0 3.0 1.1 1.2 2.1 2.2 2.3

10. Some Unpleasant Realities The waterfall model doesn’t work well –Requirements usually incomplete or incorrect The spiral model is expensive –Redesign leads to recoding and retesting

11. The Rapid Prototyping Model Goal: explore requirements –Without building the complete product Start with part of the functionality –That will (hopefully) yield significant insight Build a prototype –Focus on core functionality, not on efficiency Use the prototype to refine the requirements Repeat the process, expanding functionality

12. Rapid Prototyping + Waterfall Update Requirements Choose Functionality Build Prototype Initial Requirements Write Specification Create Software Write Test Plan

13. FTP Upload your files (homework, project) onto SLIS server Client: your machine; Server: SLIS machine Tutorial –http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/Tut orial/FileZilla/FileZilla_FTP.html Hands-on exercises –Upload a file onto the SLIS server (into your own account) –Check it with browser –Your URL: http://slis.lsu.edu/faculty/wu/7008/su09/your_folder/yo ur_file

14. Entity-Relationship Modeling For database design

15. Databases Database –DB is a collection of data, organized to support access –DB models some aspects of reality (such as university enrollment), not everything in the world. –DB has data itself, and the structure of data (for organizing data). DataBase Management System (DBMS) –Software to create and access databases –DBMS is at the level of programming language. Computer scientists design DBMS. Access is a DBMS. –LSU/CSC Dept. offers CSC 4402 DBMS. Relational Algebra –Special-purpose programming language

16. Structured Information FieldAn “atomic” unit of data –number, string, true/false, … RecordA collection of related fields Table A collection of related records –Each record is one row in the table –Each field is one column in the table Primary KeyThe field that uniquely identifies a record –Values of a primary key must be unique DatabaseA collection of tables

17. A Simple Example primary key

18. Registrar Example: Enrollment Query: which students are in which courses? –Relationship b/t students and courses is assigned What do we need to know about the students? –first name, last name, email, department What do we need to know about the courses? –course ID, description, enrolled students, grades

19. A “Flat File” Solution Using MS-Excel Discussion Topic Why is this a bad approach?

20. Goals of “Normalization” Save space –Save each fact only once More rapid updates –Every fact only needs to be updated once More rapid search –Finding something once is good enough Avoid inconsistency –Changing data once changes it everywhere

21. Relational Algebra Terminology Tables represent “relations” –“course ID” and “course description” are related –“Name” and “email address” are related. Named fields represent “attributes” –Attributes of Course: course ID, description, … –Attributes of Student: first name, last name, … Each row in the table is also called a “tuple” –The order of the rows is not important Queries specify desired conditions –The DBMS then finds data that satisfies them

22. A Normalized Relational Database Student Table Department TableCourse Table Enrollment Table

23. Approaches to Normalization For simple problems (like the homework) –Start with “binary relationships” Pairs of fields that are related, e.g., Student ID, Last Name –Group together wherever possible –Add keys where necessary For more complicated problems: –Need to do Entity Relationship (E-R) modeling before designing tables –If interested, read http://en.wikipedia.org/wiki/Entity- relationship_modelhttp://en.wikipedia.org/wiki/Entity- relationship_model

24. Example of Join Student TableDepartment Table “Joined” Table

25. Some Lingo “Primary Key” uniquely identifies a record –e.g. student ID in the Student table “Compound” primary key –Synthesize a primary key with a combination of fields –e.g., Student ID + Course ID in the Enrollment table “Foreign Key” in this table is a primary key in the other table –Note: it need not be unique in this table –E.g., Department ID in the Student table is a foreign key; it is a primary key in the Department table.

26. Project New Table SELECT Student ID, Department

27. Restrict New Table WHERE Department ID = “HIST”

28. Entity-Relationship Diagrams Graphical visualization of the data model Entities are captured in boxes Relationships are captured using arrows

29. Registrar E-R Diagram Enrollment Student Course Grade … Student Student ID First name Last name Department E-mail … Course Course ID Course Name … Department Department ID Department Name … has associated with offered by

30. Types of Relationships 1-to-1 1:1 1-to-Many 1:M Many-to-Many M:N

31. A More Complex E-R Diagram cadastral: a public record, survey, or map of the value, extent, and ownership of land as a basis of taxation. Source: US Dept. Interior Bureau of Land Management, Federal Geographic Data Committee Cadastral Subcommittee http://www.fairview-industries.com/standardmodule/cad-erd.htm

32. RideFinder Exercise Design a database to match passengers with available rides over Summer vacations –Drivers phone in available seats They want to know about interested passengers –Passengers call up looking for rides They want to know about available rides –These things happen in no particular order –Assign rides to passengers

33. Exercise Goals Identify the tables you will need –First decide what data you will save What questions will be asked? –Then decide how to group/split it into tables Start with binary relations if that helps Design the queries –Using join, project and restrict Add primary and foreign keys where needed

34. Exercise Logistics Work in groups of 3 or 4 Brainstorm data requirements for 5 minutes –Do passengers care about the price? –Do drivers care how much luggage there is? Develop tables and queries for 15 minutes –Don’t get hung up on one thing too long Compare you answers with another group –Should take about 5 minutes

35. Database “Programming” Natural language –Goal is ease of use e.g., Show me the last names of students in SLIS vocal queries –Ambiguity sometimes results in errors Structured Query Language (SQL) –Consistent, unambiguous interface to any DBMS –Simple command structure: e.g., SELECT Last name FROM Students WHERE Dept=SLIS –Useful standard for inter-process communications Visual programming (e.g., Microsoft Access) –Unambiguous, and easier to learn than SQL

36. The SELECT Command Project chooses columns –Based on their label Restrict chooses rows –Based on their contents e.g. department ID = “HIST” These can be specified together –SELECT Student ID, Dept WHERE DeptID = “HIST”

37. Restrict Operators Each SELECT contains a single WHERE Numeric comparison, =, <>, … e.g., grade<80 Boolean operations –e.g., Name = “John” AND DeptID <> “HIST”

38. Using Microsoft Access 2007 Create a DB –Click Blank Database –Define file name (e.g., mydb.accdb) –Click Create Create Tables –Click Create tab  click Table –In the Ribbon, click View  Design View –Define table name, save –Name your fields, specify field properties –Define Primary Key (a field of a table)

39. Create Records and Relationships Create Records –In the Ribbon, click View  Datasheet View –Input data for each record –Click Save icon when done Create/add Relationships –Click Database Tool tab –In the Ribbon, click Relationships  Show Table –To create/add a relationship between two tables: put cursor on one field of a table, click and drag it onto a field of another table

40. Create Queries Click Create  Query Design Select the tables involved Define fields and criteria Define query name, save Double click the query to run

41. Access 2007 Tutorials My tutorial: –http://csc.lsu.edu/~wuyj/Teaching/7008/su09/Sam pleDB/Access2007/Access2007.htmlhttp://csc.lsu.edu/~wuyj/Teaching/7008/su09/Sam pleDB/Access2007/Access2007.html Other people’s tutorials: –http://inpics.net/tutorials/access2007/basics.htmlhttp://inpics.net/tutorials/access2007/basics.html –http://www.officetutorials.com/Access%202007% 20tut.DOChttp://www.officetutorials.com/Access%202007% 20tut.DOC

42. Using Microsoft Access 2000-2003 Create a database called rides.mdb –File->New->Blank Database Specify the fields (columns) –“Create a Table in Design View” Fill in the records (rows) – Double-click on the icon for the table

43. Creating Fields Enter field name –Must be unique, but only within the same table Select field type from a menu –Use date/time for times –Use text for phone numbers Designate primary key (right mouse button) Save the table –That’s when you get to assign a table name

44. Entering Data Open the table –Double-click on the icon Enter new data in the bottom row –A new (blank) bottom row will appear Close the table –No need to “save” – data is stored automatically

45. Building Queries Copy ride.mdb to your computer “Create Query in Design View” –In “Queries” Choose two tables Pick each field you need using the menus –Unclick “show” to not project –Enter a criterion to “restrict” Save, exit, and reselect to run the query

46. Access 2000 Tutorials My tutorial: http://csc.lsu.edu/~wuyj/Teaching/7008/su09/Sam pleDB/Access2000/Access2000.html http://csc.lsu.edu/~wuyj/Teaching/7008/su09/Sam pleDB/Access2000/Access2000.html Other people’s tutorials: –https://www.courses.psu.edu/infsy/infsy540_gjy1/acces s_tutorial_2000.htmlhttps://www.courses.psu.edu/infsy/infsy540_gjy1/acces s_tutorial_2000.html –http://www.cwnresearch.com/resources/databases/acces s/tutorials/access2000/Access2000Tutorial.htmlhttp://www.cwnresearch.com/resources/databases/acces s/tutorials/access2000/Access2000Tutorial.html

47. Programming with Javascript For creating interactive (rather than static) Websites

48. Programming for the Web PHP (Hypertext Preprocessor) –[Server-side] HTML embedded scripting language –Forms encode field values into a URL –Web server passes field values to a PHP program –Program generates a Web page as a response JavaScript [Client-side program, interpreted by browser] –Human-readable “source code” sent to the browser –Web browser runs the program –Our focus in LIS 7008! Java applets [Client-side program, must be compiled before running] –Machine-readable “bytecode” sent to browser –Web browser runs the program

49. Javascript Variables Data types –Boolean: true, false –Number: 5, 9, 3.1415926 –String: “Hello World” A “variable” holds a value of a specific data type –Represented as symbols: x, celsius In JavaScript, var “declares” a variable var b = true;create a Boolean b and set it to “true” var n = 1;create a number n and set it to 1 var m = 1.4; create a number m and set it to 1.4 var greeting = “hello”; create a string greeeting and set it to “hello” b+n: not allowed (because of different data types)!

50. JavaScript Operators -xreverse the sign of x (negation) 6+5Add 6 and 5 (numeric) “Hello” + “World” Concatenate two strings 2.1 * 3 Multiply two values x++increase value of x by 1 Assign values: x = 5set the value of x to be 5 x += yx = x + y x *= 5x = x * 5 x++ x = x+1 (increase value of x by 1) x == y (note: double equal sign) x is equal to y

51. JavaScript Statements In JavaScript, instructions end with a semicolon –If missing at end of line, it is automatically inserted Simple assignment statements celsius = 5/9 * (f-32); Statements that invoke a method Temperature.toCelsius(104); Return a value from a method return celsius;

52. JavaScript Functions Reusable code for complex “statements” –Takes one or more values as “parameters” –Returns at most one value as the “result” Define a function this way: function convertToCelsius(f) { //f is the parameter var celsius = 5/9 * (f-32); return celsius; } c = convertToCelsius(60); //this calls the function, //and pass 60 to f function convertToCelsius(f) { var celsius = 5/9 * (f-32); return celsius; } Call the function this way: var tmpf = 60; c = convertToCelsius(tmpf); Note: tmpf is replaced by 60 return the value stored in celsius to c

53. Basic Control Structures Sequential –Perform instructions one after another Conditional –Perform instructions contingent on something Repetition –Repeat instructions until a condition is met Not much different from cooking recipes! Please Spend time on this (Shelly & Vermaat text, Chapter 13 Programming Languages and Program Development, p. 688-689).

54. Sequential Control Structure a = 2; b = 3; c = a * b; What is c now? 6

55. Conditional Selection Control Structure if (gender == “male”) { //Action 1: greeting = “Hello, Sir!”; } else { //Action 2: greeting = “Hello, Madam!”; } Note: the double slashes (//) mean comments for programmers, rather than statements for computers.

56. Generating Boolean Results x == y true if x and y are equal x != y true if x and y are not equal x > ytrue if x is greater than y x <= y true if x is smaller than or equal to y x && ytrue if both x and y are true x || ytrue if either x or y is true !x true if x is false Do not use a single &

57. Repetition Control Structure (Loop) Program Example 1: n = 1; while ( n <= 10) { document.writeln(n); n++; } Program 2: For (n = 1; n <= 10; n++) { document.writeln(n); } Note: “Document” means the screen. Writeln(n): write n in a separate line.

58. Arrays A set of elements –For example, the number of days in each month Each element is assigned an index (0,1,2,3…) –A number used to refer to that element For example, x[4] is the fifth element (count from zero!) –Arrays and repetitions/loops work naturally together 0 1 2 3 4 5 6 7 8 9 10 11 S a r a h P a l i n

59. Simplest JavaScript Example My first script document.write("Hello, world!"); Note: Create an html file and use a browser to run it! Try it at: http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/JavaScript/helloworld.html

60. Placement JavaScript functions are usually in the section Functions are never executed until called. <!-- function calculate() { var num = eval(document.input.number.value); … document.output.number.value = total; } //--> …

61. Handling Events Events: –Actions that users perform while visiting a page Use event handlers to respond to events –Event handlers triggered by events –Examples of event handlers in Javascript onMouseover: the mouse moved over an object –Try: http://www.dynamicdrive.com/dynamicindex15/domroll.htmhttp://www.dynamicdrive.com/dynamicindex15/domroll.htm onMouseout: the mouse moved off an object onClick: the user clicked on an object

62. HTML “Forms” Accept input and display output for JavaScript Please read the HTML text book chapter about Forms In HTML Please enter a number: The sum of all numbers up to the number above is JavaScript code var num = eval(document.input.number.value); document.output.number.value = 10; Reads in a value eval function turns it into a number Changes the value in the textbox

63. Hands On: Adopt a JavaScript Program Launch a Web browser –http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/JavaScript/sele ctor.htmlhttp://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/JavaScript/sele ctor.html See how it behaves if you are 13 (or 65) View source and read the program Save a local copy Make some changes and see how it works This is actually HW6

64. Programming Tips Attention to detail! –Careful where you place that comma, semi-colon, etc. Write a little bit of code at a time –Add some functionality, make sure it works, then move on. –Don’t try to write a large program all at once! (otherwise very often you will have no clue if it does not work) Debug by viewing the “state” of your program –Print values of variables using document.writeln(…) –Check whether the value is what you expected.

65. JavaScript Resources Google “javascript” –Tutorials: to learn to write programs –Code: to do things you want to do –See resources on syllabus Web page Javascript books available in the Library. how to steal JavaScript? Read this: –http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/JScriptTalk/jstalk_08.htmlhttp://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/JScriptTalk/jstalk_08.html If you have any questions about JavaScript: –Email me, or –Ask on Moodle.