It’s now available for sale over at Themeforest at only $10 dollars for members, or $12 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

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

Calluna Regular

Medio

Jura

Fontin

Sling

Lido STF

Salernomi

Novello Pro

Steinem

TeX Gyre Schola

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!

a. Silky Admin

Silky Admin is a professional admin backend. It’s a super clean and lightweight interface that comes with various jQuery functions to make your life easier – try the demo!

The theme is FLOT Chart ready and has 7 different skins! (or create your own!)

The theme also comes with a Login Page, plus here are the main features:

• 7 Themes (or make your own)
• Semantic, valid XHTML and CSS
• Well commented code
• WYSIWYG Editor
• Sortable Tables
• Powered by jQuery
• Cross-browser compatible
• Modal window
• Closable Notifications with smooth animation
• Styled Forms, Headings and Tables
• Clean and Simple Design

b. Super Simple Admin Theme

Super Simple Admin Theme is what it says on the tin – it’s a simple and clean backend admin interface and comes with various jQuery functions to enchance the experience – try the demo! The theme comes with extensive help and 8 Themes (or why not create your own – the help file tells you how!).

There are two pages to this theme – a login page and the main demo page.

• 8 Themes (or make your own)
• Semantic, valid XHTML and CSS
• Well commented code
• Liquid layout – content resizes to the user’s window
• Powered by jQuery
• Cross-browser compatible
• Modal window
• Closable Notifications with smooth animation
• Styled Forms, Headings and Tables
• Clean and Simple Design

1. Admintasia-Powerful backend admin user interface

Making use of a darker background, this template really draws the user into the page and what is important about this type of template - it’s getting things done.

2. AdminNano

Colourful and making good use of confirmation-like boxes, it shows the potential buyer how easily it is to incorporate into a sites back end or CMS system. I particularly liked the login bar on the top right hand corner - it’s touches like that which make it easier for a designer to make a decision to buy.

3. Deep Admin

This template has a nice accordion effect side menu which allows it to fit more into a smaller space, very important if your website backend has alot of functionality. The graphing visuals are helpful but shouldn’t be misleading for this isn’t part of the template it’s purely to show what could be done.

4. Executivo - Admin Skin

This template clearly separates the sidebar from the main content, and looks more like a desktop application which I actually like. It shows that in actual fact the sidebar, not the content is perhaps more important in these admin templates.

5. Just Admin Theme - Simple Admin Panel Solution

The visuals are great, not my cup of tea but I can imagine clients will love it - they’re like familiar icons they see every day in their other applications. Again this template makes use of the confirmation boxes, though this one also has a login page that comes with the template thus eliminating another design question.

6. Quik v1 Admin Skin

Simplicity is key in this design, and I like it that way. It’s giving you the bare bones such as the layout and typography CSS to get you on your way.

7. Clean Website Administration Template

The colour schemes on hand here make this template really good value if you do a lot of client back-end works, because you can easily pick a colour they prefer or corporate colours - or even go in and do your own as it looks quite easy to modify. This template makes good use of the space it has, and they all so far seem to have similar navigation though this one to me looks much more natural.

8. LiteAdmin - Web Application Skin

A template with a more polished feel to it, showing off a sidebar and how it could be used. It does make use of confirmation boxes, but only in two colours - I guess you could always add your own. Typography is taken care of and demos of different headings make it easier to see how it could fit into your own projects.

Don’t get me wrong, I’m sure if I knew those languages properly and spent hours training in it, I might have a different opinion but considering I knew very little programming before starting PHP here are five reasons so far that I love it.

1)    It Makes Sense

This is a big issue for me, I can read someone else’s code and understand roughly what they are trying to do, it seems more logical than ASP which seemed to me more bloated for the simple tasks like connecting to a database which leads me nicely to…

2)    MySQL Integration

I’m not getting into the argument of which is better or why, but trust me in that having spent years using MS Access for my databases, I found it quite an easy transition plus with PHP it makes it so easy to connect to the databases, security is dealt with and in general I just found it so much smoother and straight forward which is what it should be.

Also another thing I loved about it is that I didn’t need to have some sort of driver path or connections file that I never really understood – PHP lets me do this literally in a few steps by just telling it what the database is called, what table you want and then the username and password to log in.

After that, queries are pretty straightforward to master for most tasks. SQL is not that hard for 90% of things you want to do with the database.

3)    jQuery Works Nicely

The ability to slip between HTML and PHP made me appreciate the power of jQuery because now I can call PHP pages, get a post back and update my pages – basically make AJAX calls and it generally just works without too much effort on my part.

I know jQuery would work with ASP but to be honest, I haven’t a clue how to call an ASP file, do something then post back. I’m sure it’s a lot easier with ASP.net but hey – it would have to be seriously easier for me to take this one off the list.

4)    It’s Free

That’s right – it’s absoloutly free! It’s open source which means it’s open for everyone to develop their own stuff on it from frameworks to save you time to fully fledged free versions of favourite applications.

Everyone loves free right?

5)    Error Handling

Obviously you still get errors in development, but it’s generally a lot more user friendly that asp – which in my experience gave me a really vague error code, told me the line but didn’t tell me what I was looking for.

PHP tells me what it expected, what line and what it could be. I can then go to that line, look at the type of error its throwing out – like if it expected  a number, if it’s missing a quote or something. I’ll do anything for an easy life.

Conclusion

Okay so this post is pretty small and I’m sure there will be some of you who are reading thinking “I prefer ASP.net” and that’s totally fine too – I’m only sharing my experiences to date, and so far it’s winning by a long shot. I did try learning ASP.net before anyone asls, but I got so bogged down with procedures, sub procedures and it generally didn’t make my life very fun lol.

Fingers crossed the next post won’t be “5 Things I Hate About PHP”.

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.

[DOWNLOAD SOURCE FILES HERE]