Zend Framework + Doctrine + jQuery Grid

Published

on 23/12/2008

. Tags: Doctrine, grid, JavaScript, jQuery, ORM, PHP, Smarty, Tutorial, zend framework.

Today i will show you how to put together: Zend Framework, Doctrine and simple jQuery Grid in easy way. All i want to do is to get some data from database with doctrine, format that data and send it to the template with Zend_Json:) Really nothing special.

Ok. Let’s start. First of all we need to create database schema.yml. It is realy easy country table:


Country:
  tableName: country
  columns:
    id:
      primary: true
      autoincrement: true
      type: integer(10)
    name: string(50)
    description: string(255)

We also have to set up the database configuration in the config.ini:

type = “mysql” // database adapter
dbname = “doctrine_grid” // database name
host = “localhost” // host
username = “user”
password = “pass”

Then we must create database, generate models and sql, create tables and load simple data fixtures.

From the command line in the main application directory we call the following code:

1) php doctrine-cli.php create-db

2) php doctrine-cli.php generate-models-yaml

3) php doctrine-cli.php generate-sql //it is not necessary

4) php doctrine-cli.php create-tables

or simply: php doctrine-cli.php build-all

Now we need some data for testing.

Create data.yml file in directory: data/fixtures


Country:
  Country_1:
    name: 'Poland'
    description: 'Description for Poland'
  Country_2:
    name: 'Germany'
    description: 'Description for Germany'
  Country_3:
    name: 'Brzail'
    description: 'Description for Brazil'
  Country_4:
    name: 'USA'
    description: 'Description for USA'
  Country_5:
    name: 'Ireland'
    description: 'Description for Ireland'
  Country_6:
    name: 'Canada'
    description: 'Description for Canada'
  Country_7:
    name: 'India'
    description: 'Description for India'
  Country_8:
    name: 'Italy'
    description: 'Description for Italy'
  Country_9:
    name: 'Spain'
    description: 'Description for Spain'
  Country_10:
    name: 'Portugal'
    description: 'Description for Portugal'
  Country_11:
    name: 'Argentina'
    description: 'Description for Argentina'
  Country_12:
    name: 'Estonia'
    description: 'Description for Estonia'
  Country_13:
    name: 'Bulgaria'
    description: 'Description for Bulgaria'
  Country_14:
    name: 'France'
    description: 'Description for France'
  Country_15:
    name: 'Belgium'
    description: 'Description for Belgium'
  Country_16:
    name: 'Austria'
    description: 'Description for Austria'
  Country_17:
    name: 'Australia'
    description: 'Description for Australia'
  Country_18:
    name: 'Japan'
    description: 'Description for Japan'
  Country_19:
    name: 'Russia'
    description: 'Description for Russia'
  Country_20:
    name: 'Slovakia'
    description: 'Description for Slovakia'
  Country_21:
    name: 'Ireland'
    description: 'Description for Ireland'

And we call:

php doctrine-cli.php load-data

to import data to the database.

Next step is to download jQuery Flexi grid (yesterday i had some problem because site was suspended) and put it into public/js/ (js files I put into js/ and css files into /css folder). We also need to download latest jQuery version.

Now we can take care of php scripts. We can simply create new controller, for example GridController and one action: indexAction.


class GridController extends Core_Controller_Action
{
    public function indexAction(){

    }
}
?>

We don’t need to put any code in the indexAction. Zend will automatic call the index.tpl template where we have to put the following code:


<h1> Testing jQuery FlexiGrid </h1>

<table id="myGrid"> </table>
	<!-- updated to work with IE -->

{literal}

<link rel="stylesheet" type="text/css" href="public/css/flexigrid/flexigrid.css">
<script type="text/javascript" src="public/js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="public/js/flexigrid/flexigrid.js"></script>

<script language="javascript" type="text/javascript">

