Web/PHP 검색 결과

55개 발견
  1. 미리보기
    2015.06.13 - Palpit

    [PHP] 55. AJAX Poll - PHP 강좌, PHP5

  2. 미리보기
    2015.06.13 - Palpit

    [PHP] 54. AJAX RSS Reader - PHP 강좌, PHP5

  3. 미리보기
    2015.06.13 - Palpit

    [PHP] 53. AJAX 실시간 검색 ( AJAX Live Search) - PHP 강좌, PHP5

  4. 미리보기
    2015.06.13 - Palpit

    [PHP] 52. AJAX 와 XML ( AJAX and XML) - PHP 강좌, PHP5

  5. 미리보기
    2015.06.13 - Palpit

    [PHP] 51. AJAX 와 MySQL ( AJAX and MySQL) - PHP 강좌, PHP5

  6. 미리보기
    2015.06.13 - Palpit

    [PHP] 50. AJAX 와 PHP(AJAX and PHP) - PHP 강좌, PHP5

  7. 미리보기
    2015.06.13 - Palpit

    [PHP] 49. AJAX 소개( AJAX Introduction) - PHP 강좌, PHP5

  8. 미리보기
    2015.06.13 - Palpit

    [PHP] 48. XML DOM Parser - PHP 강좌, PHP5

[PHP] 55. AJAX Poll - PHP 강좌, PHP5

2015.06.13 14:16 - Palpit
조회수 확인


PHP Example - AJAX Poll



1. AJAX Poll

 아래 예제는 리로드 없이 투표 결과를 보이는 예제입니다.


  










2. Example Explained - The HTML Page



 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
<script>
function getVote(int) {
  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("poll").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","poll_vote.php?vote="+int,true);
  xmlhttp.send();
}
</script>
</head>
<body>
 
<div id="poll">
<h3>Do you like PHP and AJAX so far?</h3>
<form>
Yes:
<input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br>No:
<input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
</div>
 
</body>
</html>
cs
 


3. The PHP File




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
$vote = $_REQUEST['vote'];
 
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
 
//put content in array
$array = explode("||"$content[0]);
$yes = $array[0];
$no = $array[1];
 
if ($vote == 0) {
  $yes = $yes + 1;
}
if ($vote == 1) {
  $no = $no + 1;
}
 
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
 
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2));?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2));?>%
</td>
</tr>
</table>
cs
 



 













* 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다
조회수 확인


PHP Example - AJAX RSS Reader

 RSS 리더는 RSS 피드를 읽을 때 사용됩니다.





1. AJAX RSS Reader

 아래 예제는 웹페이지 리로드 없이 RSS-피드를 불러오는 예제입니다.











2. Example Explained - The HTML Page




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<script>
function showRSS(str) {
  if (str.length==0) { 
    document.getElementById("rssOutput").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("rssOutput").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getrss.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
 
<form>
<select onchange="showRSS(this.value)">
<option value="">Select an RSS-feed:</option>
<option value=""> My Blog Post </option>
<option value="Google">Google News</option>
<option value="NBC">NBC News</option>
</select>
</form>
<br>
<div id="rssOutput">RSS-feed will be listed here...</div>
</body>
</html>
cs
 






3. The PHP File



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?php
//get the q parameter from URL
$q=$_GET["q"];
 
//find out which feed was selected
if($q=="Blog") {
}else if($q=="Google") {
} elseif($q=="NBC") {
 
$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);
 
//get elements from "<channel>"
$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;
 
 
//output elements from "<channel>"
echo("<p><a href='" . $channel_link
  . "'>" . $channel_title . "</a>");
echo("<br>");
echo($channel_desc . "</p>");
 
//get and output "<item>" elements
$x=$xmlDoc->getElementsByTagName('item');
for ($i=0$i<=2$i++) {
  $item_title=$x->item($i)->getElementsByTagName('title')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_link=$x->item($i)->getElementsByTagName('link')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_desc=$x->item($i)->getElementsByTagName('description')
  ->item(0)->childNodes->item(0)->nodeValue;
  echo ("<p><a href='" . $item_link
  . "'>" . $item_title . "</a>");
  echo ("<br>");
  echo ($item_desc . "</p>");
}
?>
cs
 










 * 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다
조회수 확인


PHP Example - AJAX Live Search

 AJAX는 좀 더 사용자 친화적이고 상호작용적 검색을 만드는데 사용됩니다.




1. AJAX Live Search

 아래 예제는 사용자가 타이핑하는 동안 실시간 검색을 할 수 있게 보여줍니다.


 실시간 검색(Live Search)는 기본 검색과 비교했을 때 많은 장점을 갖습니다:

  - 타이핑과 동시에 결과 보여줌

  - 타이핑하는 동안 작은 결과창 보여줌









2. Example Explained - The HTML Page



 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<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);
  xmlhttp.send();
}
</script>
</head>
<body>
 
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
 
