'PHP AJAX'에 해당되는 글 4건

  1. 2013.07.23 PHP AJAX Live Search 구문
  2. 2013.07.22 PHP AJAX XML 연동
  3. 2013.07.19 PHP AJAX 데이터베이스 연동 (9)
  4. 2013.07.18 PHP AJAX 구문

 

 

이번장에서는 PHP 에서 AJAX를 이용하여 Live Search 즉 실시간검색에 대해서 알아보겠습니다.   

 

여러분들이 구글이나 네이버에서  검색어를 치다보면 한글자 아니 자음 하나만 키보드를 두드려도 하단에 관련 검색어들이 뜨는것을 보았을텐데 그러한 구문과 비슷한 구문이라고 생각하면 되겠습니다.

 

 

그림처럼 "a" 라고 치면 a가 해당하는 제목을 불러와 하단에 리스팅합니다.

 

위와 같은 구문을 만들기 위해 우선 3개의 파일이 필요합니다. form 구문이 들어있는 html 또는 php 파일과 xml 파일 그리고 ajax 를 이용한 php 파일이 필요합니다.

 

xml 파일  -------- link.xml --------

<?xml version="1.0" encoding="ISO-8859-1"?>

<!-- Edited by XMLSpy® -->
<pages>
 <link>
  <title>Google</title>
  <url></url>">http://www.google.com</url>
 </link>
 <link>
  <title>Naver</title>
  <url></url>">http://www.naver.com</url>
  </link>
 <link>
  <title>Daum</title>
  <url></url>">http://www.daum.net</url>
 </link>
 <link>
  <title>Nate</title>
  <url></url>">http://www.nate.com</url>
 </link>
 <link>
  <title>Park's blog</title>
  <url></url>">http://blog.naver.com/makand123</url>
 </link>
 <link>
  <title>Zum</title>
  <url></url>">http://www.zum.com/</url>
 </link>
</pages>

// xml 파일은 원하는 내용으로 꾸며보기 바랍니다.

 

 

Form 구문이 있는 html 또는 php 파일 ------- live.html -------

<html>
 <head>
 <script>
 function showResult(str) {
 if (str.length==0) { // 검색글자의 내용이 없으면 검색 박스를 없앱니다.
   document.getElementById("livesearch").innerHTML="";
   document.getElementById("livesearch").style.border="0px";
   return;
 }
 if (window.XMLHttpRequest)  {
 

 // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 } else   { 
 

 // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)  {
     document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
     document.getElementById("livesearch").style.border="1px solid #A5ACB2";
   }
 }
 xmlhttp.open("GET","livesearch.php?q="+str,true);  // ajax 파일연동
 xmlhttp.send();
 }
 </script>
 </head>
 <body>
 

 <form> 

<!-- 텍스트 박스에 마우스 onkeyup 이벤트가 발생시 showResult() 함수로 이동하라 -->


 <input type="text" size="30" onkeyup="showResult(this.value)">
 


 <div id="livesearch"></div>
 </form>
 

 </body>
 </html>

 

 

ajax구문이 들어있는 php 파일 ------- livesearch.php -------

<?php
 $xmlDoc=new DOMDocument();
 $xmlDoc->load("link.xml");

 $x=$xmlDoc->getElementsByTagName('link');

 // q의 매개변수 값을 가져옴
 $q=$_GET["q"];

 // $q 변수값이 있는지 여부를 체크
 if (strlen($q)>0) {
 $hint="";
 for($i=0; $i<($x->length); $i++)  {
   $y=$x->item($i)->getElementsByTagName('title');
   $z=$x->item($i)->getElementsByTagName('url');
   if ($y->item(0)->nodeType==1) {
     //find a link matching the search text
     if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))  {
       if ($hint=="")   {
         $hint="<a href='" .
         $z->item(0)->childNodes->item(0)->nodeValue .
         "' target='_blank'>" .
         $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
       } else  {
         $hint=$hint . "<br /><a href='" .
         $z->item(0)->childNodes->item(0)->nodeValue .
         "' target='_blank'>" .
         $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
         }
       }
     }
   }
 }

 // 만약 xml 데이터에 검색값의 내용이 없을 경우 "no suggestion" 을 출력함
 if ($hint=="")  {
   $response="no suggestion";
 } else {
   $response=$hint;
 }

 // $response 값을 출력하라
 echo $response;
 ?>

 

