Whiteboard (Django 1-5)

Python 3.7 installed

pip install virtualenv, virtualenvwrapper-win (remove -win for linux)

pip freeze:

C:\WINDOWS\system32>pip freeze
pbr==5.2.1
six==1.12.0
stevedore==1.30.1
virtualenv==16.6.0
virtualenv-clone==0.5.3
virtualenvwrapper-win==1.2.5

mkvirtualenv whiteboard

cd and mkdir into app folder, then setprojectdir .

(env) pip install django

(env) python -m django –version

Then we can start the project:

django-admin startproject whitebo

Then we get the frame of the project so we can start:


These files are:

  • The outer mysite/ root directory is just a container for your project. Its name doesn’t matter to Django; you can rename it to anything you like.
  • manage.py: A command-line utility that lets you interact with this Django project in various ways. You can read all the details about manage.py in django-admin and manage.py.
  • The inner mysite/ 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. mysite.urls).
  • mysite/__init__.py: An empty file that tells Python that this directory should be considered a Python package. If you’re a Python beginner, read more about packages in the official Python docs.
  • mysite/settings.py: Settings/configuration for this Django project. Django settings will tell you all about how settings work.
  • mysite/urls.py: The URL declarations for this Django project; a “table of contents” of your Django-powered site. You can read more about URLs in URL dispatcher.
  • mysite/wsgi.py: An entry-point for WSGI-compatible web servers to serve your project. See How to deploy with WSGI for more details.

Start:

(env) python manage.py runserver:


Run all migrations:

(env) python manage.py migrate

Now we can create out app……..

To create your app, make sure you’re in the same directory as manage.py and type this command:

(env) python manage.py startapp simplewhiteboard

Now add code equal to the picture and run (env) python manage.py runserver, the file simplewhiteboard/urls.py you must create, the rest is there:

We can also map the app to root url:

path(”, include(“simplewhiteboard.urls”)), path(‘simplewhiteboard/’, include(“simplewhiteboard.urls”)), path(‘admin/’, admin.site.urls),

Then we can navigate to http://localhost:8000

Ok, then we create a model with just one field, red_field (here we will store the taskname we need to focus on)

We also need to add our application to django and the we migrate to perform the change:

In order to check the model with CRUD operations, we must create a superuser:

(env) python manage.py createsuperuser:


After that we must add our form the the admin page, run migrations and start the app:

The we can CRUD operations from the admin page:

Change our model…….lets add more fields

By running makemigrations, you’re telling Django that you’ve made some changes to your models (in this case, you’ve made new ones) and that you’d like the changes to be stored as a migration.
There’s a command that will run the migrations for you and manage your database schema automatically – that’s called migrate, and we’ll come to it in a moment – but first, let’s see what SQL that migration would run. The sqlmigrate command takes migration names and returns their SQL:
You can read the migration for your new model if you like; it’s the file simplewhiteboard/migrations/0001_initial.py. Don’t worry, you’re not expected to read them every time Django makes one, but they’re designed to be human-editable in case you want to manually tweak how Django changes things.
The sqlmigrate command doesn’t actually run the migration on your database – it just prints it to the screen so that you can see what SQL Django thinks is required.

Change your models (in models.py).
Run python manage.py makemigrations to create migrations for those changes
Run python manage.py migrate to apply those changes to the database.

Since we already have some objects, we need to delete them before the change or add default values to the field.


Change in model:

python manage.py makemigrations simplewhiteboard

Check the SQL:

python manage.py sqlmigrate simplewhiteboard 0003

The actual migrate:

python manage.py migrate


So now we have added and changed the model to reflect a simpe whitboard for problemsolving:

Now we need to add a page to add, edit and view our whiteboard…..

Lets extend the HttpRespone with our ORM data before we go into return render and templates.

We are now getting all objects back with the problem(text) and goal(text) field in a response:

Next up, add a template and a response with data…

Now we change the code a bit, we save all the data in var context, then we render the request, point to template and the data (context):

So here we have made the templates/app/index.html file and started the app:



Now we can iterate over the objects in out html file like this (we have also added the id field from django db:


Now we can apply Bootstrap style….

Then we can make the template folder and static folder, in the template we add base.html and index.html.

In the static folder we add a style.css for extra styling, we also create a folder called view to move all the Python views in that folder.

We import Bootstrap from maxcdn for now.

We are using Django templating:

base html:


<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}{% endblock %}</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">

    <!-- Custom styles for this template and Django static -->
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'simplewhiteboard/style.css' %}">


    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    

    
</head>

We also add code for the sub-html files to be used in the base:

<div class="container">
        <!-- content from other html, ref Django templates elo/-->
        {% block content %} {% endblock %}
        <!-- content from other html ref Django templates elo/-->

    </div>

In the app/urls we add the mthod from views:

from django.urls import path
from . import views

from simplewhiteboard.views import views

urlpatterns = [
    path("", views.index, name="index"),
    path("create_board", views.create_board, name="create_board"),
]

Code:

After startup:

HTTP:


Now we are using Bootstrap with our own custom css where we added just h2 { color: brown; }


Scroll to Top