This document provides step-by-step instructions for students to create a signup page in ASP.NET, including adding CSS styles, implementing validators, connecting to a SQL database, and handling form submission. Students will learn how to design interfaces, style pages, validate user input, and save user registration data to a database on submit. The goal is for students to build a basic user registration form with client-side validation and server-side processing to a backend database.

2. At the end of this session, students will be able to:
 Create and design signup page in asp.net
 Add folder and image files to asp.net project
 Create and implement CSS file
 Import Google styles in asp.net project
 Create and use service based database in asp.net project
 Create and implement validators to certain controls in asp.net
project
 Set appropriate rules in web.config file

4.  Create a new project

5. Add a web form -> name it Registration -> click OK

6. Add css file -> name it style -> OK

7. Create a folder -> name it Images - > Add your images

8. Add your css file to the head tag -> Add a google font
URL for font family as shown below

9. Add section and div tags to your form as shown below.

10. Add the code below to your style.css file.

11. A sample run should give you the interface shown below.

12. Update your section tag as shown below

13. Add the following sections to you style.css file

14. A sample run should give you the interface shown below.

15. Add the following sections to your style.css file

16. A sample run should give you the interface shown below.

17. Add the following section to your style.css file

18. A sample run should give you the interface shown below.

19. Update your inner2 div tag as shown below.

20. Add the following section to your style.css file

21. Update your inner2 div tag as shown below.

22. Add the following section to your style.css file

23. A sample run should give you the interface shown below.

24. Next is to create database to connect with the signup form
Right click your project -> Add -> New Item -> SQL Server Database -> Add -> OK

25. Use the code shown below to add a registration table to
the database -> Execute

26. Your table should appear inside the table directory as shown below.

27. Add SQL data source control as shown below
Switch to the design view and configure the SqlDataSource
control -> Click on Configure Data Source

28. Click on the drop down arrow -> select your database
name as shown below -> Click Next

29. Copy ConnectionString -> Click Next

30. Click Next
Test your query -> Finish

31. Double click the sign up button -> Enter the code below
Add the following libraries.
 using System.Data;
 using System.Data.SqlClient;
 using System.Configuration;

32. Add a label control as shown below

33. Add validator controls
 Required Field validators for txtUsername and txtEmail
(Font-Size, ForeColor, Display, ControlToValidate, ErrorMessage)
 Regular Expression validator for txtPassword control
(Font-Size, ForeColor, Display, ControlToValidate, ErrorMessage,
ValidationExpression="^[a-zA-Z0-9'@&#.s]{8,16}$")
 Compare Validator for txtComPwd control
(Font-Size, ForeColor, Display, ControlToValidate, ErrorMessage, ControlToCompare)

34. <asp:TextBox ID="txtUsername" placeholder="Username" runat="server"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Font-Size="Medium"
ForeColor="Red" Display="Dynamic" ControlToValidate="txtUsername" ErrorMessage="Username is
Required"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtEmail" placeholder="Email" runat="server"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Font-Size="Medium"
ForeColor="Red" Display="Dynamic" ControlToValidate="txtEmail" ErrorMessage="Email is
Required"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtPwd" placeholder="Password" TextMode="Password" runat="server"></asp:TextBox>
<br />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="txtPwd" ErrorMessage="Password must be minimum of 8 characters" Display="Dynamic"
Font-Size="Medium" ForeColor="Red" ValidationExpression="^[a-zA-Z0-9'@&#.s]{8,16}$">
</asp:RegularExpressionValidator>
<asp:TextBox ID="txtComPwd" placeholder="Confirm Password" TextMode="Password"
runat="server"></asp:TextBox>
<br />
<asp:CompareValidator ID="CompareValidator1" ControlToValidate="txtComPwd" ControlToCompare="txtPwd"
Font-Size="Medium" ForeColor="Red" Display="Dynamic" runat="server" ErrorMessage="Confirm password and
password not match"></asp:CompareValidator>
<br />
Your code should look the one shown below

35. Open Web.config file to specify how you want the validation controls to be
rendered on the web page.
A sample run should give you the interface shown below.

36.  Make the interface nicer
 Replace the lblSuccess control with a pop up alert as shown below

37.  Add a login page so that when user signup, they can easily login with there login
credentials.
 Add a landing page (home page). This is where user will be directed when they
login successfully.
If you face any problem while doing the exercise, take a screenshot of the error
message and post in the WhatsApp group.

38. Resources for creating web pages with HTML, CSS, JavaScript, SQL, etc.
 http://www.w3schools.com
 https://www.tutorialspoint.com
 https://angularjs.org
 http://getbootstrap.com
 http://www.typescriptlang.org
 http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api
 http://www.asp.net/web-api/overview/getting-started-with-aspnetweb-api/tutorial-your-first-
web-api
 http://www.soapui.org/The-World-Of-API-Testing/soap-vs-rest-challenges.html
 I. Sommerville, Software Engineering: Pearson, 2015.