Website theme change using JQuery

For sites which dealing with multiple brands/organizations within it, we can style the site with different themes according to each brand/organization.
 For example, Volkswagen is an automobile group which makes cars in different brands like Audi, Skoda, Lamborghini etc.
In the Volkswagen site we can change the site theme for Audi/Skoda/Lamborghini using a simple click using JavaScript.
As we are using JavaScript we can avoid page reload, which will be fast and user friendly.
For making this we need different css files for each themes.
In our example above, let us assume the css file of Audi is audi.css
And on the theme change button of Audi, call the function … onClick=”SwitchStyle(audi);”

The Theme switch script is given below,
//THEME SWITCH
var styleCookieName = "SelectedBrand";
var styleCookieDuration = 1;
$(document).ready(function () {
    SetStyleFromCookie();  // set theme selected on page load
});

//SWITCH THEME STYLE ACCORDING TO BRAND
function SwitchStyle(cssTitle) {
    $("#theme").attr("href", "css/" + cssTitle + ".css");
    SetCookie(styleCookieName, cssTitle, styleCookieDuration);
    return false;
}

//REMEMBER CURRENT THEME UNTIL LOGOUT
function SetStyleFromCookie() {
    var cssTitle = GetCookie(styleCookieName);
    var keys = cssTitle.split(',');
    var cssName = keys[0];
    if (cssName) {
        if (cssName.length) {
            SwitchStyle(cssName);
        }
    }
}

//GET CURRENT THEME FROM COOKIE
function GetCookie(cookieName) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == cookieName) {
            return unescape(y);
        }
    }
}

