About

Welcome to Alan Galiwango's site.


Switch Themes


Blue Theme        Green Theme
[ Bigger-font ]     

Links
 

Skip Navigation Links.

© Copyright galiWOOD 2007

Documentation

[ Bigger-font ]
Web Parts Project
 My Web Parts Project


Web Services
 Experimenting with Math web services


XML and RSS Feeds
Flash(SWF) with XML
XML Repeater
RSS Feeds


Styles and Design
CSS / Master Page Theme Switching


Authorization Manager
Combining Azman with Ajax To Do list
Installing Authorization Manager AZMAN


Databases and Ajax
To Do List : Ajax Enabled
AJAX Search page using google API
Real Estate Listing
District Social Risk Mitigation Project[download doc]


General topics
Minor Discoveries
General Requirements

 

----------------------------------------------------------

 

 

My Web Parts Project

URL : http://www.development.ccs.neu.edu/home/gali/webparts.aspx
Web Resources : http://www.asp.net/learn/videos/view.aspx?tabid=63&id=43
http://msdn2.microsoft.com/en-us/library/hhy9ewf1.aspx
http://blogs.msdn.com/mikhailarkhipov/archive/2006/06/12/628540.aspx

Important aspects incorporated:

Terms:
Webparts – Web Parts framework contains a set of controls that lets you organize a portal page in a way that allows users of the portal to customize the appearance, content, and behavior of its contents directly from a web browser.

 

 

Motivation: I have always wanted to understand how Google Personalized Home Page works and was fascinated by the level of control given to the user. Furthermore, this project helped me deepen my understanding of webservices as it incorporates them in the page.

Implementation: Before I go into the details, I recommend that you read this article http://msdn2.microsoft.com/en-us/library/hhy9ewf1.aspx in order to get a basic understanding of web parts.
Another general issue that I run into is that webparts work with authorization roles. I kept getting errors with un-authorized/annonymous users. Therefore, I integrated azman to ensure that only logged in users have access to this page. In order to do this, I edited my web.config file with this code: 

  <location path = "webparts.aspx">
    < system.web>

              < authorization>

                    < deny users = "?" />

                      < /authorization>

                        < /system.web>
  < /location>

Lastly, I recommend that you use internet explorer to view this project. Firefox won't let you drag and drop.  For more, see known issues at the end of this article.

Okay, let’s start. Create a new website.  

It is easiest if you start the page by specifying the design and where the webzones are going to lie, this way you can at least have a basic overview of what you want it to look like.

 

Before you deal with webparts, you need a web part manager control from the web part toolkit.

User-side controls reside in zones which you are also part of the toolkit.

So you can just drag and drop in various asp:controls into the webzones like calendar, gridview etc. Webzones only allow asp:controls to be dropped into them.

 

I used the dropdown list to control the aspects of browse, design, catalog and edit. I enable postback on the control so that it changes action on item clicked. I further included a switch statement on the dropdownlist1.selectedListValue so that for each case, the web parts manager shows the corresponding webzone i.e. if I am to pick browse from the dropdown list, the WebPartsManager.DisplayValue would be BrowseDisplay.

 

Integrating Web Services:

Create Addition.ascx – I just created a simple calculator with textboxes and an equals button. On clicking the equals button, the code would get value in textbox1 and add it to txtbox2 and display the result in label1. I incorporated some error catching in case of any failure like one inputs nothing, or letters instead of ints. For code, see Addition.ascx or Multiply.ascx in my sources tree.

 

Another subtle part of the addition.ascx code that allows us to edit it in our webparts are the properties web-browsable and personalizable.  This is implemented in my code like this: 
[WebBrowsable()]
[Personalizable()]
 
      public string Title   {
        get {
              return _text;    }
        set {

                                _text = value;

                                    Label2.Text = value;
                              }
    }

So after implementing this, when you go edit your webcontrol later on, you can edit the title and change what it is called. Try this out on my project to see how it works.

 

 Adding calculator service to our Webparts: Drop a catalog zone into our web parts. Since ascx files fall under declarative catalogs, we first add a declarative catalog into our catalog zone. Then we can edit this template.

You can simply drag the addition.ascx file that has been created into that declarative catalog zone.

Note: you can drag that addition.ascx into any other Web Zone if you want just like in my site.

 

