Html 로그인 DB - Html logeu-in DB

HP.zip

0.06MB

<최종 화면> 로그인 페이지, 쪽지( 쪽지 보내기, 송신함, 수신함) 페이지를 만들었다.

[로그인]

[쪽지] - 쪽지 보내기, 목록보기

db,php,html,script 홈페이지 1-1 에서 작업한 파일

오늘 새로 추가할 파일은 빨간색 네모 박스에 있는 것들이다.

크게보면 로그인 페이지, 쪽지 페이지이다.

로그인 페이지 만들어보자.

HP 하위 폴더로 login 폴더를 만들고, login 폴더안에 login_form.php 파일을 만들자.

login_form.php

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

<ul>

</ul>

</div>

</form>

</div>

</section>

</footer>

</body>

</html>

이제 로그인 페이지에 스타일을 적용하자. css폴더에 login.css 파일을 만들자.

login_form.php에 login.css 파일을 link한다.

/* 전체 가로 사이즈와 가운데 정렬 */

#login_box{width: 429px; margin: 0 auto;}

/* 로그인 제목줄 글씨 설정과 아래쪽 경계선 */

#login_title{margin: 50px 0 0 0; padding-bottom: 5px; border-bottom: solid 2px #ffbe10; font-size: 20px; font-weight: bold;}

/* 로그인 제목줄과 인풋영역 사이의 간격 */

#login_form{margin-top: 20px;}

/* input요소들 사이 간격 */

#login_form li{margin-top: 10px;}

/* input요소 사이즈 */

#login_form input{width: 100%; height: 47px;}

/* 로그인 버튼 */

#login_form #login_btn {margin-top: 15px; margin-bottom: 50px;}

#login_form #login_btn input{ width: 100%; height: 60px;}

스타일을 적용하면 알맞게 배치가 되었다.

이제 로그인 버튼을 눌렀을 시 아이디,비밀번호 입력 여부와 일치 여부를 판별하고

만약 로그인이 제대로 됐다면 db에서 ( userid, username, userlevel, userpoint ) session에 저장한다.

<?php

$id= $_POST['id'];

$pass= $_POST['pass'];

// 아이디와 비밀번호 입력 여부 확인

if(!$id){

// 경고창 보여주고 이전 페이지로 이동 [JS의 history객체 이동]

echo "

alert('아이디를 입력하세요.');

</script>

exit;

}

if(!$pass){

// 경고창 보여주고 이전 페이지로 이동 [JS의 history객체 이동]

echo "

alert('비밀번호를 입력하세요.');

</script>

exit;

}

// exit가 안되었다면 아이디와 비번이 전달된 것이므로 DB에서 해당 아이디와 비번을 체크

// DB 접속 공통모듈 사용

// 쿼리문

$sql= "SELECT * FROM member WHERE id='$id' and pass='$pass'";

$result= mysqli_query($conn,$sql);

// 결과표로부터 레코드 수 얻어오기

$rowNum= mysqli_num_rows($result);

// $rowNum이 0이면 아이디와 패스워드가 맞지 않는 것

if(!$rowNum){

echo "

alert('아이디와 비밀번호를 확인하세요.');

</script>

exit;

}

// exit가 안되었다면 로그인이 되었다는 것임!!

// 다른 페이지에서 로그인 되었다고 인지하기 위해, 회원정보를 세션에 저장

// 해당하는 id의 회원정보 얻어오기

$row=mysqli_fetch_array($result, MYSQLI_ASSOC);

// 세션에 저장

session_start();

$_SESSION['userid']=$row['id'];

$_SESSION['username']=$row['name'];

$_SESSION['userlevel']=$row['level'];

$_SESSION['userpoint']=$row['point'];

echo "

</script>

<실행 화면> - 아무것도 입력 안하고 로그인을 하면 알림창이 나온다.

<실행 화면> - 정상 로그인시 HOME 화면으로 넘어간다.

이제 로그아웃 기능을 할 logout.php 파일을 만들자.

