XAMPP 설치 및 URL 예약문자, URL 인코딩 실습

XAMPP 설치

윈도우 환경에 APM 환경 구축 (Apache + PHP + MySQL)

Apache, MySQL, PHP, phpMyAdmin(MySQL 을 웹 기반으로 관리하는 프로그램)

구글에서 - xampp 검색 (Apache + MariaDB + PHP + Perl)
https://www.apachefriends.org/

XAMPP for Windows 클릭하여 다운로드

그림1 - XAMPP Windows 설치

APM Setup 은 현재 업데이트를 진행하지 않아 설치하지 말 것! - 악의적인 용도로 사용하는 공격자들이 있음

Installer 실행 시 UAC (User Account Control) 알람이 뜸 - OK 누르고 진행

 

그림2 - XAMPP 설치(1)

그림3 - XAMPP 설치(2)

그림4 - XMAPP 설치(3)

Next 눌러서 진행, 설치 위치: C:\xampp  (보안 상 수정해야 하지만 그대로 진행)
Next 계속 눌러서 진행

그림5 - XAMPP 설치(4)

홈 네트워크 클릭 후 액세스 허용 클릭

 

그림6 - XAMPP 설치(5)

Finish 클릭 후 XAMPP 실행

다양한 프로그램 설치 시 서로 사용하는 포트가 충돌하는 경우가 있어서 수정해야 하는 경우도 있음

이런 경우 Config 에서 포트를 변경해준다.

XAMPP Control Panel 이 뜬다.

 

그림7 - XAMPP 컨트롤 패널

Apache 와 MySQL 의 Actions 를 Start 를 누르면 초록색으로 변경되면서 실행된다.
무언가 에러가 발생하면(포트 중복 등), 우측에 Config 클릭 - Service and Port Settings - 각 프로그램의 포트 변경이 가능하다.

그림7 같은 경우는 기존에 VMware 사용으로 인한 443 포트 중복으로 인해 포트를 변경해주어야 한다.

포트 변경 방법에는 Apache (httpd.conf) 파일을 통한 변경과, 중복된 VMware 에서 설정을 통해 포트를 변경하는 방법이 있는데, VMware의 HTTPS 포트를 변경하는 방법을 사용했다.

 

VMware 변경 방법은 아래 블로그에서 참고하였다.

https://webdir.tistory.com/380

 

VMware 실행 후 Edit > Preference > Shared VMs

기존 443 포트를 11443으로 변경 후 설정을 저장한다.

그림8 - VMware HTTPS 포트 변경

설정 완료 후, XAMPP를 다시 시작하여 Apache와 MySQL을 Start 클릭하여 실행한다.

초록불이 들어오면 정상 실행이 가능하다는 의미다.

그림9 - XAMPP 로 Apache MySQL 실행

인터넷 주소창에 http://localhost/ 입력하여 접속 - Apache 관련 페이지 뜬다 (Apache 정상 접속 확인)

그림10 - localhost 접속

인터넷 주소창에 http://localhost/phpmyadmin/ 입력하여 접속하면 phpmyadmin 페이지가 접속된다. (phpmyadmin 정상 접속 확인)

그림11 - phpmyadmin 페이지 접속

 

 

 

URL 예약문자, URL 인코딩 실습

XAMPP 설치 완료 후 php 파일 작성을 위해 노트 패드를 설치한다.

구글에 notepad++ 검색하여 다운로드
https://notepad-plus-plus.org/downloads/

기본 설정으로 설치 진행, 설치 완료 후 test.php 를 작성한다.

 

윈도우에서 XAMPP 설치 시 웹 서버 기본 루트는 다음과 같다.

저장 위치: C:\xampp\htdocs  

 

htdocs 폴더에 example 라는 새 폴더를 만든다.test.php 파일을 생성한다.

저장 위치: C:\xampp\htdocs\example

 

노트패드로 편집 클릭

그림12 - 노트패드로 test.php 편집

