본문 바로가기
WEB HACKING/웹 해킹[실습]

Php로 웹 개발하기 : 주소 검색(2)

by madevth 2021. 10. 31.
반응형

이전 글 : [모의해킹_실습] - Php로 웹 개발하기 : 주소 검색 기능 만들기(1)

 

주소 검색 결과를 출력하다 보니 문제점이 하나 생겼다.

지금까지는 php에 html을 섞어서 쓰는 게 익숙지 않아서 html 따로 php 따로 사용했는데, 그렇게 하다 보니 검색을 누르면 결과는 다른 페이지로 넘어간 후 떴다. 그래서 같이 쓰는 법을 공부해보았다.

 

[기존] address.html, address.php

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div id = wrapper>
        <div id = search>
            <form action="address.php" method = "post">
                <input id = "search_addr" name = "addr" type = "text" placeholder="시, 구를 입력해주세요." />
                <input type = "submit" value = "주소검색" id = "search_btn" />
            </form>
        </div>
        <div id = search_result></div>
    </div>
</body>
</html>
<?php
    if(isset($_POST['addr']) && $_POST['addr'] != NULL){
        $addrs = $_POST['addr'];

        $conn = mysqli_connect('localhost', 'ID', 'PW', 'DBname');
        $sql = "SELECT * FROM address where sigu like '%$addrs%';";
        $result = mysqli_query($conn, $sql);

        if(mysqli_num_rows($result) > 0){
            while($row = mysqli_fetch_array($result)){
                echo $row['sigu'];
                echo "<br />";
            }
        }
        mysqli_close($conn);
    }
?>

address.html에서 form으로 받은 값을 address.php에서 출력하는 방식이었다.

이것을 검색하면 결과가 한 화면 안에서 출력되도록 만들자.

 

 

<?php
    function print_result(){
        if(isset($_POST['addr']) && $_POST['addr'] != NULL){
            $addrs = $_POST['addr'];

            $conn = mysqli_connect('localhost', 'ID', 'PW', 'DBname');
            $sql = "SELECT * FROM address where sigu like '%$addrs%';";
            $result = mysqli_query($conn, $sql);
            
            if(mysqli_num_rows($result) > 0){
                while($row = mysqli_fetch_array($result)){
                    echo $row['sigu'];
                    echo "<br />";
                }
            } else{
                echo "<script>alert('주소 없음.')</script>";
            }
            mysqli_close($conn);
        } else{
            echo "검색해주세요.";
        }
    }
?>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <div class = "column">
        <div id = "search">
            <form method = "post">
                <input id = "search_addr" name = "addr" type = "text" placeholder="시, 구를 입력해주세요." />
                <input type = "submit" value = "주소 검색" id = "search_btn" />
            </form>
        </div>
        <div id = search_result>
            <?php
                print_result();
            ?>
        </div>
    </div>
</body>
</html>

결과를 출력할 <div id = search_result></div> 부분에서 print_result() 함수를 호출하고, 그 함수에서 기존 address.php가 하던 작업을 수행한다. (php는 자바스크립트보다는 리액트 방식이랑 비슷한 것 같다.)

 

 

결과를 표처럼 보여주려고 했는데 표라고 하기엔 컬럼이 하나밖에 없어서 id와 우편주소를 추가해주었다. 이름도 성의 없는 sigu에서 road_name으로 바꿔주었다.

출력 결과를 table로 만들어 준 후 CSS를 살짝 수정하고 결과를 확인해보았다.

<body>
    <div class = "column">
        <div id = "search">
            <form method = "post">
                <input id = "search_addr" name = "addr" type = "text" placeholder="시, 구를 입력해주세요." />
                <input type = "submit" value = "🔍" id = "search_btn" />
            </form>
        </div>
        <div id = search_result>
            <table>
                <thead>
                    <tr>
                        <th>road</th>
                        <th>zipcode</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        print_result();
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</body>

print_result() 함수 부분도 return 결과를 표로 바꿔주었다.

if(mysqli_num_rows($result) > 0){
    while($row = mysqli_fetch_array($result)){
        echo "<tr><td>".$row['road_name']."</td><td>".$row['zipcode']."</td></tr>";
    }
} else{
    echo "<script>alert('주소 없음.')</script>";
}
mysqli_close($conn);

결과

CSS를 대충 적용했는데 글자 크기와 border만 좀 더 신경 써서 마무리하면 될 것 같다~!

반응형

댓글