Web technologies
This presentation is the property of its rightful owner.
Sponsored Links
1 / 32

Web Technologies PowerPoint PPT Presentation


  • 62 Views
  • Uploaded on
  • Presentation posted in: General

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. clients. server. Server Software (a.k.a. Services). Servers provide services, which are typically programs running 24/7

Download Presentation

Web Technologies

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Web technologies

Web Technologies

David Goldschmidt, Ph.D.

The College of Saint Rose


Client server architecture

Client/Server Architecture

  • A server “serves” upWeb pages and otherrelated files to clients

clients

server


Server software a k a services

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

Q

P

Network Communications


Linux operating system

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

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

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>


Cascading style sheets css1

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>


Cascading style sheets css2

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

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

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 elements1

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 elements2

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

  • 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

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

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

  • 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

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

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

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

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

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 php1

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

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

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

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

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 table1

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

PHP

clients

HTML, CSS,JavaScript

Client/Server Architecture Revisited

HTML, CSS,JavaScript


Exercises

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


  • Login