Php로 웹 개발하기 : 회원가입(1)

회원 가입 기능을 만들기 전에 css를 사용해서 로그인 페이지를 꾸며보았다.

참고할만한 디자인을 찾다가 파란 네이버 느낌으로 가기로 했다!

음? 뭔가 네이버랑 인스타랑 짬뽕된 느낌인데?

확실히 나는 디자인 감은 없지만... 그래도 이상하지는 않으니까 만족!

 

① 회원가입 기능 만들기

이제 회원가입 기능을 만들어보자~

우선 로그인 폼을 그대로 복사해서 Sign Up 버튼만 남긴다.

 

form에 action = "signup.php"를 넣어주고 signup.php를 만들어 mysql 데이터와 연동하는 코드를 작성해주었다.

<?php
    if(isset($_POST['signupid']) && isset($_POST['signuppw'])){
        $username = $_POST['signupid'];
        $password = $_POST['signuppw'];
        
        $conn = mysqli_connect('localhost', 'id', 'pw', 'dbname');
        $sql = "INSERT INTO login (login_id, login_pw) VALUES ('$username', '$password');";
        
        if($result = mysqli_query($conn, $sql)){
            echo "<script>alert('회원가입 성공!')</script>";
            header('Location: index.html');
        } else{
            echo "<script>alert('이미 존재하는 사용자입니다.')</script>";
        }
        mysqli_close($conn);
    }
    else{
        echo "fail";
    }
?>

 

② 중복 기능 방지하기

원래는 로그인 용 테이블에 id를 PRIMARY KEY로 주었는데, 따로 ID 중복 기능을 만드는 것보다 애초에 login_id를 PRIMARY KEY로 설정해주는 게 편할 것 같아서 테이블의 primary key를 login_id로 바꿔주고 id는 삭제해주었다.

mysql > ALTER TABLE tabname drop id;
mysql > ALTER TABLE tabname add PRIMARY KEY(login_id);

 

③ 코드 다듬기

실행해보니 연동은 잘 되는데, alert 밑에 header를 쓰니 alert가 무시되어서 코드를 수정해주었다.

<?php
    if(isset($_POST['signupid']) && isset($_POST['signuppw'])){
        $username = $_POST['signupid'];
        $password = $_POST['signuppw'];
        $conn = mysqli_connect('localhost', 'id', 'pw', 'dbname');
        $sql = "INSERT INTO login (login_id, login_pw) VALUES ('$username', '$password');";
        
        if($result = mysqli_query($conn, $sql)){
            echo "<script>alert('회원가입 성공!')</script>";
            echo "<script>window.location.href='index.html';</script>";
        } else{
            echo "<script>alert('이미 존재하는 ID입니다.')</script>";
            echo "<script>window.location.href='signup.html';</script>";
        }
        mysqli_close($conn);
    }
?>

 

또, 아무것도 누르지 않고 sign up을 눌렀더니 아이디와 패스워드 모두 공백으로 회원가입이 되어서 공백을 검사하는 코드도 추가해주었다.

if ($username != NULL && $password != NULL){
	// mysql과 연동
}