BMS INSTITUTE OF TECHNOLOGY &

CONTENTS
MANAGEMENT
Sl.
AVALAHALLI, YELAHANKA, BANGALORE - 64 Page
No Particulars
Nos.
.
1 Index 2
2 DEPARTMENT
Lab Instructions OF MCA 3
3 Hardware and Software Requirements 3
4 Index of Lab Programs 4
PART A 5-7
5 Program1 8-12
6 Program2 13-15
7 Program3 16-17
8 Program4 18-21
9 Program5 LAB MANUAL 22-24
10 Program6 25-27
11 Program7 28-31
12 Program8 32-36
FOURTH SEMESTER MCA
PART B 37-39
Advanced
13 Mini Project-I Web Programming Laboratory 40-42

16MCA47
(CBCS Scheme 2016)

Prepared by: Prof. Shivakumara T, Assistant Professor

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 LABORATORY INSTRUCTIONS

i. Duration of each laboratory session is 3 hour /week.

ii. Maximum marks for Internal Assessment is 20.
iii. Two internal tests will be conducted for the laboratory.
iv. Award of marks is T1+T2+CE+MCQ/Assignment [5+5+5+5] marks
v. University examination is of 3 hour duration. Maximum marks for External
Assessment is 80.
vi. In the examination each student picks one question from part A which is
evaluated for 40 Marks.
vii. Part A : 40 Marks and Part B : 40 Marks
viii. A team of maximum two students must develop the web application project.
However during the examination, each student must demonstrate the project
individually.
ix. The team must submit a brief project report (25-30 pages) that must include
the following
a. Introduction
b. Requirement Analysis
c. Software Requirement Specification
d. Analysis and Design
e. Implementation
f. Testing
x. The report must be evaluated for 10 Marks. Demonstration and Viva for 30
Marks.

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 HARDWARE AND SOFTWARE REQUIREMENTS

Hardware:

RAM : 512 MB

HDD : 10 GB

Software:

OS : Windows 98 onwards

Editor : Notepad / Notepad++ / Edit Plus / Any IDE

Server : XAMPP any latest version, Ruby

Database : MYSQL

Browser : Internet Explorer / Mozilla firefox / Google Chrome / Opera

Library : jquery-1.11.min.js (works in all versions of browser)

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Program
PROGRAMS
No.
PART A
Write jQuery
1 a) Limit character input in the textarea including count
b) Based on check box, disable/enable the form submit button
a) Write a PHP program to store current date-time in a COOKIE and display
the ‘Last visited on’ date-time on the web page upon reopening of the same
2 page.
b) Write a PHP program to store page views count in SESSION, to increment the count on each
refresh, and to show the count on web page.
Write a PHP program to insert name and age information entered by the user
3 into a table created using MySQL and to display the current contents of this
table.
Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail
text fields. On submitting, store the values in MySQL table. Retrieve and
4 display the data based on Name.

Write a PHP program to read student data from an XML file and store into the
5 MySQL database. Retrieve and display.

Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail
text fields. On submitting, store the values in MySQL table. Provide buttons
6 to update and delete data for the same.

Build a Rails application to accept book information viz. accession number,

title, authors, edition and publisher from a web page and store the
7 information in a database and to search for a book with the title specified by
the user and to display the search results with proper headings.

Create a XHTML form to collect Viewers Opinion based on rating (1 to 5).

8 Finally Display the survey report in terms of a bar-graph using D3-JS

PART B
Mini-Project-I
Develop a web application project using the languages and concepts learnt
9 in the theory and exercises listed in part A with a good look and feel effects.
You can use any web technologies and frameworks and databases.

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

PROGRAM-1:

Program­1a

Write jQuery
a) Limit character input in the textarea including count
b) Based on check box, disable/enable the form submit button

Procedure to Execute:

1. Use any of the editor (Notepad / Editplus / Notepad++ / Brackets)

2. Save the files in this path: C:\xampp\htdocs\AWPLabprgs\
3. Download jquery version mentioned above from www.jquery.com/downloads
4. Save downloaded jquery.js file in this path C:\xampp\htdocs\
5. Code the program as xhtml and save it as p1a.html
6. To run the code:
a. Open control panel of xampp
b. Start the services of Apache and Mysql
c. Test whether the server is up by typing the url: localhost:8080 and press enter
in the internet browser (either Internet explorer, firefox or chrome). If server is
up, it will show the admin home page.
7. Now type the url to run your program code as, localhost:8080/AWPLabprgs/p1a.html

