Carl Karan Nayak

The menu in the header of my website:

Home:
This link redirects to my course home page.

Resume:
This link will take you to my resume page.

Gallery:
This link will take you to my silverlight gallery. Here I have used Slide.Show which is an open source Silverlight 1.0 control for publishing highly-customizable photo slideshows on the Web. This was my first experiment with Silverlight.

Blogs:
This link will take you to my blog entries which are in reverse chronological order by default. I have a checkbox that helps to reverse the order if required. The blog code has been adapted from the blog code provided by Professor. Richard Rasala

Source:
This link will take you to my sources server that displays the code for all the text based pages in my website. The sources server code has been adapted from the sources server code provided by Professor. Richard Rasala

Contact Me:
This link will take you to my contact page. I have written code in C# which will allow any user to send me an email. This is done using the functions provided by System.Net.Mail library.

Docs:
This link will take you to my documentation page. In my documentation page I have given a detailed description of my course work throughout this semester.

Media Pull Up Tab:
This tab displays a sub-menu for all the multimedia thats available on my website. You can use this tab to navigate to the following demos:

• DEEP ZOOM DEMO
• VIDEO GALLERY
• FLASH SLIDESHOW

The Media Pull Up Tab in the header of my website:

Experiments Pull Up Tab:
This tab displays a sub-menu for all the javaScript, C# and AJAX demos that are available on my website. You can use this tab to navigate to subMenus for each of the above.

The Experiments Pull Up Tab in the header of my website:

Data Pull Up Tab:
This tab displays a sub-menu for all the i/o (mainly XML and SQL) based demos that are available on my website. These demos are further classified as SQL, LINQ and XML experiments respectively. You can use this tab to navigate to subMenus for each of the above.

The Data Pull Up Tab in the header of my website:

Web Services Pull Up Tab:
This tab displays a sub-menu for all the web-service demos that are available on my website. You can use this tab to navigate to the following demos:

• GOOGLE MAP
• MATH WEB SERVICE
• MY RSS FEEDS

The Web Services Pull Up Tab in the header of my website:

Course Links Pull Up Tab:
This tab displays a sub-menu for all the external links related to my course. You can use this tab to navigate to the following links:

• PROFESSOR RASALA'S HOME PAGE
• PROFESSOR PETER'S HOME PAGE
• COURSE HOME PAGE
• STUDENT WEBSITES

The Course Links Pull Up Tab in the header of my website:

What I Learned

• DHTML
• CSS
• Dynamic Menu Highlighting
• ASP.NET Master Pages
• ASP.NET Authentication

Code

• MasterPage.Master - Site Layout
• web.config - Contains membership and role information
• App_Themes/White/Default.css - Default CSS for my website
• App_Themes/Black/Default.css - Another CSS for my website
• MasterPage.Master - Site Layout
• Default - The Home page to my website. It has my ASP.Net Login control and code for the login module

My goal was to learn about Silverlight and find a way to display my photos within my web site. I found this Silverlight 1.0 control. It demonstrates how Silverlight can be used to create highly customizable slideshows without much code. This was also my first experience with Silverlight.The link to my gallery is listed below:

• GALLERY

What I Learned

• Silverlight
• XML file parsing

Code

• Gallery/Albums - The gallery page in my website.
• js/SlideShow.js - The javaScript file which contains the animation logic for the slideshow.
• js/Silverlight.js - The javaScript configuration file for Silverlight.
• Gallery/Configuration.xml - Contains the configuration options I used for my slideshow.
• Gallery/Data.xml - Contains resource URL's to the images I used for my slideshow.

The Sources page, displays a list of all the files that are uploaded on the server. Sources server helps to any user to view the source code for each text based file that is uploaded on the development server. It uses AJAX update panels to change the the files-list when a directory is selected via a drop down menu and it has another UpdatePanel that gets populated when a file is selected.

