ぐっちゃんのチェックポイント

身近なことからキワドイとこまで、幅広い領域を担当しています

【進捗報告】誰得システムの試作品作ったよ

前置き

就職活動と結婚活動って似てない?


だってさ就活の流れは
「合同説明会→インターン→複数回の面接→内定(就職) 」で
婚活の流れは
「婚活パーティー→合コン(グループディスカッション)→デート→結婚」
じゃん


他にも共通点が見つからないかと思い、
試しに婚活で有名な〇-netさんのサイトで調べてみた。
結婚適齢期は男性にもある!男性婚活のすすめ|結婚相談所ならオーネット


・イメージアップサポート
・婚活計画サポート
・コミュニケーションサポート


うーん、どこか就活エージェントみたいで学部3年生の時の記憶が蘇る。

実は私も2年前就職エージェント使ってみたんだけど、紹介された会社に入っても
やりたいことができない、見当たらないことがあってすぐやめちゃったんだよね


職場にどうしても出会いがなかったらワンチャンやってみるのもアリだね


でもな、就職や結婚ってあくまで自分たちの目的を達成するための手段であって
目的そのものじゃないと思うんよな

就職してその先何になりたいのか、結婚してその先どう生きるのか、
目先のことではなく、将来を見据えていないと失敗しやすくなるんじゃないかなぁ

約1年半就活してたからこそできる思考なのかな

もしも私が合コンとかの企画担当になったら、
カリキュラムにグループディスカッションやグループワークを加えようかな(笑)

背景

詳しくは先日投稿した「誰得?システム作成中」の記事内を参照


「あなたは自分に似合う服を自覚できていますか?」
「あなたは自分に似合うポーズを知っていますか?」


そんなこと人生で一度はあるんじゃないかと思います


では「どうすれば知ることができるのか」を必死に考えたところ、
入力した身長に該当するアイドルの情報をDBから出力するWebサービスを思いついた


が、アイドルデータの入力が間に合わなかった
厳密には乃木坂46のメンバーのみだから身長に該当するメンバーが少ないかも、、

そういうわけでので、入力した身長-1cmのアイドルも出すようにSQL文を弄ったわよ。

本編

前回の記事では具体的なシステムを述べていなかったので以下に示しておく

準備するもの

MAMP
ApacheMySQLPHPをまとめてインストールできるゾ
www.mamp.infowww.mamp.info


Visual Studio Code
毎度おなじみのエディター
補完機能が便利すぎる(phpタグの補完させてくれ)

・データベース
MAMPphpMyAdminを使う

MAMPを起動して、

図1

この画面の "Open WebStart page" をクリックして飛ぶ
大文字で読みづらいが、TOOLSのPHPMYADMINを開く

こんな感じの画面が出るから、sercherのファイルを新規作成して
その中に "idolist"と"idolgroup" のテーブルを作る

各テーブルのカラム
・idolist
id, name, height
idにAI(Auto Increment)をチェック(「構造」で確認・修正可能)
・idolgroup
idol_name, phot_name

この2つのテーブルにそれぞれのデータを入力(しんどいけど)

ディレクトリ構造
.
└── htdocs
    └── idolfile
        ├── action_do.php
        ├── dbconnect.php
        ├── index.html
        └── style.css

簡単なものから解説
dbconnect.php・・・DBに接続するだけのphpファイル。
          これあると別のphpとかhtml作った時でもいちいち長い接続コマンド打たなくて済む
action_do.php ・・・index.htmlの入力フォームに入れた数値を使ってDB内を検索&表示する
index.html・・・・・送信ボタンを押したらaction_do.phpに飛ばす
style.css・・・・・・おまけ

初期設定

MAMPの設定
ダウンロードしてインストールして起動


図1のようなウィンドウが現れると思う。
そしたら左上のserverの隣の "MAMP" の "Preferences"をクリック


"Start/Stop"では、Start serversのみにチェック
"Ports"では、Apache Port: 8888、Nginx Port:7888、MySQL Port:8889に設定
"PHP"のバージョンは8.0.1にした
"Server"のWeb serverはApacheに、Document RootはC:\MAMP\htdocs(デフォルト)
"Cloud"は弄ってない

コード

dbconnect.php

<?php
$db = new mysqli("localhost:8889", ユーザー名, パスワード, "searcher");
?>

localhost:8889は初期設定のとこ
root,rootは公式からデフォルトで設定されてる(もちろん変えられるよ)
sercherはあらかじめ作ったデータベース


action_do.php

<?php
require('dbconnect.php');
//echo "DB接続成功" . "<br>";
$height = $_POST['height']; //ここに入力した身長のデータがある
$height1 = $height-1;
 

?>
<a href="index.html">さっきの画面に戻る</a>
<?php
$stmt = $db->query('select idolist.name, idolist.height, idolgroup.phot_name from idolist ,idolgroup 
where (idolist.name=idolgroup.idol_name AND idolist.height='.$height .') OR (idolist.name=idolgroup.idol_name AND idolist.height='. $height1 .') order by idolist.height desc');

$ret = $stmt->fetch_all(PDO::FETCH_ASSOC);
//var_dump($ret);
?>

<div class="table">
    <table border="1">
        <tr>
            <th>アイドルの名前</th>
            <th>身長</th>
            <th>写真集名</th>
        </tr>
        <?php foreach ($ret as $colum) : ?>
            <tr>
                <td><?php echo $colum[0] ?></td>
                <td><?php echo $colum[1] ?></td>
                <td><?php echo $colum[2] ?></td>
            </tr>
        <?php endforeach; ?>
    </table>
</div>


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>idol finder</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>アイドルAPI作ろうとしたけど厳しかった件</h1>

    <form action="action_do.php" method="post">
        <label>
            <input type="text" name="height" placeholder="身長を入力">
        </label>
        <button type="submit" name="do">探す</button>
    </form>

    <h2>概要</h2>
    <h3>・入力フォームに身長を半角で入れて【探す】ボタンをおすと</h3>
    <h3>・該当するアイドル(今は乃木坂のみ)とその人の写真集名が出てくる</h3>
</body>
</html>

style.cssは.....いっか....(長くなるし)

実験

index.htmlを開く

ボタンの位置や形を弄ってるが気にしない()
試しに 160 と入力して「探す」を押すと

無事出てきました

デザインや並び順等気になるところはわんさかあると思いますが、、、、
ひとまずは成功と言っていいでしょう!

今後の展望

・デザイン性の無さが目立つ
・DB内の数が少ないので櫻坂とか日向坂も追加しようかなぁ
・グラドルとかも入れたりしようかなぁ
・これ当初のアイデアのスリーサイズの値から検索できそうにないかも
(公開してるアイドルがそもそも少ないので)

終わりに

毎回思うけど、これ需要あるのかなぁ

少なくとも私には需要ある
友人と映える場所に遊びに行くときには役に立つ(と思う)

そういえば、今回作ったこのaction_do.phpってファイルのクエリの部分、
使い方によっては危険なんだってさ

調べてみたら入力した内容を入れて実行する系にqueryだと、
確かに実行できるんだけど、場合によってはSQLインジェクションをされる危険があるんよ

だからホントはprepareで一旦SQL文をチェックするのが一般的らしい
次からはそうしていこう

参照:
SQLインジェクションとクエリの書き方について考える - Qiita


それはそうとして、
週1で投稿する言っときながら一日オーバーしちゃいました、、

次からは納期守ってくぞ^^


おしまい