이렇게 3개의 파일이 연동되면 위 그림처럼 실시간 검색의 느낌을 줄 수 있습니다. 구글, 네이버 크게 다를거 없습니다. 많이 응용해보고 멋진 소스를 개발해보기 바랍니다.

혹시 오타 또는 오류 발생시 댓글, 쪽지 주면 바로 수정해놓겠습니다.

그럼 오늘도 즐거운 하루 되세요 ^^

'PHP > PHP and AJAX' 카테고리의 다른 글

PHP AJAX RSS Reader 구문  (0) 2013.07.24
PHP AJAX Live Search 구문  (0) 2013.07.23
PHP AJAX XML 연동  (0) 2013.07.22
PHP AJAX 데이터베이스 연동  (9) 2013.07.19
PHP AJAX 구문  (0) 2013.07.18
Posted by 진격의 파파

댓글을 달아 주세요

 

이번장에서는 PHP AJAX XML 연동에 대해서 알아보겠습니다.  

 

PHP 구문에 AJAX를 이용해서 XML 데이터를 불러들이는 방식입니다. 이전 포스팅에서는  DB를 불러들이는 방식이었는데  DB 대신 XML 데이터를 가지고 온다고 생각하면 되겠습니다.

 

예제를 보면서 설명드리겠습니다. html 파일 1, ajax 파일 1, xml 파일 1 이렇게 총 3개의 파일이 필요합니다.

 

관련예제

HTML 파일

------ html.php ------

