[NODEJS ROUTER]부분

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/* GET home page. */
router.get('/:page', function(req, res) {
  if(req.session.adminID){
    var sql = "SELECT *, INV.INV_QTY FROM md_mtrl AS M INNER JOIN MA_INVENT AS INV ON M.MTRL_CD = INV.MTRL_CD WHERE USE_YN = 'Y'";
    db.query(sql, function(error, rows){
      if(!error){
        if(rows.length>0){
 
          // 페이지당 게시물 수
          var page_size = 2;
          // 페이지의 개수 : 화면 하단 페이지 숫자 버튼 개수
          var page_list_size = 2;
          // limit 변수
          var no = '';
          //전체 게시물의 숫자 : 쿼리문 결과수
          var totalPageCount = rows.length;
          if(totalPageCount < 0){
            totalPageCount = 0;
          }
          //현제 페이지
          var curPage = req.params.page;
          
          var totalPage = Math.ceil(totalPageCount / page_size);// 전체 페이지수
          var totalSet = Math.ceil(totalPage / page_list_size); //전체 세트수
          var curSet = Math.ceil(curPage / page_list_size) // 현재 셋트 번호
          var startPage = ((curSet - 1) * page_list_size) + 1 //현재 세트내 출력될 시작 페이지
          var endPage = (startPage + page_list_size) - 1; //현재 세트내 출력될 마지막 페이지
          
          //현재페이지가 0 보다 작으면
          if (curPage < 0){
            no = 0;
          }else{
            //0보다 크면 limit 함수에 들어갈 첫번째 인자 값 구하기
            no = (curPage - 1) * page_size;
          }
 
          var page_date = {
            "curPage": curPage,
            "page_list_size": page_list_size,
            "page_size": page_size,
            "totalPage": totalPage,
            "totalSet": totalSet,
            "curSet": curSet,
            "startPage": startPage,
            "endPage": endPage
          };
 
          // 추가 쿼리문
          sql += " LIMIT "+no+","+page_size+"";
          console.log("쿼리문 : "+sql)
          db.query(sql, function(error, rows){
            if(!error){
              res.render('mtrl_list',{rows : rows, pasing : page_date});
            }
          });
        }else{
          res.render('mtrl_list',{rows:[]});
        }
      }else{
        res.render('mtrl_list',{rows:[]});
      }
    });
    
  }else{
    res.redirect('/');
  }
});
 cs
 

[HTML]부분

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
29
<%
    var endPage = pasing.endPage;
    var startPage = pasing.startPage;
    var totalSet = pasing.totalSet;
    var totalPage = pasing.totalPage;
    var page_list_size = pasing.page_list_size;
    var page_size = pasing.page_size;
    var curPage = pasing.curPage;
%>
 
<div class="paging">
    <%  if(curSet > 1){ %>
        <span><a href="/mtrl_list/<%= (startPage - 1) %>" class="prev">‹</a></span>
    <%  } %>
 
    <%  for(var i = startPage; i <= endPage; i++){ 
            if(i > totalPage){break;}
            if(i == curPage){
    %>
            <span><a class="on" href="/mtrl_list/<%= i %>"><%= i %></a></span>
    <%      }else{  %>
            <span><a href="/mtrl_list/<%= i %>"><%= i %></a></span>
    <%      }  %>
    <%  } %>
 
    <% if(curSet < totalSet){ %>    
        <span><a href="/mtrl_list/<%= endPage + 1 %>" class="next">›</a></span>
    <%  }  %>
</div>
 cs

'NodeJS' 카테고리의 다른 글

nodejs-mysql transaction 사용하기  (0) 2020.08.12
nodejs express(centos7) socket.io 내에서 session 데이터 접근  (0) 2020.03.27
nodejs express(centos7) 에서 socket.io 모듈 사용하여 다른 클라이언트로 데이터 전달하기  (0) 2020.03.26

크롬의 alert창 스타일과 같은 심플한 팝업창이 필요해서 구글링 하던중

dialog element demo

라는 방법을 알았다.

https://demo.agektmr.com/dialog/

 

dialog element demo

The HTML dialog element provides in-page dialog box functionality. A dialog exists in the DOM tree and can be styled using ordinary CSS.

