PDOで郵便番号辞書データベース HTMLで一覧表示

萩原賢二のコーディングストック > プログラミング > PDOで郵便番号辞書データベース HTMLで一覧表示

2019.07.21

【概要】
① postal.php（メインファイル）にて八地方区分ごとの都道府県一覧表示をします。

② 都道府県を選択して jquery:ajax()経由でサーバー側のphpファイル request.php　より都道府県一覧表を取得します。 requiest.php では　PDOでmysql嬢のデータベース「postcode」にqueryを発行して市町村コードを取得します。

③ 市町村コードをクリックすると郵便番号毎の町域リストを表示する「zipcode.php」に遷移します。
市町村コードは「GET」で送信されます。
「zipcode.php」では取得した市町村コードでSQLを発行して郵便番号リストを取得します。

サンプルページ

postal.js ソースコード

// postal.js
$(function(){ 
	$("li").on('click',function(){
		var leftPosition = 
		$(window).width()/2 - 
		$("#sample-dialog").outerWidth(true)/2;  
		var boxheight = $(window).height() -200;
		$("#sample-dialog").css({	"left": leftPosition ,
			"top": $(window).scrollTop() + 100 + "px",
			"height": boxheight + 'px' });
		$("#mesTitle").html("<h2>" + $(this).text() + "");
		$("#dialog-footer").html( $(this).text());
		$.ajax({
			url:'./request.php',
			type:'POST',
			data:{
				'city':$(this).text()
			}
		})
		// Ajaxリクエストが成功した時発動
		.done( (data) => {
			$("#eyecatchialog").html(data);
			$("#mask").removeClass('hidden');
			$("#sample-dialog").show(200);	
        })
        // Ajaxリクエストが失敗した時発動
		.fail( (data) => {
			$('.result').html(data);
			console.log(data);
		})
	});
	$(".dialog-close").on("click", function(){
		$("#eyecatchialog").scrollTop(0);

	    $(this).parents(".dialog").hide(200);
	    $("#mask").addClass('hidden');
	});
	
	$("#mask").on('click',function(){
		$(".dialog").scrollTop(0);
	    $(".dialog").hide(200);
	    $("#mask").addClass('hidden');

	});
});

// postal.js

