My Ideas:

1. Recreate current tutorials into screencasts, especially the jQuery AJAX Posting since it seems to be generating the most traffic and attention.
2. Tutorials on setting up and using some of the CodeIgniter Libraries.
3. Long tutorial that will be a combination of my two tutorials submitted to the Nettuts contest. So one long tutorial on creating a jQuery Content Slider plugin from scratch, with explanations of what each part is and why we’re doing it.
4. Tutorial on using the HTML Table Class in CodeIgniter. This is kind of the same as #2, but I felt compelled to do this one first as somewhat of an addon to the tutorial Jeffrey Way just did on Pagination. He used the Pagination and HTML Table class, but used jQuery to do the row highlighting, which could have been easily done with the HTML Table class. So it would be a tutorial explaining some of that.

That’s all I’ve come up with so far. I need opinions and ideas of what you guys want. Something I may skip over because I think it’s easy may be something that someone else is having a problem with. So let me know what you want! Hopefully more focused in the areas of jQuery/HTML/CSS/PHP/CodeIgniter as those tend to be my favorites, and the ones that I’m the most familiar with.

Teamviewer

I recently started using TeamViewer to accomplish some of my remote administration tasks. I have been a loyal fan of LogMeIn for several years now. I love their service, but there is two features that I extremely liked about TeamViewer that are not offered as an option to LogMeIn Free subscribers. These two features are the desktop client and the QuickSupport application. The desktop application allows you to quickly open up a remote access window to your machines without having to visit TeamViewer’s site (similar to LogMeIn’s Network Console).  QuickSupport allows an outside user to quickly launch the application, without the need of an install, and provide you remote access by giving your their generated user id and password.

So what’s the problem? Well, if you’ve ever used TeamViewer, and try to do a little development on a local wamp/xampp server, then you will find that you can no longer access your local server because TeamViewer has taken over Port 80. Here’s how to fix it.

After talking with TeamViewer tech support, I received an email giving me instructions on how to disable TeamViewer from listening on Port 80.  Instructions are as follows:

1. Open port 5938 (TCP) on your firewall.
2. Change the following registry keys.

• [HKEY_LOCAL_MACHINE\SOFTWARE\
  TeamViewer\Version4]  Key  ’GatewayAllowed’ set to 0
• [HKEY_LOCAL_MACHINE\SOFTWARE\TeamViewer\Version4]  Key  ’ListenHttp’ set to 0

After you make these changes, you should no longer have TeamViewer listening in on port 80, killing  your local web server.

Hope this helps someone else.

jQuery Post

I’ve seen quite a few people come into the CodeIgniter forums asking how to use jQuery’s built in AJAX functionality to post to a CodeIgniter function. In this tutorial I will walk you through creating the form, writing the jQuery, posting to the function, and working with handling the result. It’s actually really easy.

In this example, I’ll create a small, basic form that will allow user’s to input their username and email address into the form and submit it via AJAX. The input will be validated using the CodeIgniter form validation library, and an appropriate response will be displayed to the user.

Let’s check it out.

Creating Your Form

If you’ve ever submitted a form to a CodeIgniter controller before this should be very straight forward. If you haven’t, it’s as simple as changing the value of the action property of the form to point to the controller and function of choice.

Username


Email Address

Here, we will be submitting our form to a controller named forms and a function named submit within that controller. Easy stuff. Let’s move on to the forms controller.

Setting Up Your Controller

We’re only going to be looking at the submit function in forms controller. There are no other functions used in this tutorial. In the submit function, we will load the form validation library, set the rules for our input, run the validation, and then display the response to the user.

There is one additional constant provided in this example that is not part of the default CodeIgniter installation. The constant I am referring to is the IS_AJAX constant. This constant is used to determine whether or not the request that was received was an AJAX request, or a standard HTTP request. I have been told that this constant can be found in the CodeIgniter forums, however, I found out about it in one of Weblee’s screencasts. Simply paste this into the bottom of the constants.php file found at CodeIgniter install > application > config folder.

// Define Ajax Request
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

