DNN (Formerly DotNetNuke) Tutorial - Part 2 (Adding Modules)

Introduction

If you have not yet created a website then click here for the instructions. The Userient specified functionalities are should be implemented using modules in DNN (formerly DotNetNuke).

A. Module Creation

The following is the procedure for adding a new module and page into a DNN site.

1. First, you need to open your web site in Visual Studio from IIS. Select Local IIS from the “Open Web Site” window then you can see your web site. Here my web site is “MySample”.
   
   
   Figure 1
   
   
   Figure 2
   
   
2. Commonly, we are adding the modules (user controls in ASP.Net) to the “DesktopModules” folder to make identification easier.
   
   
   1. In DNN we are following the folder structure for every module. Each module is kept in a separate folder.
      
      
   2. Right-click on the “DesktopModules” folder and add New folder.
      
      
   3. You can use any name but use a meaningful name. Here “MySamplePage” is my folder name.

   
   Figure 3
   
   
   Figure 4
   

3. Add a new .ascx (module) page to that folder. This user control is called a modules in DNN applications. Add a label and a button or message to the user controls.
   
   
   1. All the user/client specified functionalities are implemented in these modules.
      
      
   2. Now the module is added to the solution, but cannot be used in our site.
      
      
      Figure 5
      
      
4. Login to your DNN Website http://localhost:/MySample/ with the username and password created during of installation.
   
   
   Figure 6
   
   
5. We will register your module to the website. Without registering your module you cannot use that module in the website. Now you can see some menus like Host, Modules, pages and so on.
   
   
   1. Click or mouse over to the menu “Host” then you can see more submenus.
      
      
   2. Select Extensions from Settings.
      
      
      Figure 7
      
      
6. Now you are on the page where the existing module is listed.
   
   
   1. Click on the “Create module” button on the middle right hand side.
      
      
      Figure 8
      
      
7. Here we will register our new module to the site.
   
   
   1. Control option from the “Create Module From” dropdown.
      
      
   2. Owner folder keep it blank. As I said, we can add our modules in any folder in your solution. Then you specify the Owner folder if needed.
      
      
   3. Here ModuleFolder will be MysamplePage.
      
      
   4. Select the created resource file from the “Resource” dropdown.
      
      
   5. You can give the custom module name as well as the Description.
      
      
   6. Then click on the “Create Module” button. Now you will be redirected to the previous page and you can see your module there.
      
      
      Figure 9
      
      
      Figure 10
      
      
8. Now we will add our new module to the Home Page.
   
   
   1. Click Home (that's called Home Tower).
      
      
   2. Select “modules ” from the top menus and select “Add New Module”.
      
      
   3. Then the new panel will be displayed below the Menus with the registered Modules.
      
      
   4. Search your module in the search box.
      
      
      Figure 11
      
      
      Figure 12
      
      
   5. Check your page, it's now in Edit Mode and it has different sections.
      
      
   6. You can add your module to that section highlighted with dots.
      
      
   7. Select your module and “Drag and Drop” your module to anywhere in that section.
      
      
      Figure 13
      
      
9. Wait for a second and you will get the following output.
   
   
 

Figure 14

Error…!!!!!!!!!!!!!!


10. 
    
11. Return to Visual Studio again.
    
    
    1. Open the .cs file of our module.
       
       
    2. Every User Control is inherited from System.Web.UI.UserControl, but in DNN it is not a User Control, it is a modules. So it should inherit from ”PortalModuleBase”.
       
       
    3. To inherit “PortalModuleBase” you should include DotNetNuke.Entities.Modulesin in your .cs file.
       
       
       Figure 15
       
       
       Figure 16
       
       
12. You just click on the Home Tower and you can see your module there.
    
    
    Figure 17

B. Page Creation

In the first part we discussed about module creation and how to add the module to the existing page.

Now we will explain how to add a new page to the DNN site.

1. The following  describes how to create a new page in DNN.
   
   
   • To create a page logon to the site as Host admin.
     
     
   • Click on the “Page” Menu from the Top Menu Bar.
     
     
     Figure 18
     
     
   • Then you will get a new window to add the page with 4 tabs (Page Details, Copy Page, Permissions, Advanced Settings).
     
     
     • Page Details
       
       Here we are adding the basic information. You will get a tooltip for each property in the property name.
       
       
       Figure 19
       
       
     • Copy Page
       
       Using this functionality you can create a page from an existing page.
       
       
       Figure 20
       
       Here I selected one page and I have the privilege to select the modules that I need to show on my page.
       
       
     • Permissions
       
       The most important and exciting DNN feature is access permission management.
       
       Using this we can manage the page specific access to the specific user or specific user group easily.
       
       
       Figure 21
       
       
     • Advanced Settings
       
       From here we can set the appearance settings, like Icons, Page Theme, Page Style Sheet, Cache Settings and Other settings like Expiry date/Start date of the page and all we can set.
       
       Please go through this. If you have any doubt I will help you.
       
       
     • Click Add Page then the new page will be created.
       
       
       Figure 22
       
       It will behave as if you set the settings in the Page Setting window.
       
       
     • To add a module to any page, select the page and put the page in Edit Mode and ADD the module as in the previous topic.
       
       
       Figure 23