BCSL-057 SOLVED LAB MANUAL


Session 1: Using Web 2.0 and creating pages using HTML

1. List the features of at least 5 Web 2.0 technologies

SOLUTION:

  1. Traditional web are built with HTML and CSS、CGI and had been offered as a static page . On the other hand Web 2.0 uses Ajax（Asynchronous JavaScript + XML) presenting dynamic , rich user experience to users .
  2. In tradition web, the information is often provided by the site owner and the user is always the receiver. The information model was One Way . On the other hand Web 2.0 user also contributes to the content by means of Evaluation, Review & Commenting.
  3. In traditional web the contents are solely provider by the web site owner /company, but in web 2.0 the users participate in content sourcing. This is also known as Crowd sourcing.
  4. In traditional web the contents are protected under Intellectual Property Rights but on the other hand, in web 2.0 the contents are made available to share, reuse, redistribute and edit
  5. The traditional web was like a retail business the product is sold directly to user and the revenue generated. But in web 2.0 the niche product is not sold directly but offered as a service on demand basis and income is generated as monthly fee and pay per consumption

 

2. Create a simple website about you. The website should contain at least two to three pages about you. It should have a table, a menu and some photographs. You should try to create an image map in your website. You should demonstrate the use of summary tags, headings, colours etc.

SOLUTION:

 

3. Create a feedback form for the website that you have created. Do not create the action button. Your form should have all possible types of form input options.

SOLUTION:

 

4. Create a form for data entry for the marks of the students of a class. Identify the requirements for such a form by collecting few sample mark lists and then design and implement it.

SOLUTION:

 

Session 2: Creating Style Sheets for the web pages created in session 1

1. In the HTML pages that you have designed in Session 1, create several divisions. Identify some classes such that alternative rows of a table have different shading. The background colour of each division should be different. Some text should have different display colour and background.

SOLUTION:

 

2. Insert a CSS for all the forms designed in session 1. The forms should have a image as the background.

SOLUTION:

 

3. Create four simple web pages linked together. All the web pages should share a CSS and a drop down Menu that uses CSS and HTML code only. The menu options should be: Home, Departments, Student Support and Contact Us.

SOLUTION:

 

Session 3: Creating sample XML document and displaying it

1. Customer list of an organization includes the name of customers, their Home or permanent addresses, and at least two phone numbers. Create a customer list of at least four customer using XML.

SOLUTION:

 

2. Create the DTD for the customers you created in problem 1.

SOLUTION:

 

3. Create an XML document to that stores data as XML document, checks it using XML schema and displays the information as shown in the table below: Subject Programme Name of Students Database Systems MCA Ramesh Riaz Advanced Operating System M.Tech Sandeep Cristopher Salim Web Programming BCA Farhin Rajan

SOLUTION:

 

4. Create a database of books titles, authors, year of publication, publisher name, price and number of copies purchased using XML. The list should have at least 10 books and every book must have at least one author. Create the XML schema for this books data.

SOLUTION:

 

Session 4 and 5: Using and writing JavaScript in web pages

 

1. Write a JavaScript program that displays a Drop Down Menu

SOLUTION:

<!Javascript code to display drop down list>
<html>
<head>
<title> MAGNUS WAY JS </title>
</head>

<body>

<select id=”opts” onchange=”showForm()”>
<option value=”0″>Select Option</option>
<option value=”1″>Option 1</option>
<option value=”2″>Option 2</option>
</select>

<div id=”f1″ style=”display:none”>
<form name=”form1″>
<select id=”opts” onchange=”showForm()”>
<option value=”0″>Select Option</option>
<option value=”1″>Option 1A</option>
<option value=”2″>Option 1B</option>
</select>
</form>
</div>

<div id=”f2″ style=”display:none”>
<form name=”form2″>
<select id=”opts” onchange=”showForm()”>
<option value=”0″>Select Option</option>
<option value=”1″>Option 2A</option>
<option value=”2″>Option 2B</option>
</select>
</form>
</div>

<script type=”text/javascript”>
function showForm() {
var selopt = document.getElementById(“opts”).value;
if (selopt == 1) {
document.getElementById(“f1”).style.display = “block”;
document.getElementById(“f2”).style.display = “none”;
}
if (selopt == 2) {
document.getElementById(“f2”).style.display = “block”;
document.getElementById(“f1”).style.display = “none”;
}
if (selopt == 0) {
document.getElementById(“f2”).style.display = “none”;
document.getElementById(“f1”).style.display = “none”;
}
}
</script>
</body>
</html>

 

