Sign inSign up

kentut/web-presensi

By kentut

โ€ขUpdated 8 months ago

web presensi dengan secure login page, fitur : 1.verif captcha 2.Login NIP / NIS 3.Abs RFID card

Image
Security
0

304

kentut/web-presensi repository overview

โ Web Presensi Berbasis Docker

โ ๐Ÿ“Œ Deskripsi Project

Web Presensi adalah aplikasi presensi berbasis web yang dijalankan menggunakan Docker Compose sehingga dapat diakses dan dijalankan dengan mudah di berbagai perangkat.

Project ini terdiri dari tiga service utama:

  • Frontend (Web UI)
  • Backend (API โ€“ Flask)
  • Database (MySQL)

Seluruh service dijalankan secara terintegrasi menggunakan satu file docker-compose.yml.


โ ๐Ÿงฑ Arsitektur Sistem

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚   Browser    โ”‚
โ”‚   (User)     โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
       โ”‚ HTTP :3000
       โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ Frontend Container       โ”‚
โ”‚ Image:                   โ”‚
โ”‚ keandredev/presensi-     โ”‚
โ”‚ frontend:latest          โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
       โ”‚ HTTP API
       โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ Backend Container        โ”‚
โ”‚ Flask API                โ”‚
โ”‚ Image:                   โ”‚
โ”‚ keandredev/presensi-     โ”‚
โ”‚ backend:latest           โ”‚
โ”‚ Port: 5000               โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
       โ”‚ MySQL Connection
       โ–ผ
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ MySQL Container          โ”‚
โ”‚ Image: mysql:8.0         โ”‚
โ”‚ Port: 3306               โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

โ ๐Ÿ“ฆ Docker Image

Image aplikasi tersedia di Docker Hub:

  • Backend: keandredev/presensi-backend:latest
  • Frontend: keandredev/presensi-frontend:latest

โ โš™๏ธ Kebutuhan Sistem

  • Docker Engine / Docker Desktop
  • Docker Compose
  • Sistem Operasi: Windows / Linux / macOS

โ ๐Ÿ“„ Konfigurasi docker-compose.yml

services:
  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_DATABASE: sekolahh
      MYSQL_ROOT_PASSWORD: root
    ports:
      - "3308:3306"
    volumes:
      - ./backend/sekolahh.sql:/docker-entrypoint-initdb.d/01_sekolahh.sql
      - ./backend/updates.sql:/docker-entrypoint-initdb.d/02_updates.sql
      - mysql_data:/var/lib/mysql

  backend:
    image: keandredev/presensi-backend:latest
    restart: always
    ports:
      - "5001:5000"
    environment:
      MYSQL_HOST: db
      MYSQL_USER: root
      MYSQL_PASSWORD: root
      MYSQL_DB: sekolahh
      SECRET_KEY: supersecretkey
    depends_on:
      - db

  frontend:
    image: keandredev/presensi-frontend:latest
    restart: always
    ports:
      - "3000:3000"
    depends_on:
      - backend

volumes:
  mysql_data:

โ ๐Ÿš€ Cara Menjalankan Aplikasi

1๏ธโƒฃ Pastikan Docker & Docker Compose sudah terinstall

2๏ธโƒฃ Jalankan perintah berikut di folder project:

docker compose up -d

3๏ธโƒฃ Pastikan semua container berjalan:

docker ps

โ ๐ŸŒ Akses Aplikasi


โ ๐Ÿงช Catatan Pengujian

  • Database akan otomatis terisi dari file:

    • sekolahh.sql
    • updates.sql
  • Data database disimpan secara permanen menggunakan Docker Volume mysql_data


โ ๐Ÿ“š Catatan Penting

  • Docker Hub digunakan sebagai penyimpanan image, bukan sebagai hosting
  • Aplikasi dapat dijalankan di komputer mana pun yang memiliki Docker

โ ๐Ÿ‘จโ€๐ŸŽ“ Informasi Project

  • Nama Project: Web Presensi-keandre
  • Build-with: Docker, Flask, MySQL, Frontend Web
  • Tugas / Project : KJ XI TJKT-A 5 Februari 2026

Tag summary

Content type

Image

Digest

sha256:fdc08b0d9โ€ฆ

Size

137.7 MB

Last updated

8 months ago

docker pull kentut/web-presensi:backend