$("#myGrid").flexigrid({
  url: 'grid/list',
  dataType: 'json',
  colModel : [
    {display: 'Id', name : 'id', width : 40, sortable : true, align: 'center'},
    {display: 'Name', name : 'name', width : 100, sortable : true, align: 'left'},
    {display: 'Description', name : 'description', width : 200, sortable : true, align: 'center'}
  ],
  buttons : [
    {name: 'Add', bclass: 'add', onpress : test},
    {name: 'Delete', bclass: 'delete', onpress : test},
    {separator: true}
  ],
  searchitems : [
    {display: 'Name', name : 'name'}
  ],
  sortname: "name",
  sortorder: "asc",
  usepager: true,
  title: 'List',
  useRp: true,
  rp: 10,
  showTableToggleBtn: true,
  width: 700,
  height: 200
});

function test(com, grid){

  $(".trSelected > td:first-child > div:first-child").each( function(index, element){

  alert($(element).html());

}
);

}

</script>

{/literal}

I have created the empty div for my flexi grid, then imported javascript libaries and called flexigrid method on div element. I just set the most important options (unfortunately there is realy small documentation about flexigrid, so sometimes we need to read the library code).

One of the required option is url. Flexi grid needs that url for retrieving data from the database - for example: sorting and pagination. We need to create function listAction where we put code responsible for getting data, sorting and pangination.


public function listAction(){

    # We don't want to render Layout
    $this->_helper->layout()->disableLayout();

    # rendering view is also not necessary
    $this->_helper->viewRenderer->setNoRender();

    $req = $this->getRequest();

    # Pagination parameters
    $currentPage 	= $req->getPost('page', 1);
    $resultsPerPage = $req->getPost('rp', 10);

    # Sorting parameters
    $orderBy 		= $req->getPost('sortname', 'name');
    $orderType 	= $req->getPost('sortorder', 'ASC');

    # Query parameters - for Searching
    $query 			= $req->getPost('query', '');
    $qtype 			= $req->getPost('qtype', 'name');

    # Creating Doctine pager object
    $pager = new Doctrine_Pager(
      Doctrine_Query::create()
      ->from( 'Country' )
      ->addWhere("$qtype LIKE ?", "%$query%")
      ->orderby( "$orderBy $orderType" ),
    $currentPage, // Current page of request
    $resultsPerPage // (Optional) Number of results per page. Default is 10
    );

    $items = $pager->execute();

    $elements = array();
    # We also have to format our data array that flexifrid could retrieve itt
    foreach($items as $item){

        $elements[] = array(
          'id'	=>	$item->id,
          'cell'	=>	array_values($item->toArray())
        );
    }

    echo Zend_Json::encode(array(
        'page'	=>	$currentPage,
        'total'	=>	$pager->getNumResults(),
        'rows'	=>	$elements
    ));

}
?>

That’s all. We can test our grid calling for example http://your-domain.com/grid/

You should see something like that:

flexi grid

You can also check my example on: www.test.adryjanek.eu/grid

40 Responses to “Zend Framework + Doctrine + jQuery Grid”

Feed for this Entry Trackback Address

1 Lesmono
13/01/2009 at 11:14

Can u please be more specific. Please show me your directory structure and your index.php
2 Kamil Adryjanek
13/01/2009 at 11:51

You can find my directory structure (already integrated with Doctrine) here: http://blog.adryjanek.eu/2008/11/24/zend-framework-integracja-z-doctrine-orm/
3 Lesmono
13/01/2009 at 11:55

can u please send me the demo application from your http://www.test.adryjanek.eu/grid
4 Kamil Adryjanek
13/01/2009 at 12:02

I can send youm my code in the evening as soon as i get back home.
5 sdc888
18/01/2009 at 02:36

Great post! would love to see the code for the demo also!

Thanks!
6 Kamil Adryjanek
18/01/2009 at 17:30

I just send you my source code on your e-mail.
7 Lesmono
21/01/2009 at 04:45

Hi…adry, have you send me the source code. Because I didn’t recieve any email from you.
8 Kamil Adryjanek
21/01/2009 at 08:27

Yes, I did but there was some problem with your e-mail address. I send it again today in the morning.
9 Michael
03/02/2009 at 19:41

Hey Kamil,

I just wanted to say thanks, this worked great, I was able to intigrate it into an existing ZF/Doctrine project I am working on with out any issues.

Thanks!!!!!
Michael
10 Yusri
11/02/2009 at 08:32

hi.nice code. can you send to me the source code.
thank you
11 Kamil Adryjanek
11/02/2009 at 20:43

