Membuat Aplikasi Ucapan Hari Raya - Tampilan

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

• Membuat Aplikasi Ucapan Har Raya - Persiapan
• Membuat Aplikasi Ucapan Hari Raya - Penyelesaian