• HOME
  • ブログ
  • YOUTUBE動画
  • ＃3【脱初心者】PHP、MySQLインスタ風アプリを作る【一覧画面と詳細画面に登録した画像を反映】Xampp

BLOG

＃3【脱初心者】PHP、MySQLインスタ風アプリを作る【一覧画面と詳細画面に登録した画像を反映】Xampp

2022-07-01
ロックシステムのコジです！もうすぐ登録者も1000人に届きそうなロックシステムのYoutube！
是非チャンネル登録をしてから見てもらえると嬉しいです！
ロックシステムアカデミー！ゆっくりプログラミング学習
大阪福島にあるプログラミングスクール「ロックシステムアカデミー」です！「プログラミング作って実践」をテーマに楽しく分かりやすいアプリ開発のレクチャー動画をアップしていきます！ チャンネル登録よろしくお願いします！ プログラミングスクール ▼「ロックシステムアカデミー」WEBサイト https://rocksystem.co.jp/academy/
https://www.youtube.com/channel/UC6JxNQ2QTX8Dl96V2MMNP8A

今回のシリーズはPHPとMySQLを使用したインスタ風画像投稿アプリの開発にチャレンジしています。
まずはこちらを見てからアプリ作りにチャレンジすると理解が深まります！是非今回の動画と合わせてご覧ください！
・はじめに
PHPを勉強する時、最初に見る動画【PHP/XAMPP/環境構築方法】
・第一回
アプリのデータベースを作ろう編
・第二回
データベースとPHPを連携して画像を登録編

第二回目の動画ではアプリから投稿した画像がデータベースに保存されるとこまで完成しました。
しかしアプリの一覧画面を見てみるとデフォルトの気球の画像のまま！


このままではアプリとして成立しません、、、
第3回目の今回は投稿した画像を一覧画面と詳細画面に表示させる機能を作っていきます！
動画の流れはこちら
1.アプリに好きな画像をいくつか登録
2.「getDatas.php」ファイルを作成
3.データを取ってくるSQLを記述
4.クエリパラメータを使って詳細画面を作成

このような流れで作成しています！PHPを少し勉強した方向けになるのでアウトプットに是非チャレンジしてみてください！

使用したコード

今回編集したのは以下のファイルです。上手く動かなかった方は見比べたり、コピーして使用して下さい！

★getDatas.php
<?php
$uri = $_SERVER['REQUEST_URI'];

if (strpos($uri, 'imageDetail.php') !== false) {
    $imageId = $_GET['id'];
    $sql = "SELECT * FROM images WHERE id = " . $imageId;

    $sth = $db->prepare($sql);
    $sth->execute();
    $data['image'] = $sth->fetch();    
} else {
    $sql = "SELECT * FROM images ORDER BY create_date DESC";

    $sth = $db->prepare($sql);
    $sth->execute();
    $data = $sth->fetchAll();
}

return $data;
★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('../getDatas.php') ?>
  <?php include('./header.php') ?>
  <div class="imageList">
    <?php foreach ($data as $image) { ?>
      <a href="./imageDetail.php?id=<?php echo $image['id']; ?>"><img src="../images/<?php echo $image['file_name']; ?>" alt="投稿画像"></a>
    <?php }; ?>
</div>
</body>
</html>

株式会社ロックシステム

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

他の記事へ

CATEGORY