Biểu mẫu phản hồi trong jQuery và PHP. Kịch bản biểu mẫu phản hồi

Khi khởi động một dự án web mới, không có gì thú vị hơn việc nhận được ngay đánh giá tích cực và lòng biết ơn từ những vị khách đầu tiên. Thật không may, chủ sở hữu của nhiều trang web đã bỏ qua thực tế này và việc liên hệ với ban quản trị trang web của họ là khá khó khăn.

Hôm nay chúng tôi sẽ cho bạn biết về một giải pháp đơn giản cho vấn đề này. Biểu mẫu này, sử dụng jQuery, PHP và PHPMailer, sẽ cho phép bạn nhận phản hồi trực tiếp từ khách truy cập vào trang web của bạn. e-mail.

HTML

Hãy bắt đầu với đánh dấu HTML. Biểu định kiểu được đưa vào phần đầu của tài liệu và các nguồn javascript được đưa vào ở cuối. Điều này cải thiện tốc độ hiệu suất vì các tập lệnh được tải lần cuối trong khi phần còn lại của trang web đã được tải và hiển thị.

: phản hồi.html

Mẫu phản hồi nhanh với PHP và jQuery | Bản demo hướng dẫn

Trong phần nội dung của tài liệu, chúng ta thấy DIV “#feedback”. Vị trí cố định của nó được giới hạn ở góc dưới bên phải của cửa sổ, bạn có thể thấy điều này trong phần tiếp theo của bài viết.

Bên trong nó có 5 nhịp màu (nhịp). Chiều rộng của chúng là 20% của tài liệu và chúng được căn chỉnh sang trái. Bằng cách này, chúng sẽ lấp đầy toàn bộ chiều rộng của #feedback DIV.

Cuối cùng, trong container.section chứa tiêu đề và tiêu đề, có một nút và trường nhập văn bản.

Chuyển sang chỉnh sửa kiểu biểu mẫu, trước tiên chúng ta cần nói đôi điều về cách cấu trúc của biểu định kiểu. Như bạn có thể thấy từ các định nghĩa CSS bên dưới, mỗi quy tắc đều bắt đầu bằng #feedback. Bằng cách này, chúng tôi đạt được CSS tương đương với không gian tên, giúp việc thêm mã vào trang web hiện có dễ dàng hơn và giúp tránh xung đột có thể xảy ra.

: styles.css – Phần 1

#nhận xét(
màu nền:#9db09f;
chiều rộng: 310px;
chiều cao: 330px;
vị trí: cố định;
đáy: 0;
phải:120px;
lề dưới:-270px;
chỉ số z: 10000;
}

#feedback.section(
nền:url ("img/bg.png") lặp lại-x trên cùng bên trái;
đường viền:1px liền khối #808f81;
viền dưới: không có;
phần đệm:10px 25px 25px;
}

#phản hồi .color(
nổi:trái;
chiều cao:4px;
chiều rộng: 20%;
tràn:ẩn;
}

#feedback .color-1( màu nền:#d3b112;)
#feedback .color-2( màu nền:#12b6d3;)
#phản hồi .color-3( màu nền:#8fd317;)
#feedback .color-4( màu nền:#ca57df;)
#feedback .color-5( màu nền:#8ecbe7;)

#phản hồi h6(
nền:url("img/feedback.png") không lặp lại;
chiều cao: 38px;
lề:5px 0 12px;
thụt lề văn bản:-99999px;
con trỏ:con trỏ;
}

#feedbacktextarea(
màu nền:#fff;
đường viền: không có;
màu:#666666;
phông chữ:13px "Lucida Sans",Arial,sans-serif;
chiều cao: 100px;
phần đệm: 10px;
chiều rộng: 236px;

