Membuat Aplikasi Ucapan Hari Raya - Persiapan

13/04/2020    Maykhel David    793    Website

Membuat Aplikasi Ucapan Hari Raya - Persiapan - Hallo semuanya, semoga kalian tetap sehat ya, untuk kalian yang sedang dirumahaja, kali ini saya akan coba membagikan aplikasi sederhana yang bisa kalian buat dan mungkin bisa kalian kembangkan untuk mengisi waktu luang, aplikasi yang akan kita buat kali ini adalah aplikasi yang cukup sederhana. 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. 

Artikel Terkait

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

Saat ini kita akan memulai persiapan dalam membuat aplikasi ucapan hari raya. Hal yang pertama kita siapkan adalah database, pada project ini kita hanya akan membutuhkan satu table data saja. Disini saya menggunakan table kalimat yang memiliki struktur seperti berikut

Selanjutnya sipkan struktur file dan folder seperti berikut

Setup config.php

<?php 

$hostname = "localhost";
$username = "root";
$password = "";
$database = "ucapan";

$conn = mysqli_connect($hostname,$username,$password,$database);

Setup CSS

Berkut adalah Kode CSS yang akan kita gunakan untuk keseluruhan tampilan, kode ini bisa kalian simpan dalam satu file bernama style.css

*{margin: 0;padding: 0;box-sizing: border-box;font-family: Arial}

body{
    background-color: #371b51;
    color: #f7c069
}

#myform{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 3%
}

#myform input{
    background-color: #c86781;
    color: #371b51;
    width: 75%;
    border-radius: 3px;
    border:2px solid #c66959;
}
#myform button{
    background-color: #f29d71;
    color: #371b51;
    width: 20%;
    float: right;
    border-radius: 3px;
    border:2px solid #c66959;
}
#myform button,#myform input{
    padding: 5px 5px;
    font-size: 20px
} 
.content{
    text-align: center;
    padding: 40px 20px;
}
.content h1{
    text-align: center;
    text-transform: uppercase;
    color: cyan;
    font-size: 2em;
    font-family: arial;
    letter-spacing: 10px;
}
.content h2{
    margin-top: 100px
}
.content li{
    margin: 20px
}
.content a{
    font-size: 1.3em;
    color: yellow
}
.content p{
    font-size: 1.3em;
    margin-top: 50px;
}

.content h3{
    margin-top: 50px;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 50px;
    text-transform: uppercase;
    color: yellow;
    font-size: 2em;
    font-family: fantasy;
    letter-spacing: 10px;
}

Baiklah teman – teman, persiapan kita sudah selesai pada artikel selanjutny kita akan bahas tentang tampilan yang kita gunakan secara keseluruhan, untuk lebih jelasnya bisa kalian lihat disisni, baiklah demikian artikel kali ini yang membahas tentang persiapan membuat ucapan hari raya.

No data.