Web-Database IntegrationComputer Mediated Communication

Week 9

LIS 7008

Information Technologies

LSU/SLIS

Agenda

• Mid-term Exam

• E-R Modeling

• Project

• Web-based Integration: PHP

• Computer Mediated Communication

Mid-term Grades

Predicted Final Grade = C + H + P + M + F= (6-10)x10% + 100(?)x15% + 100(?)x40% + Midx10% + Midx25%

Solution posted

0

10

20

30

40

50

60

70

80

90

100

1 2 3 4 5 6 7 8 9 101112131415161718192021222324252627

Avg=84

Project• Send me a short email (cc to members)

– Project manager

– Team members

– Techniques

– Users + user evaluation plan

• 6 weeks left before presentation (Rules of thumb)– 1/3 specification

– 1/6 coding

– 1/2 test planning, testing, and fixing!

• Dean will appear in presentation

Database Operations

• Join (whole story: due to normalization)

• Project

• Restrict

Entity-Relationship Diagrams

• A database models some aspect of reality…– ER diagrams are a way for graphically

visualizing this

• Entities are captured in boxes• Relationships are captured using arrows

• Exercise: 7008 Project Team Database– Problem statement

“Project Team” E-R Example

student team

implement-role

Join with role

project

creates

role

php-project ajax-project

d

1

1

M

M

1

1

Person

User needs1 M

Components of E-R Diagrams• Entities

– Types/ Classes • Subtypes (disjoint / overlapping)

– Attributes• Mandatory / optional

– Identifier (PK)

• Relationships– Existence

– Cardinality ratio: 1:1, 1:N, M:N

Making Tables from E-R Diagrams

• Pick a primary key for each entity• Build the tables (7008 Project DB)

– One per entity– Plus one per M:N relationship– Choose terse but memorable table and field names

• Check for parsimonious representation– Relational “normalization”– Redundant storage of computable values

• Implement using a DBMS

• 1NF: Single-valued indivisible (atomic) attributes– Split “John Smith” to two attributes as (“John”, “Smith”)– Model M:N implement-role relationship with a table

• 2NF: Attributes depend on complete primary key– (id, impl-role, name)(id, name)+(id, impl-role)

• (id, impl-role) is a relationship table

• 3NF: Attributes depend directly on primary key– (id, addr, city, state, zip)(id, addr, zip)+(zip, city, state)– Design choice: not to do this (almost always JOIN)

• 4NF: Divide independent M:N tables– (id, role, courses) (id, role) + (id, courses)

• 5NF: Don’t enumerate derivable combinations

Table Checklist

Normalized Table Structure

• Persons: id, fname, lname, userid, password

• Contacts: id, ctype, cstring

• Ctlabels: ctype, string

• Students: id, team, mrole

• Iroles: id, irole (M:N)

• Rlabels: role, string

• Projects: team, client, pstring

Discussion Points

• Websites that are really databases

• Deep vs. Surface Web

• Google vs. Web

Ways of Generating Web Pages

• Static: Written in a markup language– HTML, XML

• Dynamic: Generated using a program– Common Gateway Interface [Perl] (.cgi)– Java servlets

• Dynamic: Generated from a database– Cold Fusion (.cfm)– PHP (.php)

Why Database-Generated Pages?

• Remote access to a database – Client does not need the database software

• Serve rapidly changing information– e.g., Airline reservation systems– e.g., course registration

• Provide multiple “access points”– Query by subject, by date, by author, …

• Record user responses in the database– Your ticket, itinerary, payment

Issues to Consider• Benefits

– Multiple views– Data reuse– Scalable

• 30 courses, 300 courses (Moodle?)

– Access control

• Costs (down side)– Formally modeled– Complex (learn, design, implement, debug)– Brittle (relies on multiple communicating servers)– Not crawlable

• 90% Web

Three Ways to Serve Data

WebBrowser

Cold FusionServer

MicrosoftAccessDBMS

MicrosoftWeb Server .mdb

PHP-enabledWeb Server

mysqlDBMS

mysqldatabase

WAMP package: Windows, Apache, MySQL, PHP

(free)(free) (free)

OracleDBMS

Oracle database

