Click here to Skip to main content
15,867,594 members
Articles / Hosted Services / Azure

CourseLearner: Azure based E-Learning product

Rate me:
Please Sign up or sign in to vote.
5.00/5 (10 votes)
9 Jun 2013BSD44 min read 54.1K   33   12
Azure based e-learning product.

 

Disclaimer 

This article is published for CodeProject-Windows Azure Challenge http://www.codeproject.com/Competitions/637/Windows-Azure-Developer-Contest.aspx. No part of the product , source code etc belongs to the organization that I worked for. The source code which is being uploaded as a part of his article is a work in-progress of the actual system to be implemented as a part of the contest.

Windows Azure Challenge 

Website URL : http://courselearnernew.azurewebsites.net/ 

User name : demouser 

password : demouser  

  • Challenge 1 - First Challenge: Getting Started. April 15 - May 3
  • Challenge 2 - Build a website. April 29 - May 12
  • Challenge 3 - Window Azure SQL.  May13-May 26 
  • Challenge 4 - Window Azure Virtual Machine.  May 27-June 9 

Introduction

In this article we will discuss the design and implementation of an E-Learning Product "CourseLearner " which makes use of Windows Azure and takes advantage of the stack.

Many education institutions do not have the resources and infrastructure needed to run top e-learning solution. E-learning is widely used today on different educational levels: continuous education, company trainings, academic courses, etc.

What Windows Azure offers for us

  1. Azure reduces the need for up-front technology purchases, and it enables developers to quickly and easily create applications running in the cloud by using their existing skills with the Microsoft Visual Studio development environment and the Microsoft .NET Framework.
  2. Infrastructure management is automated with a platform that is designed for high availability and dynamic scaling to match usage needs with the option of a pay-as-you-go pricing model.
  3. Azure provides an open, standards-based and interoperable environment with support for multiple internet protocols, including HTTP, REST, SOAP, and XML.
  4. Continuous deployment to Windows Azure Websites with TFS, GitHub.

Why Windows Azure?

  1. 99.9% SLA, Supports various technlogy stacks (.net, node.js, Php)
  2. Recent survey shouws Azure is best in performance, scalability.

Image 1

How It helps CourseLearner

  1. Infrastructure: use CourseLearner on the provider's infrastructure.
  2. Centralized data storage

Implementation Details

Challenge 1: Creating a Website

Azure is an internet-scale cloud services platform hosted in Microsoft data centers, which provides an operating system and a set of developer services that can be used individually or together.

Based on above features we can choose over web development stack for CourseLearner

  • ASP.NET MVC4: MVC Pattern to serve the Request and response for clients.
  • ASP.NET WebAPi: Unification of Services via WebApi, which is more flexible to handle API calls for CourseLearner and various clients (mobile, desktop apps).

Workflow of CourseLearner

Image 2

Features of CourseLearner

  1. Provides Course related materials ( Topics, videos )
  2. Discussion Forums on Course
  3. Reputation /Badges upon completion of course chapters
  4. Mobile User friendly via a responsive design.

Challenge 2: SQL Azure 

SQL Azure provides following features which comes more robust for CourseLearner implementation.

  • Manageability : scale and functionality of an enterprise data center without the administrative overheads that are associated with on-premise instances of SQL Server
  • High Availability : SQL Azure promises 99.9% SLA .

Challenge 3: Azure Mobile Service

Push notifications plays important role in mobile applications, we can use push notification in many use cases as listed below.

  • Useful to send notifications when a new course created.
  • Useful to send notification/message when a student completes a course

Challenge 2 : Build a Web site

What is Responsive web design?

Not a responsive design

Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device using media queries. 

  • it is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. 
  • As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

Image 4

Why we neeed Responsive web design ?

  1. A site designed with Responsive Web Design adapts the layout to the viewing environment by using fluid, proportion-based grids,flexible images and CSS3 media queries.
  2. No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site's user experience.
  3. A website that works well on all devices and screen sizes 

   

How we can achieve it ?

Before we implement the responsive site, let's talk about the basic stuffs of the web, how the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen. 

  1. What is ViewPort ?  

When testing media queries on mobile browsers, you might notice that the correct media queries are not actually being applied. When this happens, the mobile browser is doing some work on your behalf to render the page optimally on the smaller screen.

The viewport meta tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:

A typical mobile-optimized site contains something like the following: 

HTML
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.  

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.  

2. Can Image /video elements work with responsive design ? 

Yes. You can make image also be responsive. WHATWG proposed a new syntax for Responsive Image. 

HTML
<picture alt="The alt attribute’s content should accurately describe the image 
    represented by all sources, though cropping and zooming of sources may differ.">
    <!-- Matches by default: -->
    <source src="mobile.jpg" /> 
    <!-- Overrides the previous source for windows greater than 600px -->
    <source src="medium.jpg" media="min-width: 600px" /> 
    <!-- Overrides the previous source for windows greater than 900px -->
    <source src="fullsize.jpg" media="min-width: 900px" /> 
     <!-- Fallback content, only displayed in the event the 
                  <picture> tag is unsupported by the browser: --> 
    <img src="mobile.jpg" />
</picture>  

or you can choose the old CSS tricks to achieve the results. 

CSS
img { 
    <span class="code-none"><span class="code-none"><span class="code-none"><span class="code-none">: pre<span class="code-none"><span class="code-none"><span class="code-none"><span class="code-none"><span class="code-none">;</</</span>

3. Media Queries for Standard Devices 

CSS
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
} 

Coding

Website is designed using Twitter Bootstrap, in order to give the responsive design for the mobile users.

1. _layout.cshtml

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid"> 
                <button type="button" class="btn btn-navbar" 
                          data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar">
                    <span class="icon-bar">
                    <span class="icon-bar">
                </button>
                <a class="brand" href="#">CourseLearner</a>
                <div class="nav-collapse collapse">
                    <p class="navbar-text pull-right">
                        Logged in as <a href="#" class="navbar-link">Username</a>
                    </p>
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#about">Create Course</a></li>
                        <li><a href="#contact">MySetting</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            @RenderBody()
        </div>
        <!--/row-->
        <hr>
        <footer>
            <p>© Company 2013</p>
        </footer>
    </div>
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>

Prototype

  • Home Page

    Home Page

  • Create a new course

    Create a course

  • Attach Videos or Course material to Selected course

Image 7

Sneak-peek of website

  1. Responsive site : As I above mentioned that I am using Twitter bootstrap framework to get the responsiveness for site.

Image 8

 

Course Create Page

 

Image 9

Adding videos to the course  

Adding video's to the selected course was bit challenge for me, as i need to accept the  video format of MP4. After lot of research i  found MediaHandler tool to encode the given video into MP4.   Which uses ffmpeg library to encode the videos. here is the code to convert the video to mp4 format.  

C#
public class VideoEncoder
{
    private MediaHandler _mhandler;
    private string RootPath;
    private VideoInfo objVideoInfo;
    public VideoEncoder()
    {
        _mhandler=new MediaHandler();
        RootPath = HttpContext.Current.Server.MapPath(
           HttpContext.Current.Request.ApplicationPath);
        _mhandler.FFMPEGPath = 
          HttpContext.Current.Server.MapPath("~\\MediaTools\\ffmpeg.exe");
       
    }
    public VideoInfo EncodeVideo(string guid,string filename)
    {
        objVideoInfo = new VideoInfo();
        _mhandler.InputPath = RootPath + @"VideoFiles\";
        _mhandler.OutputPath = RootPath + @"VideoFiles\";
        _mhandler.FileName = guid;
        _mhandler.OutputFileName = guid;
        _mhandler.OutputExtension = ".mp4";
        _mhandler.Force = "mp4";
        _mhandler.Width = 640;
        _mhandler.Height = 380;
        _mhandler.Video_Bitrate = 500;
        _mhandler.Audio_SamplingRate = 44100;
        _mhandler.Audio_Bitrate = 128;
        objVideoInfo = _mhandler.Encode_MP4();
        return objVideoInfo;
    }
}  

Image 10

Video Preview : previewing video is entirely done  in HTML5 Video feature with fallback supported. 

HTML
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
	<!-- MP4 must be first for iPad! -->
	<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
	<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
	<!-- fallback to Flash: -->
	<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />

<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />

<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
     title="No video playback capabilities, please download the video below" />
</object>
</video>

I was having trouble to view mp4 video in Azure . Azure does not set response header for mp4 type of file.  there is a work around for the problem. just add there lines in system.webServer  tag

XML
<system.webServer>    
    <staticContent>
      <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
      <mimeMap fileExtension=".ogv" mimeType="video/ogg"/>
      <mimeMap fileExtension=".webm" mimeType="video/webm"/>
    </staticContent>
</system.webServer>

Online Tools to check Responsiveness 

  1. http://screenqueri.es/  
  2. http://responsive.is/typecast.com 