Now let’s get on to that submit function.

    function submit() {
    	//load form validation
    	$this->load->library('form_validation');

    	//set form rules
    	$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[15]');
    	$this->form_validation->set_rules('email', 'Email', 'required|max_length[20]|min_length[6]|valid_email');

		//run form validation
    	$success = $this->form_validation->run();

		//set username variable
    	$username = $this->input->post('username');

		//if the validation was a success
		if ((IS_AJAX && $success) || (!IS_AJAX && $success)) { echo "Congradulations {$username}, your form was accepted!"; }

    	//if validation failed
    	else { echo strip_tags(validation_errors()); }
    }

You can see from the comments within the code what each portion does. When posting via AJAX, anything that is echoed, is returned back to the jQuery function. In a real world example, you would probably want to handle the result a little better by redirecting to another page if the request were not an AJAX request. The current code would only echo a response back to a blank page for a non AJAX request. If the validation fails, form validation error message is returned as HTML. Since we will be using that result in an alert dialog, I added the strip tags function to remove the paragraph tags from around the result. As mentioned, this would be handled differently in a production level app. For more information on the form validation process, check the CodeIgniter User Guide.

The jQuery

The jQuery code is also extremely short and to the point. This script will listen for the form submit event. When the event is triggered, the event object is passed in and uses the preventDefault function to stop the regular submission so that we can submit via AJAX instead. Next, it will use the built-in $.post function to submit the data to the specified location. The function accepts parameters of: url, data, callback, and request type. In this example, we were submitting the username and email fields and posting to /forms/submit. Here’s the code.

$(document).ready(function() {
 	$("form").submit(function(e) {
 		e.preventDefault();
		$.post("/forms/submit", { username: $("#username").val(), email: $("#email").val() }, function (data) {
			alert(data);
		});
 	});
 });

That’s it. I think we had a little less than 30 lines total even with all the extra spacing and such.

Check out the demo here.

Nettuts Contest

Nettuts has a PHP/Javascript competition going on right now for all you scripters. All you have to do to enter is create a new script (PHP or Javascript) and submit it to Themeforest. If your script is approved by the moderators, post a link to your script to the competition entry form. After that, you’re entered automatically.

Prizes

1st Place:

• iPhone 3GS
• 1 year subscription to Nettuts
• CSSEdit license ($42 value)

2nd Place:

• Western Digital 1TB External Drive
• 6 month Nettuts membership

3rd Place:

• CSSEdit License
• 6 month Nettus membership.

For more info, check here

Easy Tooltips

Over time, I’ve noticed a lot of scripts and plugins that are available to simply add tooltips to items on a page. Adding a plugin for something that simply is overkill. Adding a plugin for tooltips  typically requires that you include an additional script and an additional stylesheet (depending on which one you use). In this post, I ‘ll show you just how easy it is to create a clean, styled tooltip using jQuery.

Getting Started

I’m going to assume that you already have a web server set up and running and that you already have at least a basic knowledge of how of jQuery.  If you have even a little bit of jQuery knowledge, this should be extremely easy.

There are obviously multiple ways that this tooltip can be created and styled. I won’t go into extensive detail on it, I will just get you started and let you piece things together from there.

Step 1 – Include jQuery

This line will load jQuery from Google’s AJAX API’s. Loading jQuery from Google is considered good practice by many developers because it decreases latency, creates parallelism, and provides caching, meaning user’s may not have to download jQuery at all because it’s already cached on their machine from another site.

Here’s the code:

Step 2 – Pick Your Structure

This is where you determine how you want your tooltips to be organized. There are many, many ways of doing this. For this example, I chose to simply give a link tag a chosen class ‘tooltips’, and within the link tag, include a span object that is hidden.

Example:

Click here for a page
This is my hidden tooltip!

Looks simple enough, right?

Step 3 – Styling Your Popup

You can style your popup any way that you desire. I kept this example simple.

span {
	background:#c8c8c8;
	display:none;
	padding:10px;
	position:absolute;
	z-index:1000;
	-moz-border-radius:4px;
}

