100 lines
2.5 KiB
Markdown
100 lines
2.5 KiB
Markdown
# siteviewcounter
|
|
|
|
[](https://drone.deadbeef.codes/steven/siteviewcounter)
|
|
|
|
A simple view counter for a website
|
|
|
|
### Database initialization
|
|
|
|
The following SQL will initialize the database for this application. No automigrate / initialization is done upon first running the application, so this must be ran by an administrator.
|
|
|
|
```sql
|
|
SET NAMES utf8;
|
|
SET time_zone = '+00:00';
|
|
SET foreign_key_checks = 0;
|
|
|
|
CREATE DATABASE `counter` /*!40100 DEFAULT CHARACTER SET latin1 */;
|
|
USE `counter`;
|
|
|
|
CREATE TABLE `visit` (
|
|
`id` int(11) NOT NULL AUTO_INCREMENT,
|
|
`ip_address` varchar(15) NOT NULL,
|
|
`visits` int(11) NOT NULL,
|
|
`last_visited` datetime NOT NULL,
|
|
PRIMARY KEY (`id`)
|
|
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
|
|
|
|
```
|
|
|
|
### Build Container
|
|
|
|
Disclaimer! If you use this, you'll need to build the container yourself. My registry is used for my internal infrastructure only and is not publicly available.
|
|
|
|
### Example docker-compose.yml
|
|
|
|
Create a docker-compose file
|
|
|
|
```yaml
|
|
|
|
version: '3.7'
|
|
|
|
services:
|
|
|
|
counter:
|
|
image: registry.deadbeef.codes/siteviewcounter:latest
|
|
restart: always
|
|
expose:
|
|
- "8080"
|
|
environment:
|
|
- dbname=counter
|
|
- dbhostname=counter-db
|
|
- dbusername=root
|
|
- dbpassword=CHANGEME
|
|
- timezone=America/Edmonton
|
|
|
|
|
|
counter-db:
|
|
image: mariadb:10
|
|
restart: always
|
|
expose:
|
|
- "3306"
|
|
volumes:
|
|
- /data/counter-db:/var/lib/mysql
|
|
environment:
|
|
- MYSQL_RANDOM_ROOT_PASSWORD=yes
|
|
- MYSQL_DATABASE=counter
|
|
- TZ=America/Edmonton
|
|
|
|
```
|
|
|
|
### Example front end usage
|
|
|
|
You can pretty much implement this in your front end however you want, you just need to make a GET request to whatever endpoint the counter container is running at. This is how I use it though...
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<script>
|
|
var counterReq = new XMLHttpRequest();
|
|
counterReq.onreadystatechange = function() {
|
|
console.log("counterReq ready state is " + this.readyState);
|
|
if (this.readyState == 4) {
|
|
console.log("counterReq status is " + this.status);
|
|
if (this.status == 200) {
|
|
document.getElementById("counter").innerHTML = this.responseText + " unique visitors"
|
|
} else { // failed to load
|
|
console.log("failed to load counter module")
|
|
}
|
|
}
|
|
}
|
|
counterReq.open("GET", "https://counter.example.com", true);
|
|
counterReq.send();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="counter"></div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|