코드 내용은 로그인시 sesstion에 저장한 것을 지우면 된다.

<실행 화면>

이제 정보수정 페이지를 만들자. login 폴더안에 member_modify_form.php파일을 만들자.

코드 내용은

로그인시 sesstion에 저장된 $userid를 이용하여 DB에서 회원 정보를 받아온다.
그 받은 정보를 해당 수정 칸에 미리 기입을 한다.
저장하기를 누르면, 비어있는 칸을 판별하고 member_modify.php(이후에 만들거임)를 실행한다.
취소를 누르면 모든칸을 공백으로 바꾼다.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

<!DOCTYPE html>

<html>

<head>

// 서밋 버튼 이미지 클릭시

function submitForm(){

// 비밀번호 비어 있는가?

alert("비밀번호를 입력하세요.");

return;

}

// 비밀번호 확인 비어 있는가?

alert("비밀번호 확인을 입력하세요.");

return;

}

// 이름 비어 있는가?

if(!document.member_form.name.value){

alert("이름을 입력하세요.");

document.member_form.name.focus();

return;

}

// 비밀번호와 비밀번호 확인 칸의 입력값이 같은지 비교

alert("비밀번호가 일치하지 않습니다.\n다시 입력해 주세요.");

// 커서가 이동하고 그곳에 써있는 글씨가 선택되어 있음.

return;

}

// form요소를 직접 submit하는 메소드

}

// 초기화 버튼 이미지 클릭시

function resetForm(){

document.member_form.name.value="";

// 첫번째 입력 요소로 이동

}

</script>

</head>

<body>

</header>

<?php

//로그인 되어있는 회원의 정보를 읽어오는 쿼리문

$sql="SELECT * FROM member WHERE id='$userid'";

$result = mysqli_query($conn,$sql);

$row = mysqli_fetch_array($result,MYSQLI_ASSOC);//연관배열 = [이름명]

$pass = $row['pass'];

$email = explode("@",$row['email']); //배열이 만들어짐

$email1=$email[0];

$email2=$email[1];

mysqli_close($conn);

</div>

</div>

</div>

</div>

</div>

</div>

</form>

</div>

</section>

</footer>

</body>

</html>

<실행화면> - 정보수정을 누르면 자신의 아이디에 해당하는 정보가 기입되어 있다.

이제 저장하기 버튼을 누를시 DB 정보를 바꾸자.

login폴더에 member_modify.php 파일을 만들자.

<?php

//id만 GET으로 전달받을 수 있음

$id= $_GET['id'];

// post로 전달받은 값들

$pass= $_POST['pass'];

$name= $_POST['name'];

$email1= $_POST['email1'];

$email2= $_POST['email2'];

$email= $email1 . "@" . $email2;

// 업데이트 쿼리문

$sql= "UPDATE member SET pass='$pass', name='$name', email='$email' WHERE id='$id'";

mysqli_query($conn, $sql);

mysqli_close($conn);

echo "

</script>

이제 쪽지 메뉴를 작업해보자.

HP폴더에 하위 폴더인 message폴더를 만들고, message 폴더안에 message_form.php 파일을 만들자.

코드 내용은 보내는 사람만 미리 자신의 아이디가 기입되도록 하고, 나머지 항목은 작성하게 input요소로 만들었다.

내용만 textarea로

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

</ul>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</li>

</ul>

</div>

</form>

</div>

</section>

</footer>

</body>

</html>

쪽지를 보내기 위해서는 로그인을 해야한다. 로그인 후 쪽지 메뉴를 눌러보자.

이제 쪽지 보내기 페이지 스타일을 적용하겠다.

css폴더 안에 message.css 파일을 만들자.

/* 쪽지 작성 영역 사이즈 및 가운데 정렬 */

#message_box {width: 800px; margin: 0 auto;}

/* 제목줄의 마진 및 아래 경계선 */

