Web Programming 19IT02

Web Programming (PS02CINT25)
1. Using HTML tag solve below problems:

Solution: Add a tooltip to the paragraph with the text "About IT Course".
<html><head><title>p1</title></head>
<body><p title="About IT Course"> M.Sc IT is a two year duration course.It helps
student to develop skills required to join computer industry.</p></body></html>
Output:
------------------------------------------------------------------------------------------------------------
Change the size of the image to 250 width and 400 height.
< body><img src="istar.png" width="250pt" height="400pt"></body>
</html>
Output:
------------------------------------------------------------------------------------------------------------
Transform the text click here into a link that goes to
"https://www.google.com".
<html>
<head><title>p3</title></head>
<body><b><center><a href=https://www.google.com>Click Here</a>
</center></b></body>
Output:
-------------------------------------------------------------------------------------------------
The image no.2 does not exist. Specify the alternate text "istar.edu.in"
for the image.
PREPARED BY:BANSARI PATEL(19IT02) Page 1

<body><img src=”2.png” width=”250” height=”250” alt=”ISTAR.EDU.IN”>

</body></html>
Output:
-------------------------------------------------------------------------------------------------
Image as a Link.
<html><head><tittle>p5</title></head>
<body><a href=”test.html”><img src=”istar.png” width=”250” height=”400”>
</a></body>
Output:
-------------------------------------------------------------------------------------------------
Add six headings to the document with the text "ISTAR”.
<body><center><H1>ISTAR</H1><H2>ISTAR</H2><H3>ISTAR</H3><H4>ISTA
R</H4><H5>ISTAR</H5><H6>ISTAR</H6></center></body>
Output:
-------------------------------------------------------------------------------------------------
Change the text color of the paragraph to “red”
<body><font color=red>
<p> M.Sc IT is a two year duration course.It helps student to develop skills required

to join computer industry.</body></p></font>
Output:
-------------------------------------------------------------------------------------------------
Change the background color of the page.
<html><head><title>p7</title>
<body bgcolor=black>
<font color=white>
to join computer industry.</p></font></body></head></html>
Output:
-------------------------------------------------------------------------------------------------
Use an HTML element to add quotation marks around the letters
"ISTAR".
<p> M.Sc IT at <q>ISTAR</q> is a two year duration course.</p></head></html>
Output:
-------------------------------------------------------------------------------------------------
The letters "HTML" in the text below is an abbreviation of "Hyper Text
Markup Language".
<abbr title="Hyper Text Markup Language">HTML</abbr></head></html>
Output:
2. To create a simple html file to demonstrate the use of different tags.

Solution: a) Moving text = “Simple HTML Tags”
<marquee>Simple HTML Tags</marquee>
Output:
-------------------------------------------------------------------------------------------------
b) Different heading tags ( h1 to h6)
<H1>ISTAR</H1>

<H2>ISTAR</H2>
<H3>ISTAR</H3>
<H4>ISTAR</H4>
<H5>ISTAR</H5>
<H6>ISTAR</H6>
Output:
-------------------------------------------------------------------------------------------------
c) Paragraph
to join computer industry.</p>
Output:
-------------------------------------------------------------------------------------------------
d) Horizontal line
<p>M.Sc IT is a two year duration course.It helps student to develop skills required
<hr> to join computer industry.</p>
Output:
-------------------------------------------------------------------------------------------------
e) Line Break
<p>M.Sc IT is a two year duration course.It helps student to develop skills required
<br> to join computer industry.</p>
Output:
----------------------------------------------------------------------------------------------------------
f) Block Quote
<p>About ISTAR College</p>
<blockquote cite="http://www.istar.edu.in/">M.Sc IT is a two year duration
course.It helps student to develop skills required to join computer

industry.</blockquote>
Output:
----------------------------------------------------------------------------------------------------------
g) Pre tag
<pre>
Bansari Patel
Female
22
</pre>
Output:
----------------------------------------------------------------------------------------------------------
h) Different Logical Style (<b>,<big>,<i>,<small>,<sub>,<sup>…)
<b>Bold</b><br>
<big>Big</big><br>
<i>Italic</i><br>
<small>Small</small><br>
<font>This is example of<sub>Sub</sub><br>
This is example of<sup>Sup</sup></font>
Output:
----------------------------------------------------------------------------------------------------------
i)Different Physical Style
(<cite><code>,<del>,<dfn>,<em>,<ins><samp>,<strong>…)
<p> This is an example of -><cite>cite tag</cite>.<br/>
Code tag is used to highlight code used in computer like -> <code> sqrt()
</code><- function.<br/>
This is an example of -><del>del tag</del>.<br/>
-><dfn>dfn tag</dfn><- is used to mark the term whose defination is
provided in line.<br/>
This is an example of -><em>em tag</em>.<br/>
Ins tag is used to insert new data.i.e using ins tag "This is an example of" can
be changed into "This is an example of -><ins>ins tag.</ins><-<br/>
samp tag is used to highlight output of a computer like this -> <samp> Output
</samp><-.<br/>

This is an example of -><strong>strong tag</strong><-.<br/>

</p>
Output:
----------------------------------------------------------------------------------------------------------
j)Listing Tags
<body>
<ul>
<li> PG
<ol>
<li>Science
<ul type="circle">
<li>MCA</li>
<li>M.Sc.IT</li>
<li>M.Sc.Science</li>
</ul>
</li>
<li>Commerce
<ul type="dot">
<li>MBA</li>
<li>M.Com.</li>
</ul>
</li>
</ol>
</li>
<li> UG
<ol type="i">
<li> Science
<ol type="a" start="b">
<li>BCA</li>
<li>B.Sc.IT</li>
</ol>
</li>
<li> Commerce
<ol type="1" start="4">
<li>B.Com.</li>
<li>BBA</li>
</ol>
</li>
</ol>
</li>
</ul>
</body>
Output:

3. To create an html file to link to different html page which contains

images, tables, and also link within a page.
Solution: <html>
<head><title>P3.1</title></head>
<body>
<a href="program3-2.htm">Go to Page 2</a>
</body>
</html>
<html>
<head><title>P3.2</title></head>
<body>
<img src="istar.png" alt="No Image Available"/><br/><br/>
<a href="https://www.google.com">Google</a><br/><br/>
<table border="2px">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<th>Column3</th>
<th>Column4</th>
</tr>
</table>
</body>
</html>
Output:

4. To create a table by applying appropriate tags of table .

Solution: <table border= 2pt>
<caption><b><u>M.Sc. IT Syllabus Structure<u><b></caption>
<thead>
<tr>
<th colspan = 3>Sem II & Sem IV</th>
<th>Academic Year 2019-20</th>
</tr>
<tr>
<td colspan = 2>
<b>Sem II:Paper Code</b><br>
PS02CINT21<br>
PS02CINT22<br>
PS02CINT23<br>
PS02CINT24<br>
PS02CINT25<br>
PS02EINT21<br>
</td>
<td colspan = 2 align = "top">
<b>Sem IV:Paper Code</b><br>
PS04CINT21<br><br><br><br><br><br>
</td>
</tr>
</thead>
<tbody>
<tr>
<th>Description</th>
<th>Theory</th>
<th>Practical</th>
<th>Credit</th>
</tr>
<tr>
<td>Semester II</td>
<td>05</td>
<td>01</td>
<td>25</td>
</tr>
<tr>
<td>Semester IV</td>
<td>--</td>
<td>01</td>
<td>25</td>
</tr>

<tr>
<th colspan = 3>Subtotal</th>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan = 2>Seminar</th>
<td>01</td>
<td>01</td>
</tr>
<tr>
<th colspan = 3>Grand Total</th>
<td>51</td>
</tr>
</tfoot>
</table>
Output:
5. To create an HTML file by applying the different styles using inline,

external and internal style sheets.
Solution: stylesheet.css
h3{color:red}
<html>
<head>
<title> Program 5 </title>
<link href="stylesheet.css" type="text/css" rel="stylesheet">
</head>
<body>
<style type="text/css">
p{color:green;}
</style>
<p style="color:yellow">This is example of inline stylesheet.</p>

<p>This is exmaple of internal stylesheet.</p>

<h3>This is example of external stylesheet.</h3>
</body>
</html>
Output:
6. To create Validating Registration Form.

Note:
1. Define a method name as “reset()” to be called when reset button is
clicked and manually set all values of fields to default.
2. Define a method name as “check()” to be called when check button is
clicked.
a)Here check for (Validation) blank entry, name, age, email, phone no,
radio button, checkbox etc.
b) Once all the valuables are properly filled make the submit button to
be visible.
c) Define the various fields in form using table.
Solution: <!DOCTYPE html>
<html>
<head>
<title>Program 6</title>
<script type="text/javascript">
function myreset()
{
document.form1.name.value="";
document.form1.age.value="";
document.form1.address.value="";
document.form1.password.value="";
var c = document.form1.gender;
var d = document.form1.language;
var i = 0
for(i = 0; i < c.length; i++)
c[i].checked = false;
for(i = 0; i < d.length; i++)
d[i].checked = false;
document.form1.name.focus();
document.form1.submit.disabled = true;
}
function mycheck()
{
var e = document.form1.age.value
if(document.form1.name.value == "")
{
alert("Please Enter Your Name");
document.form1.name.focus();
return false;

}
else if(e == "")
{
alert("Please Enter Your Age");
document.form1.age.focus();
return false;
}
else if(isNaN(e) || (e < 0) || (e > 100))
{
alert("Please Enter age between 0 and 100");
document.form1.age.value = "";
document.form1.age.focus();
return false;
}
else if(document.form1.address.value == "")
{
alert("Please Enter Your Address");
document.form1.address.focus();
return false;
}
var c = document.form1.gender;
var d = document.form1.language;
var i = 0;
var radioresult = false;
var checkboxresult = false;
for(i = 0; i < c.length; i++)

{
if(c[i].checked)
radioresult = true;
}
for(i =0; i < d.length; i++)
{
if(d[i].checked)
checkboxresult = true;
}
if(radioresult == false)
{
alert("Plese Choose Your Gender");
return false;
}
else if(checkboxresult == false)
{
alert("Please Choose a Language");
return false;
}
else if((document.form1.password.value == "")||
(document.form1.password.value.length < 6))
{
alert("Please Enter Your Password of at least 6 characters");
document.form1.password.value = "";
document.form1.password.focus();
return false;

}
document.form1.submit.disabled = false;
return true;
}
</script>
</head>
<body>
<form name = "form1" action = "https://www.google.com" method = "post">
<font color = "red">
<table style = "background-color:lightskyblue; border-spacing: 10px">
<tr>
<th colspan="2">ENTRY FORM</th>
</tr>
<tr>
<th align="left" valign="top">Enter your Name: </th>
<td>
<input type="text" id="name1" name="name">
</td>
</tr>
<tr>
<th align="left" valign="top">Enter your Age: </th>
<td>
<input type="text" name="age">
</td>
</tr>
<tr>
<th align="left" valign="top">Enter your Address:</th>
<td>
<textarea name = "address" rows="3" cols="50"></textarea>
</td>
</tr>
<tr>
<th align="left" valign="top">gender:</th>
<td>
<input type="radio" name="gender" id="rd1" value="female">
Female <br>
<input type="radio" name="gender" id="rd2" value="male">Male
<br>
<input type="radio" name="gender" id="rd3" value="other">Other
</td>
</tr>
<tr>
<th align="left" valign="top">Languages:
</th>
<td>
<input type="checkbox" name="language" value="html">HTML<br>
<input type="checkbox" name="language"
value="php">PHP<br>
<input type="checkbox" name="language" value="asp">ASP<br>
<input type="checkbox" name="language" value="others">OTHERS
</td>
</tr>
<tr>

