从mysql表数据中添加html列表条目的简单方法

时间:2013-02-04 06:25:19

标签: php mysql html5-video

我刚买了一个很棒的小HTML5视频播放器,但添加文件的方法是编辑页面的实际html。

这很糟糕,所以我想要做的是在页面加载时使用包含适当数据的MySQL表来填充UL。

此页面的列表如下所示:

              <ul id='playlist1' data-address="playlist1">
                 <li data-address="local1" class='playlistItem' data-type='local' data-mp4Path='data/media/video/big_buck_bunny_trailer.mp4' data-ogvPath='data/media/video/big_buck_bunny_trailer.ogv' data-imagePath='data/media/video/big_buck_bunny_trailer.jpg' data-thumbPath='data/media/thumb/big_buck_bunny_trailer.jpg' data-aspectRatio='2'></li>
                 <li data-address="local2" class='playlistItem' data-type='local' data-mp4Path='data/media/video/big_buck_bunny_trailer.mp4' data-ogvPath='data/media/video/big_buck_bunny_trailer.ogv' data-imagePath='data/media/video/big_buck_bunny_trailer.jpg' data-thumbPath='data/media/thumb/big_buck_bunny_trailer.jpg' data-aspectRatio='2'></li>
                 <li data-address="local3" class='playlistItem' data-type='local' data-mp4Path='data/media/video/big_buck_bunny_trailer.mp4' data-ogvPath='data/media/video/big_buck_bunny_trailer.ogv' data-imagePath='data/media/video/big_buck_bunny_trailer.jpg' data-thumbPath='data/media/thumb/big_buck_bunny_trailer.jpg' data-aspectRatio='2'></li>
              </ul>

非常基本的清单。所以这可能是一件基本的事情,我似乎无法找到合适的答案。

我想'GET'我在数据库表中的值,这些是这样的(这些是collumn标题,数据将在下面的行中):

 id | data-address | data-imagePath | data-thumbPath | data-mp4Path | data-ogvPath | data-webmPath | title | desc | ord

我对php和javascript的了解越来越多,但调用MySQL表是我想要掌握的。

我在下面尝试的是在头文件脚本中声明以下变量: (取自http://www.php.net/manual/en/function.mysql-fetch-object.php

 $data-mp4Path = mysql_query("select * from mytable");
 while ($row = mysql_fetch_object($data-mp4Path)) {
   echo $row->data-mp4Path;
 }
 mysql_free_result($data-mp4Path);

然后在相应的列表字段中调用php,如下所示:

 data-mp4Path='<? $data-mp4Path ?>'

然而,输出不解析表格单元数据,就像我认为脚本应该存储到$ data-mp4Path变量中一样......

非常感谢任何帮助!

_更新_

在@peterm的帮助下,我试图使用随相应数据库字段提供的代码和相应的调用。

这就是浏览器输出的结果:

 <ul id="playlist1" data-address="playlist1">
                <!--?php
                $db = new PDO('mysql:host=localhost;dbname=wordpress;charset=UTF-8', 'root', 'root');
                $sql = "SELECT * FROM `wp_localTestinglbg_vp2_html5_rightside_videoplaylist`";
                foreach ($db--->query($sql) as $row) {
                    $li  = '<li data-address="local' .$row['id']. '" ';="" $li="" .=" class=&quot;playlistItem&quot; data-type=&quot;local&quot;" ;="" .$row['mp4'].="" '"';="" .$row['ogv'].="" .$row['data-imagepath'].="" .$row['data-thumbpath'].="" echo="" $li;="" }="" $db="null;" ?="">
                </li></ul>

这个作为循环并将新LI项输出到播放列表的梦想会很棒,但它还没有用。

__更新__

清理代码后,UL标签之间的输出现在为空白。输出如下所示:

 <ul id="playlist1">
                </ul>

我删除了代码中的'data-address = playlist1'。

1 个答案:

答案 0 :(得分:1)

使用PDO代替<li>生成mysql_*的代码可能如下所示

... your preceding html
<ul>
<?php
$db = new PDO('mysql:host=localhost;dbname=yourdb;charset=UTF-8', 'user', 'password');
$sql = "SELECT * FROM `mytable`";
foreach ($db->query($sql) as $row) {
    $li  = '<li data-address="' .$row['data-address']. '"';
    $li .= ' class="playlistItem" data-type="local"';
    $li .= ' data-mp4Path="' .$row['data-mp4Path']. '"';
    $li .= ' data-ogvPath="' .$row['data-ogvPath']. '"';
    $li .= ' data-imagePath="' .$row['data-imagePath']. '"';
    $li .= ' data-thumbPath="' .$row['data-thumbPath']. '"';
    $li .= ' data-aspectRatio="2"></li>';
    echo $li;
}
$db = null;
?>
</ul>
... your html continues here