The Tutorial Blog » Text Tutorials

Creating a basic iPad application

Wez Pyke — Tue, 08 Nov 2011 18:47:44 +0000

Because of the recent announcement of the iPad 2 more people are going to want to learn how to develop for the iPhone OS. I recently purchased an iPad 2 3G with o2, so far the broadband has been flawless.

This tutorial will be a basic walk-through for beginners who want to start developing.

The application that we will be creating will consist of two button and one label.

Create a new project

First of all open Xcode and click "Create a new Xcode project". Select View-based Application and then iPad as the product.

Save the project as Tutorial.

Outlets and Actions

For things such as labels and textfields we use IBOutlets and for buttons we use IBActions. IB stands for Interface Builder and is what we will use to create our interface and link the connections.

To add our outlets and actions open up TutorialViewController.h.

Under @interface TutorialViewController : UIViewController { add:

IBOutlet UILabel *currentNumber;

Then before @end add:

-(IBAction)incrementNumber:(id)sender;
-(IBAction)decrementNumber:(id)sender;

Save TutorialViewController.h.

Create the interface and make connections

Open up TutorialViewController.xib. From the library drag one labels and two buttons.

Control + click the File's Owner object and drag it to the label then select currentNumber; now go from the minus and plus button to the File's Owner object and select decrementNumber for the minus button and incrementNumber for the plus button.

Save TutorialViewController.xib and close Interface Builder.

The Code

Open TutorialViewController.m. Below the implementation we need to create an integer called number and set the value to 0.

int number = 0;

We now need to create methods for when the increment and decrement buttons are pressed.
When the increment button is pressed we will increment the number integer by 1 then set the value of currentNumber to number by using a formatted string.

-(IBAction)incrementNumber:(id)sender {
	number++;
	[currentNumber setText:[NSString stringWithFormat:@"%d", number]];
}

and for decrement its the same but we decrement the number integer by 1.

-(IBAction)decrementNumber:(id)sender {
	number-;
	[currentNumber setText:[NSString stringWithFormat:@"%d", number]];
}

Build and Run

Press the Build and Run button (command + return) and your app will compile then open.

Download

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Build a Twitter-like site with CodeIgniter and jQuery Part 2

Wez Pyke — Sun, 14 Feb 2010 19:58:15 +0000

Don't forget to check out part 1 if you have no read it.

In the second part of this 5 part tutorial series on how to build a Twitter-like website, we will be creating a signup form so that users can register to our website.

We will be adding records to the database that we created in part 1 and creating validation rules to make sure that the user didn't put any invalid data into the form.

Change the base url

Navigate to ci_twitter->system->applications->config->config.php.
Change:

$config['base_url'] = "http://example.com/";

To the path to where CodeIgniter is. On my machine it would be:

$config['base_url'] = "http://tutorials:8888/ci_twitter/";

Create the controller

We need to create a main controller for things such as the home page, sign up page, login page, etc. Go to ci_twitter->system->application->controllers then in the controllers folder create a file called main.php.

Inside our main controller we now need to define the class and the functions inside it.


class main extends Controller {
 
	function index()
	{
		$this->load->view('main/index');
	}
 
	function signup()
	{
		$this->load->library('form_validation');
		$this->load->helper(array('form', 'url'));
		$this->load->view('main/signup');
	}
 
	function signin()
	{
		$this->load->library('form_validation');
		$this->load->helper('form');
		$this->load->view('main/signin');
	}
 
}
 
?>

If we were to go to http://localhost/ci_twitter/index.php/main/ then we will see a blank page.

Create the views

Before we can see anything we need to create a folder for the functions in our main controller. Go to ci_twitter->system->application->views. Inside the views folder create another folder called main. In the main folder we will create files for each function that we have in the main controller.

Create these files in the main folder we created:

index.php
signup.php
signup_success.php
signin.php

Go to index.php and enter Hello World. Now if you go to http://localhost/ci_twitter/index.php/main/ you will see Hello World.

The next thing to do is to add a form and text fields so that people can input data. For the sign up page the html is done in the signup.php view file. The validation and processing is done in the main controller inside the signup function.

Add the following code to the signup.php view:

Sign up

echo validation_errors();
echo form_open('main/signup');
?>
 
Full name:  

Username:  

Password:  

Email:

Then add this inside signup_success.php:

Your account was created,  echo anchor('main/signin', 'login here'); ?>

This is all that we need to do for the sign up view for now. Validation rules is what we will do next in the main controller for sign up.

Validation

When doing form validation all of the validation takes place inside of the controller. For now we will set basic validation rules for each field within the form.

In the main controller replace the code for the signup function with:

	function signup()
	{
		$this->load->library('form_validation');
		$this->load->helper(array('form', 'url'));
 
		$this->form_validation->set_rules('name', 'Name', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('username', 'Username', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('password', 'Password', 'required|min_length[5]|max_length[50]|trim|xss_clean');
		$this->form_validation->set_rules('email', 'Email', 'required|min_length[5]|max_length[50]|valid_email');
 
		if($this->form_validation->run() == FALSE)
		{
			$this->load->view('main/signup');
		} else {
			$this->load->view('main/signup_success');
		}
 
	}

If you go to the sign up page now you should see that all the validation code works like it should. Now we will add a model so that we can add the user to the users table.

Create user model

Go to the model folder and create a file called User_model.php.

Insert this code into the model:


class User_model extends Model {
 
	function user_exists($username)
	{
		$this->db->select('username');
		$this->db->from('users');
		$this->db->where('user_username', $username);
		$result = $this->db->count_all_results();
		return $result;
	}
 
	function create_user($fullname, $username, $email, $password)
	{
		$data = array('user_fullname' => $fullname, 'user_username' => $username, 'user_email' => $email, 'user_password' => $password);
		$this->db->insert('users', $data);
	}
}
?>

Now we need to load the User_model in the controller.
Insert this code in the signup function:

$this->load->model('User_model');

We also need to add the user if the validation rules are passed:

$this->User_model->create_user($this->input->post('name'), $this->input->post('username'), $this->input->post('email'), $this->input->post('password'));
$this->load->view('main/signup_success');

Part 3

In part 3 we will be creating a login page and functionality so that people can post messages.

Download

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Build a Twitter-like site with CodeIgniter and jQuery

Wez Pyke — Fri, 12 Feb 2010 15:39:07 +0000

This tutorial will be the first of a five part series where we will built a social network site similar to Twitter from scratch. We will be using the CodeIgniter framework for the core of the website and jQuery for the effects. In this first part we will be configuring CodeIgniter to display everything correctly and we will also set up a database and connect to it.

Download and configure

Download the CodeIgniter framework from their website. We don't need to download anything for jQuery because we will be loading it directly from Google as it's quicker to load.

Once you have downloaded the latest version of CodeIgniter from their website, unzip it and copy the files to your public_html folder or equivalent. Rename the CodeIgniter folder to ci_twitter.

Now if you go to http://localhost/ci_twitter you should see something similar to the image below.

Database

We now need configure a database to connect to CodeIgniter so that we can use it to insert and retrieve information. Go to phpMyAdmin or whatever you use for MySQL databases. Create a database called ci_twitter.

CREATE DATABASE `ci_twitter` ;

For now we are only going to create a table for the users, in another part we will create other tables when we need them.

users table:

 CREATE TABLE `ci_twitter`.`users` (
`user_id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user_fullname` VARCHAR( 50 ) NOT NULL ,
`user_username` VARCHAR( 50 ) NOT NULL ,
`user_email` VARCHAR( 50 ) NOT NULL ,
`user_password` VARCHAR( 50 ) NOT NULL ,
`user_protected_updates` TINYINT NOT NULL DEFAULT '0',
`user_location` VARCHAR( 50 ) NOT NULL ,
`user_web` VARCHAR( 50 ) NOT NULL ,
`user_bio` VARCHAR( 160 ) NOT NULL
) ENGINE = MYISAM

Configure CodeIgniter

Now that we have set up our database and have inserted a table we will configure CodeIgniter to connect to it.

Navigate to database.php by going to ci_twitter -> system -> application -> config -> database.php. From here enter the correct information for your database so that it connects.

We need to auto load the database library because we will be using it a lot.

Go to autoload.php in the same folder as database.php.

Change:

$autoload['libraries'] = array();

To:

$autoload['libraries'] = array('database');

The database library will now load every time without us having to put $this->load->library('database'); in every controller.

End of Part 1

This is the end of the first part of approximately five parts.

Part 2

Part 2 will be following tomorrow. In part 2 we will be creating a sign up so that we can add users to the database.

Download

You can download part one from here

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Twitter-like pagination using CakePHP and jQuery

Wez Pyke — Tue, 12 Jan 2010 00:26:26 +0000

I have already done this tutorial with CodeIgniter and jQuery it can be found here. I thought I would do this tutorial again but rewrite it for CakePHP because it is a popular PHP framework.

Before we start doing any PHP code make sure to copy in the code below into your MySQL database.

CREATE TABLE  `tutorials`.`twitter_messages` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 30 ) NOT NULL ,
`message` VARCHAR( 140 ) NOT NULL
) ENGINE = INNODB

Create the controller

Under the folder named controller create a file and call it twitter_controller.php.

We create a class inside it called TwitterController and it will extend AppController. We then set the name of the controller to twitter and tell CakePHP which table we are using in our database.


class TwitterController extends AppController {
	var $name = 'twitter';
	var $uses = 'twitter_messages';
 
}
<pre>
 
In this controller we will have two methods index and get_messages. Our index method will have no parameters and get_messages will have one parameter so that we know what the offset of the current number of messages loaded.
 
Inside our index method we will retrieve the number of messages in the table and also the first 10 records.
 
<pre lang="php">
function index()
{
	$this->set('num_messages', $this->twitter_messages->num_messages());
	$this->set('messages', $this->twitter_messages->get_messages());
}

In our second method called get_messages we grab the 10 latest messages for when it is called via jQuery.

function get_messages($offset)
{
	$this->set('latest_messages', $this->twitter_messages->get_messages($offset));
}

Model

Under the models folder create a file and name it twitter_messages.php.


class Twitter_messages extends AppModel {
 
	var $name = 'twitter_messages';
 
 
	function get_messages($offset=0)
	{
		$messages = $this->find('all', array('offset'=>$offset, 'limit'=>10));
		return $messages;
	}
 
	function num_messages()
	{
		return $this->find('count');
	}
 
}
?>

These two methods in the model are called from the controller.

View

Create a folder called twitter inside the views folder. Then create a file called index.ctp and get_messages.ctp.

index.ctp

Inside the index file copy this css and jQuery code.

Below this copy in the following code:



foreach($messages as $message)
{
	echo $message['twitter_messages']['username'] . ' - ' . $message['twitter_messages']['message'] . '
';
}
 
?>

 

	more

Here we are displaying the first 10 records in the database then when the more button is clicked an ajax request will retrieve 10 more.

get_messages.ctp

This file is the file that is called upon the ajax request. This will display the 10 latest retrieve records.


foreach($latest_messages as $message)
{
	echo $message['twitter_messages']['username'] . ' - ' . $message['twitter_messages']['message'] . '
';
}
 
?>

Final words

I hope this tutorial has been useful to you, please Retweet it if it was useful for you. You can also follow me @wezpyke

Download

Download the resources for this tutorial

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

PHP gallery with no page reloads using jQuery

Wez Pyke — Wed, 23 Dec 2009 18:02:09 +0000

For this tutorial we will be using the ImgBrowz0r class for the backend of the gallery, we will then write a jQuery script so that we can browse through the gallery created by ImgBrowz0r without no page reloads and a nice effect between page requests so the user knows the page has changed. We will also be using the prettyPhoto plugin for jQuery to open up the actual images.

Getting ImgBrowz0r and prettyPhoto to work

The first thing I done was create a folder called jquery_gallery inside here is where all the files and folders are gonna be stored. I then created 4 folders inside jquery_gallery, the folders are called css, images, inc and js.

When you have downloaded the ImgBrowz0r class, copy the file into the inc folder.

Now inside the images folder create 2 folders cache and gallery. After you have unzipped prettyPhoto goto the images folder and inside the images folder copy the folder named prettyPhoto to our image folder. There should now be 3 folders inside our images folder cache, gallery and prettyPhoto.

Inside our css folder that we have created we will copy the css file from the prettyPhoto css folder named prettyPhoto.css.

The last thing to do for prettyPhoto is to copy the javascript file from the prettyPhoto js folder to our js folder.

So now we should have a file structure like so:
|css
|--prettyPhoto.css

|images
|--cache
|--gallery
|--prettyPhoto

|inc
|--imgbrowz0r.php

|js
|--jquery.prettyPhoto.js

We need to also create a css file for our imgBrowz0r class, create a css file inside our css folder and name it gallery.css. Copy the code into this file that is below:

strong { font-weight: bold }
 
	/* This is some example CSS. You can change this to your own liking. */
	.img-description, .imgbrowz0r-navigation, #imgbrowz0r { margin: 0 auto;width: 970px;text-align: left }
	.imgbrowz0r-navigation { padding: 1.5em 0 0.5em }
	.imgbrowz0r-navigation .img-statistics { margin-top: 1.5em }
 
	.img-description { margin: 1.5em auto 0 }
 
	#imgbrowz0r .img-row { padding: 0 1em }
	#imgbrowz0r .img-directory a:link,
	#imgbrowz0r .img-directory a:visited { font-family: Georgia, "Times New Roman", Times, serif;text-decoration: none }
 
	#imgbrowz0r .img-thumbnail a:link img,
	#imgbrowz0r .img-thumbnail a:visited img { border: 1px solid #000 }
	#imgbrowz0r .img-thumbnail a:hover img,
	#imgbrowz0r .img-thumbnail a:active img { border-color: #fff }
 
	#imgbrowz0r .img-directory a:link,
	#imgbrowz0r .img-directory a:visited { background-color: #000;border: 1px solid #000;font-size: 1.5em;color: #ccc }
	#imgbrowz0r .img-directory a:hover,
	#imgbrowz0r .img-directory a:active { border-color: #fff;color: #fff }
 
	#imgbrowz0r .img-directory span.img-dir-name,
	#imgbrowz0r .img-directory span.img-thumb-date { display: block }
	#imgbrowz0r .img-directory span.img-dir-name { font-weight: bold;font-size: 1.2em }
 
	#imgbrowz0r .img-thumbnail a,
	#imgbrowz0r .img-directory a { display: block;margin: 0 auto;width: 200px }
 
	#imgbrowz0r .img-thumbnail,
	#imgbrowz0r .img-directory { float: left;padding: 1.5em 0;width: 25%;text-align: center }
	#imgbrowz0r .img-column-1 { clear: left }
 
	#imgbrowz0r .img-directory a:link,
	#imgbrowz0r .img-directory a:visited { height: 160px;line-height: 150px;
					       background-repeat: no-repeat;background-position: 50% 50% }
 
	/* http://sonspring.com/journal/clearing-floats */
	html body div.clear,
	html body span.clear { background: none;border: 0;clear: both;display: block;float: none;font-size: 0;list-style: none;
			       margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0 }

Create a file called index.php in the root of our folder and copy in the basic html.




	
	TheTutorialBlog.com | Photo Gallery

Inside the div called content_main is where our the ImgBrowz0r class code will go.


require('inc/imgbrowz0r.php');
// These are all settings (set to default). The settings are not validated since you have to configure everything.
// There is a chance that ImgBrowz0r stops working if you enter the wrong values.
$config = array(
	// Directory settings. These are required. Without trailing slash. (required)
	'images_dir'               => 'images/gallery',
	'cache_dir'                => 'images/cache',
 
	// Url settings. These are required. Without trailing slash. (required)
	// %PATH% is replaced with the directory location and page number
	'main_url'                 => 'http://localhost:8888/tutorials/jquery_gallery/index.php?q=%PATH%',
	'images_url'               => 'http:///localhost:8888/tutorials/jquery_gallery/images/gallery',
	'cache_url'                => 'http:///localhost:8888/tutorials/jquery_gallery/images/cache',
 
	// Sorting settings (optional)
	'sort_by'                  => 3, // 1 = filename, 2 = extension (png, gif, etc.), 3 = inode change time of file
	'sort_order'               => false, // true = ascending, false = descending
 
	// Thumbnail settings (optional)
	'thumbs_per_page'          => 12, // Amount of thumbnails per page
	'max_thumb_row'            => 4, // Amount of thumbnails on a row
	'max_thumb_width'          => 200, // Maximum width of thumbnail
	'max_thumb_height'         => 200, // Maximum height of thumbnail
 
	// Time settings (optional)
	'time_format'              => 'F jS, Y', // Date formatting. Look at the PHP date() for help: http://nl3.php.net/manual/en/function.date.php
	'time_zone'                => 0, // Timezone. Example: 1
	'enable_dst'               => false, // Daylight saving time (DST). Set this to true to enable it.
 
	// Misc settings (optional)
	'ignore_port'              => false, // Ignore port in url. Set this to true to ignore the port.
	'dir_thumbs'               => true, // Show a thumbnail in a category box. Default is false.
	'random_thumbs'            => false, // Use random thumbnails for categories. Default is false.
	'read_thumb_limit'         => 0 // See README for information about this setting.
	);
 
