개발노예 코드와 일상

php 쿼리를하다가

등록된 db에서 그룹별로 묶어서 그룹수와 그룹별 데이터갯수를 구해야했다

통계 그래프로 나타내야해서 수를 카운트하는게 중요했는데

일단 그룹별 총 수는

select count(*) as cnt, db_group from [] where [] group by db_group 으로 

뽑아낼수있었고 그래프에다가는 배열로 담아서 뿌려줫다

그룹의수는 이쿼리에서 그냥 카운트해도 되기는하는데

select count(cnt) as cnt, db_type
                            from ( select count(*) as cnt, db_count, db_type from {$tbl_x} where wr_id = '{$list[$i]['wr_id']}' group by db_count, db_type ) as a
                        where (1) group by db_type order by db_type desc

이건 실제 적용한 코드인데 몇개 더 추가되긴했지만 이런식으로도 각각 수를 구했다.

이중쿼리,,인가 이것도 익숙해져야하는데 가끔씩만 쓰다보니 할때마다 헷갈리네

검색 서치결과페이지에서

검색어에 하이라이트를 줘야겠다

php로 하면 편하지만 php를 사용하는 홈페이지가 아니어서

javascript로 따로 결과에 추가해줬다

//직원 검색어 하이라이트 추가
search_filter();    
function search_filter(){
    var search = $('#searchKeyWord').val();
    var sf_cnt = 0;
    $(".sc_td, .sch_li p, .table_view td a").each(function () {
        var regex = new RegExp(search,'gi');
        
        $(this).html( $(this).text().replace(regex, "<span class='text-danger bold'>"+search+"</span>") );
        
        sf_cnt = sf_cnt+1;
    });
};  

text-danger 클래스에 css로 컬러를 넣어놨다

chart js 를 사용해서 통계 그래프를 만들었다

형태는 pie 형태였는데

문제는 그래프의 갯수가 10여개가 넘어간다는것

그래프마다 분류 갯수나 타이틀 배경색을 다 다르게해달라는 요청이었다

타이틀이나 배경색은 뭐 그런다 치더라도

pie그래프가 legend 갯수에 따라 그래프 크기가 아예 줄어들어버려서

html로 따로빼야하나.. 또 색상은 어케맞추나 하고있었는데

legend custom 하는 코드가 있어서 적용시켜서 다행이었다

options: {
            responsive: true,
            title: {
                    display: true,
                    text: '전체',
                    fontSize:20
                },
            plugins: {
                labels: [
                  {
                    render: 'value',
                    fontColor: 'white',
                    overlap: false,
                    precision: 2,
                    fontSize: 15
                  }
                ]
            },
            legend: false,
            legendCallback: function(chart) {
              var text = [];
              text.push('<ul class="' + chart.id + '-legend">');
              for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
                text.push('<li><span style="background-color:' + 
                chart.data.datasets[0].backgroundColor[i] + '">');
                text.push('</span>');  

                if (chart.data.labels[i]) {
                  text.push(chart.data.labels[i]);
                }
                text.push('</li>');   

              }
              text.push('</ul>');
              return text.join("");
            }
        }

옵션 부분에 이렇게 legendCallback 을 추가해서 css로 수정적용했다

그누보드 기반 게시판을 활용해서 페이지를 만드는데

wr_id를 물고 데이터를 대량으로 업로드하는 요청이 있었다

천단위가 넘어가서 엑셀로 업로드를 시켜야했고

게시글 아이디인 wr_id를 물고 다른 db에 일괄 업로드시키는 방식으로 진행

문제는 게시판 write 페이지에서 submit 시킬때 write_update에서 동시에 처리하려니

엑셀업로드가 안되는것

또 업로드를 나누자니 좀 직관적이지 않아보였다 뭔가 말로 설명하기어렵군

하여튼 ajax로 파일을 보내서 따로 엑셀업로드시키고 나머지는 submit 시키기로했다

var form = $('#fcowork')[0];
var formData = new FormData(form);
var xls_wr_id = '';

        formData.append("files", $("#upload")[0].files[0]);
        formData.append("xls_wr_id", xls_wr_id);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            data:formData,
            url:'testset.php',
            success: function(data) {
                console.log(data);

            }
        })

이런 코드가 되었고 기존 ajax할때와 다른점은~
entype을 작성해주고 data를 append 해서 따로 보냈다
잘 작동해서 다행이다 일단은?

php 가 아니라 java로 작업된 홈페이지에서

주소창에찍힌 파라미터를 가져와야햇다

php면 그냥 GET으로 가져오고 말겠는데

javascript를 사용해야해서 찾아봤다.

보통 물음표와 & 표시로 구분되어있어서

이걸 기준으로 짤라서 가져오는 형식이었다

var getParameters = function (paramName) { // 리턴값을 위한 변수 선언
var returnValue;

// 현재 URL 가져오기 
var url = location.href; 

// get 파라미터 값을 가져올 수 있는 ? 를 기점으로 slice 한 후 split 으로 나눔 
var parameters = (url.slice(url.indexOf('?') + 1, url.length)).split('&'); 

// 나누어진 값의 비교를 통해 paramName 으로 요청된 데이터의 값만 return 
for (var i = 0; i < parameters.length; i++) { 
    var varName=parameters[i].split('=')[0]; 
    if (varName.toUpperCase() == paramName.toUpperCase()) { 
        returnValue = parameters[i].split('=')[1]; 
        return decodeURIComponent(returnValue); 
    } 
} 

};

코드저장..

검색페이지를 만드는데

이번에는 주로하던 php 페이지가 아니라 java로 제작페이지여서

javascript로 검색결과에 검색어 표시를 해줘야했다

결과적으로는 크게 복잡하지않았다

search_filter();
function search_filter(){
var search = $('#searchKeyWord').val();
var sf_cnt = 0;
$(".sc_td").each(function () {
var regex = new RegExp(search,'gi');

    $(this).html( $(this).text().replace(regex, "<span class='text-danger bold'>"+search+"</span>") );

    sf_cnt = sf_cnt+1;
});

};

replace 함수를 사용하고있고
해당 구역에서 키워드 텍스트를 찾아서 span으로 한번 둘러싸주는 형식

순조롭게 적용되서 굳이었다

맥북을 사용해서 업무를 보게될거같다

그래서 셋팅을하는데

아오 짜증나서 죽을뻔

일단 나는 갤럭시폰유저고 아이폰은없다

그래서 맥북 사용하게되면서 apple id 를 만들고 이것저것 가입하는데

app store에서 앱좀 설치하려니 자꾸 

this apple id has not yet been used with the app store 오류가 뜨는거아닌가

구글링해보니 유명한 오류더라 안고치고뭐하는지

무한로그인 몇번하다가 빡쳐가지고 맥북에 샷건날릴뻔

거참;

하여튼 해결방법은 여러가지 해보다가 어떻게 되긴했는데

일단 apple 홈페이지에서 배송정보와 결제지불정보를 모두입력한다

뭐 나라를 맞춰야된다는소리도있고 일단 한국으로 다했고

이런거 해봐도 안됐었다

결국에 해결했던 방법은 mac에있는 music 앱에 들어간다

여기서 로그인해서 뭔 인증을 완료해야된다는데

아무리봐도 로그인버튼이없는거

그래서 일단 무료체험결제인가 뭔가를 누르니 로그인창이 떳다

거기서 로그인하고 뭐 정보 이것저것 등록하고

결제까지는안하고 로그아웃한다음에

앱스토어 로그인 하니 그제서야 로그인됐다 

후 이것때문에 스트레스가 이만저만

this apple id has not yet been used with the app store

에러 해결방법이었다

앞으로가 걱정이다 mac 

이미지 확대기능을 추가해달라는 요청이다

오픈된 코드가 많아서 작업은 어렵지않았다

javacsript 코드와 css 정도만 추가해주면 된다

이미지 해상도가 약간 영향을 미치긴하겠지만 크게 차이는없는듯?

일단 코드는

var target = $('.target');
//1
var zoom = target.data('zoom');

$(".target_wrap")
.on('mousemove', magnify)
.prepend("

var magnifier = $('.magnifier');

function magnify(e) {

// 마우스 위치에서 .magnify의 위치를 차감해 컨테이너에 대한 마우스 좌표를 얻는다.
var mouseX = e.pageX - $(this).offset().left;
var mouseY = e.pageY - $(this).offset().top;

// 컨테이너 밖으로 마우스가 벗어나면 돋보기를 없앤다.
if (mouseX < $(this).width() && mouseY < $(this).height() && mouseX > 0 && mouseY > 0) {
    magnifier.fadeIn(100);
} else {
    magnifier.fadeOut(100);
}

//돋보기가 존재할 때
if (magnifier.is(":visible")) {

    // 3
    var rx = -(mouseX * zoom - magnifier.width() /2 );
    var ry = -(mouseY * zoom - magnifier.height() /2 );

    //돋보기를 마우스 위치에 따라 움직인다.
    //돋보기의 width, height 절반을 마우스 좌표에서 차감해 마우스와 돋보기 위치를 일치시킨다.
    var px = mouseX - magnifier.width() / 2;
    var py = mouseY - magnifier.height() / 2;

    //적용
    magnifier.css({
        left: px,
        top: py,
        backgroundPosition: rx + "px " + ry + "px"
    });
}

}

//

-- css

/* 감싸는 div /
.target_wrap { position: relative; margin: 0 auto; width: 100%;}
/ 확대될 타겟이미지/
.target { display: block; width: 100%;}
/ 돋보기 */
.magnifier { width: 300px; height: 300px; position: absolute; border-radius: 100%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 3px 3px rgba(0, 0, 0, 0.25); display: none; z-index: 10000;}