That’s it. The display, z-index and the position property are the most important. Setting display to none obvious hides the element until we need it. The position property being set to absolute will allow us to place the popup wherever we want to put it. The z-index property being set to a high value should ensure that the tooltip will stay on top of all other elements.

Step 4 – The jQuery script

We’re down to the last step, creating your jQuery script to display the popup. Once again, this is an extremely easy script.

$(document).ready(function() {
	$(".tooltips").hover(
		function() { $(this).contents("span:last-child").css({ display: "block" }); },
		function() { $(this).contents("span:last-child").css({ display: "none" }); }
	);
	$(".tooltips").mousemove(function(e) {
		var mousex = e.pageX + 10;
		var mousey = e.pageY + 5;
		$(this).contents("span:last-child").css({  top: mousey, left: mousex });
	});
});

Start off by setting a hover event listener to all items that have the tooltip class. The first function within hover handles actions when the mouse is placed over the item, the second function handles actions for when the mouse is removed from the item. Here, we will select the item using the $(this) selector, then find the last span that is a child element of the container. Now that we the span selected, set the display property to block to make it appear. Obviously you would do just the opposite when the mouse was removed.

As an extra touch, I also added the mousemove event to the tooltips items. This event listener will grab the eventObject (e), and determine the location of the mouse when the event occurred. Once the coordinates are retrieved, the position of the tooltip is updated so that the tooltip floats around in relation to the cursor position.

Done

There are multiple ways that these tooltips can be styled, nested, selected, etc. As I said, this is just a basic tooltip to get you started. Experiment with different tooltip positions, layouts, animations to find create the tooltip that best fills your needs.

Click here for working demo

Good luck

CodeIgniter From Scratch Day 2

Jeffrey Way has posted his second video screencast about the CodeIgniter framework on Nettuts today. In this second screencast JW covers the topic of Models. Jeffrey explains the purpose of using models, walks you through creating your first model and function, as well as using it to retrieve records that are stored in a database. JW also demonstrated how easy it is to generate SQL queries using the Active Record class provided with CodeIgniter.

Query Bindings

JW did a great job explaining the use of models to perform database interaction via CodeIgniter. I also learned about something new from this screencast. Granted this new tidbit of information wasn’t anything extremely fascinating or very useful to me, but still, it’s something new. This new thing was the creation query bindings. Query bindings are basically a way of creating prepared SQL statements and easily inserting user provided data into these statements. The user provided data is auto escaped before being used, therefore the posibility of SQL injection is eliminated for you.

Example:

$sql = "SELECT * FROM my_table WHERE id = ?"
$q = $this->db->query($sql, 3);

This code would execute the SQL command constructed within the $sql variable, and then substitute the value of the second parameter in the query function for the ‘?’. So in this example, the resultant SQL command that would be executed would be:

SELECT * FROM my_table WHERE id = 3;

This can also be used with multiple parameters simply by making the second parameter in the query function an array.

Looking forward to CodeIgniter from Scratch: Day 3. Keep up the good work JW.

If you missed day 1, go back and check it out here.

50 New CSS Techniques For Your Next Web Design

Found a great list of CSS tutorials and tricks on Smashing Magazine this morning. Everything from creating great layouts, stylesheet optimization, creating inline navigation menu’s, etc.

CSS is almost certainly one of the best developments in web design since the first graphical web browsers were adopted on a wide scale. Where tables created clunky, slow-loading pages, CSS created much more streamlined and usable web pages. Plus, CSS has allowed designers to achieve a number of different styles that used to only be possible with images.

One of the best parts of CSS is that it’s so simple once you know the basics. Where tables used to make incredibly complex and sometimes impossible-to-decipher code, CSS keeps things clean and simple. Add a few comments to keep everything organized and it becomes an absolute dream to work with.

Linking it up here

CodeIgniter

I’ve seen quite a few CodeIgniter tutorials and screencasts out there and none that I have seen seem to cover everything that I thought should be covered in an initial install. I decided I would finally try to put together one of my own to help some of the newer members get things going, as well as try to give a decent enough explanation to the MVC architecture so that you will understand what’s going on. So, enough talking, here we go.

