Tuesday, July 27, 2010

Transfagarasan Alpine Road Trip


Transfagarasan Alpine Road Trip
(July 2010)

So, after several attempts and plans to start this journey, we finally did it !
Why so ? Because, being an alpine road, Transfagarasan is opened for public only 3 months a year and many of our weekends where fulfilled with other things.

Tranfagarasan = prefix "trans" + "Fagaras" - it is probably the most spectacular road from Romania; called also "drumul din nori" ("the clouds road"), it links the historical romanian regions of Muntenia and Transilvania, over the Fagaras Mountains, Meridional Carpathians.
With a total length of 151 km and denoted as DN7C road, the Transfagarasan road starts in Bascov locality (Arges county) and ends at Cartisoara locality (Sibiu county); the total length of road curves measures 91 km.
The Transfagarasan was build between 1970 - 1974 by Ceausescu, as a strategic road over Fagaras Mountains.

Road Map of Tranfagarasan

From South to North, the first segment of Transfagarasan starts with the Vidraru Hydropower from the Cetatuia massive. The massive takes this name ("Cetatuia" = citadel), because nearest the hydropower we may see the Poenari Citadel, built between the 13-th and 15-th centuries and finalized by prince Vlad Tepes. The access to Poenari Citadel is made via 1480 stairs way.

Cetatea Poenari (Poenari Citadel)

Then, Transfagarasan climbs via serpentines and viaducts to the Vidraru Dam which at the build time was the 8-th hydroenergetical dam from Europe.
Viaduct to Vidraru Dam


Way to Vidraru Dam

Vidraru Dam - View from bottom

Located between Fruntii mountains and the Ghisu massive, the lake formed by Vidraru Dam gathers the rivers of Capra, Buda, Doamnei, Cernat and Topolog and unifies them together with Arges river.

Vidraru Lake - View from Vidraru Dam

The total flow raises to 5.5 m3/s.

Vidraru Lake and Dam

Vidraru Dam - View from Dam

 
Vidraru Dam - View to the Bottom


Vidraru Dam - For your stamp collection

The total surface is approx 900 ha with a length of 10.5 km, a maximum width of 2.2 km and a circumference of 28 km.

Electricity Symbol of Vidraru Dam

The maximum depth is 155 m, near the dam which has a height of 166 m and a length of 310 m. A stop here is mandatory.

Then the way follows the Vidraru lake to the north and passes abundant forests.

 South part view of Fagaras Mountains

 
 South part view of Fagaras Mountains

South part view of Fagaras Mountains

South part view of Fagaras Mountains
South part view of Fagaras Mountains

The road starts to climb to the Capra Waterfall, located also in the south part of Transfagarasan.


 South part view of Transfagarasan


 South part view of Transfagarasan

 South part view of Transfagarasan

Side view of Capra Waterfall

Top view of Capra Waterfall


South view to top of Fagaras Mountains
 South view to top of Fagaras Mountains

The road passes the highest peaks of Fagaras Mountains via a 887 m tunnel that links the south and north parts of Transfagarasan.

View to the tunnel that links South and North of Transfagarasan

After the tunnel, it follows the "Golul Alpin" (Alpin Hole) reservation, near the glacial lake Balea, where another stop is mandatory.

North view to top of Fagaras Mountains

Balea glacial lake

Surroundings of Balea glacial lake

Surroundings of Balea glacial lake

Near Balea glacial lake you may see here spectacular images with the north part of Transfagarasan.

Spectacular north view of Transfagarasan

After wondering on these images, the fog and cold came down to Fagaras Mountains.

Fog over Transfagarasan

Fog over Balea glacial lake

So, we made plans to follow the north side of Transfagarasan road which downs to the Balea Waterfall which has a length of 68 m at an altitude of about 1230 m.

 
North part view of Transfagarasan

 
North part view of Transfagarasan

North part view of Transfagarasan

North part view of Transfagarasan

North part view of Transfagarasan

 
North part view of Transfagarasan

Top View of Balea Waterfall 


Small waterfall at the base of Balea Waterfall

Transfagarasan ends in serpentines at Cartisoara, where it  meets the E68 road, between Brasov and Sibiu cities.

All these resulted in an unforgetable trip.

Monday, July 12, 2010

Zend Server and Zend Studio Configuration for PHP Debugging

Zend Server and Zend Studio Configuration for PHP Debugging

Disclaimer: this article should be read as is; it exposes only my study case and is intended to give you some hints.

Prerequisites:
In order to take advantages of Zend PHP technology, you will need:
- an OS: Windows 32/64 bits, Linux, MacOS; for MacOS, Zend still have some integration problems; in our case, I'll use Windows 32bit;
- Zend Server Community Edition from here: http://www.zend.com/en/products/server-ce/downloads
- Eclipse PDT All-in-one from here: http://downloads.zend.com/pdt/all-in-one/helios/zend-eclipse-php-helios-win32-x86.zip

Notice:
The above Zend versions are intended for community use, so they are somehow limited, but you may still develop good code.
Nevertheless, Zend also offers fully distributable versions:
- Zend Server, from here: http://www.zend.com/en/products/server/downloads;
- Zend Studio, from here: http://www.zend.com/en/products/studio/downloads;
We will focus next on Community Editions, namely: "Zend Server Community Edition" and "Eclipse PDT All-in-one".