No problem. Check your e-mail box.
Cheers.
12 Kamil Adryjanek
13/02/2009 at 18:20

I have updated my code and test version on test.adryjanek.eu to work better with Internet Explorer. There were some problems with displaying data using div element.
13 Yenski Ronsha
04/04/2009 at 06:49

Hi nice code, can you send the code to my email address?
14 Kamil Adryjanek
04/04/2009 at 13:58

Hi, no prob. Enjoy
15 Cristian
23/05/2009 at 17:15

Hi all .. ok ok .. it’s nice .. but how do you implement jquery form validator in flexigrid ?

some kaind of .. if form is valid, subit else not.
16 Amarnath
19/06/2009 at 13:07

Hi, Can you please send me the code to my email address.
17 Kamil Adryjanek
21/06/2009 at 20:14

Check your e-mail box. Cheers.
18 Mondy
14/07/2009 at 15:46

Hi, can you send me the code to my email address too?

Thanks a lot.
19 Kamil Adryjanek
21/07/2009 at 16:16

Sent, greetings.
20 Comet
25/08/2009 at 05:11

Hi, can you send me the code to my email address too? (thanhhuyen2001vn@yahoo.com)
Thanks a lot.
21 Robert
29/08/2009 at 05:31

It’s a nice code. Pls, send your demo code to me. Thank in advance.
22 Kamil Adryjanek
31/08/2009 at 21:34

@Comet,sent.
@Robert, i need your e-mail.
23 Niko
17/09/2009 at 10:03

Hi,
Very interest and usefully, but can you send me the code to my email address too?

Thanks a lot.
24 Kamil Adryjanek
18/09/2009 at 19:06

No problem, sent.
25 andrey
04/12/2009 at 21:29

Hi, can you send me the code to my email address too? (awean@rambler.ru). Only begining learn zf to need examples.
Thanks a lot.
26 thomas
22/01/2010 at 17:51

Perfect code + Perfect tutorial = Top of tutorial .

Possible to have a zip ?

Thx,
27 Kamil Adryjanek
22/01/2010 at 19:45

Hi, Thank you for your comment.
Check your e-mail, i just send you sample application code.
Cheers
28 pss
12/03/2010 at 13:18

Hello,
can you send me the code too?

Thanks
29 Chris
12/04/2010 at 10:31

Hi,
Great stuff. I appreciate it.
Could you send me the code as well?
Thanks in advance
30 maddog
12/04/2010 at 12:03

Hi!

How adding to this code one form with search parameters?
31 Kamil Adryjanek
12/04/2010 at 16:28

@Chris: sent.
@maddog: what do you mean exactly? Some dialog?
32 maddog
13/04/2010 at 09:30

Idea?
Steps:
1. User open page. There is form with some inputs, button submit and empty grid.
2. User fill inputs and send data.
3. Next starts zend validation. If validation on requesting data is ok, datas are sending to grid.
33 Kamil Adryjanek
14/04/2010 at 06:50

And what is the problem?? You just want to add a record to database? You can create simple form and add ajax submit handler to it to send data from your form via AJAX. For example:
$(’#yourForm’).submit(function() {
$.ajax({
type: ‘POST’,
url: ‘yourAjaxHandlerUrl’,
data: formData,
error: function() {
…
}
success: function() {
…
}
});

In success action you sholud reload the grid and reset the form. In error handler you can display some errors from PHP validation (you can also add JS validation).
It should help.
34 maddog
14/04/2010 at 08:48

That’s another problem.
I want connect flexigrid and my search form / no internal flexigrid search/. Flexigrid should reload only when i pushed send button from my valided search form.
35 Shahab
29/04/2010 at 19:26

@Kamil Adryjanek: could you please send me the code on my id shahab_qadeer@hotmail
36 karimulla
27/05/2010 at 09:27

can you send me the source code please!
37 thantang
07/07/2010 at 09:47

You can send me your’s code,plz.
I need it !
Thanks.
38 Adriano
19/07/2010 at 19:19

Good day! My frendy I need your help, I sorry my english I m Brazilian…

I need of your exemple for studante moore !!
39 Kamil Adryjanek
19/07/2010 at 20:29

Send, enyoj!
40 Adriano
19/07/2010 at 20:51

Thank’s save my life in my service …