PROGRAMMING IN TAMIL: அஜாக்ஸ் ரேட்டிங் கன்ட்ரோல்.

Monday, March 12, 2018

அஜாக்ஸ் ரேட்டிங் கன்ட்ரோல்.

ஆன்லைனில் நாம் ஷாப்பிங் செய்யும் பொழுது ஏற்கனவே அந்த பொருளை வாங்கியிருப்பவர் அதை ரேட்டிங்க் செய்திருக்கலாம். எத்தனை பேர் எத்தனை ஸ்டார் செலக்ட் செய்தார்களோ அதன் சராசரி நமக்கு காட்டப்படும். இதற்கு டேட்டா பேசில் ஒரு டேபிளில் id,rate என இரு காலம்ன் மற்றும் உருவாக்கிக் கொள்ளலாம். டேபிளின் பெயராக RatingDetails எனக் கொடுக்கலாம். இதற்கு asp.net உடன் அஜாக்ஸ் சேர்ந்து பயன்படுத்த வேண்டும்.

கீழே எவ்வாறு அஜாக்ஸ் ரேட்டிங்க் கன்ட்ரோல் டிசைன் செய்வது எவ்வாறு அதை நிரல் வரிகளின் சராசரியை கணக்கிட்டு எவ்வாறு வெளியீடு செய்வது என விளக்கப்பட்டுள்ள்து.

ஏஎஸ்பி. நெட் பற்றிய சிறியதொரு அறிமுகம்.

ASP.NET என்பது .NET FRAME WORK-ன் ஒரு அங்கமாகும்.இது MICROSOFT-ல் உருவாக்கப்பட்டது.இது நிகழ் நேர WEB APPLICATION-களையும் WEB SERVICE-களையும் உருவாக்கப் பயன்படுகின்றது.

FRAME WORK என்பது LIBRARY CLASS-களின் தொகுப்பாகும். ASP.NET என்பது ASP-யின் மேம்படுத்தப்பட்ட பதிப்பாகும்.

WEB APPLICATION என்பது இணைய உலாவி (WEB BROWSER) மூலம் அணுகப்படுவதாகும்.ASP.NET தவிர PHP,JAVA,RUBY ON NAILS போன்ற TECHNOLOGY கொண்டு WEB APPLICATION-கள் உருவாக்கப்படுகின்றது.
ASP.NET 2002 ம் ஆண்டு MICROSOFT-ஆல் 1.0 VERSION மூலம் அறிமுகப்படுத்தப் பட்டது.அதற்கு முன்னால் இருந்த ASP இப்போது CLASSIC ASP என அழைக்கப்படுகின்றது.ASP.NET என்பதன் விரிவாக்கம் ACTIVE SERVER PAGES.NETஆகும். GOOGLE.COM என்பது WEB APPLICATION –ன் உதாரணமாகும்.

.நெட் FRAMEWORK கொண்டு CONSOLE APPLICATION,WINDOWS APPLICATION,WEB APPLICATION,MOBILE APPLICATION –கள் உருவாக்கலாம்.இதில் ASP.NET என்பது வெப் அப்ளிகேசன்கள் உருவாக்கப் பயன் படுகின்றது.

வெப் அப்ளிகேசன்களால் என்ன பயன்?
1000 பேர் வேலை பார்க்கும் ஒரு நிறுவனத்தில் விண்டோஸ் அப்ளிகேசன் எனில் ஒவ்வொரு கணினியிலும் அவை நிறுவப் பட வேண்டும்.ஆனால் வெப் அப்ளிகேசன் எனில் வெப் சர்வரில் மட்டும் நிறுவப் பட்டால் போதும்.
எல்லாக் கணினியிலும் வெப் ப்ரவ்சர் மூலம் அந்த அப்ளிகேசனை அணுகலாம்.அடுத்ததாக அதை நிர்வாகிப்பதும் எளிதாகின்றது.மேலும் வெப் அப்ளிகேசன்களை எல்லா PLATFORM –லும் அணுகலாம்.