Zend Server Community Edition Quick Overview:
This is an PHP Application Server and implies use of:
1. a Business layer, represented by a Database container (Oracle, MySQL, DB2, mSQL, aso) and PHP libraries to link the Database container to PHP, as described in php.ini config file;
2. a Web layer, represented by a Web Server (Apache Coyote, Microsoft IIS) to which the PHP API is exposed;
3. the Zend Debugger will make use of the Web Server in order to ensure PHP projects debug;

Notice: As a difference regarding Zend Server, the Zend Server Community Edition does not include application monitoring, diagnostics and page caching.

Eclipse PDT All-in-one Quick Overview:
It is an IDE used for developing PHP applications.
It uses IBM's Eclipse as basic IDE, on which there is applied a Zend wrapper also known as Helios, to ensure the PHP specific development operations (editor, interpreter, debugger, internal web browser, aso).
You will have the full Eclipse capabilities in editing PHP, PHP, help, debug, aso.
Application debug will make use of the Zend Debugger, so a version of Zend Server should be installed to offer the required support (in our case, we will use "Zend Server Community Edition").

General Considerations
"Zend Server and Zend Studio Configuration for PHP Debugging" is an article written for both beginners and advanced PHP users, who haven't used Zend before.
In this sense, we will have from now 2 sections, namely "PHP Zend Debugger Configuration for Begginers" and "PHP Zend Debugger Configuration for Advanced Users".
I will assume that beginners haven't installed any of these components: Web Server (Apache Coyote), MySQL 5 DB, PHP CGI environment, Zend Server Community Edition, Eclipse PDT All-in-one.
I will also assume that advanced users haven't installed Zend Server Community Edition, Eclipse PDT All-in-one, but they have installed the Web Server (Apache Coyote), MySQL 5 DB and PHP CGI environment.

Notice: As you may have seen, I refer to Apache Coyote as the Web Server used to access PHP applications. Another Web Server that may be used is the IIS (Internet Information Service) from Microsoft, but I do not recommend this approach if you intend to deploy a PHP application on a Unix/Linux based server.

Installation Notes
After you downloaded "Zend Server Community Edition" and "Eclipse PDT All-in-one", you will have to follow these steps:
1. extract the content of "Eclipse PDT All-in-one" ("zend-eclipse-php-helios-win32-x86.zip") to C:\eclipse; optionally, make a shortcut to eclipse.exe on your desktop;
2. install "Zend Server Community Edition" ("ZendServer-CE-php-5.2.13-5.0.2-Windows_x86.exe", or current Zend version);
2a. You will be asked for a Web Server - choose "apache web server" new install and look if the port on which it will be started is occupied or not; by default, Zend proposes the "80" port, but it is usually occupied; if so, then choose other port and retain it; for example, I use "http://localhost:8880" (the port is 8880);
2b. the installer will propose a port for the Zend Server, by default it is set to "10081" - be sure you retained it; so the Zend Server will rule at "http://localhost:10081";
2c. install the database support: DB2, MySQL5, aso; provide the necessary configuartion for the database support; if you already have the database support installed, then the installer will only configure it to integrate with Zend Server;
2d. open Zend Server in browser ("http://localhost:10081") and set the access password;

PHP Zend Debugger Configuration for Begginers

Debug Configuration

Notice: Be sure you read also the "Setting the Web Server Deployable Content - A Study Case" section below, after you start to configure the debug following the steps below.
The Debug Configuration is made from "Eclipse PDT All-in-one".
So, open "Eclipse PDT All-in-one" from the shortcut you created on desktop;
1. Accept the workspace offered and close the "welcome" window;
2. Choose from the menu "File" -> "New" -> "PHP Project", type a name for the project (for example "MyProject"); leave "Create new project in workspace" radio checked; check "Use project specific settings" and set the project version to "PHP 4" or "PHP 5" - the PHP version you want to use further; check also "Enable JavaScript support for this project" which will help you use JavaScript in the future; then click Finish - the project was created;
3. With "MyProject" selected in "PHP Explorer", choose from the menu "File" -> "New" -> "PHP File"; set the File Name to "myFile.php"; click Finish;
4. Open "myFile.php" and enter this text:
<?
echo("Hello World");
?>
5. Save "myFile.php", then save the project;
6. With "MyProject" selected in "PHP Explorer", choose from the menu "Window" -> "Preferences", expand the "PHP" node, and set:
6a. "PHP Executables" -> select one from the list and click "Set Default;
6b. "PHP Interpreter" = choose the "PHP Version" to the PHP version you created the project;
6c. "PHP Servers" -> Choose "Default PHP Web Server", click "Edit" and set the Server URL to "http://localhost:8880" (or the Apache Web Server port you specified in Zend Server installation); Path Mapping -> click "Add" -> Path on Server="C:\Program Files\Zend\Apache2\htdocs\MyProject", Path in Workspace="/MyProject"; click "OK";
7. from the "Run" menu -> "Debug" -> right click on "PHP Web Page" -> "New"; a Debug Configuration form will appear; choose "Server Debugger": Zend Debugger; "PHP Server": Default PHP Web Server; click on "Test Debugger"; if the answer is "Success" then you successfully configured the Zend Debugger; to debug the "myFile.php", browse for it at "File", then hit Apply -> Debug;

