1. 구현 기능 설명

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

2. 직접 검색 해보기

아래 코드를 사용해 description에 is가 들어가는 모든 문자열들을 출력해봅시다.

<html>
<head>
	<title>Hello goorm</title>
	<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>