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

이론에서는 MySQL monitor을 통해 DataBase를 다루는 방법에 대해 알아보았다.

여기서는 mysqli를 통해 php코드를 사용해서 DataBase를 다루는 방법에 대해 알아보자.

 

여기서 비밀번호는 111111, 데이터베이스 이름은 opentutorials, 테이블 이름은 topic으로 한다.

	MySQL monitor	mysqli
서버 접속	my sql -hlocalhost -uroot -p111111;	$conn = mysqli_connect('localhost'.'root','111111');
DB 선택	use opentutorials;	mysqli_select_db($conn 'opentutorials');
조회	SELECT * FROM topic;	$result = mysqli_query($conn, 'SELECT*FROM topic);
출력		$row = mysqli_fetch_assoc($result); $row[`title`]; $row[`description`];

 

php에는 다양한 배열이 존재한다.

$a = array("About JavaScript","JavaScript is...");
echo $a[0]
→ About JavaScript

위 로직은 일반적인 배열이다.

인덱스를 통해서 값을 출력한다.

 

$b = array"title"=>"About JavaScript","description"=>"JavaScript is...");
echo $b["title"];
→ About JavaScript

또한 이렇게 key와 value를 나누어 key를 호출하면 value가 출력되는 배열도 있다.

이러한 배열을 연관 배열( associative array )라고 한다.

mysqli의 출력문을 확인하면 mysqli_fetch_assoc($result);라고 되어있다.

이 말은 $result를 연관 배열의 형태로 가져온다는 의미가 된다.

하지만 row를 출력하면 1행만 출력이 되고, 나머지 행들은 출력이 되지 않는다.

하지만, row변수에 한 번 더 $result값을 연관 배열로 담게 되면, 이번에는 2행이 출력이 되는 걸 확인할 수 있다.

	$conn = mysqli_connect('localhost','root','momo0415');
	mysqli_select_db($conn, 'opentutorials');
	$result = mysqli_query($conn, "SELECT*FROM topic");
	$row = mysqli_fetch_assoc($result);
	echo $row['id'];
	echo $row['title'];

	echo "<br />";

	$row = mysqli_fetch_assoc($result);
	echo $row['id'];
	echo $row['title'];

그렇다면, 이렇게 4번 복사 붙여 넣기를 하면, 모든 행이 다 출력되어 테이블을 확인할 수 있다.

하지만, 만약 행이 100개 1000개라면, 복붙 하고 수정하는 과정이 매우 힘들어진다.

