Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Create a Full-Featured Customer Login Portal?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
Hello. Welcome to the Visual Web Developer Introduction Video. Over the next 30 minutes we're going to show you how to create a pretty full-featured customer login portal for a fictitious company called Northwinds, and this will have a lot going on. There's database access, a login system, site template and navigation, and even custom user settings. If this is your first time using Visual Web Developer ASP.NET 2.0, you're going to be in for a treat. There's lots of features that we have to show here, so I'm going to go ahead and get started. So here we are in the tool, and I'm going to start by opening a new website. Now in the past in ASP.NET 1.1, you're pretty much limited to working only with Internet information server, but with Visual Web Developer and ASP.NET 2.0, you can work directly with the file system. So in addition to support for IIS, which I don't even have installed on my computer, that's not going to stop me. I can work with my local file system. I'm going to create a project called lanai, which is named after my favorite Hawaiian island. The first thing it creates for me is nothing which is great. There's no code lurking behind the scenes. There's really nothing. We're starting with an empty page. So let's create our first page. Since this is all about having a customer view their orders, my first page will be called orders.aspx. Now ASP.NET supports multiple languages, and that's on a per file basis not a per project basis. I'll keep it with Visual Basic, and also we can put the source code for our pages in a separate hidden or behind-the-scene file. I'm going to keep it within the page because we have such little code to show you for this entire project. I'll keep it as is. So now what's popping up here is my HTML editor. Now the HTML editor is vastly improved in Visual Web Developer 2005. We've got full IntelliSense support so as I'm typing we've got all the HTML support. If I type in something arbitrary like the bullet point so item 1 and then line item 2— if I do some kind of arbitrary formatting like I'll just put some spaces around here and then switch to the design mode, it shows you what it's going to look like on the page, but if I make some changes here like put something welcome— how about view your orders and change that to a heading tag. If I switch back to source mode it preserves my formatting. So if you have carefully crafted or handcrafted HTML going back and forth the designer you're going to be safe. If I do want to give it a nice kind of default formatting, I can simply hit control, K, D, and it will put it all in a nice format. A few other things to notice: We have XHTML transitional support. We can switch browsers, and that will limit the HTML that it will validate against. There's really a lot going on here. Let's go ahead and save this and strip out some of the text here. Okay, so because this is about orders we need an order database. To do that I'm going to add a new special folder that's managed by ASP.NET called the app data folder. Now it's empty. It's just a folder, but if I go back to some of my files here, this is where I have some ingredients for this demo. I'm using the standard Northwinds database that you can get directly from Microsoft. This is an access database, but because we have SQL Server Express installed I can go ahead and drop it into that folder and double-click on it to see the details. So inside here I have all my tables, but it's probably better explained through this database diagram I made. So we're building a page to show the customer orders, but each order has some details associated with it. We'll also create a customer page that will allow the administrator to view all the customers in the system. So we have a couple pages going on and several bits of data here. So I'll close that. Now to get the customer data into this page let me switch to design mode and go to the table and just drag the orders right onto the page. Now in the past simply executing a query to return the data and showing it it was a little bit of code. Here it's generating some markup code for me behind the scenes here, but let's just go ahead and see what it looks like. Now this is way too much. It's showing, first of all, every customer and every order, and it's way too wide. So let me make a few changes to it. If we switch back to the design mode, you can see that when I dragged the table onto the page it created 2 controls. The first is this grid view, and the grid view is worthy of a 5-hour demo in and of itself. There's so much going on here. I'm going to tell it to automatically generate my columns from this SQL data source. So this is where we make the attachment to the database. This is where we view it in the grid view. So let's make a small change to our database query. Now when I dragged that database into my system it automatically added a configuration string in my web config file. This special data directory—it's pointing to my Northwinds database. That makes it very easy to deploy this site just with files. I don't have anything special to install. On the next page here let's modify the query. Instead of returning everything, I'll just pull back the order, the customer, the order date, and maybe the freight. Now because this will pull back every customer, I'm going to modify it to only pull back those customers that are specified by a query string in the URL. So if I put customer ID here at the top and add that, let me show you what it looks like. See it generates this query aware clause for me automatically. Then I need to refresh because my query changed. Let's save it and view this in the browser. Now by default I'm not going to get anything. I have to go and put customer ID. You can see I've tested this. ALFKI—A-L-F-K-I—happens to be one of our customers, but now you see that query is easily parameterized by an option on the command line. Great. So let's go a little bit deeper. Let's imagine now we want to click on one of ANTON's orders and view the details so we have a nice little master detail. By going to the end of the project—let me switch to source mode— I'll go to the end here and add some space. I can bring up my toolbox. Now there's a lot more here than if you're used to ASP.NET 1.1. In addition to all the standard controls we have at the top, Microsoft has grouped the data components, the navigation, and the validation all together in their own little areas. So I'm going to drag on the grid view directly. By default it's not attached to any data, so I need to attach it to a new query. We're going to use the database, but notice we could be doing queries against a middle-tier business logic layer, or we can go directly to a XML file. In fact this entire model is extensible, but I'm going to stick with the database query for now using the same database connection string, but this time we want data from the orders table. I'll need the order ID, the product, the price, quantity. That's fine. I'm going to parameterize this query as well because I only care about the orders that come from the control since in a query string we want the orders that come from the control grid view 1 which is the one above us. So far so good. Let's finish that. Now I have 2 tables on the page. I need to make one last little change to the top one. I need to enable selection. So when I click the select hyperlink it's going to refresh the page. I need to provide one more bit of information. It needs to know what columns to pass. So if I turn on the data key names and tell it the order ID is the key, let's save it and view this in the browser after I pass it some data. So I can select order 10692, and it shows me the details below. So we have master detail with no coding so far. Let's go a little bit further. Let's add a page to view all the customers in the site. So I'm done with orders for now. I'll go back to the solution and add a new item this time called customers. I'll switch to design mode and drag in the customer table like I did before for orders, but I'm going to turn a lot more stuff on. I'll turn on paging and sorting and editing. I'm going to add a new column for hyperlink, and this column is view orders. This will link that customer to that particular customer's orders, and the URL for that hyperlink is coming from the customer ID. I'll just send that over to the orders page. Let's see. What else can I do? There's so many features. Again like I said in the grid view, I can turn on enable sorting and paging callbacks, and this is for higher-level browsers. This will allow me to change all of the sorting and paging without visible refreshes. So let's see what this guy looks like. So watch. I can sort, and paging works, and I can drill into and edit say Rancho Grande. Hit update. So I got inline editing and finally my orders hyperlink goes straight to that particular user ID. This is great. So we got 2 pretty full-featured pages. Let's move onto the next piece I want to show you. Okay, let's make this thing look a little bit better. We have something called themes in ASP.NET 2.0. Themes are collections of style sheets and JPEG images and things like that. I have some themes that are already to go that I hand built called hilo and lanai, and I even have a view for what this thing would look like on a cellphone. I'm going to drop it in here. The cellphone one is simple. It has an empty default style sheet. But hilo and lanai are a little bit more complex. All I have to do to enable a particular theme is go to the web config file. If this is the first time you're seeing this, this is an XML file that controls all the settings for our site. Now we're going to be in here a few times so I'm going to take out some of the comments so you can see just the pieces that we care about. I need to add a small section called pages, and notice I'm getting IntelliSense which is something new in the web config file. The one I want to add is themes. I'll turn on lanai. So let's see what the customer page looks like now. Now I have a default background color, but notice the control itself has a different font and different style. That's because I'm using this thing called a skin file. Now a skin allows you to—it's like a style sheet but for ASP.NET controls. You can see I have special settings here for grid view or menu or even images. Okay, so we've got style sheets. Let me show you one more. I'll show you what hilo looks like. You view the customer page. Great. Okay, now that we have themes let's go a little bit farther and start to really flesh out the design of our site. I really want a template, and in ASP.NET 2.0 we have this concept called master pages which serve as our overall site template. So I'm going to create a master page. Now in this very simple website, our master page will look something like— Northwinds customer portal, and at the top of most sites we have some kind of header. At the bottom we'll have a footer. We can put some basic information like copyright 2006 Northwinds sample. In between the two we'll have some content that's wrapped by another DIV tag like a menu, and for the menu I'll also put some kind of placeholder. So link 1 and link 2 and finally our last DIV section is for the content itself. Now here's where master pages really come in handy. Actually I think I—let's see. I press control, K, D to get the automatic formatting, and you can see I'm just double checking all my DIV tags, and they all look okay. Now this content placeholder—if I drag and put this inside the content section, that's the little hole that my other pages need to fill in. Let me show you the design view. Now the design view looks pretty plain. It's not actually picking up our style sheet. That's because I need to go back here and put the style sheet theme equal to hilo as well. Now when I view my master page—have it refresh— you can see my style sheet is also picking up and allows me to see it in the master page. But this is where our content is going to go. Well let's go ahead and add a content page. Just right-click and choose add content page. I'm going to need a login page at some point so let's just do it now. Login.aspx. For now I'll just give it some basic default content. I already have some basic HTML in the clipboard. I'll go ahead and paste that in and save it. So great. Now we have a placeholder for our login page, and we've got a couple of other pages. Now I want to show you how to apply this master page to pages we've already built. I'll just do it for one of them. If I go to the customers page, and I really just care about the stuff that's supposed to show up in the content area which is the grid view and the data source. So I'm going to take that and put it on the clipboard, delete all this other HTML junk, and make sure my page is derived from the master page right there. By switching to design view I get this content placeholder. I need to instantiate it. Now I have a place to put that HTML back from the clipboard. So I'll just paste it right back in and save it. Now I have the content. Now obviously this is something you probably want to do. You want to have your master pages created ahead of time. It's going to be handy. I'm going to close all these pages and in fact delete the customer page I just made and the orders page because I already have the master pages applied right here. I've also put them inside 2 folders. So if I go inside secure admin, there's the customers page that we just did inside the master page template. I also have a secure members folder, and the reason why I've put these 2 in folders is because I don't really want any person to be able to see the customer list, and I only want the orders to be visible by the people that are authenticated. So inside the orders page I've already put in a little bit of code here that takes care of mapping depending on who's logged in. So what this really means is we need to add some kind of security or membership to our site, and I'm going to do that by turning on or going to the ASP.NET configuration. So notice that when I go to this site, or when I go to a regular page, remember I don't have IIS installed so it's using its own built in web server, and it's on a local port that's only accessible to this local page, but it makes it really easy to develop without having IIS. Well here you can see I've got security setups and provider and application information. I'm going to start by going to the security tab and configure our login information. So in the Security Wizard we'll go the first step. We'll make it so we can log in from the Internet with forms. Skip that. We'll turn on roles for our site, and we're only going to have one role. That's the administrator role. So I'll create that now. I'll create an account for myself. The email's handy because if you forget your password there's a way the system will automatically mail you your password if you answer your secret question which is what is your favorite color? It's red. No, blue. All right. Next step. Now this page was the reason why I segregated the customer and orders table into their own folders. So the secure admin folder I can apply a rule now and say I will only allow access if you're in this role, if the user is attached to that role, and for any other user I'm going to deny access to it. Now for the members folder where we have the orders page, I'm going to deny access to any anonymous user. So those 3 rules should cover it. So I can finish the Wizard here. I have to do one more step. I need to put the Scott account into the admin role. So there he is. Now I'm done with the website administration. Now some of the things that it did behind the scenes, it created a new database for me, and you can go in there and look. It's got all the login information. It's quite secured and locked down. The 2 folders: Members and admin. I have a web config that holds the configuration information for me, but I didn't have to do any of that. The Wizard did it all for me. Now I need to actually log in and test it. Well this is a good time to go back and actually make the login page work. So a good spot to put the login control would be right here. I'll switch to design view, and there's a lot going on with login really. There's a whole series of controls that I want to show you. Under the login tab we have something called login view, and login view is very interesting because it will switch its contents depending or not whether you're anonymous or you're logged in. So if you're anonymous you want to see the login dialogue which it builds for me. Now when the login—there's a lot of customization you can do with the login control. There's a lot of different styles and formatting that you can choose from. The only thing I want to change here is that when it's finished to simply redirect everything back to this page, and that's because if I switch the login once I'm authenticated then I want it to say something like—in the login view it will say welcome back. Later on I'll put some more information in there, but that's good for now. Another control I want to show you is the login status. I want to put the login button on the page, but I want it to be on all the pages, which means I need to go edit the master page. Up here inside the header, that would be a good spot to put this information. So if I can just drag in the login status right here and save it. Now I can view my login control and test it. So we can log in as Scott. It should come back and saw welcome back, and now I have my log out button right here. Good. Now let's test one of our non-administrative users, but I can't because I don't have them created yet. A quick solution for that is to add a registration page. This is where having that master page really comes in handy. Let's add a new content page called register. Inside the registration page I simply need to drag over a create new user wizard control. Again this is another control that's very deep and has lots of customization features. The only thing I need to modify for this is that when it's finished, when it's complete, I simply want it to redirect back into the login page. That's all I need to do to create a new user with the site. Let's go back and view it in the browser. So I'll create a login for Anton, and Anton is one of the customer IDs I know exists in the database. Great. So he's logged in. So I should be able to get to the orders page. In fact that's all I need to do because there are some code changes. Whoops. I didn't put it there. It's under secure members orders. That shows the orders for ANTON, but notice I'm not allowed to get to the admin section for customers. In fact it will redirect me back into the login page, so I'm not allowed to do that. But if I do log in back as Scott, it will take me right back to the customer page. Great. Now let's wire up the navigation because we have enough pages here to set this thing up. I'm going to want some kind of breadcrumbs at the top, and over on the link we'll have a real menu system. So to do that to make it easy, ASP.NET introduces this thing called a sitemap. Now a sitemap is nothing but an XML file, and there are components or ASP.NET server controls that know how to use this information. The high level or top page for this site is our login page, so we'll call that our home. We have a couple of URLs here. Under secure admin we can view the customers, and we also have our order page. We added a couple more links here. We have registration, register. Okay. Now by having our site defined in this XML file makes it very easy for us to add links to it later, but if we go to our master page all this work of laying this out with the sitemap's really going to pay off because inside this menu—let's delete our placeholder text— I can drop in—under the navigation tab we have a TreeView control. I'll switch to design mode. You can see what that looks like. Now I need to associate this TreeView control with data source. Now our data source is the sitemap component and that expects the website map. Right off the bat you can see that we've got this thing populated with our contents from the XML file. This is also a good spot to put in our breadcrumb control which we'll put right here before our login status. That's called the sitemap path. That one's already configured to work against the website map. Let's see what this looks like in the real mode here. So I'll view the login page. Now this is looking much better. Let me log in. You can see I can view the customers, and it shows where I am in the site. If I go into order the sitemap path works, and I can go into register. All that works great. Now the only problem with this—let me go back home— if I log in as that Anton account, I still see these other links even though I can't get to it. It redirects me back to the main page. I can still see them here. What I'd like is for the links to only show up when I'm in the correct authentication mode. The way to do that is back here in the web config. Now I have some text I just need to paste in right here. Now this tells my sitemap provider to trim anything from the menu that's not supported by the current authentication. So to see what that looks like—when I'm not logged in at all I should only see the register option. Now if I log in as Anton I have my orders, but I don't have the view all customers. So this thing is really starting to get locked down here. That's good. Now the final thing I want to show you here is custom content that depends on each user. The way to do that in ASP.NET 2.0 is the profile. So if I go into web config and start adding a profile, it's essentially a collection of properties. I'm going to add a very simple property called full name. By default it will just be empty. Now what this just did is modified the schema of this profile object that will allow me to associate a full name string to a particular user—to any user. So inside the secure members page, in order to configure it or add the name I need to add a new page. Actually I should add a web form called set name. That's fine. But I'm going to choose the master page. I only have one so that's easy. Okay. Here it says—how about let's use an H3 tag. Tell us your full name. And a P tag. Inside here I need 2 things. I need a text box followed by a button. Let's give it some text called save, and I need an event. So when the user clicks on the save button I need to have a little bit of code. Also when the page loads I need a little bit of code. So when the page loads if it's not currently in the postback mode then I only need to do this once. I want to fill in the text box text value with the profile. Now watch. When I hit profile. I get the full name property. That's because it's defined in the web config. When I click the save button I'll put the text box back in the profile. Profile full name equals text box 1 text and redirect back to the login page. Okay. That's it for that page. Now in order to see that page show up in the menu though, I have to go back to my sitemap and stick it here, and I'll call it —what was it—set name. I'll call it change name. Okay. One last thing is in the login page itself I want to show that name but only when you're logged in. So instead of welcome back we'll say ASP—we use the label control. It needs to run on the server. ID equals to label name. Okay, and I'll need a little bit of form load code for this page. I'll need a little bit of form load code for this page. So I'll choose the page object and choose to override with load method, and here is where I have to—I'm going to paste the final bit of code from the clipboard so you don't have to see me type. Okay. I already have this text on the clipboard, so to save you from watching me type it in I'll just paste it in. We set the label text to the profile full name. Let's test it for the last time. Let's log in as Scott. Now remember my profile hasn't been set yet, so let's change the name. Save it, and there we go. We have our profile information that's stored in the main database. So I hope you've enjoyed this whirlwind tour of all the new features in ASP.NET 2.0 and Visual Web Developer, and there's a lot. You can see database work is going to be very easy to do. We have a whole login and member enroll system. We have site and template navigation and custom user settings with a profile. There's a lot here to digest, but hopefully this tour's given you an idea of just what's possible when you build your next—

Video Details

Duration: 27 minutes and 55 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Aug 23, 2013

Follow along through the creation of a fictitious customer portal to learn about master pages, themes, membership, roles, site navigation, user profiles, and the Web Site Administration Tool.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.