⛺
PHP+MySQL로 간단한 홈페이지 만들기 - 1편!
mysql -uroot -p
비밀번호 입력 : 123456
기초 다지기
여기서는 HTML, CSS에 대한 설명을 하지 않습니다. 아래 영상을 참고해주세요. 아래 모든 영상과 참고된 생활코딩 강의를 안들으셔도 이 챕터를 이해하는데 크게 문제가 되지 않습니다.
• HTML, CSS, JS와 Front-end! 무엇을 할 수 있나요?
https://youtu.be/mItY14xTrpU
• 30분 HTML 요약
https://youtu.be/LiEY6BhDl5w
• 30분 CSS 요약
https://youtu.be/VKdYKPawxY8
서버 세팅그래서 서버에는 어떻게 세팅하죠?
많은 분들의 질문해주셨던 내용이라, 이렇게 하나의 챕터를 작성하게 되었습니다. 해당 기반 내용은 앞서 추천해드린 생활코딩에 PHP + MySQL에 근거하고 있습니다. 상세 내용은 아래 강좌를 참고해주세요.
WEB3 - PHP & MySQL - 생활코딩
위 강의를 수강하셨던 분이시거나, SQL을 이제 막 수강하신 분이시라면, 서비스를 한 번 만들어 보고 싶은 열망에 휩싸이실 것이라 생각이 됩니다. 친구나 가족들도 사용할 수 있는 실제 운영이 되는 서비스요.
자, 빠르게 한 번 구축해봅시다.
우리가 작업할 공간은 구름IDE입니다. 인터넷 상에 자신만에 컴퓨터를 만든다고 생각하시면 됩니다.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/be402c5c-387e-47fd-badc-3c6d1b4257c6/Untitled.png
회원 가입 후 새 컨테이너 생성을 클릭하셔서 간단한 영문 이름을 입력해주세요. 테스트용이라 나머지는 어떻게 설정하셔도 무방합니다.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/971975d7-4271-4b44-8e8a-40a7e7579087/Untitled.png
아래로 스크롤을 내려보시면 스택을 정하게 되어 있는데 우리는 PHP를 선택합니다. 그리고 맨 마지막에 MySQL 설치를 클릭하는 것을 잊지마세요!
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fc9b0c83-3f8c-44ef-86bd-c54ad0b3bce0/Untitled.png
생성버튼은 맨 위에 있어요! 🙂
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/cefef24e-8ef5-4e57-92c6-05470ed47208/Untitled.png
컨테이너가 모두 만들어지고 실행하시겠습니까 물음 창이 뜨면 실행을 시켜주세요.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/54e1bc84-154b-4e46-8fa2-4925cefcdb1a/Untitled.png
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d7408c71-3510-4d2e-914a-2325061c9759/Untitled.png
옆에서 index.php를 클릭해서 파일을 열어주세요.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9cd881ed-f1a0-4030-a1b7-ae0f6d7ea072/Untitled.png
위 문구 중 "Contents here"를 "hello world"와 같이 문구를 조금 수정하신 후 Ctrl + S를 눌러저장하겠습니다.
<aside>
💡 PHP는 어떤언어인가요?
PHP는 C, Javascript, Python과 같은 프로그래밍 언어이며, 1995년 태생으로 프로그래밍 언어 가운데서는 꽤 오래된 언어입니다. 그만큼 큰 생태계가 자리잡고 있습니다. 특히 다른 언어와 달리 초보자도 완전히 처음부터 웹 서비스를 구축할 수 있다는(날코딩이라 합니다.) 장점(단점일 수도 있습니다.)이 있어요.
</aside>
• PHP를 더 배우고 싶으시다면 생활 코딩 PHP 강의를 추천해드립니다.
PHP - 생활코딩
계정 옆에 있는 재생 버튼을 클릭해주세요. 우측 상단에 있습니다.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c2e3cd31-46d3-4324-bb73-35855c521ebb/Untitled.png
URL(https://test-php-mysql~)을 클릭해주세요. 복사하셔서 붙여넣으셔도 됩니다.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/79e40101-ea0b-44cf-833e-08d108a0a8bc/Untitled.png
아래와 같이 실행된 것을 볼 수 있습니다.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/df3f211a-0068-49e9-8bff-826dfe1a66ff/Untitled.png
MySQL 설정
이 서버는 지금 돌아가고 있는 상태이기 때문에 친구들에게 해당 URL을 전달하여도 접속할 수 있는 상태입니다! 이제 MySQL을 연결시키도록 하겠습니다.
아래 입력을 터미털에서 입력해주세요. 입력하는 창은 하단에 터미널에서 하셔도 되고, 상단에서 창 > 새터미널창을 클릭한 후 작성하셔도 됩니다.
설치하는 중간에 Y를 입력해야 하는 창이 뜨게 됩니다. Y를 입력해주세요. 한 줄 씩 복사 붙여넣기 해주세요. 패스워드는 눈에 보이지 않습니다.
sudo apt-get install php7.3-mysql
service mysql restart
mysql root -p
비밀번호 입력 : 123456mysql> CREATE DATABASE testdb;
mysql> SHOW DATABASES;
mysql> USE testdb;
이제 SQL 구문을 사용할 수 있는 곳으로 들어오게 된 것입니다!
1. DB를 생성합니다. (CREATE DATABASE testdb;)
2. 생성된 DB를 확인합니다. (SHOW DATABASES;)
3. 생성된 DB를 사용합니다. (USE testdb;)
mysql> CREATE DATABASE testdb;
mysql> SHOW DATABASES;
mysql> USE testdb;
mymysql> CREATE DATABASE testdb;
mysql> SHOW DATABASES;
mysql> USE testdb;
이제 생성된 DB 안에 TABLE을 생성하도록 하겠습니다.
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> -
해당 코드의 실행결과입니다.
!https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b89675a4-1cf2-4e6c-8851-487e8363b43e/Untitled.png
여기까지 되셨다면, CRUD를 직접 해보세요. $sql이 여러분이 지금까지 연습하신 SQL구문입니다!
<aside>
💡 문제
description과 created 날짜도 함께 출력해보세요.
</aside>
여기까지 완료가 되셨다면 실제 서비스를 이용하기 위해 아래 단계를 더 수행해야 합니다. 이 책에서는 더 이상의 수업을 진행하지 않습니다.
1. 실제 사용할 URL 구매 후 서버에 연결
2. 서버 항상켜두기(프리미엄 기능)
3. 보안 이슈 해결(SQL injection)
goorm 말고도 다양한 클라우드 서비스가 있습니다. AWS, Azuer, 네이버 클라우드 등이요. 하지만 여러분이 클라우드를 처음하셨다면 goorm이 가장 편하실 겁니다. 천천히 알아가세요. 여러분의 성장을 응원합니다. 🙂
<aside>
💡 성원에 힘입어 해당 홈페이지 튜토리얼을 3편까지로 늘려 녹화하였습니다. 영상은 유튜브, 인프런, Edwith을 확인해주세요. 감사합니다.
</aside>
sudo apt-get install php7.3-mysql
service mysql restart