회원가입과 로그인 창에 대해서 알아보자

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

설명:

php 를 이용해서 사이트를 만들어 봤습니다.

PHP는 서버 측에서 실행되는 스크립트 언어로, 동적 웹 사이트 및 웹 애플리케이션 개발에 사용됩니다.
PHP는 HTML에 내장되어 있을 수 있으며, 데이터베이스와 상호 작용하고, 사용자 입력 처리 및 파일 업로드와 같은 작업을 수행할 수 있습니다.

PHP는 오픈 소스이며, 많은 개발자들이 커뮤니티를 통해 개발에 참여하고 있습니다.
PHP는 다양한 운영 체제에서 사용할 수 있으며, 웹 서버에서 지원되는 대부분의 프로그래밍 언어와 함께 사용됩니다. PHP는 다양한 웹 프로그래밍 기술을 지원합니다.

예를 들어, PHP는 데이터베이스와의 상호 작용에 사용되는 MySQL, PostgreSQL 및 Oracle과 같은 데이터베이스를 지원합니다. 또한, PHP는 다양한 웹 프레임워크와 함께 사용되어 코드 작성 및 유지 보수를 간소화할 수 있습니다.

많은 대형 웹 사이트 및 애플리케이션, 예를 들어 페이스북, 위키백과, WordPress 및 Magento 등이 PHP를 사용하여 개발되었습니다.

회원가입 페이지와 로그인 페이지에 대해서 설명하겠습니다.

html 과 php 로 나눠서 각각의 페이지를 만든 과정을 설명하겠습니다.

회원가입 - join.html 의 main

<main id="main" class="container">
    <div class="intro__inner center bmStyle">
        <picture class="intro__images">
            <source srcset="assets/img/join01.png, assets/img/join01@2x.png 2x, assets/img/join01@3x.png 3x" />
            <img src="assets/img/join01.png" alt="회원가입 이미지">
        </picture>
        <p class="intro__text">
            회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다.
        </p>
    </div>

    <div class="join__inner">
        <h2>회원가입</h2>
        <div class="join__form">
            <form action="#" name="#" method="post">
                <fieldset>
                    <legend class="blind">회원가입 영역</legend>
                    <div>
                        <label for="youEmail" class="required">이메일</label>
                        <input type="email" id="youEmail" class="inputStyle" name="youEmail" placeholder="이메일을 적어주세요" required>
                    </div>
                    <div>
                        <label for="youName" class="required">이름</label>
                        <input type="text" id="youName" class="inputStyle" name="youName" placeholder="이름을 적어주세요" required>
                    </div>
                    <div>
                        <label for="youPass" class="required">비밀번호</label>
                        <input type="password" id="youPass" class="inputStyle" name="youPass" placeholder="비밀번호를 적어주세요" required>
                    </div>
                    <div>
                        <label for="youPassC" class="required">비밀번호 확인</label>
                        <input type="password" id="youPassC" class="inputStyle" name="youPassC" placeholder="비밀번호를 적어주세요" required>
                    </div>
                    <div>
                        <label for="youPhone">연락처</label>
                        <input type="text" id="youPhone" class="inputStyle" name="youPhone" placeholder="연락처를 적어주세요">
                    </div>
                    <button type="submit" class="btnStyle">회원가입 완료</button>
                </fieldset>
            </form>
        </div>
    </div>
</main>

css 는 link 로 연결합니다.

link rel은 HTML 문서에서 외부 리소스를 참조하는 데 사용되는 태그입니다.
rel은 리소스와 문서 사이의 관계를 지정하고, href는 리소스의 위치를 지정합니다.

일반적으로 사용되는 link rel 값에는 다음과 같은 것들이 있습니다.
- stylesheet: 외부 스타일 시트를 참조할 때 사용합니다.
- icon: 웹 사이트의 아이콘(파비콘)을 지정할 때 사용합니다.
- preload: 리소스의 로딩 우선 순위를 설정할 때 사용합니다.
- dns-prefetch: 도메인 이름 시스템(DNS) 조회를 사전에 수행하여 페이지 로드 속도를 높일 때 사용합니다.
- prefetch: 현재 페이지와 관련이 있는 리소스를 사전에 로드하여 페이지 로드 속도를 높일 때 사용합니다.
- canonical: 검색 엔진 최적화(SEO)를 위해 페이지의 복제 콘텐츠를 제거하기 위해 사용합니다.
- next 및 prev: 페이지 내비게이션을 구현하기 위해 사용합니다.

