Member Avatar for jsa005

Hello!
On my website I'm looking to create a dynamic HTML table from the contents of a MySQL database.
I have no idea how many rows there will be, and I need it to look a bit like an iPhone home screen.
Here is some code:
v1:

// Make a MySQL Connection
mysql_connect("localhost", "jsathost_nintube", "********") or die(mysql_error());
mysql_select_db("jsathost_nintube") or die(mysql_error());
// Connect me to "videos", please!
$query = "SELECT * FROM videos";

$result = mysql_query($query) or die(mysql_error());


echo "<TR>";
while($row = mysql_fetch_array($result)){
echo "<TD><A href='watch.php?id=".$row['idn']."' title='".$row['name']."'><IMG src='http://www.nintube.jsathost.co.cc/genthumb.php?pic=".$row['furl']."' alt='".$row['name']."'><!--<BR />".$row['name']."--></A></TD>";
}
echo "</TR>";
// echo "<LI><A href='watch.php?id=".$row['idn']."' title='".$row['name']."'>".$row['name']."</A></LI><BR />";

Screenshot

v2:

// Make a MySQL Connection
mysql_connect("localhost", "jsathost_nintube", "********") or die(mysql_error());
mysql_select_db("jsathost_nintube") or die(mysql_error());
// Connect me to "videos", please!
$query = "SELECT * FROM videos";
$result = mysql_query($query) or die(mysql_error());

if (($result)||(mysql_errno == 0)) 
{ 
  echo '<TABLE border="0" cellspacing="5" width="200">'; 
  if (mysql_num_rows($result)>0) 
  {  
    //display the data 
    while ($rows = mysql_fetch_array($result,MYSQL_ASSOC)) 
    { 
       echo "<TR>";
       //loop thru the serials to create three columns
       $i = 0;
       while ($i < 1)
       {
        echo "<TD><A href='watch.php?id=".$rows['idn']."' title='".$rows['name']."'><IMG src='http://www.nintube.jsathost.co.cc/genthumb.php?pic=".$rows['furl']."' alt='".$rows['name']."'><!--<BR />".$rows['name']."--></A></TD>"; 
        $i++;
       }
       echo "</TR>";
    } 
  }else{ 
    echo "<tr><td colspan='" . ($i+1) . "'>Error: No videos found!</td></tr>"; 
  } 
  echo "</table>"; 
}else{ 
  echo "Error in running MySQL query: ". mysql_error(); 
}

Could anyone possibly help me with this?

daniweb-help-v1.PNG 71.08 KB daniweb-help-v2.PNG 52.54 KB
Edited by mike_2000_17 because: Fixed formatting
  • 2 Contributors
  • 3 Replies
  • 1K Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Recommended approach: avoid tables and the old mysql_* calls. Render semantic markup (a simple <ul> of icons) and let CSS handle wrapping so the number of columns is automatic for any width (DSi 240px included). @diafol was right to suggest non-table layout — modern CSS Grid or Flexbox is simpler and more robust. Also use PDO or mysqli with prepared statements and always escape output.

Example PHP (server side fetch + safe output):

$pdo = new PDO('mysql:host=localhost;dbname=your_db;charset=utf8mb4', 'user', 'pass', [
  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
]);

$stmt = $pdo->query('SELECT idn,name,furl_thumb FROM videos');
echo "<ul class=\"icons\">\n";
while ($r = $stmt->fetch(PDO::FETCH_ASSOC)) {
  $id = htmlspecialchars($r['idn'], ENT_QUOTES, 'UTF-8');
  $name = htmlspecialchars($r['name'], ENT_QUOTES, 'UTF-8');
  $thumb = htmlspecialchars($r['furl_thumb'], ENT_QUOTES, 'UTF-8'); // use your thumbnail path
  echo "<li><a href=\"watch.php?id=$id\" title=\"$name\"><img src=\"$thumb\" alt=\"$name\"><span>$name</span></a></li>\n";
}
echo "</ul>\n";

Minimal CSS (icons wrap automatically and fit 240px):

.icons { display:flex; flex-wrap:wrap; gap:8px; max-width:240px; padding:0; list-style:none; margin:0; }
.icons li { width:56px; text-align:center; }
.icons img { width:56px; height:56px; object-fit:cover; display:block; }

Quick tips: pre-generate thumbnails, set width/height to avoid layout shifts, paginate or lazy-load large result sets, index the videos table for fast queries, and always validate user input. This gives an iPhone-like grid that adapts to any screen width without hardcoding column counts.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

WHen you say , like the iPhone homescreen, what do you mean?
How many columns do you need?
It may be safer to use soething like floated list items or even spans as opposed to tables. You could use media queries to sort out presentation for different width screens. ALthough this can be a pain, if you start with 'code (css) for mobile' and build up, it shouldn't load every css rule for smallest screens, typically mobiles with slow connections.

Could you post more info about exactly what you need?

Member Avatar for jsa005

I have a mockup:
[IMG][/IMG]
I do not know how many columns I need, it's dynamic.
Website:
It should fit on the DSi screen (240px wide).

Member Avatar for Member #120589

Well, the image wasn't much help. The number of columns should be determined by width of each image and the width of the screen. However, as I mentioned, you can use something like floated list items that wrap around to the next row dynamically. Tables ensure a set number of columns. Or you could create divs (a bit extreme, but here's an example):

<div class="thumb">
   <img src="images/pic.png" alt="" width="50" height="50" /><span>AppTitle</span> 
</div>

css:

.thumb{
   float: left;
   width: 50px;
   margin: 0 15px 15px 0;
}
.thumb span{
   display: block;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.