Styling the page

Styling the page

For my last post I will show a couple different ways to make the website look good, something I haven't covered much of.  To start I created a Django app 

which then creates the following file tree

Next I opened up a bash console and cd'ed into the directory containing manage.py and ran the following commands, running the command tree shows the file tree. 

This creates the the following files 

Then I updated the urls file to include the index.html 

Next I made some changes to index.html, which I created in the style directory.

There's a number of  ways to change the html but one way to to do it is to put everything into a style tag.  The tags for body, h1, h2, h3 etc. all style that specific div on the page.  For this I decided to change the color of the text, centers the text, and then changes the background color of the text which is a like the highlighted color.  You can check it out at jpernick.pythonanywhere.com/.

As always thank you for reading and please post any comments or questions. 

-Joe

Bottle App

Bottle App

This week I will be creating a Bottle app.  Bottle is great for a number of things including prototyping ideas, learning how web frameworks are built, and running personal or simple web apps. Bottle is contained within a single large source file called bottle.py that makes it easier to get the app up and running as well as read and see how Bottle framework interacts with the web application code. *Please click on the photos to enlarge them

Getting Started

The first thing I did was go to the web tab and create a new bottle app:

I will be using the same domain name that I have been previously using jpernick.pythonanywhere.com.  Next, I saved and ran a script to create a todo.db database file as well as a table in which I will store the items of the todo list.  This is what the script looks like:

I have also decided to store the code for this in a file called todo.py.  This is what the file tree looks like after running the script:

Next I updated code to include the route jpernick.pythonanywhere.com/todo,  this is the code:

Next week I will be implementing a template as well.  As always thank you for reading and please write me any comments or questions you may have.  

-Joe

Password Protection

Password Protection

This week I will be continuing with the same comment app from last post and adding a password to protect it from spam.  The app is always up for comments to be posted at http://jpernick.pythonanywhere.com/. The username and password are both "hockey18".  *Please click on photos to enlarge them.

How its done

Right now the website can be accessed by anyone which can lead to annoying spam preventing it from being used to the fullest.  

before

after

Python anywhere gives a really easy way to protect your site.  Simply go to the web tab, scroll all the way down and there is a heading called password protection. There is a tab that needs to be switched from disabled to enabled, and then I put in a username and password. (both of which I made "hockey18"). 

Next it is important to scroll back up to the top of the page and click the green reload button, this applies the changes I just made. 

Now when I go to my url http://jpernick.pythonanywhere.com/ I am prompted to put in a username and password. The username is hockey18 and the password is also hockey18. 

Once the username and password are entered correctly the app is free to be used regularly.  The username and password only have to be entered once a session. 

Thank you for reading and please leave comments on anything you would like to see next!

-Joe

Getting Started In Flask

Flask

For this post this week I will be creating a simple app using Flask that will allow users to post comments, it will also be password protected so it doesn't get full with spam.  Please go to jpernick.pythonanywhere.com and comment to see it in action!  

Getting Started

What are some benefits of using Flask?  Flask is relatively new, only in use since 2010.  It is considered more python-like because the code is more explicit in most cases.  Flask is great for beginners because it is very simply to get a simple app on the web. The Flask app is created the on pythonanywhere.com the same way the Django app was started, by simply going to the files tab and clicking create a new site. This creates a mysite directory and a file called flask_app.py which contains the simple code of the website: *Please click on pictures to enlarge them

and after saving this and going to jpernick.pythonanywhere.com we can see this:

Template 

The next thing I did was design a template for the main page.  I did this by clicking in the create new directory text box and creating a directory called templates.  I then created the file main_page.html.  The file tree now looks like this:

Next I updated the main_page.html file to look like this: 

The next step is to update the original source code to render this template, I changed the flask_app.py code from the original:

to this:

After saving the app this is what I get:

If I try to add this comment though, I get this error:

which actually makes perfect sense because we did not write any code to handle this.  So I did that next.  What this error means is that I tried to send data to the page, but it is not configured to accept it.  The first thing I did was edit the code in flask_app.py from:

to this:

After this change, now I won't get an error when I try to post it, but it will just return the same page and forget about the comment. What I need to do next is connect to a database.  

Database

In order to create a database I went to the databases tab and entered in a password that I will use when I want to access it, and then clicked the initialize button.  The tab looks like this.  

Now I am given the option to create a database, I typed in comments and clicked create.

Next week I will show how to make changes using the database.  Thank you for reading! Please comment anything you would like to see.  

-Joe

Testing the Website

Testing 

In my last post I created a polls application that asked a question, allowed the user to vote, and displayed the results on separate pages. For anyone who missed it, the question was "which platform would you like to see next?" and Flask won! *Please click the photos to enlarge them