예를 들어, 스타일 시트를 참조하기 위해 link rel="stylesheet" href="style.css"와 같은 코드를 사용할 수 있습니다. 이렇게 하면 HTML 문서에서 스타일 시트를 가져와서 웹 사이트의 디자인을 지정할 수 있습니다.

다음은 사용된 태그들에 대해 설명하겠습니다.

form action은 HTML 문서에서 사용자 입력을 처리하는 서버 측 스크립트 파일의 URL을 지정하는 데 사용되는 속성입니다. 사용자가 폼을 제출하면, 입력한 데이터는 지정된 action URL로 전송되며, 서버에서는 이를 처리하여 적절한 응답을 보내줍니다.

form action 속성에 지정되는 URL은 대개 서버 측 스크립트 파일(예: PHP, ASP.NET, Node.js 등)의 경로입니다. 이 스크립트 파일에서는 폼 데이터를 처리하고, 필요에 따라 데이터베이스와 상호 작용하거나 다른 작업을 수행할 수 있습니다.

예를 들어, 로그인 폼을 제출할 때, form action="login.php"와 같은 코드를 사용하여 login.php 파일로 폼 데이터를 전송할 수 있습니다. 이 파일에서는 사용자가 입력한 아이디와 비밀번호를 검증하여 로그인을 처리하고, 필요에 따라 사용자를 적절한 페이지로 리디렉션할 수 있습니다.

form action과 method는 HTML 문서에서 사용자 입력을 처리하는 폼(form)을 정의하는 데 사용되는 속성입니다.
form action은 폼 데이터를 전송할 서버 측 스크립트 파일의 URL을 지정하며, method는 데이터를 전송하는 HTTP 메서드를 지정합니다.

대개 method 속성은 GET 또는 POST 값 중 하나를 갖습니다.
- GET : 데이터를 URL의 쿼리 문자열(query string)로 전송합니다. 쿼리 문자열은 action 속성의 URL 뒤에 ? 기호를 사용하여 추가됩니다. 이 방식은 URL에 데이터가 노출되므로 보안상 취약할 수 있지만, 즐겨찾기와 뒤로 가기 버튼과 같은 브라우저 기능을 사용하기 용이합니다. 또한, 데이터 전송량이 적기 때문에 대개 데이터 조회에 사용됩니다.
- POST : 데이터를 HTTP 요청 본문(request body)에 포함시켜 전송합니다.
이 방식은 URL에 데이터가 노출되지 않으므로 보안상 안전합니다. 또한, 전송하는 데이터의 양이 많을 때 사용됩니다.

예를 들어, 로그인 폼을 POST 메서드로 전송하려면, form action="login.php" method="POST"와 같은 코드를 사용할 수 있습니다.
이렇게 하면 사용자가 입력한 아이디와 비밀번호가 login.php 파일로 전송되며, login.php 파일에서는 이 데이터를 $_POST 배열을 사용하여 처리할 수 있습니다.

<fieldset> 태그는 HTML 폼(form) 요소를 묶어서 관련된 정보를 그룹화할 때 사용하는 태그입니다.
<fieldset> 태그는 보통 <legend> 태그와 함께 사용하여 그룹화된 폼 요소의 설명을 추가할 수 있습니다.
<fieldset> 태그를 사용하면 폼 요소를 논리적으로 그룹화할 수 있어서 사용자가 폼을 쉽게 이해하고 입력할 수 있습니다. 또한, CSS를 사용하여 <fieldset> 요소를 스타일링할 수 있어서 폼의 레이아웃을 구성하는 데 유용합니다.

