1. Buat Folder baru dalam project masing masing dengan nama 'aplikasiku'.
2. Buka sublime text dan buka project masing masing.
3. buat file baru dengan nama index.php (dalam folder aplikasiku)
tulis kode berikut dalam index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 15px;
}
.frame {
border: 2px solid #3498db;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.button-container {
text-align: center;
padding: 20px;
}
.app-button {
display: inline-block;
padding: 15px 30px;
margin: 15px;
font-size: 18px;
text-align: center;
text-decoration: none;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.app-button:hover {
background-color: #2980b9;
}
footer {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Aplikasiku</h1>
</header>
<div class="frame">
<br>
<center>Silakan pilih apa yang ingin kamu kerjakan!</center><br>
<div class="button-container">
<a href="form.php" class="app-button">Luas Segitiga</a>
<a href="#" class="app-button">Luas Lingkaran </a>
<a href="#" class="app-button">Luas Ketupat</a>
<br>
<a href="#" class="app-button">Luas Persegi</a>
<a href="#" class="app-button">Luas Persegi Panjang</a>
<a href="#" class="app-button">Luas Layangan</a>
<!-- Tambahkan tombol-tombol aplikasi sesuai kebutuhan -->
</div>
</div>
<footer>
© 2024 Aplikasiku Karya Aisyah
</footer>
</body>
</html>
4. Buat file baru dengan nama disesuaikan dengan rumus apa yang akan dibuat , dapat menggunakan kode dibawah ini sebagai contoh :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tombol Aplikasi</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 15px;
}
.frame {
border: 2px solid #3498db;
border-radius: 10px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.button-container {
text-align: center;
padding: 20px;
}
.app-button {
display: inline-block;
padding: 15px 30px;
margin: 15px;
font-size: 18px;
text-align: center;
text-decoration: none;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.app-button:hover {
background-color: #2980b9;
}
footer {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
form {
padding: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
button {
background-color: #3498db;
color: #fff;
border: none;
padding: 15px 30px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<header>
<h1>Tombol Aplikasi</h1>
</header>
<div class="frame">
<form>
<label for="appName">Masukan A :</label>
<input type="text" id="appName" name="a" required>
<label for="appLink">Masukan B:</label>
<input type="url" id="appLink" name="b" required>
<button type="submit">Hitung</button>
</form>
<div class="button-container">
<a href="index.php" class="app-button">Kembali</a>
<!-- Tambahkan tombol-tombol aplikasi sesuai kebutuhan -->
</div>
</div>
<footer>
© 2024 Tombol Aplikasi
</footer>
</body>
</html>
Selamat mengerjakan.
