質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • PHP

    20252questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • Ajax

    1088questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

自動生成された画像ごとにいいねボタンを実装したい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 189

slimat

score 4

 前提・実現したいこと

投稿機能と検索機能を持ったサイトを作っています。自動生成された画像ごとにいいねボタンの実装を実現したいです。
下記サイトを参考にしています。
リンク内容
↑Ajax を使ってリアルタイムに反映する簡易投票システムを設置する

エラーが出てますが、なぜなのか分かりません。
特に、「オノマトペがserch.phpに届きませんでした」というエラーがここずっと出続けています。
serch.phpにおいて、index2.htmlから送られてきたテキスト処理部分がうまくいっていないと思っています。
下はserch.phpをphpコマンドで実行したものです。エラーは下の方に出ています。

 発生しているエラーメッセージ

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(function() {
                allowAjax = true;
                $('.btn_vote').click(function() { //class名は絶対これ
                        if (allowAjax) {
                                allowAjax = false;
                                $(this).toggleClass('on');
                                var id = $(this).attr('id');
                                $(this).hasClass('on') ? Vote(id, 'plus') : Vote(id, 'minus'); //vote関数に送ってる
                        }
                });
        });
        function Vote(id, plus) {
                cls = $('.' + id);
                cls_num = Number(cls.html());
                count = plus == 'minus' ? cls_num - 1 : cls_num + 1;
                $.post('vote.php', {'file': id, 'count': count}, function(data) { //postでvote.phpにたぶん送っている
                        if (data == 'success') cls.html(count);
                        setTimeout(function() {
                                allowAjax = true;
                        }, 1000);
                });
        }
</script>
</head>
<body>
        <article>
                PHP Notice:  Undefined variable: enterOnomatope in /home/sys/s216045/public_html/md_syn/serch.php on line 62
PHP Stack trace:
PHP   1. {main}() /home/sys/s216045/public_html/md_syn/serch.php:0
を受け取りました
<p>オノマトペがserch.phpに届きませんでした</p>
        </article>
        <a href="index2.html">return to index2.html</a>
</body>
</html>

 該当のソースコード

index2.htmlのformタグの部分

<form action="serch.php" method="post" type="text">
  <input type="text" name="onomatopeSerch" placeholder="オノマトペを入力">
  <input type="submit" name="serch" value="検索">
</form>


serch.phpの中身

<?php
// 元々はindex.phpにあったコードをこちらに埋め込んでいることに注意!
// カウント数取得関数
if (isset($_POST["onomatopeSerch"])) {
    $enterOnomatope = $_POST["onomatopeSerch"]; //変数にそのオノマトペを代入
}
function get_count($file) { //sectionタグからファイル名(拡張子なし)を引数にして送られてくる
    // $res = $_POST["onomatopeSerch"];
    global $enterOnomatope;
    mkdir("data/$enterOnomatope"); //オノマトペごとのdatファイル格納フォルダ作成
    $filename = "data/$enterOnomatope/".$file.'.dat'; //カウント数が記入されているファイルのパスを代入
    $fp = @fopen($filename, 'r'); //そのファイルを開く作業を変数に代入?
    if ($fp) {
        $vote = fgets($fp, 9182); //変数に前回までに押された回数を代入
    } else {
        touch("$filename");
        $vote = 0; //php部分で送られたファイル名のファイルがなかったら投票数は0
    }
    return $vote;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function() {
        allowAjax = true;
        $('.btn_vote').click(function() { //class名は絶対これ
            if (allowAjax) {
                allowAjax = false;
                $(this).toggleClass('on');
                var id = $(this).attr('id');
                $(this).hasClass('on') ? Vote(id, 'plus') : Vote(id, 'minus'); //vote関数に送ってる
            }
        });
    });
    function Vote(id, plus) {
        cls = $('.' + id);
        cls_num = Number(cls.html());
        count = plus == 'minus' ? cls_num - 1 : cls_num + 1;
        $.post('vote.php', {'file': id, 'count': count}, function(data) { //postでvote.phpにたぶん送っている
            if (data == 'success') cls.html(count);
            setTimeout(function() {
                allowAjax = true;
            }, 1000);
        });
    }
