laravel5・ajaxでmysqlのテーブルにデータを登録してみます。
CONTENTS
仕様
- 二つのテキストボックスにそれぞれ名前とパスワードを入力した後に送信ボタンを押す
- 画面が更新されることなく入力したデータがmysqlのuserTBLに登録される
- データの登録をお知らせするアラートが出て終了
テーブル
|
1 2 3 4 5 6 7 8 |
mysql> show columns from userTBL; +-------+--------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+--------------+------+-----+---------+----------------+ | ID | int(11) | NO | PRI | NULL | auto_increment | | NAME | varchar(50) | YES | | NULL | | | PW | varchar(100) | YES | | NULL | | +-------+--------------+------+-----+---------+----------------+ |
IDは自動採番。テーブル名はuserTBL。
サンプルコード
ルートディレクトリ以下にhogeというプロジェクトを立ち上げています。
以下、ルートディレクトリ/hoge//public/dataadd/にアクセスすると登録画面が表示されるという設定です。
ファイル一覧
- route.php
- dataadd.php：登録画面表示用
- add.js：ajax制御用
- dataaddcon.php：データ登録用
それとjquery。
route.php
|
1 2 3 4 5 6 |
Route::get('dataadd', function() { return view('dataadd'); //登録画面表示 }); Route::any('add','dataaddcon@add'); //データ登録 |
登録画面のdataadd.php読み込みと
ajaxがaddにPOSTした際にデータ登録のdataaddcon.phpが発動。
dataadd.php（/resoueces/views/）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> //jquery <script type="text/javascript" src="js/add.js"></script> //ajax制御用 </head> <body> 名前を入力してください。 <br><br> <input type="text" id="name" name="name"> //名前入力欄 <br><br> パスワードを入力してください。 <br><br> <input type="password" id="password" name="password"> //パスワード入力欄 <br><br> <input type="submit" id="submit" name="submit" value="送信"> //送信ボタン </body> </html> |
add.js（/public/js/）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
$(function() { $('#submit').click(function() //送信ボタンをクリック { if($('#name').val()==''||$('#password').val()=='') //名前欄かパスワード欄どちらかが空欄だったら { alert('名前かパスワードが入力されていません！'); //アラート } else //空欄がない { $.ajax( { type: "POST", //POSTで渡す url: "add", //POST先 data: { "name":$('#name').val(), //名前 "password":$('#password').val() //パスワード }, success: function(hoge) //通信成功、dataaddcon.phpからの返り値を受け取る { if(hoge==0) //返り値が0→成功 { alert('正常終了しました'); } else if(hoge==1) //返り値が1→失敗 { alert('失敗しました'); } }, error: function(XMLHttpRequest,textStatus,errorThrown) //通信失敗 { alert('処理できませんでした'); } }); return false; //ページが更新されるのを防ぐ } }); }); |
データをPOSTで渡してから、戻ってきた文字列によってデータ登録の成否をお知らせ。
dataaddcon.php（/app/Http/Controller/）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use Response; //Response::makeのため use Input; //Input::getのため use DB; //DB操作のため class dataaddcon extends Controller { public function add() { $name=Input::get('name'); //名前 $password=Input::get('password'); //パスワード $name=htmlspecialchars($name); //フォーム欄のコード埋め込みを防ぐ $password=htmlspecialchars($password); try //実行 { DB::insert('insert into userTBL (NAME,PW) values (?,?)',[$name,md5($password)]); //データ登録 return Response::make('0'); //データ登録成功 } catch(Exception $e) //例外 { return Response::make('1'); //データ登録失敗 } } } |
add.jsからの文字列の受け渡しのために、Input::get()とResponse::make()を使います。
文字列の受け渡しとデータベース操作のために
|
1 2 3 |
use Response; use Input; use DB; |
この三行を追加。
↓もしuse Inputを追加してエラーになった時
体はバナナで出来ているテーブルへの登録は一行で完了します。凄くスッキリしてますね。
laravelはcakephpより少量のコードで書けて楽。
↓cakephp3で同じことやる