PHPで音楽リストを実装する方法

藏色散人
リリース: 2023-03-13 15:52:01
オリジナル
1743 人が閲覧しました

php で音楽リストを実装する方法: 1. ファイルから内容を読み取り、デコードします; 2. リスト内のデータを表示し、foreach を使用してリスト内のデータを 1 つずつ表示します。

PHPで音楽リストを実装する方法

この記事の動作環境: Windows7 システム、PHP7.1 バージョン、DELL G3 コンピューター

How dos phpimplement a音楽リスト?

PHP は音楽リストのアップロード、表示、削除を実装します:

##アイデア list.php リスト表示
1. ファイルからコンテンツを読み取り、デコードします

$json = file_get_contents('data.json');$songs = json_decode($json, true);
ログイン後にコピー
2. データをリストに表示し、foreach を使用してデータはリストに 1 つずつ表示されます

<?php foreach ($songs as $item): ?>
        <tr>
          <td class="align-middle"><?php echo $item[&#39;title&#39;]; ?></td>
        </tr><?php endforeach ?>
ログイン後にコピー
add.php

1. 処理のためにフォームを独自の Web ページに送信します
2. 各入力ボックスに名前値を指定します
3 . PHP 処理 この時点で、$_POST['title']
を通じてデータを処理できます 4. 処理後、データをファイル/データベースに保存します

<form action="<?php echo $_SERVER[&#39;PHP_SELF&#39;]; ?>" method="post" enctype="multipart/form-data"><label for="title">标题</label>
        <input type="text" class="form-control " id="title" name="title"> <button class="btn btn-primary btn-block">保存</button></form>
ログイン後にコピー
// 读取已有数据
  $songs = json_decode(file_get_contents('data.json'), true);
  // 追加新数据
  $songs[] = $new_song;
  // 将追加的结果写入文件
  file_put_contents('data.json', json_encode($songs));
ログイン後にコピー
del.php

1削除する必要がある場合は、削除する人を指定し、削除する ID を取得する必要があります。
ここでは、ファイル/ファイルから $item['id'] 値を読み取ることで、削除する ID を決定できます。データベースの先頭にあります。ボタンやラベルも削除しますか?バックグラウンドに送信できる値は以下の通りです

 <a class="btn btn-outline-danger btn-sm" href="del.php?id=<?php echo $item[&#39;id&#39;]; ?>">删除</a>
ログイン後にコピー
2. データベース/ファイルからデータを読み込みます

3. データ内の削除対象となる対応するキーをIDから見つけて、削除後にデータをファイルに戻す /Database

Source code del.php

<?php// 只要有人请求我 del.php 我就执行删除操作// 如果需要我执行删除就必须提供你想要删除的是谁// 一般情况下如果客户端需要给服务端提供简单的数据标识,// 这种情况都会采用URL 地址传递问号参数的方式传递// 校验(客户端来的东西都不能信)if (empty($_GET['id'])) {
  exit('你必须提供要删除的数据ID'); // exit 会直接结束脚本的运行}// 确保客户端提交了 ID$id = $_GET['id'];// 1. 读取已有数据$json = file_get_contents('data.json');// 2. 反序列化$songs = json_decode($json, true);// 3. 遍历数组找到要删除的元素foreach ($songs as $item) {
  if ($item['id'] === $id) {
    // 找到了要删除的数据
    // 4. 在数组中删除这个元素
    // 4.1. 找到这个数据在数组的下标
    $index = array_search($item, $songs);
    array_splice($songs, $index, 1);
    // 5. 将删除过后的数组序列化成 JSON 字符串
    $new_json = json_encode($songs);
    // 6. 持久化
    file_put_contents('data.json', $new_json);
    break;
  }}// 跳转回去header('Location: /songs/list.php');
ログイン後にコピー
add.php

<?php

