most difficult and confusing topics pre-class face-to-face meeting lis 7008 information technologies...

Most Difficult and Confusing Topics

Pre-Class Face-to-Face Meeting

LIS 7008

Information Technologies

LSU/SLIS

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

hw/hw1.html

– See HTML code• In IE: View Source; in Firefox: ViewPage Source

Project• Project Description

– http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/project/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 …

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

0.5

2.0

3.0

1.1

1.2

2.1

2.2

2.3

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

UpdateRequirements

ChooseFunctionality

BuildPrototype

InitialRequirements

WriteSpecification

CreateSoftware

WriteTest 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/su09/Tutorial/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/your_file

Entity-Relationship Modeling

• For database design

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

Structured Information• Field An “atomic” unit of data

– number, string, true/false, …

• Record A 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 Key The field that uniquely identifies a record– 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 TopicWhy is this a bad approach?

Student ID Last Name First Name Department IDDepartmentCourse ID Course description Grades email1 Arrows John EE EE LIS7008 Information Technologies 90 jarrows@lsu1 Arrows John EE Elec Engin ee750 Communication 95 ja_2002@yahoo2 Peters Kathy HIST HIST LIS 7008 Informatino Technology 95 kpeters2@lsu2 Peters Kathy HIST history hist405 American History 80 kpeters2@lsu3 Smith Chris HIST history hist405 American History 90 smith2002@lsu4 Smith John SLIS Info Sci LIS7008 Information Technology 98 js03@lsu

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

Department ID DepartmentEE Electronic EngineeringHIST HistorySLIS Library/Information Sci

Course ID Course DescriptionLIS7008 Information Technologiesee750 Communicationhist405 American History

Student ID Course ID Grades1 LIS7008 901 ee750 952 LIS7008 952 hist405 803 hist405 904 LIS7008 98

Student ID Last Name First Name Department ID email1 Arrows John EE jarrows@lsu2 Peters Kathy HIST kpeters2@lsu3 Smith Chris HIST smith2002@lsu4 Smith John SLIS js03@lsu

Student Table

Department Table Course Table

Enrollment 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/Entity-relationship_model

http://en.wikipedia.org/wiki/Entity-relationship_model

Example of Join

Student ID Last Name First Name Department ID email1 Arrows John EE jarrows@lsu2 Peters Kathy HIST kpeters2@lsu3 Smith Chris HIST smith2002@lsu4 Smith John SLIS js03@lsu

Student Table

Department ID DepartmentEE Electronic EngineeringHIST HistorySLIS Library/Information Sci

Department Table

Student ID Last Name First Name Department IDDepartment email1 Arrows John EE Electronic Engineering jarrows@lsu2 Peters Kathy HIST History kpeters2@lsu3 Smith Chris HIST History smith2002@lsu4 Smith John SLIS Library/Information Sci js03@lsu

“Joined” 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

Student ID Department1 Electronic Engineering2 History3 History4 Library/Information Sci

SELECT Student ID, Department

Restrict

Student ID Last Name First Name Department IDDepartment email2 Peters Kathy HIST History kpeters2@lsu3 Smith Chris HIST History smith2002@lsu


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

EnrollmentStudentCourseGrade…

StudentStudent IDFirst nameLast nameDepartmentE-mail…

CourseCourse IDCourse Name…

DepartmentDepartment IDDepartment Name…

has

has associated with

offered by

Types of Relationships

1-to-1 1:1

1-to-Many 1:M

Many-to-ManyM:N

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

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

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 DeptID = “HIST”

Restrict Operators

• Each SELECT contains a single WHERE

• Numeric comparison <, >, =, <>, …

• e.g., grade<80

• Boolean operations – e.g., Name = “John” AND DeptID <> “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/su09/

SampleDB/Access2007/Access2007.html

• Other people’s tutorials: – http://inpics.net/tutorials/access2007/basics.html– http://www.officetutorials.com/Access

%202007%20tut.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/su09/SampleDB/Access2000/Access2000.html

• Other people’s tutorials: – https://www.courses.psu.edu/infsy/infsy540_gjy1/

access_tutorial_2000.html

– http://www.cwnresearch.com/resources/databases/access/tutorials/access2000/Access2000Tutorial.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

• 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

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 variablevar b = true; create a Boolean b and set it to “true”var n = 1;create a number n and set it to 1var m = 1.4; create a number m and set it to 1.4var greeting = “hello”; create a string greeeting and set it to

“hello”b+n: not allowed (because of different data types)!

JavaScript Operators• -x reverse the sign of x (negation) • 6+5 Add 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 = 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

JavaScript Statements• In JavaScript, instructions end with a semicolon

– If missing at end of line, it is automatically inserted

• Simple assignment statementscelsius = 5/9 * (f-32);

• Statements that invoke a methodTemperature.toCelsius(104);

• Return a value from a methodreturn celsius;

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

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 true if x and y are equal

• x != y true if x and y are not equal

• x > y true if x is greater than y

• x <= y true if x is smaller than or equal to y

• x && y true if both x and y are true

• x || y true if either x or y is true

• !x 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 5 6 7 8 9 10 11

S a r a h P a l i n

Simplest JavaScript Example<HTML><HEAD>

<TITLE>My first script</TITLE></HEAD><BODY BGCOLOR=WHITE><H1>

<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">document.write("Hello, world!");</SCRIPT>

</H1></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/su09/JavaScript/helloworld.html

Placement• JavaScript functions are usually in the

<head> section

• Functions are never executed until called.

<HTML><head><script language="JavaScript" type="text/javascript"></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• onMouseover: the mouse moved over an object

– Try: http://www.dynamicdrive.com/dynamicindex15/domroll.htm

• onMouseout: the mouse moved off an object

• onClick: the user clicked on an object

HTML “Forms”• Accept input and display output for JavaScript• Please read the HTML text book chapter about

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

JavaScript codevar num = eval(document.input.number.value);document.output.number.value = 10;

Reads in a valueeval function turns it into a number

Changes the value in the textbox

Hands On: Adopt a JavaScript Program

• Launch a Web browser– http://www.csc.lsu.edu/~wuyj/Teaching/7008/su09/JavaScript/

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

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.

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

• If you have any questions about JavaScript:– Email me, or– Ask on Moodle.

most difficult and confusing topics pre-class face-to-face meeting lis 7008 information technologies...

Documents