Moz-box-shadow:4px 4px 0 #8a9b8c;
-webkit-box-shadow:4px 4px 0 #8a9b8c;
box-shadow:4px 4px 0 #8a9b8c;
}
Phần tử đầu tiên chúng ta cần định dạng là #feedback DIV. Anh ấy đã được trao định vị cố định và nó bị giới hạn trong cửa sổ trình duyệt. Tiếp theo là định nghĩa về DIV.section và năm nhịp màu. Các khoảng này chỉ khác nhau ở màu nền được chỉ định bởi các lớp khác nhau.

Cuối cùng, chúng tôi có các quy tắc CSS xác định vẻ bề ngoài các trường nhập văn bản.

: styles.css – Phần 2

#phản hồi a.submit(
nền:url("img/submit.png") không lặp lại;
đường viền: không có;
hiển thị:khối;
chiều cao:34px;
lề:20px tự động 0;
trang trí văn bản: không có;
thụt lề văn bản:-99999px;
chiều rộng:91px;
}

#phản hồi a.submit:hover(
vị trí nền:dưới cùng bên trái;
}

#phản hồi a.submit.working(
vị trí nền: trên cùng bên phải! quan trọng;
con trỏ: mặc định;
}

#phản hồi.tin nhắn(
Họ phông chữ: Corbel, Arial, sans-serif;
màu:#5a665b;
bóng văn bản:1px 1px 0 #b3c2b5;
lề dưới:20px;
}

#phản hồi .arrow(
nền:url("img/arrows.png") không lặp lại;
nổi:đúng;
chiều rộng: 23px;
chiều cao:18px;
vị trí: tương đối;
trên cùng:10px;
}

#feedback .arrow.down( vị trí nền: trên cùng bên trái;)
#feedback h6:hover .down( vị trí nền: dưới cùng bên trái;)
#feedback .arrow.up( vị trí nền: trên cùng bên phải;)
#feedback h6:hover .up( vị trí nền: dưới cùng bên phải;)

#feedback.response(
cỡ chữ: 21px;
lề trên: 70px;
căn chỉnh văn bản:giữa;
bóng văn bản:2px 2px 0 #889889;
màu:#FCFCFC;
}
Trong phần thứ hai của biểu định kiểu, bạn có thể xem định nghĩa của nút xác nhận (gửi). Xin lưu ý rằng nút có ba vị trí được gắn với nhau hình nền– submit.png và nó chỉ được hiển thị khi cần thiết. Điều khoản: vị trí tiêu chuẩn, vị trí di chuột qua và vị trí hoạt động"đang làm việc". Khi nút ở vị trí làm việc, hiệu ứng di chuột qua sẽ bị tắt.

Ở dạng nhận xét Có hai vị trí: ẩn và tiết lộ. Khi được tải, vị trí tiêu chuẩn của nó được đặt thành ẩn. Nhưng khi người dùng nhấp vào tiêu đề, nó sẽ mở rộng bằng jQuery. Điều này được thực hiện thông qua giám sát sự kiện và kích hoạt hoạt hình đơn giản nhất, như bạn có thể thấy trực quan bên dưới.

: script.js – Phần 1

$(document).ready(function())(

// URL tương đối của tập lệnh submit.php.
// Có thể bạn sẽ phải thay đổi nó.
var submitURL = "submit.php";

// Lưu vào bộ nhớ đệm đối tượng phản hồi:
var phản hồi = $("#feedback");

$("#feedback h6").click(function())(

// Chúng ta đang lưu trữ các giá trị của ảnh động
// thuộc tính trong một đối tượng riêng biệt:

Var el = $(this).find(".arrow");

If(el.hasClass("xuống"))(
hoạt hình = (
mb: -270,
điểm: 10
};
}

// Hoạt ảnh đầu tiên di chuyển biểu mẫu lên hoặc xuống và hoạt ảnh thứ hai
// di chuyển tiêu đề "Phản hồi" để phù hợp với phiên bản thu nhỏ

Phản hồi.stop().animate((marginBottom: anim.mb));

Phản hồi.find(".section").stop().animate((paddingTop:anim.pt),function())(
el.toggleClass("xuống lên");
});
});
Để giữ cho mã của chúng tôi gọn gàng, chúng tôi đã di chuyển các câu lệnh if lên đầu tài liệu và tạo một đối tượng hoạt hình chứa các giá trị hoạt ảnh. Tùy thuộc vào việc có lớp "xuống" trên mũi tên mà chúng ta ẩn hoặc hiện biểu mẫu.

