django introduction & tutorial
TRANSCRIPT
![Page 1: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/1.jpg)
2017@Department of Computer Science, University of Taipei Presented by Denffer
DjangoBuild an organized web application
![Page 2: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/2.jpg)
Outline1. Introduction
2. Basic Knowledge
3. Technical Details
4. Tutorial
5. Conclusion
![Page 3: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/3.jpg)
Outline1. Introduction2. Basic Knowledge
3. Technical Details
4. Tutorial
5. Conclusion
![Page 4: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/4.jpg)
Introduction
What is Django?A high-level Python Web Framework
![Page 5: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/5.jpg)
Introduction
What is Framework?Front-end & Back-end co-development
![Page 6: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/6.jpg)
Introduction
What is Framework like?A stage company for performers
![Page 7: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/7.jpg)
Introduction
Why should I use Django?Clean & Rapid development
![Page 8: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/8.jpg)
Introduction
Who use Django?Instagram & Pinterest & Bitbucket
![Page 9: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/9.jpg)
Outline1. Introduction2. Basic Knowledge
3. Technical Details
4. Tutorial
5. Conclusion
![Page 10: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/10.jpg)
Outline1. Introduction
2. Basic Knowledge3. Technical Details
4. Tutorial
5. Conclusion
![Page 11: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/11.jpg)
Basic Knowledge
![Page 12: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/12.jpg)
WorkflowBasic Knowledge
Web Browser
URLTemplate
View
Model
Form
Database
Admin
![Page 13: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/13.jpg)
Basic KnowledgeWeb Browser
URLTemplate
View
Model
Form
Database
Admin
![Page 14: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/14.jpg)
1. Click 2. Type3. Press Enter
Web Browser• What users actually see• Responds to what users do
when they
Basic KnowledgeWeb Browser
URLTemplate
View
Model
Form
Database
Admin
![Page 15: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/15.jpg)
URL• Often referred as the ‘web
address’• Provides mapping to View
What is mapping?The act of assigning
functions to URLs
Basic KnowledgeWeb Browser
URLTemplate
View
Model
Form
Database
Admin
![Page 16: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/16.jpg)
View• Where all the functions are
written • Render content to Template• Get information from Model
before rendering content• Put information into Model and
into Database through Form
Web Browser
URLTemplate
View
Model
Form
Database
Admin
Basic Knowledge
![Page 17: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/17.jpg)
Template• The place you systematically
store all of your Html files• You will have a ‘static’ folder to
store other CSS files,
Javascript files, or Images
Web Browser
URLTemplate
View
Model
Form
Database
Admin
Basic Knowledge
![Page 18: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/18.jpg)
Web Browser
URLTemplate
View
Model
Form
Database
Admin
Basic Knowledge
HTML Form ≠ Django FormForm
HTML FormConsists of
• input element• checkbox• submit button• radio button• and much more
![Page 19: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/19.jpg)
Web Browser
URLTemplate
View
Model
Form
Database
Admin
Basic Knowledge
HTML Form ≠ Django FormForm
Django FormAims to
• fetch data from html form• helps to connect to Model
![Page 20: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/20.jpg)
Basic KnowledgeWeb Browser
URLTemplate
View
Model
Form
Database
Admin
Model• Describes the structure of an
object you want to store in Database
• Goes straight to Database and create & edit & requestinformation as you wish
![Page 21: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/21.jpg)
Basic KnowledgeWeb Browser
URLTemplate
View
Model
Form
Database
Admin
Admin• Helps to register your object
in your Model so you can manage data in Database
• The registration has to be done in the first place
![Page 22: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/22.jpg)
Basic KnowledgeWeb Browser
URLTemplate
View
Model
Form
Database
Admin
?Database
![Page 23: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/23.jpg)
Basic KnowledgeWeb Browser
URLTemplate
View
Model
Form
Database
Admin
Database
Collection of data
![Page 24: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/24.jpg)
Basic KnowledgeDatabase
• Collection of data• Provided with a wonderful
back-end platform for easymanagement
Web Browser
URLTemplate
View
Model
Form
Database
Admin
![Page 25: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/25.jpg)
WorkflowBasic Knowledge
Web Browser
URLTemplate
View
Model
Form
Database
Admin
![Page 26: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/26.jpg)
Outline1. Introduction
2. Basic Knowledge3. Technical Details
4. Tutorial
5. Conclusion
![Page 27: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/27.jpg)
Outline1. Introduction
2. Basic Knowledge
3. Technical Details4. Tutorial
5. Conclusion
![Page 28: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/28.jpg)
Technical Details1. Directory Architecture
2. Module
3. Commands
4. Template Tags
5. High-level URL Configuration
![Page 29: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/29.jpg)
Directory ArchitectureContainer of your entire project, which often referred as ‘workspace’ The command-line utility to interact with your Django project E.g1. python manage.py help E.g2. python manage.py runserver -h
———— The name of your Django project
The file required for Python to treat this directory as a package——-
project_name/ ————————manage.py —————
your_project/
your_app/
__inti__.pymigration/static/templates/admin.pyform.pymodel.pyviews.pydb.sqlite3
__inti__.pysettings.pyurl.py
Configuration for this Django project
One of the web applications of this Django project
Management of URLs to provide mapping to view.py
The file which stores all of your CSS, JS, images
——-————-
—————-
——- The file which stores all the variations in your database
——- Your databaseAll the functions needed to process or respond user’s request ———
————The file which stores all of your HtmlIt reads your model and provides interface to your databaseIt is used to fetch data and performs validationDescription of the format or structure of an object stored in Database
——-———
———-———
Technical Details
![Page 30: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/30.jpg)
Technical Details1. Directory Architecture
2. Module
3. Commands
4. Template Tags
5. High-level URL Configuration
![Page 31: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/31.jpg)
mypackage/
__init__.pymymodule.py
ModuleTechnical Details
• A module is a python source file • A package is a directory of Python module(s)
![Page 32: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/32.jpg)
Technical Details1. Directory Architecture
2. Module
3. Commands
4. Template Tags
5. High-level URL Configuration
![Page 33: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/33.jpg)
CommandsTechnical Details
$ python manage.py startproject project_nameTo start an project
![Page 34: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/34.jpg)
CommandsTechnical Details
$ python manage.py startapp app_nameTo start an application
![Page 35: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/35.jpg)
CommandsTechnical Details
$ python manage.py createsuperuserTo create a superuser
![Page 36: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/36.jpg)
CommandsTechnical Details
$ python manage.py run server 0.0.0.0:8080To start up your server
Note: 0.0.0.0:8080 —> address:port
![Page 37: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/37.jpg)
$ python manage.py makemigrations To create new migration based on the changes you made in your models
$ python manage.py migrate To apply migration into your database
Note: Migration is Django’s way of propagating the changes you made into your database schema
CommandsTechnical Details
![Page 38: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/38.jpg)
$ python manage.py -h To ask for what kind of command can be used
$ python manage.py runserver -h To ask for what kind of command can be used after runserver
CommandsTechnical Details
![Page 39: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/39.jpg)
Technical Details1. Directory Architecture
2. Module
3. Commands
4. Template Tags
5. High-level URL Configuration
![Page 40: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/40.jpg)
Django saves you the trouble of repeating your codes
{% for object in objects %}
{{ object.attribute }}
{% endfor %}
Template TagsTechnical Details
![Page 41: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/41.jpg)
This is Django’s way of rendering Html Form
Note: Remember to wrap it within your HTML form tag
{{ form.as_p }}
Template TagsTechnical Details
![Page 42: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/42.jpg)
{{ csrf_token }}
This is used prevent ill-intentioned hacker from hacking into your database
Note: Remember to wrap it within your HTML form tag
Template TagsTechnical Details
![Page 43: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/43.jpg)
Technical Details1. Directory Architecture
2. Module
3. Commands
4. Template Tags
5. High-level URL Configuration
![Page 44: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/44.jpg)
High-level URL ConfigurationTechnical Details
url(r'^$', views.function)
?P< v > : to take v and sent to view as a variable ^ : beginning of the url $ : end of the url() : to capture part of the pattern+ : to indicate the previous item should repeat at least once{} : to indicate a specific number of repetition
![Page 45: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/45.jpg)
High-level URL ConfigurationTechnical Details
?P< v > : to take v and sent to view as a variable ^ : beginning of the url $ : end of the url() : to capture part of the pattern+ : to indicate the previous item should repeat at least once{} : to indicate a specific number of repetition
url(r’^anything/(?P<variable>[0-9]+)/$’, views.function)
![Page 46: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/46.jpg)
url(r'^(?P<variable>/[0-9]{n})/$', views.function)
High-level URL ConfigurationTechnical Details
?P< v > : to take v and sent to view as a variable ^ : beginning of the url $ : end of the url() : to capture part of the pattern+ : to indicate the previous item should repeat at least once{} : to indicate a specific number of repetition
![Page 47: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/47.jpg)
Technical Details1. Directory Architecture
2. Module
3. Commands
4. Template Tags
5. High-level URL Configuration
![Page 48: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/48.jpg)
Outline1. Introduction
2. Basic Knowledge
3. Technical Details4. Tutorial
5. Conclusion
![Page 49: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/49.jpg)
Outline1. Introduction
2. Basic Knowledge
3. Technical Details
4. Tutorial5. Conclusion
![Page 50: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/50.jpg)
Build an online contact list
Tutorial
https://github.com/Denffer/django_tutorial
![Page 51: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/51.jpg)
Find your Google Chrome
![Page 52: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/52.jpg)
Google “Cloud 9”
![Page 53: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/53.jpg)
Find “Cloud 9”
![Page 54: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/54.jpg)
Click on Github logo
![Page 55: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/55.jpg)
Login your Github
![Page 56: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/56.jpg)
Create a new workspace
![Page 57: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/57.jpg)
Create a new workspace
2.
3.
1.
![Page 58: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/58.jpg)
Welcome to Django on Cloud 9
![Page 59: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/59.jpg)
Click on ‘my_contacts’ and see what are the things initially given by Django
![Page 60: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/60.jpg)
Anything beyond these should be addedor created by yourself
![Page 61: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/61.jpg)
Once your workspace is created on Cloud 9,your project is created as well.
So there is NO need for you to
![Page 62: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/62.jpg)
Now, create your first Django application
![Page 63: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/63.jpg)
There you go. Your first Django application
![Page 64: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/64.jpg)
Check on what is inside
![Page 65: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/65.jpg)
See that? Your application is actually a package,and it contains the modules we’ve seen earlier.
![Page 66: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/66.jpg)
Open your urls.py
![Page 67: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/67.jpg)
The default url given by Django is the web address connecting to your back-end management platform
![Page 68: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/68.jpg)
Now, copy and paste the codes in urls.py from therepository you cloned from Github
![Page 69: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/69.jpg)
Do you see the dot over here?This means that the file is NOT saved
![Page 70: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/70.jpg)
From here on, remember to save your file after every edition
![Page 71: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/71.jpg)
Great! The cross shown here means that you have already saved the file
![Page 72: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/72.jpg)
Whoops! It says there are some problems with your “View”
![Page 73: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/73.jpg)
Let’s deal with it. Now go to views.py
![Page 74: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/74.jpg)
Remember? This is where you put all the functions
![Page 75: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/75.jpg)
Now, copy and paste the codes in views.py from therepository you cloned from Github
![Page 76: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/76.jpg)
Remember to save your file
![Page 77: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/77.jpg)
Whoops! It says there are some problems with your “Model”
![Page 78: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/78.jpg)
Let’s deal with it. Now go to models.py
![Page 79: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/79.jpg)
Remember? You have to construct your model so itcan really connects to your database
![Page 80: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/80.jpg)
Now, copy and paste the codes in models.py from therepository you cloned from Github
![Page 81: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/81.jpg)
Remember to save your file
![Page 82: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/82.jpg)
Let’s go to settings.py
![Page 83: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/83.jpg)
Find ‘INSTALLED_APPS’
![Page 84: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/84.jpg)
State your application in INSTALLED_APPS
![Page 85: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/85.jpg)
Remember to save your file
![Page 86: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/86.jpg)
Django does not provide Form by default
So you have to create it by yourself
![Page 87: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/87.jpg)
Create a file named ‘forms.py’ in your application ‘mycontacts’
![Page 88: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/88.jpg)
There you go. Open it.
![Page 89: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/89.jpg)
Remember? Django Form is used to fetch data from Html Form
![Page 90: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/90.jpg)
Now, copy and paste the codes in forms.py from therepository you cloned from Github
![Page 91: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/91.jpg)
Remember to save your file
![Page 92: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/92.jpg)
One more step. Let’s go to admin.py
![Page 93: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/93.jpg)
Remember? Admin is used to register your Model in your Database
![Page 94: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/94.jpg)
Now, copy and paste the codes in admin.py from therepository you cloned from Github
![Page 95: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/95.jpg)
Remember to save your file
![Page 96: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/96.jpg)
Great! Now you have to make a migration so that your Model
and be recognized and stored in Database
![Page 97: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/97.jpg)
Go to command line and type in the command
![Page 98: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/98.jpg)
Great! You have just created your first model
![Page 99: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/99.jpg)
Now, type in the command to write your model into your Database
![Page 100: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/100.jpg)
Great! Your first database is just created with your model written in it
![Page 101: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/101.jpg)
Let’s check on our database and see how it looks like
However, before that, we have to create a superuser account
![Page 102: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/102.jpg)
Type in the command to create a superuser
![Page 103: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/103.jpg)
This should be easy
![Page 104: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/104.jpg)
Now comes the interesting part!
Let’s us launch our server!
![Page 105: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/105.jpg)
Type in the command to launch the server
![Page 106: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/106.jpg)
Click on the link to your website!
![Page 107: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/107.jpg)
Welcome to your first Django error
![Page 108: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/108.jpg)
Don’t worry. Let’s edit and add ‘/admin/‘ to your URL
![Page 109: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/109.jpg)
Log in with your superuser account
![Page 110: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/110.jpg)
You should be able to see your model
![Page 111: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/111.jpg)
But it is now empty
![Page 112: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/112.jpg)
Click on ‘ADD CONTACT’ button
![Page 113: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/113.jpg)
Let’s add 9 contact members
1
2
![Page 114: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/114.jpg)
Click ‘SAVE’ button on the last contact member
1
2
![Page 115: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/115.jpg)
Now you should see 9 contact members
![Page 116: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/116.jpg)
Let’s go back to ‘my_project’
![Page 117: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/117.jpg)
Too messy. Let’s kill all the tabs
![Page 118: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/118.jpg)
Great! Now let’s deal with the ‘template’ problem
![Page 119: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/119.jpg)
Create a folder named ‘templates’ under yourapplication ‘mycontacts’
![Page 120: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/120.jpg)
Remember? templates are used to contain all of your Html files
![Page 121: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/121.jpg)
Now create another folder named ‘mycontacts’ in the folder ‘templates’
![Page 122: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/122.jpg)
Remember the name of this folder should be the same as the name of your application
![Page 123: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/123.jpg)
Create ‘show.html’, ‘add.html’, and ‘background.html’ in the directory ‘mycontacts/templates/mycontacts’
![Page 124: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/124.jpg)
Respectively copy and paste the codes in the html files from the repository you cloned from Github
![Page 125: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/125.jpg)
Next, create a folder named ‘static’ in your application
![Page 126: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/126.jpg)
Remember? ‘static’ is used to contain all of your CSS files and Javascript files
![Page 127: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/127.jpg)
Next, create two folders named ‘css’ and ‘js’ in the folder ‘static’
![Page 128: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/128.jpg)
Create ‘show.css’ & ‘add.css’ in the folder ‘css’
![Page 129: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/129.jpg)
Respectively copy and paste the codes in the CSS files from the repository you cloned from Github
![Page 130: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/130.jpg)
Create ‘show.js’ & ‘add.js’ in the folder ‘js’
![Page 131: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/131.jpg)
Respectively copy and paste the codes in the JS files from the repository you cloned from Github
![Page 132: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/132.jpg)
Go to command line. Hit ‘control’ + ‘c’ to kill the server
![Page 133: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/133.jpg)
1
2
Start up the server again!
![Page 134: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/134.jpg)
Ladies and gentlemen …
![Page 135: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/135.jpg)
It worked! Feel free to play around!
![Page 136: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/136.jpg)
Outline1. Introduction
2. Basic Knowledge
3. Technical Details
4. Tutorial5. Conclusion
![Page 137: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/137.jpg)
Outline1. Introduction
2. Basic Knowledge
3. Technical Details
4. Tutorial
5. Conclusion
![Page 138: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/138.jpg)
Conclusion
Alignment & Consistency Two basic rules for a successful design
![Page 139: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/139.jpg)
Conclusion
Error is your friendLearn to embrace it
![Page 140: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/140.jpg)
Conclusion
Simple is goodTry not to squeeze everything in a single page
![Page 141: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/141.jpg)
Conclusion
Don’t play heroLearn to cooperate with one another
![Page 142: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/142.jpg)
Outline1. Introduction
2. Basic Knowledge
3. Technical Details
4. Tutorial
5. Conclusion
![Page 143: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/143.jpg)
Thank you
Department of Computer Science, University of Taipei
Presented by Denffer
![Page 144: Django Introduction & Tutorial](https://reader038.vdocument.in/reader038/viewer/2022102918/58ef85411a28ab03768b456b/html5/thumbnails/144.jpg)
2017@Department of Computer Science, University of Taipei Presented by Denffer
DjangoBuild an organized web application