ionic 프로젝트 처음분들

초보자 ionic app 와 php + Mysql 연동

ionic project

ionic + php + Mysql 연동 

ionic을 처음 시작하시는 분들을 위해서 이 페이지는 만들었습니다.

 

1. ionic과 php의 이해

ionic으로 login and register, profile 페이지 생성

php는  ionic으로 회원가입, 로그인, 회원 프로파일의 자료를 요청 받아서

MySql 에 연결해서 요청받은 값을 넘겨주고 JSON으로 받아서 ionic으로 넘겨는 역활을 합니다.

즉 ionic 으로 웹의 프로단을 구성하고 백단으로 php를 구성한다고 생각하시면 됩니다.

ionic 으로 앱을 만들 수 있으니가 값을 입력 받고 보여주는 부분을 만들고

실제 해당 자료를 데이타 베이스에서 가져오는 쪽을 php 로 만든다고 생각하시면 됩니다.

 

2. ionic 으로 프로그램하기 위해서 필요한 프로그램들 

: 즉 자신의 컴퓨터에 인스톨해야 하는 프로그램들

 - 웹서버 xampp

 1. npm 2. node.js  3. ionic  

 - 윈도계열 편집기 visual studio code 혹은 nodepad++ 또는 submit

개인 컴퓨터에 웹서버가 돌아가야 하기 때문에

윈도우 계열에서는 XAMPP 를 깔아야 합니다.

구글에서 xampp 라고 치시면 홈페이지가 바로 나올 겁니다.

XAMPP 디렉토리안에 htdocs 폴더 안에 임의 폴더를 만듭니다.

 

3. 프로젝트에 필요한 폴더 구조

저는 webapp 라는 폴더를 만들었고 그 안에 다시 폴더를 만듭니다.

개인적으로 ionproject 라는 폴더를 만들었습니다.

그리고 php 파일이 존재할 폴더를 만드는데 serve_api   폴더로 만듭니다.

이 폴더 serve_api 는 ionic 프로그램 초보이신분은 가능하면 똑 같이 만들어야 합니다.

두개의 php파일을 만들어야 하는데 파일명들은 config.php 와 file_aksi.php 입니다.

윈도우 계열에서 텍스트 파일을 만드는데 확장자가 php로 만드시면 됩니다.

그리고 편집기로 config.php 를 열어서 아래 소스를 붙여 넣기 하시면 됩니다.

 

4. PHP 파일 소스코드

###config.php 소스 입니다. ###file_aksi.php 소스입니다.

<?php

 

define('DB_NAME', 'jkwork');

define('DB_USER', 'root');

define('DB_PASSWORD', '1234');

define('DB_HOST', 'localhost');

 

$connect = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);

if (!$connect){

    die("Error in connection" . mysqli_connect_error()) ;

 } 

?>

 

###config.php 소스 입니다. ###file_aksi.php 소스입니다.

<?php

//file_aksi.php

header('Access-Control-Allow-Origin: *');

header("Access-Control-Allow-Credentials: true");

header("Access-Control-Allow-Methods: POST, GET, OPTIONS");

header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With");

header("Content-Type: application/json; Charset=utf-8");

 

include "config.php";

 

$postjson = json_decode(file_get_contents('php://input'), true);

 

