Tutorial/Portfolio

풀스택 도전! PHP로 나만의 블로그 만들기

by @webs 2023. 11. 01.

코딩 01

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 셋팅하기

개발

1. 기본 셋팅하기

1. 셋팅하기

1.1 vscode 셋팅하기

코드를 작업하기 전에 가장 먼저 vscode부터 셋팅을 하겠습니다. 코드 편집기가 있어야 하기 때문에 현재 가장 많이 사용하고 있는 편집기를 사용하겠습니다. https://code.visualstudio.com/ 여기에서 다운을 받습니다.

2. 호스팅 셋팅하기

호스팅은 웹사이트나 애플리케이션을 온라인으로 공개하기 위해 사용되는 서비스입니다. 이는 웹사이트의 파일, 데이터베이스, 이미지 등을 저장하고, 이를 온라인으로 액세스할 수 있도록 하는 기술적 환경을 제공합니다. 우리는 닷홈이라는 곳에서 무료 서비스를 신청하겠습니다. 물론 이곳 말고도 편한 곳이 있으면 그곳에서 작업을 하셔도 상관없습니다. https://www.dothome.co.kr/ 여기에서 다운을 받습니다.

저는 무료를 신청하겠습니다.

신청할 때 FTP 정보와 DB 정보는 꼭 기억하셔야 합니다.

1.3. 파일질라 셋팅하기

호스팅 셋팅까지 완료했다면 이제는 호스팅에 파일을 전송할 수 있는 파일질라 프로그램을 설치하겠습니다. https://filezilla-project.org/ 여기에서 다운을 받습니다.

설치가 완료되면 다음과 같은 화면이 연출됩니다.

호스팅, 사용자명, 비밀번호를 입력합니다. 이 부분은 마이닷홈 페이지에서 확인을 해주세요!

로그인에 성공하시면 다음과 같은 화면이 나옵니다. 호스팅을 입력할 때에는 http는 적지 않습니다. 또한 빈칸도 있으면 안됩니다. 아마도 로그인이 안되면 90% 이상은 비밀번호가 틀린 것입니다. 안되는 분들은 다시 한번 확인해 주세요! 오른쪽 영역이 서버 영역이고 왼쪽 영역이 클라이언트 영역입니다. 즉 여러분 컴퓨터입니다.