Web Technologies Training Linux, XHTML, CSS, JavaScript, PHP
Download
Report
Transcript Web Technologies Training Linux, XHTML, CSS, JavaScript, PHP
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
Services listen on
network ports
Web server software
is often Apache (free!)
Database server software
includes MySQL (free!), Oracle ($$$$), etc.
Network Communications
P
Q
Linux Operating System
The Linux operating system
provides the following:
Filesystem with directories,
symbolic links, files, etc.
Services and utilities, including
ssh, 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 include
attributes 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 the
formatting and layout details
CSS
HTML
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>
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>
CSS
HTML
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>
/* external style sheet */
body { background-color: yellow; }
p{
padding-top: 6px;
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
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" />
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>
JavaScript
JavaScript 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();">
Embed JavaScript
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 JavaScript, 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;
Or via the unique id attribute:
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 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 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 defines
how data is stored and retrieved
MySQL 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
1
n
enrollment
crn
userid
enrolldate
grade
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
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';
Joins
Join tables by using
the 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-side
preprocessing before sending HTML
Query a database, then
format 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 control
via if and else
<h1> Welcome to my Crazy New Web Site </h1>
Useful functions:
isset( $a )
empty( $a )
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
<h1> Welcome to my Crazy New Web Site </h1>
<?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
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,
JavaScript
server
PHP
clients
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