Here is the outline:

For this purpose we are going . . . → Read More: How to add Password Strength Meter to your registration page]]> In this article we'll show you how to add password strength meter to ASPRunnerPro/PHPRunner registration page. This meter is a handy way to show users how weak or strong their password is. This code requires ASPRunnerPro 7.x or PHPRunner 6.x in order to work properly. Download article code.

For this purpose we are going to use jQuery password strength plugin developed by Olivier Oechsle. Make sure to check plugin page if you are interested in internal workings or fancy to improve it.

See live demo

Step 1. Add CSS to Register page

The following CSS code needs to be added in Visual Editor to Register page right before </HEAD> tag. Make sure you switch to HTML mode before pasting the code.

<!--
input[type='password'] {
  width: 180px;
}
 
.passwordStrengthBar {
    background: white;
    border: 1px solid #777777;
    margin: 1px;
    width: 180px;
} 
 
.passwordStrengthBar div {
    height: 5px;
    width: 0;
} 
 
.passwordStrengthBar div.strong {
    background-color: #32cd32;
} 
 
.passwordStrengthBar div.medium {
    background-color: yellow;
} 
 
.passwordStrengthBar div.weak {
    background-color: orange;
} 
 
.passwordStrengthBar div.useless {
    background-color: red;
}
-->

Step 2. Add Javascript code to Register page: Javascript OnLoad event

/* Intelligent Web NameSpace */
var IW = IW || {}; 
 
/**
 * Password validator logic
 */
(function(IW) { 
 
    var secondsInADay = 86400; 
 
    function PasswordValidator() {
    } 
 
    /**
     * How long a password can be expected to last
     */
    PasswordValidator.prototype.passwordLifeTimeInDays = 365; 
 
    /**
     * An estimate of how many attempts could be made per second to guess a password
     */
    PasswordValidator.prototype.passwordAttemptsPerSecond = 500; 
 
    /**
     * An array of regular expressions to match against the password. Each is associated
     * with the number of unique characters that each expression can match.
     * @param password
     */
    PasswordValidator.prototype.expressions = [
        {
            regex : /[A-Z]+/,
            uniqueChars : 26
        },
        {
            regex : /[a-z]+/,
            uniqueChars : 26
        },
        {
            regex : /[0-9]+/,
            uniqueChars : 10
        },
        {
            regex : /[!\?.;,\\@$£#*()%~<>{}\[\]]+/,
            uniqueChars : 17
        }
    ]; 
 
    /**
     * Checks the supplied password
     * @param {String} password
     * @return The predicted lifetime of the password, as a percentage of the defined password lifetime.
     */
    PasswordValidator.prototype.checkPassword = function(password) { 
 
        var
                expressions = this.expressions,
                i,
                l = expressions.length,
                expression,
                possibilitiesPerLetterInPassword = 0; 
 
        for (i = 0; i < l; i++) { 
 
            expression = expressions[i]; 
 
            if (expression.regex.exec(password)) {
                possibilitiesPerLetterInPassword += expression.uniqueChars;
            } 
 
        } 
 
   var
      totalCombinations = Math.pow(possibilitiesPerLetterInPassword, password.length),
   // how long, on average, it would take to crack this (@ 200 attempts per second)
       crackTime = ((totalCombinations / this.passwordAttemptsPerSecond) / 2) / secondsInADay,
   // how close is the time to the projected time?
       percentage = crackTime / this.passwordLifeTimeInDays; 
 
        return Math.min(Math.max(password.length * 5, percentage * 100), 100); 
 
    }; 
 
    IW.PasswordValidator = new PasswordValidator(); 
 
})(IW); 
 
/**
 * jQuery plugin which allows you to add password validation to any
 * form element.
 */
(function(IW, jQuery) { 
 
    function updatePassword() { 
 
        var
                percentage = IW.PasswordValidator.checkPassword(this.val()),
                progressBar = this.parent().find(".passwordStrengthBar div"); 
 
        progressBar
                .removeClass("strong medium weak useless")
                .stop()
                .animate({"width": percentage + "%"}); 
 
        if (percentage > 90) {
            progressBar.addClass("strong");
        } else if (percentage > 50) {
            progressBar.addClass("medium")
        } else if (percentage > 10) {
            progressBar.addClass("weak");
        } else {
            progressBar.addClass("useless");
        }
    } 
 
    jQuery.fn.passwordValidate = function() { 
 
        this
                .bind('keyup', jQuery.proxy(updatePassword, this))
                .after("
<div class="passwordStrengthBar"></div>
 
"); 
 
        updatePassword.apply(this); 
 
        return this; // for chaining 
 
    } 
 
})(IW, jQuery); 
 
$("span[class='runner-nowrap']").each(function() {
   var $this = $(this);
   var t = $this.html();
   $this.html(t.replace(' ',''));
});
$("input[type='password']").next().remove();
jQuery("input[id='value_Password_1']").passwordValidate();

This code assumes that your password field name is Password. Your password field name is different make sure to amend the last line of Javascript code. I.e. if password field name is pass here is how your code should look:

jQuery("input[id='value_pass_1']").passwordValidate();

Additional considerations:

• You may want to add the same code to Change password page.
• If you decide to modify the plugin consider adding wording 'weak', 'strong' etc to the meter. You can also make sure password is not equals to username

Before we start I encourage you to check Survey template live demo. Register, then login and add a new Survey. Add questions, answers and answer options where necessary. Once done with setup activate the survey. Now you can take survey, view responses etc.

Purchase Survey . . . → Read More: Survey template]]> This article explains the inner workings of Survey template.

