1
Database Driven Web Application
•Traditional client-server (2-tier architecture):
•client: user interface
•database server: stores data.
•business logic: resides on both
•Three or multi-tier architecture:
•Presentation layer: client, browser
•Business layer: web server, handles web requests and
actual functionality
•Database layer: database server, stores data
Clients
Application Servers
including web
servers
Database Server
2
Three-Tier Architecture
3
Benefits of Web Applications
• Standard & thin client: web browser
– Easy maintenance
• both server and client
– Easy upgrade
• both server and client
– Fast development
• Mature technologies and platforms
– Security
• https, password protection, firewall transparent
• Limitations
– Compatibility of different web browsers
– Limited functionalities
4
Web Technolgies
Client-side
–
–
–
–
HTML
CSS (Cascading Style Sheets)
XML (Extensible Markup Language)
JavaScript
VBScript
Flash
Java applet
Server-side
o
o
o
o
PHP
PERL / CGI
ASP (Active Server Pages) & ASP.NET
JSP (Java Server Pages) Java Servlets
C++/C
Database
 ODBC, JDBC
 MS SQL, Oracle, DB2, my sql…
5
Web Application Option1: LAMP

LAMP

Linux OS
 Apache Web Server
 MySQL Database
 PHP scripting (Hypertext Preprocessor)

Advantage

Free
 Open source
 Proved to be one of the most reliable ways for web
development

Disadvantage

Tech support
 Higher HR cost
6
Web Application Option2: Microsoft

Microsoft technologies





Advantage





Windows 2003 / vista OS
IIS (Internet Information Server) Web Server
SQL Database
ASP.NET scripting (Active Server Page)
Tech support
Fast development
Lower HR cost
Continuous improvement on reliability and security
Disadvantage



Commercial software
Not open source
Security, reliability and stability
7
Web Application Option3: Java

Java technologies

Unix / Linux OS
 Apache + Tomcat / Websphere / Weblogic Web
Server
 Oracle / Sybase / DB2 / Mysql Database
 JSP scripting (Java Server Page) and Servelet

Advantage

Proved to be one of the most reliable and secure ways
for web development
 Many third party software

Disadvantage

High development cost
 High HR cost
 Future unclear
