Website Undangan Pernikahan

Nama : Wildan Fauzy Maulana Hasyim

Kelas : Pemrograman Web B

NRP : 5025221044


Sourcecode tugas ini dapat diakses pad github saya yakni :

ProfilGithubLuszark

atau akses langsung pada :
TugasPwebUndangan


    Pada tugas kali ini, saya berniat untuk membuat suatu undangan pernikahan digital di Website. Analisis saya, pada undangan yang baik dan benar setidaknya mengandung beberapa poin seperti :

  • Profil Pengantin
  • Waktu Akad & Persepsi\
  • Lokasi
  • Buku Tamu
  • Kisah (Opsional)
  • Galeri Foto (Opsional)

Oleh karena itu, saya mencoba untuk mengulik isi dari masing-masing poin tersebut.

  1. Home
    • Pernikahan siapa dan siapa
    • Tanggal 
    • Countdown
    • Akan sangat ciamik apabila latar belakangnya adalah foto pengantin
  2.  Profil
    • Foto Mempelai
    • Putra/putri dari siapa
    • medsos atau linkedin mereka
  3. Jadwal acara
    • Tanggal
    • Jam
    • Lokasi
    • Text Tulisan (Dihias
    • Akan lebih cincai apabila diberi link maps tempat or lokasi
  4. Kisah
    • Dijadikan 3 fase peristiwa
    • Masing-masing fase menceritakan kisah secara singkat
    • Foto Peristiwa
    • Tanggal dan tempat kejadian masing-masing peristiwa
  5. Galeri 
    • Berisikan Foto Prewed atau lainnya
  6. Buku Tamu
    • Berisikan Nama lengkap
    • Hadir atau Tidak
    • Jumlah Tamu Hadir

Rencananya, saya hendak membuat konsepan tampilan website yang mirip dengan website undangan pernikahan sebagai berikut :

https://seremoni.id/v2/preview/5/7

Kemudian, berbekal dengan HTML, CSS, dan Bootstrap untuk mempermudah pembuatan web ini, saya mencoba mengimplementasikan website yang hendak saya buat sesuai dengan poin-poin yang hendak saya masukkan. Berikut adalah kasaran dari web yang hendak dibuat : 

Dan berikut merupakan hasil implementasi yang bisa saya buat :
Calon Tamu akan dihadapkan dengan tampilan awal yang tidak akan bergerak kecuali bila mereka berinteraksi dengan tombol "Lihat Undangan". Pada layar awal ini, page diisi dengan nama calon pengantin dan countdown dari tahun ke detik sampai ke hari H pernikahan.


Ketika menyentuh button "Lihat Undangan", Calon Tamu akan diarahkan menuju bagian Home dimana page berisi foto kedua mempelai, tentang mereka (masih dalam bentukan lorem untuk digunakan pembuat sebagai template jika dibutuhkan), dan penjelasan mengenai orang tua dari kedua mempelai. Website juga akan memainkan musik "City of Stars" ketika Calon Tamu berinteraksi dengan tombol "Lihat Undangan". Berikut adalah tampilan penuh dari bagian Home :




Web juga memiliki navigation yang akan mengikuti calon tamu ke arah page mana saja yang sedang berada di layar mereke (Kecuali bagian awal) dan bisa responsif menyesuaikan dengan ukuran dari gadget yang sedang dipakai. Berikut adalah gambar dari navigation pada berbagai kondisi :






Musik yang dimainkan pun bisa dihentikan dan dijalankan kembali apabila Calon Tamu berinteraksi dengan tombol play dan pause seperti pada gambar berikut :
        



Terdapat juga galeri yang bisa menunjukkan foto prewed calon pengantin. Perlu diingat bahwa gambar yang dipakai merupakan gambar buku tahunan pembuat dan hanya berpose belaka.



Web juga menampilkan waktu dan lokasi acara Akad Nikah dan Walimatul Ursy dari Calon Pengantin. Disertakan juga tombol "Lokasi" yang ketika disentuh akan mengarahkan para Calon Tamu menuju Gmaps dari lokasi Akad Nikah.


Website yang saya buat juga berisikan bagian dari kisah Calon Pengantin yang dibagi menjadi 3 fase dengan penjelasan peristiwa serta tanggal, Bulan, dan Tahun kejadian.


Website ini juga memiliki Tempat Konfirmasi Kehadiran yang bisa diisi oleh Calon Tamu dengan data berupa : Nama Lengkap, Jumlah kehadiran(Minimal 1 dan Maksimal 5), serta Status Kehadiran dari Calon Tamu.


Ketika Calon Tamu memasukkan data, apabila data berhasil masuk, maka Website akan mengeluarkan pesan seperti berikut :


Kemudian, Data tersebut akan tersimpan ke dalam Spread Sheet yang telah disiapkan dengan nama "Guest List" sehingga dapat digunakan Calon Pengantin untuk memprediksi kehadiran tamu pada hari pernikahan mereka. Sheet yang digunakan akan berisikan data calon tamu :


Di bagian akhir, terdapat bagian yang menunjukkan Nomor Rekening Calon Pengantin yang bisa digunakan untuk para Calon Tamu sekiranya hendak memberikan hadiah dan sebagainya untuk Calon Pengantin.


Source Code dan aset yang saya gunakan telah saya upload pada :
ProfilGithubLuszark
TugasPwebUndangan

Berikut adalah webnya :
https://luszark005.github.io/Tugas-Web-Undangan-Pernikahan/#home






Komentar

Posting Komentar

Postingan populer dari blog ini

ETS PWEB B

Gambar
  EVALUASI TENGAH SEMESTER PEMROGRAMAN WEB Wildan Fauzy Maulana Hasyim 5025221044 PWEB-B   1.      Jelaskan apa yang dimaksud dengan web responsive? Bagaimana cara membangunnya? Jawab : Web Responsive merupakan suatu pendekatan dalam mendesain dan mengembangkan suatu situs web dengan tujuan untuk memastikan web dapat menyesuaikan tampilannya dengan baik pada berbagai perangkat dan resolusi layar. Penyesuaian tampilan web juga termasuk dengan penyesuaian elemen seperti teks, gambar, dan tata letak agar terlihat dan berfungsi dengan baik. Web dapat dibuat responsive dengan menggunakan Java Script, namun agar mempermudah para Web Developer, terdapat beberapa Frame Work yang dapat membantu untuk membuat web responsive dalam waktu yang lebih singkat. Adapaun tahapan untuk membangun Web yang Responsive adalah : ยท        Mendifinisikan Meta Tag untuk desain yang Responsive Biasanya Browser akan mengatur skala halam...
Baca selengkapnya

Aplikasi Upload Photo

Gambar
Nama : Wildan Fauzy Maulana Hasyim NRP : 5025221044 Kelas : PWEB B     Pada kesempatan kali ini, saya ditugaskan untuk membuat aplikasi upload photo. Oleh karena itu, saya pun mempersiapkan database untuk menaruh file foto dan data yang akan masuk. Berikut adalah syntax inisiasinya : CREATE TABLE ` siswa ` (   `id` int ( 11 ) NOT NULL AUTO_INCREMENT,   `nis` varchar ( 11 ) NOT NULL ,   `nama` varchar ( 50 ) NOT NULL ,   `jenis_kelamin` varchar ( 10 ) NOT NULL ,   `telp` varchar ( 15 ) NOT NULL ,   `alamat` text NOT NULL ,   `foto` varchar ( 200 ) NOT NULL ,   PRIMARY KEY ( `id` ) );     Berikut adalah hasil yang didapatkan dengan menggunakan code yang diberikan (Link Repository di akhir) : Halaman Tambah Data : Halaman Data Siswa : Halaman Ubah Data : Halaman Data Siswa Ketika suatu data dihapus : Berikut adalah Link Repositori berisi Codenya : REPOUPLOADPHOTO
Baca selengkapnya

Final Project Pemrograman Web

Gambar
Nama : Wildan Fauzy Maulana Hasyim NRP :  5025221044 Kelas : PWEB-B 1.       Saat ini, SLTP Islam Al-Syukro Ciputat masih menggunakan pendekatan semi manual dalam mengelola informasi akademik, terutama menggunakan aplikasi Microsoft Office. Pengelolaan informasi yang dilakukan adalah seperti proses pendataan siswa, pendataan guru atau karyawan, laporan nilai siswa, pembuatan jadwal belajar dan mengajar, serta pembayaran SPP. Dengan kondisi ini, kegiatan belajar-mengajar dan pelayanan informasi sekolah menjadi kurang efisien. Oleh karena itu, diperlukan pengembangan sistem informasi akademik berbasis web untuk meningkatkan kualitas layanan dan daya saing sekolah. Basis Web digunakan dikarenakan dapat diakses dan digunakan dimanapun dan kapanpun serta pada device yang mumpuni selama dapat terhubung dengan internet.   2.      2.  Pada aplikasi berbasis web yang hendak dibuat, saya tertarik untuk mengadakan beberapa fitur berikut : ...
Baca selengkapnya