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

From Script | Spoken-Tutorial
Revision as of 09:03, 10 October 2019 by Nancyvarkey (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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"