0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

🚀 入力からシェアまで!簡単PHPでURL生成サイト構築ガイド

Posted at

スクリーンショット 2025-02-04 12.06.52.png

🔗 URLを発行するサイトの作成方法について

こんにちは、エンジニア仲間の皆さん!
今回は、ユーザーが値を入力して、その入力値を反映した動的なページを作成し、パーマリンク形式のURLを発行する仕組みについて解説します。この記事では、PHPを使ったバックエンド処理と、URLリライト(.htaccess)の設定例、さらにフロントエンドのサンプルコードを交えて、初心者にも分かりやすく説明します。💻✨


🎯 基本的な流れ

この仕組みでは、以下のステップが必要になります。

  1. ユーザー入力フォームの作成
    ユーザーが値を入力するためのHTMLフォームを用意します。

  2. バックエンドでのデータ保存
    入力されたデータを受け取り、データベースに保存します。保存時に一意な識別子(例:ランダム文字列や自動採番のID)を生成します。

  3. パーマリンクURLの生成
    生成した識別子を使い、www.example.com/view/123 のようなURLを作成します。
    ※このために、Apacheの.htaccessによるURLリライトが必要になります。

  4. 動的ページの表示
    リクエストされたURL内の識別子を取得し、データベースから該当データを読み出して表示します。

以下のMermaid図で、流れを視覚的に示しています。


🛠️ 実装例

1. ユーザー入力フォーム(index.php)

以下のコードはシンプルなHTMLフォームの例です。
ユーザーが入力し、「送信」ボタンを押すと、submit.php にデータをPOSTします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>データ入力ページ</title>
</head>
<body>
  <h1>情報を入力してください ✏️</h1>
  <form action="submit.php" method="post">
    <label for="data">あなたのメッセージ:</label>
    <input id="data" name="data" type="text" required>
    <button type="submit">送信</button>
  </form>
</body>
</html>

2. バックエンド処理(submit.php)

受け取ったデータをデータベースに保存し、一意なIDを生成します。ここでは例として、簡単なPHPコードを示します。

<?php
// データベース接続設定 (PDOの例)
$dsn = 'mysql:host=localhost;dbname=yourDB;charset=utf8mb4';
$user = 'dbuser';
$password = 'dbpassword';
$options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];

try {
    $pdo = new PDO($dsn, $user, $password, $options);
} catch(PDOException $e) {
    die("DB接続エラー: " . $e->getMessage());
}

// フォームからのデータ受信
$data = trim($_POST['data']);

// 一意の識別子を生成(例:ランダムな10文字の文字列)
$identifier = substr(str_shuffle("0123456789abcdefghijklmnopqrstuvwxyz"), 0, 10);

// DBにデータ挿入
$stmt = $pdo->prepare("INSERT INTO data_table (identifier, data) VALUES (:identifier, :data)");
$stmt->execute(['identifier' => $identifier, 'data' => $data]);

// 発行するURLを作成(.htaccessでリライト設定済み)
$url = "https://www.example.com/view/" . $identifier;

// ユーザーにURLを表示
echo "あなたのデータは保存されました!シェア用URL: <a href='{$url}'>{$url}</a>";
?>

3. .htaccessによるURLリライト設定

Apacheを使っている場合、.htaccess に以下のような設定を行うことで、www.example.com/view/識別子 の形式のURLを内部的にview.phpにリダイレクトできます。

RewriteEngine On
RewriteRule ^view/([0-9a-zA-Z]+)$ view.php?id=$1 [L,QSA]

4. 動的ページ表示(view.php)

リライトされたURLで受け取った識別子を元に、保存されたデータをデータベースから取得して表示します。

<?php
// データベース接続設定 (submit.phpと同様)
$dsn = 'mysql:host=localhost;dbname=yourDB;charset=utf8mb4';
$user = 'dbuser';
$password = 'dbpassword';
$options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];

try {
    $pdo = new PDO($dsn, $user, $password, $options);
} catch(PDOException $e) {
    die("DB接続エラー: " . $e->getMessage());
}

$identifier = $_GET['id'] ?? '';
if ($identifier) {
    $stmt = $pdo->prepare("SELECT data FROM data_table WHERE identifier = :identifier");
    $stmt->execute(['identifier' => $identifier]);
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if ($row) {
        echo "<h1>あなたが入力した情報</h1>";
        echo "<p>" . htmlspecialchars($row['data'], ENT_QUOTES, 'UTF-8') . "</p>";
    } else {
        echo "データが見つかりませんでした。";
    }
} else {
    echo "無効なリクエストです。";
}
?>

💡 まとめ

  • ユーザー入力フォームからデータを受け取り、
  • PHPでデータを保存し一意な識別子を生成、
  • .htaccessのリライト機能で綺麗なURL(例:/view/識別子)を実現、
  • リライト先のPHPファイルで該当データを表示するという流れになります。

この仕組みを実装することで、PastebinやStack Overflowのように、ユーザー入力に基づいた動的なページを生成し、簡単にURLをシェアできるサイトを作成できます。ぜひ、自身のプロジェクトに取り入れて、ユーザーエクスペリエンスの向上を目指してください!🚀

Happy Coding! 👩‍💻👨‍💻


💖 ご支援いただけませんか?

スクリーンショット 2025-01-31 7.51.39.png

このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです!


暗号資産による寄付

以下のウォレットアドレスをご利用ください。重要:Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます! 送金時には、絶対に使用するネットワーク(例: ERC-20、BEP-20、Polygon、Avalanche C-Chain)を必ず正しく選択してください。

  • Ethereum (ETH)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    (ネットワーク: ERC-20)

  • BNB Chain (BNB)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    (ネットワーク: BEP-20)

  • Polygon (MATIC)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    (ネットワーク: Polygon)

  • Avalanche (AVAX)
    0x5CDA2F68f59F641B00aD172475c3d5fC10321174
    (ネットワーク: Avalanche C-Chain)

  • Solana (SOL)
    EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f

  • Stellar (XLM)
    アドレス: GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO
    メモ: 必要に応じて入力してください。

  • Ripple (XRP)
    アドレス: r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN
    タグ: 必要に応じて入力してください。

  • Cardano (ADA)
    addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7

  • Dogecoin (DOGE)
    DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H


資金用途

寄付金は以下の目的で活用させていただきます:

  1. サーバー維持費やデザインツール購入
  2. 学習活動(オンラインコース受講・書籍購入)
  3. 読者向け無料コンテンツ制作

ご協力いただいた皆さまには心より感謝申し上げます! 🙏


補足情報

  • Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
    上記4つのネットワークは同じウォレットアドレス0x5CDA2F68f59F641B00aD172475c3d5fC10321174)を使用します。ただし、送金時には、絶対に使用するネットワーク(例: ERC-20、BEP-20、Polygon、Avalanche C-Chain)を必ず正しく選択してください。

  • USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。

  • 初回送金時には少額でテスト送金することをおすすめします。


0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?