Difference between revisions of "Python-Django/C2/Using-CSS-and-JavaScript-in-Django/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
Line 13: Line 13:
 
|-
 
|-
 
|| Slide: CSS and JavaScript in Django
 
|| Slide: CSS and JavaScript in Django
−
|| Hello and welcome to the spoken tutorial on “'''Using''' '''CSS''' and '''JavaScript''' in '''Django'''”
+
|| Hello and welcome to the spoken tutorial on “'''Using CSS and JavaScript in Django'''”
 
|-
 
|-
 
|| Slide: Learning Objectives
 
|| Slide: Learning Objectives
Line 24: Line 24:
 
|| To record this tutorial, I am using
 
|| To record this tutorial, I am using
  
−
* '''Ubuntu Linux 16.04 OS'''
+
* '''Ubuntu Linux''' 16.04 OS
−
* '''Python 3.5 '''
+
* '''Python''' 3.5
 
* '''Python 3.4-venv''' or higher
 
* '''Python 3.4-venv''' or higher
 
* '''gedit Text Editor '''and
 
* '''gedit Text Editor '''and
−
* '''Firefox '''web browser
+
* '''Firefox web browser'''
 
|-
 
|-
 
|| Slide: Prerequisites
 
|| Slide: Prerequisites
Line 43: Line 43:
 
|| Slide: Static Files
 
|| Slide: Static Files
 
||  
 
||  
−
* In '''Django,''' '''CSS''', '''JavaScript''' and '''Image''' files are referred as '''Static Files'''
+
* In '''Django, CSS, JavaScript''' or '''Image''' files are referred as '''Static Files'''
 
* Conventionally they are stored in a folder called '''static'''
 
* Conventionally they are stored in a folder called '''static'''
 
* '''Django''' will look for a '''static files''' in the '''app’s static''' folder
 
* '''Django''' will look for a '''static files''' in the '''app’s static''' folder
Line 51: Line 51:
  
 
Press CTRl+ALT+T simultaneously
 
Press CTRl+ALT+T simultaneously
−
|| Let us open the '''terminal '''by pressing '''Ctrl''', '''Alt''' and '''T '''keys simultaneously on the keyboard.
+
|| Let us open the '''terminal '''by pressing '''Ctrl, Alt''' and '''T '''keys simultaneously on the keyboard.
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
  
 
cd '''my-django '''[Enter]
 
cd '''my-django '''[Enter]
−
|| Now using the '''cd command''', go to the folder '''my hyphen django '''which we had created earlier.
+
|| Now using '''cd command''', go to the folder '''my hyphen django '''which we had created earlier.
 
|-
 
|-
 
|| [Terminal]
 
|| [Terminal]
Line 63: Line 63:
  
 
and press Enter
 
and press Enter
−
||  Activate the '''virtual environment myapp underscore env'''
+
||  Activate the '''virtual environment myapp underscore env'''.
  
 
|-
 
|-
 
|| [Terminal] cd '''mysite '''[Enter]
 
|| [Terminal] cd '''mysite '''[Enter]
−
|| Go to the folder '''mysite '''using '''cd command'''
+
|| Go to the folder '''mysite '''using '''cd command'''.
 
|-
 
|-
 
||  
 
||  
Line 84: Line 84:
 
|| [browser]
 
|| [browser]
 
'''Pointing to the Output'''
 
'''Pointing to the Output'''
−
|| Here, we can see the output as a plain text.
+
|| Here, we can see the output as plain text.
  
 
Using '''CSS''' we will apply some '''styles''' to this page.
 
Using '''CSS''' we will apply some '''styles''' to this page.
Line 134: Line 134:
 
|| Next we’ll create a base '''CSS''' file named '''base.css''' inside the folder '''CSS.'''
 
|| Next we’ll create a base '''CSS''' file named '''base.css''' inside the folder '''CSS.'''
  
−
Go the folder '''CSS''' using '''cd command.'''
+
Go the folder '''CSS''' using the '''cd command.'''
 
|-
 
|-
 
|| [Terminal Tab 2]
 
|| [Terminal Tab 2]
Line 163: Line 163:
 
|| Save the file.
 
|| Save the file.
 
|-
 
|-
−
|| only narration
+
|| Only narration
−
|| Next we have to add the '''CSS''' in our template file '''blogs dot html.'''
+
|| Next we have to add the '''CSS''' in our '''template''' file '''blogs dot html.'''
 
|-
 
|-
 
|| Switch to Terminal
 
|| Switch to Terminal
Line 175: Line 175:
 
|-
 
|-
 
|| [Terminal] Type gedit blog/templates/blog/blogs.html & [Enter]
 
|| [Terminal] Type gedit blog/templates/blog/blogs.html & [Enter]
−
|| Then, open the '''blogs dot html '''file from the '''templates''' folder in''' '''a '''text editor.'''
+
|| Then, open the '''blogs.html '''file from the '''templates''' folder in a '''text editor.'''
 