Easter egg challenge   

Easter eggs - as hidden features are left for a variety of reasons. Some are left to make a project more personal to a developer, others as a creative way to demonstrate  purely functional piece of software. 

Here is the Easter Egg for CourseLearner  

  1. Go To Home Page -> then click on the "Know How it works" Link to see easter egg. 
  2. An Easter Egg is displayed along with Windows Azure logo with animation.  
  3. Break the egg with Hammer and listen the cracking sound, golden easter egg contains Bob Logo. 
  4. Bob Welcomes you to the Challenge in typewriter mode.

Image 11

How I done it  

 Entire easter egg challenge was done in pure CSS codes, even Egg shape, animation.  I tried to utilize native feature of HTML5 / CSS3 rather than relying on the 3rd party library.  

HTML5/CSS3  features used in the Easter Egg challenge  

  1. @Keyframes to do animation.  
  2. HTML 5 Audio element : to play a sound when egg breaks. 
  3. CSS3 features : border-radius, box-shadow, tranition, rotate.  

@keyframes : provides animation in CSS3  

To use keyframes, you create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe list. Each @keyframes rule contains a style list of keyframe selectors, each of which is comprised of a percentage along the animation at which the keyframe occurs as well as a block containing the style information for that keyframe.

 

 

 

for moving the Egg and Windows Azure logo 

CSS
@@-webkit-keyframes mike-move {
       100% {
           left: 12%;
       }
   }

   @@-webkit-keyframes mike-float {
       50% {
           -webkit-transform: rotateZ(5deg) translateY(-5px);
       }
   }

Crate Easter Egg shape in CSS3  

CSS
#verti-egg {
        background-color: rgb(255, 133, 0);
        width: 105px;
        height: 180px;
        margin: 4px 4px 1px 100px;
        -webkit-border-radius: 50%/60% 60% 40% 40%;
        -moz-border-radius: 50%/60% 60% 40% 40%;
        border-radius: 50%/60% 60% 40% 40%;
        -webkit-box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
        -moz-box-shadow: 0px 0px 20px #D5D3D3, 0px 0px 20px #D5D3D3;
        box-shadow: 2px 3px 21px #D5D3D3, 0px 0px 20px #D5D3D3;
        cursor: url(../../Images/hammer.png) 0 0, auto;
    } 

for typewriting effect :  I extended the jQuery plugin to give the typewriting effect for the windows azure welcome text.   

JavaScript
$.fn.typeWriter = function (opts) {
    var $this = this,
        defaults = {
            animDelay: 50
        },
        settings = $.extend(defaults, opts);
    $.each(settings.text.split(''), function (i, letter) {
        setTimeout(function () {
            $this.html($this.html() + letter);
        }, settings.animDelay * i);
    });
};
JavaScript
$('#welcomeMsg').typeWriter({
    animDelay: 100,  // the bigger the number the slower the typing
    text: 'Welcome to Azure Developer Challenge with An Easter Egg!!'
}); 

Deployment options provided by Windows Azure

Windows Provides many option to deploy the application to the cloud.

  1. Web Deploy via Portal
  2. Web Deploy via Visual Studio Tooling updates for Publishing, Management (Azure SDK 2.0)
  3. Deploy using FTP (File Transfer Protocol)
  4. Via PowerShell Commands
  5. Via SourceControls (TFS, GitHub, Continuous integration server) 

Web Deploy via Portal: 

  1. Log on to Windows Azure Portal, you can create a website based on the templates provided by the Windows azure (WordPress, Joomla, or you can create a Quick website).
  2. then Next go to the  Dashboard of the newly created  website. there you can download the publishing profile and other extra information  

Image 12

When download completes, Go for Visual studio, Right click on your website project,  then say publish.

Image 13 

Now you can verify the connection.

Image 14

click on Publish button so that the website publishing begins. When the publishing process completes, your web site will be running the Azure cloud.

Image 15

Web Deploy via Visual Studio Tooling updates for Publishing, Management (Azure SDK 2.0)

Windows Azure team recently released the v2.0 update of the Windows Azure SDK for .NET. These new capabilities include: 

  • Web Sites: Visual Studio Tooling updates for Publishing, Management, and for Diagnostics
  • Cloud Services: Support for new high memory VM sizes, Faster Cloud Service publishing & Visual Studio Tooling for configuring and viewing diagnostics data 
  • Storage: Storage Client 2.0 is now included in new projects & Visual Studio Server Explorer now supports working with Storage Tables 
  • Service Bus: Updated client library with message pump programming model support, support for browsing messages, and auto-deleting idle messaging entities 
  • PowerShell Automation: Updated support for PowerShell 3.0, and lots of new PowerShell commands for automating Web Sites, Cloud Services, VMs and more. 

Install Windows Azure SDK 2.0. This can be downloaded from Windows Azure Site http://www.windowsazure.com/en-us/develop/net.

The Windows Azure SDK includes the following tools: 

  • Windows Azure compute emulator – A tool that locally emulates the environment in which cloud services run.
  • Windows Azure storage emulator – A tool that locally emulates the services of Windows Azure storage.
  • CSPack – A tool that creates an application package that can be deployed to Windows Azure.
  • CSUpload – A tool that is used to upload VHD files and service certificates to Windows Azure.
  • CSEncrypt – A tool that is used to encrypt the password for remote desktop connections.
  • CSRun – A tool that is used to start the compute emulator with the appropriate application package.
  • DSinit - initializes Windows Azure storage emulator in the local environment. 

Step to Publish/Manage the windows Azure websites by Windows Azure SDK 2.0 

  1. Open Visual Studio. Click on the server explorer window. Right click on the Windows Azure websites-> click on Improt Subscriptions-> Provide your publishing subscription.

Image 16

Once it connected to the windows azure, now you can stop/change settings of Azure site or even can view the logs. 

3. Via  Deploy using FTP (File Transfer Protocol) 

Windows Azure provides a FTP Endpoints, where you can update the files ease of use. You can use windows explorer to use FTP or even FTP clients such as FileZilla .

  1. Login to the windows Azure Portal. Go to Dashboard.

Image 17

Dashboard provides all important bits and bytes of windows Azure.

  1. It includes the Website Usage overview
    1. CPU Time
    2. HardDisk Usage and others 
  2. Go for the FTP Host Name : click the link to  connect the site, Website will prompt for the username and password for the Windows azure websites. which can be seen in the publishing profile 
XML
<publishData>
<publishProfile profileName="CourseLearner - Web Deploy" publishMethod="MSDeploy" 
  publishUrl="waws-prod-ch1-001.publish.azurewebsites.windows.net:443" 
  msdeploySite="CourseLearner" userName="$CourseLearner" 
  userPWD="" destinationAppUrl="http://courselearner.azurewebsites.net" 
  SQLServerDBConnectionString="" 
  mySQLDBConnectionString="" hostingProviderForumLink="" 
  controlPanelLink="http://windows.azure.com"><databases/>
</publishProfile>
<publishProfile profileName="CourseLearner - FTP" publishMethod="FTP" 
  publishUrl="ftp://waws-prod-ch1-001.ftp.azurewebsites.windows.net/site/wwwroot" 
  ftpPassiveMode="True" userName="CourseLearner\$CourseLearner" 
  userPWD="PasswordWillBehere" destinationAppUrl="http://courselearner.azurewebsites.net" 
  SQLServerDBConnectionString="" mySQLDBConnectionString="" hostingProviderForumLink="" 
  controlPanelLink="http://windows.azure.com"><databases/>
</publishProfile>
</publishData>  

4. Via Windows Azure Powershell Commannds

Windows Azure PowerShell is the module for Windows PowerShell that you can use to control and automate the deployment and management of your workloads in Windows Azure.

To use the Powershell Commands, you need to install the Windows Azure Management Cmdlets. http://msdn.microsoft.com/en-us/library/windowsazure/jj152841  

Some commands which helps you to get started with PowerShell Cmdlets 

Disclaimer, I am not at all a Powershell expert, so there probably are better ways to do what I am showing you. 

  1. Get-AzureWebsite : Gets information about websites in Windows Azure associated with the current subscription.  
  2. New-AzureWebsite : Create a new website to run in Windows Azure.
  3. Remove-AzureWebsite :Removes the specified website from Windows Azure.
  4. Restart-AzureWebsite :Stops and then restarts the specified website. 

Powershell cmdlets write (or should write) objects to the pipeline. you can combine two commands in a pipe. 

for eg :  Combining two PowerShell commands with pipe.  

Get-AzureWebsite | Stop-AzureWebsite
  • Retrieves all websites, this returns a collection of Site objects. Each object is a summary object which has a Name property which is the site name.
  • Pipes to Stop-AzureWebsite (matching Site.Name to the Stop-AzureWebsite Name parameter) which stops each site.   

 Scaling Website for Better performance 

