PHPとMySQLを使用し画像ファイルをアップロードし、データベースに保存する

スポンサーリンク

PHPとMySQLを使用し画像ファイルをアップロードし、データベースに保存してみます。また、データベースに保存した画像ファイルをWebページ上で表示させてみます。

■環境

・Windows10

・Visual Studio Code 1.53.2

・レンタルサーバー「ヘテムル」

・FTPクライアント「FileZilla」

■レンタルサーバーでMySQLデータベースを作成する

PHPとMySQLを使用し画像ファイルをアップロードし、データベースに保存を行ってみますが、その前にレンタルサーバーでMySQLデータベースを作成します。今回はレンタルサーバー「ヘテムル」を使用します。

「ヘテムル」のコントロールパネルのログイン（https://admin.heteml.jp/）画面で、「ヘテムルID」と「パスワード」を入力し、「ログイン」ボタンをクリックします。

クリックすると、コントロールパネルの右側にメニューがありますので、「各種設定」から「データベース」をクリックします。

クリックすると、「データベース」の管理パネルが表示されますので、「データベース作成画面へ」というボタンをクリックします。

クリックすると、「データベース作成画面」が表示されます。こちらの画面で「データベース名」と「接続パスワード」を入力します。入力後、「メモ」欄がありますので、データベースに関することのメモを入力する場合は行います。その後、「データベースを作成する」ボタンをクリックします。

クリックすると、「admin.heteml.jpの内容」というポップアップが表示されます。「データベースを作成します。よろしいですか？」というメッセージが書かれていますので、「OK」ボタンをクリックします。

クリックすると、「データベース[データベース名]の作成が完了しました」と表示されます。これでデータベースの作成は完了となります。完了後、「戻る」ボタンをクリックします。

クリックすると、「データベース」の管理パネルが表示されますので、作成したデータベースが表示されていますので、この表示されているところでサーバー名「mysql○○○.phy.heteml.lan」といった記載がありますので、こちらの情報をコピーして保存します。

■作成したデータベースにテーブルを作成する

保存後、画像ファイル名を保存するためには、作成したデータベースにテーブルを作成する必要があります。今回は、MySQLデータベースにいくつかの基本的なフィールドを持つ「images」というテーブルを作成してみます。

作成する場合は、「データベース」の管理パネルで作成したデータベース名が表示されている右側に「phpMyadmin」ボタンがありますので、こちらをクリックします。

クリックすると、「phpMyadmin」のログイン画面が表示されますので、ユーザー名とパスワードを入力し、「Server Choice（サーバー名）:」があっているかを確認し、「実行」ボタンをクリックします。

入力すると、「phpMyadmin」にログインできますので、データベース名をクリックし、「SQL」という項目をクリックします。クリックすると、「データベース ○○○○ 上でクエリを実行する:」と表示された入力画面が表示されます。

■コード

CREATE TABLE `images` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `file_name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `uploaded_on` datetime NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

この入力画面に上記のコードを入力します。今回は「images」という名前のテーブルを作成します。なお、テーブル内には、下記の内容（データ）が存在します。

■「id」

int(11):表示幅の指定

NOT NULL 制約（空の値（NULL）は入れない）

カラムに対して自動的に番号を生成するAUTO_INCREMENT

■「file_name」

UTF-8（3バイト文字）で255文字の格納が可能に指定、varchar(255)

照合順序を「utf8_unicode_ci」（COLLATE utf8_unicode_ci）

NOT NULL 制約（空の値（NULL）は入れない）

■「uploaded_on」

日付と時刻を格納するdatetime

NOT NULL 制約（空の値（NULL）は入れない）

■「status」

ENUM 型のカラム値は（1,0）

照合順序を「utf8_unicode_ci」（COLLATE utf8_unicode_ci）

NOT NULL 制約（空の値（NULL）は入れない）

DEFAULTでカラムのデフォルト値(‘1’)

PRIMARY KEY制約（’id’）

■その他

データベースエンジンを「InnoDB」にしてデフォルトの文字コードを「utf8」、照合順序を「utf8_unicode_ci」にして処理する（ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci）

入力後、「実行」ボタンをクリックします。

上記のような「images」という名前のテーブルが作成できます。

■MySQLデータベースに接続するためのファイルを作成する

作成後、Visual Studio Codeなどのコードエディタを開き、MySQLデータベースに接続するためのPHPファイルを作成します。

■コード

<?php
// データベースの構成
$dbHost     = "サーバー名";
$dbUsername = "ユーザー名";
$dbPassword = "パスワード";
$dbName     = "データベース名";

// データベース接続の構築
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// 接続の確認
if ($db->connect_error) {
    die("接続に失敗しました: " . $db->connect_error);
}
?>

新規ファイルにコードを記述した後に、今回は「dbConfig.php」という名前で保存します。

■アップロードするファイルを選択できるHTMLフォームを作成する

次に、アップロードするファイルを選択できるHTMLフォームを作成します。再び、Visual Studio Codeなどのコードエディタを開き、ファイルを作成します。

■コード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>画像をアップロード</title>
        <meta name="description" content="画像ファイルをアップロードします。">
    </head>
    <body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
    アップロードする画像ファイルを選択する:
    <input type="file" name="file">
    <input type="submit" name="submit" value="Upload">
</form>
    </body>
</html>

ファイルにコードを記述した後に、「index.php」というファイル名で保存します。

■サーバーにファイルをアップロードしてデータベースに保存する

次に、サーバーにファイルをアップロードしてデータベースに保存するために、ファイルを作成します。このファイルで、画像アップロード機能を処理し、ユーザーにステータスメッセージを表示します。

■コード

<?php
// データベース設定ファイルを含む
include 'dbConfig.php';
$statusMsg = '';

// ファイルのアップロード先
$targetDir = "uploads/";
$fileName = basename($_FILES["file"]["name"]);
$targetFilePath = $targetDir . $fileName;
$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);

if(isset($_POST["submit"]) && !empty($_FILES["file"]["name"])){
    // 特定のファイル形式の許可
    $allowTypes = array('jpg','png','jpeg','gif','pdf');
    if(in_array($fileType, $allowTypes)){
        // サーバーにファイルをアップロード
        if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)){
            // データベースに画像ファイル名を挿入
            $insert = $db->query("INSERT into images (file_name, uploaded_on) VALUES ('".$fileName."', NOW())");
            if($insert){
                $statusMsg = " ".$fileName. " が正常にアップロードされました";
            }else{
                $statusMsg = "ファイルのアップロードに失敗しました、もう一度お試しください";
            } 
        }else{
            $statusMsg = "申し訳ありませんが、ファイルのアップロードに失敗しました";
        }
    }else{
        $statusMsg = '申し訳ありませんが、アップロード可能なファイル（形式）は、JPG、JPEG、PNG、GIF、PDFのみです';
    }
}else{
    $statusMsg = 'アップロードするファイルを選択してください';
}

// ステータスメッセージを表示
echo $statusMsg;
?>

ファイルにコードを記述し、「upload.php」というファイル名で保存します。

■データベースから画像を表示する

次に、データベースに登録したファイル名を元にして、サーバーからアップロードされた画像を取得し、Webページに画像を表示します。

■コード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>画像をアップロード</title>
        <meta name="description" content="画像ファイルをアップロードします。">
    </head>
    <body>
    <form action="upload.php" method="post" enctype="multipart/form-data">
    アップロードする画像ファイルを選択する:
    <input type="file" name="file">
    <input type="submit" name="submit" value="Upload">
    </form>
    <div>
    <?php
    // データベース設定ファイルを含む
    include 'dbConfig.php';

    // データベースから画像を取得する
    $query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC");

    if($query->num_rows > 0){
        while($row = $query->fetch_assoc()){
            $imageURL = 'uploads/'.$row["file_name"];
    ?>
        <img src="<?php echo $imageURL; ?>" alt="" />
    <?php }
    }else{ ?>
        <p>画像が見つからず表示されません..
        </p>
    <?php } ?>
    </div>
    </body>
</html>

今回は先ほど作成した「index.php」のファイルを変更し、データベースに登録したファイル名を元にして、サーバーからアップロードされた画像を取得し表示させるスクリプトを追加します。

追加後、保存します。

■実行・検証

保存後、「dbConfig.php」、「index.php」、「upload.php」のファイルを、FTPクライアントを使用し、ヘテムルレンタルサーバーのサーバー上にアップロードし、スクリプト等の実行・検証を行います。

スクリプト等の実行・検証を行う前に、FTPクライアント（FileZilla）を使用し、サーバーにアクセスした際に、アップロードされた画像ファイルを保存するディレクトリを作成します。今回は「uploads」というディレクトリを作成します。

作成後、「dbConfig.php」、「index.php」、「upload.php」のファイルをアップロードします。

アップロード後、Webブラウザを起動させ、Webページにアクセスしてみます。アクセスすると、「アップロードする画像ファイルを選択する」と表示されており、「ファイルを選択」ボタンがありますので、クリックします。

クリックすると、「開く」というウインドウが表示されますので、今回は検証ですので「test.png」というあらかじめ作成しておいたpng形式のファイルを選択し、「開く」ボタンをクリックします。

クリックすると、選択した画像ファイルがページ上に表示されます。この状態で「Upload」ボタンをクリックします。

クリックすると、「test.png が正常にアップロードされました」と表示されます。これでサーバー上に画像ファイルがアップロードされました。

アップロード後、MySQLのデータベースを確認するため、phpMyAdminにログインすると、今回アップロードした画像ファイルが登録されていることが確認できました。

また先ほど作成した「uploads」というディレクトリに「test.png」の画像ファイルがアップロードされていることも確認できました。

確認後、index.phpにアクセスします。アクセスすると、データベースに登録したファイル名を元にして、サーバーにアップロードした画像ファイルを取得し、Webページ上に表示させることができました。

スポンサーリンク

コメント

タイトルとURLをコピーしました