PRAKTIKUM ASP.NET 7 ADVANCED CONTROL

PRAKTIKUM ASP.NET 7 ADVANCED CONTROL Pada Bab ini membahas beberapa server control lanjutan dari Praktikum ASP.NET 6 antara lain:     

FileUpload Control Calendar Control Banner Advertisement MultiView Control Wizard Control

A. FileUpload Control FileUpload Control digunakan untuk meng-copy file dari HDD local client ke server, file yang dapat diupload contohnya adalah file gambar, dokumen, video dan lain sebagainya. Langkah-langkah pembuatan sebagai berikut: 1. Pilih File -> New Project, Pilih Web dan beri nama Project dan Solution-nya seperti dibawah ini:

2. Kemudian Add Item pada Project dan beri nama seperti contoh:

3. Ketikkan kode seperti seperti contoh dibawah ini:

4. Klik kanan di source code dan pilih view code, kemudian ketikkan kode dibawah ini:

5. Kemudian Tambakahkan New Folder di project dengan nama img seperti berikut:

6. Setelah selesai lihat hasilnya dengan CTRL+F5

7. Klik Pilih File kemudian pilih gambar yang akan diunggah.

8. Jika sudah memilih beberapa foto, maka akan tampak gambar di halaman web seperti ini:

B. Calendar Control Calendar Control digunakan untuk menampilkan calendar dalam format tampilan perbulan. Anda juga dapat memanfaatkan calendar control ini untuk membuat DatePicker. Langkah dalam pembuatan calendar control sebagai berikut: 1. Tambahkan web form pada project beri nama seperti contoh gambar dibawah ini:

2. Ketikkan kode seperti contoh dibawah ini:

3. Setelah itu arahkan kursor pada Calendar di split view dan isi di SelectionChanged pada properties seperti contoh dibawah ini:

4. Setelah itu ketikkan kode program seperti dibawah ini:

5. Kemudian lihat hasilnya dengan menekan CTRL+F5, klik salah satu tanggal di kalendar maka akan terlihat value yang terpilih.

C. Pop-up DateTime Picker Control Fungsi Pop-up DateTime Picker Control sama dengan Calendar Control, namun terlihat lebih sederhana. Berikut langkah membuatnya: 1. Tambahkan web form dan beri nama seperti contoh gambar berikut:

2. Tambahkan icon calendar.png pada folder img kemudian ketikkan kode seperti contoh berikut:

3. Klik kanan halaman HTML pilih view code kemudian ketikkan kode berikut:

4. Lihat hasilnya dengan menekan CTRL+F5

D. AdRotator Control AdRotator control digunakan untuk menampilkan banner advertisement (iklan) secara acak. Sumber data dapat dari file XML dan database. Langkah-langkah pembuatan dari File XML sebagai berikut: 1. Tambahkan file XML pada project beri nama seperti contoh berikut:

2. Tambahkan folder imgbann pada project dan beri 3 gambar banner kemudian letikkan kode seperti contoh berikut:

3. Tambahkan web form pada project beri nama seperti contoh berikut:

4. Kemudian ketikkan kode seperti contoh berikut:

5. Lihat hasilnya dengan CTRL+F5, refresh halaman untuk melihat keacakan gambar yang ditampilkan. Dari kode dapat diketahui bahwa banner1 akan tampil 50% dan banner2 dan banner3 tampil 25%.

E. PageView Control

PageView Control digunakan untuk menampilkan halaman dalam bentuk tab, lebih efisien karena menghemat halaman. Langkah-langkah dalam pembuatannya sebagai berikut: 1. Tambahkan web form pada project dan beri nama seperti dibawah ini dan ketikkan kode sumbernya:

2. Tambahkan Style Sheet pada project dan beri nama seperti dibawah ini dan ketikkan kode sumbernya:

3. Lihat hasilnya dengan menekan CTRL+F5:

F. Wizard Control Wizard Control mempunyai fungsi hampir sama dengan PageView Control yaitu memecah form yang besar dan komplek menjadi beberapa bagian yang lebih kecil. Dibandingkan dengan PageView, Wizard View lebih banyak fitur. Langkah-langkah pembuatannya sebagai berikut: 1. Tambahkan web form, beri nama dan ketikkan kode seperti contoh dibawah ini:

2. Lihat hasil kode dengan menekan CTRL+F5

TUGAS 1. Praktekkan semua contoh Advanced Control diatas sehingga membentuk beberapa project didalam project Solution Bab 4 seperti berikut:

2. Buat Form Inputan Data Siswa (dapat dilengkapi file css dan javascript), kombinasikan kode dengan contoh-contoh Advanced Control diatas! Ketentuan : Form menggunakan PageView atau bisa dengan WizardControl, tab/step berikutnya inputan terdapat upload foto siswa mulai SD, SMP, SMA. Tambahkan juga DatePicker tanggal bulan tahun lahir dari CalendarControl dan kata-kata motivasi bentuk JPG menggunakan AdRotator, dan validasi inputan seperti Praktikum ASP.Net 6, jika inputan diisi semua dan benar sesuai aturan maka akan menampilkan data-data yang diinputkan pada tab/step terakhir. Selamat Mengerjakan, semoga sukses! Share pada blog Anda masing-masing dan beri notifikasi ke email [email protected].

Salam Hangat,  Hadi Wijaya