Phần thứ hai của script.js chứa cấu trúc tương tác AJAX với submit.php.

: script.js – Phần 2

$("#feedback a.submit").live("click",function())(
nút var = $(cái này);
var textarea = phản hồi.find("textarea");

// Chúng tôi sử dụng lớp công nhân không chỉ để tạo kiểu cho nút gửi,
// nhưng cũng như một loại "khóa" để ngăn chặn việc gửi nhiều lần.

If(button.hasClass("working") || textarea.val().length trả về sai;
}

// Khóa biểu mẫu và thay đổi kiểu nút:
nút.addClass("đang hoạt động");

$.ajax((
url: gửiURL,
gõ: "bài",
dữ liệu: ( tin nhắn: textarea.val()),
hoàn thành: hàm(xhr)(

Var text = xhr.responseText;

// Điều này sẽ giúp người dùng khắc phục sự cố trên biểu mẫu của họ:
if(xhr.status == 404)(
text = "Đường dẫn tới submit.php của bạn không chính xác.";
}

// Ẩn nút và vùng văn bản, sau đó
// chúng tôi đang hiển thị phản hồi nhận được từ submit.php

Nút.fadeOut();

Textarea.fadeOut(function())(
var span = $("",(
Tên lớp: "phản hồi",
html:văn bản
})
.trốn()
.appendTo(feedback.find(".section"))
.trình diễn();
)).val("");
}
});

Trả về sai;
});
});
Ở đây chúng tôi đang sử dụng phương pháp AJAX mức độ thấp hơn jQuery - $.ajax(), qua đó triển khai tương tác với submit.php. Phương thức này cho phép chúng ta kiểm soát kết nối nhiều hơn một chút so với $.get() hoặc $.post().

Một lợi thế lớn phương pháp này bao gồm "đầy đủ" tin nhắn trả lại. Ở đây, chúng tôi xác định sự trùng khớp giữa phản hồi và lỗi 404, lỗi này sẽ yêu cầu người dùng kiểm tra đường dẫn submitURL một cách lịch sự.

Bây giờ chúng ta hãy tiếp tục và chuyển sang phần cuối cùng của hướng dẫn - phần PHP

PHP

PHP chứa thông tin được truyền qua AJAX, xử lý thông tin đó và gửi tin nhắn đến hộp thư đến email của bạn.

: gửi.php

// Nhập địa chỉ email của bạn dưới đây
$địa chỉ email = " [email được bảo vệ]";

// Sử dụng session để ngăn chặn lũ lụt:

session_name("Phản hồi nhanh");
session_start();

// Nếu lần gửi biểu mẫu cuối cùng cách đây chưa đến 10 giây,
// hoặc người dùng đã gửi 10 tin nhắn trong giờ qua

if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] 10))(
chết ("Làm ơn chờ vài phút trước khi gửi lại.");
}

$_SESSION["lastSubmit"] = time();
$_SESSION["submitsLastHour"]++;

yêu cầu "phpmailer/class.phpmailer.php";

if(ini_get("magic_quotes_gpc"))(
// Nếu dấu ngoặc kép được bật, hãy loại bỏ chúng
$_POST["message"] = Striplashes($_POST["message"]);
}

if(mb_strlen($_POST["message"],"utf-8") die("Nội dung phản hồi của bạn quá ngắn.");
}

$msg = nl2br(strip_tags($_POST["message"]));

// Sử dụng lớp PHPMailer

$mail = PHPMailer mới();
$mail->IsMail();

// Thêm địa chỉ email nhận
$mail->AddAddress($emailAddress);

