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

This article explains how to add new modules and pages to your DNN (formerly DotNetNuke) website.

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 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.

      added to the solution
      Figure 5

  4. Login to your DNN Website http://localhost:/MySample/ with the username and password created during of installation.

    Login
    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.

      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 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.

      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 modules. 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 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.

      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 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