[Node.js] 0421 수업

티스토리 뷰

Node.js

[Node.js] 0421 수업

LHOIKTN 2021. 4. 21. 17:30

DB먼저


SHOW databases;	현재 어떤 DB가 있는지 보여줌
CREATE database [데이터베이스명]	DB를 만든다.
USE [데이터베이스명];	해당 DB를 사용할 수 있게 된다.
DROP database [데이터베이스명]	DB를 삭제한다.
CREATE table user( -> userid varchar(50), -> userpw varchar(50), -> username varchar(50) -> );	테이블을 만든다. 테이블명과 각 속성과 타입을 정해준다.
SHOW TABLES;	데이터베이스의 테이블을 보여준다.
INSERT INTO [테이블명] (필드1,필드2....) VALUES(값1, 값2) 예)INSERT INTO user(userid,name,password) VALUES('test','test',1234);	레코드삽입
DELETE FROM [테이블명] WHERE 필드= 값;	레코드 삭제
SELECT [필드명,필드명] FROM [테이블명];	테이블에서 선택된 필드를 보여준다.
select * from [테이블명];	*은 전체를 뜻함=> 전체 필드를 보여줌,
select * from [테이블명] order by [필드명] desc;	필드명을 기준으로 내림차순 정렬
order by 필드명 asc;	오름차순 정렬
update 테이블 set 필드명='바꿀값' where 찾을 필드명="바꾸고 싶은 값"	레코드 수정

오늘 배운 거는 이 정도..

오늘 과제는 숙제 pk값, alter table , select문의 option값(%의 기능, limit의 기능),
not Null? type이란? auro increment 조사.

그리고 서버

어제 했던대로 차례대로 깔아주고.

npm init

npm install express

npm install nunjucks

npm install chokidar

dotenv도 설치해준다.

npm install dotenv

.env라는 파일을 만들고 파일 안에

SERVER_PORT = 3000

라고 써준다.

그리고 env를 설정해준다.

require('dotenv').config();   //env 추가해주고
const port = process.env.SERVER_PORT; //포트 아까 env에 설정한 데로 설정해주고
console.log(port);   //잘 나오는지 확인.  잘 나오면 지워주자. 

/*
const express = require('express');
const nunjucks = require('nunjucks');
const mysql =require('mysql');
const app = express(); 
*/

그 다음에 npm으로 mysql을 설치해준다. 마리아DB를 사용하지만 mysql도 가능하다.

npm install mysql

const mysql =require('mysql');





let connection = mysql.createConnection({ //mysql 셋팃 mysql서버에 접속할 정보를 줘. 그 정보를 객체에 담을께. 
    host:"localhost",
    user:'root',
    password:'1234',
    database:'ehdcjf',
})

이것도 설정해주고

connection.connect();

이러면 DB에 연결된다.

그리고 add.get() 안에

app.get('/',(req,res)=>{
    connection.query("select * from user",(error,results)=>{
        if(error){
            //error가 생기면 이 구문을 실행하라 
            console.log(error);
        }else{
            //error가 없으면 이 구문을 실행하라 
            console.log(results);
            results.forEach(ele => {
                console.log(ele.userid,ele.userpw,ele.username);
            });
        }

    })

이렇게 치고 서버 실행하면 아래 콘솔창에 이렇게 뜬다.

데이터베이스의 각 레코드가 객체로 배열에 담긴다.

회원가입을하면 그 정보가 db에 입력되는 server를 만든다.

먼저 회원가입 form을 만든다. 이렇게 index.html을 만들어준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입</title>
    <style>
        h1{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>회원가입</h1>
    <form action="http://localhost:3000/join" method="post" id="">
        아이디:<input type="text" name="userid" ><br>
        패스워드:<input type="password" name="userpw" ><br>
        이름:<input type="text" name="username" ><br> 
        <input type="submit" value="회원가입">
    </form>
</body>
</html>

그 다음 서버에서 브라우져에 입력된 값을 받아올 수 있게 설정해준다. post로 body를 받아오기 위해

npm install body-parser

이거 설치해주고

const bodyParser=require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));

이렇게 설정해준다.

app.post('/join', (req, res) => {
    let body = req.body;
    let id = body.userid;
    let pw = body.userpw;
    let name = body.username;

    let sql = `insert into user(userid,userpw,username) values('${id}','${pw}','${name}')`; 
    
    connection.query(sql,(error,results)=>{
        if(error){
            console.log(error);
        }else{
            console.log(results);            
        }
    })
    res.render('join.html',{
        user_name:name,
        user_id:id,
        user_pw:pw,
    }); 
        // connection.query("INSERT INTO user (userid,userpw,username) values (?,?,?)", sql, (error, results) => {
    //     if (error) {
    //         console.log(error);
    //     } else {
    //         console.log(results);
    //     }
    // });
});

app.listen(port,()=>{ //그리고 아까는 3000이라고 써놧던 port를 바꿔준다. 
    console.log(`server start port: ${port}`);
})

post는 body를 받아온다.

body에서 받아온 값들을 담을 변수를 만들어준다.

    let body = req.body;
    let id = body.userid;
    let pw = body.userpw;
    let name = body.username;

받아온 값을 이용한 sql문을 작성해주고

let sql = `insert into user(userid,userpw,username) values('${id}','${pw}','${name}')`;

쿼리를 실행해준다.

connection.query(sql,(error,results)=>{
        if(error){
            console.log(error);
        }else{
            console.log(results);            
        }
    })

이제 서버를 켜고 실행해보면

값들을 inputbox안에 넣어주고 회원가입을 누르면

이렇게 db에 새로 추가된다.

이제 이걸 화면에 사용자 화면에 보여주기 위해 join.html을 만든다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 50px;
        }

    </style>
</head>
<body>
    <p>{{user_name}}씨 회원가입을 환영합니다!!!!</p> 
    <p>{{user_name}}씨 당신의 아이디는 {{user_id}}</p> 
    <p>{{user_name}}씨 당신의 비밀번호는 {{user_pw}}</p> 
    <a href="/">메인으로 가기</a>
</body>
</html>

그리고 아까 server에 작성했던 app.post 부분에 이걸 추가해준다.

res.render('join.html',{
        user_name:name,
        user_id:id,
        user_pw:pw,
    });

그리고 다시 서버를 껐다가 실행시키고 적당한 값을 넣어주고

회원가입을 눌러주면

이렇게 join.html을 보여준다.

회원가입 form에 성별을 추가해주고 싶다.

데이터베이스에 성별 속성을 추가해줘야한다.

alter table user add gender varchar(50);

index.html의 form 안에 아래 코드를 추가해주고

성별: 남자<input type="radio" name='gender' value="male"> 
여자<input type="radio" name='gender'value='female'><br>

server.js에 add.post부분에 아래 코드를 추가/변경해주자.

 let gender=body.gender; 
    let sql = `insert into user(userid,userpw,username,gender) values('${id}','${pw}','${name}','${gender}')`

그리고 실행하면

이렇게 성별 라디오 박스가 추가되었고 회원가입을 누르면

이렇게 성별도 추가로 나온다.

데이터베이스에도 성별이 male인 레코드가 추가되었다.

728x90

'Node.js' 카테고리의 다른 글

게시판 pagination (0)	2021.05.03
[Node.js]서버 파일 분산 (0)	2021.05.01
0424 수업 (0)	2021.04.24
[Node.js]0420수업내용 (0)	2021.04.20
[Node.js] 0419수업내용. (0)	2021.04.20

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

GPD2021

티스토리 뷰

[Node.js] 0421 수업

'Node.js' 카테고리의 다른 글

티스토리툴바