Monthly Archives: February 2010

How To Assign The Current Date and Time to a MySQL Datetime Field using PHP

This is a no-brainer, but I always forget how to do it. MySQL datetime fields are stored in this format: 2010-02-18 10:33:18. Here’s a trivial example showing you how to populate a datetime field with the current date in the correct format, then write it to a table:

 // Assign current date to a MySQL date field:
 $eventdate = date('Y-m-d H:i:s');
 //... (mysql connection code goes here)
 mysql_query("INSERT INTO Events (Event, EventDate) VALUES ($eventtext, $eventdate)");

Another question might be: “Why?” – when MySQL has the now() function. I needed to do this in Drupal, because I’m using the drupal_write_record function to update a table in a custom module. This requires assigning PHP values to fields in my table, rather than using any built-in MySQL functions.

The jQuery UI CSS Framework – Part 2: How To Create Widget-style Boxes

This is the second post in a series on the jQuery UI CSS Framework.    Here’s the first one.

Today I’ll show you how to create a nice looking box that has sort of a widget appearance to it. The jQuery UI components already provide similar functionality. For example, the Dialog Box is quite pretty, and you can easily make it modal or not.  But frequently we want to make a box for content somewhere on a page- much like the sorts of boxes that appear on WordPress blogs, Drupal sites or iGoogle, for example.  The jQuery UI CSS Framework comes with selectors that make this easy. Also, remember that one of the benefits of the UI framework is that you can easily change the theme of your site, without having to touch any markup or CSS – you simply change the path of the external theme css file to point to another directory. Again, the examples I’ve made use the Redmond theme.  Here’s the markup for a simple box with a nice heading:

<div id="mybox" class="ui-widget ui-widget-content ui-corner-all" style="margin-top:20px; width:300px; height: 150px;">
  <h3 class="ui-widget-header">Weather Widget</h3>
  <p><span class="ui-icon ui-icon-comment" style="margin: 0 2px 0 2px; float:left;"></span> Tomorrow it will be light during the day, and dark at night.</p>
</div>

It’s rendered (in FireFox) like this:

weatherwidget

As you can see, the markup is pretty simple.  I’ve given the container  div an arbirtrary width and height. You might want to specify  a width, but omit the height s that the div just stretches with your content.  Let’s look at the classes used for the div, the heading (h3) and the image respectively:

The div tag:    The class  .ui-widget  ensures we use  a consistent font family and size for the content inside it. It also applies the 1.1em rule. Combined with the css selector :    body {font-size: 62.5%} this initially yields a font size of 11px at typical screen resolutions. This whole 1.1em thing can be a bit of a problem, as I’ve discussed in other posts. For example, if I embed another container using the same selectors, my text comes out at 12.1px (1.1x 1.1em).  You can inspect your element with Chris Pederick’s Web Developer plugin for FireFox to see bad behavior at work. For example, see below:

Font size for second container text is now 12.1px, not 11px.

Font size for second container text is now 12.1px, not 11px.

I ran into this in an app where I had tabs embedded inside tabs. The jQuery UI code applies the .ui-widget class to tabbed content containers behind the scenes, so I ended up with oversized text compared to the rest of my page.

The class of .ui-widget-content applies the border, along with some padding. the .ui-corner-all selector gives us rounded corners (in FireFox and Chrome, not IE).

The h3 tag: This uses the class  .ui-widget-header. This is pretty self explanatory. It applies a nice background on white text (based on the Redmond theme) to our heading. You can use this class on other tags, too. For example, I use it on tr tags for my table heading rows.

The image (span) tag: (.ui-icon and .ui-icon-comment).  I just threw this in as a bonus for this lesson. jQuery UI is very clever at handling icons. Instead of having a whole bunch of images, you basically have one big image sliced into squares, with each icon class being a small window over the appropriate square. This is a variation on the famous Sliding Doors sprite concept at A List Apart.  It saves different image resources having to be loaded, to optimize performance. It also allows the icons to be themed easily, because you don’t have to change the path for an image, as you would for a typical HTML img tag. You can also apply a hover state to any icon in the set, simply by setting the class to .ui-state-highlight.  We’ll cover this in more detail in a later article.

In this case, I used a span tag to display the comment icon. This could also be an anchor tag, or a li tag, or whatever.   The .ui-icon class gives us a 16 x 16 pixel area blocked out for whatever icon we choose. The .ui-icon-comment class displays a comment icon (similarly, .ui-icon-trash shows a trash can, etc. etc.). You can see the entire set of available icons at the Themeroller page.  The default setting for .ui-icon is display:block, which forces a line break, which is why I had to add an inline style setting of “float: left” to get it to appear on the same line as my text.

That’s it!  the next article will show you how to style pretty forms elements with the framework.

How To Embed A Google Calendar Gadget In Your Web Site

Google provides two simple ways, other than you writing your own client code to talk to their APIs, to embed a calendar in your web page. One method is easily found by Googling for the info. This link explains how you can generate a piece of code directly from your calendar settings page, which you then paste into your page. This code uses a simple iframe. The other method is to use a Google Gadget. While they are primarily meant to embed in iGoogle, you can also embed them in your own site. Here’s how:

  1. Log in to the Google account that owns the calendar you want to embed.
  2. Make sure the sharing option is set to public (if that’s truly what you want!)
  3. Go to this URL:    http://www.google.com/ig/directory?hl=en&url=www.google.com/ig/modules/calendar3.xml. This is a Google gadget.  Note the last part of the URL – calendar3.xml .  DO NOT use calendar.xml . It doesn’t work any more (as I found out to my chagrin when the  calendar for our local soccer club web site suddenly stopped rendering for no apparent reason).
  4. You’ll see a link in the bottom right hand side of the page, titled: Embed this gadget >> , which means ‘Embed this gadget in some page other than at iGoogle’.   Click on this link .
  5. Customize the gadget’s appearance with the available options. You should see the changes you make reflected immediately. If not, click ‘Preview Changes’.
  6. Once you are happy with the final appearance, click ‘Get the code’
  7. Select the generated code in the text box, copy and paste it into your page.

The gadget uses an XML feed via web services to draw the content directly in the page, as opposed to using an Iframe, which for a Geek like me is a much more elegant solution than more easily found one. Plus, I like the fact you get a monthly calendar with a list of upcoming events directly below it. (When you customize the gadget’s appearance, change the height to 400px, for example, and you’llsee what I mean).

You can see a working example at Saanich Peninsula Soccer Club’s site.