Personalizing Mobile Web Applications

Sponsored by

Become a Sponsor

Latest Jobs

dot net developer

MCA

.NET Developer Needed

.Net Developer

Senior .Net Software Engineer

Senior Software Engineer

Senior WPF Developer

Software Developer

Application Developer

More ...

Latest Interview Questions

What is lazy loading?

What is Replication in MS SQL. ? Type of Replication.?

What are Value types and Reference types ?

What is boxing and unboxing ?

What are different types that a variable can be defined and their scopes ?

What is Strong name ?

Different types of authentication modes in .NET Framework ?

What is an Assembly ?

What is the difference between Metadata and Menifest ?

What is delay signing?

More ...

Description.

In this example, we will personalize the settings for a mobile web application based on the user logged into the site. Personalization is a very useful approach to provide a satisfying user experience. Particularly in Mobile applications where the small size of the device is often a hindrance in data input, the user can be more comfortable when the amount of data entry is reduced when some commonly used settings are persisted in a secure manner.

Our sample consists of a Stock Quote Mobile Applications. Users will be able to access the live stock quotes for symbols selected by them. The user can save his selections of stock quotes so that when the user logs on to the web site, he/she is directly displayed the stock quotes of his/her interest. We will use Forms Authentication to authenticate and identify the user. The user identification information and the personalized symbol selections are stored in an MS Access database for this sample. You can easily use another datastore such as SQL Server or XML as per your requirements.

Details.

The Database.

We will use an MS Access database to store our user values and their stock selections.

Our database db1.mdb has two tables-one for storing the user identification information and the other for storing the user's preferred stock symbols. The design of the tables is shown in the structures below.

TblUser

UserID	Text
Pwd	Text

The tblUser contains fields for the username and the password to authenticate access to the mobile web site.

Sample Data

User ID	Password

TblStock

User ID	Text
StockSymbols	Text

This table stores the users' preferred stock symbols in comma-separated format in the StockSymbols field for each user.

Sample Data

User ID	Stock Symbols
User1	MSFT
User2	CSCO,NT,XRX

For production systems, you will need to add security to protect the passwords from security attacks and hackers.

Create the Mobile Web Application.

We will create a Visual C# Mobile Web Application. Complete Code Listings are provided at the bottom of the article for users not on Visual Studio.Net.

Security Settings.

Make the following changes in the web.config file to configure Forms Authentication for the Mobile Application.

<authentication mode="Forms" >
<forms loginUrl="login.aspx" name=".ASPXCOOKIEAUTH" path="/">
</forms>
</authentication>
<authorization>
<deny users="?" />
</authorization>

Web.Config authentication and authorization sections.

The above changes in the configuration file set the authentication mode to Forms and specify that unauthorized users will be denied access to the mobile web site.

We will now create the Login.aspx web page which was specified in the web.config settings as the login URL. The web form accepts a user name and password and when the Login button is clicked, the form authenticates the user against the database. If the user requests for a page without authentication, he/she will be displayed the login page. Once the user is authenticated, he/she will be redirected to the originally requested page.

Figure : Layout for login.aspx.

Drag and drop an OleDbConnection and create a connection pointing to the Access database. Drag and drop a command object and set the Connection property of the command object to the Connection object just created. Set the CommandText property to the SQL statement shown below.

SELECT COUNT(UserID) AS Expr1 FROM tblUser WHERE (Pwd = ?) AND (UserID = ?)

This command object will be used to validate the user in our sample.

Private Sub btnLogin_Click(ByVal sender As Object, ByVal e As System.EventArgs)
oleDbCommand1.Parameters.Add("Pwd", OleDbType.VarChar, 50)
oleDbCommand1.Parameters("Pwd").Value = txtPwd.Text
oleDbCommand1.Parameters.Add("Pwd", OleDbType.VarChar, 50)oleDbCommand1.Parameters("UserId").Value = txtUser.Text
oleDbConnection1.Open()
Dim nCount As Integer = CInt(oleDbCommand1.ExecuteScalar())
oleDbConnection1.Close()
If nCount = 1 Then
MobileFormsAuthentication.RedirectFromLoginPage(TextBox1.Text, True)
End If
End Sub 'btnLogin_Click

Code Snippet : Event handler for the Click event of the Login Button.

Mobile Web Page.

Our mobile application will consists of only one mobile forms page. The authenticated user's name and the stock symbols specified by the user are displayed. Live Stock Quotes for the selection are displayed in a tabular layout. The user can modify his stock preference settings.

Figure : Layout for default.aspx.

Default.aspx Layout Contents

Label-Displays User Name.

TextBox-Displays the User's stock preference settings.

Button-Update Stock Symbols.

Button-Refresh Quotes.

ObjectList-Displays the stock quotes for the selected symbols.

Identify the user.

Context.User.Identity.Name returns the identity of the authenticated user. We display the user name on the web form.

Display settings stored for the user.

We query the database for the preferences saved by this user. The preferences are stored in comma-separated format and displayed to the user. Drag and drop an OleDbConnection and an OleDbCommand from the Data ToolBox. Set the Connection object to point to the Access database created earlier and the OleDbCommand should have its Connection property set to the Connection. Set the CommandText of the OleDbCommand to the SQL shown below.

SELECT StockSymbols, UserId FROM tblStock WHERE (UserId = ?)

In the Mobile Form's Load event, we will add code to display the stock symbols in the TextBox and populate the ObjectList with the values of the Symbols and the respective Stock Quotes.

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
If Not IsPostBack Then
UserName = Context.User.Identity.Name
Label1.Text = UserName
TextBox1.Text = GetSymbolsForUser()
FillQuotes(TextBox1.Text)
End If
End Sub 'Page_Load

Code Snippet : Display the user's preferences and the values of the stock quotes.

Private Function GetSymbolsForUser() As String
oleDbCommand1.Parameters(0).Value = Context.User.Identity.Name
oleDbConnection1.Open()
Dim strSymbols As String = CStr(oleDbCommand1.ExecuteScalar())
oleDbConnection1.Close()
Return strSymbols
End Function 'GetSymbolsForUser

Code Snippet : Fetch the user's preferences from the database.

Display stock quotes for symbols specified for the user.

Private Sub FillQuotes(ByVal strSymbols As String)
Dim req As HttpWebRequest
Dim res As HttpWebResponse
Dim sr As StreamReader
Dim strResult As String
Dim temp() As String
Dim temp1() As String
Dim strcurindex As String
Dim fullpath As String
Dim ds As New DataSet
ds.Tables.Add("tblStk")
Dim SymbolColumn As New DataColumn
SymbolColumn.DataType = System.Type.GetType("System.String")
SymbolColumn.AllowDBNull = True
SymbolColumn.Caption = "Symbol"
SymbolColumn.ColumnName = "StkSymbol"
SymbolColumn.DefaultValue = "Stock"
' Add the column to the table.
ds.Tables("tblStk").Columns.Add(SymbolColumn)
'get stock quote for each row
Dim PriceColumn As New DataColumn
PriceColumn.DataType = System.Type.GetType("System.Decimal")
PriceColumn.AllowDBNull = True
PriceColumn.Caption = "Price"
PriceColumn.ColumnName = "StkPrice"
PriceColumn.DefaultValue = 0
' Add the column to the table.
ds.Tables("tblStk").Columns.Add(PriceColumn)
temp = strSymbols.Split(separator)
If temp.Length > 0 Then
Dim i As Integer
For i = 0 To temp.Length - 1
fullpath = "http://quote.yahoo.com/d/quotes.csv?s=" + temp(i) + "&f=sl1d1t1c1ohgvj1pp2owern&e=.csv"
Try
req = CType(WebRequest.Create(fullpath), HttpWebRequest)
res = CType(req.GetResponse(), HttpWebResponse)
sr = New StreamReader(res.GetResponseStream(), Encoding.ASCII)
strResult = sr.ReadLine()
sr.Close()
temp1 = strResult.Split(separator)
If temp1.Length > 1 Then
'only the relevant portion.
strcurindex = temp1(1)
Dim myRow As DataRow = ds.Tables("tblStk").NewRow()
myRow(0) = temp(i)
myRow(1) = Convert.ToDecimal(strcurindex)
ds.Tables("tblStk").Rows.Add(myRow)
End If
Catch
End Try
Next i
ObjectList1.DataSource = ds.Tables("tblStk").DefaultView
ObjectList1.DataBind()
ObjectList1.TableFields = "StkSymbol;StkPrice"
End If
End Sub 'FillQuotes

Code Snippet : For each stock symbol specified by the user, fetch the stock quote and populate a dataset containing a table which contains the stock symbol and the stock price.

The stock symbol and quote values are added in the dataset and displayed to the user in tabular format by binding with the dataset.

Refresh Quotes.