Setting the Web Server Deployable Content - A Study Case
The above written "Debug Configuration" represents how it should be.
In reality, using the workspace provided by "Eclipse PDT All-in-one" implies that you create the project at that workspace specified location, which is by default "C:\Documents and Settings\[windows_user]\workspace", where "[windows_user]" represents the current user logged in windows.
The web browser (usually Apache) installed by the "Zend Server Community Edition" will rule at other location, usually: "C:\Program Files\Zend\Apache2".
Also, if you chosen to configure Microsoft IIS ("Internet Information Service"), the location where server will rule is usually: "C:\Inetpub".

When you configure debug you are asked for a "Path Mapping" of the server (see "Debug Configuration", step 6c), but this path is not helping you a lot, as your project is created at "C:\Documents and Settings\[windows_user]\workspace".
At this moment you should create a server deployment location, meaning that when starting to debug or run the project, the public project files will be copied from "C:\Documents and Settings\[windows_user]\workspace" to the "Mapping Path" - "C:\Program Files\Zend\Apache2\htdocs\MyProject".

You go to "Eclipse PDT All-in-one" menu -> "Window" -> "Show View" -> "Other" -> "Server" -> "Servers" and click OK. A new view "Server" will be opened below. On this view you notice there is no server, so you right click -> New -> Server and try to set the Apache Web Server installed by "Zend Server Community Edition" at location "C:\Program Files\Zend\Apache2". In case you cannot set this Server, as it happened to me, then you a big problem.
To avoid this problem, you actually will have to create your project at the web server projects container location, which is:
- for Apache: "C:\Program Files\Zend\Apache2\htdocs";
- for IIS: "C:\Inetpub\wwwroot";

Using Windows Explorer or other File Browser you go to "C:\Documents and Settings\[windows_user]\workspace" and delete the "MyProject" folder, as the project is not useful for debug from that location.
Then go to "C:\Program Files\Zend\Apache2\htdocs" and create there a new folder, namely "MyProject".
Now, I'll modify a little the "Debug Configuration" section.
Open "Eclipse PDT All-in-one" from the shortcut you created on desktop.
1. Accept the workspace offered and close the "welcome" window;
2. Choose from the menu "File" -> "New" -> "PHP Project", type "MyProject" as the name for the project; check "Create project at existing location" and browse for the project you creted with Windows Explorer ("C:\Program Files\Zend\Apache2\htdocs\MyProject"); check "Use project specific settings" and set the project version to "PHP 4" or "PHP 5" - the PHP version you want to use further; check also "Enable JavaScript support for this project" which will help you use JavaScript in the future; then click Finish - the project was created;

Next you follow the rest of the steps at "Debug Configuration" section.
You will see that debug will really work.


PHP Zend Debugger Configuration for Advanced Users
It is supposed that the PHP developer will have installed the Web Server (Apache Coyote), MySQL 5 DB and PHP CGI environment, where there is also set a PHP project on a given and required configuration.
The PHP developer however wants to install the "Zend Server Community Edition" and "Eclipse PDT All-in-one", but he also wants to use the existing Apache Web Server and PHP environment.
For example, I have already installed an Apache Coyote version 2.2.2 web server and in its "\conf\httpd.conf" I have a section where I configured the PHP like this:
<<
# PHP 5:
#LoadModule php5_module "c:/php5/php5apache2_2.dll"
#AddType application/x-httpd-php .php

# PHP 4:
LoadModule php4_module "c:/php/php4apache2_2.dll"
AddType application/x-httpd-php .php

# configure the path to php.ini PHP 5
#PHPIniDir "C:/php5"

# configure the path to php.ini PHP 4
PHPIniDir "C:/php"
>>
This section tells Apache that it will use PHP4 and the "php.ini" (PHP configuration file) from a given location where I installed my PHP 4.
So, I want to use my configuration, but with the Zend capabilities.

In this case you should follow the steps described at "Installation Notes" to install the "Zend Server Community Edition" and "Eclipse PDT All-in-one".

Notice: after installation, you will practically have now 2 Apache Web Servers: the one installed before by you and the one installed by "Zend Server Community Edition".

It is important for you to know how these web servers are started. The new installed Apache is started as Windows Service, so you will have to stop it and use your own. Go to "Start" -> "Settings" -> "Control Panel" -> "Administrative Tools" and stop the new installed Apache Server (the service will appear as "Apache2.2-Zend"); right click the service -> properties -> choose "startup type" as "Manual" and click "stop" then "OK".

For example, my Apache is located at "C:\Program Files\Apache Software Foundation\Apache2.2", while the one installed by Zend is located at "C:\Program Files\Zend\Apache2".
I will refer to your own Apache path as "C:\[your_apache_path]".