아래 코드를 작성한다.

<?php
	$val1 = $_GET["val1"];
	$val2 = $_GET["val2"];
	$val3 = $_GET["val3"];
	
	echo "val1 : {$val1}<br1>";
	echo "val2 : {$val2}<br1>";
	echo "val3 : {$val3}<br1>";
?>

 

$_GET을 사용하여 GET 메소드로 사용자 입력값을 받는다.

val1이라는 사용자 입력값을 GET 메소드로 받아서 val1 변수에 저장한다.

val이라는 사용자 입력값을  받아서 각 val 변수에서 저장한다.

 

echo 함수를 사용하여 val1 : 사용자 입력값 형태로 출력한다. 

<br> 태그는 \n 개행 문자를 의미한다.

 

코드 저장 후 127.0.0.1/example/test.php 를 주소창에 입력하여 결과값을 확인한다.

localhost 와 127.0.0.1은 동일하므로 둘중 아무거나 입력한다.

그림13 - test.php 접속

그림13과 같이 val 변수에 값이 삽입되지 않아 이런 에러가 발생한것으로 판단된다.

http://127.0.0.1/example/test.php?val1=test1&val2=test2&val3=test3 를 주소창에 입력하여 접속한다.

그림14 - val 변수값 입력 후 test.php 접속

그림14와 같이 각 val 변수에 입력했던 test 값이 출력되는 것을 확인할 수 있다.

?는 파라미터 시작,

=는 파라미터 값 대입,

&는 다음 파라미터 식별자를 의미한다.

URL 예약문자에 대한 설명은 여기를 참고한다.

 

다음은 로그인 페이지를 작성 후 서버로 값을 전달해본다.

그림15 - 폴더에 index.php와 loginAction.php 만들기

index.php와 loginAction.php 파일을 생성한다.

index.php는 로그인 페이지 파일이며, loginAction.php는 로그인 한 데이터를 받아서 출력해주는 파일이다.

로그인 시 입력한 데이터가 서버에 어떻게 전달되는지 확인해본다.

 

아래 코드를 index.php에 작성한다.

<form action="loginAction.php" method="GET">
ID : <input type="text" name="id"><br>
PW : <input type="password" name="pw"><br>
<input type="submit" value="LOGIN">
</form>

 

action은 데이터를 어디로 보내느냐(전송대상)를 의미하며, loginAction.php 파일을 지정해준다.

method는 데이터 전송 메소드를 의미하며, GET으로 설정한다.

 

 

 

아래 코드를 loginAction.php에 작성한다.

<?php
	$id = $_GET["id"];
	$pw = $_GET["pw"];
	
	echo "ID : {$id}<br>";
	echo "PW : {$pw}<br>";
?>

id 변수에 GET으로 받아온 id 값을 저장한다.

pw 변수에 GET으로 받아온 pw 값을 저장한다.

echo 함수를 사용하여 입력된 ID와 PW 값을 출력해준다.

 

 

http://127.0.0.1/example/ 입력하여 접속한다.

index.php는 기본페이지로 따로 index.php를 입력하지 않아도 자동으로 접속된다.

그림15 - index.php 페이지

ID와 PW에 값을 입력 후 LOGIN 버튼을 클릭한다.

그림16- loginAction.php 페이지

ID와 PW에 입력한 값이 출력되는 것을 확인할 수 있다.

URL 확인 시 test+%26%23 으로 값이 변경되어 있는 것을 확인할 수 있는데,

이는 브라우저에서 서버로 데이터를 전송할 때 입력된 데이터를 인코딩하여 전송하는 것을 알 수 있다.

 

공백 → +, %20 (둘중에 하나로 표시됨)

& → %26

# → %23

 

 

 

 

 

 

 

 

 

 

 

 

 

참고

https://www.inflearn.com/course/%EC%9B%B9-%EA%B8%B0%EC%88%A0-%EA%B8%B0%EC%B4%88