CodeHoon

사용환경: WINDOW, LINUX, Python 3.10.2, PHP 8.0.3 (이전 버전도 가능)

지난 포스팅

PHP 에서 Python 에 파라미터를 전달하는 방법을 포스팅하겠습니다.

<?php
$data_value = '첫번째';
$data_value2 = '두번째';
$output = shell_exec("python-text.py".' '.$data_value.' '.$data_value2);
echo $output;

shell_exec 를 사용해주면 되는데, 주의할 점이 있습니다.

바로 띄어쓰기 입니다.

1. 띄어쓰기를 통해 매개변수를 구분한다.
2. 만약 데이터에 '안녕하세요  훈입니다.' 와 같이 띄어쓰기가 있는 데이터는 별도의 데이터로 출력됩니다.

# python

import sys
import io	#한글처리

sys.stdout = io.TextIOWrapper(sys.stdout.detach(), encoding='utf-8')		#한글처리
sys.stderr = io.TextIOWrapper(sys.stderr.detach(), encoding='utf-8')		#한글처리

for arg in sys.argv:
    print(arg)

sys.exit()

반복문을 통하여 전달된 인자 arg 를 출력해주면 됩니다. 

arg 의 결과물은 배열(Array)인데, 첫번째 인자출력물로 현재 경로를 출력합니다.  사용에 주의 바랍니다.
만약 값이 전달되지 않았을 때는, 경로만 출력이 되기 때문에 값이 잘 전달되었는지 확인이 가능합니다.

결과

띄어쓰기가 있는 데이터를 전달해주었을때

개행되어서 출력되는 것을 확인하실 수 있습니다.

사용환경: WINDOW, LINUX, Python 3.10.2, PHP 8.0.3 (이전 버전도 가능)

PHP에서 Python의 파일을 호출하는 방법

PHP에서 shell_exec 를 통하여 Python 파일을 호출할 수 있다.

// 사용할 php파일

$output = shell_exec("python-text.py");	   // python-text.py : 파이썬 파일 이름 
echo $output;

최대한 내용을 짧게 하고 싶어서 명령어 없이 작성하였다.

다른 방법도 있다,

// 사용할 php 파일

$output = exec( "python python-file-name.py" );
echo $output;

파이썬 파일 이름 앞에 py, python, python3 이라든지 파이썬 명령어를 사용해도 무방하다. 

// python.py

helloThere = 'hello'
print(helloThere)

결과 출력 - hello

다음 포스팅은 php에서 매개변수(파라미터)를 전달하는 방법을 포스팅하겠습니다.

PHPMailer를 통해 이메일을 송신하곤 했는데,

불편하기도 하고 읽기 불편해서 찾아보게 된 EmailJS. 

자바스크립트 기반으로 이메일을 보낼 수 있다.

parameter 를 통해 원하는 내용을 전달할 수 있어서 더 좋다. (역시 js)

Google에 검색하면 1순위로 나오는 웹사이트 (광고 아님)

이곳에서 회원가입 -> dashboard로 진행하면 된다.

회원가입 폼도 간단하다. 본인 email, 비밀번호만 설정하면 된다.

로그인시, 바로 대쉬보드로 이동하게 되는데, 

■ 필요사항

1. 서비스 생성
2. 템플릿 생성 + 템플릿-id
3. integration (과거 installation) 에서 init-code

■ 1. 서비스 생성

원하는 이메일 서비스를 선택하면 되는데, 구글(Gmail)을 선택하였다.

Service ID는 원하는 아이디로 사용하는게 좋다. 회사명, 본인 이름 등..

Connect Account를 통해 Gmail과 연동 후 Create Service

■ 2. 템플릿 생성 + 템플릿-id

이제 템플릿을 생성하도록 한다.

확인을 잘 해주시고 각각의 항목에 삽입한다. 내용을 모두 작성하였으면 Save

그리고 Template ID 도 챙겨가자.

마지막.

■ 3. integration (과거 installation) 에서 init-code

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script type="text/javascript">
(function() {
emailjs.init("챙겨야할 init 코드");
})();
</script>

■ 실제 적용

저는 php로 데이터를 받아와 javascript로 이메일 송신하는 방식을 사용합니다.

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js">
</script>
<script type="text/javascript">
    // init code 사용
    emailjs.init("3. 사용자_init_code");
    
    // parameter 설정
    const templateParams = {
        to_email: '<?=$requestedEmail?>',
        message_html: 'you have changed your password.',
        new_password: <?=$newPassword?> ,
    };
    
    // email 송신 과정
    emailjs.send('1.사용자id', '2.템플릿 id', templateParams)
        .then(function(response) {
            console.log('SUCCESS!', response.status, response.text)	 //success
        }, function(error) {
            console.log('FAILED...', error)		//fail
        });
