Using Google Charts, the template shows off how this template could be used as a dashboard or even a front-end application.

Features (V1.0)

• Semantic, valid XHTML and CSS
• Well Commmented Code and detailed Help Documentation
• Based on 960 grid system - endless layout options
• Cross Browser Compatible
• Super Clean and Lightweight
• Superfish Navigation Menu (Mult Level)
• Modal Boxes (try clicking ‘Messages’ in the top righ corner)
• Date Picker
• Notification Boxes with smooth closing animatinon
• jQuery UI Integreation - Accordion, Tabs, Slide, Progress Bar
• Smart ‘Check All’ Checkboxes (try the checkbox on the table in the demo)
• WYSIWYG on any Textarea
• Login Page included

Please be sure to check out the demo and also the screenshots to see all the themes and a code sample.

NOTE: The theme uses Farm-Fresh Web Icons

Like this template? Why not check out some of my other templates here on Themeforest…

It’s now available for sale over at Themeforest at only $12 dollars for members, or $14 for non-members.

It’s ideal for content management systems, website backends or as a standalone skin for a web application.

It’s been tested in all major browsers, and comes with a well commented help file to help you hit the ground running.

The theme also comes with a Login Page as well as pages for typography, forms and demos of other features (try clicking the navigation items in the live preview)

• Semantic, valid XHTML and CSS
• 4 Themes (or make your own)
• Well commented code
• WYSIWYG Editor
• Sortable Tables
• Powered by jQuery & jQuery UI
• Accordion
• Tabs
• Sortable List
• Calendar Control
• Cross-browser compatible
• Closable Notifications with smooth animation
• Styled Forms, Headings and Tables
• Clean and Simple Design
• CUFON Font Replacement

Head over to Themeforest now for more items like this or to buy this admin template!

Silky Admin Template is a professional backend interface that you can use for all sorts of web applications, content management solutions or even a website of your own. It comes with a variety of colours and useful jQuery additions, not to mention having FLOT Chat included so you can start developing right away.

Here is a big screenshot of the theme, but please do check out the live preview and screenshots over at the items Themeforest page.

The theme is a clean and simple admin backend template, and I’ve sprinkled in a few jQuery powered options such as tabs, sortable tables and notification boxes - not to mention a modal dialog box (Facebox).

Check the theme out here: http://tinyurl.com/yfpevzs or scroll down and check the screenshots out!!!

Please feel free to leave some comments, it’s always appreciated.

CHECK OUT THE LIVE PREVIEW OF THIS THEME: - http://tinyurl.com/yfpevzs

Icons are available in 32*32px (some are 16*16px) & in transparent PNG format.

This set is awesome, plus if you are building a web application there is enough in there for you to use for most tasks. One of my pet-peeves with free icons is that there might not be that one icon you REALLY need - no issues with that here!

The set is very suitable to be used in web applications as it has all the vital icons like actions, arrows, documents, users & more

Link: http://www.woothemes.com/2009/09/woofunction/

It’s basically a jQuery driven login form, that slides down stylishly to allow for a login form and it even has a registration part to it!I don’t want to go into too  much detail because you go visit the site yourself

It’s ideal if you only have sections of your site that need registration, it wouldn’t be so good for sites that require login from the front page, but it is very stylish and I like that it’s out the way yet still is pretty easy to find.

The folks at web-kreation have all the downloads for you to play with it yourself, and they even do a little bit of step-by-step with the code behind it.

If like me you’ve been looking for something like this for a while, this could answer all yor headaches - check it out!

1. The Cheapest

If you have a really tight budget, going with the cheapest isn’t necessarily such a bad idea. You will only get an average looking website, and chances are if you ever want a redesign you’ll need a brand new site again rather than being able to tweak what is already there.

Not a good option if you want to be able to upload your own content, have online shops or rank well in the search engines.

