Other Chia sẻ kinh nghiệm làm forum XenForo của FIFAVN

up

 

OK, tiếp tục phần hướng dẫn style cho Google Form nhé.

Lúc đầu mình định viết cặn kẽ để mọi người có thể cùng hiểu, nhưng cách này nó tốn thời gian quá làm cho mình lần lữa mãi vì lười biếng quá. Nên bây giờ tạm thời mình sẽ đi theo cách mì ăn liền, dọn sẵn, do đó sẽ có một số vấn đề phát sinh, chúng ta cùng trao đổi sau nhé. Bạn nào chưa rành thì cứ làm theo ví dụ như mình cho đơn giản để bắt đầu.

Tạo trước Google Form

Cái này chắc đơn giản nên mình không đi sâu, bạn chỉ cần có sẵn cho mình một tài khoản Google hoặc đăng ký mới nếu chưa có

Bước 1
Bạn vào https://drive.google.com > Create > Form > Choose title and theme > Cancel để bỏ qua bước chọn theme, tên form bạn có thể đặt lại bất kỳ lúc nào.

Bạn tạo form đơn giản nhất như ví dụ hình dưới đây:



Bước 2
Bạn click vào nút "View live form" > Trình duyệt sẽ chuyển bạn đến trang live của form với địa chỉ có dạng:
https://docs.google.com/a/fifavn.org/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/edit
Trong đó "1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w" chính là Form Key, bạn cần quan tâm đến vấn đề này ở phần sau.

Bước 3
Bạn dùng "Inspect Element" (kiểm tra phần tử) ô nhập liệu để xem thông tin của nó.



Bạn lưu ý phần gạch đỏ, đó là 2 thông tin mà chúng ta cần.

Tự tạo form riêng để link với Google

Form này chúng ta sẽ viết bằng HTML và CSS nó để trang trí. Những để nhấn mạnh việc hiểu nó làm việc với Google như thế nào, mình hướng dẫn bạn tạo một form dạng đơn giản nhất, loại bỏ các chi tiết chưa cần thiết ở bước này.

Với việc viết code HTML có khá nhiều dịch vụ Online, mình giới thiệu bạn dịch vụ ưa thích mình hay dùng là http://cssdeck.com/ hoặc http://jsfiddle.net/

Bạn bắt đầu viết code form như sau (id="fifavn-form" bạn có thể thay thành gì tùy bạn)

Mã:

<form action="https://docs.google.com/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/formResponse" method="post" target="hidden_iframe" id="fifavn-form" onsubmit="submitted=true;">
</form>

Trong đó "1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w" chính là Form key bạn đã có ở trên, và nhờ có đường dẫn này mà mọi kết quả nhập vào sẽ được gửi đến Google.

Tiếp theo là viết câu hỏi "Bạn tên gì?" và ô cho người dùng nhập dữ liệu <input>. Bạn có

Mã:

<form action="https://docs.google.com/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/formResponse" method="post" target="hidden_iframe" id="fifavn-form" onsubmit="submitted=true;">
Bạn tên gì?
<input type="text" name="entry.168728628" id="entry_168728628">
</form>

Bạn chú ý ô nhập liệu <input> phải có name="entry.1687286289" id="entry_1687286289" khớp với form bạn tạo sẵn để Google nhận diện đúng ô nhập dữ liệu.

Cuối cùng là thêm nút gửi dữ liệu đi
<input type="submit" name="submit" value="Gửi">
Bạn có:

Mã:

<form action="https://docs.google.com/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/formResponse" method="post" target="hidden_iframe" id="fifavn-form" onsubmit="submitted=true;">
Bạn tên gì?
<input type="text" name="entry.168728628" id="entry_168728628">
<input type="submit" name="submit" value="Gửi">
</form>

OK, bạn có thể copy đoạn mã này vào notepad, lưu thành 1 file html và thử chạy nó với trình duyệt. Nếu kết quả bạn nhập vào và gửi đi đến được form gốc trên Google thì bạn đã làm đúng.

