Web Technologies David Goldschmidt Ph D The College

Web Technologies David Goldschmidt, Ph. D. The College of Saint Rose

Client/Server Architecture ¢ A server “serves” up Web pages and other related files to clients server clients

Server Software (a. k. a. Services) ¢ Servers provide services, which are typically programs running 24/7 server l Services listen on network ports l Web server software is often Apache (free!) l Database server software includes My. SQL (free!), Oracle ($$$$), etc.

Network Communications P Q

Linux Operating System ¢ The Linux operating system provides the following: l Filesystem with directories, symbolic links, files, etc. l Services and utilities, including ssh, scp, ftp, Apache, text editors, cron, language compilers, interpreters, etc.

Hyper. Text Markup Language (HTML) ¢ HTML is language of <tags> l Web browsers render HTML files l Every <tag> should have a closing </tag> • All <tags> must be properly nested l e. g. <html> <head><title> Crazy New Web Site </title></head> <body> <h 1> Welcome to my Crazy New Web Site! </h 1> <p> If you're reading this, <b>you're cool</b>. </p> </body> </html>

HTML Tags and Attributes ¢ HTML <tags> may include attributes that specify style, additional behavior, etc. <body style="background-color: yellow; "> <h 1> Welcome to my Crazy New Web Site! </h 1> <p id="welcome" name="welcome"> If you're reading this, <b>you're cool</b>. </p> <img src="images/mypic. jpg" align="right" width="92" height="108" alt="a picture of me" />

Cascading Style Sheets (CSS) ¢ For more flexible and extensible designs, separate your content from its presentation l l Utilize CSS to specify the formatting and layout details Inline styles: CSS HTML <body style="background-color: yellow; "> <p style="padding-top: 6 px; font-family: Garamond, serif; "> If you're reading this, <b>you're cool</b>. </p>

Cascading Style Sheets (CSS) l Internal style sheet: <head> <style> body { background-color: yellow; } p{ padding-top: 6 px; font-family: Garamond, serif; } </style> </head> <body> <p> If you're reading this, <b>you're cool</b>. </p> CSS HTML

Cascading Style Sheets (CSS) l External style sheet: <head> <link rel="stylesheet" type="text/css" href="cssjs/example. css" media="screen" /> <link rel="stylesheet" type="text/css" href="cssjs/example-print. css" media="print" /> </head> /* external style sheet */ body { background-color: yellow; } p{ padding-top: 6 px; font-family: Garamond, serif; } <body> <p> If you're reading this, <b>you're cool</b>. </p> HTML CSS

CSS Box Model ¢ All HTML <tags> are enclosed in a box l The CSS box model provides control of the following style descriptors: • margin • padding • border

HTML Form Elements ¢ Forms consist of interactive GUI widgets: <input type="text" name="observation" maxlength="60" size="30" /> <input type="hidden" name="override" id="override" value="0" /> <input type="radio" name="dvr" id="dvrisgood" value="good"> good </input> <input type="radio" name="dvr" id="dvrisbad" value="bad"> bad </input> <input type="radio" name="dvr" id="dvrisuntested" value="untested"> untested </input> <input type="checkbox" name="voidwty" id="voidwty" value="checked" /> l Automatically select radio buttons or checkboxes using: checked="checked"

HTML Form Elements ¢ An interactive dropdown box: <select name="obscode"> <option value=""> Please select an option… </option> <option value="ABC"> ABC </option> <option value="DEF" selected="selected"> DEF </option> <option value="GHI"> GHI </option> </select> ¢ And the Submit and Reset buttons: <input type="submit" value="Click here to save" /> <input type="reset" value="Click here to clear all fields" />

HTML Form Elements ¢ Forms require a server-based program to collect and process user input <form name="techcheck" id="techcheck" method="post" enctype="text/xml" action="production_techcheck. php" onsubmit="return onsubmittechcheckform(); "> <fieldset> <legend> Production - Tech Check </legend> <input … … /> </fieldset> </form>

