Contribute: School Idol Tomodachi website

Repository

SchoolIdolTomodachi/SchoolIdolAPI

This repository contains the sources of:

• School Idol Tomodachi website
• School Idol API
• School Idol Contest

See the contributors guide for the other projects.

Getting started

Install the 1st time

# Install pre-requirements
# Debian, Ubuntu, and variants
apt-get install libpython-dev libffi-dev python-virtualenv libmysqlclient-dev libssl-dev nodejs npm
# Arch
pacman -S libffi python-virtualenv libmysqlclient libssl nodejs npm

# Clone the repo
git clone https://github.com/SchoolIdolTomodachi/SchoolIdolAPI.git
cd SchoolIdolAPI

# Create a virtualenv to isolate the package dependencies locally
virtualenv env
source env/bin/activate

# Install packages, no need to be root
pip install -r requirements.txt

# Create tables, initialize database
python manage.py migrate

# Fill database with data from the prod site
python manage.py quickupdate idols
python manage.py quickupdate events
python manage.py quickupdate songs
python manage.py quickupdate cards
python manage.py update_cards_join_cache

# Generate the generated settings
python manage.py generate_settings

# Compile localized messages
python manage.py compilemessages

# Download front-end dependencies
npm install -g bower less
bower install

# Compile LESS to CSS
lessc -x web/static/less/style.less web/static/css/style.css

# Launch the server
python manage.py runserver

# Then open your browser to http://localhost:8000 to see the website

Anytime

Reactivate the environment

source env/bin/activate

Launch the server

python manage.py runserver

If you want it to be externally visible, add an extra argument 0.0.0.0:8000.

No need to restart it to see your modifications, the server reloads itself automatically.

Whenever you change the models

python manage.py makemigrations
python manage.py migrate

Whenever you add messages that should be translated

Generate terms:

python manage.py makemessages -l ja --ignore=env/* --ignore=schoolidolapi/settings.py --ignore=api/models_languages.py --ignore=web/templates/registration/*

Then go to POEditor and import the tems. When the new terms are translated in all languages, generate the new files and put them in the repo. Either manually or using the POEditor integration.

Compile all languages

python manage.py compilemessages

Create your own page

Want to provide a LP manager, a random idol of the day, a custom card game, an event manager, a cards generator, ...? We accept anything related to LoveLive! that corresponds to what people would expect in our website :)

It's very easy to create your own page, and don't forget that you can Contact us and we will always be happy to help you and talk to you about your ideas or how you can help~

In this example let's say we can't to create a page that shows all the URs. That's dumb, it's just an example.

1. Open the file web/urls.py and add the URL of your page

       url(r'^listofurs[/]+$', views.listofurs, name='listofurs')

2. Open the file web/views.py and scroll to the end of the file. Create a new function that will handle the logic and database interactions of your new page.

   def listofurs(request):
       context = globalContext(request)
       return render(request, 'listofurs.html', context)

3. Create a new file web/templates/listofurs.html:

   {% extends "base.html" %}
   {% load i18n %}
   
   {% block title %}{% trans 'List of URs' %}{% endblock %}
   
   {% block content %}
   <p>Hello world</p>
   {% endblock %}

4. Let's see if it worked.

   Run the server and open the page to see if it shows the Hello world you just wrote: http://localhost:8000/listofurs/

5. Get the list of URs from the database.

   Edit the function you wrote in web/views.py:

   def listofurs(request):
       context = globalContext(request)
       context['urs'] = models.Card.objects.filter(rarity='UR').order_by('-id')
       return render(request, 'listofurs.html', context)

   The context you give to the render function is a dictionary that contains all the info you want to have access to when you generate the HTML.

   In Django, when you manipulate databases, you use an ORM called "models". A model is a pythonic class that maps what's in the database. An entry in the database becomes an object instance of this class. The model classes have "managers" accessible using objects that you can use to query the database:

   • all, filter and get are the equivalent of a MySQL SELECT
     • models.Card.objects.all() will return all the cards in a list of objects
     • models.Card.objects.get(id=1) will return one card object. If the query returns multiple results and not just one, an exception will be raised.
   • add (= MySQL INSERT)
     • added_card = models.Card.objects.add(id=1, rarity='UR', idol='Minami Kotori', attribute='Smile') will create a new card
   • update (= MySQL UPDATE)
     • total_updated_cards = models.Card.objects.filter(attribute='All').update(is_special=True) will mark all the cards with the attribute "All" as special
   • delete (= MySQL DELETE)
     • models.Card.objects.filter(rarity='N').delete() will delete all the N cards

   To get the full details of all the models, read this file. To learn more about the Django models, read the official documentation.

6. Go through the list of URs and display them.

   Now open your template web/templates/listofurs.html. You now have access to the value urs, which is a list of Card objects.

   {% load mod %}
   ...
   {% block content %}
   {% for card in urs %}
   <a href="{{ card|singlecardurl }}">
     {% if card.card_image %}
     <img src="{{ card.card_image }}" alt="{{ card }}">
     {% endif %}
     <img src="{{ card.card_idolized_image }}" alt="{{ card }}">
     <p>
       {{ card.name }} {{ card.attribute }}
     </p>
   </a>
   {% endfor %}
   {% endblock %}

7. It works!

   Open your browser again and you should see a list of all the UR cards: http://localhost:8000/listofurs/

Go further

• More commands available to manage your instance of the website: Django Commands
• Configure your instance of the website: Django Configuration