Embed Size (px)
Citation preview
Web Technologies David Goldschmidt, Ph.D. The College of Saint Rose
Client/Server Architecture
A server “serves” upWeb pages and otherrelated files to clients
server
clients
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
Network Communications
P
Q
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" />
<!-- this is a comment and is therefore ignored -->
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>
HTMLCSS
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>
HTMLCSS
Cascading Style Sheets (CSS)
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>
<body> <p> If you're reading this, <b>you're cool</b>. </p>
CSSHTML
/* external style sheet */body { background-color: yellow; }
p { padding-top: 6px; font-family: Garamond, serif;}
CSS Box Model
All HTML <tags> are enclosed in a box
The CSS box modelprovides control ofthe following styledescriptors:
• margin • padding • border
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" />
checked="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:
<script language="javascript"> function onsubmittechcheckform() { if ( document.techcheck.technote.value == ' ' ) { return false; // invalid! } else { return true; // valid } }</script>
<form name="techcheck" id="techcheck" method="post" enctype="text/xml" action="production_techcheck.php" onsubmit="return onsubmittechcheckform();">
Accessing the DOM
Using JavaScript, we can access HTML elements via the Document Object Model (DOM):
Or via the unique id attribute:if ( document.getElementById( 'override' ).value == '0' ){ document.getElementById( 'inoverridemode' ).style.visibility = 'visible'; document.getElementById( 'requiredmessage' ).style.visibility = 'hidden';}
document.techcheck.technote.value = 'Please enter a value';document.techcheck.technote.focus();document.techcheck.observation.disabled = true;
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)
Sample Registrar Database
coursedescriptioncredits
courses crncoursesectiondatestimesinstructorroomenrollmaxenrollcurrent
offerings
crnuseridenrolldate grade
enrollment useridphonedobpasswordmajoraddresscitystatezip
students
useridroleid
userrolesroleidrolenamedescription
roles
useridpasswordfnamelname
users1 n
1
n
1
n
1
1 1
1
n
n
Structured Query Language (SQL)
Given a database schema,SQL provides instructions to:insert select update delete
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';
e.g.
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;
eliminate ambiguity by assigning names to tables
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>
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>
for ( $x = 10 ; $x > 0 ; $x-- ) { echo $x . " and "; // same as: echo "$x and "; }
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"; }
Client/Server Architecture Revisited
server
clients
PHP
HTML, CSS,JavaScript
HTML, CSS,JavaScript
Exercises
Complete the University Registration SystemProvide end-user and administrative PHP pagesEnsure data integrity via client-side JavaScript
and server-side PHP code
Create an Inventory SystemSpecify a database schemaCreate data entry formsCreate a reporting interface
