Database SSK3408-Chapter06

1
Database Application Development

SSK 3408
Chapter 6
Web-based Database
Application
Introduction
The development of a basic web-based

database application requires:
DBMS
HTML
/ CSS
Server side scripting, like JSP, PHP, ASP or etc.
JavaScript
HTML & CSS
HTML (the Hypertext Markup Language) and

CSS (Cascading Style Sheets) are two of the
core technologies for building Web pages.
HTML provides the structure of the page, CSS
the (visual and audio) layout, for a variety of
devices.
Along with graphics and scripting, HTML and
CSS are the basis of building Web pages and
Web Applications.
HTML
HTML is a language for describing web pages.

HTML
stands for Hyper Text Markup Language

HTML is not a programming language, it is a
markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages
Example of HTML
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
The text between <html> and </html> describes the web page
The text between <body> and </body> is the visible page content
The text between <h1> and </h1> is displayed as a heading
The text between <p> and </p> is displayed as a paragraph
HTML Header & Paragraph

<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p> This is a paragraph</p>
<p> This is another paragraph</p>
</body>
</html>
The text between this tag is

displayed as a heading.
HTML has six levels of headings,
<h1> through <h6>
with 1 being the largest
The text between this tag is

displayed as a paragraph
(From www.3schools.com)
HTML Text Formatting Tag

<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
</body>
</html>
Tag
DESCRIPTION
<b>
Defines bold text
<big>
Defines big text
<em>
Defines emphasized text
<i>
Defines italic text
<small>
Defines small text
<strong>
Defines strong text
<sub>
Defines subscripted text
<sup>
Defines superscripted text
<ins>
Defines inserted text
<del>
Defines deleted text
<s>
Deprecated. Use <del> instead
<strike>
Deprecated. Use <del> instead
<u>
Deprecated. Use styles instead
HTML - Link
HTML links are defined with the <a> tag.

Example:
<html>
<body>
<h3>Universiti Putra Malaysia (UPM)</h3>
<p>UPM is a Malaysias leading research intensive public university</p>
<a href="http://www.upm.edu.my">Click here to know more about UPM</a>
</body>
</html>
Target page
Clickable text
Add target=_blank to open link in new window

Example: <a href=www.upm.edu.my target="_blank">UPM</a>
HTML - Table
Tables Tags
<table> ... </table>
- define table in HTML

<tr> ... </tr>
- specifies a table row within a table
<th> ... </th>
- defines a table header cell
<td> ... </td>
- defines a table data cell
Table One Row & One

Column
<html>
<body>
<h1>one Row One column:</h1>
<table border="1">
<tr>
<td><h1>1,1</h1></td>
</tr>
</table>
</body>
</html>
Table One Row & Two

Columns
<html>
<body>
<h1>One Row and Two Columns</h1>
<table border="1">
<tr>
<td><h1>1,1</h1></td>
<td><h1>1,2</h1></td>
</tr>
</table>
</body>
</html>
Table Two Rows & Two

Columns
<html>
<body>
<h1>Two Rows and Two Columns:</h1>
<table border="1">
<tr>
<td><h1>1,1</td>
<td><h1>1,2</td>
</tr>
<tr>
<td><h1>2,1</td>
<td><h1>2,2</td>
</tr>
</table>
</body>
</html>
Styling HTML with CSS
CSS was introduced to provide a better way to

style HTML elements.
CSS can be added to HTML in the following
ways:
Inline Styles
Embedded Styles
External Styles
Imported Styles
Types of CSS
Inline Styles
Embedded Styles
Configured in the header section of a Web page.

Use the HTML <style> element
Apply to the entire Web page document
External Styles
Configured in the body of the Web page

Use the style attribute of an HTML tag
Apply only to the specific element
Configured in a separate text file with .css file extension

The HTML <link /> element in the header section of a Web
page associates it with the .css file
Imported Styles
Similar to External Styles

Well concentrate on the other three types of styles.
CSS Syntax
Style sheets are composed of "Rules" that

describe the styling to be applied.
Each Rule contains a Selector and a

Declaration
15
CSS Syntax Sample

