phpPress, goPress, rubyPress, nodePress에서 폼(양식) 처리하기

goPress.go 파일에서 SetGetRoute() 함수 뒤에 다음 함수를 추가합니다.

//
// Function:           SetPostRoute
//
// Description:        이 라이브러리에 설정된
//                     web 변수에 쉽게 접근할 수 있게 해주는 함수
//
// Inputs:
//     	route 	     설정할 라우트
//		handler      해당 라우트에서 실행할 함수
//
func SetPostRoute(route string, handler interface{}) {
	web.Post(route, handler)
}

이 함수는 SetGetRoute() 함수와 완전히 동일하며, web.Post() 함수를 사용한다는 점만 다릅니다.

이 변경 사항을 적용하면 goPress 서버가 사용자로부터 이메일을 전달받을 수 있게 됩니다.

nodePress로 폼 처리하기

Node에서 이메일을 보내려면 먼저 nodemailer 라이브러리와 body-parser 라이브러리를 다음 명령어로 설치해야 합니다.

npm install -save nodemailer
npm install -save body-parser

그다음 새 라이브러리를 로드하고 메일러 객체를 설정합니다. nodePress.js 파일 상단, 마지막 라이브러리 로드 구문 뒤에 다음 줄을 추가하세요.

var nodemailer = require('nodemailer');  // https://nodemailer.com/
var bodyParser = require('body-parser'); // https://github.com/expressjs/body-parser

//
// 기본 SMTP 전송을 사용하는 재사용 가능한 transporter 객체 생성
//
var transporter = nodemailer.createTransport('smtps://<your email name%40<your email domain>:<your password>@smtp.gmail.com');

이 코드는 nodemailer 라이브러리를 로드하고 이메일 발송용 재사용 컴포넌트를 설정합니다. <your email name>에는 이메일 주소에서 @ 앞부분을, <your email domain>에는 이메일 도메인(일반 Gmail이라면 gmail.com, 자신의 도메인에 Gmail을 연결했다면 해당 도메인명)을, <your password>에는 이메일 계정 비밀번호를 각각 입력해야 합니다.

nodePress 변수 초기화 코드 뒤에 다음 코드를 추가합니다.

//
// body parser 라이브러리 설정
//
nodePress.use(bodyParser.urlencoded({
    extended: true
}));

이제 마지막 nodePress.get() 함수 호출 뒤에 다음 코드를 추가하세요.

nodePress.post('/api/message', function(request, response) {
    //
	// 이메일 데이터 설정
   	//
    var mailOptions = {
        from: request.body.Email,
        to: '<your email address>',
        subject: 'Message from ' + request.body.Name + ' on contact form.',
        text: request.body.Message,
        html: request.body.Message
    };
  	//
  	// 이메일 발송
  	//
    transporter.sendMail(mailOptions, function(error, info){
        if(error){
            return console.log(error);
        }
        //
        // 메시지 전송 완료 페이지로 사용자를 이동시킨다.
        //
        response.send(page("messagesent"));
    });
});

이것이 /api/message 주소의 핸들러입니다. 이 함수는 폼에서 전송된 정보를 받아 적절한 이메일 메시지를 작성한 뒤, <your email address>에 지정된 주소로 발송합니다. 이메일 전송 후에는 사용자를 /messagesent 페이지로 이동시킵니다. body parser 미들웨어가 URL 파라미터를 request.body 변수에 저장하고 적절히 정화해 줍니다.

이 코드는 2단계 인증이 설정되지 않은 Gmail 계정에서 동작합니다. 2단계 인증을 사용 중이라면 Nodemailer 공식 문서를 참고하여 설정을 진행하세요.

rubyPress로 폼 처리하기

Ruby에서 이메일을 보내려면 다음 명령어로 ruby-gmail 라이브러리를 설치해야 합니다.

gem install ruby-gmail

Ruby 환경 설정에 따라 명령어 앞에 sudo를 붙여야 할 수도 있습니다. 이제 라이브러리를 로드하기 위해 rubyPress.rb 파일 상단에 다음 줄을 추가합니다.

require 'gmail'       # https://github.com/dcparker/ruby-gmail

모든 get 정의 뒤에 다음 코드를 추가하세요.

post '/api/message' do
  #
  # 폼에서 파라미터를 가져온다.
  #
  name = params[:Name]
  email = params[:Email]
  message = params[:Message]

  #
  # 이메일을 작성하고 발송한다.
  #
  Gmail.new('<your email address>', '<your password>') do |gmail|
    gmail.deliver do
      to "<your email address>"
      from email
      subject "Message from " + name
      text_part do
        body message
      end
    end
  end
  #
  # 메시지 전송 완료 페이지로 이동시킨다.
  #
  page 'messagesent'
end

이 내용을 추가하면 rubyPress 서버도 이메일 폼을 처리할 수 있습니다. <your email address>를 본인의 이메일 주소로, <your password>를 이메일 서버 비밀번호로 변경하면 스크립트가 완성됩니다.

phpPress로 폼 처리하기

마지막으로 수정할 서버는 phpPress입니다. 서버에 이메일 기능을 추가하기 위해 phpmailer 라이브러리를 설치하겠습니다. PHP에서 이메일 작업에 가장 널리 사용되는 라이브러리입니다. phpPress 디렉터리에서 다음 커맨드라인 명령어를 실행하여 설치하세요.

