PHP-AJAX

이정수·2025년 1월 6일

기타 기술 정리

목록 보기

5/5

XAMPP( Cross-flatform, Apache, MariaDB, PHP, Perl ) :
。Web Application을 구축하기 위한 웹서버(Apache) , Server-Side언어(PHP) , DBMS(MySQL)을 쉽게 설치하도록 만들어진 패키지.

。postgres를 사용할 예정이므로, C:\xampp\php 경로의 php.ini를 실행한 후 pgsql와 관련된 extension을 주석에서 해제.
▶ XAMPP는 기본적으로 mysql DB를 지원하지만, postgres는 지원하지 않으므로, PHP와 DB를 활용 시php.ini에서 pgsql에 관련된 extension을 주석에서 해제하여야한다.

XAMPP를 활용한 실습 준비

Apache 활용을 위한 파일경로 설정.

C:\xampp\htdocs\에 임의의 폴더(PRACTICE\Practice1)를 생성한 후 해당 폴더에 html, css, javascript 등의 파일을 넣는다.

。이후 XAMPP Control Pane를 통해 Apache를 start한 후 브라우저에 localhost/PRACTICE/Practice1/를 검색 시 Apache Server를 통해 해당 폴더의 index.html를 접속할 수 있다.
▶ C:\xampp\htdocs\가 localhost의 기본경로.

。 index.html은 기본적인 규약으로, 해당 파일이 존재하는 폴더경로만 입력 시 해당 html로 자동으로 연결된다.
▶ html파일이 복수 이상 존재 시 url에 해당 html파일명도 기입해야한다.

XMLHttpRequest(XHR) : XMLHttpRequest
var xhr = new XMLHttpRequest() : XMLHttpRequest 객체 생성.
。Client와 Server간 데이터를 송 수신하는 상호작용 시 사용하는 기능.
。XHR사용 시 Page의 새로고침 없이도 URL에서 데이터를 가져올 수 있음.
。객체의 form 내 API가 정의되어있음.
。XML뿐만 아니라, JSON, txt 등의 데이터도 송 수신이 가능하다.
XHR Property
XHR객체.onload :
。XHR의 tansaction이 성공적으로 마무리된 후 load 이벤트 발생시 작용하는 callback함수를 해당 property에 정의.
。load이벤트는 readyState=4일때 작용한다.
xhr.onload = function(){
  if (this.status=200){
    console.log(this.responseText);
  }
}
。XHR객체.open()과 XHR객체.send()를 통해 server와 transaction하여 XHR객체에 성공적으로 Data가 GET된 경우 load event가 발생하면서 해당 callback함수가 작동.

XHR객체.status :
。Response의 HTTP status code를 return.
▶ XHR객체.open()과 XHR객체.send()를 통해 데이터가 성공적으로 전송된 경우 200을 반환

HTTP Status code 종류
。 200 : 전송 성공.
。 201 : created : POST Method로 새로운 Resource를 생성 시
。 204 : No Content - Client의 요구를 처리했으나, 전송 데이터가 존재하지 않음.
。 400 : Bad Request : 클라이언트의 요청 구문이 문법상 오류 또는 Validation Error가 발생한 경우
。 401 : Unauthorized - 권한이 없어 접속에 실패하는 경우.
。403 : Request Forbidden
。 404 : Requested file/url not found - url 또는 Resource를 발견하지 못함.
。 500 : Server Error - Server에서 오류발생 또는 Exception이 발견됨.

