로그인페이지 만들기 - SFTP, web root, NAT, PHP, GET방식, POST방식

SFTP : SSH를 활용해서 파일을 전송하는 프로토콜

* 가상머신에 어떤 파일을 넣고 싶을 때 SFTP를 사용하면 편하다

 

 

🔧 sudo python3 -m http.server 80 이란?

이 명령어는 Python을 이용해서 **간단한 웹서버(HTTP 서버)**를 실행시키는 명령입니다.

 

• 현재 터미널 위치(디렉토리)에 있는 파일들을 웹을 통해 공유할 수 있게 해줍니다.
• 웹브라우저에서 http://<서버의IP주소> 로 접속하면, 그 디렉토리의 파일 목록이 나옵니다.
• 해당 파일을 클릭해서 다운로드할 수도 있어요.

 

✅ 웹 서버에게 어떻게 파일을 요청할까?

• 웹 브라우저를 통해 파일을 요청할 수 있습니다.
• 브라우저의 주소창에 URL을 입력하면 웹 서버에 요청이 전달됩니다.

[Protocol]://[Domain or IP Address]:[Port]/[File Path]

 

Example :

http://172.16.146.111:80/normaltic_pic.jpeg

 

Linux 필수 단축어

1. pwd 현재경로 보는법

2. mkdir 디렉토리 만들기

 

 

✅ Web Root 경로란?

• Web Root 경로는 웹서버가 실행된 위치를 기준으로 한 파일 공유의 시작점입니다.
• 웹 브라우저가 요청하는 파일들은 이 Web Root 아래에 있어야 웹 서버가 응답할 수 있어요.

 

⚠️ Web Root가 루트(/) 경로일 경우의 위험성

• 만약 웹서버를 시스템의 루트 디렉토리(/)에서 실행하면,
• 시스템 전체 파일이 웹을 통해 모두 공개될 수 있습니다.
• 이는 보안상 매우 위험한 설정입니다.

 

✅ URL 비교 및 주요 개념 정리

항목	URL 1	URL 2
URL	http://172.16.146.111:80/normaltic_pic.jpeg	https://www.naver.com:443/index.html
Protocol	http (비보안)	https (보안 연결)
Address Type	IP 주소	도메인 이름
Port	80 (HTTP 기본 포트)	443 (HTTPS 기본 포트)
File	normaltic_pic.jpeg	index.html

 

 

 

📎 포트 개념 정리

프로토콜	기본 포트
HTTP	80
HTTPS	443

 

💡 포트를 명시하지 않아도 브라우저는 기본 포트를 자동으로 사용합니다.

예: http://example.com → 내부적으로는 http://example.com:80

 

 

🗂️ 파일 경로 지정 안 했을 때?

• URL 뒤에 /만 적고 파일명을 생략하면, 웹서버는 기본 파일(index.html 등) 을 자동으로 보여줍니다.
  • 예: http://172.16.146.111/ → index.html 자동 제공 (있는 경우)

 

 

🌐 NAT 네트워크와 인터넷 서버

✅ NAT란?

• NAT (Network Address Translation) 는 사설 IP를 공인 IP로 변환하는 기술입니다.
• 로컬 네트워크에서는 보통 사설 IP (예: 192.168.x.x, 172.16.x.x) 를 사용합니다.

 

❓ 왜 인터넷 망에 있는 서버를 빌려야 할까?

• 사설망(NAT 내)에서는 외부에서 직접 접속할 수 없습니다.
• 따라서 인터넷에 직접 연결된 공인 IP 서버(호스팅 서버, 클라우드 등) 를 사용해야
• 누구나 접근 가능한 웹 서비스를 만들 수 있습니다.

 

✅ 정적 페이지 vs 동적 페이지

 

📁 정적 페이지 (Static Page)

• 미리 만들어진 .html, .jpg, .txt 파일 등
• 웹서버가 직접 클라이언트에게 전달
• 예: A_Score.txt, B_Score.txt 같은 성적표 텍스트 파일

 

 

⚙️ 동적 페이지 (Dynamic Page)

• .php, .jsp, .asp 등 서버에서 실행되어야 하는 코드가 포함된 페이지
• 사용자의 요청에 따라 내용이 바뀌는 페이지

 

Client (브라우저)
   ↓ 요청
Web Server (정적 파일 처리)
   ↓ 전달
WAS (Web Application Server, 동적 파일 처리)
   ↓ 요청
DB (데이터베이스, 실제 데이터 저장)

 

📌 동작 흐름 예시: 클라이언트가 score.php 요청

 

1. 클라이언트가 score.php 파일 요청
2. 웹서버가 요청을 보고 “이건 내가 처리할 수 없는 동적 파일이네!” 하고 WAS로 전달
3. WAS가 score.php 내부의 코드를 실행
4. (예: 어떤 학생 이름에 따라 다른 성적을 가져오도록)
5. 결과를 HTML 형태로 변환해서 웹서버에 전달
6. 웹서버는 그 결과를 클라이언트에게 전달

