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, Menyadur sebagian maupun seluruh proyek dari buku, Mendownload sebagian maupun seluruh proyek dari internet, Mengerjakan soal yang tidak sesuai dengan tema yang ada di soal proyek, Melakukan tindakan kecurangan lainnya,

Seeing a part or the whole project from other groups Adapted a part or the whole project from the book Downloading a part or the whole project from the internet, Working with another theme which is not in accordance with the existing theme in the matter of the project, Committing other dishonest actions,

Secara sengaja maupun tidak sengaja melakukan segala tindakan kelalaian yang 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.
Dont 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

190911/RD/M0114/Soal Proyek

FM-BINUS-AA-FPT-66/R4

Soal
Case

Plantjack Deskripsi Situs Web Plantjack 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

190911/RD/M0114/Soal Proyek

FM-BINUS-AA-FPT-66/R4

Halaman 3 dari 13
Page 3 of 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-data mengenai tanaman hias tersebut ditampilkan dengan menggunakan konsep Data Binding pada Dynamic HTML. Tampilkan tiap plant name, plant detail, dan price berikut gambarnya masingmasing. 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

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

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 dengan menggunakan JAVASCRIPT (tidak boleh menggunakan Regular Expression maupun HTML Behavior) No Field 1. Username 2. Password 3. Email Keterangan Validasikan bahwa Username harus diisi Validasikan bahwa Password harus diisi dan harus mengandung minimal 1 angka dan 1 huruf alfabet. 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 dan Maksimal 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@email.com Validasikan bahwa Fullname harus diisi dan tidak boleh mengandung angka. Validasikan bahwa Gender harus dipilih dan hanya bisa dipilih salah satu. Validasikan bahwa BirthDate a. 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. Validasikan bahwa Address : a. Harus diisi b. Harus mengandung kata Jalan, Street, Jln. atau St. (titik termasuk) Validasikah bahwa Agreement harus dipilih oleh user.

4 5. 6.

Full Name Gender Birth Date

7.

Address

8.

Agreement

Halaman 6 dari 13
Page 6 of 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 registrasi sukses. Pesan kesalahan dan berhasil boleh menggunakan cara apapun sesuai design anda.

Halaman 7 dari 13
Page 7 of 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

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 dan inputbox untuk memilih tanaman berikut jumlah yang ingin dibeli.

contoh tampilan my cart awal

Halaman 9 dari 13
Page 9 of 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

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 diinput). Contoh isi dari file tetap :
Chinese Evergreen (Aglaonema)#62#2#124 Amaryllis (Hippeastrum)#55#5#275 Baby Rubber Plant (Peperomia obtusifolia)#49#2#98 Corn 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

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 daftar barang yang telah dibeli oleh user dari awal hingga sekarang.

Halaman 12 dari 13
Page 12 of 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 serta highlighting 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