Node.js express 없이 서버 구축

회원가입 폼을 구축할 예정이다

 

필요한 도메인 LIST

-회원 가입 폼

-회원 가입

-회원 목록

-회원 상세 보기

-회원 정보 수정

-회원 정보 삭제

 

 

 

server 작업

 

1. 서버 준비 및 각 도메인에 맞는 함수 호출

var http=require("http"); //내장모듈 가져오기
var fs=require("fs"); //파일 시스템 모듈
 
//(쪼개져서)직렬화된 전송된 데이터에 대한 해석을 담당(문자열로 해석가능)
var qs=require("querystring"); 
var url=require("url"); //url 분석과 관련된 내부모듈
var mysql=require("mysql"); //mysql 모듈 가져오기(외부모듈이므로 별도 설치 필요)
var ejs=require("ejs"); //ejs 모듈을 가져오기(외부모듈)
 
//우리가 사용할 DB 접속 정보
var conStr={
    url:"localhost:3306",
    database:"nodejs",
    user:"root",
    password:"1234"
}
 
 
var server=http.createServer(function(request, response){
    //결국 서버는 클라이언트의 다양한 요청을 처리하기 위해, 요청을 구분할 수 있어야 한다.
    //결국 클라이언트가 서버에게 무엇을 원하는지에 대한 정보는 요청 url로 구분할 수 있다.
    // 따라서 요청과 관련된 정보를 가진 객체인 request 객체를 이용하자
    // console.log("클라이언트가 지금 요청한 주소는 ", request.url);
    //도메인 : 포트번호까지를 루트로 부르자
    /*
    회원가입 폼 요청 : /member/form
    회원가입 요청 : /member/join
    회원목록(검색은 목록에 조건을 부여한 것임...) 요청 : /member/list
    회원 상세 보기 요청 : /member/detail
    회원 정보 수정 요청 : /member/edit
    회원 정보 삭제 요청 : /member/del
    */
 
    //혹여나, 파라미터가 get방식으로 전송되어 올 경우엔 request.url의 파라미터까지도 주소로
    //간주될 수 있기 때문에 파라미터를 제거하자
    // console.log("url파싱 결과는", url.parse(request.url));
    var requestUrl=url.parse(request.url).pathname; //파라미터를 제외한 주소
 
    switch(requestUrl){
        case "/member/form" : registForm(request, response);break;
        case "/member/join" : regist(request, response);break;
        case "/member/list" : getList2(request, response);break;//getList2()로 변경됨
        case "/member/detail" : getDetail(request, response);break;
        case "/member/edit" : edit(request, response);break;
        case "/member/del" : del(request, response);break;
 
    }
});//실행시점
 
server.listen(7979, function(){
    console.log("Server is running at 7979 port...")
});

* 사용할 모듈을 변수에 담아주기

* 클라이언트가 서버에게 무엇을 원하는지에 대한 정보는 요청 url로 구분 (request.url)

* url.parse로 파싱하여 파라미터 제거

* 요청 도메인 별 수행할 함수 구분

 

* ejs, 와 mysql은 외부모듈이기 때문에 npm(Node Pakage Manager) install로 설치

 

 

 

2. registForm()

function registForm(request, response){
 
    fs.readFile("./regist_form.html","utf8",function(err, data){
        //파일을 다 읽어들이면 응답정보 구성하여 클라이언트에게 전송
        response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
        response.end(data);
    });
}

* fs 모듈을 이용하여 regist_form.html  파일 읽어오기

* response.end로 data를 클라이언트에 전송

 

<결과물>

 

 

3. regist(request, response)

