Saturday, October 31, 2009

Master and Registration Page templates

base.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 
  <head> 
   <title>The Run Around</title> 
    <link type="text/css" rel="stylesheet" href="/ra/static/css/style.css" /> 
    <script type="text/javascript" src="/ra/static/js/base.js"></script> 
  
  </head> 
  
  <body>
  
   <div id="header">
    <div class="header_content">
     <a href="/runaround" class="title">
      <img src="/ra/static/images/runaround_logo.gif" />
     </a>
     
      <div class="account">Hello Guest | 
     <a href="/runaround/register">Register for an account</a>
    </div>
   
    </div>
   </div>
   
   <div class="body_content">
   
    {% block content %} {% endblock %}
    
   </div>
   
   <div class="footer_stuff">This is an awesome running app.</div>

 <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
     <script type="text/javascript">
       FB.init("edbc02640bc38965940b56cece534ad5", "/runaround/xd_receiver");
     </script>
 <script type="text/javascript" src="/ra/static/js/fbconnect.js"></script> 
  
  </body>
  
</html> 

Nothing fancy here, a simple and typical django base template page which other templates/pages would inherit from.

register.html

{% extends "base.html" %}

{% block content %}

<div class="register">
 <div class="login_sector">
  <h2>Do you use Facebook?</h2>
    Use Facebook to register for The Run Around:
   <br/><br />
   
   {% fbconnect_button "medium" %}
   
    </div>

 <div class="login_sector_fb">
  <h2>Register</h2>
  <form action="/runaround/register/" method="post">
   
   <table>
   
     {{ form }}
      
   </table>
   
   <input type="hidden" name="save" value="1">
   <input type="submit" class="inputsubmit" value="Register" style="margin-left: 80px">

  </form>

 </div>
</div>

{% endblock content %}


The "form" variable shown in the above template would be passed by the handler to the template engine, which we will discuss in next few posts.

0 comments:

Post a Comment