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

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

  

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

registrater.zip

 

3. DB(MySQL) 설정하기

  

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

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

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

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

4. XMLhttpRequest + PHP

  

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

<?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입니다.

<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 옵션을 추가합니다.

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