#message_box h3{margin-top: 30px; padding: 10px; border-bottom: solid 2px #516e7f; font-size: 20px;}

/* 인풋영역들의 좌우 패딩 */

#wirte_msg{padding: 0 20px;}

/* 라벨 영역과 input영역들의 span요소의 사이즈 조절을 위해 inline-block으로 */

#write_msg span{display: inline-block;}

/* 라벨영역 가로사이즈 */

#write_msg .col1 {width: 150px;}

/* 각 줄마다 아래쪽에 경계선 그리기 */

#write_msg li{border-bottom: solid 1px #dddddd; padding: 12px;}

/* input요소의 사이즈 */

#write_msg input {width: 500px; height: 25px;}

/* textarea의 사이즈*/

#write_msg textarea {width: 500px; height: 150px;}

/* textarea의 라벨글씨가 아래쪽에 배치되기에 이를 수정하기 위해 absolute position 사용*/

#write_msg #textarea {position: relative; height: 158px;}

#write_msg #textarea .col1 {position: absolute; top: 10px;}

#write_msg #textarea .col2 {position: absolute; left: 166px;}

/* 서밋버튼 */

#write_msg input[type="submit"]{margin: 15px 0 30px 165px; cursor: pointer;}

/* 수신/송신 쪽지함 오른쪽 정렬 */

#message_box .top_buttons{text-align: right; margin: 20px 0px;}

#message_box .top_buttons li{display: inline; margin-right: 20px;}

#message_box .top_buttons li a:link{text-decoration: underline; color: green;}

#message_box .top_buttons li a:visited{text-decoration: underline; color: green;}

<실행화면>- 쪽지 보내기 스타일 적용

이제 보내기 버튼을 눌렀을 시, 기능을 하는 message_insert.php 파일을 만들자.

message 폴더안에 message_insert.php 파일을 만든다.

message_insert.php 작성 전에 테이블을 만들고 시작하자.

cmd창에서 DB 접속 해서 테이블을 만들 수 있지만 오타를 잘 볼 수 있게 미리 .sql 파일에 작성후 복붙하자.

message 폴더 안에 message.sql 파일을 만든다.

CREATE TABLE message(

num INTEGER AUTO_INCREMENT,

send_id VARCHAR(15) NOT NULL,

rv_id VARCHAR(15) NOT NULL,

subject VARCHAR(20) NOT NULL,

content TEXT,

regist_day VARCHAR(20),

PRIMARY KEY(num),

-- INDEX(send_id),

FOREIGN KEY(send_id) REFERENCES member(id),

FOREIGN KEY(rv_id) REFERENCES member(id)

);

FOREIGN KEY(send_id) REFERENCES member(id),

FOREIGN KEY(rv_id) REFERENCES member(id)

는 member 테이블의 id와 연결하여 없는 id가 저장되는 것을 방지할 수 있다. ( 이것이 RDBMS )

member 테이블은 회원 정보가 있고, 쪽지로 보낼 회원id가 있는지 외래키(FOREIGN KEY)를 이용하여 판별한다.

hp_db까지 접속하였다면 작성한 sql문을 복사하여 cmd창에 붙여넣기 하자.

phpMyadmin에서도 확인 가능하다.

그리고 추가로 외래키가 연결된 것을 확인할 수 있다.

그리고 회사에서는 테이블 관계를 표 형식으로 주는데, 지금 테이블의 관계를 보려면 데이터 사전을 눌러보자.

이런 식으로 두 테이블간의 관계를 확인할 수 있다.

이제 다시 message_insert.php 코드 작성으로 돌아가자.

수신인이 member 테이블에 존재하는 회원이라면 message 테이블에 쪽지 내용(송/수신인, 제목, 내용 등등)이 저장된다.

<?php

// GET방식으로 전달된 송신 id [보내는 사람]

$send_id=$_GET['send_id'];

// post방식으로 전달된 다른 값들

$rv_id=$_POST['rv_id']; //수신자 아이디

$subject= $_POST['subject'];

