PHP-校花评选-埃洛等级分系统(Elo rating system)

校花是怎么评出来的


转载自:https://www.shiyanlou.com/courses/document/990
源程序地址:http://download.csdn.net/detail/u011532367/9310479


图片描述信息

看看DEMO

课程目录 (markdown 中使用 [toc] 自动产生 )
图片描述信息


一、实验介绍

1. 环境登录

无需密码自动登录,系统用户名shiyanlou,密码shiyanlou

2. 环境介绍

本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到桌面上的程序:

  1. LX终端(LXTerminal): Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令
  2. Firefox:浏览器,用于前端页面展示
  3. GVim:非常好用的编辑器,最简单的用法可以参考课程Vim编辑器
  4. PHP环境. 实验楼提供了我们一个很完美的平台快速学习.

3.环境配置

获取此教程代码

cd /home/shiyanlou/Code/
git clone http://git.shiyanlou.com/shitou/shiyanlou_cs321.git

下载完整代码到本地
图片描述信息

a. php环境
sudo apt-get install nginx   //下载安装nginx
sudo apt-get update     //更新远程软件源
sudo apt-get install php5-fpm  //下载安装 php

等待下载完成….

b. 修改nginx配置文件.

图片描述信息

sudo vim /etc/nginx/sites-available/default  #使用vim编辑器修改默认的nginx根目录和php支持
或者
sudo gedit /etc/nginx/sites-available/default # 使用gedit编辑器修改默认的nginx根目录和php支持

打开文件后,进入到文件24行.将此行设置为根目录地址.

22  listen [::]:80 default_server ipv6only=on;
23
24  root /home/shiyanlou/Code/shiyanlou_cs321;  // 此处设置网站默认根目录
25  index index.html index.htm;

找到54-64行前面的注释去掉(除59行不需要去掉).改为如下形式.

54  location ~ \.php$ {
55      fastcgi_split_path_info ^(.+\.php)(/.+)$;
56      # NOTE: You should have 'cgi.fix_pathinfo = 0;' in php.ini
57  
58      # With php5-cgi alone:
59  #    fastcgi_pass 127.0.0.1:9000;
60      # With php5-fpm:
61      fastcgi_pass unix:/var/run/php5-fpm.sock;
62      fastcgi_index index.php;
63      include fastcgi_params;
64  }
c. mysql 环境
实验楼 mysql环境中已经默认搭建好,直接可以启动.
sudo service mysql start # 启动mysql进程
mysql -uroot #连接mysql

mysql启动

二、项目介绍

1. 简介

《社交网络》中页面:
美女排名算法
教程中页面实现:


校花评比项目这个想法来自于电影《社交网络》
——马克扎克伯格被女友甩了之后,一气之下黑了所有宿舍的相册,将所有女生的照片放在Facemash上供人评比。如今我们实验楼的教程教大家也来过把瘾,把这个实现过程来重映一下。请同学们好好利用实验楼里面的环境~~

《社交网络》在线播放
看看DEMO
介绍: 校花排名页面随机产生两个女生(名字做了处理) , 比较两个女生的颜值, 然后利用鼠标点击选择一个你认为较漂亮的女生,随后数据自动提交到数据后台处理, 页面会自动刷新,再次随机产生两个女生,再次选择比较, 依次达到不断更新颜值的作用。 上方进度条可以显示你的进度,当进行10次选择以后, 页面自动弹到排名页面, 显示美女排名 ,以及校花。
排名
想法来自《社交网络》,所以这里教程的步骤也跟着扎克伯格的脚步来进行。


a. 获取图片信息(了解).
1). apache 允许插入目录,所以wegt 就能全部下载下来.
2). 加不了目录,所以进行一个空白搜索,接着数据库里所有的图片就会显示出来。利用火狐保存网页就能保存所有图片.
3). 需要密码的破解直接进入,对方没有高级权限,就发现不了这次入侵.
4).搜索链接到个人网页的,修改perl代码进入个人网页批量提取图片即可.

b. 排名算法