How we can scale the website. 

Windows Azure offers three modes for you to run your web sites

  • Free Mode : When a web site is first created it runs in Free web site mode, meaning that it shares available compute resources with other subscribers that are also running web sites in Free or Shared web site mode. all web sites run in a multi-tenant environment and have quotas for usage of CPU, memory, and network resources. A single instance of a web site configured to run in Free mode will provide somewhat limited performance when compared to other configurations but should still provide sufficient performance to complete development tasks or proof of concept work.  
  • Shared Mode : A web site that is configured as or updated to Shared mode uses a low-cost scaling mode that provides more performance than Free mode. Changing to Shared mode is easily done in the Scale tab of the management portal. These changes take only seconds to apply, and do not require code to be changed or the application to be redeployed. Shared mode employs less stringent resource usage quotas than Free mode. The maximum number of sites you can run in Free mode may vary with your plan 
  • Reserved Website Mode: A web site that is configured as Reserved will provide more consistent performance than a web site that is configured as Free or Shared.  When you configure a web site as Reserved, you specify the size of the web site (Small, Medium or Large). A web site that is configured with a larger Reserved Instance Size will perform better under load. You also specify a value for Reserved Instance Count (from 1 to 3). Increasing the value for Reserved Instance Count will provide fault tolerance and improved performance through scale out 

Image 18

  • You can configure the .net framework for applications in configuration tab. 
  • You can scale out the website into 3 modes (free, shared, reserved) and the Instance count for the website.  

How can we utilize 10 free Azure websites ?  

Creating a web site in Azure can take a minute. You can create up to 10 small websites for free (*Per Region)  to play and experiment or even reserve instances and scale up the sites as your need.  

*10 Free websites quotas are per sub-region. So Windows Azure provides 4 Regions. so 10 web sites X 4 Region= 40 Websites.  If one or more of your sites are using more than the allowed quota for a given resource, you may experience a temporary disruption of service.  you can learn more about the free websites. https://www.windowsazure.com/en-us/pricing/details/web-sites/     

Taking advantages from free websites offered by the Azure 

  1. Huge Learning opportunity, this makes me more happier. Now I have 10 free sites to play with Node JS, PHP or other languages or even i can try out the new Azure Features ( SQL AZURE(TableStorage, Blobs), Media Services, Mobile Services) for each site differently.  
  2. Publishing can be done in a number of ways, using Web Deploy, TFS, Git or FTP or even manage everything in the    portal or you can automate stuff from the command line via the powershell CMDlets. This gives me a lot of new way to publish the sites quickly and learn the things. 
  3. you can create  a playground to test the load balancing, virual machines or you can configure the cusom domain of the site.  http://www.windowsazure.com/en-us/develop/net/common-tasks/custom-dns-web-site/ 
  4. Azure Provides Application gallery to explore, discover and install popular community ASP.Net and PHP applications on Windows Azure Platform for  both Public and Private cloud
    • Users can browse and view applications for different types of Web sites, ranging from photo galleries to blogs to e-commerce sites.
    • Wordpress, JOOMLA, NodeJS, or many other popular applications can be created in a few clicks 

I will Demonstrate how you can create a new wordpress site in windows Azure within a minute. Same method can be used to create other types of websites offered in windows Azure application gallery. 

  1. Log in to Windows Azure Portal, Click on the create New button, from there choose web site-> From Gallery. Click on From Gallery to explore the possible ways to create the website in Azure.  

Image 19

2.   you can browse and view applications for different types of Web sites, ranging from photo galleries   to blogs to ecommerce sites.  for this demonstration i'm choosing a wordpress site.  then click on    the next button to procede for the next steps.  

Image 20

3.  Azure prompts for Configuration for the Word press site (MySql Database name, region). once you select the options, then click on the next button to proceed for the further steps.

Image 21

4.  Confirm the settings and click next to create the new word press site in a minute.  Newly created site  listed in the websites section.  

Image 22

Outcome of the 10 free Azure websites 

  1. Learnt many new ways of publishing website to the cloud.   
  2. You need not to be a guru in ASP.NET/ PHP/joomla or any other languages to create a website  which azure offers from it's gallery. Withing few clicks you are good to go.

How this site will fit into the next challenge.

Right now website store video files in the same folder, In upcoming challenge i have planned to Use Azure Storage to store the blob contents and Media Services.  

Windows Azure Blob storage

is a service for storing large amounts of unstructured data that can be accessed from anywhere in the world via HTTP or HTTPS. A single blob can be hundreds of gigabytes in size, and a single storage account can contain up to 100TB of blobs. Common uses of Blob storage include:

  • Serving images or documents directly to a browser
  • Storing files for distributed access
  • Streaming video and audio
  • Performing secure backup and disaster recovery
  • Storing data for analysis by an on-premises or Windows Azure-hosted service
  • You can use Blob storage to expose data publicly to the world or privately for internal application storage. 
C#
 // Retrieve storage account from connection string.
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
    CloudConfigurationManager.GetSetting("StorageConnectionString"));
// Create the blob client.
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
// Retrieve reference to a previously created container.
CloudBlobContainer container = blobClient.GetContainerReference("mycontainer");
// Retrieve reference to a blob named "myblob".
CloudBlockBlob blockBlob = container.GetBlockBlobReference("myblob");
// Create or overwrite the "myblob" blob with contents from a local file.
using (var fileStream = System.IO.File.OpenRead(@"path\myfile"))
{
    blockBlob.UploadFromStream(fileStream);
} 

Challenge 3 :  Windows Azure SQL    

Azure Offers following to manage the data in the cloud.   

  • SQL Database : a managed service for relational data. This option fits in the category known as Platform as a Service (PaaS), which means that Microsoft takes care of the mechanics—you don’t need to manage the database software or the hardware it runs on.
  •  SQL Server in a VM :  a virtual machine created using Windows Azure Virtual Machines. This approach lets you use all of SQL Server, including features that aren’t provided by SQL Database, but it also requires you to take on more of the management work for the database server and the VM it runs in 
  • Azure Storage Services
      • Blob Storage :  which stores collections of unstructured bytes. Blobs can handle large chunks of unstructured data, such as videos, and they can also be used to store smaller data items .
      • Table Storage : providing a NoSQL key/value store. Tables provide fast, simple access to large amounts of loosely structured data. Don’t be confused, however: Despite its name, Table Storage doesn’t offer relational tables
  • SQL Server Reporting :  offers several programming interfaces that you can leverage in your own applications. 

 Advantages of SQL Azure

  • High availability : SQL Azure keeps three replicas of your database, so that you will get the data all time. 
  • On demand: SQL Azure can provide on demand feature. 
  • Less Overhead in Management: physical administration of the database as a part of the SQL Azure service. The end-user does not need to install, update or patch any software. In addition, as you can imagine, this reduces the management overhead for the end-user. 
  1. Windows Azure SQL  : SQL Database provides a relational database management system for Windows Azure and is based on SQL Server technology. You can work with easily by using SqlConnection class. 

Image 23

 

As above picture tells clearly, Azure works on multi-tenant system. 

 

 How to Use this in our application .  

  1. Login to Windows Azure portal and create a database. 

      2. Then Select the newly created Database, then click on the show connection string. 

XML
 <connectionStrings>
  <add name="ConnectionString" 
       connectionString ="Server=tcp:xxxxxxxxxx.database.windows.net;Database=testDB;
          User ID=MyAdmin@xxxxxxxxxx;Password=pass@word1;Trusted_Connection=False;Encrypt=True;" />
</connectionStrings>  

or if you wish to do in code, then you can use the SQLConnectionStringBuilder class to build a connection string as shown in the following code sample: 

C#
SqlConnectionStringBuilder csBuilder;
csBuilder = new SqlConnectionStringBuilder();
csBuilder.DataSource = xxxxxxxxxx.database.windows.net;
csBuilder.InitialCatalog = testDB;
csBuilder.Encrypt = true;
csBuilder.TrustServerCertificate = false;
csBuilder.UserID = MyAdmin;
csBuilder.Password = pass@word1;
SqlConnection conn = new SqlConnection(csBuilder.ToString());
conn.Open();
// then do some thing with Results 

3.  You can create a firewall rule to accept the connection from your netwrok IP.  

How can we mange SQL Azure 

A variety of tools and utilities can be used with Microsoft Windows Azure SQL Database.

  •  The sqlcmd utility lets you enter Transact-SQL statements, system procedures, and script files at the command prompt, in Query Editor in sqlcmd mode, or in a Windows script file. sqlcmd can also run in an operating system (cmd.exe) job step of a SQL Server Agent job running on an on-premise instance of SQL Server.  you can learn more from here (http://msdn.microsoft.com/en-us/library/windowsazure/ee336280.aspx
SQL
C:\>sqlcmd -U <ProvideLogin@Server> -P <ProvidePassword> -S <ProvideServerName> -d master
1> CREATE DATABASE <ProvideDatabaseName>;
2> GO
1> QUIT 
  •  SQL Server Management Studio  : SQL Server Management Studiocan be used to access, configure, manage and administer SQL Databases. Before you connect, make sure you have added a firewall rule in the Azure management portal 

 Image 24

  • The Windows Azure Platform Management Portal : You can use the web-based Management Portal for SQL Database to manage SQL Databases and data-tier applications. You can create or drop databases.


Restful Services :  The SQL Database Management API provides programmatic access to the same management operations performed through the Windows Azure Platform Management Portal to manage SQL Database servers. Using the SQL Database Management API, you can manage SQL Database servers for each subscription and the firewall rules associated to each server.   Here i am mentioning few RESTful method for managing the SQL database, for complete info you may visit the http://msdn.microsoft.com/en-us/library/windowsazure/gg715281 

  • Operation request to enumerate SQL Database servers for a subscription  : https://management.database.windows.net:8443/{SubscriptionID}/servers  
  • Operation request to create a SQL Database server for a subscription  : https://management.database.windows.net:8443/{SubscriptionID}/servers 
  • Operation request to drop a SQL Database server for a subscription  https://management.database.windows.net:8443/{SubscriptionID}/servers/{ServerName}
  • Operation request to set the administrative password for a SQL Database server https://management.database.windows.net:8443/{SubscriptionID}/servers/{ServerName}?op=ResetPassword

 Steps to integrate Azure SQL REST API  

The SQL Database Management API requires mutual authentication of certificates.Any valid X.509 v3 certificate can be used for authentication against the SQL Database Management API. You can use a self-signed certificate or one signed by a certificate authority. 

The length of the certificate’s key must be at least 2048 bits. Windows Azure will reject any certificate that does not meet this requirement or that is invalid.

To crate a certificate, run this command in Visual studio Command prompt in adminstrator account

makecert -sky exchange -r -n "CN=SqlAzureRest" -pe -a sha1 -len 2048 -ss My "SqlAzureRest.cer"     

Then upload the above created certificate to windows azure via upload certification wizard.  then Copy the thumbprint of Certificate, which is needed to Call REST Services.  

Image 25

Now we need to implement the REST API calls for SQL Azure. 

Create a New MVC application (or even console application), and add new class  and below methods to handle REST calls 

To get the Server List.  

C#
private static string certificateThumbprint = ""; //replace your certificate Thumbprint 
private static string x_ms_version = "2013-05-19"; // this is important. 
private static string certificateFile = @"D:\RaviSqlRestAzure.cer"; //give the path of certificate.

create a method to Azure Server list.  

C#
public AzureListViewModel getAzureList(string subscriptionID)
{
    SqlRestMetadata objMetdata = new SqlRestMetadata();
    try
    {
        //First read the certificate from certificate
        // store which will be used to authenticate the request.
        X509Store certificateStore = new X509Store(StoreName.My, StoreLocation.CurrentUser);
        certificateStore.Open(OpenFlags.ReadOnly);
        X509Certificate2Collection certificates = certificateStore.Certificates;
        certificateThumbprint = Regex.Replace(certificateThumbprint, 
          @"[^\u0000-\u007F]", string.Empty); // to remove whitespace. 
        var matchingCertificates = 
          certificates.Find(X509FindType.FindByThumbprint, certificateThumbprint, false);
        var managementCert = matchingCertificates[0];
        X509Certificate2 cert = new X509Certificate2(certificateFile);
        string requestUrl = string.Format(CultureInfo.InvariantCulture,
         "https://management.database.windows.net:8443/{0}/servers", subscriptionID);
        HttpWebRequest req = (HttpWebRequest)WebRequest.Create(requestUrl);
        req.Method = "GET";
        req.Headers.Add("x-ms-version", "1.0");
        req.ClientCertificates.Add(managementCert);
        using (HttpWebResponse resp = (HttpWebResponse)req.GetResponse())
        {
            _list = new List<SqlRestServiceData>();
            objMetdata.Requestid = resp.Headers["x-ms-request-id"];
            objMetdata.returnStatusCode = (int)((HttpWebResponse)resp).StatusCode;
            using (Stream stream = resp.GetResponseStream())
            {
                using (StreamReader sr = new StreamReader(stream))
                {
                    var xdoc = XElement.Load(sr);
                    XNamespace ns = "http://schemas.microsoft.com/sqlazure/2010/12/";
                    foreach (var urlElement in xdoc.Elements(ns + "Server"))
                    {
                        SqlRestServiceData returnData = new SqlRestServiceData();
                        returnData.ServerName = urlElement.Element(ns + "Name").Value;
                        returnData.AdminLogin = urlElement.Element(ns + "AdministratorLogin").Value;
                        returnData.DataCenterLocation = urlElement.Element(ns + "Location").Value;
                        _list.Add(returnData);
                    }
                }
            }
        }
    }
    catch (WebException webEx)
    {
        var resp = webEx.Response;
        objMetdata = new SqlRestMetadata();
        objMetdata.Requestid = resp.Headers["x-ms-request-id"];
        objMetdata.returnStatusCode = (int)((HttpWebResponse)resp).StatusCode;
        objMetdata.ErrorMsg = webEx.Message;
    }
    var returnValues = new AzureListViewModel();
    returnValues.resultMetadata = objMetdata;
    returnValues.serverList = _list;
    return returnValues;
} 

Now Call this method from MVC Controller.(MVC code is not included in article, due to article length, I will be hosting it in windows Azure soon and will give a download link for Source code)  

Image 26

Now we need to create a Server.  you need to provide valid details 

  • it need valid subscription  
  • Valid Admin login userid
  • Valid Admin Password (8 character (Uppercase, lowercase, non alphanumeric, number)  

To create, add these following code. 

C#
public AzureCreateServerViewModel CreateServer(CreateServerModel objParams)
{
    AzureCreateServerViewModel objCreateServerModel = new AzureCreateServerViewModel();
    //First read the certificate from certificate store
    //which will be used to authenticate the request.
    try
    {
        X509Store certificateStore = new X509Store(StoreName.My, StoreLocation.CurrentUser);
        certificateStore.Open(OpenFlags.ReadOnly);
        X509Certificate2Collection certificates = certificateStore.Certificates;
        certificateThumbprint = Regex.Replace(certificateThumbprint, 
           @"[^\u0000-\u007F]", string.Empty); // to remove whitespace. 
        var matchingCertificates = 
            certificates.Find(X509FindType.FindByThumbprint, certificateThumbprint, false);
        var managementCert = matchingCertificates[0];
        X509Certificate2 cert = new X509Certificate2(certificateFile);
        string requestUrl = string.Format(CultureInfo.InvariantCulture,
                "https://management.database.windows.net:8443/{0}/servers", 
                objParams.subscriptionid);
        HttpWebRequest webRequest = HttpWebRequest.Create(requestUrl) as HttpWebRequest;
        webRequest.ClientCertificates.Add(managementCert);
        webRequest.Headers["x-ms-version"] = "1.0";
        webRequest.Method = "POST";
        //=== Add the Request Payload ===//
        string xmlBody = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n" +
                          "<Server xmlns=\"http://schemas.microsoft.com/sqlazure/2010/12/\">\n" +
                          "  <AdministratorLogin>" + 
                          objParams.AdminLogin + "</AdministratorLogin>\n" +
                          "  <AdministratorLoginPassword>" + 
                          objParams.AdminLoginPassword + "</AdministratorLoginPassword>\n" +
                          "  <Location>" + objParams.DataCenterLocation + 
                          "</Location>\n" +
                          "</Server>";
        byte[] bytes = Encoding.UTF8.GetBytes(xmlBody);
        webRequest.ContentLength = bytes.Length;
        webRequest.ContentType = "application/xml;charset=utf-8";
        using (Stream requestStream = webRequest.GetRequestStream())
        {
            requestStream.Write(bytes, 0, bytes.Length);
        }

        //=== Send the request and wait on the response ===//
        using (WebResponse webResponse = webRequest.GetResponse())
        {
            //=== x-ms-request-id is useful for troubleshooting request failures with Microsoft ===//
            objCreateServerModel.Requestid = webResponse.Headers["x-ms-request-id"];
            objCreateServerModel.returnStatusCode = (int)((HttpWebResponse)webResponse).StatusCode;
            objCreateServerModel.AdminName = objParams.AdminLogin;
            objCreateServerModel.DataCenterLocation = objParams.DataCenterLocation;
            using (Stream stream = webResponse.GetResponseStream())
            {
                using (XmlTextReader xmlReader = new XmlTextReader(stream))
                {
                    while (xmlReader.Read())
                    {
                        switch (xmlReader.NodeType)
                        {
                            case XmlNodeType.Element:
                                if (xmlReader.Name == "ServerName")
                                {
                                    if (xmlReader.Read() && (xmlReader.NodeType == XmlNodeType.Text))
                                    {
                                        objCreateServerModel.NewServerName = xmlReader.Value.ToString();
                                    }
                                }
                                break;
                        }
                    }
                }
            }
        }
    }
    catch (WebException webEx)
    {
        var resp = webEx.Response;
        objCreateServerModel = new AzureCreateServerViewModel();
        objCreateServerModel.Requestid = resp.Headers["x-ms-request-id"];
        objCreateServerModel.returnStatusCode = (int)((HttpWebResponse)resp).StatusCode;
        objCreateServerModel.ErrorMsg = webEx.Message;
    }
    return objCreateServerModel;
}

Creating SQL  Server via REST calls 

Image 27

Image 28

Azure SQL Reporting Services

SQL Reporting provides many of the features you know from SQL Server Reporting to create reports with tables, charts, maps, gauges, and more and deploy them on both private and public clouds. You can export reports to various popular file formats including Excel, Word, HTML, PDF, XML, CSV, and ATOM feeds. 

How it will help CourseLearner.    

1. You can export reports to various popular file formats including Excel, Word, HTML, PDF, XML, CSV, and ATOM feeds. 

2. We need not create reporting manually using some 3rd party library or displaying in html format.

Prerequisite tools needed to  Integrate Azure SQL  

  • Business Intelligence Studio 2012 : http://www.microsoft.com/en-in/download/details.aspx?id=36843
  • Azure SDK to create MVC WebRole. 
  • Basic understanding of SSRS. 
  •  Login to Azure Portal and Create a SQL Reporting services.  
  • After creation, copy the reporting service Web URL.
  • Create a Reporting Server Project and create Report ( i am not including those details, due to article length) 
  • Then select the Reporting server project and click on properties and change the settings according to your URL.  (make sure you selected the correct TargetSeverVersion and  change the TargetServerURL according your Reporting Server WebURl, which you copied above earlier. ) 

 Image 29

  •  Then Deploy the project to Azure. Right click on the reporting server project-> click deploy.  
XML
<add key="USERNAME" value="YourAzureSSRSUserName" /> 
<add key="PASSWORD" value="YourAzureSSRS Password" />
add key="REPORT_PATH" value="/AzureReport/Report1" />

Select your MVC application project -> then add new folder "Report", add new webform item "report,aspx". 

Add these code in your report.aspx

ASP.NET
<form id="form1" runat="server">
        <asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<div style="width:100%;height: 100%;">
        <rsweb:ReportViewer ID="ReportViewer1" runat="server" 
          ProcessingMode="Remote" Height="600px" 
          ShowParameterPrompts="False" Width="700px" ></rsweb:ReportViewer>
</div>
</form> 

In report.aspx.cs, add these code in page load event 

 

C#
DataSourceCredentials cred = new DataSourceCredentials();
cred.Name = "DataSource1";
cred.UserId = "YourSQLServerLogin"; // this is the UserID which you used to Connect SQL
cred.Password = "YourSQLServerPassword";
ReportViewer1.ShowParameterPrompts = false;
ReportViewer1.ShowCredentialPrompts = false;
if(!this.IsPostBack) // make Sure you add this, or else Reporting will go in infinite loop. 
{
  try
  {
      ReportViewer1.ServerReport.ReportServerUrl = 
        new Uri(ConfigurationManager.AppSettings["SERVER_NAME"]);
      ReportViewer1.ServerReport.ReportPath = 
        ConfigurationManager.AppSettings["REPORT_PATH"];
      
      ReportViewer1.ServerReport.ReportServerCredentials = new ReportCredential();
      ReportViewer1.ServerReport.SetDataSourceCredentials(new DataSourceCredentials[] { cred });
  }
  catch (Exception ex)
  {
      throw;
  }
} 

The ReportViewer control manages the authentication cookie, making your tasks easier. To display reports deployed to a SQL Reporting report server in the ReportViewer control, you supply the report server URL and the report path as you would for any server report. Then implement the IReportServerCredentials interface and use it in ServerReport.ReportServerCredentials

C#
public class ReportCredential : IReportServerCredentials
{
    public WindowsIdentity ImpersonationUser
    {
        get
        {
            return null;
        }
    }
    public ICredentials NetworkCredentials
    {
        get
        {
            return null;
        }
    }
    public bool GetFormsCredentials(out Cookie authCookie, 
                out string user, out string password, out string authority)
    {
        authCookie = null;
        user = ConfigurationManager.AppSettings["USERNAME"];
        password = ConfigurationManager.AppSettings["PASSWORD"];
        authority = ConfigurationManager.AppSettings["SERVER_NAME"];
        return true;
    }
}  

How we can use the webforms in mvc views ? answer is simple, we can use an iframe, point the source to report.aspx.

in your Report.cshtml (MVC) 

HTML
<div style="width: 100%; min-height: 500px; height: 100%;">
    <iframe src="~/Reportts/ReportViewer.aspx" width="800" height="500" frameborder="0"></iframe>
</div> 

now you can run the reports in the cloud.

Few gotchas need to watch when integrating the Azure SSRS and hybrid application which i faced.  

  •  When deploying Reporting Service, make sure you selected TargetServerVersion to "SQL Server 2008 R2 or Laterr". // see above deploy image
  • Use ScriptManager in your report.aspx to work report correctly .  
  • if you face this type of error when you deploy the site to Azure. "Assembly "Microsoft.ReportViewer.Common, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" or one of its dependencies" 

  to solve this , go and copy the following dlls to your application bin folder 

C:\WINDOWS\assembly\GAC_MSIL\Microsoft.ReportViewer.Common\
	  Pick_Framework_Version_of_11\Microsoft.ReportViewer.Common.dll
C:\WINDOWS\assembly\GAC_MSIL\Microsoft.ReportViewer.ProcessingObjectModel\
  Pick_Framework_Version_of_11\Microsoft.ReportViewer.ProcessingObjectModel.dll
C:\WINDOWS\assembly\GAC_MSIL\Microsoft.ReportViewer.WebForms\
  Pick_A_Framework_Version_of_11\Microsoft.ReportViewer.WebForms.dll

and final result .  

Image 30

Most Important thing for SQL Reporting Services : You cannot Start/Stop Reporting services once you deployed to the azure. Azure offers 100 free hours/month of SQL Reporting Service.  For this reason my previous azure account got exceeded monthly quota and in turns it leads to suspension of azure account for the month. So you should be careful when you are deploying the SSRS to azure. In meantime i uploaded the source code for integration of SSRS with MVC4 (you can find it in the beginning of this article).  

Backup and Restore in Azure SQL 

SQL Azure provides many Useful way to do backup and restore of SQL database. These are the following ways we can achieve backup and restore functionality.  

  •  Using SQL Management Studio.  :  You can do backup and restore via SQL Server management. you need to create a credential for the SQL. then you can backup and restore the database.  

 Create Credential for SQL  

SQL
CREATE CREDENTIAL mycredential 
WITH IDENTITY= 'mystorageaccount' – this is the name of the storage account 
  you specified when creating a storage account (your Storage Account) 
, SECRET = '<storage account access key>' – this should be either the Primary or Secondary Access 
   Key for the storage account (YourStorageACcesskey)     

Next step is to Create Backup for Your Azure SQL.

SQL
BACKUP DATABASE AdventureWorks2012 
TO URL = 'https://mystorageaccount.blob.core.windows.net/mycontainer/AdventureWorks2012.bak' 
      WITH CREDENTIAL = 'mycredential' --put credintial, which we created above
                              ,COMPRESSION     
,STATS = 5;
GO   

 For Restoring 

SQL
RESTORE DATABASE AdventureWorks2012 FROM URL = 
  'https://mystorageaccount.blob.core.windows.net/mycontainer/AdventureWorks2012.bak'
WITH CREDENTIAL = 'mycredential'
,BLOCKSIZE = 65536
,STATS = 5

 Windows Azure SQL Database: Create a database Copy

  This feature allows you to copy a running database creating another fully functional SQL Azure database in the same data center

Database copies can be created on the same or different Windows Azure SQL Database server, but the server must be in the same region 

SQL
CREATE DATABASE destination_database_name AS COPY OF [source_server_name].source_database_name

 Windows Azure SQL Database Import/Export Service 

 Directly import or export between a Windows Azure SQL database and Windows Azure BLOB storage. This feature is a free service exposed through the Azure Management Portal and exports all supported database schema objects and table data in a single file package with an extension of .BACPAC.  One point to note is that the .BACPAC file is not equivalent to a Backup as it does not contain Transaction Log and History Data and is not transactionally consistent by itself. 

 

  • To Export you can login into azure portal.  Export utility will create Storage account to export the database  as bacpac  in a blob container 
 

Image 31

 

  •  Importing Database can be done by giving the bacpac url from the blob container
 Image 32
 

 

SQL Azure Data Sync with on-premises data 

 SQL Azure Data Sync enables on-premises SQL Server data to be easily shared with SQL Azure allowing you to extend your on-premises data to begin creating new cloud-based applications. Using SQL Azure Data sync’s bi-directional data synchronization support, changes made either on SQL Server or SQL Azure are automatically synchronized back and forth. http://www.windowsazure.com/en-us/manage/services/sql-databases/getting-started-w-sql-data-sync/ 

SQL Azure databases to allow you to easily geo-distribute that data to one or more SQL Azure data centers around the world. Now, no matter where you make changes to your data, it will be seamlessly synchronized to all of your databases whether that be on-premises or in any of the SQL Azure data centers. 

Image 33 

 Perquisite to implement Azure data sync

 

  • Download the Azure data Sync clilent http://www.microsoft.com/en-us/download/details.aspx?id=27693 
  • Make sure you have created database servers in Azure SQL. 

 

 

SQL data sync glossary of terms 

 

  • sync group is a collection of SQL Database instances and SQL Server databases that are configured for mutual synchronization by the SQL Data Sync (Preview) service. A Sync Group is comprised of a "hub" database and one or more "member" databases. The "hub" database must be a SQL Database instance. 
  • A hub database is the SQL Database instance that you defined as the "hub" when you created the Sync Group. In a Sync Group, SQL Database instances that are not the hub are "member" databases.  

 

 

How to Implement Azure data sync.  
  •  First Login to Windows azure portal and click on the SQL database. then Create a New SyncAgent.    once it get created, copy the access key which is going to used in the Sync data client.  
 Image 34
  •  Now Next Step is to configure the client sync agent. Download the client sync agent and install. open the client sync agent, and povide the following details. 
    • Provide the access key which you copied earlier
    • Register the database which you are going to sync with cloud.
    • Test the sync service via pinging .  
Sync agent client 
 
Image 36
  •  Once you done with, you can verfiy the sync group now associated with our on premises data
Image 37 
 
  • Next step is to create a Sync group. Go to SQL database menu in the portal and click on sync-> add new sync group. provide the sync group details.  make sure you enter hub username without the server name. for eg : if your SQL password is ="someUser@SomeServer.net", then you need to enter only "someUser" (ignoring the @server part).  
Image 38 
  •  The next step to provide ethe referance database detail to sync.   
    • Bi-directional – changes in the reference database are written to the hub database, and changes to the hub database are written to the reference database. 
    • Sync from the Hub - The database receives updates from the Hub. It does not send changes to the Hub.
    • Sync to the Hub - The database sends updates to the Hub. Changes in the Hub are not written to this database. 
Sync settings 
 
the next step is to add Sync Rules.You need to mention the sync rules, which consists  
  • Which tables and which columns need to sync. 
  •  Frequency of the sync operation.  
go to the SQL Database->click the  Sync(preview) menu. then click on the sync group which you created earlier.
Image 40
 
Add Sync rules and click on the sync.
Image 41 
Now you can verify the sync operation. You can even configure the frequency of sync operation 

 

Windows Azure Storage services      

Windows Azure Blob storage is a service for storing large amounts of unstructured data that can be accessed from anywhere in the world via HTTP or HTTPS. A single blob can be hundreds of gigabytes in size, and a single storage account can contain up to 100TB of blobs. Common uses of Blob storage include:

  • Serving images or documents directly to a browser 
  • Storing files for distributed access
  • Streaming video and audio
  • Performing secure backup and disaster recovery

Windows Azure provides storage services contains 3 component. 

Image 42

  • Storage Account: All access to Windows Azure Storage is done through a storage account. This is the highest level of the namespace for accessing blobs. An account can contain an unlimited number of containers, as long as their total size is under 100TB.
  • Container: A container provides a grouping of a set of blobs. All blobs must be in a container. An account can contain an unlimited number of containers. A container can store an unlimited number of blobs.
  • Blob: A file of any type and size. There are two types of blobs that can be stored in Windows Azure Storage: block and page blobs. Most files are block blobs. A single block blob can be up to 200GB in size. This tutorial uses block blobs. Page blobs, another blob type, can be up to 1TB in size, and are more efficient when ranges of bytes in a file are modified frequently. For more information about blobs, see Understanding Block Blobs and Page Blobs.  

Implementation of Azure Blob services in applicaiton.

Azure blob services can be used in application via web roles or using the Windows Azure storage SDK in applicaiton. In our application we are using a Azure MVC4 Web role  to upload the Videos to the Azure storage services. 

Prerequisites /Setup 

  • Download the windows Azure SDK 2.0 (link mentioned in the resources)
  • Log In to Windows Azure portal and create a Storage Services .

 Image 43

  • Give the url (in all lowercase). This will be an endpoint to access the blob contents on the azure cloud.  

Image 44 

 

  • Then go to the Manage Access keys and copy the Azure Storage Account name and access key in a notepad or clipboard, in order to use in our application.  

Image 45

 

 

Implement Azure Web role for Application 

 

  • Create a New Cloud Project and Add  a MVC4 Web Role, then select the Web Role and right click and select property. 

Image 46

 

  • Now you are ready to use the Azure storage, once you build the solution Windows Azure Storage Emulator will start running for localhost .if you got a error "the process cannot access the file because it is being used by another process ". then Please exit the Utorrent. as it will block the Azure storage port.  

 

netstat -p tcp -ano | findstr :10000  // run in  Command prompt(Admin) 

Image 47
 

 How we can upload the blob to the cloud. 

First we need to install Windwos Azure Storage library via nuget packages. Open the nuget package manger, then search for Windows Azure storage. 

Image 48

You can use the CloudStorageAccount type to represent your Storage Account information. If you are using a Windows Azure project template and/or have a reference to Microsoft.WindowsAzure.CloudConfigurationManager, you can you use the CloudConfigurationManager type to retrieve your storage connection string and storage account information from the Windows Azure service configuration: 

C#
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
  CloudConfigurationManager.GetSetting("StorageConnectionString"));  // Get the storage Account 

Then Next step to create  a CloudBlobClient.  A CloudBlobClient type allows you to retrieve objects that represent containers and blobs stored within the Blob Storage Service.

C#
// Create the blob client.
CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient(); 

Then Next step is to create a Container to store the BLOB objects in the cloud.  

C#
CloudBlobContainer container = blobClient.GetContainerReference("mycontainer");
// Create the container if it doesn't already exist.
container.CreateIfNotExists();

By default, the new container is private and you must specify your storage access key to download blobs from this container. If you want to make the files within the container available to everyone, you can set the container to be public using the following code:  

C#
container.SetPermissions(new BlobContainerPermissions{PublicAccess =BlobContainerPublicAccessType.Blob});

The blob storage service provided 2 flavors of blob storage: 

  • Block blobs : let you upload large blobs efficiently. Block blobs are comprised of blocks, each of which is identified by a block ID. You create or modify a block blob by writing a set of blocks and committing them by their block IDs. Each block can be a different size, up to a maximum of 4 MB. The maximum size for a block blob is 200 GB, and a block blob can include no more than 50,000 blocks. 
    • you can upload multiple blocks in parallel to decrease upload time.Each block can include an MD5 hash to verify the transfer, so you can track upload progress and re-send blocks as needed.
    • You can upload blocks in any order, and determine their sequence in the final block list commitment step. You can also upload a new block to replace an existing uncommitted block of the same block ID. 
  • Page blobs : are a collection of 512-byte pages optimized for random read and write operations. To create a page blob, you initialize the page blob and specify the maximum size the page blob will grow. To add or update the contents of a page blob, you write a page or pages by specifying an offset and a range that align to 512-byte page boundaries. A write to a page blob can overwrite just one page, some pages, or up to 4 MB of the page blob. Writes to page blobs happen in-place and are immediately committed to the blob. The maximum size for a page blob is 1 TB.

Once the container get created, now you are ready to create the files in the cloud.   

C#
// Retrieve reference to a blob named "myblob". 
CloudBlockBlob blockBlob = container.GetBlockBlobReference("myblob");
// Create or overwrite the "myblob" blob with contents from a local file.
using (var fileStream = file.InputStream)
{
    blockBlob.UploadFromStream(fileStream); //filestream is the uploaded file
}

Reading Uploaded Blobs from Azure.  

  • To read Blobs, We will use ListBlobs() method to get the blob items for the particular container  

The types of objects returned by the ListBlobs method depend on the type of listing that is being performed. If the UseFlatBlobListing property is set to true, the listing will return an enumerable collection of CloudBlob objects. If UseFlatBlobListing is set to false (the default value), the listing may return a collection containing CloudBlob objects and CloudBlobDirectory objects. The latter case provides a convenience for subsequent enumerations over a virtual blob hierarchy. 

C#
CloudBlobClient blobClient = objClient.InitBlobClient(storageAccount);
// Retrieve a reference to a container. 
CloudBlobContainer container = blobClient.GetContainerReference("mycontainer");
// Loop over items within the container and output the length and URI.
List<BlobModel> blobList=new List<BlobModel>();
foreach (IListBlobItem item in container.ListBlobs(null, false))
{
    if (item.GetType() == typeof(CloudBlockBlob))
    {
        CloudBlockBlob blob = (CloudBlockBlob)item;
        BlobModel objModel = new BlobModel();
        objModel.Url = blob.Uri.ToString();
        objModel.size = blob.Properties.Length.ToString();
        blobList.Add(objModel);
    }

Windows Azure Table storage service :

stores large amounts of structured data. The service is a NoSQL datastore which accepts authenticated calls from inside and outside the Windows Azure cloud. Windows Azure tables are ideal for storing structured, non-relational data. Common uses of the Table service include

  • Storing TBs of structured data capable of serving web scale applications
  • Storing datasets that don't require complex joins, foreign keys, or stored procedures and can be denormalized for fast access
  • Quickly querying data using a clustered index
  • Accessing data using the OData protocol and LINQ queries with WCF Data Service .NET Libraries 

Image 49 

 Prerequisite understanding for Table Storage Services 

  • URL format: Code addresses tables in an account using this address format : http://<storage account>.table.core.windows.net/<table>
  • Storage Account: All access to Windows Azure Storage is done through a storage account. The total size of blob, table, and queue contents in a storage account cannot exceed 100TB
  • Table: A table is a collection of entities. Tables don't enforce a schema on entities, which means a single table can contain entities that have different sets of properties. An account can contain many tables, the size of which is only limited by the 100TB storage account limit
  • Entity: An entity is a set of properties, similar to a database row. An entity can be up to 1MB in size.
  • Properties: A property is a name-value pair. Each entity can include up to 252 properties to store data. Each entity also has 3 system properties that specify a partition key, a row key, and a timestamp. Entities with the same partition key can be queried more quickly, and inserted/updated in atomic operations. An entity's row key is its unique identifier within a partition

 How to: Programmatically access table storage in our application. 

  • Get  the CloudStorageAccount for the specified connection string.  
C#
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
  ConfigurationManager.ConnectionStrings["StorageConnectionString"].ConnectionString); 
  • You can create a CloudTable Client. A CloudTableClient object lets you get reference objects for tables and entities. The following code creates a CloudTableClient object and uses it to create a new table. All code in this guide assumes that the application being built is a Windows Azure Cloud Service project and uses a storage connection string stored in the Windows Azure application's service configuration.
C#
// Retrieve the storage account from the connection string.
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
    CloudConfigurationManager.GetSetting("StorageConnectionString"));
