MyLifeBBS » DotNetNuke

Guide to implement re-Captcha in DotNetNuke Modules without touching the source code.

George — Fri, 01 Jan 2010 08:56:30 +0000

If you don’t know what is re-Captcha, this article: What is re-Captcha might help you to get on foot before starting this easy implement guide to install re-CaptCha into your DNN Modules.

DotNetNuke users has long frustrated by the poor design of DotNetNuke Captcha which is has a critical flaw where the Captcha image will be cached in the server and never being refresh if you set the cache the module or the whole page. One of the common error is the DotNetNuke Captcha’s image not showing issue when the DotNetNuke has PageBlaster installed, it is a big trade off for a big site to lack of either one of them.

Despite the advantages of using re-Captcha, it has a big flaw which it has to connect to the internet to have it working properly. Else, let’s get started modifying your modules without the need of the module source code and recompiling them.

Step 1: Register yourself a Key token and download the re-Captcha.

Step 2: Unzip the download file and upload Recaptcha.dll to your DotNetNuke bin folder via FTP. (/httpdocs/bin)

Now the following guide uses Ventrian’s NewsArticle Module for demonstration.

Step 3: Download the ASCX file that handling News Article Comment layout from /DesktopModules/DnnForge – NewsArticles/Controls/PostComment.ascx

Step 4: Open it with an editor and insert the reCAPTCHA control on top of the ASCX file (after Page control)

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="PostComment.ascx.vb" Inherits="Ventrian.NewsArticles.Controls.PostComment" %><%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls"%><%@ Register TagPrefix="recaptcha" Namespace="Recaptcha" Assembly="Recaptcha" %>

Step 5: Scroll down around line 28 where the default DNN Captcha is called:

"ctlCaptcha" captchawidth="130" captchaheight="40" cssclass="Normal" runat="server" errorstyle-cssclass="NormalRed" />

and insert the reCaptcha after it:

"ctlCaptcha" captchawidth="130" captchaheight="40" cssclass="Normal" runat="server" errorstyle-cssclass="NormalRed" />
ID="recaptcha"runat="server"PublicKey="[TOKEN]"            PrivateKey="[TOKEN]"/>

Replace the [TOKEN] with the key you get from the registration and That’s it! Now upload and replace the PostComment.ascx and go to NewsArticle Admin Setting to disable the default comment Captcha. However, due to the limitation of not touching the VB files, it is impossible to create some condition like only show reCaptcha to unregister visitors.

However, if you wish to change the reCaptcha design, here’s the guide to customize the reCaptcha design.

Hopefully reCaptcha will be integrated into more DNN modules. Btw, the above method will not work in DotNetNuke Feedback and UserDefinedTable Module due to the way they code the module.

Show DNN Module in Another Module’s Generated Page.

George — Sat, 26 Dec 2009 01:34:20 +0000

One of the greatest feature of DotNetNuke is to allow use to show the module in the page they like based on the viewer’s role and permission. However, this only apply to DotNetNuke generated pages. So, how about showing a module only in a page that is generated by Blog Module for example?

The solution is simple, all you need to do is add the following lines into your skin.ascx file:

<% If Regex.IsMatch (Request.URL.ToString, "REGEX HERE") Then %>"ExtraPane" runat="server">
<% End If %>

The idea is to show a module pane only when a specific page is called. In the above example, we use ASP.NET Regex to match with the requested URL with the self defined Regex value “REGEX HERE”.

Using Ventrian’s Article Module for example, the default URL of a Article Page looks something like this:

http://www.example.com/NewsArticles/tabid/218/articleType/ArticleView/articleId/384/Example-Page.aspx

In the url above, we can easily identify the unique parameter of the module’s generated url: ArticleView, we use this as the Regex filter and replace it with “REGEX HERE” and you have this:

<% If Regex.IsMatch (Request.URL.ToString, "ArticleView") Then %>

If you worry you might have the word “ArticleView” word in other pages’ URL, you could put a longer regex value to filter it: &tabid=218&ArticleView=

Important Note: The “Request.URL.ToString” calls the raw url which looks like this:

Default.aspx?TabId=88&ArticleView=

Thus, your Regex Value must match with the raw url and not the Human Friendly Url that you see in the web browser.

If you do not know the raw url of the module generated page’s url, you could add this into your skin file to find it out:

Note: is added so that it will not show in the normal view but you can see it via browser’s view page source function. This is to avoid interference in production site.

For a live demonstration, you can see this page:

http://www.goeatout.com.my/Restaurants/Promotions.aspx and

http://www.goeatout.com.my/Restaurants/Promotions/Details/View/PID/31315/Hong-La-Qiao-Restaurant-Steamboat-Buffet.aspx

In the second link, a module “More Related Dining Promotions” is added at the page bottom which only shows in the page with “PID” in the URL but not in any of it’s parent page /Promotions/

For advanced combination, you could add “AND” in the code:

<% If Regex.IsMatch (Request.URL.ToString, "REGEX HERE") AND DotNetNuke.Security.PortalSecurity.IsInRoles(PortalSettings.AdministratorRoleName) Then %>"ExtraPane" runat="server">
<% End If %>

In the example above, it will show the extra pane only if the request url is match with your regex and the viewer has administrator role.

Have fun^^

Give an unique id for every DNN Containers

George — Mon, 12 Oct 2009 09:36:00 +0000

Inspired by Think of Design’s avoid span in module title and amount of requests including myself to have a unique id for every containers in DotNetNuke, I’ve came out with this simple solution to ease the designing works in DotNetNuke Skinning.

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
 <%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
 <%@ Register TagPrefix="dnn" TagName="Actions" Src="~/Admin/Containers/Actions.ascx" %>
 
 "server" id="dnnTitle" visible="false" />
 <% Dim ModuleTitle As String = GetPortalModuleBase(dnnTitle).ModuleConfiguration.ModuleTitle %>
 
class="common">

 <%= ModuleTitle %>
 "server" id="dnnActions" />
"ContentPane" runat="server" />

 

Using the same logic, we can retrieve the module id by modifying the DNN property code:

<% Dim ConModule As DotNetNuke.Entities.Modules.ModuleInfo = DotNetNuke.UI.Containers.Container.GetPortalModuleBase(Me).ModuleConfiguration %>"Container<%=ConModule.ModuleID %>" class="PekoOutterCon con180">

Theoretically, all you need to do is to change the .ModuleTitle to .ModuleID. Since CSS id cannot start with a number, you will need to add some word before calling out the ModuleID in the div.

However, you will find that if you logout from DNN, the module will failed to call out the correct ModuleID.

Thus, you will have to define that correct container and ModuleInfo.

Now you can change the individual container without interfering with other DNN Container.

Best Free JavaScript and CSS Compressor to Optimized your Website.

George — Sat, 10 Oct 2009 02:54:59 +0000

If you are digging into DotNetNuke website optimization, I’m sure you have been struggling on it. It’s not easy to optimize all the JavaScript and CSS in robust web application like DotNetNuke. If you’re a heavy users and afford to pay for solution, then the simplest way is to buy all in one compressor like Snapsis PageBlaster Pro to merge and compress all JavaScripts. However, this is not always the solution if you have other modules and setting in your DNN. Most of the time merging the DNN Core JS will result in break functionality to you web portal.

From my past experience, it is better not to touch the DNN JavaScript unless you know what are you doing. Thus the best practice is to compress the JavaScript and CSS into a smaller files. There are a lot of compression tools and those free only most of the time is outdated and not error proof to your script.

Thus, the best way is to copy a compressed script that already tested in the browser! First you need to have FireFox web Browser, then you will need to install FireBug and Google Page Speed Analyzer plugin.

Yup, it’s from Google! Having confidence now? Now fire up your PageSpeed on the webpage that have the JS loaded and expand the JS node from it:

Click on the minified version link and you will be able to download the minified version of JavaScript, replace it with your original JS file and you will have a 100% safe and Free Compressed JS, Hooray!

Making DIV Containers Same Height to each other.

George — Sat, 10 Oct 2009 02:25:00 +0000

Often Portal based web design will have flexible height on all content columns. However, sometimes it will be very ugly if your content is too long and leaving your right column, for example blank.

There are many scriptless, pure CSS solutions to fix this problem but turns out you have to write a lot of CSS and html to make it compatible in all type of browsers. This is just not applicable for heavy web applications like DotNetNuke.

Well, the solution is simple. With the pre-installed jquery in DNN5, all you need is to include a simple script like below in your DNN Page header to adjust your content panes height:

 $(document).ready(function() {


        var sameHeight = $("#DNN_ContentPane").height();

		  $("#DNN_RightPane").height(sameHeight);


    });

Improve your DotNetNuke SEO Performance by knowing Long ASP.NET View State Issue in DNN.

George — Sat, 03 Oct 2009 13:26:45 +0000

Recently Microsoft released its series of IIS administration tools. Finally, there’s a Search Engine Optimization Tool that best analyze ASP.NET website. Who else is better understand the limitation and problems in ASP.NET than itself? Not saying than Asp.net is not good, other framework has their own problems as well and have a lot of analysis tools since long time ago.