The Blogs page, provides a blog for day-to-day progress in website development. The purpose of maintaining blogs is to write about problems faced when working with .Net 3.5 development. Other students can read my blogs to understand bugs that I encountered and what I did to overcome them. This is really helpful because we are all working on cutting edge software for which there is not much documentation. I have read blogs written by Prof. Rasala, Ryan Baxter and Alexander Anikul during my course and I really found them to be helpful. It not only helped me save a lot of time but also a lot of pain in working with buggy toolkits. The links to Sources Server and Blogs are listed below:

• SOURCES
• BLOGS

What I Learned

• AJAX in ASP.Net
• File I/O in ASP.Net

Code

• Blog/Default - The blogs page in my website.
• Source/Default - The sources server page in my website.
• Blog_Entries/* - The individual blog files in my website.
• App_Code/FileTools.cs - The C# file responsible for performing i/o from files.

In the Contact page, a user is able to send me feedback or a message, which is sent to my email address. The user can enter his/her Name, e-mail address and message - which must be less than 500 characters; all these fields are checked by a CustomValidator control which use regular expressions to see if the input is valid. In order to send me a message, a user has to enter an email address in another TextBox. A RequiredFieldValidator and a RegularExpressionValidator control are used to ensure that the address the user enters is indeed an email address. The code behind in order to send the email is really simple:

        // put the from address here, along with senders name
        MailAddress from = new MailAddress(string.Format(EmailTextBox.Text), 
            string.Format(NameTextBox.Text));

        // put to address here
        MailAddress to = new MailAddress("karan.nayak@gmail.com"); 

        // creating the mail message
        MailMessage message = new MailMessage(from, to);

        // put subject here
        message.Subject = string.Format(SubjectTextBox.Text);

        // put body of email here
        message.Body = string.Format(MessageBox.Text);

        // put smtp server you will use here 
        SmtpClient client = new SmtpClient("mail.ccs.neu.edu");

        // and then send the mail
        client.Send(message);

        // this is the message for the sucessful delivery of the mail
        result_message = MessageConstants.MAIL_DELIVERED;
         

Here 'from' is the user's email address and message. Body is the actual message (these values are retrieved from the TextBox text). After the user sends his message a confirm message is displayed which confirms that his/her message has been successfully sent. The link to Contace Me is listed below:

• CONTACT ME

What I Learned

• ASP.NET SMTP Support
• Regular Expression Based Validation

Code

• Contact - The contact page in my website.

Flash Slideshow

This page contains a slideshow that I created using Flash. I wanted to contrast and compare the the differences between a slideshow that can be created using flash as opposed to one that can be created using Silverlight. From this experiment I concluded that although Silverlight 2.0 has some a long way from 1.0, It still has to cover some ground when it comes to integrating multimedia from different hetrogenous sources. The link to my flash album is listed below:

• FLASH ALBUM

What I Learned

• Flash
• Embedding objects in .aspx pages
• Animation in Flash

Code

• flashAlbum - My flash album made using Macromedia Flash

---

Video Gallery

This page contains a video gallery that I created using Silverlight. I have used a Silverlight video player which is implemented using xaml and javaScript. I have provided a dropdown menu via which a user can select a video to play in the video player. This selection is validated on client side and the selected file is played in the player. The link to my video gallery is listed below:

• VIDEO GALLERY

What I Learned

• Designing layouts in xaml.
• Using Silverlight to play windows media videos.
• javaScript validation

Code

• Media/SilverlightVideoPlayer - My video gallery made using Silverlight
• Media/wmvplayer.xaml - The XAML file that contains the implementation logic for the player
• js/Silverlight.js - The Javascript file for instantiating the silverlight plugin
• js/wmvplayer.js - The Javascript file that contains all the scripting logic

---

Deep Zoom Demo

This page contains a demo to Deep Zoom that I found on the Silverlight galleries on Silverlight.net. Microsoft has now provided a Deep Zoom example that allows you to control each image individually while still retaining the layered zooming and fading effects that Deep Zoom is really known for. I found the demo fascinating, so I have incorporated the same in my website. The demo is embedded in my .aspx page using IFRAMES. I thought this is a great opportunity to use an IFRAME to allow external projects to be incorporated into my website without effecting website layout. The embedding code is as follows

            <div><iframe src="DeepZoomOutput.html" 
            width="100%" height="500px"></iframe></div>
        

The link to my Deep Zoom demo is listed below:

• DEEP ZOOM

What I Learned

• Using Deep Zoom in Silverlight.
• How to include Standalone Silverlight projects in an Asp.Net website.
• Embedding external pages in .aspx pages using IFRAMES

Code

• Silverlight/DeepZoomOutput - This page contains my Deep Zoom demo.
• Silverlight/* - This is a folder which contains the Standalone Silverlight Web Project.

Snake Game

This page contains the snake game that we all know and love to play on our cell phones. I have added this game on my personal website to demonstrate the power of javaScript. The game is completely implemented in javascript and its layout is controlled via css. Both the JavaScript and the CSS are present with the ContentPanel itself. The link to the snake game is listed below:

• SNAKE GAME

What I Learned

• Animation using JavaScript
• CSS
• Embedding Javascript and CSS within the body of .aspx pages

Code

• JavaScript/SnakeGame - My Snake Game made using Javascript

---

Sudoku Game

This page contains the Sudoku game that we all know and love to play in the newspapers. I have added this game on my personal website to allow a user to play the same online. The game is completely implemented in javascript and its layout is controlled via css. The JavaScript for the game is embedded within the web page itself. However, using the external CSS for the sudoku game proved somewhat tricky, since a the styling of the master page depends on the CSS file I already created. If I add in new css files in the header of my sudoku content page, it will overload styles which will make the master section render incorrectly. So, I decided to link the css file externally and then override the conflicting styles using Theming. The link to the sudoku game is listed below:

• SUDOKU GAME

What I Learned

• Animation using JavaScript
• CSS
• Embedding Javascript within the body of .aspx pages

Code

• JavaScript/Sudoku - My Sudoku Game made using Javascript
• App_Themes/sudoku.css - The CSS for the layout of the Sudoku Game

---

Shuffle Game

This page has a picture shuffle game. I found the shuffle game on Dhtml Goodies. This game too has been completely implemented javascript and css. In order to play the game you should first shuffle the picture. After that just click any puzzle piece which is next to the blank space to move it into the blank space. The objective of the game is to reconstruct the original Image in as few moves as possible. You can also modify number of columns and rows to get more or fewer puzzle pieces. You may even select a new picture if you desire.The link to the shuffle game is listed below:

• SHUFFLE GAME

What I Learned

• Animation using JavaScript
• CSS
• Embedding Javascript within the body of .aspx pages

Code

• JavaScript/Shuffle - My shuffle Game made using Javascript
• App_Themes/shuffle.css - The CSS for the layout of the Shuffle Game
• Images/... - The image source for the Shuffle Game

HTML Utilities

This is a utility which is used to convert any HTML tags into text safe HTML. This is an invaluable tool for blogging, especially when you want to include some of your source code in your blogs. This tool avoids un necessary rework of always converting HTML tags into their text equivalents. In the same way one can convert text into links using the linkify tool Text-2-AnchorTag. This tool is adapted from code provided by Prof Richard Rasala.The link to HTML Utilities is listed below:

• HTML UTILITIES

What I Learned

• How to Map the Server Context Path
• Performing File I/O via C#

Code

• CS_Util/Html2Text - A tool I use to convert HTML to text safe HTML.
• App_Code/FileTools.cs - The C# file responsible for performing i/o from files.

---

Word Editor

This is a utility which is used to convert any Text into HTML. I have borrowed some of the code from Moxiecode Systems AB. This application is called TinyMCE. TinyMCE is an open source platform independent web based Javascript HTML editor. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. This tool is basically an extension of Professor Peter Douglas Html-to-Text tool. This tool gives you the ability to edit TEXT in a MS Word like editor. After adding this tool to my website I can write blogs using this word editor to get the equivalevt HTML. I can create blogs only when I'm logged in as an Admin. However any other user can use this tool to create the HTML markup for their blogs. The link to the word editor is listed below:

• WORD EDITOR

Blog entries are created using the following code:

    // creating the file entry using I/O
    string fileName = FileNameTB.Text + ".htm";
    string blogSubject = "<h3>" + subject.Text + "</h3>";
    string blogContent = htmlContent.ToString();
    info.Text += "<br/><br/><font color='red' size='larger'><b>
                    BLOG ENTRY CREATED !!!</b></font>";
    try
    {
        string path = FileTools.GetRoot(this);

        // getting a handle to the Blog_entries folder 
        // to create a blog entry
        path += "/Blog_Entries/";

        if (!File.Exists(path + fileName))
        {
            // getting a handle to the Blog_entries folder 
            // to create a blog entry .Create an instance 
            // of StreamWriter to write to a .htm file.
            // The using statement also closes the StreamWriter.                    
            using (StreamWriter sw = 
                    new StreamWriter(path + fileName))
            {
                // Add some text to the file.
                sw.Write(blogContent);
                sw.Write("<br/><hr />");
                return;
            }
        }
        else
        {
            info.Text = "<font color='red' size='larger'>
                        FILE NAME EXISTS</font><br/>";
            post.Visible = false;
            cancel.Visible = false;
            return;
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex);
    }
         

I have also written the following method which converts special HTML escape characters to their equivalent string values.:

What I Learned

• Integrating 3rd party tools in Asp.Net
• File I/O using C#
• HTML Parsing.
• Asp.Net Authentication.

Code

• CS_Util/WordEditor - My Word Editor for blog creation.
• js/tiny_mce - The folder containing all the resources required by TinyMCE.

---

Search Tool

I have added the search tool developed by Professor Peter Douglas. In case I need to search for the occurance of a "string" within the files on my site. Its benificial to all the people who refer to my modules. This a fantastic tool developed by Professor Peter Douglas. Although I would like to add this search tool to my home page itself, I could not do so because of time constraints. I have modified the code to display custom messages and added AJAX update panels. At the same time I have added file extensions to the list of excluded files. The link to the search tool is listed below:

• SEARCH TOOL

What I Learned

• File I/O using C# code behind.
• Using regular expressions for searching patterns.

Code

• CS_Util/SearchTool - The Search Tool developed by Professor Peter Douglas.
• App_Code/FileTools.cs - The C# file responsible for performing i/o from files.

Canceling Postback

There are times when an asynchronous update is taking place and we do not know if there is any progress being made. Professor Rasala had suggested that there should be some mechanism to either animate the update panel while the update was taking place or even cancel the updation of panel if the asynchronous update if it is taking too long. Hence I made a mini project where I will allowed a user to cancel an async postback in AJAX by using the cancel option. Clicking the cancel button will call a javascript Abort() method which will cancel async Postback.The link to this demo is listed below:

• CANCELING POSTBACK

The JavaScript code for canceling async postback is given below:

The UpdatePanelAnimationExtender code is given below:

What I Learned

• AJAX
• GridView
• CSS
• JavaScript

Code

• AJAX/AJAXGridViewAnimation - A page where I have animated the GridView.
• App_Data/customers.xml - The Datasource for the GridView.

---

Customer Table Administration

This project demonstrates how to populate the ModalPopupExtender from both C# and JavaScript and how to update a table (in this case an XML Data Source) using a ModalPopupExtender. Here I use a popup to allow a user to edit and delete an customer table entry. Any anonymous user will be able to edit a customer table entry. I have even added the feture which will enable a user's decision to be remembered so that, in the future the application will not ask the user for confirmation. The link to this demo is listed below:

• CUSTOMER TABLE ADMIN

The code for populating the DetailsView within a ModalPopupExtender is given below:

What I Learned

• AJAX
• GridView
• DetailsView
• Databinding of AJAX componenets from code behind

Code

• AJAX/AJAXEditCustomerTable - A page where I have performed databinding with AJAX components.
• App_Data/customers.xml - The Datasource for the GridView and the DetailsView.
• web.config - Contains membership and role information

Animating GridViews

I made a mini project where I displayed a ModalPopup when the GridView was being updated. Sometimes update panels work so well that we do not realize that the page content has been updated. There are times as well when an asynchronous update is taking place and we do not know if there is any progress being made. Professor Rasala had suggested that there should be some mechanism to either animate the update panel while the update was taking place or even cancel the updation of panel if the update is taking too long. So I decided to animate the Update Panel by showing a progress indicator while a grid view is being updated. For this I have used the ModalPanel extender and some gifs to simulate some kind of a progress indicator.The link to this demo is listed below:

• GRID VIEW ANIMATION

What I Learned

• AJAX
• GridView
• CSS
• JavaScript

Code

• SQL/GridViewAnimation - A page where I have animated the GridView.
• App_Data/customers.xml - The Datasource for the GridView.

---

LINQ to SQL Profiling

This project demonstrates how the LINQ to SQL runtime generates SQL statements in order to interact with the DBMS. This demo will help you to better understand, how LINQ to SQL works. The SQL genetated by the DataContext instance is displayed in the in a TEXTAREA HTML element. The Log property of the DataContext class specifies what SQL query or command should be written to the destination. The link to this demo is listed below:

• LINQ-TO-SQL PROFILING

The LINQ-TO-SQL class is given below:

The code for the LINQ-TO-SQL profiler is given below:

What I Learned

• AJAX
• GridView
• CSS
• LINQ to SQL

Code

• SQL/Under_da_hood - A page where I have performed animation of GridView.
• NorthWind.mdb - The Datasource for the GridView.
• NorthWind.dbml - The LINQ-to-SQL class.
• web.config - Contains SQL Connection strings

Course Address Book

I made a mini project which is LinkedIn Style Address Book with the ListView and LinqDataSource Controls. LinkedIn has a nice looking address book widget that displays all of your connections partitioned by last name. To the left of the contact listing is an index that allows you to jump right to a section. I have taken Prof. Richard Rasala's LINQ to Student XML Data experiment and extended it to represent an address book - making use primarily of LINQ to XML, the LinqDataSource and a couple of ListView's.The link to this demo is listed below:

• COURSE ADDRESS BOOK

A screenshot of my address book is given below:

The LINQ query is given below:

What I Learned

• LINQ to XML
• ListView
• CSS

Code

• LINQ/Address_Book - A page where I have created the course address book.
• App_Data/student_2008.xml - The Datasource for the ListView.

---

Tag Cloud Filter

This is my experiment on a Tag Cloud Filters with ASP.NET 3.5's LinqDataSource and ListView Controls. The control is a datagrid of sorts that allows you to filter the contents of the grid using a tag cloud. There are many applications of these Tag cloud filter Controls, most commonly these controls are used to filter topics of interest while browsing a web-site. I have used an XML data source to drive the content within the List View and my content is images. The link to this demo is listed below:

• TAG CLOUD FILTER

A screenshot of my tag cloud filter is given below:

The LINQ query for filtering images is given below:

What I Learned

• AJAX
• How to create a tag cloud
• ListView
• LINQ to XML

Code

• LINQ/TagCloudFilter - A page where I have implemented a tag cloud.
• Images/icons - The folder containing the images for the tag cloud filter.
• App_Data/icons.xml - The Datasource containing image URL's and tags for the ListView.

XML Guest Book and Admin modules

I made a mini project which contains my guestbook. For the guestbook, I chose not to use a database, instead I used an XML file for storing the Data. XML is lightweight and you can format the look and feel easily using XSLT and you can also open it direct with Notepad. You don't have to worry about the connection string especially if you migrate your website to different hosting provider. While the administration module for this demo uses role management. As an administrator I can choose to delete entries from my guestbook. For this only users with adminstrative privilidges will have a REMOVE button visible to them. The link to this demo is listed below:

• GUEST BOOK
• GUEST BOOK ADMIN (YOU HAVE TO BE LOGGED IN AS AN ADMIN FOR THIS)

What I Learned

• XML
• ASP Repeater
• File I/O
• ASP.NET Authentication

Code

• XML/GuestBook - A page where I have implemented my XML based guest book.
• XML/GuestBookAdmin- The administration module to my Guestbook.
• XML/GuestBook.xml - The Datasource for the Repeater.

---

Silverlight Clock

This is my experiment with a Silverlight clock. This clock gets its time by using the Date object. Once it gets the date object it uses the methods of the date object to get the minutes, seconds and hours respectively. Then it proceeds to create the animations for the clock. I have used javascript to allow a user to change the background image for the clock. The clock demo itself is embedded within an IFrame on my .aspx page. The link to this demo is listed below:

• SILVERLIGHT CLOCK

What I Learned

• IFRAMES
• javaScript
• XAML

Code

• XML/SilverlightClock - The page where I have embedded my Silverlight Clock.
• XML/Clock.xaml - The XAML file for the design and layout of the silverlight clock.
• XML/clockDemo1.html - The html file containing my Silverlight Clock.
• XML/clockDemo2.html - The html file containing my Silverlight Clock.
• js/Clock.js - The Javascript file which creates and animates the Silverlight Clock.
• js/createSilverlight.js - The Javascript file which configures the Silverlight Clock.
• js/Silverlight.js - The Javascript file for instantiating the silverlight plugin

Google Map

I added a google Map to my website. The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. The API provides a number of utilities for manipulating maps and adding content to the map through a variety of services, allowing you to create robust maps applications on your website. The Map Search Control is a simple to use application of the Google AJAX Search API that is designed to let you easily add a searchable map to your pages, sites, and blogs The link to this demo is listed below:

• GOOGLE MAP

What I Learned

• How to Work with Web Services
• Using The Google Web Services API
• AJAX

Code

• WebServices/WS_GoogleMap - A page where I have used Google Map.

---

Math Web Service

This intention was to learn how to create web Services. In this demo I have created my own Math Web Service. I have even published my web service on my personal website. this web service has four methods namely:

• ADDITION
• SUBRACTION
• MULTIPLICATION
• DIVISION

The links for this demo are listed below:

• MATH WEB SERVICE
• MATH WEB SERVICE DESCRIPTION

A screenshot of a web service defination:

A screenshot of how to invoke a web service:

What I Learned

• Web Services in ASP.Net

Code

• WebServices/MathWebService - The page where I have created my own Web Service.
• App_Code/MathService.cs - The C# file that implements the Math Web Service
• Server/MathService.asmx - It points to the location where the web service implementation is present
• web.config - Here I have defined my web service protocols.

---

Consuming RSS Feeds

This intention of this project was to work with RSS. This page contains the my RSS feeds from various useful sources. I had seen a demo performed by Vijay during one of the classes and I decided to incorporate the same into my website. I always wanted to provide RSS feeds from popular sites, Really Simple Syndication (RSS 2.0). RSS content can be read using software called an "RSS reader", "feed reader" or an "aggregator". RSS formats are specified using XML, a generic specification for the creation of data formats. I have integrated AJAX update panels for populating the DropDowns menus with Feed Sources from C# code behind. Obviously, as always my UpdateModes on all the UpdatePanels is set to Conditional for performance reasons. My RSS Feed-Source URL is read from an XML data source, this gives me the ability to change the feed itself without ever having to recompile the site code.

I have provided RSS feeds for various topics like :

• NEWS
• WEATHER
• SPORTS
• DEVELOPMENT
• ENTERTAINMENT

The problem with reading feeds from external sources is that, I cannot control the content of the feed. Sometimes the feed contains images, which may or may not be rendered properly on my site. I had to search through a lot of feeds to get the ones that I actually liked. Once the rssStream is retrieved I load it as an xml file and parse it to display the text. I have also integrated popular feeds on my home page, so any user can directly go to one of these feeds directly. In this situation I will then populate the page using the parameters passed to me via the QueryString. While in any other circumstance, the user would have to select a feed topic followed by a feed source and then the feed would be displayed on the web page.

The link for this demo is listed below:

• RSS FEEDS

A screenshot of popular RSS links on my home page:

A code for reading a RSS feed is given below:

What I Learned

• RSS
• AJAX
• Query Strings
• XML Query Filtering

Code

• WebServices/RssFeed - The page where I have consumed RSS feeds.
• App_Data/rss-feeds.xml - The URL's for different RSS feeds
• Default - This page has the shortcuts for popular RSS feeds