✔️ 즉, PHP 코드 같은 백엔드 코드는 웹 브라우저의 “소스 보기”에서는 보이지 않습니다.

서버가 이미 코드를 실행해서 결과만 사용자에게 보내기 때문입니다.

 

✅ PHP 코드 구간

<?php

    // 여기가 서버에서 실행되는 백엔드 코드

?>

• 이 구간은 서버(WAS) 가 실행합니다.
• 결과만 클라이언트에게 전달되므로 백엔드 코드는 외부에 노출되지 않습니다.

<? ~~~~~~~~~~~~ ?> 사이가 백엔드 php 언어 이다. WAS가 실행해야하는 코드이다.

 

 

드래그 한 부분은 서버의 소스코드이기 때문에 WAS가 변환해서 줘서 백엔드 코드는 네이버 소스보기로 확인 할 수 없다.

 

✅ PHP 언어와 파라미터 처리

📌 $_GET['name'] 이란?

• $_GET은 GET 방식으로 전달된 파라미터를 받아오는 PHP의 전역 변수입니다.
• 예시 
  • URL이 http://example.com/score.php?name=Alice 라면,
  • $_GET['name']  // 결과: "Alice"

 

🧾 파라미터란?

• 웹 페이지에 데이터를 전달하기 위해 사용되는 정보
• 사용자가 웹서버에게 보내는 값
• 예: 이름, 검색어, 로그인 정보 등

 

🔄 파라미터를 보내는 방식 (2가지)

1. GET 방식

• 파라미터가 URL에 붙어서 전달됨
• 형식:

http://example.com/page.php?name=normaltic

• 특징:
  • 주소창에 보임
  • 즐겨찾기 가능
  • 길이 제한 있음
  • 민감한 정보 전달에는 부적절

 

2. POST 방식

• 파라미터가 HTTP 본문(body) 에 담겨 전달됨
• 주소창에 노출되지 않음
• 특징:
  • 데이터가 숨겨져 있음
  • 많은 양의 데이터 전달 가능
  • 보안에 더 적합

 

✅ Front-End, Back-End 비교

구분	Front-End	Back-End
위치	클라이언트(브라우저)	서버
실행 주체	사용자 브라우저	서버 컴퓨터
주요 기능	화면 표시, 인터랙션	데이터 처리, 로직 수행
언어	HTML, CSS, JavaScript	PHP, ASP, JSP 등
사용자 눈에 보임	보인다	보이지 않는다

 

 

✅ PHP 맛보기

GET방식

POST방식

📌 form 태그란?

• 사용자로부터 데이터를 입력받아 서버에 전달하는 태그
• 보통 input, select, textarea 등의 입력 요소들과 함께 사용됨

🧾  input 태그와 name 속성

• input 태그는 사용자 입력을 받는 필드
• name 속성은 서버에 전달되는 파라미터의 이름을 의미함

 

✅ POST 방식의 데이터 전달

• POST 방식은 URL에 데이터를 포함하지 않습니다.
• 대신, **HTTP 요청의 Body(본문)**에 데이터를 담아서 서버로 전송합니다.

URL name=stone으로 실행시 결과화면

 

---

 

✅ 로그인 페이지 만들기 샘플

1. placeholder 를 사용하면 무엇을 입력하라고 하는지 표시 시킬 수 있다.

 

2. 전달하고 싶은 페이지를 action= 을 이용해서 적어주면 로그인을 했을때 페이지가 이동하면서 연결이 된다.

 

 

 

1주차 과제

 

[1] 복습 (웹 서버 이해)

[2] 간이 로그인 페이지 만들기 (DB연결x)

(admin / admin1234) 라고 입력했을 때 로그인을 시켜주는 페이지를 만들어 보기

<?php

$userName = $_POST[’id’];

if($userName == “admin” && userPass == “admin1234”) {

로그인 성공 , 실패

}

?>

[3] 로그인 페이지 이쁘게 만들기 (CSS / Bootstrap) 둘 중 하나를 공부해야함

 

 

✅ 로그인 페이지 만들기

login.php

<?php
session_start();

// DB 연결
$conn = new mysqli("localhost:3306", "choyongyeop", "1234", "test");
if ($conn->connect_error) {
    die("DB 연결 실패: " . $conn->connect_error);
}


