자료 기본정보

- 설명

PHP 초급 - 1주차 - 05 HTML과 PHP 연동하기: 웹 페이지를 동적으로 만들기

PHP는 HTML과 긴밀하게 연동되어 동적인 웹 페이지를 만드는 데 핵심적인 역할을 합니다. 이번 포스팅에서는 PHP 스크립트를 HTML 문서 내에 삽입하고, PHP 코드를 실행하여 HTML 내용을 동적으로 생성하는 기본적인 방법을 알아보겠습니다. 이를 통해 여러분은 웹 페이지의 내용과 구조를 프로그래밍 방식으로 제어할 수 있게 될 것입니다.

1. HTML 문서에 PHP 코드 삽입하기

PHP 코드는 HTML 문서 내에서 와 ?>라는 PHP 태그로 둘러싸여 작성됩니다. 웹 서버는 .php 확장자를 가진 파일을 요청받으면 이 PHP 태그 내의 코드를 해석하고 실행한 후, 그 결과를 HTML 문서의 해당 위치에 삽입하여 사용자에게 최종 웹 페이지를 보여줍니다.

다음은 HTML 문서 내에 PHP 코드를 삽입하는 기본적인 예시입니다.

index.php 파일 내용:

HTML

 
 


 
환영합니다!
 
현재 시간은  입니다.

위 예시에서

태그 내부에 라는 PHP 코드가 삽입되어 있습니다. date("Y-m-d H:i:s") 함수는 현재 날짜와 시간을 지정된 형식으로 반환하는 PHP 내장 함수입니다. 웹 서버가 이 파일을 처리하면 PHP 코드가 실행되어 현재 날짜와 시간 문자열로 바뀌고, 최종적으로 웹 브라우저에는 동적인 현재 시간이 표시됩니다.

2. PHP로 HTML 요소 동적으로 생성하기

PHP를 사용하면 HTML 태그와 내용을 프로그래밍적으로 생성하고 출력할 수 있습니다. 이는 반복적인 HTML 구조를 만들거나, 데이터베이스의 내용에 따라 HTML 요소를 다르게 표시해야 할 때 매우 유용합니다.

다음은 PHP를 사용하여 HTML 목록(

,
• )을 동적으로 생성하는 예시입니다.

  PHP

  
  
  
   
   
  
  
   
  과일 목록
   
  
   " . $fruit . "";
    }
   ?>
   
  
  
  
  

  위 코드에서 $fruits라는 배열에 과일 이름들이 저장되어 있습니다. foreach 반복문을 사용하여 배열의 각 요소를 순회하면서

• 태그와 함께 과일 이름을 출력합니다. PHP 코드가 실행되면 각 과일 이름에 대한
• 태그가 생성되어 HTML 목록 형태로 웹 페이지에 표시됩니다.

  
  

  3. HTML 폼 데이터 PHP로 전송하고 처리하기

  
  

  
  

  웹 애플리케이션에서는 사용자의 입력을 받는 폼(form)이 자주 사용됩니다. HTML 폼을 통해 입력된 데이터는 PHP 스크립트로 전송되어 처리될 수 있습니다.

  다음은 간단한 이름 입력 폼과, 폼 데이터를 받아 화면에 출력하는 PHP 코드 예시입니다.

  form.html 파일 내용:

  HTML

  
  
  
   
   
  
  
   
  이름을 입력하세요
   
  
    이름:
    
  
  
    
   
  
  
  
  

  process.php 파일 내용:

  PHP

  
  
  
   
   
  
  
   
  폼 데이터 처리 결과
   입력하신 이름은: " . htmlspecialchars($name) . " 입니다.
  ";
    } else {
     echo "
  이름이 전달되지 않았습니다.
  ";
    }
   ?>
   
  돌아가기
  
  
  
  

  form.html 파일은 사용자로부터 이름을 입력받는 텍스트 필드와 제출 버튼을 포함하는 폼을 정의합니다. 폼의 action 속성은 데이터가 제출될 때 처리할 PHP 스크립트 파일(process.php)을 지정하고, method 속성은 데이터를 전송하는 방식(post)을 지정합니다.

  process.php 파일에서는 $_POST라는 슈퍼글로벌 변수를 사용하여 전송된 폼 데이터를 접근합니다. isset($_POST['name'])은 'name'이라는 키로 전송된 데이터가 있는지 확인하고, 있다면 해당 값을 $name 변수에 저장합니다. htmlspecialchars() 함수는 HTML 특수 문자를 안전하게 처리하여 XSS 공격을 방지하는 데 도움을 줍니다. 마지막으로 입력받은 이름을 화면에 출력합니다.

  
  

  4. 주의사항

  
  

  • PHP 코드는 반드시 와 ?> 태그로 감싸야 합니다.

  • .php 확장자를 가진 파일에서만 PHP 코드가 실행됩니다. .html 파일에서는 PHP 코드가 그대로 텍스트로 출력될 수 있습니다.

  • HTML 태그 내에서도 PHP 코드를 삽입하여 속성 값을 동적으로 생성할 수 있습니다.

  • 폼 데이터를 처리할 때는 보안에 유의해야 합니다. 사용자로부터 입력받은 데이터를 그대로 출력하거나 데이터베이스에 저장하기 전에 적절한 검증과 처리가 필요합니다. (htmlspecialchars(), 데이터베이스 이스케이핑 등)

  


  5. 결론

  


  이번 포스팅을 통해 HTML 문서에 PHP 코드를 삽입하고, PHP를 사용하여 HTML 요소를 동적으로 생성하며, HTML 폼 데이터를 PHP로 전송하여 처리하는 기본적인 방법을 이해하셨기를 바랍니다. 이러한 기본적인 연동 방식을 바탕으로 여러분은 더욱 복잡하고 동적인 웹 애플리케이션을 개발할 수 있게 될 것입니다. 다음 학습에서는 PHP의 다양한 문법과 기능을 활용하여 웹 페이지를 더욱 풍부하게 만드는 방법을 알아보겠습니다.