그렇기에, 모든 테이블을 확인해야하할 때는 반복문을 사용해주는 옳다.

	while($row = mysqli_fetch_assoc($result)){
		echo $row['id'];
		echo $row['title'];
		echo "<br />";

이렇게 while문을 사용해 출력을 하면 모든 행이 출력되는 걸 확인할 수 있다.

그럼 새롭게 알게 된 것을 토대로 제작하던 웹 애플리케이션을 수정해보자.

기존에 있던 nav ol안의 내용을 삭제를 해주자.

이제 file에 있는 txt를 가져오는 게 아닌, DataBase를 가져오게 변경해야 한다.

while($row = mysqli_fetch_assoc($result)){
	echo '<li><a href="http://localhost/index.php?id='.$row['id'].'">'.$row['title'].'</a></li>'."\n";
}

먼저 list형식으로 출력을 해야 하기 때문에 li태그와 각 리스트를 클릭하면 해당 정보를 불러와야 하니 a태그를 사용해준다.

그렇게 나오는 행마다 id값을 순서대로 달아주어서 title에 맞는 id값이 링크로 달아지게 된다.

그러면 위와 같이 DataBase를 통해 리스트를 출력하고, 사용할 수 있게 된다.

그렇다면, 정보가 출력되는 부분 또한 file을 통해서가 아닌, DataBase를 통해서 출력하도록 변경하도록 해야 한다.

정보가 출력되는 부분은 article태그이다.

		if(empty($_GET['id']) === false){
			$sql = 'SELECT * FROM topic WHERE id='.$_GET['id'];
			$result = mysqli_query($conn,$sql);
			$row = mysqli_fetch_assoc($result);
			echo '<h2>'.$row['title'].'</h2>';
			echo $row['description'];

먼저 id값이 0일 때는 정보가 출력이 되면 안 됨으로 if문으로 감싸준다.

조건식은 id라는 입력값이 empty 없지 false 않다면 참이 되는 조건식이다.

이렇게 DataBase를 통해 리스트와 정보를 출력하는 사이트까지 구축을 하였다.

 

form

위에서는 DataBase를 통해 리스트와 정보를 가져오고 출력까지에 대해 알아보았다.

하지만, 게시판이라는 웹사이트는 사람들이 정보를 스스로 제공하고 볼 수 있어야 한다.

그러기 위해서는 form에 대해 알아야 한다.

      <p>제목 : <input type="text" name="title"></p>

위 코드를 출력한 웹이다. input을 통해 text를 만드는 것은 html을 통해 이미 알고 있던 것이다.

하지만, 본문을 출력할 때는 많은 양을 입력해야 하니 <textarea>를 통해서 출력해야 한다.

      <p>제목 : <input type="text" name="title"></p>
      <p>본문 : <textarea name="description"></textarea></p>

이렇게 텍스트 영역이 호출이 된다.

그리고 이렇게 써진 정보를 저장하는 버튼 또한 필요하다.

그럴 때는 input type을 submit으로 하면 된다.

      <p>제목 : <input type="text" name="title"></p>
      <p>본문 : <textarea name="description" id="" cols="30" rows="10"></textarea></p>
      <input type="submit">

이렇게 제출 버튼이 생긴 것을 확인할 수 있다.

이제 제목과 본문을 적고 제출 버튼을 눌렸을 때 그걸 어디로 전송하는지를 결정하는 게 form이다.

form 태그를 사용해 위 코드를 감싸주도록 하자.

    <form action="http://localhost/php/3.php" method="GET">
      <p>제목 : <input type="text" name="title"></p>
      <p>본문 : <textarea name="description" id="" cols="30" rows="10"></textarea></p>
      <input type="submit">
    </form>

이렇게 action을 통해서 어디로 가져갈지를 결정하면 된다.

이제 3.php 파일로 가져간다는 것을 확인했으니, 3.php 파일을 만들어 보자.

<?php
  echo $_GET['title'];
  echo "<br>";
  echo $_GET['description'];
 ?>

위 코드는 3.php 파일의 코드이다.

이렇게 가져온 정보를 출력하는 코드만 있다.

이렇게 제목과 본문을 기재하고 제출을 누르게 되면,

기재한 내용이 화면에 출력된다.

여기서 사이트의 url을 확인하면, title과 description이 연관 배열의 형태로 정보를 받은 것을 확인할 수 있다.

그렇다면 조금 긴 정보 또한 전송이 가능할까라는 생각이 든다.

하지만, 긴 정보는 위와 같이 Error가 발생한다.

url은 max길이가 정해져 있어 방대한 양의 정보를 전달하기에는 한계가 있다.

그렇다면 다른 방법으로 전송을 해야 한다.

form의 method를 GET이 아닌, POST를 변경해주고,

3.php 파일의 GET을 POST로 변경해주도록 하자.

    <form action="http://localhost/php/3.php" method="POST">
      <p>제목 : <input type="text" name="title"></p>
      <p>본문 : <textarea name="description" id="" cols="30" rows="10"></textarea></p>
      <input type="submit">
    </form>

↑ 3.html

<?php
  echo $_POST['title'];
  echo "<br>";
  echo $_POST['description'];
 ?>

↑ 3.php

이렇게 전송 방식을 POST로 변경하게 되면, 긴 정보도 출력이 되는 것을 확인할 수 있다.

이렇게 form은 사용자가 입력한 정보를 서버로 전송할 때 사용하는 것이다.

 

글 작성

그렇다면, 사용자가 입력한 정보를 받아서 DataBase에 기록하는 방법 또한 알아보자.

일단 글을 작성하는 버튼을 추가해보자.

	<div id="control">
	<input type="button" value="Light Mode" id = "Light_btn"/>
	<input type="button" value="Dark Mode" id = "Dark_btn"/>
	<a href="http://localhost/write.php">쓰기</a>
	</div>

일단 글 작성 버튼은 다크 모드 버튼 옆에 두도록 하기 위해 div태그에 작성하였다.

그러면 이렇게 쓰기 버튼이 추가된 것을 확인할 수 있다.

하지만 write.php 파일은 없기 때문에, index.php 파일을 Duplicate 하여 write.php 파일을 만들도록 하자.

그럼 쓰기 버튼을 누르면 index.php와 똑같은 화면이 보이지만, 다른 파일로 들어가게 된다.

그리고, article부분을 지우고 form을 작성하면 된다.

	<article>
		<form action="process.php" method="post">
				<p>
					제목 : <input type="text" name="title">
				</p>
				<p>
					작성자 : <input type="text" name="author">
				</p>
				<p>
					본문 : <textarea name="description"></textarea>
				</p>
				<input type="submit" name="name">
		</form>
	</article>

이렇게 제목 작성자 본문을 적고 제출을 누르면 process.php를 통해 처리를 할 것이다.

그럼 process.php를 만들어 주도록 하자.

  $conn = mysqli_connect('localhost','root','111111');
  mysqli_select_db($conn, 'opentutorials');
  $sql="INSERT INTO topic(title,description,author,created)VALUES('".$_POST['title']."','".$_POST['description']."','".$_POST['author']."',now())";
  $result = mysqli_query($conn, $sql);

process.php 파일의 코드는 위와 같다.

먼저 DataBase에 접속을 한다. ( =$conn )

optutorials DataBase에 선택한다. ( =mysqli_select_db )

글 작성에서 사용자가 입력한 각각의 정보를 각각의 카테고리에 넣어준다. ( =$sql )

여기서 now()는 SQL에서 제공하는 API이이다.

created의 데이터 타입은 Datetime이다. Datetime은 시간을 의미한다.

now()를 이용하면, 자동으로 현재시간이 들어간다.

쿼리를 입력받은 $sql 변수를 mysqli_query에 입력값으로 추가해준다. ( =$result )

위 table은 정보를 추가하기 전 table이다.

이렇게 정보를 입력하고 제출을 하면, 빈 화면이 출력이 될 것이다.

그리고 커맨드를 사용해 table을 확인해 보면 위와 같이, table에 추가된 것을 확인할 수 있다.

그렇다면, 제출 버튼을 눌렀을 때 원래의 화면으로 돌아가는 것까지 구현을 해야 한다.

그럴 때는 Redirection을 이용하면 된다.

그때 사용하는 명령어는 다음과 같다.

  $conn = mysqli_connect('localhost','root','momo0415');
  mysqli_select_db($conn, 'opentutorials');
  $sql="INSERT INTO topic(title,description,author,created) VALUES('".$_POST['title']."','".$_POST['description']."','".$_POST['author']."',now())";
  $result = mysqli_query($conn, $sql);
  header('Location: http://localhost/index.php');

여기서 Location:치고 한 칸 띄우고 주소를 입력해야 한다.

이렇게 코드를 입력해주고 다시 제출을 해보면, 테이블에 추가가 되고 다시 index.php로 되돌아가는 것을 확인할 수 있다.

이렇게 Array가 추가가 되고, index.php화면으로 돌아간 것을 확인할 수 있다.

---

+ 기타

이미지 업로드 ( UPLOADCARE )

이제는 글을 추가하는 것까지 구현이 가능한 사이트가 만들어졌다.

그렇다면 사용자가 이미지를  본문에 첨부하여 업로드하는 과정도 알아보자.

이미지 업로드를 하는 것 또한 JS의 채팅이나 댓글 기능처럼 서비스를 추가하는 것이다.

업로드한 파일을 서버에 보관하게 되면 그 서버는 언젠가는 고장 나기 마련이다.

그럴 때는 새로운 다른 장치를 계속해서 교체해주는 작업이 필요하다.

하지만 그런 작업들은 소규모 개발자가 하기에는 매우 힘들고 어려운 일이다.

UPLOADCARE의 서비가 중요하다기보다는, UPLOADCARE와 같은 부품들을 결합해서

애플리케이션을 만드는 코드의 힘을 느끼는 것이 중요하다.

 

사이트:https://uploadcare.com/ 

File uploading, processing & delivery for web and mobile apps

사이트에 들어가서 회원가입을 진행한 뒤, Docs → File Uploader → installation에 들어간 뒤,

Global installation의 코드를 보면 된다.

Key가 있는 코드는 body 태그 위 , input 태그는 제출 버튼 옆에 있어야 하니, submit 위에 붙여 넣으면 된다.

그러고 새로고침을 하면, 이미지를 업로드하는 버튼이 생긴 것을 확인할 수 있다.

이제 이미지를 업로드하고 제출했을 때, 이미지가 본문에 업로드가 되게 만들어 보자.

// → role의 값이 uploadcare-uploader인 태그를 업로드 위젯으로 만들어라
var singleWidget = uploadcare.SingleWidget('[role=uploadcare-uploader]');
singleWidget.onUploadComplete(function(info){
// → 그 위젯을 통해서 업로드가 끝났을
	document.getElementById('description').value = document.getElementById('description').value + '<img src="'+info.cdnUrl+'">';
	// → id 값이 description인 태그의 값 뒤에 업로드한 이미지 파일의 주소를 이미지 태그와 함께 첨부해라.
});

이렇게 위와 같이 코드를 작성해주면 된다.

이렇게 작성한 글자 뒤에 이미지가 붙도록 하는 게 좋다. 그러 제출을 누르면 다음과 같다.

위와 같이 이미지가 잘 출력된 것을 확인할 수 있다.

업로드한 이미지는 업로드 케어 서버에 저장되어있다.

---

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