Build a Twitter-like site with CodeIgniter and jQuery

CodeIngiter + jQuery=twitter

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.
ci Build a Twitter like site with CodeIgniter and jQuery

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

Bookmark and Share
Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • FriendFeed
  • LinkedIn
  • Ping.fm
  • Tumblr
  • Twitter

No related posts.

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

, , , , , , , , , , , , , , , , , , ,

3 Responses to Build a Twitter-like site with CodeIgniter and jQuery

  1. Florin Mangu February 14, 2010 at 9:34 am #

    I like your tutorials and i would like to see that you finish , i would like to learn more of this ! I have made a design for a romanian twitter site but i don't have all the knowledge to finish the site with all the functionalities , because i am young and still learning here is a screen http://radio-cool.ro/MiniTwitter.png if you want i can share it for feature design of this site , thank you for your time!

  2. Wez Pyke February 14, 2010 at 10:47 am #

    Well when this series of tutorials is finished you should be able to successfully build a website very similar to Twitter.

  3. eCopt December 15, 2010 at 7:17 pm #

    @Wez - Love your tutorials! Did you ever manage to post the remaining parts? I'm anxious to keep practicing my skills, but def. need these tutorials to help! Thanks again.

Leave a Reply