-
-
Save weihong0827/c4eee39b5b0e1766850e780c0ce5527f to your computer and use it in GitHub Desktop.
Django Workshop.ipynb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nbformat": 4, | |
| "nbformat_minor": 0, | |
| "metadata": { | |
| "colab": { | |
| "name": "Django Workshop.ipynb", | |
| "provenance": [], | |
| "collapsed_sections": [], | |
| "authorship_tag": "ABX9TyO/lovy2NFDnge38FpNYpl8", | |
| "include_colab_link": true | |
| }, | |
| "kernelspec": { | |
| "name": "python3", | |
| "display_name": "Python 3" | |
| } | |
| }, | |
| "cells": [ | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "view-in-github", | |
| "colab_type": "text" | |
| }, | |
| "source": [ | |
| "<a href=\"https://colab.research.google.com/gist/weihong0827/c4eee39b5b0e1766850e780c0ce5527f/django-workshop.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "0IDeW7qn23x4" | |
| }, | |
| "source": [ | |
| "#Web Development\n", | |
| "**Backend development**\n", | |
| "\n", | |
| "The backend or server-side of the website takes care of data storage and management. It sends and receives data from the front-end side of the website and process it such that the front-end display the desired information.\n", | |
| "\n", | |
| "Eg: Login page\n", | |
| "- input username and password at the front-end\n", | |
| "- This data is packaged and sent to the backend\n", | |
| "- The backend scripts validates the data\n", | |
| "- If the username and password is correct\n", | |
| "- That specific user's information is sent to the front-end\n", | |
| "- Front-end then takes in all these information and render the specific user's page\n", | |
| "\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "O8DDr7536-sr" | |
| }, | |
| "source": [ | |
| "#Django\n", | |
| "\n", | |
| "Why Django?\n", | |
| "- Its based on python\n", | |
| "- Simple syntax\n", | |
| "- Its own web server\n", | |
| "- MVC (Model-View-Controller) core architecture\n", | |
| "\n", | |
| "Let's get started!" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "c8JTPz5a8z6N" | |
| }, | |
| "source": [ | |
| "#Open up terminal in your machine\n", | |
| "- Command Prompt or Anaconda Prompt for windows user\n", | |
| "- Create a folder in the desired place that you wish to store this project\n", | |
| "- You can create the folder using <code>mkdir folder_name</code> or just right click and create new folder\n", | |
| "- use <code>cd path/to/your/folder</code> to get to the folder\n", | |
| "\n", | |
| "\n", | |
| "#Create an virtual environment\n", | |
| "\n", | |
| "This is for better package management\n", | |
| "\n", | |
| "<code>python3 -m venv env</code> or \n", | |
| "<code>python -m venv env</code>\n", | |
| "\n", | |
| "On Windows, run:\n", | |
| "\n", | |
| "<code>env\\Scripts\\activate.bat</code>\n", | |
| "\n", | |
| "On Unix or MacOS, run:\n", | |
| "\n", | |
| "<code>source env/bin/activate</code>\n", | |
| "\n", | |
| "#installing the packages we need\n", | |
| "\n", | |
| "<code>pip install Django==3.1.4</code>\n", | |
| "\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "JQWYBogtCLil" | |
| }, | |
| "source": [ | |
| "#Get started with the actual project\n", | |
| "\n", | |
| "start a new django project\n", | |
| "\n", | |
| "<code>django-admin startproject first_django</code>\n", | |
| "\n", | |
| "get into the project folder by:\n", | |
| "\n", | |
| "<code>cd first_django</code>\n", | |
| "\n", | |
| "You shold see another first_django folder with a mange.py file\n", | |
| "\n", | |
| "Now run <code>python mange.py runserver</code>\n", | |
| "\n", | |
| "It should give you a [url](http://127.0.0.1:8000/) for you to go to.\n", | |
| "Open your webbrowser, key in the url and this is what you should see.\n", | |
| "\n", | |
| "" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "Oczzt5yzG_Fx" | |
| }, | |
| "source": [ | |
| "#Use of a text editor\n", | |
| "- Here are some of the recommendations\n", | |
| "- [Visual Studio Code](https://code.visualstudio.com/download)\n", | |
| "- [Sublime Text](https://www.sublimetext.com/3)\n", | |
| "- [PyCharm](https://www.jetbrains.com/pycharm/download)\n", | |
| "\n", | |
| "Open the folder using the text editor" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "FNfEW_mlKFeK" | |
| }, | |
| "source": [ | |
| "#Settings.py\n", | |
| "\n", | |
| "This is the fundamental configurations of your django project\n", | |
| "\n", | |
| "<code>BASE_DIR </code>gives directory to this django project\n", | |
| "\n", | |
| "<code>SECRET_KEY</code>is the unique key for your django project, protect it well because it may lead to security flaws\n", | |
| "\n", | |
| "<code>DEBUG</code> It is a useful feature when you are in the developing phase, change it to false when you are ready to deploy the website\n", | |
| "\n", | |
| "<code>ALLOWED_HOSTS</code>Store all the domain name allowed to use the project. \n", | |
| "\n", | |
| "<code>INSTALLED_APPS</code>This holds the names of all Django applications that are activated in this Django instance. Apps can be used in multiple projects, and you can package and distribute them for use by others in their projects. \n", | |
| "\n", | |
| "<code>MIDDLEWARE</code> This is all the security features and how your requests of the website is handled\n", | |
| "\n", | |
| "<code>ROOT_URLCONF</code> This is to tell the django project how to route your website\n", | |
| "\n", | |
| "<code>TEMPLATES</code> This is where the html templates that django is going to render\n", | |
| "\n", | |
| "<code>WSGI_APPLICATION</code> This is how your server works and sometimes you will need to change it sometimes you dont\n", | |
| "\n", | |
| "<code>DATABASES</code> This is the database that django project used. By default is sqlite3.\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "ri6bUuyIFmz6" | |
| }, | |
| "source": [ | |
| "#Let's start play with it!\n", | |
| "\n", | |
| "Run <code>python manage.py migrate</code> in your terminal.\n", | |
| "\n", | |
| "This commnand checks through you installed apps and create the necesary database tables\n", | |
| "\n", | |
| "Then run <code> python mange.py createsupreuser</code> to create a super user to login to the admin page\n", | |
| "\n", | |
| "Run <code>python mange.py runserver</code>\n", | |
| "\n", | |
| "Then go to http://127.0.0.1:8000/admin\n", | |
| "\n", | |
| "Key in the username and password that you have just now and you will get into the admin page\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "OGbz3GS7KNwF" | |
| }, | |
| "source": [ | |
| "#Create your first app\n", | |
| "\n", | |
| "It is not the app on your phone but more like a component or functionality of your django project\n", | |
| "\n", | |
| "In your terminal, make sure that you are in the project folder which contains the mange.py file.\n", | |
| "\n", | |
| "Run <code>python manage.py startapp your_app_name</code>\n", | |
| "\n", | |
| "Let's say in this case, I want to build an ecommerce platform. I will run <code>python manage.py startapp products</code>\n", | |
| "\n", | |
| "You will now see that a new folder with the name of your app is created\n", | |
| "\n", | |
| "You can create multiple apps, but one app should be dedicated to one function and do that function really well.\n", | |
| "\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "B0P_H7J4WzHj" | |
| }, | |
| "source": [ | |
| "#Creating models\n", | |
| "\n", | |
| "Models contains the essential fields and behaviors of the data that you are storing.\n", | |
| "\n", | |
| "In your app folder, you will see a models.py\n", | |
| "\n", | |
| "In models.py, I will create a new class called Product which stores all the essential data that a product should have.\n", | |
| "\n", | |
| "The Code below and fieldtypes are just an example.\n", | |
| "\n", | |
| "More field types can be found [here](https://docs.djangoproject.com/en/3.1/ref/models/fields/#django.db.models.AutoField)\n", | |
| "\n", | |
| "If you want to add more fields afterwards. makemigrations will sync the database with the model that you have but for older records in the database without these new fields you will need a default value for the older records\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "BMDqPBqpYSvH" | |
| }, | |
| "source": [ | |
| "#This is your models.py\n", | |
| "from django.db import models\n", | |
| "\n", | |
| "class Product(models.Model):\n", | |
| "\n", | |
| " title = models.CharField(max_length=120)\n", | |
| " description = models.TextField()\n", | |
| " price = models.DecimalField(decimal_places=2,max_digits=10000)" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "R2Aoc8TZaACq" | |
| }, | |
| "source": [ | |
| "#'Install' your app\n", | |
| "\n", | |
| "After creating the models for your app\n", | |
| "\n", | |
| "You can add your app to the project by going to the settings.py\n", | |
| "\n", | |
| "In the <code>INSTALLED_APPS</code> add your app name to it.\n", | |
| "\n", | |
| "Save all your edited files.\n", | |
| "\n", | |
| "In the terminal, run <code>python manage.py makemigrations</code>\n", | |
| "\n", | |
| "Then, <code>python manage.py migrate</code>\n", | |
| "\n", | |
| "***You should run these two commands together every time you make changes to your models.py***\n", | |
| "\n", | |
| "makemigration checks and updates the changes that you have made to the model, while migrate takes these changes and updates the database format" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "i2yvHEmYabAG" | |
| }, | |
| "source": [ | |
| "#Your settings.py\n", | |
| "INSTALLED_APPS = [\n", | |
| " 'django.contrib.admin',\n", | |
| " 'django.contrib.auth',\n", | |
| " 'django.contrib.contenttypes',\n", | |
| " 'django.contrib.sessions',\n", | |
| " 'django.contrib.messages',\n", | |
| " 'django.contrib.staticfiles',\n", | |
| " 'product',\n", | |
| "]" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "ckDoPK_kbTw2" | |
| }, | |
| "source": [ | |
| "#Registering the model with admin\n", | |
| "\n", | |
| "In order to view your model in the admin site.\n", | |
| "\n", | |
| "Go to the admin.py file under the app folder\n", | |
| "\n", | |
| "Import the model that you have made and register it\n", | |
| "\n", | |
| "After registering, run <code>python manage.py runserver</code> and go to the admin site and you should see your newly created models there" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "gwgY9MjPdHSW" | |
| }, | |
| "source": [ | |
| "#Your admin.py\n", | |
| "\n", | |
| "from django.contrib import admin\n", | |
| "from .models import Product\n", | |
| "\n", | |
| "admin.site.register(Product)" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "jw29ql1Xr-7u" | |
| }, | |
| "source": [ | |
| "#Adding deleting and formatting Data\n", | |
| "\n", | |
| "If you want to add data to the database\n", | |
| "\n", | |
| "You can create the data base record using <code>Product.objects.create(title='',des = '',price =0.0)</code> In the django shell\n", | |
| "\n", | |
| "You can open django shell in terminal using <code>python manage.py shell</code>\n", | |
| "\n", | |
| "You can also write a class method to add data.\n", | |
| "\n", | |
| "After you have the code below in your models.py, you can open up django shell.\n", | |
| "\n", | |
| "Enter <code>from products.models import Product</code> to import the model\n", | |
| "\n", | |
| "Then call the class function by <code>Product._create_data()</code> to create the data automatically.\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "b7tFxgOnvUu0" | |
| }, | |
| "source": [ | |
| "#Your updated models.py\n", | |
| "class Product(models.Model):\n", | |
| " title = models.CharField(max_length=120)\n", | |
| " description = models.TextField()\n", | |
| " price = models.DecimalField(decimal_places=2,max_digits=100)\n", | |
| "\n", | |
| " def __str__(self):#This function changes how the data is presented. You change view the change when you see it in the admin site\n", | |
| " return '{}{}'.format(title,price)\n", | |
| " @classmethod\n", | |
| " def _delete_data(cls):#this function deletes all the data\n", | |
| " Product.objects.all().delete()\n", | |
| " \n", | |
| " @classmethod\n", | |
| " def _create_data(cls,count = 1000):\n", | |
| " for i in range (count):\n", | |
| " Product.objects.create(title='title'+str(i),description = 'This is the description for title'+str(i),price=count)\n" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "bK85um5n2AfC" | |
| }, | |
| "source": [ | |
| "#Creating the first webpage\n", | |
| "\n", | |
| "For websites, we definitely need a lot of different pages for users to go to.\n", | |
| "- profile\n", | |
| "- home\n", | |
| "- social\n", | |
| "- contact\n", | |
| "\n", | |
| "How do we do that?\n", | |
| "\n", | |
| "we render these pages in the **views.py** of your app.\n", | |
| "\n", | |
| "In your **views.py** you should define a function of how the specific page should be rendered.\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "Ttz2u3uq7BLu" | |
| }, | |
| "source": [ | |
| "# This is your models.py\n", | |
| "\n", | |
| "from django.shortcuts import render\n", | |
| "from django.http import HttpResponse\n", | |
| "# Create your views here.\n", | |
| " \n", | |
| "def home_screen(request):\n", | |
| " return HttpResponse('<h1>Hello World</h1')\n", | |
| "\n", | |
| "def contact_page(request):\n", | |
| " return HttpResponse('<h1>This is the contact page</h1>')" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "R6rF5PmW7Dd4" | |
| }, | |
| "source": [ | |
| "After you have define the function, you need to go to the **urls.py** in you project folder.\n", | |
| "\n", | |
| "This **urls.py** takes care of all the requests and routing of the webiste.\n", | |
| "\n", | |
| "Import your home_screen and contact_page function that you have defined earlier into this **urls.py**\n", | |
| "\n", | |
| "define the url path and call the function\n", | |
| "\n", | |
| "Now go to [home](https://127.0.0.1:800) and [contact](https://127.0.0.1:800/contact) page to take a look (remember to run the server before you go to the webpage)\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "sLNYmaH_7Hs4" | |
| }, | |
| "source": [ | |
| "#This is your urls.py\n", | |
| "\n", | |
| "from django.contrib import admin\n", | |
| "from django.urls import path\n", | |
| "from products.views import home_screen,contact_page\n", | |
| "urlpatterns = [\n", | |
| " path('',home_screen),\n", | |
| " path('contact/',contact_page),\n", | |
| " path('admin/', admin.site.urls),\n", | |
| "]" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "B3PQGN1it7zr" | |
| }, | |
| "source": [ | |
| "#Django Templating engine\n", | |
| "\n", | |
| "You would not want to return entire webpage as an http response.\n", | |
| "\n", | |
| "We can make use of the Django Templating Engine to help us render a html out as a response to the http request\n", | |
| "\n", | |
| "In order to do that, we use the <code>render</code> function that is already imported for you by default in the views.py\n", | |
| "\n", | |
| "The following code will explain to you how to use it\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "Vvuejq-uvCHT" | |
| }, | |
| "source": [ | |
| "from django.shortcuts import render\n", | |
| "\n", | |
| "def home_screen(request):\n", | |
| " return render(request,'home.html',{})\n" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "fHebHeRdvAsk" | |
| }, | |
| "source": [ | |
| "#Explaination\n", | |
| "\n", | |
| "All in all you just have to return the render function with the 3 parameters.\n", | |
| "\n", | |
| "The request that is past by the urls.py, the 'home.html' which is the html template that you wish to output. Lastly, a dictionary, containing the data that you want to pass to the html to be rendered.\n", | |
| "\n", | |
| "The ability to pass data to html page to be rendered is essentially what makes the templating interesting. You just need a general design of the website and just fill the blanks in with data.\n", | |
| "\n", | |
| "Where do we put the html templates?\n", | |
| "\n", | |
| "Create a templates folder in the root directory of the django project. And then dump all your templates that you want to use inside.\n", | |
| "\n", | |
| "For Django to know where this folder is, go back the the settings.py and add <code>os.path.join(BASE_DIR,'templates')</code> in your DIRS list under the TEMPLATES\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "-4YeDJrU0Adb" | |
| }, | |
| "source": [ | |
| "#How should you write your html\n", | |
| "\n", | |
| "Because we want to render data using django, we cannot just write the html like how we usually do.\n", | |
| "\n", | |
| "When we want to access the key and value pair in the dictionary we just simply use {{key}} \n", | |
| "\n", | |
| "If the value is a list then we can use a for loop to loop through the content in the list and display them\n", | |
| "\n", | |
| "There django also allow you to use if else statement to perform condition checks.\n", | |
| "\n", | |
| "More about the django template tags can be found [here](https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#for)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "4tRH4-0Vh1pX" | |
| }, | |
| "source": [ | |
| "#This is your views.py\n", | |
| "def home_screen(request):\n", | |
| " data = { #This is the setof data that i want to pass to the html page\n", | |
| " 'user':'qiuweihong',\n", | |
| " 'age':21,\n", | |
| " 'telegram':'@iceridge',\n", | |
| " 'myfifthrow':['3dc','badminton','photog']\n", | |
| " }\n", | |
| "\n", | |
| " return render(request,'home.html',data)" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "Er7VHG7giRZW" | |
| }, | |
| "source": [ | |
| "#This is your home.html\n", | |
| "<h1>Hello Word</h1>\n", | |
| "\n", | |
| "<p>This is {{user}}</p>\n", | |
| "<p>I am {{age}} years old</p>\n", | |
| "<p>My telegram is {{telegram}}</p>\n", | |
| "My Fifth Rows are:\n", | |
| "<ul>\n", | |
| " \n", | |
| " {% for fifthrow in myfifthrow%}\n", | |
| " {%if fifthrow == \"3dc\" %}\n", | |
| " <li style=\"font-weight:bold;\">{{fifthrow}}</li>\n", | |
| " {%else%}\n", | |
| " <li>{{fifthrow}}</li>\n", | |
| " {% endif %}\n", | |
| " {%endfor%}\n", | |
| "</ul>" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "KJq9twI9iZRi" | |
| }, | |
| "source": [ | |
| "#Getting data from the data base\n", | |
| "\n", | |
| "Now we are still hard coding the data, but for backend we wannt to make full use of the data base\n", | |
| "\n", | |
| "What we need to do:\n", | |
| "- Import the data into our views.py\n", | |
| "- Use query set to search for the data in the database\n", | |
| "- put into the dictionary to be pass to the front end to be rendered.\n", | |
| "\n", | |
| "How to use the querysets can be found [here](https://docs.djangoproject.com/en/3.1/ref/models/querysets/#django.db.models.query.QuerySet)" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "0lHii0KSp2Pl" | |
| }, | |
| "source": [ | |
| "#Your views.py\n", | |
| "from django.shortcuts import render\n", | |
| "from django.http import HttpResponse\n", | |
| "from .models import Product #importing the data\n", | |
| "# Create your views here.\n", | |
| " \n", | |
| "def home_screen(request):\n", | |
| " info = Product.objects.filter(title='title992')[0] #query the object from your database, rember to create the data first\n", | |
| " data = { #adding the result to the data dictionary and pass to front-end\n", | |
| " 'title':info.title,\n", | |
| " 'description':info.description,\n", | |
| " 'price':info.price\n", | |
| " }\n", | |
| "\n", | |
| " return render(request,'home.html',data)" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "VzY1AhxOqnoK" | |
| }, | |
| "source": [ | |
| "#How to pass data from front-end to backend\n", | |
| "\n", | |
| "In order for the website to be responsive, not only does the backend need to pass data to frontend but the frontend also have to pss data to backend.\n", | |
| "\n", | |
| "Two commonly used methods:\n", | |
| "- Include the query data in your url query string\n", | |
| "- Post request\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "GxnQPKe-skch" | |
| }, | |
| "source": [ | |
| "#Include the query data in your url query string\n", | |
| "\n", | |
| "If you take a look at some of the urls you will see that there is a component that starts with '?' and then followed by a bunch of key and value pair\n", | |
| "\n", | |
| "Those are the data that are past to the backend. Hence in our html page, we can simply include an <code>a</code> tag to send the data to the backend\n", | |
| "\n", | |
| "For the backend, to receive the data we can use <code> request.GET.get(data_you_want_in_the_query_string,'none')</code>\n", | |
| "\n", | |
| "<code>request.GET</code> give a dictionary like object of the get parameter\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "SuKOfCeLwRbR" | |
| }, | |
| "source": [ | |
| "<h1> THis is your product page</h1>\n", | |
| "\n", | |
| "<a href=?num={{num}}>next_product</a>\n", | |
| "<p>{{title}}</p>\n", | |
| "<p>{{description}}</p>\n", | |
| "<p>{{price}}</p>" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "Aufk2UeKwQzq" | |
| }, | |
| "source": [ | |
| "def home_screen(request):\n", | |
| " num = request.GET.get('num','1')\n", | |
| " print(num)\n", | |
| " info = Product.objects.filter(title='title'+num)[0]\n", | |
| " data = {\n", | |
| " 'title':info.title,\n", | |
| " 'description':info.description,\n", | |
| " 'price':info.price,\n", | |
| " 'num':int(num)+1\n", | |
| " }\n", | |
| "\n", | |
| " return render(request,'home.html',data)" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "xoHQwyKowmrh" | |
| }, | |
| "source": [ | |
| "# Setting up an api and receive the data via post.\n", | |
| "For the frontend side of how to make a post request, it will be taught in the react workshop tmr.\n", | |
| "\n", | |
| "For now we will be using [postman](https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop/related?hl=en) to simulate a post request from the from end.\n", | |
| "\n", | |
| "\n", | |
| "\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "ND3StsQiczgf" | |
| }, | |
| "source": [ | |
| "from django.shortcuts import render\r\n", | |
| "from django.http import HttpResponse\r\n", | |
| "from .models import Product\r\n", | |
| "from django.views.decorators.csrf import csrf_exempt\r\n", | |
| "import json\r\n", | |
| "\r\n", | |
| "@csrf_exempt #this csrf_exempt is to bypass one of the security features that django has\r\n", | |
| "#do this only when you trust whoever who has access to the api and your api wont cost any irreversible damage\r\n", | |
| "#if not you will need to include an csrf token in your request\r\n", | |
| "\r\n", | |
| "def process_api(request):\r\n", | |
| " if request.method != 'POST':\r\n", | |
| " return HttpResponse('Error 403',status=403)\r\n", | |
| " \r\n", | |
| " request_title = request.POST.get('title')\r\n", | |
| " info = Product.objects.filter(title=request_title)[0]\r\n", | |
| " data = {\r\n", | |
| " 'title':info.title,\r\n", | |
| " 'description':info.description,\r\n", | |
| " 'price':float(info.price),\r\n", | |
| " }\r\n", | |
| " return HttpResponse(json.dumps(data),status = 200)" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "OJaomS0nczng" | |
| }, | |
| "source": [ | |
| "#remember to route your url to the api function\r\n", | |
| "\r\n", | |
| "from django.contrib import admin\r\n", | |
| "from django.urls import path\r\n", | |
| "from products.views import home_screen,contact_page,process_api\r\n", | |
| "urlpatterns = [\r\n", | |
| " path('',home_screen),\r\n", | |
| " path('contact/',contact_page),\r\n", | |
| " path('admin/', admin.site.urls),\r\n", | |
| " path('api/product',process_api)\r\n", | |
| "]\r\n" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "p-K3IgrUeIz4" | |
| }, | |
| "source": [ | |
| "#How to use postman\r\n", | |
| "\r\n", | |
| "Postman is a very powerful tool when you want to do testing for your web applications\r\n", | |
| "\r\n", | |
| "Launch the app from the chrome store, and sign up for an account and sign in.\r\n", | |
| "\r\n", | |
| "If you dont want to sign up its fine too, just watch what I do.\r\n", | |
| "\r\n", | |
| "Once you get into the interface, on the main window, change the GET to POST. and key in the api route that you have set up just now.\r\n", | |
| "\r\n", | |
| "In this case it will be <code>127.0.0.1:8000/api</code> and below it you will see a body section, click in and enter the key and value pairs that you wish to send to the backend.\r\n", | |
| "\r\n", | |
| "The bottom section will show you the http response that the backend return, it the content is what you want then your api is working!\r\n", | |
| "\r\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "IvsZzRKyfzlW" | |
| }, | |
| "source": [ | |
| "#How to deploy the backend server with heroku\r\n", | |
| "\r\n", | |
| "In your terminal, go to your project root folder, the one that contains the <code>manage.py</code> file.\r\n", | |
| "\r\n", | |
| "\r\n", | |
| "Create a repo for it by running <code>git init</code> if you dont have git installed you can find the method [here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)\r\n", | |
| "\r\n", | |
| "Then you need to first stage the changes that you have made by running <code>git add .</code>\r\n", | |
| "\r\n", | |
| "and commit the changes by <code>git commit -m 'message for this commit'</code>\r\n", | |
| "\r\n", | |
| "Run <code>heroku login</code> to login to your heroku account.\r\n", | |
| "\r\n", | |
| "Run <code>heroku create</code> to create a new heroku project under your account, by default the name will be given randomly, if you wish to have your own name, you can add it behind the create\r\n", | |
| "\r\n", | |
| "When done creating, you will be given an url in the form of <code>https://name-of-your-app.herokuapp.com</code> and now what we want to do is to add a git remote to heroku\r\n", | |
| "\r\n", | |
| "To do that we need to run <code>heroku git:remote -a name-of-your-app</code>\r\n", | |
| "\r\n", | |
| "Now install a package call gunicorn by <code>pip install gunicorn</code> This is needed because when we use manage.py runserver, it is running on the development server, when we are deploying it we can no longer use it. We need a different app server which in this case gunicorn.\r\n", | |
| "\r\n", | |
| "Run <code>gunicorn first_django.wsgi</code>\r\n", | |
| "\r\n", | |
| "You should see the website running in the link given.\r\n", | |
| "\r\n", | |
| "We now need to create a file called Procfile and store this command inside, this is to tell heroku what command to run\r\n", | |
| "\r\n", | |
| "run <code>touch Procfile</code> and open it up using the text editor.\r\n", | |
| "\r\n", | |
| "Then key in <code>web:gunicorn first_django.wsgi</code>\r\n", | |
| "\r\n", | |
| "Now if you run <code>heroku local</code>, you are trying to run the project locally using heroku. You should get the same thing as how you have run it on the development server\r\n", | |
| "\r\n", | |
| "Then run <code>pip freeze ->requirments.txt</code> to store all the package that you have installed for this project to the requirements.txt and heroku will use this to know what package to install.\r\n", | |
| "\r\n", | |
| "Go to your settings.py and add <code>STATIC_ROOT = os.path.join(BASE_DIR,'static')</code>to get a directory for your static files such as css and js\r\n", | |
| "\r\n", | |
| "Under the ALLOWED_HOST, add in the domain of your heroku app. Which is this <code>name-of-your-app.herokuapp.com</code>\r\n", | |
| "\r\n", | |
| "Now push it to heroku by <code>git add .</code> then <code>git commit -m 'message for this commit'</code> and finally <code>git push heroku master</code>\r\n", | |
| "\r\n", | |
| "\r\n", | |
| "**HALF WAY THERE**\r\n", | |
| "\r\n", | |
| "\r\n", | |
| "Now we want to deal with the database. Because heroku delete all the files and restore it once in a while and the infomation in the database will be lost, so we need to store it in the cloud. We will be using postgresql which is provided by heroku.\r\n", | |
| "\r\n", | |
| "First, install the dependency using <code>pip install psycopg2</code>\r\n", | |
| "\r\n", | |
| "Then go to heroku home page in you web browser, click on this project. In the Settings tag, you will see Config Vars with a button **Revel Config Vars** at the side. Click on it, and then copy the value corresponding to the DATABASE_URL\r\n", | |
| "\r\n", | |
| "It will be in this format:<code>postgres://USERNAME:PASSWORD@HOST:PORT/NAME</code>\r\n", | |
| "\r\n", | |
| "In your settings.py change the DATABASE accordingly in this format.\r\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "k5v7romgqGmE" | |
| }, | |
| "source": [ | |
| "DATABASES = {\r\n", | |
| " 'default': {\r\n", | |
| " 'ENGINE': 'django.db.backends.postgresql',#change from the default sqlit3 to postgresql\r\n", | |
| " #fill in the values in your url string \r\n", | |
| " 'NAME': 'd46a3fm2pmo145',\r\n", | |
| " 'HOST':'ec2-52-203-49-58.compute-1.amazonaws.com',\r\n", | |
| " 'PORT':5432,\r\n", | |
| " 'USER':'wvoznxouhbeaqf',\r\n", | |
| " 'PASSWORD':'0cbbb979d4f4f1622408d92c2389c07cfa603d259005bd9bec20d497f8ffd858',\r\n", | |
| " }\r\n", | |
| "}" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "2d-j-z2zqV70" | |
| }, | |
| "source": [ | |
| "Run <code>python manage.py migrate</code> to migrate your existing models to your new database.\r\n", | |
| "\r\n", | |
| "Note that your old data in your sqlite3 database wont be preservered so you will need to create another super user account using <code>python manage.py createsuperuser</code> and add data to the database if you need\r\n", | |
| "\r\n", | |
| "**LAST PART**\r\n", | |
| "We will need to deal with the static files that we have for example the images, css and js files.\r\n", | |
| "\r\n", | |
| "first we need to do <code>python mange.py collectstatic</code> which will help you collect all the static files you need for django admin site into on folder automatically. you can add your own static files to the diretory and use them in your templates by <code>{%load static%}</code> at the top of your template to 'import' the directory and then use <code>{%static 'path/to/your/file'%}</code>\r\n", | |
| "\r\n", | |
| "Go to your urls.py and make the following changes\r\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "pWsS2j-dtKNj" | |
| }, | |
| "source": [ | |
| "from django.conf import settings\r\n", | |
| "from django.conf.urls.static import static\r\n", | |
| "\r\n", | |
| "urlpatterns = [\r\n", | |
| " ...\r\n", | |
| "] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "7BzM1dhTtRYA" | |
| }, | |
| "source": [ | |
| "Now we need to serve the static images from the app server.\r\n", | |
| "\r\n", | |
| "To do this we run <code>pip install whitenoise</code>\r\n", | |
| "\r\n", | |
| "then add <code>'whitenoise.middleware.WhiteNoiseMiddleware',</code> to your MIDDLEWARES under the settings.py\r\n", | |
| "\r\n", | |
| "Then you want to update your requirments.txt by <code>pip freeze ->requirments.txt</code>\r\n", | |
| "\r\n", | |
| "Now push it to heroku by <code>git add .</code> then <code>git commit -m 'message for this commit'</code> and finally <code>git push heroku master</code>\r\n", | |
| "\r\n", | |
| "And when you click into the link given, you should see it running perfectly!!!" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "l-lbpeBTtc9z" | |
| }, | |
| "source": [ | |
| "#Conclusion\r\n", | |
| "\r\n", | |
| "There are many possiblilties with django and I think yall definitly learn alot during this lesson and hopefull this workshop will help you out in your future projects! \r\n", | |
| "\r\n", | |
| "Thank you for your time and if you have any questions feel free the message me and i will try my best to answer you!\r\n", | |
| "\r\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "markdown", | |
| "metadata": { | |
| "id": "BTBP4NSG_7vV" | |
| }, | |
| "source": [ | |
| "References:\n", | |
| "\n", | |
| "https://careerfoundry.com/en/blog/web-development/whats-the-difference-between-frontend-and-backend/#:~:text=The%20backend%20(or%20%E2%80%9Cserver%2D,displayed%20as%20a%20web%20page.\n", | |
| "\n", | |
| "https://djangostars.com/blog/why-we-use-django-framework/#:~:text=Django%20is%20an%20open%2Dsource,are%20called%20%E2%80%9Cviews%E2%80%9D).\n", | |
| "\n", | |
| "https://docs.python.org/3/tutorial/venv.html\n", | |
| "\n", | |
| "https://docs.djangoproject.com/en/3.1/intro/tutorial02/\n", | |
| "\n" | |
| ] | |
| }, | |
| { | |
| "cell_type": "code", | |
| "metadata": { | |
| "id": "5r2HlVXw2rb0" | |
| }, | |
| "source": [ | |
| "" | |
| ], | |
| "execution_count": null, | |
| "outputs": [] | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment