Tentu! Sobat dapat menambahkan file style.css
untuk memberikan gaya pada halaman HTML Sobat. Berikut adalah langkah-langkah
untuk menambahkan file CSS ke proyek Sobat:
Baca juga: LOGIN DENGAN PYTHON FLASK TANPA MySQL??? Yuk simak caranya untuk pemula!!!
1. Buat Folder static
dan File style.css
Buat folder static di
dalam direktori proyek Anda dan tambahkan file style.css di dalamnya. Struktur proyek Anda sekarang akan
terlihat seperti ini:
my_flask_app/
├── app.py
├── templates/
│ ├── login.html
│ └── home.html
└── static/
└── style.css
2. Tambahkan CSS ke style.css
Tambahkan gaya berikut ke file static/style.css:
body {
font-family: Arial, sans-serif;
background-color:
#f4f4f4;
margin: 0;
padding:
0;
display:
flex;
justify-content: center;
align-items: center;
height:
100vh;
}
.container {
background: #fff;
padding:
20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width:
300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
form label {
display:
block;
margin:
10px 0 5px;
}
form input {
width:
calc(100% - 22px);
padding:
10px;
margin-bottom:
10px;
border:
1px solid #ccc;
border-radius: 3px;
}
form button {
padding:
10px 20px;
background: #5cb85c;
color:
#fff;
border:
none;
border-radius: 3px;
cursor:
pointer;
}
form button:hover {
background: #4cae4c;
}
.messages {
color:
red;
margin-bottom: 15px;
}
a {
color:
#5cb85c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
3. Update Template HTML untuk Menggunakan CSS
Ubah file templates/login.html
dan templates/home.html
untuk menyertakan CSS.
template/login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Login</title>
<link
rel="stylesheet" type="text/css" href="{{
url_for('static', filename='style.css') }}">
</head>
<body>
<div
class="container">
<h1>Login</h1>
<form method="POST">
<label for="username">Username:</label>
<input type="text" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" name="password"
required>
<br>
<button type="submit">Login</button>
</form>
<div class="messages">
{%
with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{%
endwith %}
</div>
</div>
</body>
</html>
templates/home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Home</title>
<link
rel="stylesheet" type="text/css" href="{{
url_for('static', filename='style.css') }}">
</head>
<body>
<div
class="container">
<h1>Welcome, {{ username }}!</h1>
<a
href="{{ url_for('logout') }}">Logout</a>
</div>
</body>
</html>
4. Jalankan Ulang Aplikasi
Jalankan kembali aplikasi Flask dengan perintah berikut:
python app.py
Sekarang, ketika Anda
mengunjungi halaman login di http://127.0.0.1:5000/login,
halaman tersebut akan memiliki gaya yang lebih baik dengan menggunakan CSS yang
telah Anda tambahkan.
Komentar
Posting Komentar