2

3
4
5
6
7
8
9
TUTORIAL 1
Introduction

11
1.1 Django installation & Environment setting(cont.)

12
1.1 Django installation & Environment setting(cont.)

13
1.1 Django installation & Environment setting(cont.)

14
TUTORIAL 1.2
Environment setting with IDE

15
1.2 Environment setting with Goorm IDE(cont.)

16
1.2 Environment setting with Goorm IDE(cont.)

17
18
1.2 Environment setting with Goorm IDE(cont.)

19
1.2 Environment setting with Goorm IDE(cont.)

① ② ③

20
1.2 Environment setting with Goorm IDE(cont.)

21
1.2 Environment setting with Goorm IDE(cont.)

22
1.2 Environment setting with Goorm IDE(cont.)

23
1.2 Environment setting with Goorm IDE(cont.)

24
1.2 Environment setting with Goorm IDE(cont.)

25
1.2 Environment setting with Goorm IDE(cont.)

root@Goorm:/workspace/tutorialdjango# mkdir mysite

root@Goorm:/workspace/tutorialdjango # cd mysite

root@Goorm:/workspace/tutorialdjango/mysite#

apt-get install python-virtualenv

root@Goorm:/workspace/tutorialdjango/mysite#

virtualenv --python=python3.4 myvenv

root@Goorm:/workspace/ tutorialdjango /mysite# source myvenv/bin/activate

(myvenv)root@Goorm:/workspace/ tutorialdjango /mysite#

pip install django whitenoise

(myvenv)root@Goorm:/workspace/ tutorialdjango /mysite#

django-admin startproject tutorialdjango .

(myvenv)root@Goorm:/workspace/ tutorialdjango /mysite#

python manage.py migrate

• Please be careful ‘.’ is followed by 'startproject container name’

• Please type your container name instead of tutorialdjango

26
1.2 Environment setting with Goorm IDE(cont.)

27
1.2 Environment setting with Goorm IDE(cont.)

root@Goorm:/workspace/container name# python --virsion

Check the version of Python. Is it 2.x version? We will develop to version 3.4

root@Goorm:/workspace/ container name # mkdir mysite

mkdir is a command that creates a directory. We create a folder named mysite.

root@Goorm:/workspace/ container name # cd mysite

The cd command is the change directory command. Go to the folder mysite.

root@Goorm:/workspace/ container name /mysite#

apt-get install python-virtualenv

It is a command for setting virtual environment that makes it run as 3.X version in the
environment that is currently running as 2.x version.

root@Goorm:/workspace/ container name /mysite#

virtualenv --python=python3.4 myvenv

We will use python 3.4version as a virtual environment

28
1.2 Environment setting with Goorm IDE(cont.)

root@Goorm:/workspace/ container name /mysite# source myvenv/bin/activate

Activate virtual environment

This command should be run every time you use the cloud IDE container again.

(myvenv)root@Goorm:/workspace/ container name /mysite#

pip install django whitenoise

It is a command to install up to the package. You can install only Django.

(myvenv)root@Goorm:/workspace/ container name /mysite#

django-admin startproject ‘container_name’ .

This is the command to start the project in the current folder.

(myvenv)root@Goorm:/workspace/ container name /mysite# python manage.py migrate

The Migrate command will be explained later. In a nutshell, put values into DB.

29
1.2 Environment setting with Goorm IDE(cont.)

(myvenv)root@Goorm:/workspace/container name/mysite#
python manage.py runserver 0:80

30
1.2 Environment setting with Goorm IDE(cont.)

31
2. Create main page(cont.)

root@Goorm:/workspace/container name/mysite# python manage.py startapp main

33
2. Create main page(cont.)

mysite > tutorialdjango > urls.py

34
2. Create main page(cont.)

mysite > product > views.py

35
2. Create main page(cont.)

36
2. Create main page(cont.)

(myvenv)root@Goorm:/workspace/container name/mysite#
python manage.py runserver 0:80

37
2. Create main page(cont.)

https://yourURL/admin

38
2. Create main page(cont.)

39
2. Create main page(cont.)

40
2. Create main page(cont.)

41
2. Create main page(cont.)

42
2. Create main page(cont.)

43
2. Create main page(cont.)

44
 2. Create main page(cont.)

mysite

tutorialdjango main db.sqlite3 manage.py

__init__.py settings.py urls.py Wsgi.py

__init__.py admin.py migrations models.py views.py test.py templete

__init__.py main

Index.html

45
 2. Create main page(cont.)

Response without template is possible

Client
Response Request
Template URLs

Rendering Call function

Views
Model CRUD(whether you need it or not )
Models
ORM (whether you need it or not )

DB

46
3. Create Blog page(cont.)

48
3. Create Blog page(cont.)

49
3. Create Blog page(cont.)

/)

50
3. Create Blog page(cont.)

(myvenv)root@Goorm:/workspace/container name/mysite

(myvenv)root@Goorm:/workspace/container name/mysite

51
3. Create Blog page(cont.)

52
3. Create Blog page(cont.)

root@Goorm:/workspace/container name/mysite

53
3. Create Blog page(cont.)

54
3. Create Blog page(cont.)

mysite/product/models.py

55
3. Create Blog page(cont.)

Add Post

56
3. Create Blog page(cont.)

tutorialdjango/mysite/main/views.py

57
3. Create Blog page(cont.)

58
3. Create Blog page(cont.)

59
4. Create Post page(cont.)

root@Goorm:/workspace/container name# cd mysite

root@Goorm:/workspace/container name/mysite# source myvenv/bin/activate

(myvenv)root@Goorm:/workspace/container name/mysite#

If you have been following the command without myvenv, we recommend you
delete the container now and start over again.

with(myvenv) prefix or without is a completely different environment.

61
4. Create Post page(cont.)

62
4. Create Post page(cont.)

tutorialdjango/mysite/main/templates/main/postdetails.html

63
4. Create Post page(cont.)

https://tutorialdjango-okiim.run.Goorm.io/blog/1

- Executed page -

64
4. Create Post page(cont.)

tutorialdjango/mysite/main/templates/main/blog.html

65
4. Create Post page(cont.)

66
4. Create Post page(cont.)

Container name/mysite/main/templates/main/productdetails.html

67
4. Create Post page(cont.)

tutorialdjango/mysite/main/models.py

68
4. Create Post page(cont.)

(myvenv)root@Goorm:/workspace/container name/mysite#

pip install pillow==2.9.0

(myvenv)root@Goorm:/workspace/container name /mysite#

python manage.py makemigrations

(myvenv)root@Goorm:/workspace/container name /mysite#

python manage.py migrate

(myvenv)root@Goorm:/workspace/container name /mysite#

python manage.py runserver 0:80

69
4. Create Post page(cont.)

* Change post

* Add post

70
4. Create Post page(cont.)

tutorialdjango/mysite/tutorialdjango/settings.py

Let’s upload 5 Image as below

Fist of all, we well post jeju

71
4. Create Post page(cont.)

72
4. Create Post page(cont.)

73
4. Create Post page(cont.)

74
4. Create Post page(cont.)

75
4. Create Post page(cont.)

76
5. Add Comments Box

Instrall disqus

(myvenv)root@Goorm:/workspace/container name/mysite# pip install django-disqus

https://disqus.com/

78
5. Add Comments Box (cont.)

79
5. Add Comments Box (cont.)

80
5. Add Comments Box (cont.)

81
5. Add Comments Box (cont.)

tutorialdjango/mysite/main/templates/main/postdetails.html

82
5. Add Comments Box (cont.)

83
5. Add Comments Box (cont.)

84
5. Add Comments Box (cont.)

Admin Site

85
5. Add Comments Box (cont.)

86
5. Add Comments Box (cont.)

tutorialdjango/mysite/main/templates/main/blog.html

https://tutorialdjango-bcrpr.run.Goorm.io/blog/

87
5. Add Comments Box (cont.)

(myvenv)root@Goorm:/workspace/container name/mysite# pip install django-taggit

tutorialdjango/mysite/main/models.py

88
5. Add Comments Box (cont.)

tutorialdjango/mysite/tutorialdjango/settings.py

89
5. Add Comments Box (cont.)

90
5. Add Comments Box (cont.)

tutorialdjango/mysite/main/templates/main/postdetails.html

91
5. Add Comments Box (cont.)

92
5. Add Comments Box (cont.)

93
TUTORIAL 6.1
Bootstrap Introduction

95
TUTORIAL 6.2
Bootstrap Download

96
TUTORIAL 6.3
Create a Template

97
98
TUTORIAL 6.4
Bootstrap Basic

99
6.4 Bootstrap Grids

100
6.4 Bootstrap Grids (cont.)

Output

101
6.4 Bootstrap Grids (cont.)

Output

102
6.4 Bootstrap Grids (cont.)

103
6.4 Bootstrap Grids (cont.)

104
6.4 Bootstrap Grids (cont.)

Output

105
TUTORIAL 6.5
Finishing touches with template code examples

106
6.5 Finishing touches with template code examples

107
6.5 Finishing touches with template code examples (cont.)

108
6.5 Finishing touches with template code examples (cont.)

109
6.5 Finishing touches with template code examples (cont.)

110
6.5 Finishing touches with template code examples (cont.)

111
6.5 Finishing touches with template code examples (cont.)

112
6.5 Finishing touches with template code examples (cont.)

113
6.5 Finishing touches with template code examples (cont.)

114
6.5 Finishing touches with template code examples (cont.)

115
6.5 Finishing touches with template code examples (cont.)

116
6.5 Finishing touches with template code examples (cont.)

117
6.5 Finishing touches with template code examples (cont.)

118
TUTORIAL 6.6
Deployment

119
6.6 Deployment

120
6.6 Deployment (cont.)

121
Django

123
Django

124
urls.py

125
views.py

126
models.py

127
Templates

128
ISBN 979-11-88786-10-7

129
Who should read this tutorial