code review – 메모 저장 앱

*해당 코드는 아직 초안으로, claude AI sonnet 4.0의 도움을 받음

HTML
<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">   
    <title>일정 관리</title>
    <script> //javascript 문법을 빌려오자
        function validateAndSubmit() { //날짜, 제목, 내용을 저장하는 함수. 자바스크립트의 const를 이용해 이미 저장된 변수를 다른 형태로 저장하는 코드다.
            const date = document.getElementsByName('date')[0].value;
            const title = document.getElementsByName('title')[0].value;
            const content = document.getElementsByName('content')[0].value;
            
            // 빈 값 체크
            if (!date) {
                alert('일자를 입력해주세요.');
                return false;
            }
            if (!title.trim()) {
                alert('제목을 입력해주세요.');
                return false;
            }
            if (!content.trim()) {
                alert('내용을 입력해주세요.');
                return false;
            }
            
            // 폼 제출.
            document.getElementById('scheduleForm').submit();
        }
    </script> 
</head> 
<body>
<!--form 이름은 scheduleForm, 여기서 받은 데이터를 post 방식으로 save_schedule에 전송할거임.-->
<form id="scheduleForm" action="save_schedule.php" method="POST"> 
<!--메모를 입력받는 테이블을 만들자. 경계도 만들어주자-->
<table border="1">
    <tr>
        <td>일자</td>
        <td><input type="date" name="date" required></td>
        <!--date 입력값을 받는 인풋을 만들어주자. date 타입은 날짜를 선택하여 입력받을 수 있다.-->
    </tr>
    <tr>
        <td>제목</td>
        <td><input type="text" name="title" required></td>
        <!--이번엔 text 타입의 title을 받아주자. 말 그대로 텍스를 입력받는다.-->
    </tr>
    <tr>
        <td>내용</td>
        <td><textarea name="content" rows="5" cols="50" placeholder="메모를 입력하세요" required></textarea></td>
        <!--이번에도 text를 받지만, 메모장의 특성을 반영하여 큰 공간과 placeholder, 즉 비어있을 떄 출력되는 메시지를 보여주자.-->
    </tr>
</table>

<br>
<input type="button" value="저장" onclick="validateAndSubmit()">
<!--버튼을 통해 함수를 출력해 const로 다시 변수를 저장하고 save_schedule.php로 전송하자-->
</form>
</body>
</html>
PHP
<?php
// 데이터를 전송받고, 확인하고, 저장하는 페이지이다.
header('Content-Type: text/html; charset=UTF-8');

echo "<h2>전송된 데이터 확인</h2>";

// POST 방식으로 전송된 데이터를 확인하자
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo "<h3>POST 데이터:</h3>";
    echo "<table border='1'>";
    echo "<tr><th>항목</th><th>값</th><th>상태</th></tr>";
    
    // 일자
    $date = isset($_POST['date']) ? $_POST['date'] : '';
    echo "<tr>";
    echo "<td>일자</td>";
    echo "<td>" . htmlspecialchars($date) . "</td>";
    echo "<td>" . (!empty($date) ? "정상" : "빈 값") . "</td>";
    echo "</tr>";
    
    // 제목
    $title = isset($_POST['title']) ? $_POST['title'] : '';
    echo "<tr>";
    echo "<td>제목</td>";
    echo "<td>" . htmlspecialchars($title) . "</td>";
    echo "<td>" . (!empty(trim($title)) ? "정상" : "빈 값") . "</td>";
    echo "</tr>";
    
    // 내용
    $content = isset($_POST['content']) ? $_POST['content'] : '';
    echo "<tr>";
    echo "<td>내용</td>";
    echo "<td>" . nl2br(htmlspecialchars($content)) . "</td>";
    echo "<td>" . (!empty(trim($content)) ? "정상" : "빈 값") . "</td>";
    echo "</tr>";
    
    echo "</table>";
    
    // 전체 POST 데이터 출력 (디버깅용)
    echo "<h3>전체 POST 데이터:</h3>";
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
    
    // 데이터 검증
    if (!empty($date) && !empty(trim($title)) && !empty(trim($content))) {
        echo "<h3 style='color: green;'>✓ 모든 데이터가 정상적으로 전송되었습니다.</h3>";
        
        // 여기에 데이터베이스 저장 로직을 추가할 수 있습니다
        echo "<p>데이터베이스 저장 처리를 진행할 수 있습니다.</p>";
    } else {
        echo "<h3 style='color: red;'>✗ 일부 데이터가 누락되었습니다.</h3>";
    }
    
} else {
    echo "<p style='color: red;'>POST 방식으로 데이터가 전송되지 않았습니다.</p>";
    echo "<p>현재 요청 방식: " . $_SERVER['REQUEST_METHOD'] . "</p>";
}

echo "<br><a href='javascript:history.back()'>← 돌아가기</a>";
?>

Similar Posts

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다