@sillysnakejake

프로그래밍 놓지 말기 위해서 퇴근 하고 해야지! 하는 마음가짐으로

간단한 리마인드 프로젝트 입니다.

야근을 해서 그런지 프로젝트 생성밖에 한 게 없는데, 벌써 자야할 시간이 다가왔네요.

추후 수정해서 업데이트 하도록 하겠습니다. 아디오스...

안드로이드 스튜디오에서 제공하는 기본 도구들만 사용하다 보면
프로그램이 너무 밍밍하고 심심하시죠?
오늘은 나만의 이미지로 customize를 해볼 거예요.
Here we go!

먼저 위 사진과 같이, 안드로이드 스튜디오 프로젝트를 하나 생성합니다.
activity_main.xml에 들어가셔서 design 탭을 누르시면
Hello World!라는 게 기본으로 뜰 텐데 클릭해서 삭제해줍니다.

그다음! 작업하셔야 할게
이제 이미지로 사용할 이미지들을
경로에 배치하는 것입니다.
AndroidProjects가 있는 폴더를 찾으셔서
만드신 프로젝트 폴더 -> app -> src -> main -> res -> drawable 폴더에
이미지들을 옮겨줍니다!
기왕이면 이름은 영어로 하시는 게 좋습니다.

MainActivity.java에 가셔서
빨간 네모친 부분처럼 RelativeLayout으로 수정해주세요.

다시! activity_main.xml로 돌아오셔서 design 탭을 누르시면
Palette에서 ImageView와 ImageButton을 찾습니다.
드래그하셔서 화면으로 옮겨주세요.

위에서 언급했던 경로에 이미지를 잘 옮겨놓으셨다면
이렇게 잘 뜰 거예요! 클릭해서 사용하실 이미지를 선택하시면 됩니다.

위 사진과 같이 적당한 위치로 옮겨주시면 됩니다!
병아리 사진은 ImageView를 사용하였고
아래 두 개 SIGN UP과 SIGN IN은 ImageButton을 사용하였습니다.
ImageButton은 말 그대로 버튼이기에
그냥 Button을 끌어다 놓은 것과 같은 기능들을 지원합니다.
새 페이지 이동, 값 갱신 등 OnClick 기능을 이용해서 할 수 있는 것들이 많겠지요?

실행했을 때의 모습입니다!
칙칙한 회색 백그라운드에 까만 버튼보다는 훨씬 보기 좋죠?ㅎㅎ

전체적인 구조는 Android Studio <=> PHP <=> MySQL입니다.

[A. Andorid Studio로 값을 입력받아

PHP를 통해 MySQL에 값을 넣어보자(회원가입)]

Step1. Database Design(DB 및 테이블 생성)

Autoset 실행 후, 127.0.0.1 -> PHPMyAdmin클릭해서

새로운 Database를 만들고 Table을 생성합니다.

저는 Database의 이름을 android_test, Table의 이름을 custom_info라고 했습니다.

컬럼은 2개만 생성했습니다. id를 받아올 u_id, pw를 받아올 u_pw로 설정했고

모두 string값이므로 varchar 선택 후 길이/값은 30으로 지정하였습니다.

데이터 종류는 utf8_general_ci로 설정!

Step2. PHP Server Programming

Atom을 실행시켜서 다음과 같이 작성합니다.

<?php

$con=mysqli_connect("127.0.0.1","root","db비번","android_test");

mysqli_set_charset($con,"utf8");

if (mysqli_connect_errno($con))

{

   echo "Failed to connect to MySQL: " . mysqli_connect_error();

}

$userid = $_POST['Id'];

$userpw = $_POST['Pw'];

$result = mysqli_query($con,"insert into custom_info (u_id,u_pw) values ('$userid','$userpw')");

  if($result){

    echo 'success';

  }

  else{

    echo 'failure';

  }

mysqli_close($con);

?>

Step1에서 만들었던 DB의 내용을 작성해주시고

Android Studio를 통해 받아올 값을

쿼리로 이용해서

테이블에 넣는 작업까지 합니다.

Step3. Android Studio에서 값 입력하기

전 프로젝트 이름을 signupandin으로 하였습니다.

기본적으로 MainAcitivity클래스와 activity_main.xml이 생성됩니다.

activity_main.xml -> Design클릭해서

도구상자를 이용해서 다음과 같이 만들어줍니다.

SIGN IN과 SIGN UP을 눌렀을 때, 각자 다른화면이 나와야겠죠?

총 2개의 화면이 추가적으로 필요하므로

클래스2개와 layout resource파일

2개를 추가적으로 생성합니다.

저는 위 사진과 같이 MenuPage, SignupPage 클래스 2개와

activity_menu.xml, acitivity_signup.xml 2개를 생성하였습니다.

먼저 MySQL에 값을 넣는걸

테스트 할 것이므로

