LoginSignup
3
4

More than 5 years have passed since last update.

Webから取得したデータでサービスを作ってみる(Part1)

Last updated at Posted at 2018-03-12

JavaScriptで要ログインサイトのデータ収集サービスを作ってみるでデータ収集の機構を作ったので、それを用いたサイトを作ることにしました。(某音ゲーのスコアツールです。)

(作ったサイトはここになります)

やることリスト

  • 取得したデータを管理するDBに入れる
  • DBに入れたデータを見せる
  • ユーザ登録・ログイン・ログアウトをしてユーザごとに管理する

取得したデータを管理するDBへ登録

ツールで取得したデータを登録用サイトにPOSTする

先の投稿で、データを取得するJavaScriptを書いていたので、これを改修して、登録用のサイトにデータを渡せるように変更します。

  • 取得元HTMLに新しくフォームを作成→ポスト先とかいろいろ設定
  • そのフォームにテキストエリアを登録
  • フォームをsubmit
  • (Deferredを使っているので、これはググってみてください)
scoretoolBookret.js
var submitData = function(){
    var d = new $.Deferred();
    // フォーム追加
    var form = document.createElement('form');
    document.body.appendChild(form);
    // 属性追加
    form.setAttribute('action', 'https://musecascoretool.sakura.ne.jp/MusecaScore.php');
    form.setAttribute('accept-charset', 'UTF-8');
    form.setAttribute('method', 'post');
    // テキストボックス追加
    var textarea = document.createElement('textarea');

    var scoreDataStr = '';
    // スコアデータ作成
    scoreDataStr += scoreList[0]
    for(var i = 1; i < scoreList.length; i++){
        // 分割点がわかりづらいので、<delimiter>で分割
        scoreDataStr += ('<delimiter>'+scoreList[i]);
    }

    // 属性追加
    textarea.setAttribute('name', 'scoredata');
    textarea.value = scoreDataStr;
    form.appendChild(textarea);

    // 提出
    document.charset='UTF-8';
    form.submit();

    // 返却
    d.resolve();
    return d.promise();
}

これで取得データを登録用サイトにSubmitできるので登録サイトで、DB登録処理を入れればOKです。

登録用サイトの処理

  • POSTデータを受け取る→なかったら想定外のところからアクセスされている→エラールートへ
  • セッションを確認する(登録先の確認)→セッションなしなら登録先不明のためエラールートへ
  • DBへ登録
AddData.php
<?php
    // --------------POSTデータを取得-------------------
    $error="";
    // POSTデータがある場合
    if(isset($_POST['scoredata'])){
        // POSTデータ分析
        $scoredataCSV = $_POST['scoredata'];

        // リストへ変換
        $scoredataArray = explode('<delimiter>', $scoredataCSV);
        $scoreData = array();
        foreach($scoredataArray as $value){
            $arr = explode(',',$value);
            $scoreData[$arr[0]] = array_slice($arr,1);
        }

        try{
            // -----------セッションからユーザID取得-------------- //
            // セッション復帰
            session_start();
            // セッションにデータある?
            if(!isset($_SESSION['XXXX'])){
                // 無い時はErrorへ
                throw new Exception();
            }else{
                $userID = $_SESSION['XXXX'];
            }

            // ----------------DB登録処理------------------- //
            // DB接続
            $pdo = new PDO(
                'mysql:dbname=XXXX;host=XXXX;charset=utf8mb4',
                'XXXX',
                'XXXX',
                [
                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
                ]
            );

            // 全曲キー取得
            $allMusic = array_keys($scoreData);

            // -------------楽曲登録--------------- //
            foreach($allMusic as $val){
                // prepared statement
                /*登録処理*/
                // SQL実行
                $stmt->execute();
            }

            // ----------------スコア登録--------------- //
            $DebugCnt = 0;
            // Score登録開始
            foreach($allMusic as $val){
                $target = $scoreData[$val];
                for($idx = 0; $idx < 3; $idx++){
                    // prepared statement 
                    /*登録処理*/
                    // SQL実行
                    $stmt->execute();
                }
            }
        }catch (PDOException $e) {
            header('Content-Type: text/plain; charset=UTF-8', true, 500);
            echo $e->getMessage();
            exit($e->getMessage()); 
        }catch(Exception $e){
            echo $e->getMessage();
        }
    }else{
        // POSTデータなし
        $error = "ブックレットから移動してください";
    }
?> 

次回は

ログインのセッション管理とか、めんどかったので少し記事書きます

3
4
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
3
4