This page presents demonstrations of various web programming techinques, using HTML, CSS, JavaScript, Ajax, PHP, and MySQL. Each demonstration consists of two parts: "what it does"—which should interest website owners—and "how it works"—which should interest web programmers. Note that some of the features require a recent browser, such as Firefox 2 or IE 7. Also, JavaScript must be enabled in your browser, and text should be set to its normal size.
- Curved Text
- A Weather Widget
- An Ajax Weather Widget
- A Fixed Background Image
- A Hit Counter
- A "Private Membership Area" Demonstration
Curved Text
What it does
A few cascading style sheet (CSS) styles, in conjunction with a small amount of JavaScript code, can be used to create a text area with curved or slanted borders and to cause the text to automatically flow within this area. A full circular area, as seen in this demo, is just one possibility.
How it works
The trick is to use JavaScript to generate a sequence of 1-pixel high <div> elements. Each <div> element has a different width—the varying widths establish the shape of the border. The CSS float style must be used to make the divs float either to the left or to the right, depending on whether you are creating a left or a right border (this example has both). Also, the clear style must be used to make left-floating divs clear on the left, and right-floating divs clear on the right. The CSS styles and JavaScript code are given below. Note that the code contains a few subtleties for creating margins between the text and the floating divs.
View CSS Styles & JavaScript Code
A Weather Widget
What it does
The Weather Widget is a dynamic web page that collects weather data for Taos, NM from two National Weather Service websites and displays it in a concise format. Below, the page is displayed within an iframe element. The page could also be displayed in other environments, such as on the Windows XP desktop. The page is automatically regenerated every 20 minutes, so that the data remains up-to-date. The page could, of course, be customized to display weather data for any other area.
How it works
The Weather Widget is generated by a PHP script (Weather.php, given below), which resides on the server. It uses the "screen scraping" technique: PHP functions are used to read in the National Weather Service web pages and then regular expression functions are used to extract the desired data.
The page is automatically refreshed every 20 minutes via a JavaScript routine that uses the setInterval function. Note that automatic refreshing could also be generated using the following meta element in the page header,
<meta http-equiv="Refresh" content="900">
However, this approach is highly unreliable in Internet Explorer (and possibly in other browsers—at least when the widget is displayed on the Windows XP desktop).
An Ajax Weather Widget
What it does
The Ajax Weather Widget, given below, is a table that displays the current weather conditions in Taos, NM. The data is updated every 5 minutes.
How does the Ajax Weather Widget differ from the Weather Widget given previously (other than displaying only the current conditions and not the forecast)?
First, the Weather Widget above consists of a separate document that is displayed within the current page (inside of an iframe element), while the Ajax Weather Widget is an integral part of the current page (a table element).
Second, with the Weather Widget, the entire document must be reloaded from the server with every update in the weather data. Because the Ajax Weather Widget is an integral part of the current document, having to reload this entire document with each update would be awkward—it would require not only retransmitting the full document from the server, but also regenerating all the demonstrations with every update. By using Ajax, however, only the new weather data is transmitted from the server—this is done in the background and the resulting data is unobtrusively slipped into the table.
 |
Taos Weather |  |
|
| Last Update: | |||
| Temperature: | |||
| Sky Conditions: | |||
 |
