Q&A
「対応サイトのリンク集」とはどのようにデータを持たせたいのでしょうか。
ユーザー毎にURLを登録させるとか・・？今一つ実態が見えてこないのでもう少し要件を具体化するとか、
画面イメージを添付するとかしていただけますか？
現在、HTML,CSSを学習中のものです。
IDとパスワードを入力することで、パスワードの内容によって、特定のサイトへジャンプする様なWebサービスを作りたいと考えています。
静的なサイトはJavascriptを利用して作成出来ました。
内容は以下の様な感じです。
これにプラスして以下の事を実装したいと思っています。
１．新たにID入力欄を設け、入力を行うことで、IDに対応するパスワードと対応サイトのリンク集を引っ張ってきてHTMLに反映させたい。
具体的に言うと以下の様な、パスワードとそれを入力するとジャンプ出来るリンクの組み合わせデータが1000個あるとします。
if ( myPassWord == "125" ){
location.href = "https://www.xxxxxxxxxxx";}
1000個全部をHTMLに記述すると動作が遅くなったり、メンテナンスが大変なので、IDごとにこの組み合わせデータを10個ずつ紐づけて、
ID入力をすることでHTML内にIDに対応した10個の組み合わせデータのみを呼び出して記述する仕組みを作るイメージです。
２．IDは100以上作る。HTMLページ自体は可能ならば１ページだけで済ませたい。
３．ページ下部に、IDとパスワードとサイトリンクを入力するフォームを作りたい。
それらを入力することで、そのIDの持つ、パスワードとリンク設定を増やす事が出来る。
以上を実現するためにどういった手法がおすすめでしょうか？
動的なページになると思うので、PHPを利用する必要があるのかなと、今はおぼろげながら思っておりますが、静的なものでも可能でしょうか？
アイデア等ありましたらご教授いただけますと幸いです。
HTML
1コード 2<!doctype html> 3<html> 4<head> 5<meta charset="utf-8"> 6<title>リンクページ</title> 7<link href="style.css" rel="stylesheet" type="text/css"> 8</head> 9<body> 10 <head> 11 <div class="header">リンク生成ページ</div> 12 13 </head> 14 15 <script type="text/javascript"><!-- 16function myEnter(){ 17 myPassWord=prompt("パスワードを入力してください",""); 18 if ( myPassWord == "125" ){ 19 location.href = "https://www.xxxxxxxxxxx"; 20 } 21 if ( myPassWord == "382" ){ 22 location.href = "https://www.yyyyyyyyyyy"; 23 } 24 if ( myPassWord == "767" ){ 25 location.href = "https://www.zzzzzzzzzzzz"; 26 } 27 //以下同様に１０個くらいパスワードと対応リンクを記述// 28 29 else{ 30 alert( "★" ); 31 } 32} 33// --></script> 34 35<form> 36リンクはこちらから ⇒ 37<input type="button" value="クリックしてください" onclick="myEnter()"> 38</form> 39</body> 40</html> 41 42
あと、単なるアイデア募集となると質問ではなくなるので（特にこのタイトルだと）、書き方、聞き方を工夫されたほうが良いかもしれません。
ありがとうございます！修正をおこないました。
静的コンテンツとして作れなくもないけど、その場合javascript（やjQuery）によるDOM操作とかもちろんスタイルシートも覚えないといけない分、難易度が上がりそう。
かと言って動的コンテンツにするとした場合、データベース操作（データファイルor SQLite or MySQL or ...）を覚えなきゃいけない、phpとかperlとかrubyとかpythonとかサーバー側言語も覚えなきゃいけない、簡単そうに見えて一つ一つ実は深いっていう。
ありがとうございます。
動的の場合、サーバー言語はphpのみでも出来るんでしょうか？
複数言語必要ですか？？
phpのみで事足りればうれしいのですが、そこらへんよくわかっていません。
phpだけでOKです。回答を送りました。確認して下さい。
回答2件
0
良くある(安価なレンタルサーバ等でも簡単に実現できる)構成としては
PHP+MySQLを使用して、HTMLを動的に生成するような構成だと思います。
(登録した人が自分しか見れなくていい&PCが変わったらデータが見えなくなっていいという事であれば、
HTML+Javascriptだけでも可能です。)
作るべき内容としては、
ログイン機能を備えたごく一般的なwebアプリケーションになるので、
PHPの入門本を一冊クリアすると作り方が一通りわかると思います。
言語としては
- PHP
- SQL
- HTML
- CSS
が必要になります。
サービス内容としては、既存のソーシャルブックマークやCMSで実現できる内容ではあるので、
作ること自体が目的で無い場合はそういった既存のものを探して組み合わせるというのもありです。
投稿2019/05/09 14:35
編集2019/05/09 14:37
総合スコア18713
0
ベストアンサー
MySQLとphpを使って以下のコードで出来ます。
indexphp
1<?php 2// セッション開始 3session_start(); 4 5$db['host'] = "localhost"; // DBサーバのURL 6$db['user'] = "user"; // ユーザー名 7$db['pass'] = "password"; // ユーザー名のパスワード 8$db['dbname'] = "dbname"; // データベース名 9 10// エラーメッセージの初期化 11$errorMessage = ""; 12 13// ログインボタンが押された場合 14if (isset($_POST["login"])) { 15 // 1. ユーザIDの入力チェック 16 if (empty($_POST["userid"])) { // emptyは値が空のとき 17 $errorMessage = 'ユーザーIDが未入力です。'; 18 } else if (empty($_POST["password"])) { 19 $errorMessage = 'パスワードが未入力です。'; 20 } 21 22 if (!empty($_POST["userid"]) && !empty($_POST["password"])) { 23 // 入力したユーザIDを格納 24 $userid = $_POST["userid"]; 25 26 // 2. ユーザIDとパスワードが入力されていたら認証する 27 $dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']); 28 29 // 3. エラー処理 30 try { 31 $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION)); 32 33 $stmt = $pdo->prepare('SELECT * FROM userData WHERE name = ?'); 34 $stmt->execute(array($userid)); 35 36 $password = $_POST["password"]; 37 38 if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 39//ここ間違ってました。すみません。 40 if ($password == $row['password']) { 41 session_regenerate_id(true); 42 43 // 入力したIDのユーザー名を取得 44 $id = $row['id']; 45 $sql = "SELECT * FROM userData WHERE id = $id"; //入力したIDからユーザー名を取得 46 $stmt = $pdo->query($sql); 47 foreach ($stmt as $row) { 48 $row['name']; // ユーザー名 49 $row['link']; 50 } 51 $_SESSION["NAME"] = $row['name']; 52//スペルミスをしていました。'rink'ではなく、'link'です。 53 header("Location:".$row['link']); 54 exit(); // 処理終了 55 } else { 56 // 認証失敗 57 $errorMessage = 'ユーザーIDあるいはパスワードに誤りがあります。'; 58 } 59 } else { 60 // 4. 認証成功なら、セッションIDを新規に発行する 61 // 該当データなし 62 $errorMessage = 'ユーザーIDあるいはパスワードに誤りがあります。'; 63 } 64 } catch (PDOException $e) { 65 $errorMessage = 'データベースエラー'; 66 //$errorMessage = $sql; 67 // $e->getMessage() でエラー内容を参照可能（デバッグ時のみ表示） 68 // echo $e->getMessage(); 69 } 70 } 71} 72?> 73 74<!doctype html> 75<html> 76 <head> 77 <meta charset="UTF-8"> 78 <title>ログイン</title> 79 </head> 80 <body> 81 82 <h1>ログイン画面</h1> 83 <form id="loginForm" name="loginForm" action="" method="POST"> 84 <fieldset> 85 <legend>ログインフォーム</legend> 86 <div><font color="#ff0000"><?php echo htmlspecialchars($errorMessage, ENT_QUOTES); ?></font></div> 87 <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);} ?>"> 88 <br> 89 <label for="password">パスワード</label><input type="password" id="password" name="password" value="" placeholder="パスワードを入力"> 90 <br> 91 <input type="submit" id="login" name="login" value="ログイン"> 92 </fieldset> 93 </form> 94 95 </body> 96</html>
sinki.php
1<?php 2// セッション開始 3session_start(); 4 5$db['host'] = "localhost"; // DBサーバのURL 6$db['user'] = "hogeUser"; // ユーザー名 7$db['pass'] = "hogehoge"; // ユーザー名のパスワード 8$db['dbname'] = "loginManagement"; // データベース名 9 10// エラーメッセージ、登録完了メッセージの初期化 11$errorMessage = ""; 12$signUpMessage = ""; 13 14// ログインボタンが押された場合 15if (isset($_POST["signUp"])) { 16 // 1. ユーザIDの入力チェック 17 if (empty($_POST["username"])) { // 値が空のとき 18 $errorMessage = 'ユーザーIDが未入力です。'; 19 } else if (empty($_POST["password"])) { 20 $errorMessage = 'パスワードが未入力です。'; 21 } else if (empty($_POST["URL"])) { 22 $errorMessage = 'URLが未入力です。'; 23 } 24 25 if (!empty($_POST["username"]) && !empty($_POST["password"]) && !empty($_POST["URL"])) { 26 // 入力したユーザIDとパスワードを格納 27 $username = $_POST["username"]; 28 $password = $_POST["password"]; 29 $URL = $_POST["URL"]; 30 31 // 2. ユーザIDとパスワードが入力されていたら認証する 32 $dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']); 33 34 // 3. エラー処理 35 try { 36 $pdo = new PDO($dsn, $db['user'], $db['pass'], array(PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION)); 37 38 $stmt = $pdo->prepare("INSERT INTO userData(name, password, link) VALUES (?, ?, ?)"); 39 40 $stmt->execute(array($username, $password, $URL)); 41 $userid = $pdo->lastinsertid(); // 登録した(DB側でauto_incrementした)IDを$useridに入れる 42 43 $signUpMessage = '登録が完了しました。あなたの登録IDは '. $userid. ' です。パスワードは '. $password. ' です。'; // ログイン時に使用するIDとパスワード 44 } catch (PDOException $e) { 45 $errorMessage = 'データベースエラー'; 46 // $e->getMessage() でエラー内容を参照可能（デバッグ時のみ表示） 47 // echo $e->getMessage(); 48 } 49 } 50} 51?> 52 53<!doctype html> 54<html> 55 <head> 56 <meta charset="UTF-8"> 57 <title>新規登録</title> 58 </head> 59 <body> 60 <h1>新規登録画面</h1> 61 <form id="loginForm" name="loginForm" action="" method="POST"> 62 <fieldset> 63 <legend>新規登録フォーム</legend> 64 <div><font color="#ff0000"><?php echo htmlspecialchars($errorMessage, ENT_QUOTES); ?></font></div> 65 <div><font color="#0000ff"><?php echo htmlspecialchars($signUpMessage, ENT_QUOTES); ?></font></div> 66 <label for="username">ユーザー名</label><input type="text" id="username" name="username" placeholder="ユーザー名を入力" value="<?php if (!empty($_POST["username"])) {echo htmlspecialchars($_POST["username"], ENT_QUOTES);} ?>"> 67 <br> 68 <label for="password">パスワード</label><input type="password" id="password" name="password" value="" placeholder="パスワードを入力"> 69 <br> 70 <label for="URL">URL</label><input type="text" id="URL" name="URL" value="" placeholder="URLを入力"> 71 <br> 72 <input type="submit" id="signUp" name="signUp" value="新規登録"> 73 </fieldset> 74 </form> 75 76 </body> 77</html>
投稿2019/05/26 22:51
編集2019/05/29 14:41総合スコア80
TeamPassionall様
神回答ありがとうございます！
まさかこの様な回答をいただけるとは・・・すごく嬉しいです！
ちょっと検証が行えていませんので、今から触ってみて、また動作報告させていただきます＾＾
わかりました。エラーが出たら教えて下さい。
出来る限りサポートします。
ありがとうございます！
せっかく素晴らしい回答をいただいておいて、大変お恥ずかしいのですが、MySQLを触ったことがなく、今調べながらやっています。
実装まで少し時間かかるかもしれません＾＾；
Xserver内にDBを設定して、そこのデータと、
// 2. ユーザIDとパスワードが入力されていたら認証する
$dsn = sprintf('mysql: host=%s; dbname=%s; charset=utf8', $db['host'], $db['dbname']);
のhostやdbnameをリンクさせて使えるのだと思うのですが、やってみます！
また報告させていただきます！
上から5行目を変更すると、自動でリンクされますよ
$db['host'] = "localhost"; // DBサーバのURL
$db['user'] = "user"; // ユーザー名
$db['pass'] = "password"; // ユーザー名のパスワード
$db['dbname'] = "dbname"; // データベース名
DBには次のようなテーブルを作ると、処理部分はサンプルのままで動かせますよ。
-------------------------------------
｜id｜name|password|link|
-------------------------------------
データべース名だけ設定すればDBサーバーのURLも自動設定されるということでしょうか。
とりあえず記述してサーバーに入れてみました。
HPの設置も出来ている状態です。
http://sinsya.xsrv.jp/index.php
それと、PHPアドミンでテーブル設定を今見ています。
このテーブル内にログイン用のユーザー名とパスワードを作っていく感じで合ってますでしょうか？
https://pg-happy.jp/php-xsrv-db-connect.html
そうですね。試しに1個ユーザーを作ってみてください.
phpmyadminで操作できると思います
また念のためにエラー参照をオンにする事でサポートがしやすくなります。
以下の部分を修正してみてください。
} catch (PDOException $e) {
$errorMessage = 'データベースエラー';
//$errorMessage = $sql;
// $e->getMessage() でエラー内容を参照可能（デバッグ時のみ表示）
//コメントアウトを外す
echo $e->getMessage();
}
本当にご丁寧にありがとうございます 感激です！
やってみます！
すみません…！コードの一部に誤りがありました！
正しいのはこっちになります。すみません
$password = $_POST["password"];
if ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
if ($password == $row['password']) {
session_regenerate_id(true);
// 入力したIDのユーザー名を取得
動作サンプルを作成しました。
うまく行くと、
http://ayap.tk/db.php
のような動きになるはずです。
ここでは、
ユーザー名：test1
パスワード:test
ユーザー名：test2
パスワード:test
で登録してあります。
やってみてください。
コード修正しました！
動作サンプルも動き、イメージつかめました。
テーブル登録は知識０なのでしばらく時間かかりそうです。
下記のテーブルを実現するには追加した写真のような感じで登録すればよいのでしょうか。
-------------------------------------
｜id｜name|password|link|
-------------------------------------
idはそのままでいいですが、name,password,linkは変更する必要があります。
設定に「type」という列があると思いますが、今は全部「int」になっていますよね？
「int」は数字しか入れられないので、name,passwordは「varchar」linkは「text」にしましょう。
> TeamPassionall さん
回答のサンプルとして見る程度であれば許容できますが、設計も含めて実用に耐えうるコードではないことをきちんと説明しておくことが必要かと。
ShinYam さんがこのコードで突っ走ってしまいそうに見えます。。。
>te2jiさん
そうですよね…
このままだとmysqlとか通信を読み取られた時にパスワードとか丸見えですしね…
ユーザー入力をそのままSQL文に代入しちゃってるし。
ですが、ShinYamさんはこれをログイン機能として実装しようとしてるんでしょうか？
ただ、入力された値と対応するリンクに飛ばすぐらいだったら対策はSQLインジェクションぐらいでも良さそうな気がしますが…
te2ji さん TeamPassional さん
回答ありがとうございます。
実装したいものは、デリケートなものではないので、簡略化できるならそれでも全然いいと思ってます。
具体的には、ファイル渡しを簡単に出来るようにしたいのです。
【例】
A~Eの５人にそれぞれ別のPDFファイルを渡したいとします。
１．準備として、Dropboxに５種類のPDFを保存し、それぞれの共有リンクURLをGETします。
２．５種類のパスを設定し、最上段のHTML記述のように、パスを入れると対応したURLにジャンプするサイトを作ります。
３．５人にサイトのURLを渡し、それぞれにパスを教えて各自でダウンロードしてもらって目的達成。
ここまでは作ることが出来ました。
これにプラスして、サイト内の操作によってDropboxへのリンクURLと対応するパスワードを増やす機能を実装したいのです。
ですので、実現できるならログイン機能でなくても構いません。
えーと。それは新規登録的な画面が欲しいということですか？
新規登録コードを追加しました。
http://ayap.tk/newdb.php
新規登録のサンプルです。
登録したら、
http://ayap.tk/db.php
でログインして、そのページに行けるか確認してみてください。
ありがとうございます！
まさにこういうイメージです！
新規登録サンプルを登録してみましたが、
SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry '0' for key 'id'
とエラーが出ました。
URLもhttpsから入力しました。
idカラムにa_i属性が付与されていないために起こりますね。
phpmyadminの構造ー＞Idを編集->a_iチェックボックスをオンにして、保存
これをやってみてください
サンプル動作、上手くいきました！
すごくいい感じです！
こちらは、TeamPassionallさんが書いていただいた、２番目のPHPが新規登録用ページ、１番目のPHPがリンクジャンプ用のページということですよね？
ありがたいです！
問題は解決しましたか？
解決したらベストアンサーを選んでください。
ありがとうございます はい選ばせていただきます！
TeamPassionallさんのおかげで本当に助かりました。
この御恩は忘れません。
今後、何らかの形で恩返しさせていただけたらと思っています。
本当にありがとうございました！
あなたの回答
tips
プレビュー
