Advertisement
  1. Code
  2. Web Servers

Xử lý Form Với phpPress, goPress, rubyPress, và nodePress

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Giờ đây bạn đã có một trang web sử dụng một hệ thống tập tin phẳng (Flat File System) và bạn muốn nhận một số phản hồi từ người dùng của bạn. Thêm Disqus thì rất dễ dàng vì tất cả các code JavaScript được thêm vào trang, nhưng nó không phải là những gì bạn mong muốn. Bạn muốn họ có thể gửi email trực tiếp cho bạn để bạn có thể trả lời ngay cho họ.

Bạn có thể tạo một hệ thống toàn bộ đều là JavaScript để gửi email trực tiếp từ máy tính của người dùng, nhưng email của bạn sẽ là miếng mồi ngon cho những kẻ gửi thư rác (hay còn gọi là spammer), chúng có thể lấy nó từ code của bạn và bán nó cho những kẻ gửi thư rác khác. Vì vậy, bạn cần ẩn địa chỉ email của bạn trên máy chủ.

Hướng dẫn này liên quan đến việc thêm một hệ thống email vào PressCMS mới của bạn (tức là phpPress, rubyPress, nodePress, và goPress). Tôi sẽ bắt đầu với front-end và sau đó giải quyết back-end cho mỗi hệ thống. Tôi giả sử bạn đã có những máy chủ này trên hệ thống của bạn.

Cách Tạo Form trong Trình duyệt

Vì code cho front-end sẽ giống nhau cho mỗi máy chủ, nên bạn sẽ phải sao chép các tập tin mới này vào từng thư mục trên máy chủ. Do đó, tôi sẽ nói về các tập tin ở trong đường dẫn khi được tham chiếu từ thư mục trên máy chủ.

Thay vì thêm phong cách cho form cụ thể vào theme, script cho form này có tất cả trong một. Tạo tập tin questions.html trong thư mục site/parts cho trang web với nội dung sau:

Việc này tạo ra một form cơ bản yêu cầu tên đầy đủ (họ và tên), email, và một tin nhắn. Form này sử dụng các biểu thức chính quy để đảm bảo rằng tên và địa chỉ email là hợp lệ. Nếu bất cứ điều gì mà người dùng nhập vào các trường này không khớp với biểu thức chính quy trong pattern, thì form sẽ không được submit (gửi đi). Một hộp thoại sẽ yêu cầu người dùng điền đúng vào trường với thông báo trong tham số title. Mỗi input còn có thuộc tính required. Việc này sẽ ngăn các form rỗng khỏi bị submit. Đây là xác thực dữ liệu tối thiểu mà bạn nên sử dụng ở front-end.

Thuộc tính action trong form nói cho trình duyệt web biết địa chỉ nào để submit dữ liệu form. Thuộc tính method nói với trình duyệt để submit form bằng phương thức post. Dữ liệu của form sẽ được đặt vào URL của yêu cầu post đến máy chủ. Đây là một Chuỗi Truy vấn. Máy chủ sau đó xử lý thông tin trong chuỗi truy vấn.

Trong thư mục site/pages, hãy tạo tập tin contact.md và dán code sau đây vào:

Sau khi lưu lại, bạn có thể kiểm tra thử các trang trên máy chủ. Trong trình duyệt của bạn, mở trang http://localhost:8081/contact.

Contact Form Page
Trang Liên hệ

Trang Contact Us (Liên hệ) sẽ giống như hình ở trên. Chú ý trường Name được tập trung ngay khi tải. Thuộc tính autofocus tạo ra hành vi mong muốn này. Luôn là một thiết kế tốt khi có trường đầu tiên được tự động tập trung để người dùng gõ vào trong đó.

Sau khi gửi tin nhắn, nên có một thông báo xác nhận cho người dùng. Trong thư mục site/pages, tạo tập tin messagesent.md và thêm code này vào:

Chỉ một thông điệp đơn giản để người dùng biết rằng tin nhắn đã được gửi đi. Bạn có thể mở rộng điều này theo ý bạn.

Message Sent Confirmation Page
Trang Xác nhận Tin nhắn đã Gửi

Xử lý Form Với goPress

Để chuẩn hoá tin nhắn được cung cấp bởi người dùng, tôi sử dụng thư viện Blue Monday. Để nạp thư viện đó vào hệ thống của bạn, bạn cần chạy dòng lệnh sau:

Việc này sẽ làm cho thư viện có mặt trong chương trình của bạn. Đó là thư viện không phải tiêu chuẩn cần thiết duy nhất.

Mở tập tin goPressServer.go và thêm code sau đây vào phía trên cùng của tập tin bên trong câu lệnh import():