XHR객체.onreadystatechange :
。XHR객체.readyState에 변화가 발생하여 readystatechange 이벤트 발생 시 작동하는 callback 함수를 해당 property에 정의.
xhr.onreadystatechange = function(){
    if(this.readyState==4 && this.status==200){
  		console.log(this.responseText);
  }
}
▶ readyState 상태가 변화하여 callback 함수 작동 시 해당 XHR객체의 HttpStatuscode=200, readyState=4를 만족하면 data를 string으로 console에 표현.
XHR객체.readyState :
。Request Status를 지시하는 숫자를 반환하는 property.
readyState 종류
。0 : request is not initialized
。1 : server connection established
。2 : received request
。3 : processing request
。4 : response is ready
  var xhr = new XMLHttpRequest()
  console.log('before sending req` readyState : ' + xhr.readyState) // 0
  xhr.open('GET','./sample.txt',true)
  console.log('before sending req` readyState : ' + xhr.readyState) // 1
  xhr.onreadystatechange = function(){
    console.log('after sending req` readyState : ' + this.readyState) // 2, 3, 4
    if(this.readyState==4 && this.status==200){
      console.log(this.responseText)
    }
  }
  xhr.send()
▶ xhr.send() 이후 2,3,4는 각각 readyState에 변화가 발생하면서 readystatechange 이벤트를 도출하면서 callback 함수 작동.
XHR객체.responseText :
。XHR객체.open()과 XHR객체.send()를 통해 Server에 전송한 Request에 대한 Response으로 받은 XHR객체 내 data를 Text로 나타내는 string을 반환.
▶ Request가 실패하거나 전송되지 않은 경우, null을 반환.
XHR Method

XHR객체.open(http method, resource url, async 여부) :
。외부파일( XML, JSON, txt 등 )을 url을 통해 response를 얻기 위한 AJAX Request를 생성하는 method.

。http method : ('GET' , 'POST')
。async : 비동기 여부 결정 : (true , false)
ex : xhr.open('GET','./sample.txt',true)

XHR객체.send() :
。XHR객체.open()을 통해 생성된 AJAX Request를 Server에 전달.
。 비동기 요청인 경우 send()는 Request를 전송하는 즉시 반환됨.
▶ 성공적으로 XHR Transaction을 완료한 경우, XHR객체.status = 200으로 정의되며 해당 response로 얻어온 Data를 string으로 XHR객체.responseText으로 표현이 가능

XMLHttpReuqest 객체 활용하기
。js파일에 다음 코드를 기입 후 브라우저에서 검사-console창에 해당 객체 검색.
var xhr = new XMLHttpRequest()

。해당 XHR 객체 내에 다음 이벤트들이 정의되있음을 확인 가능. XMLHttpRequest
XHR객체를 통해 Request를 생성 후 Server에 전송 및 XHR객체.onload를 통한 callback함수로 Data를 지시
var xhr = new XMLHttpRequest()
xhr.open('GET','./sample.txt',true) // Request 생성
xhr.onload = function(){
  if (this.status=200){
    console.log(this.responseText);
    document.getElementById('resText').innerHTML=this.responseText;
  }
}
xhr.send()
。XHR객체.open()를 통해 외부 Data( resource url )을 GET하여 XHR객체에 response를 얻는 Request를 정의.
。XHR객체.onload를 통해 XHR객체에 성공적으로 Data가 GET된 경우 load 이벤트를 통해 작동할 callback함수를 정의.
。XHR객체.send()를 통해 해당 XHR객체.open()으로 생성된 request를 server에 전달.

▶ 성공적으로 response를 전달 받아 XHR transaction이 완료된 경우, load이벤트를 통해 XHR객체.onload에 정의된 callback 함수가 작동하면서 this.responseText를 통해 response로 얻어온 data를 string으로 HTML element에 전달.

XHR객체를 통해 Request를 생성 후 Server에 전송 및 XHR객체.onreadystatechange를 통한 callback함수로 Data를 지시
var xhr = new XMLHttpRequest()
  xhr.open('GET','./sample.txt',true)
  xhr.onreadystatechange = function(){
    if(this.readyState==4 && this.status==200){
      document.getElementById('resText').innerHTML=this.responseText;
    }
  }
  xhr.send()
XHR객체.onreadystatechange : readyState 상태가 변화하여 readystatechange 이벤트 발생 시 작동할 callback함수를 정의.

