質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

Webサービスアイデア(ID毎にHTMLを修正・構成する方法)について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 608

ShinYam

score 23

現在、HTML,CSSを学習中のものです。
IDとパスワードを入力することで、パスワードの内容によって、特定のサイトへジャンプする様なWebサービスを作りたいと考えています。

静的なサイトはJavascriptを利用して作成出来ました。
内容は以下の様な感じです。
これにプラスして以下の事を実装したいと思っています。

1.新たにID入力欄を設け、入力を行うことで、IDに対応するパスワードと対応サイトのリンク集を引っ張ってきてHTMLに反映させたい。
具体的に言うと以下の様な、パスワードとそれを入力するとジャンプ出来るリンクの組み合わせデータが1000個あるとします。
if ( myPassWord == "125" ){
location.href = "https://www.xxxxxxxxxxx";}
1000個全部をHTMLに記述すると動作が遅くなったり、メンテナンスが大変なので、IDごとにこの組み合わせデータを10個ずつ紐づけて、
ID入力をすることでHTML内にIDに対応した10個の組み合わせデータのみを呼び出して記述する仕組みを作るイメージです。
  
2.IDは100以上作る。HTMLページ自体は可能ならば1ページだけで済ませたい。
3.ページ下部に、IDとパスワードとサイトリンクを入力するフォームを作りたい。
それらを入力することで、そのIDの持つ、パスワードとリンク設定を増やす事が出来る。

以上を実現するためにどういった手法がおすすめでしょうか?
動的なページになると思うので、PHPを利用する必要があるのかなと、今はおぼろげながら思っておりますが、静的なものでも可能でしょうか?
アイデア等ありましたらご教授いただけますと幸いです。

コード
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>リンクページ</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
      <head>
              <div class="header">リンク生成ページ</div>

     </head>

              <script type="text/javascript"><!--
function myEnter(){
   myPassWord=prompt("パスワードを入力してください","");
   if ( myPassWord == "125" ){
      location.href = "https://www.xxxxxxxxxxx";
   }
   if ( myPassWord == "382" ){
      location.href = "https://www.yyyyyyyyyyy";
   }
   if ( myPassWord == "767" ){
      location.href = "https://www.zzzzzzzzzzzz";
   }
  //以下同様に10個くらいパスワードと対応リンクを記述//

   else{
      alert( "★" );
   }
}
// --></script>

<form>
リンクはこちらから ⇒
<input type="button" value="クリックしてください" onclick="myEnter()">
</form>
</body>
</html>


イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m6u

    2019/05/09 22:49

    静的コンテンツとして作れなくもないけど、その場合javascript(やjQuery)によるDOM操作とかもちろんスタイルシートも覚えないといけない分、難易度が上がりそう。
    かと言って動的コンテンツにするとした場合、データベース操作(データファイルor SQLite or MySQL or ...)を覚えなきゃいけない、phpとかperlとかrubyとかpythonとかサーバー側言語も覚えなきゃいけない、簡単そうに見えて一つ一つ実は深いっていう。

    キャンセル

  • ShinYam

    2019/05/09 22:54

    ありがとうございます。
    動的の場合、サーバー言語はphpのみでも出来るんでしょうか?
    複数言語必要ですか??
    phpのみで事足りればうれしいのですが、そこらへんよくわかっていません。

    キャンセル

  • TeamPassionall

    2019/05/27 07:55

    phpだけでOKです。回答を送りました。確認して下さい。

    キャンセル

回答 2

+5

良くある(安価なレンタルサーバ等でも簡単に実現できる)構成としては
PHP+MySQLを使用して、HTMLを動的に生成するような構成だと思います。
(登録した人が自分しか見れなくていい&PCが変わったらデータが見えなくなっていいという事であれば、
HTML+Javascriptだけでも可能です。)

作るべき内容としては、
ログイン機能を備えたごく一般的なwebアプリケーションになるので、
PHPの入門本を一冊クリアすると作り方が一通りわかると思います。

言語としては

  • PHP
  • SQL
  • HTML
  • CSS

が必要になります。


サービス内容としては、既存のソーシャルブックマークやCMSで実現できる内容ではあるので、
作ること自体が目的で無い場合はそういった既存のものを探して組み合わせるというのもありです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/21 23:15

    ありがとうございます!既存のものでも可能なのですね。
    そちらも調べてみます。

    キャンセル

checkベストアンサー

+1

MySQLとphpを使って以下のコードで出来ます。

<?php
// セッション開始
session_start();

$db['host'] = "localhost";  // DBサーバのURL
$db['user'] = "user";  // ユーザー名
$db['pass'] = "password";  // ユーザー名のパスワード
$db['dbname'] = "dbname";  // データベース名

// エラーメッセージの初期化
$errorMessage = "";

// ログインボタンが押された場合
if (isset($_POST["login"])) {
    // 1. ユーザIDの入力チェック
    if (empty($_POST["userid"])) {  // emptyは値が空のとき
        $errorMessage = 'ユーザーIDが未入力です。';
    } else if (empty($_POST["password"])) {
        $errorMessage = 'パスワードが未入力です。';
    }

    if (!empty($_POST["userid"]) && !empty($_POST["password"])) {
        // 入力したユーザIDを格納
        $userid = $_POST["userid"];

        // 2. ユーザIDとパスワードが入力されていたら認証する
        $dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']);

        // 3. エラー処理
        try {
            $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION));

            $stmt = $pdo->prepare('SELECT * FROM userData WHERE name = ?');
            $stmt->execute(array($userid));

            $password = $_POST["password"];

            if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
//ここ間違ってました。すみません。
                if ($password == $row['password']) {
                    session_regenerate_id(true);

                    // 入力したIDのユーザー名を取得
                    $id = $row['id'];
                    $sql = "SELECT * FROM userData WHERE id = $id";  //入力したIDからユーザー名を取得
                    $stmt = $pdo->query($sql);
                    foreach ($stmt as $row) {
                        $row['name'];  // ユーザー名
                        $row['link'];
                    }
                    $_SESSION["NAME"] = $row['name'];
//スペルミスをしていました。'rink'ではなく、'link'です。
                    header("Location:".$row['link']);  
                    exit();  // 処理終了
                } else {
                    // 認証失敗
                    $errorMessage = 'ユーザーIDあるいはパスワードに誤りがあります。';
                }
            } else {
                // 4. 認証成功なら、セッションIDを新規に発行する
                // 該当データなし
                $errorMessage = 'ユーザーIDあるいはパスワードに誤りがあります。';
            }
        } catch (PDOException $e) {
            $errorMessage = 'データベースエラー';
            //$errorMessage = $sql;
            // $e->getMessage() でエラー内容を参照可能(デバッグ時のみ表示)
            // echo $e->getMessage();
        }
    }
}
?>

<!doctype html>
<html>
    <head>
            <meta charset="UTF-8">
            <title>ログイン</title>
    </head>
    <body>

        <h1>ログイン画面</h1>
        <form id="loginForm" name="loginForm" action="" method="POST">
            <fieldset>
                <legend>ログインフォーム</legend>
                <div><font color="#ff0000"><?php echo htmlspecialchars($errorMessage, ENT_QUOTES); ?></font></div>
                <label for="userid">ユーザーID</label><input type="text" id="userid" name="userid" placeholder="ユーザーIDを入力" value="<?php if (!empty($_POST["userid"])) {echo htmlspecialchars($_POST["userid"], ENT_QUOTES);} ?>">
                <br>
                <label for="password">パスワード</label><input type="password" id="password" name="password" value="" placeholder="パスワードを入力">
                <br>
                <input type="submit" id="login" name="login" value="ログイン">
            </fieldset>
        </form>

    </body>
</html>
<?php
// セッション開始
session_start();

$db['host'] = "localhost";  // DBサーバのURL
$db['user'] = "hogeUser";  // ユーザー名
$db['pass'] = "hogehoge";  // ユーザー名のパスワード
$db['dbname'] = "loginManagement";  // データベース名

// エラーメッセージ、登録完了メッセージの初期化
$errorMessage = "";
$signUpMessage = "";

// ログインボタンが押された場合
if (isset($_POST["signUp"])) {
    // 1. ユーザIDの入力チェック
    if (empty($_POST["username"])) {  // 値が空のとき
        $errorMessage = 'ユーザーIDが未入力です。';
    } else if (empty($_POST["password"])) {
        $errorMessage = 'パスワードが未入力です。';
    } else if (empty($_POST["URL"])) {
        $errorMessage = 'URLが未入力です。';
    }

    if (!empty($_POST["username"]) && !empty($_POST["password"]) && !empty($_POST["URL"])) {
        // 入力したユーザIDとパスワードを格納
        $username = $_POST["username"];
        $password = $_POST["password"];
        $URL = $_POST["URL"];

        // 2. ユーザIDとパスワードが入力されていたら認証する
        $dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']);

        // 3. エラー処理
        try {
            $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION));

            $stmt = $pdo->prepare("INSERT INTO userData(name, password, link) VALUES (?, ?, ?)");

            $stmt->execute(array($username, $password, $URL)); 
            $userid = $pdo->lastinsertid();  // 登録した(DB側でauto_incrementした)IDを$useridに入れる

            $signUpMessage = '登録が完了しました。あなたの登録IDは '. $userid. ' です。パスワードは '. $password. ' です。';  // ログイン時に使用するIDとパスワード
        } catch (PDOException $e) {
            $errorMessage = 'データベースエラー';
            // $e->getMessage() でエラー内容を参照可能(デバッグ時のみ表示)
            // echo $e->getMessage();
        }
    } 
}
?>

<!doctype html>
<html>
    <head>
            <meta charset="UTF-8">
            <title>新規登録</title>
    </head>
    <body>
        <h1>新規登録画面</h1>
        <form id="loginForm" name="loginForm" action="" method="POST">
            <fieldset>
                <legend>新規登録フォーム</legend>
                <div><font color="#ff0000"><?php echo htmlspecialchars($errorMessage, ENT_QUOTES); ?></font></div>
                <div><font color="#0000ff"><?php echo htmlspecialchars($signUpMessage, ENT_QUOTES); ?></font></div>
                <label for="username">ユーザー名</label><input type="text" id="username" name="username" placeholder="ユーザー名を入力" value="<?php if (!empty($_POST["username"])) {echo htmlspecialchars($_POST["username"], ENT_QUOTES);} ?>">
                <br>
                <label for="password">パスワード</label><input type="password" id="password" name="password" value="" placeholder="パスワードを入力">
                <br>
                <label for="URL">URL</label><input type="text" id="URL" name="URL" value="" placeholder="URLを入力">
                <br>
                <input type="submit" id="signUp" name="signUp" value="新規登録">
            </fieldset>
        </form>

    </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/30 22:57

    サンプル動作、上手くいきました!
    すごくいい感じです!
    こちらは、TeamPassionallさんが書いていただいた、2番目のPHPが新規登録用ページ、1番目のPHPがリンクジャンプ用のページということですよね?
    ありがたいです!

    キャンセル

  • 2019/06/02 17:17

    問題は解決しましたか?
    解決したらベストアンサーを選んでください。

    キャンセル

  • 2019/06/02 23:45

    ありがとうございます はい選ばせていただきます!
    TeamPassionallさんのおかげで本当に助かりました。
    この御恩は忘れません。
    今後、何らかの形で恩返しさせていただけたらと思っています。

    本当にありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る