I haven’t test it much since it only support IIS7, It means you have to have it running on Vista or Windows Server 2008. What a shame? Anyway, it’s best if you can analyze your DotNetNuke problem before going to a live server especially if you’re on a shared server where you can test anything on the server side.

Most of the DotNetNuke users will have a long view_state problem if there is more than 5 different modules on the same page and probably get the warning message if you run the SEO Toolkit.

While past argument was that Search Engine Crawlers do not read them, it still have a great impact on your DotNetNuke Website Performance because the long view_state of DNN takes an average of 50Kb extra weight for crawler to download the page before indexing it.

If you have more than hundreds of pages with a lot of modules in it, most likely the crawler stomach will be fully filled after going for hundred of pages. There’s a quota of how many pages and the total of bytes to download every time a robot visit your website. Not only that it will affect the speed of indexing, it takes a lot of bandwidth from your server which is a impact if you are putting your DNN in a low cost shared server.

In summary, from my experience, most module developers do not optimize view state of their modules… — Sebastian Leupold, DNN Core Team Member

There are 2 methods to solve this problem and the common one will be moving the view state to the page bottom. This does help little on the page rendering while a page is loaded but it won’t help much in Internet Explorer as it will always load and render the whole page before showing the content to the reader.

Thus, another method is simply store the view state in the memory. You can do that by going to the DNN Host Setting Panel and look for Page State Persistence > Memory. However, doing so will make few core and third parties modules stop working due to the poor managed view state storing. (Most probably the first thing to break is AJAX Modules)

If you’re running DNN 5 and there is not “Page State Persistence” Setting in the Hosting Setting, Weird huh? You can add it back by running the following SQL statement in Host > SQL

Turn it on--
   UPDATE HostSettings SET SettingValue = 'M' WHERE SettingName = 'PageStatePersister'
Turn it off--
   UPDATE HostSettings SET SettingValue = 'P' WHERE SettingName = 'PageStatePersister'
Then click the "Restart Application" link button.

If you wish to know why is it removed since DNN5 and added back, you can dig it from here: Removing DNN 5 Page State Persistence Setting and PageStatePersistence: Setting gone, but functionality remains.

Let’s download the Microsoft SEO Toolkit and give it a try. If you’re wondering how to move the DNN view_state to bottom, you can try Snapsis PageBlaster but moving the view_state to bottom may still affect some modules, be sure to check the capability before going for it.

How to Modify Ventrian Property Agent

inspiron64 — Thu, 01 Oct 2009 10:17:50 +0000

If you’re using Dotnetnuke and Ventrian Property Agent to build your webpage, sure you like to know how can modify ventrian PA by yourself.

Before we start to modify Ventrian PA Module, you need to download the File below:

Dotnetnuke version 4.x or 5.x
Ventrian Property Agent Install File and Source File (Any Version)

First, Install a Dotnetnuke in your Localhost. You can download the Dotnentuke from http://www.dotnetnuke.com

After install Dotnetnuke, open your Website and install the Ventrian Property Agent using the Install File that you download. When you finish install the Ventrian PA Module, try to import a template on it and fill in a new property after import a new template. Template can be downloaded from http://www.ventrian.com

Ok. When all of this have been done, unzip the Ventrian Property Agent Source File. Copy and Paste all the files on it to the Ventrian PA that you installed. Normally the Folder will be on C:\Inetpub\wwwroot\(your DNN name)\DesktopModules\PropertyAgent

Open the folder and find a file which name “Ventrian.PropertyAgent.vbproj”. Open it with Notepad, and scroll to bottom. You will see a line which like

http://localhost/DotNetNuke455/DesktopModules/PropertyAgent

Change it to

http://localhost/(your DNN name)/DesktopModules/PropertyAgent

AND

http://localhost/DotNetNuke455

Change it to

http://localhost/(your DNN name)

All done. Now can open the Ventrian PA project with Microsoft Visual Web Developer.

DotNetNuke Customizing your Login – PART 3

George — Mon, 01 Jun 2009 12:54:48 +0000

This is a simplified extra add on from the previous topics:

The DotNetNuke Customization Shortcomings

The easiest way to have a customized login module is to buy third parties modules. However, it may not fully support other Authentication Providers such as LiveID and Facebook Login, worst it may not functioning well with other DNN modules. If you want to play safe, stick to the default DNN Authentication Providers.