▶ readyState 상태가 변화하여 readystatechange 이벤트를 통해 callback 함수 작동 시 해당 XHR객체의 HttpStatuscode=200, readyState=4를 만족하면 this.responseText를 통해 response로 얻어온 data를 string으로 HTML element에 전달.

HTML element button과 함께 활용
。button의 onclick="js함수()" 속성 이용.

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Practice1</title> </head> <body> Hello! <button onclick="click1()">getText1</button> <button onclick="click2()">getText2</button> <p id="resText"></p> <script src="./index.js"></script> </body> </html>

js

function click1(){ var xhr = new XMLHttpRequest() xhr.open('GET','./sample.txt',true) xhr.onload = function(){ if (this.status==200){ console.log(this.responseText); document.getElementById('resText').innerHTML=this.responseText; } } xhr.send() } function click2(){ var xhr = new XMLHttpRequest() xhr.open('GET','./sample.txt',true) xhr.onreadystatechange = function(){ if(this.readyState==4 && this.status==200){ document.getElementById('resText').innerHTML=this.responseText; } } xhr.send() }

。버튼 클릭 시 이벤트가 작용하면서 발생하는 onload 또는 onreadystatechange를 통해 정의된 callback함수를 통해 해당 text를 받아올 수 있다.
JSON format으로 Data를 받아서 표현하기
。resource를 JSON format으로 받아오는 request를 생성.
▶ XHR객체.open('GET','./sample.json',true)

。JSON.parse(JSONformat문자열) : JSON format 문자열을 JSON 객체로 변환.
▶ XHR객체.responseText를 JSON으로 변환하여 사용.
  var xhr = new XMLHttpRequest()
  xhr.open('GET','./sample.json',true)
  xhr.onload = function(){
    if (this.status == 200){
      var userJSON = JSON.parse(this.responseText)
      console.log(userJSON)
    }
  }
  xhr.send()
▶ XHR Transaction이 완료된 후 resource로 JSON data를 받아온 후 onload를 통해 XHR.responseText를 JSON Format으로 변환.
<ul> , <li>로 표현하기.
。HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Practice1</title>
</head>
<body>
  <ul id="users"></ul>
  <script src="./index.js"></script>
</body>
</html>
。Javascript
Object.keys(JSON객체) : JSON의 key를 배열로 return
  var xhr = new XMLHttpRequest()
  xhr.open('GET','./sample.json',true)
  xhr.onload = function(){
    if (this.status == 200){
      var userJSON = JSON.parse(this.responseText)
      var divUser = document.getElementById('users')
      var keys = Object.keys(userJSON)
      for(i=0;i<keys.length;i++){
        divUser.innerHTML += '<li>' + 'username '+ i + ' : ' + userJSON[keys[i]]['username'] + '</li>'
        divUser.innerHTML += '<li>' + 'email '+ i + ' : ' + userJSON[keys[i]]['email'] + '</li>'
      }
    }
  }
  xhr.send()

AJAX ( Asynchronous Javascript And XML : 비동기식 JS와 XML ) Sonny.log
。Javascript를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환하는 통신기능.
▶ Client가 JS를 이용해 Server에 데이터를 비동기 방식으로 Request하여 Response를 수신.

。브라우저가 가지는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지않고도 Page 일부만을 위한 data를 load하는 기법.

AJAX 비동기 원리 :
。기본적으로 Http Protocol은 Client쪽에서 Request를 보내고, Server쪽에서 Response를 보내면 이어진 연결은 끊겨짐.
▶ 화면의 내용을 갱신하기 위해서는 다시 해당 과정을 반복하여 전체 HTML Page에 대해 reload를 수행해야하는데 이럴 경우 Resource 낭비가 극심함.

。 AJAX는 전체 HTML Page가 아닌, 일부분의 HTML Page만 reload 하도록 XMLHttpRequest객체를 이용하여 Server에 Request.
▶ 일부분의 Page에 대해서만 JSON , XML format의 데이터만 받아 갱신하므로, Resource 낭비를 절약할 수 있다.

