Một trong những điều đơn giản nhất mà ai đó muốn thực hiện trong ứng dụng web là hiển thị biểu mẫu cho người dùng và sau đó xử lý dữ liệu mà ứng dụng nhận được từ biểu mẫu. Đây là một nhiệm vụ rất phổ biến tuy nhiên có rất nhiều điểm yếu và những điều mà một nhà phát triển mới có thể làm sai. Gần đây, tôi đã cố gắng giải thích điều này với ai đó tuy nhiên tôi không thể tìm thấy hướng dẫn chứa tất cả thông tin mà tôi nghĩ là quan trọng. Vì vậy, tôi quyết định viết nó ở đây
Để dễ dàng kiểm tra và hiểu nó, tôi đã quyết định sử dụng PHP để xử lý việc gửi biểu mẫu. Tôi phải thú nhận rằng tôi không thích PHP và tôi không bao giờ sử dụng nó trong các ứng dụng sản xuất [trừ khi tôi cần hỗ trợ một ứng dụng hiện có]. Tuy nhiên, đối với các tác vụ và ví dụ đơn giản như vậy PHP có lẽ là điều dễ hiểu nhất đối với nhà phát triển mới. Chỉ cần tạo một. php và đặt nó vào một thư mục trong htdocs apache của bạn; .
Hướng dẫn này sẽ toàn diện nhất có thể và sẽ cố gắng giải thích tất cả những điều mà tôi cảm thấy cần giải thích. Tuy nhiên, tôi sẽ không đi vào chi tiết về cú pháp HTML hoặc PHP ; .
Mô tả nhanh HTTP
Vậy điều gì xảy ra trong quá trình hiển thị và gửi biểu mẫu? . Yêu cầu HTTP request is. An HTTP là cách trình duyệt “yêu cầu” một URL từ . Điều này được giải thích cặn kẽ trong giao thức HTTP , tuy nhiên, vì mục đích của chúng ta ở đây, chỉ cần nói rằng một HTTP< . Thông báo này phải có định dạng sau. request is a text message that is send from the browser/HTTP Client to the HTTP/web server. This message should have the following format:
METHOD PATH HTTP/VERSION Header 1: Value 1 Header 2: Value 2 Request data
The PHƯƠNG PHÁP có thể là một trong nhiều phương pháp được hỗ trợ trong HTTP protocol like GET, POST, PUT, OPTIONS etc however the most popular and the ones we’ll talk about here are GET and POST. The PATH là url thực của “trang” bạn muốn xem mà không có phần máy chủ. Vì vậy, nếu bạn đang truy cập http. //www. thí dụ. com/đường dẫn/đến/trang. html tham số đường dẫn sẽ có giá trị là /path/to/page. html. HTTP / PHIÊN BẢN sẽ chứa phiên bản của HTTP the client uses; usually it is something like HTTP/1.1. Finally, after that first line there’s a bunch of optional headers with various extra information the client wants to pass to the server [for example what encoding it supports, what’s the host it connects to etc].
Ngoài ra, trong trường hợp yêu cầu POST , các tiêu đề được theo sau bởi một dòng trống, tiếp theo là một đoạn “dữ liệu .
Sau đó, máy chủ sẽ phản hồi lại bằng một tin nhắn văn bản tương tự như sau [ HTTP Phản hồi].
HTTP/VERSION STATUS Header 1: Value 1 Header 2: Value 2 Response data
> HTTP / PHIÊN BẢN cũng sẽ giống như . 1 trong khi HTTP/1.1 while the STATUS sẽ là trạng thái của phản hồi. Trạng thái này là một giá trị số gồm 3 chữ số, theo sau là mô tả bằng văn bản về trạng thái. Bạn có thể nhận được nhiều trạng thái khác nhau, tuy nhiên, các trạng thái có thể được nhóm theo số bắt đầu như thế này.
- 1xx. Thông tin;
- 2xx. Thành công;
- 3xx. Chuyển hướng [trình duyệt phải truy cập trang khác];
- 4xx. Lỗi máy khách;
- 5xx. Lỗi máy chủ;
Trong bài này chúng ta chủ yếu nói về 2xx và 3xx. Câu trả lời 200 OK là câu trả lời phổ biến nhất, điều đó có nghĩa là HTTP request was completed successfully. A 302 FOUND có nghĩa là trình duyệt sẽ hiển thị một đường dẫn “khác”; . tiêu đề đường dẫn. Khi trình duyệt nhận được chuyển hướng, nó sẽ thực hiện một yêu cầu GET khác để truy xuất chuyển hướng đến trang.
Lưu ý rằng các phần Tiêu đề và Dữ liệu của phản hồi máy chủ cũng có thể là tùy chọn giống như đối với ứng dụng khách, tuy nhiên chúng thường tồn tại [đặc biệt là với phản hồi 200; không có dữ liệu, ứng dụng khách sẽ không có gì để hiển thị]
Vì vậy, khi trình duyệt “yêu cầu” một trang, trình duyệt sẽ gửi HTTP GET đến đường dẫn. Điều này xảy ra mọi lúc khi chúng tôi truy cập [nhấp vào] liên kết hoặc nhập url vào trình duyệt của chúng tôi. Tuy nhiên, khi chúng tôi gửi biểu mẫu HTML thì tình huống sẽ phức tạp hơn một chút.
phương thức biểu mẫu
An html form is a tag that contains a bunch of elements each one of which should have at least a name property. One of the inputs will usually be is a submit button.
Ngoài ra, thẻ biểu mẫu có hai thuộc tính quan trọng
- hoạt động. Xác định url nơi bài đăng sẽ được gửi tới;
- . Sẽ là NHẬN hoặc ĐĂNG
Do đó, một biểu mẫu giống như
Vậy sự khác nhau giữa and a ?
- Việc gửi biểu mẫu HTML sẽ chuyển thành HTTP GET request or an HTTP POST request to the server depending on the method attribute
- Dữ liệu của biểu mẫu GET sẽ được mã hóa ở dạng PATH of the HTTP request while the data of the POST form will be in the corresponding data part of the HTTP Request
- Một biểu mẫu được gửi với GET phải là idempotent i. e nó không nên sửa đổi bất cứ thứ gì trong máy chủ; POST should modify something the server
Vì vậy, biểu mẫu mà chúng ta đã xác định trước đó [có phương thức GET ] sẽ đưa ra kết quả sau . request [if we fill the values value1 and value2 to the inputs]:
GET /form.php?input1=value1&input2=value2 HTTP/1.1
Mặt khác, nếu biểu mẫu có phương thức POST thì HTTP request would be like this:
POST /form.php HTTP/1.1 input1=value1&input2=value2
Lưu ý rằng trong trường hợp đầu tiên, dữ liệu nằm trong PATH ở dòng đầu tiên của yêu cầu trong khi ở trường hợp thứ hai, dữ liệu được chuyển . Ngoài ra, trong cả hai trường hợp, dữ liệu được mã hóa của biểu mẫu tương tự như input1=value1&input2=value2. đó là danh sách các cặp khóa=giá trị được phân tách bằng & trong đó thuộc tính tên của mỗi đầu vào được sử dụng làm khóa.
Liên quan đến tính bình thường của hành động; . Khi một biểu mẫu sẽ không thay đổi bất cứ điều gì đối với máy chủ thì biểu mẫu đó sẽ được triển khai dưới dạng phương thức= HTTP protocol can enforce but it relies on the developer to implement it. When a form will not change anything to the server then it should be implemented as a method=GET . Ví dụ: khi bạn có biểu mẫu có hộp tìm kiếm chỉ trả về một số kết quả. Mặt khác, khi một biểu mẫu thay đổi mọi thứ, chẳng hạn như khi bạn tạo một mục mới trong một ứng dụng thì biểu mẫu đó sẽ được triển khai dưới dạng phương thức= POST .
Trình duyệt có hành vi khác sau GET so với sau POST because it expects that when you do a GET request then it won’t matter if that request is repeated many times. One the other hand, the browser will try to prevent you from submitting a request many times [because something is changed in the server so the user must do it intentionally by for example pressing a button to submit the form].
Xử lý biểu mẫu phù hợp
Vì vậy, tiếp theo phần trước, bây giờ chúng ta có thể giải thích cách xử lý một biểu mẫu đúng cách
Đối với biểu mẫu GET , chúng ta không cần phải làm bất cứ điều gì cầu kỳ; .
Đối với biểu mẫu POST , tuy nhiên, chúng tôi cần hết sức cẩn thận để tránh sao chép lại dữ liệu và có trải nghiệm người dùng tốt. Khi biểu mẫu POST được gửi, trước tiên chúng tôi cần đảm bảo rằng các tham số đã gửi là hợp lệ [ví dụ: không có trường bắt buộc nào bị thiếu]. Nếu biểu mẫu không hợp lệ thì chúng tôi sẽ trả về trạng thái 200 OK giải thích cho người dùng biết lỗi gì; .
Mặt khác, nếu biểu mẫu hợp lệ, chúng ta cần thực hiện hành động thực tế mà biểu mẫu tương ứng; . Sau khi điều này kết thúc, chúng ta nên trả lại một chuyển hướng [302] đến một trang khác hoặc thậm chí cùng một trang. Điều này sẽ dẫn đến việc duyệt web thực hiện yêu cầu GET tới trang mà chúng tôi chuyển hướng đến, vì vậy sẽ không có nguy cơ người dùng làm mới trang và gửi lại biểu mẫu. Chúng ta không nên trả lại 200 OK sau một POST yêu cầu vì sau đó . POST request [and re-insert the data].
Một điều bổ sung mà chúng tôi cần xem xét là làm cách nào để thông báo cho người dùng rằng hành động của anh ấy đã thành công sau khi gửi biểu mẫu và chuyển hướng? . Một thực tế phổ biến cho việc này là sử dụng một tin nhắn “flash”; . Tôi sẽ giải thích cách thực hiện trong phần tiếp theo. OK message so we can’t really “create” the response, we instead need to redirect to another page. A common practice for this is to use a “flash” message; this is offered by many web frameworks through specific functions but can be easily implemented. I’ll explain how in the next section.
Triển khai tin nhắn flash
Trước khi nói về tin nhắn flash, tôi muốn giải thích nhanh về cookie và phiên trình duyệt trong HTTP là gì, bởi vì tin nhắn flash .
Cookie là cách để máy chủ yêu cầu máy khách lưu trữ một số thông tin để sử dụng lại sau này. Điều xảy ra là máy chủ trả về một dòng tiêu đề HTTP tương tự như Set-Cookie. cookie-name=cookie-value . Khi khách hàng nhận được dòng tiêu đề đó, nó sẽ chuyển một dòng tiêu đề HTTP tương tự như Cookie. cookie-name=cookie-value cho tất cả các yêu cầu trong tương lai để máy chủ biết giá trị mà nó đã gửi cho khách hàng [có nhiều tùy chọn khác nhau để hết hạn cookie . Tuy nhiên, đây có vẻ là một giải pháp nguyên thủy vì HTTP là một giao thức không trạng thái, là cách duy nhất để máy chủ lưu trữ thông tin về máy khách. Nếu bạn tắt hoàn toàn cookie trong trình duyệt thì sẽ không có cách nào để máy chủ ghi nhớ bạn, chẳng hạn như bạn sẽ không thể đăng nhập ở bất cứ đâu.
Phiên là cách tốt hơn để lưu trữ thông tin về ứng dụng khách dựa trên cookie. Điều xảy ra là khi khách hàng truy cập một trang web lần đầu tiên [vì vậy nó không có cookie cho trang web cụ thể đó], máy chủ sẽ gửi lại một cookie có tên session_id [hoặc đại loại như vậy] chứa một số ngẫu nhiên rất lớn. Máy chủ sẽ lưu số id phiên này trong bộ lưu trữ liên tục [ví dụ: trong cơ sở dữ liệu hoặc tệp văn bản] và sẽ tương quan số đó với thông tin cho máy khách cụ thể đó. Khi ứng dụng khách gửi lại cookie session_id đó, máy chủ sẽ tìm nạp thông tin tương quan cho ứng dụng khách cụ thể đó từ bộ lưu trữ liên tục [và có thể cập nhật chúng, v.v.]. Bằng cách này, máy chủ có thể lưu trữ bất kỳ thông tin nào nó muốn về một khách hàng cụ thể. Máy chủ thường giữ một từ điển [bản đồ] khóa-giá trị cho mỗi phiên
Bây giờ, tin nhắn flash là một số thông tin [tin nhắn] sẽ được hiển thị cho người dùng một lần. Ví dụ: một thông báo như “Biểu mẫu của bạn đã được gửi. ”
Một cách đơn giản để thực hiện điều này là thêm thuộc tính thông báo vào phiên khi bạn muốn hiển thị thông báo flash. Trang tiếp theo được hiển thị [không liên quan nếu có liên quan đến chuyển hướng] sẽ kiểm tra xem liệu có thuộc tính thông báo cho phiên hay không;
Triển khai việc gửi biểu mẫu
Theo các hướng dẫn ở trên, tôi sẽ trình bày ở đây một biểu mẫu điển hình, sẵn sàng để sản xuất cho PHP . Một số lựa chọn tôi đã thực hiện.
- Tôi sẽ triển khai biểu mẫu POST vì GET form doesn’t need any special handling
- Trình xử lý biểu mẫu sẽ giống trang PHP với trang hiển thị biểu mẫu. Đây là việc thường làm, bạn kiểm tra phương thức HTTP và hiển thị biểu mẫu nguyên trạng [nếu là GET] or handle the submission [if it is POST]
- Khi biểu mẫu được gửi thành công, chuyển hướng đến cùng một trang và hiển thị một thông báo flash
- Kiểm tra thông tin nhập hợp lệ và hiển thị thông báo lỗi
Vì vậy, không cần phải quảng cáo thêm, đây là mã php hoàn chỉnh sẽ gửi biểu mẫu của bạn; . php
TEST FORMTest a PHP form!
Chủ Đề