Tutorial/Portfolio

풀스택 도전! PHP로 나만의 블로그 만들기

by @webs 2023. 11. 01.

코딩 10

PHP로 나만의 블로그 만들기 : 로그인 페이지 코딩하기

난이도 중간

소스 다운로드

인덱스 보기 코드 보기 영상 보기

소개

안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시판 및 로그인을 구현함으로써 웹사이트의 활용성을 높일 수 있습니다.

인덱스

디자인

1. 메인 디자인
- 1.1 카드 유형 디자인
2. 블로그 디자인
- 2.1 블로그 메인
- 2.2 블로그 카테고리 영역
- 2.3 블로그 뷰 영역
3. 게시판 디자인
- 3.1 게시판 메인
- 3.2 게시판 글쓰기
- 3.3 게시판 수정하기
- 3.4 게시판 보기
- 3.5 게시판 검색
4. 로그인 디자인
- 4.1 로그인
- 4.2 아이디 찾기
- 4.3 비밀번호 찾기
5. 회원가입 디자인
- 5.1 이용 약관
- 5.2 정보 입력
- 5.3 가입 완료

코딩

1. 기본 셋팅하기
- 1.1 vscode 셋팅하기
- 1.2. 호스팅 셋팅하기
- 1.3. 파일질라 셋팅하기
- 1.4. ftp-simple 셋팅하기
2. CSS 셋팅하기
- 2.1 style.css 만들기
- 2.2 fonts.css 만들기
- 2.3 vars.css 만들기
- 2.4 resets.css 만들기
- 2.5 commons.css 만들기
3. 기본 섹션 코딩하기
- 3.1 기본 레이아웃 잡기
- 3.2 헤더 영역 코딩하기
- 3.3 푸터 영역 코딩하기
4. 인트로 유형 코딩하기
- 4.1 메인 인트로 코딩하기
- 4.2 블로그 인트로 코딩하기
- 4.3 회원가입 인트로 코딩하기
5. 카드 유형 코딩하기
- 5.1 메인 카드 유형1 코딩하기
- 5.2 메인 카드 유형2 코딩하기
- 5.3 메인 카드 유형3 코딩하기
- 5.4 블로그 카드 유형1 코딩하기
- 5.5 블로그 카드 유형2 코딩하기
- 5.6 블로그 카드 유형3 코딩하기
- 5.7 카드 유형 반응형 코딩하기
6. 사이드 영역 코딩하기
- 6.1 인트로 영역 코딩하기
- 6.2 카테고리 코딩하기
- 6.3 인기 포스트 코딩하기
- 6.4 최신 댓글 코딩하기
- 6.5 게시판 코딩하기
- 6.6 메인 공지사항, 댓글 코딩하기
7. 블로그 뷰 페이지 코딩하기
- 7.1 블로그 뷰 영역 코딩하기
- 7.2 블로그 인덱스 영역 코딩하기
- 7.3 블로그 관련글 영역 코딩하기
- 7.4 블로그 댓글 영역 코딩하기
8. 게시판 페이지 코딩하기
- 8.1 게시판 코딩하기
- 8.2 게시판 글쓰기 코딩하기
- 8.3 게시판 글보기 코딩하기
9. 회원가입 페이지 코딩하기
- 9.1 기본 회원가입 코딩하기
- 9.2 회원가입 이용약관 코딩하기
- 9.3 회원가입 정보입력 코딩하기
- 9.4 회원가입 가입완료 코딩하기
10. 로그인 페이지 코딩하기
- 10.1 로그인 코딩하기
- 10.2 아이디 찾기 코딩하기
- 10.3 비밀번호 찾기 코딩하기

개발

1. 기본 셋팅하기
- 1.1 DB 연동하기
- 1.2 MyAdmin 접속하기
- 1.3 회원 테이블 만들기
- 1.4 include 사용하기
2. 회원가입 작업하기
- 2.1 약식 회원가입 작업하기
- 2.2 회원가입 이용약관 작업하기
- 2.3 회원가입 정보입력 작업하기
- 2.4 회원가입 가입완료 작업하기
3. 로그인 작업하기
- 3.1 로그인 구현하기
- 3.2 아이디 찾기
- 3.3 비밀번호 찾기

3. 로그인 작업하기

3.1 로그인 구현하기

