techimaharu’s blog

自信を取り戻すための技術ブログ

重複なしのtableの作成(XMAPP)

やったこと

既に、idがtableに存在していれば 入力を拒否してエラーメッセージを作成する

テーブルのidに主キー設定し、重複なしのtableを作成

XAMPPで主キーの設定

f:id:techimaharu:20170815224509p:plain

XMAPPのSQLをAdminすると遷移する

phpMyAdminで作成したテーブルしたをクリック後

表示 - 構造 - SQL - …

の構造に移動後、上記画像を参考に主キーに変更できる

コードの一部

$sum = $_POST["count"]; // 総単位数
    
$sql = "INSERT INTO    sum_credit (student_id , sum) VALUES    (imaharu , $sum)";
$result = $mysqli->query($sql);
if (!$result) {
echo "try again";
}
$mysqli->close();

終わりに

主キーやユニークキーの設定を勉強する必要がある

POSTする情報の追加

やったこと

javascriptでsubmitでページ遷移前に inputを作成してPOSTの値を追加する

コード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
        function count() {
            var count = document.getElementsByClassName("count");
            let sum = 0;
            for (let i = 0; i < count.length; i++) {
                sum += parseInt(count[i].value);
            }

            var send_count = document.createElement('input');
            // データを設定
            send_count.setAttribute('type', 'hidden');
            send_count.setAttribute('name', 'count');
            send_count.setAttribute('value', sum);
            // 要素を追加
            document.insert.appendChild(send_count);
        }
    </script>
</head>

<body>
    <form method="POST" name="insert" action="insert.php" onsubmit="count()" id="insert_form">
        <table id="insert">
            <thead>
                <tr>
                    <th>科目情報</th>
                    <th>成績評価</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>データベース</td>
                    <td>
                        <input type="radio" id="zero_database" name="database" value="0">
                        <label for="zero_database">不可</label>
                        <input type="radio" id="one_database" name="database" value="1">
                        <label for="one_database">可</label>
                        <input type="radio" id="two_database" name="database" value="2">
                        <label for="two_database">良</label>
                        <input type="radio" id="three_database" name="database" value="3">
                        <label for="three_database">優</label>
                        <input type="radio" id="four_database" name="database" value="4">
                        <label for="four_database">秀</label>
                        <input type="radio" id="none_database" name="database">
                        <label for="none_database">取得していない</label>

                        <input type="hidden" class="count" value="2">
                    </td>
                </tr>
                <tr>
                    <td>微積分</td>
                    <td>
                        <input type="radio" id="zero_Calculus" name="Calculus" value="0">
                        <label for="zero_Calculus">不可</label>
                        <input type="radio" id="one_Calculus" name="Calculus" value="1">
                        <label for="one_Calculus">可</label>
                        <input type="radio" id="two_Calculus" name="Calculus" value="2">
                        <label for="two_Calculus">良</label>
                        <input type="radio" id="three_Calculus" name="Calculus" value="3">
                        <label for="three_Calculus">優</label>
                        <input type="radio" id="four_Calculus" name="Calculus" value="4">
                        <label for="four_Calculus">秀</label>
                        <input type="radio" id="none_Calculus" name="Calculus">
                        <label for="none_Calculus">取得していない</label>

                        <input type="hidden" class="count" value="1">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="submit" value="送信">
    </form>
</body>

</html>
<?php
    $sum = $_POST["count"]; // 総単位数
    echo "総単位数 : " . $sum . "<br>";
  ?>

終わりに

inputのvalueを取得した時 文字列となっていた parseInt()で整数値にして計算することができる

要素追加時 document.insert.appendChildの insertはフォームのnameから取ってきていることに 気が付くのに時間がかかった

参考サイト

javascriptでtypeの操作

やったこと

入力画面にて、パスワードを2回入力を実装しようとしていたところ

離脱率が高くなるので、ボタンでパスワードの表示、非表示を切り替えた方がよいと知り

inputのtype操作を行った

コード

<!DOCTYPE html>
<html lang="ja">
<title></title>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript">
        function show_id() {
            var show = document.getElementById("password");
            if (show.type == "password") {
                show.setAttribute("type", "text");
            }
            else {
                show.setAttribute("type", "password");
            }
        };
    </script>