Putting the Pieces Together

Web Server

HTML

CGI/PHP

Browser

SQL Query

Results

Database

http://www.secumd.org/html/index/index.cfm

http://us3.php.net/manual-lookup.php?pattern=happy

Embedded in HTML:

Microsoft “Data Access Pages”• Displays database content on Web pages

– Not very useful for changing database content

• Drag-and-drop design in Microsoft Access– “Reports” are designed for printing– “Pages” are designed for the Web

• Requirements:– Microsoft Web Server (not Apache)– IE 5 or higher Web browser (not Firefox)– “Office Web Components” on client machine

• IE 7 fails gracelessly without them!

Data Access Page ExampleDesignView:

WebPage:

Database

Server-side Programming

Interchange Language

Client-side Programming

Web Browser

Client Hardware

Server Hardware (PC, Unix)

(MySQL)

(PHP)

(HTML, XML)

(JavaScript)

(IE, Firefox)

(PC)

Bus

ines

sru

les

Inte

ract

ion

Des

ign

Inte

rfac

eD

esig

n

• Relational normalization• Structured programming• Software patterns• Object-oriented design• Functional decomposition

Main Idea

PHP Programming Environments• You need three systems on the same server:

– Apache (Web server)– PHP (Hypertext Preprocessor) server

• server-side HTML embedded scripting language

– MySQL (DBMS) server

• WampServer (for PC)– Includes GUI tools

• OTAL (Sun Unix) supports Web deployment– Requires a text editor (e.g., emacs) or FTP

Making PHP

----- HTML stuff -----

<?php

----- PHP stuff -----

?>

----- HTML stuff -----

http://---URL stuff---/xxxxx.php

Like Javascript

WampServer• Download and install

– From http://www.en.wampserver.com/

• Make sure the server is working– Point a Web browser at http://localhost/– Select phpinfo.php

• Error reporting on? MySQL listed?