demo.agektmr.com

내가 자주 사용하는 dialog [style]

1
2
dialog { border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); }
dialog::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); }
  

주의 할 점

Internet explorer, edge 에서는 작동 안함 => 아래의 bluebird.js 를 사용하면 Internet explorer 에서 작동됨

 

'웹 프로그래밍 > HTML,CSS,JS' 카테고리의 다른 글

[bootstrap] Multiple Modal Open & Modal draggable & Priority when clicking modal // 여러개의 모달 열기 & 모달 드래그 & 모달 클릭시 우선순위  (0) 2020.09.28
javascript 자주쓰는 정규식 표현 모음  (0) 2020.08.24
openlayers 5 기본기(지도 생성, 마커/팝업 생성)  (1) 2019.07.23
브이월드(opanlayers 3) 지도 + WMS(상권 지도) + 다음 로드뷰  (0) 2019.07.12
동적으로 생성된 파일첨부 데이터 ajax로 보내기 + php  (0) 2019.07.08

##참고URL

https://www.npmjs.com/package/express-socket.io-session

1. express-socket.io-session 모듈 설치

1
npm install express-socket.io-session
  

2. 서버쪽 코드 [app.js]

socket.handshake.session으로 세션데이터로 접근 (38,39번 라인참고)

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var app = express();    // nodejs express의 디폴트 포트번호는 3000번
 
var http = require('http');
var socketio = require('socket.io');
var server = http.createServer(app);
var io = socketio.listen(server);
server.listen(8080);    // 소켓 서버 포트는 8080으로 설정함
 
// 세션 설정
var session = session({                                            
  secret:"asdfasffdas",
  resave:false,
  saveUninitialized:true
});
 
app.use(session);
 
// 소켓 구문 시작 =================================================
var ios = require("express-socket.io-session"); // 소켓 내에서 세션데이터 접근 가능하도록하는 모듈
io.use(ios(session, { autoSave:true }));  // 모듈과 세션 연결
 
io.sockets.on('connection', function(socket){
  // 클라이언트에게 메세지 송신 방법
  // io.emit  == 접속된 모든 클라이언트에게 메세지 전송
  // socket.emit    == 메세지를 전송한 클라이언트에게만 전송
  // io.to(id).emit == 특정 클라이언트에게만 메세지 전송 (본인 포함)
  // socket.broadcast.to(id).emit == 본인은 제외한 특정 클라이언트에게만 전송
  // socket.emit('message', '서버 데이터 받음');
  // socket.on('이벤트명',기능 서술) == 서버 또는 클라이언트에서 메세지를 받는 방식
 
  // room 이름 설정
  var room = 'chatting';
 
  // 클라이언트에서 'login'이라는 이벤트명으로 서버로 송신하면 여기로....
  // 접속한 클라이언트의 정보가 수신
  socket.on('login', function() {
    console.log('########클라이언트 로그인########');
    var userID = socket.handshake.session.adminID;    // <======= 소켓 내에서 세션에 접근 
    var DEPT_CD = socket.handshake.session.DEPT_CD; // <======= 소켓 내에서 세션에 접근 
    console.log('session 사원 아이디 : '+ userID + " || " +'session 사원 부서번호 : '+ DEPT_CD);
 
    // room에 join한다
    socket.join(room);
    console.log("room에 존재하는 사원 수 : "+ io.sockets.adapter.rooms['chatting'].length);
  });
 
  // 클라이언트로부터 메세지 수신
  socket.on('message', function(message){
    var data = JSON.stringify(message);
    socket.emit('self', '제품입고관리로 전송완료');
    socket.broadcast.to(room).emit('message', data); // 룸에서 본인을 제외한 방이 존재하는 사람들에게 전송
  });
});
// 소켓 구문 종료 =================================================
  

 

'NodeJS' 카테고리의 다른 글

nodejs-mysql transaction 사용하기  (0) 2020.08.12
NODEJS + MYSQL pagination  (0) 2020.06.23
nodejs express(centos7) 에서 socket.io 모듈 사용하여 다른 클라이언트로 데이터 전달하기  (0) 2020.03.26

제목 처럼 socket.io 모듈을 사용하여 서버를 통해 다른 클라이언트로 데이터를 전송하는 방법을 알아보겠습니다.

 