</head>

<body>
    <li>
        <label for="password">パスワード</label>
        <input type="password" name="password" id="password">
        <a href="#" id="show_id" onclick="show_id()">Show_id</a>
    </li>
</body>

</html>

終わりに

ByClassNameで要素を取得しようとしたところ詰まってしまい、teratailで質問した

結局、idを利用したがclassを使用する時には気をつけたい

JQuaryを使ったら簡単にできるんだけど、勉強のためだと自分に言い聞かせてる。Mなのか?

javascriptで半角英数だけ入力させる方法

コード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>ログイン画面</title>
  <script>
    function checkname() {
      var str1 = document.login.user_name.value;
      var lastone = str1.substring(str1.length - 1, str1.length);
      if (lastone.match(/[^A-Za-z0-9¥s.-]+/)) {
        correctstr1 = str1.substring(0, str1.length - 1);
        document.login.user_name.value = correctstr1;
        alert("半角英数で入力してください");
      }
    }

    function checkpass() {
      var str1 = document.login.password.value;
      var lastone = str1.substring(str1.length - 1, str1.length);
      if (lastone.match(/[^A-Za-z0-9¥s.-]+/)) {
        correctstr1 = str1.substring(0, str1.length - 1);
        document.login.user_name.value = correctstr1;
        alert("半角英数で入力してください");
      }
    }
  </script>
</head>

<body>
  <div class="login">
    <form action="login.php" method="post" name="login">
      ユーザ名
      <input type="text" name="user_name" placeholder="name" onKeyup="checkname()" oncopy="return false" onpaste="return false"
        oncontextmenu="return false">
      <br> パスワード
      <input type="password" name="password" onkeyup="checkpass()" oncopy="return false" onpaste="return false" oncontextmenu="return false">
      <br>
      <input type="submit">
    </form>
  </div>
</body>

</html>

終わりに

onpasteで、コピペを拒否できるようだ

ログイン画面のhtml側の処理を考えるだけでかなり勉強になった

Alt + Tab が便利すぎる件

インターンmacを使っていて、指で画面を切り替えることを知った。 windowsでもできたら、作業効率に繋がると思い調べると Alt + Tabで画面切り替えるようだ。

だんだん、mac買いたい欲が薄れていた

mysqlからmysqliへの対応

経緯

teratailでPHPのことについて質問していると

PHP7系からmysqlが使えないと知った

参考記事

大学でも、mysqlで学んでいたためmysqliでのアクセス方法を知っておくべきだと思った

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ログイン画面</title>
<script>
</script>
</head>
<body>
  <?php


    $mysqli = mysqli_connect("localhost","root","","lab");
    if($mysqli-> connect_error){
      echo $mysqli->connect_error;
      exit();
    }
    else{
      $mysqli->set_charset("utf8");
    }

    $sql = "SELECT student_id FROM student_pass";
    $result = $mysqli->query($sql);
    if ($result) {
      while ($row = $result->fetch_assoc()) {
        echo htmlspecialchars($row["student_id"]) ."<br>";
      }
      $result->close();
    }

    $mysqli->close();
  ?>
 </body>
</html>

 データベースの構成

table名 student_pass

student_id pass
1 imaharu

終わりに

大学で、最新バージョンを学んでいれば 1時間をお酒に費やすことができた

タイトルなんてないただのメモ1

優秀なエンジニアの方へ

間違った解釈があったら、指摘して頂けると助かります

configファイル

設定ファイルのこと

エンドポイント

ネットワークに接続されたネット端末のこと PCやスマホなどのこと

webSocket

クライアントとサーバの双方からデータを送受信できる 以前はロングポーリングでwebの通信を行っていた。 ロングポーリグはサーバから通信を行うことはできなかった

Couchbase

ドキュメント型NoSQLデータベースのこと まだ、情報が充実していないので、また調べる 公式

終わりに

通信関係の知識が全然ない websocket技術が確立されたことによって、スマホアプリが 伸びてきたのだろうか