jekyll
Giám sát
Chia Sẻ Nào AE!
11:18, 08/12/2022
Đầu tiên, để shoutbox có thể hoạt động thì cần phải có nơi lưu dữ liệu phải ko nhỉ, chúng ta cùng tạo 1 bảng cho nó nhé. Ở đây, mình ko cần cầu kỳ gì cả, chỉ cần 1 số trường như sau:
id => INTEGER
name => TEXT
content => TEXT
time => INTEGER
Mình sẽ tạo bảng `shoutbox_home` với hàm create_table_with_column, như sau:
Vì khi hàm create_table_with_column được gọi ra thì trường id đã được tạo, nên ở đoạn code phía trên, mình đã ko thêm trường id vào json.
Sau khi tạo bảng xong, mình sẽ import dữ liệu vào bảng đó ha. Vậy mình sẽ cần phải có 1 cái form cho cái shoutbox này. Mình viết 1 đoạn html đơn giản như sau:
Hmm,..nhưng như vậy, mình mới giải quyết vấn đề import dữ liệu được 1 nửa, vẫn chưa có backend tiến hành lưu dữ liệu cho nó. Do đó mình sẽ thực hiện nó với Twig ha. Code xử lý, mình sẽ dùng một số biến và hàm sau: SERVER_REQUEST_METHOD, form_post(), date(), insert_rows_table()
Mình có thể sử dụng một số biến khác để thay cho hàm form_post(), như: api.r.post, POST.
Cụ thể, code phần import như sau:
Vậy là mình đã xử lý xong phần import rồi ha. Sau khi nhập dữ liệu xong, mình muốn xuất nó ra và đặt thành 1 danh sách chứa các nội dung đã chat, mình sẽ dùng hàm for và select_table_data().
Trước hết, mình cần biết mảng dữ liệu cần xuất, code như sau:
Hmm, mình có thể sắp xếp dữ liệu theo trường time cũng được, nhưng sẽ có nội dung được import với UnixTime giống nhau, nên mình đã chọn lọc theo trường id, với sự sắp xếp giảm dần. Vậy, mình sẽ có danh sách với vòng lặp for như sau:
Tất nhiên, mình sẽ phải làm đẹp cho chiếc shoutbox này 1 chút để em nó lung linh hơn.
[TOP]
Tạo shoutbox với vài bước đơn giản
Bài viết này, mình sẽ hướng dẫn cụ thể cho các bạn các bước để có được 1 shoutbox đơn giản theo ý nha.Đầu tiên, để shoutbox có thể hoạt động thì cần phải có nơi lưu dữ liệu phải ko nhỉ, chúng ta cùng tạo 1 bảng cho nó nhé. Ở đây, mình ko cần cầu kỳ gì cả, chỉ cần 1 số trường như sau:
id => INTEGER
name => TEXT
content => TEXT
time => INTEGER
Mình sẽ tạo bảng `shoutbox_home` với hàm create_table_with_column, như sau:
TWIG
{% do create_table_with_column('shoutbox_home', {'name':'TEXT', 'content':'TEXT', 'time':'INTEGER'}) %}
Vì khi hàm create_table_with_column được gọi ra thì trường id đã được tạo, nên ở đoạn code phía trên, mình đã ko thêm trường id vào json.
Sau khi tạo bảng xong, mình sẽ import dữ liệu vào bảng đó ha. Vậy mình sẽ cần phải có 1 cái form cho cái shoutbox này. Mình viết 1 đoạn html đơn giản như sau:
HTML
<div class="title">Shoutbox</div>
<div class="form-shoutbox">
<form method="post">
<p>Tên của bạn:</p>
<input type="text" name="input_name"/>
<p>Nội dung:</p>
<textarea name="input_content"></textarea>
<p><button type="submit">Chat</button></p>
</form>
</div>
Hmm,..nhưng như vậy, mình mới giải quyết vấn đề import dữ liệu được 1 nửa, vẫn chưa có backend tiến hành lưu dữ liệu cho nó. Do đó mình sẽ thực hiện nó với Twig ha. Code xử lý, mình sẽ dùng một số biến và hàm sau: SERVER_REQUEST_METHOD, form_post(), date(), insert_rows_table()
Mình có thể sử dụng một số biến khác để thay cho hàm form_post(), như: api.r.post, POST.
Cụ thể, code phần import như sau:
TWIG
{% if SERVER_REQUEST_METHOD|lower == 'post' %}
{% set name, content, time = form_post('input_name'), form_post('input_content'), 'now'|date('U') %}
{% if name|length in 3..15 and content|length in 5..200 %}
{% set row = {'name':name,'content':content,'time':time} %}
{% do insert_rows_table('shoutbox_home', row) %}
{{redirect(SERVER_REQUEST_URI)}}
{% else %}
<div class="error">Lỗi. Độ dài tên hoặc nội dung không hợp lệ!</div>
{% endif %}
{% endif %}
Vậy là mình đã xử lý xong phần import rồi ha. Sau khi nhập dữ liệu xong, mình muốn xuất nó ra và đặt thành 1 danh sách chứa các nội dung đã chat, mình sẽ dùng hàm for và select_table_data().
Trước hết, mình cần biết mảng dữ liệu cần xuất, code như sau:
TWIG
{% set data = select_table_data('shoutbox_home', 'id', 'desc') %}
Hmm, mình có thể sắp xếp dữ liệu theo trường time cũng được, nhưng sẽ có nội dung được import với UnixTime giống nhau, nên mình đã chọn lọc theo trường id, với sự sắp xếp giảm dần. Vậy, mình sẽ có danh sách với vòng lặp for như sau:
TWIG
{% set data = select_table_data('shoutbox_home', 'id', 'desc') %}
{% set total = count(list) %}
<div id="list">
{% for chat in data %}
<div class="content-shoutbox">
<span style="font-weight:700">{{chat.name}}</span>{{': '~chat.content|raw~' '}}<span style="color:#444">({{chat.time|date('H:i, d/m/Y','Asia/Ho_Chi_Minh')}})</span>
</div>
{% endfor %}
</div>
Tất nhiên, mình sẽ phải làm đẹp cho chiếc shoutbox này 1 chút để em nó lung linh hơn.
CSS
@import "https://fonts.googleapis.com/css?family=Patrick+Hand&subset=latin,vietnamese";
*{padding:0;margin:0}
body{color:#000;margin:0;padding:0;word-wrap:break-word;font-family:'Patrick Hand',cursive}
a{text-decoration:none;color:#06F;font-style:normal}a:hover{text-decoration:underline;color:red;font-style:normal}
input,td{color:red;margin:0;padding:0;word-wrap:break-word;font-family:'Patrick Hand',cursive}input,textarea{border-width:1px;border-style:solid;font-family:'Patrick Hand',cursive;box-sizing:border-box}input{font:normal 13px 'Comic Sans MS',"Trebuchet Ms",arial,sans-serif;color:#000;vertical-align:middle;padding:5px;border:1px solid #bbb;border-radius:3px;-webkit-border-radius:3px;margin:2px}
img{max-width:100%;height:auto}
.title{background-color:#c9f;color:#FFF;text-shadow:0 0 .9em blue,0 2pt .9em blue;text-align:left;border-width:1px;border-style:solid;padding-top:2px;font-weight:700;border-color:#9C9}
.form-shoutbox,.content-shoutbox,.content-shoutbox-center{border:1px solid #ccc;border-top:0;background:#fff;padding:4px 5px;margin:0}.content-shoutbox-center{text-align:center}.form-shoutbox a,.content-shoutbox a{color:#000}
.error{background:#fdd;border:solid #ccc;padding:4px;border-width:0 1px 1px}