1, 2편에 이어 작업하시는 것이 아니라면 구름 IDE에 다음과 같은 명령어를 터미널에 입력해주세요.

service mysql restart

1. Bootstrap 입히기

<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
		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>

지난번 시간에 완성된 코드는 위와 같습니다. 2편에서도 말씀드린 것처럼 Bootstrap을 자세히 설명하지 않고 Bootstrap을 입혔는데요. 저 코드가 어디서 나온 것인지 설명해 드리도록 하겠습니다.

출처 : https://getbootstrap.com/

출처 : https://getbootstrap.com/

Bootstrap

위 홈페이지에서 get started를 클릭하여 CSS 부분에 코드를 카피한 코드였습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/adef08a6-da32-4c51-a24c-3098594a0450/Untitled.png

Bootstrap은 위에 나온 설명처럼 세계에서 가장 많이 사용하는 프론트엔드 라이브러리 입니다. 버튼, 메뉴, 폼 등이 이미 구현되어 있고, 마치 레고 조립을 하듯이 웹 서비스를 만들어 낼 수 있습니다. 실제로 조립을 어떻게 할 수 있는지를 보도록 할게요.

  1. Examples를 클릭해주세요.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fe6585e1-3c2c-41f1-87d8-e36f194e398b/Untitled.png

  2. 많은 예제가 있는데, 저는 Carousel을 클릭하도록 하겠습니다.

    https://s3-us-west-2.amazonaws.com/secure.notion-static.com/acf76e7c-cd72-4732-8af3-bb92e8d00354/Untitled.png