2. Write a JavaScript program that creates a sequence of automatically changing pictures on a web page.

SOLUTION:

 

3. Write JavaScript code to check if data has been properly entered in the forms you have created so far. This activity may be performed when you press the Check Button that you may create on each form.

SOLUTION:

4. Write a JavaScript program that displays the current time and updates it after every minute.

SOLUTION:

<html>
<head>
<title>MAGNUS WAY : BCSL-057 SOLVED LAB MANUAL</title>
<script type=”text/javascript”>
function display_c(){
var refresh=1000*60;
mytime=setTimeout(‘display_TIME()’,refresh)
}

function display_TIME() {
var strcount
var x = new Date()
document.getElementById(‘TIME’).innerHTML = x;
tt=display_TIME();
}
</script>
</head>

<body onload=display_TIME();>
<span id=’TIME’ ></span>

</body>
</html>

5. Write a JavaScript program that counts the number of times a Button is clicked.

SOLUTION:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!==”undefined”)
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById(“result”).innerHTML=”You have clicked the button ” + localStorage.clickcount + ” time(s).”;
}
else
{
document.getElementById(“result”).innerHTML=”Sorry, your browser does not support web storage…”;
}
}
</script>
</head>
<body>
<p><button onclick=”clickCounter()” type=”button”>Click me!</button></p>
<div id=”result”></div>
<p>Click the button to see the counter increase.</p>
</body>
</html>

 

6. Create a web page with two pictures. Write a JavaScript program that displays the description of the picture when mouse is brought over the picture.

SOLUTION:

<!DOCTYPE html>
<html>
<head>
<script>
function toggleVisibility(pic){
if (pic.style.visibility==”hidden”){
pic.style.visibility=”visible”;
}
else {
pic.style.visibility=”hidden”;
}
}
</script>
</head>
<body>
<table>
<tr><td>
<a href=”” onmouseover=toggleVisibility(first); onmouseout=toggleVisibility(first)>
<img src=”TYPE YOUR PIC LINK” width=”400″ height=”550″ border=”1″ alt=””></a>
</td>
<td>

<div id=first style=”position:relative; visibility:hidden”> This Poetry is written By AMRESH MISHRA, WWW.MAGNUSWAY.wordpress.com</div>
</td></tr>
<tr>
<td>
<a href=”” onmouseover=toggleVisibility(second); onmouseout=toggleVisibility(second)>
<img src=”TYPE YOUR PIC LINK” width=”400″ height=”550″ border=”1″ alt=””></a>
</td>
<td>
<div id=second style=”position:relative; visibility:hidden”> This Poetry is written By AMRESH MISHRA, WWW.MAGNUSWAY.wordpress.com</div>
</td>
</tr>
</table>
</body>
</html>

7. Write a JavaScript program to demonstrate simple animation on a web page.

SOLUTION:

 

Session 6, 7: Using JSP/Servlet

 

1. Write a JSP/Servlet program that takes your name and address from an HTML Form and displays it on a web page.

SOLUTION:

 

2. Write a JSP program that output current time only.

SOLUTION:

 

3. Write a JSP program that counts the number of times a link is clicked.

SOLUTION:

4. Create five pages of a web site having similar top and left panels. The top should have a logo on the left and name of the organization in the middle. The left should have a drop down menu. Use JSP to include it in all the web pages.

SOLUTION:

 

5. Create a login form and check if the user name and password entered by the user are correct.

SOLUTION:

 

6. Create a quiz of at least five questions and check if the questions have been answered correctly.

SOLUTION:

 

7. Write a JSP program that displays “Good Morning” or “Good Evening” based on the present time.

SOLUTION:

 

Session 8, 9, 10: Writing simple applications using JSP and JDBC and deploying it on web or mobile devices

1. Create a website using JSP and JDBC that creates employee database of an organization. The employee database has two tables – employee having fields empID, name, department, present designation, present salary, emailed, year of joining the organization, and department having fields department, department name and manager. Create forms to enter information of employees and departments. You must also create a form to display list of employees of a department.

SOLUTION:

 

2. Create an application that creates a simple banking database with tables for customers and customer transactions. You must create a login form to verify login details from the customer table. You may create a session or use cookies if possible to perform the transactions.

SOLUTION:

3. Create a simple Web application for maintaining records of students and teachers in a School. You may study such a system. Make necessary assumptions while developing this application.

SOLUTION:

4. Design and develop any of the above website for mobile devices.

SOLUTION:

 

1 Comment

One thought on “BCSL-057 SOLVED LAB MANUAL”

Leave a comment