안녕하세요, 데브입니다.
4편은 그동안 만든 서버와 데이터베이스를 가지고 기능을 구현해 보겠습니다.
우선 안드로이드 스튜디오를 열어보겠습니다.
그럼 다음과 같은 화면이 뜨는데 상단에 있는 Start a new Android Studio Project 를 클릭합니다.
그럼 다음과 같은 화면이 뜨는데 Empty Project 를 선택 후 Next 를 클릭합니다.
이제 프로젝트명을 설정해야 합니다 저는 LoginRegisterExample 으로 설정하겠습니다. 언어는 Java 로 선택 후 Next 를 클릭합니다.
그럼 이러한 화면이 나옵니다.
(위치는 app -> res -> layout 순으로 클릭하시면 됩니다.)
만약 이러한 화면이 나온다면 밑에 Text 를 클릭하시면 나옵니다.
이제 이곳에 xml 을 입력해 보겠습니다. 코드는 다음과 같습니다.
<activity_login.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 60 61 | <?xml version="1.0" encoding="utf-8"?> android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/bg_register" android:gravity="center" android:orientation="vertical" android:padding="10dp" > <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:orientation="vertical" android:paddingLeft="20dp" android:paddingRight="20dp"> <EditText android:id="@+id/et_id" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:background="@color/input_register_bg" android:hint="@string/hint_id" android:inputType="textCapWords" android:padding="10dp" android:textColor="@color/input_register" android:textColorHint="@color/input_register_hint" /> <EditText android:id="@+id/et_pass" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:background="@color/input_register_bg" android:hint="@string/hint_password" android:inputType="textEmailAddress" android:padding="10dp" android:textColor="@color/input_register" android:textColorHint="@color/input_register_hint" /> <Button android:id="@+id/btn_login" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dip" android:background="#ea4c88" android:text="@string/btn_login" android:textColor="@color/white" /> <Button android:id="@+id/btn_register" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="20dip" android:background="#ea4c88" android:text="@string/btn_register" android:textColor="@color/white" /> </LinearLayout> </LinearLayout> |
이제 이 화면에 스타일을 추가해보겠습니다. 스타일은 color.xml 에서 추가해 주시면 됩니다.
(경로는 app -> res -> values 입니다)
아래 코드를 추가해 줍니다.
<style.xml>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="bg_login">#26ae90</color> <color name="bg_register">#26ae90</color> <color name="bg_main">#428bca</color> <color name="white">#ffffff</color> <color name="input_login">#222222</color> <color name="input_login_hint">#999999</color> <color name="input_register">#222222</color> <color name="input_register_bg">#ffffff</color> <color name="input_register_hint">#999999</color> <color name="btn_login">#26ae90</color> <color name="btn_login_bg">#eceef1</color> <color name="lbl_name">#333333</color> <color name="btn_logut_bg">#ff6861</color> </resources> |
이제 필요한 글자를 넣어보겠습니다. 글자는 xml 에 직접 넣는 것보나 string.xml 에 추가해 주는것이 추후에 변경할때 일일이 찾지 않고 string.xml 에서 변경을 해주면 됩니다. 또한 크기도 줄일 수 있습니다.
<string.xml>
1 2 3 4 5 6 7 8 9 10 11 12 | <resources> <string name="app_name">PDOLogin</string> <string name="hint_id">ID를 입력하세요</string> <string name="hint_password">패스워드를 입력하세요</string> <string name="hint_name">성명을 입력하세요</string> <string name="hint_mobileNO">휴대폰번호를 입력하세요</string> <string name="hint_email">이메일을 입력하세요</string> <string name="btn_login">로그인</string> <string name="btn_register">회원가입</string> <string name="btn_logout">로그아웃</string> </resources> |
이제 이 추가한 string 파일을 android:text="@string/strig 아이디 이렇게 추가 해주시면 됩니다.
그럼 다음과 같은 디자인이 나올 것입니다.
이제 java 파일을 추가해 주겠습니다.
파일 이름은 RegisterRequest 로 하겠습니다. 여기서는 회원가입 화면에서 입력받은 값을 요청합니다.
아래 코드를 추가해 줍니다.
<RegisterRequest.java>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | public class RegisterRequest extends StringRequest { //서버 URL 설정(php 파일 연동) private Map<String, String>map; //private Map<String, String>parameters; public RegisterRequest(String userID, String userPassword, String userName, int userAge, Response.Listener<String> listener) { map = new HashMap<>(); map.put("userPassword", userPassword); map.put("userAge", userAge + ""); } @Override protected Map<String, String>getParams() throws AuthFailureError { return map; } } |
이때 주의할점은 데이터베이스에서 설정한 컬럼명과 닷홈 호스트 주소 및 php 파일명은 똑같이 철자 하나라도 같게 하셔야 합니다. 그렇지 않으면 오류가 납니다. 치지 말고 복붙을 권장합니다.
파일을 하나 더 만들어 주겠습니다 파일명은 RegisterActivity로 하겠습니다.
<RegisterActivity.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 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 | public class RegisterActivity extends AppCompatActivity { private EditText et_id, et_pass, et_name, et_age; private Button btn_register; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_register ); //아이디값 찾아주기 et_id = findViewById( R.id.et_id ); et_pass = findViewById( R.id.et_pass ); et_name = findViewById( R.id.et_name ); et_age = findViewById( R.id.et_age ); //회원가입 버튼 클릭 시 수행 btn_register = findViewById( R.id.btn_register ); btn_register.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View view) { String userID = et_id.getText().toString(); String userPass = et_id.getText().toString(); String userName = et_name.getText().toString(); int userAge = Integer.parseInt( et_age.getText().toString() ); Response.Listener<String> responseListener = new Response.Listener<String>() { @Override public void onResponse(String response) { try { JSONObject jsonObject = new JSONObject( response ); boolean success = jsonObject.getBoolean( "success" ); //회원가입 성공시 if(success) { Toast.makeText( getApplicationContext(), "성공", Toast.LENGTH_SHORT ).show(); Intent intent = new Intent( RegisterActivity.this, LoginActivity.class ); startActivity( intent ); //회원가입 실패시 } else { Toast.makeText( getApplicationContext(), "실패", Toast.LENGTH_SHORT ).show(); return; } } catch (JSONException e) { e.printStackTrace(); } } }; //서버로 Volley를 이용해서 요청 RegisterRequest registerRequest = new RegisterRequest( userID, userPass, userName, userAge, responseListener); RequestQueue queue = Volley.newRequestQueue( RegisterActivity.this ); queue.add( registerRequest ); } }); } } |
파일을 하나 더 만들어 보겠습니다 파일명은 LoginRequest 로 하겠습니다.
아래 코드를 추가해 줍니다.
<LoginRequst.java>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | public class LoginRequest extends StringRequest { //서버 URL 설정(php 파일 연동) private Map<String, String>map; public LoginRequest(String userID, String userPassword, Response.Listener<String> listener) { map = new HashMap<>(); map.put("userPassword", userPassword); } @Override protected Map<String, String>getParams() throws AuthFailureError { return map; } } |
이곳 역시 데이터베이스에서 설정한 컬럼명과 닷홈 호스트 주소 및 php 파일명은 똑같이 철자 하나라도 같게 하셔야 합니다.
그렇지 않으면 오류가 납니다. 치지 말고 복붙을 권장합니다.
파일을 하나 더 만들어 보겠습니다 파일명은 LoginActivity 로 하겠습니다.
아래 코드를 추가해 줍니다.
<LoginActivity.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 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 | public class LoginActivity extends AppCompatActivity { private EditText et_id, et_pass; private Button btn_login, btn_register; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate( savedInstanceState ); setContentView( R.layout.activity_login ); et_id = findViewById( R.id.et_id ); et_pass = findViewById( R.id.et_pass ); btn_register = findViewById( R.id.btn_register ); btn_register.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent( LoginActivity.this, RegisterActivity.class ); startActivity( intent ); } }); btn_login = findViewById( R.id.btn_login ); btn_login.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View view) { String userID = et_id.getText().toString(); String userPass = et_pass.getText().toString(); Response.Listener<String> responseListener = new Response.Listener<String>() { @Override public void onResponse(String response) { try { JSONObject jsonObject = new JSONObject( response ); boolean success = jsonObject.getBoolean( "success" ); if(success) {//로그인 성공시 String userID = jsonObject.getString( "userID" ); String userPass = jsonObject.getString( "userPassword" ); String userName = jsonObject.getString( "userName" ); String userAge = jsonObject.getString( "userAge" ); Toast.makeText( getApplicationContext(), "로그인 성공", Toast.LENGTH_SHORT ).show(); Intent intent = new Intent( LoginActivity.this, MainActivity.class ); intent.putExtra( "userID", userID ); intent.putExtra( "userPass", userPass ); intent.putExtra( "userName", userName ); intent.putExtra( "userAge", userAge ); startActivity( intent ); } else {//로그인 실패시 Toast.makeText( getApplicationContext(), "로그인 실패", Toast.LENGTH_SHORT ).show(); return; } } catch (JSONException e) { e.printStackTrace(); } } }; LoginRequest loginRequest = new LoginRequest( userID, userPass, responseListener ); RequestQueue queue = Volley.newRequestQueue( LoginActivity.this ); queue.add( loginRequest ); } }); } } |
이제 activity_main.xml 로 이동합니다
activity_main 에서는 로그인 성공 시 메인 화면을 만들어 보겠습니다.
아래 코드를 추가해 줍니다.
<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 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 | <?xml version="1.0" encoding="utf-8"?> android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@color/bg_register" android:gravity="center" android:orientation="vertical" android:padding="10dp" > <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="Hongdroid App" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="아이디" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/tv_id" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="TextView" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="비번" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/tv_pass" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="TextView" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="이름" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/tv_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="TextView" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/textView8" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="나이" android:gravity="center" android:textSize="30dp"/> <TextView android:id="@+id/tv_age" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="TextView" android:gravity="center" android:textSize="30dp"/> </LinearLayout> |
TextView 의 역할은 데이터베이스에 있는 회원정보를 메인 화면에 뿌려주는 역할을 담당합니다.
이제 MainActivity 로 이동합니다
MainActivity 에 아래 코드를 추가해 줍니다.
<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 26 27 28 29 30 31 | public class MainActivity extends AppCompatActivity { private TextView tv_id, tv_pass, tv_name, tv_age; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate( savedInstanceState ); setContentView(R.layout.activity_main); tv_id = findViewById(R.id.tv_id); tv_pass = findViewById(R.id.tv_pass); tv_name = findViewById(R.id.tv_name); tv_age = findViewById(R.id.tv_age); Intent intent = getIntent(); String userID = intent.getStringExtra("userID"); String userPass = intent.getStringExtra("userPass"); String userName = intent.getStringExtra("userName"); String userAge = intent.getStringExtra("userAge"); tv_id.setText(userID); tv_pass.setText(userPass); tv_name.setText(userName); tv_age.setText(userAge); } } |
이제 개발이 완료 되었습니다. 실행시켜보겠습니다. 빌드는 상단에 플레이 버튼을 클릭합니다.
빌드를 하면 기본적으로 AVD가 제공됩니다. AVD는 가상 디바이스로서 여기서 테스트를 할 수 있습니다.
빌드를 하면 다음과 같은 디바이스 화면이 나올 것입니다. 이제 여기서 회원가입 버튼을 눌러보겠습니다.
이제 여기서 회원 정보를 입력 후 회원가입 버튼을 클릭합니다.
가입이 완료 되면 성공 이라는 토스트를 볼 수 있습니다. 이제 여기서 데이터베이스를 확인해 보겠습니다.
방금 입력한 정보가 잘 들어갔습니다. 이제 이 정보를 가지고 로그인을 해보겠습니다.
로그인 성공시 로그인 성공 이라는 토스트 메시지와 함께
다음과 같이 메인화면에 회원정보가 출력되면 로그인이 성공적으로 진행된 것입니다.
이제 로그인 및 회원가입 기능이 모두 완료 되었습니다.
수고하셨습니다^^
다음시간에는 아이디 중복확인, 스피너, 라디오버튼의 값을 저장하는 방법에 대해 알아보겠습니다.