Ajax、PHP、mySQLで和菓子情報WEBアプリ　作り方（select,insert,update,delete基本）│ちからえもんWEB・WINDOWSプログラミング

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”を表示させます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ajaxで名簿システム作成、SELECT,INSERT,UPDATE,DELETEをする。PHP mySQLとの組み合わせ</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"><!--　←　触らないBootstrap v4.3.1　-->
    <script src="js/jquery-3.4.1.min.js"></script><!--　←　触らない　-->
    <script src="js/bootstrap.min.js"></script><!--　←　触らない　-->
    <script src="myjquery12.js"></script><!--　←　ここにJQuery加筆していく　-->
    <style>
        h1{font-size:1.3rem;}
        h2{font-size:1.15rem;}
        #table td{padding:2px auto !important;}
        #table th:first-child { width:70px; }
        #table th:last-child { width:150px; }
        #table th:nth-last-child(2) { width:150px; }
        @media screen and (max-width: 480px) { 
        	#table th:first-child { width:50px; }
	        #table th:last-child { width:50px; }
	        #table th:nth-last-child(2) { width:50px; }        	
        }
    </style>
</head>
<body class="">
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="">
                <h1 class="text-primary my-3">Ajax、PHP、mySQLで和菓子情報WEBアプリ　作り方</h1>
                <div class=" ml-2 my-3">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#InputForm">
                        和菓子登録
                    </button>
                    <!--data-toggleでターゲットを開閉-->
                </div>
                <div class="">
        			<!--要素table①-->　 
                    <div id="table" class="table table-striped">avcc</div>
                </div>
            </div>
        </div>
    </div>
</div>
  		
  		<!--登録フォーム②-->
<div class="modal fade show" id="InputForm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="text-primary">登録フォーム</Form></h3>
            </div>
            <div class="modal-body">
                <p id="leakage_message" class="text-danger"></p>
                <form id="form1">
                    <input type="text" class="form-control my-2" placeholder="和菓子名" id="SeiName">
                    <input type="text" class="form-control my-2" placeholder="特徴" id="Tokucho">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btn_insert">登録する</button>
                <button type="button" class="btn btn-danger" id="btn_close" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

<!--修正フォーム③-->
<div class="modal fade show" id="UpdateForm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="text-success">修正フォーム</Form></h3>
            </div>
            <div class="modal-body">
                <p id="update_leakage_message" class="text-danger"></p>
                <form id="form1">
                    <input type="text" class="form-control my-2" placeholder="和菓子名" id="Update_SeiName">
                    <input type="text" class="form-control my-2" placeholder="特徴" id="Update_Tokucho">
                    <input type="hidden" class="form-control my-2" id="Update_id">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btn_update">修正する</button>
                <button type="button" class="btn btn-danger" id="btn_close" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>

<!--削除フォーム④-->
<div class="modal fade show" id="DeleteForm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="text-danger">削除フォーム</Form></h3>
            </div>
            <div class="modal-body">
                <p id="delete_message" class="text-danger"></p>
                <p id="delete_confirm">削除しますか？</p>
                <form id="form1">
                    <input type="text" class="form-control my-2" placeholder="和菓子名" id="Delete_SeiName" disabled="disabled">
                    <input type="text" class="form-control my-2" placeholder="特徴" id="Delete_Tokucho" disabled="disabled">
                    <input type="hidden" class="form-control my-2" id="Delete_id">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="btn_delete">削除する</button>
                <button type="button" class="btn btn-danger" id="btn_close" data-dismiss="modal">閉じる</button>
            </div>
        </div>
    </div>
</div>
  		
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

<!DOCTYPE html>

<head>

<title>Ajaxで名簿システム作成、SELECT,INSERT,UPDATE,DELETEをする。PHP mySQLとの組み合わせ</title>

<style>

h1{font-size:1.3rem;}

h2{font-size:1.15rem;}

#table td{padding:2px auto !important;}

#table th:first-child { width:70px; }

#table th:last-child { width:150px; }

#table th:nth-last-child(2) { width:150px; }

@media screen and (max-width: 480px) {

#table th:first-child { width:50px; }

#table th:last-child { width:50px; }

#table th:nth-last-child(2) { width:50px; }

}

</style>

</head>

<h1 class="text-primary my-3">Ajax、PHP、mySQLで和菓子情報WEBアプリ　作り方</h1>

和菓子登録

</button>

</div>

</div>

<h3 class="text-primary">登録フォーム</Form></h3>

</div>

</form>

</div>

</div>

<h3 class="text-success">修正フォーム</Form></h3>

</div>

</form>

</div>