Now, you'll have to configure your own Apache to be used by "Zend Server Community Edition".
1. You stop for the moment your own Apache server ("C:\[your_apache_path]") while you configure it.
2. You go with Windows Explorer to "C:\Program Files\Zend\Apache2\conf", copy "zend.conf" from there and paste it into "C:\[your_apache_path]\conf".
Then you open the "C:\[your_apache_path]\conf\httpd.conf" and do the next:
2a. uncomment the line "LoadModule rewrite_module modules/mod_rewrite.so" (delete "#" from the beginning of line), as this module is used by zend.conf;
2b. add the line "Include conf/zend.conf" at the end of "C:\[your_apache_path]\conf\httpd.conf";
3. start your Apache Server; it should not give any starting errors;

Next you may follow the "Debug Configuration" and "Setting the Web Server Deployable Content - A Study Case" sections, with a difference.
Instead:
<<
6. With "MyProject" selected in "PHP Explorer", choose from the menu "Window" -> "Preferences", expand the "PHP" node, and set:
6a. "PHP Executables" -> select one from the list and click "Set Default;
6b. "PHP Interpreter" = choose the "PHP Version" to the PHP version you created the project;
6c. "PHP Servers" -> Choose "Default PHP Web Server", click "Edit" and set the Server URL to "http://localhost:8880" (or the Apache Web Server port you specified in Zend Server installation); Path Mapping -> click "Add" -> Path on Server="C:\Program Files\Zend\Apache2\htdocs\MyProject", Path in Workspace="/MyProject"; click "OK";
7. from the "Run" menu -> "Debug" -> right click on "PHP Web Page" -> "New"; a Debug Configuration form will appear; choose "Server Debugger": Zend Debugger; "PHP Server": Default PHP Web Server; click on "Test Debugger"; if the answer is "Success" then you successfully configured the Zend Debugger; to debug the "myFile.php", browse for it at "File", then hit Apply -> Debug;
>>
you do this:
<<
6. With "MyProject" selected in "PHP Explorer", choose from the menu "Window" -> "Preferences", expand the "PHP" node, and set:
6a. "PHP Executables" -> add -> name="aphp4", executable path = "C:\PHP\php.exe", PHP ini file = "C:\WINDOWS\php.ini", SAPI=CGI, PHP Debugger = Zend Debugger;
6b. "PHP Interpreter" = choose the "PHP Version" to the PHP version you have it configured in "C:\[your_apache_path]\conf\httpd.conf";
6c. "PHP Servers" -> new -> SERVER Name="my_apache", SERVER URL="http://localhost:[port]" (instead of "[port]" you put exactly the port as you have configured in "C:\[your_apache_path]\conf\httpd.conf"), for example, I have SERVER URL="http://localhost:8001", Path Mapping -> Add -> Path on Server="C:\[your_apache_path]\htdocs\MyProject", Path in Workspace="/MyProject";
7. from the "Run" menu -> "Debug" -> right click on "PHP Web Page" -> "New"; a Debug Configuration form will appear; choose "Server Debugger": Zend Debugger; "PHP Server": my_apache; click on "Test Debugger"; if the answer is "Success" then you successfully configured the Zend Debugger; to debug the "myFile.php", browse for it at "File", then hit Apply -> Debug;
>>

That should be all.
If any questions, write here, I will try to answer'em in time.

Monday, June 14, 2010

Visual Studio 2008 - ASP.NET Web DB Application 4

MVC2DCatalog - The MVC2 Framework Way

Other sections related to the same discussion:

Notice: To be able to reproduce and run this sample, you should be sure you read and followed the chapters present in "Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations". Also, you may read the "dcJQuery - The jQuery AJAX Way" section to get a better idea regarding ASP.NET AJAX apps based on jQuery javaScript library.

General Considerations
The MVC2 Framework (MVC2) refers to the Model View Controller way a web application may work by using the ASP.NET framework (FX). The MVC2 is an independent functioning framework, so we may say we have a framework (MVC2) in another framework (FX). MVC2 is not included in the FX 3.5 distribution, so you will have to install it (see "Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations", prerequisites section).
The difference between MVC2 and all the 3 solutions we discussed before is a structural one. Practically, now, the database is not queried using SQLDataSources, but it is represented by the Model (M), the "code behind" page is represented now by the Controller (C), while the ASPX page will be represented by the View (V). As an image, the data from the database will be loaded into Models by the Controller, they will become available for the Controller which will process and standardize the data; data will then be sent and displayed to the user by using Views.

Notice: Why is it called MVC2 ? Because is the second version of MVC framework of Microsoft. Although MVC is new for Microsoft, this structural model was developed and implemented some time before by Java based frameworks like ASF, JSF, Struts, Tapestry, aso. The MVC2 looks more like Struts 2 from Apache Foundations, in the sense that it is "action oriented", not "component oriented" as it is JSF for example.

