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

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 = "ブックレットから移動してください";
    }
?> 

次回は

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