$mail->Subject = "Gửi biểu mẫu phản hồi nhanh mới";
$mail->MsgHTML($msg);

$mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Biểu mẫu phản hồi nhanh");
$mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Biểu mẫu phản hồi nhanh");

tiếng vang " Cảm ơn!";
Để bắt đầu, chúng ta sẽ sử dụng điều khiển Phiên PHPđể tính số lần người dùng đã sử dụng biểu mẫu trong một giờ qua. Nếu người dùng cố gắng gửi tin nhắn trong vòng chưa đầy 10 giây sau khi nó được gửi tin nhắn cuối cùng hoặc gửi hơn 10 tin nhắn trong vòng một giờ, anh ta sẽ hiển thị lỗi.

Tin nhắn được gửi bằng lớp PHPMailer. Nó chỉ hoạt động với PHP5, vì vậy máy chủ cần hỗ trợ phiên bản cụ thể này.

Một số phương thức PHPMailer được sử dụng để định cấu hình các thư gửi đi. Với IsMail(), chúng tôi yêu cầu lớp sử dụng hàm PHP mail() nội bộ. AddAddress() thêm người nhận (bạn có thể thêm nhiều người nhận ở đó). Sau khi thêm đối tượng vào phần nội dung của tài liệu, chúng tôi chỉ định địa chỉ phản hồi và gửi tin nhắn.

Điều này kết thúc sự phát triển của chúng tôi!

Tóm lại là

Bạn có thể sử dụng biểu mẫu này để thu thập phản hồi từ khách truy cập. Với biểu mẫu này, bạn giúp người dùng viết đánh giá dễ dàng hơn nhiều và nhiều người dùng sẽ không viết đánh giá nếu việc đó yêu cầu nhấp vào nơi khác và đi đến nơi khác. Bạn cũng có thể dễ dàng tự thiết kế biểu mẫu hoặc dựa trên mẫu trang web.

Theo Luật Liên bang ngày 27 tháng 7 năm 2006 số 152-FZ “Về dữ liệu cá nhân”, tôi, chủ thể của dữ liệu cá nhân, sau đây gọi là Người dùng, gửi thông tin qua các biểu mẫu phản hồi (sau đây gọi là Biểu mẫu) trên trang web (sau đây gọi là Trang web), cũng như các địa chỉ email công ty của Văn phòng luật "Business Fairway" kết thúc bằng (sau đây gọi là Thư doanh nghiệp), tôi tự do, theo ý chí tự do của mình và vì lợi ích của tôi , gửi tới Văn phòng Luật sư "Business Fairway" (OGRN 1167700058679; INN 9705068808), có trụ sở tại địa chỉ: 109240, Moscow, phố Goncharnaya, tòa nhà 24, (sau đây gọi là Nhà điều hành), đồng ý xử lý dữ liệu cá nhân của tôi (sau đây gọi là Sự đồng ý) với các điều kiện sau.

1. Thời điểm chấp nhận Đồng ý là đánh dấu trường tương ứng trong Biểu mẫu và nhấp vào nút gửi Biểu mẫu trên bất kỳ trang nào của Trang web, cũng như nhấp vào nút gửi e-mail, chứa dữ liệu cá nhân của Người dùng, tới địa chỉ Thư công ty Nhà điều hành.

2. Xử lý dữ liệu cá nhân – bất kỳ hành động (thao tác) hoặc tập hợp hành động (thao tác) nào được thực hiện bằng các công cụ tự động hóa hoặc không sử dụng các phương tiện đó với dữ liệu cá nhân, bao gồm thu thập, ghi âm, hệ thống hóa, tích lũy, lưu trữ, làm rõ (cập nhật, thay đổi ), trích xuất, sử dụng, chuyển giao (phân phối, cung cấp, truy cập), cá nhân hóa, chặn, xóa, phá hủy dữ liệu cá nhân.

