View source for Python-Django/C2/How-to-use-Django-Admin-app/English

'''Title of script: '''How to Use Django admin app 

'''Keywords: '''Video tutorial, Django Admin App, Web Application Framework

{| border=1
|-
|| Visual cue
|| Narration
|-
|| Slide: Use Django Admin App
|| Hello and welcome to the spoken tutorial on “'''How to Use Django admin app'''”
|-
|| Slide: Learning Objectives
|| In this tutorial, we will learn to 

* Use '''Django admin app'''
* Create an '''admin''' user

|-
|| Slide: System Requirements
|| To record this tutorial, I am using

* '''Ubuntu Linux OS 16.04'''
* '''Python 3.5 '''
* '''Python 3.4-venv''' or higher
* '''gedit Text Editor '''and
* '''Firefox '''web browser

However you may use any other browser and editor of your choice.
|-
|| Slide: Prerequisites
|| To follow this tutorial, you need to know

* How to create a '''Django Model'''
* If not, then please go through the pre-requisite tutorials in this series.

|-
|| Slide: What is '''Django''' Admin App?
|| The '''Django admin app '''is a feature that provides an interface to 

* Create
* Read
* Update 
* Delete '''model''' instances

|-
|| Open a Terminal window

Press CTRl+ALT+T simultaneously
|| Let us open the '''terminal '''by pressing '''Ctrl''', '''Alt''' and '''T '''keys simultaneously on your keyboard.
|- 
|| [Terminal]
cd '''my-django '''[Enter]
|| Now using '''cd''' command, go to the folder '''my hyphen django '''which we had created earlier.
|-
|| [Terminal]

Type source myapp_env/bin/activate 

and press Enter

|| Let us activate the '''virtual environment myapp underscore env'''

Type '''source <space> myapp underscore env slash bin slash activate '''

And press '''Enter.'''
|-
|| [Terminal] 

cd mysite & Press Enter
|| Now let us go to the '''mysite''' folder by typing 

'''cd <space> mysite''' and press '''Enter'''.
|-
|| 
|| Here onwards, please remember to press the '''Enter''' key after typing each '''command'''.
|-
|| [Terminal]

Type ls blog [Enter]
|| Type '''ls <space> blog '''
|-
|| [Terminal]

Highlight

'''models.py'''

|| In our previous tutorial, we have created the '''models''' within the '''blog app.'''

Now, we will use the '''Django admin''' '''site,''' so that we can manage our '''blog website'''.
|-
|| [Terminal]
|| For this, we need to have credentials to log in.

'''Django''' provides an easy way to generate a '''super-user account.'''
|-
|| [Terminal]

Type python manage.py createsuperuser and press Enter
|| Let’s create a '''superuser''' to login to the '''admin interface.'''

Type '''python <space> manage dot py <space> createsuperuser '''
|-
|| [Terminal]

Point to the Shell prompt
|| We will be prompted to fill in some details.

Fill the information as per your own preferences.
|-
|| [Terminal]

'''Username: root'''

'''Email address: stdjango@gmail.com'''

'''Password: Sample123'''

'''Password(again): Sample123'''
|| I will type the following details.

'''Username '''as '''root '''

'''Email address '''as '''stdjango@gmail.com'''

'''Password '''as '''Sample123'''

Enter the same '''password '''once again.
|-
|| [Terminal]

Highlight

'''Superuser created successfully.'''
|| Now, the '''superuser''' has been created successfully.

Let’s log in and take a look at what exists on our''' admin site.'''
|-
|| [Terminal]

Type python manage.py runserver and press Enter
|| Let's run the '''Django development server.'''

Type '''python <space> manage dot py <space> runserver '''
|-
|| Open a browser and type <u>http://localhost:8000/admin</u>
|| Now, open a web browser and go to [http://localhost:8000/ http://localhost:8000/]admin</u> 
|-
|| On browser

Enter

Username as '''root'''

Password as '''Sample123'''
|| We can see a '''Django administration login page.'''

Enter the '''superuser''' credentials which we created just now.

I will enter the '''username''' as '''root''' and '''password''' as '''Sample123'''
|-
|| On browser

Point to '''Groups''' and '''User''' app
|| Here we can see “'''Authentication and Authorization'''”, and its '''modules Groups''' and '''Users.'''

You may notice that our '''blog app''' is still not visible in the '''admin interface.'''

In order to see our '''blog app''' in our '''admin interface''', we need to register our '''blog''' '''app'''.

We have do that in the '''admin '''file of the '''app'''.
|- 
|| [Terminal]

Press Ctrl+C simultaneously 
|| Switch back to the '''terminal.'''

Stop the '''server''' by pressing '''Ctrl''' and '''C''' keys simultaneously.
|-
|| [Terminal]

Type gedit blog/admin.py &

press Enter
|| Let us open the '''admin.py''' file with any text editor.

I will be using '''gedit''' text editor.

Type '''gedit <space> blog slash admin dot py <space> ampersand '''
|-
|| [admin.py]
   
from django.contrib import admin

<nowiki># Register your models here.</nowiki>
|| We are now inside the '''admin.py''' file.

|-
|| [admin.py]

from django.contrib import admin

from blog.models import Blog, Article
|| Let us import our '''app models.'''

This enables the '''admin interface''' to pick the '''models.'''

And then show it to the '''user '''who logs in to the '''admin site.'''
|-
|| [admin.py]

<nowiki># Register your models here.</nowiki>

admin.site.register(Blog)

admin.site.register(Article)
|| Below the line '''Register your models here''', type the code as shown here.
|-
|| [admin.py]

Highlight

admin.site.register(Blog)

admin.site.register(Article)
|| This is to make our '''models''' visible on the '''admin page.'''

We need to register the '''model''' with '''admin site dot register within parentheses modelname'''
|-
|| [admin.py]

Highlight

'''from django.contrib import admin'''

'''<nowiki># Register your models here.</nowiki>'''
|| Note that, it already imported '''django.contrib.admin'''

|-
|| [admin.py]

Highlight '''import admin'''
|| The '''admin class''' is the representation of a '''model '''in the '''admin interface.'''
|-
|| [admin.py]

Highlight

'''from .models import Blog, Article'''
|| We are importing our '''models''' here.

|-
|| Highlight

'''admin.site.register (Blog)'''

'''admin.site.register (Article)'''
|| We have now registered the '''Blog '''and '''Article models.'''

|-
|| Press Ctrl+S
|| Save and close the file.
|-
|| Switch to Terminal
|| Switch back to the '''terminal.'''
|-
|| [Terminal]

Run the server

Type python manage.py runserver and press Enter
|| Let's now run the '''Django development server. '''

To do that, type '''python <space> manage dot py <space> runserver '''
|-
|| Switch to browser & refresh the page

Point to Blogs and Articles
|| Then switch to the browser and refresh the page.

Now, we can see our '''blog app''' and its '''models''' in the '''admin page'''.
|- 
|| [On browser]

Highlight '''Click Add '''(besides Blogs)
|| Let us now add a '''blog.'''

Click on the '''Add''' link next to '''Blogs.'''
|- 
|| [On browser]

Add blog

Name: My First Blog
|| Let’s fill the form for a '''New Blog.'''

I will enter the '''Name '''as '''My First Blog.'''
|- 
|| [On browser]

(Pointing cursor on the web page)

|| Note that the '''created_on''' field is not shown here.

As per our '''model '''definition, it will be auto added by '''Django'''.
|- 
|| Click on Save button
|| Click on the '''Save '''button to submit the form.
|- 
|| [On browser]

Highlight 

'''The blog “Blog Object(1) was added successfully”'''
|| We get a message that the '''Blog Object''' has been added successfully.

|- 
|| [On browser]

Click on '''Home '''
|| Let us go back to the '''admin’s home page.'''

To do that, go to the top left and click on the link '''Home'''.
|- 
|| [On browser]

Click on '''Add''' (besides Articles)
|| Let us now add an '''Article''' to our '''blog app.'''

Click on the '''Add '''link next to '''Articles.'''
|- 
|| [On browser]

Blog:Blog object1

Title:My Article

Body:Article object

|| Let’s fill the form for '''New Article.'''

I will fill the details as follows

For '''Blog, '''select '''Blog object1 '''from the drop down.

Then type the '''Title '''as '''My Article.'''

And '''Body '''as '''This is my first article.'''

Leave the '''Draft '''as unchecked for now.
|- 
|| Click on '''Save''' button
|| Click on '''Save''' button to submit the form.
|- 
|| [On browser]

Highlight 

'''The article “Article Object was added successfully”'''
|| We see a message that the '''Article Object''' '''1''' was added successfully.

|- 
|| [On browser]

Click on '''Home'''
|| Let us go back to the '''admin’s home page.'''

Go to the top left and click on the link '''Home'''.
|- 
|| [On browser]
|| You can click on the '''blog''' and '''article''' created, to view or edit or delete.
|- 
|| [On browser]
|| At the top right corner, click on the '''LOG OUT''' link to logout from the '''admin’s interface'''.
|- 
|| Switch to Slide from browser
|| We have successfully added '''database entries''' for our '''models.'''
|- 
|| Slide:

Image of web application from the overview tutorial here
|| We have already discussed about '''web application''' and '''web framework '''in our earlier tutorial.
 
Let’s revisit the same.
|- 
|| In the image:

Hover from client to web app to and fro

Hover from web app to database to and fro

|| We see the following:* the '''user''' sends a request 
* and the '''web app '''process it and sends back a '''response'''.
* the '''web app''' is connected to a '''database''' to store the data.

This exactly what we did while adding the '''blog '''and the '''article'''.
|- 
|| Slide: Web framework
|| 
* '''Django''' is a '''web framework.'''
* We also saw an easy interface to the '''database'''.
* '''Django '''provided the '''request '''and '''response '''interface.
* The other features of the '''web framework''' will be covered in the upcoming tutorials.

|-
|| [Terminal]

Press Ctrl+C keys
|| Let us now stop the '''server '''and deactivate the '''virtual environment.'''

Switch to the '''terminal.'''

Press '''Ctrl''' and '''C''' keys to stop the '''server'''. 
|-
|| [Terminal]

Type deactivate [Enter]
|| Then type '''deactivate''' and press '''Enter'''.
|-
|| 
|| With this, we come to the end of this tutorial

Let us summarize.
|-
|| Slide: Summary
|| In this tutorial, we have learnt to

* Use the '''Django admin app'''
* Create an '''admin''' user
* '''Add, Modify''' and '''Delete''' data using the '''admin app'''

|- 
|| Slide: Assignment
|| Here is an assignment for you.

* log in to the '''admin site '''and
* make the '''models''' created in the previous assignment editable in the '''admin site'''

|-
|| Slide: About Spoken Tutorial project
|| The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.
|-
|| Slide: Spoken Tutorial workshops
|| The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.

For more details, please write to us.
|-
|| Slide: Forum for specific questions:
|| Please post your timed queries in this Forum.
|-
|| Slide: FOSSEE to answer questions
|| Please post your general or technical questions in this Forum.
|-
|| Slide: Acknowledgement
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.
|-
|| Slide: Thanks Slide
|| This script has been contributed by Thiagarajar College of Engineering and the FOSSEE Project, IIT Bombay.

The video has been recorded by Praveen from Spoken Tutorial Project, IIT Bombay.

Thanks for watching.
|-
|}