2

I'm currently stuck on this issue and I can't seem to figure it out... I've created a small webapp using CherryPy and I've used Mako for the html templates. Everything is tied to a MySQL database which contains a car list pretty much. My issue is the following: I'm using a POST form in order to navigate to the car section from the main page and specify a certain car make. Once arrived to that page, I load up all the cars according to the criteria in my POST from the database. The variable contains all the fetched rows from the db. I then proceed to iterate through the list of rows in order to display each car info, etc, but I cannot seem to find a way to tie each picture to its corresponding car. My idea was to generate the path to my img folder( ../img/cars/ ) and concatenate it with the car id + the file extension, but that doesn't seem to work... (My pictures are saved as 1.jpg, 2.jpg etc - each number represents the car id).

index.html:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="../css/style.css" rel="stylesheet">




</head>

<body>

<div class="wrapper">



        <div class="topnav" id="myTopnav">

            <a href="index" id="logolink">
                <img alt="AutoRIL" src="../img/logo_transparent.png" width="75" height="75">
            </a>

            <a href="index" id="link" class="active">Home</a>
            <a href="#news" id="link">News</a>
            <a href="contact" id="link">Contact</a>
            <a href="about" id="link">About</a>

          </div>



          <div class ="pageinfo">


            <img src="../img/slides/slide1.jpg" alt="BMW">
            <img src="../img/slides/slide2.jpg" alt="Audi">



          </div>




          <div class="pagecontent">

                <h1>Show cars by Category</h1>



                <div class="row">
                    <div class="column">
                      <div class="card">
                        <img src="../img/categories/hatchback.png" alt="Hatchback" style="width:200px; height:200px;">
                        <div class="container">
                          <h2>Hatchback</h2>
                          <p>Agile due its reduced size.</p>
                          <form action="displaybycategory" method="POST">
                            <p><button class="button" type="submit" name="category" value="hatchback" >Check available models</button></p>
                        </form>
                        </div>
                      </div>
                    </div>

                    <div class="column">
                      <div class="card">
                        <img src="../img/categories/suv.png" alt="SUV" style="width:200px; height:200px;">
                        <div class="container">
                          <h2>SUV</h2>
                          <p>Extremely versatile due to its power and utility.</p>
                          <form action="displaybycategory" method="POST">
                            <p><button class="button" type="submit" name="category" value="suv" >Check available models</button></p>
                        </form>
                        </div>
                      </div>
                    </div>

                    <div class="column">
                      <div class="card">
                        <img src="../img/categories/sedan.png" alt="Sedan" style="width:200px; height:200px;">
                        <div class="container">
                          <h2>Sedan</h2>
                          <p>Enough space to fit all needs.</p>
                          <form action="displaybycategory" method="POST">
                            <p><button class="button" type="submit" name="category" value="sedan" >Check available models</button></p>
                        </form>
                        </div>
                      </div>
                    </div>
                  </div> 



                  <div class="row">
                    <div class="column">
                      <div class="card">
                        <img src="../img/categories/convertible.png" alt="Convertible" style="width:200px; height:200px;">
                        <div class="container">
                          <h2>Convertible</h2>
                          <p>Gives you all the freedom you deserve.</p>
                          <form action="displaybycategory" method="POST">
                            <p><button class="button" type="submit" name="category" value="convertible" >Check available models</button></p>
                        </form>
                        </div>
                      </div>
                    </div>

                    <div class="column">
                      <div class="card">
                        <img src="../img/categories/coupe.png" alt="Coupe" style="width:200px; height:200px;">
                        <div class="container">
                          <h2>Coupe</h2>
                          <p>Sporty looks, aggressive driving.</p>
                          <form action="displaybycategory" method="POST">
                            <p><button class="button" type="submit" name="category" value="coupe" >Check available models</button></p>
                        </form>
                        </div>
                      </div>
                    </div>

                    <div class="column">
                      <div class="card">
                        <img src="../img/categories/sports.png" alt="Sports" style="width:200px; height:200px;">
                        <div class="container">
                          <h2>Sports</h2>
                          <p>City conqueror, track monster.</p>
                          <form action="displaybycategory" method="POST">
                            <p><button class="button" type="submit" name="category" value="sports" >Check available models</button></p>
                        </form>
                        </div>
                      </div>
                    </div>
                  </div>



                  <h1>Show cars by Make</h1>


                  <form action="displaybymake" method="POST">

                  <table style="width:100%" id="carmakes">
                    <tr>
                      <td><p><button class="button" type="submit" name="make" value="Audi" >Audi</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Fiat" >Fiat</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Hyundai" >Hyundai</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Mazda" >Mazda</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Nissan" >Nissan</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Toyota" >Toyota</button></p></td>
                    </tr>
                    <tr>
                      <td><p><button class="button" type="submit" name="make" value="BMW" >BMW</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Ford" >Ford</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Kia" >Kia</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Mercedes-Benz" >Mercedes-Benz</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Porsche" >Porsche</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Volkswagen" >Volkswagen</button></p></td>
                    </tr>
                    <tr>
                      <td><p><button class="button" type="submit" name="make" value="Chevrolet" >Chevrolet</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Honda" >Honda</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Range Rover" >Range Rover</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Mitsubishi" >Mitsubishi</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Subaru" >Subaru</button></p></td>
                      <td><p><button class="button" type="submit" name="make" value="Volvo" >Volvo</button></p></td>
                    </tr>
                  </table>

                  </form>



          </div>





</div>

</body>
</html>

