I would recommend taking a look at Flask, a web framework for Python that's fairly easy to set up and comes with a development server you can run locally. The code snippets below are from a Flask based browser RPG.
The two most pouplar methods of exchanging data between the frontend and backend in a web application are
- Templates and forms
- Asynchronous requests fom JS (AJAX)
These are typically used in combination, each serving a different role.
Templates
A template is, put simply, a HTML page with placeholders that the server replaces with data before the page gets sent to the client. Flask uses Jinja2 for this task.
Assuming you want to go to http://servername/character/1 and see a list of the first character's items, a basic Jinja2 template could look like this:
<body>
Your inventory:<br/>
<div>
{% for item in pc.inventory.items %}
<a href="/items/{{loop.index}}">{{item.name}}</a>
{% endfor %}
</div>
</body>
And the Python code to serve the page:
app = Flask(__name__)
@app.route('/character/<int:index>')
def show_character(index):
chara = party.characters[index-1]
return render_template('character.html', pc=chara)
POST Requests
I'll assume you're familiar with forms. If you set method="post", the form will forward the data entered to the web server. Flask extracts this data into a dictionary. The following code reads data from an input field named "description" and forwards it to a template to display it back to the user. Note that in practice, you'll probably want to save that data somewhere, ideally in a database.
@app.route('/profile/description', methods=['POST'])
def set_description():
description = request.form['description']
return render_template('profile.html', description=description)
AJAX
Asynchronous requests work basically the same, except that they are called from JavaScript and you usually don't want to return a template but rather a string containing JSON, which JavaScript can easily digest and turn into an object, if needed. The idea is that the "consumer" of an AJAX/REST call is not the user but your script, which will process the data and add it to the DOM.
If you want to exchange complex objects or even object hierarchies between front- and backend, I recommend jsonpickle. However, keep in mind that any AJAX requests eat up bandwidth, while filling out a template server side is free from a bandwidth standpoint.
Use Ajax when you need to refresh data without reloading the entire page, for example for a chat window.
Things to look out for
- Client side (i.e. JS) input validation is good for the user experience, but never trust any data that comes from the client, always validate server side.
- A database is recommended for storing your data.
- Look into session handling. The server side code is "global", by default there is one scope for all users. You'll probably want an encrypted session cookie or at least a session ID so people can't just login as someone else. I can add examples later if you need them.
- Keep in mind that some users don't allow scripts for every domain. If some core functions absolutely require JS, that's ok, just communicate that. If you can make it work without, even with less functionality, that's better.
Hope that serves as a good starting point. Feel free to ask more specific questions if you get stuck somewhere, that's what the site is for :)