|-
 
|-
 
|| [blogs.html] Type:
 
|| [blogs.html] Type:
Line 193: Line 193:
 
<body>
 
<body>
  
−
|| We are inside '''blogs.html''' file.
+
|| We are inside the '''blogs.html''' file.
  
 
Above the '''body start tag''', update the code as shown here.
 
Above the '''body start tag''', update the code as shown here.
Line 219: Line 219:
  
 
</html>
 
</html>
−
|| Next inside the ul start tag, type the code as shown here.
+
|| Next inside the '''ul start tag''', type the code as shown here.
 
|-
 
|-
 
|| [blogs.html] Highlight
 
|| [blogs.html] Highlight
  
 
<'''link '''rel="stylesheet" type="text/css" href="{% static 'blog/css/base.css' %}">
 
<'''link '''rel="stylesheet" type="text/css" href="{% static 'blog/css/base.css' %}">
−
|| Using the '''link tag''', we have linked our '''CSS''' file to the '''HTML''' template.
+
|| Using the '''link tag''', we have linked our '''CSS''' file to the '''HTML template'''.
  
 
|-
 
|-
Line 240: Line 240:
  
 
'''type'''<nowiki>="text/css"</nowiki>
 
'''type'''<nowiki>="text/css"</nowiki>
−
|| '''type '''specifies the '''MIME''' type of the linked document.
+
|| '''type '''specifies the '''MIME type''' of the linked document.
 
|-
 
|-
 
|| [blogs.html] Highlight
 
|| [blogs.html] Highlight
Line 255: Line 255:
  
 
href="{% '''static ''''blog/css/base.css' %}"
 
href="{% '''static ''''blog/css/base.css' %}"
−
|| '''Static''' '''template''' '''tag''' builds the '''URL''' for the given path using the configured '''static''' file storage.
+
|| '''Static template tag''' builds the '''URL''' for the given path using the configured '''static''' file '''storage'''.
 
|-
 
|-
 
|| [blogs.html] Highlight
 
|| [blogs.html] Highlight
Line 265: Line 265:
  
 
'''<ul class=”number”>'''
 
'''<ul class=”number”>'''
−
|| Here, we added '''class ‘number’''' to the template for '''CSS''' effect.
+
|| Here, we added '''class ‘number’''' to the '''template''' for '''CSS''' effect.
 
|-
 
|-
 
|| Press Ctrl+S
 
|| Press Ctrl+S
Line 271: Line 271:
 
|-
 
|-
 
|| Only Narration
 
|| Only Narration
−
|| We have added the '''CSS style''' to our template.
+
|| We have added the '''CSS style''' to our '''template'''.
  
 
Now, let us cross verify this.
 
Now, let us cross verify this.
Line 279: Line 279:
 
|-
 
|-
 
|| [browser]
 
|| [browser]
−
|| W<span style="color:#000000;">e can see that the '''Blog objects '''are<span style="color:#000000;"> listed in <span style="color:#000000;">'''Roman letters.'''
+
|| We can see that the '''Blog objects '''are listed in '''Roman letters.'''
 
|-
 
|-
 
|| Only narration
 
|| Only narration
Line 293: Line 293:
  
 
}
 
}
−
|| Next to the current '''style '''property, type the code as shown.
+
|| Next to the current '''style property''', type the code as shown.
  
 
This will set the text color to blue for each '''list item'''.
 
This will set the text color to blue for each '''list item'''.
Line 300: Line 300:
  
 
color: blue
 
color: blue
−
|| '''color''' property specifies the color of the text.
+
|| '''color property''' specifies the color of the text.
  
 
Here, the color of the text is set to '''blue.'''
 
Here, the color of the text is set to '''blue.'''
Line 370: Line 370:
  
 
<body onload="greet()">
 
<body onload="greet()">
−
|| Then inside the '''body''' start '''tag''', type  
+
|| Then inside the '''body start tag''', type  
  
 
'''space onload equal to within double quotes greet opening and closing brackets'''
 
'''space onload equal to within double quotes greet opening and closing brackets'''
Line 377: Line 377:
  
 
'''<script src="{% static 'blog/js/welcome.js' %}"'''
 
'''<script src="{% static 'blog/js/welcome.js' %}"'''
−
|| We have included the '''javascript''' file inside the '''head''' section using the '''script''' '''tag.'''
+
|| We have included the '''javascript''' file inside the '''head''' section using the '''script tag.'''
  
 
|-
 
|-
Line 404: Line 404:
  
 
Press Ctrl + R
 
Press Ctrl + R
−
|| We see a '''pop-up '''with the message<span style="color:#000000;"> '''“<span style="color:#000000;">Welcome to the blog app!”'''
+
|| We see a '''pop-up '''with the message '''"Welcome to the blog app!"'''
  
 
Click on''' OK''' to close the '''pop-up.'''
 
