4. PHP+MySQL로 간단한 홈페이지 만들기

기초 다지기 서버 세팅 MySQL 설정 PHP - MySQL 연동

기초 다지기

여기서는 HTML, CSS에 대한 설명을 하지 않습니다. 아래 영상을 참고해 주세요. 아래 모든 영상과 참고된 생활코딩 강의를 안 들으셔도 이 챕터를 이해하는데 크게 문제가 되지 않습니다.

HTML, CSS, JS와 Front-end! 무엇을 할 수 있나요?

30분 HTML 요약

30분 CSS 요약

서버 세팅

그래서 서버에는 어떻게 세팅하죠?

많은 분들의 질문해주셨던 내용이라, 이렇게 하나의 챕터를 작성하게 되었습니다. 해당 기반 내용은 앞서 추천해드린 생활코딩에 PHP + MySQL에 근거하고 있습니다. 상세 내용은 아래 강좌를 참고해주세요.

WEB3 - PHP & MySQL - 생활코딩

PHP와 MySQL을 연동해서 웹의 접근성과 데이터베이스의 탁월한 정보관리 기능을 모두 갖춘 현대적인 웹애플리케이션을 구현하는 방법을 알려드리는 수업입니다. MySQL과 PHP의 경험이 있는 분 많은 사용자, 다양하고, 많은 정보로 인해서 한계를 느끼고 계신 분 이 수업은 PHP와 MySQL에 대한 선행 지식이 필요합니다. 아래는 관련된 지식의 지도입니다. 지도를 참고해서 스스로 학습 경로를 탐험해보세요.

https://opentutorials.org/course/3167

위 강의를 수강하셨던 분이시거나, SQL을 이제 막 수강하신 분이시라면, 서비스를 한 번 만들어 보고 싶은 열망에 휩싸이실 것이라 생각이 됩니다. 친구나 가족들도 사용할 수 있는 실제 운영이 되는 서비스요.

자, 빠르게 한 번 구축해봅시다.

우리가 작업할 공간은 구름IDE입니다. 인터넷 상에 자신만에 컴퓨터를 만든다고 생각하시면 됩니다.

회원 가입 후 새 컨테이너 생성을 클릭하셔서 간단한 영문 이름을 입력해주세요. 테스트용이라 나머지는 어떻게 설정하셔도 무방합니다.

아래로 스크롤을 내려보시면 스택을 정하게 되어 있는데 우리는 PHP를 선택합니다. 그리고 맨 마지막에 MySQL 설치를 클릭하는 것을 잊지마세요!

생성버튼은 맨 위에 있어요! 🙂

컨테이너가 모두 만들어지고 실행하시겠습니까 물음 창이 뜨면 실행을 시켜주세요.

옆에서 index.php를 클릭해서 파일을 열어주세요.

위 문구 중 "Contents here"를 "hello world"와 같이 문구를 조금 수정하신 후 Ctrl + S를 눌러저장하겠습니다.

💡

PHP는 어떤언어인가요? PHP는 C, Javascript, Python과 같은 프로그래밍 언어이며, 1995년 태생으로 프로그래밍 언어 가운데서는 꽤 오래된 언어입니다. 그만큼 큰 생태계가 자리잡고 있습니다. 특히 다른 언어와 달리 초보자도 완전히 처음부터 웹 서비스를 구축할 수 있다는(날코딩이라 합니다.) 장점(단점일 수도 있습니다.)이 있어요.

PHP를 더 배우고 싶으시다면 생활 코딩 PHP 강의를 추천해드립니다.

PHP - 생활코딩

PHP는 서버 측에서 실행되는 프로그래밍 언어로 HTML을 프로그래밍적으로 생성해주고, 데이터베이스와 상호작용 하면서 데이터를 저장하고, 표현합니다. PHP는 웹을 위해서 만들어졌고, 지금도 웹을 위해서 발전하고 있는 웹을 위한 언어입니다. 웹프로그래밍을 위한 높은 생산성을 제공하는 언어입니다. 특히 서버에 직접 설치해서 운영할 수 있는 설치형 웹에플리케이션(제로보드,텍스트큐브,워드프래스,PHPBB등)의 과반이 PHP로 만들어졌습니다. 따라서 PHP를 배워두시면 이러한 솔루션들에 대한 운영, 문제해결 능력이 향상됩니다.