비동기( Asynchronous ) :
。웹페이지를 reload하지 않고도 데이터를 불러오는 방식.
▶ Page Reload는 전체 Resource를 불러와야하는 불필요한 resource 낭비가 발생하게되는데, 비동기 방식을 이용 시 필요한 부분만 불러와서 사용이 가능!

AJAX의 장단점

장점
。웹페이지의 속도향상
。Server의 처리가 완료될 때까지 기다리지않고 처리가 가능
。Server에서 Data만 전송하면 되므로 전체적인 코딩양이 줄어든다.

단점
。History 관리가 되지 않는다.
。XMLHttpRequest로 통신할 경우 사용자에게 진행정보가 주어지지 않는다.
。HTTP Client의 기능이 한정됨.

AJAX 진행과정
。XMLHttpRequest 객체를 생성 후 url을 통해 Request 후 Response를 받으면 Response 결과에 맞는 함수를 실행하는 구조로 되어있음.
▶ 해당 함수는 jQuery로 작성.

XMLHttpRequest객체 생성

Callback 함수 생성
。Server에서 response가 왔을 때 실행시키는 함수.
。HTML Page를 update.

request 전송

PHP(Hypertext Preprocessor)
。C언어를 기반으로 구축된 서버측에서 실행되는 Server-Side Script Language.
。PHP로 작성된 코드를 HTML코드 내 추가 시 Web Server는 해당 PHP코드를 해석하여 동적웹페이지를 생성.

동적웹페이지(dynamic web page) :
。server가 client의 request를 해석 후 해당 데이터를 가공하여 생성하는 web page를 의미.
▶ client는 요청에따라 변화하는 Web page를 관측 가능.

PHP를 사용해 Postgres DB와 connection 객체 정의하기.
。사전에 XAMPP의 php.ini에서 pgsql관련 extension을 주석에서 해제해야한다.
.php파일 생성 후 Postgres DB와 연결 정의하기.
。PHP내부에서 변수 선언 시 변수 앞에 $를 붙여야한다.
<?php
$server = 'localhost';
$username = 'postgres';
$password = 'wjd747';
$db_name = 'WebProgramming';
$dbconnection = pg_connect("host=$server port=5432 dbname=$db_name user=$username password=$password")
?>
▶ password를 해당 코드에 적어도 front-end쪽에서 해당 코드와 변수를 조회할 수 없으므로, 보안상 문제는 없다.

DB connection객체를 활용하여 공간데이터 가져오기.
。include '특정파일.php' : 특정 php파일 내부의 php 코드들을 그대로 불러온 php 파일에서 활용이 가능.
。st_asgeojson(geom) : PostGIS상 geometry를 GeoJSON객체로 형변환하여 반환.
。echo : 문자열을 페이지에 출력하는 역할을 수행하는 PHP함수.
。json_decode() : JSON format 문자열을 배열 또는 객체로 변환하는 PHP함수.
。json_encode() : PHP의 Array 또는 String을 JSON format 문자열로 묶어서 반환하는 PHP함수.

。ol.Feature 객체의 Properties의 key는 DB에서 Table의 Field와 동일.
<?php
include 'db.php';
$query = 'select name,st_asgeojson(geom) from allcities';
$resultArr = pg_fetch_all(pg_query($dbconnection,$query));
echo json_encode($resultArr);
?>
。 PHP를 통해 postgres DB에서 sql을 통해 얻은 data를 JSON 객체의 data로 형변환하여 가져와서 $resultArr 변수에 인가 후 echo json_encode를 통해 JSON format으로 출력.
▶ .js에서 JSON Format으로 데이터를 받는다.

pgsql extension 관련 Method
。php.ini에서 해당 extension을 사용해야 사용 가능

pg_connect("DBparameter") :
。PHP 내부에서 DB와의 connection 객체를 정의.
。내부 생성자에는 다음의 연결할 DB의 parameter를 문자열로 정의.
"host='localhost' port=포트번호 dbname=DB이름 user=사용자ID password=사용자PW"

