To complete online games portal we must create only several templates. Except base template which is used by all other templates, templates for the website are relatively short and simple. In gamepor folder create templates folder. We are going to insert all templates in this directory. You can also do it on project level if you want.
Below is base.html template content. It will be extended by other templates.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{% block title %}Games4All{% endblock %}</title>
<link href="{{ MEDIA_URL }}main.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Games4All</h1>
<div id="searchbox">
<form action="/search/" method="get">
<p><label for="sid">Search:</label> <input id="sid" name="s" value="{% block search %}{% endblock %}"></p>
</form>
</div>
<div class="mainbox">
{% block mainbox %}{% endblock %}
</div>
<div class="sidebox">
<div id="categories" class="lbox">
<h2>Categories</h2>
<ul>
{% for category in categories %}
<li><a href="{{ category.get_absolute_url }}">{{ category.list_name }}</a></li>
{% endfor %}
</ul>
</div>
<div id="popsubcats" class="lbox">
<h2>Popular subcategories</h2>
<ul>
{% for subcategory in popular_subcategories %}
<li><a href="{{ subcategory.get_absolute_url }}">{{ subcategory.list_name }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<p id="copyright">This is just a simple demo created by Rafał Jońca and published under GPLv3 license.</p>
</body>
</html>
One word about license. You can use any fragment of above and previous code samples. The GPL license protects the work as a whole, but if you want create own commercial version it will only take you about 15 hours like the one shown here.
Because other templates I'm going to show are shorter and simple to follow (almost self-explanatory), I'll just show their content and postpone of everything.
index.html:
{% extends "base.html" %}
{% block mainbox %}
<div id="newgames" class="gbox">
<h2>New games</h2>
<ol>
{% for game in new_games %}
<li><a href="{{ game.get_absolute_url }}"><img src="{{ game.get_screenshot_url }}" width=120 height=90 alt="Game image"> {{ game.title }}</a></li>
{% endfor %}
</ol>
<p><a href="{% url gampor.views.new_games %}">More new games</a></p>
</div>
<div id="populargames" class="gbox">
<h2>Popular games</h2>
<ol>
{% for game in popular_games %}
<li><a href="{{ game.get_absolute_url }}"><img src="{{ game.get_screenshot_url }}" width=120 height=90 alt="Game image"> {{ game.title }}</a></li>
{% endfor %}
</ol>
<p><a href="{% url gampor.views.popular_games %}">More popular games</a></p>
</div>
{% endblock %}
main_list.html:
{% extends "base.html" %}
{% block title %}{{ subtitle }} | {{ block.super }}{% endblock %}
{% block mainbox %}
<div id="listgames" class="listbox">
<h2>{{ subtitle }}</h2>
{% include "list.html" %}
</div>
{% endblock %}
list.html:
<ol>
{% for object in main_list %}
<li><a href="{{ object.get_absolute_url }}"><img src="{{ object.get_screenshot_url }}" width=120 height=90 alt="Game image"> {{ object }}</a></li>
{% endfor %}
</ol>
{% if is_paginated %}
<p>Page {{ page }} of {{ pages }}</p>
<p id="paging">{% if has_previous %}<a href="?page={{ previous }}{% if searched_name %}&s={{ searched_name|urlencode }}{% endif %}">Previous</a>{% endif %}
{% if has_next and has_previous %} | {% endif %}
{% if has_next %}<a href="?page={{ next }}{% if searched_name %}&s={{ searched_name|urlencode }}{% endif %}">Next</a>{% endif %}
</p>
{% endif %}
search_list.html:
{% extends "base.html" %}
{% block title %}Results for search: {{ searched_name }} | {{ block.super }}{% endblock %}
{% block search %}{{ searched_name }}{% endblock %}
{% block mainbox %}
<div id="listgames" class="listbox">
<h2>Results for search: {{ searched_name }}</h2>
{% if main_list %}
{% include "list.html" %}
{% else %}
<p>No matching results found!</p>
{% endif %}
</div>
{% endblock %}
game.html:
{% extends "base.html" %}
{% block title %}{{ game.title }} | {{ block.super }}{% endblock %}
{% block mainbox %}
<div id="gamebox">
<h2>{{ game.title }}</h2>
{% include type_template %}
<p><b>Rating</b>: {{ game.rating }}</p>
<p><b>In subcategories</b>: {% for object in game.subcategories.all %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</p>
<p><b>Description</b>: {{ game.description|linebreaksbr }}</p>
<p><b>How to play</b>: {{ game.how_to_play|linebreaksbr }}</p>
</div>
{% endblock %}
flash.html:
<!--[if !IE]> -->
<object id="game" type="application/x-shockwave-flash" data="{{ game.get_local_file_url }}" width={{ game.width }} height={{ game.height }}>
<!-- <![endif]-->
<!--[if IE]>
<object id="game" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width={{ game.width }} height={{ game.height }}>
<param name="movie" value="{{ game.get_local_file_url }}" />
<!--><!-- dummy -->
<param name="loop" value="true" />
</object>
<!-- <![endif]-->
You should also create file similar to the flash.html for two other game types!
As you can see, I'm using two techniques to not write anything twice. First I use inheritance, so all general pages like index.html, main_list.html etc. extends base.html overriding some parts of it. Second, I use including for things that is not suited for inheritance. Of course I can get flash.html to be a subtemplate of game.html but I feel that inclusion is in this case better than extending. For details about using for loop, ifs, filters, inheritance etc., just read the great Django templates doc.
This is the end. If you join all part, you will get fully workable online game portal. I'll prepare a short demo of it and also a download package. This will be available in projects section of the site, but I'm going to put also some summary here.
Because as I see it no one is yet interested in internationalized version and version with static generation, I'll postpone those tutorials to when I get more free time.
0 komentarze:
Post a Comment