// Start the class
$gallery = new imgbrowz0r($config);
 
 
// Prepare everything. This function must be called before you call other functions.
$gallery->init();
 
// Generate navigation and statistics
$gallery_breadcrumbs = $gallery->breadcrumbs();
$gallery_pagination = $gallery->pagination();
 
 
// Display navigation
echo '', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '
', "\n\n";
 
// Display images and directories
echo $gallery->browse();
 
// Display navigation
echo '', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '
', "\n\n";
?>

Fill in the information for the main_url, images_url and cache_url or it will not work.

In the imgBrowz0r.php file located in inc find line number 205 and add a rel called prettyPhoto:

'/', $this->cur_directory, $file[1], '" title="', $file[1], '" rel="prettyPhoto">, $this->config['cache_url'],

If we do not do this then the jQuery prettyPhoto plugin will not work.

Navigating through the gallery without page reloads

To do this we need to write our own jQuery code so that when a hyperlink inside the gallery div then we will do an ajax call that will then replace the content in the content_main div.

$('.img-directory a').click(function(){
	$.get($(this).attr("href"), function(data){
		$("#content_main").slideUp("slow", function(){
		$("#content_main").html(data)}), $("#content_main").slideDown()
	});
	return false;
})

So when a hyperlink inside the a div with the class called img-directory is clicked we will get the href from the hyperlink and retrieve that page using $.get(). We will then slide up the element until the content has loaded and then the elemnt will slide back down and contain the content we requested. We also return false so that the page does not reload.

