프로그래밍/Node.js

Node.js - HTML 페이지에서 입력받고 MYSQL 에 데이터 추가하기

가카리 2015. 1. 3. 16:13
반응형

3줄요약

1. mysql 데이터 베이스 및 테이블 생성

2. 웹서버에 데이터 베이스를 연결 시키고, get, post 등 라우터를 구현해둔다.

3. HTML 로 입력 폼을 만들고 get 및 post 메시지로 데이터베이스 내용 추가 및 내용을 가져와서 보여준다.



MYSQL 서버에 미리 Company라는 데이터 베이스를 만듭니다.


mysql > CREATE DATABASE Company;


mysql > USE Company


그다음 products라는 테이블을 생성합니다.


mysql > CREATE TABLE products(

        id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,

        name VARCHAR(50) NOT NULL,

        modelnumber VARCHAR(15) NOT NULL,

        series VARCHAR(30) NOT NULL

        );



DESCRIBE products 를 하면 다음과 같은 화면을 볼 수 있습니다.





















그 다음 Node.js로 구현한 웹서버 소스입니다.


express 버전은 @3.4.7 입니다.



server.js


var http = require('http');

var express = require('express');

var mysql = require('mysql');


var client = mysql.createConnection({

        user : 'root',

        password : 'apmsetup',

        database : 'Company'


        });


//웹서버를 생성합니다.

var app = express();

app.use(express.static('public'));

//app.use(express.bodyParser());

app.use(express.json());

app.use(express.urlencoded());


app.use(app.router);


/*client.query('SELECT * FROM products', function (error, result, fields) {

        if (error) {

        console.log('쿼리 문장에 오류가 있습니다.');

        } else {

        console.log(result); //매개변수 result 결과 출력

        }


});*/


app.get('/products', function (request, response) {

        //데이터베이스 요청을 수행합니다.

        client.query('SELECT * FROM products', function (error, data) {

        //response.type('text/xml');

        //response.header("Access-Control-Allow-Origin" , "*");

        response.set('Access-Control-Allow-Origin', '*');

        response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');

        response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');

        response.send(data);

        });


});


app.get('/:id', function (request, response) {

        //변수 선언

        var id = Number(request.param('id'));


        //데이터베이스 요청을 수행합니다.

        client.query('SELECT * FROM products WHERE id=?', [id], function (error, data) {

        response.set('Access-Control-Allow-Origin', '*');

        response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');

        response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');

        response.send(data);

        });


});


app.post('/products', function (request, response) {

        //변수를 선언합니다.

        var name = request.param('name');

        var modelnumber = request.param('modelnumber');

        var series = request.param('series');


        //데이터베이스 요청을 수행합니다.

        client.query('INSERT INTO products(name, modelnumber, series) VALUES(?,?,?)', [name, modelnumber, series], function (error, data) {

        response.set('Access-Control-Allow-Origin', '*');

        response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');

        response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');

        //     response.send(data);

        response.send({

        message: '데이터를 추가했습니다.',

        data: item

        });

        

        });


});


app.put('/products/:id', function (request, response) {

        //변수를 선언합니다.

        var id = Number(request.param('id'));

        var name = request.param('name');

        var modelnumber = request.param('modelnumber');

        var series = request.param('series');

        var query = 'UPDATA products SET';


        //쿼리를 생성합니다.

        if (name)

        query += 'name="' + name + '" ';

        if (modelnumber)

        query += 'modelumber="' + modelnumber + '" ';

        if (series)

        query += 'series="' + series + '" ';


        //데이터베이스 요청을 수행합니다.

        client.query(query, function (error, data) {

        response.set('Access-Control-Allow-Origin', '*');

        response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');

        response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');

        response.send(data);

        });


});


app.del('http://127.0.0.1:52273/products/:id', function (request, response) {

        //변수를 선언합니다.

        var id = Number(request.param('id'));


        //데이터베이스 요청을 수행합니다.

        client.query(query, function (error, data) {

        response.set('Access-Control-Allow-Origin', '*');

        response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');

        response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');

        response.send(data);

        });

});


//웹서버를 실행

http.createServer(app).listen(52273, function () {

        console.log('Server Running at http://127.0.0.1:52273');

});



그다음 HTML 파일입니다.


다음과 같은 포맷을 구성합니다.



html소스에서 가장 중요한 점은 tr태그에서 id 태그를 반드시 추가 시켜줘야


합니다. name 태그만 추가하면 input 에 입력한 값을 받을 수가 없습니다.


꼭 id 태그를 추가해줘야합니다.


ex22_14.html


<!DOCTYPE html>

<html>

<head>

        <meta charset="utf-8">

    <title>DB Basic</title>

        <script src="http://code.jquery.com/jquery-1.11.1.js">

    </script>

        <script>

        $(document).ready(function(){

        //데이터를 보여주는 함수입니다.

        function selectData(){

        //#output 내부의 내용물을 제거합니다. output html body 있다

        

        $('#output').empty();

        

        //Ajax 수행합니다.

        $.getJSON('http://127.0.0.1:52273/products', function(data){

        $(data).each(function (index, item){

        var output = '';

        output += '<tr>';

        output += '  <td>' + item.id + '</td>';

        output += '  <td>' + item.name + '</td>';

        output += '  <td>' + item.modelnumber + '</td>';

        output += '  <td>' + item.series + '</td>';

        output += '</tr>';

        $('#output').append(output);

        });

        });

        

        }

        

        //데이터를 추가합니다.

        $('#insert_form').submit(function (event){

        //Ajax 수행합니다.

        var data = $(this).serialize();//입력한 값을 data 넣음

        $.post('http://127.0.0.1:52273/products', data, selectData);

        

//     var name = $('#name').val();

/*     $.ajax({

        url: 'http://127.0.0.1:52273/products',

        type: 'post',

        dataType: 'text',

        data : {

        name : $('#name').val(),

        modelnumber : $('#modelnumber').val(),

        series : $('#series').val()

        },

        success : function(data){

        alert(name);

        }

        });

        */     

        //기본 이벤트를 제거합니다.

        event.preventDefault();

        

        });

        

        //초기화면에 데이터를 표시합니다.

        selectData();

        

        });

        </script>

</head>

<body>

        <div>

        <form id="insert_form">

        <fieldset>

        <legend>데이터추가 </legend>

        <table>

        <tr>

        <td><label>상품명 </label></td>

        <td><input type="text" name="name" id="name" /></td>

        </tr>

        <tr>

        <td><label>모델 번호 </label></td>

        <td><input type="text" name="modelnumber" id="modelnumber"/></td>

        </tr>

        <tr>

        <td><label>시리즈 </label></td>

        <td><input type="text" name="series" id="series"/></td>

        </tr> 

        </table>

        <input type="submit" id="post" value="추가" />

        </fieldset>

        </form>

        </div>

        <table id="output" border="1">

        

        </table>

</body>

</html>



반응형