상세 컨텐츠

본문 제목

2023.02.01-로그인/호텔

Javascript

by 연을 2023. 2. 1. 17:29

본문

728x90

<과제 : 로그인 화면 만들기>

<home>

<!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>Document</title>
</head>
<style>
    table{
        border-collapse: collapse;
        background-color: rgba(0, 0, 0, 0);
    }
    body{
        background : url('hotel.jpg');
        padding: 20px;
        background-size: 1400px;
    }
    td{
        text-align: left;
    }
    a{
        color: white;
    }
</style>
<body>
    <table>
        <tr>
            <td><a href="login.html">로그인&nbsp;|</a><a href="signin.html"> 회원관리</a></td>
        </tr>
    </table>
</body>
</html>

<코드>

맨 위에 로그인과 회원관리

<login>

<!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>Document</title>
</head>
<style>
    table{
        border: 5px solid rgb(248, 226, 198);
        border-radius: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 300px;
        background-color:rgb(248, 226, 198);
        opacity: 0.9;
        box-shadow: 5px 5px lightgray;
    }
    td{
        width: 100px;
        height: 50px;
    }
    button{
        background-color:rgba(0, 0, 0, 0); 
        color:rgb(175, 131, 131); 
        border: 1px solid rgb(175, 131, 131); 
        border-radius: 5px;
    }
    button:hover{
        color: white;
        background-color: rgb(175, 131, 131);
    }
    body{
        background : url('hotel1.jpg');
        padding: 20px;
        background-size: 1400px;
    }
    input{
        outline: none;
    }
    a{
        color: rgb(175, 131, 131);
    }
</style>
<body>
    <table>
        <tr>
            <td>ID </td><td><input type="text" style="width: 120px;" id="login" placeholder="ID" ></td>
        </tr>
        <tr>
            <td>PASSWORD </td><td><input type="password" style="width: 120px;" id="password" placeholder="PASSWORD"></td>
        </tr>
        <tr align="center" width="100px">
            <td colspan="2"><button id="checklogin">로그인</button><button id="cancle">취소</button></td>
            
        </tr>
        <tr>
            <td></td>
            <td align="right"><a href="signin.html">회원가입</a></td>
        </tr>
    </table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#checklogin',function(){
        if($('#login').val()==''){
            alert('아이디를 입력하세요');
        }else if($('#password').val()==''){
            alert('비밀번호를 입력하세요');
        }else{
            location.href='home.html';
        }
        
    })
    .on('click','#cancle',function(){
        location.href='home.html';
    })
</script>
</html>

<결과>

home화면에서 로그인을 눌렀을 때 들어가지는 화면 로그인이나 취소를 하면 들어가는 화면 회원가입을 누르면 들어가는 화면
맨 위에 로그인과 회원관리

<signin>

<!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>Document</title>
</head>
<style>
    table{
        border: 1px solid lightgray;
        border-radius: 5px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 250px;
        background-color:lightgray;
        opacity: 0.8;
        width: 270px;
        box-shadow: 5px 5px;
    }
    td{
        width: 100px;
        height: 30px;
    }
    button{
        background-color:rgba(0, 0, 0, 0); 
        color:gray; 
        border: 1px solid gray; 
        border-radius: 5px;
    }
    button:hover{
        color: white;
        background-color: gray;
    }
    body{
        background : url('hotel3.jpg');
        padding: 20px;
        background-size: 1400px;
    }
    span{
        font-size: 2px;
        color: red;
    }
