daveknights/used-cars.go

## used-cars.go
package main

import (
    "regexp"
    "strings"
    "strconv"
    "github.com/gin-gonic/gin"
    "net/http"
    "database/sql"
    _ "github.com/go-sql-driver/mysql"
)

const pageLimit int = 20
const imageRoot string = "https://thumb.vcars.co.uk/"

type CarSpecs struct {
    RegYear string
    Mileage string
    Fueltype string
    Transmission string
}

type Car struct {
    Make string
    Model string
    TableName string
    ImageSrc string
    Price string
    Reg string
    Specs CarSpecs
}

type CarList struct {
    Cars []Car
}

func commaFormatNumber (numValue string) string {
    if len(numValue) > 3 {
        regExPattern := regexp.MustCompile(`\d{3}$`)
        firstDigits := regExPattern.Split(numValue, -1)
        lastThreeDigits := regExPattern.FindAllString(numValue, -1)

        return firstDigits[0]+","+lastThreeDigits[0]
    } else {
        return numValue
    }
}

func main() {
    i := 0
    var carList CarList

    db, err := sql.Open("mysql", "vcars:phpdev0@tcp(127.0.0.1:3306)/pluto")

    if err != nil {
        panic(err.Error())
    }

    results, err := db.Query("SELECT make, model, tablename, thimage, price, registration, regyear, mileage, fueltype, transmission FROM allcarslive LIMIT " + strconv.Itoa(pageLimit))
    if err != nil {
        panic(err.Error())
    }

    carList.Cars = make([]Car, pageLimit)

    for results.Next() {
        var car Car

        err = results.Scan(&car.Make, &car.Model,  &car.TableName, &car.ImageSrc, &car.Price, &car.Reg, &car.Specs.RegYear, &car.Specs.Mileage, &car.Specs.Fueltype, &car.Specs.Transmission)
        if err != nil {
            panic(err.Error())
        }

        imageSrc := strings.Split(car.ImageSrc, ",")

        carList.Cars[i] = Car {
            Make: car.Make,
            Model: car.Model,
            Price: commaFormatNumber(car.Price),
            Reg: car.Reg,
            ImageSrc: imageRoot + car.TableName + "/" + imageSrc[0],
            Specs: CarSpecs {
                RegYear: car.Specs.RegYear,
                Fueltype: car.Specs.Fueltype,
                Transmission: car.Specs.Transmission,
                Mileage: commaFormatNumber(car.Specs.Mileage),
            },
        }

        i++
    }

    defer db.Close()

	router := gin.Default()
    router.LoadHTMLGlob("templates/*")

    router.GET("/used-cars", func(c *gin.Context) {
	c.HTML(http.StatusOK, "used-cars.tmpl", gin.H{
  		"title": "Used Cars",
		"cars": carList.Cars,
		})
	})

	router.Run(":8090")
}

## used-cars.tmpl
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Used Cars</title>
    <style media="screen">

        ...

        // This gices you a responsive layout without the need for media queries
        .car-list {
            align-items: center;
            display: grid;
            grid-gap: 20px;
            grid-template-columns: repeat(auto-fit, minmax(365px, 1fr));

        }

        ...

    </style>
</head>
<body>
    <header>
        <h1>{{ .title }}</h1>
    </header>
    <main>
        <ul class="car-list">
            {{range .cars}}
                <li class="car-item">
                    <div class="title">
                        <h2 class="make">{{ .Make }}</h2>
                        <h3 class="model">{{ .Model }}</h3>
                    </div>
                    <img src="{{ .ImageSrc }}" alt="{{ .Make }} {{ .Model }}">
                    <strong class="price">£{{ .Price }}</strong>
                    <ul class="specs">
                        <li>{{ .Specs.RegYear }}</li>
                        <li class="separator">|</li>
                        <li>{{ .Specs.Mileage }} miles</li>
                        <li class="separator">|</li>
                        <li>{{ .Specs.Fueltype }}</li>
                        <li class="separator">|</li>
                        <li>{{ .Specs.Transmission }}</li>
                    </ul>
                    <p class="reg">Reg: <strong>{{ .Reg }}</strong></p>
                </li>
            {{end}}
        </ul>
    </main>