function regist(request, response){
    //클라이언트가 post방식으로 전송했기 때문에 http 데이터 구성 중 body를 통해 전송되어온다
    //post 방식의 파라미터를 끄집어 내보자
    // on이란 request 객체가 보유한 데이터 감시 메서드(즉, 데이터가 들어왔을때를 감지)
    var content="";
    request.on("data", function(param){ 
        //param에는 body 안에 들어있는 데이터가 서버의 메모리에 버퍼로 들어오고, 
        // 그 데이터를 param이 담고있다.
        content+=param; //버퍼의 데이터를 모으자
        
    }); //post 방식의 데이터 감지
    //데이터가 모두 전송되어, 받아지면 end 이벤트 발생
    request.on("end",function(){
        console.log("전송받은 데이터는", content);
        console.log("파싱한 결과는",qs.parse(content));
 
        //파싱한 결과는, 객체지향 개발자들이 쉽게 해성이 가능한 json으로 반환된다.
        var obj=qs.parse(content); 
 
        //이 시점이 쿼리문을 수행할 시점임
 
        //데이터베이스에 쿼리문을 전송하기 위해서는, 먼저 접속이 선행되어야한다
        //접속을 시도하는 메서드의 반환값으로, 접속객체가 반환되는데, 이 객체를이용하여
        //쿼리를 실행할 수 있다. 우리의 경우 con
        var con=mysql.createConnection(conStr);
        //쿼리문을 실행하는 메서드명은 query() 이다
        var sql="insert into member(user_id, user_pass, user_name)";
        sql+=" values('"+obj.user_id+"','"+obj.user_pass+"','"+obj.user_name+"')";
    
        con.query(sql, function(err, fields){
            if(err){
                response.writeHead(500, {"Content-Type":"text/html;charset=utf-8"});
                response.end("서버측 오류발생")
            }else{
                response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
                response.end("회원가입 성공<br><a href='/member/list'>회원 목록 바로가기</a>")
            }
            //db작업 성공여부와 상관없이 연결된 접속은 끊어야한다.
            con.end(); //접속 끊기
        });
 
    });
    
}

* regist_form 에서 서버에 post방식으로 전송했기 때문에 post방식으로 받기

* request.on으로 "data"를 param에 받아서 content로 모으기 (이때 모아진 데이터는 쪼개진 데이터도 들어옴)

* request.on의 "end"로 받아 클라이언트에게 전송

* end 안에는 querystirng 모듈로 쪼개진 데이터를 json 으로 변경

* mysql에 접속하고 sql문 구성

* con 객체를 이용하여 query 실행

* 전부 수행되면 con 접속 끊기

 

※ 여기서 database안의 table은 미리 mysql에서 만들어 놓을것

 

 

 

 

3. getList2(request, response), getList1(request, response)

//아래의 getList()보다 더 개선된 방법으로 요청을 처리하기 위해, 함수를 별도로 정의
function getList2(requset, response){
    //클라이언트에 결과를 보여주기전에, 이미 DB연동을 하여 레코드를 가져와야한다.
 
    var con=mysql.createConnection(conStr);
    var sql="select * from member";
    con.query(sql, function(err, record, fields){
        //record 변수에는 json 들이 일차원 배열에 탑재되어 있다.
        // console.log("record is", record);
 
        //파일을 모두 읽으면 익명함수가 호출이되고, 이 익명함수 안에 매개변수에 읽혀진 데이터가 
        //매개변수로 전달된다
        fs.readFile("./list.ejs", "utf8", function(err, data){
            if(err){
                console.log("list.html을 읽는데 실패")
            }else{
                response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
                //클라이언트에게 list.ejs를 그냥 그대로 보내지 말고, 서버에서 실행을 시킨 후, 그결과를
                //클라이언트에게 전송한다.
                // 즉, ejs를 서버에서 렌더링시켜야한다
                var result=ejs.render(data, {
                    members:record
    
    
                });//퍼센트 안에 들어있는 코드가 실행되어버린다
                response.end(result);
            }
        });
    }); //형식: sql문, 결과레코드, 필드정보
 
 
 
}

* mysql에 접속

* con 접속 객체에 쿼리실행 (이때 select문은 반환값이 필요하기 때문에 매개변수를 3개로 지정)

* 이때 record에는 form에서 넘어온 목록이 json으로 일차원 배열 형태로 생성

