php와 mysql을 사용하여 회원가입 페이지 만들기

웹 개발 (내 사이트)

php와 mysql을 사용하여 회원가입 페이지 만들기 - part.1

ilsancityboy 2023. 11. 19. 22:57

저번글에서는 php와 mysql에 대해 개념을 간단하게 적었다.
이번글에서는 이 둘을 활용해 프론트엔드를 배운것과 합쳐서
html, css, js, php, mysql 를 전부 사용하여 회원가입 페이지를 만들어보겠다.

html, css, js 에 대해 아직 익숙하지 않다면 주인장이 올린 html,css,js를 활용한 투두 리스트 페이지 만들기 글을 보고오면
좀 많이 익숙해지고 이해하기 더 쉬울것이다.
(본인도 아직 초보기에 그때그때 이해하는걸 바로바로 글로 올리는 수준이라 같은 초보자 입장에서 본다면
더 초보자의 눈높이에서 같이 성장할 수 있을거라고 다짐한다.)
https://ilsancityboy.tistory.com/47

투 두 리스트 (ToDoList) 페이지 만들기

이번 글에서는 html , css , js 를 사용하여 투두리스트 페이지를 만들어 볼 것이다. 대략적인 순서는 이렇다. Html 작성 ( 타이틀 , 할 일을 적어 넣는 필드 , 할일 목록 ) CSS 작성 ( 각 요소들을 보기

ilsancityboy.tistory.com

준비물

1. 웹 서버 (필수)

프론트엔드 메모장에서 코드를 적고 바로바로 실행했던 html,css,js와 다르게
php와 mysql은 서버측에서 실행되는 친구들이기 때문에 웹 서버를 활용해야한다.
작성자가 올린 aws ec2를 활용해 웹 서버를 띄우는 글을 읽고 준비해오자.
xampp에는 아파치와 mysql이 전부 깔려있기 때문에 XAMPP를 설치해서 실습하자.
https://ilsancityboy.tistory.com/45

AWS EC2 + XAMPP 로 웹 사이트 띄우기

AWS(Amazion Web Service) ec2 AWS (https://aws.amazon.com/ko/) 에서 제공되는 ec2 ( Elastic Compute Cloud ) 는 독립된 가상의 컴퓨터를 임대해주는 서비스이다.물리적인 컴퓨터를 직접 빌려주는것이 아니라 리눅스나

ilsancityboy.tistory.com

2. 마음에 드는 css코드 (필수X)

작성자는 CSS로 잘 꾸밀 자신이 없어서 코드펜 (codepen.io) 를 활용해서
마음에 드는 페이지의 코드를 가져와서 활용했다.
코드펜이 뭔지 모른다면 작성자가 전에 올린 글을 보고 오자.
https://ilsancityboy.tistory.com/37

코드펜 (codepen) 활용

이번 글에서는 코드펜 (https://codepen.io/) 사이트에 대해 알아보고 활용할 것이다. 먼저 사이트에 접속해보자. 해당 사이트에서는 HTML , CSS , JS 를 실시간으로 테스팅할 수 있다. 왼쪽에 Start Coding을

ilsancityboy.tistory.com

어떤 친절하신분이 딱봐도 깔끔하게 보이는 로그인 페이지를 구현해서 공유해주었길래
해당 코드를 사용해 CSS를 날먹(?) 하고 갔다. (ㅎㅎ...)

코드 만들기 시작!

먼저 코드펜에서 가져온 코드의 내용은 이렇다.

//html 코드

<div class="login-box">
  <h2>Login</h2>
  <form>
    <div class="user-box">
      <input type="text" name="" required="">
      <label>Username</label>
    </div>
    <div class="user-box">
      <input type="password" name="" required="">
      <label>Password</label>
    </div>
    <a href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Submit
    </a>
  </form>
</div>

html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

먼저 작성자는 이런식으로 접근했다.
1. 로그인 페이지를 구현하기 전에 아이디와 비밀번호가 있어야 로그인을 할수있지 않을까?
2. 그럼 로그인 기능을 구현하기 전에 회원가입 페이지부터 만들고 회원가입 기능 구현을 먼저 하자!
3. 회원가입 페이지니까 로그인 페이지와 스킨이 비슷해야 깔끔하고 보기 좋을거니 css에서 회원가입에 필요한 부분들만 가져와서 재탕(?) 하자.
4. 로그인 페이지에서 배경색, 입력받는 필드와 로그인버튼 등등을 보면 회원가입에서도 똑같이 쓰일곳이 많다.
사용할 아이디, 비밀번호, 이름 등등을 입력하고 가입버튼을 눌러 가입하는 역할이 있으니 사실상 로그인 페이지에 쓰이는 css와 코드가 똑같아도 문제가 될 건 없다.

자 그럼 이제 처음으로 회원가입 페이지를 만들기위해 html 작성을 하자.

//html 코드

<div class="login-box">
  <h2>회원가입</h2>
  <form>
    <div class="user-box">
      <input type="text" name="id" required="">
      <label>아이디</label>
    </div>
    <div class="user-box">
      <input type="password" name="password" required="">
      <label>비밀번호</label>
    </div>
    <div class="user-box">
      <input type="password" name="password_confirm" required="">
      <label>비밀번호 재확인</label>
    </div>
    <div class="user-box">
      <input type="email" name="email" required="">
      <label>이메일</label>
    </div>
    <a href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      가입
    </a>
  </form>
</div>

사실상 코드펜에서 가져온 코드를 조금밖에 수정하지 않았다. 로그인 페이지에 나와있는 필드들이 조금만 더 늘어나면
회원가입 페이지로 사용될 수 있기 때문이다. css도 그대로 사용한다면 결과는

로그인 페이지와 같은 스킨으로 회원가입 페이지의 html을 만드는데 너무나도 쉽게 성공했다.
다만 아직 완성되지 않았다. 그저 css를 입히기 위해 이러한 행동을 했을뿐
가입을 누르면 가입 기능을 성공적으로 수행하기 위해 js,php,mysql 을 사용해야한다.

가입 버튼을 누르면 필드들에 유저가 적어넣은 데이터들이 서버로 전송되야하는데 이럴때 쓰이는것이
<form> 태그이다.
<form> 태그는 태그안에 적힌 데이터들을 제출해주는 submit() 함수로 제출하게 도와주는 태그이다.
form 태그에는 필요한 속성으로 action 과 method가 있다.
action은 어디로 보낼건가?
method는 어떤식으로 보낼건가? get 방식? post 방식?

이걸 알아두고 html의 코드를 수정해보자.

//html 코드

<div class="login-box">
  <h2>회원가입</h2>
  <form action="insert.php", method="post">
    <div class="user-box">
      <input type="text" name="id" required="">
      <label>아이디</label>
    </div>
    <div class="user-box">
      <input type="password" name="password" required="">
      <label>비밀번호</label>
    </div>
    <div class="user-box">
      <input type="password" name="password_confirm" required="">
      <label>비밀번호 재확인</label>
    </div>
    <div class="user-box">
      <input type="email" name="email" required="">
      <label>이메일</label>
    </div>
    <button type="submit">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      가입
    </button>
  </form>
</div>

먼저 <form> 태그에 action과 method 속성을 추가해주었다.
가입버튼이었던 <a>태그는 제출기능을 하지못한다. 단지 클릭하면 해당 주소로 이동시켜주는 역할일 뿐.
따라서 제출기능을 할 수 있는 <button> 태그로 바꿔주고
type을 submit 으로 넣어 버튼을 누르면 form이 제출되는 기능을 만들었다.
자 그럼 여기서 생각해 볼 것.
1. css코드를 보면 <a>태그를 꾸며주는 부분들이 있었다.
2. 허나 우리는 <a> 태그를 없애고 <button> 태그를 사용하게 되었으니 css에서 <a>태그를 꾸며주던 부분들을
<button>을 꾸며주게끔 다시 바꿔주어 보기이쁘게 만들어주자.

//수정 전 css 코드

{나머지 코드는 동일}
.
.
.
{밑에 <a> 태그를 꾸며주는 코드만 수정}
.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}


-----------------------------------------------------------------------
//수정 후 css코드

.login-box button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px;
  border: none;  // 테두리 없애는 역할
  background: transparent; // 버튼 배경 투명하게
}

.login-box button:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4,
              0 0 25px #03e9f4,
              0 0 50px #03e9f4,
              0 0 100px #03e9f4;
}

