1. 로그아웃
** 3_logout.php
<?php
session_start();
session_unset();
?>
<script>
alert('로그아웃이 되었습니다.');
location.href = "3_login.php";
</script>
2. 로그인과 회원가입 연결
** 3_login.php 수정
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
</head>
<body>
<h2>로그인</h2>
<?php
if(!isset($_SESSION['id'])) {
?>
<form method="post" action="3_login_ok.php">
<p><label>아이디 : <input type="text" name="userid"></label></p>
<p><label>비밀번호 : <input type="password" name="userpw"></label></p>
<p><input type="submit" value="로그인">
<input type="button" value="회원가입" onclick="location.href='3_regist.php'"></p>
</form>
<?php
} else {
?>
<p><?=$_SESSION['id']?>님 환영합니다.</p>
<p><a href="3_logout.php">로그아웃</a></p>
<?php
}
?>
</body>
</html>
** 3_regist.php 수정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="./js/regist.js"></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<body>
<h2>회원가입</h2>
<form name="regform" id="regform" method="post" action="3_regist_ok.php" onsubmit="return sendit()">
<input type="hidden" name="isSsn" id="isSsn" value="false">
<p><label>아이디 : <input type="text" name="userid" id="userid" maxlength="20"></label></p>
<p><label>비밀번호 : <input type="password" name="userpw" id="userpw" maxlength="20"></label></p>
<p><label>비밀번호 확인 : <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></label></p>
<p><label>이름 : <input type="text" name="username" id="username"></label></p>
<p><label>휴대폰 번호 : <input type="text" name="hp" id="hp"></label> ('-' 을 포함)</p>
<p><label>이메일 : <input type="text" name="email" id="email"></label></p>
<p>취미 :
<label>드라이브<input type="checkbox" name="hobby[]" value="드라이브"></label>
<label>등산<input type="checkbox" name="hobby[]" value="등산"></label>
<label>게임<input type="checkbox" name="hobby[]" value="게임"></label>
<label>영화감상<input type="checkbox" name="hobby[]" value="영화감상"></label>
<label>쇼핑<input type="checkbox" name="hobby[]" value="쇼핑"></label>
</p>
<p>주민등록번호 :
<input type="text" name="ssn1" id="ssn1" maxlength="6" onkeyup="moveFocus()"> - <input type="text" name="ssn2" id="ssn2" maxlength="7">
<input type="button" value="주민등록번호 검증" onclick="ssnCheck()">
</p>
<p>우편번호 : <input type="text" name="zipcode" id="sample6_postcode"> <input type="button" value="우편번호 검색" onclick="sample6_execDaumPostcode()"></p>
<p><label>주소 : <input type="text" name="address1" id="sample6_address"></label></p>
<p><label>상세주소 : <input type="text" name="address2" id="sample6_detailAddress"></label></p>
<p><label>참고항목 : <input type="text" name="address3" id="sample6_extraAddress"></label></p>
<p><input type="submit" value="가입완료"> <input type="reset" value="다시작성">
<input type="button" value="로그인" onclick="location.href='./3_login.php'"></p>
</form>
</body>
</html>
3. 회원정보 수정
** 3_login.php 수정
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
</head>
<body>
<h2>로그인</h2>
<?php
if(!isset($_SESSION['id'])) {
?>
<form method="post" action="3_login_ok.php">
<p><label>아이디 : <input type="text" name="userid"></label></p>
<p><label>비밀번호 : <input type="password" name="userpw"></label></p>
<p><input type="submit" value="로그인">
<input type="button" value="회원가입" onclick="location.href='3_regist.php'"></p>
</form>
<?php
} else {
?>
<p><?=$_SESSION['id']?>님 환영합니다.</p>
<p><input type="button" value="로그아웃" onclick="location.href='3_logout.php'">
<input type="button" value="정보수정" onclick="location.href='3_modify.php'"></p>
<?php
}
?>
</body>
</html>
** 3_modify.php
<?php
session_start();
include "./include/dbconn.php";
$idx = $_SESSION['idx'];
$id = $_SESSION['id'];
$name = $_SESSION['name'];
//echo $idx." ".$id." ".$name;
// *는 SELECT의 성능을 낮추기 때문에 모든 필드를 직접 명시하는 것이 좋다.
// 실습에서는 편의상 *로 하나 실무에서는 컬럼명으로 변경하자!
$sql = "SELECT * FROM tb_member WHERE mem_idx = $idx";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
$mem_email = $row['mem_email'];
$mem_ssn1 = $row['mem_ssh1'];
$mem_ssn2 = $row['mem_ssh2'];
$mem_hp = $row['mem_hp'];
$mem_hobby = $row['mem_hobby'];
$hobbyarr = explode(",", $mem_hobby);
$mem_zipcode = $row['mem_zipcode'];
$mem_address1 = $row['mem_address1'];
$mem_address2 = $row['mem_address2'];
$mem_address3 = $row['mem_address3'];
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원 정보 수정</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="./js/modify.js"></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>
<body>
<h2>회원 정보 수정</h2>
<form name="regform" id="regform" method="post" action="3_modify_ok.php" onsubmit="return sendit()">
<input type="hidden" name="isSsn" id="isSsn" value="false">
<p>아이디 : <b><?=$id?></b></p>
<p><label>비밀번호 : <input type="password" name="userpw" id="userpw" maxlength="20"></label></p>
<p><label>비밀번호 확인 : <input type="password" name="userpw_re" id="userpw_re" maxlength="20"></label></p>
<p>이름 : <b><?=$name?></b></p>
<p><label>휴대폰 번호 : <input type="text" name="hp" id="hp" value="<?=$mem_hp?>"></label> ('-' 을 포함)</p>
<p><label>이메일 : <input type="text" name="email" id="email" value="<?=$mem_email?>"></label></p>
<p>취미 :
<label>드라이브<input type="checkbox" name="hobby[]" value="드라이브"
<?php if(in_array("드라이브", $hobbyarr)) { ?> checked <?php } ?>></label>
<label>등산<input type="checkbox" name="hobby[]" value="등산"
<?php if(in_array("등산", $hobbyarr)) { echo " checked "; } ?>></label>
<label>게임<input type="checkbox" name="hobby[]" value="게임"
<?php if(in_array("게임", $hobbyarr)) { echo " checked "; } ?>></label>
<label>영화감상<input type="checkbox" name="hobby[]" value="영화감상"
<?php if(in_array("영화감상", $hobbyarr)) { echo " checked "; } ?>></label>
<label>쇼핑<input type="checkbox" name="hobby[]" value="쇼핑"
<?php if(in_array("쇼핑", $hobbyarr)) { echo " checked "; } ?>></label>
</p>
<p>주민등록번호 :
<input type="text" name="ssn1" id="ssn1" maxlength="6" value="<?=$mem_ssn1?>" onkeyup="moveFocus()"> -
<input type="text" name="ssn2" id="ssn2" maxlength="7" value="<?=$mem_ssn2?>">
<input type="button" value="주민등록번호 검증" onclick="ssnCheck()">
</p>
<p>우편번호 : <input type="text" name="zipcode" id="sample6_postcode" value="<?=$mem_zipcode?>"> <input type="button" value="우편번호 검색" onclick="sample6_execDaumPostcode()"></p>
<p><label>주소 : <input type="text" name="address1" id="sample6_address" value="<?=$mem_address1?>"></label></p>
<p><label>상세주소 : <input type="text" name="address2" id="sample6_detailAddress" value="<?=$mem_address2?>"></label></p>
<p><label>참고항목 : <input type="text" name="address3" id="sample6_extraAddress" value="<?=$mem_address3?>"></label></p>
<p><input type="submit" value="수정완료"> <input type="reset" value="다시작성"> <input type="button" value="돌아가기" onclick="location.href='./3_login.php'"></p>
</form>
</body>
</html>
** modify.js
'use strict';
function sendit() {
const userpw = document.getElementById('userpw');
const userpw_re = document.getElementById('userpw_re');
const hp = document.getElementById('hp');
const email = document.getElementById('email');
const isSsn = document.getElementById('isSsn');
const expHpText = /^\d{3}-\d{3,4}-\d{4}$/;
const expEmailText = /^[A-Za-z0-9\.\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z0-9\.\-]+$/;
if(userpw.value == ''){
alert('비밀번호를 입력하세요.');
userpw.focus();
return false;
}
if(userpw.value != userpw_re.value){
alert('비밀번호와 비밀번호 확인의 값이 서로 다릅니다.');
userpw.focus();
return false;
}
if(expHpText.test(hp.value) == false){
alert('휴대폰 번호 형식을 확인하세요.');
hp.focus();
return false;
}
if(expEmailText.test(email.value) == false){
alert('이메일 형식을 확인하세요.');
email.focus();
return false;
}
let isHobbyCheck = false;
for(let i=0; i<$("[name='hobby[]']").length; i++) {
if($("input:checkbox[name='hobby[]']").eq(i).is(":checked") == true) {
isHobbyCheck = true;
}
}
if(!isHobbyCheck) {
alert('취미는 한 개 이상 체크하세요.')
return false;
}
if(isSsn.value == 'false'){
alert('주민등록번호 검증을 확인하세요.');
ssn1.focus();
return false;
}
return true;
}
function moveFocus(){
const ssn1 = document.getElementById('ssn1');
if(ssn1.value.length >= 6){
document.getElementById('ssn2').focus();
}
}
function ssnCheck(){
const ssn1 = document.getElementById('ssn1');
const ssn2 = document.getElementById('ssn2');
const isSsn = document.getElementById('isSsn');
if(ssn1.value == '' || ssn2.value == ''){
alert('주민등록번호를 입력하세요.');
ssn1.focus();
return false;
}
const ssn = ssn1.value + ssn2.value;
const s1 = Number(ssn.substr(0, 1)) * 2;
const s2 = Number(ssn.substr(1, 1)) * 3;
const s3 = Number(ssn.substr(2, 1)) * 4;
const s4 = Number(ssn.substr(3, 1)) * 5;
const s5 = Number(ssn.substr(4, 1)) * 6;
const s6 = Number(ssn.substr(5, 1)) * 7;
const s7 = Number(ssn.substr(6, 1)) * 8;
const s8 = Number(ssn.substr(7, 1)) * 9;
const s9 = Number(ssn.substr(8, 1)) * 2;
const s10 = Number(ssn.substr(9, 1)) * 3;
const s11 = Number(ssn.substr(10, 1)) * 4;
const s12 = Number(ssn.substr(11, 1)) * 5;
const s13 = Number(ssn.substr(12, 1));
let result = s1+s2+s3+s4+s5+s6+s7+s8+s9+s10+s11+s12;
result = result % 11;
result = 11 - result;
if(result >= 10) {result = result % 10;}
if(result == s13){
alert('유효한 주민등록번호입니다.');
isSsn.value = 'true';
} else {
alert('유효하지 않은 주민등록번호입니다.');
}
}
function sample6_execDaumPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
var extraAddr = ''; // 참고항목 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
// 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
if(data.userSelectedType === 'R'){
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraAddr !== ''){
extraAddr = ' (' + extraAddr + ')';
}
// 조합된 참고항목을 해당 필드에 넣는다.
document.getElementById("sample6_extraAddress").value = extraAddr;
} else {
document.getElementById("sample6_extraAddress").value = '';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('sample6_postcode').value = data.zonecode;
document.getElementById("sample6_address").value = addr;
// 커서를 상세주소 필드로 이동한다.
document.getElementById("sample6_detailAddress").focus();
}
}).open();
}
** 3_modify_ok.php
<?php
session_start();
include "./include/dbconn.php";
$idx = $_SESSION['idx'];
$id = $_SESSION['id'];
$name = $_SESSION['name'];
$mem_userpw = $_POST['userpw'];
$mem_hp = $_POST['hp'];
$mem_email = $_POST['email'];
$hobby = $_POST['hobby'];
$hobbystr = "";
foreach($hobby as $h) {
$hobbystr .= $h.",";
}
$mem_ssn1 = $_POST['ssn1'];
$mem_ssn2 = $_POST['ssn2'];
$mem_zipcode = $_POST['zipcode'];
$mem_address1 = $_POST['address1'];
$mem_address2 = $_POST['address2'];
$mem_address3 = $_POST['address3'];
$sql = "SELECT mem_userpw FROM tb_member WHERE mem_idx=$idx";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
if($row['mem_userpw'] == $mem_userpw) { // 비밀번호 맞음
$sql = "UPDATE tb_member
SET mem_hp='$mem_hp', mem_email='$mem_email', mem_hobby='$hobbystr',
mem_ssh1='$mem_ssn1', mem_ssh2='$mem_ssn2', mem_zipcode='$mem_zipcode',
mem_address1='$mem_address1', mem_address2='$mem_address2', mem_address3='$mem_address3'
WHERE mem_idx=$idx";
$result = mysqli_query($conn, $sql);
echo "<script>alert('회원 정보가 수정되었습니다.');location.href='./3_modify.php';</script>";
} else { // 비밀번호 틀림
echo "<script>alert('비밀번호가 틀렸습니다.');history.back();</script>";
}
?>
4. 게시판 리스트의 틀 먼저 만들기
** 테이블 생성
CREATE TABLE tb_board(
b_idx bigint auto_increment primary key,
b_userid varchar(20) not null,
b_title varchar(200) not null,
b_content text,
b_hit int default 0,
b_regdate datetime default now(),
b_file varchar(100),
b_up int default 0
);
** 3_login.php 수정
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인</title>
</head>
<body>
<h2>로그인</h2>
<?php
if(!isset($_SESSION['id'])) {
?>
<form method="post" action="3_login_ok.php">
<p><label>아이디 : <input type="text" name="userid"></label></p>
<p><label>비밀번호 : <input type="password" name="userpw"></label></p>
<p><input type="submit" value="로그인">
<input type="button" value="회원가입" onclick="location.href='3_regist.php'"></p>
</form>
<?php
} else {
?>
<p><?=$_SESSION['id']?>님 환영합니다.</p>
<p><input type="button" value="로그아웃" onclick="location.href='3_logout.php'">
<input type="button" value="정보수정" onclick="location.href='3_modify.php'">
<input type="button" value="게시판 리스트" onclick="location.href='./board/list.php'"></p>
<?php
}
?>
</body>
</html>
** list.php 틀 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트</title>
</head>
<body>
<h2>리스트</h2>
<table border="1" width="800">
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>조회수</th>
<th>날짜</th>
<th>추천수</th>
</tr>
<tr>
<td>1</td>
<td>안녕</td>
<td>apple</td>
<td>0</td>
<td>2021-02-05</td>
<td>0</td>
</tr>
</table>
<p><input type="button" value="글쓰기" onclick="location.href='./write.php'"></p>
</body>
</html>
5. 게시판 글쓰기(첨부파일 없는 버전)
** write.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글쓰기</title>
</head>
<body>
<h2>글쓰기</h2>
<form method="post" action="write_ok.php">
<p><label>아이디 : <?=$_SESSION['id']?></label></p>
<p><label>제목 : <input type="text" name="b_title"></label></p>
<p>내용</p>
<p><textarea cols="40" rows="6" name="b_content"></textarea></p>
<p><input type="submit" value="확인"> <input type="reset" value="다시작성">
<input type="button" value="리스트" onclick="location.href='./list.php'"></p>
</form>
</body>
</html>
** write_ok.php
<?php
session_start();
include "../include/dbconn.php";
$id = $_SESSION['id'];
$b_title = $_POST['b_title'];
$b_content = $_POST['b_content'];
$sql = "INSERT INTO tb_board (b_userid, b_title, b_content) VALUES ('$id', '$b_title', '$b_content')";
$result = mysqli_query($conn, $sql);
echo "<script>alert('저장되었습니다.');location.href='list.php';</script>"
?>
6. 미리 가상으로 만들어 둔 리스트 틀 수정
** list.php
<?php
include "../include/dbconn.php";
$sql = "SELECT * FROM tb_board ORDER BY b_idx DESC";
$result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트</title>
</head>
<body>
<h2>리스트</h2>
<table border="1" width="800">
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>조회수</th>
<th>날짜</th>
<th>추천수</th>
</tr>
<?php
while($row = mysqli_fetch_array($result)) {
$b_idx = $row['b_idx'];
$b_userid = $row['b_userid'];
$b_title = $row['b_title'];
$b_hit = $row['b_hit'];
$b_regdate = $row['b_regdate'];
$b_up = $row['b_up'];
?>
<tr>
<td><?=$b_idx?></td>
<td><?=$b_title?></td>
<td><?=$b_userid?></td>
<td><?=$b_hit?></td>
<td><?=$b_regdate?></td>
<td><?=$b_up?></td>
</tr>
<?php
}
?>
</table>
<p><input type="button" value="글쓰기" onclick="location.href='./write.php'"></p>
</body>
</html>
7. 글 상세보기 + 조회수 증가
** list.php
<?php
include "../include/dbconn.php";
$sql = "SELECT * FROM tb_board ORDER BY b_idx DESC";
$result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트</title>
</head>
<body>
<h2>리스트</h2>
<table border="1" width="800">
<tr>
<th>번호</th>
<th>제목</th>
<th>글쓴이</th>
<th>조회수</th>
<th>날짜</th>
<th>추천수</th>
</tr>
<?php
while($row = mysqli_fetch_array($result)) {
$b_idx = $row['b_idx'];
$b_userid = $row['b_userid'];
$b_title = $row['b_title'];
$b_hit = $row['b_hit'];
$b_regdate = $row['b_regdate'];
$b_up = $row['b_up'];
?>
<tr>
<td><?=$b_idx?></td>
<td><a href="./view.php?b_idx=<?=$b_idx?>"><?=$b_title?></a></td>
<td><?=$b_userid?></td>
<td><?=$b_hit?></td>
<td><?=$b_regdate?></td>
<td><?=$b_up?></td>
</tr>
<?php
}
?>
</table>
<p><input type="button" value="글쓰기" onclick="location.href='./write.php'">
<input type="button" value="돌아가기" onclick="location.href='../3_login.php'"></p>
</body>
</html>
** view.php
<?php
session_start();
include "../include/dbconn.php";
$b_idx = $_GET['b_idx'];
$sql = "UPDATE tb_board SET b_hit = b_hit + 1 WHERE b_idx=$b_idx";
$result = mysqli_query($conn, $sql);
$sql = "SELECT * FROM tb_board WHERE b_idx=$b_idx";
$result = mysqli_query($conn, $sql);
$row = mysqli_fetch_array($result);
$id = $_SESSION['id']; // 세션 아이디
$b_userid = $row['b_userid']; // 글쓴이 아이디
$b_title = $row['b_title'];
$b_content = $row['b_content'];
$b_hit = $row['b_hit'];
$b_regdate = $row['b_regdate'];
$b_up = $row['b_up'];
?>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글보기</title>
</head>
<body>
<h2>글보기</h2>
<p><b>글쓴이</b> : <?=$b_userid?></p>
<p><b>날짜</b> : <?=$b_regdate?></p>
<p><b>조회수</b> : <?=$b_hit?></p>
<p><b>추천수</b> : <?=$b_up?></p>
<p><b>제목</b> : <?=$b_title?></p>
<p><b>내용</b></p>
<p><?=$b_content?></p>
<p><input type="button" value="리스트" onclick="location.href='./list.php'">
<?php
if($id == $b_userid) {
?>
<input type="button" value="수정" onclick="location.href='./edit.php'">
<input type="button" value="삭제" onclick="location.href='./delete.php'">
<?php
}
?>
</p>
</body>
</html>
'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글
2021.02.07 (0) | 2021.02.18 |
---|---|
2021.02.06 (0) | 2021.02.06 |
2021.01.30 (0) | 2021.01.30 |
2021.01.24 (0) | 2021.01.27 |
2021.01.23 (0) | 2021.01.23 |