$content= $_POST['content'];

// 쪽지 보낸 시간

$regist_day=date("Y-m-d H:i");

// message테이블에 저장하기!!

// 수신아이디가 존재하는지

$sql= "SELECT * FROM member WHERE id='$rv_id'";

$result= mysqli_query($conn, $sql);

$numNum= mysqli_num_rows($result);

if($numNum){

// message테이블에 저장

$sql= "INSERT INTO message(send_id, rv_id, subject, content, regist_day) ";

$sql.="VALUES('$send_id','$rv_id','$subject','$content','$regist_day')";

mysqli_query($conn, $sql);

}else{

echo"

alert('수신 아이디가 잘못되었습니다.');

</script>

exit;

}

mysqli_close($conn);

// 우선은 뒤로 돌아가기..즉, 메세지 작성 페이지로 이동

echo "

</script>

// 원래는 송신쪽지함 페이지로 이동

<실행 화면> - 쪽지가 잘 보내졌다면 현재 화면은 그대로일 것이다.

이제 송신함, 수신함 페이지를 만들어 보자.

message폴더안에 message_box.php 파일을 만들자.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

<h3>

<?php

$mode= $_GET['mode'];

if($mode=="send") echo "송신 쪽지함 > 목록보기";

else echo "수신 쪽지함 > 목록보기";

</h3>

<div>

<li>

</li>

</div>

</section>

</footer>

</body>

</html>

<실행화면> - php파일은 한개지만 mode에 따라서 송신함, 수신함으로 바뀐다.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

<h3>

<?php

$mode= $_GET['mode'];

if($mode=="send") echo "송신 쪽지함 > 목록보기";

else echo "수신 쪽지함 > 목록보기";

</h3>

<div>

<li>

</li>

<?php

// 송신 쪽지함이면 'userid'가 send_id로 저장되어 있는 리스트만 가져오기 : 최신 쪽지 순으로.(num 내림차순)

if($mode=="send"){

$sql="SELECT * FROM message WHERE send_id='$userid' ORDER BY num desc";

}else{ //수신 쪽지함이면 'userid'가 rv_id로 저장되어 있는 리스트만

$sql="SELECT * FROM message WHERE rv_id='$userid' ORDER BY num desc";

}

$result=mysqli_query($conn, $sql);

//전체 쪽지 수

$rowNum= mysqli_num_rows($result);

// 한페이지안에 모든 쪽지를 리스트로 보여주면 너무 길어서.. 최대 한페이지에 10개까지만 보여지게 하고

// 리스트의 하단에 페이지네이션을 표시해서 선택할 수 있도록

if( isset($_GET['page']) ) $page= $_GET['page'];

else $page=1;

// 전체 페이지 수 계산 1~10 : 1page, 11~20: 2page, 21~30: 3page ....

if( $rowNum %10 == 0) $total_page= floor($rowNum/10);

else $total_page= floor($rowNum/10)+1;

if($total_page==0) $total_page=1;

// 현재페이지에서 시작할 쪽지글의 row 번호 (num값 아님)

$start= ($page -1)*10; // 1page row=0부터, 2page row=10부터

for($i=$start; $i<$start+10 && $i<$rowNum; $i++){

//가져올 레코드의 위치(row 위치) 이동

mysqli_data_seek($result, $i);

$row= mysqli_fetch_array($result, MYSQLI_ASSOC);

$num= $row['num'];

$subject= $row['subject'];

// $content= $row['content'];

$msg_id= ($mode=="send_id")? $row['rv_id']: $row['send_id'];

$regist_day= $row['regist_day'];

// 화면에 보여주는 작업html문법이 더 쉬워서..

<li>

</li>

<?php

}

mysqli_close($conn);

</ul>

<?php

if($page!=1){

$newPage= $page-1;

}else{

echo "<li>◀이전 </li>";

}

// 페이지 수만큼 페이지 번호 출력

for($i=1;$i<=$total_page;$i++){

if($i==$page) echo "<li><strong> $i </strong></li>";

}

