DMX|ZONE
Register Login

Explore the Premium Content

Linked drop down boxes with Ajax

If you haven’t heard about Ajax, you probably come from another planet! Ajax is a Web 2.0 approach to building Web applications that allows you to load data from an external source asynchronously using JavaScript. Asynchronous loading means that the user can carry on interacting with the Web application whilst data loads in the background. For this reason, it’s often said that Ajax makes applications more responsive, like desktop applications.

This tutorial is all about drop down boxes in a form that are populated using an Ajax approach. Ajax most often works with XML documents although it can also deal with text files. We’ll work through an example here where we load a drop down box and, depending on the value we select, we’ll populate a second drop down box with related entries. The example we’ll use is a list of countries. When we select a country, a second drop down box will show the states or provinces in the selected country.

In a Web 1.0 version of this application, we’d probably have to reload the page each time the user selected a country from the first drop down box. They’d have to wait to see the second drop down populated with the list of states. In our Web 2.0 approach, the second drop down will appear to populate almost instantly.

As with all Ajax examples, you’ll need to run the code contained in this article through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone. When I want to view a page in a Web browser, I have to use http://localhost/DMXZone. I can’t just double click it and make it work correctly.

So you know, this code represents one way to achieve our aim of having linked drop down boxes. I’m sure there are other ways you could have achieved the same thing. I tested the example here in IE 6 and Firefox 1.5 so my screen shots will show both browsers.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Read More
Sas Jacobs
8264

A Semi-Dynamic Sitemap with XML, JavaScript and CSS Part Two

Welcome to part two of the sitemap tutorial.  In part one, we created the XML data store that holds information about all of the pages in the site, and we built the main body of JavaScripts that acts as the mechanics behind the page to dynamically write the content of the page.  In this article, we will be returning to the JavaScript file in order to improve the HTML output.  We will also create an HTML file and a CSS file to control the presentation of the output.  Let's get started with the HTML page.

The HTML

The HTML page that holds the generated sitemap need not be very complicated; all we need to worry about is ensuring that the document is valid and making the call to the initial function in the JavaScript file.  The following page is all we really need:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01/EN" http://www.w3.org/TR/html4/strict.dtd>

<html lang="en">

<head>

  <title>Site Map</title>

  <script type="text/javascript" src="sitemap.js">

  </script

</head>

<body>

<p></p>

</body>

</html>

The empty <p> element is used to meet validation standards because the <body> tag requires at least one child element, as does the <head> element.  Thisis really all that is needed because the rest of the content is generated by the JavaScript.  Other than this, I don’t think anything else here requires much explanation.  Save the file as sitemap.htm and reopen the JavaScript file to make some additions.

Read More
Dan Wellman
5688

Building Your First ADO.NET Application Part 1

If you’re new to the world of ASP.NET development or even just .NET development in general you’ve probably heard of ADO.NET at some point. The ironic part about ADO.NET is that it is utilized in probably 99% of applications yet it is rarely discussed as its own entity. ADO.NET simply sits and hides in the background and does its job.

ADO.NET is not a part of ASP.NET; it is a part of the .NET framework as a whole and represents the data source connectivity layer of the .NET framework. It can be used from either ASP.NET or WinForms applications in the same manner. In fact you could theoretically take the data tier from an N-tier application built for ASP.NET and apply it to a WinForms application without changing a single line of code. This is the fundamental principle behind a reusable framework. ADO.NET provides the building blocks for data source access and manipulation in an abstract fashion and can be applied to any application type in the .NET framework.

Now you might be wondering about the title of this tutorial, if ADO.NET is merely a data source connectivity framework, how can it be used to build an application? The truth is it can’t, but ADO.NET does make up the data source interaction layer of any .NET application, and in our case we’ll use it to build the data tier in an ASP.NET sample application.

The purpose of this tutorial is not to focus on the ASP.NET portion of the .NET framework. This means we will not focus on user interface, forms, authentication and so forth, but instead we will try to take common requirements in a web application and use ADO.NET to provide those requirements.

