EXCEL VBAやPHP、Query、Ajaxに関するWINDOWS・WEBプログラミングの解説ブログです。

Ajax、PHP、mySQLで和菓子情報WEBアプリ 作り方(select,insert,update,delete基本)

Ajax、PHP、mySQLで和菓子情報WEBアプリ 作り方(select,insert,update,delete基本)

和菓子をネタにAjax,PHP,mySQLの簡単な問い合わせ、挿入、更新、削除学習用アプリを作成しました。Ajaxでページ遷移無しでのアプリですので、レガートでモダンです。PHPとmySQLの組み合わせ例でのSELECT、INSERT、UPDATE、DELETEの例文は山ほどありますが、AJAXがらみでの例文はさほど見かけないように思います。

「和菓子登録」をクリックすると、下の登録フォームが表示されます。「和菓子名称」と「特徴」を入力し、「登録する」ボタンをクリックします。当然ですが、登録(INSERT)されます。未入力の場合は、アラートが表示され、登録できません。登録結果は、表に問合せ結果(SELECT)が表示されます。

修正および削除する場合は、表内の対象レコードの「修正」あるいは「削除」ボタンをクリックします。修正の場合、下の修正フォームが表示されます。「和菓子名称」と「特徴」を入力し、「修正する」ボタンをクリックします。当然ですが、更新(UPDATE)されます。未入力の場合は、アラートが表示され、修正できません。削除の場合は、削除(DELETE)されます。

 

データベーステーブル

下がmySQLテーブル構造です。連番auto_incrementであるidとvarchar型のSeiName,Tokuchoの3つのフィールドです。

下がテーブル問合せSELECT結果です。

フロント側PHPファイル

jqueryとbootstrap読み込んでいます。要素 table に、SELECT問合せ結果全件表示させています。

登録は、和菓子登録ボタンdata-target=”#InputForm”をクリックすることにより、モーダルウインドウid=”InputForm”を表示させます。

修正は、要素table内、対象レコードの修正ボタンid=”btn_edit”をクリックすることにより、モーダルウインドウid=”UpdateForm”を表示させます。

jQueryファイル

理解しやすいように、登録実行 Insert_action()、表示 Display_action()、修正対象レコードの取得 Get_record()、修正実行 Update_action()、削除対象レコードの取得 Get_record2()、削除実行 Delete_action() として関数を作成しています。データの読み込み・書き込みはAjaxを介しています。

バックグランド側PHPファイル

jQueryファイルからPOSTされることにより、mySQLに接続し、レコードの書き込み・読み込み処理をしています。

当WEBアプリをご理解いただければ、名簿マスターとか商品マスターとか、かなり汎用的に使えると思います。