Click on''' OK''' to close the '''pop-up.'''
Line 425: Line 425:
 
|-
 
|-
 
|| Switch to slide
 
|| Switch to slide
−
|| With this, we come to the end of this tutorial
+
|| With this, we come to the end of this tutorial.
  
−
Let us summarize
+
Let us summarise.
 
|-
 
|-
 
|| Slide: Summary
 
|| Slide: Summary
Line 436: Line 436:
  
 
|-
 
|-
−
|| slide: Assignment
+
|| Slide: Assignment
 
|| As an assignment,
 
|| As an assignment,
  

Latest revision as of 09:03, 10 October 2019

Django/C2/Using CSS and JavaScript in Django/English

Title of script: Using CSS and JavaScript in Django

Keywords: Video tutorial, CSS, JavaScript


Visual cue Narration
Slide: CSS and JavaScript in Django Hello and welcome to the spoken tutorial on “Using CSS and JavaScript in Django”
Slide: Learning Objectives In this tutorial, we will learn to:
  • Add CSS and JavaScript files
  • Use them with the Django App
Slide: System Requirements To record this tutorial, I am using
  • Ubuntu Linux 16.04 OS
  • Python 3.5
  • Python 3.4-venv or higher
  • gedit Text Editor and
  • Firefox web browser
Slide: Prerequisites To follow this tutorial, you need to know
  • How to create Templates and Forms in Django
  • If not, then please go through the prerequisite tutorials in this website
Slide: CSS & JavaScript
  • Using CSS we can set the look and style for a web page
  • JavaScript allows us to create dynamic web pages
Slide: Static Files
  • In Django, CSS, JavaScript or Image files are referred as Static Files
  • Conventionally they are stored in a folder called static
  • Django will look for a static files in the app’s static folder
Open a Terminal window

Press CTRl+ALT+T simultaneously

Let us open the terminal by pressing Ctrl, Alt and T keys simultaneously on the 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

Activate the virtual environment myapp underscore env.
[Terminal] cd mysite [Enter] Go to the folder mysite using cd command.
Here onwards, please remember to press the Enter key after typing each command.
[Terminal]

Type python manage.py runserver [Enter]

Start the server.
Open a browser and type http://localhost:8000/blogs/get_blogs Open a web browser and type the URL as shown.

This will take us to the get underscore blogs view function page.

[browser]

Pointing to the Output

Here, we can see the output as plain text.

Using CSS we will apply some styles to this page.

Switch to Terminal Switch to the terminal.
[Terminal]

Press CTRL+SHIFT+T

For our convenience, let us work on a separate tab.

Press Shift, Ctrl and T keys simultaneously.

[Terminal Tab 2] Highlight my-site

Type cd mysite

Ensure that, we are in the my-site directory in the new terminal window.

If not, then go to the my-site directory using the cd command.

[Terminal Tab 2]

Type mkdir blog/static [Enter]

We’ll create a static folder to hold our CSS and JavaScript files inside the blog folder.

Type mkdir <space> blog slash static

[Terminal Tab 2]

Type mkdir blog/static/blog [Enter]

Now, create a folder named blog inside the static folder.
[Terminal Tab 2]

Highlight static/blog

blog folder inside the static folder is created to avoid Name clashes between apps if any.
[Terminal Tab 2]

Type mkdir blog/static/blog/css[Enter]

Now, we’ll create a folder named CSS to store the CSS files inside this new blog directory.

Type mkdir <space> blog slash static slash blog slash css

[Terminal Tab 2]

Type: cd blog/static/blog/css

Next we’ll create a base CSS file named base.css inside the folder CSS.

Go the folder CSS using the cd command.

[Terminal Tab 2]

Type gedit base.css & [Enter]

Open the base.css file in any text editor.

I’ll open it in gedit text editor by typing

gedit <space> base dot css <space> ampersand

[base.css]Type:

ul.number { list-style-type: upper-roman;}

We are now in base.css file.

Type the code as shown here.

[base.css] Highlight

list-style-type: upper-roman

List style type property specifies the appearance of a list item.

Here, it is assigned to upper roman.

Press Ctrl+S Save the file.
Only narration Next we have to add the CSS in our template file blogs dot html.
Switch to Terminal Switch to the terminal.
[Terminal Tab 2]

Type cd ../../../.. [Enter]

Come back to the mysite folder using the cd command.
[Terminal] Type gedit blog/templates/blog/blogs.html & [Enter] Then, open the blogs.html file from the templates folder in a text editor.
[blogs.html] Type:

{% load static %}

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="{% 'blog/css/base.css' %}">

</head>

<body>

We are inside the blogs.html file.

Above the body start tag, update the code as shown here.

