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>
5. Buatlah tentang aplikasi yang berisi tentang pembuat aplikasi dan tujuan aplikasinya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil Pembuat Aplikasi</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
header {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 20px;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
.profile {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.profile img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 20px;
}
.profile h2 {
margin: 0;
font-size: 28px;
}
.profile p {
margin: 10px 0;
font-size: 18px;
}
footer {
background-color: #3498db;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Tentang Aplikasi</h1>
</header>
<div class="container">
<div class="profile">
<img src="https://via.placeholder.com/150" alt="Profil Pembuat Aplikasi">
<div>
<h2>Aisyah</h2>
<p>Seorang Web Developer yang bersemangat untuk menciptakan solusi digital yang inovatif.</p>
<p>Hubungi saya di <a href="mailto:email@example.com">email@example.com</a>.</p>
<p>Tujuan Aplikasi ini dibuat adalah : </p>
</div>
</div>
<!-- Tambahkan profil pembuat aplikasi lainnya sesuai kebutuhan -->
</div>
<footer>
© 2024 Profil Pembuat Aplikasi
</footer>
</body>
</html>
Selamat mengerjakan.
.png)
