Scribd
Upload
63 views99 pages

NM Full Stack Django

The document provides an overview of web technologies focusing on Full Stack development with Django. It covers fundamental topics such as HTML, CSS, and Django, including installation, project setup, and creating a basic poll application. Key concepts include the structure of HTML, CSS styling methods, and Django's Model-View-Template architecture for building web applications efficiently.

Uploaded by

Amudaria
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views99 pages

NM Full Stack Django

The document provides an overview of web technologies focusing on Full Stack development with Django. It covers fundamental topics such as HTML, CSS, and Django, including installation, project setup, and creating a basic poll application. Key concepts include the structure of HTML, CSS styling methods, and Django's Model-View-Template architecture for building web applications efficiently.

Uploaded by

Amudaria
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 99

Web Technologies

(Full Stack –
Django)
Contents of PPT
⦁ Introduction
⦁ HTML
⦁ CSS
⦁ Hands-on Session on Django
⦁ Online Assessment

2
1
HTML
Hyper Text Markup Language

3
<!DOCTYPE html>
HTML Structure
<html>
• Type the code in a notepad. <head>

• Save it in a location with .html <title>Page Title</title>


</head>
extension. (Say
<body>
D:\HTML\page1.html
<h1>My First Heading</h1>
• Open anyone browser (Say <p>My first paragraph.</p>
Chrome or Edge) and open the </body>
HTML file. </html>

4
HTML Structure

5
HTML Fundamentals
⦁ HTML Tags and Attributes ⦁ Links
⦁ HTML Elements ⦁ Table
⦁ Heading ⦁ Div and Span
⦁ Formatting ⦁ Lists
⦁ Colors ⦁ Audio and Videos
⦁ Images ⦁ HTML Forms and Input

6
HTML Tags and Attributes
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

7
HTML Table Elements
<table style="width:80%;">
<tr> <th>Month</th>
<th>Date</th> </tr>
Month Date <tr> <td>January</td>
January 10.01.2014
<td>10.01.2014</td> </tr>
February 10.01.2014
<tr> <td>February</td>
<td>10.01.2014</td> </tr>
</table>
</body>
</html> 8
<html>
HTML Heading
<body>
Heading 1 <h1>Heading 1</h1>
Heading 2 <h2>Heading 2</h2>
Heading 3 <h3>Heading 3</h3>
Heading 4

Heading 5
<h4>Heading 4</h4>
Heading 6
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
9
HTML Formatting
<b> or <strong>- Boldtext or Important text
<i> or <em>- Italic text or Emphasized text
<mark>- Marked text
<small>- Small text
<del>- Deleted text
<ins>- Inserted text
<sub>- Subscript text
<sup>- Superscript text
10
HTML Formatting
<body>
<b>This text is bold</b>
<i>This text is italic</i>
<p>The interest rate is only 10%*</p>
<small>* per day</small>
<p>She likes <del>violets</del>
<ins>snowdrops</ins> is here</p>
The formula of water is H<sub>2</sub>O
<p>E=mc<sup>2</sup>
</body>
11
HTML Colors
There are three ways of how you can change
the color of the text in HTML:
⦁ Hex color codes
⦁ HTML color names
⦁ RGB values

12
HTML Colors
<html>
<body>
<p style="color:blue;"> This is a text in blue </p>
<p style="color:#8ebf42;"> This is a text in green </p>
<p style="color:rgba(255,0,0,0.5);">Red paragraph text </p>
</body>
</html>

13
HTML Images
A complex idea can be conveyed with just a single
still image, namely making it possible to absorb
large amounts of data quickly.

14
HTML Images
<html lang="en">
<head>
<title>Images in HTML</title>
</head>
<body>
<img src="C:\Users\ponlt\Downloads\tree.jpg"
alt="Tree" width="500" height="400">
</body>
</html> 15
HTML Links
HTML links are hyperlinks.
Internal Links - An “Internal Link” is a link in your
site that navigates the visitor to another page
in your website.
Absolute URLs - a full web address.
Relative URLs - A local link (a link to a page
within the same website) is specified with a
relative URL (without the "https://www" part)

16
HTML Links
<html>
<body>
<a href="https://www.w3schools.com/">Visit W3Schools!</a>
</body>
</html>

17
HTML Lists
Unordered HTML List - An unordered list starts
with the <ul> tag. Each list item starts with the <li>
tag (list items).
Ordered HTML List - An ordered list starts with the
<ol> tag. Each list item starts with the <li> tag.

18
HTML Lists
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

19
HTML Forms
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname“ value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<input type="submit" value="Submit">
</form>

20
HTML Forms

21
HTML Audio
<html>
<body>
<audio controls src="https://interactive-
examples.mdn.mozilla.net/media/cc0-audio/t-rex-
roar.mp3" type = "mp3"></audio>
</body>
</html>

22
HTML Video
<html>
<body>
<video controls
src="https://www.w3schools.com/html/mov_bbb.mp4"
type = "mp4"></video>
</body>
</html>

23
2

CCS
Cascading Style Sheets
Cascading Style Sheet
⦁ Cascading Style Sheets (CSS) is used to format
the layout of a webpage.
⦁ With CSS, you can control the color, font, the
size of text, the spacing between elements, how
elements are positioned and laid out, what
background images or background colors are to
be used, different displays for different devices
and screen sizes, and much more!

25
Cascading Style Sheet
CSS can be added to HTML documents in 3 ways:
⦁ Inline - by using the style attribute inside HTML
elements
⦁ Internal - by using a <style> element in the
<head> section
⦁ External - by using a <link> element to link to
an external CSS file

26
Inline CSS
<body>
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


</body>

27
Internal CSS
<html>
<style> body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;} </style>
</head>
<body> <h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 28
External CSS
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
29
</html>
External CSS
styles.css
<style>
h1 {color: blue;}
p {color: red;}
</style>

