轶哥

📚 Having fun with AI Agent. Always learning.

创建访客统计徽章
  •   更新:2023-03-01 19:41:11
  •   首发:2023-02-27 22:30:00
  •   源代码
  •   778

访客徽章通常用于Github个人主页或者开源项目Markdown中统计访客数量。

visitors

借助于ChatGPT强大的语义理解能力,编写PHP单文件实现完整badge功能非常容易。甚至就是一句话的事。

chatgptphp.jpg

如果对样式不满意还可以让ChatGPT做出修改:

chatgptphpsvg.png

最后再让ChatGPT生成这篇文章:

在网站开发过程中,为了统计网站的流量和访客数量,通常需要添加一些访客统计的功能。为了让网站的访客数量可以更直观地展现出来,我们可以创建一个访客统计徽章,用于在网站页面上显示当前的访客数量。

在本文中,我们将演示如何使用PHP和MySQL创建一个访客统计徽章。我们将使用一个MySQL数据库来存储访客数量,并使用PHP来生成SVG格式的徽章,用于在网站上显示访客数量。

首先,我们需要创建一个MySQL数据库来存储访客数量。我们可以使用以下代码创建一个名为 badge 的数据库,并在其中创建一个名为 visitor_count 的数据表:

<?
// 数据库连接信息
$host = "xxxxx";
$username = "xxxxx";
$password = "xxxxx";
$database = "xxxxx";

// 创建数据库连接
$conn = new mysqli($host, $username, $password);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
}

// 创建数据库
$sql = "CREATE DATABASE IF NOT EXISTS $database CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci";
if ($conn->query($sql) === FALSE) {
    die("创建数据库失败: " . $conn->error);
}

// 选择数据库
$conn->select_db($database);

// 创建数据表
$sql = "CREATE TABLE IF NOT EXISTS visitor_count (
        id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
        count INT(6) NOT NULL
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4";
if ($conn->query($sql) === FALSE) {
    die("创建数据表失败: " . $conn->error);
}

// 关闭数据库连接
$conn->close();

在这个代码中,我们首先创建一个名为 badge 的数据库,并在其中创建一个名为 visitor_count 的数据表。数据表包含两个字段,一个自增的 id 字段和一个 count 字段,用于存储访客数量。我们还设置了数据表的字符集为 utf8mb4,以支持存储各种语言的字符。

接下来,我们需要编写PHP代码来更新和显示访客数量徽章。以下是一个示例代码:

// 更新访问计数
$sql = "UPDATE visitor_count SET count = count + 1 WHERE id = 1";
if ($conn->query($sql) === FALSE) {
    die("更新访问计数失败: " . $conn->error);
}

// 获取访问计数
$sql = "SELECT count FROM visitor_count WHERE id = 1";
$result = $conn->query($sql);
$count = $result->fetch_assoc()["count"];

// 生成SVG徽章
header("Content-type: image/svg+xml");
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");
echo <<<EOT
<svg xmlns="http://www.w3.org/2000/svg" width="130" height="20">
<linearGradient id="b" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<mask id="a">
<rect width="130" height="20" rx="3" fill="#fff"/>
</mask>
<g mask="url(#a)">
<path fill="#555" d="M0 0h74v20H0z"/>
<path fill="#4c1" d="M74 0h56v20H74z"/>
<path fill="url(#b)" d="M0 0h130v20H0z"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="37" y="15" fill="#010101" fill-opacity=".3">Visitors</text>
<text x="37" y="14">Visitors</text>
<text x="105" y="15" fill="#010101" fill-opacity=".3">$count</text>
<text x="105" y="14">$count</text>
</g>
</svg>
EOT;

// 关闭数据库连接
$conn->close();

这段代码会更新数据库中的访客计数,然后生成一个SVG格式的徽章,用于在网站页面上显示当前的访客数量。徽章的样式可以根据需要进行修改。

最后,我们需要在网站的页面中引用这个PHP文件,以显示访客数量徽章。例如,在 HTML 文件中,可以添加以下代码:

<img src="visitor_count.php" alt="Visitors" />

在这个代码中,我们使用一个 img 标签来引用 visitor_count.php 文件,该文件会生成访客数量徽章。当网页被访问时,将会显示当前的访客数量。

badge.jpg

总之,通过上述步骤,我们可以轻松地创建一个访客统计徽章,并将其添加到我们的网站页面中,以展示网站的流量和访客数量。

人工补充: 在Markdown中这样统计:

![visitors](https://app.yizcore.xyz/badge.php?page_id=yi-ge)

完整代码:

<?php
// 数据库连接信息
$host = "";
$username = "";
$password = "";
$database = "";

// 创建数据库连接
$conn = new mysqli($host, $username, $password, $database);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
}

// 创建数据表
$sql = "CREATE TABLE IF NOT EXISTS visitor_count (
        id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
        count INT(6) NOT NULL
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4";
if ($conn->query($sql) === FALSE) {
    die("创建数据表失败: " . $conn->error);
}

// 更新访问计数
$sql = "UPDATE visitor_count SET count = count + 1 WHERE id = 1";
if ($conn->query($sql) === FALSE) {
    die("更新访问计数失败: " . $conn->error);
}

// 获取访问计数
$sql = "SELECT count FROM visitor_count WHERE id = 1";
$result = $conn->query($sql);
$count = $result->fetch_assoc()["count"];

// 生成SVG徽章
header("Content-type: image/svg+xml");
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");
echo <<<EOT
<svg xmlns="http://www.w3.org/2000/svg" width="130" height="20">
    <linearGradient id="b" x2="0" y2="100%">
        <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
        <stop offset="1" stop-opacity=".1"/>
    </linearGradient>
    <mask id="a">
        <rect width="130" height="20" rx="3" fill="#fff"/>
    </mask>
    <g mask="url(#a)">
        <path fill="#555" d="M0 0h74v20H0z"/>
        <path fill="#4c1" d="M74 0h56v20H74z"/>
        <path fill="url(#b)" d="M0 0h130v20H0z"/>
    </g>
    <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
        <text x="37" y="15" fill="#010101" fill-opacity=".3">Visitors</text>
        <text x="37" y="14">Visitors</text>
        <text x="105" y="15" fill="#010101" fill-opacity=".3">$count</text>
        <text x="105" y="14">$count</text>
    </g>
</svg>
EOT;

// 关闭数据库连接
$conn->close();
?>
打赏
交流区

暂无内容

尚未登陆
发布
  上一篇 (【视频】ChatGPT完整实现定时请求小系统)
下一篇 (ChatGPT已具备编写完整程序的能力)  

评论回复提醒