Before we start I encourage you to check Survey template live demo. Register, then login and add a new Survey. Add questions, answers and answer options where necessary. Once done with setup activate the survey. Now you can take survey, view responses etc.

Purchase Survey template for $50

Application setup

Once you create a project using Survey template you can simply build your project and start using it. Security model is simple. There is one user by default (admin/admin) with full access to all data. There is also Guest account enabled with access to Response view Add page so guest users are able to take surveys without logging in.

There is also Registration page enabled. Users can register and create their own surveys. This option is mostly for demo purposes and you may want to turn it off.

Managing surveys

Once you are logged in create a new survey and add questions. Questions are grouped into groups. If you don't need grouping simply add all question to default group (Group 1).

List of surveys is your start screen. You can add or delete surveys here, make them active or inactive, take surveys and view responses.

Each survey is created as inactive. You are free to modify survey structure, add or delete groups and questions. Once you done customizing your survey activate it. Survey activation creates a physical table in the database that will store all responses. You should only activate a survey when you are absolutely certain that your survey setup is finished and will not need changing.

Once a survey is activated you can no longer:

• Add or delete groups
• Add or delete questions
• Add or delete answers

However you can still:

• Edit your questions code/title/text and advanced options
• Edit your group names or descriptions
• Add, remove or edit answer options
• Change survey name or description

Once data has been entered into this survey, if you want to add or remove groups or questions, you will need to deactivate this survey, which will move all data that has already been entered into a separate archived table.

Typical survey table name is sv_survey_{ID} where {ID} is survey id from sv_surveys table. When survey is deactivated table with responses renamed to something like sv_survey_old_1_20120307233417 (20120307233417 is the timestamp).

List of questions

This is you main single survey management screen. You can add/edit/delete questions, answers and answer options here, reorder groups and questions.

Question types

Survey template allows you to choose from the following question types

List

List (5 point choice)

List (10 point choice)

Dropdown box

Date

Long text

Multiple choice

Number

Multiple choice with comments

Radio-buttons

Simple text, no question

Text

File upload

Checkbox

Visual appearance and additional files