WEB APPLICATION என்பது CLIENT /SERVER ARCHITECTURE முறையில் இயங்குகின்றது. CLIENT SIDE -ப்ரவ்சரும் SERVER SIDE –IIS(INTERNER INFORMATION SERVER)ம் கொண்டு இயங்குகின்றது.ப்ரவ்சரை இயக்கி வெப் அப்ளிககேசனின் –URL-ஐ டைப் செய்தவுடன் REQUEST ஆனது செர்வருக்கு செல்கின்றது.

செர்வர்ஆனது ASP.NET நிரலை இயக்கி அவற்றை PLAIN HTML –ஆக மாற்றி BROWSER –க்கு அனுப்புகின்றது. இந்த நிகழ்வுகளானது HTTP PROTOCOL மூலம் நடக்கின்றது.HTTP என்பதன்முழுச் சொல் HYPER TEXT TRANSFER PROTOCOL என்பதாகும்.

ப்ரவ்சரானது HTML-ஐ மட்டுமே புரிந்து கொள்ளும். அதற்கு JAVA,PHP,ASP.NET போன்ற மொழிகள் அறியாது. எனவே தான் செர்வரானது ASP.NET நிரலை இயக்கி HTML ஆக மாற்றி ப்ரவ்சருக்கு அனுப்புகின்றது. ப்ரவ்சர் ஆனது HTML-ஐ இயக்கி வெப் பக்கமாக மாற்றுகின்றது.

Column Name	Data Type	Allow Nulls
Id	Int(Set Identity=true)	No
Rate	Int	Yes

மேலே உள்ளவாறு டேபிளை உருவாக்கிய பிறகு AjaxControlToolkit என்கின்ற ரெஃபரன்ஸை அப்ளிகேசனில் சேர்க்க வேண்டும்.

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

To your aspx page and design your page likes this

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Ajax Rating Sample</title>

.ratingEmpty

{

width:18px;

height:18px;

}

.ratingFilled

{

width:18px;

height:18px;

}

.ratingSaved

{

width:18px;

height:18px;

}

</style>

</head>

<body>

<ajax:ToolkitScriptManager ID="ScripManager1" runat="server"/>

<div>

<asp:UpdatePanel ID="pnlRating" runat="server">

<tr>

<b>Average Rating:</b>

</td>

<td>

<ajax:Rating ID="ratingControl" AutoPostBack="true" OnChanged="RatingControlChanged" runat="server" StarCssClass="ratingEmpty" WaitingStarCssClass="ratingSaved" EmptyStarCssClass="ratingEmpty" FilledStarCssClass="ratingFilled">

</ajax:Rating>

</td>

</tr>

<tr>

Muthu karthikeyan provide tutorials in all programming languages.

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

கீழே அஜாக்ஸ் ரேட்டிங்க் கண்ட்ரோலின் பண்புகள் பற்றி பார்ப்போம்.

AutoPostBack – இது TRUE என இருக்க வேண்டு. ஏனெனில் ஒரு ஐட்டம் ஒன்றினை கிளிக் செய்யும் பொழுதே அதை ஸ்டோர் செய்ய வேண்டும்.

OnChanged – இந்த ஈவண்ட் ஆனது எத்தனை ஸ்டார்கள் செய்யப் பட்டுள்ளது என்பதை பெற்வதற்காக.

StarCssClass – இந்த css கிளாஸ் ஸ்டார்களை காண்பிக்க பயன்படுகின்றது.

WaitingStarCssClass – இது ரேட்டிங்க் வேல்யூவை சேவ் செய்யும் பொழுது ஸ்டார் கலர்களை காண்பிக்க உதவுகின்றது.

EmptyStarCssClass – இது எம்ப்டி ஸ்டார் கலர்களை காண்பிக்க உதவுகின்றது.

