부트스트랩을 적용하여 상단 메뉴에서 로그인, 로그아웃 처리하는 걸 구현중이다.
메뉴 Layout 이 완벽하게 마음에 들지 않는다. 좀 더 기능을 찾아보고 테스트해야 한다.
아직 미완성 부분도 있지만 현재까지 구현에 성공한 걸 적어둔다.
=== topmenu.php ===
<?php
if(!isset($_SESSION)) {
session_start();
}
session_save_path('./_tmp/session');
// 단말 종류 검사 및 단말 구분에 따라 보여주는 화면 처리
require_once "deviceChk.php";
$titleName = "테스트";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow"/>
<?php if($device_type != 3):?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="apple-mobile-web-app-capable" content="no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<?php endif?>
<title><?=$titleName;?></title>
<link rel="stylesheet" href="css/topmenu.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<script src="http://code.jquery.com/jquery.min.js" ></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--[if lt IE 9]> <!-- 5. 인터넷익스플로러 9버전 이하일 경우 html5가 인식될 수 있게 해주는 스크립트 -->
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<script src="js/login.js"></script>
<script type="text/javascript">
var currentName = null;
$(document).ready(function(){
tabSetting(); // 탭 초기화 및 설정
});
function tabSetting() {
$('.tabPage').hide();
$('#navbar-collapse-2 a').on('click', function() {
var tabName = $(this).attr('href');
if(currentName != tabName){
$('.tabPage').hide();
currentName = tabName;
}
if($(tabName).is(":visible")){
//$(tabName).slideUp();
$(tabName).toggle();
}else{
$(tabName).slideDown();
}
if(tabName != '#nav-loginForm'){ // 로그인 창이 아니면
// 반응형으로 메뉴 동작시 메뉴 클릭후 자동 숨김
$('#navbar-collapse-2').collapse('hide');
}
});
$('.side-menu-container a').on('click', function() {
var tabName = $(this).attr('href');
if(currentName != tabName){
$('.tabPage').hide();
currentName = tabName;
}
if($(tabName).is(":visible")){
//$(tabName).slideUp();
$(tabName).toggle();
}else{
$(tabName).slideDown();
}
});
}
</script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid"><!-- 전체 화면을 사용 / container 클래스 선택자는 최대 넓이가 1170px -->
<div class="navbar-header">
<!--모바일 시 메뉴 숨기기 시작 -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--모바일 시 메뉴 숨기기 끝 -->
<a class="navbar-brand" href="#"><?=$titleName;?></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-left">
<li><a href="#home">Home</a></li>
<li><a href="#tab01">News</a></li>
<li><a href="#tab02">Contact</a></li>
<li><a href="#tab03">About</a></li>
<li><a href="#tab04">Support</a></li>
<li><a href="#tab05">Blog</a></li>
<li><a href="#tab06">게시판</a></li>
<li><a href="#base">Base</a></li>
<li><a href="#custom">Custom</a></li>
<li><a href="#more">More</a></li>
<li><a href="#logo">Logo</a></li>
<?php if(isset($_SESSION['userid']) && !empty($_SESSION['userid'])):?>
<li><a href="#" onclick="document.getElementById('logout-form').submit();">로그아웃</a></li>
<?php else:?>
<li><a href="#nav-loginForm" data-toggle="modal" >로그인</a></li>
<?php endif;?>
</ul>
<div class="modal fade" id="nav-loginForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-lock"></span>로그인 폼</h4>
</div>
<div class="modal-body">
<form role="form" id="login-form">
<div class="form-group">
<label for="userid"><span class="glyphicon glyphicon-user"></span>userID</label>
<input type="text" class="form-control" id="userid" placeholder="아이디를 입력하세요" autofocus required />
</div>
<div class="form-group">
<label for="password"><span class="glyphicon glyphicon-eye-open"></span>비밀번호</label>
<input type="password" class="form-control" id="password" placeholder="비밀번호를 입력하세요" required />
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>로그인 유지</label>
</div>
<button type="submit" id="login-submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span>로그인</button>
</form>
</div>
<div class="modal-footer">
<button id="login_lost_btn" type="button" class="btn btn-link">비밀번호 찾기</button>
<button id="login_register_btn" type="button" class="btn btn-link">회원가입</button>
<!--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>-->
</div>
<!-- End # Login Form -->
<form id="logout-form" style="display:none" action="oauth/logout.php" method="POST"></form>
<!-- Begin | Lost Password Form --><!-- 좀 더 테스트 해봐야 할 영역 -->
<form id="lost-form" style="display:none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-lost-msg">Type your e-mail.</span>
</div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form -->
<!-- Begin | Register Form -->
<form id="register-form" style="display:none;">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Register an account.</span>
</div>
<input id="register_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)" required>
<input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
<input id="register_password" class="form-control" type="password" placeholder="Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
</div>
</div>
</form>
<!-- End | Register Form -->
</div>
</div>
</div>
</div><!-- .navbar-collapse -->
</div><!-- .container-fluid -->
</nav>
<main class="container-fluid">
<div class="container main-container">
<div class="col-md-2 sidebar">
<div class="row">
<div class="absolute-wrapper"> </div>
<!-- Menu -->
<div class="side-menu">
<nav class="navbar navbar-default" role="navigation">
<!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li><a href="#tab01"><span class="glyphicon glyphicon-cloud"></span> Link</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- Main 화면 -->
<div class="col-md-10 content">
<div class="panel panel-default">
<div class="panel-body">
메인 본문 표시 영역
<div id="tab01" class="tabPage">
<img class="img-responsive" src="./images/img_01.jpg">
</div>
<div id="tab02" class="tabPage">
<img class="img-responsive" src="./images/img_02.jpg">
</div>
<div id="tab03" class="tabPage">
<img class="img-responsive" src="./images/img_03.jpg">
</div>
<div id="tab04" class="tabPage">
<img class="img-responsive" src="./images/img_04.jpg">
</div>
<div id="tab05" class="tabPage">
<img class="img-responsive" src="./images/img_05.jpg">
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="pull-left footer">
<p class="col-md-12">
<hr class="divider">
© Linke2ME 2016
</p>
</footer>
</body>
</html>
=== login.js ===
$(function(){
$('#login-submit').click(function(){
$('#login-form').submit(function(e){
e.preventDefault();
$.ajax({
url: 'oauth/loginChk.php',
type: 'POST',
data: {userid:$('#userid').val(), password:$('#password').val()},
dataType: "json",
success: function (response) {
if(response.result == 1){
//alert('로그인 성공');
$('#nav-loginForm').modal('hide');
location.reload(); // 화면 갱신
} else {
alert('로그인 실패');
}
},
error: function(){
alert('ajax form 전송에 문제가 있습니다');
}
});
});
});
});
=== loginChk.php ===
<?php
if(!isset($_SESSION)) {
session_start();
}
@extract($_POST);
if(isset($userid) && !empty($userid) && isset($password) && !empty($password)) {
require_once 'dbconnect.php'; // db접속 성공
require_once '../phpclass/loginClass.php';
$salt = "&c4f96fa549b58356d638%#!s29e5dce852e5d1";
$password = hash('sha384', $password.$salt);
$c=new LoginClass();
$rs = $c->WebUserAuthCheck($userid,$password);
if($rs == '1') {
$_SESSION['userid'] = $userid;
echo '{"result":"1"}';
} else {
echo '{"result":"0"}';
}
}
?>
=== dbconnect.php ===
<?php
include_once 'dbinfo.php';
$dbconn = isConnectDb($db);
function isConnectDb($db)
{
$conn = mysqli_connect($db['host'],$db['user'],$db['pass'],$db['name'],$db['port']);
mysqli_set_charset($conn, "utf8"); // DB설정이 잘못되어 euc-kr 로 되어 있으면 문제가 됨
if (mysqli_connect_errno()) {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
exit;
} else {
return $conn;
}
}
?>
=== logout.php ===
<?php
if(!isset($_SESSION)) {
session_start();
}
unset($_SESSION['userid']);
if(session_destroy()){
echo '{"result":"1"}';
header("Location: ../topmenu.php");
}
?>
=== topmenu.css ===
@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
body {padding-top: 0px;}
/* 로그인 폼 */
.modal-header {
color:black !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
padding: 5px 5px 5px 5px;
border-top: 0px;
}
/* 로그인 폼 End */
.sidebar { padding-left: 0;}
.main-container { background: #FFF; padding-top: 15px; margin-top: -20px;}
.footer { width: 100%;}
:focus { outline: none;}
.side-menu {
position: relative;
width: 100%;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}
.side-menu .navbar {
border: none;
}
.side-menu .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
background-color: transparent;
margin-right: -1px;
border-right: 5px solid #e7e7e7;
}
.side-menu .navbar-nav li {
display: block;
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav li a {
padding: 15px;
}
.side-menu .navbar-nav li a .glyphicon {
padding-right: 10px;
}
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown > a {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
padding-left: 15px;
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
margin-left: -20px;
padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
background-color: #f3f3f3;
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 0;
padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: block;
}
.side-menu #search {
position: relative;
z-index: 1000;
}
.side-menu #search .panel-body {
padding: 0;
}
.side-menu #search .panel-body .navbar-form {
padding: 0;
padding-right: 50px;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #search .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;
background-color: #f3f3f3;
padding: 15px 18px;
}
/* Main body section */
.side-body {
margin-left: 310px;
}
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; }
.navbar .navbar-collapse { position: relative; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
/* 화면 해상도에 따른 글자 크기 변경 */
@media only screen and (max-width: 768px) {
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; }
.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }
.side-menu {
position: relative;
width: 100%;
height: 0;
border-right: 0;
}
.side-menu .navbar {
z-index: 999;
position: relative;
height: 0;
min-height: 0;
background-color:none !important;
border-color: none !important;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: inline-block;
}
/* Slide in animation */
@-moz-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-webkit-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
/* Slide side menu*/
/* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
.side-menu-container > .navbar-nav.slide-in {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side-menu-container > .navbar-nav {
/* Add position:absolute for scrollable menu -> see top comment */
position: fixed;
left: -300px;
width: 300px;
top: 43px;
height: 100%;
border-right: 1px solid #e7e7e7;
background-color: #f8f8f8;
overflow: auto;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
@-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-moz-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@-webkit-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
/* Slide side body*/
.side-body {
margin-left: 5px;
margin-top: 70px;
position: relative;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.body-slide-in {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Hamburger */
.navbar-toggle-sidebar {
border: 0;
float: left;
padding: 18px;
margin: 0;
border-radius: 0;
background-color: #f3f3f3;
}
/* Search */
#search .panel-body .navbar-form {
border-bottom: 0;
}
#search .panel-body .navbar-form .form-group {
margin: 0;
}
.side-menu .navbar-header {
/* this is probably redundant */
position: fixed;
z-index: 3;
background-color: #f8f8f8;
}
/* Dropdown tweek */
#dropdown .panel-body .navbar-nav {
margin: 0;
}
}
'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글
| [bootstrap] Multi level dropdown menu (0) | 2017.02.13 |
|---|---|
| [bootstrap] navbar-fixed-top 설정때문에 (0) | 2017.02.07 |
| [jQuery] jQuery 토글 및 메뉴 만들기 - 1 (0) | 2017.01.26 |
| [jQuery] easyUI treeview 만들기 (MySQL to JSON tree using PHP) (0) | 2016.12.24 |
| [jQuery] easyUI treeview 만들기 (MySQL to JSON using PHP) (0) | 2016.12.23 |
Link2Me