MySQL로 회원가입, 로그인 구현 (1)

참고 강의 - https://www.youtube.com/watch?v=nGMWcFZJ-XQ

+ 여기서는 php 로 함

 

파이어베이스가 아닌 MySQL 로 회원가입과 로그인을 구현해볼 것이다

일단 서버를 설치하기 위해서 XAMPP을 다운로드 한다

https://www.apachefriends.org/

XAMPP Installers and Downloads for Apache Friends

 

맥북에서 설치하려면 경고 문구가 뜨면서 처음에 안 열리는데 , 시스템 설정-> 개인정보 보호 및 보안 -> 보안 -> 다음에서 응용 프로그램 허용에서 허용해주면 됩니다

 

 

설치하고나서 Manage Servers 에 들어가 MySQL 을 start 눌러서 실행시켜준다

그리고 http://localhost/phpmyadmin  에 들어가서 보면 php admin 대시보드 창으로 이동된다 -> 서버가 잘 작동된다는 의미

 

 

 

여기서 데이터베이스를 생성할 수 있고 이 안에서 우리가 필요한 유저정보를 저장하기 위한 테이블을 생성하면 됨

맨 왼쪽에 '새로운' 누르고 데이터베이스를 생성한다. 나는 members 라고 만들었다

 

그리고 새로운 테이블을 만드는데, 이번에 user_table 이라는 이름의 테이블을 만들어보겠다. column은 일단 4로 지정.

 

첫번째로 만들어준 칼럼 user_id 는 사용자를 식별하는 특별한 id고, 보통 숫자이므로 int형이다

표에 A_I라고 있는데, 이는 회원가입으로 유저가 늘어날때마다 자동으로 Id 넘버를 증가시켜주는 것이다

그러니까 체크 ㄱㄱ

체크하면 인덱스 부분이 PRIMARY 라고 자동으로 되는데, 이는 각 row의 고유한 아이디로 지정한다는 의미 (중복되지 않는 값)

 

두번째 칼럼 user_name 은 데이터타입 varchar인데 varchar은 variable character의 줄임말로 데이터 크기가 정해지지 않은 데이터를 의미한다. 그래서 사람의 이름이나 주소는 각각 다르므로 varchar 로 지정하는게 좋음

 

세번째 칼럼 user_email도 위와 동일한 이유로 varchar, 길이는 100으로 지정해줍니다

 

네번째 칼럼 user_password는 text 데이터타입으로 지정하고 길이는 100으로 한다

 

 

하고 저장을 누르면 테이블 생성이 된다

 

처음 유저가 사용자 등록을 할 때 name, email, password 를 입력하고 그 정보가 방금 생성한 user_table에 저장이 되고, 이때 유니크한 user_id 도 자동할당된다.

 

 

보이는 경로에 api_members라는 폴더를 새로 생성해준다.

 

그리고 안드로이드 스튜디오에 돌아와서 lib에 api라는 새로운 디렉토리를 만들고 그 안에 api.dart 파일을 새로 생성해준다

API 라는 클래스를 만들고, static const 타입의 hostConnect라는 변수를 만들어서 여기에 IPV4 라는 주소를 할당해 줄것이다

이를 위해 터미널 열고 ifconfig 친다음 en0: 부분에서 inet 다음의 주소를 확인하면 해당 노트북의 IPV4 주소를 확인할 수 있다

 

 

그러면 확인한 주소와 아까 만든 폴더명을 작성해준다

 

이제 우리가 사용할 API 를 php로 개발해볼 것이다. php 파일을 만들기 위해서 vscode를 사용할 것임

vscode 열고 PHP Debug, PHP Intelephense, PHP IntelliSense 이 세가지 extensions을 설치한다

그리고 나서 아까 만든 api_members 폴더를 열어준다

이제 mysql 이랑 연결을 담당할 php 파일을 하나 만들어줄 것이다

 

 

이렇게 객체지향 인터페이스를 사용하면, 데이터베이스 연결 리소스를 함수에 전달할 필요 없이 

해당 객체가 하나의 데이터베이스 연결 객체로서 작동함