FilledStarCssClass – இந்த css கிளாஸ் ஆனது ஃபில் செய்யப் பட்ட ஸ்டார்களை காண்பிக்க உதவுகின்றது.

CurrentRating – இது தொடக்கமாக எத்தனை ஸ்டார்கள் செலெக்ட் செய்ய வேண்டும் என்பதை காண்பிக்க பயன்படுகின்றது.

MaxRating – இது அதிகபட்சமாக எத்தனை ரேட்டிங்க் கொடுக்கலாம் என்பதை அறிவிக்க பயன்படுகின்றது.

ReadOnly – இந்த பிராப்பர்ட்டியானது ரேட்டிங்க் கண்ட்ரோலை ரீட் ஒன்லியாக அறிவிப்பதற்காக பயன்படுகின்றது.

RatingAlign – இது ரேட்டிங்க்களை ஹரிசாண்டலாகவா அல்லது வெர்டிக்கிள் ஆகவா என்பதை குறிப்பிட பயன்படுகின்றது.

RatingDirection – இது ஸ்டார்களின் டைரக்சன்களை குறிப்பிட பயன்படுகின்றது.

C# Code

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

After completion of adding namespaces in code behind add following code

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString);

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

BindRatingControl();

}

protected void RatingControlChanged(object sender, AjaxControlToolkit.RatingEventArgs e)

{

con.Open();

SqlCommand cmd = new SqlCommand("insert into RatingDetails(Rate)values(@Rating)",con);

cmd.Parameters.AddWithValue("@Rating", ratingControl.CurrentRating);

cmd.ExecuteNonQuery();

con.Close();

BindRatingControl();

}

protected void BindRatingControl()

{

int total = 0;

DataTable dt = new DataTable();

con.Open();

SqlCommand cmd = new SqlCommand("Select Rate from RatingDetails", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

da.Fill(dt);

if(dt.Rows.Count>0)

{

for(int i=0;i<dt.Rows.Count;i++)

{

total += Convert.ToInt32(dt.Rows[i][0].ToString());

}

int average = total/(dt.Rows.Count);

ratingControl.CurrentRating = average;

lbltxt.Text = dt.Rows.Count+"user(s) have rated this article";

}

VB Code

Imports System.Configuration

Imports System.Data

Imports System.Data.SqlClient

Partial Class _Default

Inherits System.Web.UI.Page

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("dbconnection").ConnectionString)

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

BindRatingControl()

End If

End Sub

Protected Sub RatingControlChanged(ByVal sender As Object, ByVal e As AjaxControlToolkit.RatingEventArgs)

con.Open()

Dim cmd As New SqlCommand("insert into RatingDetails(Rate)values(@Rating)", con)

cmd.Parameters.AddWithValue("@Rating", ratingControl.CurrentRating)

cmd.ExecuteNonQuery()

con.Close()

BindRatingControl()

End Sub

Protected Sub BindRatingControl()

Dim total As Integer = 0

Dim dt As New DataTable()

con.Open()

Dim cmd As New SqlCommand("Select Rate from RatingDetails", con)

Dim da As New SqlDataAdapter(cmd)

da.Fill(dt)

If dt.Rows.Count > 0 Then

For i As Integer = 0 To dt.Rows.Count - 1

total += Convert.ToInt32(dt.Rows(i)(0).ToString())

Dim average As Integer = total \ (dt.Rows.Count)

ratingControl.CurrentRating = average

lbltxt.Text = dt.Rows.Count & "user(s) have rated this article"

End If

End Sub

End Class

Now in web.config file set your database connection because in above code I am getting connection from web.config இப்பொழுது வெப்.கான்ஃபிக் ஃபைலில் உள்ள கனக்சன் ஸ்ட்ரிங்க் மாதிரி கீழே கொடுக்கப்பட்டுள்ளது.

</connectionStrings>

நன்றி.

முத்து கார்த்திகேயன்,மதுரை.