https://opentutorials.org/course/3018

계정 옆에 있는 재생 버튼을 클릭해주세요. 우측 상단에 있습니다.

URL(https://test-php-mysql~)을 클릭해주세요. 복사하셔서 붙여넣으셔도 됩니다.

아래와 같이 실행된 것을 볼 수 있습니다.

이 서버는 지금 돌아가고 있는 상태이기 때문에 친구들에게 해당 URL을 전달하여도 접속할 수 있는 상태입니다! 이제 MySQL을 연결시키도록 하겠습니다.

MySQL 설정

아래 입력을 터미털에서 입력해주세요. 입력하는 창은 하단에 터미널에서 하셔도 되고, 상단에서 창 > 새터미널창을 클릭한 후 작성하셔도 됩니다.

설치하는 중간에 Y를 입력해야 하는 창이 뜨게 됩니다. Y를 입력해주세요. 한 줄 씩 복사 붙여넣기 해주세요. 패스워드는 눈에 보이지 않습니다.


sudo apt-get install php7.3-mysql
service mysql restart

mysql -uroot -p
비밀번호 입력 : 123456

이제 SQL 구문을 사용할 수 있는 곳으로 들어오게 된 것입니다!

DB를 생성합니다. (CREATE DATABASE testdb;)

생성된 DB를 확인합니다. (SHOW DATABASES;)

생성된 DB를 사용합니다. (USE testdb;)


mysql> CREATE DATABASE testdb;
mysql> SHOW DATABASES;
mysql> USE testdb;

이제 생성된 DB 안에 TABLE을 생성하도록 하겠습니다.


mysql> CREATE TABLE testtable (   
   id int(11) NOT NULL AUTO_INCREMENT,   
   title varchar(30) NOT NULL,   
   description text,   
   created datetime NOT NULL,   
   PRIMARY KEY(id) 
) ENGINE=InnoDB;

생성된 TABLE에 데이터를 삽입합니다. test로 3개 정도의 데이터를 넣도록 하겠습니다.


INSERT INTO testtable (title, description, created) VALUES ('Python', 'Python is ....', NOW());
INSERT INTO testtable (title, description, created) VALUES ('HTML', 'HTML is ....', NOW());
INSERT INTO testtable (title, description, created) VALUES ('CSS', 'CSS is ....', NOW());


SELECT * FROM testtable;

PHP - MySQL 연동

index.php를 아래와 같이 수정해주세요. PHP구문에 대한 상세한 설명은 앞서 추천해드린 생활코딩을 참고해주십시오.


<html>
<head>
	<title>Hello goorm</title>
</head>
<body>
	<h1>Hello goorm</h1>

    <?php
		$conn = mysqli_connect("localhost", "root", "123456", "testdb");
		
		$sql = "SELECT * FROM testtable";
		$result = mysqli_query($conn, $sql);
	
		while($row = mysqli_fetch_array($result)) {
		  echo "<li>{$row['id']} - {$row['title']}</li>";
		}
		
		?>
  
</body>
</html>

해당 코드의 실행결과입니다.

여기까지 되셨다면, CRUD를 직접 해보세요. $sql이 여러분이 지금까지 연습하신 SQL구문입니다!

💡

문제 description과 created 날짜도 함께 출력해보세요.

여기까지 완료가 되셨다면 실제 서비스를 이용하기 위해 아래 단계를 더 수행해야 합니다. 이 책에서는 더 이상의 수업을 진행하지 않습니다.

실제 사용할 URL 구매 후 서버에 연결

서버 항상켜두기(프리미엄 기능)

보안 이슈 해결(SQL injection)

goorm 말고도 다양한 클라우드 서비스가 있습니다. AWS, Azuer, 네이버 클라우드 등이요. 하지만 여러분이 클라우드를 처음하셨다면 goorm이 가장 편하실 겁니다. 천천히 알아가세요. 여러분의 성장을 응원합니다. 🙂

💡

성원에 힘입어 해당 홈페이지 튜토리얼을 3편까지로 늘려 녹화하였습니다. 영상은 유튜브, 인프런, Edwith을 확인해주세요. 감사합니다.

4. PHP+MySQL로 간단한 홈페이지 만들기 - 1편!

기초 다지기

서버 세팅

MySQL 설정

PHP - MySQL 연동