* 이때 record 값과 list.ejs의 값을 일치시키기 위해 렌더링

* record를 members에 담아줌

* 최종으로 result 값을 클라이언트에게 반환

 

 

 

//이 방법은 디자인 마저도 프로그램 코드에서 감당하고 있기 떄문에,
// 유지보수성이 너무 낮다. 따라서 프로그램 코드와 디자인은 분리되어야 좋다.
// 따라서 아래의 방법은 두번다시는 사용하지 XX (개발규모가 좀 커질때)
function getList1(request, response){
    //회원목록 가져오기
    //연결된 DB 커넥션이 없으므로, mysql에 재접속하자
    var con=mysql.createConnection(conStr);
 
    var sql="select * from member";
 
    //2번째 인수 : select 문 수행결과 배열
    //3번째 인수 : 컬럼에 대한 메타 정보(메타 데이터란? 정보 자체에 대한 정보다)
    //                  여기서 컬럼의 자료형, 크기 등에 대한 정보
    con.query(sql, function(err, result, fields){
        // console.log("쿼리문 수행후 mysql로부터 받아온 데이터는", result);
        // console.log("컬럼정보", fields);
        //배열을 서버의 화면에 표 형태로 출력 연습해보자
        var tag="<table width='100%' border='1px'>"
        for(var i=0;i<result.length;i++){
            var member=result[i];//한 사람에 대한 정보
            var member_id=member.member_id;//pk
            var user_id=member.user_id;//아이디
            var user_name=member.user_name;//이름
            var user_pass=member.user_pass;//등록일
            var regdate=member.regdate
            tag+="<tr>";
            tag+="<td>"+member_id+"</td>";
            tag+="<td>"+user_id+"</td>";
            tag+="<td>"+user_name+"</td>";
            tag+="<td>"+user_pass+"</td>";
            tag+="<td>"+regdate+"</td>";
            tag+="</tr>";
        }
        tag+="<tr>";
        tag+="<td colspan='5'><a href='/member/form'>회원등록 폼</a></td>";
        tag+="</tr>"
        tag+="</table>"
        response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
        response.end(tag);
 
        con.end();
    });
 
}

 

 

 

 

3. getDetail(request, response)

function getDetail(request, response){
    //한사람에 대한 정보 가져오기
    //mysql에 접속을 먼저해야한다.
    var con=mysql.createConnection(conStr);//접속 후 접속객체 반환
 
    //아래의 쿼리문에서 사용되는 pk값은, 클라이언트가 전송한 값으로 대체해 버리자
    /*get 방식은 , body를 통해 넘겨지는 post방식에 비해, header를 타고 전송되어 오므로,
    추출하기 용이하다(마치 봉투의 겉면에 씌여진 글씨와 같다)*/
 
    //개발자가 직접 url을 문자열 분석을 시도하기 보다는 보다 url을 전문적으로 해석 및 분석할 수 있는
    //모듈에게 맡기면 된다. 그 역할을 수행하는 모듈이 바로 url 내부 모듈이다!
    //querystring : pst 방식의 파라미터 추출
    //url : get방식의 파라미터 추출
    var param=url.parse(request.url, true).query; //true를 매개변수로 넘기면 json 형태로 파라미터를 반환
    console.log("상세보기에 필요한 추출 파라미터는", url.parse(request.url, true).query);
 
    var member_id=param.member_id; //json으로 
    console.log("클라이언트가 전송한 member_id의 파라미터 값은", member_id);
 
    var sql="select * from member where member_id="+member_id;
 
    
    //쿼리문 수행
    con.query(sql, function(err, result, fields){
        //쿼리문이 수행 완료된 시점이므로, 이때 사용자에게 상세페이지를 보여준다
        console.log(result);
        fs.readFile("./detail.ejs","utf8", function(err, data){
            if(err){
                console.log(err)
            }else{
                //클라이언트에게  html 을 읽어들인 내용을 보내주자
                response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
                /*end 뒤에 data를 넣을경우 detail.html 에서 읽어온 내용을 넣어준다.
                하지만 우리는 쿼리문의 result 값을 가져와야 하기떄문에 ejs파일로 변경하여 
                detail.ejs에서 %%로 렌더링해준다.*/
 
                /*render의 대상은 ejs파일내의 %%퍼센트 영역만이다.
                따라서 모든 render 작업이 끝나면 html 로 재구성하여 응답정보에 실어서
                클라이언트에 응답을 실행한다*/
                response.end(ejs.render(data, {
                    //result 값을 record에 넣어준다.
                    record: result[0] //한건이라 할지라도 , select 문의 결과는 배열이다. 따라서 0번째를 추출
                }));
            }
            con.end(); //mysql과 연결 끊기
        });
    });
 
    // var x=1;// 비동기방식이므로 readFile이 다 되기 전에도 실행이된다
}