30
3

DJANGO
Introduction
Django is a high-level web framework built with Python that
enables developers to build web applications rapidly and
efficiently.

32
Introduction
⦁ Django is a free open-source web framework written in Python
that follows the Model-View Template (MVT) architecture.
⦁ It was created to simplify and expedite the process of building
web applications by providing a robust set of tools and
conventions.

33
Introduction
⦁ Django provides a high-level and clean design, which allows
developers to focus on the application's functionality without
getting bogged down by low-level implementation details.
⦁ It comes with a collection of built-in features that handle
common tasks such as URL routing, database management,
authentication, security, and more.

34
Installation of Django
⦁ Download and install latest version of python from the url
https://www.python.org/downloads/
⦁ Check for installed version of python
C:\Users\ponlt>python --version
Python 3.12.0

C:\Users\ponlt>python -m pip install --upgrade pip

35
Installing pipenv
C:\Users\ponlt>pip3 install pipenv
Collecting pipenv
Downloading pipenv-2023.12.1-py3-none-any.whl.metadata (19
kB)…

[notice] A new release of pip is available: 23.3.2 -> 24.0


[notice] To update, run: python.exe -m pip install --upgrade pip

36
Switch to Project Folder
⦁ Create a folder “Project” in D: or E:
⦁ This will act as the container for all the
Environment resources of Django.
⦁ Move to “Project” directory
C:\Users\ponlt>D:
D:\>cd Project

37
Installation of Django
D:\Project>pipenv install django
Creating a virtualenv for this project...
Pipfile: D:\Project\Pipfile…
Successfully created virtual environment!
Virtualenv location: C:\Users\ponlt\.virtualenvs\Project-bFzlz1B4
Creating a Pipfile for this project...
Installing django...

38
Check Django Version
D:\Project>python -m django --version
5.0.1

39
Activate python interpreter under
virtual environment
D:\Project>pipenv shell
Launching in virtual env...All rights reserved.
(Project-bFzlz1B4) D:\Project>django-admin
Type 'django-admin help <subcommand>' for help…
Available subcommands:
check
compilemessages
Note that only Django core commands are listed …
40
Start our project
⦁ Below code creates the two directories with the
same name learndjango
(Project-bFzlz1B4) D:\Project>django-admin
startproject learndjango
(Project-bFzlz1B4) D:\Project>cd learndjango

