If you are working on a project with someone else, whether it’s doing web development or something else, using a revision control system, such as subversion or CVS, will save you time. I have worked on project where there were only two developers, and we still had problems coordinating who was changing which files. A revision control system will allow you focus on the code, instead of worrying about overwriting someone else’s changes.

Hack Attack: How to set up a personal home Subversion server

Team System: Setting up a Subversion Server under Windows

OnLAMP: Version Control with Subversion: Introduction

As the saying goes, “Work smarter, not harder.” Here’s how I saved quite a bit of tedious HTML form work on one of my recent database-driven website projects.

For one of my recent projects, the Jamaica Football Database, I needed to create many forms for different types of records for players, staff, referees, teams, parishes, and so on. Each type of record has a corresponding database table within the MySQL database. Instead of writing all of that HTML by hand, I created two PHP classes to handle the generation of the forms and the processing of their submission. I used code generated by the PHP Object Generator for this project, which was the glue between these two classes and the database.

The first class, which I named ‘Form’, reads the field types from the selected table in the database and outputted HTML input, select, or textarea elements based on the field type. The class constructor accepts several other optional parameters. This class could also handle file uploads for fields with the VARCHAR type and a specific suffix in the field name.

  • A primary key value, to identify the record to retrieve default values from.
  • An array of the fields wanted from the table. This was added so that I could arrange different parts of the form separately.
  • An array of fields from the table that should be hidden fields in the form.
  • An array of text descriptions for the form fields.
  • An array of fields that should be ignored (so I could get all fields except for specific ones).

The second class, which was named ‘FormSubmit’, handles adding or editing records within the database. It reads the field list from the selected table and retrieves POST parameters that match the field names. It’s constructor also accepted an optional array of required fields, and an array of field descriptions (for error message purposes).

Writing these classes instead of writing the forms and form handing code by hand ended up saving quite a bit of time and was simpler that I initially thought it would be.

I thought that today I would show how to create a shadow beneath a div.

div element with shadow beneath it

First create an image of the shadow effect, and slice it into three pieces. The two corners should be the same size and should only be as wide as the curve of the corner necessitates. The third image will be a 1 pixel wide gradient that is as tall as the shadow effect you want is. This is the image that I used for the sample above, and for the dimensions in the CSS below.

Shadow

The following HTML should be at the bottom and within the div that you want the shadow effect for:

<div class="shadow-middle">
<div class="shadow-left"></div>
</div>
<div class="shadow-right"></div>

Then you will need the following CSS:

.shadow-middle {
width: 100%;
height: 21px;
background: transparent url(middle.gif) repeat-x;
position: absolute;
bottom: -21px;
left: 0px;
}
.shadow-left {
width: 36px;
height: 21px;
background: transparent url(left.gif) no-repeat;
}
.shadow-right {
position: absolute;
background: transparent url(right.gif) no-repeat;
width: 36px;
height: 21px;
bottom: -21px;
right: 0px;
}

Also make sure that the enclosing div has a relative position, so that the above CSS forces the shadow just below the bottom of it. If you have a border around your enclosing div, make sure you adjust the bottom positioning to move the shadow below it too. Enjoy!

Update: I’m so glad you don’t have to do this sort of thing any more.

My blog has a new theme! I spent a few hours today working on a design from my friend Dima at TYZ Design, and I’m pretty happy with the results. I plan on making some small changes to the appearance of links, and fix some XHTML validation errors in the next few days.

While I have used jQuery (a javascript utility library) in the past, I generally have fallen back to the Prototype JS library. This was mostly because I was already familiar with it from my work on FamilySnap, and because it can be difficult to find the time to fit in learning another tool when it’s not completely necessary to do so.</p> read more