Simple PHP Personal Contact Homepage (web3.0!)

by ian in Circuits > Websites

4264 Views, 10 Favorites, 0 Comments

Simple PHP Personal Contact Homepage (web3.0!)

phpphp1.png
phpphp4.png
phpphp2.png
phpphp3.png
This project is being developed on Google Code, check out the latest developments!

Philosophy
This is my web3.0* solution to a dead personal homepage. I've had my domain for nearly 10 years, but I only use it for e-mail and as a point of contact. That doesn't stop me from installing the latest trendy CMS every few months -- I usually do one post announcing the site, and then never touch it again.

This time I made a simple contact homepage just for me, and maybe you. It lets people contact you. That's it.

I added a web administration interface to edit the configuration file (config.inc.php), and a quick file upload interface for when you need to share a file, but don't have a FTP client handy.

The files are included in the project archive, and you can see my site. Feel free to post changes, themes, or collaborate on the project. I'm too lazy to start a project at sourceforge.net or freshmeat, and instructables is an easy way to document the project and host files.

*Web3.0 joke: I jokingly call this web3.0 because it's a reaction to the "all-flash-no-substance" web2.0 style personal homepages I've tried in the past. Yeah, AJAX is great, but what good is it if I never use the site? This is an evolutionary step for my personal homepage, based on a realistic assessment of the features I've used over the past 10 years, thus 'web3.0'.

Features
  • Simple contact form with javascript and server side address validation
  • All text customizable from web interface or config file.
  • Optionally verify MX record for the given email (a real server exists)
  • Submit limiter prevents rapid multiple submissions (junk and spam)
  • Easy theme system
  • "404 file not found" catch and redirect without nasty mod_rewrite
  • Will work through registrars' framed redirect (such as godaddy.com)
  • Admin configuration webpage for easy updates to the config file
  • Admin file upload interface
  • Admin MX record check interface
  • No MYSQL required.
  • contactForm class can be reused in custom projects

Quick Install
1. Un-pack and upload the files to your server.
2. Manually configure config.inc.php and upload it -- or -- surf to admin.php (user/pass: admin/admin) and configure from the web. Look at comments and descriptions to understand the configuration options.
3. (optional) Create a /files sub directory if you want to use the admin page uploader.

To do
  • admin interface styling
  • scan theme directories and create dropdown for admin
  • check and correct /'s in directory entries to avoid errors (/dir/)
  • captcha
  • Write contacts also to CVS file -- but how to protect (php)?
  • option to zip uploaded file?
  • cache?
  • smtp library for servers without mail() access
  • MYSQL connection for contact logging (and multiple site contact administration?)

Design Principals/Notes
  • Single page with inline/header javascript and css styling, all POST design. By sticking to this constraint, the page works through domain registrars' framed URL redirect (like godaddy.com, directnic.com, others). You can invisibly redirect your domain.com to a sub-domain or directory if your ISP is stingy with add-on domains. This also makes it easy to maintain your MX record with your domain registrar if you like to hop ISPs or you miss email because your cheap ISP is down a lot. You may still have to access the admin.php page from your actual host address if you use framed redirects.
  • No AJAX. A bit of javascript does e-mail validation, but that's it. It's a single page, it doesn't need to use the xmlhttp object!
  • Only e-mail is required and validated, that's all I need to get in contact.
  • Standalone. No DB needed, so it works on limited accounts. That's all a contact form should need. I hope to add an easy to configure-but optional- mysql logging feature in the future. Maybe.
  • Optional file not found redirects -- uses the .htaccess to redirect all not found files to 404.php, which bounces everything back the the address set in the config file. Useful for bouncing all not founds back to the top. This doesn't use mod rewrite, so it'll work almost everywhere, and shouldn't cause stupid mod_rewrite problems.
  • In the admin interface you can upload files (to a size limit set in the config.inc.php file) to the subdirectory set in the config file (you must create the directory yourself). This is the other feature I needed, a quick place to put files. Enjoy. The directory name should have a trailing slash, but not a leading slash (example "files/"). Note that for security reasons the upload features can only be enabled/disabled in the config.inc.php file, and not from the administration interface. In config.inc.php change $admin_upload_enabled=false or =true and upload to your server. Don't worry, the feature is ENABLED by default
  • MX check makes contact with the server at the email domain.tld (gmail.com) to make sure it has a mail record. This prevents errors and garbage submissions. If you are on a windows server (IIS), you must enable the alternate (WINDOZ) MX check method because only linux supports the 'good' method.
  • The class that reads and writes the configuration files for both the site and themes does not like comments placed after a variable. Comments above and below are fine.
  • For extra security, delete admin.php and confedit.class.php when not in use.
  • If you don' t understand an option in the admin.php web interface, check the config.inc.php file comments, which may contain a better explanation.
  • If you break the site by entering a bad value (such as a theme location without a trailing /), then you will need to open the config file an fix it by hand.

Themes
It is possible to add different CSS styles, and give CSS styles configuration options that show up in the administration menu (for example text size, colors, etc). Themes are simple to create, check the default theme, but here is a basic rundown of the process.

1. Create your CSS style sheet for the page. Something like firebug for firefox is really helpful.

2. Create a new directory under the /themes/ directory. Copy the new style sheet to the folder and name it css.css. Copy theme.php and config.theme.php from the default theme folder.

3. In the CSS file, locate all the variables you want to be able to adjust from a configuration file or administration interface. Replace the values with a bit of php code, like this:

  • <?php echo $theme_propertyname;?>

and replace propertyname with something easy to remember. In the default theme I made the header background color adjustable:

  • background-color: #FFFFFF; /* original CSS */
  • background-color: <?php echo $theme_background_color;?>; /*replaced with PHP code*/

4. Now clear the config.theme.php file and add your variables and default settings. In the above example I would add this line to config.theme.php:

  • $theme_background_color='#FFFFFF';

5. Finally, register the options you've created so that they show up in the administration interface. Open the copy of the default theme.php file. Change the theme name, author, and version as you like. Register each option you've created in the array in the function get_options():

  • return array(
  • array("des"=>"Colors (use CSS color codes)","type"=>"break"),
  • "theme_background_color"=> array("des"=>"Theme background color code:","type"=>"text", "val"=>$theme_background_color),
  • );

The first part:
  • array("des"=>"Colors (use CSS color codes)","type"=>"break"),
adds a heading to our configuration menu that says "Colors (use CSS color codes)". Change the text for your options. Type=>break specifies a section heading, use as often as you need for your menu.

The second part:
  • "theme_background_color"=> array("des"=>"Theme background color code:","type"=>"text", "val"=>$theme_background_color),
registers the variable name without the $ (theme_background_color), and gives it a description of "Theme background color code:" (change for your variable). Type specifies a text field (there are no other types at this time). Finally enter your full variable name after "val"=>, this time with the $ to map this entry to the variable you created in 4. Repeat as needed.

6. To use the theme, go to admin.php and set the theme directory to the directory you created, for example "custom/". The trailing slash is needed, do not use a leading slash. After you hit change, the new theme will be used, and the new theme options should appear in the theme configuration area.

Need server software to play with the code? I use apachefriends.org XAMPP package for development -- it installs a full Apache, PHP, MYSQL server in minutes without fuss. Do note that xampp does not come with a mail server by default, so you won't be able to actually send mail until you upload your files to a 'real' server.

Downloads