socket.io 모듈은 nodejs의 내장 모듈이 아니라 설치를 해주어야 합니다. 

 

본인의 프로젝트 폴더에 들어가서 다음과 같은 명령어를 입력하여 설치를 해줍니다.

1
npm install --save socket.io
  

다음은 서버 설정 입니다.

[app.js] 서버쪽

1
2
3
4
5
6
7
var app = express();
 
var http = require('http');
var socketio = require('socket.io');
var server = http.createServer(app);
var io = socketio.listen(server);
server.listen(8080);
  

1. http 모듈은 nodejs 내장 모듈이라 따로 설치 ㄴㄴ

2. socket.io 모듈을 처음에 설치해 주었으니 사용한다고 선언해줍니다.

3. 소켓 서버을 설정해줍니다.

****참고로 nodejs 서버의 포트 번호는 3000으로 설정해준 상태입니다.

4. 소켓 서버의 포트 번호는 8080으로 설정해줍니다.

 

[app.js] 서버쪽

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
29
30
31
32
// 소켓 구문 시작 =================================================
 
io.sockets.on('connection', function(socket){
 
  // 접속한 클라이언트의 정보가 수신되면
  socket.on('login', function(data) {
    console.log('########클라이언트 로그인########\n USER: ' + data.userid);
 
    // socket에 클라이언트 정보를 저장한다
    var room = 'chatting';
 
    // room에 join한다
    socket.join(room);
    
    // 접속된 모든 클라이언트에게 메시지를 전송한다
    socket.emit('login', '소켓 서버 로그인 성공');
 
    // 클라이언트로 부터 메세지 수신
    socket.on('message', function(message){
      var data = JSON.stringify(message);
      io.to(room).emit('message', data); // room에 join한 유저들에게 데이터 전송
      console.log('Message from Client: ' + data);
    });
  });
 
  // 클라이언트에게 메세지 송신 방법
  // io.emit  == 접속된 모든 클라이언트에게 메세지 전송
  // socket.emit    == 메세지를 전송한 클라이언트에게만 전송
  // io.to(id).emit == 특정 클라이언트에게만 메세지 전송
  // socket.emit('message', '서버 데이터 받음');
});
// 소켓 구문 종료 =================================================
  

다음은 클라이언트 코드를 보도록 하겠습니다.

[index.html] 클라이언트쪽

1
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js.map"></script>
  

html 또는 ejs 파일에 위와 같은 cdn을 추가해 줍니다.

그리고 클라이언트 자바스크립트에는

[index.js] 클라이언트쪽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// socket.io 서버에 접속한다
    var socket = io('http://192.168.XXX.XXX:8080');
    socket.emit('login',{
        userid: $('#userID').val() // 접속한 회원 정보
    });
 
    // 서버로부터의 메시지가 수신되면
    // socket.on("login", function(data) {
    //     alert(data);    
    // });
 
    //서버로부터의 메시지가 수신되면
    socket.on("message", function(data) {
        alert(data);  
    });
 
    //테스트
    $('#form_btn').on('click',function(){
        socket.emit('message', {
            message: $('#test_form').serialize()
        });
    });
 
  

위에서 가장 중요한건

1
var socket = io('http://192.168.XXX.XXX:8080');
  

이다.

 

이것을 잘못 입력하면(예를 들어 'localhost:808'로 전송시) 아래와 같은 에러가 뜬다.

 

정확하게 'localhost:8080'으로 입력해야 에러가 발생하지 않는다.)

에러 이유는 클라이언트 코드와 

1
var socket = io('http://192.168.XXX.XXX:8080');
  

서버쪽 코드가

1
2
3
4
5
6
7
var app = express();
 
var http = require('http');
var socketio = require('socket.io');
var server = http.createServer(app);
var io = socketio.listen(server);
server.listen(8080);
  

맞지 않는다면 에러가 발생하는 것이다.

 

정리하자면

nodejs express는 기본적으로 3000번 포트를 사용하며 app 변수는 3000번 포트가 기본적으로 설정되어있다.

var server = http.createServer(app);

var io = socketio.listen(server);