1. If you customize your DNN Login / Registration ascx, it will affect ALL Portals! This problem has been fixed by using Pure CSS Customization and applying additional css class to the relevant ascx files.

2. This customization requires you to have a static login and registration page due to that we need to get the unique CSS ID to modify it. It will not work if you’re using ‘control’ login page (Default setting, something like ‘/ctl/login.aspx?returnurl=%2fdefault.aspx’).

3. Pop up login page requires you to put the login module in every page you wanted to have login. However, due to that login module will be changed once logon, the Jquery will be somehow malfunctioning and it is the thing I’m still working on.

Files to be modified for DotNetNuke Login and Registration Page.

Custom Providers

/DesktopModules/AuthenticationServices/DNN/Login.ascx
/DesktopModules/AuthenticationServices/DNN/App_LocalResources/Login.ascx.resx

DNN Authentication

/httpdocs/admin/Authentication/Login.ascx
/httpdocs/admin/Authentication/Logoff.ascx (Optional)
/httpdocs/admin/Authentication/App_LocalResources/Login.ascx.Portal-0.resx

User Registration

/httpdocs/admin/Users/manageusers.ascx
/httpdocs/admin/Users/User.ascx
/httpdocs/admin/Users/Password.ascx
/httpdocs/admin/Users/MemberServices.ascx
/httpdocs/admin/Users/Membership.ascx
/httpdocs/admin/Authentication/App_LocalResources/(respective files used)

CSS Files

You’re advised to create 3 CSS and put into respective portal’s folder but don’t mixed with any of the DNN Default CSS to avoid overwriting other pages CSS. This including default.css, portal.css, skin.css and module.css.

Since we will need to create a static login and registration page, you can embed the styles directly into the page header. For me, I created the following files:

custom-login.css
custom-Registration.css
custom-Login-IE-Fixed.css

and put under /Portals/0/SkinName/

Download/Create all the files from your server and put into respective folders to avoid confusion.

Step 1: Customizing DNN Custom Providers.

First, we start from DNN default login Provider:
/DesktopModules/AuthenticationServices/DNN/Login.ascx

It contains the following parts:

Username Textbox

<asp:textbox id="txtUsername" columns="9" width="150" cssclass="NormalTextBox" runat="server" />

Verification Control (Captcha)

<tr id="rowVerification1" runat="server" visible="false">
        <td class="SubHead" align="left"><dnn:label id="plVerification" controlname="txtVerification" runat="server" text="Verification Code:">dnn:label>td>
    tr>
    <tr id="rowVerification2" runat="server" visible="false">
        <td align="left"><asp:textbox id="txtVerification" columns="9" width="150" cssclass="NormalTextBox" runat="server" />td>
    tr>
    <tr id="trCaptcha1" runat="server">
        <td class="SubHead" align="left"><dnn:label id="plCaptcha" controlname="ctlCaptcha" runat="server" resourcekey="Captcha" />td>
    tr>
    <tr id="trCaptcha2" runat="server">
        <td align="left"><dnn:captchacontrol id="ctlCaptcha" captchawidth="130" captchaheight="40" cssclass="Normal" runat="server" errorstyle-cssclass="NormalRed" />td>
    tr>

Password Textbox

<asp:textbox id="txtPassword" columns="9" width="150" textmode="password" cssclass="NormalTextBox" runat="server" />

<asp:button id="cmdLogin" resourcekey="cmdLogin" cssclass="StandardButton" text="Login" runat="server" />

Labels Controls for each items above.

<dnn:label id="plUsername" controlname="txtUsername" runat="server" resourcekey="Username" />
<dnn:label id="plVerification" controlname="txtVerification" runat="server" text="Verification Code:">dnn:label>
<dnn:label id="plCaptcha" controlname="ctlCaptcha" runat="server" resourcekey="Captcha" />
<dnn:label id="plPassword" controlname="txtPassword" runat="server" resourcekey="Password" />

Now, remove all redundant codes inherited from Old DNN: Width=”150″ and Change the following attributes accordingly:

cssclass=”NormalTextBox” to cssclass=”LoginTextBox”
Add cssclass=”LoginTextLabel” and helptext=”" to all labels:
- Adding helptext=”" will removed the little Help Icon on the left side of the Label. It is totally optional.

<dnn:label id="plPassword" controlname="txtPassword" cssclass="LoginTextLabel" runat="server" resourcekey="Password" helptext="" />

Add the following link tag after ” <%@ Register TagPrefix=”dnn” ” to load CSS files

<link rel="stylesheet" type="text/css" href="/Portals/0/SkinName/custom-login.css" />