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

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" />

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


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


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"; } }?>


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";?>


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

Web Technologies

Documents

Transcript of Web Technologies