달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
2012. 10. 2. 11:29

jsbin 2.9.x 커스텀 단축키부분 분석 Study/JS&Ajax2012. 10. 2. 11:29

3&4번 ( Commit Log 출력 , 단축키 추가 (login,show list))

한번 분석하고 나니 자잘한거 추가하는 것은 그리 어렵지 않았다.

list보는곳에서 소스축약 대신 commit log를 출력하도록 수정하였다.

먼저 list내역을 뿌려주는 부분은 app.php에 showSaved 함수에서 쿼리 결과를 조회하고 list-home-code.php를 include하여 결과값을 출력한다. 단순하게 처리하였다. 


list-home-code.php 에서 해당 내용 수정

$commit = $bin['commit'];
<td class="title"><a href="<?=$url?>edit"><?=$commit?></a></td>
다음은 단축키 부분 추가에 대한 것이다. 단축키는 jsbin.js에서 추가 가능한데.. 함수는 function Fc(o, u) 에서 진행된다.
다음 내용을 추가해 주었다.
//changhwa
} else if (u.metaKey && u.which == 51){
    $("#login").click();
    u.stop();
} else if (u.metaKey && u.which == 76){
    location.href='http://'+document.domain+'/list';
    u.stop();
} 



:
Posted by 유쾌한순례자
2012. 10. 2. 11:23

jsbin2.9.x 커스텀 연구 Study/JS&Ajax2012. 10. 2. 11:23

1번커스텀결과 ( commit log 남기기 )



생각보다 Logic이 복잡히 구현 되어 있어 분석하는데 애를 먹었다.
대부분 Ajax로 구현되어 있는데 이상하게 디버그가 잘 안되더라...
액션이 처리되는 방식이... 내가 처음 예상한바와 다르게 동작하여.. 찾는데 꽤나 걸린 것 같다.
우선 값을 넘기는 부분에 대한 처리가 필요하여 php 액션을 호출하는 부분을 찾았다.

href= < 이건 무슨의미로 적어 둔지는 모르겠다 (빼도 정상적으로 동작함..)
즉 a.save click시 해당부분으로 와서 셋팅후 cd라는 함수를 호출한다.

해당부분에서 ajax로 값을 넘겨준다.. 그래서 이부분에 commit Log를 작성하도록했다.
var commitLog = prompt("commit log","");
해당 부분은 자바스크립트에서 입력창을 받고 싶어서 추가하였다.
( ie에서는 좀 밉게 나와서 수정할 필요는 있을듯..)
.append('<input type="hidden" name="commitLog" />'); 
값을 넘기기 위한 hidden 필드 생성
X.find("input[name=commitLog]").val(commitLog);
commitLog value에 값을 지정하였다.
//save action
$commitLog = @$_POST['commitLog'];
commitLog에 값 지정
    $sql = sprintf('insert into sandbox (javascript, html, created, last_viewed, url, revision, commit) values ("%s", "%s", now(), now(), "%s", "%s", "%s")', mysql_real_escape_string($javascript), mysql_real_escape_string($html), mysql_real_escape_string($code_id), mysql_real_escape_string($revision), mysql_real_escape_string($commitLog));
하고 나면 정상적으로 insert됨을 확인하였다.
이상한건.. action 동작이 edit -> save이렇게 동작한다는점.
이름에 혼동이 오게 되어있다.. 확인하자.
:
Posted by 유쾌한순례자
갑자기 php로 개발하게 되버려서 회원가입시 비밀번호 체크 부분을 구현해둔 것 정리.

ajax 처리를 하는 JS 부분

function requestPassword(){

if(document.regForm.password.value == document.regForm.password1.value){
request = getXMLHttpRequest();
request.onreadystatechange=responsePassword;
var url = "./action/checkPassword.php";
var param = "password=" + document.regForm.password.value + "&password1=" +document.regForm.password1.value;
//alert(param);
request.open("POST",url,true);
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Cache-Control","no-cache, must-revalidate");
request.setRequestHeader("Pragma","no-cache");
request.send(param);
}else{
document.all.passMsg.innerText="  비밀번호가 일치하지 않습니다.";
document.regForm.password.value="";
document.regForm.password1.value="";
document.regForm.password.focus();
}
}


function responsePassword(){
if(request.readyState == 4){
if(request.status == 200){
var text = request.responseText;
var msg = null;
if(text=="0"){
msg = "  비밀번호는 영문/숫자/특문 포함 8자리 이상입니다.";
document.regForm.password.value="";
document.regForm.password1.value="";
document.regForm.password.focus();
}
else{
msg = "  사용가능한 비밀번호 입니다.";
}
document.all.passMsg.innerText = msg;
}
else{
alert("실패");
}
}
}

그 다음 간단한 정규식으로 체크한 ./action/checkPassword.php 부분

<?
$password = $_POST["password"];
$password1 = $_POST["password1"];
if(preg_match('/[0-9]/',$password) && preg_match('/[a-zA-Z]/',$password) &&                                              preg_match('/[^0-9a-zA-Z]/',$password) && strlen($password)>=8){
echo "1";
}
else{
echo "0";
}
?>


'Study > JS&Ajax' 카테고리의 다른 글

jsbin 2.9.x 커스텀 단축키부분 분석  (0) 2012.10.02
jsbin2.9.x 커스텀 연구  (0) 2012.10.02
:
Posted by 유쾌한순례자