php파일 html, css 를 이용한 구글클론사이트[2]

Web 2020. 4. 20. 00:56

저번엔 이미지를 넣고 웹 페이지를 구성했다면

이번에는 검색하기 버튼도 추가하고 검색어 입력받는 부분에 데이터를 받아서 검색창으로 넘어갈 수 있게 할 것이다!!

php도 사용할꺼얏~!!

1. 검색하기 버튼 추가하기

index.php 파일에 검색어 입력 부분 밑에 추가하기

<!-- index.php -->

<!-- 검색 버튼 -->
<input class="searchButton" type="submit" value="검색하기">

2. style.css 수정하기

style.css 파일에 추가하기

.mainSection .searchContainer .searchButton {
	border: none;
    margin-top: 20px;
    height: 36px;
    width: 125px;
    background-color: #eaeaea;
    font-size: 13px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    color: #979797;
}

/* hover 키워드를 사용하여 마우스가 해당 클래스 위로 올라가면 아래 속성이 적용된다. */
.mainSection .searchContainer .searchButton:hover {
	color: #000000;
	/* 테두리 : 두께, 모양, 색상 */
	border: 1px solid #979797;
}

3. search.php 파일 생성

search.php : 검색어를 입력하면 검색창이 나올 수 있게 설정하기 위한 파일

index.php 파일이 있는 위치에 search.php 을 생성 후, index.php 파일에서 body를 제외한 부분만 search.php 파일에 복붙!

<!-- search.php -->

<!DOCTYPE html>
<html>
<head>
	<title>부찌여 구글클론 사이트 (검색)</title> 
	<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>

	
</body>
</html>

4. GET 방식을 써서 데이터를 전달하기

GET : URL에 데이터를 ( ?키=데이터 ) 형식으로 입력하여 전달하는 방식

< GET 방식 >

1. 입력한 데이터를 URL에 붙임(보안에 취약)

2. 256byte를 넘길 수 없음.

3. POST보다 전송속도가 빠름.

< POST 방식 >

1. 입력한 데이터를 본문안에 포함(입력한 데이터가 URL에 보이지 않음)

2. 데이터 길이에 제한이 없음.

3. 복잡한 데이터 전송에 유용함.

# index.php

<!-- index.php -->

<!DOCTYPE html>
<html>
<head>
	<title>부찌여 구글클론 사이트</title> 
	<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>

	<!-- div : 바디를 나눈다. /class : 해당 class에 css를 적용 시킨다. 
		웹페이지 화면을 감싸는 랩퍼 클래스, 인덱스 페이지-->
	<div class="wrapper indexPage ">
		 
		 <!-- 메인 섹션 -->
		<div class="mainSection">
		
				<!-- 로고 부분 -->
			<div class="logoContainer">
				<img src="assets/image/logo.png" alt ="">
			</div>

			<!-- 검색 부분 -->
			<div class="searchContainer">

				<!--action = 실행할 파일/ GET을 이용해 데이터를 실행할 파일을 넘긴다. -->
				<form action="search.php" method="GET">
									
					<!-- 검색어 입력 부분 -->
					<div class="searchBox">
						<img src="assets/image/search.png" alt="">
						<input type="text" name="searchTerm" placeholder="검색어를 입력해주세요...">
					</div>

					 <!-- 검색 버튼 -->
					<input class="searchButton" type="submit" value="검색하기">

				</form>

			</div>

		</div>

	</div>
	
</body>
</html>

< form >

<form action="search.php" method="GET">

form 태그를 통해 GET 방식으로 받은 데이터를 search.php 파일에서 실행시킨다!!

< placeholder >

<!-- 검색어 입력 부분 -->
			<div class="searchBox">
				<img src="assets/image/search.png" alt="">
				<input type="text" name="searchTerm" placeholder="검색어를 입력해주세요...">
			</div>

HTML의 placeholder 속성은 미리 데이터를 입력해놓는 역할 (입력 값은 자동 삭제된다!)

# style.css

/* style.css */

* {
	color: #000000;
}

/*html 태그, body안에 들어있는 것들의 속성을 정한다. */
html, body {
	margin: 0px;
	height: 100%;
}

/* 웹페이지 전체를 감싸는 클래스  */
.wrapper {
	/* 선형정렬 */
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.wrapper.indexPage {
	/* 플렉스 안의 내용물을 가운대로 정렬하겠다. */
	justify-content: center;
}

/*  메인 부분 */
.mainSection {
	/* 리니어와 비슷: 선형정렬 */
	display: flex;
	flex-direction: column;
	/* 가운데 정렬 */
	align-items: center;
}

.mainSection .logoContainer img {
	height: 100px;
}

.mainSection .searchContainer {
	margin-top: 30px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.mainSection .searchContainer .searchBox {
	border: none;
	box-shadow: 0px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
	height: 44px;
	border-radius: 22px;
	width: 60%;
	outline: none;
	max-width: 590px;
	/* 가로세로 선형정렬 */
	display: flex;
	align-items: center;
}

.mainSection .searchContainer .searchBox img{
	width: 15px;
    height: 15px;
    margin-right: 14px;
    margin-left: 17px;
}

.mainSection .searchContainer .searchBox input {
	flex: 1;
	height: 38px;
	margin-right: 20px;
	border: none;
	outline: none;
	font-size: 15px;
}


.mainSection .searchContainer .searchButton {
	border: none;
    margin-top: 20px;
    height: 36px;
    width: 125px;
    background-color: #eaeaea;
    font-size: 13px;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    color: #979797;
}

/* hover 키워드를 사용하여 마우스가 해당 클래스 위로 올라가면 아래 속성이 적용된다. */
.mainSection .searchContainer .searchButton:hover {
	color: #000000;
	/* 테두리 : 두께, 모양, 색상 */
	border: 1px solid #979797;
}

.mainSection .searchContainer form {
	display: flex;
	flex-direction: column; 
	align-items: center;
}

form 을 추가해줘서 조금씩 수정해보았다!

5. search.php 파일에 php 사용하기

search.php 파일에 php로 GET 방식으로 받은 데이터 출력하는 부분 추가하기

# search.php

/* search.php */

<?php
		
		echo $_GET["searchTerm"];

?>
<!DOCTYPE html>
<html>
<head>
	<title>부찌여 구글클론 사이트 (검색)</title> 
	<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>

	
</body>
</html>

searchTerm : index.php파일에서 데이터를 입력받는 변수 이름

< 완성 >