COMP3123 Practicals 8/9 Creating a website with

Logon
This session is intended to help prepare you for assignment 3. It works only with the
standard Visual Studio 2010 template. It covers the following:




Creating a members-only page. The page will be accessible only to
authenticated users (users who are logged in).
Using the registration page, which enables users to register and create a new
account.
Logging in and accessing information that is available only to authenticated
users.
Using the change-password page, which enables users who have an account
to change their password.
Making the change-password page accessible to authenticated users (but
only to authenticated users).

Note: Some knowledge of Visual Studio is assumed. Additional worksheets are
available for students who do not have this basic knowledge. Please ask for these if
this is the first time you’ve used Visual Studio! Also, if you’ve never used
Visual Studio with master pages.

Exercise 8(a) Create a new ASP.NET Web site
1. Start Visual Studio.
2. In the File menu, click New Project. (If you do not see this option, click New,
and then click Project.)
3. Under Installed Templates, click C# and select ASP.NET Web Site.
4. Finally, enter the name for the “project” you are about to create and choose
where you want to keep the pages of the Web site. For example, enter the
folder name C:\Websites\Login (or some such) and then click OK.
Visual Studio creates a website in the folder requested and opens a default
page in Source view. Notice that the root Web site contains several other files
and folders including the Account folder, a Web.config file, the About.aspx and
Default.aspx pages, and the Site.master master page. Click on the Design tag
to view the page with it’s associated master page
5. Press CTRL+F5 to run the page.
The home of page of the Web site is displayed in the browser. Notice the menu
items (Home, About) and the Log In hyperlink. Note that a lot of basic site
structure will already have been produced for you… Still plenty more to do,
however.
6. Close the browser.

RCH11 with thanks to Microsoft

1

In Solution Explorer. right click the Account folder and then click Add New Item.master and then click OK.aspx.  ChangePasswordSuccess. select Web Form. The page is a content page for the Site." In addition to the page that you have created. By default. they will be redirected to the login page where they can login or create an account. pages in the Account folder are not accessible to anonymous users. 6. Under Contents of folders. When users who are not logged in (anonymous users) click the members-only hyperlink. The Select a Master Page dialog box is displayed. This page lets new users create an account.aspx and the Login.config file. 1. you can add "Welcome to the members-only page. RCH11 with thanks to Microsoft 2 .Exercise 8(b) Create a Members Only Page In this section. The settings that define access to the Login page is configured in the root Web.aspx.  A Web. This asks for a user name and password. the Account folder contains the following pages and files:  Register. In Solution Explorer. In the New Web Sites dialog box. 7. double-click the MemberOnly. Add content to the main page. This page lets registered users change their password. Make sure that you are creating the new page in the Account folder 2.  Login.aspx page to open it. you will create a members-only page accessible only to users who are logged in (authenticated users).aspx.aspx page is created in the Account folder.  ChangePassword. In the Name text box.master page. Select the Select master page check box and then click Add. You have successfully logged in. The settings that define access to pages in the Account folder are configured in the Web.aspx. This page is displayed when users successfully change their password.aspx pages. The MembersOnly.config file in that folder. 3. and then switch to Design view.aspx page. except the Register. enter MembersOnly. You will add a hyperlink control to the master page to redirect authenticated users to the members-only page. 5.config file. select Site. For example. 4.

