soal proyek

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 of 13




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 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)





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 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.





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.





contoh pesan kesalahan pada halaman register

contoh alert box apabila registrasi sukses





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





• 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





• 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





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 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!


soal proyek

Documents