// Create the table client.
CloudTableClient tableClient = storageAccount.CreateCloudTableClient();
// Create the table if it doesn't exist.
CloudTable table = tableClient.GetTableReference("video");
table.CreateIfNotExists();  
  • To add an entity to a table, create a C# POCO class that defines the properties of your entity. 
  • Identify your partition key and row key uniquely identify the entity in the table
  • Entities with the same partition key can be queried faster than those with different partition keys, but using diverse partition keys allows for greater parallel operation scalability 
C#
public class VideoEntity : TableEntity // not here we are inherting from the TableEntity
{
    public VideoEntity(string videoURl, string VideoName)
    {
        this.PartitionKey = videoURl, 
        this.RowKey = VideoName)
    }
    public CustomerEntity() { }
    public string VideoLength { get; set; }
    public string VideoGuid{ get; set; }
}    

To Insert the entities , you can use CloudTable.Execute() method.  

C#
// Retrieve the storage account from the connection string.
CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
   CloudConfigurationManager.GetSetting("StorageConnectionString"));
// Create the table client.
CloudTableClient tableClient = storageAccount.CreateCloudTableClient();
// Create the CloudTable object that represents the "video" table.
CloudTable table = tableClient.GetTableReference("video");
// Create a new videoentity.
VideoEntity videoObj= new VideoEntity("someFile.mp4", "Course1");
videoObj.VideoGuid = "AAABA-ASDSAAA-ASAA";
videoObj.VideoLength = "544444";
// Create the TableOperation that inserts the Videoentity.
TableOperation insertOperation = TableOperation.Insert(videoObj);
// Execute the insert operation.
table.Execute(insertOperation);  