• Test the connection to MySQL– Run mysql_test.php (if get “Resource id #2” , wampserver ok) <?php echo mysql_connect(‘localhost’, ‘root’, ‘’); this means no password ?>

Connecting PHP to MySQL

• On WAMP:$dbc=mysql_connect (‘localhost’, ‘userid’, ‘password’);

• On OTAL:$dbc=mysql_connect(‘:/export/software/otal/mysql/run/mysqld.sock’,

‘userid’, ‘password’);

Create a MySQL Database

• “root” user creates database + grants permissions– Using the WAMP console (or mysql –u root –p)

• root has no initial password; just hit <enter> when asked

– By the system administrator on OTAL (otal.umd.edu) CREATE DATABASE project;

GRANT SELECT, INSERT, UPDATE, DELETE, INDEX, ALTER, CREATE, DROP ON project.* TO ‘foo’@’localhost’ IDENTIFIED BY ‘bar’;

FLUSH PRIVILEGES;

• Start mysql– MySQL console for WAMP, ssh for OTAL mysql –u foo –p bar

• Connect to your database USE project;

Creating Tables Using SQL

CREATE TABLE contacts ( ckey MEDIUMINT UNSIGNED NOT NULL AUTO_INCREMENT, id MEDIUMINT UNSIGNED NOT NULL, ctype SMALLINT UNSIGNED NOT NULL, cstring VARCHAR(40) NOT NULL, FOREIGN KEY (id) REFERENCES persons(id) ON DELETE CASCADE, FOREIGN KEY (ctype) REFERENCES ctlabels(ctype) ON DELETE RESTRICT, PRIMARY KEY (ckey)) ENGINE=INNODB;

Join! Referential Integrity!

To delete: DROP TABLE contacts;

Populating TablesINSERT INTO ctlabels

(string) VALUES

('primary email'),

('alternate email'),

('home phone'),

('cell phone'),

('work phone'),

('AOL IM'),

('Yahoo Chat'),

('MSN Messenger'),

(‘other’);

To empty a table: DELETE FROM ctlabels;

“Looking Around” in MySQL

• SHOW DATABASES;

• SHOW TABLES; (show table names)

• DESCRIBE tablename; (show design view)

• SELECT * FROM tablename; (see all field values)

Structured Query Language

DESCRIBE Flight;

Design view

Structured Query Language

SELECT * FROM Flight;

Structured Query Language

SELECT Company.CompanyName, Company.CompanyPhone, Flight.Origin, Flight.DepartureTime

FROM Flight,Company

WHERE Flight.CompanyName=Company.CompanyName

AND Flight.AvailableSeats>3;

Join Clause

Statements in PHP• Sequential

{…; …;…;} Semicolons are required at the end of every statement

• Conditionalif (3==i) {…} else {…}

• Loop for ($i=0; $i<10; $i++) {…}while ($row=mysql_fetch_array(…)) {…}foreach ($array as $key => $value) {…}

• Braces are optional around a single statement• Case sensitive

Variables

• Name starts with a $– Case sensitive (assume everything could be!)

• Hold a value– Number (integer, float)– String (double quotes, \ escape character)– TRUE, FLASE– NULL

• Need not be declared (automatically “cast”)

Operators in PHP

• Arithmetic operators+ - * /

• Logical operators< <= == != >= > && || !

• String operator.

Arrays in PHP

• A set of key-element pairs

$colorList = array("red","green","blue","black","white");

$days = array(“Jan”=>31, “Feb”=>28, …);

$_POST, $_GET: retrieve info from forms

• Each element is accessed by the key– {$days[“Jan”]}

– $colorList[0] = “red”

Functions in PHP

• Declarationfunction multiply($a, $b=3){return $a*$b;}

• Invoking a method$b = multiply($b, 7);

• All variables in a function have only local scope• Unless declared as global in the function

Using PHP with (X)HTML Forms

<form action=“formResponseDemo.php”, method=“post”>

email: <input type=“text”, name=“email”, value=“<?php echo $email ?>”, size=30 />

<input type=“radio”, name=“sure”, value=“yes” /> Yes

<input type=“radio”, name=“sure”, value=“no” /> No

<input type=“submit”, name=“submit”, value=“Submit” />

<input type=“hidden”, name=“submitted”, value=“TRUE” />

</form>

if (isset($_POST[“submitted”])) {

echo “Your email address is $email.”;

} else {

echo “Error: page reached without proper form submission!”;

}

<?php # Script 8.1 - mysql_connect.php// Set the database access information as constants.DEFINE ('DB_USER', 'tester');DEFINE ('DB_PASSWORD', 'tester');DEFINE ('DB_HOST', 'localhost');DEFINE ('DB_NAME', 'sitename');

// Make the connection.$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) OR die ('Could not connect to MySQL: ' . mysql_error() );

// Select the database.@mysql_select_db (DB_NAME) OR die ('Could not select the database: ' . mysql_error() );

// Create a function for escaping the data.function escape_data ($data) {

// Address Magic Quotes.if (ini_get('magic_quotes_gpc')) {

$data = stripslashes($data);}// Check for mysql_real_escape_string() support.if (function_exists('mysql_real_escape_string')) {

global $dbc; // Need the connection.$data = mysql_real_escape_string (trim($data), $dbc);

} else {$data = mysql_escape_string (trim($data));

}// Return the escaped value.return $data;

} // End of function.?>

PHP Example

<?php # login.php// Send NOTHING to the Web browser prior to the session_start() line!// Check if the form has been submitted.

if (isset($_POST['submitted'])) { require_once ('../mysql_connect.php'); // Connect to the db. $errors = array(); // Initialize error array.

// Check for an email address. if (empty($_POST['email'])) { $errors[] = 'You forgot to enter your email address.'; } else { $e = escape_data($_POST['email']); }

// Check for a password. if (empty($_POST['password'])) { $errors[] = 'You forgot to enter your password.'; } else { $p = escape_data($_POST['password']); }

if (empty($errors)) { // If everything's OK. /* Retrieve the user_id and first_name for that email/password combination. */ $query = "SELECT user_id, first_name FROM users WHERE email='$e' AND password=SHA('$p')"; $result = @mysql_query ($query); // Run the query. $row = mysql_fetch_array ($result, MYSQL_NUM); // Return a record, if applicable. if ($row) { // A record was pulled from the database. // Set the session data & redirect. session_name ('YourVisitID'); session_start(); $_SESSION['user_id'] = $row[0]; $_SESSION['first_name'] = $row[1]; $_SESSION['agent'] = md5($_SERVER['HTTP_USER_AGENT']); // Redirect the user to the loggedin.php page. // Start defining the URL. $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']); // Check for a trailing slash. if ((substr($url, -1) == '/') OR (substr($url, -1) == '\\') ) { $url = substr ($url, 0, -1); // Chop off the slash. } // Add the page. $url .= '/loggedin.php'; header("Location: $url"); exit(); // Quit the script. } else { // No record matched the query. $errors[] = 'The email address and password entered do not match those on file.'; // Public message. $errors[] = mysql_error() . '<br /><br />Query: ' . $query; // Debugging message. } } // End of if (empty($errors)) IF. mysql_close(); // Close the database connection.} else { // Form has not been submitted. $errors = NULL;} // End of the main Submit conditional.

// Begin the page now.$page_title = 'Login';include ('./includes/header.html');

if (!empty($errors)) { // Print any error messages. echo '<h1 id="mainhead">Error!</h1> <p class="error">The following error(s) occurred:<br />'; foreach ($errors as $msg) { // Print each error. echo " - $msg<br />\n"; } echo '</p><p>Please try again.</p>';}

// Create the form.?>

<h2>Login</h2><form action="login.php" method="post"> <p>Email Address: <input type="text" name="email" size="20" maxlength="40" /> </p> <p>Password: <input type="password" name="password" size="20" maxlength="20" /></p> <p><input type="submit" name="submit" value="Login" /></p> <input type="hidden" name="submitted" value="TRUE" /></form>

<?phpinclude ('./includes/footer.html');?>

Database

Server-side Programming

Interchange Language

Client-side Programming

Web Browser

Client Hardware

Server Hardware (PC, Unix)

(MySQL)

(PHP)

(HTML, XML)

(JavaScript)

(IE, Firefox)

(PC)

Bus

ines

sru

les

Inte

ract

ion

Des

ign

Inte

rfac

eD

esig

n

• Relational normalization• Structured programming• Software patterns• Object-oriented design• Functional decomposition

Ajax

Ajax Applications

• Google Maps– http://maps.google.com

• Google Suggest– http://www.google.com/webhp?complete=1&hl=en

• Sajax Tables– http://labs.revision10.com/?p=5

• Sajax– http://www.modernmethod.com/sajax/

• Why do ajax? http://www.boutell.com/newfaq/creating/ajaxfetch.html

Ajax: put functions at both sides, they communicate.

Computer Mediated Communication

• CMC refers to human communication via computers--including computer network communication on the Internet and the World Wide Web. People interested in CMC study a range of phenomena--from the dynamics of group communication in Usenet news articles to how people use hypertext to shape meaning.

from http://www.ibiblio.org/cmc/center.html

CMC Applications• Email• Usenet News Groups

– Google/Yahoo Groups

• Bulletin Board Service• ListServ Discussion List• Wiki• Blogs• Chat room• Instant Messenger• Blackboard, WebCT, Moodle• Video teleconferencing (Access Grid at HBK2119) ……

CMC Studies

• Computer Science

• Communication Studies

• Social psychology, sociology

• Information Studies

Plan

• CMC applications

• Information services, user tasks

• Design a process using technologies to support CMC

• Design systems using CMC to support user tasks

Describing CMC Applications

• How many participants? – One or many

• When?– Synchronous or asynchronous

• Where?– Local (on the site) or remote

CMC Applications• Email• Usenet News Groups

– Google/Yahoo Groups

• Bulletin Board Service• ListServ Discussion List• Wiki• Blogs• Chat room• Instant Messenger• Blackboard, WebCT, Moodle• Video teleconferencing (Access Grid)• Second life, online community …

Cooperative systems

Same Time

(synchronous)

Different Times

(asynchronous)

Same

place

(local)

face to face, classroom tools

postit notes, meeting support systems

Different

places

(remote)

IM, Chat Rooms, NetMeeting, VTC, Access Grid

Email, Usenet news

Inspired by the table in Shneiderman’s “Designing user interfaces”

http://www.fullcirc.com/community/diffmodes.htm For kids

Asynchronous Remote• Email: centralized storage

– Individual– Mailing lists

• Usenet: distributed storage– http://en.wikipedia.org/wiki/Usenet– Hierarchical organization

• comp.edu.languages.natural– Archive: groups.google.com – Analysis: http://research.microsoft.com/~masmith/

• Threaded discussion lists (moderated)– JESSE: http://web.utk.edu/~gwhitney/jesse.html – Example: http://discus.hope.edu/f05

• Why censorship on Usenet difficult?

Synchronous Remote

• Instant Messaging (IM)– e.g., Windows Live Messenger, Yahoo! IM, AIM– Often with audio and video– Sometimes with whiteboard+shared applications

• Chat Rooms– Whole lines are sent at a time– e.g., http://messenger.yahoo.com/chat.php

Windows Live Messenger: Share a Whiteboard or an Application

MSN: Sharing a Whiteboard

MSN: Sharing an Application

MSN: Sharing Whiteboard/Application

• Wired Internet Connection– Wireless connection does not work

• Tutorial (for MSN 5.0)– http://www.nd.gov/itd/messenger/docs/share-apps.doc

– http://download.microsoft.com/download/f/8/0/f80a2bb3-10e5-443c-a59c-9d3de865eb0b/WindowsXP201Tutorial.doc

Collaborative Editing

• MSN Sharing Whiteboard/Application

• Google Docs– Docs.google.com (view video)

• Online collaborative drawing– Mind mapping: http://www.

mindmeister.com/

Glass Wall

• Unplanned interactions

• Informal communication

Synchronous Local

• Meeting support systems– Brainstorming– Online review– Annotated minutes

• Example– Teaching theater student tools

Computer SupportedCooperative Work (CSCW)

• Work– Grounded in the study of work processes

• Cooperative– Assumes a shared objective, task

• Technology-supported– Computers are just one type of tools used

– “Groupware”

– http://en.wikipedia.org/wiki/Collaborative_software

Key Issues in CSCW

• Shared information space

• Group awareness

• Coordination

• Concurrency control

• Multi-user interfaces

• Heterogeneous environments

Case Study 1: Virtual Reference

• LSU Libraries Virtual Reference: http://www.lib.lsu.edu/virtual/onlinereference.html

• UMD Libraries Virtual Reference: http://www.askusnow.info/

• Required functions• System architecture• Adoption

Virtual Reference Problems

• Language

• Routing (questions to expertise)

• Collaborative response

• Low technology requirement

• Load balancing

• Transaction tracking

Online Communities• Any collection of people who communicate online

• People• Shared purpose

– Interest, need, goal

• Policies– tacit assumptions, rituals, protocols, rules, laws

• Computer systems

(Preece, 2000)

The Age of Participation: 2006

(Slide from Derek Hansen)

Social Networks• Web2.0: user-generated content technologies on the web

– Blogging, – Photo sharing (like in Flickr), – Tagging (like in delicious), – Social networking (like in facebook), – Video sharing (like YouTube),

• Incomplete list of social networks: – http://trust.mindswap.org/cgi-bin/relationshipTable.cgi (size and purpose)

• List of social networking websites:– http://en.wikipedia.org/wiki/List_of_social_networking_websites

Adapted from http://www.cs.umd.edu/~golbeck/LBSC690/VL.shtml

Software and Services

• Wiki– http://www.siteground.com/compare_best_wiki.htm

• Blog– http://en.wikipedia.org/wiki/Weblog_software

• Online Community– 34 More Ways to Build Your Own Social Network

• http://www.techcrunch.com/2007/08/14/34-more-ways-to-build-your-own-social-network/

– http://www.ning.com/

People Roles

• Community Roles– Lurkers

– Dominators

– Linkers, pollinators

– Flamers

– Newbies

– Polly Annas (police)

http://www.fullcirc.com/community/memberroles.htm

http://redwing.hutman.net/%7Emreed/

Slide borrowed from Nancy Atkinson

Core Attributes1. Shared goal, interest, need, or activity

2. Members engage in repeated, active participation

3. Members have access to shared resources, and policies determine the access to those resources.

4. Reciprocity of information, support, and services

5. Shared context of social conventions, language, and protocols.

(Preece 2001)

Usability & Sociability

Support evolving community

Design Usability Interaction dialog Navigation Registration forms Feedback Representations of users Message format Archives Support tools

Design sociability Policies for: Membership Codes of conduct Security Privacy Copyright Free speech Moderators

Assess community needs Preece 2000

Sociability

• Community’s purpose

• People– Moderators and Mediators – Participants– Lurkers– Community size

• Policies guiding social behavior

Preece, 2000

Policies

• Requirements for joining a community,

• Style of communication among participants,

• Accepted conduct (netiquette)

• Repercussions for nonconformance.

Preece, 2000

Usability

• Software supporting user tasks

• Tasks

• Users

• Software

Usability – Tasks

• Exchange information

• Provide support

• Enable people to chat or socialize informally

• Discuss ideas

Example User Tasks• Compose message

• Edit messages

• Send messages to the whole community

• Read messages

• Send replies to individuals, discussion groups

• Access the Web to research the URLs

• Find and search community archives

• Read the profile of a participant

Usability - Users• Physical differences

– Console or standalone kiosk

• Cognitive and perceptual differences– Menu design

• Gender• Age• Cultural diversity • Educational training• Experience with computers and online communities • Disabilities• Social and economic differences

– Equipment, bandwidth

Preece 2000

Usability - Software

• Consistent terms and procedures

• Controllable

• Predictable behavior

Design Principles of Successful Communities • Group boundaries are clearly defined

• Rules governing the use of collective goods are well matched to local needs and conditions

• Most individuals affected by these rules can participate in modifying the rules

• The right of community members to devise their own rules is respected by external authorities

• A system for monitoring members' behavior exists; this monitoring is undertaken by the community members

• A graduated system of sanctions is used

• Community members have access to low-cost conflict resolution mechanisms

http://www.sscnet.ucla.edu/soc/faculty/kollock/papers/design.htm (Kollock 1997)

Design Strategies of Successful Communities

• Define and articulate your PURPOSE

• Build flexible, extensible gathering PLACES

• Create meaningful and evolving member PROFILES

• Design for a range of ROLES (newcomers, leaders …)

• Develop a strong LEADERSHIP program

• Encourage appropriate ETIQUETTE

• Promote cyclic EVENTS

• Integrate the RITUALS of community life

• Facilitate member-run SUBGROUPShttp://www.peachpit.com/articles/printerfriendly.aspx?p=21189 (Kim 2001)

Underlying Principles - 1

Design for growth and change.

http://www.peachpit.com/articles/printerfriendly.aspx?p=21189 (Kim 2001)

Underlying Principles - 2

Create and maintain feedback loops.

http://www.peachpit.com/articles/printerfriendly.aspx?p=21189 (Kim 2001)

Plan, management

Suggestions, needs

Underlying Principles - 3

Empower your members over time.

http://www.peachpit.com/articles/printerfriendly.aspx?p=21189 (Kim 2001)

Discussion

• How would you design an online community for people who have moved, or are interested in moving (permanently) from Estonia to the United States of America?

Online Community Technologies - Blogs (blogspot.com)          - Wikis (wikipedia.org)          - Desktop video conferencing (iVisit)          - Review and recommendation systems (amazon.com; imdb.com)          - Transaction and reputation systems (ebay.com)          - Instant messaging (MSN Messenger, Yahoo! Messenger, AIM)          - Phone texting          - Social networking systems (facebook.com, myspace.com, friendster.com)          - Listservs/Discussion boards (Usenet, Yahoo! Groups, MSN Communities)          - Open source development systems (sourceforge.org)          - News and commentary systems (slashdot.com)          - Children-focused systems (ICDL)          - Podcasting          - Peer-to-peer content exchange/delivery systems (BitTorrent, Gnutella, Freenet)          - IRC and chatrooms          - Collaborative filtering systems (movielens.org)          - Gaming communities          - Tagging

http://www.wam.umd.edu/~vdiker/INFM718J_LBSC708P_05_09/

Before You Go!

• On a sheet of paper (no names), answer the following question:

What was the muddiest point in today’s class?