* console.log(url.parse(request.url, true).query) == param

* console.log(param.member_id)

* console.log(result)

* 여기서 result 값으로 나온 결과는 배열이므로 result[0]을 record에 넣어주어야함

 

 

 

3. edit(request, response)

function edit(request, response){
    //쿼리문에 사용될 4개의 파라미터 값을 받아서 변수에 담아보자
    //글 수정은 클라이언트로부터 post 방식으로 서버에 전송되기 때문에, 그 데이터가 body 에 들어있다.
    //body에 들어있는 파라미터를 추출하기 위한 모듈이 querystring 이다
 
    //post 방식의 데이터는 버퍼에 담겨오기 때문에, 이 따로따로 직렬화되어 분산된 데이터를
    //일단 문자열로 모아서 처리해야한다.
    var content="";
    request.on("data", function(data){
        // console.log(data)
        content+=data;
    });
 
    request.on("end", function(){
        //이 시점이 파라미터가 하나의 문자열로 복원된 시점이다.
        var obj=qs.parse(content);
        console.log("파싱한 결과는", obj);
 
        var sql="update member set user_id='"+obj.user_id+"', user_pass='";
        sql+=obj.user_pass+"', user_name='"+obj.user_name+"'";
        sql+=" where member_id="+obj.member_id;
 
        //쿼리문 실행하여 수정완료 하세요
        //수정 완료 메세지 alert()으로 띄우고 상세보기 페이지를 다시 보여주기//단 상세보기로 이동시 에러xxxx, 수정된 내용 반영되어 있어야함
        var con=mysql.createConnection(conStr);
        /*
        DML(insert, update, delete):매개변수 2개 
        select:매개변수 3개
        */
        con.query(sql, function(err, fields){
            if(err){
                console.log(err)
            }else{
                response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
                response.end( "<script>alert('수정완료');location.href='/member/detail?member_id="+obj.member_id+"'</script>");
            }
            con.end();
        });
 
    });
 
}

* 클라이언트가 post 방식으로 보냈기 때문에 문자열을 파싱하여 json으로 변경이 필요

* update sql문을 사용하여 sql을 구성

* con 접속객체에 query를 실행함

* 수정 완료시 alert가 뜨고 detail 창에서 member_id는 sql문에서 데려온 obj.member_id가 들어 있어야함

 

 

 

 

3. del(request, response)

function del(request, response){
    var param=url.parse(request.url, true).query;
 
    console.log("클라이언트가 전송한 파라미터", param)
    var sql="delete from member where member_id="+param.member_id;
 
    //쿼리문 구성이 끝났으므로, mysql에 접속하여 해당 쿼리를 실행하자
    var con=mysql.createConnection(conStr);//접속, 및 커넥션 객체 반환
    //커텍션 객체는 접속 정보를 가진 객체이며, 이 객체를 통해 쿼리를 수행할 수 있다.
    //또한 mysql 접속을 해제도 가능하다
    //select문의 경우엔 결과를 가져와야 하기 때문에 가운데 인수, result가 필요하지만,
    //delete, update, insert DML은 가져올 레코드가 없기 때문에 인수가 2개이면 충분하다.
    con.query(sql, function(err, fields){
        if(err){
            console.log(err)
        }else{
            response.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
            response.end("<script>alert('삭제완료');location.href='/member/list'</script>");
        }
        con.end();
    });
}
 