We do the same for the breadcrumbs so we can navigate between them without the page refreshing also:

$('.img-breadcrumbs').click(function(){
	$.get($(this).attr("href"), function(data){
		$("#content_main").slideUp("slow", function(){
		$("#content_main").html(data)}), $("#content_main").slideDown()
	});
	return false;
});

The entire index.php page should look like so:




	
	TheTutorialBlog.com | Photo Gallery
	
	
	
	
	
 
	



require('inc/imgbrowz0r.php');
// These are all settings (set to default). The settings are not validated since you have to configure everything.
// There is a chance that ImgBrowz0r stops working if you enter the wrong values.
$config = array(
	// Directory settings. These are required. Without trailing slash. (required)
	'images_dir'               => 'images/gallery',
	'cache_dir'                => 'images/cache',
 
	// Url settings. These are required. Without trailing slash. (required)
	// %PATH% is replaced with the directory location and page number
	'main_url'                 => 'http://localhost:8888/tutorials/jquery_gallery/index.php?q=%PATH%',
	'images_url'               => 'http:///localhost:8888/tutorials/jquery_gallery/images/gallery',
	'cache_url'                => 'http:///localhost:8888/tutorials/jquery_gallery/images/cache',
 
	// Sorting settings (optional)
	'sort_by'                  => 3, // 1 = filename, 2 = extension (png, gif, etc.), 3 = inode change time of file
	'sort_order'               => false, // true = ascending, false = descending
 
	// Thumbnail settings (optional)
	'thumbs_per_page'          => 12, // Amount of thumbnails per page
	'max_thumb_row'            => 4, // Amount of thumbnails on a row
	'max_thumb_width'          => 200, // Maximum width of thumbnail
	'max_thumb_height'         => 200, // Maximum height of thumbnail
 
	// Time settings (optional)
	'time_format'              => 'F jS, Y', // Date formatting. Look at the PHP date() for help: http://nl3.php.net/manual/en/function.date.php
	'time_zone'                => 0, // Timezone. Example: 1
	'enable_dst'               => false, // Daylight saving time (DST). Set this to true to enable it.
 
	// Misc settings (optional)
	'ignore_port'              => false, // Ignore port in url. Set this to true to ignore the port.
	'dir_thumbs'               => true, // Show a thumbnail in a category box. Default is false.
	'random_thumbs'            => false, // Use random thumbnails for categories. Default is false.
	'read_thumb_limit'         => 0 // See README for information about this setting.
	);
 
