그누보드5 팔로잉 팔로우 시스템 구현
본문
팔로워 팔로잉 수 출력부분:
<!-- 팔로우 시스템 메뉴{ -->
<a href="follow.php?mb_id=<?php echo $mb_id ?>" class="follow-link">
<div class="follower-group">
<span class="followers">0</span><!-- 총 팔로워 수 -->
<span style="font-size:15px; color:#4c4c4c">팔로워</span>
</div>
<div class="following-group">
<span class="following">0</span><!-- 총 팔로잉 수 -->
<span style="font-size:15px; color:#4c4c4c">팔로잉</span>
</div>
</a>
<style>
.follow-link {
display: flex; /* 가로 정렬을 위해 flexbox 사용 */
margin-top: 10px;
margin-bottom: -5px;
}
.follower-group,
.following-group {
display: flex;
flex-direction: column; /* 세로 정렬을 위해 column 방향으로 설정 */
align-items: center; /* 가운데 정렬 */
margin: 0 10px; /* 그룹 간의 간격 조정 */
}
.followers,
.following {
font-size: 20px; /* 원하는 폰트 크기로 설정 */
font-weight:520
}
</style>
<!-- }팔로우 시스템 메뉴 -->
팔로워 팔로잉 수 가져오는 부분:
<!-- 팔로워/팔로잉 수{ -->
<script>
let followingPage = 1; // 현재 페이지 설정
let followerPage = 1; // 현재 페이지 설정
let mb_id = '<?php echo $mb_id ?>'; // mb_id를 직접 입력하거나 다른 방법으로 설정하세요
// 팔로잉 목록 로드
function loadFollowing() {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/bbs/ajax_following.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
displayFollowingCount(response);
} else {
console.error("팔로잉 로드 실패: " + xhr.status);
}
};
xhr.send('page=' + followingPage + '&mb_id=' + mb_id);
}
function displayFollowingCount(data) {
const followingSpan = document.querySelector('.following');
followingSpan.innerHTML = ''; // 이전 내용 초기화
// 총 팔로잉 수 출력
const totalCount = document.createElement('p');
totalCount.innerText = `${data.total_following}`;
followingSpan.appendChild(totalCount);
}
// 팔로워 목록 로드
function loadFollowers() {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/bbs/ajax_followers.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
displayFollowerCount(response);
} else {
console.error("팔로워 로드 실패: " + xhr.status);
}
};
xhr.send('page=' + followerPage + '&mb_id=' + mb_id);
}
function displayFollowerCount(data) {
const followerSpan = document.querySelector('.followers');
followerSpan.innerHTML = ''; // 이전 내용 초기화
// 총 팔로워 수 출력
let totalCount = data.total_followers;
// 팔로워 수가 1보다 클 경우 -1로 설정
if (totalCount > 1) {
totalCount -= 1;
}
const countElement = document.createElement('p');
countElement.innerText = `${totalCount}`;
followerSpan.appendChild(countElement);
}
// 페이지 로드 시 팔로잉 및 팔로워 목록 불러오기
window.onload = function() {
loadFollowing();
loadFollowers();
// 6초마다 데이터를 새로 고침
setInterval(function() {
loadFollowing();
loadFollowers();
}, 6000); // 6000 밀리초 = 6초
};
</script>
<!-- }팔로잉/팔로워 수 끝 -->
----- 2024. 08. 19 07:07 오류 발견 후 수정 ------
<!-- 팔로워/팔로잉 수{ -->
<script>
let followingPage = 1; // 현재 페이지 설정
let followerPage = 1; // 현재 페이지 설정
let mb_id = '<?php echo $mb_id ?>'; // mb_id를 직접 입력하거나 다른 방법으로 설정하세요
// 팔로잉 목록 로드
function loadFollowing() {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/bbs/ajax_following.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
displayFollowingCount(response);
} else {
console.error("팔로잉 로드 실패: " + xhr.status);
}
};
xhr.send('page=' + followingPage + '&mb_id=' + mb_id);
}
function displayFollowingCount(data) {
const followingSpan = document.querySelector('.following');
followingSpan.innerHTML = ''; // 이전 내용 초기화
// 총 팔로잉 수 출력
const totalCount = document.createElement('p');
totalCount.innerText = `${data.total_following}`;
followingSpan.appendChild(totalCount);
}
// 팔로워 목록 로드
function loadFollowers() {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/bbs/ajax_followers.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
displayFollowerCount(response);
} else {
console.error("팔로워 로드 실패: " + xhr.status);
}
};
xhr.send('page=' + followerPage + '&mb_id=' + mb_id);
}
function displayFollowerCount(data) {
const followerSpan = document.querySelector('.followers');
followerSpan.innerHTML = ''; // 이전 내용 초기화
// 총 팔로워 수 출력
let totalCount = data.total_followers;
const countElement = document.createElement('p');
countElement.innerText = `${totalCount}`;
followerSpan.appendChild(countElement);
}
// 페이지 로드 시 팔로잉 및 팔로워 목록 불러오기
window.onload = function() {
loadFollowing();
loadFollowers();
// 6초마다 데이터를 새로 고침
setInterval(function() {
loadFollowing();
loadFollowers();
}, 6000); // 6000 밀리초 = 6초
};
</script>
<!-- }팔로잉/팔로워 수 끝 -->
팔로잉 버튼:
<?php if ($is_member) { ?>
<button id="followBtn" onclick="toggleFollow('<?php echo $mb_id; ?>')">팔로우</button>
<?php } ?>
팔로잉 버튼 데이터 처리 부분:
<!-- 팔로우 버튼{ -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('followBtn');
const targetId = '<?php echo $mb_id; ?>';
// 팔로잉 상태 확인
checkFollowingStatus(targetId, function(isFollowing) {
if (isFollowing) {
btn.innerText = '팔로잉';
}
});
});
function checkFollowingStatus(targetId, callback) {
const xhr = new XMLHttpRequest();
xhr.open('POST', '/bbs/ajax_get-following.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
callback(response.isFollowing);
}
};
xhr.send('mb_id=' + targetId);
}
function toggleFollow(targetId) {
const btn = document.getElementById('followBtn');
let action;
// 버튼 상태에 따라 액션 설정 및 AJAX 요청
if (btn.innerText === '팔로우') {
action = 'follow';
btn.innerText = '팔로잉'; // 버튼 텍스트 변경
} else if (btn.innerText === '팔로잉') {
// AJAX 요청을 보내기 전에 '팔로우 취소'로 변경
btn.innerText = '팔로우 취소';
} else if (btn.innerText === '팔로우 취소') {
action = 'unfollow';
btn.innerText = '팔로우'; // 버튼 텍스트 다시 변경
}
// AJAX 요청
const xhr = new XMLHttpRequest();
xhr.open('POST', '/bbs/ajax_follow.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
if (action === 'follow') {
alert('팔로우 성공!');
} else if (action === 'unfollow') {
alert('팔로우 취소 성공!');
}
} else {
// 요청 실패 시 원래 상태로 복원
if (action === 'follow') {
btn.innerText = '팔로우';
} else if (action === 'unfollow') {
btn.innerText = '팔로잉';
}
}
};
xhr.send('action=' + action + '&target_id=' + targetId);
}
</script>
설명: 첨부파일 덮어쓰기, 참고로 스킨은 알아서 원하는 곳에 입맛에 맞게 배치,
팔로잉 팔로워 수 6초마다 갱신됨,
follow스킨 자체에서 팔로워 출력 부분은 인피니티 스크롤 적용돰
개선 해야될 부분: 팔로우가 진행되는 그누보드 사이트가 만약 웹 서버에 두 개의 그누보드 사이트가 별도로 운영중이더라도 그누보드A에서 test가 tester에게 팔로우를 했는데 마침 그누보드B에도 동일 회원정보 있다면 그 계정으로도 팔로우 처리되는 오류 발생
--
Twave에도 탑재할 예정, 일부 탑재됨
팔로우/팔로잉 저장하는 ajax_follow.php에 오류가 있었던 것을 찾아 수정했습니다. 이부분만 따로 덮어쓰기 해주세요.
오류 내용: 이 코드의 팔로우 팔로잉 저장 방식이 아이디, 아이디,아이디 인데 첫 추가할 때 기존에는 ,아이디 로 저장하게 했으나 첫 아이디 추가시 이것이 오류를 유발한다는 것을 파악하여 첫 팔로우 팔로잉 할 때는 ,를 추가하지 않도록 수정했습니다.
+ 팔로우 취소할 때도 비슷한 오류 발생하던 것 추가
==> 이 오류 해결로 인해 기존에 팔로잉 팔로워 수가 1이 줄어들거나 늘어나는 문제 해결함
첨부파일
- follow.zip (13.3K) 2회 다운로드 | DATE : 2024-08-19 05:48:00
- ajax_follow.php.zip (1.6K) 0회 다운로드 | DATE : 2024-08-19 07:09:37
tak2님의 댓글
tak2 아이피
(211.♡.230.157)
작성일
미니님a( https://sir.kr/g5_tip/22559 / https://sir.kr/bbs/profile.php?mb_id=pnj312 )님의 팁:
현재 mb_1 필드 자체가 255 길이 이므로
더 길게 사용하실려면 텍스트로 변경 하셔야 합니다.
mysql 에서
ALTER TABLE `g5_member` MODIFY COLUMN mb_1 TEXT;
실행하시면 됩니다.
그게 아니라면 테이블을 별도 구성하는 것도 좋은 방법일 것 같습니다.
tak2님의 댓글
tak2 아이피
(112.♡.248.125)
작성일
구현 참고(댓글):
https://dsclub.kr/dev/3
tak2님의 댓글
회원정보 수정 시 팔로우 데이터가 초기화되는 오류 발견