phpGrid Archives | phpGrid - PHP Datagrid Create PHP grids in minutes, not hours. Tue, 11 Mar 2025 20:22:16 +0000 en-US hourly 1 CodeProjecthttps://wordpress.org/?v=7.0.3 129966043 Debugging PHP with VSCode and XDebug: A Step-by-Step Guide https://phpgrid.com/blog/debugging-php-with-vscode-and-xdebug-a-step-by-step-guide/ Tue, 11 Mar 2025 04:46:39 +0000 https://phpgrid.com/?p=10227 Debugging is an essential part of PHP development, and using Visual Studio Code with XDebug can greatly enhance your workflow. This guide will walk you through setting up XDebug, enabling breakpoints, stepping through code, using stack traces, and troubleshooting common issues. 1. Installing XDebug Before you can debug PHP with VSCode, you need to ensure […]

The post Debugging PHP with VSCode and XDebug: A Step-by-Step Guide appeared first on phpGrid - PHP Datagrid.

]]> Debugging is an essential part of PHP development, and using Visual Studio Code with XDebug can greatly enhance your workflow. This guide will walk you through setting up XDebug, enabling breakpoints, stepping through code, using stack traces, and troubleshooting common issues.

1. Installing XDebug

Before you can debug PHP with VSCode, you need to ensure that XDebug is installed on your system.

Check if XDebug is Installed

From a phpinfo page, and check wether XDebug section and it is enabled.

XDebug in phpinfo

Install XDebug If It Is Missing

If XDebug is missing, you can install it using pecl:

pecl install xdebug

After installation, add this line to your php.ini file:

zend_extension=xdebug

Remembere to restart your web server or PHP service:

sudo systemctl restart apache2 # For Apache
sudo systemctl restart php-fpm # For PHP-FPM

Now we need to configure XDebug to connect to VSCode

2. Configuring XDebug for VSCode

Edit your php.ini file and add the following configuration:

[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=127.0.0.1
xdebug.client_port=9003
xdebug.log=/var/log/xdebug.log

Important:

Ensure your PHP service is restarted for any changes made in php.ini to take effect.

3. Setting Up VSCode for XDebug

1. Install the PHP Debug Extension

PHP Debug Extension for VSCode

2. Configure VSCode Debugger

  • Open your project in VSCode.
  • Go to the Run and Debug panel (Ctrl+Shift+D).
  • Click on create a launch.json file. It should create default configuration as the following with port 9003. It is absolutely critial to have the same port as what is in xdebug.client_port in php.ini in previous step.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
   "version": "0.2.0",
    "configurations": [        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9003
        }
    ]
}

3. Start the Debugger

  • Click the green Start Debugging button or press F5.
  • Ensure XDebug is running and listening on port 9003. It actually can be any port number as 9003 is default.

The debugger bar should now appear right below tabs in VSCode.

VSCode Debugger Bar

4. Debugging Features

Setting Breakpoints

  • Open any PHP file.
  • Click in the left margin next to a line number or press F9 to set a breakpoint.
  • Run the debugger (F5) and execute the PHP script in your browser.
  • The script execution will pause at the breakpoint.

Stepping Through Code

While debugging, you can control execution using:

  • Step Over (F10) – Move to the next line of code.
  • Step Into (F11) – Enter into function calls.
  • Step Out (Shift+F11) – Exit the current function.
  • Continue (F5) – Resume execution until the next breakpoint.

Using Stack Trace

  • The Call Stack panel in VSCode shows the sequence of function calls leading up to the breakpoint.
  • Helps trace errors in deeply nested functions.
  • Click on any function in the stack to inspect its execution.

PHP XDebug breakpoint

5. Troubleshooting Common Issues

Issue 1: Debugger Not Stopping at Breakpoints

  • Ensure XDebug is installed and configured correctly in phpinfo (See step 1)
  • Make sure the matching port (e.g. 9003) is set in both php.ini and launch.json.
  • Always restart Apache or PHP-FPM after making changes.

Issue 2: XDebug Not Connecting to VSCode

  • Verify the logs in =/var/log/xdebug.log for connection issues.
  • Ensure VSCode is listening for XDebug (F5 in debug mode).
  • Disable other applications using port 9003 (like another debugger).