3. Việc xử lý dữ liệu cá nhân được thực hiện bằng cách sử dụng các công cụ tự động hóa, kể cả trong mạng thông tin và viễn thông, và không sử dụng các công cụ đó.

4. Đồng ý cho phép xử lý dữ liệu cá nhân sau đây của Người dùng do Người dùng chỉ định trong Biểu mẫu, trong các tệp đính kèm với Biểu mẫu, cũng như thông tin được gửi đến địa chỉ thư Công ty:

Họ và tên;

Địa chỉ email;

số liên lạc;

Tuổi;

Dữ liệu cá nhân khác do Người dùng chỉ định trong Biểu mẫu hoặc tệp đính kèm Biểu mẫu.

5. Mục đích xử lý dữ liệu cá nhân:

Nhận dạng người dùng;

Tương tác với Người dùng, bao gồm gửi thông báo, yêu cầu và thông tin liên quan đến các dịch vụ của Nhà điều hành, cũng như xử lý các yêu cầu và ứng dụng từ Người dùng và thiết lập phản hồi từ Người dùng đến Nhà điều hành;

Trả lời yêu cầu của Người dùng;

Đảm bảo Người dùng làm việc với Trang web của Nhà điều hành;

Gửi tài liệu phân tích cho Người dùng và thông báo cho Người dùng về sự kiện sắp tới do Nhà điều hành tổ chức, cũng như việc Người dùng đăng ký tham gia vào các sự kiện đó;

Ký kết các thỏa thuận với Người dùng, bao gồm cả thỏa thuận việc làm và dịch vụ dịch vụ pháp lý;

Hướng thông tin và các thông tin khác đến Người dùng thông tin quảng bá sản phẩm, bằng cách gửi tin nhắn đến địa chỉ email do Người dùng chỉ định.

Cung cấp cho Người dùng lời khuyên về các vấn đề liên quan đến dịch vụ do Nhà điều hành cung cấp, nhằm mục đích hoạt động tiếp thị và hỗ trợ Người dùng, cũng như cho các mục đích khác không mâu thuẫn pháp luật hiện hành Liên Bang Nga và các điều khoản thỏa thuận giữa Người vận hành và Người dùng.

6. Trong quá trình xử lý dữ liệu cá nhân, Người vận hành có quyền thu thập, ghi lại, hệ thống hóa, tích lũy, lưu trữ, làm rõ (cập nhật, thay đổi), trích xuất, sử dụng, chuyển giao (phân phối, cung cấp, truy cập), cá nhân hóa, chặn, xóa , hủy dữ liệu cá nhân của Người dùng.

7. Nhà điều hành thực hiện các biện pháp tổ chức và kỹ thuật cần thiết và đầy đủ để bảo vệ thông tin cá nhân Người dùng bị truy cập trái phép hoặc vô tình, phá hủy, sửa đổi, chặn, sao chép, phân phối, cũng như từ những người khác hành vi sai trái các bên thứ ba.

8. Việc chuyển dữ liệu cá nhân của Người dùng cho bên thứ ba không được thực hiện, ngoại trừ những người kế nhiệm của Nhà điều hành trong quá trình tổ chức lại và những người xử lý dữ liệu cá nhân thay mặt cho Nhà điều hành và thay mặt họ. Nếu Người dùng tham gia vào các sự kiện do Nhà điều hành tổ chức thì Nhà điều hành có quyền tiết lộ dữ liệu cá nhân có liên quan của Người dùng cho những người tham gia tổ chức sự kiện đó.

9. Sự đồng ý xử lý dữ liệu cá nhân được Người dùng đưa ra trong khoảng thời gian cần thiết để Nhà điều hành đạt được mục đích xử lý dữ liệu cá nhân.

10. Người dùng có thể thu hồi sự đồng ý bằng cách gửi tuyên bố bằng văn bản cho Nhà điều hành (109240, Moscow, Phố Goncharnaya, 24) hoặc bằng cách gửi tuyên bố bằng văn bản đến địa chỉ email Công ty sau: .

