Linux/Linux 실습

[Linux] HTML 웹 페이지 생성과 서버 데이터 전송

GGkeeper 2021. 11. 11. 01:02

실습> 아래와 같은 조건을 이용해서 웹페이지를 생성하시오.

-- 조건 --
1. 파일명 : writeTest.html
2. 테이블 구조

|------- 600px  ------|
|-200 -|---- 400  ----|   <td width=200> 이름 </td> <td width=400> </td>
+------+--------------+ -- 
| 이름  |              |  |
+------+--------------+  |
| 제목  |              |  |
+------+--------------+  |
| 암호 |              |  |
+------+--------------+  |
|      |              |  500px
|      |              |  |
|      |              |  |
| 내용  |              |  |
|      |              |  |
|      |              |  |
|      |              |  |
+------+--------------+  |
|         글쓰기        |  |
+---------------------+ --
-- 조건 --

<!doctype html>
<!--
파일명 : writeTest.html
프로그램 내용 : 글쓰기 테이블 만들기
-->
<html>
  <head>
    <meta charset="utf-8">
    <title> ::: 글쓰기 ::: </title>
  </head>

<body>

  <table align="center" border="0" bgcolor="#000000" cellpadding="4" cellspacing="1" height="500" width="600" >
    <tr bgcolor="#ffffff"> 
      <td align="center" width="200"> 이름 </td>  <td width="400"> &nbsp; </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" width="200"> 제목 </td>  <td width="400"> &nbsp; </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" width="200"> 암호 </td>  <td width="400"> &nbsp; </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" height="300" width="200"> 내용 </td>  <td width="400"> &nbsp; </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" colspan="2"> 글쓰기 </td>  
    </tr>
  </table>
  <br>

</body>
</html>


실습> 글쓰기 테이블을 이용한 서버로 데이터 전송하기

writeTest.html -> writeTest.php

<form>  :  클라이언트에서 서버로 데이터를 전송하는 태그
method : get, post
action : 보낼 파일명

<input> : 사용자에게 입력을 받을 수 있는 태그
type : text, password
name : 입력받을 데이터를 저장할 변수명

1. writeTest.html 소스코드

<!doctype html>
<!--
파일명 : writeTest.html
프로그램 내용 : 글쓰기 테이블 만들기

writeTest.html -> writeTest.php
-->
<html>
  <head>
    <meta charset="utf-8">
    <title> ::: 글쓰기 ::: </title>
  </head>

<body>

<form method="post" action="writeTest.php">
  <table align="center" border="0" bgcolor="#000000" cellpadding="4" cellspacing="1" height="500" width="600" >
    <tr bgcolor="#ffffff"> 
      <td align="center" width="200"> 이름 </td>  
  <td width="400"> <input type="text" name="username"> </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" width="200"> 제목 </td>  
  <td width="400"> <input type="text" name="title"> </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" width="200"> 암호 </td>  
  <td width="400"> <input type="password" name="userpass"> </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" height="300" width="200"> 내용 </td>  
      <td width="400"> <textarea cols="50" rows="18" name="contents"></textarea> </td>
    </tr>
    <tr bgcolor="#ffffff"> 
      <td align="center" colspan="2"> <input type="submit" value="글쓰기"> </td>  
    </tr>
  </table>
</form>

</body>
</html>

2. writeTest.php 소스코드
<!doctype html>
<!--
파일명 : writeTest.php
프로그램 내용 : post 방식으로 넘어온 값을 출력한다.

writeTest.html -> writeTest.php
-->
<html>
  <head>
    <meta charset="utf-8">
    <title> ::: writeTest.php ::: </title>
  </head>

<body>

이름 : <?php echo $_POST['username'] ?>  <br>
제목 : <?php echo $_POST['title'] ?> <br>
암호 : <?php echo $_POST['userpass'] ?> <br>
내용 : <?php echo $_POST['contents'] ?> <br>

</body>
</html>

폼태그에서 아래처럼 쓰고 확인해본다.

이름 : 리눅스마스터넷
제목 : 제목 테스트
암호 : 1234
내용 : 내용 테스트입니다.