Web Tools
Collection of website building tools and code samples
- Popup help window
- Close button
- PHP headers and footers
- Pre-built bulletin boards, photo albums and blogs
- Image to HTML gallery script for blogs
- 'Web form to email' list management page
- Modifications to open source PHP chart plotting module PHPlot
Popup help window
Context sensitive help may be added to a web page by embedding help links throughout a document. These links will pop up a small window above the window the user is browsing in. WARNING: many sites use this technique for displaying advertising, and web browsers are reacting by blocking popup windows. This close snippet is aware that users may be blocking popups and the code includes an alternative way of displaying the help message in a new window that shouldn't be blocked.
[Example]
- Write a single help message in a HTML page named 'help01.html'. Recommended that a style sheet be set up for these help messages where the background is yellow and the text is a simple black font.
- Create an anchor in the master HTML file that uses the following javascript to implement the popup window:
<a href="help01.html" target="helpwin" onClick="rsvpwin = window.open("help01.html", "helpwin", "width=250,height=250,resizable=yes,scrollbars=no,menubar=no"); rsvpwin.resizeTo( 270,270); rsvpwin.focus(); return false;"> Help </a>
Close Button
To include a 'Close' message in the HTML of the help message, use the following code:
<p style="text-align: right;">
[ <SCRIPT LANGUAGE="JavaScript">
<!--
if (window.name=="helpwin")
{document.writeln ("<a href=\"#\" onclick=\"window.close();\">");}
else {document.writeln ("<a href=\"#\" onclick=\"history.back(1); return false;\">");}
//-->
</SCRIPT>Close</a> ]</p>
Only use this script to close windows created using the Help Window code in the previous section, otherwise change the window name being checked for. The script works whether or not pop-up blocking is active in the browser. If blocking is active, it goes 'back' to the previous page. If blocking is not active, then it closes the window.
PHP headers and footers
Don't build a whole set of web pages that all have the same button bars and other common code. Instead build a single 'header' file that contains all the code common to all the pages. Insert a single import command at the head of each web page that pulls in a single 'header' file that contains all the common code. Then when it is time to update the common information (example, put a new button on a button bar), simply edit the 'header' file and all the web pages will automatically reflect the updated information.
- Ensure the host has PHP capability
- Build two text files with the extension '.php': first will be 'header.php' and the second 'index.php'.
- If you don't want to use different meta tags and titles for each page,
- put all the code between the first <HTML> statement down to the end of the header code into the file 'header.php'.
- put the following statement at the beginning of the 'index.php' file:
<?php include 'header.php' ?>
- append all the code below the header code into the file 'index.php'.
- repeat the steps for the 'index.php' file for all the other web pages. Ensure all subsequent pages also have the extension '.php'.
- If you want to use custom meta tags and titles,
- put code between the </head> and the end of the header code.
- put the code between the <html> and </head> at the beginning of the 'index.php' file.
- append the following statement:
<?php include 'header.php' ?>
- append all the code below the header code into the file 'index.php'.
- repeat the steps for the 'index.php' file for all the other web pages. Ensure all subsequent pages also have the extension '.php'.
- Optionally, create a 'footer.php' and include any common code for a footer.
- Save files to the web host
- (check) Ensure that there is no 'index.html' file in the same directory as the 'index.php'. The web server will display the HTML file instead of the PHP file.
Pre-built bulletin boards, photo albums and blogs
Several pre-built bulletin boards and blog engines are available for free download off the internet. Two good ones are:
Both these products expect to have PHP and mySQL installed on the server.
Several different photo gallery scripts available on sourceforge.net. To build a simple gallery without messing around with SQL, try yappa-ng.
Gallery to HTML PHP script
Here are some canned PHP scripts available for folks to download.
- Simple gallery script that will give the HTML code associated with small images in a directory.
Most useful for putting on a blog site to let people browse available icons or avatars.
[download .gz or .zip] [demo]
LISTMINDER
Web based form that emails standardized add/remove requests to people
operating email or telephone lists. Useful for sports clubs and other groups who use a PIM or
spreadsheet for tracking email and phone numbers.
[download listminder2.0.tar.gz] [Screen shot]
GoogleBork
Mycroft plugin to allow Firefox users to search Google using the Muppet's Swedish Chef language.
[download googlebork.src]
PHPlot
Open source web based PHP graphic library that plots charts. The community website is here: http://www.phplot.com and some code modifications AGD has made to the community code is available here: http://www.agdconsulting.ca/webtools/phplot.php
Copyright 2009, Alex G. Doll Consulting Ltd.