Project/App Inventer

A09. 회원가입 및 로그인(with. TineyWebDB)

Tuan0324 2021. 5. 11. 03:04

이번 게시글에서는 회원가입과 로그인을 하는 프로그램을 만들어 보려고 한다.

 

1. 아이디어 

회원가입

 ID와 회원 정보를 입력하고 회원가입 버튼을 클릭하면

 - TinyWebDB에서 ID정보를 읽어와서 

 - 이미 저장되어 있다면,

    - ID가 중복되었다고 출력

    - 초기화

 - 그렇지 않다면

    - ID를 키로, 회원 정보들을 info 리스트로 만들어 TinyDB에 저장

    - 저장되었다고 출력

    - 초기화

 

로그인

 ID와 회원 정보를 입력하고 회원가입 버튼을 클릭하면

- TinyWebDB에서 ID정보를 읽어와서

 - 그 ID가 저장되어 있지 않다면,

    - ID를 찾을 수 없다고 출력

    - 처음으로 돌아간다.

 - 그렇지 않다면

    - Password를 비교해서

    - 같다면, Login 성공이라고 씁니다. 메인으로 넘어간다.

    - 다르다면, Login 실패라고 쓴다.

 

2. 디자인

 

이번 프로그램은 두가지의 스크린을 사용한다.

첫 번째로 로그인과 회원가입을 하는 스크린, 두 번째로 로그아웃과 회원 탈퇴를 하는 스크린이다.

스크린 1 스크린2

Label1
Image1
txtID
txtPassword
txtPassword2
txtName
txtPhone
txtEmail
LabelSpace
HorizontalArrangement1
      btnLogin
      btnLogup
Notifier1
TinyWebDB1

VerticalArrangement1
     lblID
     lblName
     lblTel
     lblEmail
Label5
Label6
Image1
Label7
HorizontalArrangement1
     btnLogout
     btnDelete
TinyWebDB1

 

 

3. 코딩

필요한 변수들은 다음과 같다.

여기서 code라는 변수는 TinyWebDB에 사용되는 코드의 값을 담은 변수이다.

처음으로 화면이 이니셜라이즈되었을 때 실행되는 코드를 확인해 보면 다음과 같다.

그리고 이어서 로그인 버튼에 관한 코드를 확인하자.

로그인을 하려면 회원가입을 먼저 해야한다. 그럼 회원가입 버튼을 눌렀을 때 작동하는 코드를 보자.

위 코드들만 있다고 바로 프로그램이 실행되지는 않는다 TinyWebDB를 다뤄주는 코드 또한 필요하다.

회원가입 부분에 관한 코드는 다음과 같다. 

이어서 로그인 부분의 코드이다.

마지막으로 화면이 전환 되면서 작동하는 코드이다.

 

여기까지 잘따라왔다면 첫 번째 스크린에서 작동하는 기능들은 모두 작동할 것이다.

이제 로그아웃과 회원탈퇴가 있는 두 번째 스크린으로 이동하자.

두 번째 스크린의 코드는 첫 번째 스크린보다 간단하다.

 

4. 테스트

WebDB를 통해서 정보를 받아오고 보내는 과정을 통해서 로그인과 회원가입 추가로 탈퇴까지 진행이 가능하다!

 

 

 

 

 

 

 

잘못된 정보나 오류, 오타, 독자 입장에서의 수정사항 및 피드백 환영합니다. 

E-mail : jhmh0226@gmail.com