Practical 1(c): Create an application that receives the (Student Id, Student Name, Course Name, Date of Birth) information from a set of students. The application should also display the information of all the students once the data entered.

 

 BSc IT Sem 5- Advanced Web Programming Practicals...

 In this article I have given the solution and step-by-step explanation for practical 1(c) of Advanced Web Programming subject of BSc IT sem-5 (Mumbai University). I have given a step-wise guidance on creating a new project and designing our webpage to writing the code on Visual Studio. I`ll also explain How the program works? so that It`ll be easier for you to understand the program and manipulate it according to yourself.

Question: Create an application that receives the (Student Id, Student Name, Course Name, Date of Birth) information from a set of students. The application should also display the information of all the students once the data entered.

 Firstly, let us understand what the question demands.

Explanation:

 We have to create an application that takes inputs from students for information like Student Id, Student name, Course name and Date of Birth. These information filled by the students must also be displayed on the screen after they click on submit button.

For this, we need 3 separate "TextBoxes" for entering student Id, student name and course name respectively and a "Calendar" control to select date of birth. Now we need 4 "Labels" to display these inputted information. 

I assume you understood the explanation. 

Now lets create and perform practical 1(c). Follow the below steps.

Step 1: Create a new project.

• Open Visual Studio. 
• Click on "Create a new project".

                              

• Select language as "C#", select platform as "Windows"(because I`m using windows OS), select project type as "Web".
• Select ASP.NET Web Application (.NET Framework) with C# language as shown below and click "Next".

                              

Step 2: Configure your new project.

• Give project name "pract1c".
• Select framework as ".NET Framework 4.8".
• Click on "Create".

                              

 

Step 3: Create a new ASP.NET Application.

• Select "Empty".
• Click on "Create".

Your project named "pract1c" has been created.

                              

 

Step 4: Adding Web Form.

• Right click on "pract1c".
• Click "Add".
• Click "New Item".
• Select "Web Form".
• Click "Add".

                              

                              

                              

Step 5: Designing.

• On lower left corner click on "Design".

                              

• Drag and drop the requirements discussed above(textbox, buttons, labels) from the "ToolBox" and design them in the "div" section as shown below.

                              

• Single click on the left button, the properties of that button appears on the right side. It`s ID is "Button1".
• Give the text value as "Submit".
• Click "Enter" on your keyboard.
• Now single click on the right button.
• Go to properties.
• Give the text value as "Reset". 

                              

                              

• Single click on "Label".
• The properties of label appears on the right side.
• Delete the text value and keep it blank.
• Click "Enter" on your keyboard.
• Repeat this process for all the Labels and keep their text values blank.

                              

Step 6: Coding.

• Double click on "Submit" button.
• A page named "WebForm1.aspx.cs" opens with all the necessary code.
• Type the below code inside "Button1_Click" where the cursor is pointing.

            Label1.Text = "Student Id:" + TextBox1.Text;

            Label2.Text = "Student Name:" + TextBox2.Text;

            Label3.Text = "Course Name:" + TextBox3.Text;

            Label4.Text = "Date of Birth:" +                                     Calendar1.SelectedDate.ToShortDateString();

                              

• Go back to the design page(WebForm1.aspx).
• Double click on "Reset" button.
• Type the below code inside "Button2_Click".

            Label1.Text = "";

            Label2.Text = "";

            Label3.Text = "";

            Label4.Text = "";

            TextBox1.Text = "";

            TextBox2.Text = "";

            TextBox3.Text = "";

            Calendar1.SelectedDates.Clear();

                              

                              

• Save both the pages(WebForm1.apsx.cs and WebForm1.aspx).
• To run your project click "f5" button on your keyboard.

                              

                              

Program Explanation:

Now its time to understand the code that we have written inside the Result and Reset buttons. Its important to understand the code rather than just copy and pasting the code from here into your project file. By copy and pasting, your project will work but you will not know how your from works. 

Here I have given explanation for each line of code.

Explanation for "Submit" Button code:

Label1.Text = "Student Id:" + TextBox1.Text;

This line takes the data inputted in textbox1(Student Id) and assigns that data to label1 with the message "Student Id" and displays it in label1.

Label2.Text = "Student Name:" + TextBox2.Text;

This line takes the data inputted in textbox2(Student Name) and assigns that data to label2 with the message "Student Name" and displays it in label2.

Label3.Text = "Course Name:" + TextBox3.Text;

This line takes the data inputted in textbox3(Course Name) and assigns that data to label3 with the message "Course Name" and displays it in label3.

Label4.Text = "Date of Birth:" + Calendar1.SelectedDate.ToShortDateString();

This line takes the data inputted in Calendar(Date of Birth) and assigns that data to label4 with the message "Date of Birth" and displays it in label4.

Explanation for "Reset" Button code:

Label1.Text = "";

This line will clear the value of label 1.

Label2.Text = "";

This line will clear the value of label 2.

Label3.Text = "";

This line will clear the value of label 3.

Label4.Text = "";

This line will clear the value of label 4.

TextBox1.Text = "";

This line will clear the value of text box 1.

TextBox2.Text = "";

This line will clear the value of text box 2.

TextBox3.Text = "";

This line will clear the value of text box 3.

Calendar1.SelectedDates.Clear();

This line will clear the value of Calendar 1.

Click here for practical 1(a)

Click here for practical 1(b)