0% found this document useful (0 votes)
74 views

Web Lab Sanju

This document contains a laboratory report for a web technology course. It includes 5 experiments related to designing static web pages for an online bookstore using HTML, CSS, and ASP. The first experiment involves designing home, login, catalogue, and registration pages using frames. The second uses CSS for inline, internal, and external styling. The third uses HTML and CSS to display province selections. The fourth validates XML documents using DTD and schemas. The fifth designs a login page using ASP that inserts data into a database.

Uploaded by

Anu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
74 views

Web Lab Sanju

This document contains a laboratory report for a web technology course. It includes 5 experiments related to designing static web pages for an online bookstore using HTML, CSS, and ASP. The first experiment involves designing home, login, catalogue, and registration pages using frames. The second uses CSS for inline, internal, and external styling. The third uses HTML and CSS to display province selections. The fourth validates XML documents using DTD and schemas. The fifth designs a login page using ASP that inserts data into a database.

Uploaded by

Anu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 29

WEB TECHNOLOGY

(6-2-441-224-2019)

LABORATORY REPORTS &

RECORD

BCA
(II YEAR – III SEM)
(2019 BATCH)

DEPARTMENT OF
HUMANITIES AND SOCIAL SCIENCE

MODEL MULTIPLE COLLEGE


(Affiliated to TU, Govt. of Nepal)

Prepared by Sanjay Kumar Mahato


LIST OF PROGRAMS
Lab.No. Name of the Experiment Pg.No. Date Signature
Design the following static web pages required for an 1-14
1 online book store web site.
1) HOME PAGE: The static home page must contain
three
frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should
contain the details of all the books available in the web
site in a table.
4) REGISTRATION PAGE
Develop and demonstrate the usage of inline, internal and 15-17
2 external style sheet using CSS

Write an HTML page that contains a selection box 18-19


3 with a list of 5 Province. When the user selects a
Province, its capital should be printed next in the list.
Add CSS to customize the properties of the font of
the capital (color,bold and font size).
1. Write a XML program to validate student details(Rno, 20-22
4 Name, college & branch) using DTD and Schemas.

2. Write a XML program to validate book details( Title of


the book, Author Name, ISBN no & Publication) using
DTD and Schemas
1.Design login page (username, password, button, level to 22-24
5 show message) using ASP and insert username and
password into table in database.
2.Display inserted data from database

Prepared by Sanjay Kumar Mahato


1|Page

LAB 1:
Design the following static web pages required for an online book store web site.
1) HOME PAGE: The static home page must contain three frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should contain the details of all the books
available in the web site in a table.
4) REGISTRATION PAGE

Aim: Design the following static web pages required for online book store.

1. Home page:- the static home page must contains three pages
2. Top frame:- logo and college name and links to homepage, login page, registration
page and catalogue page
3. Left frame:- at least four links for navigation which will display the catalogue of
Respective links
4. Right frame:- the pages to links in the left frame must be loaded here initially it
Contains the description of the website.
DESCRIPTION: In this program the entire web paged are created by using basic HTML
tags. Home page is divided into 3 frames by using <frameset> and <frame> tags. A frame is
used to display a web page within a web page.
<frameset>:
 The <frameset> tag defines a frameset.
 The <frameset> element holds one or more <frame> elements.
 Each <frame> element can hold a separate document.
 The <frameset> element specifies HOW MANY columns or rows there will be in
the frameset, and HOW MUCH percentage/pixels of space will occupy each of
them.
<frame>:
 The <frame> tag defines one particular window (frame) within a <frameset>.
 Each <frame> in a <frameset> can have different attributes, such as border,
scrolling, the ability to resize, etc.
PROGRAM:
homepage.html:
<html>
<frameset rows="15%,9%,76%" bordercolor="pink">
<frameset cols="20%,80%" bordercolor="red">
<frame src="logo.html" scrolling="no">
<frame src="title.html" >
</frameset>
<frame src="menu.html" name="f2" scrolling="no">
<frameset cols="15%,85%" bordercolor="red">
<frame src=" branches.html" name="f31">
<frame src="homedes.html" name="f32">
</frameset> </frameset> </html>

Prepared by Sanjay Kumar Mahato


2|Page