11. Sự đồng ý này luôn có hiệu lực cho đến khi chấm dứt việc xử lý dữ liệu cá nhân.

12. Các khái niệm được sử dụng trong Thỏa thuận này phải được giải thích theo định nghĩa được đưa ra trong Luật liên bang ngày 27 tháng 7 năm 2006 N 152-FZ “Về dữ liệu cá nhân”.

Thông tin được trình bày trên trang này chủ yếu nhằm vào các quản trị viên web mới bắt đầu.

Xin chào các bạn, những vị khách thân mến của trang web khiêm tốn của tôi! Chắc chắn nhiều bạn, kể cả những quản trị viên web mới vào nghề, đều biết FOS (biểu mẫu phản hồi) là gì và tại sao lại cần đến nó.

FOS truyền thống theo đúng nghĩa của nó phiên bản đơn giản– đây là khi người dùng điền vào các trường của biểu mẫu nằm trên trang web và chương trình máy chủ xử lý dữ liệu này và gửi nó đến Hộp thư quản trị viên trang web. Tuy nhiên, có những lựa chọn khác và chúng ta sẽ xem xét một trong số chúng trong bài học này.

Rõ ràng là khi sử dụng CMS, ví dụ như Joomla và WordPress miễn phí, vấn đề phản hồi có thể được giải quyết bằng cách sử dụng phần mở rộng khác nhau hoặc plugin, nhưng có những cách thay thế, có thể hữu ích cho bất kỳ dự án nào được xây dựng trên cả hai HTML thuần túy, PHP và sử dụng công cụ.

Trên Internet, bạn có thể tìm thấy khá nhiều tập lệnh cho nhiều FOS khác nhau - cả đơn giản và rất phức tạp, được cài đặt trên trang web dưới dạng CMS chính thức và không chỉ yêu cầu hỗ trợ PHP mà còn cả cơ sở dữ liệu cho công việc của chúng. Rất có thể bạn sẽ phải tìm kiếm, tìm và thử nhiều lựa chọn phù hợp với mình.

Cũng có thể phản hồi thông qua biểu mẫu nhận xét dành cho tất cả mọi người, nơi khách truy cập giao tiếp với ban quản trị trang web và với nhau để giải quyết các câu hỏi và vấn đề, trong khi FOS liên quan đến giao tiếp khép kín, tách biệt hơn giữa hai người. Có thể nói, khách truy cập và khách hàng luôn có thắc mắc không phải để công chúng xem và công khai.

Cũng cần phải nói rằng có những dịch vụ tốt để tạo biểu mẫu phản hồi, nhưng bây giờ chúng ta sẽ nói về một FOS thú vị và độc đáo. Sự khác biệt chính của nó so với các mẫu khác là nó không yêu cầu sự hiện diện và sử dụng ứng dụng thư. Đây là một biểu mẫu web và các tin nhắn trong đó được tạo, gửi trên một trang web và được nhận trên một trang web. Nói cách khác, mẫu này hoạt động trong máy chủ trang web của bạn mà không cần sử dụng bất kỳ máy chủ email nào.

TRÊN lưu trữ miễn phí Máy chủ SMTP không có sẵn với PHP, vì vậy hãy tạo một dịch vụ gửi tin nhắn từ trang web qua e-mail vào email của quản trị viên là không thể. Bộ FOS được đề xuất giải quyết vấn đề này và cung cấp cho cả người gửi tin nhắn từ trang web và quản trị viên của nó Một cách thuận tiện nhắn tin.

Bạn có cơ hội kiểm tra biểu mẫu phản hồi đang hoạt động, gửi tin nhắn bằng cách điền vào các trường trên trang gửi, đồng thời xem nó trên một trang khác có tin nhắn đã nhận.