We re-use the same function that's used in Page_Load to refresh the stock quotes.

Private Sub Command3_Click(ByVal sender As Object, ByVal e As System.EventArgs)
FillQuotes(GetSymbolsForUser())
End Sub 'Command3_Click

Code Snippet : Refresh the stock quotes.

Update the User's stock selections.

The user can change his/her preference settings by modifying the comma-separated values in the TextBox. The new preferences are stored back in the database and new quotes are displayed for the modified preferences.

Add an OleDbCommand and set the Connection property of the Command object. Set the CommandText as shown below. This SQL statement is responsible for updating the Stock Preferences of the user.

UPDATE tblStock SET StockSymbols = ? WHERE (UserId = ?)

The following code updates the user's preferred stock symbols in the database and reloads the page with quotes from the new symbols. (The query assumes that the administrator will have added an empty row in the tblStk table for each new user).

Private Sub Command2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
oleDbCommand2.Parameters(0).Value = TextBox1.Text
oleDbCommand2.Parameters(1).Value = Context.User.Identity.Name
oleDbConnection1.Open()
oleDbCommand2.ExecuteNonQuery()
oleDbConnection1.Close()
FillQuotes(GetSymbolsForUser())
End Sub 'Command2_Click

Signout.

The Logout button allows the user to signout. The user is redirected to the Login page after the signout.

Private Sub Command1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
MobileFormsAuthentication.SignOut()
RedirectToMobilePage("login.aspx")
End Sub 'Command1_Click

Application Snapshots.

When the user browses to the default.aspx mobile web page, there is no authentication initially and the user is displayed the login page as shown below.

Figure : Login Page

Figure: User is displayed stock quotes for his/her preferred stock symbols automatically on logging in. User can update the values of the preferred stock symbols and these settings will be persisted.

Figure : Stock Quote Details.

Complete Code Listing.

Note that the code listing provided here is slightly modified compared to the code snippets provided in the detailed directions. The following code snippet uses the single file code model which is more convenient when developing outside Visual Studio.Net whereas the step by step instructions in the article assume the use of Visual Studio.Net. When running the code, modify the database connection string to point to the correct directory where your database is stored.