Java. Script ¢ Java. Script is a client-side scripting language often used to validate forms <form name="techcheck" id="techcheck" method="post" enctype="text/xml" action="production_techcheck. php" onsubmit="return onsubmittechcheckform(); "> l Embed Java. Script function in HTML: <script language="javascript"> function onsubmittechcheckform() { if ( document. techcheck. technote. value == ' ' ) { return false; // invalid! } else { return true; // valid } } </script>

Accessing the DOM ¢ Using Java. Script, we can access HTML elements via the Document Object Model (DOM): document. techcheck. technote. value = 'Please enter a value'; document. techcheck. technote. focus(); document. techcheck. observation. disabled = true; l Or via the unique id attribute: if ( document. get. Element. By. Id( 'override' ). value == '0' ) { document. get. Element. By. Id( 'inoverridemode' ). style. visibility = 'visible'; document. get. Element. By. Id( 'requiredmessage' ). style. visibility = 'hidden'; }

Capturing User Events ¢ We can also “run” Java. Script code when certain events occur: <body onload="document. techcheck. technote. focus(); "> <input type="submit" name="overridebutton" id="overridebutton" value="Override" onclick="return handleoverride(); " /> <input type="radio" name="twoway" id="twowayisno" value="no" onchange="if ( this. checked ) { document. techcheck. twowaylevel. value=0; }"> No </input> <input type="submit" id="closebutton" value="Close Window" onclick="window. close(); return false; " />

Opening a New Window ¢ Opening a new window using Java. Script: <input type="submit" value="click here for details“ onclick="window. open( 'production_history. php', '_blank', 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=900, height=650' ); document. techcheck. technote. focus(); return false; " />

My. SQL Database ¢ A database is a structured collection of data l A relational model defines how data is stored and retrieved l My. SQL is a powerful and free database management system (DBMS)

Sample Registrar Database courses course description credits 1 n offerings crn course section dates times instructor room enrollmax enrollcurrent 1 n enrollment crn userid enrolldate grade 1 n students userid phone dob password major address city state zip roles roleid rolename description 1 1 1 n users userid password fname lname userroles userid roleid 1 n

Structured Query Language (SQL) ¢ Given a database schema, SQL provides instructions to: insert l select l update l delete l e. g. insert into courses ( course, description, credits ) values ( 'CIS 711', 'Online Basket Weaving', 3 ); update courses set credits = 4 where course = 'CIS 711'; select * from courses where credits = 4 or course like 'CIS 6%'; delete from courses where course = 'CIS 711';

Joins ¢ Join tables by using the where clause l Match using keys (or common columns) select c. course, c. description, o. crn, o. section, o. room from courses c, offerings o where c. course = o. course and c. credits = 4 and o. room like 'AH%'; select fname, lname, u. userid, rolename from users u, roles r, userroles ur where u. userid = ur. userid and ur. roleid = r. roleid; eliminate ambiguity by assigning names to tables

PHP: Hypertext Preprocessor (PHP) ¢ Perform server-side preprocessing before sending HTML l Query a database, then format results using HTML/CSS l Create a PHP session l Capture and process form data via action attribute: <form name="techcheck" id="techcheck" method="post" enctype="text/xml" action="production_techcheck. php" onsubmit="return onsubmittechcheckform(); ">

PHP: Hypertext Preprocessor (PHP) ¢ Embed PHP into an HTML file <h 1> Welcome to my Crazy New Web Site </h 1> <? php echo '<p> This is PHP. . . '; $some_var = 178; echo "where some variable is $some_var </p>n"; ? > <p> That was PHP </p> <h 1> Welcome to my Crazy New Web Site </h 1> <p> This is PHP. . . where some variable is 178 </p> <p> That was PHP </p>

Conditional Flow of Control ¢ ¢ Conditionally change the flow of control via if and else <h 1> Welcome to my Crazy New Web Site </h 1> Useful functions: isset( $a ) l empty( $a ) l ¢ Also unset( $a ) to clear $a from memory <? php echo "<p> This is PHP. . . "; $some_var = 178; if ( isset( $some_var ) ) { if ( $some_var > 200 ) { echo "$some_var is more than 200 </p>n"; } else { echo "$some_var is less than or equal 200</p>n"; } } ? > <p> That was PHP </p>

Repetition via Loops ¢ Repeat blocks of code via while and for loops <h 1> Welcome to my Crazy New Web Site </h 1> <? php echo "<p> This is PHP. . . "; $x = 10; for ( $x = 10 ; $x > 0 ; $x-- ) { echo $x. " and "; // same as: echo "$x and "; } while ( $x > 0 ) { echo $x. " and "; // same as: echo "$x and "; $x--; // subtract one from $x } echo "</p>n"; ? > <p> That was PHP </p>

Capturing and Processing Input ¢ $_POST variables available in PHP <? php if ( isset( $_POST['userid'] ) ) { // process userid and credentials. . . } ? > <html>. . . <form name="techcheck" id="techcheck" method="post" enctype="text/xml" action="production_techcheck. php" onsubmit="return onsubmittechcheckform(); "> <input type="text" name="userid" maxlength="60" size="30" />

Session Management ¢ $_SESSION variables persist from page to page <? php session_start(); if ( isset( $_POST['userid'] ) ) { $_SESSION['userid'] = $_POST['userid']; $_SESSION['loggedin'] = true; } ? > <html>. . . <? php if ( $_SESSION['loggedin'] == false ) { ? > <input type="text" name="userid" maxlength="60" size="30" /> <? php } ? >

Querying a Database Table ¢ Use the mysql_query() function to send a query to the database <? php $sql = "select fname, lname, u. userid, rolename "; $sql. = "from users u, roles r, userroles ur "; $sql. = "where u. userid = ur. userid and ur. roleid = r. roleid "; $sql. = "and u. userid = '$_SESSION[userid]' "; $result = mysql_query( $sql ); if ( !$result ) { ? > <span style="color: red; "> Sorry, a database error occurred. </span> <? php } else { //. . .

Querying a Database Table ¢ Use the mysql_num_rows() function to count rows in the result set l And use the mysql_result() function to get a column of the result set $num = mysql_num_rows( $result ); if ( $num == 0 ) { echo "<p> No roles defined for this user. </p>"; } else { echo "<p> Roles for $_SESSION[userid] are: "; for ( $i = 0 ; $i < $num ; $i = $i + 1 ) { $role = mysql_result( $result, $i, "rolename" ); echo "$role, "; } } echo " and that's it. </p>n";

Client/Server Architecture Revisited HTML, CSS, Java. Script server PHP clients HTML, CSS, Java. Script

Exercises ¢ Complete the University Registration System Provide end-user and administrative PHP pages l Ensure data integrity via client-side Java. Script and server-side PHP code l ¢ Create an Inventory System Specify a database schema l Create data entry forms l Create a reporting interface l