To tweak visual appearance of your surveys modify the following files (can be found in project directory):
business\Survey\source\templates\survey.htm - 'take a survey' template
business\Survey\source\templates\survey_view.htm - 'view single response' template
business\Survey\source\templates\activate_survey.htm - message displayed in popup before survey activation
business\Survey\source\templates\deactivate_survey.htm - message displayed in popup before survey deactivation
business\Survey\source\survey.css - survey style sheet

HTML templates are similar to standard PHPRunner/ASPRunnerPro templates and use the same template language.

Here is the sample of survey.htm template:

 
<form id="surveyform" action="response_add.php{$page}" method="post">
<input name="a" type="hidden" value="added" />
<input id="locat" name="locat" type="hidden" />
<input id="error" name="error" type="hidden" />
<input name="hash" type="hidden" value="{$hash}" />
<input id="format_date" name="format_date" type="hidden" value="{$format_date}" />
<div class="showtest">
{BEGIN group}
<div class="question">
<div class="qnumdiv">
 
{$group_name}
</div>
 
{BEGIN description_block}
 
{$group_description}
 
{END description_block}
{$questions}
</div>
 
{END group}
<div class="buttons">
{BEGIN prev_button}
<input class="button" onclick="validation('prev');" type="button" value="Prev" />
{END prev_button}
{BEGIN finish_button}
<input class="button" onclick="validation('next');" type="button" value="{$buttonname}" />
{END finish_button}</div>
</div>
 
 </form>
 

Further enhancements

You may want to add the following functionality:

1. Charts or reports to visualize the percentage of answered questions by survey or by a separate question.

2. You can make users register before they take their test. Keep registration page, turn off Guest access and make sure Default group has access to the Add page of the Response view.

3. Post your own suggestions in comments.

#time-remaining a{ text-decoration: none; } #guarantee { font-size: 90% } div#promobox2 { clear: both; padding-bottom: . . . → Read More: Black Friday and Cyber Monday deals]]>

To take advantage of this offer place an order for any eligible product and contact support team to claim your gift.

We have released PHPRunner 6 and ASPRunnerPro 7. You can download it at http://xlinesoft.com/download

Watch What's new in ASPRunnerPro 7/PHPRunner 6 video.

Read the full article about all new features in this update.

How do I get it?

This update is free for all PHPRunner/ASPRunnerPro customers who purchased PHPRunner/ASPRunnerPro less than one year . . . → Read More: PHPRunner 6/ASPRunnerPro 7 released]]> Finally!

We have released PHPRunner 6 and ASPRunnerPro 7.
You can download it at http://xlinesoft.com/download

Watch What's new in ASPRunnerPro 7/PHPRunner 6 video.

Read the full article about all new features in this update.

How do I get it?

This update is free for all PHPRunner/ASPRunnerPro customers who purchased PHPRunner/ASPRunnerPro less than one year ago. If you haven't yet received your key contact support sending your order number.

If you purchased ASPRunnerPro or PHPRunner more than one year ago you can upgrade to the latest version for $99
PHPRunner upgrade
ASPRunnerPro upgrade

If you are not a customer yet here are 'Buy now' links:
PHPRunner purchase
ASPRunnerPro purchase

Download other updates

We have also updated charts (HTML5/iPad/iPhone devices support), Mobile template, Templates pack and Web report/chart builder which is a part of Enterprise Edition. Find all download links below. Note that these links are password protected. You need to use the same username/password that came with your original purchase. If you forgot your password contact support at http://support.xlinesoft.com supplying your order number for those addons.

Charts:
http://asprunner.com/files/charts/anychart_asp7php6.zip

Mobile template (more info on Mobile template):
http://asprunner.com/files/mobile/mobile.zip
Added 'All fields' search and fixed a few visual quirks

Templates pack (more info on Templates pack)
ASP: http://www.asprunner.com/files/shopcart/templates70.asp.zip
PHP: http://www.asprunner.com/files/shopcart/templates60.php.zip

Enterprise Edition (more info on Enterprise Edition)
PHP: http://www.asprunner.com/files/webreports/webreports60.php.zip
ASP: http://www.asprunner.com/files/webreports/webreports70.asp.zip