Exercise 8© Adding a menu item for the members-only page 1..master page to open it and then switch to Design view. If anonymous users try to access content that is protected. 8. click Edit Menu Items…. Click OK to close the dialog box. Anonymous users can access the home page (Default.com for email. 7. content in the Account folder (except for the registration page and login page) is unavailable to anonymous users. set the Text property to "Members Only". 3.) button. but content for authenticated users on the master page will not be accessible. For example.. 11. 4. 4. and then click the smart tag of the menu control. Select the Menu control that contains the Home and About menu items. 1.aspx page and then click Set as Start Page. 2. In the Properties window of the Menu Item Editor. the password must RCH11 with thanks to Microsoft 3 . click Account. they are redirected to the login page. Similarly. Enter the requested information. The Select URL dialog box is displayed. Click Register. Under Project folders. 9. and a password. In Solution Explorer. you can enter ScottBrown for the user name. 10. scott@example. A new item is created in the menu tree.aspx) and the About page. select MembersOnly. 5. Click Members Only. By default. Select New Item. 6. double-click the Site. Under Items. 2.aspx (Create a New Account) page is displayed. In Solutions Explorer. Exercise 8(d): Creating a New Account Because you do not have an account yet. right-click the Default. 3. The login page is displayed. 12. Under Contents of folder. Click NavigateUrl and then click the ellipsis (. The Register.master page. click the Add a root item button in the toolbar. Save and close the Site. Press CTRL + F5 to run the site. Under Menu Tasks. The Menu Item Editor is displayed. you have to register before you can log in to access the members-only page.aspx and then click OK.

and the e-mail address does not have to be unique. 3.. 5. You can accept the default ID. change the Text property to Change Password. In the Properties window.be at least six characters long. The Select URL dialog box is displayed. 7. 6. click Account. Exercise 8(e) Changing Password In this section. In Solution Explorer. 10.. Click Change Password. 5. Click Create User. drag a HyperLink control to the master page and drop it next to the Log In hyperlink. Press CTRL+F5 to run the page. 2. Under Contents of folder. select ChangePassword. 8.aspx and then click OK. The change-password page is displayed. When you finish registering for a new account. You are redirected to the home page. Notice that your user name is displayed next to Log Out. 4. For this part of the walkthrough. You are redirected to the login page because the change-password page is accessible to authenticated users only. Close the browser. you are redirected to the members-only page. 7. Under Project folders. you will create a hyperlink on the home page to redirect users to the change password page. double-click the Site. You will use this page to change your password when you are logged in.) button.master page and switch to Design view. From the Standard node of the Toolbox. it does not matter where you put the HyperLink control. 9. In the Properties windows. The user name does not require nonalphanumeric characters. Click Log Out. Notice that the Change Password link is accessible when you are not logged in. 1. 6. RCH11 with thanks to Microsoft 4 . Enter the user name and password that you created earlier. Click Log Out. click NavigateUrl and click the ellipsis (. When you have returned to the home page. and then click Log In. close the browser.

and then switch to Design view. click Account. 5. Press CTRL+F5 to run the site. 7. 2. Switch to Source view. Exercise 8(g) Testing the Completed Web Site 1. The change-password page is displayed. 4. 4. The home page should be displayed. Under Contents folder. Delete the Change Password hyperlink that you created earlier. the success page will be displayed. Notice that your name and the Change your password link are now visible. Click Log Out. From the Standard node of the Toolbox. The markup for the hyperlink will resemble the following: <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Account/ChangePassword. but the Change your password link is not visible. Enter a new password.aspx"> Change Password </asp:HyperLink> Note that this hyperlink will not be visible in Design view. 3. After the runat="server" attribute. Set the Text property to Change Password. Click Change your password. double-click Site. You will be redirected to the home page that anonymous users see. You are redirected to the members-only page. type "NavigateUrl=" and then double-click Pick URL… from the pop-up list. You should be redirected to the home page. 6.master.aspx and then click OK.Exercise 8(f) Modifying the Change Password hyperlink to make it accessible only to users are logged in. 5. The Select Project Item dialog box is displayed. Under Project folders. drag a HyperLink control into the LoggedInTemplate element that is inside the LoginView control. If the change is successful. RCH11 with thanks to Microsoft 5 . 6. Click Members Only. 8. 1. You do this by adding the hyperlink to the HeadLoginView control on the master page. Click Change Password. because the contents of the LoggedInTemplate element are not visible by default. Click Log In and enter your user name and password. In Solution Explorer. 2. select ChangePassword.aspx to open it. 3.

Click Members Only.7. Well done… It works! RCH11 with thanks to Microsoft 6 . . Enter your user name and the new password and then click Log In. You are redirected to the home page. You should be redirected to the members-only page. You can now access content that is available to authenticated users. If you try to login with your old password authentication will fail. 8. Click Log In.