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”.
     
    Open Web Site
     
    Figure 1
     
    MySample
     
    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.
       
    folder
     
    Figure 3
     
    my sample page
     
    Figure 4
     
  3. Add a new .ascx (module) page to that folder. This user control is called 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 on our site.
       
      added to the solution
       
      Figure 5
       
  4. Login to your DNN Website http://localhost:/MySample/ with the username and password created during installation.
     
    Login
     
    Figure 6
     
  5. We will register your module on the website. Without registering your module you cannot use that module on 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.
       
      Extensions
       
      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.
       
      new module
       
      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 keeps it blank. As I said, we can add our modules to 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.
       
      create module
       
      Figure 9
       
      create sample
       
      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.
       
      add new module
       
      Figure 11
       
      page
       
      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.
       
      sample page
       
      Figure 13
       
  9. Wait for a second and you will get the following output.
     
  10.  
     
    Figure 14
     
    Error…!!!!!!!!!!!!!!
      
  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 module. So it should inherit from ”PortalModuleBase”.
       
    3. To inherit “PortalModuleBase” you should include DotNetNuke.Entities.Modulesin in your .cs file.
       
      PortalModuleBase
       
      Figure 15
       
      DotNetNuke
       
      Figure 16
       
  12. You just click on the Home Tower and you can see your module there.
     
    my sample
     
    Figure 17

B. Page Creation

 
In the first part, we discussed 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.
       
      add new page
       
      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.
         
        page details
         
        Figure 19
         
      • Copy Page
         
        Using this functionality you can create a page from an existing page.
         
        copy 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 to permission management.
         
        Using this we can manage the page-specific access to the specific user or specific user group easily.
         
        permission
         
        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.
         
        active feed
         
        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.
         
        edit this theam
         
        Figure 23


Similar Articles