* 파라미터의  member_id를 이용하여 sql문을 구성

* con 객체를 이용하여 쿼리문실행

* 삭제 완료시 alert가 뜨고 member/list창이 나타남

 

 

 

 

client 작업

 

1. regist_form.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 파비콘.. 윈도우 상 아이콘이다. -->
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
 
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
 
input[type=text],input[type=password] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
 
input[type=button] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
/*JQuery 의 문법 형시 (누구를).어떻게, 누구자리에 올수있는 요소?
CSS의 selector가 올수 있다.*/
$(function(){ //onLoad되면
    $($("input[type=button")[0]).click(function(){
         //유효성 체크
         if($("#user_id").val()==""){
            alert("아이디를 입력하세요");
            return; //이 함수를 호출한 곳으로 되돌아감
         }
         //if 조건을 만나지 않은 사람은 올바르게 입력한 사람이므로 서버에 데이터를 전송
        $("form").attr("action", "/member/join"); //이 요청을 받을 서버의 주소
        $("form").attr("method", "post"); //전송방식을 post로 지정
        $("form").submit(); //폼 양식에 입력한 데이터를 서버로 전송
    });
 
    //두번째 버튼을 누르면, 목록 요청
    $($("input[type=button")[1]).click(function(){
      location.href="/member/list"; //get방식의 요청
    });
});
 
</script>
</head>
<body>
 
<h3>Contact Form</h3>
 
<div class="container">
    <!-- 폼 태그의 속성중 action은 이 폼양식을 전송할 대상 서버의 url을 명시할 수 있다. -->
    <!-- 
      id와 name 공통점과 차이점
      공통점)문서내의 요소를 식별하기 위함
      차이점)id-유일해야함, name-중복허용(배열로 인식)
                name은 폼 전송시 전송 파라미터 역할을 한다, 즉 변수 역할을 한다
                이때 전송 파라미터로서의 name의 이름은 주로 db의 테이블의 컬럼명과 일치시키는 규칙
     -->
  <form>
    <label for="user_id">ID</label>
    <input type="text" id="user_id" name="user_id" placeholder="Your ID..">
 
    <label for="user_pass">Password</label>
    <input type="password" id="user_pass" name="user_pass" placeholder="Your Password..">
    
    <label for="user_name">Name</label>
    <input type="text" id="user_name" name="user_name" placeholder="Your Name..">
 
    <!-- input 태그의 type 중 submit은 디폴트로 전송기능이 포함되어 있기 때문에
    클릭만으로도, 전송이 발생함. 따라서 일반 버튼화 시켜놓자 -->
    <input type="button" value="Submit">
    <input type="button" value="목록으로">
  </form>
</div>
 
</body>
</html>
 

* input타입 button은 배열로 간주( [0], [1] 으로 사용가능)

* 그외 주석내용 참고

 

 

 

2. list.ejs

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}
 
th, td {
  text-align: left;
  padding: 16px;
}
 
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  //버튼 을 클릭하면, /member/list 페이지 요청
  $(function(){
    $("button").on("click",function(){
      location.href="/member/form"; //get 방식
    })
  })
</script>
</head>
<body>
 
<h2><%="총회원수는 "+members.length%></h2>
 