Why are they cheap? This could be a number of factors from them being based abroad to them being in the mum and dads back bedroom - this really doesn’t make a difference but with these kinds of designers the quality of their work should really be checked out.

2. The Most Expensive

There’s nothing wrong with charging more than others in the field if you have a proven track record of delivering great websites.

Agencies will often have higher overheads, but they’ll deliver your site quicker.

Finally, the most expensive might be thinking about your website and business as having all bells and whistles when it comes to the latest technology. Pay for what you need not what they want to line their pockets with.

3. The Freelancer

I’m bound to be biased towards this type of designer being as I am one myself, but even so there are clients that just don’t gel with freelancers adn these are often he larger businesses who expect to treat them like employees - and it jus doesn’t work out for this very reason. Micro-management and design by committee is a guarantee that the website will fail.

Where the freelancer wins however is when they can give you, the client, a one-to-one relationship and make sure you are getting what you want. Often, they’ll only have 2-3 projects on at a time and the passion is usually evident in there work.

Recommended for all businesses that appreciate that they are hiring an expert in the field, not jus someone to rearrange some images on a page for them.

4. The Family Friend

There is nothing, I repeat NOTHING wrong with having a family member or family friend do your website for you - for all I know, they could be awesome!

By Family Friend, I mean the type of designer who oftentimes isn’t being paid and lets face it you get a sub-par site but you get it for a low-price

What Do You Need?

So with these in mind, you have to really ask yourself what you need?

Most websites fail to attract visitors because oftentimes there is not enough quality content for the site to work or the client expects the web designer to provide the content - this is like asking your bank manager to provide the money for the account he is handling for you, it’s a no brainer.

Content is King

You can Google this as much as you like as there will be hundreds of blog posts about how good quality content will bring visitors and it’s true. Take my website for example - I created this blog because as a freelancer, I didn’t have the content to showcase immediately so to showcase my expertise in the field I decided to write these posts. Simples.

Conclusion

The reality factor is this - you get what you pay for. If you skimp on your website, you’re effectively throwing the money down the drain since most people look online these days anyway.

Write content from day one. If you are planning on selling items, you’ll need descriptions for the products, you’ll need introduction text for the site, the about pages need to be written. Starting these as soon as your projects starts enables you to see it online and then make the changes you need before the site goes live - content really is king. Plus, it gives you a few months for Google to crawl your site and index before you officially go live.

Good designers aren’t cheap, but they really are worth their weight in gold - they’ll advice you of what they think you will benefit the most, but also be mindful of people who try to up sell you things you really don’t need.

Building a database driven auto suggestion box with PHP/MySql and jQuery. We’re going to check what a user has typed in, check against what is in our database and where there is a match, pass the results back in a suggestion list, all via an AJAX call in jQuery.

An Autocomplete widget using PHP and jQuery. We’re going to connect to check what a user has typed in, then go away and check from our database whether there is a match and then pass it back into a suggestion list, all via an AJAX call from jQuery.

Overview

• Program: PHP/MySql & jQuery
• Difficulty:Beginner/Intermediate
• Estimated Completion Time: 25-30 mins

The Aim

The aim of this tutorial is to create an input box which users can search our products database. If you’ve followed any of my other tutorials you’ll know I use bands as an example.

What we want to do is when the user types a letter, it triggers some jQuery which will use an AJAX call to our php page which simply searches the database for a match using a wildcard. In SQL, the percentage(%) sign is the wildcard so if we wanted to search for a band then typing “Michael” would bring up all the matching artists that start with Michael - so you might get Michael Jackson, Michael Jordan, Michael Moore. You get the idea.

When the search is complete, each matched record is put into it’s own list items and presented to the user. The user can click any of the results and it will automatically fill our input box with the records text.

Here is a graphical diagram of what we are going to be building:

Step 1 - Layout

Now you have seen what we are going to build, create a new file called “index.htm’” and if you haven’t already, fill it out with all your usual HTML markup (doc types, head, body etc).

