23.04.03 월 17일차
수업내용
- 자료실 테이블 만들기
자료실 테이블 메인 화면 만들기
- css 파일
-- index.css
머리글, 네비바, 바닥글 폰트 색상 배경색상
폰트 크기 정렬 설정
메인 영역 범위 설정
/* 머리글 */
header{
background:#ff33ff;
height:80px;
line-height:80px;
font-size:40px;
text-align:center;
color:#ffffff;
}
/* 상단메뉴(헤더 밑 링크첨부된 메뉴바)*/
nav{
background:#6c6cee;
height:40px;
line-height:40px;
font-size:16px;
text-align:left;
color:#dddddd;
}
/* 중간 영역 범위 설정 */
section{
min-height:670px;
}
/* 바닥글 */
footer{
background:#3333ff;
height:30px;
line-height:30px;
font-size:14px;
text-align:center;
color:#cccccc;
}
#title{
font-size:30px;
text-align:center;
}
#content{
font-size:20px;
line-height:24px;
}- 상단 화면
웹 페이지명 설정
머리글 설정
css 연결
HTML 캐시삭제
서버 호스트 설정
메뉴 링크 설정
-- top.php
<html>
<head>
<title> UI 구현 (자료실) </title>
<!-- CSS 연결 하기 -->
<link rel="stylesheet" href="/css/index0403.css">
<!-- HTML 메타 태그를 이용한 브라우저 캐시 삭제 -->
<meta http-equiv-"Expires" content="-1"/>
<style>
</style>
<script> </script>
<!-- 서버 호스트 설정 -->
<?php
$host = $_SERVER["HTTP_HOST"];
$path = "http://".$host;
?>
</head>
<body>
<header>
UI 구현 (자료실 연습)
</header>
<nav>
  <a href="<?=$path?>/psd/psd_form0403.php">자료등록하기</a>
 <a href="<?=$path?>/psd/psd_list0403.php">자료목록보기</a>
 <a href="<?=$path?>/index0403.php">처음으로</a>
</nav>- 메인 화면
-- index.php
현재 사이트가 위치한 서버상의 위치에
머리글 바닥글 INCLUDE
메인화면의 내용입력
<? include $_SERVER["DOCUMENT_ROOT"]."/include/top0403.php" ?>
<section>
<br/>
<div id="title"> PHP 자료실 만들기 </div>
<div id="content">
<br/><br/>
 1. 테이블을 만든다. <br/><br/>
 2. 화면을 구현한다. <br/><br/>
 3. PHP 프로그램을 한다. <br/>
  3-1. 폼만들기 <br/>
  3-2. 목록보기 <br/>
  3-3. 내용보기 <br/>
  3-4. 삭제하기 <br/>
  3-5. 수정하기 <br/>
