Web programming

(22.12.11)Web 프로그래밍 : 웹페이지 헤더 만들기 (include file 이용하기)

프로그래머 오월 2022. 12. 11.

●●웹페이지 헤더 만들기●●

●●전체 코드●●

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<%@ page contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<% String userid = (String)session.getAttribute("userid"); %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1분 댄스학습하기</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" 
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous">
</script>
<script>
    var uid='<%=userid%>';
    $(function(){
        if(uid=='null'){
            $('#id').css('display','none'); 
            $('#logout').css('display','none');
            $('#my_info').css('display','none'); 
        }
        else if(uid!=null){
            $('#loginbtn').css('display','none');
            $('#joinmem').css('display','none');
            
        }
    });
</script>
<script type="text/javascript">
function logout()
{    
    $.ajax({
        url : 'lmslogin',
        method: 'post',
        data:{"cmd":"logout"},
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.logout ? '로그아웃 성공' : '로그아웃 실패');
            location.href='lmslogin';
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
}
</script>
<script>
function loginOK(){
    
    var loginDone = <%=userid%>;
    
    if(loginDone==null){
        alert("로그인을 먼저해야합니다.");
        location.href='lmslogin?cmd=loginform';
    }
    else if(loginDone!=null){
        location.href='lms?cmd=learn';
    }
}
</script>
<style type="text/css">
@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
    
header{
  background-color:rgba(0,35,245,0.8);
  height:110px;
  line-height:110px;
  text-align:center;
  font-family: 'Jeju Myeongjo', cursive;
  font-size:2em;
  color: white;
  text-shadow: 0px 3px 3px rgba(200, 0, 0, 0.66);}
nav {
  background-color:rgba(245,205,20,0.5);
  height:60px;
  font-family: 'Jeju Myeongjo', serif;
  line-height:60px;
  text-shadow: 0px 5px 5px rgba(255, 255, 255, 0.7);
  }
 
a:link{
 text-decoration:none;
 color: black;}
a:visited{
 text-decoration:none;
 color: black;}
a:hover{
 text-decoration:none;
 color: white;}
a:active{
 text-decoration:none;
 color: white;}
 
</style>
</head>
<body>
<header> <h2> 💃1분 댄스학습하기🕺</h2></header>
<nav>
<font size=5><b>
 <span id="id">&emsp;<%=userid%></span>&emsp;
 <span id="loginbtn"><a href=lmslogin?cmd=loginform>로그인</a>&emsp;</span>
 <span id="logout"><a href="javascript:logout();">로그아웃</a>&emsp;</span>
 <span id="joinmem"><a href="lmslogin?cmd=joinmem">회원가입</a>&emsp;</span>
 <span id="my_info"><a href="lmslogin?cmd=my_info">내정보 보러가기</a>&emsp;</span>
 <a href="javascript:loginOK();">동영상 학습</a>&emsp; 
 <a href="lms">홈으로</a></b>
 </font> 
 </nav>
Colored by Color Scripter

cs

●●<header>헤더 태그 <nav> 네비게이션 링크 태그●●

1
2
3
4
5
6
7
8
9
10
11
12

<header> <h2> 💃1분 댄스학습하기🕺</h2></header>
<nav>
<font size=5><b>
 <span id="id">&emsp;<%=userid%></span>&emsp;
 <span id="loginbtn"><a href=lmslogin?cmd=loginform>로그인</a>&emsp;</span>
 <span id="logout"><a href="javascript:logout();">로그아웃</a>&emsp;</span>
 <span id="joinmem"><a href="lmslogin?cmd=joinmem">회원가입</a>&emsp;</span>
 <span id="my_info"><a href="lmslogin?cmd=my_info">내정보 보러가기</a>&emsp;</span>
 <a href="javascript:loginOK();">동영상 학습</a>&emsp; 
 <a href="lms">홈으로</a></b>
 </font> 
 </nav>
Colored by Color Scripter

cs

네이게이션 링크 태그들로 로그인, 로그아웃, 회원가입, 내정보 보러가기, 동영상학습, 홈으로 6개의 링크를 주었다.

●●헤더 태그, 네비게이션 링크 태그 css 스타일●●

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

<style type="text/css">
@import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
    
header{
  background-color:rgba(0,35,245,0.8);
  height:110px;
  line-height:110px;
  text-align:center;
  font-family: 'Jeju Myeongjo', cursive;
  font-size:2em;
  color: white;
  text-shadow: 0px 3px 3px rgba(200, 0, 0, 0.66);}
nav {
  background-color:rgba(245,205,20,0.5);
  height:60px;
  font-family: 'Jeju Myeongjo', serif;
  line-height:60px;
  text-shadow: 0px 5px 5px rgba(255, 255, 255, 0.7);
  }
 
a:link{
 text-decoration:none;
 color: black;}
a:visited{
 text-decoration:none;
 color: black;}
a:hover{
 text-decoration:none;
 color: white;}
a:active{
 text-decoration:none;
 color: white;}
 
</style>
Colored by Color Scripter

cs

링크들이 방문되기 전이나 방문된 후는 검정 글씨로 마우스커서가 오버됐을 때 실행됐을 땐 흰색 글씨로 변하게 해주었다.

헤더와 네비게이션은 투명도를 주었다. 글씨에도 그림자 효과를 주었다.

●●Javascript●●

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
    var uid='<%=userid%>';
    $(function(){
        if(uid=='null'){
            $('#id').css('display','none'); 
            $('#logout').css('display','none');
            $('#my_info').css('display','none'); 
        }
        else if(uid!=null){
            $('#loginbtn').css('display','none');
            $('#joinmem').css('display','none');
            
        }
    });
</script>
Colored by Color Scripter

cs

세션에서 사용자의 아이디를 받아 로그인이 되어 있을 땐 로그인링크와 회원가입 링크를 없애버리고 로그인이 되어 있지 않을 땐 로그아웃, 아이디 표시, 내정보 보러가기 링크를 없앴다.

로그인을 하지 않았을 때

로그인을 했을 때

●●로그인하지 않고 동영상 학습하려 할 때●●

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
function loginOK(){
    
    var loginDone = <%=userid%>;
    
    if(loginDone==null){
        alert("로그인을 먼저해야합니다.");
        location.href='lmslogin?cmd=loginform';
    }
    else if(loginDone!=null){
        location.href='lms?cmd=learn';
    }
}
</script>
Colored by Color Scripter

cs

로그인을 하지 않고 동영상 학습 링크를 눌렀을 때 로그인을 먼저 해야한다는 alert창 띄우고 로그인 페이지로 보내기

실행 결과 :

●●로그아웃 체크하기●●

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript">
function logout()
{    
    $.ajax({
        url : 'lmslogin',
        method: 'post',
        data:{"cmd":"logout"},
        cache : false,
        dataType:'json',
        success:function(res){
            alert(res.logout ? '로그아웃 성공' : '로그아웃 실패');
            location.href='lmslogin';
        },
        error : function(xhr,status,err){
            alert('에러:' + err);
        }
    });
}
</script>
Colored by Color Scripter

cs

백엔드 서버에서 데이터를 받아 로그아웃 결과 표시 하기