if($page!=$total_page){

$newPage= $page+1;

}else{

echo "<li> 다음▶</li>";

}

</ul>

</ul>

</div>

</section>

</footer>

</body>

</html>

<실행화면> - 쪽지 보내기 페이지에서 송신 쪽지함을 누렀을때 페이지

여러번 쪽지를 보내서 쪽지가 쌓여있다.

이제 스타일을 적용해보자.

css폴더에 message_box.css파일을 만들자.

/* 쪽지함 전체영역의 가로사이즈와 가운데 정렬 */

#message_box{width: 800px; margin: 0 auto;}

/* 제목영역 */

#message_box h3{margin-top: 30px; padding: 10px; border-bottom: solid 2px #516e7f;font-size: 20px;}

/* 쪽지함 리스트 항목마다 아래 경계선 */

#message li{padding: 10px; border-bottom: solid 1px #dddddd;}

/* 제목줄 글씨는 굵게 */

#message li:nth-child(1) {font-weight: bold;}

/* span은 사이즈 조절이 안되서 */

#message span {display: inline-block; text-align: center;}

/* 각 칸(컬룸)마다 가로사이즈 지정 */

#message .col1 {width: 80px;}

#message .col2 {width: 410px;text-align: left;}

#message .col3 {width: 120px;}

#message .col4 {width: 150px;}

/* 페이지 네이션 가운데 정렬 및 옆으로 배치 */

#page_num {text-align: center; margin: 30px 0;}

#page_num li {display: inline;}

/* 버튼들... 오른쪽 정렬 */

#message_box .buttons {text-align: right; margin: 20px 0 40px 0;}

/* 버튼들 옆으로 배치 */

#message_box .buttons li {display: inline;}

/* 버튼들의 글씨가 버튼박스에 너무 꽉차있어서 안이쁨. 그래서 패딩 */

#message_box .buttons button{padding: 5px 10px; cursor: pointer;}

쪽지함은 쪽지 개수에 따라 밑에 페이지 번호가 생길 것이다.

다음 시간에는 쪽지를 클릭했을때 내용이 보이는 것부터 작업하겠다.

Html 로그인 DB - Html logeu-in DB

관련 게시물

자바스크립트 클릭 팝업 - jabaseukeulibteu keullig pab-eob

크아 옛날 아이디 - keua yesnal aidi

안드로이드 스튜디오 로그인 로그아웃 - andeuloideu seutyudio logeu-in logeuaus

안드로이드 웹뷰 카카오톡 로그인 - andeuloideu webbyu kakaotog logeu-in

라프 텔 인증 코드 - lapeu tel injeung kodeu

블리자드 지불거절 - beullijadeu jibulgeojeol

Ppt GIF 재생 안됨 - Ppt GIF jaesaeng andoem

유비소프트 로그인 오류 - yubisopeuteu logeu-in olyu

오큘러스 계정 만들기 - okyulleoseu gyejeong mandeulgi

홈페이지 HTML 소스보기 - hompeiji HTML soseubogi

광고하는

최근 소식

주민등록번호 로 휴대폰 번호 찾기 - jumindeunglogbeonho lo hyudaepon beonho chajgi

아기는 몇살까지? - agineun myeochsalkkaji?

섬머 포켓 스위치 - seommeo pokes seuwichi

사진 수염 제거 어플 - sajin suyeom jegeo eopeul

복면가 왕 인디언 인형 누구야? - bogmyeonga wang indieon inhyeong nuguya?

마법천자문 전투력 순위 - mabeobcheonjamun jeontulyeog sun-wi

롤20 브금 매크로 - lol20 beugeum maekeulo

아동학대예방교육 가정통신문 - adonghagdaeyebang-gyoyug gajeongtongsinmun

Ezpdf 여백 없이 인쇄 - Ezpdf yeobaeg eobs-i inswae

온 세상 창조주 ppt - on sesang changjoju ppt

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의