</body>
</html>
	package main

	import (
	"regexp"
	"strings"
	"strconv"
	"github.com/gin-gonic/gin"
	"net/http"
	"database/sql"
	_ "github.com/go-sql-driver/mysql"
	)

	const pageLimit int = 20
	const imageRoot string = "https://thumb.vcars.co.uk/"

	type CarSpecs struct {
	RegYear string
	Mileage string
	Fueltype string
	Transmission string
	}

	type Car struct {
	Make string
	Model string
	TableName string
	ImageSrc string
	Price string
	Reg string
	Specs CarSpecs
	}

	type CarList struct {
	Cars []Car
	}

	func commaFormatNumber (numValue string) string {
	if len(numValue) > 3 {
	regExPattern := regexp.MustCompile(`\d{3}$`)
	firstDigits := regExPattern.Split(numValue, -1)
	lastThreeDigits := regExPattern.FindAllString(numValue, -1)

	return firstDigits[0]+","+lastThreeDigits[0]
	} else {
	return numValue
	}
	}

	func main() {
	i := 0
	var carList CarList

	db, err := sql.Open("mysql", "vcars:phpdev0@tcp(127.0.0.1:3306)/pluto")

	if err != nil {
	panic(err.Error())
	}

	results, err := db.Query("SELECT make, model, tablename, thimage, price, registration, regyear, mileage, fueltype, transmission FROM allcarslive LIMIT " + strconv.Itoa(pageLimit))
	if err != nil {
	panic(err.Error())
	}

	carList.Cars = make([]Car, pageLimit)

	for results.Next() {
	var car Car

	err = results.Scan(&car.Make, &car.Model, &car.TableName, &car.ImageSrc, &car.Price, &car.Reg, &car.Specs.RegYear, &car.Specs.Mileage, &car.Specs.Fueltype, &car.Specs.Transmission)
	if err != nil {
	panic(err.Error())
	}

	imageSrc := strings.Split(car.ImageSrc, ",")

	carList.Cars[i] = Car {
	Make: car.Make,
	Model: car.Model,
	Price: commaFormatNumber(car.Price),
	Reg: car.Reg,
	ImageSrc: imageRoot + car.TableName + "/" + imageSrc[0],
	Specs: CarSpecs {
	RegYear: car.Specs.RegYear,
	Fueltype: car.Specs.Fueltype,
	Transmission: car.Specs.Transmission,
	Mileage: commaFormatNumber(car.Specs.Mileage),
	},
	}

	i++
	}

	defer db.Close()

	router := gin.Default()
	router.LoadHTMLGlob("templates/*")

	router.GET("/used-cars", func(c *gin.Context) {
	c.HTML(http.StatusOK, "used-cars.tmpl", gin.H{
	"title": "Used Cars",
	"cars": carList.Cars,
	})
	})

	router.Run(":8090")
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Used Cars</title>
	<style media="screen">

	...

	// This gices you a responsive layout without the need for media queries
	.car-list {
	align-items: center;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(365px, 1fr));

	}

	...

	</style>
	</head>
	<body>
	<header>
	<h1>{{ .title }}</h1>
	</header>
	<main>
	<ul class="car-list">
	{{range .cars}}
	<li class="car-item">
	<div class="title">
	<h2 class="make">{{ .Make }}</h2>
	<h3 class="model">{{ .Model }}</h3>
	</div>
	<img src="{{ .ImageSrc }}" alt="{{ .Make }} {{ .Model }}">
	<strong class="price">£{{ .Price }}</strong>
	<ul class="specs">
	<li>{{ .Specs.RegYear }}</li>
	<li class="separator">\|</li>
	<li>{{ .Specs.Mileage }} miles</li>
	<li class="separator">\|</li>
	<li>{{ .Specs.Fueltype }}</li>
	<li class="separator">\|</li>
	<li>{{ .Specs.Transmission }}</li>
	</ul>
	<p class="reg">Reg: <strong>{{ .Reg }}</strong></p>
	</li>
	{{end}}
	</ul>
	</main>
	</body>
	</html>