</script>

이런식으로 사용하면 됩니다. 

파라미터에 값을 잘못넣거나 공란이 되면 에러가 개발자도구-콘솔에 출력이 되니, 확인하시면서 조율하면 됩니다.

promise.then() 으로 결과 출력 확인 가능 

■ 결과

메일이 잘 도착하였습니다.

EmailJS - DashBoard - Email History 에서도 확인하실 수 있습니다.

JavaScript 비통기 통신(Ajax, Axios 등)으로 PHP에서 송신한 json 데이터를 수신하여 콘솔에 찍어보는 작업을 하도록 하겠습니다.

1. 비동기 통신
2. PHP 송신
3. Javascript 수신 및 출력

■ 1. 비동기 통신

비동기 통신에는 여러 종류가 있지만 이 중에서 axios를 사용

Axios CDN 을 사용하였다. (편하게)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
getData() // 함수 호출

function getData () { 
  axios.get("api주소")	
    .then(function(response) {
      console.log(response)
    })
    .catch(function(error) {
      console.log(error)
    })
}
</script>

get method로 api 주소를 호출한 모습이다.

성공시 "200" 성공과 함께 response가 출력된다. (지금 바로 하면 404에러가 뜰겁니다.)

■ 2. PHP 데이터 송신

그 다음으로 PHP에서 데이터를 출력하여 echo 해주면 된다.

<?php
// mysql connection 생략

$result = mysqli_query($con, $sql) or die('query error');

while($row = mysqli_fetch_assoc($result)){
    $data_array[] = ($row);
}

$result = json_encode($data_array);
echo $result;

- 짧은 설명 -

php와 database(DB) mysql 에서 데이터를 출력한 문구
(특별한 프레임워크를 사용하고 있지 않다.)

while문을 통해 출력한 데이터를 $data_array[] 배열에 반복문을 통하여 삽입,
json 형태 { key: value }  로 바꿔주어 출력.

[ mysql 를 조금 참고하자면, column명 : data 인 셈이다. ]
[ key : value ]

- 짧은 설명 끝 - 

■ 3. Javascript 수신 및 출력

아까 위에서 axios.get( ) 안의 내용입니다. then()의 코드

<script>
.then(function(response) {
      console.log(response)
      response = JSON.stringify(response.data)
      labelsAndDatas(response)
    })

결과값에 에러가 없다면,
해당 response를 JSON.stringify(response.data) 를 통해 문자열로 변환 중요★
labelsAndDatas( ) 함수로 데이터를 전송

<script>

function labelsAndDatas (result) {
  console.log(result)
}
</script>

labelsAndDatas 함수에서 response.data 를 result 로 받아와 콘솔창에 찍어준 모습

이제 이 함수 내에서 원하는 작업을 하면 된다. 

key: value로  보았을 때,  { '날짜' : '값', '총량' : '값'  } 을 확인할 수 있다.

str_replace() : 해당 문자열을 변경
substr_replace() : 해당 문자열부터 변경 혹은 특정 규칙을 적용

■ STR_REPLACE()

$letter = "ABCDEFGCDE";
$result = str_replace ( "CD", "ZZ", $letter ) ;
echo $result;  // 결과 :  ABZZEFGZZE

이렇게 "해당"문자열만을 변경할 수 있는 방법이 있고,

$letter = "ABCDEFGCDE";
$result = str_replace ( "CD", "ZZ", $letter, $count ) ;
echo $result;  // 결과 :  ABZZEFGZZE
echo $count;  // 결과 :  2

해당 문자열을 몇 번 교체했는지 알 수 있다.

■ SUBSTR_REPLACE()

$letter = "ABCDEFGCDE";
$result = substr_replace ( $letter, "ZZ", 3 ) ;
echo $result;  // 결과 :  ABCZZ

해당 인덱스부터 끝까지의 문자 모두 대체된 것을 확인할 수 있다.

이를 응용하여, 출력한 글자의 길이가 몇글자를 넘어가면 나머지를 "..."으로 대체하는 방법이 있다.

$letter = "ABCDEFGCDE";
$result = substr_replace ( $letter, "ZZ", 3, 0) ;
echo $result;  // 결과 :  ABCZZDEFGCDE