function receive_form () {
  // global $error_type;
  // 1. 校验客户端提交的数据
  // 1.1. 校验标题
  // empty($_POST[&#39;title&#39;]) === !(isset($_POST[&#39;title&#39;]) && $_POST[&#39;title&#39;] !== &#39;&#39;)
  // empty函数的作用就是判断一个成员是否为空(未定义、值为false)
  if (empty($_POST[&#39;title&#39;])) {
    // 标题未正常填写
    $GLOBALS[&#39;error_type&#39;] = &#39;title&#39;;
    $GLOBALS[&#39;error_msg&#39;] = "填写标题";
    return;
  }

  if (empty($_POST[&#39;artist&#39;])) {
    // 歌手未正常填写
    $GLOBALS[&#39;error_type&#39;] = &#39;artist&#39;;
    $GLOBALS[&#39;error_msg&#39;] = "填写歌手";
    return;
  }

  // ===================================================

  // echo "校验文件";
  // 校验上传文件
  //  1. 校验是否上传成功(error)
  if ($_FILES[&#39;source&#39;][&#39;error&#39;] !== UPLOAD_ERR_OK) {
    $GLOBALS[&#39;error_type&#39;] = &#39;source&#39;;
    $GLOBALS[&#39;error_msg&#39;] = "上传失败";
    return;
  }

  //  2. 校验上传文件的类型(type)
  $allowed_source_types = array(&#39;audio/mp3&#39;, &#39;audio/wma&#39;);
  if (!in_array($_FILES[&#39;source&#39;][&#39;type&#39;], $allowed_source_types)) {
    $GLOBALS[&#39;error_type&#39;] = &#39;source&#39;;
    $GLOBALS[&#39;error_msg&#39;] = "只能上传音频文件";
    return;
  }

  //  3. 校验文件大小(size)文件的大小单位是字节
  if (1 * 1024 * 1024 > $_FILES[&#39;source&#39;][&#39;size&#39;] || $_FILES[&#39;source&#39;][&#39;size&#39;] > 10 * 1024 * 1024) {
    $GLOBALS[&#39;error_type&#39;] = &#39;source&#39;;
    $GLOBALS[&#39;error_msg&#39;] = "上传文件大小不合理";
    return;
  }

  //  将文件从临时目录中移动到网站下面
  $tmp_path = $_FILES[&#39;source&#39;][&#39;tmp_name&#39;]; // 临时路径
  $dest_path = &#39;../uploads/mp3/&#39; . $_FILES[&#39;source&#39;][&#39;name&#39;]; // 存放路径
  $source = substr($dest_path, 2);
  $moved = move_uploaded_file($tmp_path, $dest_path); // 返回移动是否成功

  if (!$moved) {
    $GLOBALS[&#39;error_type&#39;] = &#39;source&#39;;
    $GLOBALS[&#39;error_msg&#39;] = "上传失败";
    return;
  }

  // ============= 处理多个文件逻辑 ====================

  // 如果一个文件域是多文件上传的话,文件域的 name 应该是由 [] 结尾
  for ($i = 0; $i < count($_FILES[&#39;images&#39;][&#39;error&#39;]); $i++) {
    // 1. 校验上传成功
    if ($_FILES[&#39;images&#39;][&#39;error&#39;][$i] !== UPLOAD_ERR_OK) {
      $GLOBALS[&#39;error_type&#39;] = &#39;images&#39;;
      $GLOBALS[&#39;error_msg&#39;] = "上传图片失败";
      return;
    }
    // 2. 校验文件类型
    $allowed_images_types = array(&#39;image/jpeg&#39;, &#39;image/png&#39;, &#39;image/gif&#39;);
    if (!in_array($_FILES[&#39;images&#39;][&#39;type&#39;][$i], $allowed_images_types)) {
      $GLOBALS[&#39;error_type&#39;] = &#39;images&#39;;
      $GLOBALS[&#39;error_msg&#39;] = "只能上传图片文件";
      return;
    }
    // 3. 校验大小
    if ($_FILES[&#39;images&#39;][&#39;size&#39;][$i] > 1 * 1024 * 1024) {
      $GLOBALS[&#39;error_type&#39;] = &#39;images&#39;;
      $GLOBALS[&#39;error_msg&#39;] = "上传文件大小不合理";
      return;
    }
    // 移动文件
    $img_tmp_path = $_FILES[&#39;images&#39;][&#39;tmp_name&#39;][$i]; // 临时路径
    $img_dest_path = &#39;../uploads/img/&#39; . $_FILES[&#39;images&#39;][&#39;name&#39;][$i]; // 存放路径
    $img_moved = move_uploaded_file($img_tmp_path, $img_dest_path); // 返回移动是否成功
    if (!$img_moved) {
      $GLOBALS[&#39;error_type&#39;] = &#39;images&#39;;
      $GLOBALS[&#39;error_msg&#39;] = "上传图片失败";
      return;
    }

    $images[] = substr($img_dest_path, 2);
  }

  // 2. 保存数据
  $new_song = array(
    &#39;id&#39; => uniqid(), // uniqid 获取一个唯一ID
    &#39;title&#39; => $_POST[&#39;title&#39;],
    &#39;artist&#39; => $_POST[&#39;artist&#39;],
    &#39;images&#39; => $images,
    &#39;source&#39; => $source
  );
  // 读取已有数据
  $songs = json_decode(file_get_contents(&#39;data.json&#39;), true);
  // 追加新数据
  $songs[] = $new_song;
  // 将追加的结果写入文件
  file_put_contents(&#39;data.json&#39;, json_encode($songs));

  // 3. 响应
  header(&#39;Location: /songs/list.php&#39;);
}

if ($_SERVER[&#39;REQUEST_METHOD&#39;] === &#39;POST&#39;) {
  // 处理接收校验表单
  receive_form();
}

?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>添加新音乐</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container py-5">
    <h1>添加新音乐</h1>
    <hr>
    <form action="<?php echo $_SERVER[&#39;PHP_SELF&#39;]; ?>" method="post" enctype="multipart/form-data">
      <div>
        <label for="title">标题</label>
        <input type="text" class="form-control <?php echo isset($error_type) && $error_type === &#39;title&#39; ? &#39;is-invalid&#39; : &#39;&#39;; ?>" id="title" name="title" value="<?php echo isset($_POST[&#39;title&#39;]) ? $_POST[&#39;title&#39;] : &#39;&#39;; ?>">
        <small><?php echo $error_msg; ?></small>
      </div>
      <div>
        <label for="artist">歌手</label>
        <input type="text" class="form-control <?php echo isset($error_type) && $error_type === &#39;artist&#39; ? &#39;is-invalid&#39; : &#39;&#39;; ?>" id="artist" name="artist" value="<?php echo isset($_POST[&#39;artist&#39;]) ? $_POST[&#39;artist&#39;] : &#39;&#39;; ?>">
        <small><?php echo $error_msg; ?></small>
      </div>
      <div>
        <label for="images">海报</label>
        <!-- multiple 可以让文件域多选 -->
        <!-- accept 可以指定文件域能够选择的默认文件类型 MIME Type -->
        <!-- image/* 代表所有类型图片 -->
        <!-- 除了使用 MIME 类型 还可以使用文件后缀名限制:.png,.jpg -->
        <input type="file" id="images" name="images[]" multiple accept="image/*">
      </div>
      <div>
        <label for="source">音乐</label>
        <input type="file" class="form-control <?php echo isset($error_type) && $error_type === &#39;source&#39; ? &#39;is-invalid&#39; : &#39;&#39;; ?>" id="source" name="source" accept="audio/*">
        <small><?php echo $error_msg; ?></small>
      </div>
      <button class="btn btn-primary btn-block">保存</button>
    </form>
  </div>
</body>
</html>
ログイン後にコピー

list.php

<?php

// 1. 读取文件内容
$json = file_get_contents(&#39;data.json&#39;);
// 2. 反序列化
// json_decode 第二个参数可以用来指定返回数据都采用 关联数组的方式 描述对象
$songs = json_decode($json, true);
// 3. 遍历数据渲染HTML
// var_dump($songs);

?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>音乐列表</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container py-5">
    <h1>音乐列表</h1>
    <hr>
    <div class="px-2 mb-3">
      <a href="add.php" class="btn btn-secondary btn-sm">添加</a>
    </div>
    <table class="table table-bordered table-striped table-hover">
      <thead>
        <tr>
          <th><input type="checkbox" name="" id=""></th>
          <th>标题</th>
          <th>歌手</th>
          <th>海报</th>
          <th>音乐</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($songs as $item): ?>
        <tr>
          <td><input type="checkbox" name="" id=""></td>
          <td><?php echo $item[&#39;title&#39;]; ?></td>
          <td><?php echo $item[&#39;artist&#39;]; ?></td>
          <td>
            <?php foreach ($item[&#39;images&#39;] as $img): ?>
            <img src="<?php echo $img; ?>" alt="">
            <?php endforeach ?>
          </td>
          <td><audio src="<?php echo $item[&#39;source&#39;]; ?>" controls></audio></td>
          <td>
            <a class="btn btn-outline-danger btn-sm" href="del.php?id=<?php echo $item[&#39;id&#39;]; ?>">删除</a>
            <!-- hidden 隐藏域 -->
            <!-- <form action="del.php" method="get">
              <input type="hidden" name="id" value="<?php echo $item[&#39;id&#39;]; ?>">
              <button class="btn btn-danger btn-sm">删除</button>
            </form> -->
          </td>
        </tr>
        <?php endforeach ?>
      </tbody>
    </table>
  </div>
</body>
</html>
ログイン後にコピー

推奨学習: 「

PHP ビデオ チュートリアル

以上がPHPで音楽リストを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
php
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート