Tabellenanzeige verschönern (CMS)

Code & Blog Logo

Als letztes haben wir in der Aktion Eigenes CMS die Tabelle im Datenbankmanager ausgegeben. Diese Tabelle sah meines Erachtens überhaupt nicht gut aus. Das wird sich heute ändern.

Ein Problem bisher ist, dass wirklich der komplette Text einer Tabelle ausgegeben wird. Das wird natürlich bei Spalten, wo z.T. ganze Beiträge enthalten sind alles sehr unübersichtlich. Deswegen gibt’s nun eine Zeilenbegrenzung von 30 Zeichen. Das setzen wir in der /admin/includes/table-show.php um:

echo "<td>".substr(htmlentities($row[$column['Field']]),0,30)."</td>";

Da wir gleich noch mit CSS arbeiten, braucht unsere Tabelle noch eine class:

<table class="dbtable">

Und zu guter letzt bekommt jeder Datensatz + Spaltennamen eine Checkbox. Funktion kommt später. Hier ist nochmal der neue komplette Quelltext der table-show.php:

<h1>Tabelle <?PHP echo $_GET['table']; ?></h1>
<?PHP
  $columns = MySQL::getColumns($_GET['table']);
  if($columns){
?>
<table class="dbtable">
  <thead>
    <tr>
      <td><input type="checkbox"  /></td>
      <?PHP
        foreach($columns as $column){
          echo "<td>".htmlentities($column['Field'])."</td>";
        }
      ?>
    </tr>
  </thead>
  <tbody>
    <?PHP
      $res = mysql_query("SELECT * FROM ".mysql_real_escape_string($_GET['table'])." LIMIT 0,30");
      $pos = 0;
      while($row = mysql_fetch_assoc($res)){
        echo "<tr><td><input type="checkbox" name="entries[]" value="".$pos."" /></td>";
        foreach($columns as $column){
          echo "<td>".substr(htmlentities($row[$column['Field']]),0,30)."</td>";
        }
        echo "</tr>";
        $pos++;
      }
    ?>
  </tbody>
</table>
<?PHP
  }
  else{
    echo "<p>Tabelle wurde nicht gefunden</p>";
  }
?>

Kommen wir nun zum CSS. Hier setzten wir einen dunkeleren Header ein. Außerdem gibt es einen Hover-Effekt bei den Zeilen. Damit man nicht zu viel Scrollen muss, wird die Schrift kleiner gemacht. Das ganze wie wird im Style-Abschnitt der /admin/index.php eingefügt:

.dbtable{
  font-size:14px;
}
.dbtable thead{
  background-color:#333;
  color:#fff;
}
.dbtable tbody tr:hover{
  background-color:#ddd;
}

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project