[앱인벤터 강좌] 로그인 및 회원가입 페이지 만들기!

로그인 페이지는 어느 플랫폼, 서비스를 사용하든 필수로 들어가는 화면이죠~  

플랫폼 특성에 맞게 화면 구현은 다 다르지만, 가장 기본적인 아이디,비밀번호를 입력하는 화면을 만들어볼거에요😉😉

 

로그인 페이지와 회원가입 페이지를 각자 다른 스크린으로 생성해서 만들어 볼거에요.

 

구현 이미지

아이디를 입력하지 않고, 로그인을 시도하면 "아이디를 입력해주세요"라고 출력이 되요~

로그인 시도할 때, 비밀번호가 틀리면 "비밀번호가 틀렸습니다" 라고 출력이 되요~

아이디와 비밀번호를 사용해서 로그인에 성공하게 되면, "이름(홍길동)님 반갑습니다 :)" 라고 출력되요~

로그인 화면에서는 필요한 것은 아닌데, 연습하실때 회원가입이 정상적으로 되었는지 확인하기 위해 추가한 부분이에요~ 

개수 : 2 라고 되어있는 건, 현재 회원가입된 아이디가 2개가 있다는 의미입니다!

로그인 화면 

회원가입에 성공하게 되면 나타나는 메시지~

회원가입 예시화면~

회원가입 화면~

---

디자인

스크린1

스크린2

속성

---

블록코딩

스크린1

블록코딩 전체

블록코딩

"버튼_회원가입"을 클릭하면 회원가입 화면으로 이동하기

"버튼_로그인"을 클릭하면 아이디와 비밀번호를 썼는지 확인해요. 안썼으면 경고창으로 알려줘요~

아이디와 비밀번호를 썼으면, 타이니DB_개인정보에 아이디가 있는지 확인해요~ 아이디가 없으면 "가입된 회원이 아닙니다"라고 알려주고, 아이디가 있으면 비밀번호까지 맞는지 확인하고 데이터를 가져와요~

블록코딩

"버튼_데이터확인"을 클릭하면, 현재 저장된 아이디 개수를 메시지로 보여줘요~

 

스크린2

블록코딩 전체

"버튼_취소"를 클릭하면 로그인 화면으로 이동하기~

"버튼_회원가입"을 클릭하면 아이디, 비밀번호, 이름을 적엇는지 확인하고, 안적었으면 경고창으로 알려줘요~

정상적으로 입력을 했으면, 타이니DB_개인정보에 아이디가 있는지 확인하고, 없을 때, 저장을 해줘요~ 

비밀번호와 이름으로 확인하면 안되요! 왜냐하면 아이디는 중복이 되면 안되지만, 이름과 비밀번호는 중복이 될 수도 있기 때문이죠!

 

정상적으로 저장되면 회원가입을 완료하고 로그인화면으로 되돌아갑니다~