Sign up부터 하겠습니다.

SignupPage클래스에다가

다음과 같은 코드를 추가합니다.

public class SignupPage extends Activity {
    private EditText editTextId;
    private EditText editTextPw;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_signup);

        editTextId = (EditText) findViewById(R.id.new_id);
        editTextPw = (EditText) findViewById(R.id.new_pw);

    }
    public void insert(View view) {
        String Id = editTextId.getText().toString();
        String Pw = editTextPw.getText().toString();

        insertoToDatabase(Id, Pw);
    }
    private void insertoToDatabase(String Id, String Pw) {
        class InsertData extends AsyncTask<String, Void, String> {
            ProgressDialog loading;
            @Override
            protected void onPreExecute() {
                super.onPreExecute();
                loading = ProgressDialog.show(SignupPage.this, "Please Wait", null, true, true);
            }
            @Override
            protected void onPostExecute(String s) {
                super.onPostExecute(s);
                loading.dismiss();
                Toast.makeText(getApplicationContext(), s, Toast.LENGTH_LONG).show();
            }
            @Override
            protected String doInBackground(String... params) {

                try {
                    String Id = (String) params[0];
                    String Pw = (String) params[1];

                    String link = "http://본인PC IP주소/post.php";
                    String data = URLEncoder.encode("Id", "UTF-8") + "=" + URLEncoder.encode(Id, "UTF-8");
                    data += "&" + URLEncoder.encode("Pw", "UTF-8") + "=" + URLEncoder.encode(Pw, "UTF-8");

                    URL url = new URL(link);
                    URLConnection conn = url.openConnection();

                    conn.setDoOutput(true);
                    OutputStreamWriter wr = new OutputStreamWriter(conn.getOutputStream());

                    wr.write(data);
                    wr.flush();

                    BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));

                    StringBuilder sb = new StringBuilder();
                    String line = null;

                    // Read Server Response
                    while ((line = reader.readLine()) != null) {
                        sb.append(line);
                        break;
                    }
                    return sb.toString();
                } catch (Exception e) {
                    return new String("Exception: " + e.getMessage());
                }
            }
        }
        InsertData task = new InsertData();
        task.execute(Id, Pw);
    }
}

activity_signup.xml을 더블클릭하셔서 design탭을 누르신 후 아래 사진과 같이 꾸며주세요.

디자인 다 하신 후, Text탭을 눌렀을때의 코드입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/new_id"
        android:hint="your@id.com" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/new_pw"
        android:hint="password" />

    <Button
        android:text="SUBMIT"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn_submit"
        android:onClick="insert"/>
</LinearLayout>

이제 메인 화면에서 SIGN UP버튼을 눌렀을 때 이 페이지로 넘어가게 해야겠죠?
activity_main.xml -> Text 클릭 후, SIGN UP 버튼에 해당하는 속성을

<Button
    android:text="SIGN UP"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/btn_signup"
    android:layout_below="@+id/btn_signin"
    android:layout_centerHorizontal="true"
    android:onClick="CliSignUp"/>


맨 마지막에 onClick을 추가해주세요.
그리고 MainActivity.java클래스 가셔서
OnCreate()함수 밑에 다음과 같이 추가해서 이어주세요.


public void CliSignUp(View view)
{
    Intent intent = new Intent(this, SignupPage.class);
    startActivity(intent);
}


그 다음에!
AndroidManifest.xml에 가셔서
다음과같이 Activity를 생성했음을 추가합니다.



<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.kyb24.singupandin">

    <uses-permission android:name="android.permission.INTERNET"/>
    
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".SignupPage"/>
        <activity android:name=".MenuPage"/>
    </application>
</manifest>

자! 이제 실행시켜서
확인해 보겠습니다.
SIGN UP버튼-> ID : jake / PW :1234 입력 -> SUBMIT버튼 클릭

PHPMyAdmin에서 위 사진과 같이
값이 아주 잘 전달되셨음을 확인 할 수 있습니다.
(밑에 1 / 1은 그냥 혹시 몰라서 두번해봤습니다ㅎㅎ)


[B. DB에 있는 값을 비교해서 조건이 맞으면 로그인으로!(Sign in)]
Step1. 로그인 했을 때, 이동할 화면을 꾸미자
activity_menu.xml로 이동 -> Design
눌러서 아래 사진과 같이 꾸며주세요.

그리고 MenuPage.java클래스에 다음과 같이 써주세요.


package com.example.kyb24.singupandin;

import android.app.Activity;
import android.os.Bundle;
import android.widget.EditText;

public class MenuPage extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu);
    }
}

이제 MainAcitivty.java클래스에 다음과 같이 써주시면 됩니다.

package com.example.kyb24.singupandin;

import android.app.ProgressDialog;
import android.os.Looper;
import android.os.StrictMode;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.content.Intent;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import android.widget.ViewFlipper;