Wind: |  |
|
How it works
The current weather data is obtained every five minutes through a call to the updateWeather function (the page initialization script passes this function to setInterval to generate the automatic calls). updateWeather (given below) uses an XMLHttpRequest object to obtain the weather data in XML format and then inserts this data into the table.
View updateWeather & related code
A major limitation on the XMLHttpRequest object is that it can be used to access a URL only on the same domain from which the current document was served (the same-origin policy). Because the weather data is contained on a different website (a National Weather Service site), I used a two-stage method: The script in the current page uses XMLHttpRequest to request the weather data from a PHP script on my web server (WeatherAjax.php, given below). The PHP script then obtains the data from the National Weather Service website, formats it as XML, and returns it to the current page. Note that because so many links are involved in obtaining and displaying the weather data, the PHP script and the embedded JavaScript include fairly extensive error checking.
A Fixed Background Image
What it does
A cascading style sheet (CSS) allows you to assign a fixed background image to a particular element in a document (such as a <div> element). A fixed image remains at a fixed position within the browser window and does not scroll as you scroll the document. The interesting feature of a fixed image is that it is visible only within the specific document element to which it has been assigned—it therefore appears only when you scroll that element over the position of the image.
In this demonstration, a fixed image of a light-colored sun has been assigned to the document division (<div> element) that you are now reading. And a separate image of a dark-colored sun has been assigned to the shaded code blocks within this division, creating the illusion that the sun is being viewed through—and is being shaded by—the shaded areas.
Note that fixed images are supported only by recent browsers, such as Firefox 2 and IE 7. Therefore, if the image doesn't appear as described, perhaps it's time for a browser upgrade!
How it works
The section of text you are reading right now is contained in a <div> element with the class "demoDiv". The fixed image of the light-colored sun is assigned to this element through the following CSS code:
div.demoDiv, pre.demoPre
{
background-color:#ffffff;
background-image:url(Images/SunLight.gif);
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}
The shaded code blocks are contained in <pre> elements with the class "demoPre". The fixed image of the dark-colored sun is assigned to these blocks by the following CSS code, which overrides the conflicting assignments given by the previous block of CSS:
pre.demoPre
{
background-color:#eeeeee;
background-image:url(Images/SunDark.gif);
}
A Hit Counter
What it does
The hit counter, shown below, can be used to tally the number of times a site visitor newly opens a page. (The hit counter will typically not be incremented when the user clicks the Back button to revisit the page.) It can be added to any page as an embedded image. If you click the Refresh button in your browser now (or press F5), you'll notice that the counter below is incremented.
How it works
The counter consists of an image (<img>) element embedded in the web page. The following is an example of the HTML markup:
<img src="Counter.php?counterid=3&fontnum=4&margin=4" style="border-style:ridge;" alt="Counter">
The source of the image is a PHP script (Counter.php, given below). The script handles multiple counters—the ID of the counter to be used is given in the query string in the URL. The counter values are stored in a MySQL database. The script first increments the counter and then displays the new value in an image (in GIF format) that it generates and sends back to the browser.
A "Private Membership Area" Demonstration
What it does
This example demonstrates the creation of a private, members-only area on a website, using basic browser authentication and SSL (Secure Sockets Layer) encryption. To enter the demo private area, click the "Try It Out—Enter Private Area" link below. Your browser will then display a dialog box prompting you for a "User name" and a "Password." If you do not yet have a user name and password, simply click the Cancel button in the dialog box. A page will then appear that will give you the opportunity to register for the site and select a user name and password, which will be stored on the server. You can subsequently use this user name and password to enter the private area.
Once you enter one page within the private area, you can navigate to any of the other pages without reentering your password. All exchanges with the server, including submitting your password, are encrypted with SSL. Note that clicking this link will move you to the https://secure.bluehost.com domain. This domain is provided by my website's hosting company and provides the SSL protocol and digital certificate.
Try It Out—Enter Private Area
How it works
All pages in the private area are PHP scripts. Each of these scripts begins by including the SSLCheck.php script, given below, which makes sure that the user is connected to the site using the SSL URL.
The Register.php script, given below, displays the registration form and saves the usernames and (encrypted) passwords in a MySQL database.
Finally, the Check.php script, given below, is included at the beginning of each content page in the private area. If a valid username/password pair has not been submitted by the browser (validity determined by checking the database), this script sends back headers to the browser indicating that viewing the page is unauthorized but requesting basic authentication. These headers cause the browser to display the username/password dialog box.
The advantage of using the browser's basic authentication feature is that the user needs to enter the username and password only once during a browser session. The browser continues to submit the same username and password until the browser window is closed. Another way to achieve this same result is to use PHP session management.
