13/04/2020 Maykhel David 1415 Website
Membuat Aplikasi Ucapan Hari Raya - Tampilan - Hallo semuanya, pada artikel sebelumnya kita sudah memahami persiapan yang diperlukan dalam membuat aplikasi ucapan hari raya berikut, karena aplikasi yang akan kita buat kali ini adalah aplikasi ucapan hari raya yang ditujukan untuk semua hari raya yang bisa ditambahkan sesuai dengan jumlah hari raya yang ada di Indonesia maupun jika diperlukan untuk event lainnya kita bisa juga menambahkan event tertentu untuk dijadikan ucapan. Baiklah aplikasi yang akan kita buat kurang lebih akan memiliki tampilan yang sangat sederhana seperti berikut.
Struktur file yang kita perlukan hanya file index.php dan juga style.css untuk mempercantik tampilan dari aplikasi yang kita buat.
Aplikasi_ucapan (folder)
--- css (folder)
--- --- style.css
--- index.php
--- config.php
Pada tampilan pertama kita menggunakan html sederhana seperti berikut
<!DOCTYPE html>
<html><head>
<title>Ucapan</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head><body>
<div class="content">
<h1>Aplikasi Ucapan</h1><ul>
<li>
<a href="index.php?t=1">Paskah</a>
</li>
</ul></div>
</body></html>
Pada html diatas kita hanya membutuhkan satu tag <li>, karena kita akan melakukan looping
Tampilan kedua ini adalah tampilan ketika kita sudah melakukan klik dari salah satu menu yang ada pada tampilan pertama. Pada tampilan kedua dan ketiga adalah tampilan dinamiis yang hanya terlihat ketika melakukan action tertentu.
<!DOCTYPE html>
<html><head>
<title>Ucapan</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head><body>
<div class="content">
<h2>Masukkan Nama di pada kolom dibawah</h2>
</div>
<form action="" id="myform" method="post">
<input type="text" name="nama" placeholder="Tulis nama disini...">
<button type="submit" name="kirim">kirim</button>
</form>
</body></html>
<!DOCTYPE html>
<html><head>
<title>Ucapan</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head><body>
<div class="content">
<h1>David</h1>
<p>Mengucapkan</p>
<h3 class="appTitle">Selamat Hari Raya Nyepi</h3>
</div>
<form action="" id="myform" method="post">
<input type="text" name="nama" placeholder="Tulis nama disini...">
<button type="submit" name="kirim">kirim</button>
</form>
</body></html>
Baiklah teman – teman, pada artikel ini kita sudah bahas tentang tampilan yang kita gunakan secara keseluruhan, kita akan membahas tentang database dan fungsi php yang kita perlukan pada artikel berikutnya yang sekaligus part penyelesaian
No data.
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn MoreMembuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More