</div>
<br/>
</section>
<? include $_SERVER["DOCUMENT_ROOT"]."/include/bottom0403.php" ?>- 하단 화면
-- bottom.php
바닥글 설정
<footer>
마주스토리 copyright © 2023 rights reserved.
</footer>
</body>
</html>
- 자료실 등록하기 화면
-- form.php
이름, 암호, 암호확인 미입력시 ALERT 창 발생
미입력시 해당하는 입력칸으로 커서 포커싱
저장하기 동작시 저장 동작 파일로 이동
<? include $_SERVER["DOCUMENT_ROOT"]."/include/top0403.php"?>
<style>
table{
width:450px;
height:350px;
}
</style>
<script>
function funcK(){
if(f1.name.value==""){
alert("이름을 입력하세요.");
// 이름 빈칸 상태 Submit시 이름칸 유지
f1.name.focus();
// 실패시 다음액션 진입 안되도록 설정
return false;
}else if(f1.pwd1.value==""){
alert("암호를 입력하세요.");
f1.pwd1.focus();
return false;
}else if(f1.pwd2.value==""){
alert("암호 확인을 입력하세요.")
f1.pwd2.focus();
return false;
}else if(f1.pwd1.value!=f1.pwd2.value){
alert("암호가 일치하지 않습니다.");
f1.pwd1.value="";
f1.pwd2.value="";
f1.pwd1.focus();
return false;
}else{
f1.submit();
}
}
</script>
<section>
<br/><br/>
<div id="title"> PHP 자료실 저장하기 </div>
<div id="content" align=center>
<br/>
<form name=f1 onsubmit="return funcK()"method=post
action=psd_form_ok0403.php
enctype="multipart/form-data">
<table border=1>
<!-- 자료실 저장하기 테이블 카테고리 & 입력창 만들기 -->
<tr>
<td>이 름</td>
<td><input type=text name=name></td>
</tr>
<tr>
<td>암 호</td>
<td><input type=password name=pwd1></td>
</tr>
<tr>
<td>암호확인</td>
<td><input type=password name=pwd2></td>
</tr>
<tr>
<td>나 이</td>
<td><input type=number name=age></td>
</tr>
<tr>
<td>특이사항</td>
<td><textarea cols=40 rows=5 name=etc></textarea></td>
</tr>
<tr>
<td>사 진</td>
<td><input type=file name=img></td>
</tr>
<!-- 저장하기 버튼 만들기 -->
<tr>
<td colspan=2 align=center>
<input type=submit value="저장하기">
</td>
</tr>
</table>
</form>
</div>
</section>
<? include $_SERVER["DOCUMENT_ROOT"]."/include/bottom0403.php" ?>
-- form_ok.php
저장 동작 파일
저장하기 동작 쿼리문 작성
저장 동작 시 폴더와 서버에 저장하도록 설정
저장하기 동작 완료시 list 화면으로 이동
<? include $_SERVER["DOCUMENT_ROOT"]."/include/dbconn0403.php"?>
<?php
$name = $_REQUEST['name'];
$pwd1 = $_REQUEST['pwd1'];
$age = $_REQUEST['age'];
$etc = $_REQUEST['etc'];
$imgName = $_FILES['img']['name'];
$imgFile = $_FILES['img']['tmp_name'];
if (file_exists("./files/$imgName")){
// 파일의 이름만 가져온다.(김춘배이오)
$f_name = basename($imgName, strrchr($imgName, '.'));
echo "f_name:" .$f_name ."<br>";
$time = date("His", time());
echo "time:" .$time ."<br>";
// 점(.)부터 확장자를 가져온다(.png)
$ext=strrchr($imgName,'.');
echo "ext:" .$ext;
$imgName = $f_name."_".$time.$ext;
}
move_uploaded_file($imgFile, "./files/$imgName");
?>
<?php
//DB 데이터
$conn = new mysqli($servername, $username, $password, $dbname);
$SQL = "INSERT INTO member0403(name, pwd1, age, etc, img)";
$SQL = $SQL . " VALUES ('$name', '$pwd1', '$age', '$etc', '$imgName')";
// 오류 내용을 MY-SQL을 통해 정확하게 파악하기 위한 출력문
// echo $SQL;
$conn->query($SQL);
$conn->close();
//PHP를 사용하여 해당 경로로 이동(SQL 구문 오류확인)
header('location:psd_list0403.php');
?>
<!-- 자바 스크립트를 사용하여 해당
절대주소 경로로 이동(SQL 구문 오류확인) -->
<!-- <script>
alert("확인");
location.href="/psd/psd_list0403.php";
</script> -->
- 자료실 목록 보기 화면
-- list.php
등록 시 지정한 번호 이름, 암호, 파일명 나이, 이미지 테이블 추가
이름에 상세화면 링크 추가
중복 저장을 대비한 파일명 구분 설정(파일명에 시간 저장한 시간 포함)
<!-- 경로표시 <?=$_SERVER["DOCUMENT_ROOT"] ?> -->
<? include $_SERVER["DOCUMENT_ROOT"]."/include/top0403.php" ?>
<? include $_SERVER["DOCUMENT_ROOT"]."/include/dbconn0403.php" ?>
<style>
table{
text-align:center;
font-size:15px;
background:#2c46fc;
}
</style>
<?php
$conn = new mysqli($servername, $username, $password, $dbname);
// 칼럼명 : idx, name, pwd1, age, etc, img from member0403
$SQL= "select * from member0403 order by idx desc";
$result = $conn -> query($SQL);
?>
<section>
<br/>
<div id="title"> PHP 자료실 목록보기 </div>
<div id="content" align=center>
<br/>
<table border=1>
<tr>
<th> 번호 </th>
<th> 이름 </th>
<th> 나이 </th>
<th> 파일명 </th>
<th> 사진 </th>
</tr>
<? while ( $row = $result -> fetch_assoc()){ ?>
<tr>
<td><?=$row['idx']?></td>
<td>
<a href=psd_edit0403.php?idx=<?=$row['idx']?>>
<?=$row['name']?></a>
</td>
<td><?=$row['age']?></td>
<td><?=$row['img']?></td>
<td>
<img src="<?=$path?>/psd/files/<?=$row['img']?>" width=150 height=100>
</td>
</tr>
<? } ?>
</table>
<br/>
</div>
</section>
<? include $_SERVER["DOCUMENT_ROOT"]."/include/bottom0403.php" ?>
- 자료실 목록 상세 보기 화면
-- edit.php
저장시 등록한 이미지, 번호, 이름, 암호, 특이사항 확인 화면
하단 수정할 사진 파일 선택 버튼 추가
수정하기, 삭제하기, 목록보기 버튼 추가
수정하기 동작시 수정 파일로 이동
삭제하기 동작 시 삭제파일로 이동
<!-- 경로표시 <?=$_SERVER["DOCUMENT_ROOT"] ?> -->
<? include $_SERVER["DOCUMENT_ROOT"]."/include/top0403.php" ?>
<? include $_SERVER["DOCUMENT_ROOT"]."/include/dbconn0403.php" ?>
<style>
table{
background:#2ffcce;
font-size:15px;
text-align:center;
color:#ff33ee;
}
}
</style>
<?php
$idx = $_REQUEST['idx'];
$conn = new mysqli($servername, $username, $password, $dbname);
// 칼럼명 : idx, name, pwd1, age, etc, img from member0403
$SQL= "select * from member0403 where idx=$idx";
$result = $conn -> query($SQL);
$row = $result -> fetch_assoc();
?>
<script>
function funcK(){
if(f1.name.value==""){
alert("이름을 입력하세요.");
// 이름 빈칸 상태 Submit시 이름칸 유지
f1.name.focus();
// 실패시 다음액션 진입 안되도록 설정
return false;
}else if(f1.pwd1.value==""){
alert("암호를 입력하세요.");
f1.pwd1.focus();
return false;
}else{
f1.submit();
}
}
</script>
<section>
<br/>
<div id="title"> PHP 자료실 목록보기 </div>
<div id="content" align=center>
<br/>
<form name=f1 onsubmit="return funcK()"method=post
action=psd_edit_ok0403.php
enctype="multipart/form-data">
<table border=1>
<tr>
<td colspan=2 align=center>
<img src="<?=$path?>/psd/files/<?=$row['img']?>" width=400 height=150>
</td>
</tr>
<tr>
<td>번호</td>
<td>
<input type=text name=idx value=<?=$row['idx']?> readonly>
</td>
</tr>
<tr>
<td>이름</td>
<td>
<input type=text name=name value=<?=$row['name']?>>
</td>
</tr>
<tr>
<td>나이</td>
<td>
<input type=number name=age value=<?=$row['age']?>>
</td>
</tr>
<tr>
<td>암호</td>
<td>
<input type=text name=pwd1 value=<?=$row['pwd1']?>>
</td>
</tr>
<tr>
<td>특이사항</td>
<td>
<textarea cols=40 rows=5 name=etc><?=$row['etc']?></textarea>
</td>
</tr>
<tr>
<td>사 진</td>
<td><input type=file name=img></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value="수정하기">
<input type=button value="삭제하기"
onclick="javascript:location.href='psd_delete0403.php?idx=<?=$row['idx']?>&img=<?=$row['img']?>'">
<input type=button value="목록보기"
onclick="javascript:location.href='psd_list0403.php'">
</td>
</tr>
</table>
</form>
<br/>
</div>
</section>
<? include $_SERVER["DOCUMENT_ROOT"]."/include/bottom0403.php" ?>
- 자료실 목록 상세 보기 수정,삭제 동작
-- edit_ok.php
수정하기 버튼 선택 시 수정한 내용으로 변경된
리스트 화면으로 이동
서버에서도 수정된 내용 저장
<? include $_SERVER["DOCUMENT_ROOT"]."/include/dbconn0403.php"?>
<?php
$idx = $_REQUEST['idx'];
$name = $_REQUEST['name'];
$pwd1 = $_REQUEST['pwd1'];
$age = $_REQUEST['age'];
$etc = $_REQUEST['etc'];
$imgName = $_FILES['img']['name'];
$imgFile = $_FILES['img']['tmp_name'];
$conn = new mysqli($servername, $username, $password, $dbname);
$SQL= "select img from member0403 where idx=$idx";
$result = $conn -> query($SQL);
$row = $result -> fetch_assoc();
$img=$row['img'];
if($imf!=null || $img!=""){
unlink("./files/$img"); // 파일삭제
}
// 첨부파일 저장
if (file_exists("./files/$imgName")){
// 파일의 이름만 가져온다.(김춘배이오)
$f_name = basename($imgName, strrchr($imgName, '.'));
echo "f_name:" .$f_name ."<br>";
$time = date("His", time());
echo "time:" .$time ."<br>";
// 점(.)부터 확장자를 가져온다(.png)
$ext=strrchr($imgName,'.');
echo "ext:" .$ext;
$imgName = $f_name."_".$time.$ext;
}
move_uploaded_file($imgFile, "./files/$imgName");
?>
<?php
//DB 데이터
$conn = new mysqli($servername, $username, $password, $dbname);
$SQL = "UPDATE member0403 ";
$SQL = $SQL . " SET name='$name', pwd1='$pwd1', age='$age', etc='$etc', img='$imgName'";
$SQL = $SQL . " where idx='$idx'";
$conn->query($SQL);
$conn->close();
//PHP를 사용하여 해당 경로로 이동(SQL 구문 오류확인)
header('location:psd_list0403.php');
?>
<!-- 자바 스크립트를 사용하여 해당
절대주소 경로로 이동(SQL 구문 오류확인) -->
<!-- <script>
alert("확인");
location.href="/psd/psd_list0403.php";
</script> -->
-- delete.php
삭제 동작시 리스트 화면 이동
서버와, 폴더에서 이미지 파일 삭제
<? include $_SERVER["DOCUMENT_ROOT"]."/include/dbconn0403.php" ?>
<?php
$idx = $_REQUEST['idx'];
$img = $_REQUEST['img'];
unlink("./files/$img"); // 파일삭제
?>
<?
$conn = new mysqli($servername, $username, $password, $dbname);
$SQL= "delete from member0403 where idx='$idx'";
$conn->query($SQL);
$conn->close();
header('location:psd_list0403.php');
?>
- 느낀점
웹 페이지를 만들며 상단과 하단영역을 구분하여
코드의 간결성을 높이는 방법을 알았고
서버와의 연동, 링크를 통한 쿼리문 작성 및 동작하여
데이터를 수정, 삭제 동작하는 부분에서 흥미가 느껴졌다.
아직은 ALERT을 위한 IF문과 While문 작성에서는 어려운 부분이 있다.
많은 코드 작성의 반복으로 적응 하도록 해야겠다.
Back-end Developer Preparation Students