phpPress、goPress、rubyPress、nodePressを使用したフォームの処理

フラットファイルシステムを使用するWebサイトができたので、ユーザーからフィードバックを受け取りたいと思います。 Disqusの追加は、すべてのJavaScriptコードがページに追加されるため簡単ですが、それはあなたが望むものではありません。あなたは彼らがあなたに直接メールを送ることができるようにしたいので、あなたは彼らにだけ返信することができます。

ユーザーのコンピュータから直接メールを送信するすべてのJavaScriptシステムを作成することもできますが、その場合、メールはスパマーに公開され、コードから取得して他のスパマーに販売することができます。したがって、サーバー上でメールアドレスを非表示にする必要があります。

このチュートリアルは、新しい PressCMSに電子メールメッセージシステムを追加する方法について説明しています。 （つまり、 phpPress 、 ruby​​Press 、 nodePress 、および goPress ）。私はフロントエンドから始めて、次に各システムのバックエンドに取り組んでいます。システムにこれらのサーバーがすでにあると想定しています。

ブラウザでフォームを作成する方法

フロントエンドコードは各サーバーで同じであるため、これらの新しいファイルを各サーバーディレクトリにコピーする必要があります。したがって、サーバーディレクトリから参照されるパス内のファイルについて説明します。

テーマにフォーム固有のスタイルを追加する代わりに、このフォームスクリプトはすべてを1か所にまとめています。ファイルquestions.htmlを作成します サイト/パーツ 次のコンテンツを含むWebサイトのディレクトリ：

<!-- Styling for the form -->
<style>
    form {
        margin:        20px auto;
        width:         400px;
        padding:       1em;
        border:        1px solid #f0d5ad;
        border-radius: 1em;
    }

    form div + div {
        margin-top:    1em;
    }

    label {
        display:       inline-block;
        width:         90px;
        text-align:    right;
    }

    input, textarea {
        width:           300px;
        -moz-box-sizing: border-box;
    }

    input:focus, textarea:focus {
        border-color:    #000;
    }

    textarea {
        vertical-align: top;
        height:         5em;
        resize:         vertical;
    }

    button {
        margin-top:     10px;
        margin-left:    8em;
    }
</style>

<!-- HTML for the Form -->

<form action="/api/message" method="post">
    <div>
        <label for="Name">Name:</label>
        <input id="Name" name="Name" type="text" value="" pattern="[a-zA-Z]{3,3} [a-zA-Z]{3,3}" title="First and Last name." autofocus required />
    </div>
    <div>
        <label for="Email">Email:</label>
        <input id="Email" name="Email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}" title="Valid Email only." value="" required />
    </div>
    <div>
        <label for="Message">Message:</label>
        <textarea id="Message" name="Message" type="text" value="" required></textarea>
    </div>
    <button type="submit">Send Message</button>
</form>

これにより、フルネーム（姓名）、電子メール、およびメッセージを要求する基本的なフォームが作成されます。このフォームでは、正規表現を使用して、名前と電子メールアドレスが有効であることを確認します。ユーザーがこれらのフィールドに入力したものが、 patternの正規表現と一致しない場合 ディレクティブの場合、フォームは送信されません。ポップアップが表示され、 titleのメッセージをフィールドに適切に入力するように求められます。 パラメータ。各入力フィールドにはrequiredがあります プリミティブも。これにより、空白のフォームが送信されなくなります。これは、フロントエンドで使用する必要のある最低限のデータ検証です。

アクション formのディレクティブ elementは、フォームデータを送信するアドレスをWebブラウザに指示します。 method ディレクティブは、ブラウザに postとして送信するように指示します 方法。フォームデータは、サーバーへのPOSTリクエストのURLに配置されます。これはクエリ文字列です 。次に、サーバーはクエリ文字列の情報を処理します。

サイト/ページ ディレクトリ、ファイル contact.mdを作成します 次のコードを配置します：

### Contact Us

This is a simple contact form. Please fill in your name, first and last, email address, and message. I will get back to you as soon as possible. Thanks.

{{{question}}}

保存したら、サーバーのページを試すことができます。ブラウザで、ページhttp：// localhost：8081/contactを開きます。

お問い合わせ ページは上の写真のようになります。ロード時に直接[名前]フィールドが強調表示されていることに注意してください。 autofocus ディレクティブは、この望ましい動作を作成します。ユーザーが入力する必要のある最初のフィールドを自動的にフォーカスすることは、常に優れた設計です。

メッセージを送信した後、ユーザーへの確認メッセージがあれば便利です。 サイト/ページ ディレクトリ、ファイル messagesent.mdを作成します 次のコードを配置します：

### Message was sent

Thank you so much for taking time to send me a message. I will reply as soon as possible.

メッセージが適切に送信されたことをユーザーに知らせるための単純なメッセージ。必要に応じてこれを拡張できます。

goPressを使用したフォームの処理