</body>
</html>
cs






3. The PHP File

 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
 
$x=$xmlDoc->getElementsByTagName('link');
 
//get the q parameter from URL
$q=$_GET["q"];
 
//lookup all links from the xml file if length of q>0
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>";
        }
      }
    }
  }
}
 
// Set output to "no suggestion" if no hint was found
// or to the correct values
if ($hint=="") {
  $response="no suggestion";
else {
  $response=$hint;
}
 
//output the response
echo $response;
?>
cs

 


links.xml


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<pages>
  <link>
    <title>HTML a tag</title>
  </link>
  <link>
    <title>HTML br tag</title>
  </link>
  <link>
    <title>CSS background Property</title>
  </link>
  <link>
    <title>CSS border Property</title>
  </link>
  <link>
    <title>JavaScript Date Object</title>
  </link>
  <link>
    <title>JavaScript Array Object</title>
  </link>
</pages>
cs









* 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다
조회수 확인

PHP Example - AJAX and XML


1. AJAX XML Example







 위 예제는 AJAX로 XML로부터 웹페이지에서 정보를 어떻게 불러오는지에 대한 예제입니다.







2. Example Explained - The HTML Page
 사용자가 리스트박스의 CD를 선택할 때, showCD() 함수가 실행됩니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<script>
function showCD(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","getcd.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>
 
<form>
Select a CD:
<select name="cds" onchange="showCD(this.value)">
<option value="">Select a CD:</option>
<option value="Bob Dylan">Bob Dylan</option>
<option value="Bonnie Tyler">Bonnie Tyler</option>
<option value="Dolly Parton">Dolly Parton</option>
</select>
</form>
<div id="txtHint"><b>CD info will be listed here...</b></div>
 
</body>
</html>
cs




 
 showCD() 함수는 아래와 같이 작동합니다:
  - CD가 선택되었는지 확인
  - XMLHttpRequest 객체 생성
  - 서버 반응에 따라 실행할 함수 생성
  - 서버로 요청 전송
  - 파라미터 q가 추가된 URL로 알림





3. The PHP File
 PHP 스크립트는 XML 문서 cd_catalog.xml을 로드하고, XML 파일로 질의를 실행합니다, 그리고 결과를 HTML로 반환합니다:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
$q=$_GET["q"];
 
$xmlDoc = new DOMDocument();
$xmlDoc->load("cd_catalog.xml");
 
$x=$xmlDoc->getElementsByTagName('ARTIST');
 
for ($i=0$i<=$x->length-1$i++) {
  //Process only element nodes
  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++) { 
  //Process only element nodes
  if ($cd->item($i)->nodeType==1) {
    echo("<b>" . $cd->item($i)->nodeName . ":</b> ");
    echo($cd->item($i)->childNodes->item(0)->nodeValue);
    echo("<br>");
  }
}
?>
cs





 cd_catalog.xml



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
 
<?xml version="1.0" encoding="utf-8"?>
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>Still got the blues</TITLE>
        <ARTIST>Gary Moore</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Virgin records</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Eros</TITLE>
        <ARTIST>Eros Ramazzotti</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>BMG</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>One night only</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1998</YEAR>
    </CD>
    <CD>
        <TITLE>Sylvias Mother</TITLE>
        <ARTIST>Dr.Hook</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS</COMPANY>
        <PRICE>8.10</PRICE>
        <YEAR>1973</YEAR>
    </CD>
    <CD>
        <TITLE>Maggie May</TITLE>
        <ARTIST>Rod Stewart</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Pickwick</COMPANY>
        <PRICE>8.50</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Romanza</TITLE>
        <ARTIST>Andrea Bocelli</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.80</PRICE>
        <YEAR>1996</YEAR>
    </CD>
    <CD>
        <TITLE>When a man loves a woman</TITLE>
        <ARTIST>Percy Sledge</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Black angel</TITLE>
        <ARTIST>Savage Rose</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Mega</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>1999 Grammy Nominees</TITLE>
        <ARTIST>Many</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Grammy</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1999</YEAR>
    </CD>
    <CD>
        <TITLE>For the good times</TITLE>
        <ARTIST>Kenny Rogers</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Mucik Master</COMPANY>
        <PRICE>8.70</PRICE>
        <YEAR>1995</YEAR>
    </CD>
    <CD>
        <TITLE>Big Willie style</TITLE>
        <ARTIST>Will Smith</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>Tupelo Honey</TITLE>
        <ARTIST>Van Morrison</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>8.20</PRICE>
        <YEAR>1971</YEAR>
    </CD>
    <CD>
        <TITLE>Soulsville</TITLE>
        <ARTIST>Jorn Hoel</ARTIST>
        <COUNTRY>Norway</COUNTRY>
        <COMPANY>WEA</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1996</YEAR>
    </CD>
    <CD>
        <TITLE>The very best of</TITLE>
        <ARTIST>Cat Stevens</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Island</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Stop</TITLE>
        <ARTIST>Sam Brown</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>A and M</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Bridge of Spies</TITLE>
        <ARTIST>T'Pau</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Siren</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Private Dancer</TITLE>
        <ARTIST>Tina Turner</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Capitol</COMPANY>
        <PRICE>8.90</PRICE>
        <YEAR>1983</YEAR>
    </CD>
    <CD>
        <TITLE>Midt om natten</TITLE>
        <ARTIST>Kim Larsen</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Medley</COMPANY>
        <PRICE>7.80</PRICE>
        <YEAR>1983</YEAR>
    </CD>
    <CD>
        <TITLE>Pavarotti Gala Concert</TITLE>
        <ARTIST>Luciano Pavarotti</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>DECCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1991</YEAR>
    </CD>
    <CD>
        <TITLE>The dock of the bay</TITLE>
        <ARTIST>Otis Redding</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Atlantic</COMPANY>
        <PRICE>7.90</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Picture book</TITLE>
        <ARTIST>Simply Red</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Elektra</COMPANY>
        <PRICE>7.20</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Red</TITLE>
        <ARTIST>The Communards</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>London</COMPANY>
        <PRICE>7.80</PRICE>
        <YEAR>1987</YEAR>
    </CD>
    <CD>
        <TITLE>Unchain my heart</TITLE>
        <ARTIST>Joe Cocker</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>EMI</COMPANY>
        <PRICE>8.20</PRICE>
        <YEAR>1987</YEAR>
    </CD>
</CATALOG>
 
cs



 










* 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다
조회수 확인
PHP - AJAX and MySQL

 




1. AJAX Database Example

 아래 예제는 AJAX를 이용하여 웹페이지에서 데이터베이스로부터 정보를 어떻게 가져오는지에 대한 예제입니다.
 



2. Example Explained - The MySQL Database

 데이터 베이스 테이블은 아래와 같습니다.

idFirstNameLastNameAgeHometownJob
1PeterGriffin41QuahogBrewery
2LoisGriffin40NewportPiano Teacher
3JosephSwanson39QuahogPolice Officer
4GlennQuagmire41QuahogPilot

 

 


3. Example Explained

 예제는 리스트 박스를 사용자가 클릭 했을 때, showUser()를 호출하게 하는 예제를 만들겠습니다.


 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
<head>
<script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        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","getuser.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="1">Peter Griffin</option>
  <option value="2">Lois Griffin</option>
  <option value="3">Joseph Swanson</option>
  <option value="4">Glenn Quagmire</option>
  </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
 
</body>
</html>
cs

 



 코드 설명:

  첫째로, 어느 사람도 선택되지 않았는지 확인합니다. 


  사람이 선택되었다면, 아래와 같은 일을 합니다:

   - XMLHttpRequest 객체를 생성

   - 서버 반응에 의해 실행되어질 함수 생성

   - 서버로 요청을 보냄

   - URL에 추가된 파라미터 q를 확인




4. The PHP File
 자바스크립트에 의해 호출되는 서버의 페이지는 getuser.php라는 PHP 파일입니다.

   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<style>
table {
    width: 100%;
    border-collapse: collapse;
}
table, td, th {
    border: 1px solid black;
    padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
 
<?php
$q = intval($_GET['q']);
 
$servername = "localhost";
$username = "----";
$password = "----";
$dbname = "mydb";
 
// Create connection
$con = new mysqli($servername$username$password$dbname);
 
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}
 
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = ".$q;
$result = mysqli_query($con,$sql);
 
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['firstname'] . "</td>";
    echo "<td>" . $row['lastname'] . "</td>";
    echo "<td>" . $row['age'] . "</td>";
    echo "<td>" . $row['hometown'] . "</td>";
    echo "<td>" . $row['job'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
cs
 



  




 설명:

  1. PHP는 MySQL 서버와 연결을 엽니다.

  2. 일치하는 사람을 찾습니다.

  3. HTML 테이블을 생성한 뒤, 데이터를 채우고, txtHint placeholder로 전송합니다.

 






* 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다
조회수 확인


PHP - AJAX and PHP

 AJAX는 좀 더 상호적인 어플리케이션을 만들기 위해 사용됩니다.





1. AJAX PHP Example

 아래 예제는 사용자가 입력 필드에 문자를 타이핑하는 동안 웹 페이지와 웹 서버가 어떻게 통신을 하는가를 보이는 예제입니다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET""gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
 
<p><b>Start typing a name in the input field below:</b></p>
<form
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
cs

 




 위 예제에서 사용자가 입력 필드에 문자를 입력할 때, showHint() 함수가 실행이 됩니다.

 


 코드 설명:

  - 첫째로, 입력 필드가 비었는지 확인합니다. 비어있다면, txtHint placeHolder의 내용을 지우고 함수를 빠져나옵니다.



 그러나, 입력 필드가 비어있지 않다면, 아래와 같은 일을 합니다:

  - XMLHttpRequest 객체를 생성

  - 서버 반응에 대해 실행될 함수 생성

  - 서버의 PHP 파일(gethint.php)에 요청을 보냅니다.

  - q 파라미터가 gethint.php?="+str이 추가되어 알려집니다.

  - str 변수는 입력필드의 내용을 지니고 있습니다.

 



 






2. The PHP File - "gethint.php"

 PHP 파일은 배열의 이름을 확인하고, 상응하는 이름을 브라우저에 반환합니다:




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?php
// Array with names
$a[] = "Anna";
$a[] = "Brittany";
$a[] = "Cinderella";
$a[] = "Diana";
$a[] = "Eva";
$a[] = "Fiona";
$a[] = "Gunda";
$a[] = "Hege";
$a[] = "Inga";
$a[] = "Johanna";
$a[] = "Kitty";
$a[] = "Linda";
$a[] = "Nina";
$a[] = "Ophelia";
$a[] = "Petunia";
$a[] = "Amanda";
$a[] = "Raquel";
$a[] = "Cindy";
$a[] = "Doris";
$a[] = "Eve";
$a[] = "Evita";
$a[] = "Sunniva";
$a[] = "Tove";
$a[] = "Unni";
$a[] = "Violet";
$a[] = "Liza";
$a[] = "Elizabeth";
$a[] = "Ellen";
$a[] = "Wenche";
$a[] = "Vicky";
 
// get the q parameter from URL
$q = $_REQUEST["q"];
 
$hint = "";
 
// lookup all hints from array if $q is different from "" 
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($qsubstr($name0$len))) {
            if ($hint === "") {
                $hint = $name;
            } else {
                $hint .= ", $name";
            }
        }
    }
}
 