Okay so first of all we need to link to our “scripts.js” file and also the jQuery file. You can use a local version of jQuery if you want, I generally use the one hosted by Google.

We also need to include our “styles.css” file. You can copy the below into your HEAD section of the page.

You’ll need to create a styles.css file and put in a css folder.

<script type="text/javascript" src="js//jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link href="css/styles.css" rel="style sheet" type="text/css" />

Now that we have dealt with the links to our external files, we can concentrate on setting up our container divs.

We’re going to use a container div to float everything to the center of the page. Within our container div we then need a form and an input box - this is where the user will enter their search string.

We then put in our suggestion div, but we are careful to set it’s display property to “none”. This means that it will not be shown on the page to begin with. We’ll be using jQuery to set its visibility later. I’ll put the code below, but effectively all we are doing is having a container for the search results, then another div to hold all our list items. I’ve added a little up-arrow in between for aesthetics but it’s not really essential.

The full code for our “index.html” file looks like this:

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Autosuggest with jQuery and PHP</title>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/scripts.js"></script>
 <link href="css/styles.css" rel="style sheet" type="text/css" />
 </head>
 <body><!-- Container to hold our Suggestion Box-->
 <div id="container">
 <form>
 <div>
 <h3>Band Name</h3>
 <input type="text" size="30" value="" id="inputString"
onkeyup="lookup(this.value);" onblur="fill();" />
 </div>
 <!-- hide our suggestion box to begin with-->
 <div class="suggestionsBox" id="suggestions" style="display: none;">
 <img src="upArrow.png" style="position: relative; top: -18px; left: 30px;" alt="upArrow" />
 <div class="suggestionList" id="autoSuggestionsList"></div>
 </div>
 </form>
 </div></body>
 </html>

So that’s our “index.html” file sorted - easy right? It’s important to note the name our our input box - “inputString” as we’re about to use jQuery to latch onto this and then pass it to our php file.

Step 2 - The jQuery

The jQuery is really the middle-man of the process, it’s going to handle all the front-end stuff e.g. what the user see’s.

Lets have a look at what we want the jQuery to do:

• Check for an inputted string and hide the suggestion box if < 0
• If not blank, make an AJAX call t our “string_search.php” file and pass it a variable containing the string.
• If the search is successful, return the data and show our suggestion box.

Okay so that’s not so hard right? Lets get started.

Check for input string - we’re going to use inputString.length == 0 and if true, we’ll hide our “#suggestionbox”. The beauty of jQuery is it uses similar syntax to css!

If there is a string (e.g. the user has typed something) then we’ll use the $.post AJAX call to pass the string the user entered to our “search_string.php” file. Since this I function, we can use a call back when the database search is complete that will make our suggestion box visible, and then append the results into it.

Finally, when the user clicks an item we’re going to fill our input box with that value. To do this, we’re going to use the onClick event in our search_string.php file that will call this function. This is how jQuery knows when to trigger the code.

All this code is below, along with comments to talk you through it.

function lookup(inputString) {
 if(inputString.length == 0) {
 // Hide the suggestion box.
 	$('#suggestions').hide();
 } else {
 // post data to our php processing page and if there is a return greater than zero
 // show the suggestions box
 $.post("string_search.php", {mysearchString: ""+inputString+""}, function(data){
	 if(data.length >0) {
	 	$('#suggestions').show();
 		$('#autoSuggestionsList').html(data);
 }
 });
 }
 } //end

 // if user clicks a suggestion, fill the text box.
 function fill(thisValue) {
 $('#inputString').val(thisValue);
 	setTimeout("$('#suggestions').hide();", 200);
 }

As you can see, jQuery is our link between our front end (what the user sees) and our back end (the php file that will search the database and return the files).

Step 2 - CSS Styling

I’m going to just dump the full CSS that I used below and you can modify as you see fit. There are some points to remember though:

• suggestionsBox is the box that your list items will end up in
• suggestsions li is the list items themselves
• suggestions li:hover is the styling applied on hover

That’s it, aside from making sure the input is the same width as our suggestions box, and I’ve made its position absolute to ensure it doesn’t push any content underneath down the page - this is optional depending on your needs.

So here is the final CSS:

body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #000;
 background-color: #eeeeee;
 }h3 {
 padding: 0px;
 font-size: 23px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 5px;
 margin-left: 0px;
 color: #000000;
 }#container {
 width: 250px;
 margin-right: auto;
 margin-left: auto;
 margin-top: 25px;
 margin-bottom: 0px;
 padding: 20px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 }
 /*  Styling for Suggestion Box Container  */
 .suggestionsBox {
 position: absolute;
 width: 240px;
 background-color: #212427;
 border: 2px solid #000;
 color: #fff;
 padding: 5px;
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 0px;
 margin-left: 0px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 }#inputString {
 width: 240px;
 padding: 5px;
 font-size: 18px;}
 .suggestionList {
 margin: 0px;
 padding: 0px;
 }
 /*  Individual Search Results  */
 .suggestionList li {
 margin: 0px 0px 3px 0px;
 padding: 7px;
 cursor: pointer;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 list-style-type: none;
 }/*  Hover effect  */
 .suggestionList li:hover {
 background-color: #009900;
 font-weight: bold;
 }

So now we have our index.html file which has our input box, we have the css file to style the box and the returned suggestiions, we have our jQuery file listening for user keystrokes and we have our php file - string_search.php which handles the database connections and searching.

To give you a bit of a visual of the process, here is a very basic diagram of what is happening here:

Step 3 - The PHP Magic

Okay so we now have our front end page - index.html, our jQuery file - scripts.js and now we need to write the php that will connect to our database, search for any records containing the input string and then echo out a list item for each result.

Create a file called “string_search.php” and we’ll be using this for this part of the tutorial.

Before we do anything, we need to connect to database. We could use a separate file for this, and it’d be good practice to do so however for sake of simplicity I’ll include it in the same file.

// since this is a one page tutorial
// we're not separating out the database connection
$db_host 		= 'localhost';
$db_user 		= 'root';
$db_password 	= '';
$db_name 		= 'products';

$db = new mysqli($db_host , $db_user ,$db_password, $db_name);

Now we are connected, we need to:

• Assign the “mysearchString” passed from jQuery to a variable.
• Use this variable in our SQL statement - we can use the percent symbol as or wildcard.
• Loop through the results and put each one into it’s own list item.

That’s basically it, there’s nothing really complicated in this approach although I am sure many of you will have much more robust methods of achieving the same results.

Lets first check to see what what the user entered, and then put this into a variable:

// Check the user has typed something in our input box.
 if(isset($_POST['mysearchString'])) {
 $mysearchString = $db->real_escape_string($_POST['mysearchString']);

So now we’ve stored the search string to a variable, we need to run a query on our database:

$query = $db->query("SELECT product_title
 FROM products
 WHERE product_title
 LIKE '$mysearchString%'
 LIMIT 10"); // limits our results list to 10.

This query is only pulling the product_title from our products table - in a real world situation you’d obviously change these to be your own field and table names, and you’d most likely use some form of protection against sql injection. For the sake of keeping things simple, I’m going to leave this as it is.

Finally, we need to take each record returned from the query and echo it out into a list item that will be in our suggestionbox. We also need to attach an onClick event to the list items, which will trigger our jQuery for filling in the input box with our result.

if($query) {

 // so while there are results from the query
 // we loop through the results and fill out our list items

 while ($result = $query ->fetch_object()) {

 // create a list item, but also listen for the user clicking
 // the result so we can fill the text box.
 echo '<li onClick="fill(\''.$result->product_title.'\');">'.$result->product_title.'</li>';
 }
 } else {
 echo 'ERROR: There was a problem with the query.';
 }

And that’s it! The final string_search.php file is below which you might want to copy and paste as a whole as I’ve been selective in the code snippets I’ve shown you.

<?php

 // since this is a one page tutorial
 // we're not separating out the database connection$db_host 		= 'localhost';
 $db_user 		= 'root';
 $db_password 	= '';
 $db_name 		= 'sampledb';

 $db = new mysqli($db_host , $db_user ,$db_password, $db_name);if(!$db) {
 // If there is an error, show this message.
 echo 'There was a problem connecting to the database';
 } else {
 // Check the user has typed something in our input box.
 if(isset($_POST['mysearchString'])) {
 $mysearchString = $db->real_escape_string($_POST['mysearchString']);

 // Is the string length greater than 0?

 if(strlen($mysearchString) >0) {

 // Now we have the string the user entered, we want to
 // be able to use this to search in our database
 // so we use the percentage as the wildcard and use a variable
 // in the query.

 $query = $db->query("SELECT product_title
 FROM products
 WHERE product_title
 LIKE '$mysearchString%'
 LIMIT 10"); // limits our results list to 10.

 if($query) {

 // so while there are results from the query
 // we loop through the results and fill out our list items

 while ($result = $query ->fetch_object()) {

 // create a list item, but also listen for the user clicking
 // the result so we can fill the text box.
 echo '<li onClick="fill(\''.$result->product_title.'\');">'.$result->product_title.'</li>';
 }
 } else {
 echo 'ERROR: There was a problem with the query.';
 }
 } else {
 // Dont do anything.
 }
 } else {
 echo 'Access denied.';
 }
 }
 ?>

Summary

We now have a working autocomplete input box that uses a database for it’s suggestions. It’s probably not a great idea to use it on a large scale database since we are doing lots of db calls every time a user enters a letter but for small to medium size sites, or maybe a web application then it’s idea.

It’s important to note that features like this are enhancements to a website but shouldn’t be relied upon, for if JavaScript is switched off none of this would show up to the user.

It always amazes me how little coding we had to do to achieve this, and that’s mainly down to AJAX and how simple jQuery makes it for us. It wasn’t so long ago that we had to rely on separate search and results pages.

I hope you’ve enjoyed this tutorial, feel free to leave some comments as I’m sure alot of you will have your own improvements to make.

If you are looking for more great PHP and other code snippets,  highly recommend Code Canyon which has 1000’s of scripts available and best of all they’ll likely have a script for almost anything you want - calenders, newsletters, help systems - you name it they have it!

[DOWNLOAD SOURCE FILES HERE]

I’ll be honest, I’ve not had much forms to create and even my own contact form utilises Wufoo because they just make my life hasslefree, and plus they can deal with spam and all that fun very easily.

But what if you have a better use for forms other than contact forms? What if you are collecting a tonne of information from a customer? Well  recently had this problem and I finally snapped with trying to re-sized the table, having it go over my floated elements and generally causing me headache after headache so I decided to sit down properly and work it out.

I don’t claim to take the credit for inventing this, as it’s probably (as I found) one of the most used parts of CSS that people use every single day but it amazed me how I could have gone this long and not known, so posted it up here will hopefully stop anyone else from doing what I did and leaving it so long to do anything about it.

So here was the solution:

Name


Address


City



label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}

label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;

As you can see all this really does is change the elements to be block level elements - not rocket science right? So you can feel my elation at finally solving this, and as easy it might sound, it caused me so many headaches in the past that it was a nice feeling to finally tame the beast down to what really is just a few lines of CSS.

Job done!

I wrote a tutorial for Themeforeset.net on the subject of using jQuery and PHP to draw products from a database and rotate them on our webpage, in a widget box of sorts.

The article mainly covered:

• Connecting to a MySQL database
• Extracting and displaying the products in a widgetbox
• The CSS behind the design
• The jQuery used to accomplish the rotation effect

You can read the article over at the Themeforest blog and I would really appreciate our comments!