본문 바로가기
코딩 정보/web

[프로젝트] php로 로그인 페이지와 회원가입 페이지를 만들어보자

by 꽁이꽁설꽁돌 2024. 5. 14.
728x90
반응형

목차

    php로 간단한 커뮤니티 로그인 페이지를 만들고자 한다.

     

    데이터 베이스 생성하기

    <?php
    
    $db = mysqli_connect('localhost', 'root', '') or die ('Unable to connect. Check your connection parameters.');
    
    $query = 'CREATE DATABASE IF NOT EXISTS userdata';
    
    mysqli_query($db, $query) or die(mysqli_error($db));
    
    mysqli_select_db($db, 'userdata') or die(mysqli_error($db));
    
    $query = 'CREATE TABLE usertable (
        SID INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
        Login_id VARCHAR(255) NOT NULL, 
        Login_name VARCHAR(255) NOT NULL, 
        Login_pw VARCHAR(255) NOT NULL, 
        Login_email VARCHAR(255) NOT NULL, 
        User_university VARCHAR(255) NOT NULL, 
        Join_date DATETIME NOT NULL DEFAULT NOW(),
        PRIMARY KEY (SID)
    ) 
    ENGINE=MyISAM';
    
    mysqli_query($db, $query) or die(mysqli_error($db));
    echo 'User database successfully created!';
    ?>

     

    userdata가 생긴 모습

     

    회원 가입 페이지

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Developer-community-login-page</title>
        <link rel="stylesheet" href="reset.css" />
        <link rel="stylesheet" href="UserAddPage.css" />
    
    </head>
    
    <body>
        <header>
            <div class="header-wrap">
                <div class="main-log">
                    <img id="header-img" src="./img/sejonglogo.png" alt="LogoImg">
                </div>
                <div class="menu">
                    <a href="UserAddPage.php">회원가입</a>
                    |
                    <a href="LoginPage.php">로그인</a>
                </div>
            </div>
        </header>
        <nav>
            회원가입
        </nav>
        <div class="content-wrap">
            <div class="login-wrap">
                <div class="login-head">
                    회원가입
                </div>
                <form method="POST" action="">
                    <div class="input-wrap">
                        이름
                        <input type="text" name="Login_name" required />
                    </div>
                    <div class="input-wrap">
                        아이디
                        <input type="text" name="Login_id" required />
                    </div>
                    <div class="input-wrap2">
                        <div class="pass-wrap">
                            비밀번호
                            <input class="pass" type="password" name="Login_pw" required />
                        </div>
                        <div class="pass-wrap">
                            비밀번호 (확인)
                            <input class="pass" type="password" name="Login_pw_confirm" required />
                        </div>
                    </div>
                    <div class="input-wrap">
                        학교
                        <input type="text" name="User_university" required />
                    </div>
                    <div class="input-wrap">
                        이메일
                        <input type="text" name="Login_email" required />
                    </div>
                    <input id="submit" type="submit" name="submit" value="회원가입">
    
                </form>
                <img src="./img/sejongwhite.png" alt="LogoImg">
            </div>
        </div>
        <footer>
            <p>사업자 등록 번호: 1004</p>
            <p>
                대표자명: 신혁수
            </p>
            <p>
                주소: 용인
            </p>
            <p>
                전화번호: 010-****-**** (이메일로 연락 주세요)
            </p>
            <p>
                이메일: sins051301@naver.com
            </p>
        </footer>
        <?php
    if(isset($_POST['submit'])) {
        $name = $_POST['Login_name'];
        $id = $_POST['Login_id'];
        $pass = $_POST['Login_pw'];
        $school = $_POST['User_university'];
        $email = $_POST['Login_email'];
        $time = date("Y-m-d H:i:s");
        $servername = 'localhost';
        $dbusername = 'root'; // 사용자 이름 변수명 수정
        $dbpassword = ''; // 비밀번호 변수명 수정
        $dbname = 'userdata';
    
        $db = new mysqli($servername, $dbusername, $dbpassword, $dbname) or die("Connection failed:");
    
        $query = "INSERT INTO usertable (Login_name, Login_id, Login_pw, User_university, Login_email, Join_date) VALUES ('$name', '$id', '$pass', '$school', '$email','$time' )";
        mysqli_query($db, $query) or die(mysqli_error($db));
        header("Location: LoginPage.php");
        exit; // 중요: 페이지 이동 후 스크립트를 중지해야 합니다.
    }
    ?>
    </body>
    
    
    </html>

     

    세종대 디자인 또 가져오기(디자인 감각 없다..)

     

    로그인 페이지

    <!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Developer-community-login-page</title>
        <link rel="stylesheet" href="reset.css" />
        <link rel="stylesheet" href="LoginPage.css" />
    
    </head>
    
    <body>
        <header>
            <div class="header-wrap">
                <div class="main-log">
                    <img id="header-img" src="./img/sejonglogo.png" alt="LogoImg">
                </div>
                <div class="menu">
                    <a href="UserAddPage.php">회원가입</a>
                    |
                    <a href="LoginPage.php">로그인</a>
                </div>
            </div>
        </header>
        <nav>
            로그인
        </nav>
        <div class="content-wrap">
            <div class="login-wrap">
                <div class="login-head">
                    로그인
                </div>
                <form method="POST" action="MainPage.php">
                    <p>
                    <div class="input-wrap">
                        <div class="login-img">𖠌</div>
                        <input type="text" name="Login_id" required />
                    </div>
                    <p>
                    <p>
                    <div class="input-wrap">
                        <div class="login-img">🔓︎</div>
                        <input type="password" name="Login_pw" required />
                    </div>
                    <p>
                    <p>
                    <div class="input-wrap2">
                        <div>
                            <input type="checkbox" id="visible" name="visible">
                            비밀번호 표시
                        </div>
                        <input id="submit" type="submit" value="로그인">
                    </div>
                    </p>
                    <div class="user-add">
                        <div> 회원가입은 <a href="UserAddPage.php">여기</a>서 할 수 있습니다.</div>
                        <img src="./img/sejongwhite.png" alt="LogoImg">
                    </div>
                </form>
            </div>
        </div>
        <footer>
            <p>사업자 등록 번호: 1004</p>
            <p>
                대표자명: 신혁수
            </p>
            <p>
                주소: 용인
            </p>
            <p>
                전화번호: 010-****-**** (이메일로 연락 주세요)
            </p>
            <p>
                이메일: sins051301@naver.com
            </p>
        </footer>
    
    
    </body>
    
    </html>

    로그인 페이지

     

    반응형