</style>
<body>
    <table>
        <th colspan="2"><h2>회원가입</h2></th>
        <tr><td>아이디 </td><td><input type="text" style="width: 130px;" id="login"  placeholder="아이디 입력."></td></tr>
        <tr><td>비밀번호 </td>
            <td><input class='pw' type="password" style="width: 130px;" id="password" placeholder="비밀번호 입력."></td></tr>
        <tr><td>비밀번호확인 </td>
            <td colspan="2"><input class='pw' type="password" style="width: 130px;" id="checkpassword" placeholder="비밀번호 다시 확인.">
            <span id="same" size="'5"></span></td></tr>
        <tr><td>실명 </td><td><input type="text" style="width: 130px;" id="name" placeholder="실명 입력."></td></tr>
        <tr>
            <td>성별</td>
            <td><input type="radio" name="gender" id="gender" value="남자">남성
                <input type="radio" name="gender" id="gender" value="여자">여성</td>
        </tr>
        <tr>
            <td>번호</td><td><input type="text" style="width: 130px;" id="mobile" placeholder="핸드폰 번호 입력."></td>
        </tr>
        <tr >
            <td colspan="2" align="left">관심분야<br>
                <input id='interest' type="checkbox" name="interest" value="정치">정치&nbsp;
                <input id='interest' type="checkbox" name="interest" value="경제">경제&nbsp;
                <input id='interest' type="checkbox" name="interest" value="사회">사회<br>
                <input id='interest' type="checkbox" name="interest" value="문화">문화&nbsp;
                <input id='interest' type="checkbox" name="interest" value="종교">종교&nbsp;
                <input id='interest' type="checkbox" name="interest" value="제테크">제테크<br>
                <input id='interest' type="checkbox" name="interest" value="연예">연예&nbsp;
                <input id='interest' type="checkbox" name="interest" value="IT">IT&nbsp;
                <input id='interest' type="checkbox" name="interest" value="스포츠">스포츠<br><br></td>
                
        </tr>
        <tr align="center">
            <td colspan="2"><button id="enrollment" >등록</button><button id="cancle">취소</button></td>
        </tr>
    </table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#enrollment',function(){
        if($('#login').val()==''){
            alert('아이디를 입력하세요');
        }else if($('#password').val()==''){
            alert('비밀번호를 입력하세요');
        }else if($('#name').val()==''){
            alert('실명을 입력하세요');
        }else if($("input[name=gender]:checked").val()==null){
            alert('성별을 클릭하세요');
        }else if($('#mobile').val()==''){
            alert('번호를 입력하세요');
        }else if($('#mobile').val().length!=11){
            alert('번호를 확인하세요');
        }else{
            location.href='home.html';
            
            var len = $("input[name=interest]:checked").length;
            var checkar = [];
            if(len>1){
                $("input[name=interest]:checked").each(function(){
                    str=$(this).val();
                    checkar.push(str);
                })
            }
            alert('아이디 : '+$('#login').val()+'\n'+'실명 : '+$('#name').val()+'\n'
                +'성별 : '+$("input[name=gender]:checked").val()+'\n'+'모바일 : '+$('#mobile').val()+'\n'
                +'관심분야 : '+checkar);
        }
    })
    .on('click','#cancle',function(){
       location.href='login.html';
    })
    .on('keyup','.pw',function(){
        if($('#password').val()!=$('#checkpassword').val()){
            $('#same').html('비밀번호가 일치하지 않습니다.');
        }else{
            $('#same').html(null);
        }
        
    })
</script>
</html>
회원가입 화면 취소하면 로그인 화면으로 돌아간다.

<과제 : 호텔객실 예약관리>

<type코드>

<!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>
<style>
    #add{
        border-radius: 4px;
    }
    #delet{
        border-radius: 4px;
    }
    #empty{
        border-radius: 4px;
    }
    .button{
        border: 2px solid brown;
        background-color: beige;
        color: brown;
        padding: 5px;
    }
    .button:hover{
        color: white;
        background-color: brown;
    }
    a{
        color: white;
    }
</style>
<body>
    <table style="width: 100%; border-collapse: collapse;">
        <tr style="background-color:burlywood;">
            <td style="width: 30%;">객실타입관리&nbsp;<a href="room.html">객실관리</a>&nbsp;<a href="book.html">예약관리</a></td>
            <td style="width: 40%; text-align: left; color:white;" ><h1>&nbsp;호텔 객실 예약관리</h1></td>
            <td style="width: 30;"></td>
        </tr>
        <tr style="background-color: beige;">
            <td colspan="3" valign="top" >
                <table valign="top" align=right style="width: 100%;">
                <tr>
                    <td align="right">
                        <select size='15' style="width: 200px;" id="roomtype">
                        </select>
                    </td>
                    <td>
                        <table>
                            <tr><td>객실타입번호</td><td><input type=number id=qty name=qty style="width: 120px"></td></tr>   
                            <tr><td>객실타입명</td><td><input type=name id=typename name=typename style="width: 120px"></td></tr>
                        </table>
                        <table>
                            <tr>
                                <td colspan="2" align="center">
                                    <button class="button" id=add>추가</button>
                                    <button class="button" id=delet>삭제</button>
                                    <button class="button" id=empty>비우기</button>
                                </td>
                            </tr>
                        </table> 
                    </td> 
                </tr>
            </td>
        </tr> 
    </table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#add',function(){
        str="<option>"+$('#qty').val()+', '+$('#typename').val();
        if($('#qty').val()==''){
            alert('번호를 입력하세요.');
        }else if($('#typename').val()==''){
            alert('객실타입을 입력하세요.')
        }else{
            $('#roomtype').append(str);
        }  
    })
    .on('click','select',function(){
        str = $('option:selected').text();
        ar = str.split(',');
        ar[1]=ar[1].trim();
        $('#qty').val(ar[0]);
        $('#typename').val(ar[1]);
    })
    .on('click','#delet',function(){
        $('#qty').val('');
        $('#typename').val('');
        $("option:selected").remove();
        
    })
    .on('click','#empty',function(){
        $('#qty').val('');
        $('#typename').val('');
    })