// Output "no suggestion" if no hint was found or output correct values 
echo $hint === "" ? "no suggestion" : $hint;
?>
cs
 










* 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다
조회수 확인

AJAX Introduction
 AJAX는 웹 페이지의 일부분 수정에 관한 것 입니다, 전체 페이지를 리로드 할 필요 없이.




1. What is AJAX?
 AJAX = Asynchronous JavaScript and XML
 
 AJAX는 빠르게 생성하고 다이나믹한 웹 페이지를 위한 기술입니다.

 AJAX는 브라우저 뒤의 서버의 작은 양의 데이터를 교환함으로 비동기적으로 웹페이지를 수정하는 것을 허용합니다.
 
 일반적인 웹 페이지(AJAX를 사용하지 않는)는 내용이 바뀌여야 한다면 모든 페이지를 리로드해야 합니다.

 AJAX를 이용하는 어플리케이션들: Google Maps, Gmail, Youtube, Facebook tabs.





2. How AJAX Works




 [ 출처: W3Schools ]







3. AJAX is Based on Internet Standards
 AJAX는 인터넷 표준을 기반으로 하고, 아래 조합을 사용합니다:
  - XMLHttpRequest 객체 (서버와 비동기적으로 데이터 교환을 위해)
  - JavaScript / DOM (정보와 상호작용 / 출력)
  - CSS (데이터를 스타일을 입히기 위해)
  - XML (종종 데이터 전송을 위한 형태로)

 * AJAX 어플리케이션은 브라우저- 와 플랫폼- 독립적입니다!


