Chapter05 - Web-Based Database Application

1
Database Application Development

SSK 3408
Chapter 5
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 aural) 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> The text between this tag is

<h2>Heading 2</h2> displayed as a heading.
HTML has six levels of headings,
<h3>Heading 3</h3>
<h1> through <h6>
<h4>Heading 4</h4> with 1 being the largest
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p> This is a paragraph</p>

<p> This is another paragraph</p>
The text between this tag is
displayed as a paragraph
</body>
</html>
(From www.3schools.com)
HTML – Text Formatting Tag
<html> Tag DESCRIPTION

<body>
<b> Defines bold text
<p><b>This text is bold</b></p> <big> Defines big text

<p><strong>This text is strong</strong></p> <em> Defines emphasized text
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p> <i> Defines italic text
<p><i>This text is italic</i></p> <small> Defines small text
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p> <strong> Defines strong text
<sub> Defines subscripted text

</body>
<sup> Defines superscripted text
</html>
<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 Malaysia’s 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>
Table – Rowspan Colspan
❑ Tables – rowspan, colspan
❑ rowspan = X,
- to merge two or more rows into a single row
❑ colspan = X
- to merge two or more columns into a single column
Column 1 Column 2 Column 3

Row 1 Cell 2 Row 1 Cell 3
Row 1 Cell 1
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
Web page Development (cont’d)
<html>
<body>
<h1>Rowspan and Colspan</h1>
<table border="1">
<tr>
<th>Column 1</th> <th>Column 1</th> <th>Column 1</th>
</tr>
<tr>
<td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td><td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
HTML - List
❑ HTML supports unordered, ordered and definition lists
❑ Unordered List
❑ marked with bullets (typically small black circles).
❑ starts with the <ul> tag.
❑ each list item starts with the <li> tag
❑ Ordered Lists
❑ marked with numbers.
❑ starts with the <ol> tag
❑ each list item starts with the <li> tag
❑ Definition List
❑ It is a list of items (terms), with a description of each item (term).
❑ starts with a <dl> tag (definition list).
❑ each term starts with a <dt> tag (definition term).
❑ each description starts with a <dd> tag (definition description).
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
◦ Configured in the body of the Web page
◦ Use the style attribute of an HTML tag
◦ Apply only to the specific element
 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 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
◦ We’ll 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
18
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; }
19
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>
</html> Output
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 Female
Skill: C++
Java
Pyhton
Major: 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
36
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
◦ 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.
39
Events
Event Event Handler

click onclick
load onload
mouseover onmouseover
mouseout onmouseout
submit onsubmit
unload onunload
40
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>
41
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?
42
Validating Form Fields
 Use the "" or null to check to determine if a form field
has information
if (document.forms[“<form_name>”].<txtfield_name>.value == "" )
{
alert("Name field cannot be empty.");
return false;
} // end if
Example Form Validation
<html>
<head>
function validateForm()
{
var x=document.forms["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>
Your Task
 Modify your HTML codes to validate Registration.html before
submitting to the web server.
SSK3408 SYSTEM
StudentID:
Name:
Gender: Male Female

C++
Skill: Java
Pyhton
Major: Software Engineering V
Reset Submit Back

Java server page (JSP)
 JSP is one of server-side scripting besides ASP, PHP, CFM 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 user’s filled-in form and checks it for
common errors, such as missing items and matching
password fields.
<%@ page import = “java.sql.*”%>
The <%@page %> directive applies to the entire JSP page.
<% The import attribute specifies the java packages that should
//Create an empty new variable be included within the JSP file.
String message = null;
//Handle the form

If (request.getParameter(“submit”) != null) Check whether the form needs to be processed
{
String firstName = null;
String lastName = null;
String email = null;
String userName = null;
String password = null;
//Check for a first name Validate first name

if (request.getParameter(“first_name”)==“”){
message = “<p> Your forgot to enter your first name!</p>;
firstName = null;
}
else {
firstName = request.getParameter(“first_name”);
}
//Check for a last name Validate last name

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

if (request.getParameter(“username”)==“”){
message = “<p> Your forgot to enter your username!</p>;
userName = null;
}
else {
userName = request.getParameter(“username”);
}
//Check for a password and match against the confirmed password
if (request.getParameter(“password1”)==“”){ Validate password
message = “<p> Your forgot to enter your password!</p>;
password1 = 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>”;
}
}
//If everything’s 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 Connect to the Database:

Class.forName("oracle.jdbc.driver.OracleDriver"); Connection String: jdbc:oracle:thin@l10.101.100.13:1521:orcl
Username: myid
String hostname = “172.16.60.13";
Password: secret
int port = 1521;
String sid = "orcl";
String oracleURL = "jdbc:oracle:thin:@"+hostname+":"+port+":"+sid;
String username = “myid";
String password = “secret";
conn = DriverManager.getConnection(oracleURL, username, password);
//Make the query

String ins_query=“INSERT INTO users VALUES(‘”+firstName+”’,’”+lastName+”’,’”
+email+”’,’”+userName+”’,’”+password+”’)”;
//Run the query

int result = stmt.executeUpdate(ins_query);
conn.commit(); If the INSERT was successful
message = “<p> <b> You have been registered !</b></p>”; print message
//Close the database connection

stmt.close();
conn.close();
}
catch (SQLException ex) { If the INSERT was not successful print error message
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>”;
}
} End of JSP code
%>
Beginning of HTML form

<html>
<head><title>Register</title></head>
<body>
<% if (message!=null) { %>
<font color = ‘red’> <%=message%></font>
<% } %>
<form 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>
Sample Form Output from register.jsp

Chapter05 - Web-Based Database Application

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter05 - Web-Based Database Application

Uploaded by

Copyright:

Available Formats

1

Database Application Development

 HTML uses markup tags to describe web pages

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<h1>Heading 1</h1> The text between this tag is

<p> This is a paragraph</p>

<html> Tag DESCRIPTION

<p><b>This text is bold</b></p> <big> Defines big text

<sub> Defines subscripted text

<del> Defines deleted text

<s> Deprecated. Use <del> instead

<strike> Deprecated. Use <del> instead

<u> Deprecated. Use styles instead

 Add target=“_blank” to open link in new window

<h1>one Row One column:</h1>

Column 1 Column 2 Column 3

 Each Rule contains a Selector and a Declaration

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

Gender: Male Female

Reset Submit Back

Event Event Handler

<a href="home.htm" onmouseover="alert('Click to go home')">Home</a>

 Is the phone number in the correct format?

Gender: Male Female

Reset Submit Back

 Place this in the correct directory on your JSP

Date : <%= new java.util.Date() %>

 Registration.jsp performs the following functions:

//Handle the form

//Check for a first name Validate first name

//Check for a last name Validate last name

//Check for a username Validate username

//Call method to register student

//Connect to the database Connect to the Database:

//Make the query

//Run the query

//Close the database connection

Beginning of HTML form

<form method =“post”>

<p><input type=“submit” name =“submit” value=“Register” />

Sample Form Output from register.jsp

You might also like