// Start the class
$gallery = new imgbrowz0r($config);
 
 
// Prepare everything. This function must be called before you call other functions.
$gallery->init();
 
// Generate navigation and statistics
$gallery_breadcrumbs = $gallery->breadcrumbs();
$gallery_pagination = $gallery->pagination();
 
 
?>
 


// Display navigation
echo '', "\n\t", $gallery_breadcrumbs, "\n\t", $gallery_pagination, "\n\t\n", '
', "\n\n";
 
// Display images and directories
echo $gallery->browse();
 
// Display navigation
echo '', "\n\t", $gallery_pagination, "\n\t", $gallery_breadcrumbs, "\n", '
', "\n\n";
?>

Download

You can download the files used in this tutorial here

Final words

I hope this tutorial has been useful for you and that you can take something you have learnt from it and use it in future projects.

Please feel free to leave a comment.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Twitter-like pagination using CodeIgniter and jQuery

Wez Pyke — Fri, 18 Dec 2009 16:30:57 +0000

If you use Twitter you'll notice that there is a more button at the bottom at the bottom of your timeline, when you click this more tweets appear. This is Twitters way of paginating a page. In this tutorial I'll show you how to create a pagination system using CodeIgniter and jQuery that is almost identical to Twitters.

First of all copy this SQL into your database to create a table that we will be using to grab rows from.

CREATE TABLE  `tutorials`.`twitter_messages` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 30 ) NOT NULL ,
`message` VARCHAR( 140 ) NOT NULL
) ENGINE = INNODB

Create the controller

The class we create is going to be called twitterpagination:


class twitterpagination extends Controller {
 
}

inside the controller class create a function called index()

function index()
{
	$this->load->helper('url');
	$this->load->model('twitterpagination_model');
	$data['num_messages'] = $this->twitterpagination_model->num_messages();
	$data['latest_messages'] = $this->twitterpagination_model->get_messages();
	$this->load->view('twitterpagination/index', $data);
}