//SET SELECTED THEME TO COOKIE
function SetCookie(cookieName, cookieValue, styleCookieDuration) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + styleCookieDuration);
    var c_value = escape(cookieValue) + ((styleCookieDuration == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = cookieName + "=" + c_value;
}

for changing the theme we need to give id="theme" for the default theme link in masterpage.
<link id="theme" href="css/default.css" rel="stylesheet" type="text/css" />
If we want to remember the theme we last selected we can give duration for the cookie. Or else just clear the “SelectedBrand” cookie in logout function.

Smart Light

I would like to share some features about the smart light technology which I think will be the next trending thing in the tech world. It is not a new topic, but by the emergence of smart phones, smart light business got new wings. Smart light technology is introduced to save energy by turning off light when not needed. The smart light technology mainly used the combination of Bluetooth and WIFI .The smart light can be connected just like ordinary lights into the socket. Companies like emberlight has now started to produce smart light adapters so that any kind of ordinary lights i.e. incandescent, halogens, CFL, LED etc. can be fitted into that socket and convert it to a smart light. The smart light package has a hardware part and a software part .The hardware part is the light or adapter. The software part is the app which can run using your smart phone The app and light is connected using home Wi-Fi. These are some of the interesting feature of smart light. • Switch on or off a single or multiple lights right from your smart phones. • Dim Your Lights automatically based on proximity. • Automatically Dim/Turn off lights in the morning. • Turn Lights on from a distance before returning home. • Know what lights are on in a single room or the whole house. • Know how much unit of current used by each of the light in a month. • Turn your lights on/Off from anywhere in the world. • Automatically turn on the light when you enter your room, turn off when you leave the room. • Set the bed lamp to turn on when you get a call at night. To know more check this link, https://www.kickstarter.com/projects/1375573028/emberlight-turn-any-light-into-a-smart-light

Database backup and restore - Copying a database from one system to another.

There may be situations when we need to copy a data base that contain many tables stored procedures etc.

First we have to create the back-up of the existing database in SQL SERVER.

·         Right click on the database, select TASKS, and click BACKUP...........

·         Select backup type FULL.

·         Select the destination for storing database.

Copy the backup file to the system to which it is restored..Open the SQL SERVER

·         Right click on the database, select TASKS, and click RESTORE, DATABASE...........

·         Select Restore file from DEVICE...

·         In general properties, Tick the restore check-box..

·         In options, select the .mdf and .ldf file of new database from C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\DATA.

·         Click ok.

Query a Database and Transform through XSLT using ASP.NET

Step 1: Umbraco Site

•         Created blank umbraco site.
•         Created a clear XSLT file.   

Step2: Creating solution


·         Created a new project in visual web developer with an empty web application       [XsltExtension.aspx].

                 XsltExtension.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="XsltExtension.aspx.cs" Inherits="XsltExtension.XsltExtension" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:Xml ID="Xml1" runat="server"></asp:Xml>

    </div>

    </form>

</body>

</html>

•         Add a class file to the project [student.cs].
•          In student.cs add a public class. [SqlXSLTExtension]
•          Declare a static function [GetDataSet()] with type XPathNodeIterator.
•          Here Create sql connection and select data from database.
•          Read the data in to a list.
•          Convert the data in the list to XML format using StringBuilder.
•          Create an XmlDocument and add this XML data to it.
•          Return the XmlDocument.

·        StudentClass.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace XsltExtension

{

    public class Student_Class

    {

        public int Student_ID { get; set; }

        public string Student_Name { get; set; }

        public DateTime Student_DOB { get; set; }

        public string Student_Gender { get; set; }

        public string Student_Address { get; set; }

    }

}

·        Student.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Xml.XPath;

using System.Data;

using System.Xml;

using System.Data.SqlClient;

using System.Web.Configuration;

using System.Configuration;

using System.Text;

using XsltExtension;

namespace XsltExtension

{

public class SqlXSLTExtension

{

public static XPathNodeIterator GetDataSet()

{

string connString = WebConfigurationManager.ConnectionStrings["connection"].ToString();

SqlConnection con = new SqlConnection(connString);

SqlCommand cmd1 = new SqlCommand("SELECT [Student_ID],[Student_Name],[Student_DOB],[Student_Gender],[Student_Address] FROM [school].[dbo].[Student] ", con);

con.Open();

SqlDataReader reader = cmd1.ExecuteReader();

List<Student_Class> students = new List<Student_Class>();

while (reader.Read())

{

students.Add(

new Student_Class()

{

Student_ID = Convert.ToInt32(reader["Student_ID"]),

Student_Name = reader["Student_Name"].ToString(),

Student_DOB = Convert.ToDateTime(reader["Student_DOB"]),

Student_Gender = reader["Student_Gender"].ToString(),

Student_Address = reader["Student_Address"].ToString(),

}

);

}

con.Close();

con.Dispose();

StringBuilder NewStringBuilder = new StringBuilder();

XmlDocument XMLDoc = new XmlDocument();

NewStringBuilder.Append("<?xml version=\"1.0\"?>");

NewStringBuilder.Append("<Students>");

foreach (Student_Class NewStudent in students)

{

{

NewStringBuilder.Append("<Students>");

NewStringBuilder.AppendFormat("<Student_ID>{0}</Student_ID>", NewStudent.Student_ID);

NewStringBuilder.AppendFormat("<Student_Name>{0}</Student_Name>", NewStudent.Student_Name);

NewStringBuilder.AppendFormat("<Student_DOB>{0}</Student_DOB>", NewStudent.Student_DOB);

NewStringBuilder.AppendFormat("<Student_Gender>{0}</Student_Gender>", NewStudent.Student_Gender);

NewStringBuilder.AppendFormat("<Student_Address>{0}</Student_Address>", NewStudent.Student_Address);

NewStringBuilder.Append("</Students>");

}

}

NewStringBuilder.Append("</Students>");

XmlDocument studentsXmlDoc = new XmlDocument();

studentsXmlDoc.LoadXml(NewStringBuilder.ToString());

return studentsXmlDoc.CreateNavigator().Select(".");

}

}

}

•          Compile the solution.
•          Go to C:\Users\arundas\Documents\Visual Studio 2010\Projects\XsltExtension\XsltExtension\bin   and copy the .dll file [XsltExtension.dll].
•          paste it into bin of umbraco ( D:\umbraco_4711\build\bin).
• 
  

Step3: Creating Xslt extensions in umbraco.

•          Go to D:\umbraco_4711\build\config
•          Open the xsltExtention file.
•  
•         Add <ext assembly="<projectname>"type="<projectname>.<className>" alias="sql" ></ext>  to it.

·         Eg: <ext assembly="XsltExtension" type="XsltExtension.SqlXSLTExtension" alias="sql" >

</ext>

•         In the XSLT created ,call the method using alias name as prefix.

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

   <xsl:copy-of select="sql:GetDataSet()"/>

</xsl:template>

</xsl:stylesheet>

•          Add the connection string for data base connection in the .config file of umbraco.
•          Create a macro with the above Xslt extension.
•          Insert the macro into the template of our umbraco site.
•          Publish the site.
•          Open the site.

Screen shots

1. Xslt

2. Macro

3. Template

4. XsltXtention files in umbraco

5. Site