[앱인벤터 강좌] 로그인 및 회원가입 페이지 만들기!
로그인 페이지는 어느 플랫폼, 서비스를 사용하든 필수로 들어가는 화면이죠~
플랫폼 특성에 맞게 화면 구현은 다 다르지만, 가장 기본적인 아이디,비밀번호를 입력하는 화면을 만들어볼거에요😉😉
로그인 페이지와 회원가입 페이지를 각자 다른 스크린으로 생성해서 만들어 볼거에요.
구현 이미지
아이디를 입력하지 않고, 로그인을 시도하면 "아이디를 입력해주세요"라고 출력이 되요~
로그인 시도할 때, 비밀번호가 틀리면 "비밀번호가 틀렸습니다" 라고 출력이 되요~
아이디와 비밀번호를 사용해서 로그인에 성공하게 되면, "이름(홍길동)님 반갑습니다 :)" 라고 출력되요~
로그인 화면에서는 필요한 것은 아닌데, 연습하실때 회원가입이 정상적으로 되었는지 확인하기 위해 추가한 부분이에요~
개수 : 2 라고 되어있는 건, 현재 회원가입된 아이디가 2개가 있다는 의미입니다!
로그인 화면
회원가입에 성공하게 되면 나타나는 메시지~
회원가입 예시화면~
회원가입 화면~
디자인
스크린1
스크린2
속성
블록코딩
스크린1
"버튼_회원가입"을 클릭하면 회원가입 화면으로 이동하기
"버튼_로그인"을 클릭하면 아이디와 비밀번호를 썼는지 확인해요. 안썼으면 경고창으로 알려줘요~
아이디와 비밀번호를 썼으면, 타이니DB_개인정보에 아이디가 있는지 확인해요~ 아이디가 없으면 "가입된 회원이 아닙니다"라고 알려주고, 아이디가 있으면 비밀번호까지 맞는지 확인하고 데이터를 가져와요~
"버튼_데이터확인"을 클릭하면, 현재 저장된 아이디 개수를 메시지로 보여줘요~
스크린2
"버튼_취소"를 클릭하면 로그인 화면으로 이동하기~
"버튼_회원가입"을 클릭하면 아이디, 비밀번호, 이름을 적엇는지 확인하고, 안적었으면 경고창으로 알려줘요~
정상적으로 입력을 했으면, 타이니DB_개인정보에 아이디가 있는지 확인하고, 없을 때, 저장을 해줘요~
비밀번호와 이름으로 확인하면 안되요! 왜냐하면 아이디는 중복이 되면 안되지만, 이름과 비밀번호는 중복이 될 수도 있기 때문이죠!
정상적으로 저장되면 회원가입을 완료하고 로그인화면으로 되돌아갑니다~