Array display with bootstrap

Question

Vsa- I mean... Ephias here!

So I'm still very bad at making threads so, sorry in advance.

Before I get to the topic: I would love if some people tell me how I could find some PHP tasks because I always read and watch videos but if I try a Task I immediately know what to do but not really how.

B2T:

I want my Array to be shown on the website with bootstrap (3). It should look good. Here is my code:

  <?PHP

  $products = [
    [
      'title' => 'Orange',
      'desc' => 'Eine Orange ist sehr gesund!'
    ],
    [
      'title' => 'Computer',
      'desc' => 'Damit kann man Programmieren lernen!'
    ],
  ]

   ?>
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>

    <body>
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="start.php">Project name</a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="start.php">Home</a></li>
              <li><a href="about.php">About</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>

      <br />
      <br />
      <br />

      <div class="container">
        <ul> 
          <li>

        </ul>
        <pre><?php var_dump($products); ?></pre>
      </div>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
  </html>

Last time I asked someone explained it to me very kind. I would be really happy to see that happening again, that way I understand it the most.

Thanks!!

What is your question? You have <pre><?php var_dump($products); ?></pre> in your code - is this displaying correctly? Are you getting an error? What is happening currently and what are you trying to do? — crazyloonybin
– crazyloonybin, Commented Oct 8, 2020 at 15:40
Are trying to debug the code? or you want to print the data inside the array? if you want to print the data to use html elements like table. — Mohd Alomar
– Mohd Alomar, Commented Oct 8, 2020 at 23:43
I want to print the array in a table or something that would look good but with bootstrap sorry for the misunderstanding — Ephias
– Ephias, Commented Oct 9, 2020 at 6:56

lovelace · Accepted Answer · 2020-10-09 10:23:03Z

To build a table based off of dynamic data (e.g. an array that may change in size and content), you could use a function. This allows you to provide for different use-cases, just by editing your function.

The function takes 1 argument, the array with data you want to display.

I have taken a random Bootstrap4 table to show you how that could be implemented.

function `table()`

If you read through the function, the variables, you see how it's built. Basically, we construct the table HTML step by step, opening the table with $tableOpen, building the header row($header) using HEREDOC as it makes it easy to inject PHP variables inside a HTML template, then we build the table body($body), injecting the data for each row, again using a template, and finally, we close the table with $tableClose.

The function returns the Bootstrap table HTML as a string, so all you need to do with this result is echo the table inside your HTML page at the position you need it to be rendered.

function table(array $products = []): string
{
    $tableOpen = '<table class="table table-hover">';

    $headerOpen = '<thead><tr>';
    $headerContent = '';
    // get all headers and inject them into table
    foreach($products as $key => $product) {
        $headerContent .= <<<HEREDOC
      <th scope="col">{$product['title']}</th>
HEREDOC;
    }
    $headerClose = '</tr></thead>';

    $header = $headerOpen . $headerContent . $headerClose;

    $tableBodyOpen = '<tbody>';
    $tableBodyContent = '';
    // get product data and inject into table
    foreach($products as $key => $product) {
        $tableBodyContent .= <<<HEREDOC
        <tr>
          <th scope="row">$key</th>
          <td>{$product['desc']}</td>
        </tr>
HEREDOC;
    }
    $tableBodyClose = '</tbody>';

    $body = $tableBodyOpen . $tableBodyContent . $tableBodyClose;

    $tableClose = '</table>';

    // return the Bootstrap table
    return $tableOpen . $header . $body . $tableClose;
}

The complete 'script' for your use case

<?php
$products = [
        ['title' => 'Orange', 'desc' => 'Eine Orange ist sehr gesund!'],
        ['title' => 'Computer', 'desc' => 'Damit kann man Programmieren lernen!'],
];

function table(array $products = []): string
{
    $tableOpen = '<table class="table table-hover">';

    $headerOpen = '<thead><tr>';
    $headerContent = '';
    // get all headers and inject them into table
    foreach($products as $key => $product) {
        $headerContent .= <<<HEREDOC
      <th scope="col">{$product['title']}</th>
HEREDOC;
    }
    $headerClose = '</tr></thead>';

    $header = $headerOpen . $headerContent . $headerClose;

    $tableBodyOpen = '<tbody>';
    $tableBodyContent = '';
    // get product data and inject into table
    foreach($products as $key => $product) {
        $tableBodyContent .= <<<HEREDOC
        <tr>
          <th scope="row">$key</th>
          <td>{$product['desc']}</td>
        </tr>
HEREDOC;
    }
    $tableBodyClose = '</tbody>';

    $body = $tableBodyOpen . $tableBodyContent . $tableBodyClose;

    $tableClose = '</table>';

    // return the Bootstrap table
    return $tableOpen . $header . $body . $tableClose;
}



?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="start.php">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="start.php">Home</a></li>
                <li><a href="about.php">About</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<br/>
<br/>
<br/>

<!-- source: https://getbootstrap.com/docs/4.1/content/tables/ -->
<div class="container">
    <!-- inject table -->
    <?= table($products); ?>
    <!-- end inject table -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"></script>
</body>
</html>

Collectives™ on Stack Overflow

Array display with bootstrap

1 Answer 1

function `table()`

The complete 'script' for your use case

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

function table()

The complete 'script' for your use case

Comments

Your Answer

Sign up or log in

Post as a guest

Related

function `table()`