【PHP】匹配功能
刷卡
<div class="card">
<div class="matching_btn">
<label>
<div class="fa-image_range">
<i class="fas fa-times-circle"></i>
</div>
<input type="button" id="unmatch_btn" style="display:none;">
</label>
<label>
<div class="fa-image_range">
<i class="fas fa-heart"></i>
</div>
<input type="button" id="match_btn" style="display:none">
</label>
</div>
</div>
<script src=" https://code.jquery.com/jquery-3.4.1.min.js "></script>
<script>
$(document).on('click', '#match_btn', function() {
$('.card').animate({
"marginLeft": "758px"
}).fadeOut();
});
$(document).on('click', '#unmatch_btn', function() {
$('.card').animate({
"marginRight": "758px"
}).fadeOut();
});
</script>
我正在使用HTML来布局卡片，并使用JavaScript在按钮点击时实现卡片的动态效果。
<i class="fas fa-times-circle"></i>
:
<i class="fas fa-heart"></i>
使用Font Awasome来引用”♡”和”×”。
根据用户数量来创建卡片
只显示已注册用户的卡片数量。
$user = new User($current_user);
$users = $user->get_users("all");
foreach ($users as $user) :
if ($user['id'] != $current_user['id']) :
if (!check_match($user['id'], $current_user['id'])) :
?>
<div class="card">
<label>
<i class="far fa-times-circle profile_clear"></i>
<input type="button" id="profile_clear">
</label>
<img src="/user/image/<?= $user['image'] ?>" class="mypage">
<h3 class="profile_name"><?= $user['name'] ?></h3>
<p class="comment"><?= $user['profile'] ?></p>
<div class="matching_btn">
<label>
<div class="fa-image_range">
<i class="fas fa-times-circle"></i>
</div>
<input type="button" id="unmatch_btn" style="display:none;">
</label>
<label>
<div class="fa-image_range">
<i class="fas fa-heart"></i>
</div>
<input type="button" id="match_btn" style="display:none">
</label>
</div>
</div>
<?php
endif;
endif;
endforeach;
<div class="card" id="match<?= $user['id'] ?>">
:
:
<i class="fas fa-times-circle"></i>
</div>
<input type="button" id="unmatch_btn" data-target="#match<?= $user['id'] ?>" style="display:none;">
<input type="hidden" class="unmatch_user_id" value="<?= $current_user['id'] ?>">
:
:
<input type="button" id="match_btn" data-target="#match<?= $user['id'] ?>" style="display:none">
<input type="hidden" id="modal<?= $user['id'] ?>_userid" value="<?= $user['id'] ?>">
<input type="hidden" class="match_user_id" value="<?= $current_user['id'] ?>">
</label>
<script>
$(document).on('click', '#unmatch_btn', function() {
var target_modal = $(this).data("target");
$(target_modal).animate({
"marginRight": "758px"
}).fadeOut();
});
$(document).on('click', '#match_btn', function() {
var target_modal = $(this).data("target");
$(target_modal).animate({
"marginLeft": "758px"
}).fadeOut();
});
</script>
保存用户ID的匹配表
以下是一个方式，用于在Ajax处理中将值传递给数据库，以实现在刷卡时的功能。这里的处理流程与此类似，供参考。
点击匹配按钮时，将触发事件。
$(document).on('click', '#match_btn', function(e) {
e.stopPropagation();
var current_user_id = $('.match_user_id').val(),
target_modal = $(this).data("target"),
user_id = $('' + target_modal + '_userid').val();
$.ajax({
type: 'POST',
url: '../ajax_match_process.php',
dataType: 'text',
data: {
current_user_id: current_user_id,
user_id: user_id
}
}).done(function() {
}).fail(function() {
});
});
点击“匹配”按钮后，操作会开始并将相互的用户ID传递给ajax_match_process.php，从而更新匹配表。
// ajax_match_process.php
if (isset($_POST)) {
$current_user_id = $_POST['current_user_id'];
$user_id = $_POST['user_id'];
$action = '登録';
$flash_type = 'sucsess';
$sql = "INSERT INTO `match`(user_id,match_user_id)
VALUES(:user_id,:matched_user_id)";
try {
$dbh = db_connect();
$stmt = $dbh->prepare($sql);
$stmt->execute(array(':user_id' => $current_user_id, ':matched_user_id' => $user_id));
} catch (\Exception $e) {
error_log($e, 3, "../php/error.log");
_debug('マッチ失敗');
echo json_encode("error");
}
}
通过这样获得的用户ID，进行对数据库的更新。
接下来，当user_id和match_user_id拥有彼此的值时，触发输出模态窗口的事件。
使用Cookie来显示匹配界面
当刷卡并获取双方用户ID后，使用COOKIE显示配对界面。首先，在ajax_match_process.php中进行数据库更新时，确认是否存在双方用户ID，如果存在，则获取COOKIE的处理。
// ajax_match_process.php
:
:
$stmt = $dbh->prepare($sql);
$stmt->execute(array(':user_id' => $current_user_id, ':matched_user_id' => $user_id));
if (count(check_matchs($user_id, $current_user_id)) == 2) {
setcookie('username', 1, time() + 60 * 60 * 24 * 7);
} else {
setcookie('username', "", time() - 60);
}
} catch (\Exception $e) {
:
:
function check_matchs($user_id, $current_user_id)
{
$dbh = db_connect();
$sql = "SELECT user_id,match_user_id
FROM `match`
WHERE (user_id = :user_id and match_user_id = :match_user_id) or (user_id = :match_user_id and match_user_id = :user_id)";
$stmt = $dbh->prepare($sql);
$stmt->execute(array(
':user_id' => $current_user_id,
':match_user_id' => $user_id
));
}
在 `check_matchs` 函数中，检查双方的用户ID是否存在，如果存在，则创建一个名为 `username` 值为1的COOKIE。
<div class="modal_match" style="display:none"></div>
<div class="match_process" id="match<?= $user['id'] ?>" style="display:none">
<h2 class="post_title"><?= $user['name'] ?>さんとマッチしました</h2>
<img name="profile_image" class="matching_img" src="/user/image/<?= $user['image'] ?>">
</div>
<i class="far fa-times-circle match_clear" style="display:none"></i>
:
:
current_user_id: current_user_id,
user_id: user_id
}
}).done(function() {
var cookies = document.cookie;
var cookiesArray = cookies.split(';');
for (var c of cookiesArray) {
var cArray = c.split('=');
if (cArray[0] == ' username') {
$('.modal_match').fadeIn();
$(match_modal).fadeIn();
$('.match_clear').fadeIn();
$(document).on('click', '.far.fa-times-circle.match_clear', function() {
$('.modal_match').hide();
$(match_modal).hide();
$('.far.fa-times-circle.match_clear').hide();
});
}
}
从COOKIE中获取username的值，如果有的话，则显示模态窗口。
获取COOKIE的值的方法参考了下面的Qiita。
