Web-Database Integration Week 7 LBSC 690 Information Technology

Agenda Questions E-R Modeling PHP Mythical person-month Midterm review

Key Ideas Databases are a good choice when you have Lots of data A problem that contains inherent relationships Design before you implement This is just another type of programming The mythical person-month applies! Join is the most important concept Project and restrict just remove undesired stuff

Getting Started with E-R Modeling What questions must you answer? What data is needed to generate the answers? Entities Attributes of those entities Relationships Nature of those relationships How will the user interact with the system? Relating the question to the available data Expressing the answer in a useful form

“Project Team” E-R Example manage-role 1 M member-of 1 student team 1 M creates human implement-role 1 1 needs M client project d php-project ajax-project

Components of E-R Diagrams Entities Types Subtypes (disjoint / overlapping) Attributes Mandatory / optional Identifier Relationships Cardinality Existence Degree

Making Tables from E-R Diagrams Pick a primary key for each entity Build the tables One per entity Plus one per M:M 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 “Doug Oard” to two attributes as (“Doug”, “Oard”) Model M:M implement-role relationship with a table 2NF: Attributes depend on complete primary key (id, impl-role, name)->(id, name)+(id, impl-role) 3NF: Attributes depend directly on primary key (id, addr, city, state, zip)->(id, addr, zip)+(zip, city, state) 4NF: Divide independent M:M tables (id, role, courses) -> (id, role) + (id, courses) 5NF: Don’t enumerate derivable combinations

Normalized Table Structure Persons: id, fname, lname, userid, password Contacts: id, ctype, cstring Ctlabels: ctype, string Students: id, team, mrole Iroles: id, irole Rlabels: role, string Projects: team, client, pstring

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 Provide multiple “access points” By subject, by date, by author, … Record user responses in the database

Issues to Consider Benefits Costs Multiple views Data reuse Scalable Access control Costs Formal modeling Complex (learn, design, implement, debug) Brittle (relies on multiple communicating servers) Not crawlable

Downside Brittle Complex Formally modeled Depends on multiple servers Learning, design, implementation, debugging Formally modeled

Three Ways to Serve Data Microsoft Web Server .mdb Microsoft Access DBMS Web Browser Cold Fusion Server mysql database mysql DBMS PHP-enabled Web Server

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 Example Design View: Web Page:

Server-side Programming Interchange Language Client-side Programming Relational normalization Structured programming Software patterns Object-oriented design Functional decomposition Client Hardware (PC, Unix) (MySQL) (PHP) (HTML, XML) (JavaScript) (IE, Firefox) (PC) Business rules Interaction Design Interface Web Browser Server-side Programming Interchange Language Client-side Programming Database Server Hardware

PHP Programming Environments You need three systems on the same server: PHP (programming language) MySQL (DBMS) Apache (Web 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 ----- ?> http://---URL stuff---/xxxxx.php

WampServer Download and install Make sure the server is working 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 (“Resource id #2” indicates ok) <?php echo mysql_connect(‘localhost’, ‘root’, ‘’); ?>

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 To delete: DROP TABLE contacts; 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; To delete: DROP TABLE contacts;

Populating Tables To empty a table: DELETE FROM ctlabels; INSERT 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; DESCRIBE tablename; SELECT * FROM tablename;

Structured Query Language DESCRIBE Flight;

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;

Statements in PHP Sequential Conditional Loop {…; …;…;} Semicolons are required at the end of every statement Conditional if (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

Variables Name starts with a $ Hold a value 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 + - * / Logical operators < <= == != >= > && || ! String operator .

Arrays in PHP A set of key-element pairs $days = array(“Jan”->31, “Feb”=>28, …); $months = explode(“/”, “Jan/Feb/Mar/…/Dec”); $_POST Each element is accessed by the key {$days[“Jan”]} $months[0];

Functions in PHP Declaration Invoking a method function 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 # 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.'; $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> <?php include ('./includes/footer.html');

Server-side Programming Interchange Language Client-side Programming Relational normalization Structured programming Software patterns Object-oriented design Functional decomposition Client Hardware (PC, Unix) (MySQL) (PHP) (HTML, XML) (JavaScript) (IE, Firefox) (PC) Business rules Interaction Design Interface Web Browser Server-side Programming Interchange Language Client-side Programming Database Server Hardware

Ajax Applications Google Maps Google Suggest Sajax Tables Sajax 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/

Discussion Point: Mythical Person-Month Why is software development different from manufacturing car? If it would take one person three months, why does it take four people SIX months?

Trading People and Months is Hard Sequential constraints Communication Training

Estimating Completion Time Rules of thumb 1/3 specification 1/6 coding 1/2 test planning, testing, and fixing! Add time for coding to learn as you go, but don’t take time away from the other parts! Reread the section on “gutless estimating” if you are tempted

The Grand Plan Networking HTML/XML Multimedia Computers HCI Search CMC LBSC 733 HCI Search CMC Web Life Cycle Policy LBSC 795 LBSC 795 Quiz LBSC 790 Databases Programming Web Databases Midterm LBSC 793 Project Final INFM 718N

The Midterm 1 hour and 15 minutes Second half of class: project team meetings Quiz/homework should be good preparation A variety of question types Some questions will require computer use Lots of prior exams are available Some have solutions available Open book/notes/Internet/mind/… Just don’t get help from another person

Computer Systems Hardware Software Types of hardware Storage hierarchy Moore’s law Software Types of software Types of interfaces

Networks Types of Networks Packet Switching LAN, WAN, Internet, Wireless Packet Switching Ethernet, routers, routing tables Layered Architecture and protocols TCP/UDP IP address/domain name

Structured Documents The Web XML HTTP, HTML, URL My Browser A server that sits between a client application, such as a Web browser, and a real server. It intercepts all requests to the real server to see if it can fulfill the requests itself. If not, it forwards the request to the real server. Proxy servers have two main purposes: Improve Performance: Proxy servers can dramatically improve performance for groups of users. This is because it saves the results of all requests for a certain amount of time. Consider the case where both user X and user Y access the World Wide Web through a proxy server. First user X requests a certain Web page, which we'll call Page 1. Sometime later, user Y requests the same page. Instead of forwarding the request to the Web server where Page 1 resides, which can be a time-consuming operation, the proxy server simply returns the Page 1 that it already fetched for user X. Since the proxy server is often on the same network as the user, this is a much faster operation. Real proxy servers support hundreds or thousands of users. The major online services such as Compuserve and America Online, for example, employ an array of proxy servers. Filter Requests: Proxy servers can also be used to filter requests. For example, a company might use a proxy server to prevent its employees from accessing a specific set of Web sites. My Browser

Multimedia Compression, compression, compression Streaming Image: lossy vs loseless Video: frames are alike Speech: voice predictable Music: masking Streaming http://www.ece.purdue.edu/~ace/jpeg-tut/jpgimag1.html Media Sever Buffer Internet

Programming Input Output Programming languages Control structures ? Machines require specific instructions Humans require high-level abstraction Control structures Sequential execution Conditional Iteration Javascript Input Output ?

Databases Structured information Normalized tables (relations) Field->record->table->database Primary key Normalized tables (relations) Remove redundancy, inconsistency, error Easy update, search Join links tables together Through foreign key Access provides visual operations

Web-Database Integration Microsoft “Data Access Pages” Server-side database integration Ajax Mythical person-month