pg_query(pg_connect객체, sql문)
。PHP 내부에서 활용할 postgres DB의 sql 객체를 정의.

pg_fetch_all(pg_query객체) :
。postgres DB에서 해당 sql로 획득한 데이터를 Array로 받는 기능을 수행.

PHP를 통해 가져온 데이터를 AJAX를 이용해 Javascript로 가져오기.
。사전에 jQuery를 HTML에 정의하기.
▶ jQuery CDN : <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

。다음 구문을 js파일 내에 기입하기.
。JSON.parse(JSONformat문자열) : JSON format 문자열을 JSON 객체로 변환.
$.ajax({
  url:'./cities.php',
  type:'GET',
  success:function(dataResult){
    var resultArr = JSON.parse(dataResult)
    console.log(resultArr)
  }
})
。cities.php에서 출력한 JSON format의 문자열 데이터를 success property에서 정의한 callback함수의 매개변수로 전달.
▶ 이후 문자열을 JSON 객체로 형변환하여 console에 출력시 다음처럼 정상적으로 DB에서 SQL로 얻은 각 행의 데이터를 PHP를 통해 JS에 JSON format으로 전달되었음을 확인 가능.

DB에서 가져온 데이터를 OpenLayers를 이용해 Map상에 시각화하기.
배열.forEach(callback함수(매개변수)) : 배열의 요소를 callback함수의 매개변수로 전달.
GeoJSONFormat객체.readFeature(GeoJSON 데이터,opt_options) :
。GeoJSON 객체를 전달 받아 GeoJSON format으로 Feature 객체를 생성.
var vectorSource = new ol.source.Vector()
var vectorLayer = new ol.layer.Vector({
  zIndex:2,
  source:vectorSource,
})
map1.addLayer(vectorLayer)
        //
$.ajax({
  url:'./cities.php',
  type:'GET',
  success:function(dataResult){
    var resultArr = JSON.parse(dataResult)
    resultArr.forEach(function(JsonFeature){
      var GeoJsonObj = JSON.parse(JsonFeature['st_asgeojson']) // JSON Feature 객체의 Property의 key를 이용해 GeoJSON 객체 추출.
      var feature1 = (new ol.format.GeoJSON()).readFeature(GeoJsonObj) // Feature 객체 생성
      vectorSource.addFeature(feature1) // source에 추가.
    })
  }
})
。 resultArr.forEach(function(JsonFeature){코드}) 를 통해 resultArr로 전달된 JSON Array의 JSON 객체를 하나씩 조회하여 Map상에 표현.

▶ 다음처럼 Map상에 VectorLayer로서 표기됨.

ol.Feature 객체에 Property 추가.
。다음 메소드를 통해 생성된 feature 객체에 대하여 Property를 추가하여 metadata를 정의할 수 있다.
       feature1.setProperties({'name':JsonFeature['name']})
       console.log(feature1.getProperties())
ol.Feature의 Properties 속성에 {'name':JsonFeature['name']}의 property가 input.

feature객체.setProperties({key : value}) :
。해당 feature 객체의 Properties 객체에 {key : value} 쌍의 Property를 추가
。Property를 추가하거나 기존의 Properties에 존재하는 Property의 수정만 가능하며 삭제는 안됨.
▶ Feature의 기존 Property의 value를 수정하거나 Property를 추가할 수 있다.

jQuery 관련 메소드

$.ajax({option}) 메소드 $.ajax()
。jQuery의 Ajax관련 Method로서, HttpRequest를 생성하는 기능을 수행.

url : client가 request를 보낼 Server의 URL 주소.
data : HTTP request와 함께 Server로 보낼 데이터.
type : HTTP request method ( GET , POST )
dataType : Server에서 response할 Data의 type. ( json,xml,...)
success : 성공 시 실행될 callback함수 정의.
▶ callback함수의 매개변수는 AJAX Transaction에서 성공한 data를 가져옴.