ユーザーからのメッセージをサニタイズするために、ブルーマンデーを使用しています。 図書館。そのライブラリをシステムにロードするには、次のコマンドラインを実行する必要があります：

go get github.com/microcosm-cc/bluemonday

これにより、ライブラリをプログラムで使用できるようになります。必要な非標準ライブラリはこれだけです。

goPressServer.goを開きます ファイルを作成し、これを import（）内のファイルの先頭に追加します ステートメント：

    "fmt"
    "github.com/hoisie/web"
    "net/smtp"
    "github.com/microcosm-cc/bluemonday"

サーバーからメッセージを電子メールで送信するには、これらのライブラリが必要です。 goPress.DefaultRoutes（ 関数呼び出し、次のコードを追加します：

//
// Setup special route for our form processing.
//

goPress.SetPostRoute('/api/message', postMessage)

これにより、 / api / messageの投稿ルートが設定されます 関数postMessage（）を実行するには 。ファイルの最後に、次のコードを追加します：

//
// Function:         postMessage
//
// Description:      This function will send
//                   the message from them
//                   the website to the owner
//                   of the site.
//
// Inputs:
//                   ctx     The web server 
//                           context.
//
func postMessage(ctx *web.Context) string {
    //
	// Get the post information and send the 
    // email.
	//
	name := ctx.Params["Name"]
	from := ctx.Params["Email"]
	p := bluemonday.UGCPolicy()
	message := p.Sanitize(ctx.Params["Message"])
	to := "<your email address>"
	subject := "Message from User:" + name + " of CustomCT.com"
	sendEmail(to, from, subject, message)

	//
	// Get the messagesent page contents and 
    // process it.
	//
	pgloc := goPress.SiteData.Sitebase + "pages/messagesent"
	return goPress.RenderPageContents(ctx, goPress.GetPageContents(pgloc), pgloc)
}

//
// Function:         sendEmail
//
// Description:      This function sends an 
//                   email message.
//
// Inputs:
//                   to      The email address 
//                           to send the 
//                           message
//                   from    The email address 
//                           of the person 
//                           sending the 
//                           message
//                   subject The subject of the 
//                           message
//                   message The message of the 
//                           email
//
func sendEmail(to string, from string, subject string, message string) {
	body := fmt.Sprintf("To: %s\r\nSubject: %s\r\n\r\n%s", to, subject, message)
	auth := smtp.PlainAuth("", "<your email address>", "<your password>", "smtp.gmail.com")
	err := smtp.SendMail("smtp.gmail.com:587", auth, from, []string{to}, []byte(body))
	if err != nil {
		//
		// Process the error. Currently, assuming there 
        // isn't a problem.
		//
	}
}

これらの2つの関数は、ブラウザーから送信された電子メールを処理するためのハンドラーを構成します。 / api / message ルートはpostMessage（）を呼び出します 関数。ユーザーが入力したフォームから送信された情報を取得し、BlueMondayライブラリでメッセージをサニタイズし、 sendEmail（）を使用してサイトの所有者にメールを送信します。 関数。 <メールアドレス>の代わりにGmailアドレスを入力する必要があります の所有者とパスワード ホルダー。

goPress.go内 ファイルの場合、 SetGetRoute（）の後にこの関数を追加します 機能：

//
// Function:           SetPostRoute
//
// Description:       This function gives an 
//                    easy access to the 
//                    web variable setup in 
//                    this library.
//
// Inputs:
//     	route 	     Route to setup
//		handler      Function to run that 
//                   route.
//
func SetPostRoute(route string, handler interface{}) {
	web.Post(route, handler)
}

この関数は、 SetGetRoute（）とまったく同じです。 関数。唯一の違いは、 web.Post（）を使用することです。 機能。

これらの変更により、goPressサーバーがユーザーからメールを送信できるようになりました。

nodePressを使用したフォームの処理

ノードからメールを送信するには、最初に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

//
// create reusable transporter object using the 
// default SMTP transport
//
var transporter = nodemailer.createTransport('smtps://<your email name%40<your email domain>:<your password>@smtp.gmail.com');

これにより、nodemailerライブラリがロードされ、電子メールを送信するための再利用可能なコンポーネントがセットアップされます。 <メール名>を置き換える必要があります メールアドレスの名前（つまり、@記号の前）を使用して、 はメールアドレスのドメインです（つまり、通常のGmailの場合はgmail.com、ドメイン名にGmailが設定されている場合はドメイン名）、 メールアカウントのパスワードを使用します。

nodePress変数を初期化する行の後に、次のコードを追加します。

//
// Configure the body parser library.
//
nodePress.use(bodyParser.urlencoded({
    extended: true
}));

さて、最後の nodePress.get（）の後 関数呼び出し、次のコードを追加します：

nodePress.post('/api/message', function(request, response) {
    //
	// setup e-mail data
  	//
    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
    };
  	//
  	// Send the email.
  	//
    transporter.sendMail(mailOptions, function(error, info){
        if(error){
            return console.log(error);
        }
        //
        // Send the user to the message was sent okay page.
        //
        response.send(page("messagesent"));
    });
});