Sẽ có 2 vấn đề phát sinh kế tiếp, đó là:

1. Nếu người dùng chưa điền kết quả đã nhấn nút gửi đi thì phải làm sao để kiểm tra.
2. Có cách nào thay đổi trang xác nhận kết quả mặc định của Google không?

Bài đã dài, mình xin tách 2 vấn đề này sang phần sau nhé. Hy vọng là các bạn hiểu được phần nào cơ chế hoạt động của việc link với Google Form.

 

Phải công nhận 1 điều rằng, mình đọc gần như tất cả các bài có trên vxf.vn nhưng đến topic này mới thấy 1 người như bạn @Cyentruk là hỗ trợ anh em nhiệt tình, chính xác và tốt nhất! Tặng bạn 100 like cho topic này!

 

quá hay, chờ phần tiếp theo

 

Chúng ta tiếp tục xử lý 2 vấn đề ở phần trước nhé:

Bước này, chúng ta sẽ thêm thắt chi tiết cho Form đã xây dựng ở trên theo "chuẩn" của 1 file HTML thông thường nhé, tức có các thẻ <html> <head> và <body>

Code của bạn có thể tương tự như dưới đây:

Mã:

<html>
<head>
</head>
<body>
    <form action="https://docs.google.com/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/formResponse" method="post" target="hidden_iframe" id="fifavn-form" onsubmit="submitted=true;">
        Bạn tên gì?
        <input type="text" name="entry.168728628" id="entry_168728628">
        <input type="submit" name="submit" value="Gửi">
    </form>
</body>
</html>

Nếu người dùng chưa điền kết quả đã nhấn nút gửi đi thì phải làm sao để kiểm tra?
Chúng ta sẽ dùng 1 đoạn script, nếu ô nào bắt buộc phải nhập dữ liệu thì đoạn script sẽ phát hiện và báo lỗi.

Đầu tiên, bạn cần download file js đính kèm, nhớ giải nén rồi upload lên host nhé, sau đó dán đoạn mã dưới đây vào thẻ <head>, với đường dẫn "http://fifavn.org/forum/js/jquery/jquery.validate.js" là đường dẫn nơi bạn lưu file jquery.validate.js trên host của bạn, và "#fifavn-form" chính là id của form mà ở phần trước mình nói bạn có quyền tùy ý thay đổi.

Mã:

<script src="http://fifavn.org/forum/js/jquery/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#fifavn-form").validate({
                    meta: "validate"
                });
            });
        </script>

Lúc này bạn có:

Mã:

<html>
<head>
<script src="http://fifavn.org/forum/js/jquery/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#fifavn-form").validate({
                    meta: "validate"
                });
            });
        </script>
</head>
<body>
    <form action="https://docs.google.com/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/formResponse" method="post" target="hidden_iframe" id="fifavn-form" onsubmit="submitted=true;">
        Bạn tên gì?
        <input type="text" name="entry.168728628" id="entry_168728628">
        <input type="submit" name="submit" value="Gửi">
    </form>
</body>
</html>

Việc nhập dữ liệu form có 2 kiểu: 1 là dạng không bắt buộc nhập dữ liệu, và 2 bắt buộc. Để đoạn script trên phân biệt được đâu là ô bắt buộc và không bắt buộc, bạn chỉ việc thêm vào ô <input> bắt buộc nhập dữ liệu class="required". Ta có:
<input type="text" name="entry.168728628" id="entry_168728628" class="required">

Tại sao lại là class="required" mà không phải tên khác? Bởi vì nếu bạn chọn tên khác thì file js ở trên sẽ không hiểu được.

Sâu xa thế nào thì những pro rành viết script mới hiểu được, mình chỉ là tay ngang, mình hiểu đến đâu thì mình nói lại thế theo kiểu mỳ ăn liền nhé, bạn thông cảm.

Lúc này code sẽ là:

Mã:

<html>
<head>
<script src="http://fifavn.org/forum/js/jquery/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#fifavn-form").validate({
                    meta: "validate"
                });
            });
        </script>
</head>
<body>
    <form action="https://docs.google.com/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/formResponse" method="post" target="hidden_iframe" id="fifavn-form" onsubmit="submitted=true;">
        Bạn tên gì?
       <input type="text" name="entry.168728628" id="entry_168728628" class="required">
        <input type="submit" name="submit" value="Gửi">
    </form>
</body>
</html>

Như vậy đến đây bạn đã có 1 form tự viết được link với Google Form và có thể báo lỗi nhập liệu rồi. Phần tiếp theo mình sẽ hướng dẫn bạn tự làm trang xác nhận đã nhận form thay cho trang mặc định của Google nhé!

 

Hôm nay mình xin chia sẻ cách chỉnh sửa 1 chút xíu ở code spoiler mặc định của Xenforo.

Bình thường nếu bạn chèn thẻ spoiler có tiêu đề thì sẽ có chữ "spoiler" xuất hiện trước tiêu đề và không phải ai cũng thích điều này. Bạn xem ví dụ bên dưới:

Spoiler: Không phải ai cũng thích chữ "spoiler" đứng trước tiêu đề như thế này

Đây là ví dụ spoiler có tiêu đề

Spoiler

Đây là ví dụ spoiler không có tiêu đề

Đã có 1 add on cho việc này tuy nhiên việc cài addon thêm là không cần thiết, bạn chỉ cần thực hiện thay đổi nhỏ trong Template "bb_code_tag_spoiler" là sẽ được như ý.

Mình đã sửa:

Mã:

<span>{xen:phrase spoiler}{xen:if $titleHtml, ': {xen:raw $titleHtml}'}</span>

Thành:

Mã:

<span>{xen:if $titleHtml, '{xen:raw $titleHtml}','{xen:phrase spoiler}'}</span>

Bạn so sánh sẽ thấy mình chỉ cần đảo vị trí với ý nghĩa "nếu có tiêu đề thì bỏ chữ spoiler đi, còn nếu không thì để lại chữ spoiler"

Bạn hãy copy đoạn Code dưới đây và thay thế toàn bộ code gốc nhé:

Mã:

<xen:require css="bb_code.css" />

<xen:comment><!-- content is escaped via parser --></xen:comment>
<div class="ToggleTriggerAnchor bbCodeSpoilerContainer">
    <button class="button bbCodeSpoilerButton ToggleTrigger Tooltip JsOnly"
        title="{xen:phrase click_to_reveal_spoiler}"
        data-target="> .SpoilerTarget"><span>{xen:if $titleHtml, '{xen:raw $titleHtml}','{xen:phrase spoiler}'}</span></button>
    <div class="SpoilerTarget bbCodeSpoilerText">{xen:raw $content}</div>
</div>

 

Tiếp cái form đi @Cyentruk

 

Ờ quên, kaka.

Thay đổi trang xác nhận mặc định của Google
- Trước tiên bạn cần tạo một trang mới, bạn vào Admin CP > Display Node Tree > tạo Page mới rồi viết code HTML tùy ý mình (bạn có thể tham khảo page xác nhận của mình đã tạo ở phía dưới)
Sau đó, bạn chỉ cần chèn thêm đoạn code này vào trước thẻ <form>

Mã:

<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='http://fifavn.org/forum/pages/confirmed';}"></iframe>

Với "http://fifavn.org/forum/pages/confirmed" là đường dẫn đến trang riêng của bạn.

Như vậy code đầy đủ là:

Mã:

<html>
<head>
<script src="http://fifavn.org/forum/js/jquery/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fifavn-form").validate({
meta: "validate"
});
});
</script>
</head>
<body>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted){window.location='http://fifavn.org/forum/pages/confirmed';}"></iframe>
<form action="https://docs.google.com/forms/d/1ECxM_q8Sum-vzT2TPV5sq7Tmj_WL_YHx15fv7myiJ1w/formResponse" method="post" target="hidden_iframe" id="fifavn-form" onsubmit="submitted=true;">
Bạn tên gì?
<input type="text" name="entry.168728628" id="entry_168728628" class="required">
<input type="submit" name="submit" value="Gửi">
</form>
</body>
</html>

- Bước cuối cùng, bạn vào Admin CP > Display Node Tree > tạo Page mới rồi dán toàn bộ đoạn code trên vào là xong!

Cuối cùng, mình xin tặng bạn một form hoàn chỉnh mình tự design đã css sẵn, bạn có thể tùy nghi sử dụng. Bên trong có một số "thủ thuật" nữa của form mà mình chưa có thời gian đề cập tới trong phần hướng dẫn này. Bạn click vào nút Edit code ở góc phải để xem code hoàn chỉnh nhé.
http://cssdeck.com/labs/full/mxjap2ei

Phần hướng dẫn tạo form link với Google của mình đến đây là kết thúc, bạn có bất cứ khúc mắc gì hãy thảo luận tại đây nhé, mình cùng trao đổi. :v

 

@Cyentruk vậy làm sao để nó show ra giống như bên fifavn, nghĩa là nó show ra cái danh sách đã nhập vào form đó

 

Bạn vào Google Form > chọn "Choose response destination" > Chọn "New Spreadsheet" > Nó sẽ đưa kết quả thu được vào một file Google Spreadsheet. (ban có thể xem file này bằng nút "View Response" trong form)

Sau đó bạn tự trang trí file này cho đệp đệp (kiểu excel) > Publish > Lấy code embed dán vào page trong xenforo là được.

 

@Cyentruk Bạn có thể hướng dẫn làm cái video mới ra ngoài như trang của bạn đc k ạ, mình có làm theo hướng dẫn http://xenforo.com/community/resour...enmedio-media-add-on-on-widgetframework.1125/ này nhưng k đc mình đang dùng bản [8wayRun.Com] XenMedio (Media) PRO 1.6.3

cảm ơn bạn

 

Anh @Cyentruk có thể hướng dẫn em làm khung thông báo trên khung replay site của anh được không ạ
DEMO đính kèm nha a
Em xin cám ơn a

 

@Chấm bạn vào Template: quick_reply thêm đoạn code sau vào đầu

Mã:

<div style="border:1px solid #D3D3D3;padding: 10px 0;line-height: 23px;">
<fieldset style="margin: -10px 0px; text-align: left; background-color: rgb(229, 229, 229);">
<div style="background: none repeat scroll 0% 0% rgb(23, 96, 147); color: rgb(237, 237, 237); font-size: 13px; padding: 4px; margin: -1px;">
<img border="0" src="styles/warning.png" style="padding-left: 5px; vertical-align: text-top;"> <font color="#ededed">Chú ý thật kỹ khi viết bài:</font>
</div>
<p style="margin: 5px 13px 0;font-size: 12px;padding-bottom:5px;">

✓ Khi muốn trả lời ai đó, bạn gõ @ cộng thêm nick diễn đàn của người đó phía sau @, giống như tag tên trên Facebook.</br>
✓ Yêu cầu khi bình luận, bạn phải type chữ rõ ràng, không viết tắt, gõ tiếng Việt đầy đủ dấu đàng hoàng.</br>
✓ Nên dùng font chữ mặc định của diễn đàn, không tô màu lòe loẹt hay dùng size chữ quá lớn khi bình luận.</br>
✓ Không bình luận chém gió ngoài lề quá nhiều, không spam hay chửi bậy. Tuyệt đối chấp hành nội quy của diễn đàn!
</p>
</fieldset>

</div>

 

Cách mình làm hơi khác @piggy001 đó @Chấm. Mình làm như sau.

Thay toàn bộ code có sẵn trong template "ad_thread_view_below_messages" bằng đoạn code dưới đây:

Mã:

<xen:hook name="ad_thread_view_below_messages" />
<xen:if hascontent="true">
<xen:contentcheck>
<xen:if is="{$canQuickReply}">
<div class="fifavn-notice-comment"> 
  <p>Bạn cần lưu ý trước khi gửi bình luận:</p>
  <li>Diễn đàn có tính năng tag, bạn chỉ cần gõ: <b>@nickname</b>, "nickname" sẽ nhận được thông báo như trên Facebook. </li>
  <li>Bình luận bằng tiếng Việt có dấu, lịch sự, thân thiện và không nên viết tắt qúa nhiều.</li>
  <li>Không <b>in đậm</b> hay IN HOA toàn bộ bài viết. Nên dùng font mặc định, không nên dùng chữ nhiều màu và kích cỡ quá lớn.</li>
</div>
</xen:if>
</xen:contentcheck>
</xen:if>

Sau đó vào EXTRA.css thêm code trang trí (bạn có thể tùy chỉnh tên class "fifavn-notice-comment" theo ý thích)

Mã:

.fifavn-notice-comment {
margin:0 10px 10px 150px;
padding:10px;
background-color:@secondaryLightest;
border:1px dashed @primaryMedium;
line-height:1.5em;
font-size:14px;
color:@dimmedTextColor
}
.fifavn-notice-comment p {
width:33%;
margin-bottom:10px;
padding:5px;
background:@primaryDark;
color:@textCtrlBackground
}
.fifavn-notice-comment p:before {
content:"\e84a"!important;
display:inline-block;
font-family:icomoon;
padding-right:5px;
color:@secondaryMedium
}
.fifavn-notice-comment li:before {
content:"\e88f"!important;
display:inline-block;
font-family:icomoon;
padding-right:2px
}

Phần code CSS trên có điểm đặc biệt về việc dùng font của icomoon để thể hiện các hình ảnh dưới dạng vector. Bạn có thể đọc bài viết này để xem hướng dẫn cách sử dụng bộ font icomoon của bác @Hung Vu: http://vxf.vn/threads/ung-dung-icon-font-trong-thiet-ke-style-cho-xenforo.7685/

 

Bác giúp em chút, em làm theo hướng dẫn thì nó không hiển thị đúng giống của bác @_@

 

Bạn có thể giúp mình làm cái subforum thanh ngang giống bạn ko???

 

Đầu tiên bạn vào
Admin CP > Appearance > Style Properties: Forum / Node List > Bỏ chọn Show sub-forums popup để hiển thị sub-forums

Sau đó bạn add đoạn code sau vào EXTRA.css để trang trí cho sub-forum

Mã:

.node .subForumList li {
width:45% !important;
margin:4px 0 4px 8px !important;
background:@primaryLightest;
padding:10px;
border-bottom:1px solid #ddd
}
.node .subForumList li a {
font-size:10pt;
color:#666
}
.node .subForumList li:hover {
background:@secondaryMedium
}
.node .subForumList li a:before {
content:"\e893"!important;
display:inline-block;
font-family:icomoon;
padding-right:2px
}

Bạn lưu ý:

• Mã màu bạn chọn tương ứng theo color palette của b
• Mình có dùng font icomoon, bạn có thể tải ở đây: https://icomoon.io/app/#/select

 

Bạn cho mình cái link và tài khoản thành viên test mình kiểm tra xem?

P/S: @Alucar đang online duyệt đăng cho mình chủ đề trong Box Tuyển dụng - Mua bán với. Mình đăng từ trưa đến h rồi.

 

Bạn giúp mình làm cái phần 'FIFAVN's Partners Game Station" giống site bạn với

 

Anh @Cyentruk cho em hỏi trang này dùng mod nào vậy?

Mã:

http://fifavn.org/forum/download/

EM thấy nhiều trang có mà em tìm hoài không thấy. Không biết nó là gì ạ!