Code Listing : Default.aspx.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" Debug="true" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.Text" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Web.Mobile" %>
<script runat="server" language="VB">
Public str As [String]
Public strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\inetpub\wwwroot\Prsnlmob\db1.mdb"
Private separator As Char() = ","c
Protected oleDbConnection1 As OleDbConnection
Protected oleDbCommand1 As OleDbCommand
Protected oleDbCommand2 As OleDbCommand
Private strUserName As String
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
oleDbConnection1 = New OleDbConnection(strConn)
oleDbCommand1 = New OleDbCommand
oleDbCommand2 = New OleDbCommand
If Not IsPostBack Then
strUserName = Context.User.Identity.Name
Label1.Text = strUserName
TextBox1.Text = GetSymbolsForUser()
FillQuotes(TextBox1.Text)
End If
End Sub 'Page_Load
Private Sub Command1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'Signout
MobileFormsAuthentication.SignOut()
RedirectToMobilePage("login.aspx")
End Sub 'Command1_Click
Private Sub FillQuotes(ByVal strSymbols As String)
'this function will fetch stock quotes for each stock symbol specified by the user and populate the data in a datatable. The data is finally bound to an ObjectList.
Dim req As HttpWebRequest
Dim res As HttpWebResponse
Dim sr As StreamReader
Dim strResult As String
Dim temp() As String
Dim temp1() As String
Dim strcurindex As String
Dim fullpath As String
Dim ds As New DataSet
ds.Tables.Add("tblStk")
Dim SymbolColumn As New DataColumn
SymbolColumn.DataType = System.Type.GetType("System.String")
SymbolColumn.AllowDBNull = True
SymbolColumn.Caption = "Symbol"
SymbolColumn.ColumnName = "StkSymbol"
SymbolColumn.DefaultValue = "MSFT"
' Add the column to the table.
ds.Tables("tblStk").Columns.Add(SymbolColumn)
'get stock quote for each row
Dim PriceColumn As New DataColumn
PriceColumn.DataType = System.Type.GetType("System.Decimal")
PriceColumn.AllowDBNull = True
PriceColumn.Caption = "Price"
PriceColumn.ColumnName = "StkPrice"
PriceColumn.DefaultValue = 0
' Add the column to the table.
ds.Tables("tblStk").Columns.Add(PriceColumn)
temp = strSymbols.Split(separator)
If temp.Length > 0 Then
Dim i As Integer
For i = 0 To temp.Length - 1
fullpath = "http://quote.yahoo.com/d/quotes.csv?s=" + temp(i) + "&f=sl1d1t1c1ohgvj1pp2owern&e=.csv"
'
Try
req = CType(WebRequest.Create(fullpath), HttpWebRequest)
res = CType(req.GetResponse(), HttpWebResponse)
sr = New StreamReader(res.GetResponseStream(), Encoding.ASCII)
strResult = sr.ReadLine()
sr.Close()
temp1 = strResult.Split(separator)
If temp1.Length > 1 Then
'only the relevant portion .
strcurindex = temp1(1)
Dim myRow As DataRow = ds.Tables("tblStk").NewRow()
myRow(0) = temp(i)
myRow(1) = Convert.ToDecimal(strcurindex)
ds.Tables("tblStk").Rows.Add(myRow)
End If
Catch
End Try
Next i
ObjectList1.DataSource = ds.Tables("tblStk").DefaultView
ObjectList1.DataBind()
ObjectList1.TableFields = "StkSymbol;StkPrice"
End If
End Sub 'FillQuotes
Private Sub Command2_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'the following code will update the Stock Symbol preferences as specified by the
user.
oleDbCommand2.Connection = oleDbConnection1
oleDbCommand2.CommandText = "UPDATE tblStock SET StockSymbols = ? WHERE
UserId = ?)"
oleDbCommand2.Parameters.Add(New System.Data.OleDb.OleDbParameter("StockSymbols", System.Data.OleDb.OleDbType.VarWChar, 255, "StockSymbols"))
oleDbCommand2.Parameters.Add(New System.Data.OleDb.OleDbParameter("Original_UserId", System.Data.OleDb.OleDbType.VarWChar, 50, System.Data.ParameterDirection.Input, False, CType(0, System.Byte), CType(0, System.Byte), "UserId", System.Data.DataRowVersion.Original, Nothing))
oleDbCommand2.Parameters(0).Value = TextBox1.Text
oleDbCommand2.Parameters(1).Value = Context.User.Identity.Name
oleDbConnection1.Open()
oleDbCommand2.ExecuteNonQuery()
oleDbConnection1.Close()
FillQuotes(GetSymbolsForUser())
End Sub 'Command2_Click
Private Sub Command3_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'Refresh the stock quotes
FillQuotes(GetSymbolsForUser())
End Sub 'Command3_Click
Private Function GetSymbolsForUser() As String
'Fetch the preferences specified by the user from the database
oleDbCommand1.Connection = oleDbConnection1
oleDbCommand1.CommandText = "SELECT StockSymbols, UserId FROM tblStock WHERE (UserId ?)"
Me.oleDbCommand1.Parameters.Add(New System.Data.OleDb.OleDbParameter("UserId", System.Data.OleDb.OleDbType.VarWChar, 50, "UserId"))
oleDbCommand1.Parameters(0).Value = Context.User.Identity.Name
oleDbConnection1.Open()
Dim strSymbols As String = CStr(oleDbCommand1.ExecuteScalar())
oleDbConnection1.Close()
Return strSymbols
End Function 'GetSymbolsForUser
</script>
<mobile:Form id = "Form1" runat="server">
<mobile:Label id="Label1" runat="server">Label</mobile:Label>
<mobile:TextBox id="TextBox1" runat="server"></mobile:TextBox>
<mobile:Command id="Command2" runat="server"
onClick="Command2_Click">Update Stock Symbols</mobile:Command>
<mobile:Command id="Command3" runat="server" onClick="Command3_Click">Refresh Quotes</mobile:Command>
<mobile:ObjectList id="ObjectList1" runat="server" LabelStyle-StyleReference="title" CommandStyle-StyleReference="subcommand"></mobile:ObjectList>
<mobile:Command id="Command1" runat="server" OnClick="Command1_Click">Logout</mobile:Command>
</mobile:Form>