</div>

<h3 class="text-danger">削除フォーム</Form></h3>

</div>

<p id="delete_confirm">削除しますか？</p>

</form>

</div>

</div>

</body>

</html>

jQueryファイル

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

$(document).ready(function(){
	//登録
	Insert_action();
	//一覧表示
	Display_action();
	//修正対象レコードの取得
	Get_record();
	//修正
	Update_action();
	//削除対象レコードの取得
	Get_record2();
	//削除
	Delete_action();
	
	//登録フォームが開いたとき
	$('#InputForm').on('shown.bs.modal', function () {
		$('#leakage_message').html('');
		$('#SeiName').val('');
		$('#Tokucho').val('');
	})
});

//登録
function Insert_action(){
	//登録するボタンクリック
	$(document).on('click','#btn_insert',function(){
		var SeiName = $('#SeiName').val();	
		var Tokucho = $('#Tokucho').val();
		var action = 'Insert';	
		//alert(action + SeiName + Tokucho);
		//入力漏れメッセージ
		if(SeiName == ""){ 
			$('#leakage_message').html('和菓子名を入力してください');
			return false; 
		}
		if(Tokucho == ""){ 
			$('#leakage_message').html('特徴を入力してください');
			return false; 
		}
		$.ajax({
			url:"action12.php",
			method:"POST",
			data:{action:action,SeiName:SeiName,Tokucho:Tokucho},
			success:function(data){
				$('#leakage_message').html(data);
				$('#InputForm').modal('show');
				//Insertした結果を表示する
				Display_action();
			}
		});
	});
	//閉じるボタンクリック
	$(document).on('click','#btn_close',function(){
		$('#leakage_message').html('');
		$('#SeiName').val('');
		$('#Tokucho').val('');
	});
}

//表示
function Display_action(){
	var action = 'Display';	
	$.ajax({
		url:"action12.php",
		method:"POST",
		data:{action:action},
		dataType: 'JSON',
		success:function(data){
			if (data.status=='success'){
				//console.log(data.str);
				$('#table').html(data.str);
			}
		}
	});
}

//修正対象レコードの取得
function Get_record(){
	//修正ボタンクリック
	$(document).on('click','#btn_edit',function(){
		var id = $(this).attr('data-id');
		var action = 'GetRecord';	
		//console.log(id);
		$.ajax({
			url:"action12.php",
			method:"POST",
			data:{action:action,id:id},
			dataType: 'JSON',
			success:function(data){
				//console.log(data[1]);
				$('#update_leakage_message').html('');
				$('#Update_id').val(data[0]);
				$('#Update_SeiName').val(data[1]);
				$('#Update_Tokucho').val(data[2]);
				$('#UpdateForm').modal('show');
			}
		});
	});	
}

//修正
function Update_action(){
	//修正するボタンクリック
	$(document).on('click','#btn_update',function(){		
		var id = $('#Update_id').val();	
		var SeiName = $('#Update_SeiName').val();		
		var Tokucho = $('#Update_Tokucho').val();
		var action = 'Update';	
		//alert(action + id + SeiName + Tokucho);
		//入力漏れメッセージの初期化
		$('#update_leakage_message').html('');
		//入力漏れメッセージ
		if(SeiName == ""){ 
			$('#update_leakage_message').html('和菓子名を入力してください');
			return false; 
		}
		if(Tokucho == ""){ 
			$('#update_leakage_message').html('特徴を入力してください');
			return false; 
		}
		$.ajax({
			url:"action12.php",
			method:"POST",
			data:{action:action,SeiName:SeiName,Tokucho:Tokucho,id:id},
			success:function(data){
				$('#update_leakage_message').html(data);
				$('#UpdateForm').modal('show');
				//Updateした結果を表示する
				Display_action();
			}
		});
	});
	//閉じるボタンクリック
	$(document).on('click','#btn_close',function(){
		$('#update_leakage_message').html('');
		$('#Update_SeiName').val('');
		$('#Update_Tokucho').val('');
		$('#Update_id').val('');
	});
}

//削除対象レコードの取得
function Get_record2(){
	//修正ボタンクリック
	$(document).on('click','#btn_edit_delete',function(){
		var id = $(this).attr('data-id-delete');
		var action = 'GetRecord';	
		//console.log(id);
		$.ajax({
			url:"action12.php",
			method:"POST",
			data:{action:action,id:id},
			dataType: 'JSON',
			success:function(data){
				//console.log(data[1]);
				$('#Delete_id').val(data[0]);
				$('#Delete_SeiName').val(data[1]);
				$('#Delete_Tokucho').val(data[2]);
				$('#DeleteForm').modal('show');
				$('#delete_message').html('削除しますか？');
				$('#btn_delete').show();
			}
		});
	});	
}

