Hướng dẫn Banner ngẫu nhiên - tự động hẹn giờ chuyển đổi giữa các banner

[PVS]

Banner ngẫu nhiên - tự động hẹn giờ chuyển đổi giữa các banner

Đây là cách đơn giản để thiết lập trong template Xenforo một tập hợp các banner bằng cách tự động hẹn giờ chuyển đổi giữa chúng. Nghe có vẻ phức tạp nhưng nó lại đơn giản.

Chú ý: đây không phải là hướng dẫn từng bước hoàn chỉnh! Bài viết sẽ chỉ cung cấp các mẹo để tìm giải pháp của riêng bạn dựa trên hướng dẫn này.

Tất cả những gì bạn cần là một nhóm từ 3 banner trở lên (tối đa 10 banner), được lưu dưới dạng *.gif, *.jpg hoặc *.png trong một thư mục được xác định trên host của bạn. Thư mục phải được truy cập công khai và bạn phải đặt tất cả các banner của bạn vào đó.

Có 2 tệp PHP đơn giản là b_timer.php và b_select.php nên được đặt ở thư mục gốc như thế này:

• httpdocs/b_timer.php
• httpdocs/b_select.php

b_select.php xem xét một cơ sở dữ liệu mà chúng ta tạo sau này và lấy các infos từ đó. Nó cũng hiển thị số lượng banner bạn thiết lập trong b_select.php.
b_timer.php sử dụng một chút jquery để tự động tải lại b_select.php trong khoảng thời gian bạn có thể thiết lập.

Bài viết sử dụng công cụ AppGini để tạo một cơ sở dữ liệu đơn giản thực sự với các cột được đánh dấu màu đỏ:

• ID - chỉ cột ID
• Banner - chỉ chứa đường dẫn đến hình ảnh banner
• Link - chứa liên kết đến từng banner khi nhấp vào
• Text - chứa văn bản thay thế cho mỗi banner

Tất cả những thứ khác không cần thiết để làm việc, chúng là những cột riêng lẻ. Tất cả những gì bạn cần là 4 cột được đánh dấu màu đỏ như ảnh ở trên. Bạn có thể thực hiện điều này với AppGini hoặc với PHPmyAdmin, Heidi-SQL,.. hoặc những gì bạn muốn để tạo một cơ sở dữ liệu đơn giản của riêng mình.

trong AppGini sẽ trông như thế này, khi bạn tạo một cơ sở dữ liệu riêng:

AppGini có sẵn trong phiên bản miễn phí và bằng nhiều ngôn ngữ. Nó cũng có một diễn đàn hỗ trợ.

AppGini là cách dễ dàng và nhanh chóng để tạo cơ sở dữ liệu và giao diện input đẹp như thế này:

Nơi có thể đơn giản và nhanh chóng lấy input để thêm các banner mới, thay đổi banner, xóa banner, ... đồng thời lưu và xóa banner trong thư mục nơi b_select.php lấy chúng ra.

Để xem cơ sở dữ liệu và các trường input, bạn phải đăng nhập vào giao diện cơ sở dữ liệu của mình.

Nếu cơ sở dữ liệu tồn tại và bạn đã nhập một hoặc nhiều banner vào thì bây giờ cả hai tệp php đều cần thiết.

Hãy xem b_select.php:

<?php
// Connect to the database you have made with AppGini or what ever you prefer:
$connection = mysqli_connect('localhost', 'USERNAME', 'PASSWORD', 'DATABASENAME');

// Select random rows from the database, limited to eg 3 banners/links,
// simply change the 3 to how many banners you wish to display:
$query = "SELECT * FROM DATABASENAME ORDER BY RAND() LIMIT 3";

// Run the above defined sql query in connected database:
$result = mysqli_query($connection, $query);

// For all the rows:
while ($row = mysqli_fetch_array($result))
{
// Display them to the screen:
echo "<a style=\"text-decoration: none; width: 340px; height: 60px;\" target=\"_blank\" rel=\"nofollow\" href=\"". $row['Link'] ."\">
<span title=\"Partner: ". $row['Text'] ."
Link: ". $row['Link'] ."\"><img src=./BnrMgr19/images/". $row['Banner'] ." border=0 alt=\"". $row['Text'] ."\"></span>
</a>" ;
}
echo "</br></br>"
?>

Nếu không hiểu, hãy xem các giải thích sau:

<?php
// Connect to the database you have made with AppGini or what ever you prefer:
$connection = mysqli_connect('localhost', 'USERNAME', 'PASSWORD', 'DATABASENAME');

Chỉ cần mở kết nối cơ sở dữ liệu đến cơ sở dữ liệu của bạn, bạn đã tạo với AppGini hoặc những gì bạn muốn.
Thay đổi USERNAME, PASSWORD và DATABASENAME thành tên riêng của bạn.

// Select random rows from the database, limited to eg 3 banners/links,
// simply change the 3 to how many banners you wish to display:
$query = "SELECT * FROM DATABASENAME ORDER BY RAND() LIMIT 3";

Ở đây, xác định một truy vấn sql, có nghĩa là ... chọn từ cơ sở dữ liệu (Thay đổi DATABASENAME thành tên cơ sở dữ liệu của bạn) 3 banner (bạn có thể thay đổi 3 thành 1, 2 hoặc tùy ý) và đặt chúng ngẫu nhiên. Vì vậy, ví dụ 10 banner sẽ được trộn lẫn và sau đó phân loại 3 banner đầu tiên để hiển thị chúng sau này trên màn hình. Bằng cách này, mỗi lần chạy b_select.php sẽ có một bộ 3 banner mới trong số các banner đã nhập.

// For all the rows:
while ($row = mysqli_fetch_array($result))
{
// Display them to the screen:
echo "<a style=\"text-decoration: none; width: 340px; height: 60px;\" target=\"_blank\" rel=\"nofollow\" href=\"". $row['Link'] ."\">
<span title=\"Partner: ". $row['Text'] ."
\"><img src=./BnrMgr19/images/". $row['Banner'] ." border=0 alt=\"". $row['Text'] ."\"></span>
</a>" ;
}
echo "</br></br>"
?>

• Đây là phần hiển thị các banner được chọn trên màn hình. Bạn có thể thấy, mình sử dụng kích thước banner 340x60px. Bạn có thể thay đổi giá trị đó nhưng nó phải là kích thước của tất cả các banner của bạn.
• target="blank" và "rel="nofollow" (mức độ liên quan đến SEO)
• href=\"". $row['Link'] ."\" lấy liên kết banner từ cột cơ sở dữ liệu Link và sử dụng chúng làm liên kết banner có thể nhấp vào
• title=\"Partner: ". $row['Text'] ." lấy tiêu đề banner từ cột cơ sở dữ liệu Text
• <img src=./BnrMgr19/images/". $row['Banner'] ." border=0 alt=\"". $row['Text'] ."\"> lấy đường dẫn hình ảnh banner từ cột cơ sở dữ liệu và thêm văn bản thay thế từ cột Text.

Đó là tất cả nhiệm vụ mà b_select làm.

Bây giờ chúng ta hãy xem b_timer.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
      $("#responsecontainer").load("b_select.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('b_select.php?randval='+ Math.random());
   }, 15000);
   $.ajaxSetup({ cache: false });
});
</script>
</head>

<body margin:10px 0;>
<center>
<div id="responsecontainer">
</div>
</center>
</body>

Nó chứa một tập lệnh java nhỏ tải b_select.php cứ sau 15 giây (15000 ms) mới. Bạn có thể thay đổi 15000 thành các giá trị khác mà bạn muốn.

Nhưng đó không phải là tất cả - đó là code, mà mình đã đặt trong một tempalte Xenforo:
(Mình sử dụng ad_below_top_breadcrumb trong trường hợp này)

<xen:hook name="ad_below_top_breadcrumb" />
<xen:if is="{$contentTemplate} == 'EWRporta_Portal' OR {$contentTemplate} == 'forum_list'">
<script type="text/javascript">
  var framefenster = document.getElementsByTagName("iFrame");
  var auto_resize_timer = window.setInterval("autoresize_frames()", 100);
  function autoresize_frames() {
    for (var i = 0; i < framefenster.length; ++i) {
        if(framefenster[i].contentWindow.document.body){
          var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight;
          if(document.all && !window.opera) {
            framefenster_size = framefenster[i].contentWindow.document.body.scrollHeight;
          }
          framefenster[i].style.height = framefenster_size + 'px';
        }
    }
  }
</script>
<iframe src="//YOURDOMAIN.COM/b_timer.php" class="iframe" width="100%" frameborder="0" scrolling="no"></iframe>
</xen:if>

Đầu tiên - thay đổi YourDOMAIN.COM thành tên miền của bạn. Tất cả những gì code đó làm là tạo một iframe và tải b_timer.php trong đó.
Điều này sẽ hiển thị các banner của bạn và responsive. Vì vậy, nếu bạn hiển thị 3 banner, chúng có thể tự động được hiển thị trong một dòng hoặc nhiều dòng lần lượt:

​

Đó là tất cả. Code không được tối ưu hóa nhưng nó vẫn hoạt động tốt. Nó hoạt động với php 5.5.x và các phiên bản mới hơn lên đến php 7.3.x và cũng có thể sử dụng nhiều phần của nó cho Xenforo 2.x với một chút công việc tại template Xenforo ở trên.

Chúc các bạn thành công.

Nguồn: xenforo.com​