[웹코딩] HTML(Hyper Text Markup Language)

이번 편에서는 HTML 파일 업로드에 대한 form을 정리하였다. 이전 form 코드와 크게 다르지 않다. input type="file"로 설정하면 file 업로드를 할 수 있는 form이 형성된다. 아래 링크는 이전에 정리했던 form 관련 포스팅들이다.

1. HTML - 파일 업로드하기

<코드>

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
            <input type="file" name="file_upload_test">
            <input type="submit">
        </form>
    </body>
</html>

-. 원하는 파일을 선택하고 제출을 누르면 formaction에서 지정해준 .php파일로 정보가 전달된다

-. input type="file" 지정할시 name이 반드시 들어가야함.

-. name은 서버쪽으로 전달될 때 어떤 이름으로 전달되지에 대한 정보이다.(변수)

(name은 서버쪽 엔지니어가 정하며, 프론트엔드 개발자는 서버쪽 엔지니어와 커뮤니케이션을 통해 name을 지정한다.)

-. form action 은 이전에도 다뤘지만 서버쪽 주소이다. php 파일은 서버쪽에서 동작하는 언어라고 생각하면 된다. 즉, form action을 통해 php 파일로 첨부파일이 전달되고, php 파일에서는 실제 서버(db) 어느 위치에 전달받은 파일을 저장할지를 정할 수 있다.

-. 첨부파일을 전달할 때 method = "post"로 해야 함

-. 첨부파일을 전달할 때 enctype = "multipart/form-data" 를 반드시 넣어줘야 한다. 생활코딩에서는 해당 코드에 대한 정보를 다루고 있지 않아 TCP-SCHOOL 자료를 활용하여 정리하였다.

※ form enctype

-. form 태그의 enctype은 HTML에서 전달 될 data가 서버로 전달될 때 인코딩되는 방법을 명시한다.

-. 이 속성은 form의 method가 "post"일 경우에만 사용할 수 있다. 그래서 생활코딩 강의에서 method="post'를 하라고 말했던 바가 있다.

-. 사용법은 위 코드와 마찬가지로 <form enctype="속성값">이다.

정해진 속성값은 아래와 같다.(참고자료 : TCP-SCHOOL 자료를 보고 정리)

속성값	설명
application/x-www-form-urlencoded	default값(지정안할시 이 속성값을 가진다) 모든 문자들은 서버로 보내기전에 인코딩된다는 것을 명시함.
multipart/form-data	첨부파일을 서버로 보낼 때 사용하는 속성값이다. 모든 문자를 인코딩하지 않음을 명시한다.
text/plain	공백(space)는 "+"기호로 변환(첫번째 속성값도 같음) 대신 공백을 제외한 나머지는 모두 인코딩하지 않음

2. PHP란 무엇인가?

formaction의 지정 주소가 /upload.php인데 php 파일이 뭔지 알기 위해 조금 더 찾아보았다. php는 서버쪽에서 동작하는 프로그래밍 언어로 이해하면 된다. Personal HomePage Tools의 약자였는데 최근에는 PHP : Hypertext Preprocessor로 바뀌었다고 한다. 생활코딩에서 이 PHP에 대한 기초를 설명하고 있어 강의 내용을 바탕으로 아래처럼 도식화해보았다. 아직 정확히 이해는 안되지만 전체적인 흐름을 알면 나중에 공부할 때 도움이 될 것 같다.

-. Web client에서 html 파일을 서버쪽에서 요청했다면 Web Server쪽에서 바로 응답이 가능하다.

-. 만약 .php 파일, .py 파일 등일 경우 Web Server에서 처리해줄 수 없어 PHP같은 별도의 engine이 필요함.

-. PHP에서 클라이언트에서 보낸 데이터를 필요시 DB로 보내거나 반대로 받아오는 등의 처리를 하는 것 같다.

-. Web Server와 PHP, Python 등이 통신하는 규약(약속)을 CGI(=Common Gate Interface)라고 함.

-. CGI에 따라 Web Server와 PHP는 독립적으로 움직이므로 PHP가 아닌 Python 등으로 대체 가능

-. 아직 자세히 공부는 안했지만 CGI와 파이썬의 웹프레임워크인 django는 다른 이야기로 보임.

-. PHP의 특징 및 장점은 생활 코딩 홈페이지에 잘 정리되어 있어 참고링크를 기재 함.

참고링크1 : HTML 파일업로드 - https://www.opentutorials.org/course/2039/10966

파일 업로드 - 생활코딩

파일 업로드 2015-12-07 16:16:41 예제

www.opentutorials.org

참고링크2 : enctype에 대해서 - http://tcpschool.com/html-tag-attrs/form-enctype

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

참고링크3 : PHP에 대해서 - https://www.opentutorials.org/course/62/233

PHP란 무엇인가? - 생활코딩

PHP란 무엇인가? 2011-09-16 00:06:20 Server side? PHP? 주로 HTML 코드를 프로그래밍적으로 생성 서버쪽에서 실행 되는 프로그래밍 언어 Personal Home Page Tools 의 약자에서 PHP:Hypertext Preprocessor 로 의미가 변경

www.opentutorials.org

저작자표시 비영리

'코딩 > Web' 카테고리의 다른 글

[웹코딩] CSS 기초 2편 : .css 파일, class 선택자 (0)	2021.05.28
[웹코딩] CSS 기초 1편 : HTML에 CSS 적용하기 (1)	2021.05.25
[웹코딩]HTML(Hyper Text Markup Language) - 6 : GET vs POST (0)	2021.05.10
[웹코딩] HTML(Hyper Text Markup Language) - 5 : dropdown, radio/checkbox (0)	2021.05.01
[웹코딩] HTML(Hyper Text Markup Language) - 4 : form, textarea (0)	2021.04.25

투손플레이스

[웹코딩] HTML(Hyper Text Markup Language) - 파일업로드, PHP

1. HTML - 파일 업로드하기

2. PHP란 무엇인가?

'코딩 > Web' 카테고리의 다른 글

티스토리툴바

[웹코딩] HTML(Hyper Text Markup Language) - 파일업로드, PHP

1. HTML - 파일 업로드하기

2. PHP란 무엇인가?

'코딩 > Web' 카테고리의 다른 글

'코딩/Web' Related Articles

티스토리툴바