4. Google Suggest
 AJAX는 Google에 의해 2005년 만들어졌습니다.

 Google Suggest는 AJAX를 사용하여 매우 다이나믹한 웹 인터페이스를 만들었습니다: Google 검색 박스에 타이핑을 할 때, 자바스크립트는 서버로 문자를 보내고 서버는 제안의 목록을 반환합니다.





5. Start Using AJAX Today
 PHP 학습 장에서, 어떻게 AJAX가 전체 페이지를 리로드하는 일 없이 웹페이지의 부분만을 수정하는가에 대해 보이도록 하겠습니다.
 












* 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다
조회수 확인

PHP XML DOM Parser
 내장된 DOM 파서는 PHP에서 XML 문서를 처리하기 쉽게 해줍니다.



1. The XML DOM Parser
 DOM 파서는 tree-based 파서입니다.

 아래 예제 XML 문서를 봅시다:


<?xml version="1.0" encoding="UTF-8"?>
<from>Jani</from>


 DOM은 XML을 트리 구조로 봅니다:
  - 레벨 1: XML 문서
  - 레벨 2: 루트 요소: <from>
  - 레벨 3: 텍스트 요소: "Jani"





2. Load and Output XML
 XML 파서를 초기화하고, xml을 로드하고, 출력하는 예제입니다:

1
2
3
4
5
6
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");
 
print $xmlDoc->saveXML();
?>
cs

 


 



 
 만약 브라우저 윈도우에서 소스보기를 선택하면, 아래와 같이 HTML로 나올 것 입니다:


 





 위 예제는 DOM 문서-객체를 생성하고 note.xml로부터 XML을 로드한 것 입니다.

 그 다음 saveXML 함수로 내부 XML 문서를 문자열로 넣은 것 입니다, 그러므로 출력 결과를 보게 되는 거죠.








3. Looping through XML
 XML 파서를 초기화하고, XML을 로드하고, <note> 요소의 모든 요소를 반복하는 예제입니다:



1
2
3
4
5
6
7
8
9
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("note.xml");
 
$x = $xmlDoc->documentElement;
foreach ($x->childNodes AS $item) {
  print $item->nodeName . " = " . $item->nodeValue . "<br>";
}
?>
cs

 

 





 위 예제는 각 요소의 텍스트 노드가 비어있다는 것을 볼 수 있습니다.

 XML이 생성될 때, 노드 사이에 공백이 종종 포함됩니다. XML DOM 파서는 일반적인 요소로 취급하고, 공백에 대해 인식하지 않는다면, 가끔 문제를 일으킵니다.












 


* 이 강좌는 'w3schools'를 참조하여 작성하였습니다.

다른 카테고리의 글 목록

Web/PHP 카테고리의 포스트를 톺아봅니다