Now once this is properly implemented, the end-user can pick catalog from the dropdown list, and then a catalog zone shows up showing him what other features he can add to his web zones. In this case, he will be able to add addition calculator to whichever webzone he picks.

Adding weather service to our Webparts: Thanks to Mikhail Arkhipov, I incorporated a weather webservice to my web parts project. What it does is parse
a free XML document from weather.gov. Weather.gov provides a free webservice whereby if you provide it with longitudes and latitudes, then it will return the
weather forecast for that region together with corresponding images.
My next step is to personalize this widget with a zipcode to longitude/latitude converter such that one only has to input their zipcode in order to get
weather data.
Related source files are : App_code/ndfdXML.cs , App_code/WeatherXMLParser.cs, WeatherControl.ascx

 

Editor Zone: Once again, just drop the editor zone control from our webparts into the page.

You can add other features into the editor zone like the behaviour,  layout, appearance editors and property grid.

 

Reset Button: Finally, there is a reset button for those that want to just go back to the default design of the page.

The code behind is only two lines, the first line resets all the zones in the scope of that user, and the second then refreshes the page.

  

PersonalizationAdministration.ResetAllState(PersonalizationScope.User);
Response.Redirect("webparts.aspx");

Known Issues:

Lack of Drag and drop in Mozilla –firefox:  Much as this site generally looks better in firefox, the drag and drop feather in the design mode for webparts still has issues in firefox. I spent countless hours trying to figure out why it does not work and there are many articles by Scott Gu explaining work arounds. Unfortunately, none have yet to work for me. I will continue to test and implement this in the future.

 

  top

 

----------------------------------------------------------

 

Math Web Services

URL : http://www.development.ccs.neu.edu/home/gali/project/default.aspx
Web Resource : http://www.w3schools.com/webservices

Acronyms:
SOAP - Simple Object Access Protocol
UDDI - Universal Description, Discovery and Integration
WSDL - Web Services Description Language
XML - Extensible Mark Up Language

Motivation: Throughout the semester, Prof. Rasala discussed webservices and even brought in a speaker from Microsoft to discuss Windows Foundation Classes. This sparked my interest as it seems to be the direction in which Web Development is going in the future.

Implementation: I must admit that I have not yet fully grokked the implementation of webservices. I understand the basics behind them. According to various sources that I've been reading, Web services are application components that communicate using open protocols and are self-contained and self-describing. Web services can be used by other applications. XML/SOAP is the basis for Web services.

top

 

----------------------------------------------------------

XML and RSS Feeds

 

Flash(SWF) with XML

URL : http://www.development.ccs.neu.edu/home/gali/swf/default.aspx
Web Resource : http://www.maani.us/xml_charts/

Acronyms:
SWF - Shockwave File

Motivation: Today I attended an interview with Pegasystems in Cambridge. One of the engineers was presenting a technology that they use whereby they embed XML into a flash SWF file to create dynamic charts. I was impressed by the  crisp design and innovative display of data they were doing so I decided to look further into it.

Implementation: The URL leads to the website where one downloads the files to use for this application. There are very many different styles of charts that you can pick from and those two are just a sample demonstration. You can modify the SWF object and XML file to determine the display of the charts.

There is also a commercial version of this application that has even more features. Even though I have not come up with a practical application of this feature, I still find it interesting to play with.  

Here is a link to the correct format of the XML files - http://www.development.ccs.neu.edu/home/gali/swf/sample.xml

top

 

XML Repeater

URL : http://www.development.ccs.neu.edu/home/gali/xmlrepeat.aspx
Web Resource : Nikunj's website

Motivation: I appreciated the ease with which Nikunj achieved the same display of XML data using the ASP Repeater control rather than complex XSLT. 

Implementation: As stated before, this was really easy with the the main part being that you have to specify the XML source path for your columns in a style similar to this.

<td> <%#XPath("reln") %> <td/>

And lastly link your datasource to the actual XML document like I did here.

< asp:XmlDataSource ID="XmlDataSource" runat="server" DataFile="~/app_data/family.xml" XPath="family_tree/category[@name='Parent']/relative">      < asp:XmlDataSource />

I would suggest starting with a simple XML document then building up towards more complex examples.

top

RSS Feeds

URL : http://www.development.ccs.neu.edu/home/gali/xmlrepeaterRSS.aspx