Although, I think many of the votes may have been my friends randomly voting to help me test it so if you would like to see one of the others please leave a comment and that's what I will do for the next platform!  For this post, I will show how to test the website.

Automated Testing

Tests are simple routines that test the operation of your code.  Why would I need tests?  A good reason is that it will save you time in the long run, especially for complex websites with multiple applications and interactions where simply "checking to see if it works" is not enough. If something is wrong, tests will also help you find out where the error is.   Some people follow a coding discipline called "test-driven development" in which the tests are written before the code, but it is never too late to get started. 

There is already a bug in the polls application.  The Question.was_published_recently() returns True if the question was published within the last day but also if the questions pub_date is in the future(which is incorrect).  I've used the shell to show this here:

Creating a test to catch the bug

A conventional place to put tests is the applications tests.py file.  So for this site I have updating the polls/tests.py page like so:

What I did was create a django.test.TestCase subclass with a method that creates a Question instance with pub_date in the future. Then it checks the output of was_recently_published() which should be false. When I ran python manage.py test polls the output is:

This shows one failure. The error is easily fixed by updating the method in the polls/models.py file:

After running the test again you can see the error has been fixed and the test passes: 

Making more comprehensive tests

It would be bad if fixing one error created another error so I made some updates to the polls/tests.py file to include two more tests:

This will cover any other issues with the was_published_recently() method.  

Thank you for reading! For my next post I will cover some of the different ways to style a Django page.  Please comment anything you would like to see or any suggestions you would like to give to make your reading experience better. 

-Joe

Django Poll App

Polls Application

This week I created a polls application in Django.  It uses a data base to store questions and choices and then displays the results on a separate page.  I have also created an admin page in which I can access the database and make changes.  Please go to jpernick.pythonanywhere.com/polls to see it in action and vote on the next platform you'd like to see me use.*Please click on the photos to enlarge them. 

Creating the polls directory

I created the polls directory the same way I created the hello app in the last blog post, with the command 'python manage.py startapp polls'.  This is what we created:

For this app, I created two models, a question and a choice.  Each choice is associated with a question.  These are located in the polls/models.py file:

Next I ran a few commands into a bash console. By running 'python manage.py makemigrations polls' it creates migrations for the changes made to models.py.  Next I ran 'python manage.py migrate' to apply those changes to the database.

Updating the database and creating the admin page

There are two different ways to update the database.  One way is by using the command 'python manage.py shell'  This opens up the python interactive shell:

You can run a number of commands in this shell that will manipulate and display data.

.objects.all() - will show all of the objects

.objects.filter(id=1) - will filter results to show the question with id =1

q.choice_set.create(choice_text = "example", votes = 0) - will create a choice related to the question

Another way to update the database is through creating an admin page. First I ran the command 'python manage.py createsuperuser' and was prompted to give my desired username and password.  I can now reach the admin page for the site at jpernick.pythonanywhere.com/admin and after logging in I can see this page:

Now I can click on the change button and make changes to the database:

In order to make the question data accesible on this page I updated the polls/admin.py page to look like this:

from django.contrib import admin

from .models import Question

admin.site.register(Question)

Views, urls, templates

I made three templates to hold the html code for each of the web pages.  But before I updated these I had to update the polls/views.py file:

This code connects the views to each of the templates.  It also contains what to do when someone votes in the poll or if they try to submit a vote without selecting a choice.  The polls/urls.py contains the code to make a call to the view to show in the browser:

Next I updated each of the templates found in mysite/polls/templates/polls/ :

index.html

details.html

results.html

Thank you for reading!! Please comment what you would like to see next and don't forget to go to jpernick.pythonanywhere.com/polls to vote in the poll!

-Joe

Creating a Simple Web App

Create the app 

The first thing I did was go into the web tab and create a new web app.  This creates a directory in which I can create and edit the files making up the website. *Please click the photos to enlarge them :)

This is the mysite directory.  

Creating "hello"

In order to create the hello directory that will be the hello page of this site I typed this command:

into a Bash console which created these files:

Connect the view

In order to link the view to the site there are a few things that need to be done.  First I updated the hello/views.py file to look like this:

I then had to create a new urls.py file for the hello directory, this is done by just creating a new file and updating it like so:

creating the file

hello/urls.py

Next I had to link this to the mysite/urls.py file:

Lets see if it worked!

Running the command python manage.py runserver 8002 starts a server with the port number 8002.  

Now if I go to my domain name and specifically the hello page at jpernick.pythonanywhere.com/hello we can see that it worked!  The page is displayed with the message.  

Thank you for reading! Next week I will be creating a polling application using a couple cool features in Django.  Please comment your thoughts and anything you would like to see in future blogs!