Web and Django Server Types of Web pages
Web and Django Server
Types of Web pages • Static page: – The contents of a web page is predefined by HTML tags and other mark up languages. • Example: david chao’s home page. • Dynamic page – A web page includes contents produced by a programming language when the page is opened.
Technologies for Creating Dynamic Pages • Client-side technology – HTML – Browser Document Object Model (DOM) – Java. Script, JQuery – Cascade Style Sheet, CSS – Bootstrap: https: //www. w 3 schools. com/bootstrap 4/default. asp • Server-side technology – Python, Microsoft. Net, Java, PHP – Others: Node. js, a server-side Java. Script
Hyper Text Transfer Protocol: Request & Response HTTP Request Web Server Browser HTTP Response Web Application
Example of Using Python to Process a Form 1. An HTML form to take the input from user. 2. The form submits the data to the web server and calls the Python program to process the data and create the result. 3. The web server sends the result back.
HTTP Communication between browser and Web Server • HTTP Request: : Data Sent with HTTP Request – requested URL, cookies, query. String, data from a form, etc. • HTTP Response: – Web page content in HTML code – Cookies – Etc.
Traditional Web Servers • A website has a default home page which is the page opened automatically when you visit the website. – SFSU default home page: welcome. htm http: //online. sfsu. edu/dchao/ – Other server may call it: default. htm or index. htm, etc. • Web pages are retrieved using URL.
Traditional Web Server Demo: ASP. Net with IIS Server • Start a new Visual Studio project and search for ASP. Net Web App. Choose the one with C# and click Next. • Select Empty ASP. Net Web appliction
Add a new HTML page to project • Project/ New Item/HTML: See the Toolbox and page template
A Simple HTML Page Enter: Hello World You may choose the browser to test with <!DOCTYPE html> <head> <meta charset="utf-8" /> <title></title> </head> <body> Hello World, This is ME </body> </html> Note: Add a 2 nd HTML page.
Django Web Framework • Django (jang-goh) is a free and open source web application framework, written in Python. A web framework is a set of components that helps you to develop websites faster and easier. • Django implements MVC (Model-View-Controller) framework for web application development.
MVC MODEL:
Brief explanation of MVC • Model: It is the application's dynamic data structure. • View: Representation of information presented to users, such as a web page. • Controller: Accepts input and converts it to commands for the model or view. User’s requests are first sent to the controller.
Data Model Example: Employee Class class employee: def __init__(self, emp. ID, ename, sex, hire. Date, salary): self. emp. ID = emp. ID self. ename = ename self. sex=sex self. hire. Date=hire. Date self. salary=salary
Create a Django project with Visual Studio Create a new project/Type Dj. .
Configure Project: mysite Note: Skip the creating super user.
Basic directory structure of a Django project template Three important file and folder: 1. Under mysite folder: urls. py --- this is the controller settings. py 2. Under app folder: views. py --- this creating view 3. Under app/templates/app folder: web page templats
To run the project: 1. Click the link to create the Virtual Environment. 2. Choose the browser and click the run button.
The sample website home page
Studying how Django works using the sample website • Click the Home button, url: http: //localhost: 51014/ • Click the About button, url: http: //localhost: 51014/about/ • Click the Contact button, url: http: //localhost: 51014/contact/
How Django retrieves the web page requested by users? Resource Controller (Dispatcher) • The Django URL configuration serves as a controller. The location of the URL configuration can be found in the setting. py: • ROOT_URLCONF = 'mysite. urls' • The urls configuration file contains functions working with different URL formats, and matches a URL with a project resource;
Urls. py: A list of paths (url patterns) urlpatterns = [ path('', views. home, name='home'), path('contact/', views. contact, name='contact'), path('about/', views. about, name='about'), path('login/', Login. View. as_view ( template_name='app/login. html', authentication_form=forms. Bootstrap. Authentication. Fo rm, extra_context= { 'title': 'Log in', 'year' : datetime. now(). year, } ), name='login'), path('logout/', Logout. View. as_view(next_page='/'), name='logout'), path('admin/', admin. site. urls), ]
views. py module: Available website resources are represented as views, and valid requested url is directed to a “view” function in the views. py def home(request): """Renders the home page. """ assert isinstance(request, Http. Request) return render( request, 'app/index. html', { 'title': 'Home Page', 'year': datetime. now(). year, } ) def contact(request): """Renders the contact page. """ assert isinstance(request, Http. Request) return render( request, 'app/contact. html', { 'title': 'Contact', 'message': 'Your contact page. ', 'year': datetime. now(). year, } ) ….
View • A view is a function that processes an HTTP request, fetches the required data from the database, renders the data in an HTML page using an HTML template, and then returns the generated HTML in an HTTP response to display the page to the user.
The view function takes HTTP request as argument and matches a “template” in the templates/app folder and renders it as output
Exercise: Add an HTML page, mypage. html • Right click the templates/app folder and select Add/New Item • Select HTML Page and name it mypage. html • Open the mypage, and add text: • Welcome to my first Django HTML Page
Access the mypage. html • 1. Add this line to the end of urlpatterns in urls. py: • path('mypage/', views. mypage, name='mypage'), • 2. Add this function to the end of views. py • 3. Run the sample website. • 4. Enter this url : http: //localhost: 62934/mypage/ Note: The localhost’s number may be different. def mypage(request): """Renders the home page. """ assert isinstance(request, Http. Request) return render( request, 'app/mypage. html' )
Adding a sub folder, mydir, under templates/app folder Add a new HTML page, mydir 1, inside the mydir folder • 1. Right click the templates/app folder and select Add/New Item • 2. Select New Folder and name it mydir
Add a new HTML page, mydir 1, inside the mydir folder • Right click the mydir folder and select Add/New Item • Select HTML Page and name it mydir 1. html • Open the mydir 1, and add text: • Welcome to my mydir folder's first web page
Access the mydir 1. html • 1. Add this line to the urls. py: • path('mydir/mydir 1/', views. mydir 1, name='mydir 1'), • 2. Add this function to the end of views. py • 3. Run the sample website. • 4. Enter this url http: //localhost: 64541/mydir 1 / Note: The localhost’s number may be different. def mydir 1(request): """Renders the home page. """ assert isinstance(request, Http. Request) return render( request, 'app/mydir 1. html' )
Exercise • Add a second HTML page, mypage 2, to the template/app folder that displays: • Welcome to my second Django HTML Page • Add commands to the urls. py and views. py capable of render this page. • Test it with a browser to retrieve the web page.
- Slides: 31