41
Start Webserver
(Project-bFzlz1B4) D:\Project\learndjango>python
manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes,
sessions
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK

42
Start Webserver
(Project-bFzlz1B4) D:\Project\learndjango>python
manage.py runserver
Watching for file changes with StatReloader
February 14, 2024 - 00:49:18
Django version 5.0.2, using settings
'learndjango.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

43
Start Webserver
⦁ Now open browser and type address
http://127.0.0.1:8000/ to open home page of
our Django project learndjango

44
45
Start Webserver
⦁ In the command prompt press Ctrl + C to exit
from Webserver mode.

46
Basic Poll Application
1. A public site that lets people view polls
and vote in them.
2. An admin site that lets you add,
change, and delete polls

47
Files of Django
⦁ Let us discuss on different files created by
Django .
⦁ These files are as follows:
⦁ The outer learndjango/ root directory is a
container for your project. Its name doesn’t
matter to Django; you can rename it to anything
you like.

48
Files of Django
⦁ manage.py: A command-line utility that lets you
interact with this Django project in various ways.
⦁ The inner learndjango/ directory is the actual
Python package for your project. Its name is the
Python package name you’ll need to use to import
anything inside it (e.g. learndjango.urls).
⦁ learndjango /__init__.py: An empty file that tells
Python that this directory should be considered a
Python package.
49
Files of Django
⦁ learndjango/urls.py: The URL declarations for this
Django project; a “table of contents” of your
Django-powered site.
⦁ learndjango/asgi.py: An entry-point for ASGI-
compatible web servers to serve your project.
⦁ learndjango/wsgi.py: An entry-point for WSGI-
compatible web servers to serve your project.

50
Projects vs Apps
⦁ An app is a web application that does
something e.g., a blog system, a database of
public records or a small poll app.
⦁ A project is a collection of configuration and
apps for a particular website. A project can
contain multiple apps. An app can be in multiple
projects.

51
Creating the Poll App
(Project-bFzlz1B4)
D:\Project\learndjango>python manage.py
startapp polls
⦁ Go to the Folder D:\Project\ learndjango\
and you will see set of Python files as shown
in the figure.

52
Creating the Poll App
⦁ Open the file polls/views.py and put the following
Python code in the end of it:

from django.http import HttpResponse