<th align="left" valign="top">Enter your Password:

</th>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td align="center"colspan="2">
<input type="button" value="reset" onclick="myreset()">

<input type="button" value="check" onclick="return mycheck()">
</td>
</tr>
<tr>
<th colspan="2" align="center">
Before submitting the data please click the check Button
</th>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="submit" value="submit" disabled>
</td>
</tr>
</table>
</font>
</form>
</body>
</html>
Output:

7. (a)Creating a form registeryourself.html using HTML tags.

(b)Cascading Style Sheets (CSS): Apply Style Sheet on registeryourself .
html
(c)JavaScript: Form Validation – Validating form registeryourself.html
using functions and events.
Solution: Program7.css
body{
pading:0;
margin:0;
font-family: "Times New Roman", Times, serif;
}
p{
font-size: 25px;
font-weight: bold;
padding:0;
margin:0;
}
th{
color:red;
letter-spacing: 1px;
text-transform: uppercase;
transition:1s;
}
th:hover{
color:blue;
letter-spacing: 2px;
background-color: #FFFFF0;
}

#btn1,#btn2{
background-color: green;
padding:5px;
width:200px;
transition:1s;
}
#btn1:hover,#btn2:hover{
background-color: blue;
padding:8px;
width:240px;
cursor:pointer;
color:white;
}
<!DOCTYPE html>
<html>
<head>
<title>Reg Form</title>
<link rel="stylesheet" type="text/css" href="program7css.css">
function validate(){
var F_name = document.forms["myForm"]["FName"];
var L_name = document.forms["myForm"]["LName"];
var B_day = document.forms["myForm"]["Bday"];
var Add = document.forms["myForm"]["Address"];
var S_City = document.forms["myForm"]["City"];
var S_State = document.forms["myForm"]["State"];
var S_Country = document.forms["myForm"]["Country"];
var Pin = document.forms["myForm"]["Pincode"];
var R_Gender=document.getElementsByName('Gender');
var R_Course=document.getElementsByName('Course');
var C_Box=document.forms["myForm"]["H"];
var Ch_Result=false;
var Ch_Other = document.forms["myForm"]["Other"];
var Ch_Other_Text = document.forms["myForm"]["OtherText"];
var B1=document.forms["myForm"]["Bord1"];
var P1=document.forms["myForm"]["Percentage1"];
var Pass1=document.forms["myForm"]["Passing1"];
if (F_name.value == ""){
window.alert("Please enter your First name.");
F_name.focus();
return false;
}
if (L_name.value == ""){

window.alert("Please enter your Last name.");

L_name.focus();
return false;
}
if(B_day.value==""){
window.alert("Please select your Birth-Date..");
B_day.focus();
return false;
}
if(Add.value==""){
window.alert("Please Enter your Address.");
Add.focus();
return false;
}
if(Pin.value==""){
window.alert("Please Enter your Pincode.");
Pin.focus();
return false;
}
if (S_City.selectedIndex < 1){
alert("Please Select your City.");
S_City.focus();
return false;
}
if (S_State.selectedIndex < 1){
alert("Please Select your State.");
S_State.focus();
return false;
}
if (S_Country.selectedIndex < 1){
alert("Please Select your Country.");
S_Country.focus();
return false;
}
if(!(R_Gender[0].checked || R_Gender[1].checked)){
alert("Please Select Your Gender");
return false;
}
if(!(R_Course[0].checked || R_Course[1].checked || R_Course[2].checked ||
R_Course[3].checked)){
alert("Please Select Your Course");
return false;
}
for(i=0;i<C_Box.length;i++){
if(C_Box[i].checked){
Ch_Result=true;
}
}
if(Ch_Result==false){
alert("value Nakh");
return false;
}

if(C_Box[3].checked){
if(Ch_Other_Text.value==""){
alert("Other nakh");
return false;
}
}
if(B1.value==""){
window.alert("Please Enter your Bord name.");
B1.focus();
return false;
}
if(B2.value==""){
B2.focus();
return false;
}
if(B3.value==""){
B3.focus();
return false;
}
if(B4.value==""){
B4.focus();
return false;
}
if(P1.value=="" || isNaN(P1.value)){
window.alert("Please Enter your Per % .");
P1.focus();
return false;
}
if(P1.value<0 || P1.value>100){
alert("Please ENter Value Between 0 to 100");
P1.focus();
return false;
}
P2.focus();
return false;
}
P2.focus();
return false;
}
P3.focus();
return false;
}

P3.focus();
return false;
}
P4.focus();
return false;
}
P4.focus();
return false;
}
if(isNaN(Pass1.value) || Pass1.value.length !=4){
alert("Enter Appropriate numbver");
Pass1.focus();
return false;
}
Pass1.focus();
return false;
}
Pass1.focus();
return false;
}
Pass1.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form method="POST" action="program7.html" id="myForm" onsubmit="return
validate () ">
<table border="1" > 
<tr>
<td colspan="2"><center><img src="logo.png"></center></td>
</tr>
<tr>
<td colspan="2"><center><p>MSc.IT Department</p></center></td>
</tr>
<tr>
<td colspan="2"><center><p>Student Registration Form </p> </center>
</td>
</tr>
<tr>
<th>First Name</th>

