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.

Membuat Aplikasi Ucapan Hari Raya

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

13 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat