blob: 17dc45e088a483d78a05086f223ae82f5e4b3fb3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
Slide 1
------------
Title Slide
**Using CSS and JavaScript in Django**
Slide 2
--------------
**Learning Objectives**
In this tutorial, we will learn to;
- Add CSS and JavaScript files
- Use them with the App
Slide 3 [00:11 | 00:31]
---------------
**System Requirements**
- Ubuntu 16.10
- Python 3.5 or higher version
- python3.4-venv
Slide 4 [00:11 | 00:42]
---------------
**Pre-requisites**
In order to follow this tutorial, you need to know;
- how to create templates
- If not, see the relevant django tutorial on http://spoken-tutorial.org
Slide 5:
----------------
**Static Files**
- CSS, JavaScript or Image files are referred as Static Files
- Conventionally they are stored in static folder
- Django will look for static files in the app static folder
Demonstration:
---------------------
**Create a folder static in blogs directory**
mkdir static
- Create blog folder inside static
cd static
mkdir blog
- Create a base CSS file inside blog
cd blog
gedit blogs.css &
Demonstration:
---------------------
**Add class to ul tag in blogs.html template**
<ul class="number">
**Writing CSS in blogs.css**
ul.number {
list-style-type:upper-roman;
}
Demonstration:
-----------------------
- Visit http://localhost:8000/blogs/get_blogs/
- In output, we will see Roman Letters before a blog
Demonstration:
-----------------------
**Create welcome.js in static/blog/ and add the below code**
function greet() {
alert("Welcome to the blog app!");
}
**Modify blogs.html template as below**
<script src="{% static 'blog/welcome.js' %}"></script>
<body onload="greet()">
Demonstration:
---------------------
**Show Output**
- Visit http://localhost:8000/blogs/get_blogs/
- Refresh the page
Output
- We will see the alert dialog popped up!
For script writer: Can create two folders as css and js to separate out css and js files in a directory.
Also showing an image can be shown here if time permits or else can be give as a slide or an assignment
**Concluding Slides**
|
