LSUSLIS Most Difficult and Confusing Topics PreClass FacetoFace

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

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

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/su 09/hw/ hw 1. html – See HTML code • In IE: View Source; in Firefox: View Page Source

Project • Project Description – http: //www. csc. lsu. edu/~wuyj/Teaching/7008/su 09/proj ect/index_su 09. 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 …

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

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

The Waterfall Model Requirements Specification Software Test Plan

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, …)

The Spiral Model 1. 2 2. 3 0. 5 1. 0 2. 0 3. 0 1. 1 2. 2

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

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

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

FTP • Upload your files (homework, project) onto SLIS server • Client: your machine; Server: SLIS machine • Tutorial – http: //www. csc. lsu. edu/~wuyj/Teaching/7008/su 09/Tut orial/File. Zilla_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/su 09/your_folder/yo ur_file

Entity-Relationship Modeling • For database design

• Databases – 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). • Data. Base 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

Structured Information • Field An “atomic” unit of data • Record A collection of related fields • Table A collection of related records • Primary Key record The field that uniquely identifies a – number, string, true/false, … – Each record is one row in the table – Each field is one column in the table – Values of a primary key must be unique • Database A collection of tables

A Simple Example primary key

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

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

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

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

A Normalized Relational Database Student Table Department Table Enrollment Table Course Table

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

Example of Join Student Table “Joined” Table Department Table

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.

Project New Table SELECT Student ID, Department

Restrict New Table WHERE Department ID = “HIST”

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

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

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

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

Ride. Finder 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

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

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

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

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 Dept. ID = “HIST”

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

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)

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

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

Access 2007 Tutorials • My tutorial: – http: //csc. lsu. edu/~wuyj/Teaching/7008/su 09/Sam ple. DB/Access 2007. html • Other people’s tutorials: – http: //inpics. net/tutorials/access 2007/basics. html – http: //www. officetutorials. com/Access%202007% 20 tut. DOC

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

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

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

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

Access 2000 Tutorials • My tutorial: http: //csc. lsu. edu/~wuyj/Teaching/7008/su 09/Sam ple. DB/Access 2000. html • Other people’s tutorials: – https: //www. courses. psu. edu/infsy 540_gjy 1/acces s_tutorial_2000. html – http: //www. cwnresearch. com/resources/databases/acces s/tutorials/access 2000/Access 2000 Tutorial. html

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

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 • Java. Script [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

• Data types – Boolean: – Number: – String: Javascript Variables true, false 5, 9, 3. 1415926 “Hello World” • A “variable” holds a value of a specific data type – Represented as symbols: x, celsius • In Java. Script, 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)!

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

Java. Script Statements • In Java. Script, 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. to. Celsius(104); • Return a value from a method return celsius;

Java. Script 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 convert. To. Celsius(f) { //f is the parameter var celsius = 5/9 * (f-32); return celsius; c = convert. To. Celsius(60); //this calls the function, } //and pass 60 to f Call the function this way: var tmpf = 60; c = convert. To. Celsius(tmpf); Note: tmpf is replaced by 60 return the value stored in celsius to c function convert. To. Celsius(f) { var celsius = 5/9 * (f-32); return celsius; }

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

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

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.

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

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.

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 S a r a h 5 6 7 8 9 10 11 P a l i n

Simplest Java. Script Example <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H 1> <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> document. write("Hello, world!"); </SCRIPT> </H 1> </BODY> </HTML> Note: Create an html file and use a browser to run it! Try it at: http: //www. csc. lsu. edu/~wuyj/Teaching/7008/su 09/Java. Script/helloworld. html

Placement • Java. Script functions are usually in the <head> section • Functions are never executed until called. <HTML> <head> <script language="Java. Script" type="text/javascript"> <!-function calculate() { var num = eval(document. input. number. value); … document. output. number. value = total; } //--> </script> </head> … </HTML>

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 • on. Mouseover: the mouse moved over an object – Try: http: //www. dynamicdrive. com/dynamicindex 15/domroll. htm • on. Mouseout: the mouse moved off an object • on. Click: the user clicked on an object

HTML “Forms” • Accept input and display output for Java. Script • Please read the HTML text book chapter about Forms In HTML <form name="input" action=""> Please enter a number: <input size="10" value=" " name="number"/> </form> <form name="output" action=""> The sum of all numbers up to the number above is <input size="10" value=" " name="number" readonly="true"/> </form> Reads in a value eval function turns it into a number Java. Script code var num = eval(document. input. number. value); document. output. number. value = 10; Changes the value in the textbox

Hands On: Adopt a Java. Script Program • Launch a Web browser – http: //www. csc. lsu. edu/~wuyj/Teaching/7008/su 09/Java. Script/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 HW 6

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.

Java. Script 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 Java. Script? Read this: – http: //www. csc. lsu. edu/~wuyj/Teaching/7008/su 09/JScript. Talk/jstalk_08. html • If you have any questions about Java. Script: – Email me, or – Ask on Moodle.