BLOG

＃2【脱初心者】PHP、MySQLインスタ風アプリを作る【画像登録機能を作る】Xampp

2022-06-17

どうもロックシステムのユキです。PHPとMySQLを学びながらインスタ風アプリを作っています！
第一回目はアプリで使用するデータベースを作成しましたね。データベースって何？って方は是非第1回目の動画で解説しているので見ていただけると嬉しいです。
第1回目はこちら！

2回目の今回のテーマは前回作ったデータベースとPHPを接続してアプリに画像登録機能を作ります！
動画内で使用した画像はお好きなものに変更していただいて大丈夫です。
今回はデータベースだけでなくPHPの基礎内容も含んでいるので少し手ごたえがありますね、私も初心者の時に理解が難しかった部分です。
動画内では
・PHPとデータベースの接続方法
・スーパーユーザーアカウント
・スーパーグローバル変数
・INSERT文
等紹介しています！興味を追った方はさらに深く調べて脱プログラミング初心者を目指しましょう！
それでは是非ご覧ください、そしてチャンネル登録コメントもいただけると嬉しいです！

動画内で使用したサイトやコード

さくさくアプリ制作ができるようにアプリの見た目だけ作ったファイルを用意しました。
このファイルをカスタマイズしながら作っていくので真似して作る人はダウンロードしておいてください！(1回目でダウンロードしていただいた方はそのままお使いください！)
・使用したコード
動画で紹介したコードはこちらです！自分で書いてみてエラーが出たときは見比べてみてください！
dbConfig.php
<?php
// DB接続ファイル
    $dbName = 'mysql:host=localhost;dbname=imagePosting;charset=utf8';
    $userName = 'root';

    try {
        $db = new PDO($dbName, $userName);
    } catch (\Throwable $th) {
        exit();
    }
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>画像投稿アプリ</title>
</head>
<body>
  <?php include('../dbConfig.php') ?>
  <?php include('./header.php') ?>
  <div class="imageList">
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
    <a href="./imageDetail.php"><img src="../気球.jpeg" alt="投稿画像"></a>
</div>
</body>
</html>
postImage.php
<?php

include('./dbConfig.php');

$targetDirectory = 'images/';
$fileName = basename($_FILES["file"]["name"]);
$targetFilePath = $targetDirectory . $fileName;
$fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);

if ($_SERVER['REQUEST_METHOD'] == 'POST' && !empty($fileName)) {
    $arrImageTypes = array('jpg', 'png', 'jpeg', 'gif', 'pdf');
    if (in_array($fileType, $arrImageTypes)) {
        $postImageForServer = move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath);

        if ($postImageForServer) {
            $insert = $db->query("INSERT INTO images (file_name) VALUES ('" . $fileName . "')");
        }
    }
}

header('Location: ' . './html/index.php', true, 303);
exit();
postImageForm.php
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>画像投稿アプリ</title>
</head>
<body>
  <?php include('./header.php') ?>
  <div class="submitImage">
      <form action="../postImage.php" method="post" enctype="multipart/form-data">
      <img id="preview">
      <input type="file" name="file" onchange="previewFile(this);">
      <button type="submit" name="submit">送信</button>
    </form>
    <button onclick="location.href='./index.php';" class="backButton">戻る</button>
  </div>
</body>
</html>

<script>
  function previewFile(event){
    var fileData = new FileReader();
    fileData.onload = (function() {
      document.getElementById('preview').src = fileData.result;
    });
    fileData.readAsDataURL(event.files[0]);
  }
  </script>

株式会社ロックシステム

「ブラック企業をやっつけろ！！」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中！絶賛エンジニア募集中。

他の記事へ

CATEGORY