MySQL과 PHP를 이용한 회원가입 페이지 구현

1. 개요      회원 가입 페이지를 만들기 위해서는 유저 정보를 저장할 수 있는 데이터 베이스가 필요합니다. 대표적인 데이터 베이스 MySQL과 PHP를 이용하여 회원가입 페이지를 구성한다고 가정하였을 때 우리는 많은 스타일로 페이지를 구현할 수 있습니다.  저희는 HTML에서 XMLHttpRequest를 이용하여 외부에 있는 php 파일을 호출함으로 데이터를 DB에 저장해 보도록 하겠습니다. 2. HTML 페이지

  

예제 페이지이며 아래 파일을 다운받으실 수 있습니다.

registrater.zip

 

3. DB(MySQL) 설정하기

  

  우선 사용할 데이터베이스를 만듭니다.

그리고 해당 데이터베이스의 테이블을 만듭니다.

이후 각각의 필드를 정의합니다.

저장을 누르시면 아래와 같은 페이지로 넘어갑니다.

4. XMLhttpRequest + PHP

  

  우선 PHP파일을 작성합니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php     header("Content-Type: text/html;charset=UTF-8");     $conn = mysqli_connect("127.0.0.1","root","apmsetup","Login");        $data_stream = "'".$_GET['Id']."','".$_GET['Password']."','".$_GET['Name']."','".$_GET['PhoneNum']."','".$_GET['Email']."'";     $query = "insert into user(`Id`, `Password`, `Name`, `PhoneNum`, `Email`) values (".$data_stream.")";     $result = mysqli_query($conn, $query);           if($result)       echo "1";     else       echo "-1";           mysqli_close($conn); ?>

한줄씩 설명하면

1. $conn = mysqli_connect("IP 주소", "MySQL ID", "MySQL passwd", "DB name"); 

2. $data_stream = "'".$_GET['Id']."','".$_GET['Password']."'";

HTML에서 POST 방식으로 전달 받은 데이터들을 나열합니다. data_stream에는 주황색인 단어만이 저장됩니다. 참고로 여기서 .는 더하기를 뜻합니다.

3. $query = "insert into table name(`field name`, `field name`.....) values (".$data_stream.")";

insert는 DB에 데이터를 집어넣는 명령어로 테이블 이름(필드이름)이 나오고 거기에 들어갈 알맞는 데이터를 values에 순서대로 넣어주면 됩니다.

 다음은 html에 추가될 JavaScript입니다.

?

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

<script>     function RegisterUser() {         if (document.getElementById("Password").value == document.getElementById("Password2").value) {             var request = new XMLHttpRequest();             var params = "?Id=" + document.getElementById("Id").value + "&Password=" + document.getElementById("Password").value                 + "&Name=" + document.getElementById("Name").value + "&PhoneNum=" + document.getElementById("PhoneNum").value                 + "&Email=" + document.getElementById("Email").value;               request.open("GET", "register_user.php" + params, true);             request.onreadystatechange = function () {                 if (request.readyState == 4) { //서버로부터 응답상태                     if (request.status == 200 || request.status == 0) {//200 : 웹 서버의 응답처리상태                         var str = request.responseText;                         if (str == "1") {                             alert("Success!!");                         }                         else {                             alert("Fail!!");                         }                     }                 }             }             request.send(null);         }         else {             alert("Passwords not same");         }     } </script>

 추가로 회원가입 버튼에 onclick 옵션을 추가합니다.

?

1	<button type="submit" class="btn btn-info" onclick="RegisterUser()">회원가입<i class="fa fa-check spaceLeft"></i></button>