Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In websites that require the users to login before they can have access to the sites resources, you typically want to create an explicit Logout feature. Even though the user can logout by closing all of their browser windows. The users don't always know that and it gives them a sense of security knowing that there is something they can click on to explicitly logout from the site. For this demonstration I'll start in the controls file Header.ascx. In this file there is a panel that contains a number of hyperlinks. Right now the user navigates around the website by using the hyperlinks in the panel starting at line 12.
I will look at the file in Design view and I'll show you that it has the hyperlinks and when you are looking at it in Design view, you won't see all the styles applied. So it doesn't look quite the way it will in the whole website. I'll click into the panel that contains the hyperlinks. I'll click into the panel that contains the hyperlinks, put in a spacebar, pipe character, which is the character on this same key as the backslash. Just press the Shift key when pressing that key and you will get that separator character. Then put in another space. Instead of creating an explicit hyperlink, I'll use another one of the Login controls. I'll go to the Toolbox to the login section and I'll drag in a LoginStatus object. The LoginStatus object has two states. The default state shown here is called the Logged Out state and it creates a hyperlink that takes the user to the login page. In the Logged In state, it shows a hyperlink with the text Logout and when the user clicks on that link, it logs them out and redirects them back to the Login page.
Now I'll save the changes and then I'll open up the file styles.css. In this file there is a class selector for menuPanel. It's at line 16 and the menuPanel rules include a width property that's setting the width of that panel to 250 pixels. Because I have added a new Hyperlink I need to make it wider. I'll change it from 250 pixels to 300 pixels. I'll save my changes by pressing Ctrl+S and then I'll close that file. Now I'll open up the Titles.aspx page and I'll run it in the browser. Because I have locked down the website, I'm not initially logged in, I'm taken to the Log In form. Notice the image is broken for the moment. We'll fix that in a moment.
I'll login with my username and password, newuser and the password I created, and then I'm directed to the Titles page or whichever page I requested. And here is Logout link. Notice that the user doesn't see any difference between the explicit hyperlink and one that is created by an ASP. NET control, such as the Log In status control and now I'll click the Log Out link and that takes me back to the Log In page. So now you have a way for the user to login and logout. So now about the image.
The image is broken because when you Log Out, you are no longer authenticated against the website and the web server is preventing your accessing resources on the website. So in the Log In form your best approach is to strip it of all visual elements other than the Log In components itself. Close the browser and reopen the file Login.aspx and I'll scroll down to the panel containing the image. It's at line 11 on my file. Now simply delete the entire panel. So now all I'm left with, it's a login component wrapped inside a paragraph. I'll save my changes, run the page in the browser and there is the Login form.
Any styling that you want to apply should be done directly in the page, rather than in the external style sheet. This is because that external style sheet file may not load into the browser correctly when the user isn't logged in due to the restrictions of the ASP.NET authentication model. But you now have a complete system. The user can log in, I'll click into the form and type in the username and the password and press Enter. As long as I keep the browser open, I can navigate around the website freely and when I click the Logout link, I'm taken back to the Log In form and I can then either Log In again or close the browser.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105224 Viewers
56 Video lessons · 117002 Viewers
71 Video lessons · 86200 Viewers
131 Video lessons · 41213 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.