DotNetNuke Random Image Tutorial - Part 1

DotNetNuke Random Image Module - Tutorial
PART 1

Right straight to the point, I’m going to create a random image module for DotNetNuke 3.x  in C#. What’s more I’m going to show you step by step how to make the same module.

Basically the module allows a portal owner to define an unlimited number of images, when the module loads, a random image from the collection will be shown. Each time you refresh the page a different image will be displayed.

A shortlist of features that I want the module to do are listed below

• Display a random image from a selection of defined images
• Able to define an unlimited number of images to use
• Each image can have an alt tag defined for it
• Able to import and export content from the module
• Localised string settings
• Use MS SQL Server 2000 as the database

 

Prerequisites

I’m going to assume the following, that you have a local install of DNN 3.2.x with a MS SQL Server 2000 database. I’m going to be using Visual Studio .Net 2003 so I’m just going to also assume that you have this installed.

You will also need to have a basic understanding of SQL and C# in order to follow the tutorial.

 

Getting Setup

Right a couple of things that I like to use are the VS 2003 templates and CodeSmith templates that you can download of free from http://dnnjungle.vmasanas.net/Development/Templates/tabid/28/Default.aspx These will save us a lot of time.

If you don’t have the full version of CodeSmith don’t worry you can download the 30 day trial version or you can use the free application MyGeneration in place of it.

 

Creating the Project

In Visual Studio we are going to create 2 projects in the solution, one will be the module itself and the other will be the SQL data provider for the module. I like to create the project under this folder <dnn folder>/DesktopModules since it just make development quick.

It’s quicker because I don’t need to keep copying my files into DNN each time I make a change or do a build.

I’m assuming that you have installed the VS 2003 project templates, just select the Visual C# Project for DotNetNuke 3 from the project type. Where are going to use the DNN Module template.
I’ve named my module BTBRandomImage, its important that you don’t include full stops in the name since Visual Studio will create a folder with this name.

Make sure that you have the location set to your desktop modules folder of your DNN install.

Hit ok then you should end up with a directory like this with all these stub files and code created for us.

So good so far, next we are going to create the DataProvider project for this module, the important part here is where we create the project, it needs to be in the Provider folder of the module project we just created.
So select Add Project then New Project from the file menu of Visual Studio.

Select the provider folder of module we just created, then enter the name of the module, hit ok.

You can checkout the results by taking a look in the provider folder which should look like this.

We are nearly ready to start developing our module, just two more configuration settings to make.
We want the build output of both the two projects to be the bin folder of the base DotNetNuke install. So we need to select each project, right click and select the properties option. Then in the window Configuration Properties -> Build set the output path to be the bin folder of our DNN install. Do this for both the module and data provider.

Next add a reference to the DotNetNuke assembly to both projects.

Ok then a quick test to make sure we are good so far is to build the solution, you should then get the top four files in your <dnn>/bin folder as shown below.

Ok so far we’ve not got anything very impressive for a troubles, but that is about to change. Lets just take a more detailed looked at what we need to do

1. Define the module in DNN so we can use it in a portal.
2. Create the database table that our module uses
3. Create the stored procedures to access the database
4. Create the data provider layer
5. Create the controller and info class
6. Create the user controls to display and edit the module

Sounds like a lot, but we’ve got most of the stub code already created for us with the project wizard and we are going to use CodeSmith to create a lot of code for us.

You can download the initial project files from here.

Next Page >>