아래는 <fieldset>과 <legend> 태그를 사용하여 폼 요소를 그룹화하는 예시 코드입니다.
<form>
  <fieldset>
    <legend>주문 정보</legend>
    <label for="product">제품명:</label>
    <input type="text" id="product" name="product"><br><br>
    <label for="quantity">수량:</label>
    <input type="number" id="quantity" name="quantity"><br><br>
  </fieldset>
  
  <fieldset>
    <legend>배송 정보</legend>
    <label for="name">수령인 이름:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="address">배송 주소:</label>
    <input type="text" id="address" name="address"><br><br>
  </fieldset>
  
  <button type="submit">주문하기</button>
</form>
위 코드에서 fieldset 태그는 주문 정보와 배송 정보 두 그룹으로 폼 요소를 나누어 묶어주고, legend 태그를 사용하여 각 그룹의 제목을 지정해주었습니다. 이렇게 하면 사용자가 폼을 쉽게 이해하고 입력할 수 있습니다.

label for는 HTML 문서에서 폼(form) 요소와 연결된 레이블(label)을 지정하는 데 사용되는 속성입니다.
label 태그는 폼 요소에 대한 설명을 제공하며, 이 설명은 스크린 리더 등 보조 기술을 사용하는 사용자들에게 도움이 됩니다.

label for 속성에는 연결할 폼 요소의 id 속성 값이 지정됩니다.
이렇게 하면 해당 레이블을 클릭하면 폼 요소를 활성화할 수 있으므로, 사용성을 향상시킬 수 있습니다. 또한, 레이블을 클릭하여 폼 요소를 활성화하면, 해당 요소의 커서 위치가 자동으로 이동합니다.

예를 들어, 아래 코드는 사용자명 입력란에 대한 레이블을 지정합니다.
<label for="username">사용자명:</label>
<input type="text" id="username" name="username">
위 코드에서 label 태그는 for="username" 속성을 갖습니다. 이 속성 값은 연결할 폼 요소의 id 값인 username을 지정합니다. 이렇게 하면 레이블을 클릭하면 id="username"을 갖는 input 요소가 활성화됩니다.

input type은 HTML 문서에서 폼(form) 요소의 유형을 지정하는 데 사용되는 속성입니다.
input 태그는 다양한 유형의 폼 요소를 생성할 수 있으며, type 속성을 사용하여 폼 요소의 유형을 지정합니다.

아래는 일반적으로 사용되는 몇 가지 input type입니다.
- text : 한 줄의 텍스트 입력란을 생성합니다.
- password : 비밀번호 입력란을 생성합니다. 입력된 값은 마스킹 처리됩니다.
- checkbox : 체크박스를 생성합니다.
- radio : 라디오 버튼을 생성합니다. 하나의 그룹으로 묶어 하나만 선택 가능합니다.
- submit : 폼을 서버에 제출하는 버튼을 생성합니다.
- reset : 폼을 초기화하는 버튼을 생성합니다.
- file : 파일 선택 입력란을 생성합니다.
- hidden : 사용자에게 보이지 않는 폼 데이터를 전송할 때 사용합니다.
- date, time, datetime-local : 각각 날짜, 시간, 날짜와 시간을 입력할 수 있는 입력란을 생성합니다.

아래는 input type을 사용하여 텍스트 입력란과 제출 버튼을 생성하는 예시 코드입니다.
<form>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="제출">
</form>
위 코드에서 input 태그는 type="text" 속성을 갖습니다. 이 속성 값은 한 줄의 텍스트 입력란을 생성합니다.
input 태그의 type="submit" 속성은 제출 버튼을 생성합니다. 이 버튼을 클릭하면 폼 데이터가 서버로 전송됩니다.

회원가입 - join.php

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회원가입 페이지</title>

    <?php include "../include/head.php" ?>
    <!-- head -->