How MVC2 Framework works ?
In order to load data in the Models, a persistence layer is used. In our case, LINQ (http://msdn.microsoft.com/en-us/library/bb397933.aspx) is used to get the data into Models which will be offered to Controllers through queryable interfaces (iQueryable). LINQ is somehow similar with SQL, but it allows server code (VB.NET, C#, aso) to interfer within its query syntaxes. The result of a LINQ query may be seen as a Recordset or Resultset Iterator, in the sense that you may browse its content with methods like First(), Last(), Next(); an important thing is that it may be cast-ed to a Collection like List.
The Controller is a set of ActionResults. An ActionResult is called by a FORM action event, it executes at the Controller level and then it is output to the user at the View level. As in the case of the discussed jQuery approach, at the View level we cannot use VS2008 specific ASP controls because of their internal events, but Microsoft has developed a set of new HTML helpers to be used by MVC2 for the View (see this: http://weblogs.asp.net/scottgu/archive/2010/01/10/asp-net-mvc-2-strongly-typed-html-helpers.aspx).

The MVC2 Framework Way sample
In my sample I used an "ASP.NET MVC2 Web Application" project template. To the "dcatalog" database tables I linked 3 HTML tables. The first table brings data from the "disk" table. The table Model is generated with the help of LINQ. A service ("/Services/DiskService.cs" interface) is implemented ("DiskServiceImpl.cs") to "ListAll()" the records of "disk" table. The "/Services/DiskService.cs" service is executed at the Controller level and it brings data from "disk" table when the application calls the "Disks()" ActionResult from the "/Controllers/HomeController.cs" Controller. The data from "DiskServiceImpl.cs" is passed to Controller by using the "dependency injection" pattern (see Spring Framework). Then it is output by the "/Views/Home/Disks.aspx" View.

Notice: It is important that the View to have the same name as the ActionResult from the Controller.

Then, a more complex Model is formed with the help of LINQ. It contains the "disk_items", "disk_genre", "disk_audio", "disk_video", "disk_games", aso, like in the figure:


To obtain "disk_items" we fire a radio button from the "disks" table radio buttons group and the "DiskItemsByIdDisk(int id)" ActionResult from the "HomeController.cs" Controller will be called, the Model data will be extracted with the help of "DiskSubitemService" service from the "disk_items" table and then output to "/Views/Home/DiskItemsByIdDisk.aspx" View.
A LINQ generated Model may consist of several database tables, the LINQ Model being responsible for GET-ing or SET-ing the data from or in the tables.

For the "Subitems", in order to get for example the "disk_audio_genre" or "disk_audio_type", I have created internal applications Models (kind of Plain Old Object) under the Models Namespace, that will keep all the "disk_audio" data and also the genre and the type. You may find these internal Models in "/Models/Disk_subitems_Full_Model.cs".
To obtain "disk_audio" subitems, when we click a radio from "disk_items" table, the "DiskSubitemsById(int id)" ActionResult from the "/Controller/HomeController.cs" Controller will be called, a comparison will be made to establish if the "disk_item.id" = "disk_audio.id_item" and if so, the data will be put in the the "Disk_Audio_Ext" internal Model and then extracted from it into an iList with Disk_Audio_Extalements. Then, the Controller outputs the ViewDatas to the user by the "/Views/Home/DiskSubitemsById.aspx" View.

Notice: as a consequence of the database design, in order to display the "Subitems", the Controller establishes more "ViewData" objects that are further managed by the View.

The destination objects in which the Views are loaded was established by jQuery actioned HTML "DIV" elements. More exactly, when we click a radio, a View outputs a HTML code with the help of jQuery "$.ajax()" function into a DIV HTML element (see for example the javaScript at the top of "/Views/Home/Disks.aspx").

Below there is an image with the Solution Explorer of this MVC 2 app:


Below there is an image with MVC2DCatalog app working:

Here is the source code of this application:
MVC2DCatalog.zip

Notice: In order to proper configure the IIS to deploy MVC2 applications, be sure you have the "Global.asax" configured in the same manner as in this application. It is important that the routes to be mapped in this way, in order for the MVC2 Framework to work properly. Note also how the HTTP query string is formed in case of MVC2 applications.

Conclusion:
The MVC2 is by far the most robust and well modularized approach to design a VS2008 web application. However, VS2008 has a lack of resources at the View level and it doesn't offer complex ASP controls as in the case of the previous 3 Solutions. You will have to build your own controls, but you have the help of jQuery objects.

Visual Studio 2008 - ASP.NET Web DB Application 3

dcJQuery - The jQuery AJAX Way

Other sections related to the same discussion:


Notice: To be able to reproduce and run this sample, you should be sure you read and followed the chapters present in "Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations". Also, you may read the "DCatalogAjax - The Microsoft ASP.NET AJAX Way" section to get a better idea regarding ASP.NET AJAX apps.

General Considerations
The jQuery AJAX (JQ-AJAX) refers to the jQuery AJAX way a web application may work by using the ASP.NET framework (FX).
As a difference regarding the ASP.NET AJAX (FX-AJAX), the JQ-AJAX uses the jQuery HTTP callbacks to the server in order to change portions of a page. There are many jQuery callback functions that communicate with the server to reload those portions of the page where AJAX is applied, and these are the specific jQuery functions: $.load(), $.ajax(), $.getJSON(). All of these functions may be configured to GET or POST the content of a FORM to the web server. JQuery is an AJAX enabled javaScript library that provides own objects to standardize the javaScript interpretation gap between the web browsers by imposing object functions and methods that comports the same on all browsers.

How jQuery AJAX works ?
When rendered by the FX, the ASPX page will contain several jQuery functions that are "waiting" for the FORM fields events in the "ready" AJAX state. On the HTML page, when the respective FORM field is rendered, then its events will be rendered, too. If an event of the FORM field is fired then the jQuery code associated to that event will run. That code may consist of interactions within the existent fields on the FORM, or it may do an AJAX callback to the server. For example, a "$.load()" callback may load a whole ASPX page by using AJAX, a "$.ajax()" callback may load portions of text, HTML or json scripted code, "$.getJSON()" loads JSON code. JSON is a structured data format written as a javaScript array.
However, regarding the VS2008 controls and ASP.NET, this means that the usual "Post-Backs" are replaced by jQuery callbacks. So, all the internal actions of a VS2008 control may be avoided in order to better manage the jQuery results. For example, an ASP DATA GridView will loose the sort, select, edit, delete, paging actions and they should be redesigned with jQuery. This happens because jQuery is not an VS2008 integrated development medium and VS2008 manages in a different way the callbacks to the server.

The jQuery AJAX Way sample
In my sample I used an "ASP.NET Web Application" project template. To the "dcatalog" database tables I linked 4 ASP DATA Controls : 3 ASP DATA GridView and an ASP DATA DetailsView. The first GridView ("gvDisks") uses the "dsDisks" SQLDataSource to get the "disk" database table content. Then, in the jQuery "ready" state it is waited for the "OnSelectedIndexChanged" event of "gvDisks" which is now represented by a group of HTML radio buttons, instead of the GridView "select" capability. Then, when a radio button is clicked, an $.ajax() jQuery AJAX callback will bring the HTML content of the second GridView named "gvDiskItems" into a HTML DIV element. The same thing happens between the "gvDiskItems" GridView and the 3rd GridView named "gvItem". Then same thing between the "gvItem" GridView and the DetailsView named "detvItemDetails". All these operations are handled by the javaScript function "viewDiskItemsGridView()" from the "/js/disks_view.js" file.
In addition, now there is presented a switch section between "Browse Disks" and "Search Disks" on the starting "Default.aspx" page. The "Search Disks" is not implemented yet, its purpose is to demonstrate jQuery capability of "$.load()" function. The behaviour of this switch is revealed by "/js/Default.js" file which allows the AJAX loading of the "disks_view.aspx" and "disks_search.aspx" pages, by using jQuery $.load() when the user clicks the "Browse Disks" or "Search Disks" buttons.

You may find important design information in "Default.aspx", "disks_view.aspx", "disk_items_view.aspx", "disk_subitems_view.aspx", "disk_subitem_details.aspx" and in their coresponding "code behind" files.

Here is an archive with the source of this sample:
MasterDetailJQuery.zip

Notice: when I started to work at this sample, I named the Solution Project as "MasterDetailJQuery", and then I refered at it as "dcJQuery".

Below there is an image with dcJQuery app working:


Notice:
VS2008 has a convention in which if the ASPX file has a user defined name, then the "code behind" will be named [ASPX_filename].cs. You may find also a [ASPX_filename].designer.cs file that is updated whenever you add a control to the ASPX page from the "design" mode. If you want to internally modify the control added in "design" mode, then you shoul delete its declaration from [ASPX_filename].designer.cs and move it to [ASPX_filename].cs, thus having full access to that control and the ability to extend the capabilities of it.

Conclusion:
Even if jQuery is known as doing fast AJAX callbacks, this is not a good approach from the VS2008 point of view. You may not use the power of the ASP controls, because they are managed in a different way and you will have to write jQuery events for all the internal events of these controls (for instance the ASP DATA GridView internal "sort", "select", aso events). Luckily, you may use jQuery complex designed controls.

Visual Studio 2008 - ASP.NET Web DB Application 2

DCatalogAjax - The Microsoft ASP.NET AJAX Way

Other sections related to the same discussion:


Notice: To be able to reproduce and run this sample, you should be sure you read and followed the chapters present in "Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations". Also, the discussion at "DiskCatalog - The Classic Post-Back Way" may help you getting a better idea regarding ASP.NET Web Applications.

General Considerations
The Microsoft ASP.NET AJAX (FX-AJAX) refers to the AJAX way a web application may work by using the ASP.NET framework (FX).
As a difference regarding the Classic Post-Back (CPB), the FX-AJAX uses Ajax Post-Backs to the server in order to change portions of a page. I will refer further to these AJAX Post-Backs as AJAX Callbacks. As we said, the CPB reloads the whole page when an action is executed. The FX-AJAX will reload only those portions of the page where AJAX is applied, leaving intact the rest of the page portions.

How ASP.NET AJAX works ?
When rendered by the FX, the ASPX page will contain a JavaScript function named "__doPostBack()", as also CPB contained, but this time it will handle the server requests using AJAX. This is possible by using a "ScriptManager" object that will handle all the javaScript needed for the portions of the page reloaded by AJAX. These portions reloaded by AJAX will be stored in containers named "UpdatePanels". The FORM fields will also be available in a "code behind" server file specified by the FORM "action" attribute. For each FORM included in the ASPX page, we will have in the "code behind" file a "class" container with the name of that FORM that will contain FORM fields properties, the FORM fields events will be represented as class methods, aso. As the content of the ASPX server file is rendered, the FORM fields become accessible for the "code behind" server file which has the possibility to transform the FORM fields accordingly with the written code.

The ASP.NET AJAX Way sample
In my sample I used an "ASP.NET Web Application" project template. To the "dcatalog" database tables I linked 4 ASP DATA Controls : 3 ASP DATA GridView and an ASP DATA DetailsView. The first GridView ("gvDisks") uses the "dsDisks" SQLDataSource to get the "disk" database table content. Then, by using the "OnSelectedIndexChanged" event of "gvDisks" I get the database content of table "disk_items" with the help of SQLDataSource "dsDiskItems" and write it in the second GridView "gvDiskItems". Both, "dsDiskItems" and "gvDiskItems" are stored in an UpdatePanel named "upDiskItems". To reload the content of "udDiskItems" panel, a trigger is assigned to this panel which will asynchronously re-write the "upDiskItems" components when the "SelectedIndexChanged" of the first GridView "gvDisks" fires. This asynchronous AJAX Callback uses the POST HTTP method. The same thing happens between the "gvDiskItems" GridView and the 3rd GridView named "gvDiskSubitems" which is stored in the "upDiskSubitems" UpdatePanel. Then same thing between the "gvDiskSubitems" GridView and the DetailsView named "dvDetSubitems" which is stored in the "upDetSubitems" UpdatePanel.
All the 4 UpdatePanels are javaScript handled by the "ScriptManager1" ScriptManager.

You may find all the 4 ASP DATA Controls on the "Default.aspx" file which you may access in the "source", "design" or mixed view modes. The coresponding "code behind" file will be "Default.aspx.cs".

Here is an archive with the source of this sample:
DCatalogAjax.zip

Below there is an image with DCatalogAjax app working:


Notice:
VS2008 has a convention in which if the ASPX file has a user defined name, then the "code behind" will be named [ASPX_filename].cs. You may find also a [ASPX_filename].designer.cs file that is updated whenever you add a control to the ASPX page from the "design" mode. If you want to internally modify the control added in "design" mode, then you shoul delete its declaration from [ASPX_filename].designer.cs and move it to [ASPX_filename].cs, thus having full access to that control and the ability to extend the capabilities of it.

Conclusion:
This is probably the best approach in order to develop a web application using VS2008. However, it requires special attention while developed; you have to take care, when the UpdatePanels are rendered because only after they rendered you gain access to their content; otherwise, their content is null. Security should be also present on AJAX calls.

Visual Studio 2008 - ASP.NET Web DB Application 1

DiskCatalog - The Classic Post-Back Way

Other sections related to the same discussion:


Notice: To be able to reproduce and run this sample, you should be sure you read and followed the chapters present in "Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application - General Considerations".

General Considerations
The Classic Post-Back (CPB) refers to the simplest way a web application works by using the ASP.NET framework (FX).
The CPB runs at the level of a HTML server page. In VS2008, the page that is rendered by the web server into a HTML page usually has the "aspx" extension (ASPX page). Practically, you have a FORM or more on this ASPX page that includes form fields (or FORM controls): HTML tables, HTML textboxes, ASP DATA GridViews, ASP DATA DataLists, aso. If you chosen to use VS2008 ASP controls, then you should know that any internal action executed by an ASP control (select, sort, insert, update, aso) is made to the server location established by the FORM container attribute named "action". The same happens for all the button controls (HTML buttons, ASP buttons) on that FORM. The FORM action will "post" the FORM content to the server, making available to the server all the data content of the form fields: their name and value pair and the events applied on them. These actions are called Postbacks.

How Post-Back works ?
When rendered by the FX, the ASPX page will contain a JavaScript function named "__doPostBack()" that will send all the FORM field properties and their events to a "code behind" server file specified by the FORM "action" attribute. This "code behing" server file may be programatically written in: Visual Basic .NET, Visual C# .NET, Visual J# .NET, Visual C++ .NET. For each FORM included in the ASPX page, we will have in the "code behind" file a "class" container with the name of that FORM that may contain FORM field properties, while the FORM fields events will be represented as class methods, aso. As the content of the ASPX server file is rendered, the FORM fields become accessible for the "code behind" server file which has the possibility to transform the FORM fields accordingly with the written code.

The Classic Post-Back Way sample
In my sample I used an "ASP.NET Web Application" project template. To the "dcatalog" database tables I linked 4 ASP DATA Controls : 3 ASP DATA GridViews and an ASP DATA DetailsView. The first GridView ("gvDisks") uses the "dsDisks" SQLDataSource to get the "disk" database table content. Then, by using the "OnSelectedIndexChanged" event of "gvDisks" I get the database content of table "disk_items" with the help of SQLDataSource "dsDiskItems" and write it in the second GridView "gvDiskItems". Then, by using the "OnSelectedIndexChanged" event of "gvDiskItems" I get the database content of a multiple query on tables "disk_audio", "disk_games", "disk_kits", aso, and with the help of SQLDataSource "dsItem" I write it in the third GridView "gvItem". Then, by using the "OnSelectedIndexChanged" event of "gvItem" I get the database content of a multiple query on detailed tables "disk_audio", "disk_games", "disk_kits", aso, and with the help of SQLDataSource "dsItemDetails" I write it in the DetailsView "detvItemDetails".

You may find all the 4 ASP DATA Controls on the "Default.aspx" file which you may access in the "source", "design" or mixed view modes. The coresponding "code behind" file will be "Default.aspx.cs". In "Default.aspx.cs" you will find the methods coresponding to the events applied on respective ASP Controls, for example "gvDisks_SelectedIndexChanged() will be available when the "OnSelectedIndexChanged" event of "gvDisks GridView will fire.

Here is an archive with the source of this sample:
DiskCatalog.zip

Below there is an image with this application at "design" time:

Below there is an image with this application working:


Notice:
VS2008 has a convention in which if the ASPX file has a user defined name, then the "code behind" will be named [ASPX_filename].cs. You may find also a [ASPX_filename].designer.cs file that is updated whenever you add a control to the ASPX page from the "design" mode. If you want to internally modify the control added in "design" mode, then you shoul delete its declaration from [ASPX_filename].designer.cs and move it to [ASPX_filename].cs, thus having full access to that control and the ability to extend the capabilities of it.

Conclusion:
The main disadvantage is that whenever you Post-Back a FORM, the web browser will reload the containing HTML page; if the page calls complex server operations then the reload will take more time to refresh the HTML page. A better approach will be the using of AJAX calls that will reload only specified portions of the HTML page (see next samples).

Visual Studio 2008 - ASP.NET Web DB Application

General Considerations
<<Visual Studio 2008 - Ways to Start a Web Database Application>> intends to offer some approaches in starting to develop internet based database applications.
As I am talking about Microsoft Visual Studio 2008 (VS2008), then the database support ofered in these samples is Microsoft SQL Server Express 2005 (SQLSE2005), as it comes integrated in the VS2008 package. The VS2008 samples here use the SQLSE2005 in a direct way, through a connection string, so we are not talking about N-tier applications or XML Services, aso. The samples intend to offer a way to use the business layer of a web application, so that is why I haven't complicated the access way to the database. The VS2008 samples included uses ASP .NET (framework 3.5 SP1) and they are C# coded behind.

Samples included in <<Visual Studio 2008 - Ways to Start an ASP.NET Web Database Application>>:

Prerequisites:
- MS Windows x86 or 64-bit platform: Win XP SP2, Win Vista, Win 7;
- MS Visual Studio 2008;
- only for the MVC2 framework, you should install VS2008 SP1 and then the MVC2 framework for VS2008 SP1;

Notice:
Before installing VS2008, you have to be sure that you installed on your Windows the Internet Information Service (IIS) which is the Web Server used for the ASP.NET applications to work. To install IIS you need the original kit of Windows, then Start -> Control Panel -> Add or Remove Programs -> Add Remove Windows Components -> check IIS.
The ASP.NET Framework (FX) uses the "ASPNET" Windows user account and for this user the VS2008 installer will configure the IIS, by setting an API (aspnet_isapi.dll) to work with the FX.
Even if you haven't installed the IIS before installing VS2008, there exists a way to post-configure the IIS for FX based applications. The FX 3.5 includes the previous versions of FXs, namely 2.0 and 3.0. The FX 2.0 contains an utilitary to post-configure the IIS. Stop the IIS, then at the command line you type this: [Windows dir]\Microsoft.NET\Framework\v2.0.50727\aspnet_regiis.exe /i; start the IIS and now you should be able to run FX based we applications.
For example, I use Windows XP SP3 with IIS 5.

SQL Server Express 2005 Configuration
The SQL Server included into VS2008 is a lite version; Microsoft decided not to include a visual server manager, such as "Microsoft SQL Server Management Studio Express" (http://www.microsoft.com/downloads/details.aspx?FamilyId=C243A5AE-4BD1-4E3D-94B8-5A0F62BF7796&displaylang=en), and thus, SQLSE2005 may be managed through 2 simple interfaces: "SQL Server Configuration Manager" and "SQL Surface Area Configuration" both interfaces are included in SQLSE2005 distribution of VS2008.
The steps of configuring SQLSE2005 are described here: http://www.petefreitag.com/item/458.cfm, but advanced instructions for SQLSE2005 configuring can be found here: http://www.aspfree.com/c/a/MS-SQL-Server/Configuring-SQL-Server-Express-2005/

Notice:
In general, the SQLSE2005 server should be [computer_name]\SQLEXPRESS. You may use an username/password of a granted SQLSE2005 Windows user or the Windows "Integrated Security" connection.
Make sure you granted the acces for the Windows FX user "ASPNET" in SQLSE2005.

Database Configuration
For these samples I chosen to create an SQLSE2005 database named "dcatalog" that contains 15 tables; 3 of them are system tables: "disk_users" and "disk_roles" are used for the app users and their roles, while the "system_logger" table is used to keep the exceptions (errors and warnings) of the app.
I formed an SQL script for creating the "dcatalog" tables and their records.


In order to use this script, you should firstly create the "dcatalog" database.
Here is the script for creating "dcatalog" tables:
dcatalog.zip

After you created the database and its tables, the database should look as in the next diagram:

Notice: Anyone can design its own database; the "dcatalog" was designed according to my own considerations.
"Ways to Start an ASP.NET Web Database Application" is not intended to be a tutorial, it is more like a case study, from which the VS2008 developer may get an idea to start a web application; in this way, any of the 4 samples has a final section called "conclusion" that describes my conclusion in using the respective approach; of course there are various implementations and there may exist easy ways to implement these samples, but this is the way I chosen to present them and you will have to take them as they are.