Papermashup

Subscribe


Tweets


"RT @Eva_Shaughnessy: #finedining @romomobilecafes restaurant this evening with #NewHair #winning #SaturdayNight #GirlsNightOut http://t.co/…"

@ashleyford 3 weeks ago

"RT @kycutwilson: @ashleyford @burgerbeartom incredible. There's 5 more left! Shout about it!!"

@ashleyford 4 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Build a JSON and PHP product gallery

AshleyAshley

As the title describes we’re going to look at making cross domain ajax requests using JSONP I’m also going to show you how to get data from a MySQL database and encode it into a JSON string which can be parsed using JavaScript. JSON stands for JavaScript Object Notation and essentially its a method which allows us to execute cross domain ajax requests without too much fuss. This post really follows on from my article about scraping content from a page but also allows you to send and receive GET variables through the JSON request.

What we’re going to build

To give this tutorial a valid example we’re going to display a selection of product in a gallery as seen in the image below, click here to see the demo page.

product-gallery

The PHP code

First we’re going to run through getting data from our database using a PHP while loop to get a selection of rows limited to 6. In the code below you can see that we’re getting the data and generating an array. After this we simply pass the array variable $rows into the PHP function json_encode() which will format our PHP array for us.


include('connect.php');	
	$sql = "SELECT title, image, description FROM json_demo LIMIT 6";	
	$result = mysql_query($sql);
		while($row = mysql_fetch_array($result))
		{	
			 $rows[] = array(
			"title" => $row['title'],
			"image" => $row['image'],
			"description" => $row['description']);
		}

$json = json_encode($rows);

$callback = $_GET['callback'];
echo $callback.'('. $json . ')';	
	

What the JSON looks like

Below is the structured output from our json.php file.


[ { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "1.jpg",
    "title" : "B&O 5.1"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "2.jpg",
    "title" : "B&O TV"
  },
  { "description" : "Market leader in the UK. Roberts produce a wide range of DAB digital radios. Roberts is a consumer electronics company producing DAB, analogue and wi-fi ...",
    "image" : "3.jpg",
    "title" : "Roberts Radio"
  },
  { "description" : "Toshiba is a diversified manufacturer and marketer of advanced electronic and electrical products, spanning information & communications equipment and systems",
    "image" : "4.jpg",
    "title" : "Toshiba TV"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "5.jpg",
    "title" : "B&O Audio"
  },
  { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen",
    "image" : "6.jpg",
    "title" : "B&O Remote"
  }
]

Now we have the JSON format built we just need some JavaScript to parse the file and output our data. generating an ajax request for JSON is pretty straight forward. because what we’re doing is designed to work cross domain you can put an absolute URI in the request. With JSONP we must add a callback parameter which is passed into the beginning of the JSON string.

Once we have the data we’re cycling through the results and appending a div with the results into the page.


$("document").ready(function () {

    $.getJSON('http://papermashup.com/demos/jquery-json-php/json.php?callback=?', function (data) {
        $("#content").html('');
        $.each(data, function (i, item) {

            $("#content").append('<div class="product"><img src="http://papermashup.com/demos/jquery-json-php/images/' + item.image + '" width="135" height="138"/><div class="title">' + item.title + '</div><div class="description">' + item.description + '</div><div class="clear"></div></div>');

        });


    });
    $("#content").fadeIn(2000);
});

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 21
  • matth
    Posted on

    matth matth

    Reply Author

    how print json ?


  • Asterix
    Posted on

    Asterix Asterix

    Reply Author

    I tried to replace jQuery 1.3.2 with jQuery 1.7.1, but it didn’t work. Do you have any idea why? Is there a way to use only jQuery 1.7.1 with this app?


  • jhon3rick
    Posted on

    jhon3rick jhon3rick

    Reply Author

    Increíble ya estamos en 24/mayo/2012 y e buscado como loco desde hace 20 dias un ejemplo de la realización y consumo de un servicio con Json….
    mil gcs


  • Edmilson
    Posted on

    Edmilson Edmilson

    Reply Author

    Muito útil, obrigado por compartilhar!


  • Cahit EROZ
    Posted on

    Cahit EROZ Cahit EROZ

    Reply Author

    Hello ashley.

    I’m looking for a long time an application. Thanks for sharing.

    I would like your permission to use on my site.

    However, I would like to indicate that a lack of lack of pagination. I’d like your help on what to do for paging ..

    Thank you again.


  • joel
    Posted on

    joel joel

    Reply Author

    Thanks you, you save my current job!


  • Aditya Parakh
    Posted on

    Aditya Parakh Aditya Parakh

    Reply Author

    Hello ,

    Will check out the demo ,
    useful tutorial.

    Please guide , about how we can add page numbers , if our product number increases a specific and convenient methods to deal with a situation like that.

    Can you calso provide a few tips in regards to formating it with CSS.

    Thanks


  • Imbo
    Posted on

    Imbo Imbo

    Reply Author

    is it possible to load multiple images in .. (e.g. a gallery with every record..)?


  • VIANTO
    Posted on

    VIANTO VIANTO

    Reply Author

    how can i see json data structure after encoded, i’ve already use firebug but got confused with so many parameter…

    one more

    $.each(data, function (i, item)

    is it iterate function ? whats the i variable for ? cause i dont see you use it as an index…

    Great tutorial…
    Thanks,


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Vianto yeah to see JSON structured you can visit http://jsonformat.com/ where you can process your code to make it easier to read. hope that helps!


  • HotMonitor
    Posted on

    HotMonitor HotMonitor

    Reply Author

    Hi,
    Good script congratulations !
    Do script works with external cross domain data.js ?

    $.getJSON(‘http://domain.com/data.js?callback=?’, function (data) {
    .


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Hotmonitor I can’t see there being a problem using a .js file.


  • Jason
    Posted on

    Jason Jason

    Reply Author

    It is faster than HTML output, but it is not so user-friendly, when the client disabled javascript.


  • Gabriel
    Posted on

    Gabriel Gabriel

    Reply Author

    Nice Papermashup ! Te la rifas,


  • Lorenzo Peña
    Posted on

    Lorenzo Peña Lorenzo Peña

    Reply Author

    I have a question.
    The connect.php class is the common db_connect.php class for MySQL?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Lorenzo, yeah this is a standard MySQL connection script.