<table>
  <tr>
    <th>PK</th>
    <th>아이디</th>
    <th>비밀번호</th>
    <th>회원명</th>
    <th>회원 가입일</th>
  </tr>
  <!-- 서버는 파일의 확장자가 ejs인 경우, html처럼 단순히 읽은 후 전송만 하는게 아니다.
  즉, 확장자가 ejs인 경우엔, 퍼센트로 감싼 영역에 대해서는, 해석 및 실행하지 해버린다.
  따라서 %영역은 서버측의 스크립트 언어로 볼 수있다. 참고로 우리가 지금까지 사용해왔던
  script 태그안의 자바스크립트듣 
  -->
  <%for(var i=0;i<members.length;i++){%>
  <%var obj=members[i]; //배열에서 i번째 요소를 끄집어내서 회원 1명을 반환하자%>
  <tr>
    <td><%=obj.member_id%></td>
    <td>
      <a href="/member/detail?member_id=<%=obj.member_id%>"><%=obj.user_id%></a>
    </td>
    <td><%=obj.user_pass%></td>
    <td><%=obj.user_name%></td>
    <td><%=obj.regdate%></td>
  </tr>
  <%}%>
  <tr>
    <td colspan="5">
      <button>가입</button>
    </td>
  </tr>
</table>
 
</body>
</html>
 

* ejs 렌더링으로 record값을 members에 담아줌

* members 배열을 for문을 이용하여 각 요소들을 끄집어내줌

* members의 member_id에는 링크를 걸어 detail 창으로 이동할수 있도록 함

 

 

 

3. detail.ejs

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 파비콘.. 윈도우 상 아이콘이다. -->
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
 
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
 
input[type=text],input[type=password] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
 
input[type=button] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
/*JQuery 의 문법 형시 (누구를).어떻게, 누구자리에 올수있는 요소?
CSS의 selector가 올수 있다.*/
$(function(){ //onLoad되면
  //수정요청
    $($("input[type=button")[0]).click(function(){
      if(confirm("작성하신 내용을 수정할까요?")){
        $("form").attr("action", "/member/edit"); //이 요청을 받을 서버의 주소
        $("form").attr("method", "post"); //전송방식을 post로 지정
        $("form").submit(); //폼 양식에 입력한 데이터를 서버로 전송
      }
    });
 
    //삭제요청
    $($("input[type=button")[1]).click(function(){
      if(confirm("삭제하시겠습니까?")){
        location.href="/member/del?member_id=<%=record.member_id%>";
      }
    });
 
    //목록요청
    $($("input[type=button")[2]).click(function(){
      location.href="/member/list"; //get방식의 요청
    });
});
 
</script>
</head>
<body>
 
<h3>회원정보 상세보기</h3>
 
<div class="container">
    <!-- 폼 태그의 속성중 action은 이 폼양식을 전송할 대상 서버의 url을 명시할 수 있다. -->
    <!-- 
      id와 name 공통점과 차이점
      공통점)문서내의 요소를 식별하기 위함
      차이점)id-유일해야함, name-중복허용(배열로 인식)
                name은 폼 전송시 전송 파라미터 역할을 한다, 즉 변수 역할을 한다
                이때 전송 파라미터로서의 name의 이름은 주로 db의 테이블의 컬럼명과 일치시키는 규칙
     -->
  <%="ejs 파일로 넘겨받은 레코드는"+record %>
  <form>
    <label for="user_id">ID</label>
    <input type="text" id="user_id" name="user_id" value="<%=record.user_id%>">
 
    <label for="user_pass">Password</label>
    <input type="password" id="user_pass" name="user_pass" value="<%=record.user_pass%>">
    
    <label for="user_name">Name</label>
    <input type="text" id="user_name" name="user_name" value="<%=record.user_name%>">
 
    <!-- 이 텍스트 필드는, member_id 값을 넘기기 위한 용도이다 -->
    <input type="hidden" name="member_id" value="<%=record.member_id%>">
 
    <!-- input 태그의 type 중 submit은 디폴트로 전송기능이 포함되어 있기 때문에
    클릭만으로도, 전송이 발생함. 따라서 일반 버튼화 시켜놓자 -->
    <input type="button" value="수정">
    <input type="button" value="삭제">
    <input type="button" value="목록">
  </form>
</div>
 
</body>
</html>
 

* 수정은 post방식, 삭제, 목록은 get 방식

* 각 input에 <%%>를 사용하여 record의 요소들을 넣어줌