1 of 11

Semester.ly

Django + Bootstrap App in 9 Steps

2 of 11

Max Yeo

max@semester.ly

​

Noah Presler

noah@semester.ly

​

​

​

​

3 of 11

  • Python Framework
  • Templated Frontend
    • Made Fancy with Bootstrap
  • Fly Away Pretty Birds
    • Use our repo to build an App

4 of 11

MVC Frameworks and REST

  • Model - Objects + relations to be stored in the database.
  • View - The frontend of the webapp that a user sees upon navigating
  • Controller - The receiver of actions taken by the user via requests. Executes queries, edits models in response.
  • REST
    • GET - retrieve data
    • PUT - store data
    • POST - store/update data
    • DELETE - remove data

5 of 11

Views

Python functions (views.py)

Handles a web request, returns a response!

​

6 of 11

Models

Python classes (models.py)

An Abstraction of the Database Layer

​

id

Question (foreign key)

choice_text

votes

1

21321

“Semester.ly”

34

2

32133

“JHU CS”

21

7 of 11

Templates

HTML + Django Syntax (templates/name_of_template.html)

Allows you to use the vanilla HTML tags you are used to

​

​

​

Then spice things up with embedded python

​

​

​

​

8 of 11

Django & Bootstrap World (It’s all Python and HTML :) )

Django

  • provides a request and response system
  • Request enter Django via URLs
  • Requests get processed by views
  • Web responses are Returned

Bootstrap

  • makes the web responses pretty w/o knowing CSS
  • https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  • <div class="some_bootstrap_class"> </div>

​

9 of 11

<div class="row">

<div class="col-md-8">.col-md-8</div>

<div class="col-md-4">.col-md-4</div>

</div>

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

</div>

​

10 of 11

Git Repo to Follow Along (we’ve updated bugs)

https://github.com/noahpresler/Django-Tutorial

Feel free to ask us questions,

11 of 11

Semester.ly

Django + Bootstrap Workshop