PHPRunner PDF plugin updated. More info.

ReportsMaestro. Updated charting component to support iPhone/iPad/iPod Touch.
ASP: http://www.asprunner.com/files/stdreports/std_webreports.asp.zip
PHP: http://www.asprunner.com/files/stdreports/std_webreports.php.zip

Enjoy!

All images are clickable and point to live previews.

1. ORFEAS Author: Theodosia Karagianni

2. Mardi Gras Author Henry Pittman

3. QUALISYS . . . → Read More: Theme Design Contest results]]> I would like to thank everyone participated in this contest.

All images are clickable and point to live previews.

1. ORFEAS
Author: Theodosia Karagianni

2. Mardi Gras
Author Henry Pittman

3. QUALISYS
Author: Theodosia Karagianni

4. Style: FinancialHigh, Color scheme: BlueWave
Author: Sandi Jerome

5. Style: MoneyHigh, Color scheme: GreenWave
Author: Sandi Jerome

Prizes go to Henry Pittman, Theodosia Karagianni and Sandi Jerome. We'll include the majority of those themes in the next PHPRunner/ASPRunnerPro.

Feel free to send us your styles and color schemes. If your theme gets included in PHPRunner/ASPRunnerPro we send $100 your way.

Contest rules

To participate in the contents simply create a unique theme using ASPRunner or PHPRunner. The contest will start on September 15th, 2011 and . . . → Read More: Theme Design Contest]]> Win cash prizes creating new application themes

The contestants are asked to submit themes created in PHPRunner/ASPRunner Style Editor.

Contest rules

To participate in the contents simply create a unique theme using ASPRunner or PHPRunner. The contest will start on September 15th, 2011 and run until September 23th, 2011. Our judging panel will determine the best themes. The winners will be announced on the website and via email newsletter on September 26th, 2011.

We are looking for creativity and originality as well as themes that add color and overall appeal to generated web applications.

Participation is free. No purchase is necessary. However, each participant can submit no more than two entries.

All submissions will become the property of xlinesoft.com. We reserve the right to include any of the submitted themes in the ASPRunnerPro/PHPRunner software, RunnerExchange marketplace or other products.

Main prizes

10 best submissions will receive $100 each. If you send two entries and both get selected - your prize will be $200.

How do I create a theme and submit my work?

1. Download the latest beta of ASPRunnerPro 7 or PHPRunner 6 and install it. The current build is 9157.

2. Create a new project, add several tables, create a hierarchical menu, enable login page. The idea is to create a project that covers the most design areas to help you build a complete theme.

3. Proceed to the Style Editor screen, choose a Style and Color Scheme as a starting point and click ‘Customize’. Change colors, fonts, borders etc. until your theme looks exactly the way you want it.

4. Make sure your theme looks good with all layouts i.e. make sure you setup both horizontal and vertical menus and submenus. We also recommend building the application and running it in the browser.

5. Style Editor creates a copy of the style and color files in your project folder. For example, if you started customizing “Fancy” style and “Orange” color scheme the Style Editor creates files Fancy1.style and colors\Orange1.color under project folder.

If your project name is Project1 the files you are looking for are: C:\Users\Documents\PHPRunnerProjects\Project1\styles\Fancy1.style and C:\Users\Documents\PHPRunnerProjects\Project1\styles\colors\Orange1.style

Note: on Windows XP folder with projects is typically located under My documents\PHPRunnerProjects

6. Proceed to our helpdesk and send us those .color and .style files. You may want to rename style and color files giving them more meaningful names.

Where do I draw inspiration from?

There are multiple websites such as www.oswd.org and www.freewebsitetemplates.com offering free html templates with a large number of interesting and visually appealing page styles and color schemes. That should give you a great starting point.

What is a theme?

Theme is a combination of the page style (.style file) and color scheme (.color file) created in ASPRunner/PHPRunner Style Editor.