Tools to Explor Azure SQL.  

 

  1. Azure Storage Explorer : Azure Blob Explorer   

Azure storage Explorer  : Azure Storage Explorer is a useful GUI tool for inspecting and altering the data in your Windows Azure Storage storage projects including the logs of your cloud-hosted applications.  

Download Link : http://azurestorageexplorer.codeplex.com/ . 

Image 50

 

  2. SQL Azure Diagnostics tool   this tool is uesed to shorten the data collection process when troubleshooting SQL Azure issues.  You can point CSAD to your SQL Azure instance, provide the appropriate credentials and will then be presented with some good summary data about your instance. 

 Image 51

 

Challenge 4 :  Windows Azure Virtual machine     

 Virtual Machines deliver on-demand, scalable compute infrastructure when you need to quickly provision resources to meet your growing business needs. 

 

Advantages of virutal maachines. 

 

  • Provision compute infrastructure at the pace your business requires. 
  • Enterprise grade support with enterprise ready products. 
  • Use the tools you know and be ready for tomorrow .
 What a virtual machine is in Windows Azure

 

 A virtual machine in Windows Azure is a server in the cloud that you can control and manage.  Virtual hard disks (.vhd files) are used to create a virtual machine. 

 

 

Image - An image is a template that you use to create a new virtual machine. An image doesn’t have specific settings like a running virtual machine, such as the computer name and user account settings.  