</script>
</html>

<결과>

객실타입번호와 타입명을 쓰고 추가버튼을 누르면  select박스에 들어간다.
비우기 버튼을 누르면 타입번호,명이 사라진다. select박스의 옵션을 임의로 선택
옵션을 선택후 삭제를 누르면 선택한 옵션이 지워진다.
.on('click','#add',function(){
        str="<option>"+$('#qty').val()+', '+$('#typename').val();
        if($('#qty').val()==''){
            alert('번호를 입력하세요.');
        }else if($('#typename').val()==''){
            alert('객실타입을 입력하세요.')
        }else{
            $('#roomtype').append(str);
        }  
    })
  
.on('click','select',function(){
        str = $('option:selected').text();
        ar = str.split(',');
        ar[1]=ar[1].trim();
        $('#qty').val(ar[0]);
        $('#typename').val(ar[1]);
    })		  trim()=공백
    .on('click','#delet',function(){
        $('#qty').val('');
        $('#typename').val('');
        $("option:selected").remove();
        
    })		 선택한 옵션을 지우고 싶다면 
$("option:selected").remove();를 사용하면 된다.
    .on('click','#empty',function(){
        $('#qty').val('');
        $('#typename').val('');
    })		  

<room 코드>

<!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>
<style>
    #add{
        border-radius: 4px;
    }
    #delet{
        border-radius: 4px;
    }
    #empty{
        border-radius: 4px;
    }
    .button{
        border: 2px solid lightskyblue;
        background-color: lightcyan;
        color: rgb(102, 187, 221);
        padding: 5px;
    }
    .button:hover{
        color: white;
        background-color: rgb(65, 171, 179);
    }
    a{
        color: aliceblue;
    }
</style>
<body>
    <table style="width: 100%;border-collapse: collapse;">
        <tr style="background-color: rgb(129, 206, 230);" >
            <td style="width: 30%;"><a href="type.html">객실타입관리</a>&nbsp;객실관리&nbsp;<a href="book.html">예약관리</a></td>
            <td style="width: 40%; text-align: left; color: aliceblue;" ><h1>&nbsp;호텔 객실 예약관리</h1></td>
            <td style="width: 30;"></td>
        </tr>
        <tr style="background-color:lightcyan;">
            <td colspan="3" valign="top">
                <table valign="top" align=center >
                <tr>
                    <td colspan="3" align="right">
                        <select  id='reservation' size="15" style="width:250px">
                        </select>
                    </td>
                    <td align="left">
                        <table valign="right">
                            <tr>
                                <td>객실번호</td><td><input type=number id=qty name=qty style="width: 120px"></td>
                            </tr>
                            <tr>
                                <td>객실명</td><td><input type="text" id=name name=name style="width: 120px"></td>
                            </tr>
                            <tr>
                                <td>객실타입</td>
                                <td><select id="type">
                                    <option value="">객실타입을 선택</option>
                                    <option value="Suite Room" name="room">Suite Room</option>
                                    <option value="Family Room" name="room">Family Room</option>
                                    <option value="Deluxe Room" name="room">Deluxe Room</option>
                                    <option value="Single Room" name="room">Single Room</option>
                                    <option value="Double Room" name="room">Double Room</option>
                                </select></td>
                            </tr>
                            <tr>
                                <td>숙박가능인원</td><td><input type=number id=people name=people style="width: 120px">명</td>
                            </tr>
                            <tr>
                                <td>1박요금</td><td><input type=number id=price name=price style="width: 120px">원</td>
                            </tr>
                            <tr>
                                <table>
                                <td>
                                <button class=button id=add>추가</button>
                                <button class=button id=delet>삭제</button>
                                <button class=button id=empty>비우기</button></td>
                                </table>
                            </tr>
                        </table>
                    </td>
                </tr>
                </table>
            </td>
            
        </tr>
    </table>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document)
    .on('click','#add',function(){
        if($('#qty').val()==''){
            alert('객실번호를 입력해 주세요.');
        }else if($('#name').val()==''){
            alert('객실명을 입력해 주세요.');
        }else if($('#type').val()==''){
            alert('객식타입을 입력해 주세요.');
        }else if($('#people').val()==''){
            alert('몇명인지 입력해 주세요.');
        }else if($('#price').val()==''){
            alert('가격을 입력해 주세요.');
        }else{
            str='<option>'+$('#qty').val()+'호, '+$('#name').val()+', '+$('#type').val()+', '+$('#people').val()+'명, '
                +$('#price').val()+'원';
            $('#reservation').append(str);
        }
    })
    .on('click','#delet',function(){
        $("option:selected").remove();
    })
    .on('click','#empty',function(){
        $('#qty').val('');
        $('#name').val('');
        $('#type').find('option:first').prop('selected',true);
        $('#people').val('');
        $('#price').val('');
    })
    .on('click','#reservation option:selected',function(){
        str = $('#reservation option:selected').text();
        ar = str.split(', ');
        ar[0]=ar[0].replace('호',' ');
        ar[3]=ar[3].replace('명',' ');
        ar[4]=ar[4].replace('원',' ');
        for(i=0;i<5;i++){
            ar[i]=ar[i].trim();
        }
        $('#qty').val(ar[0]);
        $('#name').val(ar[1]);
        $('#type option').each(function(){
            if($(this).text()==ar[2]){
                $(this).prop('selected',true);
                return false;
            }
        })
        $('#people').val(ar[3]);
        $('#price').val(ar[4]);
    })
