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

Slides:



Advertisements
Similar presentations
JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.
Advertisements

INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Thursday, September 19, 2013 Session 3: JavaScript.
Java Script Session1 INTRODUCTION.
The Web Warrior Guide to Web Design Technologies
Chapter 6 UNDERSTANDING AND DESIGNING QUERIES AND REPORTS.
LBSC 690 Session #7 Structured Information: Databases Jimmy Lin The iSchool University of Maryland Wednesday, October 15, 2008 This work is licensed under.
Programming Week 9 LBSC 690 Information Technology.
Automating Tasks With Macros
Working with JavaScript. 2 Objectives Introducing JavaScript Inserting JavaScript into a Web Page File Writing Output to the Web Page Working with Variables.
Web Infrastructure Week 3 INFM 603. The Key Ideas Questions Structured Programming Modular Programming Data Structures Object-Oriented Programming.
LBSC 690 Session #10 Programming, JavaScript Jimmy Lin The iSchool University of Maryland Wednesday, November 5, 2008 This work is licensed under a Creative.
Data Structures Week 4 INFM 603. The Key Ideas Structured Programming  Modular Programming  Data Structures Object-Oriented Programming.
A Guide to Oracle9i1 Introduction To Forms Builder Chapter 5.
Programming Week 5 LBSC 690 Information Technology.
Tutorial 10 Programming with JavaScript
Programming Week 5 LBSC 690 Information Technology.
XP 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial 10.
LBSC 690: Session 10 Programming, JavaScript Jimmy Lin College of Information Studies University of Maryland Monday, November 12, 2007.
Databases Week 7 LBSC 690 Information Technology.
Week 6 LBSC 690 Information Technology
Databases Week 6 LBSC 690 Information Technology.
LBSC 690: Session 7 Relational Databases
Relational Databases Week 7 LBSC 690 Information Technology.
PHP Programming Part II and Database Design Session 3 INFM 718N Web-Enabled Databases.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
1 Relational Databases. 2 Find Databases here… 3 And here…
1 Web Developer & Design Foundations with XHTML Chapter 6 Key Concepts.
Relational Databases Week 13 LBSC 671 Creating Information Infrastructures.
CPSC 203 Introduction to Computers T59 & T64 By Jie (Jeff) Gao.
COMPUTER PROGRAMMING Source: Computing Concepts (the I-series) by Haag, Cummings, and Rhea, McGraw-Hill/Irwin, 2002.
1 PHP and MySQL. 2 Topics  Querying Data with PHP  User-Driven Querying  Writing Data with PHP and MySQL PHP and MySQL.
INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Wednesday, March 5, 2014 Session 6: Relational.
PHP meets MySQL.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
Databases Session 5 LIS 7008 Information Technologies LSU/SLIS.
Tutorial 7 Creating Forms. Objectives Session 7.1 – Create an HTML form – Insert fields for text – Add labels for form elements – Create radio buttons.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
XP Tutorial 10New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with JavaScript Creating a Programmable Web Page for North Pole.
Tutorial 10 Programming with JavaScript. XP Objectives Learn the history of JavaScript Create a script element Understand basic JavaScript syntax Write.
Tutorial 10 Programming with JavaScript
Done by: Hanadi Muhsen1 Tutorial 1.  Learn the history of JavaScript  Create a script element  Write text to a Web page with JavaScript  Understand.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
Databases Week 5 LBSC 690 Information Technology.
Chapter 17 Creating a Database.
Relational Databases Week 11 LBSC 671 Creating Information Infrastructures.
XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
XP New Perspectives on Microsoft Office Access 2003 Tutorial 10 1 Microsoft Office Access 2003 Tutorial 10 – Automating Tasks With Macros.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
8 Chapter Eight Server-side Scripts. 8 Chapter Objectives Create dynamic Web pages that retrieve and display database data using Active Server Pages Process.
1) PHP – Personal Home Page Scripting Language 2) JavaScript.
CPSC 203 Introduction to Computers T97 By Jie (Jeff) Gao.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Microsoft Office 2013 Try It! Chapter 4 Storing Data in Access.
PHP Form Processing * referenced from
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Programming Session 6 LBSC 690 Information Technology.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
Data Modeling Session 12 INST 301 Introduction to Information Science.
JavaScript and AJAX 2nd Edition Tutorial 1 Programming with JavaScript.
XP Tutorial 10New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
Software Engineering Session 12 INFM 603. Software Software represents an aspect of reality –Input and output represent the state of the world –Software.
Intro to PHP & Variables
T. Jumana Abu Shmais – AOU - Riyadh
Week 5 LBSC 690 Information Technology
Tutorial 10: Programming with javascript
Week 6 LBSC 690 Information Technology
Presentation transcript:

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: – hw1.htmlhttp:// hw1.html –See HTML code In IE: View  Source; in Firefox: View  Page Source

Project Project Description – ect/index_su09.htmlhttp:// 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

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 Choose Functionality Build Prototype Initial Requirements Write Specification Create Software Write Test Plan

FTP Upload your files (homework, project) onto SLIS server Client: your machine; Server: SLIS machine Tutorial – 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: ur_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 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

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, , 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 “ 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 TableCourse 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 relationship_modelhttp://en.wikipedia.org/wiki/Entity- relationship_model

Example of Join Student TableDepartment Table “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 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 … Student Student ID First name Last name Department … Course Course ID Course Name … Department Department ID Department Name … has associated with offered by

Types of Relationships 1-to-1 1:1 1-to-Many 1:M Many-to-Many M: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

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: – pleDB/Access2007/Access2007.htmlhttp://csc.lsu.edu/~wuyj/Teaching/7008/su09/Sam pleDB/Access2007/Access2007.html Other people’s tutorials: – – 20tut.DOChttp:// 20tut.DOC

Using Microsoft Access 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: pleDB/Access2000/Access2000.html pleDB/Access2000/Access2000.html Other people’s tutorials: – s_tutorial_2000.htmlhttps:// s_tutorial_2000.html – s/tutorials/access2000/Access2000Tutorial.htmlhttp:// 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

Javascript Variables Data types –Boolean: true, false –Number: 5, 9, –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)!

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

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

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

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 S a r a h P a l i n

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:

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; } //--> …

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

Hands On: Adopt a JavaScript Program Launch a Web browser – ctor.htmlhttp:// 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: – If you have any questions about JavaScript: – me, or –Ask on Moodle.