📩
캐글 데이터로 살펴보는 데이터분석 With Python and SAS/
⛺
6.5 PHP+MySQL로 간단한 홈페이지 만들기 - 2편!
⛺

6.5 PHP+MySQL로 간단한 홈페이지 만들기 - 2편!

1. 구현 기능 설명2. 직접 검색 해보기3. 검색창을 만들어 검색해보기4. 로그인 기능 만들기5. 전체 소스코드

1. 구현 기능 설명

이번 시간에는 간단한 검색창과 로그인 기능을 만들어 보도록 하겠습니다. 동작되는 원리 정도만 파악할 예정이라 검색기능은 실제 검색이 되지만, 로그인 기능은 실제 구현이 되는 기능은 아닙니다.

2. 직접 검색 해보기

아래 코드를 사용해 description에 is가 들어가는 모든 문자열들을 출력해봅시다.
<html>
<head>
	<title>Hello goorm</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<?php
		$conn = mysqli_connect('localhost', 'root', 'qwer1234', 'testdb');
		$sql = "select * from testtable where description like '%is%'";
		$result = mysqli_query($conn, $sql);
		echo "<table class='table table-dark'>";
		echo "<tr><th>ID</th><th>Title</th><th>Description</th></tr>";
		while ($row = mysqli_fetch_array($result)){
			echo "<tr><td>{$row['id']}</td><td>{$row['title']}</td><td>{$row['description']}</td></tr>";
		}
		echo "</table>";
	?>
</body>
</html>
 
아래코드가 와일드카드 중 하나인 %를 사용하여 is인 키워드를 찾는 코드입니다.
$sql = "select * from testtable where description like '%is%'";
 

3. 검색창을 만들어 검색해보기

그렇다면 is가 아닌, 검색창에서 검색되는 값을 찾기 위해서는 어떻게 해야 할까요? 저기 보이는 is가 들어간 부분만 form에서 입력받은 값으로 바꿔주면 됩니다. 아래와 같이요.
$sql = "select * from testtable where description like '%".$_GET["search"]."%'";
 
이 코드가 검색창으로 넘어온 값을 검색하는 코드입니다. 각 문자열을 연결시킬 때에는 +가 아닌 .을 사용합니다. 이제 html 코드에 search인 input을 만들어 주도록 하겠습니다.
<html>
<head>
	<title>Hello goorm</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<h1>검색</h1>
	<form action="index.php" method="get">
      <input type="search" name="search">
	    <input type="submit" value="Submit">
  </form>
	<?php
		$conn = mysqli_connect('localhost', 'root', 'qwer1234', 'testdb');
		/* $sql = "select * from testtable where description like '%not%'"; */
		$sql = "select * from testtable where description like '%".$_GET["search"]."%'";
		$result = mysqli_query($conn, $sql);
		echo "<table class='table table-dark'>";
		echo "<tr><th>ID</th><th>Title</th><th>Description</th></tr>";
		while ($row = mysqli_fetch_array($result)){
			echo "<tr><td>{$row['id']}</td><td>{$row['title']}</td><td>{$row['description']}</td></tr>";
		}
		echo "</table>";
	?>
</body>
</html>
 
위에서 보시는 것처럼 body에 아래 코드가 추가되었습니다. 
<form action="index.php" method="get">
      <input type="search" name="search">
	    <input type="submit" value="Submit">
</form>
 
index.php로 get 방식으로 값을 넘기겠다는 얘기인데요. 이 코드로 실행해 보시고 url구조를 살펴보세요. 창에 검색할 검색어를 입력하고 Submit 버튼을 누르면 url 구조를 살펴볼 수 있습니다.
 
notion imagenotion image
 
아래 코드를 추가하여 어떤 검색 쿼리가 들어가는지 확인해보도록 하겠습니다.
echo "select * from testtable where description like '%".$_GET["search"]."%'";
 
최종적으로 완성된 코드는 아래와 같습니다.
<html>
<head>
	<title>Hello goorm</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<h1>검색</h1>
	<form action="index.php" method="get">
      <input type="search" name="search">
	  <input type="submit" value="Submit">
    </form>
	<?php
		echo "select * from testtable where description like '%".$_GET["search"]."%'";
		$conn = mysqli_connect('localhost', 'root', 'qwer1234', 'testdb');
		/* $sql = "select * from testtable where description like '%not%'"; */
		$sql = "select * from testtable where description like '%".$_GET["search"]."%'";
		$result = mysqli_query($conn, $sql);
		echo "<table class='table table-dark'>";
		echo "<tr><th>ID</th><th>Title</th><th>Description</th></tr>";
		while ($row = mysqli_fetch_array($result)){
			echo "<tr><td>{$row['id']}</td><td>{$row['title']}</td><td>{$row['description']}</td></tr>";
		}
		echo "</table>";
	?>
</body>
</html>
 

4. 로그인 기능 만들기

만약 로그인 페이지가 있다면 로그인 페이지로 연결해주는 코드도 만들어 보도록 하겠습니다. 아래처럼 입력해주시고, login.php를 하나 만들어주세요.
<html>
<head>
	<title>Hello goorm</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<h1>로그인</h1>
	<form action="login.php" method="get">
      <input type="text" name="id">
      <input type="password" name="password">
      <input type="submit" value="Submit">
    </form>
	<h1>검색</h1>
	<form action="index.php" method="get">
      <input type="search" name="search">
	  <input type="submit" value="Submit">
    </form>
	<?php
		
		echo "<h1>hello ohyun!</h1>";
		echo "select * from testtable where description like '%".$_GET["search"]."%'";
	
		$conn = mysqli_connect('localhost', 'root', 'qwer1234', 'testdb');
		/* $sql = "select * from testtable where description like '%not%'"; */
		$sql = "select * from testtable where description like '%".$_GET["search"]."%'";
		$result = mysqli_query($conn, $sql);
		echo "<table class='table table-dark'>";
		echo "<tr><th>ID</th><th>Title</th><th>Description</th></tr>";
		while ($row = mysqli_fetch_array($result)){
			echo "<tr><td>{$row['id']}</td><td>{$row['title']}</td><td>{$row['description']}</td></tr>";
		}
		echo "</table>";
	?>
</body>
</html>
 
다음은 로그인 페이지(login.php)의 코드입니다. 물론 실무에서 이런 식으로 URL로 패스워드가 보이도록 개발하진 않지만 원리는 비슷합니다. DB에서 아이디를 검색하고 패스워드와 매칭되는지 확인하면 됩니다. 물론 DB에 저장된 패스워드는 암호화 되어있겠죠! 앞서 말씀드린 것처럼 이 부분은 여기서 구현하지 않도록 하겠습니다. 
<!DOCTYPE html>
<html>
<head>
  <title>로그인 페이지</title>
</head>
<body>
  <p>ID: <?php echo $_GET["id"]; ?></p>
  <p>Age: <?php echo $_GET["password"]; ?></p>
</body>
</html>

5. 전체 소스코드

login.php
0.2KB
index.php
1.2KB