Download as PDF, PPTX
![High-level URL Configuration
Technical 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)](https://image.slidesharecdn.com/djangointroductiontutorialpdf-160602062901/75/Django-Introduction-Tutorial-45-2048.jpg)
![url(r'^(?P<variable>/[0-9]{n})/$', views.function)
High-level URL Configuration
Technical 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](https://image.slidesharecdn.com/djangointroductiontutorialpdf-160602062901/75/Django-Introduction-Tutorial-46-2048.jpg)
Uploaded by之宇 趙
Django Introduction & Tutorial
The document provides an overview of building a web application using Django, covering key concepts such as frameworks, workflow, and Django's architecture. It includes a tutorial on setting up an online contact list, explaining directory structure, command usage, and template management. The conclusion emphasizes design principles and the importance of collaboration in development.
More Related Content
Similar to Django Introduction & Tutorial
Django Introduction & Tutorial
- 1. 2017@Department of ComputerScience, University of Taipei Presented by Denffer Django Build an organized web application
- 2. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 3. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 4. Introduction What is Django? Ahigh-level Python Web Framework
- 5. Introduction What is Framework? Front-end& Back-end co-development
- 6. Introduction What is Frameworklike? A stage company for performers
- 7. Introduction Why should Iuse Django? Clean & Rapid development
- 8. Introduction Who use Django? Instagram& Pinterest & Bitbucket
- 9. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 10. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 11.
- 12.
- 13.
- 14. 1. Click 2. Type 3.Press Enter Web Browser • What users actually see • Responds to what users do when they Basic Knowledge Web Browser URLTemplate View Model Form Database Admin
- 15. URL • Often referredas the ‘web address’ • Provides mapping to View What is mapping? The act of assigning functions to URLs Basic Knowledge Web Browser URLTemplate View Model Form Database Admin
- 16. View • Where allthe 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
- 17. Template • The placeyou 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
- 18. Web Browser URLTemplate View Model Form Database Admin Basic Knowledge HTMLForm ≠ Django Form Form HTML Form Consists of • input element • checkbox • submit button • radio button • and much more
- 19. Web Browser URLTemplate View Model Form Database Admin Basic Knowledge HTMLForm ≠ Django Form Form Django Form Aims to • fetch data from html form • helps to connect to Model
- 20. Basic Knowledge Web 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 & request information as you wish
- 21. Basic Knowledge Web 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
- 22.
- 23.
- 24. Basic Knowledge Database • Collectionof data • Provided with a wonderful back-end platform for easy management Web Browser URLTemplate View Model Form Database Admin
- 25.
- 26. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 27. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 28. Technical Details 1. DirectoryArchitecture 2. Module 3. Commands 4. Template Tags 5. High-level URL Configuration
- 29. Directory Architecture Container ofyour 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__.py migration/ static/ templates/ admin.py form.py model.py views.py db.sqlite3 __inti__.py settings.py url.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 database All the functions needed to process or respond user’s request——— ———— The file which stores all of your Html It reads your model and provides interface to your database It is used to fetch data and performs validation Description of the format or structure of an object stored in Database ——- ——— ———- ——— Technical Details
- 30. Technical Details 1. DirectoryArchitecture 2. Module 3. Commands 4. Template Tags 5. High-level URL Configuration
- 31. mypackage/ __init__.py mymodule.py Module Technical Details • Amodule is a python source file • A package is a directory of Python module(s)
- 32. Technical Details 1. DirectoryArchitecture 2. Module 3. Commands 4. Template Tags 5. High-level URL Configuration
- 33. Commands Technical Details $ pythonmanage.py startproject project_name To start an project
- 34. Commands Technical Details $ pythonmanage.py startapp app_name To start an application
- 35. Commands Technical Details $ pythonmanage.py createsuperuser To create a superuser
- 36. Commands Technical Details $ pythonmanage.py run server 0.0.0.0:8080 To start up your server Note: 0.0.0.0:8080 —> address:port
- 37. $ python manage.pymakemigrations 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 Commands Technical Details
- 38. $ 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 Commands Technical Details
- 39. Technical Details 1. DirectoryArchitecture 2. Module 3. Commands 4. Template Tags 5. High-level URL Configuration
- 40. Django saves youthe trouble of repeating your codes {% for object in objects %} {{ object.attribute }} {% endfor %} Template Tags Technical Details
- 41. This is Django’sway of rendering Html Form Note: Remember to wrap it within your HTML form tag {{ form.as_p }} Template Tags Technical Details
- 42. {{ csrf_token }} Thisis used prevent ill-intentioned hacker from hacking into your database Note: Remember to wrap it within your HTML form tag Template Tags Technical Details
- 43. Technical Details 1. DirectoryArchitecture 2. Module 3. Commands 4. Template Tags 5. High-level URL Configuration
- 44. High-level URL Configuration TechnicalDetails 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
- 45. High-level URL Configuration TechnicalDetails ?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)
- 46. url(r'^(?P<variable>/[0-9]{n})/$', views.function) High-level URLConfiguration Technical 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
- 47. Technical Details 1. DirectoryArchitecture 2. Module 3. Commands 4. Template Tags 5. High-level URL Configuration
- 48. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 49. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 50. Build an onlinecontact list Tutorial https://github.com/Denffer/django_tutorial
- 51. Find your GoogleChrome
- 52.
- 53.
- 54. Click on Githublogo
- 55.
- 56. Create a newworkspace
- 57. Create a newworkspace 2. 3. 1.
- 58. Welcome to Djangoon Cloud 9
- 59. Click on ‘my_contacts’and see what are the things initially given by Django
- 60. Anything beyond theseshould be added or created by yourself
- 61. Once your workspaceis created on Cloud 9, your project is created as well. So there is NO need for you to
- 62. Now, create yourfirst Django application
- 63. There you go.Your first Django application
- 64. Check on whatis inside
- 65. See that? Yourapplication is actually a package, and it contains the modules we’ve seen earlier.
- 66.
- 67. The default urlgiven by Django is the web address connecting to your back-end management platform
- 68. Now, copy andpaste the codes in urls.py from the repository you cloned from Github
- 69. Do you seethe dot over here? This means that the file is NOT saved
- 70. From here on,remember to save your file after every edition
- 71. Great! The crossshown here means that you have already saved the file
- 72. Whoops! It saysthere are some problems with your “View”
- 73. Let’s deal withit. Now go to views.py
- 74. Remember? This iswhere you put all the functions
- 75. Now, copy andpaste the codes in views.py from the repository you cloned from Github
- 76. Remember to saveyour file
- 77. Whoops! It saysthere are some problems with your “Model”
- 78. Let’s deal withit. Now go to models.py
- 79. Remember? You haveto construct your model so it can really connects to your database
- 80. Now, copy andpaste the codes in models.py from the repository you cloned from Github
- 81. Remember to saveyour file
- 82. Let’s go tosettings.py
- 83.
- 84. State your applicationin INSTALLED_APPS
- 85. Remember to saveyour file
- 86. Django does notprovide Form by default So you have to create it by yourself
- 87. Create a filenamed ‘forms.py’ in your application ‘mycontacts’
- 88. There you go.Open it.
- 89. Remember? Django Formis used to fetch data from Html Form
- 90. Now, copy andpaste the codes in forms.py from the repository you cloned from Github
- 91. Remember to saveyour file
- 92. One more step.Let’s go to admin.py
- 93. Remember? Admin isused to register your Model in your Database
- 94. Now, copy andpaste the codes in admin.py from the repository you cloned from Github
- 95. Remember to saveyour file
- 96. Great! Now you haveto make a migration so that your Model and be recognized and stored in Database
- 97. Go to commandline and type in the command
- 98. Great! You havejust created your first model
- 99. Now, type inthe command to write your model into your Database
- 100. Great! Your firstdatabase is just created with your model written in it
- 101. Let’s check onour database and see how it looks like However, before that, we have to create a superuser account
- 102. Type in thecommand to create a superuser
- 103. This should beeasy
- 104. Now comes theinteresting part! Let’s us launch our server!
- 105. Type in thecommand to launch the server
- 106. Click on thelink to your website!
- 107. Welcome to yourfirst Django error
- 108. Don’t worry. Let’sedit and add ‘/admin/‘ to your URL
- 109. Log in withyour superuser account
- 110. You should beable to see your model
- 111. But it isnow empty
- 112. Click on ‘ADDCONTACT’ button
- 113. Let’s add 9contact members 1 2
- 114. Click ‘SAVE’ buttonon the last contact member 1 2
- 115. Now you shouldsee 9 contact members
- 116. Let’s go backto ‘my_project’
- 117. Too messy. Let’skill all the tabs
- 118. Great! Now let’sdeal with the ‘template’ problem
- 119. Create a foldernamed ‘templates’ under your application ‘mycontacts’
- 120. Remember? templates areused to contain all of your Html files
- 121. Now create anotherfolder named ‘mycontacts’ in the folder ‘templates’
- 122. Remember the nameof this folder should be the same as the name of your application
- 123. Create ‘show.html’, ‘add.html’,and ‘background.html’ in the directory ‘mycontacts/templates/mycontacts’
- 124. Respectively copy andpaste the codes in the html files from the repository you cloned from Github
- 125. Next, create afolder named ‘static’ in your application
- 126. Remember? ‘static’ isused to contain all of your CSS files and Javascript files
- 127. Next, create twofolders named ‘css’ and ‘js’ in the folder ‘static’
- 128. Create ‘show.css’ &‘add.css’ in the folder ‘css’
- 129. Respectively copy andpaste the codes in the CSS files from the repository you cloned from Github
- 130. Create ‘show.js’ &‘add.js’ in the folder ‘js’
- 131. Respectively copy andpaste the codes in the JS files from the repository you cloned from Github
- 132. Go to commandline. Hit ‘control’ + ‘c’ to kill the server
- 133. 1 2 Start up theserver again!
- 134.
- 135. It worked! Feelfree to play around!
- 136. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 137. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 138. Conclusion Alignment & Consistency Twobasic rules for a successful design
- 139. Conclusion Error is yourfriend Learn to embrace it
- 140. Conclusion Simple is good Trynot to squeeze everything in a single page
- 141. Conclusion Don’t play hero Learnto cooperate with one another
- 142. Outline 1. Introduction 2. BasicKnowledge 3. Technical Details 4. Tutorial 5. Conclusion
- 143. Thank you Department ofComputer Science, University of Taipei Presented by Denffer
- 144. 2017@Department of ComputerScience, University of Taipei Presented by Denffer Django Build an organized web application