Embedded Files
PREPARATION
PREPARATION
CREATE DATABASE IF NOT EXISTS `YOUR_DATABASE` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
USE `YOUR_DATABASE`;
-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 17 Mar 2022 pada 06.29
-- Versi server: 10.1.38-MariaDB
-- Versi PHP: 7.3.2
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Struktur dari tabel `customer`
--
CREATE TABLE IF NOT EXISTS `customer` (
`id` int(11) NOT NULL,
`nama` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`phone` varchar(20) NOT NULL,
`tipe` varchar(255) NOT NULL,
`checkin` date NOT NULL,
`checkout` date NOT NULL,
`jml` int(11) NOT NULL,
`ket` varchar(255) NOT NULL,
`status` enum('Konfirmasi','Booking','Leave') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data untuk tabel `customer`
--
INSERT INTO `customer` (`id`, `nama`, `email`, `phone`, `tipe`, `checkin`, `checkout`, `jml`, `ket`, `status`) VALUES
(1, 'Junadi', 'junadi@gmail.com', '123456789', 'Single Room', '2022-03-14', '2022-03-15', 2, 'Pesan Kamar 2 untuk anak', 'Leave'),
(2, 'Akmal', 'akmal@gmail.com', '5697987098098908', 'Superior Room', '2022-03-14', '2022-03-15', 1, 'tes', 'Booking'),
(4, 'ahmad syakir', 'ahmadsyakir@gmail.com', '987987879879', 'Superior Room', '2022-03-14', '2022-03-16', 1, 'lagi ngetes', 'Leave'),
(8, 'Muhadi', 'muhadi@gmail.com', '235456846222', 'Single Room', '2022-03-16', '2022-03-17', 1, 'tes', 'Konfirmasi'),
(9, 'Nur Faizah', 'faizah@gmail.com', '124267639879', 'Deluxe Room', '2022-03-17', '2022-03-18', 1, 'tes', 'Konfirmasi'),
(10, 'Tri Althafunnisa', 'tri@gmail.com', '98756758767343', 'Deluxe Room', '2022-03-17', '2022-03-18', 1, 'tes', 'Konfirmasi'),
(11, 'Hamriani', 'hamriani@gmail.com', '987987987987', 'Deluxe Room', '2022-03-16', '2022-03-17', 2, 'tes', 'Leave'),
(12, 'Sarnah', 'sarnah@gmail.com', '5454354356756', 'Deluxe Room', '2022-03-16', '2022-03-17', 2, 'tes', 'Konfirmasi'),
(13, 'Muh. Kasnir', 'kasnir@gmail.com', '987987897686', 'Single Room', '2022-03-16', '2022-03-17', 1, 'tes', 'Leave'),
(14, 'Maryaeni', 'eni@gmail.com', '54543543543', 'Deluxe Room', '2022-03-18', '2022-03-19', 1, 'tes', 'Booking'),
(15, 'Nir Alam', 'niralam@gmail.com', '786876786876', 'Deluxe Room', '2022-03-16', '2022-03-17', 1, 'tes', 'Leave'),
(16, 'Asni Waty', 'asniwaty@gmail.com', '76987897875657', 'Superior Room', '2022-03-19', '2022-03-20', 1, 'tes', 'Konfirmasi'),
(17, 'Amtsyir', 'anci@gmail.com', '4554376767656', 'Junior Suite Room', '2022-03-16', '2022-03-23', 1, 'lagi', 'Booking'),
(18, 'Jum Furtati', 'jum@gmail.com', '9878979856734232', 'Deluxe Room', '2022-03-16', '2022-03-20', 2, 'tes', 'Booking'),
(19, 'Rajul Shah', 'rajul@gmail.com', '76876876876', 'Deluxe Room', '2022-03-16', '2022-03-19', 2, 'tes', 'Booking');
--
-- Indexes for dumped tables
--
--
-- Indeks untuk tabel `customer`
--
ALTER TABLE `customer`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT untuk tabel yang dibuang
--
--
-- AUTO_INCREMENT untuk tabel `customer`
--
ALTER TABLE `customer`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=20;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Open your replit account: https://replit.com/~
Files Structure
Upload img folder in static folder:
Copy and paste the following script in main.py
Copy and paste the following script in main.py
from flask import Flask, render_template, request, redirect, flash, url_for, session
import mysql.connector
from werkzeug.security import check_password_hash, generate_password_hash
app = Flask(__name__)
app.secret_key = "asdfghjkl12345fdsa_fdsakld8rweodfds"
db = mysql.connector.connect(
host="remotemysql.com",
user="",
passwd="",
database=""
)
cursor = db.cursor()
if db.is_connected():
print("Berhasil terhubung ke database")
if __name__ == '__main__':
# Run the Flask app
#3306
app.run(host='0.0.0.0',debug=True, port=3306)
Install this pip in the shell:
pip install mysql-connector
Coding
Coding
1. base.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>My App - {% block title %} {% endblock %}</title>
<style type="text/css">
.text-justify {
text-align: justify;
}
</style>
</head>
<body>
<!-- start navbar top -->
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
<div class="container">
<a class="navbar-brand" href="#">HOTEL CODING</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kamar">Kamar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fasilitas">Fasilitas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#booking">Booking</a>
</li>
</ul>
</div>
</nav>
<!-- end navbar top -->
<!-- start content -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
{% block content %}
{% endblock %}
</div>
<!-- end content -->
<div class="container">
<div class="row">
<div class="col mt-5">
<nav class="navbar navbar-light bg-light px-3 fixed-bottom">
<marquee> | HOTEL CODING | Address : Virtual Street | Phone : 123456789 | email:codingforyou@gmail.com</marquee>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
2. index.html
{% extends 'base.html' %}
{% block title %} Menu Utama {% endblock %}
{% block content %}
<!-- menu home -->
<div class="container" id="home">
<div class="row">
<div class="col mt-5">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ url_for('static', filename='img/s1.jpg')}}" class="d-block w-100" alt="..." height="300">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{{ url_for('static', filename='img/s2.jpg')}}" class="d-block w-100" alt="..." height="300">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{{ url_for('static', filename='img/s3.jpg')}}" class="d-block w-100" alt="..." height="300">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!-- end menu home -->
<!-- start tentang kami -->
<div class="container">
<div class="row">
<div class="col text-center mt-5">
<h3>Tentang Kami</h3>
</div>
</div>
<div class="row">
<div class="col text-justify">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab quaerat obcaecati neque eligendi voluptatum voluptatem laudantium perspiciatis in! Incidunt mollitia quasi cupiditate quae itaque voluptatem placeat explicabo aspernatur magnam maiores. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit neque enim ipsa consectetur laboriosam, quam eveniet? Sit cupiditate eveniet aliquid ea architecto porro consectetur possimus quae doloribus at, illum eligendi!</p>
</div>
</div>
</div>
<!-- end tentang kami -->
<!-- start kamar -->
<div class="container" id="kamar">
<div class="row">
<div class="col text-center mb-3">
<h3> Type Kamar</h3>
</div>
</div>
<div class="row">
<!-- start gambar kamar 1 baris 1 -->
<div class="col-md">
<div class="card">
<img src="{{ url_for('static', filename='img/k1.jpg')}}" class="card-img-top" alt="...">
<h4><div class="card-header">Tipe Superior
<span class="float-end">Rp. 320.000.00,-</span>
</div></h4>
<div class="card-body">
<p class="card-text">Kamar berukuran luas 32m<sup>2</sup></p>
<p class="card-text">Kamar mandi shower</p>
<p class="card-text">Cofee Maker</p>
<p class="card-text">AC</p>
<p class="card-text">LED TV 32 inch</p>
<div class="d-grid gap-2">
<a href="#booking" class="btn btn-outline-info">Booking Now</a></div>
</div>
</div>
</div>
<!-- end gambar kamar 1 baris 1 -->
<!-- start gambar kamar 2 baris 1 -->
<div class="col-md">
<div class="card">
<img src="{{ url_for('static', filename='img/k2.jpg')}}" class="card-img-top" alt="...">
<h4><div class="card-header">Deluxe Room
<span class="float-end">Rp. 220.000.00,-</span>
</div></h4>
<div class="card-body">
<p class="card-text">Kamar berukuran luas 32m<sup>2</sup></p>
<p class="card-text">Kamar mandi shower</p>
<p class="card-text">Cofee Maker</p>
<p class="card-text">AC</p>
<p class="card-text">LED TV 32 inch</p>
<div class="d-grid gap-2">
<a href="#booking" class="btn btn-outline-info">Booking Now</a></div>
</div>
</div>
</div>
<!-- end gambar kamar 2 baris 1 -->
</div>
<div class="row">
<!-- start gambar kamar 1 baris 2 -->
<div class="col-md mb-3">
<div class="card">
<img src="{{ url_for('static', filename='img/k1.jpg')}}" class="card-img-top" alt="...">
<h4><div class="card-header">Tipe Superior
<span class="float-end">Rp. 320.000.00,-</span>
</div></h4>
<div class="card-body">
<p class="card-text">Kamar berukuran luas 32m<sup>2</sup></p>
<p class="card-text">Kamar mandi shower</p>
<p class="card-text">Cofee Maker</p>
<p class="card-text">AC</p>
<p class="card-text">LED TV 32 inch</p>
<div class="d-grid gap-2">
<a href="#booking" class="btn btn-outline-info">Booking Now</a></div>
</div>
</div>
</div>
<!-- end gambar kamar 1 baris 2 -->
<!-- start gambar kamar 2 baris 2 -->
<div class="col-md mb-5">
<div class="card">
<img src="{{ url_for('static', filename='img/k2.jpg')}}" class="card-img-top" alt="...">
<h4><div class="card-header">Deluxe Room
<span class="float-end">Rp. 220.000.00,-</span>
</div></h4>
<div class="card-body">
<p class="card-text">Kamar berukuran luas 32m<sup>2</sup></p>
<p class="card-text">Kamar mandi shower</p>
<p class="card-text">Cofee Maker</p>
<p class="card-text">AC</p>
<p class="card-text">LED TV 32 inch</p>
<div class="d-grid gap-2">
<a href="#booking" class="btn btn-outline-info">Booking Now</a></div>
</div>
</div>
</div>
<!-- end gambar kamar 2 baris 2 -->
</div>
</div>
<!-- end kamar -->
<!-- start fasilitas -->
<div class="container" id="fasilitas">
<div class="row">
<div class="col text-center mb-3">
<h3>Fasilitas</h3>
</div>
</div>
<div class="row">
<!-- start gambar fasilitas 1 baris 1 -->
<div class="col-md">
<div class="card">
<img src="{{ url_for('static', filename='img/f4.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ruang Rapat</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- end gambar fasilitas 1 baris 1 -->
<!-- start gambar fasilitas 2 baris 1 -->
<div class="col-md">
<div class="card">
<img src="{{ url_for('static', filename='img/f5.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Kolam Renang</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- end gambar fasilitas 2 baris 1 -->
<!-- start gambar fasilitas 3 baris 1 -->
<div class="col-md mb-3">
<div class="card">
<img src="{{ url_for('static', filename='img/f6.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Gym</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- end gambar fasilitas 3 baris 1 -->
</div>
<div class="row">
<!-- start gambar fasilitas 1 baris 1 -->
<div class="col-md">
<div class="card">
<img src="{{ url_for('static', filename='img/f1.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Lobby</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- end gambar fasilitas 1 baris 1 -->
<!-- start gambar fasilitas 2 baris 1 -->
<div class="col-md">
<div class="card">
<img src="{{ url_for('static', filename='img/f2.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Tempat Bermain Anak</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- end gambar fasilitas 2 baris 1 -->
<!-- start gambar fasilitas 3 baris 1 -->
<div class="col-md mb-5">
<div class="card">
<img src="{{ url_for('static', filename='img/f3.jpg')}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Spa</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<!-- end gambar fasilitas 3 baris 1 -->
</div>
</div>
<!-- end fasilitas -->
<!-- start booking kamar -->
<div class="container" id="booking">
<div class="row">
<div class="col text-center mb-3">
<h4>Form Booking Room</h4>
</div>
</div>
<div class="row">
<div class="col">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Terima Kasih</strong> {{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
</div>
<div class="row">
<!-- start ini alamat hotel -->
<div class="col-lg-4">
<div class="card text-white bg-secondary">
<div class="card-body">
<div class="card-title text-center"><h3>Contact Us</h3></div>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><h3>My Office</h3></li>
<li class="list-group-item">Virtual Street</li>
<li class="list-group-item">Jakarta</li>
<li class="list-group-item">Phone: 123456789</li>
<li class="list-group-item">email: codingforyou@gmail.com</li>
</ul>
</div>
<!-- end ini alamat hotel -->
<!-- start Form Pemesanan Kamar -->
<div class="col-lg-4">
<form action="/#booking" method="post">
<div class="mb-3">
<label for="nama" class="form-label">Nama Pemesan</label>
<input type="text" class="form-control" id="nama" placeholder="Masukkan Nama Anda" name="nama" autocomplete="off" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email Anda" name="email" autocomplete="off" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">No. Handphone</label>
<input type="text" class="form-control" id="phone" placeholder="Nomor HP Anda" name="phone" autocomplete="off" required>
</div>
<div class="mb-3">
<label for="ket" class="form-label">Keterangan</label>
<textarea class="form-control" id="ket" rows="3" name="ket"></textarea>
</div>
</div>
<div class="col-lg-4">
<label for="tipe" class="form-label">Type Kamar</label>
<select class="form-select" aria-label="Default select example" name="tipe">
<option value=""></option>
<option value="Single Room">Single Room</option>
<option value="Superior Room">Superior Room</option>
<option value="Deluxe Room">Deluxe Room</option>
<option value="Junior Suite Room">Junior Suite Room</option>
</select>
<div class="mb-3">
<label for="checkin" class="form-label">Tanggal Check In</label>
<input type="date" class="form-control" id="checkin" name="checkin" required>
</div>
<div class="mb-3">
<label for="checkout" class="form-label">Tanggal Check Out</label>
<input type="date" class="form-control" id="checkout" name="checkout" required>
</div>
<div class="mb-3">
<label for="jml" class="form-label">Jumlah Kamar</label>
<input type="number" class="form-control" id="jml" name="jml" required>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-success btn-lg btn-block" onclick="confirm('Anda Yakin')">Konfirmasi Pemesanan</button></div>
</div>
</form>
<!-- end Form Pemesanan Kamar -->
</div>
</div>
<!-- end booking kamar -->
{% endblock %}
3. Main route
@app.route('/')
def home():
return render_template('index.html')
#proses insert into
@app.route('/', methods=['POST'])
def customerinsert():
if request.method == 'POST':
nama = request.form['nama']
email = request.form['email']
phone = request.form['phone']
tipe = request.form['tipe']
checkin = request.form['checkin']
checkout = request.form['checkout']
jml = request.form['jml']
ket = request.form['ket']
##cur = mysql.connection.cursor()
#cur = db.cursor()
cur.execute("INSERT INTO customer (nama, email, phone, tipe, checkin, checkout, jml, ket) VALUES (%s, %s, %s, %s, %s, %s, %s, %s)", (nama, email, phone, tipe, checkin, checkout, jml, ket))
db.commit()
flash("Data Berhasil di kirim")
return redirect(url_for('home'))
4. admin.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- data tables -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#datacustomer').DataTable();
} );
</script>
<title>My App - Menu Admin</title>
<style type="text/css">
.text-justify {
text-align: justify;
}
</style>
</head>
<body>
<!-- start navbar top -->
<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 fixed-top">
<div class="container">
<a class="navbar-brand" href="#">ADMIN HOTEL CODING</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#home">Data Customer</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#kamar">Data Kamar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#fasilitas">Data Fasilitas</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Admin</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Log out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- end navbar top -->
<!-- start content -->
<div class="container">
<div class="row">
<div class="col text-center mt-5">
<h2>Data Customer</h2>
</div>
</div>
<div class="row">
<div class="col">
<!-- pesan flash -->
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>Proses Selesai.</strong> {{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
{% endwith %}
</div>
</div>
<div class="row">
<div class="col">
<table class="table" id="datacustomer">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama Pemesan</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">tipe</th>
<th scope="col">checkout</th>
<th scope="col">jml</th>
<th scope="col" style="text-align: center;">AKSI</th>
<th scope="col" style="text-align: center; color: red;">STATUS</th>
</tr>
</thead>
<tbody>
{% for row in datapemesan %}
<tr>
<th scope="row">{{ loop.index }} </th>
<td>{{row[1]}}</td>
<td>{{row[2]}}</td>
<td>{{row[3]}}</td>
<td>{{row[4]}}</td>
<td>{{row[6]}}</td>
<td>{{row[7]}}</td>
<td>
<a href="" type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#detailModal{{row[0]}}">Detail</a>
<a href="" type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#updateModal{{row[0]}}">Update</a>
<a href="{{ url_for('customerhapus', id=row[0])}}" type="button" class="btn btn-outline-danger" onclick="confirm('Anda Yakin ?');">Delete</a>
</td>
<td>
{% if ( row[9] == "Booking" ): %}
<a href="" type="button" class="btn btn-success">{{row[9]}}</a>
{% elif ( row[9] == "Leave" ): %}
<a href="" type="button" class="btn btn-danger">{{row[9]}}</a>
{% else :%}
<a href="" type="button" class="btn btn-warning">{{row[9]}}</a>
{% endif %}
</td>
</tr>
{% include "customerdetail.html" %}
{% include "customerupdate.html" %}
{% endfor %}
</tbody>
</table>
<p><strong style="color:red;">Perhatian !!!</strong></br>
Tekan tombol <strong style="color:green;">UPDATE</strong> untuk melakukan perubahan <strong style="color: goldenrod;">STATUS</strong></p>
</div>
</div>
</div>
<!-- end content -->
<div class="container">
<div class="row">
<div class="col mt-5">
<nav class="navbar navbar-light bg-light px-3 fixed-bottom">
<marquee> | HOTEL CODING | Address : Virtual Street | Phone : 123456789 | email:codingforyou@gmail.com</marquee>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
admin route
@app.route('/admin')
def customertampildata():
#cur = mysql.connection.cursor()
#cur = db.cursor()
cur.execute("SELECT * FROM customer ORDER BY id DESC")
datatampil = cur.fetchall()
cur.close()
return render_template('admin.html', datapemesan=datatampil)
5. customerupdate
@app.route('/customerupdate', methods=['POST'])
def customerupdate():
if request.method == 'POST':
id = request.form['id']
nama = request.form['nama']
email = request.form['email']
phone = request.form['phone']
tipe = request.form['tipe']
checkin = request.form['checkin']
checkout = request.form['checkout']
jml = request.form['jml']
status = request.form['status']
#cur = mysql.connection.cursor()
cur.execute("UPDATE customer SET nama=%s, email=%s, phone=%s, tipe=%s, checkin=%s, checkout=%s, jml=%s, status=%s WHERE id=%s", (nama, email, phone, tipe, checkin, checkout, jml, status, id))
db.commit()
flash("Data Berhasil di Update")
return redirect(url_for('customertampildata'))
customerupdate.html
<!-- Modal -->
<div class="modal fade" id="updateModal{{row[0]}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<form action="{{ url_for('customerupdate')}}" method="post">
<div class="mb-3">
<label for="nama" class="form-label">Nama Pemesan</label>
<input type="hidden" class="form-control" id="id" name="id" value="{{ row[0] }}">
<input type="text" class="form-control" id="nama" placeholder="Masukkan Nama Anda" name="nama" value="{{ row[1] }}" autocomplete="off" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email Anda" name="email" value="{{ row[2] }}" autocomplete="off" required>
</div>
<div class="mb-3">
<label for="phone" class="form-label">No. Handphone</label>
<input type="text" class="form-control" id="phone" placeholder="Nomor HP Anda" name="phone" value="{{ row[3] }}"autocomplete="off" required>
</div>
<div class="mb-3">
<label for="status" class="form-label">Status</label>
<select class="form-select" aria-label="Default select example" name="status">
<option value="{{ row[9] }}">{{ row[9] }}</option>
<option value="Konfirmasi">Konfirmasi</option>
<option value="Booking">Booking</option>
<option value="Leave">Leave</option>
</select>
</div>
</div>
<div class="col">
<div class="mb-3">
<label for="tipe" class="form-label">Type Kamar</label>
<select class="form-select" aria-label="Default select example" name="tipe">
<option value="{{ row[4] }}">{{ row[4] }}</option>
<option value="Single Room">Single Room</option>
<option value="Superior Room">Superior Room</option>
<option value="Deluxe Room">Deluxe Room</option>
<option value="Junior Suite Room">Junior Suite Room</option>
</select>
</div>
<div class="mb-3">
<label for="checkin" class="form-label">Tanggal Check In</label>
<input type="date" class="form-control" id="checkin" name="checkin" value="{{ row[5] }}" required>
</div>
<div class="mb-3">
<label for="checkout" class="form-label">Tanggal Check Out</label>
<input type="date" class="form-control" id="checkout" name="checkout" value="{{ row[6] }}" required>
</div>
<div class="mb-3">
<label for="jml" class="form-label">Jumlah Kamar</label>
<input type="number" class="form-control" id="jml" name="jml" value="{{ row[7] }}" required>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" onclick="confirm('Anda Yakin');">UPDATE</button>
</div>
</form>
</div>
</div>
</div>
6. customerdetail
<!-- Modal -->
<div class="modal fade" id="detailModal{{row[0]}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2>Customer ID : {{ row[0] }}</h2>
<hr>
<pre>
Nama Customer : {{ row [1] }}
Email : {{ row [2] }}
Phone : {{ row [3] }}
Tipe Kamar : {{ row [4] }}
Tgl. Checkin : {{ row [5] }}
Tgl. Checkout : {{ row [6] }}
Jumlah Kamar : {{ row [7] }}
Keterangan : {{ row [8] }}
Status : {{ row [9] }}
</pre>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
7. Customer delete
# delete data
@app.route('/customerhapus/<int:id>', methods=["GET"])
def customerhapus(id):
#cur = mysql.connection.cursor()
#cur = db.cursor()
cur.execute("DELETE FROM customer WHERE id=%s", (id,))
db.commit()
flash("data Berhasil di Hapus")
return redirect( url_for('customertampildata'))
Page updated
Google Sites
Report abuse