</head>
<body class="gray">
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- header -->

    <main id="main" class="container">
        <div class="intro__inner center bmStyle">
            <picture class="intro__images">
                <source srcset="../assets/img/join01.png, ../assets/img/join01@2x.png 2x, ../assets/img/join01@3x.png 3x" />
                <img src="../assets/img/join01.png" alt="회원가입 이미지">
            </picture>
            <p class="intro__text">
                회원가입을 해주시면 다양한 정보를 자유롭게 볼 수 있습니다.
            </p>
        </div>

        <div class="join__inner">
            <h2>회원가입</h2>
            <div class="join__form">
                <form action="joinSave.php" name="join" method="post">
                    <fieldset>
                        <legend class="blind">회원가입 영역</legend>
                        <div>
                            <label for="youEmail" class="required">이메일</label>
                            <input type="email" id="youEmail" name="youEmail" placeholder="이메일을 적어주세요" required>
                        </div>
                        <div>
                            <label for="youName" class="required">이름</label>
                            <input type="text" id="youName" name="youName" placeholder="이름을 적어주세요" required>
                        </div>
                        <div>
                            <label for="youPass" class="required">비밀번호</label>
                            <input type="password" id="youPass" name="youPass" placeholder="비밀번호를 적어주세요" required>
                        </div>
                        <div>
                            <label for="youPassC" class="required">비밀번호 확인</label>
                            <input type="password" id="youPassC" name="youPassC" placeholder="비밀번호를 적어주세요" required>
                        </div>
                        <div>
                            <label for="youPhone" class="required">연락처</label>
                            <input type="text" id="youPhone" name="youPhone" placeholder="연락처를 적어주세요" required>
                        </div>
                        <button type="submit" class="btnStyle">회원가입 완료</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </main>
    <!-- //main -->

</body>
</html>

php 역시 사용된 태그들에 대해서 설명하겠습니다.

include는 PHP에서 파일을 포함(include)하는 데 사용되는 함수입니다. 다른 PHP 파일의 내용을 현재 파일에 포함시키고 실행시킬 수 있습니다.
include 함수는 include할 파일의 경로를 매개변수로 받습니다.
경로는 절대경로나 상대경로로 지정할 수 있으며, include되는 파일이 실행 중이던 현재 파일과 같은 디렉토리에 있는 경우에는 파일 이름만 지정할 수도 있습니다.

아래는 include 함수를 사용하여 다른 PHP 파일을 포함시키는 예시 코드입니다.
<?php
  include 'header.php';
?>

<h1>메인 페이지</h1>
<p>이것은 메인 페이지의 내용입니다.</p>

<?php
  include 'footer.php';
?>
위 코드에서 header.php와 footer.php 파일은 메인 페이지 파일과 같은 디렉토리에 위치해 있습니다. include 함수를 사용하여 header.php 파일의 내용을 현재 파일에 포함시키고, footer.php 파일의 내용도 포함시켰습니다.

이렇게 함으로써 header.php 파일과 footer.php 파일에 공통으로 사용되는 HTML 코드를 중복해서 작성할 필요 없이 메인 페이지 파일에서 포함시켜 사용할 수 있습니다.

include 를 이용해서 이미 만들어 놓은 php 파일들을 연결해서 사용한다고 생각하면 됩니다.

그 외에는 join.html 과 같은 걸 알 수 있습니다.

로그인 - login.html 의 main

<main id="main" class="container">
   <div class="login__inner">
        <h2>로그인</h2>
        <p>로그인을 하시면 게시글 및 댓글 작성이 가능합니다.<br>회원가입을 하면 로그인이 가능합니다.</p>
        <div class="login__form btStyle bmStyle">
            <form action="#" name="#" method="post">
                <fieldset>
                    <legend class="blind">로그인 영역</legend>
                    <div>
                        <label for="youEmail" class="blind required">이메일</label>
                        <input type="email" id="youEmail" class="inputStyle" name="youEmail" placeholder="이메일을 적어주세요" required>
                    </div>
                    <div>
                        <label for="youPass" class="blind required">비밀번호</label>
                        <input type="password" id="youPass" class="inputStyle" name="youPass" placeholder="비밀번호를 적어주세요" required>
                    </div>
                    <button type="submit" class="btnStyle2 mt20">로그인</button>
                </fieldset>
            </form>
        </div>
        <div class="login__footer">
            <ul class="listStyle">
                <li> 회원가입을 하지 않았다면 회원가입을 먼저 해주세요. <a href="join.html">회원가입</a></li>
                <li> 아이디가 기억나지 않는다면 <a href=".html">아이디 찾기</a></li>
                <li> 비밀번호가 기억나지 않는다면 <a href=".html">비밀번호 찾기</a></li>
            </ul>
        </div>
   </div>
