키패드 누르기 - 2020 카카오 인턴십 프로그래머스 ( JavaScript )
최대한 직관적이게 소스코드를 만들어 보았습니다. 1. 키패드 모양의 배열을 만든다. (* = 11, # = 22 의로 임의의 숫자를 만들어 숫자 타입 만들기) 2. 왼손 오른손의 위치를 지정한 배열을 만든다. 3. 눌러야 할 위치값 측정 4. 손의 위치값과 눌러야 할 위치값 비교 5. 손 위치 변경 후 값 리턴 계산을 위한 함수 2개를 추가로 만들었습니다. find_num_loca = 눌러야할 위치값 측정 함수 check_lr = 왼손 오른손 중 선택 하는 함수 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49..
2021.09.28
PHP CRUD 모듈자료 입력/수정/삭제 모듈 - MSSQL_Version
안녕하세요. John Computer 입니다. 매번 페이지 / 메소드 마다 칼럼명과 데이터를 집어넣어서 만드는 번거러움을 없애기 위해서 동적으로 칼럼의 갯수와 상관없이 삽입 수정 삭제가 가능하게 쿼리문을 작성해 놨습니다. 사용법 또한 간단하니 다운받으셔서 이용하세요 사용법 1. input을 생성하여 insert_col = DB칼럼명 / insert_param = DB에 들어갈 데이터값 을 넣는공간을 만들어주세요. 2. insert_col의 경우 칼럼명을 보여질 필요가 없기 때문에 hidden으로 처리해주시면 됩니다. 3. ajax에 insert_page.php 경로를 url에 설정 해주시고 colunm / insert_param 과 같은 변수명은 그대로 작동하게 두고 TABLE 명만 바꿔 주시면 됩니다...
2021.06.07
no image
PHP POST content-length 파일 업로드 용량 오류.
게시판을 만들어서 사용중에 파일 업로드 제한을 한번쯤 보셨을 겁니다. PHP Warning : POST Content-Length of (업로드 사이즈) bytes exceeds the limit of (제한사이즈) bytes in Unknown on 등의 오류 메세지가 뜨게 될건데요. PHP폴더 이동 -> php.ini 우클릭 -> 편집 -> (POST 오류면) post_max_size = 32M 를 수정 / ( UPLOAD오류나면 ) upload_max_filesize = 32M 원하는 사이즈로 수정 하시면 됩니다.
2021.02.17
LED 저항값 계산기 (블로그) - 아두이노
권장 저항값 계산기 입니다. 전류 단위 mA로 되어있으니 잘 확인하고 입력해주세요. 입력 전압(V) 최소 전압(V) 전류(mA) 권장 저항값
2020.09.20
PHP 로그인 화면 구성 FORM 태그 POST 전송 mysql
안녕하세요. JohnComputer 입니다. 바로 앞에 올렸던 게시글을 참고하시면 도움이 됩니다.https://johncom.tistory.com/23 앞에서 설명했기에 소스코드 바로 첨부하겠습니다. 12345678910111213141516171819202122232425262728293031323334353637 HTML Forms ID: Password: function check_input() { if (!document.login_form.id_val.value) // login_form 이름을 가진 form 안의 id_val 의 value가 없으면 { alert("아이디를 입력하세요!"); document.login_form.id_val.focus(); // 화면 커서 이동 return; } ..
2020.09.04
no image
PHP form 전송 방법 POST / GET 이용방법
안녕하세요. Johncomputer 입니다. 이번에는 PHP 에서 기본적으로 Form에서 사용되는 POST / GET 방식입니다. GET은 기본적으로 URL에 정보를 담아서 전송됩니다. 그래서 보안에 취약하게 되죠 이런식으로 전송이 되기 때문에 무엇을 검색하는지 바로 알수 있죠. POST방식은 HTTP헤더 속으로 감춰줘서 비밀번호 같은 개인정보등을 전송하는 방식에서 사용됩니다. PHP에 간단한 예제를 보겠습니다. 123456789101112131415161718192021222324252627282930313233343536 HTML Forms ID: Password: function check_input() { if (!document.login_form.id_val.value) // login_for..
2020.09.04
no image
키보드 타이핑 효과 글자쓰기 효과 Typeit 예시 사용법
안녕하세요. John Computer 입니다.이번에 웹사이트를 제작하면서 새로운 오픈소스를 들고와서 사용해보았는데 한글로 만들어진 사용방법이 없어서직접 소스코드를 올립니다.아래 깃허브에 들어가셔서 다운로드 받으면 소스코드 안에 주석으로 한글설명 적혀있습니다.추가적인 기능은 개발자 사이트를 참고하셔서 이용하세요. 개발자 사이트 : https://typeitjs.com/ 블로그 내용 소스 :https://github.com/JohnComputer/typeIt_example
2020.09.03
HTML javascript 자바스크립트 로그인 화면 form 구성 빈칸 체크 focus placeholder
아이디 입력 창에서 입력 하지 않을 경우 경고 주는 방법.사용 방법 주석 확인. HTML Forms ID: Password: 12345678910111213141516171819202122232425262728293031323334353637 HTML Forms ID: Password: function check_input() { if (!document.login_form.id_val.value) // login_form 이름을 가진 form 안의 id_val 의 value가 없으면 { alert("아이디를 입력하세요!"); document.login_form.id_val.focus(); // 화면 커서 이동 return; } if (!document.login_form.pw_val.value) { a..
2020.08.28
반응형

최대한 직관적이게 소스코드를 만들어 보았습니다.

1. 키패드 모양의 배열을 만든다. (* = 11, # = 22 의로 임의의 숫자를 만들어 숫자 타입 만들기)

2. 왼손 오른손의 위치를 지정한 배열을 만든다.

3. 눌러야 할 위치값 측정

4. 손의 위치값과 눌러야 할 위치값 비교

5. 손 위치 변경 후 값 리턴

 

계산을 위한 함수 2개를 추가로 만들었습니다.

find_num_loca = 눌러야할 위치값 측정 함수

check_lr = 왼손 오른손 중 선택 하는 함수

 

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function solution(numbers, hand) {
//     numbers 배열  hand = right or left
    var answer = '';
    const numArr = [[1,2,3],[4,5,6],[7,8,9],[11,0,22]];// * = 11, # = 22 키패드 만들기
    const numLen = numbers.length;
    let lhLocation = [3,0];
    let rhLocation = [3,2];
 
    for(let i = 0; i < numLen; i++){
        let numLocation = find_num_loca(numArr,numbers[i]); // 위치 좌표값 받기
        answer += check_lr(numLocation,lhLocation,rhLocation,hand);
        console.log(numLocation);
        console.log(lhLocation);
    }
    return answer;
}
 
function find_num_loca(numArr,checkNum){
    let retR = 0;
    let retC = 0;
 
    for(let i = 0; i < numArr.length; i++){
        for(let j = 0; j < numArr[0].length; j++){
            if( numArr[i][j] === checkNum){
                return [i, j];
            }
 
        }
    }
}
 
function check_lr(numLocation,lhLocation,rhLocation,hand){
    if(numLocation[1=== 0){ 
        lhLocation[0= numLocation[0];
        lhLocation[1= numLocation[1];
        return 'L'
    }else if(numLocation[1=== 2){ 
        rhLocation[0= numLocation[0];
        rhLocation[1= numLocation[1];
        return 'R'
    }
    else// numLocation = 1 중간위치
        let leftSize = Math.abs(numLocation[0]-lhLocation[0]) + Math.abs(numLocation[1]-lhLocation[1]);
        let rightSize = Math.abs(numLocation[0]-rhLocation[0]) + Math.abs(numLocation[1]-rhLocation[1]);
 
        if(leftSize < rightSize){
            lhLocation[0= numLocation[0];
            lhLocation[1= numLocation[1];
            return 'L'
        }else if(rightSize < leftSize){
            rhLocation[0= numLocation[0];
            rhLocation[1= numLocation[1];
            return 'R'
        }else{
            if(hand === 'left'){
                lhLocation[0= numLocation[0];
                lhLocation[1= numLocation[1];
            }
            else {
                rhLocation[0= numLocation[0];
                rhLocation[1= numLocation[1];
            }
            return hand.substr(0,1).toUpperCase();
        }
    }
}
cs
반응형
반응형

module_CRUD.zip
0.04MB

안녕하세요. John Computer 입니다.

매번 페이지 / 메소드 마다 칼럼명과 데이터를 집어넣어서 만드는 번거러움을 없애기 위해서

동적으로 칼럼의 갯수와 상관없이 삽입 수정 삭제가 가능하게 쿼리문을 작성해 놨습니다.

사용법 또한 간단하니 다운받으셔서 이용하세요

 

사용법

1.  input을 생성하여 insert_col = DB칼럼명 / insert_param = DB에 들어갈 데이터값 을 넣는공간을 만들어주세요.

2.  insert_col의 경우 칼럼명을 보여질 필요가 없기 때문에 hidden으로 처리해주시면 됩니다.

3.  ajax에 insert_page.php 경로를 url에 설정 해주시고 colunm / insert_param 과 같은 변수명은 그대로 작동하게 두고 TABLE 명만 바꿔 주시면 됩니다.

 

## 한 화면에 여러 FORM이 존재 할 경우 FORM을 지정하는 선택자를 넣어주세요.

## 테이블명 이외에 바꿀내용은 없습니다.

 

 

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
 
<body>
 
  사번 : <input type="text" id="inputemp" class="form-control" name="insert_param">
  <input type="hidden" name="insert_col" value="emp_num" />
 
  이름 : <input type="text" id="inputname" class="form-control" name="insert_param">
  <input type="hidden" name="insert_col" value="name" />
 
  <input type="button" name="" value="등록" onclick="insert_event()" />
  <script src="./jquery.min.js"></script>
 
  <script>
    //입력 클릭시 insert해주는 php 로 데이터 전송하는 함수
    function insert_event() {
      var column_array = $("input[name=insert_col]").length//hidden 되어있는 input 갯수
      //배열 생성
      var column = new Array(column_array); //컬럼 배열선언
      //배열에 값 주입
      for (var i = 0; i < column_array; i++) {
        column[i] = $("input[name=insert_col]").eq(i).val();
      }
      var insert_param_array = $("input[name=insert_param]").length//input type text 개수.
      //배열 생성
      var insert_param = new Array(insert_param_array); //파라미터 배열선언
      //배열에 값 삽입
      for (var i = 0; i < insert_param_array; i++) {
        insert_param[i] = $("input[name=insert_param]").eq(i).val();
      }
      $.ajax({
        type: 'post',
        url: './forms/insert_page.php',
        async: false// 전역변수 설정 변수
        data: {
          url: url,
          column: column, //컬럼
          param: insert_param, //params
          TABLENAME: 'dbo.employee'//테이블명
        },
        success: function(data) {
          alert("입력되었습니다.");
          location.reload();
        },
        error: function(request, status, error) {}
      });
    }
  </script>
</body>
</html>
 
cs

insert Page 입니다. 여기소스를 참고하여 직접 input을 만들어 주세요.

 

 

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!--
===============================================================================
          insert 모듈
          // INSERT into xxx => SQL
          // VALUES ( yyy )        => SQL2
          // sum_sql = SQL + SQL2
-->
<?php
  include "데이터베이스 설정 경로";
  // DB를 입력하실 분은 DB Con 등 여러 설정을 넣어주세요.
 
  $TABLENAME = $_POST["TABLENAME"]; // 테이블명 가져오기
  $column = $_POST["column"]; // 칼럼명 가져오기
  $param = $_POST["param"]; // 파람값 가져오기
 
  $select_obj_length = count($column);    //컬럼수
  $a_length = count($param);    //value 수
 
  $sql = "INSERT into $TABLENAME";
  $sql2 = " VALUES (";
  $params = array();
  $sql .= "(";
 
  for ($i=0$i < $select_obj_length ; $i++) {
    if($i == $select_obj_length-1){
     $sql .= $column[$i];
     $sql2 .="?";
     break;
    }
    $sql .= $column[$i].",";
    $sql2 .="?,";
  }
 
  for ($j=0$j < $a_length$j++) {
    array_push($params,$param[$j]);
  }
 
  $sql .= ")";
  $sql2 .= ")";
 
  print_r($sql.$sql2);
  print_r($column);
  $sum_sql = $sql.$sql2;
 
  // $params = array(&$column[0], &$column[1], &$column[2]);
  print_r($param);
  sqlsrv_query($con$sum_sql$params);  // $sql 에 저장된 명령 실행
  sqlsrv_close($con);
?>
 
cs

 

insert_page를 이용하여 자동으로 쿼리문을 생성하여 줍니다.

 

나머지 수정 삭제도 첨부파일로 올리니 ajax -> data의 내용을 읽어보시고 본인 프로그램에 맞게 이용해 주시면 됩니다.

반응형
반응형

게시판을 만들어서 사용중에 파일 업로드 제한을 한번쯤 보셨을 겁니다. 

 

PHP Warning : POST Content-Length of (업로드 사이즈) bytes exceeds the limit of (제한사이즈) bytes in Unknown on

등의 오류 메세지가 뜨게 될건데요.

 

 

PHP폴더 이동 -> php.ini 우클릭 -> 편집 ->

(POST 오류면) post_max_size = 32M 를 수정 / ( UPLOAD오류나면 ) upload_max_filesize = 32M 원하는 사이즈로 수정 하시면 됩니다.

 

 

반응형
반응형

권장 저항값 계산기 입니다.


전류 단위 mA로 되어있으니 잘 확인하고 입력해주세요.



입력 전압(V)
최소 전압(V)
전류(mA)
권장 저항값
반응형
반응형

안녕하세요. JohnComputer 입니다. 

바로 앞에 올렸던 게시글을 참고하시면 도움이 됩니다.

https://johncom.tistory.com/23


앞에서 설명했기에 소스코드 바로 첨부하겠습니다.

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
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Forms</h2>
 
<form action="login_check.php" name="login_form" method="post">
  <label for="fname">ID:</label><br>
  <input type="text" id="id_val" name="id_val" placeholder="아이디"><br>
  <!-- input 박스 안 글자 넣기 = placeholder -->
  <label for="lname">Password:</label><br>
  <input type="password" id="pw_val" name="pw_val" placeholder="비밀번호"><br><br>
  <input type="button" value="로그인" onclick="check_input()">
</form>
<script type="text/javascript">
function check_input() {
    if (!document.login_form.id_val.value)
    // login_form 이름을 가진 form 안의 id_val 의 value가 없으면
    {
        alert("아이디를 입력하세요!");
        document.login_form.id_val.focus();
        // 화면 커서 이동
        return;
    }
    if (!document.login_form.pw_val.value)
    {
        alert("비밀번호를 입력하세요!");
        // 화면 커서 이동
        return;
    }
    document.login_form.submit();
    // 모두 확인 후 submit()
 }
</script>
</body>
</html>
 
cs

로그인 화면 구성입니다. 



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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?php
  $id_val = $_POST["id_val"];
  $pw_val = $_POST["pw_val"];
 
  print_r($id_val); // 화면에 값 보여주기
  print_r($pw_val);
 
  $con = mysqli_connect("localhost(DB서버)""root(DB아이디)""1234(DB페스워드)""TEMPDATA(DB명)");
  $sql = "select * from members(테이블명) where id='$id_val'";
  $result = mysqli_query($con$sql);
 
  $num_match = mysqli_num_rows($result);
 
  if(!$num_match)
  {
    echo("
          <script>
            window.alert('등록되지 않은 아이디입니다!')
            history.go(-1)
          </script>
        ");
   }
   else
   {
       $row = mysqli_fetch_array($result);
       $db_pass = $row["pw_val"]; // DB칼럼명
 
       if($passwd != $db_pass)
       {
 
          echo("
             <script>
               window.alert('비밀번호가 틀립니다!')
               history.go(-1)
             </script>
          ");
          exit;
       }
       else
       {
           session_start();
           $_SESSION["id"= $row["id_val"];
           $_SESSION["name"= $row["name"];
           // SESSION에 저장.
           mysqli_close($con);
           echo("
             <script>
               location.href = './login.php';
             </script>
           ");
       }
    }
 ?>
 
cs

PHP를 사용하여 POST로 값을 받고 MYSQL에 저장하는 방법입니다. 소스코드를 참고하셔서 한글로 적혀있는 부분들을
본인한테 맞게 수정하셔서 사용하시면 됩니다.


반응형
반응형

안녕하세요. Johncomputer 입니다.


이번에는 PHP 에서 기본적으로 Form에서 사용되는 POST / GET 방식입니다.


GET은 기본적으로 URL에 정보를 담아서 전송됩니다. 그래서 보안에 취약하게 되죠 

이런식으로 전송이 되기 때문에 무엇을 검색하는지 바로 알수 있죠.


POST방식은 HTTP헤더 속으로 감춰줘서 비밀번호 같은 개인정보등을 전송하는 방식에서 사용됩니다.



PHP에 간단한 예제를 보겠습니다.



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
32
33
34
35
36
<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Forms</h2>
 
<form action="login_check.php" name="login_form" method="post">
  <label for="fname">ID:</label><br>
  <input type="text" id="id_val" name="id_val" placeholder="아이디"><br>
  <!-- input 박스 안 글자 넣기 = placeholder -->
  <label for="lname">Password:</label><br>
  <input type="password" id="pw_val" name="pw_val" placeholder="비밀번호"><br><br>
  <input type="button" value="로그인" onclick="check_input()">
</form>
<script type="text/javascript">
function check_input() {
    if (!document.login_form.id_val.value)
    // login_form 이름을 가진 form 안의 id_val 의 value가 없으면
    {
        alert("아이디를 입력하세요!");
        document.login_form.id_val.focus();
        // 화면 커서 이동
        return;
    }
    if (!document.login_form.pw_val.value)
    {
        alert("비밀번호를 입력하세요!");
        // 화면 커서 이동
        return;
    }
    document.login_form.submit();
    // 모두 확인 후 submit()
 }
</script>
</body>
</html>
cs

전송하게 되는 페이지 입니다. FORM 태그에 보시면 POST방식으로 login_check로 보내게 됩니다.




1
2
3
4
5
6
7
<?php
  $id_val = $_POST["id_val"];
  $pw_val = $_POST["pw_val"];
 
  print_r($id_val); // 화면에 값 보여주기
  print_r($pw_val);
?>
cs

받는 login_check.php 입니다. 보시는 것과 같이 받아서 print_r 함수로 출력하게 되면 post로 보낸 id와 패스워드를 확인하실수 있습니다.

GET도 마찬가지입니다. GET으로 보내고 받을 때 


1
2
3
4
5
6
7
<?php
  $id_val = $_GET["id_val"];
  $pw_val = $_GET["pw_val"];
 
  print_r($id_val); // 화면에 값 보여주기
  print_r($pw_val);
?>
cs

위와 같이 이용해주시면 똑같은 결과를 얻을 수 있습니다.


반응형
반응형

안녕하세요. John Computer 입니다.

이번에 웹사이트를 제작하면서 새로운 오픈소스를 들고와서 사용해보았는데 

한글로 만들어진 사용방법이 없어서

직접 소스코드를 올립니다.

아래 깃허브에 들어가셔서 다운로드 받으면 소스코드 안에 주석으로 한글설명 적혀있습니다.

추가적인 기능은 개발자 사이트를 참고하셔서 이용하세요.


개발자 사이트 : 

https://typeitjs.com/


블로그 내용 소스 :

https://github.com/JohnComputer/typeIt_example





반응형
반응형

아이디 입력 창에서 입력 하지 않을 경우 경고 주는 방법.

사용 방법 주석 확인.


HTML Forms










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
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Forms</h2>
 
<form action="#이동할곳 URL#" name="login_form">
  <label for="fname">ID:</label><br>
  <input type="text" id="id_val" name="id_val" placeholder="아이디"><br>
  <!-- input 박스 안 글자 넣기 = placeholder -->
  <label for="lname">Password:</label><br>
  <input type="password" id="pw_val" name="pw_val" placeholder="비밀번호"><br><br>
  <input type="button" value="로그인" onclick="check_input()">
</form>
<script type="text/javascript">
function check_input() {
    if (!document.login_form.id_val.value)
    // login_form 이름을 가진 form 안의 id_val 의 value가 없으면
    {
        alert("아이디를 입력하세요!");
        document.login_form.id_val.focus();
        // 화면 커서 이동
        return;
    }
    if (!document.login_form.pw_val.value)
    {
        alert("비밀번호를 입력하세요!");
        // 화면 커서 이동
        return;
    }
    document.login_form.submit();
    // 모두 확인 후 submit()
 }
</script>
</body>
</html>
 
cs


반응형