프로그래밍/General

PHP 검색 조회 등록 프로그램.

Lou Park 2017. 12. 20. 12:39
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
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
 
<html>
    <head>
        <meta charset="utf-8">
        <title>Address Book</title>
    </head>
 
    <body>
        <div>
            <input id="addressBookButton" type="button" value="Address Book">
            <input id="addEntryButton" type="button" value="Add an Enty">
        </div>
 
        <div id="addressBook">
            <p>Search By Last Name: 
                <input id="searchInput">
            </p>
            <div id="Names"></div>
        </div>
 
        <div id="addEntry" style="display: none">
            <p>
                First Name:
                <input id="first">
                Last Name:
                <input id="last">
            </p>
            <p class="head">Address:</p>
            <p>Street: <input id="street"></p>
            <p>City: <span id="city" class="validator"></span></p>
            <p>State: <span id="state" class="validator"></span></p>
            <p>Zip: 
                <input id="zip">
                <span id="validateZip" class="validator"></span></p>
            </p>
            <p>Telephone:
                <input id="phone">
                <span id="validatePhone" class="validator"></span>
            </p>
            <p>
                <input id="submitButton" type="button" value="Submit">
            </p>
            <div id="success" class="validator"></div>
        </div>
    </body>
 
    <script>
        // /get_address.php
        // /get_address.php?first=&last=
        // /validate_zip.php?zip=
        // /validate_phone.php?phone=
        // /add_entry.php? query all information
        // /search.php?input=
        var hostname = "http://164.125.36.68";
        var webServiceUrl = "/201406253";
 
        var phoneValid = false;
        var zipValid = false;
 
        function showAddressBook() {
            document.getElementById("addEntry").style.display = "none";
            document.getElementById("addressBook").style.display = "block";
            callWebService("/get_address.php", parseData);
        }
 
        function callWebService(serviceUrl, callback) {
            var requestUrl = webServiceUrl + serviceUrl;
 
            try {
                var asyncRequest = new XMLHttpRequest();
                asyncRequest.addEventListener("readystatechange",
                    function() {
                        callback(asyncRequest);
                    }, false);
                asyncRequest.open("GET", requestUrl, true);
                asyncRequest.setRequestHeader("Accept",
                    "application/json; charset=utf-8");
                asyncRequest.send();
            } catch (exception) {
                alert("Request Failed");
            }
        }
 
        function parseData(asyncRequest) {
            if (asyncRequest.readyState == 4 &&
                asyncRequest.status == 200) {
                var data = JSON.parse(asyncRequest.responseText);
                displayNames(data);
            }
        }
 
        function displayNames(data) {
            var listBox = document.getElementById("Names");
            listBox.innerHTML = "";
 
            for (var i = 0; i < data.length; i++) {
                var entry = document.createElement("div");
                var field = document.createElement("fieldset");
                entry.onclick = function() {
                    getAddress(this, this.innerHTML);
                }
                entry.id = i;
                entry.innerHTML = data[i].First + " " + data[i].Last;
                field.appendChild(entry);
                listBox.appendChild(field);
            }
        }
 
        function getAddress(entry, name) {
            var firstLast = name.split(" ");
            var requestUrl = webServiceUrl + "/get_address.php?first=" 
                    + firstLast[0] + "&last=" + firstLast[1];
            try {
                var asyncRequest = new XMLHttpRequest();
 
                asyncRequest.addEventListener("readystatechange",
                    function() {
                        displayAddress(entry, asyncRequest);
                    }, false);
                asyncRequest.open("GET", requestUrl, true);
                asyncRequest.setRequestHeader("Accept",
                    "application/json; charset=utf-8");
                asyncRequest.send();
            } catch (exception) {
                alert("Request Failed");
            }
        }
 
        function displayAddress(entry, asyncRequest) {
            if (asyncRequest.readyState == 4 && asyncRequest.status == 200) {
                var data = JSON.parse(asyncRequest.responseText);
                var name = entry.innerHTML;
                entry.innerHTML = name + "<br/>" + data.Street + 
                "<br>" + data.City + ", " + data.State + ", " +
                data.Zip + "<br/>" + data.Telephone;
 
                entry.onclick = function() {
                    clearField(entry, name);
                }
            }
        }
 
        function clearField(entry, name) {
            entry.innerHTML = name;
            entry.onclick = function() {
                getAddress(entry, name);
            }
        }
 
        function addEntry() {
            document.getElementById("addressBook").style.display = "none";
            document.getElementById("addEntry").style.display = "block";
        }
 
        function validateZip(zip) {
            callWebService("/validate_zip.php?zip=" + zip, showCityState);
        }
 
        function showCityState(asyncRequest) {
            document.getElementById("validateZip")
            .innerHTML = "Checking zip...";
 
            if (asyncRequest.readyState == 4) {
                if (asyncRequest.status == 200) {
                    var data = JSON.parse(asyncRequest.responseText);
                    console.log("zip Data: " + asyncRequest.responseText);
                    if (data.Validity == "Valid") {
                        zipValid = true;
                        document.getElementById("validateZip").innerHTML = "";
                        document.getElementById("city").innerHTML = data.City;
                        document.getElementById("state").innerHTML = data.State;
                    } else {
                        zipValid = false;
                        document.getElementById("validateZip").innerHTML = data.ErrorText;
                        document.getElementById("city"),innerHTML = "";
                        document.getElementById("state"),innerHTML = "";
                    }
                } else if (asyncRequest.status == 500){
                    document.getElementById("validateZip").innerHTML = "Zip validation service not available";
                }
            }
        }
 
        function validatePhone(phone) {
            callWebService("/validate_phone.php?phone=" + phone, showPhoneError);
        }
 
        function showPhoneError(asyncRequest) {
            if (asyncRequest.readyState == 4 && asyncRequest.status == 200) {
                var data = JSON.parse(asyncRequest.responseText);
                console.log("phone Data: " + asyncRequest.responseText);
                if (data.ErrorText != "Valid Telephone Format") {
                    phoneValid = false;
                    document.getElementById("validatePhone").innerHTML = data.ErrorText;
                } else {
                    phoneValid = true;
                }
            }
        }
 
        function saveForm() {
            var first = document.getElementById("first").value;
            var last = document.getElementById("last").value;
            var street = document.getElementById("street").value;
            var city = document.getElementById("city").value;
            var state = document.getElementById("state").value;
            var zip = document.getElementById("zip").value;
            var phone = document.getElementById("phone").value;
 
            if (!zipValid || !phoneValid) {
                document.getElementById("success").innerHTML = "Invalid data entered. Check form for more information";
            } else if (first == "" || last == "") {
                document.getElementById("success").innerHTML = "First Name and Last Name must have a value.";
            } else {
                document.getElementById("addEntry").style.display = "none";
                document.getElementById("addressBook").style.display = "block";
            
                callWebService("/add_entry.php?first=" 
                    + first + "&last=" 
                    + last + "&street=" 
                    + street + "&city="
                    + city + "&state="
                    + state + "&zip="
                    + zip + "&phone=" + phone, parseData);
            }
        }
 
        function search(input) {
            var listBox = document.getElementById("Names");
            listBox.innerHTML = "";
 
            if (input == "") {
                showAddressBook();
            } else {
                var serviceUrl = "/search.php?input=" + input;
                callWebService(serviceUrl, parseData);
            }
        }
 
        function start() {
            document.getElementById("addressBookButton").addEventListener("click", showAddressBook, false);
            document.getElementById("addEntryButton").addEventListener("click", addEntry, false);
            document.getElementById("searchInput").addEventListener("keyup", search(this.value), false);
            document.getElementById("zip").addEventListener("blur", validateZip(this.value), false);
            document.getElementById("phone").addEventListener("blur", validatePhone(this.value), false);
            document.getElementById("submitButton").addEventListener("click", saveForm, false);
 
            showAddressBook();
        }
 
        window.addEventListener("load", start, false);
    </script>
</html>
cs


'프로그래밍 > General' 카테고리의 다른 글

어떤 값이든 0~1 사이로 표현하고자 한다면?  (0) 2020.11.19
타임존(Timezone) 코드 한글 번역 자료 JSON 파일  (1) 2018.10.05
XML에 XSL(T)를 적용해보자!  (0) 2017.12.12
PHP MYSQL과 통신 쉽게하기  (0) 2017.12.12
구글 검색결과 상단에 내 페이지가 나오는 비결  (1) 2017.04.15

'프로그래밍/General'의 다른글

  • 현재글PHP 검색 조회 등록 프로그램.

관련글

댓글

티스토리툴바