All about {Web}

Brackets - 플러그인 Synapse : FPT 사용법 

Brackets - 플러그인 Synapse : FPT 사용법
01. Brackets 상단 메뉴중 파일 > "확장기능 관리자"를 실행합니다.
02.
 확장기능 관리자  대화상자 검색창에서 "SFTP"로 검색합니다.

03. Brackets Synapse  플러그인을 설치합니다.

(1) 아이콘을 클릭합니다.

(A)  + 버튼을 누르면 그림과 같이 Server Setting 대화상자가 나타납니다.
(B)  FTP,  SFTP 중 사용할 프로토콜을 선택.
(C)  HOST :  접속할 도메인
(D)  접속포트 :  FTP - 21,  SFTP - 22
(E)  USER :  신청한 웹호스팅 ID
(F)  PASSWORD :  신청한 웹호스팅 비번
(G) SETTING NAME :  사용할 FTP명으로 임의로 정하면됩니다. (ex;  Synape Test)
(H) APPEND 버튼을 클릭하면 저장됩니다.


(A) APPEND 아이콘을 클릭하면 (B)가 나타납니다. 이때 (C) CONNECT를 클릭하면 서버에 연결됩니다

좌측서버안의 파일을 클릭해 오른쪽에서 열리면 수정후 저장하면 자동 업로드 된다.


A. PHP 홈페이지의 시작
① XAMPP 프로그램을 실행합니다

② 코드 에디터 "Brackets"를 실행합니다. (아니면 다른 코드에디터를 실행합니다.)

메뉴중 "Getting Started" > "폴더열기"를 클릭해 경로 폴더를 선택합니다.

경로눈 XAMPP가 설치된 C:\xampp\htdocs 입니다. (xampp 설치시 디폴트 설치했을 경우)

a) 파일 > 새 파일 > "다른 이름으로 저장"을 클릭해 index.html로 저장합니다.
b) ! + Tab 키를 누르면 위의 그림과 같이 기본 html 페이지가 나타납니다.
c) 아래와 같이 페이지를 수정해 저장합니다.


일반적으로 웹호스팅의 index 파일 우선순위는 index.html, index.php 순이지만 XAMPP는 index.php가 우선 순위 입니다. XAMPP는 index.html, index.php 두 개의 파일이 있다면 index.php 파일을 우선 실행합니다.

브라우저 주소창에 'localhost' 또는 127.0.0.1로 접속하면 위와 같이 작성한 페이지가 나타납니다.
index.html 파일을 아래와 같이 수정후 index.php로 저장합니다.

이제 브라우저를 실행 후 주소창에 localhost  또는 127.0.0.1로 접속하면 아래와 같이 PHP 페이지가 나타납니다.


XAMPP [3] - 로컬서버 설치 및 PHP 테스트

01. 로컬서버 설정
(1) "config"를 클릭해 사용할 (a)edit와 (b)browser를 선택 설정합니다.
(a) edit는 Brackets로 (b)Browser는 Chrome으로 설정합니다. 

(2) "Admin"을 클릭하면 로컬호스트의 홈페이지가 접속됩니다. 현재로써는 localhost/dashboard에 접속됩니다.

(3) "Admin"을 클릭하면 MySQL(MariaDB)을 관리할 수 있는 phpMyAdmin에 접속됩니다.

02. ※Localhost에서 php 사용하기
localhost의 홈페이지 절대경로 :  C > xampp > htdocs

phpinfo.php 파일을 만들어 아래 내용을 작성해 위의 경로에 저장(업로드)합니다.
<?php phpinfo(); ?>


Emmet 축약구문( Abbreviations Syntax )

참고사이트 웹페이지:
https://docs.emmet.io/abbreviations/syntax/

구문의 예 )
   <div id="item"></div> /* #item + Tab */
   <div class="item"></div> 
/* .item + Tab */
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cumque quia, ut! Quibusdam quasi, illum nesciunt hic, distinctio, voluptatibus aliquid ex soluta explicabo aspernatur enim pariatur labore aut accusamus saepe.</p>
   <p>Modi velit quia sint molestiae debitis enim architecto voluptatem voluptate asperiores error voluptas, accusamus et expedita omnis, voluptates soluta, doloribus facere aperiam ipsum nam dolores magni! Tempore tempora at cum.</p>