Issue 3: Path Mapping Problems

  • Ensure pathMappings in launch.json correctly maps the server path to the local workspace
  • Add $_SERVER[‘DOCUMENT_ROOT’] in your script to verify paths.

Conclusion

VSCode and XDebug together make debugging PHP a seamless experience. By following this guide, you should be able to install and configure XDebug properly, and set breakpoints and step through code, and also troubleshoot common debugging issues.

Finally, if manually tinkering isn’t your thing, you can opt for a hassle-free solution like MAMP or XAMMP.

Happy debugging! 🚀

Richard

The post Debugging PHP with VSCode and XDebug: A Step-by-Step Guide appeared first on phpGrid - PHP Datagrid.

]]> 10227 phpGrid CodeIgniter 4 Integration https://phpgrid.com/example/phpgrid-codeigniter-4-integration/ Tue, 18 Apr 2023 04:18:52 +0000 https://phpgrid.com/?p=10098

Introduction Previously, we have covered phpGrid integration with CodeIgniter 3. CodeIgniter has since gone through some major iterations and many improvements. We will integrate phpGrid with CodeIgniter 4 and take advantages of its many new features and improvements. Why Upgrade to CodeIgniter 4 from 3? Created by EllisLab in 2006, now maintained by the British […]

The post phpGrid CodeIgniter 4 Integration appeared first on phpGrid - PHP Datagrid.

]]>

Introduction

Previously, we have covered phpGrid integration with CodeIgniter 3. CodeIgniter has since gone through some major iterations and many improvements. We will integrate phpGrid with CodeIgniter 4 and take advantages of its many new features and improvements.

Why Upgrade to CodeIgniter 4 from 3?

Created by EllisLab in 2006, now maintained by the British Columbia Institute of Technology, CodeIgniter is an open-source, lightweight PHP web application framework that follows the Model-View-Controller (MVC) architectural pattern. CI is known for its small footprint, high performance, and flexible features.

CodeIgniter 3 and CodeIgniter 4 have some key differences:

  • PHP version compatibility:
    • CodeIgniter 3 is compatible with PHP 5.2.4 or newer, while CodeIgniter 4 requires PHP 7.2 or newer.
  • Namespace support:
    • CodeIgniter 4 introduces support for namespaces, which makes it easier to organize and reuse code. CodeIgniter 3 does not have namespace support.
  • Modern MVC:
    • Both versions follow the MVC architectural pattern, but CodeIgniter 4 has a more modern implementation of the pattern with features like namespace support and PSR-4 autoloading.
  • Directory structure:
    • The directory structure of CodeIgniter 4 is different from CodeIgniter 3, with some new directories like app/Config and app/Views. The new directory structure provides a more organized and modular approach to application development.

Overall, while CodeIgniter 3 is still a solid framework for PHP web application development, CodeIgniter 4 offers several new features and improvements that make it a more modern and robust option for developers.

Install phpGrid

First, you need to download and install phpGrid on your server. You can download the latest version of phpGrid Lite. Extract the files into public folder.

codeigniter phpgrid folder structure

 

It is important to extract phpGrid into public folder, which is now recommended location for phpGrid.
X

phpGrid Configuration

Before using phpGrid, you need to specify database information in conf.php. conf.php is phpGrid configuration file in which we specify database connection parameters and path to the phpGrid. Please follow installation guide for configuration details.

Example 1: Insert phpGrid in CodeIgniter

For this tutorial, we add phpGrid in public\welcome_message.php, which is the default view in CodeIgniter 4. You can insert phpGrid in any other pages in public folder.

For free phpGrid Lite, namespace isn’t required

1
2
3
4
5
6
7
8
9
10
11
12
13
<section>

    <h1>phpGrid Demo</h1>

    <?php  
    require_once("../../phpGridx/conf.php");

    $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
    $dg->enable_autowidth(true);
    $dg -> display();  
    ?>

</section>

For commercial version, be sure to add namespace

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section>

    <h1>phpGrid Demo</h1>

    <?php  
    use phpCtrl\C_DataGrid;
    require_once("../../phpGridx/conf.php");

    $dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
    $dg->enable_autowidth(true);
    $dg -> display();  
    ?>

