【超初心者向け】PHPで簡易的なTwitterアプリを作成しよう

この記事を上から学習していくと
PHPでWebアプリ作成ができちゃいます!!

あけお

スクールに多額のお金を支払う前に、僕の記事で学習してみてね!!

https://akeoblog.com/phptutorial/
目次

この記事でやること

  • アプリを動かしてみる
  • アプリのコードを理解する

1. 簡易的なTwitterアプリを作成する準備をしよう

1. GitHubを開きます。

以下のURLからサイトを開きます。
https://github.com/Aka023v/simple-twitter

2. 「Codespaces」を使い、環境構築をします。

※ 環境構築方法がわからない方は、以下URLの記事を参考にしましょう!

https://akeoblog.com/gitgithubcodespaces/

2. アプリの機能を理解しよう

1. 投稿一覧の表示

「ポート」の8000番を開くと、投稿の一覧を見ることができます。

2. 投稿機能

投稿の一覧ページで「Tweetする」を押すと、投稿ページにいきます。
ここで、投稿内容を入力し、投稿ができます。

3. 編集機能

投稿の一覧ページで「編集」を押すと、投稿の編集ページにいきます。
ここで、投稿内容を編集ができます。

4. 削除機能

投稿の一覧ページで「削除」を押すと、投稿の削除ができます。

3. Read機能を理解しよう

Codespaceに戻り、src/index.phpを開きます。

<?php
//DBと接続
$dbh = new PDO(
  'mysql:dbname=twitter;host=mysql;charset=utf8',
  'root',
  'password'
);

//DBからデータを取得するための呪文(SQL文)
$query = "SELECT * FROM tweet";
$stmt = $dbh->query($query);
///DBからデータを取得
$tweets = $stmt->fetchAll();
?>

<body>
  <div>
    <h1>簡易Twitter</h1>
    <a href="./create.php">Tweetする</a><br>
    <table border="1">
      <tr>
        <th>投稿者名</th>
        <th>ツイート</th>
        <th>編集</th>
        <th>削除</th>
      </tr>
      <?php foreach ($tweets as $tweet) : ?>
        <tr>
          <td><?php echo $tweet['poster']; ?></td>
          <td><?php echo $tweet['tweet']; ?></td>
          <td><a href="./edit.php?id=<?php echo $tweet['id'] ?>">編集</a></td>
          <td><a href="./delete.php?id=<?php echo $tweet['id'] ?>">削除</a></td>
        </tr>
      <?php endforeach; ?>
    </table>
  </div>
</body>

1~14行目: PHPコード
DBからすべてのツイートのデータを取得しています。

※ DBとはデータベースのことです!

18行目: <h1>タグ
ページのタイトルを書いています。

19行目: <a>タグ
新規投稿ページに遷移するリンクを作成しています。

20行目以降: <table>タグ
投稿の一覧を表示しています。

Point
①Read機能の流れを知る

②<h1>, <a>タグの使い方を知る
③<table>タグの使い方を知る
④foreachの使い方を知る

4. Create機能を理解しよう

src/create.php

<body> 
    <h1>簡易Twitter</h1>
    <form method="post" action="./store.php">
        <table>
            <tr>
                <td>投稿者名</td>
                <td><input name="poster" placeholder="投稿者名の記入欄" required></td>
            </tr>
            <tr>
                <td>投稿</td>
                <td><textarea name="tweet" placeholder="ツイート記入欄" required></textarea></td>
            </tr>
            <tr>
                <td ></td>
                <td><button>送信</button></td>
            </tr>
        </table>
    </form>
</body>

3行目: <form>タグ
入力フォームを作成しています。

<form>タグのactionでデータの送信先を設定しています。
(store.phpにデータを送信しています。)

src/create.php

<?php
$poster = filter_input(INPUT_POST, 'poster');
$tweet = filter_input(INPUT_POST, 'tweet');

$dbh = new PDO(
    'mysql:dbname=twitter;host=mysql;charset=utf8',
    'root',
    'password'
);

$query = "INSERT INTO `tweet` (`poster`, `tweet`) VALUES ('$poster', '$tweet')";
$dbh->query($query);
header("Location: ./index.php");
?>

2, 3行目: filter_input
create.phpから送信されたデータを受け取っています。

(フォームに入力されたデータを受け取っています。)

4行目以降
データをDBに保存しています。

Point
①Create機能の流れを知る

②<form>タグの使い方を知る

5. Update機能を理解しよう

src/edit.php

<?php
$id = filter_input(INPUT_GET, 'id');

$dbh = new PDO(
  'mysql:dbname=twitter;host=mysql;charset=utf8',
  'root',
  'password'
);
$query = "SELECT * FROM tweet where id = '$id'";
$stmt = $dbh->query($query);
$tweet = $stmt->fetch();
?>

<body>
  <div>
    <h1>編集</h1>
    <form method="post" action="./update.php">
      <input type="hidden" name="id" value=<?php echo $tweet['id'] ?>>
      <div>
        <label for="poster">投稿者名
          <input type="text" name="poster" value=<?php echo $tweet['poster'] ?>>
        </label>
      </div>
      <div>
        <label for="tweet">ツイート
          <input type="textarea" name="tweet" value=<?php echo $tweet['tweet'] ?>>
        </label>
      </div>
      <button>更新</button>
    </form>
  </div>
</body>

2行目: filter_input
URLで送信しされたidを取得しています。

4~12行目
DBからidをもとにデータを取得しています。

13行目以降
入力フォームを作成しています。
入力フォームに取得したデータを表示しています。

src/update.php

<?php
$id = filter_input(INPUT_POST, 'id');
$poster = filter_input(INPUT_POST, 'poster');
$tweet = filter_input(INPUT_POST, 'tweet');

$dbh = new PDO(
  'mysql:dbname=twitter;host=mysql;charset=utf8',
  'root',
  'password'
);
$query = "UPDATE tweet SET poster='$poster', tweet='$tweet' WHERE id = '$id'";
$dbh->query($query);

header('Location: ./index.php');
exit;
?>

2~4行目: filter_input
edit.phpから送信されたデータを受け取っています。

(フォームに入力されたデータを受け取っています。)

5行目以降
DBのデータを変更しています。

Point
Update機能の流れを知る

6. Delete機能を理解しよう

delete.php

<?php
$id = filter_input(INPUT_GET, 'id');

$dbh = new PDO(
    'mysql:dbname=twitter;host=mysql;charset=utf8',
    'root',
    'password'
);
$query = "DELETE FROM tweet where id = '$id'";
$dbh->query($query);

header('Location: ./index.php');
exit;
?>

2行目: filter_input
URLで送信しされたidを取得しています。

4行目以降
DBのデータを削除しています。

Point
Delete機能の流れを知る

よかったらシェアしてね!
目次