.login-box button span {
  position: absolute;
  display: block;
}

.login-box button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

수정 전에는 <a> 태그를 꾸며주던 부분을 button 으로 바꿔주며 버튼 특유의 배경색과 테두리를 없앰으로써
전의 가입 버튼과 생김새는 똑같지만 역할은 전혀다르게 form 을 제출할수 있게끔 바꿔주었다.

이제 데이터를 넣고 가입 버튼을 누르면 해당 데이터가 action="insert.php"
즉, insert.php 파일로 데이터가 넘어가게 된다.
우린 이 insert.php 파일을 만들어 넘어온 데이터를 mysql에 저장할 것이다.
벌써부터 예상이 조금씩 가기 시작한다. mysql에 가입한 데이터를 넣고 저장하게 되면
이후부턴 로그인할때 넣은 데이터가 mysql에 있는 가입한 데이터와 일치한지 확인하고 일치하면 로그인하는 구조로 동작할 것으로 예상이 된다.

내용이 많다보니 이번글에선 html,css만 만들고
php,mysql을 다루는 부분은
다음 글에서 이어 작성하겠다.

- 회원가입 페이지 만들기 part.1-

'웹 개발 (내 사이트)' 카테고리의 다른 글

AWS EC2 + XAMPP 로 웹 사이트 띄우기 (1)	2023.10.22

현재글php와 mysql을 사용하여 회원가입 페이지 만들기 - part.1

ilsancityboy

일산사람

웹 사이트 만들기 #웹서버 #사이트 만들기 #XAMPP #AWS #AWS EC2 #EC2 #아마존,

Today :
Yesterday :

ilsancityboy