HTML INPUT SEDERHANA Saya membutuhkan design HTML tampilan sederhana seperti gambar dibawah yang dimana input box menjadi satu dengan paragraph. Menggunakan framework bootstrap & JQuery. Untuk informasi tampilan dapat dibuka di https://goodui.org/#48
Gambar 1 – Tampilan contoh diharapkan
KETENTUAN 1. Dibuat dengan framework Bootstrap & JQuery. 2. Tampilan dibuat semirip mungkin dengan contoh Gambar 1. 3. Proses pengerjaan pada file terpisah, bernama style.css. 4. Apabila bagian [pembayaran] diubah maka paragraf 2 akan muncul. 5. Untuk data yang default diisi oleh jquery.
PARAGRAF 1 Halo, hari ini saya ingin membuat invoice ___[kode invoice]___ untuk ___[nama client]___ (Menggunakan kontak ___[hp / email]___ ___[kontak]___). Client ingin melakukan metode pembayaran ___[metode]___ dengan nominal ___[nominal Rp]___. Waktu pengerjaan dimulai sejak ___[tanggal]___ hingga ___[banyak hari]___ ___[Pilihan Hari]___. Pengertian: • ___[kode invoice]___
: Merupakan input berupa textbox berisi string.
• ___[nama client]___
: Merupakan input berupa textbox berisi string.
• ___[hp / email]___
: Merupakan dropdown dengan opsi “Nomor HP” atau “Email”.
• ___[kontak]___
: Input berupa nomor HP atau email, sesuai sebelumnya.
• ___[metode]___
: Merupakan dropdown dengan opsi “Langsung”, “2 termin”, “3
termin”, dan “pembayaran perbulan”. • ___[nominal Rp]___
: Merupakan input berupa rupiah, ditampilkan kode rupiah.
• ___[tanggal]___
: Merupakan datepicker.
• ___[Pilihan Hari]___ minggu”, “hari”.
: Merupakan dropdown dengan opsi “hari kerja”, “hari kecuali
PARAGRAF 2 Paragraf 2 muncul pada saat bagian [pembayaran] di paragraf 1 diubah. Adapun 4 variasi paragraph seperti berikut:
Langsung: Metode pembayaran menggunakan metode sekali bayar. Pembayaran dilakukan setelah pekerjaan dianggap telah selesai. Biaya transaksi sebesar ___[Fee Rp]___ dibayarkan oleh ___[Client / Pekerja]___. [tombol lanjut]
2 Termin: Metode pembayaran menggunakan 2 termin, dimana pembayaran pertama sebesar ___[termin1 %]___ untuk menyelesaikan pekerjaan dan termin ke-dua ___[termin2 %]___ untuk melakukan perbaikan. Biaya transaksi sebesar ___[Fee Rp]___ dibayarkan oleh ___[Client / Pekerja]___. [tombol lanjut]
3 Termin: Metode pembayaran menggunakan 3 termin, dimana pembayaran pertama sebesar ___[termin1 %]___ untuk menyelesaikan prototype, pembayaran kedua sebesar ___[termin2 %]___ untuk penyelesaian pekerjaan dan termin ke-tiga ___[termin3 %]___ untuk melakukan perbaikan. Biaya transaksi sebesar ___[Fee Rp]___ dibayarkan oleh ___[Client / Pekerja]___. [tombol lanjut]
Pembayaran perbulan: Metode pembayaran menggunakan metode pembayaran perbulan. Pembayaran dilakukan setiap bulan pertanggal ___[tanggal hari]___. Biaya transaksi sebesar ___[Fee Rp]___ dibayarkan oleh ___[Client / Pekerja]___. [tombol lanjut]
Pengertian: • ___[Fee Rp]___
: Merupakan input berupa rupiah, ditampilkan kode rupiah.
• ___[Client / Pekerja]___
: Merupakan dropdown dengan opsi “Client” atau “Pekerja”.
• ___[termin1 %]___
: Merupakan input numeric 1 digit dibelakang koma.
• ___[termin2 %]___
: Merupakan input numeric 1 digit dibelakang koma.
• ___[tanggal hari]___
: Merupakan datepicker khusus tanggalan pada bulan (1-31).
• [tombol lanjut]
: Merupakan sebuah tombol seperti di gambar, dengan tulisan
“Lanjut Pembuatan” Peraturan: Untuk [Fee Rp] merupakan input berupa rupiah yang didisabled, jadi user tidak bisa mengisi. Pada saat ini angkanya akan dilakukan random antara 1000 s/d 5000. Peraturan Khusus 2 Termin: Pada saat [termin1 %] diisi, maka [termin2 %] akan diubah dengan kalkulasi otomatis (100% - termin1%). Peraturan Khusus 3 Termin: Pada saat [termin1 %] & [termin2 %] diisi, maka [termin3 %] akan diubah dengan kalkulasi otomatis (100% - termin1% - termin2%).
CONTOH Terdapat 2 contoh yang diharapkan. Contoh pertama: Halo, hari ini saya ingin membuat invoice WEB001 untuk Alvin (Menggunakan kontak Nomor HP 08123110102). Client ingin melakukan metode pembayaran Metode 2 termin dengan nominal Rp. 120.000,- . Waktu pengerjaan dimulai sejak 3 Juni 2016 hingga 20 hari kerja. Metode pembayaran menggunakan 2 termin, dimana pembayaran pertama sebesar 40% untuk menyelesaikan pekerjaan dan termin ke-dua 60% untuk melakukan perbaikan. Biaya transaksi sebesar Rp. 4.589,- dibayarkan oleh Pekerja. Contoh kedua: Halo, hari ini saya ingin membuat invoice WEB002 untuk PT Maju Terus (Menggunakan kontak Email
[email protected]). Client ingin melakukan metode pembayaran Metode 3 termin dengan nominal Rp. 1.120.000,- . Waktu pengerjaan dimulai sejak 3 Juni 2016 hingga 30 hari. Metode pembayaran menggunakan 3 termin, dimana pembayaran pertama sebesar 40% untuk menyelesaikan prototype, pembayaran kedua sebesar 30% untuk penyelesaian pekerjaan dan termin ke-tiga 30% untuk melakukan perbaikan. Biaya transaksi sebesar Rp. 1.573,- dibayarkan oleh Client.