#time-remaining a{ text-decoration: none; } #guarantee { font-size: 90% } div#promobox2 { clear: both; padding-bottom: . . . → Read More: 48 hours PHPRunner/ASPRunner sale – huge savings]]>

Special offer: Mobile template, Quiz template and ReportsMaestro bundle

Time Remaining

Normally $149

$50

100% money back guarantee! For any reason. Anytime.

Quiz template includes both PHP (MySQL) and ASP (MS Access) versions.

ReportsMaestro is a Web-based report and chart builder that supports all major databases.

Mobile template allows you to build mobile version of your web application (requires PHPRunner 6 or ASPRunnerPro 7).

Mobile list and edit pages on Android phone

You can also purchase any of those addons separately:

Quiz template for $10

ReportsMaestro for $25

Mobile template for $25

Purchase PHPRunner (you get both v5.3 and v6 keys) or ASPRunnerPro (you get both v6.3 and v7 keys) and get all three add-ons together for FREE. To take advantage of this offer place an order for PHPRunner or ASPRunnerPro and contact support team to claim your gift.

As you remember this new version features Style Editor, Mobile Template and easily customizable layouts. I'd love to present a few examples of interfaces . . . → Read More: PHPRunner 6/ASPRunnerPro 7 beta is almost there]]> For all those who are patiently waiting for a new version to be released - we will have PHPRunner 6/ASPRunnerPro 7 beta available July 12th-15th. We apologize for prolonged wait.

As you remember this new version features Style Editor, Mobile Template and easily customizable layouts. I'd love to present a few examples of interfaces customized in Style Editor (all images are clickable).

Edit page in style editor

Note buttons and panels shape, gradient backgrounds and different border types.

List page with vertical menu

Nice looking Edit page

List page with horizontal menu

This page looks nice however we want to create a new layout rearranging a few items on the page.Page structure is defined in list.ly file.

beginblock top
	begincontainer horizontal  style=2 1
 		brick masterinfo
	endcontainer	

    begincontainer horizontal  style=2 2
        brick left toplinks
        brick right loggedas
    endcontainer
	begincontainer horizontal style=hmenu hmenu
		brick hmenu
	endcontainer
endblock 

beginblock left
    begincontainer vertical style=3 4
		brick color2 vsearch1
        brick color1 vsearch2
        brick color2 vdetails_found
        brick color1 vpage_of
        brick color1 vrecsperpage
		brick searchpanel
   endcontainer
endblock 

beginblock center
     begincontainer horizontal style=3 5
        brick left recordcontrols
    endcontainer
    begincontainer horizontal style=2 6
       brick center message
    endcontainer
    begincontainer grid style=grid grid
        brick grid
    endcontainer
   begincontainer horizontal style=2 8
        brick center pagination
    endcontainer
endblock

If you want to read more about block, containers and bricks - check this article.

Lets say we need to move search panel and menu to the right side of the page, move search box to the top horizontal panel and display 'Details found' in its own container. For this purpose we create a copy of list.ly file that defines the list page structure the following way, copying and pasting containers definitions.

beginblock top
	begincontainer horizontal  style=2 1
 		brick masterinfo
	endcontainer	

    begincontainer horizontal  style=2 2
		brick left search
        brick left toplinks
        brick right loggedas
    endcontainer
endblock 

beginblock right
    begincontainer vertical style=3 3
		brick searchpanel
   endcontainer
   	begincontainer vertical style=4 4
		brick vmenu
	endcontainer
endblock 

beginblock center
    begincontainer horizontal style=3 5
        brick left recordcontrols
    endcontainer
	begincontainer horizontal style=3 6
	    brick color1 details_found
        brick color1 page_of
        brick color1 recsperpage
	endcontainer
    begincontainer horizontal style=2 7
       brick center message
    endcontainer
    begincontainer grid style=grid grid
        brick grid
    endcontainer
   begincontainer horizontal style=2 9
        brick center pagination
    endcontainer
endblock

And here is how new list page looks