Configure a Web page to display blue text and
yellow background.
body { color: blue;
background-color: yellow; }
This could also be written using hexadecimal
color values as shown below.
body { color: #0000FF; background-color: #FFFF00; }
16
Inline CSS
The style attribute is used with the value of the

style rule declaration that need to be set.
Recall, declaration consists of a property and
a value.
Example on how to use inline CSS in HTML
<p
style="background: blue; color: white;">A new

background and font color with inline CSS</p>
<h1 style =color:#cc0000>This is displayed as a
red heading</h1>
Embedded CSS
It is placed within a <style> element located in the header section of

web page.
Example on how to use embedded CSS in HTML
<html>
<head>
<style type="text/css">
p {background-color: blue; color:white;}
h1 {background-color:#cc0000;}
</style>
</head>
<body>
<h1>Embedded Styles</h1>
<p>Your page's content!</p>
</body>
</html>
External CSS
External style sheets contained in a separate file from HTML

document.
The <link /> element is a self-contained tag used in the header
section of an HTML document to associate the style sheet with the
Web page.
Example on how to use external CSS in HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href=myCSS.css"
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font. The background color of this
page is gray because we changed it with CSS! </p>
</body>
</html>
myCSS.css
body{ background-color: gray;}
p { color: blue; } h3{ color: white; }
Save the file as a CSS (.css) file.

Make sure that you are not saving it as a text
(.txt) file, as notepad likes to do by default.
Name the file "test.css" (without the quotes).
Now create a new HTML file and fill it with the
following code.
HTML FORMS
HTML forms are used to pass data to a server.

A form can contain input elements like text
fields, checkboxes, radio-buttons, submit
buttons and more.
A form can also contain select lists, textarea,
fieldset, legend, and label elements.
The <form> tag is used to create an HTML
form:
HTML <form> Tag
A simple HTML form with two input fields and

one submit button:
<html>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</body>
Output
</html>
Example Explanation
HTML Forms - The Input

Element
Text Field
Password Field
Radio Button
Checkbox
Submit button
Text Field
Password Field
Radio Button
Checkbox
Submit Button
Drop-down List
Your Task:
Write two (2) HTML codes to produce the three following

forms.
MainMenu.html
Registration.html
SSK3408 SYSTEM
Registration Form
Display Form
Exit
Registration.html
SSK3408 SYSTEM
StudentID:
Name:
Gender:
Male
Skill:
C++
Java
Pyhton
Major:
Female
Software Engineering
V
Reset
Submit
Back
JavaScript
JavaScript is the most popular scripting

language on the internet, and works in all
major browsers, such as Internet Explorer,
Firefox, Chrome, Opera, and Safari.
It is used to add functionality, validate forms,
communicate with the server, and much more.
Common Uses of JavaScript
Display a message box

Select list navigation
Edit and validate form information
Create a new window with a specified size
and screen position
Image Rollovers
Status Messages
Display Current Date
Calculations
33
Writing JavaScript to The HTML

Document
The HTML <script> tag is used to insert a JavaScript into an HTML

page.
JavaScripts can be put in the <body> and in the <head> sections of

an HTML page.
Example:
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
Display a message with

JavaScript
<html>
<head>
alert(Welcome to my web page!!");
</script>
</head>
<body>
</body>
</html>
JavaScript and Events
Events:
actions taken by the Web page visitor
36
clicking (onclick),
placing the mouse on an element
(onmouseover),
removing the mouse from an element
(onmouseout),
loading the page (onload),
unloading the page (onunload), etc.
Events
Event
click
Event Handler
onclick
load
onload
mouseover
onmouseover
mouseout
onmouseout
submit
onsubmit
unload
onunload
37
JavaScript and Events
JavaScript can be configured to perform

actions when events occur.
The event name is coded as an attribute of an HTML tag

The value of the event attribute contains the JavaScript
code
Example:
Display an alert box when the mouse is
placed over a hyperlink.
<a href="home.htm" onmouseover="alert('Click to go home')">Home</a>
38
Function
A function is a block of one or more

JavaScript statements with a specific
purpose, which can be run when needed.
function <function_name>()
{
... JavaScript statements
}
39
Using Functions
Defining the Function
Calling the Function

showAlert();
40
function showAlert()
{
alert("Please click OK to continue.");
}
Example: Using Function to display a

message
<html>
<head>
function showalert()
{
alert("Welcome to my web page!!");
}
</script>
</head>
<body>
<input type="submit" value ="Click to Show Alert" onClick="showalert()">
</body>
</html>
Confirm Box
<html>
<head>
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show a confirm box" />
</body>
</html>
Prompt Box
<html>
<head>
function show_prompt()
{
var name=prompt("Please enter your name","");
if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box" />
</body>
</html>
Form Validation
It is common to use JavaScript to validate

form information before submitting it to the
Web server.
Is the name entered?
Is the e-mail address of correct format?
Is the phone number in the correct format?
44
Form Validation- Text Fields
Use the "" or null to check to determine if a form

field has information
if (document.<form_name>.<txtfield_name>.value == "" )
{
alert(Field cannot be empty.");
return false;
}
Example
<html>
<head>
function validateForm()
{
var x=document.myForm.fname.value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()"
method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Form Validation Radio Button

if (( document.<form_name>.<radion_button_name>[0].checked == false ) &&
( document.<form_name>.<radion_button_name>[1].checked == false ) )
{
alert ( "Please choose your selection" );
return false;
}
Example
<html>
<head>
{
if (( document.myForm.gender[0].checked == false ) && ( document.myForm.gender[1].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Gender: <input type="radio" name="gender" value="Male">Male <input type ="radio" name="gender"
value="Female">Female<br>
</form>
</body>
</html>
Form Validation Drop Down

List
if ( document.<form_name>.<drop_down_list_name>.selectedIndex == 0 )
{
alert ( "Please select your choice." );
return false;
}
Example
<html>
<head>
{
if ( document.myForm.age.selectedIndex == 0 )
{
alert ( "Please select your Age." );
return false;
}
}
</script>
</head>
<body>
Your Age: <select name="age">
<option value="">Please Select an Option:</option>
<option value="0-18 years">0-18 years</option>
<option value="60+ years">60+ years</option>
</select>
</form>
</body>
</html>
Form Validation Checkbox
if ( document.<form_name>.<checkbox_name>.checked == false )
{
alert ( "Please check the box." );
return false;
}
Example
<html>
<head>
{
if ( document.myForm.terms.checked == false )
{
alert ( "Please check the Terms & Conditions box." );
return false;
}
}
</script>
</head>
<body>
Do you agree to the Terms and Conditions?<input type="checkbox" name="terms" value="Yes"> Yes
<br>
</form>
</body>
</html>
Your Task
Modify your HTML codes to validate Registration.html

before
submitting to the web server.
SSK3408 SYSTEM
StudentID:
Name:
Gender:
Male
Skill:
C++
Java
Pyhton
Major:
Female
V
Reset
Submit
Back
Java server page (JSP)
JSP is one of server-side scripting besides ASP, PHP, CFM (Cold

Fusion Markup) etc.
It is a technology based on the Java language and enables the

development of dynamic web sites.
JSP was developed by Sun Microsystems to allow server side

development.
JSP files are HTML files with special Tags containing Java
source code that provide the dynamic content.
JSP source code runs on the web server in the JSP Servlet
Engine.
The JSP Servlet engine dynamically generates the HTML and

sends the HTML output to the clients web browser.
Creating your first jsp page

<html>
<head>
<title>My first JSP page
</title>
</head>
<body>
<%@ page language="java" %>
<% out.println("Hello World"); %>
</body>
</html>
Place this in the correct directory on your

JSP web server and call it via your
browser.
Using JSP Tag
Basic JSP tags:

Declaration
tag
Expression tag
Scriptlet tag
Declaration Tag ( <%! %> )
This tag allows the developer to declare variables or

methods.
Before the declaration you must have <%!
At the end of the declaration the developer must have %>
Code placed in this tag must end in a semicolon ( ; ).
Declarations do not generate output so they are used with
JSP expressions or scriptlets.
For Example,
<%!
private int counter = 0 ;
private String getAccount ( int accountNo) ;
%>
Expression tag ( <%= %>)
This tag allows the developer to embed any Java

expression and is short for out.println().
A semicolon ( ; ) does not appear at the end of
the code inside the tag.
For example, to show the current date and time.
Date : <%= new java.util.Date() %>
Scriptlet tag ( <% ... %> )
Between <% and %> tags any valid Java code

is called a Scriptlet.
This code can access any variable or bean
declared.
For example, to print a variable.
<%
%>
String coursename = Web Application;

out.println ( coursename ) ;
SERVER SIDE SCRIPTING FOR DATA

ACCESS
Registration.jsp performs the following

functions:
Display
the registration form

Process the users filled-in form and checks it for
common errors, such as missing items and
matching password fields.
Register.jsp
1/8
<%@ page import = "java.sql.*"%>

<%
//Create an empty new variable
String message = null;
String firstName = null;
String lastName = null;
String email = null;
String userName = null;
String password = null;
//Handle the form
if (request.getParameter("submit")!= null)
{
//Check for a first name
if (request.getParameter("first_name").equals(")){
message = "<p> Your forgot to enter your first name!</p>";
firstName = null;
}
else {
firstName = request.getParameter("first_name");
}
Register.jsp
2/8
//Check for a last name

if (request.getParameter("last_name).equals()) {
message = "<p> Your forgot to enter your last name!</p>";
lastName = null;
}
else {
lastName = request.getParameter("last_name");
}
//Check for an email address

if (request.getParameter("email").equals(")){
message = "<p> Your forgot to enter your email address!</p>";
email = null;
}
else {
email = request.getParameter("email");
}
Register.jsp
3/8
//Check for a username

if (request.getParameter("username").equals(")){
message = "<p> Your forgot to enter your username!</p>";
userName = null;
}
else {
userName = request.getParameter("username");
}
Register.jsp
4/8
//Check for a password and match against the confirmed password

if (request.getParameter("password1").equals(")) {
message = "<p> Your forgot to enter your password!</p>";
password = null;
}
else {
if (request.getParameter("password1").equals(request.getParameter("password2"))) {
password = request.getParameter("password1");
}
else {
password = null;
message = "<p> Your Password did not match the confirmed password!</p>";
}
}
Register.jsp
5/8
//If everythings OK
PreparedStatement stmt = null;
Connection conn = null;
if (firstName!=null && lastName!=null && email!=null && userName!=null && password!=null) {
//Call method to register student
try {
//Connect to the database
Class.forName("oracle.jdbc.driver.OracleDriver");
String hostname = "172.16.60.13";
int port = 1521;
String sid = "orcl";
String oracleURL = "jdbc:oracle:thin:@"+hostname+":"+port+":"+sid;
String user = "salmi";
String pass = "salmi";
conn = DriverManager.getConnection(oracleURL, user, pass);
Register.jsp
6/8
// Make the query

stmt=conn.prepareStatement("insert into user_s values(?,?,?,?,?)");
stmt.clearParameters();
stmt.setString(1,firstName);
stmt.setString(2,lastName);
stmt.setString(3,email);
stmt.setString(4,userName);
stmt.setString(5,password);
//Run the query
stmt.executeUpdate();
conn.commit();
message = "<p> <b> You have been registered !</b></p>";
Register.jsp
7/8
//Close the database connection

stmt.close();
conn.close();
} catch (SQLException ex) {
message = "<p><b> You could not be registered due to a system error. We apologize for
any inconvenience. </b></p><p>" + ex.getMessage()+ "</p>";
stmt.close();
conn.close();
}
}
else {
message = message + "<p>. Please try again </p>";
}
}
%>
Register.jsp
8/8
<html>
<head><title>Register</title></head>
<body>
<% if (message!=null) { %>
<font color = 'red'> <%=message%></font>
<% } %>
<form name ="myForm" method ="post">
<h2> Enter your information in the form below </h2>
<p><b>First Name: </b>
<input type = "text" name = "first_name" values = "" /></p>
<p><b>Last Name: </b>
<input type = "text" name = "last_name" values = "" /></p>
<p><b>Email: </b>
<input type = "text" name = "email" values = "" /></p>
<p><b>User Name: </b>
<input type = "text" name = "username" values = "" /></p>
<p><b>Password: </b>
<input type = "text" name = "password1" values = "" /></p>
<p><b>Confirm Password: </b>
<input type = "text" name = "password2" values = "" /></p>
<p><input type="submit" name ="submit" value="Register" />
</form>
</body>
</html>
Version 2
Validate form using JavaScript

Insert data using JSP
RegisterForm.html
1/3
<html>
<head>
<title>Register</title>
{
if (document.myForm.first_name.value == null || document.myForm.first_name.value =="") {
alert("Please key-in first-name");
return false;
}
if (document.myForm.last_name.value == null || document.myForm.last_name.value =="") {
alert("Please key-in last-name");
return false;
}
if (document.myForm.email.value == null || document.myForm.email.value =="") {
alert("Please key-in email");
return false;
}
if (document.myForm.username.value == null || document.myForm.username.value =="") {
alert("Please key-in username");
return false;
}
RegisterForm.html
2/3
if (document.myForm.password1.value == null || document.myForm.password1.value =="")

{
alert("Please key-in password");
return false;
} else
{
if (document.myForm.password2.value == null || document.myForm.password2.value =="")
{
alert("Please confirm password");
return false;
} else {
if (document.myForm.password1.value != document.myForm.password2.value)
{
alert("Password does not match");
return false;
}
}
}
}
</script>
</head>
<body>
RegisterForm.html
3/3
<form name ="myForm" action="insStudent.jsp" onSubmit="return validateForm()" method ="post">

<h2> Enter your information in the form below </h2>
<p><b>First Name:</b>
<input type = "text" name="first_name" /></p>
<p><b>Last Name: </b>
<input type = "text" name = "last_name" /></p>
<p><b>Email: </b>
<input type = "text" name = "email" /></p>
<p><b>User Name: </b>
<input type = "text" name = "username" /></p>
<p><b>Password: </b>
<input type = "text" name = "password1" /></p>
<p><b>Confirm Password: </b>
<input type = "text" name = "password2" /></p>
<p><input type="submit" name ="submit" value="Register" />
</form>
insStudent.jsp
1/2
<%@ page contentType="text/html; charset=iso-8859-1" language="java"

import="java.sql.*" errorPage="" %>
<%
//Create an empty new variable
String message = null;
String firstName = request.getParameter("first_name");
String lastName = request.getParameter("last_name");
String email = request.getParameter("email");
String userName = request.getParameter("userName");
String password1 = request.getParameter("password1");
String password2 = request.getParameter("password2");
PreparedStatement stmt = null;
Connection conn = null;
try {
//Connect to the database
Class.forName("oracle.jdbc.driver.OracleDriver");
String hostname = "172.16.60.13";
int port = 1521;
String sid = "orcl";
String oracleURL = "jdbc:oracle:thin:@"+hostname+":"+port+":"+sid;
String user = "salmi";
String pass = "salmi";
conn = DriverManager.getConnection(oracleURL, user, pass);
insStudent.jsp
2/2
// Make the query

stmt=conn.prepareStatement("insert into user_s values(?,?,?,?,?)");
stmt.clearParameters();
stmt.setString(1,firstName);
stmt.setString(2,lastName);
stmt.setString(3,email);
stmt.setString(4,userName);
stmt.setString(5,password2);
//Run the query
stmt.executeUpdate();
conn.commit();
out.println("<p> <b> You have been registered !</b></p>");
//Close the database connection
stmt.close();
conn.close();
} catch (SQLException ex) {
out.println("<p><b> Could not be registered due to a system error. </b></p><p>" + ex.getMessage()+ "</p>");
stmt.close();
conn.close();
}
%>
What if we have element such as

radio button, drop down list etc..
String vGender = null;
.
.
.
.
.
if(request.getParameter(gender").equals(Male")) {
vGender = Male";
}
else {
vGender = Female";
}
.
.
.
.
.
stmt.setString(n,vGender);
Your Task
Modify your HTML codes to add JSP code in order to insert the
information into STUDENT table. Remain the use of JavaScript
code for form validation.
SSK3408 SYSTEM
StudentID:
Name:
Gender:
Male
Skill:
C++
Java
Pyhton
Major:
Female
V
Reset
Submit
Back

Database SSK3408-Chapter06

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Database SSK3408-Chapter06

Diunggah oleh

Hak Cipta:

Format Tersedia

1

Database Application Development

The development of a basic web-based

HTML & CSS

HTML (the Hypertext Markup Language) and

HTML is a language for describing web pages.

stands for Hyper Text Markup Language

HTML Header & Paragraph

The text between this tag is

The text between this tag is

HTML Text Formatting Tag

Defines bold text

Defines big text

Defines emphasized text

Defines italic text

Defines small text

Defines strong text

Defines subscripted text

Defines superscripted text

Defines inserted text

Defines deleted text

Deprecated. Use <del> instead

Deprecated. Use <del> instead

Deprecated. Use styles instead

HTML links are defined with the <a> tag.

Add target=_blank to open link in new window

- define table in HTML

Table One Row & One

Table One Row & Two

Table Two Rows & Two

Styling HTML with CSS

CSS was introduced to provide a better way to

Configured in the header section of a Web page.

Configured in the body of the Web page

Configured in a separate text file with .css file extension

Similar to External Styles

Style sheets are composed of "Rules" that

Each Rule contains a Selector and a

CSS Syntax Sample

The style attribute is used with the value of the

style="background: blue; color: white;">A new

It is placed within a <style> element located in the header section of

External style sheets contained in a separate file from HTML

Save the file as a CSS (.css) file.

HTML forms are used to pass data to a server.

HTML <form> Tag

A simple HTML form with two input fields and

HTML Forms - The Input

Write two (2) HTML codes to produce the three following

JavaScript is the most popular scripting

Common Uses of JavaScript

Display a message box

Writing JavaScript to The HTML

The HTML <script> tag is used to insert a JavaScript into an HTML

JavaScripts can be put in the <body> and in the <head> sections of

Display a message with

JavaScript and Events

JavaScript and Events

JavaScript can be configured to perform

The event name is coded as an attribute of an HTML tag

A function is a block of one or more

Calling the Function

Example: Using Function to display a

It is common to use JavaScript to validate