/* p*2>lorem + Tab Key */
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia ratione asperiores eum, cupiditate neque exercitationem? Nihil saepe, in, quos unde ratione ullam ut fugit itaque ad esse repellat, obcaecati similique.
/* lorem + Tab */  
  
    <pan class="item"></pan>
/* span.item + Tab */
    <a href="">Click me</a> 
/* a{Click me} */

Brackets Shortcuts &middot; adobe_brackets Wiki &middot; GitHub.pdf

Brackets Shortcuts ( 브라켓 단축키 일람표 )

Brackets Plugin (확장기능) 설치 :  emmet
※ Emmet - 웹개발자의 필수불가결의 툴킷

1) 파일 > 확장기능 설치 > 검색창에 Emmet 검색후 설치

2) 설치가 끝나면 상단 메뉴에 "Emmet" 메뉴가 생성됩니다.

2) Emmet 플러그인 테스트 :
i) 파일 > 새파일 생성 후 -> 빈파일을 다른 이름으로 저장 합니다. 파일명은 test.html
ii) ! 를 입력후 키보드의 Tab 키를 누릅니다. 아래와 같이 html 기본 코드가 자동생성됩니다.


코드 에디터(Code Editor) - Brackets : Adobe에서 무료로 배포하는 에디터
https://brackets.io

01. 위의 사이트에 접속해 Brackets을 다운로드한 후 설치합니다.
02. Brackets을 실행합니다.  메뉴중  파일 > 확장기능 관리자를 실행합니다. 플러그인을 설치합니다.

1) 실행한 "확장기능 관리자"의 검색창에서 "Smart Theme Dark"를 검색해 설치합니다.
2) CSS important property를 검색해 설치합니다.


XAMPP (Apache + MariaDB + PHP + Perl) 메뉴 설명 및 설정

01. 컴퓨터 바탕화면의 "XAMPP Control Panel"을 실행하거나 windows 메뉴 > 프로그램 > XAMPP폴더 > XAMPP Control Panel을 실행합니다.

02. "Apache"와 "MySQL"의 Start 버튼을 눌러 실행합니다.


03. 위의 그림과 같이 실행되면 PID(S)와 Port(s)에 숫자가 나타나면서 실행됩니다.
04. [1] Config 을 클릭합니다.

[2]와 같이 "Configuration of Control Panel " 대화상자가 나타납니다.
A. Editor : 코딩에 사용할 코드 에디터를 선택지정합니다.
B. Browser : 기본 브라우저로 사용할 경로 및 실행파일을 선택합니다.
C. Autostart of Modules :  XAMPP를 실행하면 자동으로 실행될 모듈을 선택합니다. (Apache, MySQL을 선택하면 무난)
D. Start Control Panel Minimized : XAMPP 실행시 왼쪽 화면 하단에 최소화된 컨트롤 패널을 원하면 체크
E. Enable Tomcat output window :  체크시 톰캣의 윈도우 출력 가능 
F. Check default ports on startup :  시작시 디폴트 포트를 체크
G. Show debug information :  디버그 정보를 출력 
H. Service and Port Settings :  모듈별 사용 포트 설정 및 변경

※ MariaDB :
본래 MySQL이라는 오픈소스 개발그룹이 있었고 그걸 Oracle에서 인수했었지만,

조직내 이해관계가 맞지 않아 일부 핵심인원이 퇴사하고 나와서 MySQL 코어를 가지고 Fork(분리개발)한것이 MariaDB이다.

둘의 기능상의 차이는 거의 없지만 MariaDB의 퍼포먼스가 더 좋고, 엔진도 추가되어 오히려 MySQL보다 뛰어나며 가장 큰 장점은 속도이다. 2배 가량 퍼포먼스가 개선되었다고 한다.

그누(Gnu) 보드란?

