Browse DevX
Sign up for e-mail newsletters from DevX


Building an Internet Portal (for Free!) with DotNetNuke : Page 3

Save hours of valuable development time building corporate or departmental Web portals with DotNetNuke—a free, ASP.NET-based, open source, extendable, content management portal based on the IBuySpy Solution Kit.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Understanding Portal Architecture
Look closely at your newly created portal and you'll notice that the text in the Welcome to DotNetNuke section provides the default logins for the admin and host users. The difference between these two logins is related to DNN's support for multiple portals. DNN restricts the admin login to administering the current portal whereas DNN allows the host login to modify host and individual portal settings. Go ahead and logon as the admin user name and use admin as the password too. Remember to change the password for the admin and host accounts before you take your site to the Internet unless you want strangers to have the ability to administer your portal!

Figure 9: This is what the default page header section of a portal page displays.
Let's take a look at the sections of a portal page. The top section consists of the site logo, advertising banner graphic (our site doesn't have one), and the portal menu (see Figure 9). DNN refers to each item in the menu as a Tab. A tab is a Web page on your portal. Typically, you'll add many tabs to your portal. Across the top of the page, just below the menu bar, you will see the tab settings section (see Figure 10). In this section you can edit existing tabs, add new tabs, and add new sections called modules (more about them shortly). Click Edit Tab Settings on the Home page to display the Tabs Settings page (see Figure 11). A quick review of this page shows the name of the tab (Home), any icon associated with the tab, the parent tab (used for menu hierarchy), the visibility setting, the disabled setting, the width for the left and right panes (the sections currently containing the Links and Sponsors sections), which user groups have administrative rights to the tab, which user groups have access to see the tab, and a couple of mobile user settings that we're not going to be concerned with for now.

Figure 10: The Tab settings portion of a portal page offers the ability to edit or add a new tab.
Since you haven't made any changes, click Cancel to return to the Home tab. To add a new tab you simply click Add New Tab and complete the Tabs Setting page. We'll add a new tab after you learn about modules.

Figure 11: You can update the Home tab properties on the Tabs page.
Each tab consists of one or more modules. Modules contain content on a portal page. In DNN as you've seen so far, examples of modules include the Links, Welcome to DotNetNuke, and Sponsors sections.

In the center of the tab settings section you'll see a drop down containing all of the default DNN modules. The list includes announcements, contacts, discussions, events, FAQ's, feedback, links, news feeds, text/html, and even a weather module.

Figure 12. There are a number of operations to perform for a module including edit (pencil) and positioning (arrows)..
To add a module to the current page you select the type of module you want and click Add. Before you add a new module though, let's take a look at the existing modules on this page.

Each module has a number of icons across the top representing specific actions for the module (see Figure 12). Click the pencil to display the settings for the selected module. The arrows to the right of the pencil will change the location of the module with the tab. Go ahead and click on the pencil in the Links module to display the Module Settings page (see Figure 13).
Figure 13. Module settings determine how a module is displayed, interacted with, and where it is located.>.
The options on the Module Settings page include the title of the module, the icon associated with it, the visibility of the module's title, whether or not the module should appear on all pages, how you want DNN to display the module (maximized, minimized, or none), user group security settings that determine which users can see and potentially edit the content in the module, the outline container used for the module, and the ability to move the module to another page.

Module containers provide a way to customize the appearance of the module on the page.

You'll find over 50 free DNN 1.x module containers at ByDesign Web sites (www.bydesignwebsights.com/dnncontainers). If you're following along, please go to that site now. Once the page is done loading, select a container and click View Details to see what the container looks like. Go ahead and download the 3-D Round container (3dround.zip) and we'll take a look at its contents.

3dround.zip includes a container.txt file plus all of the .GIF files that make up the container. The container.txt file houses the HTML that DNN will use to display the container. Extract the zip file to the C:\DotNetNuke\Portals\{GUID HERE}\Containers directory (you'll need to create the Containers directory). You should end up with a 3dround directory containing contents.txt and an images directory under that containing the graphic for the container (see Figure 14).

Figure 14: A specific directory structure required to implement module containers.
Open the container.txt file with a text editor (Notepad will work), select all its contents, and copy them to the clipboard. Next, select and edit the module you want to work with. Click the Edit Container link and replace the existing HTML for the container with the contents of the container.txt file.

Set Default means that all containers built from now on will use this container. Set Global means that all module containers in the portal will be updated to this container.

Click Update to save your changes. If you encounter an error ("A potentially dangerous Request.Form value was detected from the client"), update your web.config file to reflect this change:

<pages enableViewStateMac="true" validateRequest="false" />

If all went well, your Links section should have an attractive border around it now (see Figure 15).

Figure 15: The Links module with the 3d Round container applied helps the module stand out from the page and gives it a professional appearance.
You might wonder where DNN stores the container HTML, as well as the other information about each module. If you take a look at the list of tables in the DotNetNuke database you will see a table named Modules. Each module in your portal is represented by a record in the Modules table. DNN stores the HTML for each module's container information in a field named Container. Another issue you might encounter if you work with numerous module containers is that some of the containers have more HTML text in them than the Container field table supports. The Container field defaults to nvarchar(1000) but you can increase this default to accommodate the larger container strings. If you do increase the size of the container field, make sure you update the @Container parameter in the UpdateModule stored procedure to reflect your change.

Before you start wondering how many module containers you can play with, let's get back to where we were. Click Cancel since you didn't make any changes to the module settings. Notice the arrows directly to the left of the word "Links." You'll use these arrows to move the module around within the page. Experiment a little by clicking on any of the module arrows and notice where things move to.

Thanks for your registration, follow us on our social networks to keep up-to-date