これは/api / messageのハンドラーです 住所。この関数は、フォームから送信された情報を取得し、適切な電子メールメッセージを作成して、<あなたの電子メールアドレス>で指定された電子メールアドレスに送信します。 。メールを送信すると、ユーザーは / messagesentに送信されます。 ページ。ボディパーサーミドルウェアのURLパラメーターはrequest.bodyに保存されています 可変で適切に消毒されています。

このコードは、2要素認証なしのGmailセットアップで機能します。二要素認証を使用している場合は、ノードメーラーを参照できます。 設定するためのドキュメント。

rubyPressでフォームを処理する

Rubyでメールを送信するには、 ruby​​-gmailをインストールする必要があります 次のコマンドラインを使用したライブラリ：

gem install ruby-gmail

Rubyの設定によっては、 sudoを使用する必要がある場合があります コマンドの前。ライブラリをロードするには、次の行を ruby​​Press.rbの先頭に追加します。 ファイル：

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

結局のところ、 get 定義については、次の行を追加してください：

post '/api/message' do
  #
  # Get the parameters from the form.
  #
  name = params[:Name]
  email = params[:Email]
  message = params[:Message]

  #
  # Create and send the email.
  #
  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
  #
  # Send the user to the message sent page.
  #
  page 'messagesent'
end

これらの追加により、rubyPressサーバーは電子メールフォームを処理できます。 <メールアドレス>を変更したら あなたのメールアドレスと メールサーバーのパスワードを入力すると、スクリプトが終了します。

phpPressを使用したフォームの処理

変更する最後のサーバーはphpPressサーバーです。サーバーにメール機能を追加するために、phpmailerライブラリをインストールします 。これは、電子メールを操作するためにPHPで最も広く使用されているライブラリです。ライブラリをインストールするには、phpPressディレクトリで次のコマンドラインコマンドを実行する必要があります。

composer update
composer require phpmailer/phpmailer

残念ながら、composerの更新によりLightnCandyライブラリが更新されます。これは、はるかに高速で使いやすいので便利です。しかし、それはサーバーコードを壊します。 index.phpファイルで、 ProcessPage（）を見つけます。 関数を作成し、次のコードに置き換えます。

//
// Function:        ProcessPage
//
// Description:     This function will process 
//                  a page into the template, 
//                  process all Mustache
//                  macros, and process all 
//                  shortcodes.
//
// Inputs:
//                  $layout     The layout for 
//                              the page
//                  $page       The pages main 
//                              contents
//
function ProcessPage( $layout, $page ) {
   global $site, $parts, $helpers;

   //
   // Get the page contents.
   //
   $parts['content'] = figurePage($page);

   //
   // First pass on Handlebars.
   //
   $phpStr = LightnCandy::compile($layout, $helpers);
   $renderer = LightnCandy::prepare($phpStr);
   $page = $renderer($parts);

   //
   // Process the shortcodes.
   //
   $pageShort = processShortcodes($page);

   //
   // Second pass Handlebars.
   //
   $phpStr = LightnCandy::compile($pageShort, $helpers);
   $renderer = LightnCandy::prepare($phpStr);
   $page = $renderer($parts);

   //
   // Return the results.
   //
   return($page);
}

古いコードと比較すると、一時ファイルを操作する必要がなくなります。それはすべてメモリ内で行われるため、はるかに高速です。さて、 index.phpの上部にあります ファイル、Jadeライブラリの後にこれを追加します：

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

これにより、phpmailerライブラリがロードされます。さて、最後の $ app-> get（）の後 関数、次のコードを追加します：

//
// This route is for processing the post request from the
// email form on the website.
//
$app->post('/api/message', function(Request $request, Response $response) {
    global $_POST;

    //
    // Get the post variables.
    //
    $Name = $_POST['Name'];
    $Email = $_POST['Email'];
    $Message = $_POST['Message'];

    //
    // Create the email message and send it.
    //
    $mail = new PHPMailer;

    $mail->isSMTP();                           // Set mailer to use SMTP
    $mail->Host = 'smtp.gmail.com';            // Specify main and backup SMTP servers
    $mail->SMTPAuth = true;                    // Enable SMTP authentication
    $mail->Username = '<your email address>';  // SMTP username
    $mail->Password = '<your password>';       // SMTP password
    $mail->SMTPSecure = 'tls';                 // Enable TLS encryption, `ssl` also accepted
    $mail->Port = 587;                         // TCP port to connect to

    $mail->setFrom($Email, $Name);
    $mail->addAddress('<your email>', '<your name>');     // Add a recipient

    $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に配置します 。

<あなたのメールアドレス>を置き換える必要があります 、<パスワード> 、および<あなたの名前> メールに適切な値を使用します。 Gmail SMTPサーバー以外のものを使用している場合は、 $ mail-> Hostを変更する必要があります。 アドレスも。