composer update
composer require phpmailer/phpmailer

안타깝게도 composer update 실행 시 LightnCandy 라이브러리도 함께 업데이트됩니다. 더 빠르고 사용하기 편리해진다는 점에서는 좋지만, 기존 서버 코드가 깨지게 됩니다. index.php 파일에서 ProcessPage() 함수를 찾아 다음 코드로 교체하세요.

//
// Function:        ProcessPage
//
// Description:     페이지를 템플릿에 적용하고,
//                  모든 Mustache 매크로와
//                  모든 숏코드(shortcode)를 처리하는 함수
//
// Inputs:
//                  $layout     페이지 레이아웃
//                  $page       페이지의 메인 콘텐츠
//
function ProcessPage( $layout, $page ) {
   global $site, $parts, $helpers;

   //
   // 페이지 콘텐츠를 가져온다.
   //
   $parts['content'] = figurePage($page);

   //
   // Handlebars 첫 번째 패스
   //
   $phpStr = LightnCandy::compile($layout, $helpers);
   $renderer = LightnCandy::prepare($phpStr);
   $page = $renderer($parts);

   //
   // 숏코드를 처리한다.
   //
   $pageShort = processShortcodes($page);

   //
   // Handlebars 두 번째 패스
   //
   $phpStr = LightnCandy::compile($pageShort, $helpers);
   $renderer = LightnCandy::prepare($phpStr);
   $page = $renderer($parts);

   //
   // 결과를 반환한다.
   //
   return($page);
}

기존 코드와 비교하면 임시 파일을 다룰 필요가 없어졌습니다. 모든 작업이 메모리에서 처리되므로 훨씬 빠릅니다. 이제 index.php 파일 상단, Jade 라이브러리 뒤에 다음 코드를 추가합니다.

//
// PHP Mailer:  https://github.com/PHPMailer/PHPMailer
//
require 'vendor/phpmailer/phpmailer/PHPMailerAutoload.php';

이 코드가 phpmailer 라이브러리를 로드합니다. 이제 마지막 $app->get() 함수 뒤에 다음 코드를 추가하세요.

//
// 이 라우트는 웹 사이트의 이메일 폼에서
// 전송된 post 요청을 처리한다.
//
$app->post('/api/message', function(Request $request, Response $response) {
    global $_POST;

    //
    // post 변수를 가져온다.
    //
    $Name = $_POST['Name'];
    $Email = $_POST['Email'];
    $Message = $_POST['Message'];

    //
    // 이메일 메시지를 작성하고 발송한다.
    //
    $mail = new PHPMailer;

    $mail->isSMTP();                           // SMTP 사용 설정
    $mail->Host = 'smtp.gmail.com';            // 메인 및 백업 SMTP 서버 지정
    $mail->SMTPAuth = true;                    // SMTP 인증 활성화
    $mail->Username = '<your email address>';  // SMTP 사용자명
    $mail->Password = '<your password>';       // SMTP 비밀번호
    $mail->SMTPSecure = 'tls';                 // TLS 암호화 활성화 ('ssl'도 가능)
    $mail->Port = 587;                         // 연결할 TCP 포트

    $mail->setFrom($Email, $Name);
    $mail->addAddress('<your email>', '<your name>');     // 수신자 추가

    $mail->Subject = "Message from $Name";
    $mail->Body    = $Message;

    if(!$mail->send()) {
        echo 'Message could not be sent.';
        echo 'Mailer Error: ' . $mail->ErrorInfo;
    } else {
        $newResponse = SetBasicHeader($response);
        $newResponse->getBody()->write(page('messagesent'));
        return($newResponse);
    }
});

이것이 /api/message 경로의 post 요청 핸들러입니다. 브라우저에서 전송된 폼 데이터를 받아 이메일을 작성하고 발송합니다. PHP는 URL 파라미터를 자동으로 전역 배열 $_POST에 담아줍니다.

<your email address>, <your password>, <your name>은 본인의 이메일 정보에 맞게 교체해야 합니다. Gmail SMTP 서버가 아닌 다른 서버를 사용한다면 $mail->Host 주소도 함께 변경해야 합니다.

마무리

지금까지 PressCMS 사이트에 이메일 폼을 손쉽게 추가하는 방법을 살펴보았습니다. 이 튜토리얼의 다운로드 파일에는 수정 사항이 모두 반영된 서버들이 포함되어 있으므로, 직접 타이핑하는 대신 다운로드해서 사용할 수도 있습니다. 기본적인 오류 처리는 구현해 두었으며, 나머지 부분은 여러분의 과제로 남겨두겠습니다.

여기서 소개한 방식은 폼 데이터를 URL에 담아 post하는 방법입니다. 요즘 많은 사이트는 REST API를 통해 요청 본문(body)에 JSON 문자열 형태로 데이터를 담아 작업을 수행합니다. 이 글의 코드들도 그 방식으로 쉽게 변환할 수 있지만, 이는 여러분의 숙제로 남겨둡니다(혹은 다음 튜토리얼에서 다룰 수도 있습니다). 이제 이 방법을 익혔으니, 여러분의 사이트에 직접 폼을 추가해 보세요. 이런 종류의 커스터마이징은 정말 재미있습니다. 한계는 오직 여러분의 상상력뿐입니다.