==== Mission ====
간단한 회원가입 페이지를 만들고 삽입한 회원정보를 db에 정보 저장 해보자.
==== Progress ====
1. 고객이 회원가입을 하기위해서 간단한 필수 정보를 입력한다. ex) 아이디, 비밀번호, 이름, 이메일 등
2. 받은 정보를 가져와 php 파일을 통해 서버쪽으로 정보를 삽입해준다.
=== description ===
1. 웹페이지에 보여지는 정보는 html,css부분이다.
2. html에서 바로 서버쪽으로 직접적으로 정보이동을 할 수 없기 때문에 php를 통해서 정보를 전달해줘야한다.
3. php도 아직 서버쪽으로 취급하기에 ajax를 통해 정보전달을 해준다. json이라는 언어로 encode(변경)하여 서로 알아볼 수 있도록 해준다.
4. 다시말해, 정보를 받은뒤, 자바스크립트에서 ajax로 정보를 joson의 방식으로 변환하여 php로 보내주고, php받은 그 정보는 서버로 전달하여 정보 저장을 가능하게 한다.
5. 회원가입하면 정보를 데이터베이스에 저장.
==== detail notion ====
/*
php - php는 클라이언트 사이드와 서버 사이드가 있다.
1) 클라이언트: 서버에서 제공하는 웹서비스를 이용하는 사용자 또는 기기(브라우저)
자바스크립트, 제이쿼리
2) 서버: 서비스를 제공하는 컴퓨터
HTML 문서에 서버사이드 언어를 삽입하면, 서버에서 해당 부분을 처리하고
결과를 브라우저에 보내준다.
** 서버에 미리 저장된 파일이 아닌 서버의 데이터들을 서버 언어로 가공해서 생성되는
페이지를 동적 웹페이지(Dynamic 웹페이지)라고 한다.
ajax - Ajax는 자바스크립트의 라이브러리이다.(제이쿼리)
브라우저의 전체 헤이지를 바꾸지 않고 일부만을 위한 데이터를 로드하는 기법
** 서버간의 통신이 가능해진다.
*/
==== detail progress ====
1. join.html 파일 생성 -> html, css를 만든다. (이후 정보 들어갔는지 확인을 위해 value값을 미리 지정)
<body>
<div class="wrap">
<div class="member_box">
<div class="box">회원가입</div>
<input type="text" placeholder="아이디" value="codepoet" id="_id">
<input type="text" placeholder="비밀번호" value="codepoet" id="_pw">
<input type="text" placeholder="이름" value="코드시인" id="_name">
<input type="text" placeholder="이메일" value="codepoet@codepoet.com" id="_email">
<input type="button" value="로그인" class="login_btn">
</div>
</div>
</body> <style>
.wrap {
width: 500px;
padding-top: 15% ;
margin: 0 auto;
}
.member_box {
width: 100%;
text-align: center;
background: darkkhaki;
}
.box {
font-size: 14px;
font-weight: bold;
}
.member_box > input {
width: 70%;
height: 30px;
padding: 10px;
box-sizing: border-box;
outline: none;
margin: 5px 0;
}
input[type="button"] {
padding: 0;
margin: 10px 0;
line-height: 30px;
background: coral;
color: cornsilk;
outline: none;
}
</style>
2. <script>단에서 이벤트를 생성시켜준다. (클릭하면 이벤트가 실행될 수 있게 만들어준다.) - 함수 생성
** js 파일을 따로 만들었다면 js파일을 연결해주어야 하고, 이후 서버로 파일을 올릴 경로를 같게 만들어줘야한다.
1) 각각의 value값들을 저장할 수 있도록 변수에 담아둔다.
2) 담아둔 정보를 php로 넘길 수 있도록 ajax를 실행한다. ajax는 필수로 써야하는 속성값들이 있다.
- url : 연결할 php 파일
- type : 어떤 방식으로 정보를 넘길것인지(get방식인지 post 방식인지 설정)
- dataType : json의 방식으로 넘겨준다.
- data : 넘겨줄 데이타를 정의해 준다. { 왼쪽은 php에서 알아볼 객체, 오른쪽은 내가 변수로 만들어둔 넘겨줄 정보 }
- success (error는 선택) : 정보를 받아오게 되면 함수실행
$(document).ready(function(){
function login(){
let _id=$('#_id').val();
let _pw=$('#_pw').val();
let _name=$('#_name').val();
let _email=$('#_email').val();
$.ajax({
url:'./ajex/22.practice_index.php',
type:'POST',
dataType: 'json',
data: {id:_id, pw:_pw, name:_name, email:_email},
success:function(data){
console.log(data.sql)
},
error:function(){
console.log("실패")
}
})
}
$('.login_btn').click(function(){
login();
})
})
3. db에 연결할 id값, pw값이 담겨있는 conn 파일을 php에 연결해준다. 서버에 저장되어있는 키를 가지고있는 파일을 따로 만들어 주는게 좋다. (털리고싶지 않으면 말이다..!)
1) include 함수를 적어주고 연결할 php 서버 주소를 입력해주자.
2) ajax에서 post방식으로 받은 파일을 php파일의 변수에 담아둔다. (변수 생성 $user_id)
3) $sql 변수에 (정보가 날아가지않도록 늘 변수에 담아주자) 서버에 넣을 값을 생성해 준다. 간단한 회원정보의 값들을 넘겨줄 거니까 id, pw, name, email 순서로 values 값들을 적어주었다.
4) mysqli_query() 문으로 실행한다. $conn 이라는 (db_conn.php 파일에 저장해 둔 $conn 변수) 정보를 사용해서 putty또는 서버에 로그인을 하고, $sql 변수를 이용하여 서버에 정보를 올려준다. (insert)
5) 정보를 넘겨주면 이제 과정은 끝나는 거니까 mysqli_close로 닫아준다. (로그아웃)
6) 정보는 json의 언어로 encode해서 data가 알아볼 수 있도록 넘겨줄거야 라는 뜻. 마지막에 꼭 써준다.
include 'db_conn.php';
$user_id=$_POST['id'];
$user_pw=$_POST['pw'];
$user_name=$_POST['name'];
$user_email=$_POST['email'];
$sql = "insert into members values ('','$user_id', password('$user_pw'),'$user_name', '$user_email')";
mysqli_query($conn,$sql);
$data['sql']=$sql;
mysqli_close($conn);
echo json_encode($data);
==== 마치며 ====
1. 회원가입은 정보를 삽입만 해주면 되니까 비교적 쉽다. 하지만 처음 정보를 넣고 받고 하게되면.. 정말 헷갈린다.
2. 어디서 어떤 정보를 연결해야하는지 어떤 프로세스로 정보가 이동하는지 등등 신경써야할 부분이 많고, 더군다나 php사용은 자동완성기능이 안되기 때문에 스펠링이며 ; 등 오타하나만 내도 바로 에러나기 쉽상이다. 에러가 나면 찾기 힘드니 스펠링에 유의하도록 하자.
3. 실습할때 putty를 이용해서 직접 데이터 서버를 보고 하니 좀 쉬웠지만 실무에 들어가면 front 쪽은 back 단을 건들일이 많이 없다고 한다. 지금 그 과정을 눈으로 익히며 잘 이해해 두어야 할듯 싶다.
4. 로컬에서는 db와 연결이 안되니 실행할 수 없다. 꼭 파일을 서버에 올려두고서 확인하도록 하자. ( 코드를 잘 만들어 놓고, 실행을 엉뚱한 곳에서 하고있으면 에러를 찾을 방도도 없고 시간낭비하기 쉽상이기 때문 == 내가 그랬다)
'FRONTEND > Php_Mysql' 카테고리의 다른 글
| [php] php 웹사이트 개발 환경 구축하기 (0) | 2021.07.12 |
|---|---|
| [php] php란 무엇인가? php와 mysql의 상호작용 (0) | 2021.07.04 |
