CS 601 – PHP Multiline Strings

by

During the course of my project, I had many instances of needing to write very long strings, often when constructing moderately complex MySQL queries. There are several way to do this. One would be repeated each statements or assignment with .= . Another would be running the echo/assignment over multiple lines by using . at the end of each until the final one (ended with ; ). Example:

$mystr = 'Here is a really long line of text that runs to '.
         'more than one line';

I found a very clean and convenient way is to use PHP’s heredoc syntax. Here’s an example:

$query = <<<EOT
        SELECT * FROM tblOrderItems
        INNER JOIN tblFoodItems
                ON tblFoodItems.intFoodItemID = tblOrderItems.intFoodItemID
        INNER JOIN tblFoodCategories
                ON tblFoodCategories.intFoodCategoryID = tblFoodItems.intFoodCategoryID
        INNER JOIN tblFoodCategoryOrder
                ON tblFoodCategoryOrder.intFoodCategoryID = tblFoodCategories.intFoodCategoryID
        WHERE intOrderID = {$order['intOrderID']}
        ORDER BY tblFoodCategoryOrder.intFoodCategoryOrder, tblFoodItems.vcFoodItemName
EOT;

There’s a few things to note:

  • The EOT is arbitrary as long as both instances are the same. (I use EOT for “end of text”.)
  • Variables can be included in the string. A simple variable is simply included as $myvar. Here, I use the {} to separate out a “complex” variable. (I didn’t realize this could be done until later on, so for some of my earlier instances, I set it to a simpler variable immediately before the heredoc declaration.)
  • The terminator (here EOT;) MUST be on a line by itself with no leading or trailing whitespace. This cannot be emphasized enough. Leading whitespace is pretty easy to spot, but several times NetBeans added trailing whitespace which wasn’t obvious in and of itself. (NetBeans does color the heredoc string differently, so you will see the “carry over”.) I finally got in the habit of checking.

PHP ≥ 5.3.0 also has the nowdoc syntax. It’s very similar to heredoc except is uses $myvar = <<<‘EOT’ (note the single quotes). The difference is that variables are not expanded akin to standard single quoted strings.

CS601 – Delete Current Element from DOM

by

At one point a few weeks back (for one of the homeworks), I could not figure out how to delete the current element from the DOM while working in Javascript. Some searching turned up the following solution:

detaildiv.parentNode.removeChild(detaildiv);

Basically, you get the element’s parent node, then deleted the specified child node, this being the element. I’m not sure this the standard method, but it works and is clean. (This was before we were looking at JQuery, so perhaps it has a better solution.)

CS601 – Tablesorter

by

I’m a bit behind in blogging for class due to time constraints. I’m spending most of my free time working on my project. I have a bunch of ideas in the queue, but here’s one I just used tonight.

One aspect of the project requires a sortable table. Not easy to implement on my own, but I found the very nifty JQuery UI Tablesort plugin. This is pretty cool and pretty easy to implement. I’ll include some snippets from the page which shows the employees as list of all reservations.

Here is the JS code which creates the object:

<script type="text/javascript">

// add parser through the tablesorter addParser method
$.tablesorter.addParser({
// set a unique id
id: ‘restatus’,
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// format your data for normalization
return s.toLowerCase().replace(/made/,0).replace(/arrived/,1).replace(/seated/,2);
},
// set type, either numeric or text
type: ‘numeric’
}); $(document).ready(function()
{
$(“#restable”)
.tablesorter();
}
);
</script>

The first block is simply a function to allow me to sort the reservation status (e.g., has the party arrived, have they been seated) using an ordering index regardless of the text for the status. (E.g., I would want “Made” sorted before “Arrived”.)

The second block actually creates the applies the tablesorter object to the HTML table with the ID of restable. This table is a plain old HTML table with the addition of the class of tablesorter.

You can also download the themes from the site, put them in your CSS directory, and then include that in your header. With all that you get the following (on load):

If you click the Last Name column:

If you click the Date/Time column:

It does the date correctly automatically. (Verified as 11/30/2011 12:00 PM sorts before 11/30/2011 01:30 PM and before 01/20/2012 07:45 PM. If it was a simple text-based sort, this would not be the case as 0 comes before 1.)

It can also do multicolumn sort and a multitude of other things which I have not explored.

New Kyle Photos

by

I know I have been very remiss in not posting recent photos of Kyle. (The most recent ones were posted in April.) I have finally managed to go through and tag/catalog all the ones I have (up to a couple of weeks back). I’ll be posting them over the next few days. Please keep in mind that in order to finally catch up, I decided to simply batch process all the images, so they may not be up to the usually standards. (Normally, I manually process each image, but that’s quite time consuming.) Anyway, the first batch is up at Kyle: May & June 2011. Here’s a couple of images:

At Ben & Jerry's

At the Providence Zoo

 

Kyle on Halloween

by

As a surprise to us all, Kyle decided not to be a firefighter on Halloween this year. Instead he was a zookeeper. (He was a firefighter for the trick-or-treating on Sunday in downtown Westfield.) As another surprise, we ended up trick-or-treating with snow on the sidewalks in Westfield. Here are a couple of photos.

CS 601 – Clearing Divs

by

One of the issues that came up was where cases where divs floated (left, but I suppose it could happen to right floated ones as well) is that they are misaligned when they don’t fill the space. Below is an example of this from my registration form. What I want is to get fields in the form:

City     State   Zip

Phone     Email

Instead I get:

I fixed this to get the desired result:

How did I do this? I used a “clearing” div as follows:

        <label for="zipcode"><span>Zip</span>
            <input type="text" name="zipcode" />
        </label>
        <div class="clearing"></div>  <=== Relevant Code
        <label for="phone"><span>Phone</span>
            <input type="text" name="phone" />
        </label>
        <label for="email"><span>Email</span>
            <input type="text" name="email" />
        </label>

(Note, I omitted the City and State as the State select input has a bunch of irrelevant PHP code.)

An here's the CSS:

.clearing {
    clear: both;
}

Based on some quick reading, this is telling the browser to not allow floating elements on both sides, hence resetting the floats. I have to admit, I didn't realize this now. Instead, I have been using it extensively for float issues in the BU WordPress installation used for the Chemistry website. (It works even better now that they're not lost when someone edits a page with the visual editor instead of the HTML editor.)

Based on some additional reading, it seems like another way to do this is to put the objects in a containing div and then setting the width and overflow: auto . (See http://www.quirksmode.org/css/clearing.html.) I actually think the "old" way is better as you don't have to readjust the width of the container if the inner elements change and you don't have to have the extra CSS to set the width for each and every container. (Instead, I have one CSS selector for div.clearing.) Also, In my mind it's cleaner to have the single, self-contained div line in the HTML instead of the div wrapping a bunch of other code.

CS 601 – Scrollable Divs

by

While doing my styling, I realized the menu is going to be much longer than the space I have allotted for it in the design. I used the technique listed at http://www.htmlite.com/faq015.php to make the menu div scrollable. Here’s the CSS:

.menu {
    height: 700px; /* Same height as content div */
    overflow: auto;
}

Here’s what it looks like:

I’m not sure I like what it looks like, and I may replace it with some nicer Javascript. For now, however, it works.