<최종 실행 화면> - (최종 복붙용 코드는 페이지 맨 아래 있다.)
파일이 정상적으로 업로드 되었다.
(서버는 닷홈에서 무료호스팅을 만들어서 사용. 아래에 방법 있음)
이제 시작해보자. 우선 입력할 수 있는 칸을 만들고 여러가지 화면 구성을 해보자.
입력 칸에 아무 값이나 입력하고 제출을 눌러보자.
form요소는 페이지가 바뀌는 것이다.
그런데 넘겨준 데이터를 못받는다.(표시는 되나 제어할 수 없다.).그래서 php,jsp,asp등이 필요하다
제출을 누르면 action에 입력한 페이지를 실행시키고, 키값에 해당하는 값을 전달한다. GET방식은 주소에 표시됨
이제 우리는 getTest.php문서를 새로 만들어서 작업하고 실행시킬 것이다. (값을 getTest.ph로 전달한다는 의미)
문서를 만들자.
받을때는 키 값으로 받아야 한다. <input >태그에서 name에 해당하는 글자가 키값이고, 우리가 입력칸에 입력한 값이 전달하는 값이다.
이제 getTest.php도 만들었으니 실행을 해보자.
화면이 이상한 이유는 우리가 지금 화면에 표시되는 웹페이지의 주소를 봐보자.
D경로이지 않은가? php문서를 D에서 보여줄 수 없다.
닷홈(무료호스팅 사이트)을 이용해서 화면에 봐보자.
[여기서 데이터베이스를 만들어서 연습도 할 수 있으니, 가입하고 이용해보자. ]
로그인을 하고 자신의 마이닷홈 메뉴에 도메인을 이용하자.
이전 글에서 호스팅 가입하는 것을 남겨놓았다. 모른다면 아래 링크로가서 페이지 맨 아래쪽에 호스트 가입방법이 있다.
해당 주소를 파일 탐색기를 열어서 입력하고, 아마 http가 맨 앞에 있을텐데.. 그것을 ftp로 바꿔고 Enter를 누르면
로그인을 하는 창이 나온다.
파일탐색기에서 로그인을 하고, 임의 폴더를 html폴더 안에 Web 폴더를 만들자.
그안에 우리가 작업한 두 파일을 복붙하자.
브라우저로 확인을 해야하므로 인터넷(크롬)창에 닷홈 경로를 썼다. (자신의 호스트 주소에 파일 경로)
필자는 아래 주소를 사용했다.
http://umul2.dothome.co.kr/Web/03_form.html
<실행 화면>
echo는 화면에 출력을 하는 것인데, 띄어쓰기를 많이해도 적용이 안된것을 확인할 수 있다.
그말은, 즉 브라우저로 실행시 html처럼 적용된다는 것
그러면 html에 사용되는 요소가 적용이 가능하다.
getTest.php
|
1 2 3 4 5 6 7 8 9 |
<?php
$name=$_GET['name']; $msg=$_GET['msg'];
// 변수의 값을 화면에 보여주기 echo "<h2>$name , $msg</h2>";
?> |
<h2> 태그를 적용하고 화면을 확인해 보자.
이제 POST방식으로 보내보자.
Open in Other Browsers로 확인해보자.
form안에 만들어서 저렇게 네모 영역도 보인다.
안에 보낼 데이터를 입력하는 칸을 만들겠다.
아까 열었던 창을 새로고침하면 변견된 사항을 확인할 수 있다.
성별 입력하는 라디오 버튼을 만들겠다.
과일을 선택할 수 있는 체크박스도 만들자.
그리고 메세지를 입력하는 박스와 리스트 목록을 볼 수 있는 선택 목록창도 만들자.
이제 입력한 데이터를 보내기 위해 전송버튼과 모든 값 초기화 하는 버튼도 만들자.
이제 위에 코드에서 전송(submit)을 버튼을 누르면 action에 쓴 것이 실행된다.
(아래 사진 참고- 우리는 action에 postTest.php를 실행하라고 했다.
캡쳐는 오타있음 postText.php가 아닌 postTest.php다) 아래 캡쳐 사진을 보고 찾을 수 있다면, 잘하는 것이다.
개떡같이 말해도 찰떡같이 알아듣는 당신(º∇º)b
action에 실행할 posTest.php파일을 만들자.
이제 코드를 다썼으면 확인해보자.
내가 저장된 파일을 닷홈에 올려야한다.
(자신의 호스트 주소에 http를 ftp로 바꾸고 파일탐색기 주소창에 입력하면 된다.)
그리고 확인하는 방법은 브라우저에서 해당 경로를 입력하면 된다.
다시 php파일로 돌아가서 줄바꿈 문자를 브라우저가 알아듣게 변환해주는 메소드가 있다.
다시 저장하고 업로드해서 확인해보자.
<실행 화면> - 아래 그림을 보면 줄바꿈이 적용되는 것을 알 수 있다.
출력을 안한것이 체크박스이다. 이것은 배열로 받아야 한다.
<실행 화면> - apple 과 banan도 나오는 것을 확인할 수 있다.
이제 파일을 서버에 업로드 하는 것을 해보자. (은근 파일 업로드가 필요할 것이다.)
우선 화면 구성을 확인하기 위해 브라우저로 열자.
[주의! 인터넷 호스트를 이용한 것은 아니기 때문에 화면 구성만 볼 수 있음. 전송은 아까 위에서 한 것처럼 닷홈 주소를 이용해야함.]
이제 전송 버튼을 만들자. 그리고 action을 보면 file.php를 미리 써놓았다. (아래에서 file.php만들거임)
file.php를 만들자.
우리가03_form.html에서 file의 name="aaa" (71번줄) 로 해서 보냈기 때문에, 받을때 'aaa'로 받아야 한다.
file.php에서 받아보자.
코드를 쓰고 저장을 했다면, 다시 업로드 하자.
브라우저에 닷홈 경로를 써주고, 확인!!
선택을 했다면, 전송을 눌러주자.
파일이 POST방식으로 전송하고, file.php에서 잘 받았다면 ~ 아래 사진과 같이 뭔가 정보가 나온다.
자! 이제 업로드된 사진을 저장해야한다. 지금은 전송만 한 것이라, 임시로 저장되었다가 사라진다...
저장을 해보자.
다시 업로드하여 확인해보자.
여기까지하면 잘 받아진 것이고, 추가한 코드가 적용이 되었다면 아래 사진처럼 파일이 저장도 되어야 한다.
(새로고침하면 파일이 보일 것이다.)
여기서 추가로 우리가 파일을 선택할때, 모든 확장자가 나와서 구분없이 모든 파일이 보인다.
사진 파일을 우리는 선택할 것이기 때문에, 애초에 png 파일만 보이도록 해보자.
아래 사진과 같이 애초에 PNG 이미지만 보이게 설정이 되어 있다.
우리는 파일 선택이 단일 선택이었다. 즉, 하나만 선택할 수 있음...
여러개 선택을 가능하도록 해보자.
파일을 저장하고 업로드 후 확인해보자.
다중 선택되는 것을 확인할 수 있다.
파일이 여러개 선택되지만 아직 저장하는 코드는 작성하지 않았다.
여러개 파일을 한꺼번에 저장해보자. (제출 버튼을 누를 시, file2.php 파일을 실행하도록 코드작성했다. php만들어야함.}
file2.php 파일을 만들자.
코드를 작성했다면, 업로드 후에 확인해보자.
위와 같은 사진이 나온다면, 전송이 잘 된것이다. 이제 서버에 잘 올라갔는지 새로고침하면 파일이 생성이 되었다.
끝
<복붙용 코드>
03_form.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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Ex</title>
</head>
<body>
<!-- <form>요소 : <a>와 비슷하게 다른 문서를 실행하지만 데이터를 전달할 수 있음 -->
<!-- get Method form연습 -->
<input type="text" name="name">
<input type="text" name="msg">
<input type="submit">
</form>
<hr>
<!-- post method 연습 -->
<fieldset>
<legend>input & post method test</legend>
<label for="in_name">name : </label>
<input type="text" name="name" id="in_name">
<br>
<label>pass : <input type="password" name="pw"></label>
<p>
gender:
<label><input type="radio" name="rg1" value="amle" checked="checked">male</label>
<label><input type="radio" name="rg1" value="feamle">female</label>
</p>
<p>fruits:
<label><input type="checkbox" name="fruits[]" value="apple">Apple</label>
<label><input type="checkbox" name="fruits[]" value="banana">Bnana</label>
<label><input type="checkbox" name="fruits[]" value="orange">Orange</label>
</p>
<p>
message:<br>
<textarea name="msg" cols="40" rows="5"></textarea>
</p>
<div>
<select name="sel">
<optgroup label="자동차브랜드">
<option value="현대">현대</option>
<option value="기아">기아</option>
<option value="쉐보레">쉐보레</option>
</optgroup>
</select>
</div>
<div>
<input type="submit" value="전송">
<input type="reset" value="초기화">
</div>
</fieldset>
</form>
<hr>
<!-- 파일선택하여 서버에 업로드하기 -->
<!-- form요소로 file전송시에 enctype속성이 반드시 지정되어 있어야 함 -->
<!-- accept속성 : 파일선택기에 해당하는 파일타입만 보이도록 -->
<input type="file" name="aaa" accept="image/png"><br>
<input type="submit" value="전송">
</form>
<hr>
<!-- multiple : 여러개의 파일 선택 -->
<input type="file" name="aaa[]" multiple> <br>
<input type="submit">
</form>
</body>
</html>
|
getTest.php
|
1
2
3
4
5
6
7
8
9
|
<?php
$name=$_GET['name'];
$msg=$_GET['msg'];
// 변수의 값을 화면에 보여주기
echo "<h2>$name , $msg</h2>";
?>
|
postTest.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
|
<?php
header('Content-Type:text/html; charset=utf-8');
$name= $_POST['name'];
$pw= $_POST['pw'];
$gender= $_POST['rg1'];
$msg= $_POST['msg'];
$brand= $_POST['sel'];
// textarea에서 입력된 값중 줄바꿈문자(\n)을 브라우저에
// 출력하면 한줄로 보여지므로 \n을<br>로 변경해줘야만 함
$msg= nl2br($msg);
echo "$name<br>";
echo "$pw<br>";
echo "$gender<br>";
echo "$msg<br>";
echo "$brand<br>";
// 체크박스에 선택된 값은 여려개일 수 있어서 배열로 받아짐
$fruits= $_POST['fruits']; // 대입된 $fruits변수는 배열임!!
// 배열의 길이를 구해주는 함수
$len= count($fruits);
// 배열의 개수만큼 반복
for($i=0; $i<$len;$i++){
echo "$fruits[$i], ";
}
?>
|
file.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
|
<?php
$file=$_FILES['aaa'];
// 대입된 $file은 파일의 여러정보를 가지기 위해 배열로 된 변수임
// $file 배열 변수에서 원하는 값들 얻어오기
$srcName= $file['name']; //원본의 파일명.확장자
$fileTypr= $file['type']; //전송된 파일의 확장자 [MIME타입: image/png]
$fileSize= $file['size']; //전송된 파일의 파일사이즈
//업로드된 파일이 잠시 보관되는 임시저장소의 경로
$tmpName= $file['tmp_name'];
echo "$srcNme <br>";
echo "$fileTypr <br>";
echo "$fileSize <br>";
echo "$tmpName <br>";
// 입시저장된 파일은 곧 사라질 것이기에
// 서버에 온전히 보관하고 싶다면 임시저장소($tmpName)의
// 파일을 원하는 목적지로 이동시켜야 함.
// 원하는 목적지의 경로와 파일명.확장자
// 이름이 겹치면 안되기에 보통 날짜를 파일명으로 활용!!
$dstNme= date('Ymdhis'). $srcName; //현재폴더안에 20191204144130.jpg라는 이름으로 저장
// 임시저장소 -> 목적지 위치로
move_uploaded_file( $tmpName, $dstNme );
?>
|
file2.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
|
<?php
$files= $_FILES['aaa'];
// files라는 2차원배열의 사이즈
$num= count($files); //출력 : 5
$num2= count( $files['name']); // 만약 파일이 100개면 출력 : 100
//즉, 전송된 파일의 개수를 알고싶다면.. $files를 count하면 안되고
// $files['name']의 count()를 해야함.
// 전송된 파일 개수
$fileNum= count($files['name']);
for($i=0;$i<$fileNum;$i++){
$srcName= $files['name'][$i]; //원본파일명
$tmpName= $files['tmp_name'][$i]; //임시저장소 경로
$fileType= $files['type'][$i];
$fileSize= $files['size'][$i];
echo "$srcNme <br>";
echo "$fileTypr <br>";
echo "$fileSize <br>";
echo "$tmpName <br>";
echo "==============================<br>";
$dstName= date('Ymdhis').$srcName;
move_uploaded_file($tmpName, $dstName);
}
?>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML' 카테고리의 다른 글
| HMTL (기초) viewport (화면이 비율이 달라질 시, 보이는 차이) (0) | 2019.12.19 |
|---|---|
| HTML (기초) 여러 가지 텍스트 박스 (0) | 2019.12.04 |
| HTML (기초) input으로 여러가지 버튼 및 영역 만들기 (radio, lable, checkbox, button 등등) (0) | 2019.12.04 |
| HTML (기초) Audio(오디오),video(비디오), iframe, div,span (0) | 2019.12.04 |
| HTML (기초) 테이블 만들기 (0) | 2019.12.03 |
댓글