본문 바로가기
안드로이드 웹앱 콘테츠 개발자 양성(국비지원)/HTML 도메인

HTML(언어 사용 html,css,js, php) 기존 도메인을 이용 GET,POST 방식으로 서버 업로드 1-2 [DB 연동]

by 차누감 2019. 10. 18.

HTML(언어 사용 html,css,js, php) 기존 도메인을 이용 GET,POST 방식으로 서버 업로드 1-1 이어서 작업하겠다.

DB하고 연동하자.

 

umul.dothome.co.kr/myadmin

자신의 도메인 myadmin을 들어가자. mtsql을 지원해준다.

해당 주소를 들어가서 로그인을 하고

인덱스 PRIMARY는 종류가 INT형이여야한다. 위 사진과 같이 기입하고 저장을 누르자.

(AI는 자동 증가)

그러면 위 사진과 같이 board 테이블이 만들어져 있을 것이다. board를 클릭하자.
여기서 속성 등을 수정 할 수 있다.

postDataWithFile.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
 
    header("Content-Type: text/html; charset=UTF-8");
 
    $name$_POST['name'];
    $message$_POST['msg'];
 
    $file$_FILES['upload'];
    $srcName$file['name'];
    $fileSize$file['size'];
    $fileType$file['type'];
    $tmpName$file['tmp_name'];
 
    echo "$name <br/>";
    echo "$message <br/>";
    echo "$srcName <br/>";
    echo "$tmpName <br/>";
    echo "$fileSize <br/>";
    echo "$fileType <br/>";
 
    //임시 저장소에 있는 이미지 파일을 
    //php문서가 있는 곳과 같은 폴더 안에
    //uploads라는 폴더 안으로 이동 시키기
 
    $path"uploads/";
    $fileName= date('Ymdhis').$srcName;
 
    //최종 이지미 파일의 경로
    $dstName$path . $fileName;
    $result=move_uploaded_file($tmpName$dstName);
    if($resultecho "success upload file.";
    else echo "fail upload file";
 
    //Data 저장하는 날짜와 시간
    $now= date('Y-m-d h:m:s');
 
    //Database에 업로드 된 데이터 저장
    //Database를 제어해주는 프로그램(DBMS : MySQL) 사용
 
    //php에서 Database서버와 연동하기
    //MySQL DB에 접속하기!!
    $conn=mysqli_connect("localhost","umul","aa142536!","umul"); //DB 서버 주소, DB 접속 아이디, DB접속 비번, DB명 (파일명)
 
    //한글 깨짐 방지
    mysqli_query($conn,"set names utf8");
 
    //SQL 쿼리문 작성
    $sql="insert into board(name,message, file, date) values('$name','$message','$dstName','$now')";
    $result=mysqli_query($conn,$sql);
 
    if($result){
        echo "insert success";    
    } else{
        echo "insert fail";
    }
 
    mysqli_close($conn);
 
?>
 
 

이름과 메세지를 입력하고, 이미지 파일을 선택하고 submit을 누르자.

DB를 확인해 보자.

이제 DB에 있는 값을 읽어오자 .

 

그러기 위해서 버튼을 하나 만들자.

이제 DB에서 불러온 값을 보여줄 페이지를 ph를 만들자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
 
header("Content-Type: text/html; charset=UTF-8");
 
//MySQL DB에 접속하기
$conn=mysqli_connect("localhost","umul","aa142536!","umul");
 
//한긓깨짐 방지
mysqli_query($conn,"set names utf8");
 
//DB에서 데이터를 읽어오는 쿼리문
$sql="select * from board";
$result=mysqli_query($conn$sql);
 
//$result는 결과 데이터들을 가지고 있는 테이블(표)
 
//총 레코드 수(행의 개수, 줄수)
$rowCount= mysqli_num_rows($result);
 
for($i=0;$i<$rowCount;$i++){
    $row= mysqli_fetch_array($result, MYSQLI_ASSOC); //php는 배열이 두 종류가 있다. 
    //연관 배열로 한줄 데이터 얻어오기.
 
    echo "$row[id] <br/>";
    echo "<h2>$row[name] </h2>";
    echo "$row[message] <br/>";
 
    echo "<img src='$row[file]'> <br/>";
    //echo "$row[file] <br/>";
    echo "$row[date] <br/>";
    echo "------------------ <br/><br/>";
}
 
mysqli_close($conn);
 
?>
 
 
 

 

위 사진과 같이 DB에 저장했던 이름과 이미지를 불러올 수 있다.

<모든 최종 코드>

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8"></meter>
        <TITLE>This is MyPage</TITLE>
        
    </head>
    <body>
 
        <h2>This is Http Test page</h2>
 
<!--  fieldset를 쓰면 네모 박스가 나온다.-->
        <fieldset>
            <legend>GET METHOD TEST</legend>
                <!-- method="get" 는 GET방식이다. -->
            <form action="getTest.php" method="get">
                <!-- p는 한 달락이다 (한줄) -->
                <p>
                    <label>Name:</label>
                    <!--type은 내가 쓸 타입속성  name이 키 값이다.-->
                    <input type="text" name="name">
                </p>
 
                <p>
                    <label>Message:</label>
                    <input type="text" name="msg">
                </p>
 
                <p>
                    <input type="submit" name="" value="전송">
                    <input type="reset" name="" value="취소">
                </p>
            </form>
        </fieldset>
 
        <fieldset>
            <legend>POST METHOD TEST</legend>
            <form action="postTest.php" method="post">
                <p>
                    <label>Name : </label>
                    <input type="text" name="name">
                </p>
 
                <p>
                    <label>Message : </label>
                    <input type="text" name="msg">
                </p>
 
                <p>
                    <input type="submit" value="전송">
                    <input type="reset" value="취소">
                </p>
            </form>
        </fieldset>
 
        <fieldset>
            <legend>Image File Upload</legend>
            <form action="uploadFile.php" method="post" enctype="multipart/form-data">
 
            <p>
                <label>Image File : </label>
                <input type="file" name="upload">
 
            </p>
            <p>
                <input type="submit" value="전송">
                <input type="reset" value="취소">
            </p>
            </form>
        </fieldset>
 
        <fieldset>
            <legend>POST METHOD REQUEST Data with File</legend>
            <form action="postDataWithFile.php" method="post" enctype="multipart/form-data">
                <p>
                    <label>Name : </label>
                    <input type="text" name="name">
                </p>
 
                <p>
                    <label>Message : </label>
                    <input type="text" name="msg">
                </p>
 
                <p>
                    <label>Image File : </label>
                    <input type="file" name="upload">
                </p>
 
                <p>
                    <input type="submit" value="submit">
                    <input type="reset" value="cancel">
                </p>
            </form>
        </fieldset>
 
        <fieldset>
            <legend>Load Data</legend>
            <form action="loadDataFromDB.php" method="post" enctype="multipart/form-data">
                <input type="submit" value="load">
                
            </form>
        </fieldset>
 
    </body>
</html>
 
 

getTest.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
//header('constant-Type:text/html; charset=utf-8');
header("Content-Type: text/html; charset=UTF-8");
 
 
//  $_GET는 정해진 방식 그리고 []인 이유는 index에 넘겨준 값이 두개 이상으므로
    $name = $_GET['name'];
    $msg = $_GET['msg'];
// ""를 사용하면 안에 변수를 구별 가능
    echo "Name : $name <br/>";
    // echo 'Name : ' .$name; //''를 사용하면 이렇게 사용함.
    echo "Message : $msg";
 
?>
 
 
 

postTest.php

1
2
3
4
5
6
7
8
9
10
11
<?php
 
    header("Content-Type: text/html; charset=UTF-8");
 
    $name= $_POST['name'];
    $message= $_POST['msg'];
 
    echo "Name : $name <br/>";
    echo "Message : $message <br/>";
 
?>
 
 

uploadFile.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 
    $file=$_FILES['upload'];
 
    $fileName= $file['name'];
    $fileSize= $file['size'];
    $fileType= $file['type'];
    $fileTmpName= $file['tmp_name']; //tmp_name는 정해진 글자.
 
    echo "$fileName <br/>";
    echo "$fileSize <br/>";
    echo "$fileType <br/>";
    echo "$fileTmpName <br/>";
    
    $path= "uploads/";
    $dstName= date('Ymdhis').".png";
 
    $result=move_uploaded_file($fileTmpName, $path.$dstName);
    if($result) echo "success";
    else echo "fail";
 
?>
 
 

loadDataFromDB.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
 
header("Content-Type: text/html; charset=UTF-8");
 
//MySQL DB에 접속하기
$conn=mysqli_connect("localhost","umul","aa142536!","umul");
 
//한긓깨짐 방지
mysqli_query($conn,"set names utf8");
 
//DB에서 데이터를 읽어오는 쿼리문
$sql="select * from board";
$result=mysqli_query($conn$sql);
 
//$result는 결과 데이터들을 가지고 있는 테이블(표)
 
//총 레코드 수(행의 개수, 줄수)
$rowCount= mysqli_num_rows($result);
 
for($i=0;$i<$rowCount;$i++){
    $row= mysqli_fetch_array($result, MYSQLI_ASSOC); //php는 배열이 두 종류가 있다. 
    //연관 배열로 한줄 데이터 얻어오기.
 
    echo "$row[id] <br/>";
    echo "<h2>$row[name] </h2>";
    echo "$row[message] <br/>";
 
    echo "<img src='$row[file]'> <br/>";
    //echo "$row[file] <br/>";
    echo "$row[date] <br/>";
    echo "------------------ <br/><br/>";
}
 
mysqli_close($conn);
 
?>
 
 
 

postDataWithFile.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
 
    header("Content-Type: text/html; charset=UTF-8");
 
    $name$_POST['name'];
    $message$_POST['msg'];
 
    $file$_FILES['upload'];
    $srcName$file['name'];
    $fileSize$file['size'];
    $fileType$file['type'];
    $tmpName$file['tmp_name'];
 
    echo "$name <br/>";
    echo "$message <br/>";
    echo "$srcName <br/>";
    echo "$tmpName <br/>";
    echo "$fileSize <br/>";
    echo "$fileType <br/>";
 
    //임시 저장소에 있는 이미지 파일을 
    //php문서가 있는 곳과 같은 폴더 안에
    //uploads라는 폴더 안으로 이동 시키기
 
    $path"uploads/";
    $fileName= date('Ymdhis').$srcName;
 
    //최종 이지미 파일의 경로
    $dstName$path . $fileName;
    $result=move_uploaded_file($tmpName$dstName);
    if($resultecho "success upload file.";
    else echo "fail upload file";
 
    //Data 저장하는 날짜와 시간
    $now= date('Y-m-d h:m:s');
 
    //Database에 업로드 된 데이터 저장
    //Database를 제어해주는 프로그램(DBMS : MySQL) 사용
 
    //php에서 Database서버와 연동하기
    //MySQL DB에 접속하기!!
    $conn=mysqli_connect("localhost","umul","aa142536!","umul"); //DB 서버 주소, DB 접속 아이디, DB접속 비번, DB명 (파일명)
 
    //한글 깨짐 방지
    mysqli_query($conn,"set names utf8");
 
    //SQL 쿼리문 작성
    $sql="insert into board(name,message, file, date) values('$name','$message','$dstName','$now')";
    $result=mysqli_query($conn,$sql);
 
    if($result){
        echo "insert success";    
    } else{
        echo "insert fail";
    }
 
    mysqli_close($conn);
 
?>
 
 

댓글