適当すぎる占い.png

Fortune-telling site that is too suitable

Not long ago, I made a fortune-telling site that is too suitable.

I made some corrections after creating it, but the work time is actually about 1 hour.

Technology used

The technology used was Bottle, a Python web framework.

The database used SQLite3 and the CSS framework used Bulma.

Deploy to Heroku.

Creating a database

First of all, I created a database (SQLite3).

The database name is database.db.

`set_fortune.py`


# -*- coding: utf-8 -*-

import sqlite3
from contextlib import closing

dbname = 'database.db'

with closing(sqlite3.connect(dbname)) as conn:
    c = conn.cursor()

    create_table = '''create table fortune (id int, text varchar(256))'''
    c.execute(create_table)

    insert_sql = 'insert into fortune (id, text) values (?,?)'
    fortune = [
        (1, 'Drinking mayonnaise in the shade may be disappointing.'),
        (2, 'Drinking coffee makes you breathe.'),
        (3, 'When you call out to the opposite sex with your eyes, 50%You can date with the probability of.'),
        (4, 'It's good to eat seafood noodles with Tabasco.'),
        (5, 'When you eat curry, your IQ will be 150.'),
        (6, 'There are good things to do when you try to get cigarette smoke out of your nose.'),
        (7, 'Even if you backflip in the middle of the road, it will be ignored.'),
        (8, 'I get nosebleeds when I eat chocolate bar.'),
        (9, 'Twist the water faucet and run until it overflows.'),
        (10, 'I'm tired of thinking about proper fortune-telling.'),
    ]
    c.executemany(insert_sql, fortune)
    conn.commit()

    select_sql = 'select * from fortune'
    for row in c.execute(select_sql):
        print(row)

I'm creating a table called fortune and creating id and text columns.

After that, I inserted 10 data.

As a method of inserting data later, you can insert it as follows.

$sqlite3 database.db
sqlite> insert into fortune values(11, 'I want to get good with Qiita');

Source code

Let's look at the source code.

`index.html`


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="index, follow">
    <meta name="application-name" content="Appropriate fortune-telling">
    <meta name="description" content="Do a proper fortune-telling.">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Sloppy fortune-telling</title>

    <link rel="stylesheet" href="../static/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Kosugi&display=swap" rel="stylesheet">

  </head>
  <body>

  <section class="hero is-medium is-primary is-bold">
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          Sloppy fortune-telling
        </h1>
        <h2 class="subtitle">
Appropriate fortune-telling
        </h2>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">

      <div class="field">
        <div class="control">
          <div class="select is-primary is-rounded is-medium">
            <select>
              <option>Aries</option>
              <option>Taurus</option>
              <option>Gemini</option>
              <option>Cancer</option>
              <option>Leo</option>
              <option>Virgo</option>
              <option>Libra</option>
              <option>Scorpio</option>
              <option>Sagittarius</option>
              <option>Capricorn</option>
              <option>Aquarius</option>
              <option>Pisces</option>
            </select>
          </div>
        </div>
      </div>

      <input class="input is-primary is-rounded is-medium" type="text" placeholder="Input your name">

      <div class="columns is-mobile is-centered">
        <button class="button is-primary is-rounded is-large" id="open">Fortune-telling!</button>
      </div>

      <div class="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">Today's fortune</p>
          </header>
          <section class="modal-card-body">
            {{result}}
          </section>
          <footer class="modal-card-foot">
            <button class="button" id="close">Close</button>
          </footer>
        </div>
      </div>

    </div>
  </section>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

  <script>
    $(document).ready(function() {
      $("#open").on("click", function() {
        $("div.modal").addClass("is-active");
      })

      $("#close, div.modal-background").on("click", function() {
        $("div.modal").removeClass("is-active");
      })
    });
  </script>

  </body>
</html>

Bulma is read by CDN and the display is arranged.

When you press the button with id = open, Modal appears and the fortune-telling result is displayed.

For the sake of appearance, there is a constellation selection and name input field, but I will not use it for anything: D

`app.py`


# -*- coding: utf-8 -*-

from bottle import Bottle, template, static_file, url
import os
import random
import sqlite3

app = Bottle()

@app.route('/static/:path#.+#', name='static')
def static(path):
    return static_file(path, root='static')

@app.route('/')
def index():

    con = sqlite3.connect('database.db')
    cur = con.cursor()

    num = str(random.randint(1,16))

    sql = 'select * from fortune where id = ' + num + ';'
    cur.execute(sql)

    for row in cur:
        result = row[1]

    con.close()

    return template('index', result=result)

@app.error(404)
def error404(error):
    return "Error 404. Try again later."

@app.error(500)
def error500(error):
    return "Error 500. Try again later."

# local test
app.run(host='localhost', port=8080, debug=True)

# heroku
# app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))

Connect to a database called databese.db and generate random numbers.

Since the fortune table has an id column, we are getting the fortune-telling result (text) where the generated random number and id match.

Deploy to Heroku

It was completed to some extent, so I deployed it to Heroku.

First of all, create the files needed for deployment.

$ pip3 freeze > requirements.txt        
$ echo web: python3 app.py > Procfile

There are several ways to deploy to Heroku.

Personally, I find it easier to work with the GitHub repository.

After getting a Heroku account, select Create new app and set the App name and so on.

After that, you can deploy by simply selecting GitHub from the "Deploy" Deployment method and linking it.

Finally

I made a fortune-telling site that is too suitable.

If it improves, it will take shape to some extent. I think.

If you don't mind, please try the challenge for an hour! !!

reference

・ Sqlite @ mas9612 in Python

Links

Fortune-telling site that is too suitable: https://sloppy-fortune-telling.herokuapp.com/

GitHub: https://github.com/ShogoMurakami/sloppy-fortune-telling

Thanks, @shogo

[1 hour challenge] I tried to make a fortune-telling site that is too suitable with Python