// 폼이 제출되었을 때만 처리
// 사용자의 id 값과 password 값이 존재할 경우, 전달된 값을 id와pw에 변수에 저장한다.
if (isset($_POST['id']) && isset($_POST['password'])) {
    $id = $_POST['id'];
    $pw = $_POST['password'];

    // DB에서 해당 ID의 사용자 정보 조회
    $sql = "SELECT * FROM users WHERE id = '$id'";
    $result = $conn->query($sql); // 위에서 만든 sql쿼리를 실제로 mysql에 실행하는 부분

    if ($result && $result->num_rows > 0) {  // 사용자가 입력한 아이디가 DB에 존재하면 실행
        $user = $result->fetch_assoc(); // DB 결과를 배열로 가져오기

        // 비밀번호 확인
        if (password_verify($pw, $user['password'])) {
            $_SESSION['id'] = $id;  // 세션 저장
            header("Location: login_prcc.php");  // 로그인 성공
            exit;
        } else {
            header("Location: login_fail.php");  // 비밀번호 틀림
            exit;
        }
    } else {
        header("Location: login_fail.php");  // ID가 없음
        exit;
    }
}

?>

<!DOCTYPE html>
<html lang="ko">
<head>
        <meta charset="UTF-8">
        <title>Login Page</title>

        <style>
          body {
                display: flex; /* 내부 요소를 정렬할 수 있게 함(기본 정렬 방식 대신 유연한 배치가 가능해짐) */
                justify-content: center; /* 가로 방향 가운데 정렬*/
                align-items: center; /* 세로 방향 가운데 정렬*/
                height: 100vh; /* 화면 전체 높이        
                                100vh는 화면 높이의 100%를 의미함 → 페이지 전체를 꽉 채워서 가운데 배치 가능 */
                margin: 0; /*기본 브라우저 여백을 없애서 딱 맞게 배치*/
                background-color: #f0f2f5;
                }

          .container {
                text-align: center;
                padding: 40px; /*박스 안쪽 여백을 40픽셀로 설정해서 넉넉한 공간 확보*/
                border-radius: 12px; /* 박스 모서리를 둥글게*/

                     }

         img {
                width: 500px; /*이미지 가로 너비를 500픽셀로 고정한다*/
                border-radius: 12px; /* 이미지 모서리를 둥글게*/
                margin-bottom: 20px; /* 이미지 아래쪽 공간에 20px 추가해서 폼 사이의 여백 추가*/
             }
        </style>
</head>

<body>
        <div class="container">
                <!-- src 이미지를 가져오는데 만약 못불러올 경우 alt 내용을 출력하고 사진의 크기는 500으로 가져와라 -->
          <img src="search.pstatic.jpeg" alt="Login Banner" width="500" />

          <form method="POST">
                <!-- 서버에서 name 또는 value 이름으로 값을 받을 수 있음, placeholder는 입력창에 흐리게 표시되는 글자 역할-->
                <input type="text" name="id" placeholder="User ID" />
                <input type="password" name="password" placeholder="User Password" />
                <input type="submit" value="Login" />

          </form>

          <form action="register.php" method="POST" style="padding-top: 20px;">
                <input type="submit" value="회원가입" />
          </form>

        </div>
</body>
</html>

 

login_prcc.php

<?php
session_start(); //세션 시작

if (!isset($_SESSION['id'])) {
    echo "<h1>세션이 만료되었거나 로그인하지 않았습니다.</h1>";
    exit;
}

$id = htmlspecialchars($_SESSION['id']);
echo "<h1>$id 님, 로그인에 성공했습니다 🎉</h1>";

// 학생 이름이 GET으로 전달되었을 때만 실행
if (isset($_GET['name'])) {
    $name = $_GET['name'];

    // DB 연결 정보 (내 DB 환경에 맞게 수정!)
    $host = "localhost:3306";
    $user = "choyongyeop";
    $pass = "1234";         // ← 너의 MySQL 비밀번호로 변경
    $dbname = "test";      // ← 너가 만든 DB 이름


    // DB 연결
    $conn = new mysqli($host, $user, $pass, $dbname);

    // 연결 확인
    if($conn){
            echo "DB Connect OK";
    }else{
            echo "DB Connect Fail";
    }

    // 학생 점수 조회 쿼리
    $sql = "select score from test_table where name = '$name' ";
    $result = mysqli_query($conn, $sql);
    $row = mysqli_fetch_array($result);   // 조회된 데이터 가져오기
    $score = $row['score'];               // 점수 값을 변수로 꺼냄



    // 결과 확인
    if($result) {
            echo "<h2>{$name} 학생의 점수는 {$score}점 입니다. </h2>";
    }else{
            echo "<h2>{$name} 학생의 점수를 찾을 수 없습니다. </h2>";
    }



}
?>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>로그인 성공</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh; /*현재 브라우저 화면 높이를 꽉 채움(세로 전체) */
            margin: 0;
            font-family: 'Segoe UI', sans-serif; /*첫번째가 없을 경우 빽업용 글씨 sans-serif로 대체함 */
            background-color: #f0f2f5;
        }
        h1 {
            font-size: 36px;
            margin-bottom: 20px;
            color: #333;
        }
    </style>
</head>

 

 

로그인 페이지

 

로그인 성공 시

 

로그인 실패 시