개발노예 코드와 일상

오랜만에 코드 글을쓴다

작업중에 애니메이션 요청이들어왔는데

숫자를 0~ ** 까지 올라가는 내용이었다

한두개면 그냥 수동으로 할텐데

수가 꽤 많아서 함수로 해두고 클래스명 통일해서 한번에 넣어버렸다

//스크롤 했을때 숫자 애니메이션이 동작하도록, 1회만 동작
//함수화 , 기능수정
var _once = 1;

    $(window).scroll( function(){
        var na_div = $(".now_wrap ").offset().top + 500;
        var _window = $(window).scrollTop() + $(window).height();


        if(na_div < _window && _once == 1){
            number_animation();

            _once = 2;
        }

    })

    function number_animation(){
        //숫자애니메이션
        $(".number_animation").each(function(index, element){
            var $this = $(this),
                goal_cnt = $this.text();

            $({ val : 0 }).animate({ val : goal_cnt }, {
                duration: 1000,
                step: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);

                },
                complete: function() {
                    var num = numberWithCommas(Math.floor(this.val));
                    $this.text(num);
                }
            });
        })
    }
    function numberWithCommas(x) { //숫자콤마로 출력
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }  

    어우 줄바꿈 하기는 귀찮네
    일단 코드는 이렇게 되어있다

    목표 숫자를 일단 초기로 적어둔다

    .number_animation 으로 클래스를 통일해서 해당 div의 text값으로다가 목표로 해서 애니메이션을주었고


    이게 하다보니까 로드 하고 화면위치에 상관없이 애니메이션이 시작되서

    스크롤 내리면 밑에꺼는 끝나있더라
    그래서 .now_wrap 이라고 다시 감싸주고

    화면위치랑 해당 클래스 위치랑 비교해서 함수 실행하도록 설정했다

이번에 작업한것은 메일시스템이었다

기본 그누보드에 달려있는 메일 함수는 뭔가 오류가많이 나왔다

스팸으로 들어간다던가 아예 차단을 해버려서 전송이 안된다던가

그래서 새로운 메일시스템을 입히는 과정에서

php로 구성되어있는 코드를

메일 api 리턴받고 그러면서 ajax처럼 써야 되는 상황이나와서

이것저것 써보다가 완료했다

일단 php 에서

curl_setopt 란 기능을 이용하는것이 주요 요소였고

구성은