그누보드는 공유 정신을 나타내는 "GNU" 와 게시판을 나타내는 "Board" 가 합쳐진 말입니다.
그누보드는 웹에서 게시글, 회원정보 등을 편리하게 관리하는 게시판(BBS - Bulletin Board System) 프로그램입니다. 오픈된 소스 코드를 바탕으로 다양한 기능(플러그인)을 추가하기 쉽게 제작되어 있습니다.
그누보드5의 대표적인 플러그인 으로는 쇼핑몰 기능을 하는 "영카트5" 가 있습니다.

사이트 : https://sir.kr/

다음 강좌 :  그누보드 설치

WordPress (워드프레스) 란?

1. 웹 기반 어플리케이션 ( Web based Application ).
2. 콘텐츠 관리 시스템 ( Content Management System - CMS )
3. 오픈 소스 ( Open Source )
4. 세계에서 가장 인기 있는 CMS ( World's Most Popular CMS )
5. PHP & MySQL에서 사용
6. 블로그(Blog) 또는 정적 사이트( Static Site ) 제작 가능


웹상에서 콘텐츠를 저작하고 출판할 수 있는 오픈 소스 콘텐츠 관리 시스템. 홈페이지처럼 자체적인 도메인과 호스팅을 이용할 수 있으며 자유롭게 콘텐츠 제작, 배포 및 키워드 검색을 할 수 있다. 또한 반응형 웹을 지원함으로써 모바일 서비스도 이용할 수 있다. 워드프레스는 2003년 매트 물렌웨그가 창립하였다.

[출처] 워드프레스 [WordPress] (IT용어사전, 한국정보통신기술협회)

☞ 다운로드 사이트
영문)  https://wordpress.org/    한글) https://ko.wordpress.org/

※ 왜 워드프레스(wordpress) 인가?
1. 워드레스는 소규모 비지니스와 전문적인 사이트를 만들어 사용하기에 적합하고 뛰어난 프랫폼(platform) 이다.
2. 특별한 소프트웨어가 필요하지 않다.
3. 수천개의 테마(theme)와 프러그인(Plug-in)이 제공된다.
4. 쉽게 워드프레스와 친숙해 질 수 있다.


 또 다른 CMS 프로그램
01. Gnu Board,  XE
02. - Open Source CMS :  Joomla, Drupal
     - Proprietary (Commercial) CMS :  Godaddy, Website Tonight, Weebly, Yola

wordpress.org  VS  wordpress.com


01. wordpress.org :  WordPress 소프트웨어를 제공하는 사이트 (도메인 구입이나 웹호스팅을 사용해야 할 수 있다.)
02. wordpress.com :  무료 또는 유로로 웹호스팅을 제공하는 사이트, 일부 기능이 제한적이다. (일부 플러그인 포함되어 있지 않다.)
02. WordPress 다운로드

CODE IS POETRY

PHP 코딩을 위한 로컬 서버를 만들자 -  XAMPP - Apache + MariaDB + PHP + Perl

https://www.apachefriends.org/index.html

PHP
하이퍼텍스트 생성 언어(HTML)에 포함되어 동작하는 스크립팅 언어. 별도의 실행 파일을 만들 필요 없이 HTML 문서 안에 직접 포함시켜 사용하며, C, 자바, 펄 언어 등에서 많은 문장 형식을 준용하고 있어 동적인 웹 문서를 빠르고 쉽게 작성할 수 있다. ASP(Active Server Pages)와 같이 스크립트에 따라 내용이 다양해서 동적 HTML 처리 속도가 빠르며, PHP 스크립트가 포함된 HTML 페이지에는 .php, .php3, .phtml이 붙는 파일 이름이 부여된다. 처음에는 ‘Personal Home Page Tools’이라 불렸으며, 공개된 무료 소스이다.

-출처 : PHP [Hypertext Preprocessor] (IT용어사전, 한국정보통신기술협회)

01. 상담 메뉴중 "DOWNLOAD"를 클릭합니다.

 

03. 다운로드 페이지에서 "XAMPP for Windows 5.6.35"를 다운로드 합니다.  PHP 7버전도 다운 가능하지만 현재 웹호스팅에서 보편화 되어있는 PHP 5.6버전을 다운로드합니다.
순서대로 디폴트 값으로 설치를 완료합니다.