Tạo ứng dụng thực hành về Form
Form là cách lập trình viện nhận thông tin submit bởi người dùng. Để thực hành các vấn đề về Form dùng cho một số bài viết, bạn tạo ra một ứng dụng
có tên zendform theo hướng dẫn như phần Cài đặt Skeleton Zend
Bạn cũng có thể theo hướng dẫn di chuyển index.php ra thư mục gốc, chạy theo đường dẫn: http://localhost/zendform/
Sau đó bạn thay nội dung hai file : module/Application/view/layout/layout.phtml và module/Application/view/application/index/index.phtml bằng
layout.phtml và index.phtml
mục đích là sử dụng getBootstrap 4.x
Tạo ứng dụng Contact V.1
Tiến hành tạo một ứng dụng hiện thị Form liên hệ, để người dùng nhập thông tin, và gửi thông tin.
Với phiên bản đầu tiên, gọi là Contact V.1 không sử dụng các thư viễn sẵn có cửa Zend/Form
Tạo action contactOne
Bạn thêm action contactOne, với mục đích để xử lý khi người dùng truy nhập trang http://localhost/zendform/application/contactone
để hiện thị form HTML hoặc thu thập thông tin gửi đến. Ở đây sẽ nhận các thông tin người dùng gửi đến gồm có các biến: email, subject, body, phone, message
module/Application/src/Controller/IndexController.php
//...
public function contactOneAction() {
$params = $this->params();
//Lấy các biến người dùng Post
$email = $params->fromPost('email');
$subject = $params->fromPost('subject');
$body = $params->fromPost('body');
$phone = $params->fromPost('phone');
$message = null;
$request = $this->getRequest();
//Xử lý khi dữ liệu gửi đến là Post
if ($request->isPost()) {
$email = $params->fromPost('email');
$subject = $params->fromPost('subject');
$body = $params->fromPost('body');
$phone = $params->fromPost('phone');
//Dữ liệu hợp lệ
if (($email != null) && ($body != null))
{
$data = [
'email' => $email,
'subject' => $subject,
'body' => $body,
'phone' => $phone,
];
//Code xử lý nhận dự liệu (vào database ..., gửi mail ...)
//...
//Thông báo - chuyển hướng sang trang khác
return $this->alertViewModel('Gửi thành công',
'Liên hệ của bạn đã gửi thành công '.
json_encode($data));
}
//Dũ liệu hợp lệ
$message = 'Bạn phải nhập email và nội dung liên hệ';
}
$view = new ViewModel(
[
'email' => $email,
'subject' => $subject,
'body' => $body,
'phone' => $phone,
'message' => $message
]
);
return $view;
}
//...
Tạo template contactone
Template này hiện thị form HTML, dữ liệu theo action contactone
module/Application/view/application/index/contactone.phtml
<h1>Liên hệ với chúng tôi <small>V.1</small></h1>
<p>Xin hãy nhập đầy đủ thông tin rồi bấm vào <span class="badge badge-danger">Gửi liên hệ</span></p>
<div class="col-md-6 mb-4">
<?if ($this->message != null):?>
<p class="alert alert-warning"><?=$this->message?></p>
<?endif;?>
<form class="p-4 bg-light" method="post" action="<?=$this->url('application', ['action'=>'contactone'])?>">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="emailHelp" placeholder="Nhập email" value="<?=$this->email?>">
<small id="emailHelp" class="form-text text-muted">Địa chỉ email của bạn sẽ được giữ riêng tư</small>
</div>
<div class="form-group">
<label for="subject">Tiêu đề liên hệ</label>
<input type="text" class="form-control" id="subject" name="subject" placeholder="Lĩnh vực quan tâm" value="<?=$this->subject?>">
</div>
<div class="form-group">
<label for="body">Nội dung</label>
<textarea class="form-control" id="body" placeholder="nhập nội dung" name="body"><?=$this->body?></textarea>
</div>
<div class="form-group">
<label for="phone">Tel</label>
<input type="tel" class="form-control" id="phone" placeholder="Số điện thoại" name="phone" value="<?=$this->phone?>">
</div>
<button type="submit" name="submit" class="btn btn-warning">Gửi liên hệ</button>
</form>
</div>
Giờ bạn đã có thể chạy thử để kiểm tra. Bạn lưu ý trong action trên có đoạn mã:
//Thông báo - chuyển hướng sang trang khác
return $this->alertViewModel('Gửi thành công',
'Liên hệ của bạn đã gửi thành công '.
json_encode($data));
Đây là đoạn mã trả về một ViewModel, khi dữ liệu người dùng đã phù hợp, đã được lưu trữ. Mục đích là hiện thị một thông báo là người dùng đã gửi thành công,
và sau 10s thì chuyển hướng về trang chủ. Để có phương thức alertViewModel cập nhật IndexController như sau:
module/Application/src/Controller/IndexController.php
//...
public function alertViewModel($title, $message) {
$urlhome = $this->url()->fromRoute('home');
//Thiết lập HTTP Response - chuyển hướng về trang chủ sau 10s
$headers = $this->getResponse()->getHeaders();
$headers->addHeaderLine("refresh:10;url=$urlhome");
$view = new ViewModel([
'title' => $title,
'message' => $message
]);
$view->setTemplate('application/index/alert');
return $view;
}
//...
Do ViewModel trả về trên sử dụng template application/index/alert, ta xây dựng template đó như sau:
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3"><?=$this->title?></h1>
<p class="lead"><?=$this->message?></p>
</div>
</div>
Chạy thử: http://localhost/zendform/application/contactone
Điền thông tin đứng, bấm vào gửi thì kết quả:
Nếu lỗi sẽ hiện ra thông báo, ví dụ bạn chạy thử khi submit mà không điền thông tin nội dung.
Trên đây là cách mà bạn tạo ra một Form HTML và ứng dụng thu thập dữ liệu, ví dụ không sử dụng đến Zend/Form, bạn thực hành để nhắc lại và làm quen với việc submit dữ liệu. Trong bài tiếp theo ta sẽ xây dựng cùng chức năng nhưng bắt đầu sử dụng Zend/Form