8
HTML
www.w3schools.com
9
Forms
• HTML and forms are used to build front-end application
• CGI/ASP/PHP/JSP are used to build the back-end
application
A Form
<form method="get" action="/cgi-bin/myscript.pl">
A Text Input Box
<input type="text" name="foo">
A Radio Button
<input type="radio" name="color" value="blue>
A Check Box
<input type="chekcbox" name="isMarried">
A Hidden Varible
<input type="hidden" name=“Result" value="1">
A Submit Button
<input type="submit" name="SVariable">
10
Apache, MySQL and PHP Integration
11
PHP Error
• Turn on php error reporting:
– For development server, very useful; for production server, don’t
do that.
– php.ini
• display_errors = On
• error_reporting = E_ALL & ~E_NOTICE
– httpd.conf
• php_flag display_errors
• php_value error_reporting
on
2039
12
PHP Overview
• Open Source server-side scripting language designed
specifically for the web.
– Conceived in 1994, now used on +10 million web sites.
– Outputs not only HTML but can output XML, images (JPG &
PNG), PDF files and even Flash movies all generated on the fly.
Can write these files to the file system.
– Supports a wide-range of databases (20 + ODBC).
– PHP also has support for talking to other services using protocols
such as LDAP, IMAP, SNMP, NNTP, POP3, HTTP.
• Easy learning curve
– Syntax Perl- and C-like syntax. Relatively easy to learn.
– Large function library
– Embedded directly into HTML
• The separation of HTML design and PHP tags
– Interpreted, no need to compile
13
PHP Tags
See www.w3schools.com
PHP code must be surrounded with special tags
<?php
PHP Code In Here
php?>
Write text to the browser with the echo command
To write Hello, World! to the browser, include the following in hello.php
<?php
echo “<h2>Hello, World</h2>”;
?>
Php code can be pretty much anywhere in HTML document.
14
PHP Variables
• Variable
– names can be of any length;
– can include letters, numbers and underscores;
– case-sensitive
• To assign values to variables:
–
–
–
–
$foo = ‘bar’; Data Type: String
$foo = 1; Data Type: integer
$foo = 5.34; Data Type: Double
$foo = array(“bar”,”united”); Data Type: Array
• Data Types are automatically assigned though you can
force a data type by type casting. For example:
– $foo = ‘Hello’;
– $bar = (int)$foo;
– $bar now equals 0
Array:
$names[0] = 'Helen';
$names[1] = 'Susan';
$names[2] = 'Marc';
• Almost all variables are local. Globals include $_POST
15
PHP Operators
• Operators
–
–
–
–
Assignment (e.g. =, +=, *=)
Arithmetic (e.g. +, -, *)
Comparison (e.g. <, >, >=, ==)
Logical (e.g. !, &&, ||)
• Comments
–
–
–
–
//
/* */
Good code will use indents and comments.
Useful debugging skill
• put echo commands in the middle of your code, to observe the
output value and debug, then just comment out the echo
commands.
16
1st PHP script
<html>
<body>
<strong>Hello World!</strong><br />
<?php
echo “<h2>Hello, World</h2>”;
?>
<?php
$myvar = "Hello World";
echo $myvar;
?>
</body>
</html>
On server, save it as e3.php in $HOME/.WWW-orion/,
On client browser, visit http://orion.csl.mtu.edu/~yourid/e3.php
17
Control Structures
• Conditional structures (e.g. if/else)
• Repetition structures (e.g. while loops).
• Example if/else if/else statement:
if ($foo == 0) {
echo ‘The variable foo is equal to 0’;
}
else if (($foo > 0) && ($foo <= 5)) {
echo ‘The variable foo is between 1 and 5’;
}
else {
echo ‘The variable foo is equal to ‘.$foo;
}
18
PHP - Forms
• Access to the HTTP POST and GET data is simple in PHP
• The global variables $_POST[] and $_GET[] contain the
request data
Save this example as form.php
<?php
if ($_POST["submit"])
echo "<h2>You clicked Submit!</h2>";
else if ($_POST["cancel"])
echo "<h2>You clicked Cancel!</h2>";
?>
<form action="form.php" method="post">
<input type="submit" name="submit" value="Submit">
<input type="submit" name="cancel" value="Cancel">
</form>
19
PHP - Sessions
• Sessions store their identifier in a cookie in the client’s browser
• Every page that uses session data must be proceeded by the
session_start() function
• Session variables are then set and retrieved by accessing the global
$_SESSION[]
Save this example as session.php
<?php
session_start();
if (!$_SESSION["count"])
$_SESSION["count"] = 0;
if ($_GET["count"] == "yes")
$_SESSION["count"] = $_SESSION["count"] + 1;
echo "<h1>".$_SESSION["count"]."</h1>";
?>
<a href="session.php?count=yes">Click here to
count</a>
20
DB select
<html>
<body>
<h1>A List of Users Who Have Signed Up For OscarPool</h1>
<?
$dbh = mysql_connect("localhost","root","")
or die("Couldn't connect to database.");
$db = mysql_select_db(“airline", $dbh)
or die("Couldn't select database.");
$sql = "SELECT name FROM Employee";
$result = mysql_query($sql, $dbh)
or die("SQL statement is wrong.");
while ($row = mysql_fetch_array($result)) {
$username = $row['username'];
$email = $row['email'];
echo '<a href="mailto:'.$email.'">'.$username.'</a><br
/>\n';
}
mysql_close($dbh);
?>
</body>
</html>
Save it as data.php
21
DB update
<html>
<body>
<h1>Database update</h1>
<?
$dbh = mysql_connect("localhost","root","")
or die("Couldn't connect to database.");
$db = mysql_select_db("test", $dbh)
or die("Couldn't select database.");
$sql = "UPDATE … “
$result = mysql_query($sql, $dbh)
or die("SQL statement is wrong.");
mysql_close($dbh);
echo(“Database updated! <br>”);
?>
</body>
</html>
Save it as update.php
22
Web Project Development
• How to develop php/asp/jsp web page
– Separate the HTML design and php/asp/jsp coding
– The artists design the look and feel of the web page
– The coders insert php/asp/jsp code into HTML files
• Several old advises
– Use the standard software engineering process to guide web
project development
– End user interaction and user requirement analysis are
important and sometime cumbersome…
– Do a small project (a prototype) to test development staff
and user reaction.
– Separate development platform and production platform
– Look for help online and in local community