$(function(){

$("li").on('click',function(){

var leftPosition =

$(window).width()/2 -

$("#sample-dialog").outerWidth(true)/2;

var boxheight = $(window).height() -200;

$("#sample-dialog").css({ "left": leftPosition ,

"top": $(window).scrollTop() + 100 + "px",

"height": boxheight + 'px' });

$("#mesTitle").html("<h2>" + $(this).text() + "");

$("#dialog-footer").html( $(this).text());

$.ajax({

url:'./request.php',

type:'POST',

data:{

'city':$(this).text()

}

})

// Ajaxリクエストが成功した時発動

.done( (data) => {

$("#eyecatchialog").html(data);

$("#mask").removeClass('hidden');

$("#sample-dialog").show(200);

})

// Ajaxリクエストが失敗した時発動

.fail( (data) => {

$('.result').html(data);

console.log(data);

})

});

$(".dialog-close").on("click", function(){

$("#eyecatchialog").scrollTop(0);

$(this).parents(".dialog").hide(200);

$("#mask").addClass('hidden');

});

$("#mask").on('click',function(){

$(".dialog").scrollTop(0);

$(".dialog").hide(200);

$("#mask").addClass('hidden');

});

request.php ソースコード

// request.php
<?php
    $dsn  = 'mysql:dbname=postcode;host=localhost';
    $user = "dbuser";
    $pass = "xxxxxxxxxxxxx";
    try{    
        $pdo = new PDO($dsn,$user,$pass);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 	    $pref_no = substr($_REQUEST["city"], 0,2);
 	    $sql = "select * from city where pref_no=$pref_no;";
 	    $stmt = $pdo->query($sql );
    	    $answercity = $stmt->fetchAll(PDO::FETCH_ASSOC);
 	echo "<table>";
	foreach( $answercity as $city ){
		echo "<tr><th>{$city[city_code]}</th>",
		"<td class=\"citylink\"><i class=\"fas fa-link\"></i> {$city[city_name]}</td>",
		"<td>{$city[city_kana]}</td></tr>\n";
	}
	?>
	<script>
	$('.citylink').on('click', function() {
		window.location.href = "zipcode.php?sity_code=" + $(this).prev().text();
	});
	</script>
	<?php
	echo "</table>";
        
    } catch (PDOException $e) {
        exit('データベースに接続できませんでした。' . $e->getMessage());
	}

// request.php

<?php

$dsn = 'mysql:dbname=postcode;host=localhost';

$user = "dbuser";

$pass = "xxxxxxxxxxxxx";

try{

$pdo = new PDO($dsn,$user,$pass);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$pref_no = substr($_REQUEST["city"], 0,2);

$sql = "select * from city where pref_no=$pref_no;";

$stmt = $pdo->query($sql );

$answercity = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo "<table>";

foreach( $answercity as $city ){

echo "<tr><th>{$city[city_code]}</th>",

"<td class=\"citylink\"><i class=\"fas fa-link\"></i> {$city[city_name]}</td>",

"<td>{$city[city_kana]}</td></tr>\n";

}

$('.citylink').on('click', function() {

window.location.href = "zipcode.php?sity_code=" + $(this).prev().text();

});

</script>

<?php

echo "</table>";

} catch (PDOException $e) {

exit('データベースに接続できませんでした。' . $e->getMessage());

}

zipcode.php ソースコード

// zipcode.php
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="/css/postal.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link href="/fontawesome/css/all.css" rel="stylesheet">
	<script type="text/javascript" src="js/postal.js"></script>
	<style>
	</style>
	<div class="contents-container">
	<?php
	$city_code= $_REQUEST["city_code"];
    $dsn  = 'mysql:dbname=postcode;host=localhost';
    $user = "dbuser";
    $pass = "xxxxxxxxxxxxx";
    // try&catchを使いつつPDOでデータベース接続
    try{    
        $pdo = new PDO($dsn,$user,$pass);
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 	    $city_code = $_REQUEST["sity_code"];
 	    
 	    $sql_getCity = "select * from city where city_code=$city_code;";
 	    $stmt = $pdo->query($sql_getCity );
    	    $starray = $stmt->fetchAll(PDO::FETCH_ASSOC);
 	    // 郵便番号一覧表示
 		$sql_ziplist = "select\n".
					"zipcode.post_code,\n".
					"prefecture.pref_name,\n".
					"city.city_name,\n".
					"zipcode.town_name,\n".
					"prefecture.pref_kana,\n".
					"city.city_kana,\n".
					"zipcode.town_kana\n".
					"from\n".
					"zipcode \n".
					"inner join city on zipcode.city_code = city.city_code\n".
					"inner join prefecture on city.pref_no = prefecture.pref_no\n".
					"where zipcode.city_code = $city_code;";
 	    $stmt = $pdo->query($sql_ziplist );
    	    $ziplist = $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        exit( $e->getMessage());
 	} 
	?>	
</head>
<body>
<header>
<img src="img/logo.jpg">
<h2><?php echo $starray[0]["city_name"] ,"【", $starray[0]["city_kana"],"】"; ?></h2>
<a href="javascript:history.back();">前のページに戻る</a>
</header>	
<div class="contents2">
	<div class="contents-container2">
<?php
	echo "<table id=\"abc\">";
	foreach( $ziplist as $zipcode => $city ){
		echo "<tr>";
		printf( "<td>%03d-%04d</td>",substr($city["post_code"],0,3),substr($city["post_code"],3));
		echo "<td>{$city[town_name]}</td>",
				"<td>{$city[city_kana]}</td>",
				"<td>{$city[town_kana]}</td>",
				"</tr>";
	}
	echo "</table>\n";
?>
	</div>
</div>
<footer>
	<div class="footer-container">
		<p>©Codingstock</p>
	</div>
</footer>
</body>
</html>

// zipcode.php

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

</style>

<?php

$city_code= $_REQUEST["city_code"];

$dsn = 'mysql:dbname=postcode;host=localhost';

$user = "dbuser";

$pass = "xxxxxxxxxxxxx";

// try&catchを使いつつPDOでデータベース接続

try{

$pdo = new PDO($dsn,$user,$pass);

$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$city_code = $_REQUEST["sity_code"];

$sql_getCity = "select * from city where city_code=$city_code;";

$stmt = $pdo->query($sql_getCity );

$starray = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 郵便番号一覧表示

$sql_ziplist = "select\n".

"zipcode.post_code,\n".

"prefecture.pref_name,\n".

"city.city_name,\n".

"zipcode.town_name,\n".

"prefecture.pref_kana,\n".

"city.city_kana,\n".

"zipcode.town_kana\n".

"from\n".

"zipcode \n".

"inner join city on zipcode.city_code = city.city_code\n".

"inner join prefecture on city.pref_no = prefecture.pref_no\n".

"where zipcode.city_code = $city_code;";

$stmt = $pdo->query($sql_ziplist );

$ziplist = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch (PDOException $e) {

exit( $e->getMessage());

}

</head>

<body>

<a href="javascript:history.back();">前のページに戻る</a>

</header>

<?php

echo "<table id=\"abc\">";

foreach( $ziplist as $zipcode => $city ){

echo "<tr>";

printf( "<td>%03d-%04d</td>",substr($city["post_code"],0,3),substr($city["post_code"],3));

echo "<td>{$city[town_name]}</td>",

"<td>{$city[city_kana]}</td>",

"<td>{$city[town_kana]}</td>",

"</tr>";

}

echo "</table>\n";

</div>

</div>

</footer>

</body>

</html>

投稿者: khagiwara
プログラミング

PDOで郵便番号辞書データベース構築の記録

郵便番号データベースで多対多のリレーション

Webサイトデザイン、プログラミング、サーバー構築運用の記録