Once again, I used a similar concept to the XML feed except that this time I incorporated an RSS site as the data source and used a datalist control rather than an ASP repeater.

The main trick behind the grid view is defining the datasource. Luckily grid view comes with an intuitive wizard (click on the small black arrow at the top right hand corner of grid). This wizard walks you through the configuration of the data source and you have options of picking access, database, object, sitemap or xml file.

top

----------------------------------------------------------

Styles and Design

CSS / Master-Page Theme Switching

URL : http://www.development.ccs.neu.edu/home/gali/styleswitcher.aspx
Web Resource - http://www.odetocode.com/Articles/450.aspx

Acronyms:
CSS - Cascading Style Sheets

In order to switch master pages, I utilized the Scott Guru tutorial in the weblink above. There is a section whereby he explains how to load the master page as a pre-init event by either hard-coding a pre-init method in your c# file and directing it to load your desired master page or to do it directly in the asp.net page as shown below..

<%@ Page Language="C#" MasterPageFile="~/MasterPage2.master"

ie:MasterPageFile="~/MasterPage.master"

mozilla:MasterPageFile="~/MasterPage2.master"

AutoEventWireup="true" CodeFile="styleswitcher.aspx.cs"… etc.

 

As you can see, depending on the browser I am loading, my masterpage will be different and you can test this on my styleswitching page. 

Style Switching

URL : http://www.development.ccs.neu.edu/home/gali/styleswitcher.aspx
Web Resources: http://www.alistapart.com/stories/alternate/

I would redefine the steps that I followed to implement css style-switching but that would be re-inventing the wheel. This entire article by Paul Sowden defines all the steps in great detail.

The crux of css style-switching is declaring your style sheet as alternate. There are three types of stylesheets: preferred, alternate and persistent. Therefore, for css styleswitching, you would declare it like below:

<link rel="alternate stylesheet"
    type="text/css" href="YourTheme.css" title="YourThemeTitle" />

Furthermore, you have to include the js code that would actually make the call to switch your css styles. This is how you call the method from the js code within a hypertext link. 

  

<a
            href="#" 
onclick="setActiveStyleSheet('YourThemeTitle');
        
return
            false;">change style to Your Theme</a>

 

Here is a link to the actual java code.

StyleSwitch.js

top


 

----------------------------------------------------------

Authorization Manager

 

Combining Azman with Ajax To Do List

URL : http://www.development.ccs.neu.edu/home/gali/todolist.aspx

I have tried to apply some security to my To Do List by only allowing the administrator to have edit/insert/delete priviledges while normal users have only read-only access. You are asked to login and once logged in, you will be able to view the delete and edit options.

This was achieved by modifying the logged in state and annonymous state of the login control. In the logged in state, I put the gridview with all the access allowed, while in the annonymous state, I only put the gridview with read only access. Simple.

top

Installing Authorization Manager (AZMAN)

URL : http://www.development.ccs.neu.edu/home/gali/azman/default.aspx
WebResources :
MSDN  http://msdn2.microsoft.com/en-us/library/ms998336.aspx
Prof. Rasala http://www.development.ccs.neu.edu/home/rasala/sql/AccessingSQL.aspx
Scott Gu's tutorial http://weblogs.asp.net/scottgu/archive/2005/08/25/423703.aspx

Acronyms:
AZMAN - Authorization Manager
SQL - Structured Query Language
SSH - Secure Shell

 

Motivation I was impressed by the video that Prof. Rasala showed in Class, the ease of use of asp tags for membership with very little code. I also wanted restrictions on some parts of my website like my to-do list so that only admins could make changes. 

Implementation (warning** Can be very frustrating)
Install Azman: as per this MSDN link
Warning: For XP users, this site is not clear about what to download. Basically you have to download the Windows Server 2003 Admin Tools Pack plus the Windows 2000 AzMan Runtime.
Also, ignore Step 2 onwards. Only do step 1.

SSH Tunnel: Once that is complete, open a SSH tunnel 1433 to your SQL server. For instructions on doing this, go here . Make sure that the tunnel is open and running at all times from now on if you want your project to be a success.

Web.Config file: Next, make sure that your web.config file has the following statement at the beginning of its connection strings.

