How to quickly create html form-fields using BBEdit’s GREP search and replace function

Creating HTML form field from a list of database fields can be a tedious task, with a lot of exact matching of names both in the creation of the form fields, ajax handlers in PHP and javascript code to update.

Fortunately, BBEdit has a GREP search and replace function that helps us do the task semi-automatically.

Let’s start with our list of fields, – this can easily be obtained from the database tool. My favorite is MySQL workbench, but I am sure most other tools have the same functionality.

STEP 1: In the left column of MySQL workbench, you have a list of tables, that can be expanded to show the columns in each table. Mark each one you want in your form with the Option key down to mark several fields individually.

STEP 2: Right click in the list, and chose “copy to clipboard” and “names (short)”. You now have your field list on the clipboard.

STEP 3: Open BBEdit, a new document, and paste in your field list. You see each field is enclosed in “backticks” that makes it ideal as a delimiter in our search expression.

STEP 4: We have a comma-separated list of fields, and this we turn into one field pr line simply replacing the comma with a newline character.

This gives us a starting point for creating the fields. This is the list of fields we want in our form. You can manually reorder the list as you wish, but for here we stick to this order.

It is wise to copy and paste this into another document so we have our source list available for more code generation. Our grep source will modify this one, so have a copy handy will help us.

STEP 5: Create the GREP reg-ex pattern. This can be done in regex-pal, or you can just copy the content here.

The reg-ex says, any number of characters in the range A-Z, a-z, 0-9 and underscore enclosed in backticks. The Parenthesis says this is a capture group that can be inserted into the replace-to using

This alone would of course just give us the names without the back-tics and that’s not what we want. A more suitable “replace-to” would be:

You see, we have our capture group insertion in five different places. I have chosen to prefix the fields and variables with “zz” to make it unique. Any prefix will do as long as consistency is applied.

STEP 6: Do the magic:

Remember to check the “Grep” box in the find dialogue. It will not work without it. Hit the “Replace All” button, and see what happens.

STEP 7: Paste the code into your PHP document where your code goes. You can now easily edit the code to fit into your form design adding the DIV-tags and FORM tags, style it with CSS and more on.

 

NOW, we probably want PHP code to initialize the variables used in the value parameter. Go back to your document and copy the backup text – or you could hit Option-Z to undo the replace bringing back your original field list. We use the same search pattern. In the “Replace-to” field, insert something like this:

Hit replace-all again, and then we get:

A similar construct can be used all places where you want code manipulating those database fields.

Good luck

References:
BBEdit from Bare-Bones Software

Leave a Reply

Your email address will not be published. Required fields are marked *