위의 2줄 구문 처럼 app의 3000번 포트 안에 소켓 서버를 설정하고

server.listen(8080); 소켓 서버는 8080포트로 받는것이다.

 

클라이언트가 웹(3000번)으로 접속하고 소켓서버(8080)으로 데이터를 전송하는 순서이다. 

'NodeJS' 카테고리의 다른 글

nodejs-mysql transaction 사용하기  (0) 2020.08.12
NODEJS + MYSQL pagination  (0) 2020.06.23
nodejs express(centos7) socket.io 내에서 session 데이터 접근  (0) 2020.03.27

1. nodejs 및 npm 설치 여부

1
2
3
4
5
[root@localhost ~]# node -v
v6.17.1
[root@localhost ~]# npm -v
3.10.10
  

- 설치가 안되어 있다면

1
[root@localhost ~]# yum install npm nodejs
  

2. express 설치

1
[root@localhost ~]# npm install -g express-generator
  
1
2
3
4
[root@localhost ~]# express -e 프로젝트 폴더명
[root@localhost ~]# cd 프로젝트 폴더명
[root@localhost ~]# npm install
[root@localhost ~]# npm init
  

-필자는 프로젝트 폴더명을 'myapp'이라고 했음...

npm init 명령어 이후  ls 명령어로 하위 폴더을 살펴보면 다음과 같이 생성되어 있는것을 볼 수 있다.

1
2
[root@localhost myapp]# ls
app.js  bin  node_modules  package.json  public  routes  views
  

방화벽 오픈(nodejs express 서버의 포트 번호는 3000번이므로...)

1
2
[root@localhost myapp]# firewall-cmd --permanent --zone=public --add-port=3000/tcp
[root@localhost myapp]# firewall-cmd --reload
  

mysql 모듈 추가 명령어는

1
npm install mysql
  

session 모듈 추가는

1
npm install --save express-session
  

'NodeJS > express' 카테고리의 다른 글

express Router에서 GET,POST 방식의 데이터 주고 받기(feat. mysql)  (0) 2019.09.26
express 웹서버에서 mysql 연결 및 사용하기  (0) 2019.09.26
뷰엔진을 jade에서 html로 바꾸기  (0) 2019.09.26
express js 설치 시작하기(윈도우 기준)  (0) 2019.09.26

[1.안드로이드 - AndroidManifest.xml]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.helloworld">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".subActivity"
            android:label="@string/login_page"></activity>
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
 
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
 
</manifest>
 
  

[2.안드로이드 - MainActivity.java]

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
package com.example.helloworld;
 
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        Button button = (Button) findViewById(R.id.login_btn);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(getApplicationContext(), subActivity.class);
                startActivity(intent);
            }
        });
    }
}
 
  

[3.안드로이드 - subActivity]

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
package com.example.helloworld;
 
import android.content.DialogInterface;
import android.os.AsyncTask;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.inputmethod.EditorInfo;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
 
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
 
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.concurrent.ExecutionException;
 
 
public class subActivity extends AppCompatActivity {
    private EditText idEditText;
    private EditText pwdEditText;
    private String idText,pwdText;
    private String mJsonString;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sub);
 
        idEditText = (EditText) findViewById(R.id.input_id);
        pwdEditText = (EditText) findViewById(R.id.input_pwd);
 
        idEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int id, KeyEvent event) {
                if(id == EditorInfo.IME_ACTION_DONE || id == EditorInfo.IME_NULL){
                    return true;
                }
                return false;
            }
        });
 
        pwdEditText.setOnEditorActionListener(new TextView.OnEditorActionListener() {
            @Override
            public boolean onEditorAction(TextView v, int pwd, KeyEvent event) {
                if(pwd == EditorInfo.IME_ACTION_DONE || pwd == EditorInfo.IME_NULL){
                    // 함수 실행
                    return true;
                }
                return false;
            }
        });
 
        Button login_btn = (Button) findViewById(R.id.btn_login);
        Button sign_up_btn = (Button) findViewById(R.id.btn_sign_up);
 
        login_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                idText = idEditText.getText().toString();
                pwdText = pwdEditText.getText().toString();
                if(idText != "" && pwdText != ""){
                    // AsyncTask 를 통해 HttpURLConnection 수행.
                    try{
                        loginTask task = new loginTask();
                        task.execute("http://아이피/android_server/connectDB.php","m_id",idText,"m_pwd",pwdText);
                        String callBackValue = task.get();
 
                        AlertDialog.Builder builder = new AlertDialog.Builder(subActivity.this);
 
                        // fail
                        if(callBackValue.isEmpty() || callBackValue.equals("") || callBackValue == null || callBackValue.contains("Error")) {
                            builder.setTitle("로그인 실패").setMessage("입력한 회원 정보가 없습니다.");
                            AlertDialog alertDialog = builder.create();
                            alertDialog.show();
                        }
                        // success
                        else {
                            System.out.println(callBackValue);
                            try{
                                JSONObject jsonObject = new JSONObject(callBackValue);
                                JSONArray jsonArray = jsonObject.getJSONArray("member");
 
                                for(int i = 0 ; i<jsonArray.length(); i++){
                                    JSONObject item = jsonArray.getJSONObject(i);
 
                                    String id = item.getString("m_id");
                                    String password = item.getString("m_pwd");
                                    String phone = item.getString("m_phone");
                                    String address = item.getString("m_address");
                                    System.out.println("id : "+ id);
                                    System.out.println("password : "+ password);
                                    System.out.println("phone : "+ phone);
                                    System.out.println("address : "+ address);
                                }
                            }catch (JSONException e) {
                                System.out.println("json_error : "+ e);
                            }
                            /*
                            if(callBackValue == "1"){
                                builder.setTitle("로그인 성공").setMessage("메인 페이지로 이동합니다.");
                                AlertDialog alertDialog = builder.create();
                                alertDialog.show();
                            }else{
                                builder.setTitle("로그인 실패").setMessage("입력한 회원 정보가 없습니다.");
                                AlertDialog alertDialog = builder.create();
                                alertDialog.show();
                            }
                            */
                            // TODO : callBackValue 를 이용해서 코드기술
                        }
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    } catch (ExecutionException e) {
                        e.printStackTrace();
                    }
 
                }
                /*
                // 알림창
                AlertDialog.Builder builder = new AlertDialog.Builder(subActivity.this);
                builder.setTitle("알림창").setMessage("로그인 버튼 클릭");
 
                builder.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        //Toast.makeText(getApplicationContext(),"Ok click", Toast.LENGTH_SHORT).show();
                    }
                });
 
                builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        //Toast.makeText(getApplicationContext(),"Cancel click", Toast.LENGTH_SHORT).show();
                    }
                });
 
                AlertDialog alertDialog = builder.create();
                alertDialog.show();
                */
            }
        });
 
        sign_up_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 알림창
                AlertDialog.Builder builder = new AlertDialog.Builder(subActivity.this);
                builder.setTitle("알림창").setMessage("로그인 버튼 클릭");
 
                builder.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(getApplicationContext(),"OK click", Toast.LENGTH_SHORT).show();
                    }
                });
 
                builder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        Toast.makeText(getApplicationContext(),"Cancel click", Toast.LENGTH_SHORT).show();
                    }
                });
 
                AlertDialog alertDialog = builder.create();
                alertDialog.show();
            }
        });
    }
    private class loginTask extends AsyncTask<String,String,String>{
        @Override
        protected String doInBackground(String... params) {
            String serverURL = (String) params[0];
 
            String key = (String) params[1];
            String value = (String) params[2];
 
            String key2 = (String) params[3];
            String value2 = (String) params[4];
            String postParameters = key + "=" + value + "&" + key2 + "=" + value2;
            try{
                URL url = new URL(serverURL); // 주소가 저장된 변수를 이곳에 입력합니다.
 
                HttpURLConnection httpURLConnection = (HttpURLConnection) url.openConnection();
                httpURLConnection.setReadTimeout(5000); //5초안에 응답이 오지 않으면 예외가 발생합니다.
                httpURLConnection.setConnectTimeout(5000); //5초안에 연결이 안되면 예외가 발생합니다.
                httpURLConnection.setRequestMethod("POST"); //요청 방식을 POST로 합니다.
                httpURLConnection.connect();
 
                OutputStream outputStream = httpURLConnection.getOutputStream();
                outputStream.write(postParameters.getBytes("UTF-8")); //전송할 데이터가 저장된 변수를 이곳에 입력합니다.
                outputStream.flush();
                outputStream.close();
 
                // 응답을 읽습니다.
 
                int responseStatusCode = httpURLConnection.getResponseCode();
                InputStream inputStream;
                if (responseStatusCode == HttpURLConnection.HTTP_OK) {
                    // 정상적인 응답 데이터
                    inputStream = httpURLConnection.getInputStream();
                } else {
                    // 에러 발생
                    inputStream = httpURLConnection.getErrorStream();
                }
 
                InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "UTF-8");
                BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
 
                StringBuilder sb = new StringBuilder();
                String line = null;
 
                while ((line = bufferedReader.readLine()) != null) {
                    sb.append(line);
                }
 
                bufferedReader.close();
 
                return sb.toString();
 
            } catch (Exception e) {
                return new String("Error: " + e.getMessage());
            }
        }
 
        @Override
        protected void onPreExecute() {
            super.onPreExecute();
        }
 
        @Override
        protected void onPostExecute(String s) {
            super.onPostExecute(s);
            //System.out.println("결과값 : "+ s);
            /*
            mJsonString = s;
            showResult();
            */
        }
 
    }
 
}
 
 
  

