精选文章 内容组织上的票数

内容组织上的票数

作者:cuke3186 时间: 2020-08-06 05:18:18
cuke3186 2020-08-06 05:18:18
内容组织上的票数1
内容组织上的票数2

Content organization on the number of votes Quite often, we have the task to display any content (from the database) on the screen, many may argue that this is quite simple and trite. This is true, but when we have additional social components, for example on how to sort records by the number of comments or by rating – many novice webmasters can fall into confusion. Today we will consider the question of how to display the records by the number of gained votes. To do this, we will prepare a simple voting system.

内容组织在票数上经常,我们有任务在屏幕上显示任何内容(来自数据库),很多人可能会认为这很简单且陈腐。 的确如此,但是当我们还有其他社交功能时,例如关于如何按评论数或评分对记录进行排序的方法,许多新手网站管理员可能会感到困惑。 今天,我们将考虑如何通过获得的票数显示记录的问题。 为此,我们将准备一个简单的投票系统。

现场演示

First of all, I recommend that you check our demo to understand how it works. Now, we are ready to start

首先,我建议您检查我们的演示以了解其工作原理。 现在,我们准备开始

步骤1. SQL (Step 1. SQL)

Firstly, let’s prepare a new table in the database with some dummy records. If you are not familiar with the procedure of execution SQL requests, you can search in google about how to do it. But, basically, you just need to open phpMyAdmin, select your database, then click the ‘SQL’ tab, and put here the whole SQL query, and then – execute the query.

首先,让我们在数据库中准备一个包含一些伪记录的新表。 如果您不熟悉执行SQL请求的过程,则可以在Google中搜索如何执行。 但是,基本上,您只需要打开phpMyAdmin,选择数据库,然后单击“ SQL”选项卡,然后将整个SQL查询放在此处,然后–执行查询。


CREATE TABLE IF NOT EXISTS `s395_posts` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) default '',
  `description` text NOT NULL,
  `when` int(11) NOT NULL default '0',
  `votecnt` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `s395_posts` (`title`, `description`, `when`, `votecnt`) VALUES
('First post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP(), 0),
('Second post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 1, 0),
('Third post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 2, 0),
('Fourth post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 3, 0),
('Fifth post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 4, 0);

CREATE TABLE IF NOT EXISTS `s395_posts` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) default '',
  `description` text NOT NULL,
  `when` int(11) NOT NULL default '0',
  `votecnt` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `s395_posts` (`title`, `description`, `when`, `votecnt`) VALUES
('First post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP(), 0),
('Second post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 1, 0),
('Third post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 2, 0),
('Fourth post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 3, 0),
('Fifth post', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum id convallis velit. Sed aliquet nibh vitae lorem tincidunt, quis consequat lectus blandit. Nullam augue mauris, placerat in ante non, fermentum ornare quam. Cras et fermentum purus. Ut elit mauris, blandit sit amet condimentum eu, ornare vel ligula.', UNIX_TIMESTAMP() + 4, 0);

The table with records (s395_posts) contains the following fields:

包含记录的表(s395_posts)包含以下字段:

  • id – unique post id

    id –唯一的帖子ID
  • title – post title

    标题–帖子标题
  • description – post description (text)

    说明-帖子说明(文本)
  • when – post date

    什么时候–发布日期
  • votecnt – votes count

    投票数–票数

步骤2. PHP (Step 2. PHP)

In order to work with the database, we will use an existing class that we developed in the past (classes/CMySQL.php). I want to remind that the database credentials are found in this file, so don’t forget to put details of your database into this file:

为了使用数据库,我们将使用过去开发的现有类(classes / CMySQL.php)。 我想提醒一下,在此文件中找到了数据库凭据,所以不要忘记将数据库的详细信息放入此文件中:

类/CMySQL.php (classes/CMySQL.php)


    // constructor
    function CMySQL() {
        $this->sDbName = '_YOUR_DB_NAME_';
        $this->sDbUser = '_YOUR_DB_USERNAME_';
        $this->sDbPass = '_YOUR_DB_USERPASS_';

    // constructor
    function CMySQL() {
        $this->sDbName = '_YOUR_DB_NAME_';
        $this->sDbUser = '_YOUR_DB_USERNAME_';
        $this->sDbPass = '_YOUR_DB_USERPASS_';

Now we will begin the creation of a new class where we arrange all the necessary functions for our demonstration:

现在,我们将开始创建一个新的类,在其中安排演示所需的所有必要功能:

  • getRecentPosts – this function returns the recent posts (with order by id)

    getRecentPosts –此函数返回最近的帖子(按ID排序)
  • getTopPosts – this function returns the recent posts (with order by count of votes)

    getTopPosts –此函数返回最近的帖子(按票数排序)
  • resultToHtml – this function converts an array of data into html output code

    resultToHtml –此函数将数据数组转换为html输出代码
  • addVote – this function accepts new votes

    addVote –此功能接受新的投票
  • getVisitorIP – this function returns a visitor IP address

    getVisitorIP –此函数返回访客IP地址

classes / CPosts.php (classes/CPosts.php)


getAll("SELECT * FROM `s395_posts` ORDER BY `id` DESC");
        return $this->resultToHtml($a);
    }
    // get top posts
    function getTopPosts() {
        $a = $GLOBALS['MySQL']->getAll("SELECT * FROM `s395_posts` ORDER BY `votecnt` DESC");
        return $this->resultToHtml($a);
    }
    // turn array of results into html output
    function resultToHtml($a) {
        $posts = '';
        foreach ($a as $i => $post) {
            $posts .= <<
    

{$post['title']}

{$post['description']} ( {$post['votecnt']} votes ) EOF; } return $posts; } // add vote function addVote($i) { if ($this->getVisitorIP()) { $GLOBALS['MySQL']->res("UPDATE `s395_posts` SET `votecnt` = `votecnt` + 1 WHERE `id` = '{$i}'"); } } // get visitor IP address function getVisitorIP() { $ip = "0.0.0.0"; if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) { $ip = $_SERVER['HTTP_X_FORWARDED_FOR']; } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) { $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']); $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0]; } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) { if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) { $ip = $_SERVER['REMOTE_ADDR']; } } return $ip; } } $GLOBALS['CPosts'] = new CPosts();

getAll("SELECT * FROM `s395_posts` ORDER BY `id` DESC");
        return $this->resultToHtml($a);
    }
    // get top posts
    function getTopPosts() {
        $a = $GLOBALS['MySQL']->getAll("SELECT * FROM `s395_posts` ORDER BY `votecnt` DESC");
        return $this->resultToHtml($a);
    }
    // turn array of results into html output
    function resultToHtml($a) {
        $posts = '';
        foreach ($a as $i => $post) {
            $posts .= <<
    

{$post['title']}

{$post['description']} ( {$post['votecnt']} votes ) EOF; } return $posts; } // add vote function addVote($i) { if ($this->getVisitorIP()) { $GLOBALS['MySQL']->res("UPDATE `s395_posts` SET `votecnt` = `votecnt` + 1 WHERE `id` = '{$i}'"); } } // get visitor IP address function getVisitorIP() { $ip = "0.0.0.0"; if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) { $ip = $_SERVER['HTTP_X_FORWARDED_FOR']; } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) { $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']); $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0]; } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) { if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) { $ip = $_SERVER['REMOTE_ADDR']; } } return $ip; } } $GLOBALS['CPosts'] = new CPosts();

Now, let’s create a basic index.php file which we’ll run

现在,让我们创建一个基本的index.php文件,它将运行

index.php (index.php)


addVote((int)$_POST['id']);
    echo 1; exit;
}
$recent_posts = $GLOBALS['CPosts']->getRecentPosts();
$top_posts = $GLOBALS['CPosts']->getTopPosts();
?>


    
        
        Content organization on the number of votes | Script Tutorials
        
        
    
    
        

Back to 'Content organization on the number of votes' tutorial

Top posts:

Recent posts:


addVote((int)$_POST['id']);
    echo 1; exit;
}
$recent_posts = $GLOBALS['CPosts']->getRecentPosts();
$top_posts = $GLOBALS['CPosts']->getTopPosts();
?>


    
        
        Content organization on the number of votes | Script Tutorials
        
        
    
    
        

Back to 'Content organization on the number of votes' tutorial

Top posts:

Recent posts:

This is quite basic file which generates our page, it also accepts the POST action (upvote) that is sent by clicking on buttons that are located inside of each post.

这是生成我们页面的非常基本的文件,它还接受通过单击每个帖子内部的按钮发送的POST操作(upvote)。

步骤3. CSS (Step 3. CSS)

After the creation of the main functionality – we can move on to the design styles of all the used elements, that’s what we’ve got:

创建主要功能后,我们可以继续使用所有已使用元素的设计样式,这就是我们得到的:

css / main.css (css/main.css)


*{margin:0;padding:0}
body {
    background-repeat:no-repeat;
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    min-height:600px;
}
.container {
    border:1px #111 solid;
    color:#000;
    margin:20px auto;
    overflow: hidden;
    padding:10px;
    position:relative;
    width:90%;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
.section {
    float: left;
    margin: 0 1%;
    width: 48%;
}
article {
    margin:1em 0;
}
button {
    background: #e3e3e3;
    border: 1px solid #bbb;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    color: #333;
    display: block;
    font-weight: bold;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    width: 150px;
}
button:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer;
}
button:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000;
}

*{margin:0;padding:0}
body {
    background-repeat:no-repeat;
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    min-height:600px;
}
.container {
    border:1px #111 solid;
    color:#000;
    margin:20px auto;
    overflow: hidden;
    padding:10px;
    position:relative;
    width:90%;
    border-radius:2px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
}
.section {
    float: left;
    margin: 0 1%;
    width: 48%;
}
article {
    margin:1em 0;
}
button {
    background: #e3e3e3;
    border: 1px solid #bbb;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    color: #333;
    display: block;
    font-weight: bold;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    width: 150px;
}
button:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    color: #222;
    cursor: pointer;
}
button:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    color: #000;
}

现场演示

[sociallocker]

[社交储物柜]

存档下载

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

That’s it for today. Our rating system with the output of records which are sorted by amount of votes is ready. Welcome back to our new articles.

今天就这样。 我们的评分系统已准备就绪,其中包含按票数排序的记录输出。 欢迎回到我们的新文章。

翻译自: https://www.script-tutorials.com/content-organization-on-the-number-of-votes/

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:带有Three.js的WebGL –第4课

下一篇:使用Jcrop(jQuery)在运行时裁剪图像

您可能感兴趣

  • 项目沟通管理和项目干系人管理

    在管理项目时,沟通是一个过程,是人们分享信息、表达思想和情感的过程,包括信息的生成、传递、接收、理解和检查。 项目经理的绝大多数时间都用于与团队成员和其他干系人的沟通,无论这些成员或干系人是来自组织内部还是组织外部。 沟通的基本构成,包括如下: 接收者和发送者; 信息; 渠道; 沟通的方式,在进行沟通过程中,要根据沟通目标、参与者的特点选择适合的沟通方式。一般沟通过程所采用的方式分为以下几类...

  • 学Mysql怎样快速入门?

    学Mysql怎样快速入门? 前言 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品。 MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Management System,关系数据库管理系统) 应用软件之一。关系数据库将数据 保存在不同的表中,...

  • 我是如何失去团队掌控的?一个技术总监的反思

    我是一个不合格的技术总监,在过去的快三个月里。我带着从40多个人的研发团队(包含需求、开发、测试)里抽调出20多个人去为公司开疆拓土。在这快三个月中,我们一起奋战奋斗拼搏。在过程中,我通宵时间超过半个月,干到凌晨4/5点的日子数不胜数,干到凌晨1/2点日子更是习以为常。整个团队绝大多数人近乎两个月没有周末,辛苦异常,是实实在在的高峰体验。但是三个月后,我带着失败和一身的惨痛教训回到公司。 我...

  • 提升办公室沟通技能,推荐你看这本书

    无论是对谁做了什么的误解,观念的冲突或人际关系的纠结,在任何工作场所都会不可避免地发生冲突。 但是,冲突的根源通常是沟通不畅。沟通不力,效率低下,会导致错过最后期限、错过机会和产生误解。 笔者建议职场人能多读一些类似《沟通与说服必读12篇》一类的经典沟通类书籍来提升办公室沟通技能。以下是通过更好的沟通来解决冲突和改善同事关系的四种方法。 1.立即公开解决问题。 当你的团队成员之间发生冲突时,...

  • MyOS 之 软盘读取

    首先还是采用软盘启动,qemu实现,把30DayOS的第一天版复制进去即可。这里我选择的是第4天,此时已经构建完毕所有页面了,我需要用nasm汇编重构即可。 软盘的大小的组织方式: 80cylinders x 2heads x 18sectors x 512 bytes CHS,是FDISK在分区期间所需磁盘信息。 CHS寻址模式将硬盘划分为磁头(Heads)、柱面(Cylinder)、扇区...

  • 2020-08-05 ---运维工程师常见面试题整理-----篇章(一)

    一 . Zabbix作用是什么,可以监控什么, 优化有什么,工作原理? Zabbix作用:监控网络主机 监控:硬件(路由器 交换机 防火墙),系统(cpu负荷 ,内存,磁盘,网络,进程,tcp )服务(nginx,php,tomcat,redis,memcache,mysql) web(响应时间,加载时间,渲染时间) 日志(ELK,收集,存储,分析,展示)安全(firewalld) Zabb...

  • Linux系统内存

    Linux 内存是后台开发人员,需要深入了解的计算机资源。合理的使用内存,有助于提升机器的性能和稳定性。本文主要介绍Linux 内存组织结构和页面布局,内存碎片产生原因和优化算法,Linux 内核几种内存管理的方法,内存使用场景以及内存使用的那些坑。 从内存的原理和结构,到内存的算法优化,再到使用场景,去探寻内存管理的机制和奥秘。 一、走进Linux 内存 1、内存是什么? 1)内存又称主存...

  • 行业软件开发商怎样来抢 BI 这块蛋糕?

    随着企业信息化建设的深入,很多机构的生产系统已建设完成,在保证生产的有序进行后,如何更有效地进行经营决策成了管理者面临的最大任务。商业智能(BI)就是在这种背景成为支撑企业经营分析的一大利器。 根据 IDC 中国的报告,2020 年中国商业智能市场规模将达到 5.8 亿美元(约 40 亿元人民币),而且每年还以近 20% 的速度增长。目前企业对 BI 系统需求旺盛程度可见一斑。 不同于信息化...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。