Transcript Slides

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/su09/hw/
hw1.html
– See HTML code
• In IE: View Source; in Firefox: ViewPage Source
Project
• Project Description
– http://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 …
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.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/su09/Tuto
rial/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
Entity-Relationship Modeling
• For database design
• Database
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).
• 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
• 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
Student ID Last Name
1
Arrows
1
Arrows
2
Peters
2
Peters
3
Smith
4
Smith
First Name
John
John
Kathy
Kathy
Chris
John
Department IDDepartmentCourse ID Course description Grades
EE
EE
LIS7008 Information Technologies 90
EE
Elec Engin ee750
Communication
95
HIST
HIST
LIS 7008 Informatino Technology
95
HIST
history
hist405 American History
80
HIST
history
hist405 American History
90
SLIS
Info Sci
LIS7008 Information Technology
98
Discussion Topic
Why is this a bad approach?
email
jarrows@lsu
ja_2002@yahoo
kpeters2@lsu
kpeters2@lsu
smith2002@lsu
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
Student Table
Student ID
1
2
3
4
Last Name
Arrows
Peters
Smith
Smith
Department Table
Department ID
EE
HIST
SLIS
Department
Electronic Engineering
History
Library/Information Sci
First Name
John
Kathy
Chris
John
Department ID
EE
HIST
HIST
SLIS
Course Table
Course ID
LIS7008
ee750
hist405
Course Description
Information Technologies
Communication
American History
Enrollment Table
Student ID
1
1
2
2
3
4
Course ID
LIS7008
ee750
LIS7008
hist405
hist405
LIS7008
email
jarrows@lsu
kpeters2@lsu
smith2002@lsu
js03@lsu
Grades
90
95
95
80
90
98
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
Student ID
Last Name
1 Arrows
2 Peters
3 Smith
4 Smith
Department Table
First Name
John
Kathy
Chris
John
Department ID
EE
HIST
HIST
SLIS
email
jarrows@lsu
kpeters2@lsu
smith2002@lsu
js03@lsu
Department ID
EE
HIST
SLIS
Department
Electronic Engineering
History
Library/Information Sci
“Joined” Table
Student ID
1
2
3
4
Last Name
Arrows
Peters
Smith
Smith
First Name
John
Kathy
Chris
John
Department IDDepartment
EE
Electronic Engineering
HIST
History
HIST
History
SLIS
Library/Information Sci
email
jarrows@lsu
kpeters2@lsu
smith2002@lsu
js03@lsu
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 Last Name
1
Arrows
2
Peters
3
Smith
4
Smith
First Name
John
Kathy
Chris
John
Department IDDepartment
EE
Electronic Engineering
HIST
History
HIST
History
SLIS
Library/Information Sci
email
jarrows@lsu
kpeters2@lsu
smith2002@lsu
js03@lsu
SELECT Student ID, Department
Student ID
1
2
3
4
Department
Electronic Engineering
History
History
Library/Information Sci
Restrict
New Table
Student ID Last Name
1
Arrows
2
Peters
3
Smith
4
Smith
First Name
John
Kathy
Chris
John
Department IDDepartment
EE
Electronic Engineering
HIST
History
HIST
History
SLIS
Library/Information Sci
email
jarrows@lsu
kpeters2@lsu
smith2002@lsu
js03@lsu
WHERE Department ID = “HIST”
Student ID Last Name
2
Peters
3
Smith
First Name Department IDDepartment
Kathy
HIST
History
Chris
HIST
History
email
kpeters2@lsu
smith2002@lsu
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
Course ID
Course Name
…
Student
Student ID
First name
Last name
Department
E-mail
…
offered by
Department
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
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/Sam
pleDB/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/Sam
pleDB/Access2000/Access2000.html
• Other people’s tutorials:
– https://www.courses.psu.edu/infsy/infsy540_gjy1/acces
s_tutorial_2000.html
– http://www.cwnresearch.com/resources/databases/acces
s/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
• 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 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)!
JavaScript 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
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;
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
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
function convertToCelsius(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
true if either x or y is true
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 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">
<!-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
• 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
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
JavaScript code
var num = eval(document.input.number.value);
document.output.number.value = 10;
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/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
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.