EX.
NO: 1 DATE:
Create an exposure of web application and tools
AIM:
To create an exposure of web application and tools.
Algorithm:
1. Start the program.
2. Initialize Form:
• Display input fields for:
• Name (TextBox)
• Course (DropDownList)
• Department (DropDownList)
• Gender (RadioButtons)
• Show a "Click" button for form submission.
3. On Button Click ("Click" Event)
Read Field Values:
• Get Name from TextBox
• Get selected Course from DropDownList
• Get selected Department from DropDownList
• Get selected Gender from RadioButton group
4. Input Validation:
• If Name is empty, show "Enter Your Name!" in red and do not
proceed.
• If Course is not selected (default value selected), show "Select your
Class!" message and do not proceed.
• If Department is not selected (default value selected), show "Select
your Department!" and do not proceed.
• If Gender is not selected, show "Select your Gender!" and do not
proceed.
5. Submit Data:
• If all fields are valid, display "SUBMITTED!" message.
• Show entered Name, selected Course, Department, and Gender in a
formatted output summary (as in the web preview shown).
6. End the program.
Design Page:
Source Code:
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="WebApplications_Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Font-Size="Large"
Text="Name:"></asp:Label>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfv1" runat="server"
ControlToValidate="txtName" ErrorMessage="Enter Your
Name!"></asp:RequiredFieldValidator>
<br />
<asp:Label ID="Label2" runat="server" Font-Size="Large"
Text="Course:"></asp:Label>
<asp:DropDownList ID="txtClass" runat="server">
<asp:ListItem Selected="True">Enter your Class Name</asp:ListItem>
<asp:ListItem>BCA</asp:ListItem>
<asp:ListItem>BA</asp:ListItem>
<asp:ListItem>BSC</asp:ListItem>
<asp:ListItem>BBA</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="Label3" runat="server" Font-Size="Large"
Text="Department:"></asp:Label>
<asp:DropDownList ID="txtdptmt" runat="server">
<asp:ListItem>Computer Science</asp:ListItem>
<asp:ListItem Selected="True">Enter your Department</asp:ListItem>
<asp:ListItem>Computer Application</asp:ListItem>
</asp:DropDownList>
<br />
<asp:Label ID="Label4" runat="server" Font-Size="Large"
Text="Gender:"></asp:Label>
<asp:RadioButton ID="rb1" runat="server" GroupName="Gender"
Text="Male" />
<asp:RadioButton ID="rb2" runat="server" GroupName="Gender"
Text="Female" />
<asp:RadioButton ID="rb3" runat="server" GroupName="Gender"
Text="Other" />
<br />
<br />
<asp:Button ID="btn1" runat="server" Text="Click" Width="75px" />
</div>
</form>
</body>
</html>
Output:
Result:
Thus the program was executed in successfully.
EX.NO: 2 DATE:
Implement the HTML controls
AIM:
To implement the HTML controls.
Algorithm:
1. Start
2. Display Login Form
o Provide a textbox for entering User Name
o Provide a password textbox for entering Password
o Provide a checkbox for Show/Hide Password
o Provide a Submit Button
3. User enters credentials
o Input User Name
o Input Password
4. If "Show" checkbox is checked
o Change the password textbox property from "PasswordMode = True" to
"PasswordMode = False"
o Display the password as plain text
o Else keep it hidden (masked with ****)
5. When Submit Button is clicked
o Validate whether User Name and Password fields are not empty
o If empty → show message: “Enter User Name and Password”
o Else proceed
6. Check Credentials (hardcoded or from database)
o If UserName == "Arun" AND Password == "123456"
→ Display “Login Successfully!”
o Else
→ Display “Invalid User Name or Password”
7. End
Design Page:
Source Code:
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="HTML_Controls1._Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div lang="vb">
<asp:Label ID="Label1" runat="server" Font-Size="Larger"
Text="User Name:"></asp:Label>
<asp:TextBox ID="txtName" runat="server" Width="152px"
ForeColor="#33CC33"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" runat="server" Font-Size="Larger"
Text="Password:"></asp:Label>
<asp:TextBox ID="txtPass" runat="server" TextMode="Password"
ForeColor="#66FF33"></asp:TextBox>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Show"
ForeColor="#66FF33" />
<script type="text/javascript">
window.onload = function() {
var pwd = document.getElementById('<%= txtPass.ClientID %>');
var chk = document.getElementById('<%= CheckBox1.ClientID %>');
if (chk && pwd) {
chk.onclick = function() {
pwd.type = this.checked ? 'text' : 'password';
};
}
};
</script>
<br />
<br />
<br />
<asp:Button ID="btn1" runat="server" BackColor="#66FF33"
Height="40px"
Text="Submit" Width="85px" />
</div>
</form>
</body>
</html>
Output:
Result:
Thus the program was executed in successfully.
Ex: 3 DATE:
Implement the server controls
AIM:
To implement the server controls.
Algorithm:
Step 1: Start
Step 2: Open Visual Studio 2008 → Create New ASP.NET Web
Application
Step 3: Drag and Drop Controls from Toolbox:
• Label → Text: "Name:"
• TextBox → ID = TextBox1
• Button → Text = "Click", ID = Button1
• Label → ID = Label2 (for output message)
Step 4: Double-click the Button → Write Button Click Event Code:
• Read input from TextBox1.Text
• Create a message → "Welcome " + TextBox1.Text + ". You are
studying BCA third year."
• Assign this message to Label2.Text
Step 5: Run (F5)
• Enter your name in the TextBox
• Click Button → Output message will be displayed
Step 6: Stop Execution
Step 7: End
Design Page:
Source Code:
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="server_controls3._Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div style="text-decoration: underline">
<asp:Label ID="lblMessage" runat="server" Font-Size="Larger"
Text="Name:"></asp:Label>
<asp:TextBox ID="txtName" runat="server" BackColor="#6666FF"
BorderColor="#9933FF" Font-Size="Larger"></asp:TextBox>
<br />
<br />
<br />
</div>
<asp:Button ID="btn1" runat="server" Text="Click"
BorderColor="#66FF99"
Font-Size="Larger" Width="97px" />
<br />
</form>
</body>
</html>
Output:
Result:
Thus the program was executed in successfully.
EX: 4 DATE:
Web application using web controls
AIM:
To create web application using web controls.
Algorithm:
1. Start application.
Start Visual Studio and Create Project
• Open Visual Studio 2008.
• Create a New ASP.NET Web Application Project.
2.Design the Web Form
• In the Toolbox, drag and drop these controls onto the page:
• Label (for messages and prompts).
• TextBox (for entering the name).
• Button (for "Click").
• Button (for "Reset").
3. Set Control Properties
• Set the Label default text to “Enter Name:” and color to Default
(Black).
• Set the first Button text to “Click” and style with a green border.
• Set the second Button text to “Reset” and style with a red border.
4. Add Logic for Page Load Event
• On page load, clear the TextBox and reset the Label text and color
to defaults.
5. Add Logic for Click Button
• When “Click” Button is pressed:
• Check if the TextBox is empty.
• If empty, change the Label text to “Please Enter!” and
set color to Red.
• Else, change the Label text to “Hello, Good Morning!
[Name]” and set color to Green.
6. Add Logic for Reset Button
• When “Reset” Button is pressed:
• Clear TextBox.
• Change Label back to “Enter Name:” and set color to default.
7. Run and Test
• Build and Run the Web Application.
• Test all cases:
• Press “Click” with empty TextBox (should show message in
Red).
• Enter a name and press “Click” (should greet in Green).
• Press “Reset” to clear form and reset display.
8. End of the program.
Design Page:
Source Code:
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="Web_Controls4._Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="lblMessage" runat="server" Font-Size="Larger"
Text="Enter Name:"></asp:Label>
<asp:TextBox ID="txtName" runat="server"
AutoPostBack="True" Font-Size="Larger"></asp:TextBox>
<br />
<br />
<asp:Button ID="btn1" runat="server" BorderColor="#339933" Font-
Size="Large"
ForeColor="#00CC00" Height="48px" Text="Click" ToolTip="Click To
Submit"
Width="105px" />
<asp:Button ID="btn2" runat="server" BorderColor="Red" Font-
Size="Large"
ForeColor="Red" Height="48px" Text="Reset" ToolTip="Click To
Reset"
Width="105px" />
</div>
</form>
</body>
</html>
Output:
Result:
Thus the program was executed in successfully.
EX: 5 DATE:
Web application using list controls.
AIM:
To create web application using list controls.
Algorithm:
1. Start the Application
• Launch Visual Studio 2008.
• Create a new ASP.NET Web Site project.
2. Design the Form
• On Default.aspx, drag and drop the following from Toolbox:
• Label controls for each field (Name, Blood Group, District,
State, Address).
• TextBox for Name and Address.
• DropDownList for Blood Group.
• ListBox for District and State.
• Button for submitting, e.g., "Click".
3. Set Properties for Controls
• For Address TextBox, set TextMode to MultiLine.
• Fill DropDownList and ListBoxes with valid options (Blood groups,
districts, states).
4. Write Submission Logic
• Double-click the submit Button to add click event logic in code-
behind:
• On click, read user inputs from all controls.
• Validate that all required fields are filled.
• Display a confirmation message or summary of the entered
details.
5. Run and Test the Application
• Press F5 to run the application in the local browser.
• Fill the form and click the submit button.
6. End the program.
Design Page:
Source Code:
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As
System.EventArgs)
End Sub
Protected Sub btn1_Click(ByVal sender As Object, ByVal e As
System.EventArgs)
Response.Write("Your Form Submitted!")
End Sub
</script>
<form id="form1" runat="server">
<asp:Label ID="Label1" runat="server" Font-Size="Larger"
Text="Enter Your Name:"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Font-Size="Large"
Width="186px"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" runat="server" Font-Size="Larger" Text="Blood
Group:"></asp:Label>
<asp:DropDownList ID="DropDownList1" runat="server" Font-
Size="Small"
Height="26px" Width="190px">
<asp:ListItem Selected="True">Enter Your Blood
Group:</asp:ListItem>
<asp:ListItem>A+</asp:ListItem>
<asp:ListItem>A-</asp:ListItem>
<asp:ListItem>B+</asp:ListItem>
<asp:ListItem>B-</asp:ListItem>
<asp:ListItem>O+</asp:ListItem>
<asp:ListItem>O-</asp:ListItem>
<asp:ListItem>AB+</asp:ListItem>
<asp:ListItem>AB-</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<asp:Label ID="Label4" runat="server" Font-Size="Larger"
Text="District:"></asp:Label>
<asp:ListBox ID="ListBox2" runat="server" Height="38px"
Width="150px">
<asp:ListItem>Cuddalore</asp:ListItem>
<asp:ListItem>Chennai</asp:ListItem>
<asp:ListItem>Coimbatore</asp:ListItem>
<asp:ListItem>Madurai</asp:ListItem>
<asp:ListItem>Salem</asp:ListItem>
<asp:ListItem>Tiruchi</asp:ListItem>
</asp:ListBox>
<br />
<br />
<asp:Label ID="Label3" runat="server" Font-Size="Larger"
Text="State:"></asp:Label>
<asp:ListBox ID="ListBox1" runat="server" Height="38px"
Width="177px">
<asp:ListItem>Tamil Nadu</asp:ListItem>
<asp:ListItem>Kerala</asp:ListItem>
<asp:ListItem>Karnataga</asp:ListItem>
<asp:ListItem>Andhara Pradesh</asp:ListItem>
<asp:ListItem>Telangana</asp:ListItem>
<asp:ListItem>Maharashtra</asp:ListItem>
<asp:ListItem>Kujarat</asp:ListItem>
</asp:ListBox>
<br />
<br />
<asp:Label ID="Label5" runat="server" Font-Size="Larger"
Text="Address:"></asp:Label>
<asp:TextBox ID="TextBoxAddress" runat="server"
TextMode="MultiLine"
Rows="4" Columns="30" Height="36px"></asp:TextBox><br />
<br />
<asp:Button ID="btn1" runat="server" Font-Size="Large" Height="37px"
onclick="btn1_Click" Text="Click" Width="97px" />
<br />
</form>
Output:
Result:
Thus the program was executed in successfully.
EX: 6 DATE:
Web page design using rich control. Validate user input using
validation controls.
AIM:
To create web page design using control. Validate user input
using validation controls.
Algorithm:
Step 1: Design the User Interface
• Display a form with fields for User Name, Password, Confirm
Password, Email ID, and Mobile Number.
• Place Submit and Reset buttons below the input fields.
Step 2: Add Rich Controls
• Use TextBox controls for each input field.
• Use Button controls for Submit (green) and Reset (red).
Step 3: Add Validation Controls
• Add RequiredFieldValidator to ensure no input field is left empty.
• Add CompareValidator to make sure Password matches Confirm
Password.
• Add RegularExpressionValidator to ensure the Email ID follows a
valid format.
• Add RegularExpressionValidator to ensure the Mobile Number is
valid (e.g., 10 digits).
• Set user-friendly ErrorMessage for each validation.
Step 4: Implement the Submission Logic
• When the Submit button is clicked:
• Check if all validation controls are satisfied.
• If any field is invalid, show the related error message(s).
• If all fields are valid:
• Display "Your Form Submitted In Successfully!" at the
top.
• Show the entered values in green as a confirmation to
the user.
• When the Reset button is clicked:
• Clear all input fields and remove any displayed messages.
Step 5: Testing the Form
• Try submitting with empty fields, incorrect formats, and
mismatched passwords to ensure all validation messages appear
correctly.
• Submit valid information to check if the form displays the success
message and the entered data in green.
Design Page:
Source Code:
<%@ Page Language="vb" AutoEventWireup="false"
CodeBehind="Default.aspx.vb" Inherits="Html_Controls._Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Font-Size="Large"
Text="User Name:"
ForeColor="Black"></asp:Label>
<asp:TextBox ID="txtName" runat="server" Width="142px"
ForeColor="#66FF33"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
runat="server"
ControlToValidate="txtName" ErrorMessage="Please Enter Your
Name!"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Label ID="Label2" runat="server" Font-Size="Large"
Text="Password:"
ForeColor="Black"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server" Width="141px"
ForeColor="#66FF33"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfv" runat="server"
ControlToValidate="txtPassword" ErrorMessage="Please enter
your password!"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Label ID="Label3" runat="server" Font-Size="Large"
Text="Conform Password:" ForeColor="Black"></asp:Label>
<asp:TextBox ID="txtConformPassword" runat="server"
Width="161px"
ForeColor="#66FF33"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfv1" runat="server"
ControlToValidate="txtConformPassword"
ErrorMessage="please enter your
password!"></asp:RequiredFieldValidator>
<asp:CompareValidator ID="cv1" runat="server"
ControlToCompare="txtPassword"
ControlToValidate="txtConformPassword"
ErrorMessage="Password Does Not
Match!"></asp:CompareValidator>
<br />
<br />
<asp:Label ID="Label4" runat="server" Font-Size="Large"
Text="Email ID:"
ForeColor="Black"></asp:Label>
<asp:TextBox ID="txtEmail" runat="server" Width="222px"
ForeColor="#66FF33"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3"
runat="server"
ErrorMessage="Please Enter your Email!"
ControlToValidate="txtEmail"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="RegularExpressionValidator2" runat="server"
ErrorMessage="Enter Valid Email!" ControlToValidate="txtEmail"
ValidationExpression="^\w+(-+.']\w+)*@\w+([-.]\w+)*\.\w+([-
.]\w+)*$"></asp:RegularExpressionValidator>
<br />
<br />
<asp:Label ID="Label5" runat="server" Font-Size="Large"
Text="Mobile NO:"
ForeColor="Black"></asp:Label>
<asp:TextBox ID="txtMobile" runat="server" MaxLength="10"
ForeColor="#66FF33"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1"
runat="server"
ControlToValidate="txtMobile" ErrorMessage="Enter Valid
Mobile Number!"
ValidationExpression="^\d{10}$"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
runat="server"
ControlToValidate="txtMobile" ErrorMessage="Please Enter your
Mobile Number!"></asp:RequiredFieldValidator>
<br />
<br />
<br />
</div>
<asp:Button ID="btn1" runat="server" Text="Submit"
BackColor="#66FF66"
ForeColor="Black" />
<asp:Button ID="btn2" runat="server" BackColor="#FF3300"
ForeColor="Black"
Text="Reset" Width="65px" />
</form>
</body>
</html>
Output:
Result:
Thus the program was executed in successfully.