Trong tương lai, để không gặp khó khăn trong việc chuyển mã tệp, hãy đọc chương trình giáo dục ngắn gọn này. Để thực hiện chuyển đổi, ví dụ: từ windows-1251 sang utf-8, bạn cần:

Trong những hành động này, điều quan trọng là phải tuân thủ thứ tự thực hiện, nếu không, thay vì những từ tiếng Nga, bạn sẽ nhận được những “lời nói điên rồ” khó hiểu.

1. Tải xuống kho lưu trữ cần thiết với vật liệu và giải nén nó vào thư mục hiện tại trên máy tính. Trong thư mục phản hồi, bạn sẽ thấy thư mục img chứa hình ảnh và tệp biểu mẫu. Tải toàn bộ thư mục phản hồi lên máy chủ trang web của bạn.

CHÚ Ý! Nếu file được upload lên server thì cần thiết lập thuộc tính cho file message.txt: 666, nếu không việc đọc ghi vào file sẽ không thể thực hiện được và server sẽ hiển thị thông báo lỗi.

2. Nhập địa chỉ vào thanh địa chỉ của trình duyệt:
//tên miền/phản hồi/phản hồi.php của bạn
Trang phản hồi với biểu mẫu nhập dữ liệu sẽ được tải. Bạn có thể kiểm tra biểu mẫu bằng cách điền vào tất cả các trường và gửi tin nhắn. Tạo liên kết tới trang này từ trang web của bạn ở đúng nơi.

3. Để kiểm tra tin nhắn, hãy nhập thanh địa chỉđịa chỉ trình duyệt:
//tên miền/phản hồi/message.php của bạn
Trang có tiêu đề tin nhắn, dữ liệu và nội dung của tin nhắn đã gửi sẽ được tải. Để xóa tất cả các bản ghi, hãy nhấp vào nút Xóa tất cả trên trang. Đánh dấu trang tin nhắn (message.php) để bạn có thể dễ dàng truy cập vào lần sau.

FOS sẵn sàng hoạt động trên trang web của bạn. Bạn mất bao lâu để cài đặt nó?

Biểu mẫu này cũng có thể được chèn vào mẫu trang web PHP. Nhiệm vụ này khó khăn hơn một chút.

Biểu mẫu sẽ trông giống như thế này và bạn có thể chấp nhận tin nhắn.

Các tệp ở dạng mã hóa utf-8; nếu trang web của bạn ở dạng mã hóa khác, chúng cần được mã hóa lại. Bạn đã có thể tự mình làm điều này.

Các trang phản hồi.php và send.php có thiết kế sơ bộ cho rõ ràng, điều này sẽ không được yêu cầu trong tương lai do thực tế là phần được đánh dấu khối bắt buộc(bắt đầu khối → kết thúc khối) trong các tệp phản hồi.php và send.php sẽ cần được sao chép và dán vào các mẫu trang trên trang web của bạn. Sau đó, các mẫu này sẽ được đổi tên tương ứng là feedback.php và send.php. Menu chính của trang web của bạn phải chứa liên kết đến trang phản hồifeedback.php.

Các tệp header.php và footer.php, được sử dụng để tạo các trang phản hồi.php và send.php trong quá trình thử nghiệm sơ bộ, cũng không bắt buộc.

Các tập tin message.php và deltext.php là các trang dịch vụ dành cho quản trị viên trang web. Chúng có thể được giữ nguyên hoặc trang trí theo ý thích của bạn.

Tất cả các tập tin này phải ở dạng thư mục gốc cùng với tệp tin.txt:

Để tránh rắc rối, trước khi tải file lên thư mục gốc trang web, hãy kiểm tra xem tên tệp có khớp không! Nếu có, các tập tin nên được đổi tên.

Nếu bạn đang sử dụng trang web lưu trữ PHP có chứa các trang HTML thông thường thì bạn nên chèn biểu mẫu từ tệp phản hồi.php vào mẫu trang phản hồi có tên là phản hồi.html. Và vào mẫu trang HTML có tên send.html, chèn một khối tập lệnh từ tệp tương ứng và đổi tên trang thành send.php.