Sometimes when working in a development team there would be dedicated developers who build strictly the data tiers and the interface developers use the functionality provided to build the user interface. Other times one single developer works from the database up, providing all functionality.

For this tutorial we will examine 2 approaches. During part 1 we will explore the scenario where a single developer builds everything from the database up in a 2-tier design by utilizing the data wizards of the data controls designed for ASP.NET WebForms. During part 2 we will explore how to provide the same features in an N-tier application with a more robust dedicated data tier, linking to the user interface of ASP.NET WebForms.

The approach we will take will not be focused on a real world application with properly laid out interfaces, but rather real world ‘scenarios’ that you will likely encounter everyday as a developer. Since ADO.NET isn’t an integral part of the user experience or interface we need to explore common development situations and how to solve them.

Note: Visual Studio .NET running ASP.NET ver 1.x is required for this tutorial. Access to SQL Server is not required but preferred, you must have access to a database however in order to properly implement the sample code. Both VB.NET and C# code samples will be provided

Read More
Kevin Koch
1621

Photoshop CS2: Creating and Eliminating Optical Distortion

Only in Photoshop CS2 can you alter the distortion created by a camera lens with the Lens Correction filter. In this article, Linda shows how to get the most out of this filter. She illustrates how to correct images that appear distorted, but she also shows how to create some special effects through the options contained within this filter. Additionally, she compares this filter’s options to other Photoshop tools that may create the same effect.

Lens Correction: Exciting New Option

Most of you are already familiar with the Warp transformation tool, the Perspective tool, and the distortion filters like Pinch and Spherize that are contained in Photoshop CS2 as well as in previous Photoshop versions. The Lens Correction filter, introduced for the first time in Photoshop CS2, mimics many of the attributes contained in all the previously mentioned tools and filters; but, the Lens Correction tool can take your creativity a touch further, because you can control many options at the same time. When you combine this tool with other options, you often can correct what you thought were unsalvageable images.

However, there’s only so much that the Lens Correction filter can accomplish. If you have a photograph like the one shown below, there’s not much you can do to fix it with the Lens Correction filter (or with any other tool for that matter):

 

The image above, taken in Chicago, contains every problem that the Lens Correction filter can fix – but when a photograph contains all of those problems in one image, the “fixing” is stymied. Instead, I’ll use this shot to explain various photo distortions and – at the same time – to introduce you to the Lens Correction filter.

Read More
Linda Goin
4730

Using Ajax to validate a form

Ajax is one of a number of Web 2.0 approaches: a second wave of Web sites and applications. Using Ajax can allow a Web site to appear more like a desktop application. Because contact with the Web server can be carried out asynchronously, users can carry out activities on the Web site at the same time. This means that a user’s progress through the site is not interrupted by the stop-start nature of the traditional Web.

In this article, I want to show you a simple use for Ajax by validating a form in two different ways. We’ll check that a username is available and that the user has entered the same password twice before allowing them to submit the form. I’ve assumed that you understand the basics of XML as I’m comparing the form entry with an XML document containing the reserved usernames. I’ve also assumed that you understand the basics of the Ajax approach and the XMLHttpRequest object.

In a traditional Web application, the user would enter their details and click the submit button in a Web form. A Web page would then make a request from the Web server and the user would wait for processing to occur. The page would then display the appropriate information or message. The key point is that the user has to stop working to wait for a response from the Web server.

Using Ajax, a Web application can make server requests while the user is filling in the form details. The server request can be initiated by the user tabbing out of a form field. It uses the XMLHttpRequest object and can occur asynchronously, or in the background. The Web page can then display an appropriate message in part of the interface without the need for a full refresh.

Because this article is about Ajax, you’ll need to run the example through a Web server. I have IIS (Internet Information Systems) installed on my PC. I can store my files in a folder within C:\Inetpub\wwwroot. I’ve called my folder DMXZone which means I must view the Web page using the URL http://localhost/DMXZone. You can’t simply double click the page in Windows Explorer.

