Membuat Aplikasi Ucapan Hari Raya - Tampilan
13/04/2020 Maykhel David 1055 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.
Struktur File
Aplikasi_ucapan (folder)
--- css (folder)
--- --- style.css
--- index.php
--- config.php
Tampilan Pertama
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 dan Ketiga
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.
Kode Tampilan Kedua
<!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>
Kode Tampilan Ketiga
<!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
Artikel Terkait
No data.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