</script>
</html>

<결과>

빈 칸을 다 채운다음 추가 버튼을 누르면 select 박스에 들어간다
select 옵션을 누르면 옵션값이 나온다. 비우기를 누르면 초기화 된다.
삭제를 누르면 select 옵션과 값이 다 사라진다.
 .on('click','#add',function(){
        if($('#qty').val()==''){
            alert('객실번호를 입력해 주세요.');
        }else if($('#name').val()==''){
            alert('객실명을 입력해 주세요.');
        }else if($('#type').val()==''){
            alert('객식타입을 입력해 주세요.');
        }else if($('#people').val()==''){
            alert('몇명인지 입력해 주세요.');
        }else if($('#price').val()==''){
            alert('가격을 입력해 주세요.');
        }else{
            str='<option>'+$('#qty').val()+'호, '+$('#name').val()+', '+$('#type').val()+', '+$('#people').val()+'명, '
                +$('#price').val()+'원';
            $('#reservation').append(str);
        }
    })
 값 넣기
 .on('click','#delet',function(){
        $("option:selected").remove();
        $('#qty').val('');
        $('#name').val('');
        $('#type').find('option:first').prop('selected',true);
        $('#people').val('');
        $('#price').val('');
    })
 option선택하고 지우기
값 다 공백으로 초기화
 .on('click','#empty',function(){
        $('#qty').val('');
        $('#name').val('');
        $('#type').find('option:first').prop('selected',true);
        $('#people').val('');
        $('#price').val('');
    })
 비우기
  .on('click','#reservation option:selected',function(){
        str = $('#reservation option:selected').text();
        ar = str.split(', ');
        ar[0]=ar[0].replace('호',' ');
        ar[3]=ar[3].replace('명',' ');
        ar[4]=ar[4].replace('원',' ');
        for(i=0;i<5;i++){
            ar[i]=ar[i].trim();
        }
        $('#qty').val(ar[0]);
        $('#name').val(ar[1]);
        $('#type option').each(function(){
            if($(this).text()==ar[2]){
                $(this).prop('selected',true);
                return false;
            }
        })
        $('#people').val(ar[3]);
        $('#price').val(ar[4]);
    })
 호, 명, 원 을 공백으로 바꾸기
.replace()사용
공백 바꾸고 trim으로 공백 매꾸기
.trim()

하얗게 불태웠다...

728x90

'Javascript' 카테고리의 다른 글

2023.02.03  (0) 2023.02.03
2023.02.02  (0) 2023.02.02
2023.01.31-카페관리  (0) 2023.02.01
2023.01.30  (0) 2023.01.30
2023.01.27  (0) 2023.01.27

관련글 더보기

티스토리툴바