We load the url helper because we will be using base_url() in our view to link to our stylesheet. The model we will be creating is twitterpagination_model so we call this also. $data['num_messages'] returns the number of messages in the database and $data['lastest_messages'] loads the 10 newest rows from the database. Lastly we include a view that we will be creating and pass in $data.

Inside the controller I have created two more functions insert_rows() and get_messages(). The function insert_rows() will insert 50 examples rows for us to retrieve from the table.

function insert_rows()
{
	$this->load->database();
	$i = 0;
	while($i < 50)
	{
		$i++;
		$data = array('username' => 'user', 'message' => 'message ' . $i);
		$this->db->insert('twitter_messages', $data);
		echo $i. '
';
	}
}

The last function we have in our controller is get_messages()

function get_messages($offset)
{
	$this->load->model('twitterpagination_model');
	$data['latest_messages'] = $this->twitterpagination_model->get_messages($offset);
	$this->load->view('twitterpagination/get_messages', $data);
}

This function will be called from the view using an ajax call. We have one parameter called $offset, we use this so we know where to pull the next set of rows from in the table. We simply include the twitterpagination_model, call the get_messages() function from the model and pass in the data to the view.

Here is all of the controller code:


class twitterpagination extends Controller {
 
	function index()
	{
		$this->load->helper('url');
		$this->load->model('twitterpagination_model');
		$data['num_messages'] = $this->twitterpagination_model->num_messages();
		$data['latest_messages'] = $this->twitterpagination_model->get_messages();
		$this->load->view('twitterpagination/index', $data);
	}
 
 
	function insert_rows()
	{
		$this->load->database();
		$i = 0;
		while($i < 50)
		{
			$i++;
			$data = array('username' => 'user', 'message' => 'message ' . $i);
			$this->db->insert('twitter_messages', $data);
			echo $i. '
';
		}
	}
 
 
	function get_messages($offset)
	{
		$this->load->model('twitterpagination_model');
		$data['latest_messages'] = $this->twitterpagination_model->get_messages($offset);
		$this->load->view('twitterpagination/get_messages', $data);
	}
 
}

Save this file as twitterpagination.php inside the controllers folder.

The Model

For the model we create a file called twitterpagination_model.php inside the models folder. Then we create a class called twitterpagination_model which extends Model.


class twitterpagination_model extends Model {
 
}

Next we create the function that will pull the messages from the table.

function get_messages($offset=0)
{
	$this->db->order_by('id', 'desc');
	$query = $this->db->get('twitter_messages', 10, $offset);
	return $query->result();
}

We order the ID descending so that the newest rows are called first. Then we create a variable called $query and retrieve the 10 latest messages from twitter_messages.

Another function that we create in the model is num_messages(). This function returns the number of messages and will be call in the view. This is so we know how many messages are in the table and when to hide the "more" button in the view so the user cannot see it anymore.

function num_messages()
{
	$query = $this->db->count_all_results('twitter_messages');
	return $query;
}

That is all we need to do for the controller.

The View

First of all create a folder called twitterpagination inside the views folder, then create two files called index.php and get_messages.php.

The code for index.php

The most important thing about this file is not to forget to include the jQuery library or the code will not work at all.


<script type="text/javascript">
google.load("jquery", "1.3.2");
script>

Just below the inclusion of the jQuery library we will write our javascript.

<script type="text/javascript">
	$(document).ready(function(){
	var num_messages = $num_messages?>;
	var loaded_messages = 0;
		$("#more_button").click(function(){
			loaded_messages += 10;
			$.get("twitterpagination/get_messages/" + loaded_messages, function(data){
				$("#main_content").append(data);
 
			});
 
			if(loaded_messages >= num_messages - 10)
			{
				$("#more_button").hide();
				//alert('hide');
			}
		})
	})
script>

After we have checked the DOM is ready we create two variables called num_messages and loaded_messages. The variable num_messages is the total number of messages in the table and loaded_messages will increase by 10 every time 10 more rows are retrieved.

We then have a click event for our more button that will send a request to the get_messages view that we will create.

Then we check if the number of loaded messages is the same as the total number off messages so that we know to hide the more button as there are no more rows to retrieve.

The next thing to do is to include the stylesheet.

Inside the body we include this html:


username . ' - ' . $message->message . '
';
}
?>


more

The div with the id of main_content is where the messages will be loaded and the div with id of more_button is our button that will be clicked to retrieve more messages.

Here is the full html/javascript of the index.php page.




	
	Twitter Pagination
	
	
	
	


	
	username . ' - ' . $message->message . '
';
	}
	?>
	
	
	more

The second view that we create is get_messages.php. This is the page that is called when the more button is clicked.


	foreach($latest_messages as $message)
	{
		echo $message->username . ' - ' . $message->message . '
';
	}
?>

Stylesheet