</script>
</head>
<body>
    <article>
        <?php
        // if (isset($_POST["onomatopeSerch"])) {
        //     $enterOnomatope = $_POST["onomatopeSerch"]; //変数にそのオノマトペを代入
        // }
        // global $enterOnomatope;
        $aa = "を受け取りました";
        echo $enterOnomatope."$aa\n";
        if (isset($enterOnomatope)) { //オノマトペが届いてたら
            $dir_s = "onomatopes/$enterOnomatope/"; //そのオノマトペのタイトルのフォルダの中身を示すパスを代入
            $filelist = scandir($dir_s); //上記のフォルダの中身を代入、scandirでファイル名(ファイルのパスかも)を取得できる
            $count = count($filelist); //そのフォルダに含まれるファイルの数を代入
            $a = 0;
            for ($j = 0; $j < $count; $j++) { //jpgファイルの数を知りたい
                $file = pathinfo($filelist[$j]); //指定したフォルダに含まれるj番目のファイルの情報を代入
                $file_ext = $file["extension"]; //そのファイルの拡張子を代入
                if ($file_ext == "jpg") {
                    $a = $a + 1; //拡張子が"jpg"だったら1を足す
                } else {
                    $a = $a; //そのまま
                }
            }
            echo "<p>拡張子がjpgのファイル数 == $a</p>";

            if (file_exists("onomatopes/$enterOnomatope")) { //入力されたオノマトペをフォルダ名にしてるフォルダがあれば  && !(is_dir($file_path))

                for($i = 0; $i<$count; $i++) { //対象フォルダにあるファイルの数だけループ
                    $file = pathinfo($filelist[$i]); //指定したフォルダに含まれるi番目のファイルの情報を代入、こっちの方にも$filelistもってきたほうがいいのか
                    // $file_name=$file["basename"];
                    $file_extension = $file["extension"]; //そのファイルの拡張子を代入
                    $file_path = "onomatopes/$enterOnomatope/$filelist[$i]"; //i番目のファイルのパスを代入
                    if ($file_extension == "jpg") { //拡張子がjpgだったら
                        echo "<section>";
                        echo "<p><img src=\"$file_path\" width=\"300px\"></p>"; //i番目のファイルがjpgファイルだったら表示
                        echo "<div class=\"btn_area\">";
                        echo "<h2>$enterOnomatope</h2>";
                        echo "<p class=\"ico_heart count_".$i."\">"; //get_countに「いいね」の数が記入されているファイル名(拡張子抜き)を送信

                        get_count("count_$i"); //semi coronn
                        echo "</p>";
                        echo "<p class=\"btn_vote\" id=\"count_$i\"></p>"; //JavaScript部分にidを送ってる? idはファイル名にも使用される
                        echo "</div>";
                        echo "</section>";
                    } else { //拡張子がjpgじゃなかったら

                    }
                } //for分の終わり

            } else { //該当する画像はありません
                echo "<p>sorry,couldn't find you asked(there is no such directory.
                so let's upload image with onomatope you entered!!)</p>\n";
            }

        } else {
            echo "<p>オノマトペがserch.phpに届きませんでした</p>\n";
        }
        ?>
    </article>
    <a href="index2.html">return to index2.html</a>
</body>
</html>

vote.phpの中身

<?php
// カウントアップ処理
include 'serch.php';
$namefile    = $_POST['file']; //serch.phpのjavascriptの部分から送られてきた、入るのはsectionタグのid
$muchcount    = $_POST['count']; //たぶんユーザの処理後の「いいね」の数が入っている
$check    = $_SERVER['HTTP_X_REQUESTED_WITH'];

if ($namefile && $muchcount && $check && strtolower($check) == 'xmlhttprequest') {
  $filenamae = "data/$enterOnomatope/".$namefile.'.dat';
  $fp = @fopen($filenamae, 'w');
  flock($fp, LOCK_EX);
  fputs($fp, $count);
  flock($fp, LOCK_UN);
  fclose($fp);
  echo 'success';
}

一応画像アップロードの方のコードも...

upload.phpののコードです

<meta charset="utf-8">
<h1>アルバム作成:画像アップロード</h1>
<form action="upload_confirm.php" method="post" enctype="multipart/form-data">
<input type="file" name="upfile">
<input type="text" name="ono" placeholder="オノマトペを入力">
<input type="submit" value="読み込み" name="yomikomi">
</form>
<p>オノマトペは半角英数字で入力してください</p>
<a href="index2.html">戻る</a>

upload_confirm.phpのコードです

<?php
$msg = null;
if(isset($_FILES['upfile']) && is_uploaded_file($_FILES['upfile']['tmp_name'])){

  // $new_name = date("YmdHis");
  // auto make file
  $text = $_POST['ono']; //入力されたオノマトペを$textに代入
  if (file_exists("onomatopes/$text")) {
    echo "file existed";
  } else {
    mkdir("onomatopes/$text");
  }
  if (file_exists("onomatopes/$text")) {
    echo "mkdir.$text.success";
  }
  $a = "onomatopes/".$text."/".basename($_FILES['upfile']['name']); //$aに入力された画像の移動先のパスを代入 uncertain

  if(move_uploaded_file($_FILES['upfile']['tmp_name'], $a)){
    $msg = $a. 'のアップロードに成功しました';
  }else {
    $msg = 'アップロードに失敗しました';
  }
  echo "<p>".$text."</p>";

} else {
  echo "ohh fatal!\n";
}
?>
<?php
if(isset($_FILES['upfile'])){
  $p = basename($_FILES['upfile']['name']);
  $file_name = "onomatopes/$text/".$p;
  echo '<img src="';
  echo $file_name;
  echo '" width="300px">';
}
?>
<?php
if(isset($msg) && $msg == true){
  echo '<p>'. $msg . '</p>';
}
?>
<meta charset="utf-8">
<a href="upload.php">upload.php</a>

 補足情報

phpのバージョンは5.5.30です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • slimat

    2018/07/21 17:58

    了解しました。

    キャンセル

  • mts10806

    2018/07/21 18:12

    そしてこのままでは見づらいのでエラーメッセージも同じくコードブロックにしてください。

    キャンセル

  • slimat

    2018/07/21 18:15

    了解しました。ご指摘ありがとうございます。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20252questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • Ajax

    1088questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。