<td><input type="text" name="FName"></td>

</tr>
<tr>
<th>Last Name</th>
<td><input type="text" name="LName"></td>
</tr>
<tr>
<th>Birth Date</th>
<td><input type="date" name="Bday" max="2019-12-31"></td>
</tr>
<tr>
<th>Address</th>
<td>
<textarea rows="5" cols="60" name="Address" placeholder="Enter
Address Here...."></textarea>
</td>
</tr>
<tr>
<th>City</th>
<td>
<select type="text" value="" name="City">
<option value = "-1" selected>[choose city]</option>
<option>Surat</option>
<option>Bharuch</option>
<option>Ankleshwar</option>
</select>
</td>
</tr>
<tr>
<th>State</th>
<td>
<select type="text" value="" name="State">
<option value = "-1" selected>[choose state]</option>
<option>Gujrat</option>
<option>UP</option>
<option>MP</option>
</select>
</td>
</tr>
<tr>
<th>Country</th>
<td>
<select type="text" value="" name="Country">
<option value = "-1" selected>[choose country]</option>
<option>India</option>
<option>U.K</option>
<option>U.A.E</option>
</select>
</td>
</tr>
<tr>
<th>Gender</th>

<td>
<input type="radio" name="Gender" value="male"> Male
<input type="radio" name="Gender" value="female"> Female
</td>
</tr>
<tr>
<th>Course</th>
<td>
B.Sc<input type="radio" name="Course" value="B.Sc">
M.Sc<input type="radio" name="Course" value="M.Sc">
BCA<input type="radio" name="Course" value="BCA">
MCA<input type="radio" name="Course" value="MCA">
</td>
</tr>
<tr>
<th>Pincode</th>
<td><input type="text" placeholder="Enter Pincode" pattern="^[0-9]{6}$"
title="Enter Valid Pin Code(max 6 number)" name="Pincode"></td>
</tr>
<tr>
<th>Hobbies</th>
<td>
Singing<input type="checkbox" name="H" value="Singing">
Playing<input type="checkbox" name="H" value="Playing">
Dancing<input type="checkbox" name="H" value="Dancing">
Other<input type="checkbox" name="H" value="Dancing">
<input type="text" name="OtherText">
</td>
</tr>
<tr>
<th>Qualification</th>
<td>
<table border="1">
<tr>
<th>SR.No</th>
<th>Examination</th>
<th>Board</th>
<th>Percentage</th>
<th>Year of Passing</th>
</tr>
<tr>
<th>1</th>
<th>Class X</th>
<td><input type="text" name="Bord1"></td>
<td><input type="text" name="Percentage1"></td>
<td><input type="text" name="Passing1"></td>
</tr>
<tr>
<th>2</th>
<th>Class XII</th>

</tr>
<tr>
<th>3</th>
<th>Graduation</th>
</tr>
<tr>
<th>4</th>
<th>Master</th>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<center id="btn">
<input type="submit" value="submit Data" name="Submit" id="btn1">
<button type="reset" value="Reset" id="btn2">Reset</button>
</center>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:

8. Show the use of events to change background color with HTML and
JavaScript.
1.If mouse button is pressed, background color should be red.
2.If mouse button is released up, background color should be yellow.
Solution: <head>
<script type= "text/javascript">
function myBlurFunction()
{
document.body.style.background = "red";
}
function myClickFunction()
{
document.body.style.background = "yellow";
}
</script>
</head>
<body>
<input type = "button" value= "Color" onmouseup="myBlurFunction()"
onmousedown ="myClickFunction()">
</body>
Output:

9. Develop and demonstrate a XHTML file that includes Javascript script

for the following problems: a) Input : A number n obtained using
prompt Output : The first n Fibonacci numbers
Solution: <script tpe = "text/javascript">
function fibonacci()
{
var n = parseInt(document.getElementById("t1").value);
var i;
var a = 0;
var b = 1;
var c;
document.write("0 1 ");
for(i = 0; i < (n-2); i++)
{
c = a + b;
document.write(c);
document.write("&nbsp");
a = b;
b = c;
}
}
</script>
<body>
Enter the number: <input type = "text" name = "t1" id = "t1"><br>
<input type = "button" name = "Get Series" value = "Get Series" onclick =
"fibonacci()">
</body>
Output:
10. Write a program to show use of alert, confirm and prompt box.
Solution: <html>
<head>
<title> Program 10 </title>
function myAlert()
{
alert("This is an alert box");
}
function myPrompt()
{
prompt("This is an example of prompt box");

}
function myConfirm()
{
confirm("This is an example of confirm box");
}
</script>
</head>
<body>
<input type="button" value="Alert" name="alert" onclick="myAlert()">
<input type="button" value="Confirm" name="Confirm" onclick="myConfirm()"
>
<input type="button" value="Prompt" name="prompt" onclick="myPrompt()">
</body>
</html>
Output:
11. To display the square of a given numbers using Javascript.

Solution: <head>
function mySquareFunction()
{
var a = parseInt(prompt("Enter a Number: "));
var b = "Numbers and its squares are:\n";
var c;
for(var i = 1; i <= a; i++)

{
c = i * i;
b += (i + " ^ 2 = " + c + "\n");
}
alert(b);
}
</script>
</head>
<body>
<input type = "button" value = "Print squares" onclick =" mySquareFunction()"/>
</body>
Output:
12. Implement all methods of creating 1D, 2D and multidimensional array.