Preparation

We will start off by getting you ready to start with CodeIgniter. For this instructional, I will explain things as if you are completely starting from scratch. This will include downloading and installing the CodeIgniter framework as well as installing a local web server.

If you already have a web server up and running, you can skip this part and move on to downloading and installing CodeIgniter.

Download and Install XAMPP

XAMPP Control Panel - Click Start

For this tutorial I will use the XAMPP to setup a local development environment. For those you who don’t know, XAMPP is an Apache based web server that comes pre-configured with installations of MySQL, PHP, and Perl. At the time of writing this post, the most current distribution of XAMPP is 1.7.1. XAMPP can be downloaded here. (Note: This tutorial will not work for the latest version of XAMPP. XAMPP 1.7.2 has been released and comes bundled with PHP 5.3 which has known issues with CodeIgniter 1.7.1.  I will get an updated tutorial on the differences and how to get things rolling with XAMPP 1.7.2 ASAP).

After you have downloaded XAMPP, run the executable to extract the files to your location of choice. I chose to extract to the root of the C: drive so that XAMPP will be located at C:\xampplite. Navigate to this directory and run the setup_xampp.bat file.

The next step will be starting up Apache and ensuring that everything is working up to this point. To do this, run xampp-control.exe. This is the XAMPP Control Panel. Here you will be able to start and stop all the needed services or access phpmyadmin. Go ahead and click on the Start button to the right of the Apache label. Now jump over to your browser of choice and enter http://localhost into the address bar and press enter.

You should now see the default XAMPP installation page. If you do then we are ready to move on to CodeIgniter.

Download CodeIgniter

Now it’s time to move on the CodeIgniter installation. At the time of writing this tutorial CodeIgniter is also in version 1.7.1. Check the CodeIgniter site to find the latest version.

CodeIgniter and MVC Background

MVC Data Flow

CodeIgniter is a powerful, lightweight PHP based framework that is based off of the MVC (Model – View – Controller) architecture. A lot of people have a hard time grasping MVC but it is really not that complicated. MVC is designed to separate you code from presentation, allowing you to create views that are very clean and minimal on PHP. Let’s talk about MVC a little more in depth for a second.

Models – Models are typically used to perform any database interaction. By using a model to do all data retrieval, you leave other layers like the controller for gathering/prepping all the data for display. Models are not restricted to only database interaction though. You can push any functionality that you wish out to a model.

Views – Views contain all presentation layer code (HTML, CSS, etc). View files should be something that you are comfortable with.

Controller – The controller is what ties everything together. When to go to a url hosted on a CodeIgniter site, the controller is in charge of gathering all data needed for the page and then passing that data to the view files for display in your browser.

On top of the MVC architecture, CodeIgniter also has a large selection of code libraries available at your disposal. These libraries provide simplified access to functions such as:

• Validating user form input
• Querying databases
• Managing user sessions
• Manipulating images
• and more… See CI User Guide for a complete list

CodeIgniter also has a long list of helpers available. Helpers provide a host of common functions to simply normal tasks such as opening forms, sending emails, and more. Once again, the complete list of helpers is available in the CodeIgniter User Guide.

Installing CodeIgniter. Finally!

Now that we’ve got you a little more familiar with what CodeIgniter is and how some of the pieces work together, its time to move on to the installation. CodeIgniter’s installation is extremely simple. Hopefully you already have CodeIgniter downloaded. If you do, navigate to the htdocs directory within your XAMPP installation directory, and remove all of the current files there. Next extract the CodeIgniter, and move all files in the inner CodeIgniter_1.7.1 subfolder into the htdocs folder and navigate back to http://localhost in your browser once again. At this point, you should now be greeted with the default CodeIgniter welcome page.

That’s all there is to it. You now have CodeIgniter up and running locally. I plan to continue these tutorials and will help you figure out where to go and what to do now that you have things running. We’ll cover creating your first controller, view, and issues with index.php.