Вы находитесь на странице: 1из 32

Web Engineering

Lab
ICT 4204
Course Instructor

Sabah Binte Noor


Assistant Professor
Department of CSE, DUET
sabah@duet.ac.bd

2
Course Content

• Html
• CSS
• JavaScript
• Python
• Django

3
Online Help
• https://www.w3schools.com/
• http://htmldog.com/guides/
• https://www.javatpoint.com/javascript-tutorial
• https://javascript.info/
• https://vuejs.org/v2/guide/
• https://developer.mozilla.org/en-US/docs/Learn
• https://tutorial.djangogirls.org/en/
• https://docs.djangoproject.com/en/2.0/
• https://djangobook.com/
4
5
How the Internet Works

6
How the Internet Looks

7
How Internet
Looks

• A screenshot
from Submarine
Cable Map
website
(http://submarinecablem
ap.com)

8
How the Internet Works
To reach a machine (for example, the one where https://djangogirls.org is
saved) we need to pass a request through many, many different machines )

9
Django

• Django is a high-level Python Web framework that


encourages rapid development and clean, pragmatic
design.
• Django closely follows the MVC pattern

10
MVC Framework
The Model-View-Controller Design Pattern

11
MVC Framework
• Model(M)
• The model(M) is a model or representation of your data. It’s not the actual data, but an
interface to the data. The model allows you to pull data from your database without
knowing the intricacies of the underlying database. The model usually also provides an
abstraction layer with your database, so that you can use the same model with multiple
databases.
• View(V)
• The view(V) is what you see. It’s the presentation layer for your model. On your computer,
the view is what you see in the browser for a Web app, or the UI for a desktop app. The
view also provides an interface to collect user input.
• Controller(C)
• The controller(C) controls the flow of information between the model and the view. It
uses programmed logic to decide what information is pulled from the database via the
model and what information is passed to the view. It also gets information from the user
via the view and implements business logic: either by changing the view, or modifying data
through the model, or both.

12
How MVC Framework Works

13
How Django Works
Django is often referred to as an MTV framework.
• M stands for “Model,” the data access layer. This layer
contains anything and everything about the data: how to
access it, how to validate it, which behaviors it has, and
the relationships between the data.
• T stands for “Template,” the presentation layer. This
layer contains presentation-related decisions: how
something should be displayed on a Web page or other
type of document.
• V stands for “View,” the business logic layer. This layer
contains the logic that accesses the model and defers to
the appropriate template(s). You can think of it as the
bridge between models and templates.

14
15
Getting Started

• Installing Python
• https://www.python.org/downloads/windows/
• Update pip
• Install Virtual Environment
• Install Django

16
Installing Python

• https://www.python.org/downloads/windows/

17
Installing Python

• command-line
 python3 –version

18
• command-line
• mkdir djangogirls
• cd djangogirls
• python3 -m venv myvenv
• myvenv\Scripts\activate
Installing • python3 -m pip install --upgrade
pip
Django • pip install Django
• django-admin.exe startproject
mysite
• python manage.py migrate
• python manage.py runserver
• python manage.py createsuperuser
19
Let’s Practice a Little Bit Python

>>> 2 + 3 'Hi there Ola’


5 >>> "Ola" * 3
>>> 2 ** 3 'OlaOlaOla’
8 >>> "Ola".upper()
>>> "Ola" 'OLA’
'Ola’ >>> len("Ola")
>>> "Hi there " + "Ola" 3
20
Let’s Practice a Little Bit Python
Variables
Variables >>> len(name)
>>> name = "Ola“ 5
>>> name >>> a = 4
'Ola’ >>> b = 6
>>> name = "Sonja" >>> a * b
>>> name 24
'Sonja’
21
Let’s Practice a Little Bit Python
Lists
>>> [] >>> lottery.append(199)
[] >>> print(lottery)
>>> lottery = [3, 42, 12, 19, 30, 59] [59, 42, 30, 19, 12, 3, 199]
>>> len(lottery) >>> print(lottery[0])
6 59
>>> lottery.sort() >>> print(lottery[1])
>>> print(lottery) 42
[3, 12, 19, 30, 42, 59] >>> lottery.pop(0)
>>> lottery.reverse() 59
>>> print(lottery) >>> print(lottery)
[59, 42, 30, 19, 12, 3] [42, 30, 19, 12, 3, 199]

22
Let’s Practice a Little Bit Python
Dictionaries
>>> {}
{}
>>> participant = {'name': 'Ola', 'country': 'Poland',
'favorite_numbers': [7, 42, 92]}
>>> print(participant['name'])
Ola
>>> participant['favorite_language'] = 'Python’
>>> len(participant)
4

23
Let’s Practice a Little Bit Python
Dictionaries
>>> participant.pop('favorite_numbers')
[7, 42, 92]
>>> participant
{'country': 'Poland', 'favorite_language': 'Python',
'name': 'Ola’}
>>> participant['country'] = 'Germany'

24
Let’s Practice a Little Bit Python
Compare things
>>> 5 > 2
True
>>> 3 < 1
False
>>> 6 >= 12 / 2
True
>>> 6 > 2 and 2 < 3
True
25
Let’s Practice a Little Bit Python
If … elif … else
• if 3 > 2:
print('It works!’)
• if 5 > 2:
print('5 is indeed greater than 2')
else:
print('5 is not greater than 2’)

26
Let’s Practice a Little Bit Python
If … elif … else
name = 'Sonja'
if name == 'Ola':
print('Hey Ola!')
elif name == 'Sonja':
print('Hey Sonja!')
else:
print('Hey anonymous!')
27
Let’s Practice a Little Bit Python
function
def hi():
print('Hi there!')
print('How are you?')

hi()

28
Let’s Practice a Little Bit Python
function
def hi(name):
if name == 'Ola':
print('Hi Ola!')
elif name == 'Sonja':
print('Hi Sonja!')
else:
print('Hi anonymous!')
29
Let’s Practice a Little Bit Python
loops
girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You’] • Output
Hi Rachel!
def hi(name):
Next girl
print('Hi ' + name + '!') Hi Monica!
Next girl
Hi Phoebe!
girls = ['Rachel', 'Monica', 'Phoebe', 'Ola', 'You']
Next girl
for name in girls: Hi Ola!
hi(name) Next girl
Hi You!
print('Next girl')
Next girl

30
Code Editor

• Gedit
• Sublime Text 3
• Atom

31
Thank You

32

Вам также может понравиться