그래서 개발자가 이 객체만 따로 저장시에 스크립트의 어디에서든지 객체를 불러와서 데이터베이스 연결 리소스로 연결 사용 가능

 

그리고 user라는 폴더를 새로 만들고 그 안에 signup.php 파일을 하나 생성한다

이 signup 파일에서는 Mysql 데이터베이스에 접속을 한 뒤에 사용자 등록을 할 수 있게 해줄 것이므로

먼저 connection 파일을 import 해준다

 

 

 

우리가 데이터베이스로 데이터를 보내거나 저장할때는 post 요청,

데이터베이스로부터 데이터를 검색하거나 읽는때 get 요청을 한다

 

플러터앱에서 사용자 등록할때 텍스트 필드에 입력된 user_name을 데이터베이스가 전달받으므로 post 사용해야함

여기서 password를 감싸준 md5는 식별할 수 없는 바이너리 포맷으로 바꿔줘서 보안이 강화됨

 

그리고 그 아래에 쿼리문 작성해줌

 

그리고 동일한 이메일 주소가 존재하는지 체크해주는 validate_email.php를 새로 만들어준다

 

 

num_rows의 길이가 1이면 이미 같은 이메일 주소가 존재한다는 의미고 사용자는 이 이메일로 회원가입을 할 수 없다

 

플러터로 돌아가서,

 

 

아까 만든 파일에 접근하기 위해 변수를 선언해줬다

 

사용자 등록을 할 때, 첫번째 단계는 중복 이메일 주소가 있는지 확인해보는 것이므로 signup.dart 파일에서 기능을 구현해보겠다

상단에 checkUserEmail 이라는 메서드를 하나 만들어보겠다

그리고 php가 서버와 통신 후에 결과를 받게 될 것이므로 메서드는 당연히 async 방식이 되어야하고, http 패키지도 필요하므로

pubspec.yaml 가서 추가해주고 설치한다 (명령어: flutter pub add http) 

그리고 하는김에 fluttertoast 패키지도 설치 ㄱㄱ

 

 

우리는 사용자가 회원가입을 위해 서버로 데이터를 보내서 저장하게 만들어줘야하므로 http.post 메서드를 사용해야한다

그리고 Uri.parse를 사용해서 API 클래스에 있는 validateEmail을 전달해준다

이제 validate_email.php를 통해서 서버에 중복되는 이메일이 없나 체크하고 사용자가 이메일을 새롭게 사용할 수 있는 경우에는 서버로 보내기 위해 body 알규먼트를 불러와서 전달할 데이터를 지정해준다 -> 데이터테이블의 칼럼명을 그대로 가져오고, 텍스트 필드에 입력되는 이메일을 전달해줘야하므로 emailController.text.trim을 전달해준다

 

이렇게 데이터를 보냈으니 서버로부터 response를 받아야되는데, 200일때 성공적으로 서버랑 통신한 것이므로 response.body를 전달해준다

만약 responsebody가 true면(num_rows가 1) 등록 불가 메세지를 전달해준다

이외에 중복되는 이메일이 없으면 사용자 등록기 가능할 것이므로 데이터베이스에 사용자 정보를 저장하도록 할 것이다

이를 위해 새로운 메서드 saveInfo()를 생성해줄 것이다

 

사용자가 플러터 앱에서 입력한 정보는 서버로 전송되어서 데이터베이스에 json 포맷으로 저장된다

그래서 사용자가 입력한 데이터를 json 포맷으로 바꾸어 줘야한다

그러므로 model 디렉토리를 하나 만들어서 user.dart 파일을 새로 생성해준다

 

 

user 클래스를 만들고, 사용자 정보를 담을 변수를 만들어 주고, 데이터를 json으로 바꿔줬다

이제 saveInfo() 메서드로 돌아가서 user 객체를 생성해준다

 

 

 

 

에뮬레이터 실행 후 화면 모습이다.

 

 

 

위는 회원가입 화면이고, 회원가입시에 데이터베이스에서 정보가 들어간 걸 확인할 수 있다

 

 

 

이렇게 회원가입 기능을 완성시켰다.