FLASK 웹 사이트 만들기 2

FLASK 웹 사이트 만들기 2

1. notion 접속

https://www.notion.so/

2. 새 페이지 생성 후 html 포맷 입력 → 우측 상단 ... 클릭 → Export 클릭

3. Export format - HTML → Export 버튼 마우스로 클릭

4. 임의의 경로에 폴더 생성하여 압축 풀기

5. hello로 html 파일 이름 변경

6. html 편집기 다운로드

https://atom.io/

https://notepad-plus-plus.org/downloads/

※ 그냥 구름 IDE 이용해도 됨

https://ide.goorm.io/

7. 전체선택 Ctrl + A → 복사 Ctrl + C

8. 구름 IDE → 프로젝트 hello.html에 전체 복사 → 맨 끝에 코드에 <a> 태그 추가하여 수정 → Ctrl + S로 저장

<a href="/apply">집 등록하기</a>
<a href="/list">등록한 집 목록보기</a>

9. Notion에서 페이지 추가 1

10. Notion에서 페이지 추가 2

11. 집 등록하기 & 리스트 보여주기 Export

12. Export format - HTML → Export 버튼 마우스로 클릭

13. 임의의 경로에 생성한 폴더에 압축 풀기

14. list.html / apply.html로 html 파일 이름 변경

15. html 편집기에서 (list.html / apply.html로 html)을 각각 열어서 전체선택 Ctrl + A → 복사 Ctrl + C

16. 구름 IDE에 동일한 이름의 html 파일 생성하여 전체 복사한 html 코드 붙여넣기

 출처

* FLASK 이미지 : https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9D%BC%EC%8A%A4%ED%81%AC_(%EC%9B%B9_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

클론코딩 강의  : https://www.youtube.com/watch?v=EPN_NAQsk7M&list=PLqIc89sXpwUBmr0Z282fm9JurDDYBE55r&index=3 

FLASK 웹 사이트 만들기 1

FLASK 웹 사이트 만들기 1

1. 구름 IDE 접속

https://ide.goorm.io/

2. 컨테이너 생성

Name : BUILD
Description : house build Web Site
Region : Seoul(KOR)
Visibility : Private
Template : Default Template
Deployment : Not used
Stack : Flask

3. 컨테이너 생성 완료 화면 → Run Container 버튼 마우스로 클릭

4. PROJECT → Running URL and Port

5. Propety → Running URL and Port → Port 80 Delete

6. URL & PORT 입력 후 Register 버튼 마우스로 클릭

URL : https:// housetest
PORT : 5000

7. application.py default code

from flask import Flask
import sys
application = Flask(__name__)


@application.route("/")
def hello():
    return "Hello goorm!"


if __name__ == "__main__":
    application.run(host='0.0.0.0', port=int(sys.argv[1]))

8. templates 폴더 생성 → hello.html 생성

<h1>
    hello
</h1>

9. application.py update code

from flask import Flask, render_template
import sys
application = Flask(__name__)


@application.route("/")
def hello():
    return render_template("hello.html")


if __name__ == "__main__":
    application.run(host='0.0.0.0')

10. TERMINAL → python3 application.py 실행 확인

* local일 경우 - http://0.0.0.0:5000/ 링크 클릭
* goorm IDE일 경우 - 11~12번 참고

11. PROJECT → Running URL and Port

12. Propety → Running URL and Port → Registed URL and Port → URL 링크 바로가기 버튼 마우스로 클릭

URL - https://housetest.run.goorm.io

13. 홈페이지 확인

 출처

* FLASK 이미지 : https://ko.wikipedia.org/wiki/%ED%94%8C%EB%9D%BC%EC%8A%A4%ED%81%AC_(%EC%9B%B9_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC)

클론코딩 강의  : https://www.youtube.com/watch?v=hsfibrhGFiM&list=PLqIc89sXpwUBmr0Z282fm9JurDDYBE55r&index=2 

설치

 Python 설치

1. python 설치 진행 - python 사이트 접속

https://www.python.org/

https://www.python.org/downloads/release/python-381/

2. python 3.8.1 Windows x86-64 executable installer 다운로드

3. python 설치 파일 다운로드 완료되면 실행

4. 아래 2가지 체크 후 Customize installation 마우스로 클릭 

- Install launcher for all users (recommended)

- Add Python 3.8 to PATH

5. Next 마우스로 클릭

6. Customize install location 변경 -> Install 버튼 마우스로 클릭

C:\Users\UserName\AppData\Local\Programs\Python\Python38
C:\Python38

7. Python 3.8.1 설치 진행중인 화면 

8. Python 3.8.1 설치 완료

9. 시스템 정보 → 고급 시스템 설정

★ 시스템 정보 단축키 : Windows Key + Pause Key 

10.  시스템 속성 → 고급 → 환경 변수(N)...

11. 환경 변수 → 사용자 변수 → 편집

12. 환경 변수 편집에서 아래 2개의 경로 확인

C:\Python38\Scripts\
C:\Python38\

13. Python 3.8.1 설치된 경로에 정상 설치 여부 확인

 PyCharm 설치 및 설정

0. Pycharm 설치

https://www.jetbrains.com/pycharm/

https://inpages.tistory.com/99

설치가 되어 있다는 가정하에 설정

1.  File → New Project...

2. Previously configured interpreter → [...] 마우스로 클릭

3. Add Python Interpreter → System Interpreter → [...] 마우스로 클릭 → C:\Python38\python.exe 경로 설정 → OK 버튼 마우스로 클릭 → OK 버튼 마우스로 클릭

1. Add Python Interpreter → System Interpreter
2. Add Python Interpreter → [...] 마우스로 클릭 
3. Select Python Interpreter → C:\Python38\python.exe 경로 설정 
4. Select Python Interpreter OK 버튼 마우스로 클릭 
5.  Add Python Interpreter  OK 버튼 마우스로 클릭

4. Location → 우측 폴더 모양 마우스로 클릭

5. Select Base Directory - 경로를 C:\pythonstudy로 설정 후 OK 버튼 마우스로 클릭

6. 프로젝트 명은 python으로 입력 후 Create 버튼 마우스로 클릭

7. 프로젝트 생성 완료

 출처

+ 강의 교재

https://chrome.google.com/webstore/search/Mac?hl=en-US&_category=themes 

183. Customers Who Never Order

 문제 설명

Create table If Not Exists Customers (id int, name varchar(255))
Create table If Not Exists Orders (id int, customerId int)
Truncate table Customers
insert into Customers (id, name) values ('1', 'Joe')
insert into Customers (id, name) values ('2', 'Henry')
insert into Customers (id, name) values ('3', 'Sam')
insert into Customers (id, name) values ('4', 'Max')
Truncate table Orders
insert into Orders (id, customerId) values ('1', '3')
insert into Orders (id, customerId) values ('2', '1')

+-------------+------+
| Column Name | Type |
+-------------+------+
| id          | int  |
| customerId  | int  |
+-------------+------+
id is the primary key column for this table.
customerId is a foreign key of the ID from the Customers table.
Each row of this table indicates the ID of an order and the ID of the customer who ordered it.

 입출력 예

Example 1:

Input: 
Customers table:
+----+-------+
| id | name  |
+----+-------+
| 1  | Joe   |
| 2  | Henry |
| 3  | Sam   |
| 4  | Max   |
+----+-------+
Orders table:
+----+------------+
| id | customerId |
+----+------------+
| 1  | 3          |
| 2  | 1          |
+----+------------+
Output: 
+-----------+
| Customers |
+-----------+
| Henry     |
| Max       |
+-----------+

 Oracle Query

select name as customers
from customers
where id not in
(select customerid from orders);

서브쿼리 (select customerid from orders)에서 customerid 결과가 아닌 id일 때, 컬럼 name 출력

* 참고 링크 : https://leetcode.com/problems/customers-who-never-order/discuss/1080196/Oracle-easiest-solution

https://stand-atop.tistory.com/144

 출처

https://leetcode.com/problems/customers-who-never-order/

627. Swap Salary

 문제 설명

Table: Salary

+----------------+-------------+
| Column Name | Type          |
+----------------+-------------+
| id                 | int             |
| name            | varchar       |
| sex               | ENUM        |
| salary            | int             |
+----------------+-------------+

id is the primary key for this table.
The sex column is ENUM value of type ('m', 'f').
The table contains information about an employee.

id는 이 테이블의 프라이머리 키입니다.
Sex 열은 유형의 ENUM 값('m', 'f')입니다.
표에는 직원에 대한 정보가 포함되어 있습니다.

 입출력 예

Input: 
Salary table:
+----+------+-----+--------+
| id | name | sex | salary |
+----+------+-----+--------+
| 1  | A    | m   | 2500   |
| 2  | B    | f   | 1500   |
| 3  | C    | m   | 5500   |
| 4  | D    | f   | 500    |
+----+------+-----+--------+
Output: 
+----+------+-----+--------+
| id | name | sex | salary |
+----+------+-----+--------+
| 1  | A    | f   | 2500   |
| 2  | B    | m   | 1500   |
| 3  | C    | f   | 5500   |
| 4  | D    | m   | 500    |
+----+------+-----+--------+
Explanation: 
(1, A) and (3, C) were changed from 'm' to 'f'.
(2, B) and (4, D) were changed from 'f' to 'm'.

 Oracle Query

UPDATE salary s
SET sex = 
CASE 
  WHEN sex='m' THEN 'f'
  WHEN sex='f' THEN 'm'
END;

update salary 
set sex = decode(sex,'m','f','m');

DECODE문 - ORACLE에서만 존재하는 함수

DECODE(컬럼명, 조건, True 결과값, False 결과값)

https://sseoui.tistory.com/110

* 참고 링크 : https://leetcode.com/problems/swap-salary/discuss/504204/Oracle-solution

https://leetcode.com/problems/swap-salary/discuss/708246/Using-Decode

 출처

https://leetcode.com/problems/swap-salary/