This tutorial assumes a basic working knowledge of Code Igniter. If you have never used CI before, please refer to the framework documentation

In the old days (2 years ago), working the Javascript magic to create a cool AJAX based event took a fairly decent working knowledge of the mechanisms behind the process. With the increasing popularity of Javascript libraries however, this type of functionality became available to the web site hobbyist, and was made much easier for the web site professional.

The following step-by-step tutorial will show you how to combine the power of JQuery (a javascript library that weighs in at about 20k) with Code Igniter (a PHP framework based on the MVC design pattern) to quickly and painlessly pass a record ID through the javascript and over to the server, where it will be passed to a mysql database, used to retrieve some data, and sent back to the page for display.

Step 1
We begin by assuming that you have a div with an id of content, which is where you would like your freshly retrieved data to display, once it has been freshly retrieved. For this exercise, you have already taken an action to call your javascript function with a record ID parameter.

The first thing you need to do, is make sure JQuery is being loaded, and to create a function for your AJAX request.

 

PHP [Show Styled Code]:

 

 

1. <script language=“javascript” src=“/path_to_jquery/jquery.js” ></script>

2. <script function get_record_id(record_id)

3. {

4. }

5. </script>

6. </script>

Step 2:
Next, youll use the JQuery function load, and attach it to your content div:

 

PHP [Show Styled Code]:

function get_record_id(record_id) {      $('#content').load() }

 

 

1. function get_record_id(record_id) {

2. $(‘#content’).load()

3. }

Step 3:
The load function accepts three arguments. The page to be called on the other side of the HTTPRequest, the array to pass through the POST, and a callback function. It looks like this:

 

PHP [Show Styled Code]:

function get_record_id(record_id) {      $('#content').load(/controller/method,p,function(str){  	 }); }

 

 

1. function get_record_id(record_id) {

2. $(‘#content’).load(/controller/method,p,function(str){

3.  

4. });

5. }

Lets go back to that. Code Igniter URLs are created by calling the name of your controller, followed by the function inside the controller class that will handle your request. If your server does not support mod-rewrite, you may also need to append an index.php to the beginning. The str inside the callback function is the results of your AJAX request. There isnt much use for the str when using the .load function, but it does come in handy using the other JQuery AJAX functions - $.post and $.get, which I assume are self explanatory.

Step 4

 

PHP [Show Styled Code]:

var p = {}; //instantiate the array p[record_id] = record_id //assign your record_id variable to it.

 

 

1. var p = {}; //instantiate the array

2. p[record_id] = record_id //assign your record_id variable to it.

Thats all there is to it. Your final javascript function looks like this:

 

PHP [Show Styled Code]:

function get_record_id(record_id) {      var p = {};      p[record_id] = record_id      $('#content').load(/controller/method,p,function(str){       }); }

 

 

1. function get_record_id(record_id) {

2. var p = {};

3. p[record_id] = record_id

4. $(‘#content’).load(/controller/method,p,function(str){

5.  

6. });

7. }

Step 5
On the CI side, you have a controller and method setup something like this:

 

PHP [Show Styled Code]:

class Controller {    function Controller()    {        parent::CI;    }     function method()    {    } }

 

 

1. class Controller

2. {

3. function Controller()

4. {

5. parent::CI;

6. }

7.  

8. function method()

9. {

10. }

11. }

The important part is the method() function, as it will contain some of the code we need to make things happen.

Step 6
The first thing you need to do on the CI side is retrieve the value passed through the request object. This is simple enough, using $_POST[record_id]. You also want to load up your database model so you can get the record out of your database. So, well load the database library, and then load the actual model. Then, we want to send the record ID to the database, get the resulting data, and pass it back out to the request. our function starts to look like its doing something useful pretty quickly.

 

PHP [Show Styled Code]:

function method() {    $record_id = $_POST[record_id];  //set the record ID    $this->load->library(database); //load the database library to connect to your database    $this->load->model(records); //inside your system/application/models folder, create a model based on the procedure outlined in the CI documentation    $results = $this->records->get_record($record_id); //get the record from the database }

 

 

1. function method()

2. {

3. $record_id = $_POST[record_id]; //set the record ID

4. $this->load->library(database); //load the database library to connect to your database

5. $this->load->model(records); //inside your system/application/models folder, create a model based on the procedure outlined in the CI documentation

6. $results = $this->records->get_record($record_id); //get the record from the database

7. }

Step 7
At this point, we need to go into our records.php file in the model folder. Since Code Igniter uses a Model-View-Controller structure, database activity, server-side processing, and client-side display should be as separate from one another as possible. You dont NEED to do this for Code Igniter to do its thing, but its good practice.

Inside the records.php file, well create a method called get_record to match the method referenced above. Well use it to get a record by its primary key of ID, put the resulting data into an array, and send it back to the controller, out to the view, and ultimately into the content div we started with.

 

PHP [Show Styled Code]:

function get_record($record_id) {    $this->db->where(ID,$record_id); //we want the row whose ID matches the value were passing in    $query = $this->db->get(record_table); //get the table and put it into an object named $query    $row = $query->row(); //gets the first row of the resulting dataset.  In this case, only 1 row will ever be returned    $results[record][$row->ID][name] = $row->name; //here, we create a multi-dimensional array holding the returned values based on the key.    return $results; //send the record back to the controller }

 

 

1. function get_record($record_id)

2. {

3. $this->db->where(ID,$record_id); //we want the row whose ID matches the value were passing in

4. $query = $this->db->get(record_table); //get the table and put it into an object named $query

5. $row = $query->row(); //gets the first row of the resulting dataset. In this case, only 1 row will ever be returned

6. $results[record][$row->ID][name] = $row->name; //here, we create a multi-dimensional array holding the returned values based on the key.

7. return $results; //send the record back to the controller

8. }

The trickiest part of this section is the array. It seems pretty complex from here, but youll see soon enough how it breaks down into something more manageable as we go along.

Step 8
Were back to the controller again, and we have one more line to add - this time to pass the resulting data into a view to be formatted and printed to the content div. The whole method() function now looks like this:

 

PHP [Show Styled Code]:

function method() {    $ID = $_POST[record_id];  //set the record ID    $this->load->library(database); //load the database library to connect to your database    $this->load->model(records); //inside your system/application/models folder, create a model based on the procedure outlined in the CI documentation    $results = $this->records->get_record($record_id); //get the record from the database    $this->load->view(AJAX_record,$results); }

 

 

1. function method()

2. {

3. $ID = $_POST[record_id]; //set the record ID

4. $this->load->library(database); //load the database library to connect to your database

5. $this->load->model(records); //inside your system/application/models folder, create a model based on the procedure outlined in the CI documentation

6. $results = $this->records->get_record($record_id); //get the record from the database

7. $this->load->view(AJAX_record,$results);

8. }

Step 9
The AJAX_record.php file should be in your system/application/views folder. Keep in mind, that when you pass an array to a view (in this case the $results array), it will be exploded inside the view. So, the path to your record is now $record, instead of $results[record]. Also inside will be your standard HTML markup, and something like this:

 

PHP [Show Styled Code]:

< ?php foreach($record as $id=>$value) { ?>      The name associated with this record is: < ?php print $value[name];?> < ?php } ?>

 

 

1. < ?php foreach($record as $id=>$value) { ?>

2. The name associated with this record is: < ?php print $value[name];?>

3. < ?php } ?>

This output is what php is sending to the request object, and is also what gets loaded into the content div. Code Igniter and JQuery make it that easy to dynamically load data using AJAX.

• 0 Comments

Web Standards, Creating Effective Websites

Many web designers know how to design CSS driven websites, but many don’t fully understand the flexibility presented by CSS to the XHTML structure. Specifically, the fact that XHTML can be organized in just about any way on most sites while still maintaining the same look. So what does this versatility do your you?

I like to tell people to structure their site like a newspaper. Newspapers, just like websites, have a title, sections, articles, lists and references. There are a number of reasons to think carefully about how you want to structure the content.

Perhaps the first thing that jumps into your mind is accessibility. While having accessible websites is undoubtedly important, you are also given the unheard of opportunity in the table-based layout world to cater to search engines: put the raw content first.

1. <html>
2.     <head>
3.         <title>Page Title</title>
4.     </head>
5.     <body>
6.         <h1>Page Title</h1>
7.         <h2>Relevant Content Header</h2>
8.         <p>Website content…</p>
9.         <h3>News</h3>
10.         <h4>Recent News</h4>
11.         <p>New structure launched…</p>
12.         <h4>Last Week’s news</h4>
13.         <p>V2 is in the works…</p>
14.         <h2>Navigation</h2>
15.         <ul>
16.             <li>Home</li>
17.             <li>About Our Company</li>
18.             <li>Contact Us</li>
19.         </ul>
20.         <p>Copyright (c) ________</p>
21.     </body>
22. </html>

Obviously the page structure above is exceedingly simple compared to most websites out there. The fact remains that some web developers still don’t make proper use of several of the most important XHTML tags: headers, unordered lists, and even paragraph tags.

If you know how to keep presentation and structure separate, you’re one step ahead of the competition. Accordingly, you can take that separation further. Just because XHTML may look like it’s organized differently than the layout you’re after, CSS is more than capable enough to turn a website upside down. So next time you start a project, take a deep breath and think to yourself, “What would be the logical way to structure my content regardless of the design?”

• 0 Comments

You won’t find many article marketing secrets being given away online, because very few people properly understand the power of this internet marketing tool. It is more than simply a way of getting links back to your website, but a very powerful tool that if used properly can increase your sales to another level.

If you are provided with ’secrets’ then they are well known by almost everybody. I will admit that even the ’secrets’ I am about to divulge are not secrets at all, but well known article marketing techniques. However, what I will also say is that the three provided here are neither appreciated nor used by all of even those that profess to be marketing ‘gurus’.

I know that because I have purchased many of their books and they don’t suggest what I suggest: I know my systems work and can prove it through my website listings. However I must stop because I am becoming dangerously close to advertising, but I have done so as to indicate about the maximum you can do on article directories to advertise yourself: and that is your free tip. Do not advertise in your articles if they are intended for submission. Leave that for your ‘author’s resource box’.

The most common purpose for people writing articles and offering them to directories for publication is to get those all-important back links from the directories. However, just stand back a bit and think why the directories are in existence. It is not for your benefit. It is not to provide you with a free means of improving your Google PageRank, but they exist to make money. And why not? Otherwise there would be no point in anybody offering an article directory to all of these online writers.

You don’t pay to have your articles published on the directories, so what is their purpose? How do these people make money? Two ways in fact: the first is by means of Adsense. If you do a search for an article on a specific topic, you will certainly find one because articles have been written on every topic on the planet. On the same page you will find Adsense ads. The reason for this is obvious and also psychological.

It is because most articles are not worth reading, and visitors generally have a quick look at them before leaving the directory site to seek proper information on their topic or niche. That is when they are liable to click on the Adsense ads and make money for the directory owner. That is added to the second way they make money which is from payment for speeding up the listing of the articles. You’ve seen the thing: get listed in several weeks or pay a few dollars for an instant listing. Like most other serious marketers, I pay.

Whichever means they use, article directories realize that it is to their advantage to get high search engine listings for as many articles as possible. They then have their sites visited by as many people as possible, and also have writers use them. That provides them with more visitors to click the Adsense ads and also as an inducement to other budding authors who might pay for listings. I don’t pay for a listing in a site that never has my articles in Google.

Here are three secrets or tips, that you can use in your own article marketing campaigns:

Read the rest of this entry »

• 0 Comments