이번에는 로그인을 구현해보겠습니다.

assets
connect
create
html
include
join
login
- login.php
- loginSave.php
index.html

버튼을 클릭하면 loginSave.php로 넘어갑니다.

<main id="main" role="main">
<div class="container">
    <section class="login__wrap">
        <h2 class="blind">로그인 영역</h2>
        <div class="login__inner">
            <div class="login__title borderBomStyle">
                <h3>로그인</h3>
                <p>로그인을 하시면 <em>게시글</em> 및 <em>댓글 작성</em>이 가능합니다.</p>
            </div>

            <div class="login__form borderBomStyle">
                <form action="loginSave.php" name="loginSave" method="post">
                    <fieldset>
                        <legend class="blind">로그인 영역</legend>
                        <div>
                            <label for="youID" class="required blind">이메일</label>
                            <input type="text" id="youID" name="youID" placeholder="아이디" class="input__style" required>
                        </div>
                        <div>
                            <label for="youPass" class="required blind">비밀번호</label>
                            <input type="password" id="youPass" name="youPass" placeholder="비밀번호" class="input__style" autocomplete="off" required>
                        </div>
                        <button type="submit" class="btn__style3 mt30">로그인</button>
                    </fieldset>
                </form>
            </div>

            <div class="login__footer">
                <ul class="listStyle">
                    <li>회원가입을 하지 않았다면 회원가입을 먼저 해주세요! <a href="../join/joinAgree.php">회원가입</a></li>
                    <li>아이디가 기억이 나지 않는다면! <a href="findID.php">아이디 찾기</a></li>
                    <li>비밀번호가 기억이 나지 않는다면! <a href="findPW.php">비밀번호 찾기</a></li>
                </ul>
            </div>
        </div>
    </section>
</div>
</main>
<!-- //main -->

loginSave.php는 다음과 같이 코딩합니다.

<?php
    include "../connect/connect.php";
    include "../connect/session.php";

    $youID = mysqli_real_escape_string($connect, $_POST['youID']);
    $youPass = mysqli_real_escape_string($connect, $_POST['youPass']);

    // 사용자 ID로 데이터 조회
    $sql = "SELECT memberID, youID, youName, youPass, youImgSrc FROM members WHERE youID = '$youID'";
    $result = $connect -> query($sql);

    if($result){
        $count = $result -> num_rows;

        if($count == 0){
            // 사용자 ID가 존재하지 않음
            echo "<script>alert('아이디 또는 비밀번호가 없습니다. 회원가입을 해주세요!')</script>";
            echo "<script>history.back();</script>";
        } else {
            $memberInfo = $result -> fetch_array(MYSQLI_ASSOC);

            // password_verify를 사용하여 비밀번호 확인
            if(password_verify($youPass, $memberInfo['youPass'])){
                // 로그인 성공, 세션 설정
                $_SESSION['memberID'] = $memberInfo['memberID'];
                $_SESSION['youName'] = $memberInfo['youName'];
                $_SESSION['youImgSrc'] = $memberInfo['youImgSrc'];

                // 로그인 성공 메시지와 리다이렉트
                echo "<script>alert('로그인에 성공하였습니다.')</script>";
                echo "<script>setTimeout(function(){ window.location.href = '../main/main.php'; }, 200);</script>";
            } else {
                // 비밀번호 불일치
                echo "<script>alert('아이디 또는 비밀번호가 틀렸습니다. 다시 한 번 확인해주세요!')</script>";
                echo "<script>history.back();</script>";
            }
        }
    }
?>

3.2 아이디 찾기

아이디 찾기를 구현해보겠습니다.

assets
connect
create
html
include
join
login
- login.php
- loginSave.php
- findID.php
- findIDCheck.php
index.html

3.3 비밀번호 찾기

비밀번호 찾기를 구현해보겠습니다.

assets
connect
create
html
include
join
login
- login.php
- loginSave.php
- findID.php
- findPW.php
- findPWCheck.php
- findPWUpdate.php
index.html

완성 화면 소스 보기 영상 보기

예제 목록

1. PHP로 나만의 블로그 만들기

WEBSTORYBOY

재능은!
노력 끝에서 발견된다

[18. 개발] 풀스택 도전! PHP로 나만의 블로그 만들기 : 로그인

풀스택 도전! PHP로 나만의 블로그 만들기

소개