Đây là tất cả! Sử dụng FOS ở mức tối đa, giao tiếp với khách truy cập, phát triển tài nguyên của bạn và mọi điều tốt đẹp nhất sẽ đến với bạn! Đừng quên ghé thăm trang web của tôi. L.M của bạn

Hầu như mọi trang web đều có mẫu phản hồi. Và tất nhiên có rất nhiều cách triển khai khác nhau. Trong bài viết này, chúng tôi sẽ viết một biểu mẫu phản hồi sử dụng xác thực HTML5 và thông báo bật lên có âm thanh. Và tất nhiên bản thân yêu cầu sẽ được gửi cùng với sử dụng ajax. Ngoài ra, ví dụ sẽ cung cấp hai tùy chọn để xử lý yêu cầu: thông qua ajax và yêu cầu POST thông thường. Trong trường hợp yêu cầu POST, tin nhắn flash dựa trên phiên sẽ được sử dụng. Thêm chi tiết dưới phần cắt...

Vì vậy, dự án của chúng tôi sẽ có cấu trúc như sau:

Tệp index.php sẽ chứa một biểu mẫu phản hồi. Sau khi người dùng điền vào biểu mẫu và nhấp vào nút gửi, một yêu cầu ajax sẽ được gửi đến tập lệnhfeedback.php. Đến lượt nó, sau khi xử lý yêu cầu, sẽ trả về kết quả. Có một sắc thái ở đây. Tập lệnh sẽ kiểm tra yêu cầu nào đến và tùy thuộc vào điều này, trả về kết quả ở dạng json hoặc viết một thông báo flash tới phiên rồi chuyển hướng nó trở lại index.php. Nghĩa là, trong trường hợp có bất kỳ lỗi nào trong javascript, yêu cầu vẫn sẽ được xử lý bằng một yêu cầu POST đơn giản. Và trong trường hợp này, lập trình viên có một công cụ linh hoạt cho phép anh ta luôn từ bỏ ajax.

Tin nhắn flash là một loại dữ liệu phiên sẽ bị xóa sau khi chúng được yêu cầu lần đầu tiên. Rất là công cụ tiện lợiđể chuyển tin nhắn giữa các yêu cầu.

Để không làm phức tạp bố cục và cũng để thống nhất các thông báo cho người dùng, ví dụ này sử dụng các thông báo tiếng gầm gừ bật lên tương tự như các thông báo được sử dụng trong OSX. Để thực hiện việc này, hãy sử dụng plugin jQuery tốt jGrowl, có hệ thống tạo kiểu và tùy chỉnh linh hoạt.

Vì vậy, hãy bắt đầu với HTML:

Như bạn có thể thấy từ đoạn mã trên. Không được sử dụng trong ví dụ. Nó chỉ không cần thiết cho những thứ như thế này. Tương tự, dữ liệu sẽ được xác thực trên máy chủ.

JavaScript:

Đoạn mã trên rất rõ ràng. Thiết lập thông báo và phát lại âm thanh. Và cũng có thể thực hiện thao tác biểu mẫu mà không cần tải lại trang bằng thư viện ajaxForm.

Bây giờ hãy chuyển sang thực hiện xử lý yêu cầu:

nhất nơi quan trọng trong tập lệnh đây là hàm stopAndResponseMessage, là một cơ chế xử lý yêu cầu linh hoạt. Nó trả về phản hồi json trong trường hợp yêu cầu ajax hoặc sử dụng tin nhắn flash khi rảnh ĐĂNG yêu cầu. TRÊN ở giai đoạn này Có thể không rõ tin nhắn flash được thực hiện như thế nào. Nhưng vì bài viết đã khá dài nên người đọc sẽ phải tự tìm hiểu vấn đề này. sử dụng mã nguồn tất nhiên rồi. Mọi thứ được triển khai trong tệp protected/flash.php.