The very last thing we need to do is create a stylesheet for our page to make it look a little nicer.

Create a folder named stylesheet in the root of the CodeIgniter folder and create a file in it called main.css. The path should be {CI_root}/stylesheet/main.php.

#main_content {
	border: #999 1px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding: 5px;
}
 
#more_button {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	color: #990000;
	text-align: center;
	padding: 5px;
	background-color: #fff;
	background-image: url("http://s.twimg.com/a/1261078355/images/more.gif");
	background-repeat: repeat-x;
	cursor: pointer;
	border: 1px solid #AAA;
}
 
#more_button:hover {
	border:1px solid #bbb;
	text-decoration:none;
	background-position:left -78px;
}

Conclusion

Don't forget to configure your database.php file in the config folder and also inside autoload.php make sure you auto load the database library.

$autoload['libraries'] = array('database');

I hope this tutorial has been of use to you, please feel free to post your thoughts and modifications.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Adding security to CodeIgniter forms with a custom library class

Wez Pyke — Wed, 16 Dec 2009 14:03:48 +0000

The class that we are going to create within CI will simply add a math question that the user will have to enter correctly to continue. This is useful to stop bots from mass submitting information to your forms.

The class we are going to write is only very short and simple, but it will give you an idea of how to create classes for your own projects.

Creating the new class

First of all we need to create the file for the class, navigate to libraries then create a file called math_question.php.

All we are going to do within this class is generate two random numbers that will be added together.


class math_question {
 
	function questionOne()
	{
		// generate a random number between 0 - 10
		$num = rand() % 10;
		return $num;
	}
 
	function questionTwo()
	{
		$num = rand() % 10;
		return $num;
	}
 
}

This is all we will be doing for the code within the class.

Using the class within a form

To use this class in our controller we load it like so:

$this->load->library('math_question');

We will also be using form validation and sessions to check if the user has entered the correct answer.

$this->load->library('form_validation');
$this->load->library('session');

We need to set questionOne and questionTwo in variables so we can assign them to a temporary flash session and because they will be passed into the view.

$questionOne = $this->math_question->questionOne();
$questionTwo = $this->math_question->questionTwo();
 
$this->session->set_flashdata('questionOne', $questionOne);
$this->session->set_flashdata('questionTwo', $questionTwo);
 
$data['math_question'] = "What is {$questionOne} + {$questionTwo}?";

To check that the answer that is wrote in is correct we use the callback method in our form validation to call a function that we create that will check the users input against the flash data.

This is how we set our form validation:

$this->form_validation->set_rules('math_question', 'Math Question', 'callback_math_question');

Then we check if the validation has been executed:

if($this->form_validation->run() == FALSE)
{
	$this->load->view('contact/form', $data);
 
}
else
{
	echo "success";
}

Now we need to create our function that is called upon validation of the form:

function math_question()
{
	$user_answer = $this->input->post('math_question');
	$questionOne = $this->session->flashdata('questionOne');
	$questionTwo = $this->session->flashdata('questionTwo');
 
	$correct_answer = $questionOne + $questionTwo;
 
	if($user_answer != $correct_answer)
	{
		$this->form_validation->set_message('math_question', 'Your answer to the math question was incorrect');
		return FALSE;
	} else {
		return TRUE;
	}
}

This will check if what the user has input is correct against a temporary flash session.

Here is all of the controller code in full:


class Contact extends Controller {
 
	function index()
	{
		$this->load->library('form_validation');
		$this->load->library('math_question');
		$this->load->library('session');
 
		$questionOne = $this->math_question->questionOne();
		$questionTwo = $this->math_question->questionTwo();
 
		$this->session->set_flashdata('questionOne', $questionOne);
		$this->session->set_flashdata('questionTwo', $questionTwo);
 
		$data['math_question'] = "What is {$questionOne} + {$questionTwo}?";
 
		$this->form_validation->set_rules('math_question', 'Math Question', 'callback_math_question');
 
 
		if($this->form_validation->run() == FALSE)
		{
			$this->load->view('contact/form', $data);
 
		}
		else
		{
			echo "success";
		}
	}
 
 
 
	function math_question()
	{
		$user_answer = $this->input->post('math_question');
		$questionOne = $this->session->flashdata('questionOne');
		$questionTwo = $this->session->flashdata('questionTwo');
 
		$correct_answer = $questionOne + $questionTwo;
 
		if($user_answer != $correct_answer)
		{
			$this->form_validation->set_message('math_question', 'Your answer to the math question was incorrect');
			return FALSE;
		} else {
			return TRUE;
		}
	}
 
}

Create the view

The last thing we need to do is create the view. Goto views and create a folder called contact, within that folder create a file called form.php.

Here is the code for form.php