carcategory.html

    <!DOCTYPE html>

<html>

    <link href="../css/carcategory.css" rel="stylesheet">

    <div class="uppercontent">



        <a href="index" id="logolink">
            <img alt="AutoRIL" src="../img/logo_transparent.png" width="75" height="75">
        </a>

        <h2>Current category: ${categ}</h2>
        <hr>

    </div>


        <table><tr>




        % for a in mydata:

            % if loop.index % 3 == 0:

                </tr><tr><td>

                    <div class="card" style="margin-left: 125px;">
                        <img src="../img/cars/1.jpg" alt="Car" style="width:200px; height: 200px;">
                        <h1>${a[1]}</h1>
                        <p>${a[2]}</p>
                        <p class="price">EUR ${a[4]}</p>
                        <p><button>Check it out</button></p>
                    </div> 


                </td>


            % elif loop.index %3 != 0:


                <td>

                    <div class="card">
                        <img src="../img/cars/1.jpg" alt="Car" style="width:200px; height: 200px;">
                        <h1>${a[1]}</h1>
                        <p>${a[2]}</p>
                        <p class="price">EUR ${a[4]}</p>
                        <p><button>Check it out</button></p>
                    </div> 


                </td>

        % endif       


        % endfor


</html>

start.py:

    import cherrypy
import mysql.connector
from mysql.connector import errorcode
import os
from mako.template import Template
from mako.lookup import TemplateLookup


path = os.path.abspath(os.path.dirname(__file__))

lookup = TemplateLookup(directories=[os.path.join(path, 'html')])


mydb = mysql.connector.connect(
  host="localhost",
  user="root",
  password="luk610",
  database="siteril"
)



class MainPage(object):

    @cherrypy.expose
    def index(self):
        template = lookup.get_template('index.html')
        return template.render()

    index.exposed = True

    @cherrypy.expose
    def displaybycategory(self, category):
        template = lookup.get_template('carcategory.html')

        mycursor = mydb.cursor()

        payload = 'SELECT * FROM cars WHERE category=' + '"' + category + '"'

        mycursor.execute(payload)

        result = mycursor.fetchall()

        return template.render(mydata=result, categ=category)

    displaybycategory.exposed = True

    @cherrypy.expose
    def displaybymake(self, make):
        template = lookup.get_template('carmake.html')

        mycursor = mydb.cursor()

        payload = 'SELECT * FROM cars WHERE make=' + '"' + make + '"'

        mycursor.execute(payload)

        result = mycursor.fetchall()

        return template.render(mydata=result)

    displaybycategory.exposed = True

    @cherrypy.expose
    def about(self):
        template = lookup.get_template('about.html')
        return template.render()

    about.exposed = True

    @cherrypy.expose
    def contact(self):
        template = lookup.get_template('contact.html')
        return template.render()

    contact.exposed = True

if __name__ == '__main__':

    conf_path_root = os.path.dirname(os.path.abspath(__file__))
    conf_path = os.path.join(conf_path_root, "config.conf")
    cherrypy.config.update(conf_path)

    cherrypy.tree.mount(MainPage(), '/', config=conf_path)
    cherrypy.engine.start()
    cherrypy.engine.block()

This is where it should be something like: src="../img/cars/{a[0]}.jpg", where {a[0]} takes the car id

I apologise if I haven't included anything or if I didn't clarify the issue. I'm a complete beginner to this stuff and any help/advice would be greatly appreciated. Thanks!

Luca Dulgheru
  • 31
  • 4

3 Answers3

1

The only temporary solution I've found is to hardcode the picture selection through multiple if statements... (yeah, I know.. :D) like so:

                      % if a[0] == 1:
                        <img src="../img/cars/1.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 2:
                        <img src="../img/cars/2.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 3:
                        <img src="../img/cars/3.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 4:
                        <img src="../img/cars/4.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 5:
                        <img src="../img/cars/5.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 6:
                        <img src="../img/cars/6.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 7:
                        <img src="../img/cars/7.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 8:
                        <img src="../img/cars/8.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 9:
                        <img src="../img/cars/9.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 10:
                        <img src="../img/cars/10.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 11:
                        <img src="../img/cars/11.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 12:
                        <img src="../img/cars/12.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 13:
                        <img src="../img/cars/13.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 14:
                        <img src="../img/cars/14.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 15:
                        <img src="../img/cars/15.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 16:
                        <img src="../img/cars/16.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 17:
                        <img src="../img/cars/17.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 18:
                        <img src="../img/cars/18.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 19:
                        <img src="../img/cars/19.jpg" alt="Car" style="width:200px; height: 200px;">
                      % elif a[0] == 20:
                        <img src="../img/cars/20.jpg" alt="Car" style="width:200px; height: 200px;">
                        %endif

I know this is really bad, but I still cannot seem to find a way to make use of the variables in order to use them as attributes for the src.

Luca Dulgheru
  • 31
  • 4
1

I think you should try to use JavaScript as an alternative to your issue.

It's also strongly recommended to use the string concatenation operators (+, +=) instead of other methods to perform this.

Ṃųỻịgǻňạcểơửṩ
  • 2,517
  • 8
  • 22
  • 33
Oana Ciocan
  • 19
  • 3
0

The mako syntax for using variables within HTML is the following: <img src=${filename} />

Where the variable filename is either received from a template that includes this template and passes filename as a variable. Or set dynamically within the template, to run python code within the template use this: filename = "/var/www/myproject/path" + "resources"

EduardG
  • 1