Disk - A disk is a VHD that you can boot and mount as a running version of an operating system. After an image is provisioned, it becomes a disk. A disk is always created when you use an image to create a virtual machine. Any VHD that is attached to virtualized hardware and that is running as part of a service is a disk. 

Why we need Virtual machine  in our application? 

 

We are opting virtual machine in order to achieve the following benefits from the  azure.

  • Ability to run elevated start up scripts to install apps, modify registry settings, install performance counters, fine-tune IIS, etc. 
  • Ability to split an app up into tiers (maybe Web Role for front end, Worker Role for backend processing) and scale independently 
  • Ability to RDP into your VM for debugging purposes. 
  • Network isolation 
  • Support for Virtual Networks( using with VPN)  

 

 

How can we create virtual machine in Azure ?

Virtual machine can be created in many ways

 

  1. Using Azure portal : Azure portal provides way to create virtual machine from the gallery or the uploaded VHD from the windows storage account.
  2. Via Powershell commands
  3. Via REST API calls
 
 So Let's create a Virtual machine in Azure Smile | <img src= " />   

 

 

  • First Login to windows azure portal -> then add new virtual machine
CreateAzureVM 

 

 

 

  • Once you provided all details then click on create virtual machine. once it get crated you can download the remote desktop connection settings from the azure portal 
RDP connection 

 

Now you can configure the settings, such as installing IIS, .net framework and even installing the required software's. 


Caputre the Configured Virtual Machine  

 

You can capture and use your own images to create customized virtual machines. An image is a virtual hard disk (.vhd) file that is used as a template for creating a virtual machine. An image is a template because it doesn’t have the specific settings that a configured virtual machine has, such as the computer name and user account settings. If you want to create multiple virtual machines that are set up the same way, you can capture an image of a configured virtual machine and use that image as a template. 

Why we need Capturing image of VM in our application

 

  • To Setup Load balancer, which will handle all the requests  
Image 55 

 

A load-balanced endpoint is a specific TCP or UDP endpoint that is used by all virtual machines contained in a cloud service. The following image shows a load-balanced endpoint that is shared among three virtual machines and uses a public and private port of 80. 

 

 

Steps to Create a Load balance system

 

  • First Create Virtual machine and configure  the IIS, SQL Server and other bits.
  • Publish the application to virtual machine.
  • Capture the configured image and use this captured image as template to create other VMs.
 

 

Step 1 : Capture the Image of VM 

 

  • First configure the Virtual machine with IIS and  Firewall rules to accept inbound traffic request.  
  • Then Next step is to Connect the Virtual machine from the RDP and run this command in command prompt with Administrator privilege . 
Capturing image 

 

and select the options as mention in the picture. 

Before you click ok, things to Consider.. 

 

  1. Add a user to your VM before running sysprep. Sysprep will disable Administrator Account - so it's impossible to connect to the vm (you have to retrace it after sysprep by adding the old disk) with Admin. Other accounts stays alive. This saved me hours - sometimes luck is on the right side.

 

