如何用PHP及CodeIgniter制作含数据的Checker Div棋盘？

Hey there! Let's tackle this checkerboard problem you're working on—going from a basic black-white loop to a data-integrated one, especially in CodeIgniter. I'll break this down step by step so it's easy to adapt to your project.

Let's start by making your core checkerboard logic more flexible (instead of a rigid loop). This will make it easier to add data later. Here's a reusable PHP function that lets you customize dimensions and colors:

function generateBasicCheckerboard($rows = 8, $cols = 8, $colorLight = '#ffffff', $colorDark = '#000000') {
    $board = '<div class="checkerboard">';
    
    for ($row = 0; $row < $rows; $row++) {
        $board .= '<div class="board-row">';
        for ($col = 0; $col < $cols; $col++) {
            // Determine cell color using row + column parity
            $cellColor = (($row + $col) % 2 === 0) ? $colorLight : $colorDark;
            $board .= '<div class="board-cell" style="background-color: ' . $cellColor . ';"></div>';
        }
        $board .= '</div>';
    }
    
    $board .= '</div>';
    return $board;
}

Add this CSS to make the board look clean and structured:

.checkerboard {
    display: inline-block;
    border: 2px solid #222;
    margin: 1rem;
}
.board-row {
    display: flex;
}
.board-cell {
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border: 1px solid rgba(0,0,0,0.1);
}

This setup is way more scalable—you can tweak the size, colors, or even make it a 10x10 board without rewriting the entire loop.

Now let's inject data into each cell. First, you'll need a data source (could be a static array, or dynamic data from a database in CodeIgniter). Let's start with a sample 2D array that maps to the board's rows and columns:

// Sample data: matches 8x8 board structure
$boardData = [
    ['Rook', 'Knight', 'Bishop', 'Queen', 'King', 'Bishop', 'Knight', 'Rook'],
    ['Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn'],
    ['', '', '', '', '', '', '', ''],
    ['', '', '', '', '', '', '', ''],
    ['', '', '', '', '', '', '', ''],
    ['', '', '', '', '', '', '', ''],
    ['Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn', 'Pawn'],
    ['Rook', 'Knight', 'Bishop', 'Queen', 'King', 'Bishop', 'Knight', 'Rook'],
];

Modify the generator function to include this data:

function generateDataCheckerboard($rows = 8, $cols = 8, $colorLight = '#ffffff', $colorDark = '#000000', $cellData = []) {
    $board = '<div class="checkerboard">';
    
    for ($row = 0; $row < $rows; $row++) {
        $board .= '<div class="board-row">';
        for ($col = 0; $col < $cols; $col++) {
            $cellColor = (($row + $col) % 2 === 0) ? $colorLight : $colorDark;
            // Fetch data for the cell, default to empty if no data exists
            $content = isset($cellData[$row][$col]) ? htmlspecialchars($cellData[$row][$col]) : '';
            
            // Add centered content inside the cell
            $board .= '<div class="board-cell" style="background-color: ' . $cellColor . ';">
                <div class="cell-content">' . $content . '</div>
            </div>';
        }
        $board .= '</div>';
    }
    
    $board .= '</div>';
    return $board;
}

Update the CSS to style the cell content for readability:

.cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-weight: 500;
}
/* Adjust text color based on cell background */
.board-cell:nth-child(odd) .cell-content {
    color: #222;
}
.board-cell:nth-child(even) .cell-content {
    color: #fff;
}

Let's adapt this to CodeIgniter's MVC structure for dynamic, database-driven data.

3.1 Model (For Database Data) #

Create application/models/Board_model.php to fetch data from your database:

<?php
class Board_model extends CI_Model {
    public function getBoardData($rows = 8, $cols = 8) {
        // Example: Fetch data from a `board_cells` table
        $this->db->select('row_position, col_position, cell_value');
        $this->db->from('board_cells');
        $this->db->where('row_position <', $rows);
        $this->db->where('col_position <', $cols);
        $query = $this->db->get();
        
        // Format results into a 2D array matching the board structure
        $formattedData = [];
        foreach ($query->result() as $row) {
            $formattedData[$row->row_position][$row->col_position] = $row->cell_value;
        }
        
        return $formattedData;
    }
}
?>

3.2 Controller #

Create application/controllers/Checkerboard.php to handle the logic:

<?php
class Checkerboard extends CI_Controller {
    public function index() {
        // Load the model (skip if using static data)
        $this->load->model('Board_model');
        $boardData = $this->Board_model->getBoardData(8, 8);
        
        // Uncomment below for static data instead of DB
        /*
        $boardData = [
            ['Rook', 'Knight', 'Bishop', 'Queen', 'King', 'Bishop', 'Knight', 'Rook'],
            // ... rest of the rows
        ];
        */
        
        // Generate the checkerboard HTML
        $data['checkerboard'] = $this->generateDataCheckerboard(8, 8, '#f8f8f8', '#333', $boardData);
        
        // Load the view
        $this->load->view('checkerboard_view', $data);
    }
    
    // Reusable generator function inside the controller
    private function generateDataCheckerboard($rows = 8, $cols = 8, $colorLight = '#ffffff', $colorDark = '#000000', $cellData = []) {
        $board = '<div class="checkerboard">';
        
        for ($row = 0; $row < $rows; $row++) {
            $board .= '<div class="board-row">';
            for ($col = 0; $col < $cols; $col++) {
                $cellColor = (($row + $col) % 2 === 0) ? $colorLight : $colorDark;
                $content = isset($cellData[$row][$col]) ? htmlspecialchars($cellData[$row][$col]) : '';
                
                $board .= '<div class="board-cell" style="background-color: ' . $cellColor . ';">
                    <div class="cell-content">' . $content . '</div>
                </div>';
            }
            $board .= '</div>';
        }
        
        return $board;
    }
}
?>

3.3 View #

Create application/views/checkerboard_view.php to display the board:

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter Data Checkerboard</title>
    <style>
        .checkerboard {
            display: inline-block;
            border: 2px solid #222;
            margin: 2rem;
        }
        .board-row {
            display: flex;
        }
        .board-cell {
            width: 50px;
            height: 50px;
            box-sizing: border-box;
            border: 1px solid rgba(0,0,0,0.1);
        }
        .cell-content {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: 12px;
            font-weight: 500;
        }
        .board-cell:nth-child(odd) .cell-content {
            color: #222;
        }
        .board-cell:nth-child(even) .cell-content {
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>Data-Embedded Checkerboard</h1>
    <?php echo $checkerboard; ?>
</body>
</html>

• Responsive Design: Swap fixed width/height for aspect-ratio: 1/1 and percentage widths to make the board adapt to mobile screens.
• Interactivity: Add JavaScript to let users click cells to edit data or show details.
• Caching: If your board data doesn't change often, use CodeIgniter's caching library to store the generated HTML and boost performance.
• Dynamic Color Picker: Add a form to let users select light/dark colors, then pass those values to the generator function.

内容的提问来源于stack exchange，提问作者Ferdy Tan