컴퓨터공학/웹프로그래밍(HTML, CSS, Javascript)

PHP와 MySQL을 통한 Database(DB) 연동하기

Jake217 2017. 7. 5. 00:19

오늘 배워볼 내용은

PHP서버 <=> 데이터베이스(Database)

구조에서

Data를 전송하는 방법입니다!

웹프로그래밍의 아주 심플한 첫 step이니

간단한 실습으로 먼저 스타트 하겠습니다!


먼저 필요한 준비물은 Autoset Atom입니다.


먼저 Autoset을 설치함으로 Apache(서버)와 MySQL(데이터베이스)이 자동으로 설치됩니다.



Autoset 실행만으로 서버와 Database를 실행시켜줍니다.

더 궁금하신 사항은 사이트에 방문하시길 바랍니다!

http://autoset.net/xe/



자 우선, 그럼 오토셋을 설치해야겠죠?

아래 링크가셔서 다운로드 받으시면 됩니다.

무료입니다! Free!

(각자 설치된 PC의 운영체제에 맞게 32bit 혹은 64bit로 설치하시기 바랍니다.)


http://autoset.net/xe/download_autoset_9_0_0


설치를 다 하신뒤, 실행시켰을 때의 모습입니다!




(웹서버만 실행되고 MySQL이 실행 안되실 때에는 재부팅 후, 바로 Autoset을 실행시키시거나
다른 DB프로그램과 충돌때문일 수 있으니 HeidiSQL이나 MariaDB같은건 지워주세요)

웹서버가 잘 돌아가고 있는지 확인을 위해!
크롬 브라우저를 실행 후 주소창에 127.0.0.1을 입력하세요.
아래와 같은 화면이 나온다면 정상!



좌측상단에 까만버튼 3개가 있죠?
2번째인 phpMyAdmin을 클릭하세요!


사용자명은 기본적으로 root라고 되어있습니다.
암호는 autoset 입니다. 로그인!



New를 누르신다음에
오른쪽 박스에 새로 만들 database이름을 적어줍니다.
저는 custom이라고 정했습니다.
데이터 정렬방식은 utf8_general_ci로 선택해주신 뒤,
만들기 버튼 클릭!
이렇게해서 custom 데이터베이스가 생성되었습니다!!
왼쪽 목록에서 확인할 수 있습니다.




왼쪽 목록에서 custom을 클릭하신 뒤,
새 테이블을 만들어야합니다.
저는 회원의 정보를 입력받기 위해서
info라는 테이블 이름을 주었고 컬럼은 3개만 지정했습니다.
(아이디,이름,나이)


화면과 같이 
custom_id, custom_name, custom_age
라고 지정하였습니다.
아이디와 이름은 문자이므로 VARCHAR,
나이는 숫자이므로 INT
길이는 모두 30으로 주었습니다.
데이터 정렬방식 모두 utf8_general_ci로 설정!

이로써, database 셋팅은 모두 끝났습니다.
이제 값이 들어오는걸 확인하면 됩니다.
.
.
.

서버랑 DB는 준비가 되어있으니!
이제 PHP편집기를 설치합니다.
다양한 프로그램이 있지만, 저는 Atom을 사용하기 때문에
Atom설치에 대해 안내해 드리겠습니다.
아래 링크로 가셔서 다운받으시면 됩니다. 무료!



두둥! 설치 후, 실행화면입니다.
왼쪽 오른쪽 모두 X버튼을 눌러서 닫아주시구요.
왼쪽에 public_html이라는 곳을 우클릭하셔서

1) New Folder -> Blog 입력
2) Blog 폴더 우클릭 -> New File -> main.php 입력
3) Blog 폴더 우클릭 -> New File -> dbconnection.php 입력
4) Blog 폴더 우클릭 -> New File -> post.php 입력
(뒤에 .php까지 꼭 치셔야 합니다.)

 dbconnection.php부터 설명드리겠습니다!
아래 코드를 복사해서 붙여넣기 하세요.

<?
function dbconn(){
$host_name="localhost";
$db_user_id ="root";
$db_name="custom";
$db_pw="autoset";
$connect=@mysql_connect($host_name, $db_user_id, $db_pw);
mysql_query("set names utf8", $connect);
mysql_select_db($db_name, $connect);
if(!$connect)die("연결에 실패".mysql_error());
return $connect;
}

//에러메세지 출력
function Error($msg)
{
  echo"
  <script>
  window.alert('$msg');
  history.back(1);
  </script>
  ";
  exit; //위 에러 메세지만 띄우기
}
?>

php는 <? ?>여기 안에다가 쓰시면 됩니다.
여러분이 위에서 차근차근 만드셨던 
db에 관한 정보를 넣어주시면 됩니다. 

저희 id는 root, pw는 autoset맞죠?
만든 db이름은 custom이구요.
연결이 안되었을 때 예외처리까지 해줍니다.
입력 후 Ctrl + S눌러서 저장합니다.

그 다음은! post.php로 이동합시다.

<?php
    include './dbconnection.php';
    $connect=dbconn();

    $userid=$_POST['custom_id'];
    $username=$_POST['custom_name'];
    $userage=$_POST['custom_age'];

    $query="INSERT into info(custom_id, custom_name, custom_age) values('$userid','$username','$userage')";
    mysql_query("set names utf8", $connect);
    mysql_query($query, $connect);
 ?>

 <script>
 windows.alert('DB로 전송 완료 !');
 location.href='./main.php'
 </script>

db연결 설정을 불러와서
$userid, $username, $userage라는 변수를 만든 뒤,
각 입력받은 값들을 POST합니다.
쿼리를 통해서 db에 값을 집어넣게 됩니다.
Ctrl+S를 눌러서 저장!

이제 main.php로 이동!

 
<html>
<head>
<title>Jake's DB TEST</title>
</head>
<body>
  <?
      include("./dbconnection.php");
      $connect=dbconn();
  ?>
  <form action='./post.php' name='review_table' method='post'>
<br>
<br>
<CENTER>DB로 전송할 값 입력받기</b></div><br>
<form action="" method="post">
<label>아 이 디 : </label><input type="text" name="custom_id" class="box"/><br>
<label>이    름 : </label><input type="text" name="custom_name" class="box"/></br>
<label>나    이 : </label><input type="text" name="custom_age" class="box"/>

<center><input type="submit" value="DB로 전송"/><br />

</form>
</body>

</html>

브라우저를 실행시켰을 때,
아이디, 이름, 나이를 입력받기 위한 폼을
HTML을 통하여 만들어줍니다.
Ctrl+S를 눌러서 저장!

자, 이제 크롬 브라우저를 실행시켜서
주소창에 127.0.0.1/blog/main.php 입력하고 엔터를 누릅니다.


이런 화면이 뜰텐데,
각각 아이디, 이름, 나이 순서대로 입력합니다.
그리고 DB로 전송 버튼을 클릭!

주소창이 127.0.0.1/blog/post.php
이동하면서 빈화면이 뜰것입니다.
제대로 DB로 갔나 확인을 위해서는

주소창에 127.0.0.1/phpmyadmin 입력 후,
여기로 이동하셔서 DB를 확인하시면 됩니다.



짠! 이렇게 잘 들어온것을 확인하실 수 있습니다.
서버와 DB의 연결은 아주 기초적인 기초!
이 기능들을 잘 활용하면
무궁무진한 개발을 할수 있겠죠?

오늘도 좋은하루 되세요^^!