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


Client and server


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


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


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


Make a sample html 1 – simple html


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


http://getbootstrap.com/getting-started/

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

width, initial-scale=1"> in header


Grid system


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 未満の画面。携帯など。


Sample3: responsive page


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


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>


Sample4


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




Next, Create a web app in 4 steps


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


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”


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.


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


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!”


http://localhost:5000/

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)


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


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


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


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

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


http://getbootstrap.com/getting-started/

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




Engineering

Lecture for Bootstrap and flask in Python