soal proyek
TRANSCRIPT
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 1/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
1. Seluruh kelompok tidak diperkenankan untuk :The whole group is not allowed to:
• Melihat sebagian atau seluruh proyek kelompok lain,Seeing a part or the whole project from other groups
• Menyadur sebagian maupun seluruh proyek dari buku, Adapted a part or the whole project from the book
• Mendownload sebagian maupun seluruh proyek dari internet, Downloading a part or the whole project from the internet,
• Mengerjakan soal yang tidak sesuai dengan tema yang ada di soal proyek,Working with another theme which is not in accordance with the existing theme in the matter of the project,
• Melakukan tindakan kecurangan lainnya,Committing other dishonest actions,
• Secara sengaja maupun tidak sengaja melakukan segala tindakan kelalaianyang menyebabkan hasil karyanya berhasil dicontek oleh orang lain / kelompok lain.
Accidentally or intentionally conduct any failure action that cause the results of the project was copied by someone else / other
groups.
2. Jika kelompok terbukti melakukan tindakan seperti yang dijelaskan butir 1 di atas,maka nilai kelompok yang melakukan kecurangan (menyontek maupun dicontek) akan di –
NOL – kan. If the group is proved to the actions described in point 1 above, the score of the group which committed dishonest acts (cheating or being cheated) will be “Zero”
3. Perhatikan jadwal pengumpulan proyek, segala jenis pengumpulan proyek di luar jadwal tidak dilayani. Pay attention to the submission schedule for the project, all kinds of submission outside the project schedule will not be
accepted
4. Jangan lupa untuk melihat kriteria penilaian proyek yang ditempel di papan
pengumuman, atau tanya asisten anda. Don’t forget to look at the project assessment criteria that posted on the announcement board, or ask your teaching assistant.
Halaman 1 dari 13 Page 1 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 2/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
SoalCase
Plantjack
Deskripsi Situs WebPlantjack adalah perusahaan yang bergerak di bidang penjualan tanaman hias. Untuk menjawab
tantangan jaman terutama di era globalisasi, Plantjack menciptakan konsep e-commerce shop dengan
mendirikan Plantjack sebagai toko online. Anda sebagai seorang web programmer diminta untuk membuat situs web Plantjack tersebut.
Struktur Web
Anda bebas merancang design dan struktur web untuk situs tersebut. Anda juga dapat menambahkan
informasi dengan asumsi masing-masing untuk memperindah desain secara keseluruhan.
Website tersebut memiliki tampilan navigasi web menuju setiap halaman seperti yang dijelaskan
dibawah. Struktur dari Situs Web tersebut memiliki rincian sebagai berikut:
Halaman Home
• Berisi kata-kata pembuka dan penjelasan singkat serta beberapa hal lainnya mengenai
Plantjack.
• Anda dapat menambahkan gambar-gambar untuk memperindah tampilan website.
contoh tampilan halaman home
Halaman 2 dari 13 Page 2 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 3/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
Halaman 3 dari 13 Page 3 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 4/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
Halaman Product
Halaman ini menampilkan daftar produk tanaman hias yang ditawarkan oleh Plantjack . Data-datamengenai tanaman hias tersebut ditampilkan dengan menggunakan konsep Data Binding pada
Dynamic HTML. Tampilkan tiap plant name, plant detail, dan price berikut gambarnya masing-
masing. Tambahkan juga fitur sorting berdasarkan :• Plant Name ( Ascending & Descending )
• Price ( Ascending & Descending )
Tambahkan juga fitur navigasi ( First, Prev, Next, dan Last ) untuk melihat produk yang dijual
contoh tampilan halaman product (1)
Halaman 4 dari 13 Page 4 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 5/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
contoh tampilan halaman product (2)
Contoh isi file yang digunakan untuk Data Binding :
Name#Description#Price#Image
Chinese Evergreen (Aglaonema)#The exotic Chinese Evergreen from the eastern land#62#../images/plant/aglaonema.jpg Cast Iron Plant (Aspidistra)#Best African strain suited for room decoration#60#../images/plant/aspidistra.jpg
Rieger Begonia (Begonia hybria)#Lush blossoms perfect for a day's tea#51#../images/plant/begonia_hybria.jpg
Bellflowers (Campanula glomerata)#Shaped like bells, colored like
dreams#45#../images/plant/campanula_glomerata.jpg
Fire Lily (Clivia miniata)#The flaming Fire Lily is best to lift the mood#50#../images/plant/clivia_miniata.jpg
Corn plant (Dracaena fragrans massangeana)#Fitted for corners and
rooms#38#../images/plant/dracaena_fragrans_massangeana.jpg
Devil's ivy (Golden Pothos)#Green with shades of gold#42#../images/plant/golden_pothos.jpg Amaryllis (Hippeastrum)#Red and white could always play with emotions#55#../images/plant/hippeastrum.jpg
Baby Rubber Plant (Peperomia obtusifolia)#Small plants suited for small decorations#49#../images/plant/peperomia_obtusifolia.jpg
Gloxinia (Sinningia hybridus)#Gorgeous shades of twirling purple and white#62#../images/plant/sinningia_hybridus.jpg
Halaman 5 dari 13 Page 5 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 6/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
Halaman Register
Halaman ini sarana untuk mendaftar pada situs Plantjack sehingga pelanggan dapat menggunakan
fitur pembelian online. Kemudian anda harus melakukan validasi pada field berikut denganmenggunakan JAVASCRIPT (tidak boleh menggunakan Regular Expression maupun HTML
Behavior )
No Field Keterangan
1. Username Validasikan bahwa Username harus diisi
2. Password Validasikan bahwa Password harus diisi dan harus mengandung
minimal 1 angka dan 1 huruf alfabet.
3. Email Validasikan bahwa Email
a. Harus diisi; b. Harus memiliki karakter At (@) dan karakter Dot (.);
c. Jumlah karakter At (@) tidak boleh lebih dari satu;
d. Minimal karakter Dot (.) dibelakang karakter At (@) = 1 danMaksimal karakter Dot (.) dibelakang karakter At (@) = 2;
e. Karakter Dot (.) tidak boleh saling bersebelahan dengan karakter Dot (.);
f. Karakter At (@) dan Dot (.) tidak boleh menjadi karakter
pertama maupun terakhir dari alamat email;
g. Karakter Dot (.) tidak boleh langsung bersebelahan dengan
karakter At (@);Contoh benar : [email protected]
4 Full Name Validasikan bahwa Fullname harus diisi dan tidak boleh mengandungangka.
5. Gender Validasikan bahwa Gender harus dipilih dan hanya bisa dipilih salahsatu.
6. Birth Date Validasikan bahwa BirthDatea. Wajib dipilih (tanggal, bulan, tahun). b. Format tanggal yang benar, perhatikan juga tahun kabisat dan
tanggal-tanggal harus valid. (Ada bulan yang hanya sampai
tanggal 28/29/30/31).c. Harus lebih besar dari tanggal sekarang.
7. Address Validasikan bahwa Address :a. Harus diisi
b. Harus mengandung kata Jalan, Street, Jln. atau St. (titik
termasuk)
8. Agreement Validasikah bahwa Agreement harus dipilih oleh user.
Halaman 6 dari 13 Page 6 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 7/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
contoh tampilan halaman register
Gunakan komponen form yang sesuai dengan field yang sudah ditentukan pada soal. Selain itu,
tampilkan pesan kesalahan untuk setiap validasi yang Anda buat dan tampilkan pesan berhasil apabila
transaksi pembelian sukses dijalankan. Tampilkan juga alert box yang menunjukkan bahwa registrasisukses. Pesan kesalahan dan berhasil boleh menggunakan cara apapun sesuai design anda.
Halaman 7 dari 13 Page 7 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 8/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
contoh pesan kesalahan pada halaman register
contoh alert box apabila registrasi sukses
Halaman 8 dari 13 Page 8 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 9/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
Halaman My Cart
Halaman ini adalah fitur utama dari Plantjack , yakni sarana untuk melakukan pembelian tanaman
hias secara online. Anda diminta membuat proses pembelian barang yang ditawarkan di Plantjack
dengan konsep baca-tulis file menggunakan Microsoft ActiveXObject . Adapun rancangan proses
pembeliannya adalah sebagai berikut.
• Pertama-tama tunjukkan daftar produk yang ditawarkan oleh Plantjack . Daftar produk ini
diambil melalui baca file menggunakan ActiveXObject . Tampilkan juga checkbox daninputbox untuk memilih tanaman berikut jumlah yang ingin dibeli.
contoh tampilan my cart awal
Halaman 9 dari 13 Page 9 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 10/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
• Validasikan bahwa user tidak bisa melakukan pembelian apabila jumlah yang dibeli pada
tanaman yang dipilih belum diisi dan harus diisi dengan angka , demikian pula sebaliknya
user tidak bisa membeli apabila jumlah pembelian sudah di-input tetapi tanaman belum
dipilih.
contoh tampilan my cart awal saat terjadi kesalahan
• Apabila validasi benar, maka data pembelian akan disimpan dalam suatu file
menggunakan ActiveXObject setelah user menekan tombol Add to Cart . File ini bersifat
sementara (temporary) dan akan di-overwrite setiap terjadi pembelian baru. Apabila
user menekan tombol Empty Cart maka tampilan my cart akan menjadi kosong.
Contoh isi temporary file :
Chinese Evergreen (Aglaonema)#62#12
Cast Iron Plant (Aspidistra)#60#2
Bellflowers (Campanula glomerata)#45#23
Halaman 10 dari 13 Page 10 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 11/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
• Setelah menekan tombol Add to Cart , kemudian tampilkan halaman konfirmasi (halaman
baru) yang berisikan daftar item yang telah dibeli oleh user . Daftar ini diambil dengan
membaca temporary file yang baru saja dibuat dengan menggunakan ActiveXObject.
contoh tampilan my cart setelah memilih Add to Cart
• User dapat memilih Purchase untuk menyelesaikan pembayarannya, ataupun memilih Cancel
untuk membatalkan pembelian.o Apabila User memilih Purchase, maka data pembelian akan disimpan dalam suatu
file menggunakan ActiveXObject. File ini bersifat tetap dan penyimpanan data
dilakukan dengan menambahkan isi data baru ke bawah data lama (append ).
o Apabila User memilih Cancel , maka User akan dikembalikan ke halaman My Cart .
Pastikan halaman My Cart dalam keadaan kosong (tidak ada data lama yang baru saja di-
input ).
Contoh isi dari file tetap :
Chinese Evergreen (Aglaonema)#62#2#124
Amaryllis (Hippeastrum)#55#5#275 Baby Rubber Plant (Peperomia obtusifolia)#49#2#98Corn plant (Dracaena fragrans massangeana)#38#2#76
Devil's ivy (Golden Pothos)#42#5#210
Chinese Evergreen (Aglaonema)#62#12#744
Cast Iron Plant (Aspidistra)#60#2#120
Bellflowers (Campanula glomerata)#45#23#1035
Halaman 11 dari 13 Page 11 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 12/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
contoh tampilan jika user memilih Purchase
• Anda bebas mengatur proses pembelian sesuai design anda, tetapi anda diharuskan :
o menggunakan ActiveXObject,
o menampilkan data pada halaman My Cart dan Confirmation yang diambil dari
file (bukan diketik manual), dan
o menghasilkan minimal 2 file : temporary file dan file tetap yang berisi daftarbarang yang telah dibeli oleh user dari awal hingga sekarang.
Halaman 12 dari 13 Page 12 of 13
5/13/2018 Soal Proyek - slidepdf.com
http://slidepdf.com/reader/full/soal-proyek 13/13
190911/RD/M0114/Soal Proyek FM-BINUS-AA-FPT-66/R4
Halaman About
Halaman ini berisi mengenai deskripsi dan sejarah situs Plantjack.
contoh tampilan halaman about
Petunjuk 1. Situs yang Anda buat harus menggunakan paradigma hypertext yang benar, bukan sekedar
dokumen biasa atau brosur yang dipasang di web. Pasanglah embedded links sertahighlighting pada teks untuk meningkatkan usability.
2. Target resolusi layar adalah 1024 x 768 pixels.
3. Gunakan table atau frame.4. Gunakan Data Binding pada halaman Product.
5. Ekstensi file yang diperkenankan adalah .html / .htm, .css, .txt.
6. Elemen yang wajib digunakan ditiap halaman adalah css dan link.7. Anda dapat menambahkan client scripting dengan javascript ataupun vbscript .
8. Situs web anda harus dapat dilihat dengan sesuai pada browser Internet Explorer 4 ke atas dan
Netscape 4 ke atas.9. Gunakan subdirektori untuk merapikan lokasi file-file anda.10. Dilarang men-download atau melakukan plagiarism atas pengerjaan proyek ini.
Jika ada yang tidak dimengerti tanyakan pada Asisten Anda!
Halaman 13 dari 13 Page 13 of 13