안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 우리 비밀 기지를 지켜줄 암호화 마법을 살짝 맛보았죠? 오늘은 실제로 새로운 마법사 친구들이 정보를 적어낼 수 있는 ‘입학 신청서(회원가입 양식)’를 만들어보겠습니다. 자바스크립트의 옷을 입히고 PHP의 심장을 연결하는 중요한 시간이에요!
1. 마법의 입력창: HTML <form> 태그
사용자가 아이디와 비밀번호를 적을 수 있는 칸을 만들려면 HTML의 <form>이라는 태그가 필요해요. 이 태그는 우리가 적은 정보를 소중히 모아서 PHP 서버라는 ‘창고지기’에게 배달해주는 역할을 한답니다.
2. 입학 신청서 주문서 작성하기 (코드)
아이디와 비밀번호를 입력받아 PHP 파일로 슝~ 던져주는 코드를 작성해 봅시다. 이번에는 데이터를 몰래 보내는 POST 방식이라는 기술을 쓸 거예요.
<!-- signup.html -->
<!DOCTYPE html>
<html>
<body>
<h2>📜 마법 학교 입학 신청서</h2>
<!-- action: 배달될 목적지, method: 배달 방식(POST는 비밀 배달!) -->
<form action="join_magic.php" method="POST">
<p>아이디: <input type="text" name="wizard_id" required></p>
<p>비밀번호: <input type="password" name="wizard_pw" required></p>
<p>특기 마법: <input type="text" name="special_skill"></p>
<button type="submit">입학 신청하기!</button>
</form>
</body>
</html>3. 왜 GET이 아니라 POST를 써야 하나요?
우체통에 편지를 넣을 때 두 가지 방법이 있어요.
1. GET: 엽서처럼 주소창에 내용이 다 보이는 방식이에요. 검색할 땐 좋지만 비밀번호에는 꽝이죠!
2. POST: 봉투에 넣어서 밀봉하는 방식이에요. 주소창에 아무것도 나타나지 않아서 우리의 비밀번호를 안전하게 숨길 수 있답니다.
4. 아이들과 함께하는 ‘우체통’ 놀이
종이상자로 우체통을 만들고, 아이와 함께 ‘입학 신청서’ 종이를 넣어보세요. 종이 앞면에 글자를 크게 써서 넣는 것은 GET 방식이고, 종이를 접어서 봉투에 넣는 것은 POST 방식이라고 설명해 주세요. 아이들은 “비밀번호는 꼭 봉투에 넣어야 해!”라고 말하며 웹 보안의 기본 원리를 직관적으로 깨닫게 됩니다.
마치며: 배달된 정보는 어디로 갈까요?
오늘 우리는 멋진 신청서를 만들고 서버로 던지는 법까지 배웠습니다. 정말 대단해요! 그럼 서버에 도착한 이 정보들은 어떻게 처리될까요? 다음 시간에는 PHP 창고지기가 이 정보를 받아서 실제로 보물 창고(DB)에 저장하는 ‘데이터베이스 저장 마법’을 배워보겠습니다. 다음 수업에서 만나요!