{% if blogs %}

‘’’ <ul class="number">

{% for blog in blogs %}

<li>{{blog.name}}</li>

{% endfor %}

</ul>

{% else %}

<p>No Blogs are available.</p>

{% endif %}

</body>

</html>

Next inside the ul start tag, type the code as shown here.
[blogs.html] Highlight

<link rel="stylesheet" type="text/css" href="{% static 'blog/css/base.css' %}">

Using the link tag, we have linked our CSS file to the HTML template.
[blogs.html] Highlight

<link rel="stylesheet" type="text/css" href="{% static 'blog/css/base.css' %}">

rel attribute defines the relationship between the linked file and the HTML document.
[blogs.html] Highlight

rel="stylesheet"

rel equal to stylesheet specifies a persistent or preferred style.
[blogs.html] Highlight

type="text/css"

type specifies the MIME type of the linked document.
[blogs.html] Highlight

type="text/css"

The value text slash css indicates that the content of the file is CSS.
[blogs.html] Highlight

href="{% static 'blog/css/base.css' %}"

href specifies the location of the linked document.
[blogs.html] Highlight

href="{% static 'blog/css/base.css' %}"

Static template tag builds the URL for the given path using the configured static file storage.
[blogs.html] Highlight

{% load static %}

load static will load the static files from the static folder.
[blogs.html] Highlight
Here, we added class ‘number’ to the template for CSS effect.
Press Ctrl+S Save the file.
Only Narration We have added the CSS style to our template.

Now, let us cross verify this.

Switch to browser Switch to browser and refresh the page.
[browser] We can see that the Blog objects are listed in Roman letters.
Only narration Now let us add one more style to the page.

Switch to base.css file in the text editor.

[base.css] Type:

li {

color: blue;

}

Next to the current style property, type the code as shown.

This will set the text color to blue for each list item.

[base.css] Highlight

color: blue

color property specifies the color of the text.

Here, the color of the text is set to blue.

Press: Ctrl +S Save the file.
[browser]

Press Ctrl + R

Highlight the output

Switch to the browser and refresh the page.

Now we can see that the Blog objects are listed in Roman letters.

And the displayed text color is blue.

Only Narration Next, let us add a JavaScript to Django templates.
[Terminal Tab 2]

Type mkdir blog/static/blog/js [Enter]

Switch to the second terminal.

Create a folder named js under static slash blog directory.

[Terminal Tab 2]

Type gedit blog/static/blog/js/welcome.js & [Enter]

Next create a JavaScript file named welcome dot js inside the js folder.
[welcome.js] Type

function greet() { alert("Welcome to the blog app!"); }

We are now inside the welcome.js file.

Type the code as shown here.

[Welcome.js] Highlight

alert("Welcome to the blog app!");

When the web page opens, the alert function will open a pop-up box and display the given message.
[Welcome.js] Highlight

alert("Welcome to the blog app!");

In this case, it will display Welcome to the blog app!
Press Ctrl+S We have now added a simple JavaScript.

Save the file.

Switch to blogs.html in gedit Switch to the blogs dot html file, to include this JavaScript file in that code.
[blogs.html] Type:

<script src="{% static 'blog/js/welcome.js' %}"></script>

Next to the link tag for CSS, type the code as shown.
[blogs.html] Type:

<body onload="greet()">

Then inside the body start tag, type

space onload equal to within double quotes greet opening and closing brackets

[blogs.html] Highlight

<script src="{% static 'blog/js/welcome.js' %}"

We have included the javascript file inside the head section using the script tag.
[blogs.html] Highlight

src="{% static 'blog/js/welcome.js' %}"

The src attribute specifies the URL of an external script file.
[blogs.html] Highlight

onload="greet()"

The onload event occurs when the object has been loaded.

So when the page is loaded on the browser, the greet function will be called.

Press Ctrl+S We have now linked the JavaScript file to our template.

Save the file.

Switch to browser Switch to the browser and refresh the page.
[browser]

Press Ctrl + R

We see a pop-up with the message "Welcome to the blog app!"

Click on OK to close the pop-up.

Only narration In this example, we have seen how to link a simple CSS style and a Javascript with the Django app.

Likewise we can add more styles and functions to make our page dynamic and attractive.

[Terminal]

Press Ctrl+C keys

Type deactivate [Enter]

Switch to the first terminal.

Stop the server.

And deactivate the virtual environment.

Switch to slide With this, we come to the end of this tutorial.

Let us summarise.

Slide: Summary In this tutorial, we have learnt to
  • Add CSS and JavaScript files
  • Use them with the Django app
Slide: Assignment As an assignment,
  • Set the font color for the blog list item to red.
  • Using JavaScript create a pop-up to display “Hello Django”.
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.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Python-Django/C2/Using-CSS-and-JavaScript-in-Django/English&oldid=49357"