logo.html:
<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(pink))
fixed; }
</style> </head>
<body>
<center><img src=" logo csc(youtube).png" width="150" height="120"><center>
</body>
</html>
title.html:
<html>
<head><style>body {
background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(yellow))
fixed;
}
.gradient-text {
background-color: #CA4246;
background-image: linear-gradient(
45deg,
#CA4246 16.666%,
#E16541 16.666%,
#E16541 33.333%,
#F18F43 33.333%,
#F18F43 50%,
#8B9862 50%,
#8B9862 66.666%,
#476098 66.666%,
#476098 83.333%,
#A7489B 83.333%);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-text-simple-animation-rev 0.75s ease forwards;

.gradient-text:hover{
animation: rainbow-text-simple-animation 0.5s ease-in forwards;
}
@keyframes rainbow-text-simple-animation-rev {
0% {
Prepared by Sanjay Kumar Mahato
3|Page

background-size: 650%;
}
40% {
background-size: 650%;
}
100% {
background-size: 100%;
}
}
@keyframes rainbow-text-simple-animation {
0% {
background-size: 100%;
}
80% {
background-size: 650%;
}
100% {
background-size: 650%;
}
}
header {
margin-top: 1em;
margin-top: calc(50vh - 3em);
}

h1 {
font-family: "Archivo Black", sans-serif;
font-weight: normal;
font-size: 2em;
text-align: center;
margin-bottom: 0;
margin-bottom: -0.25em;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
width: 605px;
}</style></head>
<body>
<header>
<h1 class="gradient-text">ONLINE BOOK SHOP</h1>
</header>
</body>
</html>
Prepared by Sanjay Kumar Mahato
4|Page

menu.html:
<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(lightyellow), to(red)) fixed;
}</style></head>
<body>
<table width="100%">
<tr>
<td> <a href="homedes.html" target="f32"><font color="blue">Home </font></a></td>
<td> <a href="login.html" target="f32"><font color="blue">Login</font> </a></td>
<td> <a href="registration.html" target="f32"><font color="blue">Registration</font></a></td>
<td> <a href="catalogue.html" target="f32"><font color="blue">Catalogue</font></a></td>
<td> <a href="cart.html" target="f32"><font color="blue">Cart</font> </a></td>
</tr>
</table>
</body>
</html>
homedes.html:
<html>
<head><style>
body {
background: -webkit-gradient(linear, left top, left bottom, from(lightgreen), to(yellow)) fixed;
}

h1 {
font-family: "Archivo Black", sans-serif;
font-weight: normal;
font-size: 6em;
text-align: center;
margin-bottom: 0;
margin-bottom: -0.25em;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
width: 605px;
}
.rainbow-text {
background: yellow;
background-color: red;
background: conic-gradient(
#CA4246 16.666%,
#E16541 16.666%,
#E16541 33.333%,
#F18F43 33.333%,
#F18F43 50%,
#8B9862 50%,
#8B9862 66.666%,
#476098 66.666%,
#476098 83.333%,
Prepared by Sanjay Kumar Mahato
5|Page

#A7489B 83.333%);
background-size: 57%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

animation: rainbow-text-animation-rev 0.5s ease forwards;

cursor: pointer;
}
.rainbow-text:hover {
animation: rainbow-text-animation 0.5s ease forwards;
}
@keyframes rainbow-text-animation {
0% {
background-size: 57%;
background-position: 0 0;
}
20% {
background-size: 57%;
background-position: 0 1em;
}
100% {
background-size: 300%;
background-position: -9em 1em;
}
}
@keyframes rainbow-text-animation-rev {
0% {
background-size: 300%;
background-position: -9em 1em;
}
20% {
background-size: 57%;
background-position: 0 1em;
}
100% {
background-size: 57%;
background-position: 0 0;
}
}
</style>
</head>
<body>
<h1 class="rainbow-text">ONLINE BOOK SHOP</h1><br><br>
<p align="center"><font size="7">This website contains various books.</font></p>
</body></html>

Prepared by Sanjay Kumar Mahato


6|Page

login.html:
<html>
<head> <title> Login Page </title>
<style> body {
background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(lightgreen)) fixed;
}</style>
</head>
<body>
<form name="login">
<h3> <u> Login Page </u> </h3>
username: <input type="text" name="uname" placeholder="enter username"><br>
password: <input type="password" name="pwd" placeholder="enter password"><br>
<input type="submit" value="Submit" >
<input type="reset" value="reset">
</center> </form>
</body></html>

registration.html:
<html>
<head><title>Registration Form</title>
<style>
body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(lightblue)) fixed;
}</style>
</head>
<body bgcolor="pink">
<center><font color="red" size="6" face="arial"><b>Registration Form</b></font></center><br />
<form action="submiting.html">
First Name<font color="red">*</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type='text' id='firstname' placeholder="Enter your first name" /><br /><br />

Last Name<font color="red"><font color="red">* </font> </font>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type='text' id='lastname' placeholder="Enter your last name"/><br /><br />

EmailAddress<font color="red">* </font>&nbsp;&nbsp;


