> online showcase > programming > web programming demos

This page presents demonstrations of various web programming techniques, using HTML, CSS, JavaScript, 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 fairly recent browser, such as Firefox 2 or IE 7 (or a later version). Also, JavaScript must be enabled in your browser, and text should be set to its normal size.




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 or oval 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 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.

Counter

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&amp;fontnum=4&amp;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.

View Counter.php


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.

View SSLCheck.php

The Register.php script, given below, displays the registration form and saves the usernames and (encrypted) passwords in a MySQL database.

View Register.php

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.

View Check.php

Valid HTML 4.01 Transitional