You can download the files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Read More
Sas Jacobs
6355

A Semi-Dynamic Sitemap with XML, JavaScript & CSS Part One

There are many ways to create a sitemap, beginning with sitting down the good old fashioned way with nothing but notepad and some ideas.  But this method can take time to initially code and can be a real pain to update and maintain.  You could buy a piece of software to do it for you, there are plenty of them out there and some of them can do the job quite competently.  What these applications normally do is locate your websites root directory and then spider all of the pages within them before outputting a pre-configured HTML page. 


Read More
Dan Wellman
2511

XSLT and JavaScript

Web 2.0 describes a new approach to Web applications where the functionality is responsive, similar to desktop applications. Two of the main Web 2.0 approaches to building applications include working with Flash/Flex and Ajax.

The Ajax approach to building Web applications includes many existing technologies:

  • XHTML and CSS to describe the interface
  • DOM to work with the interface and loaded XML data
  • XML and XSLT to store and transform the data
  • The XMLHttpRequest object to connect to external data sources, usually XML documents
  • JavaScript to bind the technologies together to load data, manipulate the interface and respond to user interactions

In this article, I want to look at using JavaScript to apply an XSLT transformation to an XML document. XSLT (Extensible Stylesheet Language Transformations) allows you to change an XML document into another kind of output. It transforms a source XML tree into a results tree and is often used to generate XHTML from an XML document.

Specifically, in the article I’ll

  • provide an overview of XSLT
  • show how to apply transformations with JavaScript
  • work through a simple example

An XSLT stylesheet is just an XML document so you can use any of the browser scripting techniques that you’ve seen previously. You can load the stylesheet with an XMLHttpRequest object and use DOM scripting techniques to traverse the document. You can also use JavaScript to apply the transformation client-side.

While we could also apply a transformation server-side, applying it on the client-side frees up the server and can make an application seem more responsive. Be careful though - you can’t use client-side transformations on Opera 8 and below, and on Safari.

You can download the reference files for the article from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Let’s start by looking more closely at XSLT.

Read More
Sas Jacobs
3866

ADO.NET Concepts for Beginners

With nearly any application, a data source is likely to be the root foundation of all functionality. Without being able to store data your application obviously won’t be able to do a whole lot. The database, or data source, and your application’s code base cohesively comprise what we call an application; neither the code nor the data source would be of much use without the other.

Being such a fundamental component of an application, methodologies for working with data sources has evolved greatly over the years. If you recall classic ASP there was very little structure or design behind the database connections and data manipulation patterns

With classic ASP you needed to use ADO, which were COM classes you could instantiate nearly anywhere on any ASP page and could read/write data in any arbitrary location on the script. Although the classes were well defined and quite handy to work with, they left developers to their own devices when trying to design database patterns.

Unless you had your database logic in an ActiveX DLL you also didn’t have access to the helpful code-insight shortcuts which would make development much easier since you could clearly see the methods and properties available to you. If you scripted your database logic in ASP pages it was usually a matter of trial and error, changing code and refreshing the page to test over and over.

The next generation of ADO has been labelled ADO.NET since its creation coincided with the release of the .NET framework. ADO.NET is now a managed set of clearly organized classes which can connect to nearly any data source you can think of.

No longer is your database code embedded into your front end pages; now you can define entire dedicated components to house your database logic and access them in an Object Oriented fashion. Additionally, the data wizards for the Data category of ASPX controls are capable of writing the data connectivity code for you, so developers that are not familiar with ADO.NET can still write database connected applications.

One of the troubles with these wizards however is that you really don’t have a grasp of what’s happening in the code-behind files to make your database connectivity happen. If you encounter a bug it’s difficult to track down because you didn’t write the code yourself.

The purpose of this tutorial is to look at some of the basic principles behind ADO.NET and its classes, as well as look at some common methods and properties used to access data.

