풀스택 도전! PHP로 나만의 블로그 만들기
소개
안녕하세요! 웹스토리보이입니다. 이 강의는 디자인, 코딩, 및 개발을 한번에 경험할 수 있는 풀스택 도전 튜토리얼을 제공합니다. 개인이 디자인부터 코딩, 그리고 개발까지 진행하며 전체적인 웹사이트 구조와 흐름을 이해할 수 있도록 도와줍니다. 디자인 작업은 피그마를 활용하며, 코딩은 HTML5/CSS3를 사용하고, 개발은 PHP를 활용합니다. 이 프로세스를 통해 풀스택 개발에 도전하며 전체적인 웹사이트 제작 과정을 이해할 수 있습니다. 또한 PHP를 사용하여 게시판 및 로그인을 구현함으로써 웹사이트의 활용성을 높일 수 있습니다.
인덱스
디자인
- 1. 메인 디자인
- 1.1 카드 유형 디자인
- 2. 블로그 디자인
- 2.1 블로그 메인
- 2.2 블로그 카테고리 영역
- 2.3 블로그 뷰 영역
- 3. 게시판 디자인
- 3.1 게시판 메인
- 3.2 게시판 글쓰기
- 3.3 게시판 수정하기
- 3.4 게시판 보기
- 3.5 게시판 검색
- 4. 로그인 디자인
- 4.1 로그인
- 4.2 아이디 찾기
- 4.3 비밀번호 찾기
- 5. 회원가입 디자인
- 5.1 이용 약관
- 5.2 정보 입력
- 5.3 가입 완료
코딩
- 1. 기본 셋팅하기
- 1.1 vscode 셋팅하기
- 1.2. 호스팅 셋팅하기
- 1.3. 파일질라 셋팅하기
- 1.4. ftp-simple 셋팅하기
- 2. CSS 셋팅하기
- 2.1 style.css 만들기
- 2.2 fonts.css 만들기
- 2.3 vars.css 만들기
- 2.4 resets.css 만들기
- 2.5 commons.css 만들기
- 3. 기본 섹션 코딩하기
- 3.1 기본 레이아웃 잡기
- 3.2 헤더 영역 코딩하기
- 3.3 푸터 영역 코딩하기
- 4. 인트로 유형 코딩하기
- 4.1 메인 인트로 코딩하기
- 4.2 블로그 인트로 코딩하기
- 4.3 회원가입 인트로 코딩하기
- 5. 카드 유형 코딩하기
- 5.1 메인 카드 유형1 코딩하기
- 5.2 메인 카드 유형2 코딩하기
- 5.3 메인 카드 유형3 코딩하기
- 5.4 블로그 카드 유형1 코딩하기
- 5.5 블로그 카드 유형2 코딩하기
- 5.6 블로그 카드 유형3 코딩하기
- 5.7 카드 유형 반응형 코딩하기
- 6. 사이드 영역 코딩하기
- 6.1 인트로 영역 코딩하기
- 6.2 카테고리 코딩하기
- 6.3 인기 포스트 코딩하기
- 6.4 최신 댓글 코딩하기
- 6.5 게시판 코딩하기
- 6.6 메인 공지사항, 댓글 코딩하기
- 7. 블로그 뷰 페이지 코딩하기
- 7.1 블로그 뷰 영역 코딩하기
- 7.2 블로그 인덱스 영역 코딩하기
- 7.3 블로그 관련글 영역 코딩하기
- 7.4 블로그 댓글 영역 코딩하기
- 8. 게시판 페이지 코딩하기
- 8.1 게시판 코딩하기
- 8.2 게시판 글쓰기 코딩하기
- 8.3 게시판 글보기 코딩하기
- 9. 회원가입 페이지 코딩하기
- 9.1 기본 회원가입 코딩하기
- 9.2 회원가입 이용약관 코딩하기
- 9.3 회원가입 정보입력 코딩하기
- 9.4 회원가입 가입완료 코딩하기
- 10. 로그인 페이지 코딩하기
- 10.1 로그인 코딩하기
- 10.2 아이디 찾기 코딩하기
- 10.3 비밀번호 찾기 코딩하기
개발
- 1. 기본 셋팅하기
- 1.1 DB 연동하기
- 1.2 MyAdmin 접속하기
- 1.3 회원 테이블 만들기
- 1.4 include 사용하기
1. 기본 셋팅하기
1.1 DB 연동하기
우리는 dothome에서 무료 웹 호스팅을 신청했습니다. 여기에 파일을 만들어서 코딩 작업을 했습니다. 이제는 데이터베이스에 접속을 해서 데이터를 넣는 작업을 해보겠습니다. 회원가입을 하든 게시판을 작성하던 우리가 작업한 데이터를 엑셀 파일 같은 곳에 보관하는 것이 데이터베이스라고 생각하면 됩니다. 엑셀파일처럼 파일을 하나씩 또는 여러개를 저장할 수 있습니다. 이 부분을 처리해주는 부분이 MySQL 영역입니다. 걱정마세요! 지금처럼 하나씩 따라하시면 됩니다.
connect 폴더를 만들고 connect.php 파일을 만들겠습니다.
- assets
- connect
- connect.php
- html
- index.html
http://webstoryboy.dothome.co.kr/connect/connect.php
주소는 다음과 같이 작성합니다. 여러분들은 webstoryboy 대신에 여러분 아이디를 작성하시면 됩니다.
<?php
$host = "localhost";
$user = "webstoryboy";
$pw = "Forever0";
$db = "webstoryboy";
$connect = new mysqli($host, $user, $pw, $db);
$connect -> set_charset("utf-8");
if(mysqli_connect_errno()){
echo "DATABASE Connect False";
} else {
echo "DATABASE Connect True";
}
?>해당 페이지를 들어가면 다음과 같은 메세지를 확인 할 수 있습니다. 접속이 안되는 분들은 dothome에 들어가서 정보를 확인해 보시기 바랍니다. 안되는 분들의 원인은 대부분 비밀번화 계정입니다. 또는 PHP 버전을 확인해 보세요!
1.2 MyAdmin 접속하기
이번에는 어드민 페이지를 접속하겠습니다.
여러분 도메인 주소 뒤에 myadmin을 작성하면 됩니다.
주소는 이런식으로 작성됩니다.
http://webstoryboy.dothome.co.kr/myadmin/
여러분의 개정과 비밀번호를 입력하면 됩니다.
현재는 데이터가 없습니다. 무료 버전을 사용하기 때문에 데이터베이스는 계정 아이디 하나만 존재합니다. 따로 만들어서 사용할 수는 없습니다. 대신 데이터 베이스 안에 테이블을 만들어서 사용하겠습니다. 엑셀에서 파일 하나를 만들어서 사용한다고 생각하시면 됩니다.
1.3 회원 테이블 만들기
그럼 테이블을 하나 만들어서 작업을 해보겠습니다.
- assets
- connect
- create
- createMember.php
- html
- index.html
<?php
include "../connect/connect.php";
$sql = "CREATE TABLE member (";
$sql .= "memberID INT(10) UNSIGNED AUTO_INCREMENT,";
$sql .= "yourEmail VARCHAR(40) NOT NULL,";
$sql .= "yourName VARCHAR(10) NOT NULL,";
$sql .= "yourPass VARCHAR(50) NOT NULL,";
$sql .= "regTime DATETIME NOT NULL,";
$sql .= "PRIMARY KEY (memberID)";
$sql .= ") DEFAULT CHARSET=utf8";
$result = $connect -> query($sql);
if($result){
echo "Create Tables Complete";
} else {
echo "Create Tables False";
}
?>이 코드는 데이터베이스에 member라는 새로운 테이블을 생성하고, 그 안에 memberID, youEmail, youName, youPass, regTime 열을 포함합니다. 이때, memberID는 기본 키로, 나머지 열은 각각의 데이터 유형과 제약 조건을 가지고 있습니다. 생성된 테이블은 UTF-8 문자 집합을 사용합니다. 이 과정은 데이터베이스에 회원 정보를 저장하기 위한 기본 틀을 구축하는 단계입니다.
- <?php : PHP 코드 시작을 나타내는 태그입니다.
- include "../connect/connect.php"; : 다른 파일을 현재 파일에 포함시킵니다. 여기서는 데이터베이스 연결과 관련된 파일인 connect.php를 포함시킵니다.
- memberID는 10자리의 부호 없는 정수로 자동으로 증가하는 기본 키로 설정됩니다.
- youEmail, youName, youPass, regTime은 각각 VARCHAR 형식의 문자열로 데이터베이스에 저장됩니다.
- youEmail, youName, youPass, regTime은 NOT NULL 제약 조건이 있어서 비어 있을 수 없습니다.
- memberID는 기본 키로 설정되어 테이블에서 고유한 값을 나타냅니다.
- charset=utf8은 테이블의 문자 집합을 UTF-8로 설정합니다.
대문자 또는 소문자를 사용하는 것은 SQL 구문을 작성할 때 쿼리를 읽기 쉽게 만들고, 코드를 일관되게 작성하기 위한 관례입니다. SQL은 대소문자를 구분하지 않기 때문에 대문자 또는 소문자 모두 사용할 수 있습니다. 일반적으로 표준 SQL 쿼리를 작성할 때, 키워드와 명령어는 대문자로 작성하고, 테이블 이름, 열 이름 또는 데이터 값을 작성할 때는 소문자로 작성하는 것이 일반적인 관례입니다. 이것은 코드를 읽기 쉽게 만들고, SQL 키워드와 사용자가 만든 객체 (테이블, 열 등)를 구분하기 위한 방법입니다. 따라서 SQL 쿼리에서 대문자를 사용하는 이유는 주로 가독성을 향상시키기 위함이며, 이는 코드를 유지보수하거나 협업할 때 도움이 될 수 있습니다. 하지만 이는 절대적인 규칙은 아니며, 중요한 점은 코드를 일관되게 작성하고 명확하게 표현하는 것입니다.
http://webstoryboy.dothome.co.kr/create/createMember.php 페이지를 실행하겠습니다.
그럼 페이지에 DATABASE Connect TrueCreate Tables Complete 이런 메세지가 표시되고, myadmin에 가보시면 테이블이 생성되어 있을
것입니다.
1.4 include 사용하기
PHP의 include 문은 다른 파일의 내용을 현재 PHP 파일에 포함시키는 데 사용됩니다. 이것은 코드 재사용, 유지보수 및 구조화를 위해 유용합니다. 다음은 메인 폴더를 만들고 include.php 파일을 만들겠습니다. include 폴더를 만들어서 다음과 같이 파일을 만들어 주겠습니다.
- assets
- connect
- html
- include
- footer.php
- header.php
- link.php
- skip.php
- main
- include.php
- index.html
include.php 파일은 다음과 같이 작업하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="디자인, 코딩, 개발을 이용하여 나만의 블로그 사이트를 만드는 강의입니다." />
<meta name="keyword" content="포트폴리오, PHP, 디자인, 풀스택, 코딩, 블로그, 웹표준, 피그마, Figma, 웹스토리보이" />
<title>풀스택 도전! PHP로 나만의 블로그 만들기 🤨</title>
<?php include "../include/link.php" ?>
<!-- //link -->
</head>
<body>
<?php include "../include/skip.php" ?>
<!-- //skip -->
<?php include "../include/header.php" ?>
<!-- //header -->
<main id="main" role="main">
<div class="container">
</div>
</main>
<!-- //main -->
<?php include "../include/footer.php" ?>
<!-- //footer -->
</body>
</html>
footer.php 파일은 다음과 같이 작업하겠습니다.
<footer id="footer" role="contentinfo">
<div class="container">
<div class="footer__inner borderTopStyle">
<div class="left">
<h6>Websloper Blog</h6>
<p>
열심히 만들었습니다.<br>
꼭 끝까지 완성해주세요. 화이팅 👏<br>
문의사항은 언제든지 <a href="mailto:webstoryboy@naver.com">webstoryboy@naver.com</a><br>
항상 감사합니다.(꾸벅)
</p>
</div>
<div class="right">
<p>Copyright © WEBS Corp. All Rights Reserved.</p>
<div class="sns">
<ul>
<li><a href="https://www.instagram.com/webstoryboy/"><span class="ir">인스타그램</span></a></li>
<li><a href="https://github.com/webstoryboy"><span class="ir">깃헙</span></a></li>
<li><a href="https://www.youtube.com/webstoryboy"><span class="ir">유튜브</span></a></li>
<li><a href="https://webstoryboy.co.kr/"><span class="ir">웹스토리보이</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- //footer -->
header.php 파일은 다음과 같이 작업하겠습니다.
<header id="header" role="banner">
<div class="container">
<div class="header__inner">
<div class="left">
<a href="../index.html">
<span class="blind">메인으로</span>
</a>
</div>
<h1 class="logo">
<a href="main.html">Websloper Blog</a>
</h1>
<div class="right">
<ul>
<li><a href="login.html">로그인</a></li>
<li><a href="join.html">회원가입</a></li>
</ul>
</div>
</div>
<nav class="nav__inner">
<ul>
<li><a href="blog.html">최신 기술 동향</a></li>
<li><a href="blogView.html">코딩 팁</a></li>
<li><a href="boardWrite.html">문제 해결 방법</a></li>
<li><a href="board.html">공지 사항</a></li>
</ul>
</nav>
</div>
</header>
<!-- //header -->
link.php 파일은 다음과 같이 작업하겠습니다.
<link rel="icon" type="image/svg+xml" href="../assets/face/Driven.svg" />
<link rel="stylesheet" href="../assets/css/style.css">
skip.php 파일은 다음과 같이 작업하겠습니다.
<div id="skip">
<a href="#header">헤더 영역 바로가기</a>
<a href="#main">콘텐츠 영역 바로가기</a>
<a href="#footer">푸터 영역 바로가기</a>
</div>
<!-- //skip -->이렇게 완성된 파일은 다음부터 작업할 때 사용할 것입니다. 코딩 파일이 없이 오신 분들은 소스를 복사해서 사용하시면 됩니다. 수고하셨습니다. 😄
댓글