Solution: <?php
echo "One Dimensional Array: <br/>";
$one_d = array("One", "Two", "Three");
for($i = 0; $i < count($one_d); $i++)
{
echo "&nbsp&nbsp&nbsp&nbsp$i=>$one_d[$i]<br/>";
}
$two_d = array(
array("One-One", "One-Two"),
array("Two-One", "Two-Two"),
array("Three-One", "Three-Two")
);

echo "Two Dimensional Array: <br/>";

for($i = 0; $i < count($two_d); $i++)
{
for($j = 0; $j < count($two_d[$i]); $j++)
{
echo "&nbsp&nbsp&nbsp&nbsp[$i,$j]=>".$two_d[$i][$j];
}
echo "<br/>";
}
echo "Multi Dimensional Array: <br/>";
$multi_d = array(
"Movies:"=>array(
"Horror Movie"=>array(
"The Conjuring",
"The Ring"
),
"Comedy Movie"=>array(
"The Hangover",
"Dumb and Dumber"
)
),
"Books:"=>array(
"Thriller"=>array(
"The Silent Patient",
"The Da Vinci Code"
),
"Comedy"=>array(
"Bossypants",
"Good Omens"
)
),
);
foreach($multi_d as $key => $value)
{
echo "$key:<br/>";
foreach($value as $key2 => $value2)
{
echo "&nbsp&nbsp&nbsp&nbsp$key2:<br/>";
foreach($value2 as $value3)
{
echo "&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp$value3<br/>";
}
}
}
?>
Output:

13. Writ a program to print below format.

1
12
123
1234
12345
123456
1234567
12345678
Solution: <?php
$a = 8;
for($i = 1; $i <= $a; $i++)
{
for($j = 1; $j <= $i; $j++)
{
echo $j."&nbsp&nbsp";
}
echo "<br/>";
}
?>
Output:

14. Display “Welcome to ISTAR” five times.

Solution: <?php
$a = "Welcome to ISTAR<br/>";
for($i = 1; $i <= 5; $i++)
echo $a;
?>
Output:
15. Write a program to show data types in php.

Solution: <?php
$a = 10;
$b = 10.10;
$c = "c";
$d = "ISTAR";
$e = TRUE;
var_dump($a);
echo "<br/>";
var_dump($b);
echo "<br/>";
var_dump($c);
echo "<br/>";
var_dump($d);
echo "<br/>";
var_dump($e);
echo "<br/>";
?>
Output:
16. Find sum of given two number using function.

Solution: <?php
function add($x, $y){

$z = $x + $y;
return $z;
}
$x = add(2, 3);
echo "The addition of 2 + 3= $x<br/>";
echo "The addition of 4 + 6= ".add(4, 6)."<br/>";
echo "The addition of 6 + 9= ".add(6, 9)."<br/>";
?>
Output:
17. Perform arithmetic operation using switch case construct.

Solution: <?php
$flag = TRUE;
$result = NULL;
$error1 = $error2 = $error3 = NULL;
$num1 = $num2 = $opr = NULL ;
if(isset($_POST['submit']))
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
$opr = $_POST['operator'];
if(!(is_numeric($num1)))
{
$error1 = "Please Enter a Number";
$flag = FALSE;
}
if(!(is_numeric($num2)))
{
$error2 = "Please Enter a Number";
$flag = FALSE;
}
if($opr == NULL)
{
$error3 = "Please Enter an Operator";
$flag = FALSE;
}
if($flag)
{
switch ($opr)
{
case "+":
$result = $num1 + $num2;
break;
case "-":
$result = $num1 - $num2;
break;
case "*":
$result = $num1 * $num2;

break;
case "/":
$result = $num1 / $num2;
break;
case "%":
$result = $num1 % $num2;
break;
case "**":
$result = $num1 ** $num2;
break;
default:
$error3 = "Invalid Operation";
break;
}
}
}
if(isset($_POST['clear']))
{
$num1 = $num2 = $opr = $result = NULL;
}
?>
<html>
<head>
<style>
.error{color:red;}
</style>
</head>
<body>
<form method="post">
<table border="2" style="margin-left:auto;margin-right:auto;">
<tr>
<th align="left">Enter First Number:</th>
<td>
<input type="text" name="num1" value="<?php echo $num1; ?>"/>
<br/>
<span class="error"><?php echo $error1;?></span>
</td>
</tr>
<tr>
<th align="left">Enter Operator:</th>
<td>
<input type="text" name="operator" placeholder="values from(+,-,/,*,
%,**)" value="<?php echo $opr;?>"/><br/>
<span class="error"><?php echo $error3; ?></span>
</td>
</tr>
<tr>
<th align="left">Enter Second Number:</th>
<td>
<input type="text" name="num2" value="<?php echo $num2; ?>"/>
<br/>
<span class="error"><?php echo $error2;?></span>

</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="submit" value="Submit"/>
<input type="submit" name="clear" value="Clear"/>
</td>
</tr>
<tr>
<th align="left">Result:</th>
<td>
<input type="text" name="result" value="<?php echo $result;?>"/>
<br/>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
18. Display your name n times. Take the input through text box.
Solution: <?php
$hide = NULL;
if(isset($_POST['submit']))
{
$a = $_POST["name"];
$b = $_POST["repeater"];
$hide = "hidden";
for($i = 1; $i <= $b; $i++)
{
echo "$a<br/>";
}
}
?>
<html>
<form method="post" <?php echo $hide;?>>
<tr>
<th>Enter Name:</th>
<td><input type="text" name="name"></td>
</tr>
<tr>
<th>Repeat for:</th>