Note: ADO.NET can be utilized in any type of Visual Studio .NET project. For this tutorial we will assume ASP.NET is the project type. Visual Studio .NET is not required but recommended if you want to test out some sample code, and installation of the MSDN library is required to follow the links provided in the tutorial

Read More
Kevin Koch
4724

How to identify an email as open, mark it as closed and have it automatically archived

Last week Richard showed you how to create a form that validates data and is connected to a database. This week Richard is back with another great video tutorial that teaches you how to create an e-mail management system that shows which of the sent e-mails (that where generated by last weeks form) are open and how to close and archive them in a database.


Read More
Richard Mariner
1662

Photoshop CS2: Vanishing Point Filter

Photoshop CS2’s Vanishing Point Filter allows you to preserve correct perspective in image edits that contain perspective planes, such as the side of a building or any other rectangular object. In this tutorial, Linda takes you through Vanishing Point “gymnastics” to show you how to utilize this tool to your advantage. The Marquee, Stamp, and Text tools will be used, as well as the Liquefy Filter and other options to create a new image from an original photograph.

Vanishing Point Gymnastics

I put off using the Vanishing Point Filter for a few months when I first began to use Photoshop CS2, as it seemed too complicated to learn at the time. Each time I tried to use it according to the handbook, I felt as though I was practicing back flips. But, since I’ve learned how to use that filter, a world of possibilities opened up to me and I want to share these tips with you in this tutorial.

The best way to learn how to use this filter is to begin with a simple landscape that carries some flat planes, like the Bahamian fish shacks that I chose for this lesson (included in the download). The image to the left below is the original image. The image to the right shows that the middle shack has lost a door and now sports some type, and the reflection in the water mimics those changes – and they’re all in perspective, thanks to the Vanishing Point Filter. That’s the goal for this lesson:

 

 

 

 


NOTE: You will want to resize the downloaded image to 300 ppi before you begin the tutorial (Image > Image Size > change Resolution from 72 to 300).

The tools that you’ll use for this lesson include the Vanishing Point Filter, the Liquefy Filter, and the Text tool, among other filters and layer options.

 

Read More
Linda Goin
7018

Creating a form that validates and writes to a dabase

Ever wanted to create a form that validates data and is connected to a database? Richard Mariner shows you how to create a Contact Form that validates and writes it's content to a database table in less then 5 minutes!

Read More
Richard Mariner
2401

Building Your First ASP.NET 1.x Application – Part 2

Welcome to the second and final part of this 2 part series regarding how to construct your first ASP.NET application using Visual Studio .NET and SQL Server.

During Building Your First ASP.NET 1.x Application – Part 1 we explored how to use IIS step by step to configure a new virtual directory which can then be used as a project source name for new ASP.NET applications. We also learned how to add CSS visual styling to ASP.NET WebForms, and finally we learned how to use the ADO.NET Data controls for WebForms to connect to an SQL server database.

In this second part of the tutorial we will build upon our sample ASP.NET application and implement the functionality required to allow user login and forms authentication, as well as how to bind data to a DataGrid and DropDownList.

To achieve these requirements we will learn how to work with another ADO.NET data control available in Visual Studio .NET called the SqlCommand object. In addition to this we will learn how to create stored procedures in SQL Server and execute them from our WebForms in order to retrieve the data we need for the required features.

Note: Visual Studio .NET 02/03 running ASP.NET version 1.x is required to implement this tutorial. Additionally, access to an SQL Server with the built in Northwind database is highly recommended as it is the database used as the data source for this tutorial. If you are comfortable with database connectivity you may apply the techniques in this tutorial to another database of your choice.

Both C# and VB.NET code samples will be provided

Read More
Kevin Koch
1618
Newer articles Older articles
Currency:
Company Info
Payment & Pricing
Legal Notices
Guides
Copyright © 2001-2024 Dynamic Zones International B.V., All Rights Reserved.