We've left the SNP project a week ago with defined basic action plan. In this, second, part we are going to set up basic functionalities for public membership (I’ll use term public membership for working with members that don’t have access to Sitefinity admin area).
In this post we are going to:
The basic scenario that we want to implement in this part is to allow visitors to register with our social network and provide them with an ability to log in and log out. The members of our social network (Persons) should not have access to Sitefinity administration area.
- Add custom profile properties (Country, Company, Gender…)
- Create new template and theme for SNP project
- Create basic page structure for SNP project
- Modify built-in LoginView control
- Modify built-in Login control
- Modify built-in CreateUserWizard control
DOWNLOAD THE PROJECT (I suggest you do this now, because I’ll be referencing the files in project throughout the post).
Add custom profile properties
By default, Sitefinity has only two profile properties defined: FirstName and LastName; since we are building this fancy social network, that simply isn’t enough. So we are going to add several more profile properties that we are going to keep for each Person. We’ll add:
In order to do this, we need to open web.config file in the root folder and find the profile section. Then to properties collection, we are going to add those new properties.
- University and
And that was all we had to do to complete this grandiose task.
Create new template and theme for SNP project
If you’ve been watching the video tutorials than you’ve perhaps already saw how to Customize appearance with templates and themes. I went to Free Css Templates and download one of their templates and created a new template and theme called SNP from that template. In the project accompanying this post you can find the original template in template/pluralism folder and if you are unsure how to convert such template to Sitefinity template and theme, please watch the video I’ve mentioned. Obviously, this step is not crucial for the project, but I thought it may be neat if I cover that as well.
Create basic page structure for SNP project
So now, that we have added new profile properties and created a new template, next thing to do is create a basic page structure. We are going to add these five pages:
- Home – visible in navigation
- Groups – visible in navigation
- Person – not visible in navigation, Page group
- Login – not visible in navigation
- Registration – not visible in navigation
All of these pages are using the newly created snp template. Here is the brief explanation of how are we going to use these pages: Home page will display a profile of the logged in user. On this page, the logged in user, will be able to modify its profile and do any other needed actions. This will be, so to say, dashboard. Groups page will display various groups of Persons (e.g. Sitefinity developers, Apple fanboys, Manchester United supporters…). Preson is a page group and it won’t have any content itself. However, every user that registers with SNP will get a public page displaying it’s url (please note the difference between home and person’s public page – persons public page is “read-only” and can be accessed by any other registered person, while home page is a page where user can modify it’s profile). So every registered user will have a webpage, whose url will look like www.domain.com/person/username. Login page will host the login control, while registration page will host CreateUserWizard control.
Modify built-in LoginView control
Next thing we are going to do is modify the built-in LoginView control. This control is located in ~/Sitefinity/UserControls/Login/LoginViewControl.ascx and you can examine the modified version from the project accompanying this post. Basically, we’ll add some public properties to the control and handle logged out event. We are going to add properties that will allow you to set the url of registration page (RegistrationPageUrl), login page (LoginPageUrl) and finally the url of the page where user should be directed after logging out (LogoutPageUrl). This will alow you to set these different properties from page editor, by simply editing the control. In addition to this, we are going to handle LoginStatus_LoggedOut event and redirect user to LogoutPageUrl after logging out.
Since we want the LoginView control to be accessible across all the SNP pages, we’ll add it to the template and not to individual pages. If you take a look at the project, you’ll see I’ve placed the control in Sidebar content place holder in snp template.
Modify built-in Login control
Similarly to the LoginView control we are going to modify the Login control as well (they are located in the same folder). To this control we’ll add public property DestinationPageUrl, which represents url of the page to which user should be redirected after successful log in. Also, we’ll handle the LoggedIn event and redirect user to the url set by DestinationPageUrl property. Finally, add this control to Login page.
Modify built-in CreateUserWizard control
Finally, the last step of this second part, is to modify the built-in CreateUserWizard control. We need to add one more wizard step in which user will enter the profile information (set the properties we’ve added in first step), add code for saving profile data (CreateUserWizard1_FinishButtonClick method in my sample), and assign user to a “SNP Person” role (if role does not exist we’ll create it on the fly). By default, “SNP Person” role has no access to Sitefinity admin area, so we don’t need to set any restrictions here. Add this control to Registration page.
And that’s it…
In this post, I’ve demonstrated how to create public membership system which can be used in countless scenarios. Apart from that, we’ve made progress with SNP project and really lay the foundations. In the next post, we will be examining how to take advantage of Sitefinity’s API to create pages for users after they register, and we will be creating the dashboard control for user which will allow user to modify it’s profile… so, stay tuned.
DOWNLOAD THE PROJECT
How to get it working on your Sitefinity installation:
Let me know if you have questions or if something, God forbid, doesn’t work.
- Download the project
- Unzip it
- Make sure you add profile properties to your web.config (take a look at provided web.config and read first step)
- Copy SNP folder from ~/App_Themes to your ~/App_Themes folder
- Overwrite files in ~/Sitefinity/UserControls/Login folder with the ones provided in project you’ve downloaded
- Create a new template by uploading ~/template/SNP.master to your Sitefinity installation (do this in Sitefinity admin area)
- You can copy ~/App_Data/Sitefinity.mdf to your ~/App_Data folder and be over with it, or alternatively:
- Create basic page structure like explained in 3rd step of this post
- Add LoginView control to SNP template like it was explained in step 4 of this post
- Add Login control to Login page
- Add CreateUserWizard to Registration page