3번째 인덱스를 가진 문자열에 "ZZ"를 넣을 수 있다. 
뒤의 숫자는 ZZ를 넣으면서 대체할 문자열의 개수라고 생각하면 된다.
(0으로 설정했으니까 0개가 대체된다. 2개를 대체했다면, DE가 대체된다.

이상입니다.

Vue.js 에서 회원 로그인 정보를 php 로 axios를 통해 보내고 200 success response를 받았다.

하지만 그 내용을 오류로 넘기고 싶을 때 처리하는 방법

.then((response) => {
          if( response.data == false ) {
              throw new Error('no data from server');
          } else {
              console.log('success');
           }
        })

        .catch((error) => {
            console.log(error);
            this.errors.push("회원정보가 존재하지 않습니다.");
        });

then() 내에서 new Error로 넘겨주면,
아래 catch(error) 에서 해당 에러를 출력해준다.
그리고 this.errors.push 를 통해 error라는 id 를 가진 html 태그에 에러 내용을 출력해준다.

■ 신경쓸 점

1. throw new Error( )

throw를 통해 새로운 에러 객체를 생성하는 작업. 
이 작업을 통해 catch가 에러를 인식하고 해당 내용을 출력한다.

2. catch(error) => {   

Arrow function의 인스턴스 함수의 기능을 이용하여,
에러 함수 내에서 전역변수( this. )를 사용할 수 있게 한다.

Vue.js 3 에서 axios를 이용해 php 에 데이터를 송신하는 방법을 포스팅하도록 하겠습니다.

3일째 이거 만지다가 어쩌다 됐습니다. 억울..

[버전은 상관없지만] @vue/cli 4.5.15 에서 적용하였습니다. 

■ 1. Vue-cli project 설정 1/2

/src/views/Account/AxiosTest.vue

제가 form을 이용해 post data 를 송신할 Vue 페이지는 위와 같습니다.

AxiosTest.vue 
=> input 태그 2개로, id 와 password를 전달하려고 합니다.

1. Template

<template>
  <div>
    <form action="" @submit="checkForm">
      <input type="text" name="id" v-model="idValue" />
      <input type="password" name="password" v-model="passwordValue" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

2. script

<script>
import axios from "axios";

export default {
  data() {
    return {
      idValue: "",
      passwordValue: "",
    };
  },
  methods: {
    async checkForm(e) {
      e.preventDefault();
      let idValue = this.idValue;
      let passwordValue = this.passwordValue;

      await axios
        .post("/api/loginCheck", {
          id: idValue,
          password: passwordValue
        })
        .then(function (response) {
          // handle success
          console.log("success");

          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    },
  },
};
</script>

■ 1. Vue-cli project 설정 2/2

vue.config.js

프로젝트의 root 경로에 vue.config.js 파일을 없으신 분들은 생성해주시고 아래의 내용을 복붙해주세요.

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080/",
      },
    },
  },
};

■ 3. php 

Apache 서버를 사용하신다면, 8080포트로 구동 중이실겁니다. (본인의 포트에 맞게 설정해주세요)

/var/www/html/ 경로에 /api 폴더를 생성해주세요. 이곳에 axios의 data 를 수신할 php 파일을 생성할겁니다.

이렇게 생성하였습니다. (자유롭게 생성해주세요. 보통 /api 라고 많이 생성합니다.

/api/loginCheck.php

<?php
 // header의 요청을 수락하는 php 설정들. 안해주면 데이터를 못받는 경우가 생김
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Credentials", "true");
header('Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');
header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS');

$data = json_decode(file_get_contents('php://input'), true);

// 반복문으로 데이터 출력 

■ 결과

감격스럽게도 200 통신 성공 결과가 출력되었고,

php에서 $data 는 array 의 타입이기 때문에 출력 결과(response) 가 array 로 출력되었습니다. 

■ 1차 수정

- 기존에 params 를 넘겨줘서 자꾸 데이터가 array로 출력이 되었습니다.

- 기존 : data(=params객체) : jsonStyleValues 
- 변경 : { jsonStyleValues list}

* POST method에서는 params 를 넘겨주면 안된다. 

참고

https://coderedirect.com/questions/43570/axios-get-from-local-php-just-returns-code-instead-of-executing

덕분에 3일동안 axios와 http, proxy, 등에 대해 많이 공부할 수 있었습니다.

REST API를 적용하고,
Vue.js 혹은 React.js에서 Axios를 사용할 때에 초보자는 도대체 backend 를 담당하는 파일을 어디에다가 놓아야할지 모를 경우가 생깁니다.

네 그게 바로 접니다.

환경 및 사용 : Linux (Ubuntu) , Apache , vue - cli project , php , axios

예시)

get 방식으로 axios를 사용해보겠습니다.

apache 서버는 8080포트를 기본으로 사용하고 있습니다. 이를 통해 axios를 port 8080에서 값을 요청하고 받아옵니다.

그럴 때 php 파일의 위치는 

/var/www/html/ 에 작성해야합니다.

추가적으로 api 폴더를 생성하여 그곳에 넣는 방법도 있습니다. ㅎㅎ

만약 이렇게 했을 때 아래와 같은 에러가 발생하면 해당 포스트를 확인해주시길 바랍니다.

감사합니다.