Adding Search to CodeIgniter Projects

This is a little tutorial that will add a Search function to your CodeIgniter projects. As you may already know, CodeIgniter is a PHP Framework that uses the MVC model. MVC stands for Model, Views and Controller. This article assumes you’ve work with CodeIgniter before and that you are looking for a search feature that you can add to your application. To add the search feature, we will get started with the Controller.

Controller

This is assuming you already loaded your libraries, helpers and database model. Lets add the Search function.

function search()
{
$data['query'] = $this->Books_model->get_search();
$this->load->view(‘books’, $data);
}

Model

In this database query, I am searching for any matches in any of the 4 fields: bookname, author, characters and synopsis. If there are matches, it will return the results.

function get_search() {
  $match = $this->input->post(‘search’);
  $this->db->like(‘bookname’,$match);
  $this->db->or_like(‘author’,$match);
  $this->db->or_like(‘characters’,$match);
  $this->db->or_like(‘synopsis’,$match);
  $query = $this->db->get(‘books’);
  return $query->result();
}

Views

Here’s the search form.

<?=form_open(‘books/search’);?>
<?php $search = array(‘name’=>’search’,'id’=>’search’,'value’=>,);?>
<?=form_input($search);?><input type=submit value=’Search’ /></p>
<?=form_close();?>

The result can be displayed using a HTML table.

<table>
<tr><th>ID</th><th>Book</th><th>Author</th><th>Published</th><th>Price</th></tr>
<?php foreach($query as $item):?>
<tr>
<td><?= $item->id ?></td>
<td><?= $item->bookname ?></td>
<td><?= $item->author ?></td>
<td><?= $item->datepublished ?></td>
<td><?= $item->price ?></td>
</tr>
<?php endforeach;?>
</table>

Let me know what you think.

ShiftEdit

ShiftEdit is an online IDE for developing PHP, Ruby, Python, Perl, Java, HTML, CSS and JavaScript through FTP, SFTP and Dropbox. I recently started using ShiftEdit after seeing it from the Chrome Web Store. I’m using it at the moment to manage several of my websites.

ShiftEdit allows you to create and edit PHP, Ruby, Java, HTML, CSS and JavaScript scripts. ShiftEdit has a built-in SFTP support to manage your websites. Just supply your FTP credentials within ShiftEdit to manage your sites. ShiftEdit also has syntax highlighing, block tabbing, undo/redo, line numbers, as well as jump to any line number.

If you’re looking to manage your website via the browser, without the need for a file editor or FTP client, you should look into ShiftEdit. All your work is done via the browser. No more downloading and uploading files. No more editing offline. Changes are immediate.

ShiftEdit keeps tracks of your file changes as well with Revisions History. You can highlight several files and look at file differences. You can also bookmark files for easy access later. There are more features. Visit ShiftEdit if you’re interested.

HTML5 Boilerplate

If you’re looking for a rock-solid HTML5 template, check out the HTML5 Boilerplate created by Paul Irish and Divya Manian. Here are more details from their site.

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.

Visit and download the HTML5 Boilerplate.

A Great HTML5 Resource

There are hundreds of HTML5 resources on the Internet. One of my favorite is Dive Into HTML5. If you want an excellent introduction to HTML5, this is a good place to start. It’s written by Mark Pilgrim where he dissects all facets of HTML5 into ten chapters.

He starts out with a brief history of HTML, followed by how to detect HTML5, the details of the head elements, the markup, canvas, video, geolocation, local storage, offline applications and forms. The website also includes an Appendix of HTML5 elements.

This is an excellent read for those wanting to jump in and learn HTML5 quickly. If you want a hard copy, I recommend two books. One book is by Mark Pilgrim’s called, “HTML5: Up and Running.” The other is a book by Bruce Lawson and Remy Sharp’s called, “Introducing HTML5.”

The Most Hideous Website Ever

You probably seen several ugly websites in your lifetime. But this one is the tops. Its clearly the most hideous website ever. The worst! If you can come up with something worse than this, let me know. When was this website exactly coded? Hmmm, based on web design forensics, it looks like these pages precede the pre-1994 era of the Internet age. Here’s some of its glorious features:

A guestbook! No one has been using a guestbook for years. Background music! At least, the honky tonk music will keep you entertained while surfing the site. The colors! No one has seen these color combinations in ages. You probably need a trip to the eye doctor after 5 minutes on this site.

Overlapping images! After all, you can’t fit them all in one page. It looks like these photos were taken when digital cameras had resolutions of 100×150 pixels. Of course, every site has to have Cessna planes and Harley motorcycle background images. How about a screenshot!

No amount of screenshot is going to do any justice to this masterpiece, until you see it for yourself. So, I present to you, the most hideous website ever. And don’t tell me I didn’t warn you.

Finally, an apology for the overuse of the exclamation point!!

Dynamic CSS Buttons

I was searching for buttons the other day that I could use for a project. I wanted something flexible, something that could easily be customized for any project. The buttons have to be dynamic and they need to be generated fairly quickly.

This means no buttons that contain text images, no buttons that contain color images. The text needs to be supplied from the source (HTML) as well as the background color from CSS.

This dynamic button needs to be generated on fly, with the flexibility to use it multiple times within a page or the whole website. This sounds like a tall order to me.