Image 57

The sysprep command shuts down the virtual machine, which changes the status of the machine in the Management Portal to Stopped. The process of stopping the virtual machine may take up to 20 minutes. Once the virtual machine is stopped, you will be able to Capture the image  

Image 58

 

  • Capturing process will first create Image and then delete the virtual machine.  
 

 

Create Virtual Machines from captured Images 

Captured image provides a template image which can be used to create the virtual machine .

 

  • Create  A new Virtual machine from Portal and select from gallery. 
Image 59 
  • Now next step is to provide the credential and the cloud service URL.
  • Once the Virtual machine created, then add an endpoint to handle the HTTP requests.

Image 60

 

  •  Then provide the end point details (Port,  endpoint name ) 
Endpoint settings 

 

 Now you successfully created the endpoint and virtual machine using the captured image. 

 

Create Second virtual machine to act as load balancer   

 

  •  Create one more virtual machine in the azure portal.  While creating the second virtual machine, make sure you add VM to existing virtual machine . You can connect multiple virtual machines under the same cloud service to enable them to communicate with each other, to balance the load of network traffic among them, and to maintain high availability. For more information about connecting virtual machines 
Image 62

 

 

Once the Virtual machine created, the next step is to add the endpoints for the newly created virtual machine.   

 

Image 63

 

and finally Load balancer running  in the azure Smile | <img src= " />  

Image 65

 

 

Azure Virtual Machine management  

 

  • Via Azure powershell commands : Windows Azure PowerShell is the module for Windows PowerShell that you can use to control and automate the deployment and management of your workloads in Windows Azure. Before you can start using the cmdlets, you'll need to import the module and import the publish setting and subscription information.

 

Few commands to get started with

Add-AzureDataDisk //Adds a new data disk to a Windows Azure virtual machine object.
Add-AzureDisk //Adds a new disk to the Windows Azure disk repository.
Add-AzureEndpoint //Adds a new endpoint to a Windows Azure virtual machine.
Add-AzureProvisioningConfig //Adds the provisioning configuration to a Windows Azure virtual machine.
Add-AzureVMImage //Adds a new operating system image to the image repository.
Export-AzureVM //Exports a Windows Azure virtual machine state to a file.
Get-AzureDataDisk //Gets the data disk object at the specified LUN on the specified Windows Azure virtual machine.
Get-AzureDisk //Gets an object with information on disks in the Windows Azure disk repository.
Get-AzureEndpoint //Gets an object with information about the endpoints assigned to a Windows Azure virtual machine.
Get-AzureOSDisk //Gets the operating system disk object for the specified virtual machine object.
Get-AzureVM //Retrieves information from one or more Windows Azure virtual machines.
Get-AzureVMImage //Returns an operating system image object.
New-AzureVM //Creates a new Windows Azure virtual machine.
New-AzureVMConfig //Creates a new Windows Azure virtual machine configuration object. 

Run PowerShell Command From your mobile using Windows PowerShell® Web Access  

Windows PowerShell® Web Access is a new feature in Windows Server® 2012 that acts as a Windows PowerShell gateway, providing a web-based Windows PowerShell console that is targeted at a remote computer.

 

  • enables IT Pros to run Windows PowerShell commands and scripts from a Windows PowerShell console in a web browser, with no Windows PowerShell, remote management software, or browser plug-in installation necessary on the client device. All that is required to run the web-based Windows PowerShell console is a properly-configured Windows PowerShell Web Access gateway, and a client device browser that supports JavaScript® and accepts cookies. 
  •  Client devices include laptops, non-work personal computers, borrowed computers, tablet computers, web kiosks, computers that are not running a Windows-based operating system, and cell phone browsers 

 

Image 66

How We can setup PowerShell Web Access  ? 

Prerequisite for web Access. 

 

  • Crete A Virtual machine in the Azure   

 

Image 67

 

  • Install Azure Powershell tools in Virtual Machine http://www.windowsazure.com/en-us/downloads/#cmd-line-tools or Use web platform installer 
  • https://windows.azure.com/download/publishprofile.aspx, where you can sign in to Windows Azure account download the publish settings file. Note the location where you save this file. This file has Azure API information, your subscription ID and more importantly the management certificate that needs to be imported locally on your machine using another cmdlet. 

 

 

Create Web Access Modules in PowerShell in Virtual Machine.  

Connect to your virtual machine via Remote desktop connection, then Open the PowerShell command prompt and run this command.  

Install-WindowsFeature –Name WindowsPowerShellWebAccess -IncludeManagementTools -Restart
Import-Module PowerShellWebAccess 
Install-PswaWebApplication -useTestCertificate
Add-PswaAuthorizationRule * * *
Enable-PSRemoting -Force

  Explanation of above code. 

 

  • 1st line of code Will add a Windows Feature for the server. You can add manually from the program/features via control panel  
  • 2nd & 3rd line  of code will create Web applicaton and host it in IIS. this tool will automatically install the IIS8, .net4.5 and other prerequisite needed. 
  • We need to Authorize the user to login to the powershell session. 3 asterik (*) represents, Domain, UserName and UserGroup.
  • We need Enable the Remoting on PowerShell 

Image 68

 You can access Windows PowerShell Web Access from Internet Explore using the following URL: https://servername/pswa. (servername will be the your virtualmachine dns name, when you created it). 

Provide the UserName and password for virtual machine.

 

 

 

  • Care to take, when you are entering the username. Username should be in the format of {Yourworkgroup}\yourAdminUserName . (Workgroup can be located in the System properties, under the control panel) 
Image 69

 

Next step is to play with PowerShell Smile | :)  

First we will issue a few basic command in order to get familiar with PowerShell. Basic commands such as Date, Get-Process.

 

Image 71

 

Lets Integrate the Azure Management commanad

 

  • We need to import the subscription file  which you downloaded earlier in prerequisite steps.   and place the subscription file into c:\users\<username>\Documents 
Import-AzurePublishSettingsFile subscription.publishsettings  

Once it get imported you can play with all azure powershell commands.  http://msdn.microsoft.com/en-us/library/windowsazure/jj152841.aspx 

for eg : Get Virtual Machine detail

Get-AzureVM yourVmName  

Image 72

 

running PowerShell Web Access in Mobile devices 

running powershell web access in mobile devices 

 

 

 

Work In Progress         

  1. Building Project Architecture and repositories: Done.
  2. Building Model for CourseLearner: Done.
  3. CRUD With SQLAzure for CourseLearner : Done.

Resources  

  1. https://developers.google.com/webmasters/smartphone-sites/details
  2. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  3. http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/
  4. http://www.vanseodesign.com/web-design/why-responsive-design/
  5. http://msdn.microsoft.com/en-us/library/windowsazure/jj152841    

Future Plans

  • Integration with OAuth provider such a Facebook, Twitter
  • Integration with BlackBoard -leading E-learning provider
  • Providing Localization and globalization to course materials and increasing the course materials. 

License

This article, along with any associated source code and files, is licensed under The BSD License


Written By
Software Developer Symphony Teleca
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionMy Vote 5 Pin
Dharmesh .S. Patil3-Jul-15 1:45
professionalDharmesh .S. Patil3-Jul-15 1:45 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun11-Dec-14 17:01
Humayun Kabir Mamun11-Dec-14 17:01 
QuestionWhich tool u used to create mockup picture Pin
Tridip Bhattacharjee11-Aug-14 4:11
professionalTridip Bhattacharjee11-Aug-14 4:11 
QuestionWhat tool did you use for creating the mockups? Pin
mmisztal198027-May-13 23:46
mmisztal198027-May-13 23:46 
AnswerRe: What tool did you use for creating the mockups? Pin
Ravi Gadag27-May-13 23:47
Ravi Gadag27-May-13 23:47 
QuestionNice one. Pin
R. Giskard Reventlov23-May-13 8:09
R. Giskard Reventlov23-May-13 8:09 
AnswerRe: Nice one. Pin
Ravi Gadag23-May-13 18:34
Ravi Gadag23-May-13 18:34 
QuestionNIce Work Pin
Purushotham Agaraharam6-May-13 23:49
Purushotham Agaraharam6-May-13 23:49 
AnswerRe: NIce Work Pin
Ravi Gadag7-May-13 1:11
Ravi Gadag7-May-13 1:11 
QuestionTwitter Bootstrap? Pin
roscler3-May-13 11:04
professionalroscler3-May-13 11:04 
Nice update Ranjan. How's Twitter Bootstrap to use? Easy to use?

-- roschler
AnswerRe: Twitter Bootstrap? Pin
Ravi Gadag3-May-13 16:02
Ravi Gadag3-May-13 16:02 
GeneralRe: Twitter Bootstrap? Pin
roscler3-May-13 16:14
professionalroscler3-May-13 16:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.