advanced/06.django.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 6. Django\n",
    "In this tutorial, we will set up a simple Django project. This tutorial is based on the basic intro tutorial that is made available by Django in this location: https://docs.djangoproject.com/en/5.1/intro/ (Django Getting Started). The first steps in this tutorial (setup) are the same, however, we will model a website that displays 'students' participating in a number of 'courses.\n",
    "\n",
    "## 6.1 Starting setup\n",
    "Setting up a good draft Django project is not easy, and requires several steps. After doing the below tutorial, you should have the file structure and project as available here: https://github.com/ISBE-TUe/python-tutorial/tree/main/advanced/django/universityProject. Another reference Django project can be found in https://github.com/ISBE-TUe/DUTO-BIM-Projectresultaten/tree/main/3.%20DUTO-BIM%20Validator/3.%20Validatietool (see https://github.com/ISBE-TUe/DUTO-BIM-Projectresultaten/ for general information about that project).\n",
    "\n",
    "### 6.1.1 Setting up a local project and virtual environment\n",
    "To achieve the initial setup, a few steps need to be taken. First, it is recommended to setup a local project on your laptop (and thus not work with these Python notebooks), using Visual Studio Code. Within this local project, you are strongly recommended to set up a `virtual environment` and activate it. If you don't know how to do this, then please use the following resources to get you started: https://github.com/ISBE-TUe/python-tutorial/tree/main/advanced/files/PythonSetup.\n",
    "\n",
    "### 6.1.2 Installing Django\n",
    "After you have set up this project folder, your second step is to install Django. You ideally do this only AFTER creating and activating the above virtual environment, such that Django is installed locally in your project folder. To install Django in your project folder, you have to execute the following command in the command line terminal in visual studio:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python -m pip install Django"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For more information on how to install Django, refer to https://docs.djangoproject.com/en/5.1/topics/install/.\n",
    "\n",
    "### 6.1.3 Creating a clean Django project\n",
    "As a first step in creating your first Django project, you have the great opportunity to generate a draft Django project structure with sample files and code available that can get you started quickly. To achieve this, make sure to be in the project folder that you just created in Section 6.1.1 (use `cd` in the command line terminal in visual studio), and execute the following command (see also https://docs.djangoproject.com/en/5.1/intro/tutorial01/#creating-a-project). This will create the `universityProject` directory in your project folder."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "mkdir universityProject"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Verify in your file explorer of your computer that you can find this newly created folder.\n",
    "\n",
    "Now, execute the following command to create your draft Django project structure `myUniversity` in the folder `universityProject`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "django-admin startproject myUniversity universityProject"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": []
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "After executing this command, you should have obtained the following project structure:\n",
    "\n",
    "```\n",
    "universityProject/\n",
    "    manage.py\n",
    "    myUniversity/\n",
    "        __init__.py\n",
    "        settings.py\n",
    "        urls.py\n",
    "        asgi.py\n",
    "        wsgi.py\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You now have obtained the most basic version of a Django website. Verify that everything is working correctly by running:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python manage.py runserver"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You’ll see the following output on the command line:\n",
    "\n",
    "```\n",
    "Performing system checks...\n",
    "\n",
    "System check identified no issues (0 silenced).\n",
    "\n",
    "You have unapplied migrations; your app may not work properly until they are applied.\n",
    "Run 'python manage.py migrate' to apply them.\n",
    "\n",
    "November 19, 2024 - 15:50:53\n",
    "Django version 5.1, using settings 'mysite.settings'\n",
    "Starting development server at https://127.0.0.1:8000/\n",
    "Quit the server with CONTROL-C.\n",
    "```\n",
    "\n",
    "You can now open your browser and find the output in https://127.0.0.1:8000/"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 6.2 Your first Django application\n",
    "\n",
    "## 6.2.1 Making an App in the Django project"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now that your environment – a \"project\" – is set up, you’re set to fill in further details. This starts with creating an \"application\" inside the \"project. The combination of the two can be very confusing, as both have similar file structures and use the same file names (e.g. `urls.py`). So it is important from this point onwards to know in which file you are working.\n",
    "\n",
    "Start by creating a default basic 'application' file structure, using the following basic command. Make sure that your terminal is in the same directory as the `manage.py` file (use `cd` on the commandline) and run this in the command line. This will create the `students` application. That name is custom, and you can create a number of 'applications' with different names. In this tutorial, you will only make 1 application."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python manage.py startapp students"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You should now see an additional folder being created, with the following content:\n",
    "\n",
    "```\n",
    "students/\n",
    "    __init__.py\n",
    "    admin.py\n",
    "    apps.py\n",
    "    migrations/\n",
    "        __init__.py\n",
    "    models.py\n",
    "    tests.py\n",
    "    views.py\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 6.2.2 Your first 'application'\n",
    "For your first 'application', you need to two things configured appropriately:\n",
    "- views (step 1)\n",
    "- urls (step 2-3)\n",
    "\n",
    "### Step 1\n",
    "Now we create a first 'view'. This needs to happen in the `students` folder. \n",
    "\n",
    "- Go to this folder and create a file `views.py` in this Folder. \n",
    "- Open the file and add this content:\n",
    "\n",
    "``` python\n",
    "from django.http import HttpResponse\n",
    "\n",
    "def index(request):\n",
    "    return HttpResponse(\"Hello, world. You're at the students index.\")\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 2\n",
    "\n",
    "This is the most basic view possible in Django. To access it in a browser, we need to map it to a URL. For this, we need to define a URL configuration, or `URLconf` for short. These URL configurations are defined inside each Django app, and they are Python files named `urls.py`. To enable this, do the following:\n",
    "\n",
    "- go to the folder `students/`\n",
    "- create a file `urls.py`\n",
    "- Open the file and add this content:\n",
    "\n",
    "``` python\n",
    "from django.urls import path\n",
    "\n",
    "from . import views\n",
    "\n",
    "urlpatterns = [\n",
    "    path(\"\", views.index, name=\"index\"),\n",
    "]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 3\n",
    "\n",
    "The next step is to configure the global URLconf in the `myUniversity` project to include the `URLconf` defined in `students.urls`. To do this, add an import for `django.urls.include` in `myUniversity/urls.py` and insert an `include()` in the `urlpatterns` list, so you have:\n",
    "\n",
    "``` python\n",
    "from django.contrib import admin\n",
    "from django.urls import include, path\n",
    "\n",
    "urlpatterns = [\n",
    "    path(\"students/\", include(\"students.urls\")), # be careful, this path is important and needs to be findable\n",
    "    path(\"admin/\", admin.site.urls),\n",
    "]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 4\n",
    "Check your result by running the familiar command:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python manage.py runserver"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Find the result in your browser at https://localhost:8000/students/. Be careful: not http://localhost:8000/ (why not?)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 6.3 The model and the database\n",
    "At the core of every Django application, there is an object model, which allows to handle the information that goes through this application. In our case, we need to be able to handle `student` and `course` information (minimal setup). So these are the two classes that we want to have objects for. This is the `model` in our Application.\n",
    "\n",
    "Second, Django allows storing these objects in a relational database. Learning more about these databases is possible through the pointers and information that is given in https://docs.djangoproject.com/en/5.1/intro/tutorial02/. For the below tutorial, we will include a simple `SQLite` database.\n",
    "\n",
    "## 6.3.1 Creating the model\n",
    "To create a model in which multiple courses are available, and multiple students in those courses, go to the `students` folder and edit the `models.py` file such that it includes the following content:\n",
    "\n",
    "``` python\n",
    "from django.db import models\n",
    "\n",
    "class Course(models.Model):\n",
    "    created = models.DateTimeField(auto_now_add=True)\n",
    "    name = models.CharField(max_length=200)\n",
    "    teacher = models.CharField(max_length=200)\n",
    "\n",
    "class Student(models.Model):\n",
    "    course = models.ForeignKey(Course, on_delete=models.CASCADE)\n",
    "    firstName = models.CharField(max_length=200)\n",
    "    lastName = models.CharField(max_length=200)\n",
    "    identifier = models.IntegerField(blank=True, default=0, null=True)    \n",
    "    course = models.ForeignKey(Course, on_delete=models.CASCADE, blank=True, null=True)\n",
    "```\n",
    "\n",
    "Analyse the above: can you create the UML Class Diagram for this? Can you also create a UML Object Diagram?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 6.3.2 Creating the database?\n",
    "The objects that are created in the above model, are stored in an in-memory relational database. This database needs to be created, which happens through a concept called `migration` (see https://docs.djangoproject.com/en/5.1/intro/tutorial02/). \n",
    "\n",
    "In order to get started, first run the following command, which creates an empty database instance."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python manage.py migrate"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Next, we need to 'register' the earlier created database in our Application. To do so: \n",
    "- open the file `myUniversity/settings.py`, and \n",
    "- add the `StudentsConfig` file to this file, by adding the line `students.apps.StudentsConfig` to the parameter `INSTALLED_APPS`.\n",
    "\n",
    "``` python\n",
    "INSTALLED_APPS = [\n",
    "    \"students.apps.StudentsConfig\",\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",
    "]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As soon as you have made this change, you are ready to create the correct database structure based on the model that you have defined. This database structure comprises in our case of two tables `Course` and `Student`. To create this database (`make a migration`), run the following command:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python manage.py makemigrations students"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By running `makemigrations`, you’re telling Django that you’ve made some changes to your model (in this case, you’ve made a new one), and that you’d like the changes to be stored as a `migration`.\n",
    "\n",
    "After making this new `migration`, you can do the actual `migration`, by running the following command:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python manage.py migrate"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You are now finished and can inspect the database using the SQLite extension in VS Code. To do so, take the following steps. \n",
    "- Make sure to have the `SQLite` extension installed in VSCode. You can do this in the `Extensions` tab in VSCode (left in user interface)\n",
    "- After that, find the file `db.sqlite3` in the VS Code Project Explorer and click `Open Database`.\n",
    "- The database now shows up in the SQLite Explorer tab (left bottom in user interface).\n",
    "- Click through the different tables in the database in this explorer. For every table, you can right-click it and select `Show Table`\n",
    "\n",
    "You will see that the database is currently is of course empty, but it does have the structure of your model. You can see this by finding the `Course` and `Student` tables.\n",
    "\n",
    "Remember that, as soon as you make a change to your model, you will have to redo this migration."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 6.4 Making a user interface\n",
    "The last step in finishing our Django application, is by adding a user interface. This will make the below typical Django structure complete.\n",
    "\n",
    "![Django structure](files/django_structure.png \"Django project structure\")\n",
    "\n",
    "Look at the above Djanog structure diagram. Can you recognize all parts in your code? Which ones can't you recognize? Which ones can you?\n",
    "1. The model\n",
    "2. urls.py\n",
    "3. views.py\n",
    "4. The database\n",
    "\n",
    "In the below sections, we will add:\n",
    "1. Forms\n",
    "2. Templates\n",
    "\n",
    "The `Admin` component is not part of this interface. It can be added easily by taking the steps documented here: https://docs.djangoproject.com/en/5.1/intro/tutorial02/#introducing-the-django-admin."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 6.4.1 Adding the HTML Templates\n",
    "First, we will add the HTML Templates. In our case, we will add one `base.html` page, and four (4) HTML pages that fill in details of this `base.html` page, namely, 2 pages to view all `Courses` and `Students`, and two pages to add `Courses` and `Students`. You thus will create 5 files:\n",
    "\n",
    "- `base.html`\n",
    "- `courses.html`\n",
    "- `newcourse.html`\n",
    "- `students.html`\n",
    "- `newstudent.html`\n",
    "\n",
    "In order to get started, create in your project main file structure the following the folders `static` and `templates`. In the `templates` folder, you add the above 5 empty HTML pages. Your folder structure, should now look as follows:\n",
    "\n",
    "![Folder structure with HTML templates folder](files/django_templates.png \"Django project structure with templates\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In your own `templates` folder, add the 5 HTML files that you find in [the django example project](django\\universityProject\\templates)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note, it is important to make sure that your web application can find these HTML files, and that they are in the correct directory. If they are not in the correct place, this can lead to several error messages of course. In our case, we have placed these HTML files in the `templates` directory. Make sure that this location can also be found through the `settings.py` file. Open the `settings.py` file and check that the content contains the following. Particularly make sure that the `DIRS` variable includes `[BASE_DIR / \"templates\"]`. \n",
    "\n",
    "```python\n",
    "TEMPLATES = [\n",
    "    {\n",
    "        'BACKEND': 'django.template.backends.django.DjangoTemplates',\n",
    "        'DIRS': [BASE_DIR / \"templates\"],\n",
    "        'APP_DIRS': True,\n",
    "        'OPTIONS': {\n",
    "            'context_processors': [\n",
    "                'django.template.context_processors.debug',\n",
    "                'django.template.context_processors.request',\n",
    "                'django.contrib.auth.context_processors.auth',\n",
    "                'django.contrib.messages.context_processors.messages',\n",
    "            ],\n",
    "        },\n",
    "    },\n",
    "]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 6.4.2 Adding the CSS stylesheet and basic JavaScript scripts\n",
    "After having loaded the HTML files, you also need to add the CSS stylesheet. A CSS stylesheet encodes all the styles and formatting options that are used in your website, such as colors, font types, menu size, and so forth. In our case, and in many cases, we use a predefined and pre-created stylesheet. While it is possible to create your own stylesheet, it is nowadays recommended to use an existing CSS stylesheet that you can find in many online repositories. A recommended and good place to find your next CSS stylesheet is [BootStrap](https://getbootstrap.com). We will use the `tailwind` stylesheet, that you can find in https://tailwindcss.com.\n",
    "\n",
    "The stylesheet is a `static` resource. It does not change. Therefore, it is often stored in the `static` folder. We have already created that folder (see Section 6.4.1). As a next step, load the `tailwind.css` stylesheet from [the django example project](django\\universityProject\\static), and copy it to your own project.\n",
    "\n",
    "Do the same for the content in the `scripts` folder in [the django example project](django\\universityProject\\static), so that you also have these files in your project. These `.js` scripts enable basic functionality in your website. They are written in `JavaScript` (out of scope for this tutorial).\n",
    "\n",
    "You should now have the following project structure:\n",
    "\n",
    "![Folder structure with templates and static folder](files/django_staticfull.png \"Django project structure with templates and static\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Similarly to the HTML pages, it is important to make sure that your web application can find these static files, and that they are in the correct directory. If they are not in the correct place, this can lead to several error messages as well, or a website that is displayed without any stylesheet applied, nor any script working. In our case, we have placed these static files in the `static` directory. Make sure that this location can also be found through the `settings.py` file. Open the `settings.py` file and check that the content contains the following. Particularly make sure that the `STATICFILES_DIRS` variable includes `[os.path.join(BASE_DIR, 'static')]`. \n",
    "\n",
    "``` python\n",
    "STATIC_URL = 'static/'\n",
    "\n",
    "STATICFILES_DIRS = [\n",
    "    os.path.join(BASE_DIR, 'static'),\n",
    "]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 6.4.3 Updating the views and URLs\n",
    "Now that we have our HTML pages ready, we need to hook them up with the rest of our code. From the above Django structure diagram, you can see that this means that both the `views.py` and `urls.py` need to be updated, so that they point the browser towards the good templates.\n",
    "\n",
    "First, we update the `urls.py` file. Open the file `myUniversity/students/urls.py` and replace its content with the following code:\n",
    "\n",
    "``` python\n",
    "from django.urls import path\n",
    "\n",
    "from . import views\n",
    "\n",
    "urlpatterns = [\n",
    "    path(\"\", views.index, name=\"index\"),    \n",
    "    path('courses/', views.getCourses, name='courses'),\n",
    "    path('students/', views.getStudents, name='students'),\n",
    "    path('newcourse/', views.createNewCourse, name='newcourse'), \n",
    "    path('newstudent/', views.createNewStudent, name='newstudent')\n",
    "]\n",
    "```\n",
    "\n",
    "By doing so, four new lines are added, namely one four each of the HTML pages that we need. Analyze these lines, what do you see?\n",
    "\n",
    "1. The first element in every defined path, is the location of the path. For example, the `path` `courses/` indicates that it is possible to go in your web browser to the URL `https://127.0.0.1/courses/`.\n",
    "2. The second element indicates what needs to happen when this url is requested in the browser. In this case, it indicates that the function `getCourses()` needs to be executed in the `views.py` script.\n",
    "3. The third element stores the name of this path."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "After updating the URLs, we now need to update the `views`. At the moment, the code namely points to the `getCourses` (and similar) functions in the `views.py`script. But we did not create these functions yet!~\n",
    "\n",
    "Open `views.py` and replace content with the following code:\n",
    "\n",
    "``` python\n",
    "from django.http import HttpResponse\n",
    "from django.shortcuts import redirect, render\n",
    "\n",
    "from .forms import NewCourseForm, NewStudentForm\n",
    "from .models import Course, Student\n",
    "\n",
    "def getCourses(request):    \n",
    "        courses = Course.objects.all()\n",
    "        context={       \n",
    "            'courses': courses,\n",
    "        } \n",
    "        return render(request, 'courses.html', context)\n",
    "\n",
    "def getStudents(request):    \n",
    "        students = Student.objects.all()\n",
    "        context={       \n",
    "            'students': students,\n",
    "        } \n",
    "        return render(request, 'students.html', context)\n",
    "\n",
    "def createNewCourse(request):    \n",
    "    # if this is a POST request we need to process the form data\n",
    "    if request.method == 'POST':\n",
    "        # create a form instance and populate it with data from the request:\n",
    "        form = NewCourseForm(request.POST, request.FILES)\n",
    "        # check whether it's valid:\n",
    "        if form.is_valid():            \n",
    "\n",
    "            course = Course()\n",
    "            course.name = form.cleaned_data['name']\n",
    "            course.teacher = form.cleaned_data['teacher']  \n",
    "            course.save()\n",
    "\n",
    "            return redirect('courses')\n",
    "\n",
    "    # if a GET (or any other method) we'll create a blank form\n",
    "    else:\n",
    "        form = NewCourseForm()\n",
    "\n",
    "    return render(request, 'newcourse.html', {'form': form})\n",
    "\n",
    "def createNewStudent(request):      \n",
    "    # if this is a POST request we need to process the form data\n",
    "    if request.method == 'POST':\n",
    "        # create a form instance and populate it with data from the request:\n",
    "        form = NewStudentForm(request.POST, request.FILES)\n",
    "        # check whether it's valid:\n",
    "        if form.is_valid():            \n",
    "\n",
    "            student = Student()\n",
    "            student.firstName = form.cleaned_data['firstName']\n",
    "            student.lastName = form.cleaned_data['lastName']  \n",
    "            student.identifier = form.cleaned_data['identifier']  \n",
    "            student.save()\n",
    "\n",
    "            return redirect('students')\n",
    "\n",
    "    # if a GET (or any other method) we'll create a blank form\n",
    "    else:\n",
    "        form = NewStudentForm()\n",
    "\n",
    "    return render(request, 'newstudent.html', {'form': form})\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Test yourself:\n",
    "1. Can you identify the four functions that we wanted to add?\n",
    "2. Can you see and understand what they do?\n",
    "3. Can you find references to the `model` that we created?\n",
    "4. Can you find references to our `html` pages?\n",
    "5. Do you see JSON data structures?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 6.4.4 Adding Forms\n",
    "As a final step, we need to add `Forms`. These `Forms` are used by Django to enable the input of data from the web browser. They are web-based Forms that a user can fill in.\n",
    "\n",
    "These `forms` are located in the `forms.py` file in `myUniversity > students`. Open this file, and add the below code;\n",
    "\n",
    "``` python\n",
    "from django import forms\n",
    "from django.contrib.auth.forms import UserCreationForm\n",
    "from django.contrib.auth.models import User\n",
    "\n",
    "class NewCourseForm(forms.Form):\n",
    "    name = forms.CharField(label='Course name', max_length=200)\n",
    "    teacher = forms.CharField(label='Teacher name', max_length=200)\n",
    "\n",
    "\n",
    "class NewStudentForm(forms.Form):\n",
    "    firstName = forms.CharField(label='Course name', max_length=200)\n",
    "    lastName = forms.CharField(label='Teacher name', max_length=200)\n",
    "    identifier = forms.CharField(label='Identifier (student card number)', max_length=20)\n",
    "```\n",
    "\n",
    "As you can see, this creates two forms, one to create `students`, and one to create `courses`.\n",
    "\n",
    "Test yourself:\n",
    "1. Why are there only 2 forms, and not 4? We do have 4 HTML pages, right?"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 6.5 The end result\n",
    "After adding all the above files, we have covered all components in a Django project. We now (should) have a functional website. Congratulations!\n",
    "\n",
    "Try the newly created website by running the familiar `runserver` command."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "vscode": {
     "languageId": "plaintext"
    }
   },
   "outputs": [],
   "source": [
    "python manage.py runserver"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Your end result looks like this in the browser (just without the three example courses):\n",
    "\n",
    "![Django final result](files/django_endresult.png \"Django final result\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Test whether your website works:\n",
    "1. Can you go to all the four pages that you created?\n",
    "2. Do the pages redirect to each oter appropriately? Do links work?\n",
    "3. Can you find the URLs in the HMTL template files>\n",
    "4. Can you add `Student` and `Course` objects?\n",
    "5. Can you find the created students and courses in the database?\n",
    "6. What functionality would you be able to add?\n",
    "\n",
    "In case you encounter problems and errors, which is highly likely and practically unavoidable, then retrace your steps and try to find out what you did wrong. You can compare your current self-created project with the full project example that is available in [the example Django project](/django/). \n",
    "\n",
    "Very well done! The tutorial is hereby finished. I wish you the best of luck with creating your own Django websites in the future!"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}