p1a.html

<!­­ Program 1a. Limit character input in the textarea including count ­­>
<!DOCTYPE html>
<html>
<head><script type ='text/javascript' src='/jquery.js'></script>
<meta charset="utf­8">
<title>Limit character input in the textarea including count</title>
<style type="text/css">
textarea {   display:block;   }  
</style>
<!­­ Offline jQuery support ­>
<script>
window.jQuery || document.write (‘<script src=”javascript/jquery­1.11.3.min.js”>< \/script>’);
</script>
</head>
<body>
<label>Maximum 15 characters</label>
<textarea id="textarea" maxlength="15"></textarea>
<span id="rchars">15</span> Character(s) Remaining
<script type='text/javascript'>
var maxLength = 15;
$('textarea').keyup(function() {
  var textlen = maxLength ­ $(this).val().length;
  $('#rchars').text(textlen);
});
</script>

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

</body>
</html>
Sample output: 

Start the server: (In my case localhost port number is 8084, usually by default 8080)

Test the server

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

You should get this admin page (the appearance of the page depending upon the version of xampp 
you use)

Now, type the url to execute your program:

Start entering the characters in the textarea box, it will shows the character remaining

Program­1b

P1b.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery enable and disable button</title>
<script type='text/javascript' src='/jquery.js'></script>
<script type='text/javascript'>
$(function() {
$("#accept").click(function() {
  $("#submitbtn").attr("disabled", !this.checked);
});
});
</script>
<meta charset="utf­8">
</head>
<body>
<form method="post">
<input id="accept" name="accept" type="checkbox" value="y"/>I accept<br>
<input id="submitbtn" disabled="disabled" name="Submit" type="submit"  value='submit' />
</form>
</body>
</html>

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Output:

PROGRAM-2:

a) Write a PHP program to store current date-time in a COOKIE and display the
‘Last visited on’ date-time on the web page upon reopening of the same page.
b) Write a PHP program to store page views count in SESSION, to increment the
count on each refresh, and to show the count on web page.

p2a.php

<?Php
#start session
session_start();
#check if session exists
if(isset($_session['count'])) {
echo "pageviews: " .$_session['count'];
#increment the count
$_session['count']++;
}
else {
#if no session exists
$_session['count']=1;
echo "pageviews" .$_session['count'];
}
?>
Output:
P2A.php
• open a browser and in the address bar type localhost:8084/p2a.php
• The output is displayed on the browser with the last visit time.

Screenshot:

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

On successive refresh, the timestamp gets updated.

P2B.PHP
<!-- Program 2 b: write a php program to store current date-time -->
<!-- in a cookie and display the "last visited on" date-time on -->
<!-- the web page upon reopening of the same page.-->

<?Php

$itm=60*60*24*60+time();
//To properly accept the current system time
date_default_timezone_set(‘Asia/Kolkata’);
setcookie('last_visit',date("g:i -m/d/y"),$itm);

if(isset($_cookie['last_visit'])) {
$visit=$_cookie['last_visit'];
echo "your last visit was- " .$visit;
}
else {
#no cookies
echo "you have some stale cookies!" ;
}
?>

Output:

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

REFRESH THE PAGE,

PROGRAM-3:

Write a PHP program to insert name and age information entered by the user into
a table created using MySQL and to display the current contents of this table.

P3.html
<html>
<h2>Insert Info</h2>
<form action="insert.php">
Name:<input type=text name=name /><br>
Age:<input type=”number” name=age/><br>
<input type=submit value=insert />
<input type=reset value=reset />
</form>
<h2>Display the current contents of this table</h2>
<form action="display.php">
<input type=submit value=display/>
</form>
</html>

insert.php
<?php
# take inputs & store in local variables
$name = $_REQUEST['name'];
$age = $_REQUEST['age'];

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 # create a database handle
# mysql_connect() connects the script to MySQL server
# the parameters are hostname
$con = mysql_connect("localhost",”root”,””) or die('Could not connect');
# select a database
mysql_select_db("test",$con);
if (mysql_query("insert into employee values('$name','$age'')")) {
echo "Record inserted successfully!";
}
# release the database handle by closing the connection
mysql_close($con);
?>

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

display.php

<html>
<h2>Employee Table Records as follows</h2>
<table border=1>
<tr>
<th>Name</th><th>Age</th> </tr>
<?php
$con = mysql_connect("localhost",”root”,””) or die('Could not connect');
mysql_select_db("test",$con);
$result = mysql_query("select * from employee");
# retrieve all rows
while ($row = mysql_fetch_array($result)) {
# display result
echo "<tr>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['age']."</td>";
echo "</tr>";
}
mysql_close($con);
?>
</table>
</html>

OUTPUT:

Create Table Employee(Name Text(50), Age Int(1))

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Display the records through client page:

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

PROGRAM-4:

Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text
fields. On submitting, store the values in MySQL table. Retrieve and display the
data based on Name.

Setting up the database (MySQL):

1. Open a terminal and run the command mysql

2. In the MySQL prompt run show databases;

3. Choose an existing database by running the command use test; where test is the name of an already
existing database.

4. Now, create a new table by running the command create table students(name varchar(20),addr1
varchar(20),addr2 varchar(20),email varchar(20));

5. Run the command exit to exit from the MySQL prompt.

Code: This program works in XAMPP 1.7.3

P4.html

<html>
<h2>Insert Info</h2>
<form action="insert.php">
Name:<input type=text name=name /><br>
Address Line 1:<input type=text name=addr1><br>
Address Line 2:<input type=text name=addr2><br>
Email-ID:<input type=text name=email><br>
<input type=submit value=insert />
<input type=reset value=reset />
</form>
<h2>Search Info</h2>
<form action="search.php">
Name:<input type=text name=name /><br>
<input type=submit value=search />
<input type=reset value=reset />
</form>
</html>
insert.php
<?php
# take inputs & store in local variables
$name = $_REQUEST['name'];
$addr1 = $_REQUEST['addr1'];
$addr2 = $_REQUEST['addr2'];
$email = $_REQUEST['email'];
# create a database handle
# mysql_connect() connects the script to MySQL server
# the parameters are hostname
$con = mysql_connect("localhost") or die('Could not connect');

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 # select a database
mysql_select_db("test",$con);
if (mysql_query("insert into students values('$name','$addr1','$addr2','$email')")) {
echo "Data inserted successfully!";
}
# release the database handle by closing the connection
mysql_close($con);
?>
search.php
<html>
<h2>Search Result</h2>
<table border=1>
<tr>
<th>Name</th><th>Address Line 1</th><th>Address Line 2</th><th>Email-ID</th>
</tr>
<?php
$name = $_REQUEST['name'];
$con = mysql_connect("localhost") or die('Could not connect');
mysql_select_db("test",$con);
$result = mysql_query("select * from students where name like '%".$name."%'");
# retrieve all rows with matches
while ($row = mysql_fetch_array($result)) {
# display result
echo "<tr>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['addr1']."</td>";
echo "<td>".$row['addr2']."</td>";
echo "<td>".$row['email']."</td>";
echo "</tr>";
}
mysql_close($con);
?>
</table>
</html>
OUTPUT:

Screenshot:

Create table with the following fields

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Search:
Enter name: (enter name, which is there in table)
Example: shiva

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

PROGRAM-5:

Write a PHP program to read student data from an XML file and store into the
MySQL database. Retrieve and display.

P5.xml

<?xml version="1.0" ?>

<student>
<stud>
<name>shiva</name>
<usn>1by16mca01</usn>
</stud>
<stud>
<name>Kumar</name>
<usn>1by16mca02</usn>
</stud>
</student>

P5.html

<html>
<body>
<center>
<table width="50%" border="2"><tr>
<form action="http://localhost/P5.php">
<tr><th> ENTER NAME TO SEARCH </th></tr><br/>
<td align="center"><br/>Name: <input type="text" name="name"><br /><br/>
submit: <input type="submit"><br/><br/></td>
</form></tr></table>
</body>
</html>

P5.php

<?php
$link=mysqli_connect("localhost","root","","test");
if(!$link)
{
echo "Error: Unable to connect to MySQL." . PHP_EOL;
echo "Debugging errno: " . mysqli_connect_errno() . PHP_EOL;
echo "Debugging error: " . mysqli_connect_error() . PHP_EOL;
exit;
}
$name=$_GET['name'];
$studs=simplexml_load_file("http://localhost/P5.xml");
foreach($studs as $stud)
{
$name = $stud->name;

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

$usn = $stud->usn;
mysqli_query($link,"insert into stud3 values('$name','$usn')");
}
$name=$_GET['name'];
$res=mysqli_query($link,"select * from stud3 where name='$name'");
if(mysqli_num_rows($res)==0)
{
echo "$name doesn't exist in the table";
}
else
{
echo "<table border='1' align=center width=60%>";
echo "<tr><td width=15% align=center>NAME</td><td width=15%
align=center>USN</td></tr>";
while($arr=mysqli_fetch_row($res))
echo "<tr><td>$arr[0]</td><td>$arr[1]</td></tr>";
echo "</table>";
}
?>

Output:

Create table stud3(name text(30), usn varchar(10))

enter name to search (see xml file for name to be searched) here, shiva

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Also, You Can See The Contents Fetch From Xml And Inserted It Into The Stud3 Table

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

PROGRAM-6:

Create a XHTML form with Name, Address Line 1, Address Line 2, and E-mail text
fields. On submitting, store the values in MySQL table. Provide buttons to update
and delete data for the same.

P6.html
<!doctype html>
<html lang="en">
<title>Document</title>
</head>
<body>
<h2>CUSTOMER DETAILS</h2>
<form action="insert.php">
Name:<input type="text" name="name" /><br>
Address line 1:<input type="text" name="addr1" /><br>
Address Line 2:<input type="text" name="addr2" /><br>
Email id:<input type="text" name="email" /><br><br>
<input type="submit" value="insert" />
<input type="reset" value="clear" />
</form><br><br><br>
<form action=”display.php”>
<input type=”submit” value=”display”>
</form>
<form action="delete.php">
Delete record by name<input type="text" name="name" placeholder="name must be same">
<br><br>
<input type="submit" value="delete">
</form>
<br><br>
<form action="update.php">
Name:<input type="text" name="name" placeholder="name must be same"/><br>
Address line 1:<input type="text" name="addr1" /><br>
Address Line 2:<input type="text" name="addr2" /><br>
Email id:<input type="text" name="email" /><br><br>
<input type="submit" value="update" />
<input type="reset" value="clear" />
</form><br><br><br>
</body>
</html>

insert.php
<?php
$name=$_REQUEST['name'];
$addr1=$_REQUEST['addr1'];
$addr2=$_REQUEST['addr2'];
$email=$_REQUEST['email'];
$con=mysqli_connect("localhost","sid","sid");

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