<input type='text' id='email' placeholder="Enter only one email id"/><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs
p;&nbsp;&nbsp;

<font color="blue">e.g. [email protected]</font><br /><br/>


Password<font color="red">* </font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type='password' id='pass' placeholder="minimum 6 characters"><br /><br/>


Address<font color="red">* </font>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr' placeholder="Enter your address here..."/></textarea> <br /> <br/>

Mobile No<font color="red">* </font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


<input type='number' id='mobileno' placeholder="Enter number only"/><br />

Prepared by Sanjay Kumar Mahato


7|Page

Gender: <input type='radio' name="gender">male


<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form> </body> </html>

submiting.html:
<html>
<head>
<title>submiting
</title></head>
<body bgcolor="pink"><font color="red"><b>Your form is successfully submitted!</b></font>
<br><p align="center"><a href="registration.html">Go to Form</a></p>
</body>
</html>

catalogue.html:

<html>
<head>
<title> Catalogue </title>
<style> body {
background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(pink)) fixed;
}</style>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td>
<img src="mathematics.jpg" width=100 height=100/>
</td>
<td> Book: A Textbook of Mathematics-I For BCA First Semester<br> Author:Dr. Durga Jang K.C., Ganga D.C,
Khagendra Adhikari, Ramesh Gautam,Tek Bahadur Budhathoki <br> Publication:Heritage Publications
</td> <td>Rs.405 &nbsp;&nbsp;&nbsp;</td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
<tr>
<td> <img src="m.jpg" width=100 height=100/></td>
<td> Book: A Text Book Of Mathematics-Ii For Bca Second Semester <br> Author:Dr.Durga Jang K.C,Ramesh
Gautam,Tek Bahadur Budhathoki <br> Publication:Heritage Publications</td> <td> Rs.425 &nbsp;&nbsp;&nbsp;
</td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
</table> </form>
</body> </html>

cart.html:

Prepared by Sanjay Kumar Mahato


8|Page

<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(pink), to(yellow)) fixed;
}</style></head>
<body bgcolor="pink">
<table style="background-color: gold; width: 80%; margin: 0 auto; border: 2px solid blue">
<colgroup>
<col style="background-color: blue">
<col style="background-color: red">
<col style="background-color: green">
<col style="background-color: yellow">
</colgroup>
<tr>
<td><b><font color="white">Book name</font></b></td>
<td><b><font color="white">Price</font></b></td>
<td><b><font color="yellow">Quantity</font></b></td>
<td><b><font color="red">Amount</font></b></td>
</tr>
<tr>
<td><i>Mathematics-I</i></td>
<td><i>Rs.405</i></td>
<td><i>2</i></td>
<td><i>Rs.810</i></td>
</tr>
<tr>
<td><i>Mathematics-II</i></td>
<td><i>Rs.425</i></td>
<td><i>1</i></td>
<td><i>Rs.425</i></td>
</tr> <tr>
<td></td>
<td></td>
<td><b><font color="white">Total amount </font></b></td>
<td>Rs.1235 </td>
</tr>
<marquee><b><font color="red" size="5">Here are the some of books and their price availabe in our Online
Store</font></b></marquee> <br/><br/>
</body>
</html>

branches.html:
<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(red)) fixed;
}</style></head>
<body>
<table cellspacing=15>
<tr><td> <a href="bca.html" target="f32">BCA </a></td></tr>
<tr><td><a href="bsccsit.html" target="f32"> Bsc.CSIT </a> </td></tr>
<tr><td><a href="btech.html" target="f32">B-tech </a></td></tr>
Prepared by Sanjay Kumar Mahato
9|Page

</table>
</body>
</html>

bca.html:
<html>
<head><title>BCA</title>
<style> body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(cyan)) fixed;
}</style>
</head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Bachelore of Computer Applications</h1></font></center>
<br>
<table align="center">
<tr>
<td>Semester</td>
<td>
<select >
<option value="select the semester" selected>Select the semester
<option value="First semester">First semester
<option value="Second semester">Second semester
<option value="Third semester">Third semester
<option value="Fourth semester">Fourth semester
<option value="Fifth semester">Fifth semester
<option value="Sixth semester">Sixth semester
<option value="Seventh semester">Seventh semester
<option value="Eight semester">Eight semester
</select>
</td></tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method=post action="order.html">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre> Cost of one book is"700" + shipping "100" </pre>
</center>
</body>
</html>

bsccsit.html:
<html>
Prepared by Sanjay Kumar Mahato
10 | P a g e

