Modular Design
Modular reusable web components
Over the years of designing web sites individually and as part of a team
the necessity of designing in a modular reusable way became apparent.
I will shortly publish an article about how to work in a modular way both
for server side components and equally importantly for client side
components and web site design itself.
Here are some examples of modules I have designed, which I use and reuse
on many of the web sites I design.
Client Side modules
- Web site design module (HTML and CSS)
- Form field validation (JavaScript)
- DHTML element movement (HTML, JavaScript and CSS)
- Button rollovers (HTML and JavaScript)
- Image Preloading (HTML and JavaScript)
Server side modules
- Form field validation (ASP or ColdFusion)
- Discussion Forums / Guestbook (ASP or ColdFusion)
- Member login, with multiple security levels and user management
(ASP or ColdFusion)
- Email address verification system (ASP or ColdFusion)
- Email sending, SMTP (ASP, ColdFusion)
- Web based email client, POP3 (ColdFusion)
- Create new email accounts (ColdFusion)
- Easy Content Management System, supporting multiple editors (ColdFusion)
- Free ISP signup
- Domain Name signup and web space configuration.
- Easy Web based editing/Updating of pages (or parts of pages)
stored on any server with FTP access (ColdFusion)
- Easy Web based file management for web space. (ColdFusion)
- Database access - general (ASP or ColdFusion)
- Voting system (ASP or ColdFusion)
- Image upload, with autothumbnail and image resize facilities (ColdFusion)
- Counters, Form to Email, Imagemaps etc.
Other Modules
- Statistics and graphing system for IIS log files (In progress, server
and / or client software system)
- Shopping cart, store management and checkout system - both
server and client modules (ColdFusion)
- Mailing lists
- Email server control (ColdFusion)
- Web server/ Emai system and security diagnostics with web based
reporting and administration controls (ColdFusion).
Client Side modules
Web site design module
| Technologies used |
HTML and CSS |
| Brief Description |
Methodology for designing a modular interface for either a dynamic
or static web site. |
| Author |
Simon Moore |
| Dates |
2000 to current |
| How is it used |
Primarily this module is methodology rather than a component and is
used to provide the interface for all other modules. HTML is kept as
clean as possible by removing all formatting and layout instructions to
CSSs, all appropriate elements such as DIVs are assigned a class and ID
(even if we are not currently going to format them web may wish to
later). Tables should not be used for layout! |
| Module list |
In dynamic sites or as templates in static sites
- top (code for banner/logo/top navigation)
- bottom (code for banner/logo/bottom navigation)
- side (code for navigation)
- myStyle.css style sheet for web site
- myPrintStyle.css style sheet for printer if neccesary
|
Form field validation (JavaScript)
| Technologies used |
JavaScript |
| Brief Description |
Validates the form fields of a web page. By running client
side it avoids additional server load and time delays checking a user
has filled in a form correctly. |
| Author |
Simon Moore |
| Dates |
2000 to current |
| How is it used |
On every page with a form |
| Module list |
- validate.js included onto page with form. Validation:
- IsString (Non empty string)
- IsNumber (non empty number)
- IsEmail (is a valid email, i.e. one dot, one @ and at least six
characters)
- IsPhonenumber
- IsPostcode (UK)
- NoSpaces (No spaces in field)
- NoSQL (No SQL commands)
- NoHTML (No HTML in field)
|
DHTML element movement (HTML, JavaScript and CSS)
| Technologies used |
HTML, JavaScript and CSS |
| Brief Description |
Moves an object around the screen |
| Author |
Simon Moore |
| Dates |
2000 to current |
| How is it used |
|
| Module list |
|
Button rollovers (HTML and JavaScript)
| Technologies used |
HTML and JavaScript |
| Brief Description |
Changes the button image |
| Author |
Simon Moore |
| Dates |
2000 to current |
| How is it used |
|
| Module list |
|
Image Preloading (HTML and JavaScript)
| Technologies used |
HTML and JavaScript |
| Brief Description |
Preloads images on a page |
| Author |
Simon Moore |
| Dates |
2000 to current |
| How is it used |
|
| Module list |
|
Server side modules
Form field validation (ASP or ColdFusion)
| Technologies used |
ASP (JavaScript) or ColdFusion |
| Brief Description |
Validates the form fields of a web page. By running server
side it prevents hackers doing nasty things by entering SQL or other
code into form fields. |
| Author |
Simon Moore |
| Dates |
2000 to current |
| How is it used |
On every page with a form |
| Module list |
- validate.js / validate.cfm included onto action/form processing
page. Validation:
- IsString (Non empty string)
- IsNumber (non empty number)
- IsEmail (is a valid email, i.e. one dot, one @ and at least six
characters)
- IsPhonenumber
- IsPostcode (UK)
- NoSpaces (No spaces in field)
- NoSQL (No SQL commands)
- NoHTML (No HTML in field)
|
Discussion Forums / Guestbook (ASP or ColdFusion)
| Technologies used |
ASP (JavaScript) or ColdFusion |
| Brief Description |
Discussion forums and or Guestbook |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
- Allows user to self signup
- Protected and Public forums
- Multiple Threads
- Message sorting, threading and indenting
- First and Last message dates and number of posts in each thread
- Full Email address verification/activation, to prevent bouncing an
email is sent to the specified address, the user must repsond to the
email to activate the email address
- Email notification of replies and or new messages
- Reply to message, Create new message, create new message in a new
thread
|
| Module list |
|
Member login, with multiple security levels and user management
(ASP or ColdFusion)
| Technologies used |
ASP (JavaScript) or ColdFusion |
| Brief Description |
Login system, user management, multiple levels of security can be
applied to a whole or part page |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
- Allows user to self signup
- Users can be moderated, i.e. cannot do anything until system
administrator enables them
- Full Email address verification/activation, to prevent bouncing an
email is sent to the specified address, the user must repsond to the
email to activate the email address
- multiple levels of security can be applied to a whole or part page
- user management
- Create Groups
- Add user
- Delete user
- Modify user
|
| Module list |
|
Email address verification system (ASP or ColdFusion)
| Technologies used |
ASP (JavaScript) or ColdFusion |
| Brief Description |
Full Email address verification/activation, to prevent bouncing an
email is sent to the specified address, the user must repsond to the
email to activate the email address |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
- Full Email address verification/activation, to prevent bouncing an
email is sent to the specified address, the user must repsond to the
email to activate the email address
|
| Module list |
|
Email sending, SMTP (ASP, ColdFusion)
| Technologies used |
ASP (JavaScript) or ColdFusion |
| Brief Description |
Server can send emails |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
|
| Module list |
|
Web based email client, POP3 (ColdFusion)
| Technologies used |
ColdFusion |
| Brief Description |
Web based email client, can login to local server or remote POP3
servers. |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
- Receive read a copy of email from any POP3 server
- Delete email from any POP3 server
- Read attachments
- Send email and reply to email (with attachments).
- Address book
- Can store users email accounts, allowing single username password
to access multiple accounts
|
| Module list |
|
Create new email accounts (ColdFusion)
| Technologies used |
ColdFusion |
| Brief Description |
Creation of new email account on local email server (i.e. for any
domains on this server) |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
|
| Module list |
|
Easy Content Management System, supporting multiple editors (ColdFusion)
| Technologies used |
ColdFusion |
| Brief Description |
WYSWIG html editor, works in internet explorer, can save whole
pages, or parts of pages or into a database for dynamic web sites.
Allows web designer to specifiy elements of a page that a user can edit. |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
WYSWIG html editor, works in internet explorer, can save whole
pages, or parts of pages or into a database for dynamic web sites.
Allows web designer to specifiy elements of a page that a user can edit. |
| Module list |
|
Free ISP signup
| Technologies used |
Proprietary system |
| Brief Description |
Free ISP signup, with script to configure Outlook express and dialup
connection. (0845 local rate number) |
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Domain Name signup and web space configuration.
| Technologies used |
Proprietary system |
| Brief Description |
After paying money you can get a domain name and assign it to some
web space |
| Author |
|
| Dates |
|
| Features |
Ideal for using with a modular web space system. |
| Module list |
|
Easy Web based editing/Updating of pages (or parts of pages)
stored on any server with FTP access (ColdFusion)
| Technologies used |
ColdFusion |
| Brief Description |
WYSWIG html editor, works in internet explorer, can save whole
pages, or parts of pages or into a database for dynamic web sites or
FTP. Allows web designer to specifiy elements of a page that a
user can edit. |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
WYSWIG html editor, works in internet explorer, can save whole
pages, or parts of pages or into a database for dynamic web sites or
FTP. Allows web designer to specifiy elements of a page that a
user can edit. |
| Module list |
|
Easy Web based file management for web space. (ColdFusion)
| Technologies used |
ColdFusion |
| Brief Description |
File management, upload files, delete files, rename files, edit
files, create directories, delete directories |
| Author |
Simon Moore |
| Dates |
2000 to current |
| Features |
File management,
- upload files,
- delete files,
- rename files,
- edit files,
- create directories,
- delete directories
|
| Module list |
|
Database access - general (ASP or ColdFusion)
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Voting system (ASP or ColdFusion)
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Image upload, with autothumbnail and image resize facilities (ColdFusion)
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
File upload (ColdFusion)
| Technologies used |
HTML, CFML |
| Brief Description |
Form to upload files, files stored on server system and information
stored in database |
| Author |
Simon Moore |
| Dates |
Version 2: Feb 2003 |
| Features |
- Upload any file type
- Store details of the file in a database
Auto File renaming to avoid conflicts if desired
- Security features to allow only certain file types or prevent
certain file types
- Virtual Folders, with descriptions
|
| Module list |
- uploadform.cfm
- upload.css
- uploadaction.cfm
- uploadsview
- foldersview
- folderview
- admin
- delete file
- edit file details
- new folder
- delete folder
|
| Dependency |
Security Module |
Counters, Form to Email, Imagemaps etc.
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Other Modules
Statistics and graphing system for IIS log files (In progress, server
and / or client software system)
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Shopping cart, store management and checkout system - both server
and client modules (ColdFusion)
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Mailing lists
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Email server control (ColdFusion)
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|
Web server/ Emai system and security diagnostics with web based
reporting and administration controls (ColdFusion).
| Technologies used |
|
| Brief Description |
|
| Author |
|
| Dates |
|
| Features |
|
| Module list |
|