웹 서버
우리가 웹사이트에 접속을 하면 홈페이지들이 보이는데 그게 그냥 보이는 것이 아닌
우리 JS, HTML, CSS등을 이용해서 홈페이지를 만든 것 처럼
우리가 접속하는 해당 홈페이지도 각종 웹 파일들이 필요할 건데
그게 우리 컴퓨터에 저장이 되어있다면 괜찮겠지만 그런 것이 아니기 때문에
해당 홈페이지에 필요한 웹 페이지 파일들을 웹 서버라는 곳에 요청을 해서 웹페이지를 보여주게 됩니다.
1. 클라이언트는 서버에 HTML 문서를 요청
2. 웹 서버는 사용자가 요청한 HTML문서를 웹 브라우저에게 전달
3. 웹 브라우저는 웹 서버로부터 전송받은 HTML문서를 읽어들인 후 해석
HTML문서를 보여주기 위해 필요한 img,CSS,JS 같은 리소스들에 대해 URL을 추출하며 동시에 웹 서버에 여러 개의 리소스를 요청하고 웹 서버는 이 여러 개의 요청을 받아들인 뒤 하나로 합쳐서 그 결과를 브라우저에 전송
네이버에 들어가도 네이버를 띄우기 위해서 필요한 이미지, 파일 같은 것들을 웹서버를 통해서
받아오는 것을 알 수 있습니다.
웹 서버의 특징
- 항상 실행 중입니다
- 항상 인터넷과 연결되어 있습니다
웹 서버의 종류
위의 웹 서버들을 사용해서 웹 서버를 열어도 되지만 다운받고, 컴파일하고, 몇 가지 설정을 해줘야하는 번거로움이 있습니다.
우리는 간단하게 웹 서버를 열어서 테스트를 할 목적이기 때문에
Bitnami WAMP Stack 이라고하는 패키지 소프트웨어를 사용할 것 입니다.
패키지 소프트웨어란 다양한 기능을 가진 소프트웨어들을 하나의 소프트웨어로 통합한 것을 말합니다.
WAMP = Windows, Apache, MySQL, PHP 의 머리글자를 모아놓은 단어
비트나미는 아파치 서버뿐 아니라, MySQL(DB), PHP 까지 지원해주는 소프트웨어입니다.
Bitnami 설치
[웹 서버] 비트나미(Bitnami)로 아파치 서버(Apache Server) 설치하기
아파치 서버(Apache Server)를 설치해 봅시다 'Apache HTTP Server'는 '아파치 소프트웨어 재단'에서 개발하고 배포하는 웹 서버입니다. 아파치 서버의 좋은 점 중의 하나는 오픈소스 정책으로 무료로 사��
kwiskey.tistory.com
Bitnami 사용
아파치 서버가 Running 상태여야 합니다.
그리고 루트 폴더 설정을 해주어야 합니다.
Bitnami WMAP root directory 변경 방법
PHP 개발할때 많이 쓰는 개발 환경으로 Bitnami WAMP Stack 를 사용합니다. 일반적으로 어떤 셋팅도 하지 않았다면 root 경로는 'C:\Bitnami\wampstack-7.1.12-0\apache2\htdocs' 가 될것 입니다. 그런데 이런 경..
freehoon.tistory.com
루트 폴더를 우리가 코딩하는 폴더로 설정해주고 server를 Restart 해주면 설정이 완료가 됩니다.
그런 다음 localhost 로 들어가게 되면
다음과 같이 자신의 폴더안에 파일들을 볼수있습니다.
그러면 우리는 html파일에 들어가서 php를 테스트 해볼 수 있습니다.
PHP
<?php
echo "PHP 수업에 잘 오셨습니다!";
?>
echo 함수
<?php
echo "문자열을 출력합니다.<br>";
echo ("인수를 전달할 때 괄호를 사용해도 괜찮습니다!<br>");
ECHO "echo() 함수의 키워드는 대소문자를 구분하지 않습니다!<br>";
echo "첫 번째 인수, ", "두 번째 인수";
//echo("첫 번째 인수, ", "두 번째 인수"); // 오류 발생
?>echo() 함수 C언어의 printf() 함수나 C++의 cout 객체와 같이 HTML 스트림에 문자열을 출력해 줍니다.
변수 선언
$변수이름 = 초깃값;
$var = 10; // 정수값을 대입함
$var = 3.14; // 실수값을 대입함
$var = "PHP"; // 문자열을 대입함
변수 종류
tcpschool.com/php/php_basic_variableType
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
간단한 실습
아이디와 비밀번호를 입력하면
다음과 같이 입력을 하고
(요기서는 검증단계를 생각하지 않았습니다!)
버튼으로 제출을 하면
php 파일에서 값들을 출력을 하는 간단한 실습입니다!
php파일에서 아이디를 검증, 비밀번호를 검증해서
사용자 로그인 성공 혹은 실패를 띄워줄 수 있습니다.
다양하게 활용이 가능합니다.
혹은 파일저장도 할 수 있습니다.
<?php
$ID = $_POST["id"];
print($ID);
$file = fopen("./test.txt",'a+');
$string = $ID."\n";
fwrite($file,$string);
fclose($file);
?>
파일을 저장하기 전의 폴더 구조입니다.
ID를 입력하는칸에 입력을 하고 제출을 하면
text파일을 만들어서 그 안에 ID를 입력하고 파일을 저장하는 방식입니다.
다음과 적고 제출하면
test 텍스트 파일이 생성된 것을 볼 수 있습니다.
그 안을 살펴보면
우리가 입력한 아이디값이 잘 저장되어 있는 것을 볼 수 있습니다.
소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Home Page</title>
<link rel="stylesheet" type="text/css" href="./myhomepage.css">
</head>
<body>
<form action="./server.php" method="POST">
아이디 : <input type="text" name="id" />
비밀번호 : <input type="text" name="pw" />
<button>웹 서버로 제출</button>
</form>
<script src="server.js"></script>
</body>
</html>action 속성의 값은 php 파일을 지정해주어야 합니다.
파일 저장 및 입력 php
<?php
$ID = $_POST["id"];
print($ID);
$file = fopen("./test.txt",'a+');
$string = $ID."\n";
fwrite($file,$string);
fclose($file);
?>
아이디 및 비밀번호 출력 php
<?php
$id = $_POST["id"];
$pw = $_POST["pw"];
?>
<html>
<head>
<meta charset="UTF-8">
<title>My Home Page</title>
<link rel="stylesheet" type="text/css" href="./myhomepage.css">
</head>
<body>
<div>
아이디 :
<?php
print($id);
?>
<br />
비밀번호 :
<?php
print($pw);
?>
</div>
<script src="server.js"></script>
</body>
</html>
'대내 활동 > 웹프로그래밍 상상튜터링' 카테고리의 다른 글
| 웹 프로그래밍 멘토멘티 프로그램 4회차 (0) | 2020.09.12 |
|---|---|
| 웹 프로그래밍 멘토멘티 프로그램 3회차 (2) | 2020.09.05 |
| 웹 프로그래밍 멘토멘티 프로그램 2회차 (2) | 2020.08.30 |
| 웹 프로그래밍 상상튜터링 프로그램 1회차 (0) | 2020.08.25 |