美女排名算法
每个女生都有一个1400的基础颜值,,可称作“旧颜值”,在供人评比之后,将会通过公式计算出“新颜值”。
埃洛等级分系统(Elo rating system)
假设女生A和B的当前颜值分别为RA和RB.
A对B的胜率期望值当为:
图片描述信息
类似B对A的胜率为:
图片描述信息
举例说明:
假如一位女生在比赛中的真实得分(胜=1分,和=0.5分,负=0分)和她的胜率期望值不同,则她的颜值要作相应的调整。
例如,女生A颜值为1613,与颜值为1573的女生B战平。若K取32,则A的胜率期望值为
图片描述信息
因而A的新颜值为1613+32*(0.5-0.5573)=1611.166;
在不断的两两比较之后,由此可以得出他们的颜值排名。
然后就知道校花是谁了。


三、项目开始

获取此教程代码

cd /home/shiyanlou/Code/
git clone http://git.shiyanlou.com/shitou/shiyanlou_cs321.git

1. 建库建表

sudo service mysql start # 启动mysqld进程
mysql -uroot #连接mysql

配置web环境以后,就可以开始操作代码了。

完整的代码都保存在了Mysql.sql中 自行下载查询.

a. 创建beauty数据库.

mysql> CREATE DATABASE beauty DEFAULT CHARSET utf8 COLLATE utf8_general_ci;
mysql> use beauty
b. 设计stu数据库表

数据库存储女生信息.(id,姓名,标识,图片,颜值)

mysql> CREATE TABLE IF NOT EXISTS `stu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `stu` varchar(255) DEFAULT NULL,
  `img` varchar(255) NOT NULL,
  `beauti` varchar(255) DEFAULT NULL,
  `score` int(20) NOT NULL DEFAULT '1400',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=78 ;
c. 插入数据到beauty数据表。

实例:

INSERT INTO `stu` (`id`, `stu`, `img`, `beauti`, `score`) VALUES
(1, 'Mary', '', 'image/01.jpg', 1400),
(2, 'Nancy', '', 'image/02.jpg', 1400),
(3, 'Kacy', '', 'image/03.jpg', 1400),
(4, 'Judegli', '', 'image/04.jpg', 1400);

ps: 因为网络原因这里就没有提供女生图片,可以参考外网demo.
图片描述信息

2. 页面布局(主要布局)

前端html

前端设计采用bootstrap响应式布局,适合任何设备使用。主要布局如下(具体看下载下来的页面代码):

<div class='container rank'>
            <div class='progress'>
        <div class='progress-bar' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style=''>
          <span class=''>0% Complete</span>
        </div>
      </div>
            <div class='alert alert-info alert-dismissible' role='alert' style='display:none;'>
              <button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'> &amp;times;</span></button>
              <strong>!</strong>Of the two girls, who do you think is more beautiful~
            </div>
            <?php require('DBMysql.php');$query=new DBMysql();$i=0;$sql='select * from stu order by rand() limit 2';$result=$query->query($sql);while($row=mysql_fetch_array($result)){ $i++;?>
            <div class='col_2 rankimg<?php echo $i; ?> rankimg'>
                <input type='hidden' value='<?php echo $row['id'];?>'>
                <a  href='#' id='ranka<?php echo $i; ?>'><img src='<?php echo $row['beauti'];?>' class='img-responsive img-rounded' alt='<?php echo $row['stu'];?> image'></a>
                <span><?php echo $row['stu'];?></span>
            </div>
            <?php }?>
        </div>

在主体部分内部随机产生两个女生并列显示. 利用对数据库的随机查询每次刷新随机产生两个女生,然后对她们进行选择比较,产生分值差.因为环境网络原因。外网可看看DEMO

2. js动态控制(交互)

js控制
这里利用了jquery的库,已经打包。

    $('#ranka1').on('click',function(){
        $('#ranka2').hide();
        rank(1);
    });
    $('#ranka2').on('click',function(){
        rank(0);
        $('#ranka1').hide();
    });
    //选择其中一个女生后,另一个女生图片消失,等待服务器响应。
    function rank(i){
        $.ajax({
            url: './rank.php',   //访问路径 
            data: '&amp;stu1=' + $('.rankimg1 input').val() + '&amp;stu2=' + $('.rankimg2 input').val()+'&amp;id='+i, //需要验证的参数 
            type: 'post', //传值的方式 
            error: function () {}, 
            success: function (msg) {
                window.location.reload();
            }
        })
    }
    //上传选择信息到服务器处理 ,处理完后,刷新页面重新加载两个女生。

    function getCookie(name)   //获取cookie函数
    {
        var arr,reg=new RegExp('(^| )'+name+'=([^;]*)(;|$)');

        if(arr=document.cookie.match(reg))

            return (arr[2]);
        else
            return null;
    }
    if(!getCookie('rankwoman'))
    {
        $('.alert-info').show();
        document.cookie='rankwomanper=0';
    }
    document.cookie='rankwoman=rankwoman';
    rankwomanper=parseInt(getCookie('rankwomanper'));
    $('.progress-bar').width(rankwomanper+'0%');
    $('.progress-bar span').text(rankwomanper+'0% Competed');
    rankwomanper=parseInt(getCookie('rankwomanper'))+1;
    document.cookie='rankwomanper='+rankwomanper;
    //页面每次刷新一次  存在cookie中rankwomanper的值+1 当累计到10以后页面自动刷新跳转到列表排名页面。
    if(getCookie('rankwomanper')>10){
        window.location.href='./ranklist.php';
    }
//等待页面再次刷新重新分配两个女生进行比较.

图片描述信息

3. PHP后台处理(颜值计算)

利用了上面分析的ELo算法所写。
Rank.php
* 功能: 排名 Rank
* 专业名: Elo Rating System (埃洛等级分系统)
* Author: 实验楼 石头哥
* E-Mail: winipcss@outlook.com

$run=new Rank();  //自动启动类中的selectStu函数开始处理 POST 过来的数据。
$a=$run->selectStu();
var_dump($a); 
class Rank
{
    private static $K=32;

    function queryScore($stu){
        $sql='SELECT * FROM stu WHERE `id` = {$stu}';
        $query=new DBMysql();
        $info=$query->fetch($sql);
        return $info['score'];
    }

    function updateScore($Ra,$stu){
        $query=new DBMysql();
        $query->query('UPDATE `stu` SET `score` = $Ra WHERE `id` = $stu');
    }

    function expect($Ra,$Rb){
        $Ea=1/(1+pow(10,($Rb-$Ra)/400));
        return $Ea;
    }

    function calculateScore($Ra,$Ea,$num){
        $Ra=$Ra+$this::$K*($num-$Ea);
        return $Ra;
    }

    function selectStu(){
        require('DBMysql.php');
        $stu1=@$_POST['stu1'];
        $stu2=@$_POST['stu2'];
        $victoryid=@$_POST['id'];
        return $this->getScore($stu1,$stu2,$victoryid);
    }

    function getScore($stu1,$stu2,$victoryid){
        // 查询目前分数
        $Ra=$this->queryScore($stu1);
        $Rb=$this->queryScore($stu2);
        if($Ra &amp; $Rb){
        // 求期望值
        $Ea=$this->expect($Ra,$Rb);
        $Eb=$this->expect($Rb,$Ra);

        $Ra=$this->calculateScore($Ra,$Ea,$victoryid);
        $Rb=$this->calculateScore($Rb,$Eb,1-$victoryid);
        $Rab=array($Ra,$Rb);

        // 新分数入库
        $this->updateScore($Ra,$stu1);
        $this->updateScore($Rb,$stu2);

        return $Rab;
        }
        else{
            return false;
        }
    }
}

4. 数据库操作辅助类

用来方便操作mysql数据库。

DBMysql.php
* 功能: 数据库查询

class DBMysql
{
//dbc()中使用了编码函数 用来防止中文乱码。
    function dbc(){
        $dbc = @mysql_connect('localhost','root','') OR die('Could not connected to MySQL: '.mysql_error());
        $db_selected = mysql_select_db('beauty',$dbc);
        $program_char = 'utf8';
        mysql_set_charset($program_char, $dbc);
        mysql_client_encoding($dbc);
        mysql_query('set character_set_results=utf8');
        mysql_query('SET NAMES utf8');   //
        return $dbc;
    }

    function query($sql){
        $dbc=$this->dbc();
        $result=mysql_query($sql, $dbc);
        return $result;
    }

    function fetch($sql){
        $result=$this->query($sql);
        $fetch=mysql_fetch_array($result);
        return $fetch;
    }

}

启动

sudo service nginx start    //启动nginx
sudo service php5-fpm start  //启动 php

打开浏览器即可。输入http://127.0.0.1/index.php
然后就可以进去了
第一次启动
点击Choose Again 可以再次选票
返回

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值