<body bgcolor="Plum">
<h1><font color="blue">Bachelor of computer science and information technology</font></h1>
<h2>
<ul>
<li>Digital Logic</li> <li>Core java</li> <li>DBMS</li>
</ul>
</h2>
</body>
</html>

btech.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Bachelor of Technology</font></h1>
<h2>
<ul type="square">
<li>C programming</li>
<li>Advance java</li>
<li>Python programming</li>
</ul>
</h2>
</body>
</html>

Outputs:

Prepared by Sanjay Kumar Mahato


11 | P a g e

Prepared by Sanjay Kumar Mahato


12 | P a g e

Prepared by Sanjay Kumar Mahato


13 | P a g e

Prepared by Sanjay Kumar Mahato


14 | P a g e

Prepared by Sanjay Kumar Mahato


15 | P a g e

LAB- 2: Develop and demonstrate the usage of inline, internal and external style sheet using CSS.
Aim: Design a web page using CSS which includes the following:
1) Use different font styles
2) Control the repetition of image with background-repeat and no-repeat property
3) Define style for links as a: link, a: active, a: hover, a: visited
4) Add customized cursors for links.
PROGRAM:
style.css
p.left
{
text-align:left;
color:blue;
font-family:Cambria;
font-size:large;
text-indent:20px;
}
p.center
{
text-align:center;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:-3px;
word-spacing:20px;
font-size:larger;
}
p.right
{
text-align:right;
color:red;
font-family:Tahoma;
font-size:15pt;
text-decoration:overline;
font-style:italic;
}
b#headline
{
color:orange;
font-size:22px;
font-
family:arial;
text-decoration:underline;
}

Prepared by Sanjay Kumar Mahato


16 | P a g e

Prepared by Sanjay Kumar Mahato


16 | P a g e

lab-2.html
<html>
<head>
<style type="text/css"> body
{
background-image:url('images/cse.png');
background-repeat:no-repeat; background-position:center center;
background-attachment:fixed; background-color:pink;
}
a:link { text-decoration:none;color:orange; } a:visited { text-decoration:none;color:red; }
a:hover { text-decoration:underline;color:blue; }
a:active { text-decoration:underline;color:purple; }
h3 { color:green; }
.c1{cursor:crosshair}
.c2{cursor:pointer}
.c3{cursor:move}
.c4{cursor:text}
.c5{cursor:wait}
.c6{cursor:help}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="cyan">
<h1 style="color:blue;text-align:center;"> CSS (Inline, Internal and External) </h1>
<p>This Paragraph is a Not Styled</p>
<p class="left">This Paragraph is Styled by class "Left"</p>
<p class="center">This Paragraph is Styled by class "Center"</p>
<p class="right">This Paragraph is Styled by class "Right"</p>
<b>This is normal Bold</b> <br>
<b id="headline">This Bold Text is Styled </b>
<h2><b><a href=" ">This is a link</a></b></h2>
<h3 class="c1">The cursor over this element is plus sign</h3>
<h3 class="c2">The cursor over this element is a pointing hand</h3>
<h3 class="c3">The cursor over this element is a grasping hand</h3>
<h3 class="c4">The cursor over this element is a I bar</h3>
<h3 class="c5">The cursor over this element is a wait</h3>
<h3 class="c6">The cursor over this element is a question mark</h3>
</html>

Prepared by Sanjay Kumar Mahato


17 | P a g e

OUTPUT 1:

OUTPUT 2: background-repeat : repeat;

Prepared by Sanjay Kumar Mahato


18 | P a g e

Prepared by Sanjay Kumar Mahato


18 | P a g e

LAB - 3:
Write an HTML page that contains a selection box with a list of 5 Province. When the user selects a
Province, its capital should be printed next in the list. Add CSS to customize the properties of the
font of the capital (color,bold and font size).
Lab-3.html:
<html>
<head>
<title>WT Lab manual program no. 3</title>
</head>
<style>
h1
{
color: white;
text-align: center;
}
.textbox1
{
color: purple;
font-size: 30px;
font-weight: bold;
}
body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(red)) fixed;
}
</style>
<body bgcolor="pink">
<center>
<h1><i> Select the province to find its capital</h1></i>
<form name="myform">
Select province <select name="province" id="sbox1" onClick="myFunction()" required>
<option value=""> </option>
<option value="Biratnagar">Province 1</option>

Prepared by Sanjay Kumar Mahato


19 | P a g e

<option value="Janakpur">Province 2</option>


<option value="Hetauda">Bagmati province</option>
<option value="Pokhara"> Gandaki Province</option>

<option value="Deukhuri">Lumbini Province</option>


