📄 Tip&Tech - 상세보기
제목: 위치 정보 연동 QR코드 구성도
내용:
1. 위치 정보 접근 동의 : Location.php
-> 서비스를 개선하기 위해 위치 정보에 접근할 수 있도록 허용해주세요.
-> 위치 정보 접근에 동의
2. 위치정보 DB에 저장되고 다음페이지 진행 : Location_b.php
-> 위치정보가 Location_b.php에 전달되어 DB에 저장됩니다.
-------
scans.sql
CREATE TABLE scans (
id INT AUTO_INCREMENT PRIMARY KEY,
latitude DECIMAL(10, 8) NOT NULL,
longitude DECIMAL(11, 8) NOT NULL,
scan_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
-------
-> 다음 페이지 진행
3. 위치 정보 결과 출력페이지 : Location_c.php
지도 위치 정보 무료 API
https://nominatim.openstreetmap.org
💬 댓글
Location.php=======<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QR Code Landing Page</title> <style> body { font-family: Arial, sans-serif; text-align: center; padding: 50px; } .container { max-width: 600px; margin: auto; border: 1px solid #ccc; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #333; } p { font-size: 1.2em; color: #666; } .btn { display: inline-block; padding: 10px 20px; margin: 20px 0; font-size: 1em; color: #fff; background-color: #007BFF; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; } .btn:hover { background-color: #0056b3; } #locationConsent { margin: 20px 0; } </style> <script> function sendLocationToServer(lat, lon) { var xhr = new XMLHttpRequest(); xhr.open("POST", "Location_b.php", true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { alert("Location sent to server!"); document.getElementById('consentForm').style.display = 'none'; document.getElementById('mainContent').style.display = 'block'; } }; xhr.send("latitude=" + lat + "&longitude=" + lon); } function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var lat = position.coords.latitude; var lon = position.coords.longitude; sendLocationToServer(lat, lon); }, function(error) { alert("Error getting location: " + error.message); }); } else { alert("Geolocation is not supported by this browser."); } } function checkConsent() { var consentCheckbox = document.getElementById('locationConsentCheckbox'); if (consentCheckbox.checked) { getLocation(); } else { alert("Please consent to location access to proceed."); } } window.onload = function() { document.getElementById('mainContent').style.display = 'none'; }; </script></head><body> <div class="container" id="consentForm"> <h2>위치 정보 접근 동의</h2> <p>서비스를 개선하기 위해 위치 정보에 접근할 수 있도록 허용해주세요.</p> <div id="locationConsent"> <input type="checkbox" id="locationConsentCheckbox"> 위치 정보 접근에 동의합니다. </div> <button class="btn" onclick="checkConsent()">동의하고 계속하기</button> </div> <div class="container" id="mainContent"> <h1>Welcome to the PR Page!</h1> <p>We are glad to have you here. Please sign up to get the latest updates.</p> Sign Up <p>To enhance your experience, please allow us to access your location.</p> </div></body></html>
Location_b.php=======<?php// 데이터베이스 연결 설정$servername = "localhost";$username = "page";$password = "Sql*";$dbname = "page";// 클라이언트의 위치 정보 받기$latitude = isset($_POST['latitude']) ? $_POST['latitude'] : null;$longitude = isset($_POST['longitude']) ? $_POST['longitude'] : null;// 데이터베이스에 위치 정보 저장if ($latitude && $longitude) { $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $stmt = $conn->prepare("INSERT INTO scans (latitude, longitude, scan_time) VALUES (?, ?, NOW())"); $stmt->bind_param("dd", $latitude, $longitude); $stmt->execute(); $stmt->close(); $conn->close(); echo "Location data saved successfully.";} else { echo "Location data is missing.";}?>
Location_c.php=======<?php// 데이터베이스 연결 설정$servername = "localhost";$username = "page";$password = "Sql*";$dbname = "page";$conn = new mysqli($servername, $username, $password, $dbname);if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error);}// 함수: 위도와 경도로 주소를 얻기function getAddress($latitude, $longitude) { $url = "https://nominatim.openstreetmap.org/reverse?format=json&lat=$latitude&lon=$longitude&zoom=18&addressdetails=1"; // HTTP context options 설정 $options = [ 'http' => [ 'header' => "User-Agent: MyCustomUserAgent/1.0\r\n" ] ]; $context = stream_context_create($options); // file_get_contents로 HTTP 요청 $response = file_get_contents($url, false, $context); if ($response === FALSE) { return "주소를 찾을 수 없습니다."; } $json = json_decode($response, true); if (isset($json['address'])) { $address = $json['address']; $formatted_address = (isset($address['road']) ? $address['road'] : '') . ', ' . (isset($address['city']) ? $address['city'] : '') . ', ' . (isset($address['state']) ? $address['state'] : '') . ', ' . (isset($address['postcode']) ? $address['postcode'] : '') . ', ' . (isset($address['country']) ? $address['country'] : ''); return $formatted_address; } else { return "주소를 찾을 수 없습니다."; }}$sql = "SELECT latitude, longitude, scan_time FROM scans";$result = $conn->query($sql);if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $latitude = $row["latitude"]; $longitude = $row["longitude"]; $scanTime = $row["scan_time"]; // 역지오코딩을 통해 주소를 얻기 $address = getAddress($latitude, $longitude); echo "Latitude: " . $latitude . ", Longitude: " . $longitude . " - Address: " . $address . " - Scan Time: " . $scanTime . "<br>"; }} else { echo "No scans recorded.";}$conn->close();?>