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

Presenter:Scott Stanfield

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.


Click here to go to original video page

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video

Minute 0
Hello welcome to the visual Web developer introduction video over the next 30 minutes will show you how to create a pretty full featured customer login portal for a fictitious come to call north winds and missile have a lot going on the database access a login system site templates and navigation and even custom user settings if this is your first time using visual Web developer ASP net 2 0 you can be in for a treat lots of features that we have to show your summer to go and get started so here we are the total number star by opening a new website now in the past in a net 1 1 or promotes limited to working only with Internet information server but with visual Web developer and a spit net 2 0 you can work directly with the file system so in addition to support for I asked which I m even have installed my computer but it s not stopping I can work with my local filesystem on the great ape Project I just named after my favorite wine island
Minute 1
And the first thing it creates for me is nothing which is great there s no code working behind the scenes there s really nothing we were starting with an empty page so let s create our first page since this is all about not having a customer views or orders my first official recalled orders aspx asp net supports multiple languages on the net on a per file basis not a per project basis upkeep of Visual Basic and also we can put the source code for pages in a separate hidden behind the scene file I may keep it within the page because with such little code to show you for this entire project I ll keep it as is so what s popping up here is my HTML editor now the HTML editor is vastly improved and visual Web developer 2005 with God full IntelliSense support saw some typing we ve got all the HTML support the home if I type in something arbitrary like he like a bullet point so I have one
Minute 2
And line item to produce and cut arbitrary formatting like a list of some spaces around here and a switch to the design mode shows you what s can look like on the page with a make some changes here might put something on welcome to hear about view your orders and change that to a heading tag for switch back to source mode it preserves my formatting subject carefully crafted or handcrafted HTML going back and forth between the designer you can be safe if I do want to give it a nice default formatting I can simply take control KD and overall a nice format a few other things to notice we have X HTML transitional support we can switch browsers in a limit the HTML of that and what it will validate against usually a lot going on here let s what s going save this ends strip out some of the them some the text here
Minute 3
I say this because this is about orders when he did order database to do that I won t add a new special folder that s managed by ASP net called apt data folder now attempting to system folder but I go back to some of my files here says rats and ingredients for this demo I m using a standard Northwoods database that you can get it directly from Microsoft about this is an access database but because we have SQL Server express installed I can go ahead and drop into that folder and double click on it to see the details so aside here I have all my tables but it s probably better explain through this database diagram in the soap were building a page to show the customer orders to each quarter has some details associated with it will also create customer pays them allow the administrator to view all the customers in the system so we have a couple pages going on in several bits of data here so close that now to get the customer data into this page was switched to design mode
Minute 4
And go to the table and just drag the orders right on the page down the past simply execute a query to return the data and showing it below the code here is generating some some markup code forming behind the scenes here glancing looks like now this is way too much it s showing for fall every customer in every work and it s way too wide so when you make a few changes to the switch back to the design mode you can sit at my drag a table on the page accreted to controls the first is this grid view in the grid view is worthy of a five hour demo in and of itself there so much going on here on I m going to tell to automatically generate my columns from this SQL data source so this is where you make the attach it to the database this is where review it in a grid view celebs make a small change to our database query and when I dragged a database in a system that automatically added a config
Minute 5
Should string my web config file the special data directory it s pointing to my northwards database to make it very easy to deploy the site just with files and don t have anything special to install on the next page here what s modify the query instead of returning everything I ll just pull back the order of the customer beach the order date and maybe the freight now because this will collect every customer on a modified to only pull back those customers that are specified by a query string in the URL so that the customer ID here at the top and add that machete what looks like C generates is queried for where clause for me automatically an enemy to refresh his Macquarie changed with save it and view this in the browser by default not to give anything to go put customer ID can see a test of this health detail FKI
Minute 6
Spew whatever customers but now you see the queries easily parameterized by an optional commandline great salutes Gold and deeper look smashing out we want to click on one of Anton s orders and view the details we have a nice little master detail ago by going to the end of the Project and switch distortion of the nobility and here and add some space debris in my toolbox not a lot more here than it used to ASP net 1 1 and dish of all the standard controls we have the top might resort his group to the data components and navigation validation altogether in their own little areas of a drag on the grid view directly by default does not attach any data funny to attach it to a new query or use the database but notice we could be doing queries against a middle tier business logic layer or we can go directly to annex a mouth while I isn t higher model in six
Minute 7
Runcible a message 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 price quantity that s fine and a parameterized query as well because they only care about the orders that come from the control to the query string we want it worse to come from the control grid you want which is the one above us so far so good it s finished that now I have two tables on the on the page Anita make one last little change to the top when I need to enable selection so I click the select hyperlink exhibits going to refresh the page I need to provide one more bit of information it needs to know what columns to pass if I turn on the daily key names and tell it the order ID is the key save it view this in the browser after I passed some data
Minute 8
So I can select order 10 692 and shows me the details below the webmaster detail with no coding so far was goal of the further let s add a page to view all the customers of site so done with orders for now I ll go back to the solution and add a new item to several customers I ll switch to design mode and drag in the customer table like it did before for orders a maternal lot more stuff on a front paging and sorting editing and adding new column for hyperlink in this column is view orders this will link back customer to that producer customers orders in the URL for hyperlink is coming from the customer ID now the Senate over to the orders page and see what else can I do there s a Sony future to get my cassette
Minute 9
Review I can turn on Palm enables sorting and paging callbacks and this is for higher level browsers is allowed to change all the sorting paging without visible refreshes footsie with this guy looks like a watch and sort in paging works and I can drill in two and edits a Rancho grande day it hit update so that in line editing and finally my orders hyperlink goes straight to that particular user ID is his grace we got to pre full featured pages move onto the next piece should looks make a single look a little bit better with some that called themes in his cabinet to point out feature collections of style sheets and JPEG images and things like that I have some themes are already to go the handbuilt mom called Hilo in 19 and even have a view for this and would look like on a cell phone and a drop in and hear the
Minute 10
For one simple has an empty default stylesheet but he will and I are a little more complex all I have to do to enable a particular theme is go to the web config for a first on your sameness this is an XML file that controls all the settings for our side now were to be here futile and so I m going to take out some comments so you can see just the pieces that we care about a need at a small section called pages noticeably IntelliSense which is something new and the web config file for one want to add his themes and alter on when I would see what the customer page looks like now I haven t default background color but notice the control itself has a different font and different style that s because I m using a single of the skin file now a skin allows you to it like it s like a stylesheet but for ASP net controls you can see I have special settings sure for reviewer Minnie Reagan images focus
Minute 11
stylesheets we show you one washing what he will looks like you view the customer page great and now we have themes of school before their start of really flesh out the designer site I really want a template in ASP net 2 0 we have Wisconsin called Master pages which service or overall site template for McRae to Master page now in this very simple website are Master page will look something like twins portal and other top of most sites we hasn t had a header and at the bottom will have a footer we can put some basic information like copyright 2006 North winds sample and in between the two will have some con
Minute 12
And that s wrapped by another to tag like a Manu fan for the menu also puts a placeholder and link to and finally our last two sections for the content itself now here s where Master pages really come in handy if you can and Sampras control Katie at the automatic formatting and you can see this doublechecking homage of taxing all compact and this content placeholder for drag and put this inside content section that s the little hole that my other pages need to fill in and shoot the design view now the design view looks pretty plain that sexy picking up our style sheet that s because I knew to go back here and put the stylesheet being equal to Hilo as well now my view my master page
Minute 13
Osman to see the Master page this is were contents can ago what was going to add a content page is right click choose add content page I got a meal login page of some pointless as to now login aspx but for now just give it some basic system default content so and re have some basic agent on the clipboard him on pace than in and save it for great now we have a placeholder for a login page with a couple of other pages now one show you how to apply this master pages to pages we ve are to build understood for one of them to go to the customers page and I really does care about is that this was a show for the content area which is the the grid view and the data source take that to put on the clipboard and we all this other regional job make sure my pages derive from the Master page or their can by switching to design view I give this content placeholder
Minute 14
Instantiated now have a place to put that each smell back from the clipboard and paste it right back and save it now haven t had a content now officially this is something you probably wanted to one pattern Master pages created at a time this can be handy of my clothes all these pages and fact believe the customer page that was made in a worse page because re how the Master pages applied right here and also put them inside to folders to fight alongside securer pattern and there s a customer page suggested inside the Master page template I also have a secure members folder in the reselect of these two folders is because I don t really want any person builds you the customer list and I only want in order to visible by the people that are authenticated so Sunday order s page at 40 put 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 towards
Minute 15
Femina do that by turning on or going to the ASP net configuration to notice it when I go to this site or when I go to a regular page right to have IIS installed so it s using its own built in Web server in its own local port is only accessible to this local page but it makes it really easy to develop about having I asked what here you can see I ve got security setups and provider application information on a star by going to the security tab and configure our log information so the security Wizard will go to the first up will make it so we can log in from the Internet with forms skip that will turn on roles for our site and rolling to have one role and if the administrator role will create that now tell great account for myself
Minute 16
And e mails handy because if you forget your password there s a way the system automatically mail you your password if you answer your secret question which is what is your favorite color read no blue right next up now this page is the reason why I segregated the customer orders table their own folders so the secure admin folder I can apply a roll now and say I will only allow access if you re in this role if the user is attached to that role and four any other user going to deny access to now for the members folder where we have the orders page on the deny access to any anonymous user of those three rules should cover I can finish the wizard here after you one more step on you to put the sky
Minute 17
Account into the advent role areas not done with the website administration knelt some the things they did behind the scenes created a new database for me and you can go in there and look it s got all the login information it s quite security lockdown the two folders members and had meant I have a web config holds the configuration information forming but it have to do any of that at the wizard did it all for me now a Texan log and tested this is a good time to go back and actually make the login page work so good spot to put the login control the trick here is to design view and there s a lot going on with this log and really there s on the whole series of controls or show you
Minute 18
Us or your login so if you re anonymous you want to see the login dialog which builds for me now with a login to eat a lot of customization you can do with the login control is lot of different styles and formatting city could choose from those thing I want to change gears that when it s finished to simply redirect everything back to this page and that s because if I switch the login with them authenticated that I wanted to say something like the login view and say welcome back car and later on I ll put some more information there but that s it for now another control my shoes this login status I want to put the login button on the page but once again all the pages which we do need to go edit the master page and appear inside the header to be a good spot to put this misinformation packaged rag and a login status right here say that now I can view my login control test
Minute 19
So we can log in as Scott and should come back and say welcome back and now have a logout button right here could now it s just one of her non administrator user s but I can t because all have been created yet so quick solution for that is at a registration page and this is where having a master page really comes in handy with adding new content page called register and inside the registration page I simply need to drag over the create new user Wizard control again missing this is another control is 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 a survey wanted to redirect back to the login page and that s all you do to create a new user with a site with the back and do it in a browser so
Minute 20
It in a login for Anton Anton is one of the customer IDs and know exists in the database great and he s logged in so I should be able to get to the quarters page and effect a felony to do because her some code changes up to them to their thunder secure members orders and it shows the orders for Anton but notice I am not allowed to get to the admin section for customers in fact it ll redirect me back into the login page so not allowed to do that but I do login back to Scott will take me right back to the customer page right now let s wire up the navigation because we have enough pages here to set this thing up on a once in breadcrumbs at the top and over the link will have a
Minute 21
A real menu system so to do that to make it easy a span that introduces this thing called a site map site map is nothing but an XML file and there are components or ASP net server controls that know how to to use this information to high level top page for the site is her login page a letter home we have a couple of your rails hereunder secure ad men we can give the customers and we also have our order page and we added a couple more links here we have registration register okay to my having our site defined in this XML file mix it very easy for us to add links to it later if we go to her master pay
Minute 22
Always work to blame us out with a site naturally to pay off because inside his menu was delete our placeholder text I can drop in under the navigation tab we have a Treeview control switch to design mode gives you that looks like now I need associate is Treeview control with a data source in her data sources the site map component and that expects the website map and right off the bat you can see that we ve got missing populated with our unconscious from the XML file on this is also good spot to put in our breadcrumb control which will put right here before our login status is called a site map half that was Re configure to work against a website that lets see what this looks like in real mode here so you login page does and this is looking much better than login
Minute 23
And you can see a computer customers and it shows war and the site to go in order to site map half works are going to register all her works great now the only problem with this new back home to log in as an Anton account I still see these other links even though I can t get to it it redirect you to the main page I can still see them here what I d like is for the links only show up when I m in the correct authentication in the way to do that is back here in the web config now have some tech centers need to paste in right here in this tells my site map provider to trim anything that wants to trim anything from the menu that s not supported by the current authentication soon to see what that looks like when I m not logged in at all should only see the register page or the register option if I login as Anton
Minute 24
I have my orders but I don t have a view all customers so this thing is really start to get locked and here that s good in the final field show year is custom content that depends on each user in the way to do that ASP net 2 0 is the profile so by going to the web config and start adding a profile if such the collection of properties on the net and very simple property called full length and by default noticed the empty know what this just is is added on Burke or modify the schema of the profile object that will allow me to associate a full length string to a particular user or user so inside to secure members page in order to configure it or add that the name I need to add a new page 6 should add a web form called a set or set names that I but I wouldn t choose the master page
Minute 25
Have once it s easy to pay in here says about Susan H3 tag tell us your full name and if he tagged inside here I need two things in a text box followed by a button and give it some tax code save and I need an advance when the user clicks on the save button and you download the code and also when the page loads many little but code for the page load if it s not currently in the post back mode then I only do this once I want to fill in the text box text value with the profile not watching a profile I get the folding property method is defined in the web config when I click the save button output the of Xbox back in the profile profile fulminate equals Xbox one
Minute 26
Ask and redirect back to the login page okay that s it for that page now in order to see that page show for the menu though I have to go back to my site map and stick it here though what was it said name change name okay one last thing is in the login page itself I want to show that name but only when your login so so welcome back will say if he weaves a label control and is run on the server is a guy vehicles to label label name tag and on a little bit form load code for this page middle of the form load code for this page so choose the page object and choose to override his load method and here s where a half to bomb
Minute 27
And paste the final but a code from the clipboards practicing type halves Tex and the clipboard so to save you from watching type in aand we set the label text of profile full name was tested for the last time blog Scott announced my member by profiles and set hits will change the name say that in there ago whenever profile information stored in a database so hope what I hope you ve enjoyed this whirlwind for all the new features in ASP net 2 0 and visual Web developer and there s a lot to see database works can be very easy to do a whole lot and member and roll system we have site template navigations and custom user settings of profile of the lodger digest but hopeless towards giving idea which is what s possible when you build your next website