23.03.31 금 16일차
수업 내용
- 아파치,IIS 웹서버 차이점
- 연습문제 풀이(테이블 만들기)
- 자료실 테이블 만들기(추가, 삭제)
- 아파치, IIS 웹서버 차이점
Apache (아파치 웹 서버)
: Linux, Unix, Window(가능)
시작파일
: index.htm , index.html
WWW(Web) 기본포트 : 80
무료 서비스
-------------------------------------
IIS(Internet Information Server)
: Window 전용
시작파일
:default.htm, default.asp
WWW(Web) 기본포트 : 80
유료 서비스
-------------------------------------
서버의 명칭
: 서버 = 서비스 = 데몬 = 엔진
=====================
- 연습문제 풀이
* TIP!
< th >< //th > - 셀의 제목 태그
<s >< /s > - 취소선 태그
class - 여러개를 공통된 값으로 변경하고 싶을때
<stlye> - .class명 으로 선언
id - 유일하게 값을 변경하고 싶을때
<stlye> - #id명 으로 선언- 1) 상품 재고 보기 테이블 생성
-- Visual studio code사용
-- test_0331.html
<style>
table{
width: 650px;
height: 450px;
}
th{
font-size:20px;
}
#img1{
width:350px;
height:250px;
}
.tr1{
background-color:darkgrey;
}
.tr2{
text-align:center;
}
caption{
font-size: 25px;
}
</style>
<div align="center">
<br><br><br>
<table border=1>
<caption> 상품 재고 보기</caption>
<tr class="tr1" bgcolor="#777777">
<th>상품명</th><th>정상가격</th><th>할인가격</th>
</tr>
<tr >
<td align="center">PC</td>
<td align="right"><s>1,000,000원</s></td>
<td align="right"><s>910,000원</s></td>
</tr>
<tr class="tr2">
<td rowspan = 2 ><img id="img1" src=img/com.png></td>
<td>금주판매-></td>
<td>5개</td>
<tr align="center">
<td>지난주판매-></td>
<td>3개</td>
</tr>
</table>
</div>- 2) 회원 의견 조사 테이블 생성
// 비주얼 스튜디오 코드
// test_0331.html 사용
<style>
table{
width:700px;
height:300px;
}
</style>
<div align=center>
<br><br>
<h2 align=center>회원 의견 조사</h2>
*는 반드시 입력해야만합니다.
<table border=1>
<tr>
<td>* 아이디 </td>
<td><input type=text requierd size=10></td>
</tr>
<tr>
<td>* 비밀번호 </td>
<td ><input type=password requierd size=10></td>
</tr>
<tr>
<td>이메일 </td>
<td><input type=email size=25>
(입력한분만 조사결과분석자료를 보내드림)
</td>
</tr>
<tr>
<td>제 목</td>
<td>대한상공회의소의 친절도에 대한 의견 조사</td>
</tr>
<tr>
<td>의견 조사</td>
<td>
대한상공회의소의 업무 수행 태도에 대하여 어떻게 생각 하십니까? <br><br>
<input type=radio value="5" checked > 매우 친절하다
<input type=radio value="3" > 친절하다
<input type=radio value="1" > 좀더 친절했으면 한다
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit name=submit value="보 내 기" >
</td>
</tr>
</table>
</div>- 3) 보내기 선택 시 확인 알림창 생성
// + 아이디,패스워드 입력 시 알림창 생성(자바스크립트사용)
// 비주얼 스튜디오 코드
// test2_0331.html , form_ok_0331.php 사용
========================================
A. Button형식 사용
<style>
table{
width:700px;
height:300px;
}
</style>
<div align=center>
<br><br>
<form name="f1" action="form_ok0331.php">
// 별칭을 f1으로 통일, form_ok0331.php폼으로 이동
<h2 align=center>회원 의견 조사</h2>
*는 반드시 입력해야만합니다.
<table border=1>
<tr>
<td>* 아이디 </td>
<td><input type=text name=id size=10></td>
</tr>
<tr>
<td>* 비밀번호 </td>
<td ><input type=password name=pwd size=10></td>
</tr>
<tr>
<td>이메일 </td>
<td><input type=email size=25>
(입력한분만 조사결과분석자료를 보내드림)
</td>
</tr>
<tr>
<td>제 목</td>
<td>대한상공회의소의 친절도에 대한 의견 조사</td>
</tr>
<tr>
<td>의견 조사</td>
<td>
대한상공회의소의 업무 수행 태도에 대하여 어떻게 생각 하십니까? <br><br>
<input type=radio value="5" checked > 매우 친절하다
// default 체크 표시 = checked
<input type=radio value="3" > 친절하다
<input type=radio value="1" > 좀더 친절했으면 한다
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=button
" // formck의 내용 불러오기
value="보 내 기" >
</td>
</tr>
</table>
</form>
</div>
<script > //자바스크립트
function formck(){ // 함수명 설정
if(f1.id.value==""){
alert("아이디를 입력해주세요.");
f1.id.focus(); // id 입력창 커서 깜박임 유지
return false;
}
if(f1.pwd.value==""){
alert("암호를 입력해주세요.");
f1.pwd.focus();// pwd입력창 커서 깜박임 유지
return false;
}
alert("로그인 되었습니다.");
f1.submit(); //진입 동작
}
</script>
========================================
B. Submit 형식 사용
<style>
table{
width:700px;
height:300px;
}
</style>
<div align=center>
<br><br>
<form name="f1"
// submit 사용시에는 form에 onsubmit 조건을 부여해야한다.
action="form_ok0331.php">
<h2 align=center>회원 의견 조사</h2>
*는 반드시 입력해야만합니다.
<table border=1>
<tr>
<td>* 아이디 </td>
<td><input type=text name=id size=10></td>
</tr>
<tr>
<td>* 비밀번호 </td>
<td ><input type=password name=pwd size=10></td>
</tr>
<tr>
<td>이메일 </td>
<td><input type=email size=25>
(입력한분만 조사결과분석자료를 보내드림)
</td>
</tr>
<tr>
<td>제 목</td>
<td>대한상공회의소의 친절도에 대한 의견 조사</td>
</tr>
<tr>
<td>의견 조사</td>
<td>
대한상공회의소의 업무 수행 태도에 대하여 어떻게 생각 하십니까? <br><br>
<input type=radio value="5" checked > 매우 친절하다
<input type=radio value="3" > 친절하다
<input type=radio value="1" > 좀더 친절했으면 한다
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value="보 내 기" >
</td>
</tr>
</table>
</form>
</div>
<script >
function formck(){
if(f1.id.value==""){
alert("아이디를 입력해주세요.");
f1.id.focus();
return false;
}
if(f1.pwd.value==""){
alert("암호를 입력해주세요.");
f1.pwd.focus();
return false;
}
alert("로그인 되었습니다.");
f1.submit();
}
</script>
- 자료실 만들기
- 1) 회원가입하기 테이블 만들기
form 태그에 method, enctype 필수 기입
: 바이너리 값(파일)을 넘기기 위해
<div align=center>
<br><br><br>
<font size=5>회원가입하기<font>
<form action="form_ok0331.php" method=post enctype="multipart/form-date">
<table border=1>
<tr>
<td>이름</td>
<td><input type=text name=name></td>
</tr>
<tr>
<td>나이</td>
<td><input type=number name=age></td>
</tr>
<tr>
<td>사진</td>
<td><input type=file name=img></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=button value="저장하기"></td>
</tr>
</table>
</form>
</div>- 2) 자료실 테이블 만들기
mY-SQL DB 테이블 생성
-- PHP MY ADMIN
-- root/Autoset
-- ppk 사용
idx 자동증가 > P.K,
name varchar(20),
age int(3)
img varchar(50)- 3) form파일에서 값 가져와서 출력하기
form_ok0331.php<br>
<?php
// form0331.php 파일의 값을 가져오기
$name=$_REQUEST['name']; // 이름
$age=$_REQUEST['age']; // 나이
$imgName=$_FILES['img']['name']; //파일명
$imgFile=$_FILES['img']['tmp_name']; // 파일 임시 폴더(경로)
echo "확인: $name, $age, $imgName";
// 이름, 나이, 파일이름 출력
?>4) 파일 이동시키기
form_ok0331.php<br>
<?php
// form0331.php 파일의 값을 가져오기
$name=$_REQUEST['name']; // 이름
$age=$_REQUEST['age']; // 나이
$imgName=$_FILES['img']['name']; //파일명
$imgFile=$_FILES['img']['tmp_name']; // 파일 임시 폴더(경로)
echo "확인: $name, $age, $imgName";
// 이름, 나이, 파일이름 출력
move_uploaded_file($imgFile, "./files/$imgName");
// 실제 파일을 가져와 해당 경로로 옮긴다
?>4-1) MY-SQL DB 연동하기(자동증가)
//phpMyadmin 정보
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
// DB 연결
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// DB로 값을 삽입시키는 쿼리문
$sql = "INSERT INTO member0331 (name, age, img)
VALUES ( '$name', '$age', '$imgName')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();- 4-2) MY-SQL DB 연동하기(my-sql 쿼리 별칭지정)
//phpMyadmin 정보
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
// DB 연결
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// DB로 값을 삽입시키는 쿼리문
$sql = "INSERT INTO member0331 (idx, name, age, img)
VALUES ( (select ifnull(max(a.idx),0)+1 from member0331 a ),
'$name', '$age', '$imgName')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();- SQL문 주의사항
SQL문이 길어져서 줄바꿈이 필요할때
- 임의로 엔터를 사용하여 줄바꿈을 하면 안된다.
- 아래와 같은 형식으로 사용해야한다.
$sql="A, B";
$sql= $sql."C, D"; - 5) 자료실 리스트 출력하기
list0331.php
<?php
// DB 서버 정보
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
// DB 연결
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// SQL 쿼리문 작성(줄바꿈 형식)
$SQL= "select idx, name, age, img";
$SQL= $SQL . " from member0331 order by idx asc" ;
$result = $conn -> query($SQL);
//테이블 설정 및 가운데 정렬
echo "<div align=center>";
echo "<table border=1>";
echo "<tr><td>번호</td><td>이름</td><td>나이</td><td>파일명</td><td>이미지</td><tr>";
// 반복문
while ($row = $result -> fetch_assoc()){
?>
// 출력문
<tr>
<td><?=$row['idx']?></td>
<td><?=$row['name']?></td>
<td><?=$row['age']?></td>
<td><?=$row['img']?></td>
<td><img src=./files/<?=$row['img']?> width=100 height=70 ></td>
</tr>
<br>
<?
}
//테이블, 가운데 정렬, DB연결 종료
echo "</table>";
echo "</div>";
$conn->close();
?>- 6) 자료실 리스트 이름에 링크걸어 세부내용보기
list0331.php
<?php
// DB 서버 정보
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
// DB 연결
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// SQL 쿼리문 작성(줄바꿈 형식)
$SQL= "select idx, name, age, img";
$SQL= $SQL . " from member0331 order by idx asc" ;
$result = $conn -> query($SQL);
//테이블 설정 및 가운데 정렬
echo "<div align=center>";
echo "<table border=1>";
echo "<tr><td>번호</td><td>이름</td><td>나이</td><td>파일명</td><td>이미지</td><tr>";
// 반복문
while ($row = $result -> fetch_assoc()){
?>
// 출력문
<tr>
<td><?=$row['idx']?></td>
<td>
<a href=edit0331.php?idx=<?=$row['idx']?>&name=<?=$row['name']?>>
<?=$row['name']?>
</a>
</td>
<td><?=$row['age']?></td>
<td>
<?=$row['img']?>
</td>
<td><img src=./files/<?=$row['img']?> width=100 height=70 ></td>
</tr>
<br>
<?
}
//테이블, 가운데 정렬, DB연결 종료
echo "</table>";
echo "</div>";
$conn->close();
?>
edit0331.php
<?
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
$conn = new mysqli($servername, $username, $password, $dbname);
$idx = $_REQUEST['idx'];
$SQL= "select idx, name, age, img";
$SQL= $SQL . " from member0331 where idx=$idx" ;
$result = $conn -> query($SQL);
echo "<div align=center>";
echo "<table border=1>";
echo "<tr><td>번호</td><td>이름</td><td>나이</td><td>파일명</td><td>이미지</td><tr>";
?>
<tr>
<td><?=$row['idx']?></td>
<td><?=$row['name']?></td>
<td><?=$row['age']?></td>
<td><?=$row['img']?></td>
<td><img src=./files/<?=$row['img']?> width=100 height=70 ></td>
</tr>
<br>
<?
echo "</table>";
echo "</div>";
$conn->close();
?>- 7)자료실 리스트 파일명에 링크걸어 리스트 삭제
list0331.php
<?php
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$SQL= "select idx, name, age, img";
$SQL= $SQL . " from member0331 order by idx desc" ;
$result = $conn -> query($SQL);
echo "<div align=center>";
echo "<table border=1>";
echo "<tr><td>번호</td><td>이름</td><td>나이</td><td>파일명</td><td>이미지</td><tr>";
while ($row = $result -> fetch_assoc()){
?>
<tr>
<td>
<?=$row['idx']?>
</td>
<td>
<a href=edit0331.php?idx=<?=$row['idx']?>&name=<?=$row['name']?>>
<?=$row['name']?>
</a>
</td>
<td>
<?=$row['age']?></td>
<td>
<a href=delete0331.php?idx=<?=$row['idx']?>&img<?=$row['img']?>>
<?=$row['img']?>
</a>
</td>
<td>
<img src=./files/<?=$row['img']?> width=100 height=70 >
</td>
</tr>
<?
}
echo "</table>";
echo "</div>";
$conn->close();
?>
delete0331.php
<?php
$idx = $_REQUEST['idx'];
$img = $_REQUEST['img'];
?>
번호 : <?=$idx?> <br>
이미지 : <?=$img?> <br>
<?php
unlink("./files/$img");
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
$conn = new mysqli($servername, $username, $password, $dbname);
$SQL= "delete from member0331 where idx=$idx";
$conn->query($SQL);
$conn->close();
header('Location:list0331.php'); // 리스트화면으로 바로 넘어감
?>
- 8) 자료실 리스트 상세화면 링크 버튼 만들기
edit0331.php
<?
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
$conn = new mysqli($servername, $username, $password, $dbname);
$idx = $_REQUEST['idx'];
$SQL= "select idx, name, age, img";
$SQL= $SQL . " from member0331 where idx=$idx" ;
$result = $conn -> query($SQL);
$row = $result -> fetch_assoc();
?>
<div align=center>
<img src=./files/<?=$row['img']?>
width=396 height=300 border=1 >
<table border=1 width=400>
<tr><td>번호</td><td><?=$row['idx']?></td></tr>
<tr><td>이름</td><td><?=$row['name']?></td></tr>
<tr><td>나이</td><td><?=$row['age']?></td></tr>
<tr><td>파일명</td><td><?=$row['img']?></td></tr>
</table>
<br>
<a href=form_0331.php>회원가입</a>  
<a href=list0331.php>목록보기</a>  
<a href=delete0331.php>삭제하기</a>  
</div>
<?
$conn->close();
?>- 9)자료실 리스트 상세화면 삭제 링크버튼 동작
edit0331.php
<?
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
$conn = new mysqli($servername, $username, $password, $dbname);
$idx = $_REQUEST['idx'];
$SQL= "select idx, name, age, img";
$SQL= $SQL . " from member0331 where idx=$idx" ;
$result = $conn -> query($SQL);
$row = $result -> fetch_assoc();
?>
<div align=center>
<img src=./files/<?=$row['img']?>
width=396 height=300 border=1 >
<table border=1 width=400>
<tr><td>번호</td><td><?=$row['idx']?></td></tr>
<tr><td>이름</td><td><?=$row['name']?></td></tr>
<tr><td>나이</td><td><?=$row['age']?></td></tr>
<tr><td>파일명</td><td><?=$row['img']?></td></tr>
</table>
<br>
<a href=form_0331.php>회원가입</a>  
<a href=list0331.php>목록보기</a>  
<a href=delete0331.php?idx=<?=$row['idx']?>&img=<?=$row['img']?>>회원삭제</a>  
// 링크에 삭제 파일 연결하여 삭제 동작
</div>
<?
$conn->close();
?>- 10) 리스트 회원가입화면 추가시 이름 필수입력 알림창 발생
form_0331.php
<script>
function formCK(){
if(f1.name.value==""){ // 이름 입력필수 알림창 if문 추가
alert("이름 필수 입력"); // 조건
f1.name.focus(); // 조건에 해당시 입력창 화면으로 포커싱
}else{
f1.submit(); // 이름입력시 진입
}
}
</script>
<div align=center>
<br><br><br>
<font size=5>회원가입하기<font>
<form name="f1" action="form_ok0331.php" method=post
enctype="multipart/form-data">
<table border=1>
<tr>
<td>이름</td>
<td><input type=text name=name required></td> // 필수입력 required 추가
</tr>
<tr>
<td>나이</td>
<td><input type=number name=age></td>
</tr>
<tr>
<td>사진</td>
<td><input type=file name=img></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=button onClick="formCK()" value="저장하기"></td>
</tr>
</table>
</form>
</div>
- 11) 자료실 테이블 1001번 부터 시작하는 순번 칼럼 만들기
<?php
$servername = "localhost";
$username = "root";
$password = "autoset";
$dbname = "ppk";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$SQL= "select idx, name, age, img";
$SQL= $SQL . " from member0331 order by idx desc" ;
$result = $conn -> query($SQL);
echo "<div align=center>";
echo "<table border=1>";
echo "<tr align=center><td>순번</td><td>번호</td><td>이름</td><td>나이</td><td>파일명</td><td>이미지</td><tr>";
$num=1000; // 순번 초기값 설정
while ($row = $result -> fetch_assoc()){
$num+=1; // 순번 값이 1씩 증가
?>
<tr>
<td>
<?=$num?>// 순번 칼럼 출력
</td>
<td>
<?=$row['idx']?>
</td>
<td>
<a href=edit0331.php?idx=<?=$row['idx']?>&name=<?=$row['name']?>>
<?=$row['name']?>
</a>
</td>
<td>
<?=$row['age']?>
</td>
<td>
<?=$row['img']?>
</td>
<td>
<img src=./files/<?=$row['img']?> width=100 height=70 >
</td>
</tr>
<?
}
echo "</table>";
echo "</div>";
$conn->close();
?>
Back-end Developer Preparation Students