$.getJSON( url , callback함수 ) jQuery.getJSON
。url을 통해 비동기 HTTP GET Request를 수행하여 서버에서 JSON을 받는 역할을 수행

url : resource의 url ( GeoJSON을 return )
callback함수 : Request가 성공 시 실행되는 callback함수

getJSON의 callback함수의 매개변수

data : Server에서 반환된 JSON 데이터

textStatus : 요청 상태를 설명하는 문자열
OpenLayers로 Vector data를 import 했을 때, 속성정보 가져오기.
。map객체.on('click', callback함수) 으로 속성정보를 표현.
사전준비
。Bootstrap CDN 추가
javascript : <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

css : <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

map상에 Feature를 click 시 Feature를 return 하는 코드 작성
map객체.forEachFeatureAtPixel( pixel객체, callback함수, options ) :
。map의 Viewport에서 특정 pixel과 교차하는 feature를 발견 후 callback함수의 매개변수로 전달.
map1.on('click', function(evt){
  var clickedFeature = map1.forEachFeatureAtPixel(evt.pixel,function(feature){
    return feature
  })
  console.log(clickedFeature)
})
Bootstrap Modal 사용하기
。Modal : 화면 위 하나의 작은 화면을 더 생성하여 부가적인 일을 처리할 수 있게 만드는 기능.
  <div class="modal" tabindex="-1" role="dialog" id="featureInfo">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Clicked Feature</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="nameOfFeature"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
▶ modal 전체(최상단 <div>) 내 id="featureInfo" 속성 정의 및 <div class="modal-body"> 내부에 클릭된 feature을 지시할 <div>를 생성.
function featinfo(evt){
  var clickedFeature = map1.forEachFeatureAtPixel(evt.pixel,function(feature){
    return feature
  })
  if (clickedFeature){
    document.getElementById('nameOfFeature').innerHTML=clickedFeature.get('name')
    $('#featureInfo').modal('show')
  }
}
map1.on('click', featinfo)
。feature객체.get('key이름') : feature의 property에서 key이름에 해당하는 value를 return.
▶ callback함수를 따로 구분 및 정의하여 차후 map객체.un('click',callback함수)로 기능을 끄기 좋게 정의.

Bootstrap Modal 관련 Bootstrap-modal
$('#ModalelementID').modal('메소드')
HTML 내 element 참조
。$('#ModalelementID') : HTML Page 내 특정 ID의 Modal element를 객체로서 참조.

메소드
。Modal객체.modal('show') : Modal 표시.
。Modal객체.modal('hide') : Modal 숨기기.
Map 상에서 Feature를 생성하여 DB에 저장하기.
Feature 생성 Button 추가
。JS의 함수를 작동할 Button을 정의.
<button onclick="addFeat()">Feature 추가</button>    
Feature를 생성하여 추가하는 함수 구현
아무 좌표 click 시 pixel 좌표를 return하는 기능 구현
map객체.un('fire옵션',callback 함수) :
。map 객체에서 특정 callback함수, fire와 함께 정의된 interaction을 종료하는 역할을 수행.
evt.target.getCoordinateFromPixel(evt.pixel) :
。map객체.on('click') 이벤트 발생 시 viewport의 pixel 기준 x,y 좌표를 return.
function createFeat(evt){
  var coord = evt.target.getCoordinateFromPixel(evt.pixel)
  console.log(coord)
}
function addFeat(){
  map1.un('click',featinfo) // featinfo 함수 기능 종료
  map1.on('click',createFeat)
}
▶ 기존에 map interaction으로서 작용중인 fearinfo callback 함수를 종료 후 createFeat 함수를 동작.
▶ createFeat 함수는 map viewport 상 click한 지점의 좌표를 return.

HTML Page에 Modal 기능 생성
<div class="modal" tabindex="-1" role="dialog" id="addFeatID">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Save Feature</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <label for="cityname">입력</label>
          <input type="text" id="cityname" name="cityname">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="saveData()">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