mysqli_select_db($con,"customer");
if(mysqli_query($con,"INSERT into customer_details
values('$name','$addr1','$addr2','$email')"))
{
echo "data inserted successfully!";
}

mysqli_close($con);

?>

display.php

<html>
<h2>Customer Records as follows</h2>
<table border=1>
<tr>
<th>Name</th><th>Address-1</th><th>Address-2</th><th>Email</th></tr>
<?php
$con=mysqli_connect("localhost","sid","sid");
mysqli_Select_db($con,"customer");
$result = mysql_query("select * from customer_details");
# retrieve all rows
while ($row = mysql_fetch_array($result)) {
# display result
echo "<tr>";
echo "<td>".$row['name']."</td>";
echo "<td>".$row['addr1’]."</td>";
echo "<td>".$row['addr2']."</td>";
echo "<td>".$row['email]."</td>";
echo "</tr>";
}
mysql_close($con);
?>
</table>
</html>
delete.php

<?php
$name=$_REQUEST['name'];
$con=mysqli_connect("localhost","sid","sid");
mysqli_select_db($con,"customer");
$sql = "DELETE FROM customer_details WHERE name='$name'";
if(mysqli_query($con,$sql))
{
echo "record deleted successfully";
}

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

else
{
echo"<br>Iam sorry ! record did not get delete";
}
?>

update.php

<?php
$name=$_request['name'];
$addr1=$_request['addr1'];
$addr2=$_request['addr2'];
$email=$_request['email'];
$con=mysqli_connect("localhost","sid","sid");
mysqli_select_db($Con,"Customer");
$result=mysqli_query($con,"update Customer_Details Set
addr1='$addr1',addr2='$addr2',email='$email' where name='$name'");
if($result)
{
echo "record Updated Successfully";
}
else
{
echo "<br>Record Did Not Get Update Successfully";
}
?>

OUTPUT:

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

PROGRAM-7:

Build a Rails application to accept book information viz. accession number, title,
authors, edition and publisher from a web page and store the information in a
database and to search for a book with the title specified by the user and to
display the search results with proper headings.

Step 1: download InstantRails zip file from www.rubyforge.org/projects/instantrails for

windows.
Step 2: Unzip InstantRails where you want it to reside.

Step 3: Start InstantRails: This is done by clicking the thick I, which is the icon of the Instant
Rails application, in the directory in which Instant Rails was installed. A small
window then opens, as shown in the following figure.

Steps to create rails Application:

Step 1: Open a Ruby console window through Instant Rails by clicking the black "I" button
Rails Applications -> Open Ruby Console Window. This entry opens a command-line
window in the rails_apps subdirectory of the directory in which Instant Rails was
installed.

Step 2: Create new rails application in the rails_apps directory with the following command.
>rails -d mysql lab4
Where lab4, name of the rails application. Next is move to the
lab4 directory.

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Step 3: Configure the database: It is customary in Rails applications to use three copies of the
database: one for development, one for testing, and one for production. The
configurations of three databases are constructed with the following single command:
labprogram4>rake db:create:all
The Rails response to this command is
(in C:/InstantRails-2.0-win/rails_apps/labprogram12)
Step 4: Create Database Table: The following command is used to create database table with
five columns: acct, of integer type; title, of string type; author, of string type; edition,
of string type; publication, of string type.
Labprogram4>ruby script/generate scaffold bookinfoacct:integertitle:string
author:stringedition:stringpub:string
Step 5: Create migration: the following command is used to migrate database table.
Labprogram4>rake db:migrate
The Rails response to this command is
(in C:/InstantRails-2.0-win/rails_apps/labprogram12)
== 1 CreateBookinfos: migrating =================================
-- create_table(:bookinfos)
-> 0.0630s
== 1 CreateBookinfos: migrated (0.0630s) ==========================
Step 6: Start WEBrick Server: the following command is used to start WEBrick server to test
Rails application.
Labprogram4>ruby script/server
Step 7: Go to browser and type in the URL as http://localhost:3000/bookinfos, we will get a
Display shown below.

Step 8: Insert book information by clicking on Newbookinfo. Click Create button after
entering the fields.

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Step 9: Press CTRL+C in command prompt (Ruby console window) and type the following
command to create new controller called main.
Labprogram4>ruby script/generate controller main [Enter]
the above command will create a file called main_controller.rb in
C:\InstantRails-2.0-win\rails_apps\labprogram4\app\controllers
Step 10: Create a file called search.html.erb file in C:\InstantRails-2.0-win\rails_apps\
Labprogram4\app\views\main with the following content.

<html>
<head><title>Search Book Information</title></head>
<body bgcolor="lightgreen">
<form action="search_book">
<center><b>Enter the Book Title<br><br>
Title&nbsp;<input type="text" name="title"><br><br>
<input type="submit" value="submit">
</b></center></form></body></html>

Step 11: Open the file called main_controller.rb (C:\InstantRails-2.0-win\rails_apps\

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 Labprogram4\app\controllers) and type the following code and save the file.

class MainController<ApplicationController
defsearch_book
@title=params[:title]
@book_search=Bookinfo.find(:all,:conditions=>["title=?",@title])
end
end

Step 12: Create a file called search_book.html.erb file in C:\InstantRails-2.0-win\rails_apps\

Labprogram4\app\views\main with the following content.

<html>
<head><title>Searched Book Information</title></head>
<body bgcolor="lightgreen">
<center><b>
<% if @book_search.length == 0 %>
No Rows found
<% else %>
The Book Information shown below<br><br>
<table border=1>
<tr><td>ACCT</td><td>TITLE</td><td>AUTHOR</td>
<td>EDITION</td><td>PUBLICATION</td></tr>
<% @book_search.eachdo |book| %>
<tr>
<td><%=book.acct%></td>
<td><%=book.title%></td>
<td><%=book.author%></td>
<td><%=book.edition%></td>
<td><%=book.pub%></td>
</tr>

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 <% end %>
</table>
<% end %>
</b></center>
</body>
</html>

Step 13: Go to browser and type in the URL as http://localhost:3000/main/search, we will

get a Display shown below.

Step 14: The web page displays the searched results shown as below.

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

PROGRAM-8:

Create a XHTML form to collect Viewers Opinion based on rating (1 to 5). Finally
Display the survey report in terms of a bar-graph using D3-JS

Procedure:

1. Download d3.js zip file from www.d3js.org

2. Unzip and place d3.js and d3.min.js in the folder where you want to
keep your program files.
3. Create a sample data set as below (survey.csv)
4. Create a html page here it is named as p8d3.html (see the code
below).
5. Place all the files in the same folder
6. Right click the p8d3.html and Open with firefox browser. It will
display the output as shown below.

SAMPLE SURVEY DATA SET: (STUDENTS STRENGTH: 62)

survey.csv

Ratings Frequencies

Excellent (5) 45

Very Good 10
(4)

Good (3) 5

Satisfactory 1
(2)

Poor (1) 1

p8d3.html

<!doctype html>
<html>
<head>
<style>
.bar {
fill:steelblue;
}
.bar:hover{
fill:brown;
}

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 .axis--x path{
display:none;
}
</style>

<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="600" height="600"></svg>
<script>

var svg=d3.select("svg"),
margin=300,
width=svg.attr("width") - margin,
height=svg.attr("height") - margin

svg.append("text")
.attr("transform","translate(100,0)")
.attr("x",50)
.attr("y",50)
.attr("font-size","24px")
.text("Student Feedback Survey Bar Graph")

var xScale=d3.scaleBand().range([0,width]).padding(0.4),
yScale=d3.scaleLinear().range([height,0]);

var g=svg.append("g")
.attr("transform","translate(" + 100 + "," + 100 + ")");

d3.csv("survey.csv",function(error,data) {
if(error) {
throw error;
}
xScale.domain(data.map(function(d) { return d.Ratings; }));
yScale.domain([0,d3.max(data,function(d) { return d.Frequencies*1 ;})]);
g.append("g")
.attr("transform","translate(0," + height + ")")
.call(d3.axisBottom(xScale))
.append("text")
.attr("y",height - 250)
.attr("x",width - 100)
.attr("text-anchor","end")
.attr("stroke","black")
.text("Ratings");

g.append("g")

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

 .call(d3.axisLeft(yScale).tickFormat(function(d){
return "" + d;
})
.ticks(10))
.append("text")
.attr("transform","rotate(-90)")
.attr("y",6)
.attr("dy","-5.1em")
.attr("text-anchor","end")
.attr("stroke","black")
.text("Frequencies");

g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class","bar")
.attr("x",function(d) { return xScale(d.Ratings); })
.attr("y",function(d) { return yScale(d.Frequencies); })
.attr("width",xScale.bandwidth())
.attr("height",function(d) { return height - yScale(d.Frequencies); });

});

</script>
</body>
</html>
output: Note: It will works in firefox

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru

MINI PROJECT-I

INSTRUCTIONS:

1. Project should have an innovative component

2. Project should be precise and fit to at least 3 months of work.

3. Project must use the technologies which are learnt in the theory course.

4. Project may, make use of advanced technologies also.

REFERENCES:

[1] www.w3schools.com

[2] http://www.tutorialsteacher.com/d3js/create-bar-chart-using-d3js

[3] https://github.com/jquery/jquery

[4] https://stackoverflow.com/

[5] https://jquery.com/download/

[6] https://github.com/drnic/instantrails/tree/master/InstantRails-win/InstantRails

Manual Prepared By: [Advanced Web Programming – CBCS syllabus]

Shivakumara T, Assistant Professor, Department of MCA, BMSIT&M, Bengaluru