참, 저는쓸데없이하나에열중하는버릇이있어요.
꽂히는 게있으면무조건 해야된달까.. ㅎㅎ
간단하게 MySql Database 연동해서 WinForm으로 로그인구현하는거만만들어보려고했는데,
쓸데없이열심히카카오톡 PC 버전 UI를만들어봤네요 ^^
카카오톡프로그램이 WinForm으로 만들어진게아니라서 (뭐실제론잘모르지만,,,)
완벽하게 따라할 수는없어도대충흉내만내봤습니다.
WinForm이정말. 정~~말 UI 만들기가쉬운데, 디자인은 뭐… 저는... 감각이 없나봐요…^^;;
물론유튜브보니깐이쁘게 디자인 하는 사람도 많더라구요…
대부분외국개발자들인데나름참고하기 쏠쏠한것도많습니다.
또, 주저리 주저리 서론이길었습니다.
본격적으로로그인구현을해봅시다!
첫 번째, DB 연결하기.
먼저 Visual Studio 프로젝트를만들어주시고~
로그인에필요한 LoginForm 클래스와, 회원가입에필요한 SignUp 클래스두개를이용해서 해보기전에!
가계부 프로그램만들기에서도등장했던, DBMySql 클래스를다시 한 번 참고하여프로젝트에넣어주세요~
아래링크참고↓
2019/05/27 - [IT] - [C#][Database] Mysql Database 연결하기
[C#][Database] Mysql Database 연결하기
2020/02/28 - [IT] - [C#] 가계부 프로그램 만들기 DAY1. Database 설정 및 연결 [C#] 가계부 프로그램 만들기 DAY1. Database 설정 및 연결 새해 다짐으로 올해도 돈을 한 번 조금만 써보자.. 돈 관리를 해보자....
ella-devblog.tistory.com
프로젝트로드할때 DB 연결해주는것도 잊지마시구요~ㅎㅎ
public static DBMySql _db = new DBMySql();
만든 DBMySql.cs 클래스를 메인에서 사용해주기 위해 LoginForm.cs 에서 전역변수로 위와 같이 설정하여
DB 연결에 관한 함수들을 사용할 수 있게 선언해줍니다.
2022.04.04 추가내용
LoginForm.cs 에서 위와같이 데이터베이스 클래스를 _db 로 선언해주고
LoginForm 이 로드(실행)될 때 데이터베이스에 연결하는 부분에 대한 설명이 부족했습니다.
Form 클래스에서 Load 이벤트 만들어주고,
다음과 같이 데이터 베이스 연결 함수 호출 _db.Connection() 후에,
기존 데이터베이스의 사용자 정보를 가져오기 위한 LoadUserInfo() 함수를 호출해 주어야합니다.
VS 프로젝트에서 MySql로넘어와서 DB에서테이블을만들어야겠죠?
로그인에필요한 User 테이블을만들어보겠습니다.
create table user (
id varchar(32) primary key,
pw varchar(32),
name varchar(20),
birth date,
phone varchar(20)
);
저는 요렇게만들었습니다. 아이디, 비밀번호, 이름, 생년월일, 전화번호 5가지 컬럼으로 구성했습니다.
아이디는중복을허용하지 않기때문에 Primary key로 선언해줘야합니다.
필요에 따라 컬럼을 추가하거나, 삭제하시면서각자 컨셉에 맞게사용하시면됩니다.
2021.01.14 추가내용
아래의 코드에서 Config에 관련한 내용이 빠져서 추가했습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | namespace LoginTest { enum eTName : int { _user } class Config { public static string Database = "becle"; public static string Server = "localhost"; public static string UserID = "becle_sys"; public static string UserPassword = "becle_pw"; public static string[] Tables = { "user" }; public static DataSet user_ds = null; } } | cs |
프로젝트에서 클래스를 하나 더 추가해 줍니다.
Config.cs 파일으로 추가했는데, 여기에 필요한 변수들을 선언하여 사용하도록 하였습니다.
Database 연결시에 필요한 변수들과, 사용자 정보를 DataSet으로 가져와서 사용하도록 user_ds 까지 선언해주었습니다.
이렇게 Config 파일까지 작성해주어야 아래에 있는 코드를 사용하실 수 있습니다.
2022.04.01 추가내용
Config 파일을 이용해서 사용하는 게 어려우신거 같아 추가로 설명드립니다.
아래의 코드들에서 나오는 Config.Tables[(int)eTName._user] 같이 사용하는 경우는 테이블이 많은 경우와 같이 관리가 용이하게 하도록 사용하는 경우인데, 지금은 user 테이블 하나만 쓰는 경우이기 때문에
Config.Tables[(int)eTName._user] => "user" 테이블명으로 사용하시면 됩니다.
Config.user_ds 같은 경우는 메인화면에 user_ds 라는 데이터셋을 전역으로 선언해서 사용해도 되나 이 또한 관리가 용이하도록 한 것으로 편하신대로 사용하시면 됩니다.
두 번째, LoginForm 구현하기.
그, 제가공을들인 LoginForm UI 입니다. 하하.
헷갈리시면 안됩니다. 여러분ㅋ 제가 만들었어요 ㅎㅋㅋㅋ
여기서우리가필요한부분은 ①아이디입력창, ②비밀번호입력창, ③로그인버튼, ④회원가입하기 버튼딱 4가집니다.
저는각각 ①txtID, ②txtPW, ③btnLogin, ④btnSignUp 으로 이름을지어봤습니다.
위에나와있는이미지처럼 텍스트박스에 Placeholder를지정하는 방법은바로전포스팅을 참고해주세용~ㅎㅎ
2020/11/26 - [IT] - [C#] WinForm TextBox Placeholder 적용하기 (+ textBox 비밀번호 대체문자 적용하기)
여기서 해야될 것은 1. 로그인버튼 클릭 했을 때, 2. 회원가입하기 버튼 클릭했을 때 의 2가지 입니다.
1. 로그인버튼 클릭 했을 때
실제아이디와비밀번호가일치하는지알기위해서는먼저, DB에서로그인정보를가져와서입력한 아이디와비밀번호가일치하는지확인합니다. 저는아이디에이메일을붙여서도로그인가능하도록하고싶어서 ID 비교할때아래와같이 비교했습니다.
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 | private void btnLogIn_Click(object sender, EventArgs e) { LoadUserInfo(); CheckID_PW(txtID.Text, txtPW.Text); } public static void LoadUserInfo() { //데이터베이스에서 사용자 정보 가져오기 Config.user_ds = _db.SelectAll(Config.Tables[(int)eTName._user]); } private void CheckID_PW(string id, string pw) { //사용자 정보와 비교해서 ID / Password 일치하는 지 확인 if(Config.user_ds.Tables[0].Rows.Count > 0) { foreach (DataRow row in Config.user_ds.Tables[0].Rows) { if(id == row["id"].ToString() || id == row["id"].ToString() + "@ella.com") { if (pw == row["pw"].ToString()) MessageBox.Show("로그인에 성공했습니다."); else MessageBox.Show("비밀번호가 일치하지 않습니다. 확인 후 다시 입력해주세요."); } } } else { MessageBox.Show("사용자 정보가 없습니다."); } } | cs |
2. 회원가입하기 버튼 클릭 했을 때
회원가입하기 버튼을 클릭하면 SignUpForm을열어줍니다.
그러기위해선 SignUpForm을먼저생성해준다음에 다음과같이구현합니다.
SignUp _signUp = new SignUp(); private void btnSignUp_Click(object sender, EventArgs e) { _signUp.StartPosition = FormStartPosition.Manual; _signUp.Location = new Point(Location.X + Width, Location.Y); _signUp.ClearTextBox(); _signUp.Show(); } | cs |
세 번째. SignUpForm 구현하기.
User 테이블에입력될내용들을위와같이배치해봤습니다.
비밀번호는 항상두번 입력하는게 국룰이죠?
또, 비밀번호에 왜이렇게 요즘제한이많은지저도 따라해봤습니다.
나머지이름, 전화번호, 생일은그냥 입력하는대로데이터베이스에입력해버리고
로그인에서제일 중요한건 아이디와 비밀번호기 때문에, 그 두개에 대한유효성검사만진행해서구현해보겠습니다.
먼저, 아이디는 중복을 허용하지 않습니다.
이는동일하게실제데이터베이스상에같은아이디가있는지없는지체크해주면됩니다.
다음으로, 2번 입력한 비밀번호가 동일한지, 비밀번호가 4-32자리이며, 영문, 숫자, 특수문자를 포함하는지를체크해줍니다.
이를전부 확인버튼을 눌렀을때 = btnSignUp_Click 일때 다체크하도록아래와같이구현해보았습니다.
비밀번호 검사에이용된 Regex (Regular Expression, 정규식)은겁나 복잡해보이나,
나름의규칙성이있어이해가어렵진않습니다. 하지만맨날까먹는다는 점. 결국은구글링이답이라는점. ^^;
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 | private void btnSignUp_Click(object sender, EventArgs e) { if (!isValidID(txtID.Text)) { MessageBox.Show("이미 존재하는 아이디입니다."); return; } if (txtPW.Text != txtPW2.Text) { MessageBox.Show("비밀번호가 일치하지 않습니다. 확인 후 다시 입력해주세요."); return; } if (!isValidPassword(txtPW.Text)) { MessageBox.Show("비밀번호는 영문, 숫자, 특수문자를 포함해야합니다."); return; } string value = $"'{txtID.Text}', '{txtPW.Text}', '{txtName.Text}', '{txtBirth.Text}', '{txtPhone.Text}'"; LoginForm._db.Insert(Config.Tables[(int)eTName._user], value); LoginForm.LoadUserInfo(); MessageBox.Show("회원가입을 완료했습니다. 등록한 아이디로 로그인 해주세요."); Hide(); } public static bool isValidID(string Text) { if (Config.user_ds.Tables[0].Rows.Count > 0) { foreach (DataRow row in Config.user_ds.Tables[0].Rows) { if (Text == row["id"].ToString()) { return false; } } } return true; } public static bool isValidPassword(string Text) { //영문, 숫자, 특수문자 포함 4-32자리 Regex regex = new Regex(@"^(?=.*?[A-Za-z])(?=.*?\d)(?=.*?[~`!@#$%\^&*()-+=.]).{4,32}$"); Match match = regex.Match(Text); return match.Success; } | cs |
이렇게하면로그인구현하기는끝납니다ㅎㅎ
여기서그치지않고여러기능을추가해나가면서공부하시면더더욱 좋겠죠?ㅎㅎ
2022.04.01 추가내용
전체 소스코드를 공유해달라는 분이 많아 압축파일로 첨부하였습니다.
위에서 설명한 코드 이외에 Placeholder를 사용한다거나 추가적인 부분이 많지만
핵심적인 내용은 위에서 설명한 내용을 참고해주시기 바랍니다.
이외에 또 궁금한 점이 있으면 댓글로 남겨주세요 : )
LoginTest.zip
19.35MB
앞으로도궁금하신부분언제든지댓글 남겨주시고
도움이되셨다면 ❤공감❤꾹눌러주세요 : )
그럼다음포스팅에서만나요~^^