Created
July 25, 2012 21:16
-
-
Save UltimateDaggy/3178713 to your computer and use it in GitHub Desktop.
Adding login/logout button
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<!-- load some css --> | |
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"> | |
<title>Comments app</title> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row"> | |
<h1><a class="btn" href="{{ url }}">{{ url_linktext }}</a></h1> | |
</div> | |
<div class="row"> | |
<h2>Comments</h2> | |
<div id="comments" class="row"> | |
{% if comments %} | |
{% for comment in comments %} | |
<div class="row"> | |
<div class="well"> | |
<h4>{{ comment.author }} said...</h4> | |
<p>{{ comment.comment }}</p> | |
</div> | |
</div> | |
{% endfor %} | |
{% endif %} | |
</div> | |
</div> | |
<div class="row"> | |
<h2>Add a comment</h2> | |
<form id="comments-form" class="form-horizontal"> | |
<div id="alert-loading" class="alert alert-info"> | |
Sending data, please wait... | |
<a class="close" data-dismiss="alert" href="#">×</a> | |
</div> | |
<div id="alert-error" class="alert alert-error"> | |
Woops, there's been a problem, try again! | |
<a class="close" data-dismiss="alert" href="#">×</a> | |
</div> | |
<div id="alert-success" class="alert alert-success"> | |
Yay, submission went well! | |
<a class="close" data-dismiss="alert" href="#">×</a> | |
</div> | |
<fieldset> | |
<div class="control-group"> | |
<label class="control-label" for="input">Your name</label> | |
<div class="controls"> | |
<input type="text" name="author" id="input" placeholder="Your name" /> | |
</div> | |
</div> | |
<div class="control-group"> | |
<label class="control-label" for="textarea">Your comment</label> | |
<div class="controls"> | |
<textarea name="comment" id="textarea" placeholder="Your comment"></textarea> | |
</div> | |
</div> | |
</fieldset> | |
<div class="form-actions"> | |
<input type="submit" class="btn btn-primary" value="Add comment" /> | |
<a class="btn btn-primary" href="https://ict.newlinelearning.com/StudentData/06/06dastagirfaraz/Unit%201/eBook/Index.html">My eBook</a> | |
</div> | |
</form> | |
</div> | |
</div> | |
<!-- load some js --> | |
<script type="text/javascript" src="assets/js/jquery.min.js"></script> | |
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script> | |
<script type="text/javascript"> | |
<!-- | |
// here I'm wrapping my code in a closure tab, this means it's automatically run | |
(function() | |
{ | |
function ready() | |
{ | |
// add a listener to our form so that when someone submits a comment we submit it via ajax and load it back | |
// we're using jquery's submit handler, this means that when the form is submitted we'll do something | |
$('#comments-form').submit(function(event) | |
{ | |
// we don't want to actually refresh the page so we stop the event | |
// this is because when you submit the form it'll refresh the page | |
event.preventDefault(); | |
// let's show the loader | |
$('.alert').hide().filter('#alert-loading').show(); | |
// now let's submit the data with jquery's post ajax function | |
$.post('/comment', $(this).serialize(), handleSubmissionComplete, 'json'); // you can find out about these args on jquery $.post docs | |
}); | |
// add a listener to the alert's close buttons and hide the alerts for now | |
$('.alert').alert().hide(); | |
} | |
function handleSubmissionComplete(data) | |
{ | |
// show the appropriate loader | |
$('.alert').hide().filter('#alert-' + (data ? 'succes' : 'error')).show(); | |
// check the response | |
if (data) | |
{ | |
// so the submission was a success, let's reload the data | |
$.get('/comment', {}, handleLoadComplete, 'json'); | |
} | |
} | |
function handleLoadComplete(data) | |
{ | |
// check that we have data | |
if (data) | |
{ | |
// loop through our comments and update our list | |
$('#comments').empty(); | |
// create a var for our comment | |
var comment; | |
for (var i = 0; i < data.length; i++) | |
{ | |
comment = data[i]; | |
// add a row for each comment | |
$('#comments').append(' \ | |
<div class="row"> \ | |
<div class="well"> \ | |
<h4>' + comment.author + ' said...</h4> \ | |
<p>' + comment.comment + '</p> \ | |
</div> \ | |
</div> \ | |
'); | |
} | |
} | |
} | |
// use jquery's ready function to tell our code when the document is ready | |
$(document).ready(ready); | |
})(); | |
--> | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#!/usr/bin/env python | |
import jinja2 | |
import webapp2 | |
from app.model import comment_model | |
from google.appengine.api import users | |
class AppController(webapp2.RequestHandler): | |
def get(self): | |
# get our template | |
template = get_template({ | |
'comments' : comment_model.get_comments() | |
}) | |
# return it to the browser | |
self.response.out.write(template) | |
def get_template(data): | |
# prepare our templating engine | |
env = jinja2.Environment(loader=jinja2.FileSystemLoader('app/view/')) | |
# get our template | |
template = env.get_template('app.html') | |
#class MainPage(webapp2.RequestHandler): | |
def get(self): | |
# guestbook_name=self.request.get('guestbook_name') | |
# greetings_query = Greeting.all().ancestor( | |
# guestbook_key(guestbook_name)).order('-date') | |
# greetings = greetings_query.fetch(10) | |
if users.get_current_user(): | |
url = users.create_logout_url(self.request.uri) | |
url_linktext = 'Logout' | |
else: | |
url = users.create_login_url(self.request.uri) | |
url_linktext = 'Login' | |
# template_values = { | |
# 'greetings': greetings, | |
# 'url': url, | |
# 'url_linktext': url_linktext, | |
# } | |
# template = jinja_environment.get_template('index.html') | |
# self.response.out.write(template.render(template_values)) | |
# render our template | |
return template.render(data) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment