티스토리 뷰

프로그래밍 공부/에이블스쿨

[웹 프로그래밍] login.js, join.js, contents.html, css,js 만들기

sikaro 2024. 5. 10. 15:29
반응형

실제 활용

login.index에 있는 footer 아래에 쓴다.

<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/login.js">

이러면 js/login.js 파일을 만들어주면 된다.

 

var msgs = {
   login: "login your account.",
   fail: "There is no account or wrong password."
}

var Event = {
  login: function () {
    $("#login-btn").on("click", function () {
      var params = {
        email: $("#email").val(), //이메일 입력
        pw: $("#pw").val(), //패스워드 입력 받기
      };
      console.log(params);
      if (params.email === "admin@kt.com" && params.pw === "1234") { //해당 이메일과 로그인이 입력되면
        console.log("login!"); //패스
        $(".msg").text(msgs.login);
      } else {
        console.log("fail!"); //아니라면 fail
        $(".msg").text(msgs.fail);
      }
    });
  },
};

Event.login();

msg는 해당하는 파일들에 대한 msg class를 따로 만들어서 설정해둔 것이다.

 

추가적으로 메세지가 안보이게 하고, 로그인할 때 보이게 한다.

.msg{
    display: none; 
    /* 처음에 안보이게 바꾸고, 나중에 자바스크립트로 보이게 바꾼다. */
    float: left;
    height: 0;
    font-size : 10px;
    color: yellow

}

 

자바스크립트에서 chaining 해준다.

$(".msg").text(msgs.login).show();

 

그런데 이렇게 하면 전역 영역에 있기 때문에 함수가 실행된다.

(fuction(){}())

이렇게 한 뒤, 중괄호 안에 모든 코드를 넣어준다.

 

(function() {

var msgs = {
  login: "login your account.",
  fail: "There is no account or wrong password.",
};

var Event = {
  login: function () {
    $("#login-btn").on("click", function () {
      var params = {
        email: $("#email").val(), //이메일 입력
        pw: $("#pw").val(), //패스워드 입력 받기
      };
      console.log(params);
      if (params.email === "admin@kt.com" && params.pw === "1234") {
        //해당 이메일과 로그인이 입력되면
        console.log("login!"); //패스
        $(".msg").text(msgs.login).show();
      } else {
        console.log("fail!"); //아니라면 fail
        $(".msg").text(msgs.fail).show();
      }
    });
  },
};

Event.login();
})();

 

로그인 페이지가 완성되었다.

 

Join.js

(function () {
  var msgs = {
    check: "Check Your Password.",
    join: "Joined Your Account.",
  };
  var Event = {
    join: function () {
      $("#join-btn").on("click", function () {
        var params = {
          id: $("#email").val(),
          pw: $("#pw").val(),
          ckpw: $("#ckpw").val(),
          addr: $('input[name="addr"]:checked').val(), //input에 있는 addr에서 체크된 곳을 가져온다.
          birth: $("#birth").val(),
          subscription: $("#subscription").val(), //subscription에 있는 value data를 가져온다.
        };
        if (params.pw != params.ckpw) { //동일하면 join 해준다. pamras.pw와 
          console.log("check password!");
          $(".join-wrap>.msg").text(msgs.check).show(); //나중에 백엔드 할 떄는 이메일 중복도 추가해준다.
        } else { 
          $(".join-wrap>.msg").text(msgs.join).show();
        }
      });
    },
  };
  Event.join();
})();

페이지를 체크하는 해당 함수를 만든다.

 

Contents 페이지 만들기

로그인 페이지에 있던 html을 전부 가져온다.

그리고 main 부분에 table을 만들어서 쓴다.

<main class="contents">
  <section class="wrap">
    <div class="contents-wrap">
        <input type="text" class="input-address" va
        <button class="search">Search</button>
        <!-- 버튼과 입력창 만들기 -->
    </div>
    <div class="contents-wrap table-wrap">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>ID</th>
                    <th>Address</th>
                    <th>Latitude</th>
                    <th>Logitude</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1/td>
                    <td>1234</td>
                    <td>합정동</td>
                    <td>12.34</td>
                    <td>56.78</td>
                    <td>마포구 합정동</td>
                </tr>
                <tr>
                    <td>1/td>
                    <td>1234</td>
                    <td>합정동</td>
                    <td>12.34</td>
                    <td>56.78</td>
                    <td>마포구 합정동</td>
                </tr>
            </tbody>
        </table>
    </div>

thead의 th는 테이블의 맨 윗행, 각 열을 의미한다.

당연하게도 tbody는 그 아래에 들어간다.

 

행을 바꿀 때는 tr로 감싸줘야 한다.

css에서 다음과 같이 수정하고, main의 class를 없게 수정한다.

main.contents>section{
    display: table-cell;
    vertical-align: middle;
}

 

그러면 위로 올라간다.

 

contents.css

main>section>.contents-wrap{
    padding-top:40px;
}
/* 버튼을 따로 띄워놓는다. */

main>section>.contents-wrap>.input-address,
main>section>.contents-wrap>.search {
    border : none;
    border-radius: 5px;
    font-size: 16px;
    padding: 10px;
}
/* 버튼의 사이즈를 패딩으로 만든다. */

/* 해당 버튼만 맞는 스타일을 지정해준다. */
main>section>.contents-wrap>.search {
    border: 1px solid #28a745;
    background: none; 
    color: #28a745;
    cursor: pointer;
}

main>section>.contents-wrap>.search:hover {
    color: white;
    background-color: #28a745;
}

main>section>.table-wrap{
    padding-top: 20px;
}
/* 테이블과 버튼 사이의 간격 */

main>section>.table-wrap>table{
    margin: 0 auto;
    border-collapse: collapse;
    /* 해당 css 스타일하고 border하고 같이 있어서 들어간다. */
}

table tr{
    border-bottom: 1px solid gray;
}

table th, table td{
    padding: 10px
}

 

contents.js

 <div class="contents-wrap table-wrap" style="display: none;">

html의 속성 값으로도 스타일을 적용 가능하다.

 

var Util = {
    round:function(data){
        return Math.round(Number(data)*100)/100;
    }
}

var Event = {
  getContents: function () {
    $(".search").on("click", function () {
      //클릭이 발생했을 때 실행
      var addr = $(".input-address").val(); //input에 있는 value를 가져온다
      var url = "https://apis.zigbang.com/v2/search?leaseYn=N&q=" + addr + "&serviceType=원룸";

      $.getJSON(url, function (response) {
        console.log(response.items); 
        var items = response.items;
        var tag='';
        for(var i =0; i<items.length; i++){
            tag += '<tr>';
            tag += '    <td>' + (i + 1) + '</td>';
            tag += '    <td>' + items[i].id + '</td>'; //각각의 items에 있는 걸 넣어준다.
            tag += '    <td>' + items[i].name + '</td>';
            tag += '    <td>' + Util.round(items[i].lat) + '</td>';
            tag += '    <td>' + Util.round(items[i].lng) + '</td>';
            tag += '    <td>' + items[i].description + '</td>';
            tag += '</tr>';
            
            }
            $('.table-wrap > table > tbody').html(tag);
            $('.table-wrap').show();
      });
    });
  },
};
Event.getContents();

 

각각의 item을 받아오고, 그걸 실행하는 js이다.

 

다음 주에는 로그인을 하고 출력이 되는 것까지 한다.

로그인이 되어 있는 상태에서는 바로 컨텐츠가 나오는 거 까지 해볼 것이다.

 

사실 jquery보다 fetchapi, axios를 선호한다.

fetchapi가 더 좋다.

반응형