$_data = array(
'fname' => $fname, // 발신자 이름
'fmail' => $fmail, // 발신자 이메일
'to' => $to, // 수신자 이메일
'subject' => $subject, // 제목
'content' => $content, // 내용
);

    $ch1 = curl_init();
    curl_setopt($ch1, CURLOPT_URL, G5_BBS_URL.'/testetstest.php');
    curl_setopt($ch1, CURLOPT_RETURNTRANSFER, TRUE);
    curl_setopt($ch1, CURLOPT_HEADER, FALSE);
    curl_setopt($ch1, CURLOPT_POST, 1);

    curl_setopt($ch1, CURLOPT_POSTFIELDS, http_build_query($_data));

    curl_setopt($ch1, CURLOPT_POSTFIELDSIZE, 0);
    curl_setopt($ch1, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($ch1, CURLOPT_SSLVERSION,3);
    $response = curl_exec($ch1);

    curl_close($ch1);

    return $_data;

    이런느낌으로 함수를 만들어서 쏜다음
    해당 페이지로가서 $_POST 로 받아서 따따따 넣어주면 되었다
    생각보다 간단하게 끝나고 만족스

홈페이지 제작중

서브메뉴나 레이어를 화면 꽉차게 띄웠는데

안에 내용이 넘어가서 스크롤이되는경우

본 페이지와 중복되어 브라우저 스크롤이 두개이상으로 나오는 경우가있다

몹시 보기싫은 경우인데

이번에 css로 간단하게 수정해서 적어본다

일단 본페이지 스크롤은 html,body 로 적용되고있다

그래서 html,body에 height:100%와 overflow hidden을 주어서 본 스크롤을 없애고

위에 띄우는 레이어의 스크롤만 남기는 방식이다

자바스크립트나 제이쿼리로는

오픈할때 스타일 주고

닫을때 스타일 빼는 작업을 해주면 완성.

키오스크나 대형스크린 프로그램 작업시

키보드를 띄워서 입력받는 경우가 종종있다

기존에 사용하던 키보드를 사용해서 작업을 했지만~?

휴대폰 번호를 입력받아야해서

숫자만 띄워달라고 한다

후움

css로 억지로 조정하면 되기야하겠지만

그게더 귀찮을거같기도하고

혹시몰라 찾아보니 숫자용이 따로있더라

numberKeypad.js

이 플러그인을 사용해서 처리했다

css파일도 있고 두개를 추가한후에

//숫자 키보드 따로생성
$('.number_keyboard').numberKeypad({
wrap: '.number_input'
});

//스타일조정
$('.number_keyboard').on('click',function(){
$(".keypad").addClass('d-block');
});

//숫자키보드 닫기기능추가
$('.keypad .back, .keypad .ok, .back_bg').on('click',function(){
$(".keypad").removeClass('d-block');
});

열고닫고 기능 추가한다음에 끝

사용법은 간단하더라

자바스크립트 메모

ajax로 구해온 정보를 다시 페이지에 삽입하려고할때

위치를 정해서 집어넣으면 편한데

이게 갯수가 변동할수있다거나

줄이 바뀌는,

이번경우에는 품목을 추가 삭제할수있는 변동성이 있는 구조여서

거기다 맨 하단에는 합계를 넣어줘야했기에

맨하단 윗칸에 넣어야했다

뭐 테이블구조로 작업을 해둬서 약간 애매하긴했는데

그래도 원래 명령어가 다 있어서

수월하게 풀렸다

 - after()

 지정한 요소 뒤에 새로운 요소를 삽입 

 A.after(B) - A 뒤에 B를 추가

 - insertAfter()

 지정한 요소 뒤에 새로운 요소를 삽입

 A.insertAfter(B - B 뒤에 A 를 추가

 - before()

 지정한 요소 시작 부분에 내용을 삽입 

 A.berfore(B) - A 앞에 B를 추가

 - insertBefore()

 지정한 요소 시작 부분에 내용을 삽입

 A.insertBefore(B) - B 앞에 A 를 추가

요즘 바빠죽겠다

연말이라 그런가 전화가 쏟아지고 수정사항에 추가사항에

다들 보고서 요청도있고

머리가아프네

일단 시청시간을 초로 db에 받아놨는데

시분초로 계산해서 출력해달라는 요청이있었다

이게 그냥 처리할랫더니 여간 귀찮은게 아니어서

뒤적거리다 함수하나 괜찮아서

적어놔본다

//시간구하기
if ( ! function_exists('get_time_array')) {
function get_time_array($time)
{
global $g5, $pk;
$return = '';

    //시분초로변환
    $full_sec = floor($time);
    $hour = floor($full_sec / 60 / 60) % 24;
    $min = floor($full_sec / 60) % 60;
    $sec = floor($full_sec % 60);

    //array_push($time_arr,$hour);
    //array_push($time_arr,$min);
    //array_push($time_arr,$sec);
    //$return = $time_arr;

    $return = $hour.'시'.$min.'분'.$sec.'초';
    return $return;
}

}

후 그누보드기반으로 관리자페이지를 만드는데

참 난감? 신선? 한 구간이 있었다

db 테이블별로 날짜칼럼명도 데이터칼럼명도 전부 다른 테이블을

싹 모아서 날짜순 정렬을 해달라는....

그중에 userid는 같아서 그나마 다행이긴했는데

참;

이렇게 저렇게 해보다가

union 해야겟다 결정하고 나서보니

테이블마다 필요한 칼럼갯수가 다 틀린거;

게다가 테이블마다 표출해야할것도달라서 테이블명도 넣어야햇다

아무튼

" SELECT * FROM
(
SELECT id, receiptdate, Complete_id, User_id, reward_ap, 'reward' AS table_name FROM reward
UNION ALL
SELECT id, completedate, Course_id, User_id, '' AS ap, 'complete' AS table_name FROM complete
UNION ALL
SELECT id, visit, Local_id, User_id, '' AS ap, 'stemp' AS table_name FROM stemp
UNION ALL
SELECT id, startDate, Arcontents_id, User_id, '' AS ap, 'arplaylog' AS table_name FROM arplaylog
UNION ALL
SELECT id, date, Local_id, User_id, '' AS ap, 'arphotoplaylog' AS table_name FROM arphotoplaylog
)
AS U where U.User_id = '{$row['id']}' order by U.receiptdate desc "

일단 나온 코드가 이건데

칼럼을 억지로 맞췄다.

아직까지 union은 완벽히 이해는 못한거같다

나중에 한번더 봐봐야지

작업중에 유튜브게시판을쓰고 

기타 유튜브 영상을 끌어오는 작업을할때

동영상링크를 그대로 가져와서 썸네일을 쓰면 무난하지만

영상이 많으면 속도문제가 생긴다

그래서 썸네일만 따로 빼야하는경우, 리스트페이지일경우

추출함수가있길래 써봤다

일단 기본적인 난이도는 쉬움!

함수는 가져와놓고 링크 넣어주면 끝난다

필요한건

유튜브 동영상 ID 와

썸네일 품질형식? 해상도? <- 이게 정해져있더라

일단 함수는

저기 동영상링크부분 youtu.be/ 이후에 나열되는 이상한 문자가 필요하다

그 문자가 바로 동영상 ID

썸네일 주소는 두가지

http://img.youtube.com/vi/동영상ID/이미지형식.jpg

http://i.ytimg.com/vi/동영상ID/이미지형식.jpg

이미지형식이 해상도와 품질쪽인데

- 고품질 (480 x 360) : hqdefault.jpg

- 중간품질 (320 x 180) : mqdefault.jpg

- 보통품질 (120 x 90) : default.jpg

- 동영상 배경이미지 (480 x 360) : 0.jpg

구간별은 1.jpg , 2.jpg 등으로 설정할수도있다

가장 중요한 함수는

그누보드기준 lib.service.php 에 붙여넣어서 사용했다

//유튜브썸네일
if ( ! function_exists('get_youtube_code')) {
    function get_youtube_code($url) { 

        if (empty($url) || !$url) { 
            return;
        } 

        preg_match('@https?://(?:www\.)?youtube\.com/(?:watch\?|\?)[^>]*v[/=]([a-zA-Z0-9-_]+)@', $url, $matches);
        $code = $matches[1];

        if (!$code) { 
            preg_match('@https?://(?:www\.)?youtu\.be/([a-zA-Z0-9-_]+)@', $url, $matches);
            $code = $matches[1];
        }

        return $code;

    } 
}

아래는 적용모습!