Code Listing : Login.aspx.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" Debug="true" %>
<%@ Assembly Name="System.Web" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data"%>
<%@ Import Namespace="System.Data.OleDb" %>
<%@ Import Namespace="System.web" %>
<%@ Import Namespace="System.web.Security" %>
<%@ Import Namespace="System.Web.Mobile" %>
<script runat="server" language="VB">
Public str As [String]
Public strConn As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\ inetpub\wwwroot\Prsnl\db1.mdb"
Protected oleDbCommand1 As OleDbCommand
Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
oleDbConnection1 = New OleDbConnection(strConn)
oleDbCommand1 = New OleDbCommand
End Sub 'Page_Load
Private Sub Command1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'login using the credentials specified by the user
oleDbCommand1.Connection = oleDbConnection1
oleDbCommand1.CommandText = "SELECT COUNT(UserID) AS Expr1 FROM tblUser WHERE (Pwd = ?) AND (UserID = ?)"
oleDbCommand1.Parameters.Add("UserId", OleDbType.VarChar, 50)
oleDbCommand1.Parameters(0).Value = txtPwd.Text
oleDbCommand1.Parameters.Add("UserId", OleDbType.VarChar, 50)
oleDbCommand1.Parameters(1).Value = txtUser.Text
oleDbConnection1.Open()
Dim nCount As Integer = CInt(oleDbCommand1.ExecuteScalar())
oleDbConnection1.Close()
If nCount >= 1 Then
MobileFormsAuthentication.RedirectFromLoginPage(txtUser.Text, True)
End If
End Sub 'Command1_Click
</script>
<mobile:Form id = "Form1" runat="server">
<mobile:Label id="Label1" runat="server">ID:</mobile:Label>
<mobile:TextBox id="txtUser" runat="server"></mobile:TextBox>
<mobile:Label id="Label2" runat="server">Password:</mobile:Label>
<mobile:TextBox id="txtPwd" runat="server" Password="True"></mobile:TextBox>
<mobile:Command id="cmdLogin" runat="server" onClick="Command1_Click">Login</mobile:Command>
</mobile:Form>

XML Listing-web.config.

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<system.web>
<compilation defaultLanguage="VB" debug="true"/>
<customErrors mode="Off" />
<authentication mode="Forms" >
<forms loginUrl="login.aspx" name=".ASPXCOOKIEAUTH" path="/">
</forms>
</authentication>
<authorization>
<deny users="?" />
</authorization>
<trace enabled="false" requestLimit="10" pageOutput="false" traceMode="SortByTime" localOnly="true"/>
<sessionState mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424" sqlConnectionString="data source=127.0.0.1;user id=sa;password=" cookieless="true" timeout="20" />
<globalization requestEncoding="utf-8" responseEncoding="utf-8" />
| <httpRuntime useFullyQualifiedRedirectUrl="true" />
<mobileControls cookielessDataDictionaryType="System.Web.Mobile.CookielessData" />
<deviceFilters>
<filter name="isHTML32" compare="PreferredRenderingType" argument="html32" />
<filter name="isWML11" compare="PreferredRenderingType" argument="wml11" />
<filter name="isCHTML10" compare="PreferredRenderingType" argument="chtml10" />
<filter name="isGoAmerica" compare="Browser" argument="Go.Web" />
<filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer" />
<filter name="isMyPalm" compare="Browser" argument="MyPalm" />
<filter name="isPocketIE" compare="Browser" argument="Pocket IE" />
<filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser" />
<filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser" />
<filter name="isEricssonR380" compare="Type" argument="Ericsson R380" />
<filter name="isNokia7110" compare="Type" argument="Nokia 7110" />
<filter name="prefersGIF" compare="PreferredImageMIME" argument="image/gif" />
<filter name="prefersWBMP" compare="PreferredImageMIME" argument="image/vnd.wap.wbmp" />
<filter name="supportsColor" compare="IsColor" argument="true" />
<filter name="supportsCookies" compare="Cookies" argument="true" />
<filter name="supportsJavaScript" compare="Javascript" argument="true" />
<filter name="supportsVoiceCalls" compare="CanInitiateVoiceCall" argument="true" />
</deviceFilters>
</system.web>
</configuration>

NOTE: This article is purely for demonstration. This article should not be construed as a best practices white paper. This article is entirely original, unless specified. Any resemblance to other material is an un-intentional coincidence and should not be misconstrued as malicious, slanderous, or any anything else hereof.

Conclusion.

In this example we saw the use of Forms Authentication to identify a user and storing personalized settings for the identified users of the system. This logic can be extended to provide a user portal where the user can save his settings for stock quotes, weather, news etc. You can use this technique for personalization and expand on it to improve the mobile users' experience at your site in ASP.Net Web Applications and Mobile Web Applications. Personalization gives the user a feeling of familiarity and also avoids repetitive data entry.