if($postjson['aksi']=="add_register"){

    // $qry = "INSERT INTO master_user (full_name, phone_number, username, password) VALUES('$postjson[full_name]','$postjson[phone_number]','$postjson[username]','$postjson[password]'

    // )";

$query=mysqli_query($connect, "SELECT * FROM master_user WHERE username = '$postjson[username]'");

    $check = mysqli_num_rows($query);

if($check>0){

//

$result = json_encode(array('success'=>false, 'msg'=>'error, It is already registered Username.'));

}

else

{

$query=mysqli_query($connect, "INSERT INTO master_user SET

   full_name = '$postjson[full_name]',

   phone_number = '$postjson[phone_number]',

   username = '$postjson[username]',

   userpasswd = '$postjson[userpasswd]'    

");

 

if($query) $result = json_encode(array('success'=>true));

else $result = json_encode(array('success'=>false, 'msg'=>'error, please try again'));

 

}

 

    //if($query) $result = json_encode(array('success'=>true));

    //else $result = json_encode(array('success'=>false, 'msg'=>'error, please try again'));

 

    echo $result;

}

 

elseif($postjson['aksi']=="login"){

    $query=mysqli_query($connect, "SELECT * FROM master_user WHERE username = '$postjson[username]' AND  userpasswd = '$postjson[userpasswd]'");

    $check = mysqli_num_rows($query);

 

    if($check>0){

        $data = mysqli_fetch_array($query);

        $datauser = array(

            'user_id' => $data['user_id'],

            'full_name' => $data['full_name'],

            'phone_number' => $data['phone_number'],

            'username' => $data['username'],

            'userpasswd' => $data['userpasswd']

        );

        

        if($query) $result = json_encode(array('success'=>true, 'result'=>$datauser));

        else $result = json_encode(array('success'=>false, 'msg'=>'error, please try again'));

 

    }else{

        $result = json_encode(array('success'=>false, 'msg'=>'unregister account'));

    }

    echo $result;

}

 

elseif($postjson['aksi']=="profile"){

 

    $profile = array();

    $query=mysqli_fetch_array(mysqli_query($connect, "SELECT * FROM master_user WHERE user_id = '$postjson[user_id]'"));

    //$check = mysqli_num_rows($query);

 

    //if($check>0){

        //$data = mysqli_fetch_array($query);

        $profile[] = array(

         'user_id' => $query['user_id'],

         'full_name' => $query['full_name'],

         'phone_number' => $query['phone_number'],

         'username' => $query['username'],

         'userpasswd' => $query['userpasswd']

     );

 

     if($query) $result = json_encode(array('success'=>true, 'profiles'=>$profile));

     else $result = json_encode(array('success'=>false));

 

    //}else{

    //    $result = json_encode(array('success'=>false, 'msg'=>'error,unregister account'));

    //}

    echo $result;

}

 

elseif($postjson['aksi']=="update_profile"){

 

    // $profile = array();

    // $query=mysqli_fetch_array(mysqli_query($connect, "SELECT * FROM master_user WHERE user_id = '$postjson[user_id]'"));

    // //$check = mysqli_num_rows($query);

 

    // //if($check>0){

    //     //$data = mysqli_fetch_array($query);

    //     $profile[] = array(

    //      'user_id' => $query['user_id'],

    //      'full_name' => $query['full_name'],

    //      'phone_number' => $query['phone_number'],

    //      'username' => $query['username'],

    //      'userpasswd' => $query['userpasswd']

    //  );

     $query =  mysqli_query($connect, "UPDATE master_user SET

               full_name = '$postjson[full_name]',

               phone_number = '$postjson[phone_number]',

   username = '$postjson[username]',

   userpasswd = '$postjson[userpasswd]'

               WHERE user_id = '$postjson[user_id]'");  

     if($query) $result = json_encode(array('success'=>true));

     else $result = json_encode(array('success'=>false));

 

    //}else{

    //    $result = json_encode(array('success'=>false, 'msg'=>'error,unregister account'));

    //}

    echo $result;

}

?>

 

###MySql 데이타베이스명은 jkwork 로 했으며 테이블명은  master_user 입니다.

테이블 구조입니다. xampp를 인스톨하셨으면 브라우즈 주소창에서 localhost:/phpMyadmin/ 이라고

치시면 데이타베이스 어드민 페이지가 열립니다. 거기서 데이타베이스와 테이블을 만드시면 됩니다.

 

 

### 다음은 ionic 으로 프로젝트를 만들고 페이지를 만들어서 소스 코드를 넣어 주시면 됩니다.

 

이 프로젝트에서는 프로젝트를 만드는 것이 중요한데

제가 만든 것을 기준으로 이야기하면 

예를 들어서 c:\xampp\htdocs 가 존재한다면

즉 xampp 라는 프로그램을 인스톨했다면 틀림없이 있습니다.

그러면 도스 명령어 창을 열어서 htdocs 라는 폴더로 이동해서

먼저 ionproject 라는 폴더를 만드시고 

ionproject 폴더 안에서 serve_api 라는 폴더를 만들고 

ionic 프로그램 폴더를 만듭니다.

이 ionic 프로그램 폴더는 직접 만드는 것이 아니라 ionic 명령어로 폴더를 만드는 것입니다.

전체적으로 폴더 구성을 아래 그림과 같습니다.

c:\xampp

    |

    |-- htdocs

          |

          |-----webapp

                  |

                  |----- ionproject

                            |

                            |

                            |----- ionic 프로젝트

                            |----- serve_api

   

   

htdocs\webapp\ionproject\프로젝트만들 위치...

즉 ionproject 폴더 안에서 ionic 프로젝트를 만들어야 합니다.

프로젝트를 만드는 명령어는 다음과 같습니다.

윈도우계열에서는 명령어 창을 열어서 ionproject 폴더 위치에서 다음 명령을 입력합니다.

형식은 : ionic start 프로젝트명 blank --type=angular 

\>ionic start MyFirstApp blank --type=angular 이렇게 타이핑하시고 엔터 치시면

프로젝트 폴더가 만들어지고 그 안에 기본적인 폴더와 파일이 생성됩니다.

ionic 에 대한 자세한 설명은 참조하시면 되겠습니다.

사이트 : https://ionicframework.com/docs/cli/commands/cordova-build

사이트 : https://ionicframework.com/docs/v3/cli/projects.html

그리고 이 예제 소스는 ionic 버전 3 으로 만들었습니다. 그리고 테스트했습니다.

전체적인 소스는 git 사이트에 넣어 두었습니다. 

여기 가시면 ionic 소스 코드가 있습니다.

https://github.com/lee0508/ionic_login_register_MySql_PHP.git

 

그리고 ionic 실행 방법은 프로젝트 폴더 안에서 ionic serve 라고 치면 웹 브라우즈로 보이게 됩니다.

이때도 도스 명령어 창을 열어서 해당 프로젝트 폴더로 가서 명령어를 입력하셔야 합니다.

프로젝트 완성 이미지

 

이상입니다. 하시다가 않되시면 댓글 주세요. 감사합니다.