개발 대상은 [상단 - 네비게이션바] 페이지이다.
모든 페이지에 공통으로 include 되는 대상이다.
구성은 다음과 같다.
header.php : 네비게이션바 양식 파일
header.js : 네비게이션바 이동 처리 Javascript
header.css : 네비게이션바 CSS
1. Frontend
<header.php>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>네비게이션바</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
<link rel="stylesheet" href="../css/header.css">
</head>
<body>
<header>
<div class="container">
<h1><button onclick="go_home()"><i class="fa-solid fa-gears"></i> GGEAR</button></h1>
<nav>
<ul>
<li><button onclick="go_home()"><i class="fa-solid fa-house"></i> HOME  </button></li>
<li><button onclick="go_freeboard()"><i class="fa-solid fa-clipboard"></i> 자유 게시판  </button></li>
<li><button onclick="go_memboard()"><i class="fa-solid fa-clipboard-user"></i> 회원 게시판  </button></li>
<?php
if (session_status() === PHP_SESSION_NONE)
session_start();
if(isset($_SESSION["user_id"])) {
echo '<li><button><i class="fa-solid fa-user-plus"></i> 마이페이지  </button></li>';
echo '<li><button><i class="fa-solid fa-lock-open"></i> 로그아웃 </button></li>';
echo "<li><button>"."<i class='fa-solid fa-user-check'></i> [ ".$_SESSION["user_name"]." ]"."</button></li>";
}
else
echo '<li><button><i class="fa-solid fa-user-lock"></i> 로그인</button></li>';
?>
</ul>
</nav>
</div>
</header>
<script src="../js/header.js?v=<?=time()?>"></script>
</body>
</html>| header.php |
|---|
 |
| ↑ 비로그인시 로그인 버튼 표시 |
 |
| ↑ 로그인시 마이페이지 / 로그아웃 / 현재 사용자 정보 표시 |
-
1. 페이지 이동:
1) HOME: 메인 페이지 이동
2) 자유 게시판: 자유게시판(비회원 게시판) 이동
3) 회원 게시판: 회원 게시판 이동
-
2. 로그인 상태 처리:
1) 미로그인 시(세션 미할당): 로그인 표시
2) 로그인 시 (세션 할당): 마이페이지 / 로그아웃 / 이용자 정보 표시
2. Javascript
<header.js>
function go_home() {
location.href="../main/index.php";
}
function go_freeboard() {
location.href="../board/free_list.php";
}
function go_memboard() {
location.href="../board/mem_list.php";
}
function go_login() {
location.href="../auth/login.php";
}
function go_logout() {
location.href="../auth/logout.php";
}
function go_mypage() {
location.href="../my/mypage.php";
}- 1. 페이지 이동: 각 네비게이션바 페이지로 이동되도록 처리
