SCPHP Tutorial - Using a grid to list data

This tutorial will show how you can create a grid and list data with SCPHP. Basically, we will have a grid that is connected to a data source on a script and another script that is responsible to provide the data ( in Json format, but if you prefer, you can use XML ).

As always, the complete source-code is available at the end of the page.

We will use two scripts
All steps should be done on grids.php script, except step 5) that is done on list.php script.

1) Make sure that you already installed SCPHP

If you have not installed SCPHP yet, check the Installation page.

2) Create a new php page and include scripts

Create php page with the following content:

<html>
	<head></head>
	<body>
		<?php
		// Auto load function
		function __autoload( $className )
		{
			require_once( 'SmartClient/'. $className .'.php' );
		}
		
		$scGrids = new ScGrids();
		
		// Include SmartClient scripts
		echo $scGrids->includeScripts();

We first declare the __autoload() function. This isn't a required step, but it is a good idea because it make loading SCPHP classes really easy. You could also use a simple require for the class that you need to use.

After that, we create a new instance of ScGrids class.

And finally, we call includeScripts(). This is a function that automatically include the SmartClient scripts.

3) Create the datasource

Add the following code to the script:

		$scDataSource = new ScDataSource();
		
		$scDataSource->addField( 'id' , 'Id' , true , null , null , false );
		$scDataSource->addField( 'name' , 'Name' );
		echo $scDataSource->create( 'datasourceID' , 'list.php' );

In this part of the script, we basically create a new instance of ScDataSource and draw it. As this is a basic example, we are considering that our structure have just two fields: id ( that is a primary key ) and name.

The attributes of id field are:

Name of the Field: id
Title of the field: Id
Primary Key?: true
Foreign Key?: null
Root Value: 0
Can Edit: false

The attributes of name are:

Name of the Field: name
Title of the field: Name
Primary Key?: false ( default value )
Foreign Key?: null ( default value )
Root Value: 0 ( default value )
Can Edit: true ( default value )

And the attributes of the datasource:

Id: datasourceID
FetchURL: list.php ( this is the other script, that we will talk soon )

4) Create the grid

Add the following code to the script:

		$options = array(
			'showFilterEditor' => true, 
			'canEdit' => false
		);
		echo $scGrids->create( 'gridID' , 'datasourceID' , 400 , 300 , $options );
		?>
	</body>
</html>

Now, as we have the datasource, we can create the grid that is connected to this datasource.

The grid have the following attributes:

ID: gridID
DataSource: datasourceID ( this is the datasource that we created on step 3 )
Width: 400
Height: 300
showFilterEditor: true ( this adds a filter for each field, really nice and fast )
canEdit: false ( if set to true, it would allow inline editing on this grid )

5) Creating the list.php script

At this moment, we have a grid connected to a datasource. But the datasource needs to get data from somewhere. In this case, we are will create the list.php script.

So, create a new php page with the following content.

<?php
$data[] = array(
	'id' => 1,
	'name' => 'First One'
);
$data[] = array(
	'id' => 2,
	'name' => 'Second'
);
$data[] = array(
	'id' => 3,
	'name' => 'Third'
);
$data[] = array(
	'id' => 4,
	'name' => 'And finally the last'
);


$reply = array(
	'response' => array(
		'status' => 0,
		'data' => $data
	)
);

echo json_encode( $reply );
?>

In this script, we create an array called $data that holds all data. As we want to make it simple, there is no database interaction.

About database
On real-world applications, you would probably be using a database. In this case, your $data array would be the array that is returned by mysql_fetch_array() function.

And them, we create a $reply array, using the structure that SmartClient datasources expect to receive. You can find more about this at the SCDataSource page.

Finally, we encode it with json_encode() function and echo to the browser.

6) Test it

Run the grids.php script at your browser. You should see a SmartClient grid with the data that is created at list.php script.

7) Full source code

Here it is the full source code of the two scripts used on this tutorial:

grids.php

<html>
	<head></head>
	<body>
		<?php
		// Auto load function
		function __autoload( $className )
		{
			require_once( 'SmartClient/'. $className .'.php' );
		}
		
		$scGrids = new ScGrids();
		
		// Include SmartClient scripts
		echo $scGrids->includeScripts();
		
		
		$scDataSource = new ScDataSource();
		
		$scDataSource->addField( 'id' , 'Id' , true , null , null , false );
		$scDataSource->addField( 'name' , 'Name' );
		echo $scDataSource->create( 'datasourceID' , 'list.php' );
		
		
		$options = array(
			'showFilterEditor' => true, 
			'canEdit' => false
		);
		echo $scGrids->create( 'gridID' , 'datasourceID' , 400 , 300 , $options );
		?>
	</body>
</html>

list.php

<?php
$data[] = array(
	'id' => 1,
	'name' => 'First One'
);
$data[] = array(
	'id' => 2,
	'name' => 'Second'
);
$data[] = array(
	'id' => 3,
	'name' => 'Third'
);
$data[] = array(
	'id' => 4,
	'name' => 'And finally the last'
);


$reply = array(
	'response' => array(
		'status' => 0,
		'data' => $data
	)
);

echo json_encode( $reply );
?>