본격적인 백앤드, 프론트앤드 작업 시작
22.12.30 6:44 am
db 불러오는건 성공했고 이제 맨 아래까지 스크롤 하게 되면 다음 데이터를 불러오는
이벤트 핸들러를 구현해보자
무한 스크롤(Infinite scroll) 구현하기
게시판의 많은 양의 글을 편리하게 보기 위해 무한 스크롤 방법으로 페이징 기능을 구현해 봤습니다.무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(U
velog.io
일단 무한 스크롤을 구현하기 위해 블로그를 찾아보다가
이분이 신기한 api 를 사용해서 구현한걸 보고 더 찾아봤다
http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
Intersection Observer API의 사용법과 활용방법 · Yoon's devlog
Intersection Observer API의 사용법과 활용방법 Web API 중 하나인 Intersection Observer API를 알아보고 어떻게 활용할 수 있는지에 대해 정리한 글입니다. Intersection Observer API(교차 관찰자 API)를 들어본 적이
blog.hyeyoonjung.com
IntersectionObserver 라는 api 라고 하는데 이걸 사용해서 구현할 수 있을것 같다
일단 이번 포스트의 목표는
1. 한번에 48장의 사진을 불러오고
2. 첫 화면에서 12장 보여주고
3. 스크롤 내리면 다음 12장 (24)
4. 또 12장 (36)
5. 마지막 12장 (48)
6. 이후 다시 db 조회해서 다음 사진 48장을 불러오는 식으로 짜볼 예정
12.30 8:07 am
일단 php 를 다뤄본적이 잘 없기때문에
db에 쿼리를 전달할 php 함수를 만들기 위해
sample.html 을 만들어서 php 변수 활용을 테스트해봤다
<?php
$arr = array("a", "b", "c", "d", "e", "f", "g", "h");
$i=0;
function one(){
global $i;
global $arr;
echo $i;
if ($i>=8) {
echo "<p>no more index</p>";
$i=0;
}
else {
$j=0;
while($j<4) {
echo "<p> the alphabet : ".$arr[$i]." this time</p>";
$j++;
$i++;
}
}
}
?>
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<?php
one();
?>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<p>sleep</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<?php
one();
?>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<p>sleep</p>
<p data-ke-size="size16"> </p>
<p data-ke-size="size16"> </p>
<?php
one();
?>
</body>
</html>
https://iancoding.tistory.com/196
[PHP] 함수의 활용 (return)
PHP 함수 return return이 나오면 함수가 종료되고 나머지 코드는 무시된다. Function Basic parameter & argument return 함수의 활용 Before WEB 위의 코드를 함수를 통해 가독성 있게 바꿔보자. After WEB 함수를 이
iancoding.tistory.com
위 블로그를 참고해서 코드 가독성을 높일겸 함수를 적용해봤다
전역변수를 사용해서 배열을 몇 차례에 나눠서 읽고
더 이상 읽어들일 인덱스가 없으면 다른 행동을 하게 했다
위 테스트 코드를 활용해서 무한스크롤을 구현할 수 있을것 같다
12.30 10:07 pm
작업하다가 낮잠자고 운동하고 씻고 밥먹고 다시 ㅋㅋ
무한스크롤을 구현하기 위해서 php 함수를 먼저 작성하려고 했다
일단 48개씩 이미지를 불러오고 배열에 url 을 저장해서
12개씩 보여준다.
이후 배열안에 든 이미지가 다 호출되었으면 다시 48개 이미지를 불러오려고 하는데
https://limjunho.github.io/2022/08/04/MySql-limit.html
MySQL 데이터 나눠서 select - limjunho
Summry mysql의 limit 키워드를 사용하면 많은 데이터 중 일부분만을 가져올 수 있다. DB에서 값을 일부분만을 가져오면 굳이 서버단인 백엔드에서의 작업이 줄어들고 데이터를 요청하고 가져오는 양
limjunho.github.io
위 블로그 내용을 사용해서 db 에 쿼리할 듯 하다
12.30 11:48 pm
php 함수는 모두 만들었다
offset 을 이용한 limit 로 sql 을 계속 불러오도록 했고
php 변수를 이용해서 1번의 쿼리에 대해 12장씩 4번에 나눠서 총 48장의 이미지를 보여주기로 했다
<?php
$arr_images=array();
$offset=0;
function get_images($member, $offset_value) {
require("idpass.php");
global $arr_images;
global $offset;
//connect 설정(host,user,password)
$conn = new mysqli($mysql_host, $mysql_user, $mysql_password, $mysql_db);
//charset UTF8
//mysqli_query("set names utf8");
//쿼리문 작성
if ($member=="all") {
$query = "select * from blackpink_img_data where db_year=2022 order by db_month desc, db_day desc limit ".$offset_value.", 48";
} else {
$query = "select * from blackpink_img_data where db_year=2022 and db_members=".$member." order by db_month desc, db_day desc limit ".$offset_value.", 48";
}
$offset=$offset_value+48;
//쿼리보내고 결과를 변수에 저장
$result = mysqli_query($conn, $query);
//이미지 배열 초기화
$i=0;
while($i<48) {
$arr_images[$i]="";
$i++;
}
//이미지 배열에 쿼리 결과 url 입력
$i=0;
if ($result) {
while($row = mysqli_fetch_array($result)){
$arr_images[$i]=$row['DB_S3URL'];
$i++;
}//while end
mysqli_free_result($result); //메모리에서 result 삭제
}//if end
else {
echo "Error : ".mysqli_error($conn);
}
mysqli_close($conn);
}
$arr_index=0;
function post_images() {
global $arr_index;
global $arr_images;
global $offset;
if ($arr_index==48) {
get_images("all", $offset);
$arr_index=0;
}
$j=0;
while (true) {
if ($j<12) {
if (strlen("$arr_images[$arr_index]")>2) {
echo "<div class='col-4'><span class='image fit'><img src='".$arr_images[$arr_index]."' alt='' /></span></div>";
$arr_index++;
} else {
echo "<p>no more images</p>";
break;
}
$j++;
} else {
break;
}
}
}
?>
//아래 html 에서 호출
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
<?php
get_images("all", 0);
post_images();
?>
</div>
</div>
이제 이 함수들을 호출하는 js 파일을 작업해보자
12.31 12:48 am
무한 스크롤(Infinite scroll) 구현하기
게시판의 많은 양의 글을 편리하게 보기 위해 무한 스크롤 방법으로 페이징 기능을 구현해 봤습니다.무한 스크롤은 사용자가 페이지 하단에 도달했을 때, 콘텐츠가 계속 로드되는 사용자 경험(U
velog.io
http://blog.hyeyoonjung.com/2019/01/09/intersectionobserver-tutorial/
Intersection Observer API의 사용법과 활용방법 · Yoon's devlog
Intersection Observer API의 사용법과 활용방법 Web API 중 하나인 Intersection Observer API를 알아보고 어떻게 활용할 수 있는지에 대해 정리한 글입니다. Intersection Observer API(교차 관찰자 API)를 들어본 적이
blog.hyeyoonjung.com
https://nohack.tistory.com/124
Intersection Observer API로 무한 스크롤 구현하기
Infinite Scroll 무한 스크롤은 말 그대로 스크롤을 무한으로 할 수 있는 기능을 말하며, 페이지의 최하단에 도달했을 때 신규 콘텐츠를 로드하는 식으로 동작합니다. 페이지네이션(Pagination)과 함께
nohack.tistory.com
[PHP + AJAX] php 함수를 ajax로 호출하는 법
우선 본론으로 들어가기 전 좋은 방법이 아닐 수 있다고 말하고 싶다. 어째보면 꼼수이기 때문에... 우선 화면을 담당하는 test.php 결과 함수 호출 그리고 api를 담당하는 /api/ajax_test.php가 있다고
xively.tistory.com
무한 스크롤(Infinity Scrolling) 예제 6가지
무한 스크롤(Infinity Scrolling) 예제/구현 6가지원본은 이곳입니다. 아래는 번역입니다. 오타 및 오역은 댓글로 알려주세요. 인피니티 스크롤은 이제 흔한 기능이고 실제로 유용하게 사용되는 사례
kutar37.tistory.com
함수 다짜고 무한스크롤 관련해서 찾아보니까 내가 생각을 잘못했던것 같다
몰라서 그랬겠지만
php 로는 db url 을 얻어오면 되는거고
그걸 배열로 리턴받아서 자바스크립트에서 보여줘야 할 것 같다
[php + javascript] php 배열 값을 javascript 변수에 담는 방법
javascript에서 php로 변수를 보내줄 때는 form이나 ajax 통신 등을 이용해야할 때가 많다... 반대로 php에서 javascript로 변수를 보내줄 때는 비교적 편리하다... // 반환해 줄 php 배열 변수 $arr = array('apple'
xively.tistory.com
오늘은 이만 해야겠다 내가 졌다 ㅅㅂ
'Archive > [Infra+Web] fanpage:BLACKPINKINYOURAREA' 카테고리의 다른 글
| 프로젝트 조기 종료 (0) | 2023.02.21 |
|---|---|
| [Web]BLACKPINK IN YOUR AREA-29- 무한 스크롤 ajax 실패 (1) | 2023.01.20 |
| [Web]BLACKPINK IN YOUR AREA-27-dockerfile ㅡㅡ (0) | 2022.12.27 |
| [Web]BLACKPINK IN YOUR AREA-26-인프라 설계 및 구축 -완- (1) | 2022.12.27 |
| [Web]BLACKPINK IN YOUR AREA-25-CI/CD 환경 구축-3 (0) | 2022.12.18 |