</section>

Example 2: Add phpGrid to Another Page

To add phpGrid to other pages, following CodeIgniter Route Rules in app/Config/Routes.php. For example:

Route

1
2
3
// file: app/Config/Routes.php
$routes->get('/', 'Home::index');
$routes->get('/grid', 'Home::grid');

Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// file: app/Controller/home.php
namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        return view('welcome_message');
    }

    public function grid()
    {
        return view('grid');
    }
}

View

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Anther Grid</title>
</head>
<body>


<h1>Another grid</h1>

<?php  
use phpCtrl\C_DataGrid;
require_once("../../phpGridx/conf.php");

$dg = new C_DataGrid("SELECT * FROM orders", "orderNumber", "orders");
$dg->enable_autowidth(true);
$dg->enable_edit();
$dg -> display();  
?>

</body>
</html>

The post phpGrid CodeIgniter 4 Integration appeared first on phpGrid - PHP Datagrid.

]]> 10098 Clone CoinMarketCap.com Cryptocurrency Price Table with WebSockets https://phpgrid.com/example/clone-coinmarketcap-com-cryptocurrency-price-table-with-websockets/ Wed, 26 Jan 2022 18:50:27 +0000 https://phpgrid.com/?p=9876

Coinmarketcap.com is without a doubt the most popular cryptocurrency price tracking website. I’ve often wondered if its elegant bitcoin prices table could be reproduced with phpGrid. That is exactly what we are about to do today! The table includes crypto pricing statistics as well as sparkline chart based on real-time data from the backend server. […]

The post Clone CoinMarketCap.com Cryptocurrency Price Table with WebSockets appeared first on phpGrid - PHP Datagrid.

]]>

Coinmarketcap.com is without a doubt the most popular cryptocurrency price tracking website. I’ve often wondered if its elegant bitcoin prices table could be reproduced with phpGrid. That is exactly what we are about to do today!

The table includes crypto pricing statistics as well as sparkline chart based on real-time data from the backend server. It’s a proof of concept to show how far phpGrid can be pushed before I have to resort to other tools and frameworks.

Setup

Acquire the full version of phpGrid. The free Lite version is not compatible with this tutorial.

Follow these steps to install:

  1. Extract download file,
  2. Upload the phpGrid folder to web server,
  3. Complete the installation by configuring conf.php file.

For demo purpose, conf.php, set all database values to blank since our project doesn’t require a database.

1
2
3
4
5
6
7
// set all to blank
define(‘PHPGRID_DB_HOSTNAME’, ‘’);
define(‘PHPGRID_DB_USERNAME’, ‘’);
define(‘PHPGRID_DB_PASSWORD’, ‘’);
define(‘PHPGRID_DB_NAME’, ‘’);
define(‘PHPGRID_DB_TYPE’, ‘’);
define(‘PHPGRID_DB_CHARSET’,’’);

Sample JSON

The first step is to obtain a crypto data feed. Though it may be automatically retrieved from places like Binance or FTX.US, I decided to start with a local JSON data source for simplicity’s sake.

JSON sample

We’ll use this top 10 crypto sample to populate our CoinMarketCap clone.

Index.php

Let’s create index.php with the following:

1
2
3
4
5
6
7
require_once("phpGrid/conf.php");

$url = "data/coinmarket_top10.json";
$data = file_get_contents($url);
$json_output = json_decode($data, true);
$dg = new C_DataGrid($json_output, "id", "CoinMarket");
$dg -> display();

$json_output is the sample JSON data source save in data folder. It is passed to C_DataGrid as the first parameter. It should display a very rudimentary grid similar to the following.

 

JSON as data source is covered in this tutorial.

I’ll confess, this is still a long way from what I’d like to accomplish. Let’s make some changes to the user interface.

Update User Interface

First by adding descriptive column title,