<html>
 <head>
 <script>
 function showNAME(str)
 {
 if (str=="")
   {
   document.getElementById("txtHint").innerHTML="";
   return;
   }
 if (window.XMLHttpRequest)
   {
 

   // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {
 

   // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","ajax_php.php?q="+str,true);
 xmlhttp.send();
 }
 </script>
 </head>
 <body>
 

 <form>
 Select a CD:
 <select name="cds" onchange="showNAME(this.value)">
 <option value="">Select NAME : </option>
 <option value="Lee Bo Young">Lee Bo Young</option>
 <option value="Um Ji Won">Um Ji Won</option>
 <option value="Lee Min Jeong">Lee Min Jeong</option>
 <option value="O Ji Eun">O Ji Eun</option>
 <option value="Su Ji">Su Ji</option>
 <option value="I U">I U</option>
 </select>
 </form>
<div id="txtHint"><b>Name info will be listed here...</b></div>

 </body>
 </html>

// 이름을 선택하면 이름에 대한 정보가 나옵니다.

 

AJAX 파일

------ ajax.php ------

<?php
 $q=$_GET["q"];

 $xmlDoc = new DOMDocument();
 $xmlDoc->load("xml.xml");

 $x=$xmlDoc->getElementsByTagName('ARTIST');

 for ($i=0; $i<=$x->length-1; $i++) {
 if ($x->item($i)->nodeType==1)   {
   if ($x->item($i)->childNodes->item(0)->nodeValue == $q) {
     $y=($x->item($i)->parentNode);
     }
   }
 }
 

 

 $cd=($y->childNodes);

 for ($i=0;$i<$cd->length;$i++) { 
 if ($cd->item($i)->nodeType==1)  {
   echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
   echo($cd->item($i)->childNodes->item(0)->nodeValue);
   echo("<br>");
   }
 }
 ?>

//xml.xml 파일을 불러들여서 선택된 $q 값과 xml의 값을 비교하여 같은 정보를 가져옵니다.

 

XML 파일

------ ajax_php.xml ------

<?xml version="1.0" encoding="ISO-8859-1"?>

<!-- Edited by XMLSpy® -->
<CATALOG>
 <CD>
  <JOB>Telent</JOB>
  <ARTIST>Lee Bo Young</ARTIST>
  <HOMETOWN>In Cheon</HOMETOWN>
  <BODY>168cm, 48kg</BODY>
  <BIRTH>1979. 1. 12</BIRTH>
 </CD>
 <CD>
  <JOB>Telent</JOB>
  <ARTIST>Um Ji Won</ARTIST>
  <HOMETOWN>DaeGu</HOMETOWN>
  <BODY>170cm, 48kg</BODY>
  <BIRTH>1977. 12. 25</BIRTH>
 </CD>
 <CD>
  <JOB>Telent</JOB>
  <ARTIST>Lee Min Jeong</ARTIST>
  <HOMETOWN>Seoul</HOMETOWN>
  <BODY>167cm, 49kg</BODY>
  <BIRTH>1982. 2. 16</BIRTH>
 </CD>
 <CD>
  <JOB>Telent</JOB>
  <ARTIST>O Ji Eun</ARTIST>
  <HOMETOWN>Seoul</HOMETOWN>
  <BODY>165cm</BODY>
  <BIRTH>1990</BIRTH>
 </CD>
 <CD>
  <JOB>Singer</JOB>
  <ARTIST>Su Ji</ARTIST>
  <HOMETOWN>GwangJu</HOMETOWN>
  <BODY>168cm, 47kg</BODY>
  <BIRTH>1994. 10. 10</BIRTH>
 </CD>
 <CD>
  <JOB>Singer</JOB>
  <ARTIST>I U</ARTIST>
  <HOMETOWN>Seoul</HOMETOWN>
  <BODY>161.8cm, 44kg</BODY>
  <BIRTH>1993. 5. 16</BIRTH>
 </CD>
</CATALOG>

// 여자연예인 XML 정보입니다. 이렇게 하면 더 쉽게 다가오지 않을까 해서 일부러 여자 연예인을 예로 들어봤습니다.

 

위 3개의 파일이 연동되어 실시간 XML 파일의 정보를 가져옵니다.

 

 

 

 

예제를 직접 코딩해보고 응용을 해보기 바랍니다. 개발자는 계속적인 학습이 없으면 언제든지 도태될 수 있습니다.

 

혹시 오타 또는 오류 발견시 댓글, 쪽지 주시면 바로 수정해놓겠습니다.

 

 

'PHP > PHP and AJAX' 카테고리의 다른 글

PHP AJAX RSS Reader 구문  (0) 2013.07.24
PHP AJAX Live Search 구문  (0) 2013.07.23
PHP AJAX XML 연동  (0) 2013.07.22
PHP AJAX 데이터베이스 연동  (9) 2013.07.19
PHP AJAX 구문  (0) 2013.07.18
Posted by 진격의 파파

댓글을 달아 주세요

 

이번장에서는 PHP 에서 AJAX 를 이용한 Mysql 데이터베이스 연동에 대해서 살펴보겠습니다.  

 

AJAX 와 데이터베이스 연동은 실무에서도 정말 중요한 내용이고 별도의 다른 페이지 로딩없이 한 페이지 내에서 데이터베이스 내용을 불러들여 처리할 수 있으니 매우 유용한 기능이라 생각합니다.

 

데이터베이스 연동이니 우선 테이블을 하나 생성하겠습니다.

테이블 이름 : persons

 user_name

 age

 home

 job

 park

 33

 cheongju

 programmer

 kim

 35

 seoul

 police

 song

 42

 incheon

 webmaster

 lee

 36

 daegu

 teacher

// 테이블의 내용은 위처럼 되어 있다고 가정합니다. 이전 포스팅에서 테이블 만드는 방법에 대해서 설명이 되어있으니 혹시 테이블 생성에 대해서 모르는 분들은 이전 포스팅을 참조하시면 되겠습니다.

 

ajax_form.php 파일과 ajax.php 파일을 생성합니다.

ajax_form.php 파일은 내용을 보여주는 페이지 이며,

ajax.php  파일은 데이터베이스와 연동하여 ajax_form.php 파일로 전송시키는 역할을 합니다.

 

------ ajax_form.php ----

<html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script>
 function showUser(str)
 {
 if (str=="")
   {
   document.getElementById("txtHint").innerHTML="";
   return;
   }
 if (window.XMLHttpRequest)  {
 

// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
 else { 
 

// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()  {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)  {
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","ajax.php?q="+str,true);
 xmlhttp.send();
 }
 </script>
 </head>
 <body>
 

 <form>
 <select name="users" onchange="showUser(this.value)">
 <option value="">Select a person:</option>
 <option value="park">park</option>
 <option value="kim">kim</option>
 <option value="song">song</option>
 <option value="lee">lee</option>
 </select>
 </form>
 <br>
 <div id="txtHint"><b>사람들의 정보를 이곳에 보여줌.</b></div>

 </body>
 </html>

 

 

------ ajax.php ------

<?php
 $q=$_GET["q"];

 $con = mysqli_connect('localhost','user_id','user_pwd','test_db');
 if (!$con)  {
   die('Could not connect: ' . mysqli_error($con));
 }


 $sql = "SELECT * FROM persons WHERE user_name = '".$q."'";
 $result = mysqli_query($con,$sql);

 echo "<table border='1'>
 <tr>
 <th>username</th>
 <th>Age</th>
 <th>Home</th>
 <th>Job</th>
 </tr>";

 while($row = mysqli_fetch_array($result))
   {
   echo "<tr>";
   echo "<td>" . $row['user_name'] . "</td>";
   echo "<td>" . $row['age'] . "</td>";
   echo "<td>" . $row['home'] . "</td>";
   echo "<td>" . $row['job'] . "</td>";
   echo "</tr>";
   }
 echo "</table>";

 mysqli_close($con);
 ?>

// 두 개의 파일이 서로 연동되어 내용을 선택하면 어떠한 페이지 로딩없이 바로바로 데이터베이스 내용이 나타나는것을 확인할 수 있습니다. AJAX는 이처럼 사용자인터페이스에 매우 유용한 기능을 제공한다 보면 됩니다. 더 자세히 알아두면 실무에서 많은 도움이 될거라 믿어의심치 않습니다.

 

혹시 오류, 오타 있으면 쪽지, 댓글 부탁드립니다.

'PHP > PHP and AJAX' 카테고리의 다른 글

PHP AJAX RSS Reader 구문  (0) 2013.07.24
PHP AJAX Live Search 구문  (0) 2013.07.23
PHP AJAX XML 연동  (0) 2013.07.22
PHP AJAX 데이터베이스 연동  (9) 2013.07.19
PHP AJAX 구문  (0) 2013.07.18
Posted by 진격의 파파

댓글을 달아 주세요

  1. 질문이요 2014.01.01 18:32  댓글주소  수정/삭제  댓글쓰기

    ajax_form.php에서 특정 버튼을 눌렀을 때 비동기적으로 새로운 user를 추가하려면 어떻게 해야 하나요?

  2. 질문이요 2014.01.01 18:35  댓글주소  수정/삭제  댓글쓰기

    참고로 다른 설정은 공백으로 둔 채 user_name을 robot으로 무한 추가 하려고 합니다

  3. 2014.01.01 18:56  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 처음처럼 2015.05.08 06:30  댓글주소  수정/삭제  댓글쓰기

    고맙습니다. 이틀정도 이문제 때문에 헤매다가 드디어 여기를 발견했어요.
    한번 시도해 보고 안되는 부분은 여쭤보겠습니다.^^ 고마워용!

  5. 로던 2016.08.11 17:20  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다

    그게 도움이 되었습니다.

  6. 고돌 2017.02.20 22:47  댓글주소  수정/삭제  댓글쓰기

    감사합니다~

  7. 큰비 2017.06.10 13:54  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 많은 도움 되었습니다.

  8. 제코 2017.11.07 08:55  댓글주소  수정/삭제  댓글쓰기

    우왕 너무너무 감사합니다 !!!!

 

 

AJAX 의 기본적인 정의는 비동기식 즉, 웹페이지에 어떤 내용을 보여줄때 리로딩(새로고침) 되는것을 동기식이라고 하며 리로딩없이 페이지내에서 서버의 데이터를 가져오거나 보여줄때 비동기식이라고 하는데 AJAX 는 그러한 비동기적 방법을 구현 가능케 해줍니다. 

 

우선 예제를 보면서 설명하겠습니다. 아래 나오는 소스의 내용은 이름중에 성만 입력하면 그에 해당하는 이름 리스트를 가져옵니다.

첫번째 파일은 form 구문이며, 두번째 파일은 ajax 관련 파일입니다. 페이지의 리로딩이나 새로고침 없이 두개의 페이지가 서로 연동되는것을 확인할 수 있습니다.

------ ajax_form.php ------

<html>
 <head>
 <script>
 function showHint(str)
 {
 if (str.length==0)
   {
   document.getElementById("txtHint").innerHTML="";
   return;
   }
 if (window.XMLHttpRequest)
   { // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   { // code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","ajax.php?q="+str,true);
 xmlhttp.send();
 }
 </script>
 </head>
 <body>

 <p><b>성씨를 입력하세요:</b></p>
 <form>
 성씨 입력: <input type="text" onkeyup="showHint(this.value)">
 </form>
 <p>이름: <span id="txtHint"></span></p>

 </body>
 </html>

 

 

------ ajax.php ------

<?php
 // 배열(array)에 값을 담습니다.
 $a[]="김태희";
 $a[]="김희선";
 $a[]="김혜수";
 $a[]="고현정";
 $a[]="구혜선";
 $a[]="공효진";
 $a[]="김남주";
 $a[]="민효린";
 $a[]="송지효";
 $a[]="손예진";
 $a[]="송혜교";
 $a[]="서우";
 $a[]="엄지원";
 $a[]="이나영";
 $a[]="오윤아";
 $a[]="임수정";
 $a[]="전지현";
 $a[]="조여정";
 $a[]="이효리";
 $a[]="최여진";
 $a[]="이연아";
 $a[]="남상미";
 $a[]="손연재";
 $a[]="한효주";
 $a[]="수지";
 $a[]="박한별";
 $a[]="박수미";
 $a[]="고준희";
 $a[]="박하선";
 $a[]="아이유";

 //get the q parameter from URL
 $q=$_GET["q"]; // ajax_form.php 에서 'q'라는 변수로 넘어온 값을 받는 부분

 // 입력된 값이 있는지 체크하는 구문(글자의 길이가 0보다 크냐라는 의미)
 if (strlen($q) > 0)
   {
   $hint="";
   for($i=0; $i<count($a); $i++)
     {
     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
       {
       if ($hint=="")
         {
         $hint=$a[$i];
         }
       else
         {
         $hint=$hint." , ".$a[$i];
         }
       }
     }
   }

 // 성과 일치되는 값이 없으면 "no suggestion" 을 출력하고 값이 있으면 이름 전체를 출력합니다.
 if ($hint == "")
   {
   $response="no suggestion";
   }
 else
   {
   $response=$hint;
   }

 // 값을 출력함
 echo iconv("euc-kr","utf-8",$response);  // 한글이 깨져서 euc-kr로 값을 변환함
 ?>

// 두 개의 파일이 같은 폴더내 위치해 있다고 가정하고 테스트 하면 아래와 같이 성씨만 입력하면 해당되는 사람들의 이름이 나타납니다

// 구글이나 네이버 검색할때 많이 검색된 단어 위주로 미리 검색창에 보여지는데 그러한 기능과 유사한 기능이라 보면 되겠습니다.

 

AJAX는 이처럼 서로다른 몇개의 페이지와 실시간 연동이 가능하고, 리로딩없이 구현되기 때문에 방문자들에게 아주 좋은 기능들을 제공할 수 있습니다.

'PHP > PHP and AJAX' 카테고리의 다른 글

PHP AJAX RSS Reader 구문  (0) 2013.07.24
PHP AJAX Live Search 구문  (0) 2013.07.23
PHP AJAX XML 연동  (0) 2013.07.22
PHP AJAX 데이터베이스 연동  (9) 2013.07.19
PHP AJAX 구문  (0) 2013.07.18
Posted by 진격의 파파

댓글을 달아 주세요