<td><input type="text" name="repeater"></td>

</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit">
</td>
</tr>
</table>
</form>
</html>
Output:
19. Write HTML and PHP script to check whether given number is odd or
even. Take the input through text box.
Solution: <?php
$error = NULL;
$number = NULL;
$result = NULL;
if(isset($_POST['number']))
{
$number = $_POST['num1'];
if(!(is_numeric($number)))
{
$error = "Please Enter a number";
}
else
{
if($number % 2 == 0)
$result = "$number is an even number.";
else
$result = "$number is an odd number.";
}
}
{
$number = $error = $result = NULL;
}
?>
<html>
<head>
<style>
.error{color:red;}
</style>
</head>
<body>
<form name="form1" method="post">


<tr>
<th>Enter Number:</th>
<td>
<input type="text" name="num1" value="<?php echo $number;?>">
<br/><span class="error"><?php echo $error;?></span>
</td>
</tr>
<tr>
<input type="submit" name="number" value="Check Odd/Even"/>
</td>
</tr>
<tr>
<th>Result:</th>
<td>
<input type="text" name="result" value="<?php echo $result; ?>"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
20. Design Calculator.

Solution: <html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Simple Calculation</title>
<script type = "text/javascript">


</script>
</head>
<body>
<form name="myform">
<table border=2 style="margin-left:auto;margin-right:auto;">
<tr>
<td align="center">
<input type="text" id="screen" name="screen" style="width:99%">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" name="7" value=" 7 " onclick="update(7)">
<input type="button" name="+" value=" + " onclick="update('+')">
<br>
<input type="button" name="-" value=" - " onclick="update('-')">
<br>
<input type="button" name="*" value=" x " onclick="update('*')">
<br>
<input type="button" name="c" value=" c " onclick="reset();">
<input type="button" name="=" value=" = " onclick="result();">
<input type="button" name="/" value=" / " onclick="update('/')">
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
21. Write HTML and PHP script to check whether given number is
Armstrong or not. Take the input through text box and display output
also in text box.
Solution: <?php
$error = NULL;

$number = NULL;
$result = NULL;
{
{
}
else if(is_int($number))
{
$error = "Please Enter Integer Number";
}
else
{
$temp = $number;
$sum = 0;
while($temp != 0)
{
$r = $temp % 10;
$temp /= 10;
$sum += ($r ** 3);
}
if($number == $sum)
$result = "$number is an armstrong number.";
else
$result = "$number is not an armstrong number.";
}
}
{
}
?>
<html>
<head>
<style>
.error{color:red;}
</style>
</head>
<body>
<tr>
<td>
<input type="text" name="num1" size=25 value="<?php echo $number
;?>"><br/><span class="error"><?php echo $error;?></span>
</td>
</tr>
<tr>

<input type="submit" name="number" value="Check Armstrong"/>

</td>
</tr>
<tr>
<th>Result:</th>
<td>
<input type="text" name="result" size=25 value="<?php echo $result;
?>"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
22. Write HTML and PHP code to find factorial n numbers using recursion
function.(i.e HTML allows to enter input through textbox and when
submit button is clicked then it displays numbers)
Solution: <?php
$number = NULL;
$error = NULL;
$result = NULL;
function fact($number)
{
if($number == 1)
{
return 1;
}
else
{
return $number * fact($number - 1);
}
}
{
{
}
else if(is_int($number))
{
$error = "Please Enter Integer Number";

}
else
{
$result = fact($number);
}
}
{
}
?>
<html>
<head>
<style>
.error{color:red;}
</style>
</head>
<body>
<tr>
<td>
<input type="text" name="num1" size=25 value="<?php echo
$number;?>"><br/><span class="error"><?php echo $error;?></span>
</td>
</tr>
<tr>
<input type="submit" name="number" value="Find Factorial"/>
</td>
</tr>
<tr>
<th>Result:</th>
<td>
<input type="text" name="result" size=25 value="<?php echo $result;?>
"/>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:

23. Display Login form and validate to username=’admin’ and Password=

’admin123’.Display appropriate message.
Solution: <?php
$uname = $pwd = $error = NULL;
$err1 = $err2 = $hide = NULL;
$flag = True;
if(isset($_POST['log_in']))
{
$uname = $_POST['u_name'];
$pwd = $_POST['u_pwd'];
if($uname == "")
{
$err1 = "Please enter user name";
$flag = False;
}
if($pwd == "")
{
$err2 = "Please enter password";
$flag = False;
}
if($flag)
{
if(($uname == "admin") && ($pwd == "admin123"))
{
$hide = "hidden";
echo "Login Successful";
}
else
{
$error = "Invalid User Name or Password";
}
}
}
?>
<html>
<head>
<style>
.error{color:red;}
</style>
</head>
<body>
<form name="form1" method="post" <?php echo $hide;?>>
<tr>
<th>User Name:</th>
<td>
<input type="text" name="u_name" value="<?php echo $uname;?>"/>

<br/><span class="error"><?php echo $err1; ?></span>

</td>
</tr>
<tr>
<th>Password:</th>
<td>
<input type="password" name="u_pwd" value="<?php echo $pwd;?>"
/>
<br/><span class="error"><?php echo $err2; ?></span>
</td>
</tr>
<tr>
<input type="submit" name="log_in" value="Log In"/>
<br/><span class="error"><?php echo $error; ?></span>
</td>
</tr>
</table>
</form>
</body>
</html>
Output:
24. Display current date in DD/MM/YYYY format.

