PHP 강의
>PHP - 초급
PHP 초급 - 1주차 - 05 HTML과 PHP 연동하기: 웹 페이지를 동적으로 만들기
|
평점 | 10.0 | 라이센스 | free |
|---|---|---|---|---|
| 사용자평점 | 10.0 | 운영체제 | ||
| 다운로드 | 1 | 파일크기 | 0 | |
| 제작사 | LUZENSOFT | 등록일 | 2025-06-27 00:09:33 | |
| 조회수 | 20 |
PHP 초급 - 1주차 - 05 HTML과 PHP 연동하기: 웹 페이지를 동적으로 만들기
PHP는 HTML과 긴밀하게 연동되어 동적인 웹 페이지를 만드는 데 핵심적인 역할을 합니다. 이번 포스팅에서는 PHP 스크립트를 HTML 문서 내에 삽입하고, PHP 코드를 실행하여 HTML 내용을 동적으로 생성하는 기본적인 방법을 알아보겠습니다. 이를 통해 여러분은 웹 페이지의 내용과 구조를 프로그래밍 방식으로 제어할 수 있게 될 것입니다.
1. HTML 문서에 PHP 코드 삽입하기
PHP 코드는 HTML 문서 내에서 <?php와 ?>라는 PHP 태그로 둘러싸여 작성됩니다. 웹 서버는 .php 확장자를 가진 파일을 요청받으면 이 PHP 태그 내의 코드를 해석하고 실행한 후, 그 결과를 HTML 문서의 해당 위치에 삽입하여 사용자에게 최종 웹 페이지를 보여줍니다.
다음은 HTML 문서 내에 PHP 코드를 삽입하는 기본적인 예시입니다.
index.php 파일 내용:
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PHP와 HTML 연동하기</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>현재 시간은 <?php echo date("Y-m-d H:i:s"); ?> 입니다.</p>
</body>
</html>
위 예시에서 <p> 태그 내부에 <?php echo date("Y-m-d H:i:s"); ?>라는 PHP 코드가 삽입되어 있습니다. date("Y-m-d H:i:s") 함수는 현재 날짜와 시간을 지정된 형식으로 반환하는 PHP 내장 함수입니다. 웹 서버가 이 파일을 처리하면 PHP 코드가 실행되어 현재 날짜와 시간 문자열로 바뀌고, 최종적으로 웹 브라우저에는 동적인 현재 시간이 표시됩니다.
2. PHP로 HTML 요소 동적으로 생성하기
PHP를 사용하면 HTML 태그와 내용을 프로그래밍적으로 생성하고 출력할 수 있습니다. 이는 반복적인 HTML 구조를 만들거나, 데이터베이스의 내용에 따라 HTML 요소를 다르게 표시해야 할 때 매우 유용합니다.
다음은 PHP를 사용하여 HTML 목록(<ul>, <li>)을 동적으로 생성하는 예시입니다.
PHP
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>PHP로 동적 목록 생성하기</title>
</head>
<body>
<h1>과일 목록</h1>
<ul>
<?php
$fruits = ["사과", "바나나", "딸기", "오렌지"];
foreach ($fruits as $fruit) {
echo "<li>" . $fruit . "</li>";
}
?>
</ul>
</body>
</html>
위 코드에서 $fruits라는 배열에 과일 이름들이 저장되어 있습니다. foreach 반복문을 사용하여 배열의 각 요소를 순회하면서 <li> 태그와 함께 과일 이름을 출력합니다. PHP 코드가 실행되면 각 과일 이름에 대한 <li> 태그가 생성되어 HTML 목록 형태로 웹 페이지에 표시됩니다.
3. HTML 폼 데이터 PHP로 전송하고 처리하기
웹 애플리케이션에서는 사용자의 입력을 받는 폼(form)이 자주 사용됩니다. HTML 폼을 통해 입력된 데이터는 PHP 스크립트로 전송되어 처리될 수 있습니다.
다음은 간단한 이름 입력 폼과, 폼 데이터를 받아 화면에 출력하는 PHP 코드 예시입니다.
form.html 파일 내용:
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이름 입력 폼</title>
</head>
<body>
<h1>이름을 입력하세요</h1>
<form action="process.php" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<input type="submit" value="제출">
</form>
</body>
</html>
process.php 파일 내용:
PHP
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폼 데이터 처리 결과</title>
</head>
<body>
<h1>폼 데이터 처리 결과</h1>
<?php
if (isset($_POST['name'])) {
$name = $_POST['name'];
echo "<p>입력하신 이름은: <strong>" . htmlspecialchars($name) . "</strong> 입니다.</p>";
} else {
echo "<p>이름이 전달되지 않았습니다.</p>";
}
?>
<p><a href="form.html">돌아가기</a></p>
</body>
</html>
form.html 파일은 사용자로부터 이름을 입력받는 텍스트 필드와 제출 버튼을 포함하는 폼을 정의합니다. 폼의 action 속성은 데이터가 제출될 때 처리할 PHP 스크립트 파일(process.php)을 지정하고, method 속성은 데이터를 전송하는 방식(post)을 지정합니다.
process.php 파일에서는 $_POST라는 슈퍼글로벌 변수를 사용하여 전송된 폼 데이터를 접근합니다. isset($_POST['name'])은 'name'이라는 키로 전송된 데이터가 있는지 확인하고, 있다면 해당 값을 $name 변수에 저장합니다. htmlspecialchars() 함수는 HTML 특수 문자를 안전하게 처리하여 XSS 공격을 방지하는 데 도움을 줍니다. 마지막으로 입력받은 이름을 화면에 출력합니다.
4. 주의사항
PHP 코드는 반드시
<?php와?>태그로 감싸야 합니다..php확장자를 가진 파일에서만 PHP 코드가 실행됩니다..html파일에서는 PHP 코드가 그대로 텍스트로 출력될 수 있습니다.HTML 태그 내에서도 PHP 코드를 삽입하여 속성 값을 동적으로 생성할 수 있습니다.
폼 데이터를 처리할 때는 보안에 유의해야 합니다. 사용자로부터 입력받은 데이터를 그대로 출력하거나 데이터베이스에 저장하기 전에 적절한 검증과 처리가 필요합니다. (
htmlspecialchars(), 데이터베이스 이스케이핑 등)
5. 결론
이번 포스팅을 통해 HTML 문서에 PHP 코드를 삽입하고, PHP를 사용하여 HTML 요소를 동적으로 생성하며, HTML 폼 데이터를 PHP로 전송하여 처리하는 기본적인 방법을 이해하셨기를 바랍니다. 이러한 기본적인 연동 방식을 바탕으로 여러분은 더욱 복잡하고 동적인 웹 애플리케이션을 개발할 수 있게 될 것입니다. 다음 학습에서는 PHP의 다양한 문법과 기능을 활용하여 웹 페이지를 더욱 풍부하게 만드는 방법을 알아보겠습니다.
