안녕하세요 코딩초밥입니다
어느덧 HTML의 마지막 글입니다.
사실 HTML이 서버와 통신을 못한다면 그냥 문자일뿐이겠지요
오늘은 가장중요한 서버와의 통신에 대해 다루어보겠습니다 😍
먼저, 제가 지금 html을 작성하고있는 프로그램은 visual studio code 입니다. 무료이구요.
https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
특정 프로그램을 설치하거나,php를 자동으로 해독하여서 사용하는 웹서버를 사용하셔야합니다.
무료로 유명한 닷홈이 있습니다. 실습을 위한것이라면
여기서 웹서버를 무료로 만드시면됩니다.
닷홈 | 호스팅은 닷홈
닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.
www.dothome.co.kr
우리가 HTML으로 데이타를 주고받는다면 어떻게주고 받을까?
1. 입력 양식에 (FORM)에 데이터를 채워서 서버로보냅니다
2. 웹서버는 입력약식을 받아서 JSP와 같은 서버 스크립트로 보냅니다.
3. JSP는 입력 데이터를 처리하여서 새로운 웹페이지를 생성하고
4. 입력에 대한 응답으로 새로운 웹페이지가 전달됩니다.
※FORM 과 GET방식과 , POST방식
FORM
계념은 anchor와 비슷합니다 . 다른문서로 이동하는것입니다.
다만, but, 데이터를 전달할수있다는것이 다릅니다.
그 데이터를 보내는 방식을 GET과 POST로 나눌수있는겁니다.
※ GET방식
·GET 방식은 URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식이다.
데이터가 다보인다.
▶간단예제
<!DOCTYPE html>
<html>
<body>
<!-- form에는 action값을 주어야합니다. anchor처럼 실행될페이지를 설정합니다. -->
<form action="./getTest.php" method="Get">
<!-- 식별자 title,msg 되겠습니다. type에 따라 데이터를받는 형식이 달라집니다. -->
<input type="text" name="title">
<input type="text" name="msg">
<!-- 이 제출버튼을 클릭하면 form요소의 action속성에 지정된 문서가 실행됨.
즉. 브라우저의 현재 페이지가 변경됩니다.- 주소창 확인
안드로이드처럼 데이타만 날라가겠지..하고생각하면 안됩니다!-->
<input type="submit">
<!-- 주소창을 주목해주세요
file:///D:/Web/Day03/getTest.php?title=title&msg=msg 이렇게 바뀝니다.
이게 get방식의 특징입니다 가는 데이터가 주소창에 보이는게 보이시나요?-->
</form>
</body>
</html>
NEXT!
위에 form에서 getTest.php를 사용하겠다고 하였지요?
getTest.php를 만들어보겠습니다 ,다른 파일입니다
<?php
header('Content-Type:text/html; charset=utf-8');
//이 코드는 GET방식과 별게로 이 코드를써놔야 한글이 깨지지않습니다
//꼭써주도록합시다.
// PHP안에서는 echo로 text를 보여질수있습니다
// ex/ echo "hello";
//form 요소로 부터 get방식으로 전달된 값을 받기
//php는 get방식으로 전달된 값들을 $_get 이라는 이름의 배열변수에 가지고 있음.
//GET은 배열이라고 생각하면됩니다 주는쪽에서 GET으로 배열을만들어서 준다면
//생성자 이름만 구분시켜서 PHP에서 받기만하면되는것입니다.
//변수를 만들어서 사용할수도 있습니다 php의 변수는 $ 로표시합니다.
$title= $_GET['title'];
$message = $_GET['msg'];
echo "이름:" . $_GET['title'];
//echo는 하나만 보여질수있습니다 그럼 이름과
// gettitle을 같이하고싶다면 더하기 연산자 . 을쓰시면됩니다
echo "<br>";
//웹안에서도 꺽쇄를 알아봅니다 <>
// echo "메세지: $_GET['msg']"; $를알아보니까 이렇게 써도되는데 ''값을 알아듣지를못합니다.
//그래서 생각한게 변수를바꾸는겁니다
echo "메세지: $message";
echo "<h2> 제목: $title <h2>";
echo "<p> 메세지:$message <p>";
?>form으로 php 안에 있는 내용들을 불러와 서버와 통신을 하는데
그 안 데이터들이다 보이는 get 방식인겁니다.
※ POST방식
·POST 방식은 사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP Request 헤더에 포함시켜서 전송하는 방식
·길이 제한이 없으며, 보안이 유지된다. 안에있는 내용이 안보인다.
·단점은 get보다 느리고 뒤로가기 버튼을누를때 정보가 저장되어있지않다
▶간단예제
<!DOCTYPE html>
<html>
<body>
<form action="./postTest.php" method="POST">
<!-- POST방식으로 해보겠습니다 -->
<fieldset>
<legend> input& post method test</legend>
<label for="in">name:</label>
<input type="text" id="in" name="name">
<!-- type은 택스트고 아이디는 in이고 value값은 name입니다 -->
<br>
<label>password:<input type="password" name="pw"></label>
<br>
<p>
<!-- br계속쓰는것보다 p로만들자 -->
gender:
<label><input type="radio" name="rg" value="male" checked="checked">male</label>
<label><input type="radio" name="rg" value="female">female</label>
</p>
<p>
fruits:
<label><input type="checkbox" name="fruits[]" value="apple">사과</label>
<label><input type="checkbox" name="fruits[]" value="banana" checked="">바나나</label>
<label><input type="checkbox" name="fruits[]" value="watermelon">수박</label>
<!-- 반드시 name에[] 배열을만들어야합니다 , banana에 체크를 먼저되있습니다 안에 ""아무것도 없는이유는
이름이 같으면 값을안써도된다는걸 보여준것입니다 -->
</p>
<p>
message:
<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"><br>
<input type="reset">
</div>
<!-- 화면에는 안보이지만 서버에 보내고 싶을때. -->
<input type="hidden" name="aaa" value="코딩초밥">
</fieldset>
</form>
</body>
</html>
NEXT!
postTest.php를 만들어보겠습니다 ,다른 파일을 하나 생성합니다
<?php
header ('Content-Type:text/html; charset=utf-8');
//post방식으로 보낸값들은 $_post라는 배열변수에 저장되고 값을하나씩빼온다고 생각하면됩니다.
$name=$_POST['name'];
$password=$_POST['pw'];
$gender=$_POST['rg'];
$message=$_POST['msg'];
$car=$_POST['sel'];
//textarea에서 입력한 값을 가진 $message는 줄바꿈문자를 \n으로 가지고있습니다 인식못합니다.
//그래서 <br>로 바꿔야하는데
// 이 계념자체를 기본으로 가지고있는 함수가있습니다
$message= nl2br($message);
//nl을 br로 바꾼다는겁니다 2는 영어로 to를 의미합니다 ㅋㅋ
echo "<h2>$name</h2>";
echo "<h4>$password</h4>";
echo "<h4>$gender</h4>";
echo "<h4>$message</h4>";
echo "<h4>$car</h4>";
// http://ㅁㅁㅁ.co.kr/Web/postTest.php 이 데이타를 다가져와도 이렇게만 보입니다
//post방식의 성질이며 로그인처럼 데이타가 다보이면안되는 보안상에 좋습니다.
//배열로 전달 fruits
$fruits= $_POST['fruits'];
//모양은같아도 위에거랑 다름. 왜냐. 이건 배열이니까
//일단 배열의 갯수를 알아야한다
$num= count($fruits);
echo "<h4>";
for($i=0; $i<$num; $i++){
echo "$fruits[$i],";
}
echo "</h4>";
//hidden 타입으로 전달된 값
$aa= $_POST['aa'];
echo "$aa";
?>
내가 무엇을 받을지 아직 컴퓨터는 모르니까 form을 코딩짜놓고
데이타를 기다리고 내가 타이핑을 form 안에 맞춰져있는데로 쓰기만하면
form은 get과 post방식중 하나로 선택해서 서버로 보내진다
근데 내가 서버에 막 보내면 서버는 기계인데 어떻게 알아듣지?
그래서 내가 서버랑 이야기할수있게 php로 기계어로 바꿔서 보내주는겁니다
그럼 서버는 알아듣고. 그 결과값을 보여줍니당
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| HTML_링크,이미지,표만들기 (4) | 2021.05.13 |
|---|---|
| HTML_IFRAME (13) | 2021.05.11 |
| HTML_다양한 입력Type (14) | 2021.05.10 |
| HTML_파일보내기 (1) | 2021.05.09 |
| HTML_버튼,콤보박스,fieldset (1) | 2021.05.08 |
댓글