Solution: <?php
$cd = date("d/m/Y");
?>
<html>
<head><title>Program 24</title></head>
<body>
<tr>
<th>Current Date: </th>
<td>
<input type="text" name="t1" value="<?php echo $cd;?>"/></td>
</tr>
</table>
</body>
</html>
Output:
25. Write a program to show global, static and local variable.

Solution: <?php

$a = 50;
static $b = 70;
function localise()
{
$a = 60;
return $a;
}
echo "Global Variable is $a<br/>";
echo "Static Variable is $b<br/>";
echo "Local Variable is ".localise();
?>
Output:
26. Write a program to apply strlen(), strops(), strrev(), strchr() & trim()
function.
Solution: <?php
$a = "ISTAR is a college";
$b = "college";
$c = "is";
echo "First string is: $a <br/>";
echo "Second string is: $b <br/>";
echo "Third string is: $c <br/>";
echo "Lenght of string First is: ".strlen($a)."<br/>";
echo "The position of string Second in First String is: ".strpos($a, $b)."<br/>";
echo "The position of string Third in First String is: ".strpos($a, $c)."<br/>";
echo "The words before string Third in First String is: ".strchr($a, $c,TRUE);
echo “<br/>";
echo "The words after string Third in First String is: ".strchr($a, $c,FALSE);
echo "<br/>";
echo "The string after triming string First by 'ISge' is: ".trim($a, 'ISge')."<br/>";
define('Constant1', "This is a constant", TRUE)."<br/>";
echo Constant1;
?>
Output:
27. Find the greater value between three variables using Ternary Operator.

Solution: <?php
$a = 5;
$b = 7;
$c = 3;
echo "Maximum Number is: ".(($a >= $b && $a >= $c)? $a : (($b >= $c)? $b : $c));
?>
Output:
28. Write a PHP Script to:

1.Create a database my_db.
2.Create a table person.
3.Insert some data into table person.
4.Inserting some data into person through HTML form.
5.Select some data from person using different queries.
6.Update some record with SQL query.
Solution: 1.Create a database my_db.
<?php
$server = "localhost:3306";
$user = "root";
$pwd = "";
$conn = mysqli_connect($server, $user, $pwd);
if($conn)
{
echo "Connection Successful.<br/>";
}
else
{
echo "Connection Unsuccessful.".mysqli_connect_error();
}
$sql = "create database my_db";
if(mysqli_query($conn, $sql))
{
echo "Database Created Successfully.<br/>";
}
else
{
echo "Database creation failed.".mysqli_error($conn);
}
?>
Output:
2.Create a table person.

<?php

$user = "root";
$pwd = "";
$database = "my_db";
$conn = mysqli_connect($server, $user, $pwd, $database);
if(!($conn))
{
die("Connection Failed".mysqli_connect_error());
}
$sql = "create table person"
. "(personid int(5) unsigned auto_increment primary key,"
. "firstname varchar(30) not null,"
. "lastname varchar(30) not null,"
. "address varchar(60) not null,"
. "city varchar(30) not null)";
{
echo "table created successfully.<br/>";
}
else
{
die("Table creation failed.".mysqli_error($conn));
}
mysqli_close($conn);
?>
Output:
3.Insert some data into table person.

<?php
$user = "root";
$pwd = "";
if(!($conn))
{
}
$sql = "insert into person(firstname, lastname, address, city) values('Bansari',”
.”'Patel', 'AV Road', 'Anand')";
{
echo "Record insert Successfull";
}
else
{
echo "Record insert failed".mysqli_error($conn);
}
?>

Output:
4.Inserting some data into person through HTML form.

<?php
$f_name = $l_name = $address = $city = $read = NULL;
$f_err = $l_err = $add_err = $city_err = $result = NULL;
$flag = TRUE;
if(isset($_POST['insert']))
{
$f_name = $_POST['f_name'];
$l_name = $_POST['l_name'];
$address = $_POST['address'];
$city = $_POST['city'];
if($f_name == "")
{
$f_err = "Please Enter First Name";
$flag = FALSE;
}
if($l_name == "")
{
$l_err = "Please Enter Last Name";
$flag = FALSE;
}
if($address == "")
{
$add_err = "Please Enter address";
$flag = FALSE;
}
if($city == "")
{
$city_err = "Please Enter Name";
$flag = FALSE;
}
if($flag)
{
$user = "root";
$pwd = "";
if(!($conn))
{
}
$sql = "insert into person(firstname, lastname, address, city) "
. "values('$f_name', '$l_name', '$address', '$city')";
{
$class = "success";

$read = "readonly";
$result ="Record insert Successfull";
}
else
{
$class = "error";
$result = "Record insert failed".mysqli_error($conn);
}
}
}
{
$f_name = $l_name = $address = $city = $read = NULL;
$f_err = $l_err = $add_err = $city_err = $result = NULL;
$flag = TRUE;
}
?>
<html>
<head>
<title>P28</title>
<style>
.error{color:red;}
.success{color:green;}
</style>
</head>
<body>
<form method="post">
<table border="2" style="margin-left:auto; margin-right:auto;">
<tr>
<th>First Name:</th>
<td>
<input type="text" name="f_name" value="<?php echo $f_name;?>"
<?php echo $read;?>/><br/>
<span class="error"><?php echo $f_err;?></span>
</td>
</tr>
<tr>
<th>Last Name:</th>
<td>
<input type="text" name="l_name" value="<?php echo $l_name;?>"
<span class="error"><?php echo $l_err;?></span>
</td>
</tr>
<tr>
<th>Address:</th>
<td>
<input type="text" name="address" value="<?php echo $address;?>"
<span class="error"><?php echo $add_err;?></span>
</td>
</tr>