1
2
3
4
5
6
$dg->set_col_title(‘<strong>Percentage24H</strong>’, ‘24h %’);
$dg->set_col_title(‘<strong>Percentage7D</strong>’, ‘7d %’);
$dg->set_col_title(‘<strong>MarketCap</strong>’, ‘Market Cap’);
$dg->set_col_title(‘<strong>Volume24H</strong>’, ‘Volume(24h)’);
$dg->set_col_title(‘<strong>CirculatingSupply</strong>’, ‘Circulating Supply’);
$dg->set_col_title(‘<strong>Last7Days</strong>’, ‘Last 7 Days’);

Hide non-display columns,

1
2
$dg->set_col_hidden("Coin”);
$dg->set_col_hidden("MaxSupply”);

Fix text alignment,

1
2
3
4
5
6
$dg->set_col_align(‘Price’, ‘right’);
$dg->set_col_align(‘Percentage24H’, ‘right’);
$dg->set_col_align(‘Percentage7D’, ‘right’);
$dg->set_col_align(‘MarketCap’, ‘right’);
$dg->set_col_align(‘Volume24H’, ‘right’);
$dg->set_col_align(‘CirculatingSupply’, ‘right’);

Update money format

1
2
3
4
$dg->set_col_currency('Price', '$');
$dg->set_col_currency('MarketCap', '$');
$dg->set_col_currency('Volume24H', '$');
$dg->set_col_currency('CirculatingSupply', '');

Add row color and hover effect

1
$dg -> set_row_color(‘white’, ‘white’, ‘white’);

Fix column sort

1
2
3
4
$dg->set_col_property("Price”, array("sorttype”=>"currency"));
$dg->set_col_property("MarketCap”, array("sorttype”=>"currency"));
$dg->set_col_property("Volume24H”, array("sorttype”=>"currency"));
$dg->set_col_property("CirculatingSupply”, array("sorttype”=>"integer"));

Add responsive width to screen size

1
$dg-> enable_autowidth(true);

Finally some misc. style tweaks

1
2
3
$dg->set_caption(false);
$dg->set_col_property(‘Coin’, array(‘classes’=>‘coin’));
$dg->set_col_property(‘Name’, array(‘classes’=>‘name’));

Already look better! But it’s still not quite what I was looking for.

Adding Cascading Style Sheets (app.css)

I use a Chrome extension “What Font” to find out the font it used on CoinMarketCap. It is a free font from Google Fonts called “Inter”. Here are the embed links:

1
2
3
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&amp;display=swap" rel="stylesheet">

Then I made a few adjustments with some additional custom styles so I could “perfectly” match the look (almost)

It looked better but still with a few issues:

  1. Missing the coin icons and tick symbols
  2. The prices are static and do not updates automatically like CMC does.

Let’s fix those.

Icons and Tickers

CoinMarketCap has the format: Icon Name Ticker as illustrated below.

 

I found a free library of all the major crypto icons on http://cryptoicons.co/ and downloaded them to “images/icons” folder.

Next, we need to use phpGrid custom formatter.

phpGrid Custom formatter

This is section is the most crucial. It’s what really makes our cloned table “shine”. Custom formatter in phpGrid is a super powerful and versatile function for manipulating, modifying, or even adding additional information in a single column in grid. You can learn more about it on custom formatter online documentation.

I’m adding custom formatter to the followings:

  • Name (with icon & ticker)
  • Price
  • 24h change (%)
  • 7day change (%)
  • Volume with dollar amount
  • Circulating supply with % bar

PHP

1
2
3
4
5
$dg->set_col_property('Name', array('formatter'=>'###nameFormatter###')); // must have ###
$dg->set_col_property('Volume24H', array('formatter'=>'###volumeFormatter###')); // must have ###
$dg->set_col_property('CirculatingSupply', array('formatter'=>'###circulatingSupplyFormatter###')); // must have ###
$dg->set_col_property('Percentage24H', array('formatter'=>'###percentageChangeFormatter###')); // must have ###
$dg->set_col_property('Percentage7D', array('formatter'=>'###percentageChangeFormatter###')); // must have ###

