Data Server 1 (django setup)

In previous posts I’ve discussed building a self-updating stock price database. While the data can be obtained by submitting queries to MySQL databases, having a GUI for interacting with databases can make future work with these databases less burdensome. In this post, I will use django, HTML, and Javascript to build a web-based application to access the stockprices.

First step is installing django and starting a project and an application. The official django website has a good tutorial for this procedure. The code in this post is developed using django version 2.0.7, and some of the commands may have changed for newer versions. I use windows 10 for main development. After testing is completed, I transfer the updated code via Git (using Bitbucket) to my linux Centos 7 server. I will add more features to the django server, and the latest version can be viewed here. The server codes can be found here

My project name is called data_server, and my application is called data. After starting a project with django-admin startproject data_server and an application with python manage.py startapp data, the project directory should look similar to this. __pycache__ folders are ignored.

│  manage.py
├─data
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  └─migrations
└─data_server
    │  settings.py
    │  urls.py
    │  wsgi.py
    └─ __init__.py

Firstly, I will create three folders, static, templates, views in data folder, so the structure looks as below. static folder will include files to be included in main HTML such as images, javascript, and CSS. templates will include HTML files, which will serve as front end of data server. views will include python files, which will use serve as back end of data server. data/views.py should be removed so that it doesn’t conflict with views folder. The resulting project directory should look as follows.

│  manage.py
├─data
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  __init__.py
│  ├─migrations
│  ├─static 
│  ├─templates
│  └─views
└─data_server
    │  settings.py
    │  urls.py
    │  wsgi.py
    └─ __init__.py

In the initial setting, there are a number of modifications to be made. First is in data_server/settings.py. The INSTALLED_APPS section should be as follows. It should include data.apps.DataConfig for the application and it should include bootstrap3 for bootstrap3, which I use for desiging front-end HTML. pip install django-bootstrap3 should be run if bootstrap isn’t already installed.

INSTALLED_APPS = [
    'data.apps.DataConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'bootstrap3',
]

The next step is creating a data/urls.py file in order to store urls used in data application. In this and subsequent post, I still start with a simple page, which displays historical stockprices. In path, the first parameter stockprice/ represents that this link will have url of /data/stockprice. The second parameter spv.loadmain represents that the request through this url will be sent to loadmain function of /data/views/stockprice.py file. The last parameter represents that the url can be called using django variable data:stockprice.

from django.urls import path

import data.views.stockprice as spv 

app_name = 'data'

urlpatterns = [
    path('stockprice/', spv.loadmain, name='stockprice'),
]

Before the data/urls.py file can be recognized by django, it needs to be added to the main url file, which is data_server/urls.py. data_server/urls.py file should look as below. path('data/', include('data.urls')), notifies django that urls in data/urls.py will follow after /data.

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
	path('data/', include('data.urls')),
	path('admin/', admin.site.urls),
]

Now that a link has been created, a view file that can respond to a request should be created. I will create a data/views/stockprice.py file.

from django.shortcuts import render

def loadmain(request):
	return render(request, 'stockprice.html')

data/views/stockprice.py file should contain a loadmain function which returns a HTML page. The code above returns a HTML file, after rendering /data/templates/stockprice.html template.

Before creating a /data/templates/stockprice.html template, I will create a /data/templates/base.htmltemplate, which will contain static elements of every HTML page such as navigation bar, CSS, and Javascript. My base file is as follows.

<html>
<head>
	{% load static %}
	<title>E.Cho Data Server</title>

	<!-- jQuery Package-->
	<script src="{% static 'packages/jquery.min.js' %}"></script>

	<!-- Bootstrap Package -->
	{% load bootstrap3 %}
	{% bootstrap_css %}
	{% bootstrap_javascript %}
	
	<!-- Block for custom packages to be added -->
	{% block head %}
	{% endblock %}
	
</head>
<body>
	<!-- NAV BAR-->
	<nav class="navbar navbar-default">
	  <div class="container-fluid">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
		  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		  </button>
		  <a class="navbar-brand" href="#">E.Cho Data</a>
		</div>

		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		  <ul class="nav navbar-nav">
			<li class="dropdown">
			  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Data <span class="caret"></span></a>
			  <ul class="dropdown-menu">
				<li><a href="{% url 'data:stockprice' %}">Stock Price</a></li>
			  </ul>
			</li>
		  </ul>
		</div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>

	<!--Block for main items-->
	<div class = "container">
		{% block main %}
		{% endblock %}
	</div>
</body>
</html>

Since I am not a graphic designer, I don’t want to spend much time on HTML design. Yet, since I want to website to look not-too-ugly, I make use of bootstrap3 default design. The HTML code for bootstrap navbar is from bootstrap official site. Bootstrap related javascript and css files are handled by the following three commands.

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}

Boostrap and ajax queries, which will be covered later, will require jquery package, which can be found here. The base html code assumes that jquery.min.js file can be found in /data/static/packages. The base html file contains two blocks head, which can be used to insert additional javascript or css files as needed by specific page, and main, which can be used to insert main contains of the page.

The last part is creating /data/templates/stockprice.html file, which will extend the base html file.

{% extends "base.html" %}

{% block main %}
<p>Stockprice file</p>
{% endblock %}

The resulting folder directory should look as follows.

│  manage.py
├─data
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  urls.py
│  │  __init__.py
│  ├─migrations
│  ├─static
│  │  └─packages
│  │          jquery.min.js
│  ├─templates
│  │      base.html
│  │      stockprice.html
│  └─views
│     └─ stockprice.py
└─data_server
    │  settings.py
    │  urls.py
    │  wsgi.py
    └─ __init__.py

Now that everything is setup, I can move into project directory in command prompt and run python manage.py runserver, which will start a test server. Going to url http://127.0.0.1:8000/data/stockprice should result in the following page.

Tags: python  mysql  django  HTML  Javascript 

Discussion and feedback