php 자바스크립트 처럼 버튼 클릭하면 php 함수를 호출하는 방법

안녕하세요. 웹프로그램 만들기 녹녹치 않네요~ 여러가지를 알아야 결국 만들 수 있는 웹프로그램,

처음에는 html만 알면 되겠지? 그다음 css만 더 알면 되겠지? 이렇게 하다보면 점점 실력도 늘지만, 많은 난관(?)에도 부딪히게 됩니다. 그렇지만, 코딩의 즐거움을 한번 만끽하면 빠져나오기 힘들죠. ㅎ

이렇게 한세월을 보내다보면, 점점 강해짐을 느낍니다.

html, css, php, javascript, 그리고 mysql 여기에 javascript를 도와주는 Jquery와 JSON 정도 알면 간단한 웹프로그램은 실전에서 작성해서 사용할 수 있습니다.

실전에서 여러가지 응용프로그램을 작성하다보면, PHP에서 javascript의 함수를 호출하거나, html에서 보통 동작을 원하는 경우는 javascript를 호출하는 onclick()이벤트를 많이 사용하는데, 이번에는 JS(자바스크립트)처럼 버튼 이벤트로 PHP함수를 부를 수 있을까?라는 주제로 한번 알아보겠습니다.

즉, html의 버튼에서 javascript가 아닌 php 함수를 직접 호출할 수 있는냐? php 함수를 부르는 이벤트처리에 대한 내용입니다.

어떤 게시판에 이런 질문이 있더군요.. 그래서 저도 알아볼겸 해서 정리한 글을 올려봅니다.

<input type="button" name="test" id="test" value="RUN"  onclick="<?php echo testfun(); ?>" /><br/>

<?php

function testfun()
{
   echo "Your test function on button click is working";
}

?>

실제 실행화면

F12 개발창 화면에 나타난 오류, 예상치못한 식별자' 이런 뜻이죠?

위의 코드가 정상 작동할까요?

아닙니다. 오류가 발생합니다. 실제 오류화면은 아래와 같이 뜹니다.

 

결국 오류가 나서 이렇게 수정해야 합니다.

<form method="post">
    <input type="submit" name="test" id="test" value="RUN" /><br/>
</form>

<?php

function testfun()
{
   echo "Your test function on button click is working";
}

if(array_key_exists('test',$_POST)){
   testfun();
}

?>

성공적인 실행을 보여줍니다.

간단한 버튼으로 작동하지 않고 method = “post”형식을 추가해야합니다. 또한 버튼 대신 submit을 써야합니다.

submit으로 제출된 정보가 post로 넘어가서, array_key_exists() 함수는 지정된 키에 대한 배열을 확인하고 키가 있으면 true를 반환하고 키가 없으면 false를 반환합니다. 팁: 배열을 지정할 때 키를 건너뛰면 0에서 시작하여 각 값에 대해 1씩 증가하는 정수 키가 생성됩니다. 

결국, 넘어온 $_POST의 변수명이 'test'라는 것이 있으니, True가 되서 testfun()함수가 실행되는 원리입니다. 약간 빙빙 돌리는 느낌이지만, 원칙적으로 서버언어인 PHP와 클라인어트 언어인 html, javascript와의 소통관계는 알면 알수록 복잡합니다.

위의 원리로 많은 응용을 만들어 낼 수 있습니다. 기본원리가 그래서 중요하지요!

다른 방법도 몇가지 있는데, 팁으로 공유하겠습니다.

1.  JavaScript의 onclick()이벤트와 함께 PHP 함수 실행하는 방법

document.write()를 이용한 방법입니다. 아래의 소스코드를 보겠습니다.

<?php
// test1.php
function php_func(){
echo "Hello, my best friend <br>";
print "Hello, my best friend";
}
?>

<button onclick="clickMe()"> Click Me </button>

<script>
function clickMe(){
var result ="<?php php_func(); ?>"
document.write(result);
}
</script>

화면에 Click Me를 클릭하면 아래와 같이 php함수가 실행됨을 알 수 있다.

 

좌측 화면처럼 결과값이 뜬다.

실행성공.....

 

 

2.  그럼, Jquery를 활용해서 하는 방법도 있지 않을까? (있습니다.)

참고로 jQuery를 사용하시려면 CDN(구글검색하면 바로 나옵니다.)를 포함시켜야 합니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

구글 검색으로 찾은 것...

<!-- test2.php -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<button onclick="test()"> Click </button>
<div> </div>

<script>
function test(){
      $.ajax({url:"echo.php", success:function(result){
      $("div").text(result);}
  })
} 
</script>

echo.php 파일은 따로 있지요. 그래서 그 파일을 부르는 방식이니까요. 

<?php
// echo.php file
function php_func(){
    echo "Hello, my best friend";
}
php_func();
?>

이렇게 실행하면 아래와 같은 결과를 얻습니다. 

버튼이 나오고 이를 클릭하면,

 

 

좌측과 같은 결과값이 나옵니다.

Jquery도 사용해 보면 편리하고 좋습니다.

우리가 사용하는 웹을 구현하는 프로그램이 요즘은 더욱 많아졌지요, 과거에는 할 수 없었던 언어들, 심지어 자바스크립트로 서버관련 프로그램도 할 수 있는 시대잖아요. Node.js를 이용한 react, angular, vue 등 요즘은 다양한 방식으로 더 편리한 구현이 많은 시대에 살고 있습니다.

php함수를 호출하는 방식도 찾아보니 참 많은 것 같습니다. 그 중에 자신에게 더 편하고 와 닿는 것을 선택해서 사용하면 되겠네요. 아래도 코드의 간결성이니 속도 뭐 이런 것도 고려해야 한다고 하는데, 사실 큰 프로젝트가 아닌 이상 그런것은 느껴지지 않는 것 같습니다.

아뭏튼 즐거운 코딩시간 되세요~