Javascript (app.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function percentageChangeFormatter (cellValue, options, rowData) {
 if (cellValue==0) return 'N/A';

  return (cellValue.indexOf('-') >= 0) ? `<span style="color:red">${cellValue}</span&>`: `<span style="color:green">${cellValue}</span>`;
}

function volumeFormatter (cellValue, options, rowData){
  if (cellValue==0) return 'N/A';

  let volume24hTotalCoin = parseInt(rowData['Volume24H']/rowData['Price']);

  return `${rowData['Volume24H'].toLocaleString(undefined,{})} <span class="volume24hTotalCoin">${volume24hTotalCoin.toLocaleString(undefined,{})} ${rowData['Coin']}</span>`;
  }

function circulatingSupplyFormatter (cellValue, options, rowData){
  if (cellValue==0) return 'N/A';

  let volume24hTotalCoin = parseInt(rowData['Volume24H']/rowData['Price']);

  if (!!rowData['MaxSupply']) {
    const percentageOfMaxSupply = parseInt((cellValue/rowData['MaxSupply']) * 100);
    return `<span class="circulating-supply"${cellValue.toLocaleString(undefined ${rowData['Coin']}</span>` + `<div width="160" class="maxsupply-bar" title="Percentage: ${percentageOfMaxSupply}% of Max Supply of ${rowData['MaxSupply']}"><div style="width:${percentageOfMaxSupply}px" class="percentage-of-maxsupply"></div></div>`;
  }
  return `${cellValue.toLocaleString(undefined,{})}`;
}

It looks pretty good!

Real-Time Data via Binance WebSocket

Last but not least, the data must be updated in real-time, similar to CoinMarketCap or CoinGecko, without requiring the entire page to be refreshed. For this experiment, I want the price to tick in the same way as CMC does.

WebSocket is supported by all major web browsers, with the exception of Opera Mini, according to caniuse.com. I was concerned that it would be a huge undertaking. As a result, I pushed this to the bottom of my to-do list. Fortunately, this was not the case. Binance’s websocket trade stream API made it simple.

1
2
3
4
5
6
7
8
9
10
11
// real time data via Websocket
$(document).ready(function(){
  let coins = ['BTC', 'ETH', 'BNB', 'USDT', 'SOL', 'ADA', 'XRP', 'DOT', 'USDC', 'DOGE'];
  coins.forEach(function(coin){
    var wss = new WebSocket(`wss://stream.binance.com:9443/ws/${coin.toLowerCase()}usdt@trade`);
    wss.onmessage = function (event) {
      var messageObject = JSON.parse(event.data)
      $("#CoinMarket").jqGrid("setCell", coin, "Price" ,(messageObject.p));
    }
   })
})

From its API, there are tons of great data can be consumed. For our purpose, we will only need messageObject.p, which returns ‘Order Price’.

Bonus: Adding Sparkline Chart of “last 7 days”

On the coin market cap, todays’ cryptocurrency price table also features a lovely “mini” line chart for column “last 7 days”. The name for the type of chart is “sparkline”, and it is typically drawn without axes or coordinates. I wonder if it’s possible to include that.

It turns out jQuery already has a Sparkline plugin. It takes a simple array of numbers. For example:

1
"Last7Days”: "[64125.80, 64398.60, 64134.50, 64806.70, 64932.60, 66904.40, 67527.90]”

call to the sparkline() function to display the sparkline

1
$('.sparklines').sparkline('html', { enableTagOptions: true, fillColor:false, lineWidth:2, width:'100%', height:'50px' });

remember include Sparkline plugin before </body>

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js" type="text/javascript"></script>

The Final Outcome of CoinMarketCap.com Clone

 

 

Not too shabby!

Summary

Our little CMC cryptocurrency price chart looks darn good. Considering how little code it took. It uses custom formatter for most of the ‘fancy’ stuffs such as tickers and icons. WebSocket is definitely something very exciting to show live data stream.

Potential Enhancements

This is a fun experiment to really push the envelop with phpGrid beyond common use cases such as inventory management, CRM, timesheet applications.

Some potential useful enhancements:

  • Interactive cryptocurrency market cap chart
  • Pick and choose cryptocurrencies for display
  • Filters
  • Search
  • Database to store price history

The post Clone CoinMarketCap.com Cryptocurrency Price Table with WebSockets appeared first on phpGrid - PHP Datagrid.

]]> 9876