[4.안드로이드 - activity_main.xml]

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
29
30
31
32
33
34
35
36
37
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="9">
    <Button
        android:id="@+id/login_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="로그인"
        android:textColor="#ffffff"
        android:textSize="40sp"
        android:background="#0066ff"
        android:gravity="center"
        android:layout_weight="3"/>
    <Button
        android:id="@+id/prevent_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="상품 예약"
        android:textColor="#ffffff"
        android:textSize="40sp"
        android:background="#ffcc33"
        android:gravity="center"
        android:layout_weight="3"/>
    <Button
        android:id="@+id/question_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="상담 문의"
        android:textColor="#ffffff"
        android:textSize="40sp"
        android:background="#66cc00"
        android:gravity="center"
        android:layout_weight="3"/>
</LinearLayout>
 
  
 

[5.안드로이드 - activity_sub.xml]

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
 
    <LinearLayout
        android:id="@+id/email_login_form"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="20sp"
        android:layout_marginLeft="20sp"
        android:gravity="center"
        android:orientation="vertical">
 
        <EditText
            android:id="@+id/input_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/user_id"
            android:inputType="textEmailAddress"
            android:maxLines="1"
            android:singleLine="true" />
 
        <EditText
            android:id="@+id/input_pwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/user_pwd"
            android:inputType="textPassword"
            android:maxLines="1"
            android:singleLine="true" />
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
 
            <Button
                android:id="@+id/btn_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_weight="1"
                android:text="@string/action_login"
                android:textStyle="bold" />
 
            <Button
                android:id="@+id/btn_sign_up"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_weight="1"
                android:text="@string/action_sign_up"
                android:textStyle="bold" />
        </LinearLayout>
 
    </LinearLayout>
</LinearLayout>
 
  

[6.conectDB.php]

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
<?php
 
    header('content-type: text/html; charset=utf-8'); 
    //MYSQL 접속 정보
    $db = mysqli_connect("서버주소","디비사용자","디비 비번","디비 이름");
    if(!$db){
        die("Error ".mysqli_connect_error());
    }
    //한글
    mysqli_set_charset($db, 'UTF8');
 
    $id = $_POST['m_id'];
    $pwd = $_POST['m_pwd'];
    $result_arr = array();
    $result = $db->query("SELECT * FROM member WHERE m_id='$id' AND m_pwd = '$pwd'");
    $num = $result->num_rows;
    if($num > 0){
        $low = $result->fetch_assoc();
        array_push($result_arr,$low);
        header('Content-Type: application/json; charset=utf8');
        echo json_encode(array("member"=>$result_arr));
    }else{
        echo false;
    }
 
    mysqli_close($db);
?>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
 http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs

[7.결과 화면]

'안드로이드' 카테고리의 다른 글

안드로이드 웹뷰 사용하기  (0) 2019.06.04
안드로이드 REST API 사용법  (0) 2019.06.03

+ Recent posts

티스토리툴바