def index(request):
return HttpResponse("Hello, world. You're at
the polls index.")

53
54
Call view with URL
⦁ To call the view, we need to map it to a
URL - and for this we need a URLconf.
⦁ To create a URLconf in the polls
directory, create a file called urls.py in
the learndjango/polls folder. Your app
directory should now look like:

55
Call view with URL
⦁ In the polls/urls.py file include the following
code:

from django.urls import path


from . import views
urlpatterns = [ path('', views.index, name='index'), ]

56
Call view with URL
⦁ The next step is to point the root URLconf at the
polls.urls module.
⦁ In learndjango/learndjango/urls.py, add an import for
django.urls.include and insert an include() in the
urlpatterns list.

from django.contrib import admin


from django.urls import include, path
urlpatterns = [ path('admin/', admin.site.urls),
path('polls/', include('polls.urls’)), ]
57
First view
⦁ Verify it’s working with the following command:
(Project-bFzlz1B4) D:\Project\learndjango>python
manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

58
First view
⦁ In the browser type http://localhost:8000/polls/ in
the url bar, and you should see the text “Hello, world.
You’re at the polls index.”, which you defined in the index
view.

59
Django App: Part 2

60
Creating models
⦁ A model is the single, definitive source of
information about your data.
⦁ It contains the essential fields and behaviors of
the data you’re storing. In our poll app, we’ll
create two models: Question and Choice.
⦁ A Question has a question and a publication
date.
⦁ A Choice has two fields: the text of the choice
and a vote tally.
61
Creating Models
⦁ Each Choice is associated with a Question.
⦁ These concepts are represented by Python
classes.
⦁ Edit the polls/models.py file.

62
Creating Models
from django.db import models
class Question(models.Model):
question_text= models.CharField(max_length=200)
pub_date= models.DateTimeField('date published’)

class Choice(models.Model):
question = models.ForeignKey(Question, on_delete=
models.CASCADE)
choice_text= models.CharField(max_length=200)
votes = models.IntegerField(default=0)

63
Edit settings
⦁ Open up learndjango/ learndjango /settings.py.
⦁ By default, the configuration uses SQLite.
⦁ SQLite is included in Python, so you won’t need
to install anything else to support your
database.
⦁ First we need to tell our project that the polls
app is installed. So modify INSTALLED_APPS.

64
Edit settings
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'polls.apps.PollsConfig',
] 65
Make migrations
⦁ Exit from Webserver mode in command prompt
and let’s run another command:
(Project-bFzlz1B4)
D:\Project\learndjango>python manage.py
makemigrations polls
Migrations for 'polls':
polls\migrations\0001_initial.py
- Create model Question
- Create model Choice
66
Make migrations
⦁ Migrations are how Django stores changes to
your models (and thus your database schema) -
they’re files on disk.
⦁ You can read the migration for your new model
if you like; it’s the file
polls/migrations/0001_initial.py.
⦁ They’re designed to be human-editable in case
you want to manually tweak how Django
changes things
67
Make migrations
⦁ Now, run migrate again to create those model
tables in your database.
⦁ The migrate command takes all the migrations
that haven’t been applied and runs them against
your database - essentially, synchronizing the
changes you made to your models with the
schema in the database.

68
Make migrations
(Project-bFzlz1B4)
D:\Project\learndjango>python manage.py
migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes,
polls, sessions
Running migrations:
Applying polls.0001_initial... OK

69
Make migrations
⦁ The sqlmigrate command takes migration names
and returns their SQL:
(Project-bFzlz1B4) D:\Project\learndjango>python
manage.py sqlmigrate polls 0001
BEGIN; -- -- Create model Question
CREATE TABLE "polls_question" ("id" integer NOT
NULL PRIMARY KEY AUTOINCREMENT,
"question_text" varchar(200) NOT NULL, "pub_date"
datetime NOT NULL);
-- -- Create model Choice 70
Interactive Python shell
(Project-bFzlz1B4)
D:\Project\learndjango>python manage.py shell
Python 3.12.0 (tags/v3.12.0:0fb18b0, Oct 2 2023,
13:03:39) [MSC v.1935 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for
more information.
(InteractiveConsole)

71
Interactive Python shell
>>> from polls.models import Choice, Question
>>> Question.objects.all()
<QuerySet []>
>>> from django.utils import timezone
>>> q = Question(question_text="What's the
best movie of 2023?",
pub_date=timezone.now())
>>> q.save()

72
Interactive Python shell
>>> q.id
1
>>> q.question_text
"What's the best movie of 2023?"
>>> q.pub_date
datetime.datetime(2024, 2, 13, 21, 1, 26, 788933,
tzinfo=datetime.timezone.utc)

73
Interactive Python shell
⦁ Change values by changing the attributes, then
calling save().
>>> q.question_text = "What party will win
2024 election?"
>>> q.save()
>>> Question.objects.all()
<QuerySet [<Question: Question object (1)>]>
>>>exit()

74
Interactive Python shell
⦁ <Question: Question object (1)> isn’t a helpful
representation of this object.
⦁ Let’s fix that by editing the Question model (in
the polls/models.py file) and adding a __str__()
method to both Question and Choice.

75
Edit polls/ models.py
⦁ <Question: Question object (1)> isn’t a helpful
representation of this object.
⦁ Let’s fix that by editing the Question model (in
the polls/models.py file) and add few methods
to both Question and Choice.

76
Edit polls/ models.py
from django.db import models
from django.utils import timezone
import datetime
# Create your models here.
class Question(models.Model):
question_text= models.CharField(max_length=200)
pub_date= models.DateTimeField('date published')

77
Edit polls/ models.py
def __str__(self):
return self.question_text
def was_published_recently(self):
return self.pub_date >= timezone.now() –
datetime.timedelta(days=1)

78
Edit polls/ models.py
class Choice(models.Model):
question = models.ForeignKey(Question,
on_delete=models.CASCADE)
choice_text= models.CharField(max_length=200)
votes = models.IntegerField(default=0)
def __str__(self):
return self.choice_text

79
Edit polls/ models.py
⦁ Save the changes made in the models.py and close it.
⦁ Now update all changes made.
(Project-bFzlz1B4) D:\Project\learndjango>python
manage.py migrate
Operations to perform:
No migrations to apply.

80
Verify Changes
(Project-bFzlz1B4)
D:\Project\learndjango>python manage.py
sqlmigrate polls 0001
(Project-bFzlz1B4)
D:\Project\learndjango>python manage.py shell
Python 3.12.0 (tags/v3.12.0:0fb18b0, Oct 2 2023,
13:03:39) … (InteractiveConsole)

81
Verify Changes
>>> from polls.models import Choice, Question
>>> Question.objects.all()
<QuerySet [<Question: What party will win 2024 election?>]>
>>>Question.objects.filter(question_text__startswith="What")
<QuerySet [<Question: What party will win 2024 election?>]>
>>> from django.utils import timezone
>>> current_year = timezone.now().year

82
Verify Changes
>>> Question.objects.get(pub_date__year=current_year)
<Question: What party will win 2024 election?>
>>> Question.objects.get(id=2)
Traceback (most …
File "C:\Users\ponlt\.virtualenvs\Project-bFzlz1B4\Lib\site-
packages\django\db\models\query.py", line 649, in get
raise self.model.DoesNotExist(ost recent call last):

83
Verify Changes
>>> q = Question.objects.get(pk=1)
>>> q.choice_set.all()
<QuerySet []>
>>> # Create three choices.
>>> q.choice_set.create(choice_text="NDA", votes=0)
<Choice: NDA>
>>> q.choice_set.create(choice_text="UPA", votes=0)
<Choice: UPA>
84
Verify Changes
>>> c = q.choice_set.create(choice_text="NEUTRAL", votes=0)
>>> c.question
<Question: What party will win 2024 election?>
>>> Choice.objects.filter(question__pub_date__year=current_year)
<QuerySet [<Choice: NDA>, <Choice: UPA>, <Choice: NEUTRAL>]>
>>> exit()

85
Add admin
(Project-bFzlz1B4) D:\Project\learndjango>python
manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

86
Add admin
(Project-bFzlz1B4) D:\Project\learndjango>python manage.py
createsuperuser
Username (leave blank to use 'ponlt'): ponthai
Email address: [email protected]
Password:
Password (again):
Superuser created successfully.

87
Add admin
(Project-bFzlz1B4) D:\Project\learndjango>python
manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

88
Let’s run the app
⦁ Now, open a web browser and go to
http://127.0.0.1:8000/admin/. You should see the admin’s login
screen

89
Let’s run the app
⦁ Login and familiarize yourself with the environment.

90
Make Poll app modifiable in admin
⦁ Open the polls/admin.py file, and edit it to look like this

from django.contrib import admin


from .models import Question
admin.site.register(Question)

91
Make Poll app modifiable in admin
⦁ Open the polls/admin.py file, and edit it to look like this

from django.contrib import admin


from .models import Question
admin.site.register(Question)

92
93
94
Thanks!
Any questions?
You can find me at @9578784476

95
Credits

Special thanks to all the people who made


and released these awesome resources for
free:
⦁ Presentation template by
SlidesCarnival
⦁ Photographs by Unsplash
⦁ Background by Paaatterns

96
Diagrams and infographics

97
You can also use any emoji as an icon!
And of course it resizes without losing quality.
How? Follow Google instructions
https://twitter.com/googledocs/status/730087240156643328

and many more...


98
Free templates for all your presentation needs

For PowerPoint and 100% free for personal Ready to use, Blow your audience
Google Slides or commercial use professional and away with attractive
customizable visuals

99

You might also like