//削除
function Delete_action(){
	//削除するボタンクリック
	$(document).on('click','#btn_delete',function(){
		var id = $('#Delete_id').val();
		var action = 'Delete';
		//alert(action + id);
		$.ajax({
			url:"action12.php",
			method:"POST",
			data:{action:action,id:id},
			success:function(data){
				$('#delete_message').html(data);
				$('#delete_confirm').html('');
				$('#DeleteForm').modal('show');
				$('#btn_delete').hide();
				//Deleteした結果を表示する
				Display_action();
			}
		});
	});
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

$(document).ready(function(){

//登録

Insert_action();

//一覧表示

Display_action();

//修正対象レコードの取得

Get_record();

//修正

Update_action();

//削除対象レコードの取得

Get_record2();

//削除

Delete_action();

//登録フォームが開いたとき

$('#InputForm').on('shown.bs.modal', function () {

$('#leakage_message').html('');

$('#SeiName').val('');

$('#Tokucho').val('');

})

});

//登録

function Insert_action(){

//登録するボタンクリック

$(document).on('click','#btn_insert',function(){

var SeiName = $('#SeiName').val();

var Tokucho = $('#Tokucho').val();

var action = 'Insert';

//alert(action + SeiName + Tokucho);

//入力漏れメッセージ

if(SeiName == ""){

$('#leakage_message').html('和菓子名を入力してください');

return false;

}

if(Tokucho == ""){

$('#leakage_message').html('特徴を入力してください');

return false;

}

$.ajax({

url:"action12.php",

method:"POST",

data:{action:action,SeiName:SeiName,Tokucho:Tokucho},

success:function(data){

$('#leakage_message').html(data);

$('#InputForm').modal('show');

//Insertした結果を表示する

Display_action();

}

});

//閉じるボタンクリック

$(document).on('click','#btn_close',function(){

$('#leakage_message').html('');

$('#SeiName').val('');

$('#Tokucho').val('');

});

}

//表示

function Display_action(){

var action = 'Display';

$.ajax({

url:"action12.php",

method:"POST",

data:{action:action},

dataType: 'JSON',

success:function(data){

if (data.status=='success'){

//console.log(data.str);

$('#table').html(data.str);

}

});

}

//修正対象レコードの取得

function Get_record(){

//修正ボタンクリック

$(document).on('click','#btn_edit',function(){

var id = $(this).attr('data-id');

var action = 'GetRecord';

//console.log(id);

$.ajax({

url:"action12.php",

method:"POST",

data:{action:action,id:id},

dataType: 'JSON',

success:function(data){

//console.log(data[1]);

$('#update_leakage_message').html('');

$('#Update_id').val(data[0]);

$('#Update_SeiName').val(data[1]);

$('#Update_Tokucho').val(data[2]);

$('#UpdateForm').modal('show');

}

});

}

//修正

function Update_action(){

//修正するボタンクリック

$(document).on('click','#btn_update',function(){

var id = $('#Update_id').val();

var SeiName = $('#Update_SeiName').val();

var Tokucho = $('#Update_Tokucho').val();

var action = 'Update';

//alert(action + id + SeiName + Tokucho);

//入力漏れメッセージの初期化

$('#update_leakage_message').html('');

//入力漏れメッセージ

if(SeiName == ""){

$('#update_leakage_message').html('和菓子名を入力してください');

return false;

}

if(Tokucho == ""){

$('#update_leakage_message').html('特徴を入力してください');

return false;

}

$.ajax({

url:"action12.php",

method:"POST",

data:{action:action,SeiName:SeiName,Tokucho:Tokucho,id:id},

success:function(data){

$('#update_leakage_message').html(data);

$('#UpdateForm').modal('show');

//Updateした結果を表示する

Display_action();

}

});

//閉じるボタンクリック

$(document).on('click','#btn_close',function(){

$('#update_leakage_message').html('');

$('#Update_SeiName').val('');

$('#Update_Tokucho').val('');

$('#Update_id').val('');

});

}

//削除対象レコードの取得

function Get_record2(){

//修正ボタンクリック

$(document).on('click','#btn_edit_delete',function(){

var id = $(this).attr('data-id-delete');

var action = 'GetRecord';

//console.log(id);

$.ajax({

url:"action12.php",

method:"POST",

data:{action:action,id:id},

dataType: 'JSON',

success:function(data){

//console.log(data[1]);

$('#Delete_id').val(data[0]);

$('#Delete_SeiName').val(data[1]);

$('#Delete_Tokucho').val(data[2]);

$('#DeleteForm').modal('show');

$('#delete_message').html('削除しますか？');

$('#btn_delete').show();

}

});

}

//削除

function Delete_action(){

//削除するボタンクリック

$(document).on('click','#btn_delete',function(){

var id = $('#Delete_id').val();

var action = 'Delete';

//alert(action + id);

$.ajax({

url:"action12.php",

method:"POST",

data:{action:action,id:id},

success:function(data){

$('#delete_message').html(data);

$('#delete_confirm').html('');

$('#DeleteForm').modal('show');

$('#btn_delete').hide();

//Deleteした結果を表示する

Display_action();

}

});

}

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

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

<?php
$connect = new PDO("mysql:host=localhost;dbname=test;charset=utf8;",  'root',  'password' );
if(!$connect){
    echo "データベースに接続できません";
}

//登録用関数
function Insert(){
    global $connect;
    $sql = 'INSERT INTO monaka_table(SeiName,Tokucho) VALUE (:SeiName, :Tokucho)';
    $prepare = $connect->prepare($sql);    
    $prepare->bindValue(':SeiName', $_POST["SeiName"], PDO::PARAM_STR);
    $prepare->bindValue(':Tokucho', $_POST["Tokucho"], PDO::PARAM_STR);
    if( $prepare->execute() ){
        echo "登録しました";
    }else{
        echo "登録できませんでした";
    }
}

//表示用関数
function Display(){
    global $connect;
    $str="";
    $str.='<table class="table table-bordered">
            <tr>
                <th class="info text-center">ID</th>
                <th class="info text-center">和菓子名</th>
                <th class="info text-center">特徴</th>
                <th class="info text-center">修正</th>
                <th class="info text-center">削除</th>
            </tr>';
    $sql="SELECT id, SeiName, Tokucho FROM monaka_table ORDER BY id DESC";     
    $stmt = $connect->prepare($sql);
    $stmt->execute(); 
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $str.='<tr>
                    <td class="text-center">'.$row['id'].'</td>
                    <td>'.$row['SeiName'].'</td>
                    <td>'.$row['Tokucho'].'</td>
                    <td class="text-center"><button class="btn btn-success" id="btn_edit" data-id='.$row['id'].'>修正</button></td>
                    <td class="text-center"><button class="btn btn-danger" id="btn_edit_delete" data-id-delete='.$row['id'].'>削除</button></td>
                </tr>';
    }
    $str.='</table>';
    echo json_encode(['status'=>'success','str'=>$str]);
}

//修正対象レコードの取得
function Getrecord($id){   
    global $connect;
    $sql="SELECT id, SeiName, Tokucho FROM monaka_table WHERE id=:id";    
    $stmt = $connect->prepare($sql);
    $stmt->bindValue(':id', $id, PDO::PARAM_INT);
    $stmt->execute();
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $User_data[0] = $row['id'];
    $User_data[1] = $row['SeiName'];
    $User_data[2] = $row['Tokucho'];
    echo json_encode($User_data);
}

//削除用関数
function Delete(){
    global $connect;
    $sql = 'DELETE FROM monaka_table WHERE id=:id'; 
    $prepare = $connect->prepare($sql);    
    $prepare->bindValue(':id', $_POST["id"], PDO::PARAM_INT);
    if( $prepare->execute() ){
        echo "ID:".$_POST["id"]."を削除しました";
    }else{
        echo "ID:".$_POST["id"]."を削除できませんでした";
    }
}

//修正用関数
function Update(){
    global $connect;
    $sql = 'UPDATE monaka_table SET SeiName=:SeiName,Tokucho=:Tokucho WHERE id=:id'; 
    $prepare = $connect->prepare($sql);    
    $prepare->bindValue(':SeiName', $_POST["SeiName"], PDO::PARAM_STR);
    $prepare->bindValue(':Tokucho', $_POST["Tokucho"], PDO::PARAM_STR);
    $prepare->bindValue(':id', $_POST["id"], PDO::PARAM_INT);
    if( $prepare->execute() ){
        echo "ID:".$_POST["id"]."を修正しました";
    }else{
        echo "ID:".$_POST["id"]."を修正できませんでした";
    }
}

//登録
if($_POST['action'] == 'Insert') {
    Insert();
}
//一覧表示
if($_POST['action'] == 'Display') {
    Display();
}
//レコードの取得
if($_POST['action'] == 'GetRecord') {
    $id = $_POST['id'];
    Getrecord($id);
}
//修正
if($_POST['action'] == 'Update') {
    Update();
}
//削除
if($_POST['action'] == 'Delete') {
    Delete();
}
?>

100

101

102

103

104

105

106

107

108

109

110

111

112

<?php

$connect = new PDO("mysql:host=localhost;dbname=test;charset=utf8;", 'root', 'password' );

if(!$connect){

echo "データベースに接続できません";

}

//登録用関数

function Insert(){

global $connect;

$sql = 'INSERT INTO monaka_table(SeiName,Tokucho) VALUE (:SeiName, :Tokucho)';

$prepare = $connect->prepare($sql);

$prepare->bindValue(':SeiName', $_POST["SeiName"], PDO::PARAM_STR);

$prepare->bindValue(':Tokucho', $_POST["Tokucho"], PDO::PARAM_STR);

if( $prepare->execute() ){

echo "登録しました";

}else{

echo "登録できませんでした";

}

//表示用関数

function Display(){

global $connect;

$str="";

$str.='<table class="table table-bordered">

<tr>

</tr>';

$sql="SELECT id, SeiName, Tokucho FROM monaka_table ORDER BY id DESC";

$stmt = $connect->prepare($sql);

$stmt->execute();

while($row = $stmt->fetch(PDO::FETCH_ASSOC)){

$str.='<tr>

<td>'.$row['SeiName'].'</td>

<td>'.$row['Tokucho'].'</td>

</tr>';

}

$str.='</table>';

echo json_encode(['status'=>'success','str'=>$str]);

}

//修正対象レコードの取得

function Getrecord($id){

global $connect;

$sql="SELECT id, SeiName, Tokucho FROM monaka_table WHERE id=:id";

$stmt = $connect->prepare($sql);

$stmt->bindValue(':id', $id, PDO::PARAM_INT);

$stmt->execute();

$row = $stmt->fetch(PDO::FETCH_ASSOC);

$User_data[0] = $row['id'];

$User_data[1] = $row['SeiName'];

$User_data[2] = $row['Tokucho'];

echo json_encode($User_data);

}

//削除用関数

function Delete(){

global $connect;

$sql = 'DELETE FROM monaka_table WHERE id=:id';

$prepare = $connect->prepare($sql);

$prepare->bindValue(':id', $_POST["id"], PDO::PARAM_INT);

if( $prepare->execute() ){

echo "ID:".$_POST["id"]."を削除しました";

}else{

echo "ID:".$_POST["id"]."を削除できませんでした";

}

//修正用関数

function Update(){

global $connect;

$sql = 'UPDATE monaka_table SET SeiName=:SeiName,Tokucho=:Tokucho WHERE id=:id';

$prepare = $connect->prepare($sql);

$prepare->bindValue(':SeiName', $_POST["SeiName"], PDO::PARAM_STR);

$prepare->bindValue(':Tokucho', $_POST["Tokucho"], PDO::PARAM_STR);

$prepare->bindValue(':id', $_POST["id"], PDO::PARAM_INT);

if( $prepare->execute() ){

echo "ID:".$_POST["id"]."を修正しました";

}else{

echo "ID:".$_POST["id"]."を修正できませんでした";

}

//登録

if($_POST['action'] == 'Insert') {

Insert();

}

//一覧表示

if($_POST['action'] == 'Display') {

Display();

}

//レコードの取得

if($_POST['action'] == 'GetRecord') {

$id = $_POST['id'];

Getrecord($id);

}

//修正

if($_POST['action'] == 'Update') {

Update();

}

//削除

if($_POST['action'] == 'Delete') {

Delete();

}

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

Prev

記事がありません
Next

2020年5月23日
Ajax、PHP、mySQLで画像アップロードWEBアプリ　作り方

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

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

データベーステーブル

フロント側PHPファイル

jQueryファイル

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

Ajax、PHP、mySQLで画像アップロードWEBアプリ　作り方

PHP　jQuery,Ajax解説記事の最新記事8件

PHPでショッピングカートを作成

Ajax、PHP、mySQLで画像アップロードWEBアプリ　作り方

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

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

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

データベーステーブル

フロント側PHPファイル

jQueryファイル

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

Ajax、PHP、mySQLで画像アップロードWEBアプリ 作り方

PHP jQuery,Ajax解説記事の最新記事8件

PHPでショッピングカートを作成

Ajax、PHP、mySQLで画像アップロードWEBアプリ 作り方

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

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

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

Ajax、PHP、mySQLで画像アップロードWEBアプリ　作り方

PHP　jQuery,Ajax解説記事の最新記事8件

Ajax、PHP、mySQLで画像アップロードWEBアプリ　作り方

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