<connectionStrings>
<remove name="LocalSqlServer" />
<add name="LocalSqlServer"
        connectionString="127.0.0.1"Initial Catalog...etc etc.

What's happening up here is that we are going to trick your ASP.NET AzMan store into thinking that there is a local database at 127.0.0.1 but instead tunnel it to the MySQL2005 database on NEU's server. The remove name part is essential in order to achieve this.

ASP_REGSQL : Once that is completed, search for the file called asp_regsql in your .NET Framework folders and run it. The instructions say you should run it in command line but I just double clicked it and it run just fine.
Once you run it successfully, you should see images similar to the screenshots on this website .In order to know that this was successful, you should have 11 tables in your NEU supported SQL2005 database (not your local one).

The 11 database tables are:

aspnet_Applications
aspnet_Membership
aspnet_Paths
aspnet_PersonalizationAllUsers
aspnet_PersonalizationPerUser
aspnet_Profile aspnet_Roles
aspnet_SchemaVersions
aspnet_Users
aspnet_UsersInRoles
aspnet_WebEvent_Events

Note: this step has nothing to do with your ASP.NET application i.e. your Visual Studio can be closed and this step will still work. It is merely tunneling through your connection to set up the tables.

ASP.NET Configuration: Now open your Visual Studio 2005 or Visual Web Developer and click on the green ASP.NET button which is either at the very right of your Solution Explorer or under Website in the top Menu. 

(You are getting closer...)

It should open up an admin tool in a web-browser which is self explanatory. If you need help, look up a web tutorial. Under the security tab, set up a new role and create a user. Now this is the true test if all your effort has paid of, the crux of the whole process -> If you can see that new user entry on your MSSQL2005 database, you are SUCCESSFUL.
Otherwise, if you see a local database created in your AppData folder, unfortunately you have misconfigured something and will have to walk through your steps again. If it's any consolation, it took me an entire day to set this up right, not to mention two help sessions with Prof. Rasala. Needless to say, my error was a very tiny one of leaving out the web.config file step. The moral of the story is that setting up AzMan on the web is very fragile as of March 2007, so follow each step carefully. Enjoy.

top

 

----------------------------------------------------------

Databases and Ajax

 

AJAX Search Page using Google API

URL : http://~gali/googlex.aspx
WebResources :
Ken Egozi : http://www.kenegozi.com/
CodeBuiler: http://www.codeproject.com/Ajax/CoolNSimpleGoogleAJAX.asp
Google API: http://code.google.com/apis/ajaxsearch/

Acronyms:
AJAX - Asynchronous Javascript Extensions 
DHTML - Dynamic Hypertext Markup Language

Motivation I was browing the web for cool ajax implementations since the AJAX/ASP.Net downloads provided by microsoft were buggy. I came acrossKen Egozi's website which had a very cool DHTML google search box on his home page. I read more about it on Codebuilder.com where he posted a tutorial on how to do it and found that it was not that long to implement. I figured it would take me 30 minutes, but it ended up taking a couple of hours. It was a fun experience.

Implementation The easiest way to search through my personal websites and blog would be to use the world's best search engine - Google. Therefore, using the google AJAX APIs and Ken's Codebuilder article, I set off to build my own search page. I found some trouble understanding Ken's tutorial therefore I decided to dive into google's APIs and understand how they work.

You have to register on their site and get a key (2 if you want to test on your local server).

I modified the css in the googlex.aspx files a little but the main work occured in the google.js file. I commented out many of the methods that I was not going to use like blog, news and booksearch. I also modified my drawOptions method for the searcher so that it would display in a tabbed manner.

Also, I added a javascript function on top of the google api so that a search result is returned word for word as you type and there is no need to click on the google button i.e. there is no button to click.

In the results that I picked I modified the tabs to have:

My Gali: www.galiwood.com: This tab only searches my galiwood website and shows results from that site. The google API's provide methods for restricting your search results to within a certain site.

My ASP: "this very site" Unfortunately, this website is not yet searchable by the google search engine and so it does not display any results. Funny enough though, Prof. Rasala's site does show up in google.

My Blog: galiwood.blogspot.com: 

WWW and Videos: these come default from google.

top

 

To Do List – Ajax Enabled

URL - http://www.development.ccs.neu.edu/home/gali/todolist.aspx
Web Resource -  http://ajax.asp.net/Default.aspx