Enter a tutorial by Soh Tanaka, a web designer from Los Angeles that I found while searching online. He wrote “Liquid & Color Adjustable CSS Buttons.” The tutorial is actually quite good. He shares how a button can be quickly generated using the supplied anchor text and as well any CSS background color.

A couple of examples.

I love the buttons,  but I found a couple of issues. The buttons doesn’t really work as a Submit button. You’re going to have to use Javascript to send your form if you use this example. The other issues is you can’t really resize the button, since it’s constrained to single supplied image that’s generated for every button.

These buttons are definitely useful tools for creating sites, but it does have its limitations. One more thing, I want to try if this works with HTML4’s button tag as opposed to just using the input tag.

Password and Text Boxes Are Not Of Equal Length

Why is the password field smaller than the input field in Internet Explorer 8? It’s the same in previous versions of the browser? I was recently working on a project that required authentication. I styled the login page. Everything looked wonderful. Perfect as a matter of fact, until I opened IE8. Wicked ugly. My main gripe really is, why is the password field smaller than the input fields?

I did a quick search online and found a solution.

You can style the input field to a certain width, like in this example.

input { width:12em; }

I’m using em instead px, because it’s probably more accurate.

But, styling the input field, like the one above, will make changes to every input field on the site. So, the quick and dirty way to style a login page, is to use inline CSS. In this example, we will use two input fields of text and passwords with inline styling.

<form>
<input type=’text’ name=’username’ style=’width:12em’ />
<input type=’password’ name=’password’ style=’width:12em’ />
</form>

So, there you have it. A quick and dirty solution to the uneven password and text input fields in Internet Explorer 8. If you have any other solutions, please let me know. I’ll be happy to hear about it.

Switching Back To Yahoo Mail Classic

What’s wrong with Yahoo Mail? I’m talking about the New Yahoo Mail, that’s about two years old. Here’s the problem. Occasionally, when I try to open email, all I see is a blank page. I tried refreshing the page, closing the tabs, restarting the browser, but still the same results.

I thought it was just my computer, until I borrowed a friend’s laptop to check email. The same thing. Blank messages. It doesn’t happen all the time. Just a few messages here and there, but it’s enough to drive me nuts. So, I decided to switch back to Yahoo Mail Classic.

The Yahoo Mail Classic user interface instantly brought back memories. It works and that’s all I expect from an email service.

Add Google Maps To Your Posts

They say a picture is worth a thousand words. Adding a static map to your posts can make a world of difference. Your posts not only look good, but are informative and effective as well. Whether you are giving out directions or simply just showing off where in the world you were at one point, you can add great value and effectiveness to your posts. The good news is, adding Google Maps is not so difficult.

The Google Static Maps API

The Google Static Maps API lets you embed a Google Maps image on your webpage without requiring JavaScript or any dynamic page loading. The Google Static Map service creates your map based on URL parameters sent through a standard HTTP request and returns the map as an image you can display on your web page. I will breakdown the URL piece by piece and explain.

The URL

http://maps.google.com/maps/api/staticmap?<em>parameters</em>

Required Parameters: Center, zoom, size and sensor. Examples.

center=101+Market+Street+San+Francisco  (enter address or latitude, longitude)
zoom=14 (from levels 1 to 20)
size=480x300 (map size in pixels)
sensor=false (use default 'false' unless using GPS locator)

Optional Parameters

Maptype: Roadmap, Satellite, Terrain or Hybrid.
Marker: See below.
Paths: See below.

Putting It All Together

We can string it all together using ampersand (&).

This URL:

http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&amp;zoom=14&amp;zoom=14&amp;size=480x300&amp;maptype=roadmap&amp;sensor=false

Produces this:
San Francisco

Finally, to add an image to your post, just add an HTML img tag. Example:

<img src=”http://maps.google.com/maps/api/staticmap?center=101+Market+Street+San+Francisco&zoom=14&zoom=14&size=480×300&maptype=roadmap&sensor=false” 
alt=”San Francisco” />

There are other options that can be added such as Markers and Paths, but are a bit more involved. You can check out the rest from the Google Static API V2 Developer Guide.

Display Latest Twitter Status On Your Blog

Here’s a short little script that will display the latest Twitter status on your blog. I pulled the code from CSS-Tricks and modified it a bit. This little piece of code will pull-up the user’s latest Twitter status, time and source. You can also pull up the user’s name, screen name, location, url, followers, friends, favorites and more.

Here’s the snippet of code:

<?php
function getTwitterStatus($userid) {
  $url = “http://twitter.com/statuses/user_timeline/$userid.xml?count=1?;
  $xml = simplexml_load_file($url) or die(“could not connect”);
 
  foreach($xml->status as $status){
    echo $status->text;
    echo $status->created_at;
    echo $status->source;
    echo $status->user->name;
    echo date(“F j, Y, g:i a”,strtotime($status->user->created_at));
    echo $status->user->statuses_count;
    echo $status->user->followers_count;
    echo $status->user->friends_count;
    echo $status->user->favourites_count;
    echo $status->user->location;
    echo $status->user->time_zone;
    echo $status->user->url;
  }
}
?>

You can format the output anyway you want it. For readability purposes, I formatted the $status->user->created_at field with the date function. All the other variables are pretty much self-explanatory.

Add the function in ‘functions.php,’ then insert this code anywhere in your WordPress template.

getTwitterStatus("user");