。 modal 전체(최상단 <div>) 내 id="addFeatID" 속성 정의
。 <div class="modal-body"> : 내부에 생성할 feature의 이름을 지정할 <input>을 정의.
。<button type="button" class="btn btn-primary">Save changes</button> : <input>을 정의 후 작성한 데이터를 DB로 보내는 JS의 함수를 작동할 Button을 생성.
var coord
function createFeat(evt){
  coord = evt.target.getCoordinateFromPixel(evt.pixel)
  $('#addFeatID').modal('show')
}
map1.on('click', featinfo)
function addFeat(){
  map1.un('click',featinfo) // featinfo 함수 기능 종료
  map1.on('click',createFeat)
}
。 var coord는 전역적 변수로 설정하여 나중에 함수 saveData()를 통해 좌표정보를 DB에 전달 시 활용.
▶ JS createFeat()함수에 $('#addFeatID').modal('show')를 추가하여 modal창이 지시되도록함.
<input>을 통해 입력된 데이터를 DB로 전달하는 기능 구현
저장 목적의 .php파일 생성
<?php
include 'db.php'; # DB Connection 코드 쓰기
 # JS에서 전달한 데이터를 담을 변수
$name = $_POST['name']; 
$longitude = $_POST['longitude'];
$latitude = $_POST['latitude'];
 # DB insert 수행 query문 생성
$insert_query = "insert into allcities(name,latitude,longitude,geom) values('$name','$longitude','$latitude',st_setsrid(st_makepoint('$longitude','$latitude'),4326))";
$DB_query = pg_query($dbconnection,$insert_query);
if($DB_query){
  # 성공한 경우
  echo json_encode(array("statusCode"=> 200));
} else{
  # 실패한 경우
  echo json_encode(array("statusCode"=> 201));
}
?>
。php로 Insert Query문 작성 시 전달값으로 변수 설정시 '$변수명'으로 설정.
。geom을 st_makepoint()로 생성 시 st_setsrid()를 통해 좌표계를 정의해야함.
。DB로 전송 성공 시 echo json_encode(array("statusCode"=> 200));를 통해 배열을 {"statusCode" : 200 } JSON format의 문자열로 출력하여 js파일에 전달.
$_POST['전달되는 변수의 명칭'] :
。다른 파일에서 php 파일로 POST방식으로 데이터를 전달할 때 수신 시 사용하는 기능.
。데이터를 전달하는 php에서는 POST method로 데이터를 전달
▶ 데이터를 받는 php에서는 $_POST를 이용해 데이터를 수신.
。이때, 매개변수는 POST를 통해 전달되는 변수의 명칭과 동일.
$_POST 활용사례
。html => php
    <body>
      <form method="POST" action="call.php">
        <input type="text" name="testText"/>
        <input type="number" name="testNumber"/>
        <input type="submit" value="전송">
      </form>
    </body>
<?php
$v_Text = $_POST["testText"];
$v_Number = $_[POST["testNumber"];
?>
저장 목적의 JS함수 생성
function saveData(){
  var cityName = document.getElementById('cityname').value
  if (cityName){
    $.ajax({
      url:'save_city.php',
      type:'POST',
      data:{
        name:cityName,
        longitude:coord[0],
        latitude:coord[1]
      },
      success:function(dataResult){
        var result = JSON.parse(dataResult)
        if (result.statusCode == 200){
          console.log('added value succesfully')
        }else{
          console.log('failed')
        }
      }
    })
  }
}
。createFeat()함수를 통해 좌표가 전달된 전역적 변수 coord를 이용해 좌표값을 전달.
。이후 전달 성공 시 success 속성의 callback함수를 통해 save_city.php를 통해 전달된 문자열 JSON Format를 통해 성공여부를 확인가능.

。Feature 추가 시 성공적으로 DB에 feature가 추가됨.

이정수

공부기록 블로그

이전 포스트

PHP-AJAX

기타 기술 정리

Leaflet.js , Mapbox

0개의 댓글