echo validation_errors();
echo form_open('contact');
?>
Name:  

$math_question?> 

Answer:  



echo form_close();
?>

On the first line we output the validation errors if there is any, on the second line we use the form helper to open the form tags and likewise for the bottom line where we close the form. $math_question is the variable that is passed in from the controller.

Post your thoughts

Let us know what you think of the tutorial and share your thoughts and contributions below in the comments.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library

Wez Pyke — Wed, 02 Dec 2009 23:51:10 +0000

Recently I wrote quite a huge chunk of jQuery for a website and it worked fine. A few days later I checked back to make sure that everything was working correctly after modifying a few things, but to my surprise none of the jQuery code worked. The problem was that I had added some Mootools code, the Mootools code worked fine but the jQuery code did not. I done some searching and found that the two libraries were conflicting and all it takes is 2 extra lines of code to prevent this from happening.

If you was to include jQuery and Mootools together this code below would not work:

$(document).ready(function(){
    alert("Hello World!");
});

But if we simply add jQuery(function($){ and }); then this code would work the way that we have intended.

The code would look like this:

jQuery(function($){
    $(document).ready(function(){
        alert("Hello World!");
    });
});

More information

I hope you found this quick tip useful, you can find out more about jQuery conflicts here.

Feel free to leave a comment with your thoughts.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Uploading files to Rackspace Cloud (Mosso) using PHP API

Wez Pyke — Tue, 01 Dec 2009 00:39:45 +0000

Rackspace Cloud is a great VPS service, but when I recently done a project it needed the functionality of uploading directly from a website to the cloud. I did not find many tutorials on how to do this, so I thought I'd write a tutorial on it myself.

Step 1: Download the required files

The files you will need for this are located at the Rackspace Cloud website here. You can download the API for PHP, Java, Python, .NET and Ruby. But for this tutorial we will be using PHP.

Step 2: Setup

When the download of the PHP API has complete decompress the file and rename it to cloudfiles. Now place the folder named cloudfiles in the directory where the PHP files will be stored that will upload to the Rackspace Cloud.

Step 3: Create an upload form

For this tutorial we will only be creating a basic upload form, but I have planned for a more advanced uploader with a progress bar and multiple file uploads for a future tutorial, so be sure to check back for that.


File:

Name this file upload.html

Step 4: Uploading to Rackspace Cloud

So what we need to do to upload to the Rackspace cloud is to include the PHP API, connect to Rackspace, get the container we want to use, create an object and then upload the file to that object.


// include the API
require('cloudfiles/cloudfiles.php');
 
// cloud info
$username = ""; // username
$key = ""; // api key
 
// Connect to Rackspace
$auth = new CF_Authentication($username, $key);
$auth->authenticate();
$conn = new CF_Connection($auth);
 
// Get the container we want to use
$container = $conn->get_container('ContainerName');
 
// store file information
$localfile = $_FILES['upload']['tmp_name'];
$filename = $_FILES['upload']['name'];
 
// upload file to Rackspace
$object = $container->create_object($filename);
$object->load_from_filename($localfile);
?>

Name this file upload.php.

Download

You can download the source files from here

Send form data to PHP without the whole page reloading using jQuery

Wez Pyke — Tue, 08 Sep 2009 00:43:14 +0000

This is my screencast for the Nettuts/Screenr screencast competition. I feel as though I rushed it because I had to do it under 5 minutes but I hope you learn a thing or two from it.

Source Files

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The Tutorial Blog » Text Tutorials

Creating a basic iPad application

Create a new project

Outlets and Actions

Create the interface and make connections

The Code

Build and Run

Download

Build a Twitter-like site with CodeIgniter and jQuery Part 2

Change the base url

Create the controller

Create the views

Sign up

Validation

Create user model

Part 3

Download

Build a Twitter-like site with CodeIgniter and jQuery

Download and configure

Database

Configure CodeIgniter

End of Part 1

Part 2

Download

Twitter-like pagination using CakePHP and jQuery

Create the controller

Model

View

index.ctp

get_messages.ctp

Final words

Download

PHP gallery with no page reloads using jQuery

Getting ImgBrowz0r and prettyPhoto to work

Navigating through the gallery without page reloads

Download

Final words

Twitter-like pagination using CodeIgniter and jQuery

Create the controller

The Model

The View

The code for index.php

Stylesheet

Conclusion

Adding security to CodeIgniter forms with a custom library class

Creating the new class

Using the class within a form

Create the view

Post your thoughts

Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library

More information

Uploading files to Rackspace Cloud (Mosso) using PHP API

Step 1: Download the required files

Step 2: Setup

Step 3: Create an upload form

Step 4: Uploading to Rackspace Cloud

Download

Post a comment

Send form data to PHP without the whole page reloading using jQuery