웹 애플리케이션 만들기 [PHP 실습]

🌐 Web/웹 애플리케이션 만들기

웹 애플리케이션 만들기 [PHP 실습]

Kyle99 2022. 9. 18. 23:28

PHP 실습

PHP는 웹브라우저에서 주소를 입력했을 시 웹서버가 PHP에게 전송을 한다.

PHP는 FILE을 주고받으며 해석된 PHP를 다시 웹서버에게 전송을 하고,

웹서버는 웹브라우저에게 다시 돌려주게 되면서 사용자는 확인할 수 있다.

입력값

<?php
echo $_GET['id'];
 ?>

이렇게 $_GET을 통해 id값을 출력시킬 경우,

url을 통해 id값을 설정할 수 있다.

http://localhost/php/1.php?id=1

이렇게 파일 이름 옆?를 통해서 id=1이라고 지정을 하면 화면에 1이 출력되는 걸 확인할 수 있다.

이렇게 id값으로 1을 주게 되면 1.php라는 파일 안에 id값이 1로 지정한다는 의미이다.

또한 입력값을 추가하려고 한다면 다음과 같이 수정하면 된다.

<?php
echo $_GET['name'].",".$_GET['id'];
 ?>

이렇게 추가를 했을 시, url에서는 &표시를 사용하면 된다.

http://localhost/php/1.php?name=PIDS&id=1

이러면 화면에 PIDS,1이 출력되는 걸 확인할 수 있다.

여기서 입력값을 더 추가한다면, 위와 같은 방법으로 추가할 수 있다.

이렇게 주소와 값을 구분할 때는 ?를 사용한다.

또한, 값과 값을 구분할때는 &를 사용한다.

이것이 PHP에서 입력값을 받는 방법이다.

txt 파일 확인

php와 같은 파일 안에 1.txt라는 파일을 생성한다.

1.txt의 내용은 codingeverybody이고,

해당 내용을 php에서 출력을 하는 방법이다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <?php
      echo file_get_contents("1.txt");
     ?>
  </body>
</html>

이렇게 코드를 입력하고 화면을 확인하면 codingeverybody가 출력이 된다.

여기서 file_get_contents는 php에 내장되어 있는 함수이다.

그것의 입력값으로 읽으려고 하는 파일의 이름을 주면, file_get_contents함수에 의해 해당 txt 파일이 return 된다.

그리고 함수 앞에 echo를 붙이게 되면, return 된 txt 파일이 출력된다.

여기서 2.txt 파일을 하나 더 생성해보자.

2.txt 파일의 내용은 Hello World이다.

이렇게 여러 txt 파일이 있을 경우, 입력값에 따라서 txt 파일을 출력할 수 있다.

    <?php
      echo file_get_contents( $_GET['id'].".txt");
     ?>

이렇게 수정을 한다면, url의 id값으로 1을 주게 되면 codingeverybody가 출력이 되고,

2를 주게되면 Hello World가 출력이 된다.

실습

그렇다면, 이제 만들던 JavaScript교육 페이지의 index.html 파일을 php파일로 만들고, index파일안에 포함되어있던,

html과 정보를 뜯어내서, html은 php로 가고, 실제 정보는 txt로 가게 해보자.

그러기에 앞서, index.html파일을 Duplicate 하여 index.php 파일을 생성한다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
	<header>
		<h1><a href="http://localhost/">JavaScript</a></h1>
	</header>
	<nav>
		<ol>
			<?php
				echo file_get_contents("list.txt");
			 ?>
		</ol>
	</nav>
	<div id="control">
	<input type="button" value="Light Mode" id = "Light_btn"/>
	<input type="button" value="Dark Mode" id = "Dark_btn"/>
	</div>
	<article>
		<h3>이 페이지는 JavaScript를 교육하는 페이지입니다.</h3>
	</article>
	<script src="http://localhost/script.js"></script>
</html>

위 코드에서 ol 사이에 있던 list는 카테고리였다.

그 카테고리의 내용들은 list.txt 파일로 옮기고, 그 자리에는 php문법을 사용하여 list.txt 파일을 return 하였다.

그리고 홈페이지를 새로고침 하면 변경되는 게 없다.

이렇게 정보와 html을 분리한다면, 만약 카테고리가 하나가 추가가 되었을 경우에,

모든 html에서 추가하여하는 상황을, list.txt의 수정으로 모든 html에 적용할 수 있다.

<article> 태그 안의 내용 또한 정보이다. 해당 내용들도 각각 1.txt~ 3.txt까지 만들어서 정보를 옮겨 담아야 한다.

echo file_get_contents($_GET['id'].".txt");

이렇게 $_GET ['id']를 사용하면, id값에 따라 내용이 달라진다.

하지만, 이렇게만 작성할 시 index.php에서는 id값이 있지가 않아서,

계속 php가 id값을 찾으려고 할 것이다.

그렇기에, if문을 사용해 id값이 존재할 때만 실행하게 만들어야 한다.

if(empty($_GET['id']) == false){
	echo file_get_contents($_GET['id'].".txt");
}

여기서 empty는 입력값이 없을 때 true가 되는 내장 함수이다.

그렇기 때문에 empty($_GET ['id'])는 id값이 없을 때 ture가 되므로,

id값이 있을 때만 true가 되어야 하니, == false를 추가한다.

이렇게 원래는 각각의 html이 있어서 링크를 누르면 다른 html로 이동을 하였다면,

이제는 하나의 php 파일(index.php)에서 각각의 정보만 txt 파일로 만들어

txt 파일만 수정하면 모든 php 파일이 수정이 가능하게 되었다.

만약 <header> 부분에 로고를 추가해야 한다면,

<header> 태그 아래에 <img> 태그를 추가하여 이미지 주소를 넣어주면 된다.

그렇게 하면 모든 페이지에서도 이미지가 추가된 것을 확인할 수 있다.

또한 이미지 또한 style.css를 사용해 원하는 위치, 사이즈를 수정해주면 된다.

header img {
  float:right;
  height:105px;
}

이렇게 오른쪽 정렬, 높이를 105px로 설정해주었다.

이렇게 PHP는 단 한 번의 수정으로 모든 페이지의 HTML을 추가할 수 있게 되었다.

CSS와 JS 또한 독립적으로 파일을 만들어 사용해서 한 번의 수정 및 추가로 모든 페이지에서 사용이 가능하다.

출처: [생활코딩]웹 애플리케이션 만들기