<option value="Birendranagar"> Karnali Province</option>
<option value="Godawari">Sudurpashchim Province</option>
</select><br><br>
Capital <input type="text" class="textbox1" id="sbox2">
</form>
</center>
<script>
function myFunction()
{ var a=document.getElementById("sbox1").value;
document.getElementById("sbox2").value=a; }
</script> </body> </html>
OUTPUT:

Prepared by Sanjay Kumar Mahato


20 | P a g e

LAB-4:
1. Write a XML program to validate student details(Rno, Name, college & branch) using DTD and Schemas.

2. Write a XML program to validate book details( Title of the book, Author Name, ISBN no & Publication)
using DTD and Schemas

AIM: Design XML documents to demonstrate above criteria

Lab41.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE notes SYSTEM "details.dtd">
<notes>
<note>
<Name> Sanjay Kumar Mahato </Name>
<rollno> 21 </rollno>
<College> Model Multiple College </College>
<Branch> BCA </Branch>
</note>
<note>
<Name> Rajan Kumar Mahato </Name>
<rollno> 20 </rollno>
<College> Model Multiple College </College>
<Branch> BCA </Branch>
</note>
<note>
<Name> Rajesh Kumar Mahato </Name>
<rollno> 212 </rollno>
<College> Model Multiple College </College>
<Branch> BCA </Branch>
</note>
</notes>
details.dtd:
<!ELEMENT notes(note+)>
<!ELEMENT notes(Name, rollno, College, Branch)>
<!ELEMENT Name(#PCDATA)>
<!ELEMENT roll no(#PCDATA)>
<!ELEMENT College(#PCDATA)>
<!ELEMENT Branch(#PCDATA)>

Output:

Prepared by Sanjay Kumar Mahato


21 | P a g e

Lab42.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE books SYSTEM "books.dtd">
<books>
<book ISBN="978993">
<name> Web technology </name>
<author_name> Ramesh singh saud </author_name>
<author_name> Sravan ghimire </author_name>
<publication> KEC </publication>
</book>
<book ISBN="7724524">
<name> OOPS IN JAVA </name>
<author_name> Bhoj raj joshi </author_name>
<author_name> Bhupendra singh saud </author_name>
<publication> KEC </publication>
</book>
</books>
books.dtd:
<!ELEMENT books(book+)>
<!ELEMENT book(name,author_name,publication)>
<!ELEMENT name(#PCDATA)>
<!ELEMENT author_name(#PCDATA)>
<!ELEMENT publication(#PCDATA)>
<!ATTLIST book ISBN CDATA #REQUIRED>

Prepared by Sanjay Kumar Mahato


22 | P a g e

Output:

LAB-5:-
1.Design login page (username, password, button, level to show message) using ASP and insert username
and password into table in database.
2.Display inserted data from database

Source code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="insert.aspx.cs" Inherits="Insertdata.insert" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-


transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Insert Data into Table</title>
</head>
<body>
Prepared by Sanjay Kumar Mahato
23 | P a g e

<form id="form1" runat="server">


<asp:Label ID="LabelMessage" runat="server" Text=""></asp:Label>
<div>
<asp:Label ID="LabelUsername" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="TextBoxUsername" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server" ErrorMessage="Enter Username"
ControlToValidate="TextBoxUsername"></asp:RequiredFieldValidator>
</div>
<div>
<asp:Label ID="LabelPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="TextBoxPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server" ErrorMessage="Enter Password"
ControlToValidate="TextBoxPassword"></asp:RequiredFieldValidator>
</div>
<asp:Button ID="ButtonSave" runat="server" Text="Save User" onclick="ButtonSave_Click" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:mycon %>"
SelectCommand="SELECT * FROM [usertable]"></asp:SqlDataSource>
</form>
</body>
</html>

Insert data .asx.cs :-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;

namespace Insertdata
{
public partial class insert : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void ButtonSave_Click(object sender, EventArgs e)


{
string username = TextBoxUsername.Text;
Prepared by Sanjay Kumar Mahato
24 | P a g e

string password = TextBoxPassword.Text;


try
{
SqlConnection con=new
SqlConnection(ConfigurationManager.ConnectionStrings["mycon"].ToString());
con.Open();
string qry="insert into usertable values" +"('"+username +"','"+ password +"')";
SqlCommand cmd=new SqlCommand(qry, con);
int row=cmd.ExecuteNonQuery();
if(row ==1)
{
LabelMessage.Text="Insert Success";
}
else
{
LabelMessage.Text="Insert failed";
}
con.Close();
}
catch (Exception ex)
{
LabelMessage.Text=ex.Message;
} }}}

Output:-

Prepared by Sanjay Kumar Mahato


25 | P a g e

Prepared by Sanjay Kumar Mahato

You might also like