</main>

추가로 사용된 태그에 대해서 설명하겠습니다.

<legend> 태그는 <fieldset> 요소의 캡션(caption)을 정의하는 데 사용되는 HTML 태그입니다. <legend> 태그를 사용하면 <fieldset> 요소의 목적을 간단하게 설명할 수 있습니다.

아래는 <fieldset>과 <legend> 태그를 사용하여 폼 요소를 그룹화하는 예시 코드입니다.
<form>
  <fieldset>
    <legend>주문 정보</legend>
    <label for="product">제품명:</label>
    <input type="text" id="product" name="product"><br><br>
    <label for="quantity">수량:</label>
    <input type="number" id="quantity" name="quantity"><br><br>
  </fieldset>
  
  <fieldset>
    <legend>배송 정보</legend>
    <label for="name">수령인 이름:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="address">배송 주소:</label>
    <input type="text" id="address" name="address"><br><br>
  </fieldset>
  
  <button type="submit">주문하기</button>
</form>
위 코드에서 legend 태그는 fieldset 요소의 목적을 설명합니다.

예를 들어 주문 정보라는 legend를 가진 fieldset에는 제품명과 수량 등의 주문 정보 폼 요소가 포함되어 있습니다.
이렇게 하면 사용자가 폼을 쉽게 이해하고 입력할 수 있습니다.

로그인 - login.php

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>로그인 페이지</title>

    <?php include "../include/head.php" ?>
    <!-- head -->

</head>
<body class="gray">
    <?php include "../include/skip.php" ?>
    <!-- //skip -->

    <?php include "../include/header.php" ?>
    <!-- header -->

    <main id="main" class="container">
    <div class="login__inner">
            <h2>로그인</h2>
            <p>로그인을 하시면 게시글 및 댓글 작성이 가능합니다.<br>회원가입을 하면 로그인이 가능합니다.<br>admin@web.com/1234</p>
            <div class="login__form btStyle bmStyle">
                <form action="loginSave.php" name="loginSave" method="post">
                    <fieldset>
                        <legend class="blind">로그인 영역</legend>
                        <div>
                            <label for="youEmail" class="blind required">이메일</label>
                            <input type="email" id="youEmail" class="inputStyle" name="youEmail" placeholder="이메일을 적어주세요" required>
                        </div>
                        <div>
                            <label for="youPass" class="blind required">비밀번호</label>
                            <input type="password" id="youPass" class="inputStyle" name="youPass" placeholder="비밀번호를 적어주세요" required>
                        </div>
                        <button type="submit" class="btnStyle2 mt20">로그인</button>
                    </fieldset>
                </form>
            </div>
            <div class="login__footer">
                <ul class="listStyle">
                    <li> 회원가입을 하지 않았다면 회원가입을 먼저 해주세요. <a href="join/join.html">회원가입</a></li>
                    <li> 아이디가 기억나지 않는다면 <a href=".html">아이디 찾기</a></li>
                    <li> 비밀번호가 기억나지 않는다면 <a href=".html">비밀번호 찾기</a></li>
                </ul>
            </div>
       </div>
    </main>
    <!-- //main -->

</body>
</html>

이런식으로 php 를 만들어서 사용할 수 있습니다.

일	월	화	수	목	금	토
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	30	31

jongyung

회원가입과 로그인 창에 대해서 알아보자

- Frederick Philips Brooks

설명:

회원가입 - join.html 의 main

회원가입 - join.php

로그인 - login.html 의 main

로그인 - login.php

'PHP'의 다른글

티스토리툴바

회원가입과 로그인 창에 대해서 알아보자

- Frederick Philips Brooks

설명:

회원가입 - join.html 의 main

회원가입 - join.php

로그인 - login.html 의 main

로그인 - login.php

'PHP'의 다른글

관련글

티스토리툴바