<tr>
<th>City:</th>
<td>
<input type="text" name="city" value="<?php echo $city;?>" <?php
echo $read;?>/><br/>
<span class="error"><?php echo $city_err;?></span>
</td>
</tr>
<tr>
<input type="submit" name="insert" value="Insert">
<input type="submit" name="clear" value="Clear"/><br/>
</td>
</tr>
</table>
<div style="text-align:center">
<span class="<?php echo $class;?>"><?php echo $result;?></span>
</div>
</form>
</body>
</html>
Output:
5.Select some data from person using different queries.

<?php
$user = "root";
$pwd = "";
if(!($conn))
{
}
$sql = "select * from person";
echo "Data fetching is successful";
else
echo "Data fetching failed";
?>
Output:
6.Update some record with SQL query.

<?php
$user = "root";

$pwd = "";
if(!($conn))
{
}
$sql = "update person set address = 'AV Road', city = 'Anand' where"
. " firstname = 'Bansari'";
echo "Data update is successful";
else
echo "Data updation is failed";
?>
Output:

Web Programming 19IT02

Uploaded by

Web Programming 19IT02

Uploaded by

Web Programming (PS02CINT25)

1. Using HTML tag solve below problems:

PREPARED BY:BANSARI PATEL(19IT02) Page 1

<body><img src=”2.png” width=”250” height=”250” alt=”ISTAR.EDU.IN”>

PREPARED BY:BANSARI PATEL(19IT02) Page 2

to join computer industry.</body></p></font>

<abbr title="Hyper Text Markup Language">HTML</abbr></head></html>

2. To create a simple html file to demonstrate the use of different tags.

PREPARED BY:BANSARI PATEL(19IT02) Page 3

PREPARED BY:BANSARI PATEL(19IT02) Page 4

PREPARED BY:BANSARI PATEL(19IT02) Page 5

This is an example of -><strong>strong tag</strong><-.<br/>

PREPARED BY:BANSARI PATEL(19IT02) Page 6

3. To create an html file to link to different html page which contains

PREPARED BY:BANSARI PATEL(19IT02) Page 7

4. To create a table by applying appropriate tags of table .

PREPARED BY:BANSARI PATEL(19IT02) Page 8

5. To create an HTML file by applying the different styles using inline,

PREPARED BY:BANSARI PATEL(19IT02) Page 9

<p>This is exmaple of internal stylesheet.</p>

6. To create Validating Registration Form.

PREPARED BY:BANSARI PATEL(19IT02) Page 10

for(i = 0; i < c.length; i++)

PREPARED BY:BANSARI PATEL(19IT02) Page 11

PREPARED BY:BANSARI PATEL(19IT02) Page 12

<th align="left" valign="top">Enter your Password:

PREPARED BY:BANSARI PATEL(19IT02) Page 13

7. (a)Creating a form registeryourself.html using HTML tags.

PREPARED BY:BANSARI PATEL(19IT02) Page 14

PREPARED BY:BANSARI PATEL(19IT02) Page 15

window.alert("Please enter your Last name.");

PREPARED BY:BANSARI PATEL(19IT02) Page 16

PREPARED BY:BANSARI PATEL(19IT02) Page 17

PREPARED BY:BANSARI PATEL(19IT02) Page 18

<td><input type="text" name="FName"></td>

PREPARED BY:BANSARI PATEL(19IT02) Page 19

PREPARED BY:BANSARI PATEL(19IT02) Page 20

PREPARED BY:BANSARI PATEL(19IT02) Page 21

PREPARED BY:BANSARI PATEL(19IT02) Page 22

9. Develop and demonstrate a XHTML file that includes Javascript script

PREPARED BY:BANSARI PATEL(19IT02) Page 23

11. To display the square of a given numbers using Javascript.

PREPARED BY:BANSARI PATEL(19IT02) Page 24

12. Implement all methods of creating 1D, 2D and multidimensional array.

PREPARED BY:BANSARI PATEL(19IT02) Page 25

echo "Two Dimensional Array: <br/>";

PREPARED BY:BANSARI PATEL(19IT02) Page 26

13. Writ a program to print below format.

PREPARED BY:BANSARI PATEL(19IT02) Page 27

14. Display “Welcome to ISTAR” five times.

15. Write a program to show data types in php.

16. Find sum of given two number using function.

PREPARED BY:BANSARI PATEL(19IT02) Page 28

17. Perform arithmetic operation using switch case construct.

PREPARED BY:BANSARI PATEL(19IT02) Page 29

PREPARED BY:BANSARI PATEL(19IT02) Page 30

PREPARED BY:BANSARI PATEL(19IT02) Page 31

<td><input type="text" name="repeater"></td>

PREPARED BY:BANSARI PATEL(19IT02) Page 32

<table border="2" style="margin-left:auto;margin-right:auto;">

20. Design Calculator.

PREPARED BY:BANSARI PATEL(19IT02) Page 33

PREPARED BY:BANSARI PATEL(19IT02) Page 34

PREPARED BY:BANSARI PATEL(19IT02) Page 35

<input type="submit" name="number" value="Check Armstrong"/>

PREPARED BY:BANSARI PATEL(19IT02) Page 36

PREPARED BY:BANSARI PATEL(19IT02) Page 37

23. Display Login form and validate to username=’admin’ and Password=

PREPARED BY:BANSARI PATEL(19IT02) Page 38

<br/><span class="error"><?php echo $err1; ?></span>

24. Display current date in DD/MM/YYYY format.

25. Write a program to show global, static and local variable.

PREPARED BY:BANSARI PATEL(19IT02) Page 39

PREPARED BY:BANSARI PATEL(19IT02) Page 40

28. Write a PHP Script to:

2.Create a table person.