Web Technologies

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

Client/Server Architecture • A server “serves” upWeb pages and otherrelated files to clients clients server

Server Software (a.k.a. Services) • Servers provide services, which aretypically programs running 24/7 • Services listen onnetwork ports • Web server softwareis often Apache (free!) • Database server softwareincludes MySQL (free!), Oracle ($$$$), etc. server

Q P Network Communications

Linux Operating System • The Linux operating systemprovides the following: • Filesystem with directories,symbolic links, files, etc. • Services and utilities, includingssh, scp, ftp, Apache, text editors, cron,language compilers, interpreters, etc.

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

HTML Tags and Attributes • HTML <tags> may includeattributes that specify style,additional behavior, etc. <body style="background-color: yellow;"> <h1> Welcome to my Crazy New Web Site! </h1> <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" />

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

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

HTML CSS Cascading Style Sheets (CSS) • External style sheet: /* external style sheet */ body { background-color: yellow; } p { padding-top: 6px; font-family: Garamond, serif; } <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> <body> <p> If you're reading this, <b>you're cool</b>. </p>

CSS Box Model • All HTML <tags> are enclosed in a box • The CSS box modelprovides control ofthe following styledescriptors: • margin • padding • border

checked="checked" HTML Form Elements • Forms consist of interactive GUI widgets: • Automatically select radio buttonsor checkboxes using: <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" />

HTML Form Elements • An interactive dropdown box: • And the Submit and Reset buttons: <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> <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-basedprogram 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>

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

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

Capturing User Events • We can also “run” JavaScript code whencertain 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 JavaScript: <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;" />

MySQL Database • A database is a structured collection of data • A relational model defineshow data is stored and retrieved • MySQL is a powerful and freedatabase managementsystem (DBMS)

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

Structured Query Language (SQL) • Given a database schema,SQL provides instructions to: • insert • select • update • delete 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';

eliminate ambiguity by assigning names to tables Joins • Join tables by usingthe where clause • 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;

PHP: Hypertext Preprocessor (PHP) • Perform server-sidepreprocessing before sending HTML • Query a database, thenformat results using HTML/CSS • Create a PHP session • 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 <h1> Welcome to my Crazy New Web Site </h1> <?php echo '<p> This is PHP...'; $some_var = 178; echo "where some variable is $some_var </p>\n"; ?> <p> That was PHP </p> <h1> Welcome to my Crazy New Web Site </h1> <p> This is PHP...where some variable is 178 </p> <p> That was PHP </p>

Conditional Flow of Control • Conditionally change the flow of controlvia if and else • Useful functions: • isset( $a ) • empty( $a ) • Also unset( $a )to clear $a frommemory <h1> Welcome to my Crazy New Web Site </h1> <?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>

for ( $x = 10 ; $x > 0 ; $x-- ) { echo $x . " and "; // same as: echo "$x and "; } Repetition via Loops • Repeat blocks of code via while and for loops <h1> Welcome to my Crazy New Web Site </h1> <?php echo "<p> This is PHP..."; $x = 10; 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 senda 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 • And use themysql_result()function to geta column ofthe 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"; }

server PHP clients HTML, CSS,JavaScript Client/Server Architecture Revisited HTML, CSS,JavaScript

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

Web Technologies