Gửi email từ máy chủ yêu cầu những thư viện này. Sau dòng có câu lệnh gọi hàm goPress.DefaultRoutes(, hãy thêm code sau:

Việc này thiết lập một route /api/message của post để chạy hàm postMessage(). Ở cuối tập tin, hãy thêm code này:

Hai hàm này tạo thành trình xử lý để xử lý những email được gửi đi từ trình duyệt. Route /api/message gọi hàm postMessage(). Nó truy vấn thông tin được gửi từ form được điền vào bởi người dùng, chuẩn hoá tin nhắn với thư viện BlueMonday, và gửi một email đến chủ sở hữu của trang web bằng hàm sendEmail(). Bạn sẽ phải đặt địa chỉ Gmail của bạn trong <your email address> và mật khẩu ở trong <password>.

Trong tập tin goPress.go, hãy thêm hàm này phía sau hàm SetGetRoute():

Hàm này hoàn toàn giống hàm SetGetRoute(). Sự khác biệt duy nhất là sử dụng hàm web.Post().

Với những thay đổi này, máy chủ goPress của bạn giờ đây có thể gửi các email của bạn từ người dùng.

Xử lý Form Với nodePress

Để gửi email từ node, trước tiên bạn phải cài đặt thư viện nodemailerthư viện body-parser bằng dòng lệnh sau:

Sau đó, bạn cần nạp các thư viện mới và cấu hình đối tượng mailer. Ở đầu tập tin nodePress.js, sau khi thư viện cuối cùng được nạp, hãy thêm các dòng sau đây:

Thao tác này sẽ nạp thư viện nodemailer và thiết lập thành phần có thể sử dụng lại để gửi email. Bạn phải thay thế <your email name> bằng địa chỉ email của bạn (tức là trước ký hiệu @), <your email domain> là tên miền cho địa chỉ email của bạn (ví dụ: gmail.com đối với gmail thông thường hoặc tên miền của bạn nếu bạn có tên miền gmail tuỳ biến), và <your password> bằng mật khẩu cho tài khoản email của bạn.

Sau dòng khởi tạo biến nodePress, hãy thêm code này:

Bây giờ, sau cuộc gọi cuối cùng đến hàm nodePress.get(), thêm code sau:

Đây là trình xử lý cho địa chỉ /api/message. Hàm này nhận thông tin được gửi từ form, tạo ra thông điệp email thích hợp và gửi nó tới địa chỉ email được cung cấp trong <your email address>. Sau khi gửi email, nó sẽ chuyển người dùng đến trang /messagesent. Middleware body-parser có các tham số url được lưu vào biến request.body và được lọc một cách hợp lý.

Code này hoạt động cho thiết lập Gmail không có xác thực hai lớp. Nếu bạn có xác thực hai lớp, bạn có thể tham khảo tài liệu hướng dẫn cho Nodemailer để thiết lập nó.

Xử lý Form Với rubyPress

Để gửi email trong Ruby, bạn sẽ cần phải cài đặt thư viện ruby-gmail bằng lệnh sau:

Tùy thuộc vào thiết lập Ruby của bạn, bạn có thể cần phải sử dụng sudo ở phía trước của lệnh. Bây giờ để nạp thư viện, hãy thêm dòng sau vào phía trên cùng của tập tin rubyPress.rb:

Sau toàn bộ các định nghĩa get, hãy thêm các dòng sau:

Với những bổ sung này, máy chủ rubyPress của bạn có thể xử lý các form email. Khi bạn thay thế <your email address> bằng địa chỉ email của bạn và <your password> bằng mật khẩu cho máy chủ email của bạn, thì script của chúng ta đã hoàn tất.

Xử lý Form Với phpPress

Máy chủ cuối cùng cần phải sửa đổi là máy chủ phpPress. Để thêm khả năng gửi email vào máy chủ, tôi sẽ cài đặt thư viện phpmailer. Đây là thư viện được sử dụng rộng rãi nhất trong PHP để làm việc với email. Để cài đặt thư viện, bạn cần chạy các lệnh sau trong thư mục phpPress:

Thật không may, bản cập nhật composer sẽ cập nhật thư viện LightnCandy. Điều này là tốt vì nó nhanh hơn và dễ dàng hơn để sử dụng. Nhưng nó phá vỡ code của máy chủ. Trong tập tin index.php, xác định hàm ProcessPage() và thay thế nó bằng code sau:

So với code cũ, bạn không cần phải làm việc với một tập tin tạm. Tất cả đều được thực hiện ở trong bộ nhớ và do đó nhanh hơn nhiều. Bây giờ, ở trên cùng của tập tin index.php, hãy thêm code sau đây phía sau thư viện Jade:

Việc này sẽ nạp thư viện phpmailer. Bây giờ, sau hàm $app->get() cuối cùng, hãy thêm code sau:

Đây là trình xử lý yêu cầu post cho đường dẫn /api/message. Nó lấy dữ liệu form được gửi từ trình duyệt, tạo ra một email với dữ liệu đó, và gửi email. PHP tự động lấy bất kỳ tham số URL nào và đặt chúng bên trong mảng toàn cục $_POST.

Bạn sẽ phải thay thế <your email address>, <your password>, và <your name> bằng các giá trị thích hợp cho email của bạn. Nếu bạn đang sử dụng một thứ gì đó khác máy chủ SMTP của Gmail, thì bạn cũng cần phải thay đổi địa chỉ địa chỉ $mail->Host.

Tóm tắt

Tôi đã hướng dẫn cho bạn cách dễ dàng thêm một form email vào một trang web pressCMS. Tập tin tải về cho hướng dẫn này có tất cả các máy chủ với các sửa đổi của chúng. Do đó, bạn có thể tải về thay vì gõ vào từng lệnh. Tôi đã thực hiện xong một ít xử lý lỗi. Tôi sẽ để phần còn lại cho bạn như một bài tập.

Phương pháp mà tôi hướng dẫn ở đây là bằng cách post dữ liệu của form với dữ liệu trong URL. Nhiều trang web ngày nay sử dụng REST API cùng với dữ liệu nằm trong một chuỗi JSON trong body để thực thi action (hành động). Những cách làm này dễ dàng chuyển đổi sang phương pháp đó, nhưng đó là một bài tập dành cho bạn (hoặc có thể là bài hướng dẫn trong tương lai). Bây giờ bạn đã biết làm theo cách này, hãy thêm các form vào trang web của bạn. Kiểu tuỳ biến này rất thú vị. Giới hạn duy nhất là trí tưởng tượng của bạn.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.