import java.util.ArrayList;
import java.util.List;
import org.apache.http.HttpResponse;
import org.apache.http.NameValuePair;
import org.apache.http.client.HttpClient;
import org.apache.http.client.ResponseHandler;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.impl.client.BasicResponseHandler;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.message.BasicNameValuePair;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    ViewFlipper Vf;
    Button BtnSignIn, BtnSignUp;
    EditText inputID, inputPW;
    HttpPost httppost;
    StringBuffer buffer;
    HttpResponse response;
    HttpClient httpclient;
    List<NameValuePair> nameValuePairs;
    ProgressDialog dialog = null;
    TextView tv;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(policy);

        BtnSignUp = (Button)findViewById(R.id.btn_signup);
        BtnSignIn = (Button)findViewById(R.id.btn_signin);
        inputID = (EditText)findViewById(R.id.user_id);
        inputPW = (EditText)findViewById(R.id.user_pw);
        tv = (TextView)findViewById(R.id.textView2);

        BtnSignIn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog = ProgressDialog.show(MainActivity.this, "",
                        "Validating user...", true);
                new Thread(new Runnable() {
                    public void run() {
                        login();
                    }
                }).start();
            }
        });
    }

    void login() {
        try {
            httpclient = new DefaultHttpClient();
            httppost = new HttpPost("http://본인 PC IP주소/login.php");
            nameValuePairs = new ArrayList<NameValuePair>(2);
            nameValuePairs.add(new BasicNameValuePair("username", inputID.getText().toString()));
            nameValuePairs.add(new BasicNameValuePair("password", inputPW.getText().toString()));
            httppost.setEntity(new UrlEncodedFormEntity(nameValuePairs));
            response = httpclient.execute(httppost);
            ResponseHandler<String> responseHandler = new BasicResponseHandler();
            final String response = httpclient.execute(httppost, responseHandler);
            System.out.println("Response : " + response);
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    tv.setText("Response from PHP : " + response);
                    dialog.dismiss();
                }
            });

            if (response.equalsIgnoreCase("User Found")) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Toast.makeText(MainActivity.this, "Login Success", Toast.LENGTH_SHORT).show();
                    }
                });

                startActivity((new Intent(MainActivity.this, MenuPage.class)));
                finish();
            } else {
                Toast.makeText(MainActivity.this, "Login Fail", Toast.LENGTH_SHORT).show();
            }
        }
        catch(Exception e)
        {
            dialog.dismiss();
            System.out.println("Exception : " + e.getMessage());
        }
    }

    public void CliSignUp(View view)
    {
        Intent intent = new Intent(this, SignupPage.class);
        startActivity(intent);
    }
}



혹시 몰라서, activity_main.xml 코드 전체 내용도 첨부합니다



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.kyb24.singupandin.MainActivity">

    <TextView
        android:text="ID"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/id_view"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_alignBottom="@+id/user_id"
        android:layout_alignEnd="@+id/pw_view" />

    <TextView
        android:text="PW"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/pw_view"
        android:layout_below="@+id/id_view"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/user_pw"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="42dp"
        android:hint="password" />

    <Button
        android:text="SIGN IN"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn_signin"
        android:layout_below="@+id/user_pw"
        android:layout_alignParentStart="true"
        android:layout_marginTop="18dp"/>

    <Button
        android:text="SIGN UP"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn_signup"
        android:layout_below="@+id/btn_signin"
        android:layout_centerHorizontal="true"
        android:onClick="CliSignUp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/user_id"
        android:layout_alignParentTop="true"
        android:layout_alignStart="@+id/user_pw"
        android:hint="email@input.com" />

    <TextView
        android:text="TextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toStartOf="@+id/user_pw"
        android:id="@+id/textView2"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

Step2. PHP 서버짜기


<?php
  $connect = @mysql_connect("localhost","root","db비번") or die("error");
  $dbname = "android_test(db이름)";
  $dbconn = mysql_select_db($dbname,$connect);

 $username = $_POST['username'];
    $query_search = "select * from custom_info where u_id = '".$username."' AND u_pw = '".$password. "'";
    $password = $_POST['password'];
    $query_exec = mysql_query($query_search) or die(mysql_error());
        echo "User Found";
    $rows = mysql_num_rows($query_exec);

    if($rows == 0) {
        echo "No Such User Found";
    }
    else  {
    }
?>

저장을 하신 뒤!
안드로이드 스튜디오에서 실행 후,
메인메뉴에서 ID : jake / PW : 1234
혹은 ID : 1 / PW : 1 을 입력하신 후
SIGN IN버튼을 누르시면 WELCOME!이라는
페이지로 잘 넘어가는걸 확인 하실 수 있습니다.
(A단계에서 SIGN UP을 이미 하셨으므로!
조건을 만족하지 못하면
Login Fail이 뜨면서 화면이동이 안됩니다.)