lecture for bootstrap and flask in python

アントレプレナーシップ論講座 プレ講座 WEB 勉強会2012 年受講生

渡邊直樹Monday, April 3, 2017

Self Introduction• 2016-2017 某外資 IT• 2014-2016 東京大学理学系大学院で素粒子研究• 2010-2014 東京大学教養学部理科一類 , 工学部物理工学科• 最近の趣味• 読書 : 3 月は 120 冊読んだ• ウェブ開発• 執筆

• 目標• より自由になる ( 人間関係、やりたいこと、自信、スキル、金など )

Monday, April 3, 2017 Entrepreneurship cources 2

Agenda• Understand how the Internet works• Make a responsive landing page with Bootstrap

template• Make a simple web application with flask in Python

Monday, April 3, 2017 Entrepreneurship cources 3

Client and server

Monday, April 3, 2017 Entrepreneurship cources 4

At first, get a landing page template• Search “Bootstrap onepage” and click the top• Find “Landing page” and go.• Download a source code• Open index.html on your browser. It’s responsible

Monday, April 3, 2017 Entrepreneurship cources 5

To know html and CSS• HTML contains text, img, checkbox, heading ….• CSS contains border, padding, color, font ….• To know easily, rename css folder to something and

open index.html

Monday, April 3, 2017 Entrepreneurship cources 6

Bootstrap• Bootstrap is a UI framework published by Twitter.• 3.4% of the entire webpage are powered by bootstrap.• Cross browser compatibility• Responsive for smartphone and PC

Monday, April 3, 2017 Entrepreneurship cources 7

Make a sample html 1 – simple html

Monday, April 3, 2017 Entrepreneurship cources 8

Add bootstrap to html• Go to http://getbootstrap.com/getting-started/• Copy

Monday, April 3, 2017 Entrepreneurship cources 9

Sample HTML 2 – add bootstrap• Add <link rel…> in header• Add <meta name="viewport" content="width=device-

width, initial-scale=1"> in header

Monday, April 3, 2017 Entrepreneurship cources 10

Grid system

Monday, April 3, 2017 Entrepreneurship cources 11

How to write class• class=“col-{size}-{number of columns}• Ex) class=“col-md-3”

• lg: 幅 1200px 以上の画面。デスクトップ PC など。• md: 幅 992px 以上の画面。デスクトップ PC など。• sm: 幅 768px 以上の画面。タブレットなど。• xs: 幅 768px 未満の画面。携帯など。

Monday, April 3, 2017 Entrepreneurship cources 12

Sample3: responsive page

Monday, April 3, 2017 Entrepreneurship cources 13

Change typos 8 and 4 to 12 as.col-xs-12 col-md-6.col-sx-12 col-md-6↓

Q. A column for smartphone,4 columns for desktop?• 3 minutes

Monday, April 3, 2017 Entrepreneurship cources 14

Answer

<div class="col-xs-12 col-md-3">1</div> <div class="col-xs-12 col-md-3">2</div> <div class="col-xs-12 col-md-3">3</div> <div class="col-xs-12 col-md-3">4</div>

Monday, April 3, 2017 Entrepreneurship cources 15

Sample4

Monday, April 3, 2017 Entrepreneurship cources 16

Edit a bootstrap template• <title>…</title>• <h1>…</h1>• <h2>…</h2>• <p>…</p>• Download a photo to img folder and change path in

html <img src=“img/{filename}”>

I’ll show you what I edited in 10 minutes.Monday, April 3, 2017 Entrepreneurship cources 17

Monday, April 3, 2017 Entrepreneurship cources 18

Monday, April 3, 2017 Entrepreneurship cources 19

Monday, April 3, 2017 Entrepreneurship cources 20

Next, Create a web app in 4 steps

Monday, April 3, 2017 Entrepreneurship cources 21

Step 1: Install Python• Install Python• Search “python” on the Internet• Install the latest version (3.6.1)

Monday, April 3, 2017 Entrepreneurship cources 22

Set environment variables (Windows)• Search “environment” in Windows. • Click “ 環境変数を編集”• Add “;C:\Python36” to “Path” in “system environment

variables“ at the end.• Click “New” in “system environment variables“

and 変数名 : “PYTHONPATH”,変数値” C:\Python36\Scripts”

Monday, April 3, 2017 Entrepreneurship cources 23

Run python• Search “cmd” and run “Command prompt”• Type “python” and hit enter• If you are on Mac and python version2.7 starts, try”python3”

instead.• type exit() to go back.

Monday, April 3, 2017 Entrepreneurship cources 24

Step2: Install flask• On the terminal (mac) / command prompt (windows)• type “$pip install flask” and hit an enter (without $)

Monday, April 3, 2017 Entrepreneurship cources 25

Step 3: Make a “app.py” filefrom flask import Flaskapp = Flask(__name__)

@app.route("/")def hello(): return "Hello World!"

if __name__ == "__main__": app.run()Monday, April 3, 2017 Entrepreneurship cources 26

Run your app and go to your website• $python app.py• Then, go to http://localhost:5000• You will see “Hello Word!”

Monday, April 3, 2017 Entrepreneurship cources 27

Step 4: Add below code to app.pyfrom flask import render_template

@app.route('/hello')@app.route('/hello/<name>')def hello(name=None): return render_template('hello.html', name=name)

Monday, April 3, 2017 Entrepreneurship cources 28

Make a templates folder/app.py/templates /hello.html

Monday, April 3, 2017 Entrepreneurship cources 29

hello.html<!doctype html><title>Hello from Flask</title>{% if name %} <h1>Hello {{ name }}!</h1>{% else %} <h1>Hello, World!</h1>{% endif %}

Monday, April 3, 2017 Entrepreneurship cources 30

Run app (Ctrl+C to stop if it’s running)• Run by type >python app.py• Access to http://localhost:5000/hello/yourname

Monday, April 3, 2017 Entrepreneurship cources 31

That’s all, folks. Here is citations• http://getbootstrap.com/getting-started• http://

bootstrap-sass.happyfuncorp.com/bootstrap-sass/layout/README.html

Monday, April 3, 2017 Entrepreneurship cources 32