60년만 코딩하자 ( 010.9289.9979 )

목동코딩: 코딩교육

​

프로젝트를 하면서 시간이 쫓기다 보면, 사용된 방법을 정리하지 못하는 경우가 있다.

그래서 이번에는 다음에 사용하기 위해서 조금 했갈렸던 ajax return 처리 방법을 정리해둔다

ajax call 할때 dataType :  "json" 이라고 하지 않아도 사용상에 문제가 없다.

​

ajax call

<script>
    $('tr').click(function() {
        // $(this).find("td:eq(0)").text();
        var ser = $(this).attr('ser');
        var con = confirm("선택한 메뉴를( " + $(this).attr('menu_name') + " ) 삭제할까요?");
        if(con == true){
            var form_data = {
                ser: ser
            };
            $.ajax({
            type: "POST",
            url: "./menu_deleteCart.php",
            data: form_data,
            success: function(response) {
                var data = $.parseJSON(response);
                alert(data.status);
                if(data.status == "OK"){
                    location.reload();
                }
                if(data.status == "NO"){
                    //삭제 실패함
                }
            }
        });   
        }
        else if(con == false){
            //삭제 취소
        }

 
    });

</script>
​

​

delete.php

$ser = $_POST[ser];

$response = array();

$sql = "";
$sql = $sql." Delete From tbl_cart ";
$sql = $sql." where ser = '$ser' ";

if (!mysqli_query($conn_hof,$sql))
{
  echo("Error description: " . mysqli_error($conn_hof));
  $response['status'] =  "NO";
}else {
  $response['status'] =  "OK";
}

echo json_encode($response);

목동코딩 : 코딩교육

문법 - strlen(),  mb_strlen()

strlen( string ) : string : 길이를 구할 문자열.

​

echo strlen( '123 abc' );

Space 포함 7을 출력다.

echo strlen( '가나다' );

Byte 수를 계산하여 출력.

​

mb_strlen( string [, encoding] ) : string : 길이를 구할 문자열.

encoding : 인코딩 방식, euc-kr, utf-8

echo mb_strlen( '123 abc' );

는 7을 출력합니다.

​

echo mb_strlen( '가나다', 'euc-kr' );

는 6을 출력합니다.

​

echo mb_strlen( '가나다', 'utf-8' );

는 3을 출력합니다.

​

여기서 나는 echo mb_strlen( '가나다', 'utf-8' );을 사용해서 글자수를 구했다

목동코딩 : ajax로 로그인 처리시 버튼 clcik 하면 추가로 버튼을 생성하는 방법

추가적인 동작이 필요한 프로그램에 사용하면 좋을거 같다

<script>
$(function (){
    $("#login").on("click",function(){
        $("div").html("<button id='button2'>click</button>");
    });
});
 
</script>
form에서 submit 실행시 처리방법

$("#login").submit(function(event){
    var mesg = "실패"
    if($(":text").val()=='ok'){
        mesg = "성공";
    }
});
​

다음은 폼 이벤트 처리이다

    <form>
        <input id="target" type="text">
        <input type="text">
    </form>
    <button id="id1">focus</button>
    <button id="id2">blur</button>

...

$(function (){
   $("#target").focus(function(){
       $(this).css("background", "red");
   });
   $("#target").blur(function(){
       $(this).css("background", "");
   });
   $("#id1").on("click",function(){
       $("#target").focus();
   });
   $("id2").on("click",function(){
       $("#target").blur();
   })

   $("select").change(function(){
        $("div").text($("option:selected").text());
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
..
..
<div class="container-login100-form-btn">
	<div class="wrap-login100-form-btn">
	<div class="login100-form-bgbtn"></div>
	<button id="login"  class="login100-form-btn">
		Login
	</button>
	</div>
</div>

(1)번
<div class="container-login100-form-btn">
	<div class="wrap-login100-form-btn">
	<div class="login100-form-bgbtn"></div>
		<button               id="login"  class="login100-form-btn">
				Login
		</button>
	</div>
</div>

(2)번
<div class="container-login100-form-btn">
	<div class="wrap-login100-form-btn">
	<div class="login100-form-bgbtn"></div>
		<button type="button" id="login"  class="login100-form-btn">
				Login
		</button>
	</div>
</div>

목동코딩 : 코딩교육

​

웹 시스템을 개발하면서 결과에 따라서 서로 다는 내용의 팝업을 띄워야 하는 경우에 사용하는 방법이다

<div>로 Layer를 만들고 , Ajax 결과에 따라서 각각 다른 내용의 HTML을 띄우는 방법을 정리해둔다.

<div id="layerPopup"  class="text-center;" style="position:absolute; z-index:10; width:500px; height:500px; left:50%; top:50%; margin-left:-250px; margin-top:-250px;  background-color:white; display:none;">
        <div id="layerPopup_content">
        
        </div>
        <button type="button" id="btn_layerPopup_hide">팝업닫기</button>
</div>


<script>
    $(document).ready(function(){

        $('#btn_layerPopup_hide').click(function(){
            $('#layerPopup').hide();
        });
    });
</script>

<script>
        function checkEvent(){
            alert("이벤트 체크");
 
            $.post("phpCheckEvent.php", {
            User: "01092899979",
            Message: "message"
            }, function(data) {
                alert(data);
                if (data == "SUCCESS") {
                    $('#layerPopup_content').load('./popupOK.html', function(){
                        $('#layerPopup').show();
                    });
                } else {
                    $('#layerPopup_content').load('./popupNO.html', function(){
                        $('#layerPopup').show();
                    });
                }
            });
        }

</script>

popupOK.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트정보</title>

</head>
<body>
    <div class="container" >
        <div class="row text-center"  style="padding:20px ;">
            <div class="col-lg-12 col-md-12 ">
                <h1>출석이벤트에 당첨됐습니다</h1>
            </div>
        </div>
    </div>
</body>
</html>



popupNO.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트정보</title>

</head>
<body>
    <div class="container" >
        <div class="row text-center"  style="padding:20px ;">
            <div class="col-lg-12 col-md-12 ">
                <h1>다음 기회를 이용해 주세요</h1>
            </div>
        </div>
    </div>
</body>
</html>

목동코딩: 코딩교육, 프로젝트수업

​

이번에 새로이 오픈할 프랫폼을 개발하면서 새롭게 느낀점이 있었다.

엔지니어 마인드로 살다보니, 데이타베이스를 뒤져서 원하는 데이터를 가져오면, 결과를 바로 화면에 표시 하는 줄 알았는데, 마케팅 마인드는 약간의 뜸을 들여야할 필요성을 느꼈다. 그래서 5초간 대기 화면이 나오고 결과를 보여주는 대기 기능을 만들었다

<!--로딩바-->
<div id="loading" style="margin-left: 0px;">
    <img src="./images/buttons/loading.gif">
    <p>결과를 준비중입니다. 잠시기다려주세요....</p>
</div>

<div>
    <h3 id="getDB" style="display:block;padding:1em 0.2em;text-align:left;"></h3>
</div>

$(document).ready(function(e) {
    setTimeout(function() {
        $("#getDB").html("결과 보기를 크릭해 주세요");    
        $("#Code<?=$LEVEL_3?>").css('display',"block")          
        $("#loading").css('display',"none")          
    }, 5000 );
});

목동코딩: 코딩교육

​

이번 프로젝트는 조금 일반적이지 않은 프로젝트이다. 쇼핑몰과 비슷한데 공급처별로 보여주고 집계를 해서 주문을 하는 프로젝트이다.(아래화면)

그러다 보니 표시되는 input 태그에 각각의 공급처가 표시 되어야 한다. 그리고 주문시에는 각 공급처 별로 주문저장을 해야한다. 그래서 <input ss="Brand"/> 라는 커스텀 태그를 만들어서 사용하였다.

<script>
    function toOrder() {
        var number_input = $("input[ss=Brand]");
        console.log(number_input);

         
        $.each(number_input, function(index, value) {
            console.log('IDX :' + index);
            console.log(value);
            console.log('ID =' + $(value).attr("id"));
            console.log('NAME =' + $(value).attr("name"));
            console.log('VALUE =' + $(value).val());
        });
}
</script>

<input ss="Brand" name="Brand"  value="100">

이제는 split 하여서 사용하면 되겠다

목동코딩: 코딩교육

​

Php로만 프로젝트를 하다가, 갑자기 NGINX 에서 Kestrel 로 리버싱하여서 Asp.net mvc 프레임으로 개발하면서 많은 고생을 하고 있다. 그중에 SQL에 익숙한 나로선 해결 방법을 찾는데 많은 고생을 한다. 그래서 이미 알고 있는 사람한테는 웃음을 짓겠지만 나는 추후에 보기 위해서 기록한다

            FranchiseePoint d = new FranchiseePoint();

            d.RegiDate = c.RegiDate;
            d.FranchiseeId = c.FranchiseeId;
            d.point = c.point;
            d.비고 = c.비고;
            DB.FranchiseePoint.Add(d);

            DB.SaveChanges();

http://nooh-system.com/