This one was pretty simple. Simply download the video from the above link and follow the instructions. I will just go into the possible pitfalls and problems that I run into.

a) Database issue: This tutorial connects to a local mdf database that it stores in your app_data folder. I would prefer to make this database directly on the school’s provided SQL 2005 server since we have access to that. Just open a tunnel and use your SQL Management Studio to follow the same instructions in the video, but rather than making a local database, you are making a remote one. Furthermore, in the Data Source Configuration Wizard section, don’t forget to make sure that your object data source is your SQL database rather than just an object.

b) Styles: I initially used all the existing stylesheets provided in the tutorial. However, I later changed them to suit my own themes because they did not match up well. This choice is yours.

c) AJAX: web.config! I cannot stress enough that your web.config file needs to be set up right in order for AJAX to work. See my web.config files AJAX sections for what it should have. Other than that, there really is nothing more that I can add that’s not already explained in this wonderful video tutorial. I am going to further personalize this page to intergrate AZMAN so that random users cannot just insert or edit tasks, but rather just browse. i.e. Read/ Write/ Delete privileges will be for admin only.  

top

 

Real Estate Listing

URL - http://www.development.ccs.neu.edu/home/gali/land/plot.aspx
Web Resource -  http://ajax.asp.net/Default.aspx

Motivation:  I want to create the first real estate listing for Uganda. This is a long term project since there are many aspects to it but I decided to start a small step now.

Implementation: I started by designing the database structure and here is the link to the tables.
SQL Queries [download doc]

The ASP side is basically the same implementation as my todo list with grid view and a datasource coming from the SQL database.

The new feature that I will describe is the details link which one clicks to bring up a detailed view of a particular plot of land.

In the gridview for plot.aspx, you would click the edit the columns such that instead of a datasource, it is merely a link with it's url pointing to plotDetails.aspx?pid={0}.

Next you obviously create a page called plotDetails.aspx which would have a details view control. Its datasource would be defined by the pid from the latter assigning page.

I further implemented authorization controls similar to my to-do list so that only logged in users can edit the plot.

Further Work: As I mentioned before, this is a work in progress and I plan to further implement a search feature at the front whereby a customer would input criteria of the type of land he wants and price, then only get those filtered results.

I also will implement an administrative side for the landowners to list their plots for sale.   

top

----------------------------------------------------------

General topics

 

Minor Discoveries 

CSS Styles: You can switch CSS styles, see my cssstyleswitcher.

You can go further than just Theme = "ThemeFolder" in a form and declare the particular stylesheet you want like StylesheetTheme="ParticularStyleSheet"

You can do URLMapping / Redirects in your web.config files. See the < !--URL Redirects--> in my web.config file under system.web. <urlmappings enabled="true"> </urlmappings> <add mappedurl="~/azman/login.aspx" url="~/login.aspx"> </add> <!--End of URL Redirects-->

Downloading a Word Doc : Credits go to Krishnan LN for showing me in this article how to include a link to download a word doc. in my asp.net site.

Basically you start by describing the link as a button with on click features.

Then in the code,  all you have to do is specify the path and file name of the document as a string, then use server.mapPath and octet/stream definitions in your code (see source file for this particular document or Krishnan LN). As I was reading through Krishnan's site, I remembered that Yogina had also mentioned octet stream in her presentation, and credit goes to her too.

top

 

General Requirements

Things that affect the overall site organization & layout

Comments

The general site layout should be relatively consistent through different pages, so I used only two Master pages as templates for the site. This gave me the ability to add the sitemap navigation utility on the left to help the user find their way around the website.

I have tried to make a mini summary of each experiment at the bottom of each page and saved the more detailed summary for this documentation section.

I also gave the user a brief description of different projects and experiments I have attempted by displaying them on the home page with corresponding images.

I also tried to adhere to good programming styles when working on the site.
* I kept the constants and site configuration variables in the web.config file.
* I placed C# code in the .cs codebehind file.
* I kept common utility functions in the ~/App_Code directory.
* I kept common data files, like the xml and xsl files in the ~/App_Data directory.
* I used the ~/App_Themes directory to hold CSS specifications for all parts of my site. They are further split up into different folders with intuitive names.  
* I kept all third-party javascript files required by my website in the js directory.
* I kept all images in the image directory.

top