前提・実現したいこと
FuelPHPを使ってLINEのようなアプリを作りたいです。
具体的には投稿フォームから送った内容を同じ画面に表示させたいです。
FuelPHP初心者です。
いろいろなサイトを参考にしているうちに自分が今何をやっているのかわからなくなりました...
何から取り掛かればいいのかわからなくなりました。
それだけでもアドバイスをいただけると幸いです。
発生しているエラー
ailed to load resource: the server responded with a status of 500 (Internal Server Error)
該当のソースコード
PHP
1views/chat.php 2 3<?php foreach($posts as $post) : ?> 4 <p class='js-regist' id="post"><?php echo Str::truncate($post->content, 200); ?></p> 5 <!-- truncate メソッド:文字列を指定した長さで切り詰める --> 6<?php endforeach; ?> 7 8<h1>フォーム送信</h1> 9<?php echo Form::open('/chat/add') ?> 10 <div class="js-get-val-content"><?php echo Form::textarea('content', Input::post('content')) ?><br></div> 11 <!-- input クラス:HTTP パラメータやサーバ変数、ユーザエージェント情報へのアクセス --> 12 <div class='load'><?php echo Form::submit('send', '送信'); ?></div> 13<?php echo Form::close(); ?> 14 15<h1>フォーム送信</h1> 16<?php echo Form::open('/chat/add') ?> 17 <div class="js-get-val-content"><?php echo Form::textarea('content', Input::post('content')) ?><br></div> 18 <!-- input クラス:HTTP パラメータやサーバ変数、ユーザエージェント情報へのアクセス --> 19 <div class='load'><?php echo Form::submit('send', '送信'); ?></div> 20<?php echo Form::close(); ?> 21 22<h1>ajax送信</h1> 23<div id='return'></div> 24<textarea id='main' name='content'></textarea><br> 25<button id='send'>送信</button>
PHP
1controller/ajax.controller 2 3<?php 4class Controller_Ajax extends Controller_Rest{ 5 6 public function post_create(){ //関数 HTTPメソッド_処理名 7 $content = $_POST['post']; //main.jsからs送信されたデータ 8 $user_id = Arr::get(Auth::get_user_id(),1); 9 // Auth::get_user_id() : ログイン中のユーザーIDを取得。 10 // 注意点がありこのメソッドの戻り値はドライバ名とユーザーIDの配列。 11 $array = array("content" => $content, "user_id" => $user_id); 12 header("Content-type: application/json; charset=UTF-8"); 13 // 指定しないと、text/html型で処理される 14 // JSONデータを処理することを指定 15 $json = json_encode($array); //jsonデータに変換 16 return $this->response($json, 200); 17 // 応答データを送信 18 //HTTPステータスコード200:リクエストが正常に処理できた。 19 } 20 21}
javascript
1js/main.js 2 3window.onload = (function(){ 4 console.log('test'); 5 6 $('#send').on('click', function(event){ 7 let content = $('#main').val();//chat.phpの値を代入 8 $.ajax({ 9 type: 'POST', //HTTPリクエストのタイプ 10 url: 'ajax/create.json', // リクエストしたいURLを記載。送信先 chat.php? 11 dataType: 'json', //受け取るデータの形 12 data: { 13 //渡すデータをここに記述 14 "content" : content //データ内でpostという名前で利用するため 15 }, 16 }) 17 .done(function(data) { 18 //成功した時の処理 19 console.log('送信完了'); 20 $('#return').append('<p>' + data.content + '</p>'); 21 }) 22 .fail(function(XMLHttpRequest, textStatus, errorThrown) { 23 //失敗した時の処理 24 alert('読み込み失敗'); 25 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 26 console.log("textStatus : " + textStatus); 27 alert(errorThrown); 28 }); 29 }) 30 31}); 32
PHP
1config/routes.php 2 3<?php 4return array( 5 '_root_' => 'welcome/index', // The default route 6 '_404_' => 'welcome/404', // The main 404 route 7 8 'login' => 'login/login', 9 "signin" => "login/signin", 10 "logout" => "login/logout", 11 'registration' => 'login/registration', 12 "chat" => "chat/chat", 13 // "chat" => "ajax/chat", 14 "ajax/post-rgist" => "ajax/post/regist", 15 16 'hello(/:name)?' => array('welcome/hello', 'name' => 'hello'), 17);
PHP
1views/template.php 2 3<!DOCTYPE html> 4<html> 5 <head> 6 <meta charset="utf-8"> 7 <title><?php echo '実習課題'; ?></title> 8 <?php echo Asset::css('style.css'); ?> 9 <?php echo Asset::css('bootstrap.css'); ?> 10 <?php echo Asset::css('bootstrap.min.css'); ?> 11 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 12 <?php echo Asset::js(array('bootstrap.min.js', 'main.js')); ?> 13 </head> 14 <body> 15 <div id='header'> 16 <?php //echo $header; ?> 17 </div> 18 <div id='wrapper'> 19 <div id="content"> 20 テンプレートです<br> 21 <?php echo $content; ?> 22 </div> 23 </div> 24 <div id='footer'> 25 <?php //echo $footer; ?> 26 </div> 27 </body> 28</html>
試したこと
まず投稿機能は作成して、操作確認も問題ありませんでした。
しかし、非同期通信を行うためにどこを修正したらいいのかわからず、いくつかのサイトを参考に幾つかのフォームを作成しましたが、どれもうまく動きません。
見づらくて申し訳ありません。