Materi Kuliah Pemrograman Web

Materi Kuliah Pemrograman Web

MEMBUAT HALAMAN UTAMA PRODUK MENGGUNAKAN CONTROL REPEATER

A. Konsep Halaman utama produk ini akan menampilkan produk-produk terbaru (statusBaru bernilai 1). Kontrol yang digunakan untuk menampilkan data adalah REPEATER. Sedangkan sumber data didefinisikan dalam SQLDATA SOURCE. REPEATER Repeater merupakan suatu control yang memungkinkan kita untuk membuat daftar dari data yang berasal dari database pada suatu halaman web.Repeater akan membentuk layout untuk semua item yang berasal dari sumber data. Layout didefinisikan pada suatu template. Template yang dimiliki oleh repeater adalah sbb: No

Template

Deskripsi

1

HeaderTemplate

Menentukan judul dari template (tidak dilooping)

2

ItemTemplate

Menentukan field-field dari item data

3

FooterTemplate

Menentukan catatan kaki dari daftar (tidak dilooping)

4

AlternatingItemTemplate

Sama seperti item template, tetapi untuk baris yang berbeda

5

SeparatorTemplate

Menentukan pemisah antar baris

Eval(“field”) Berguna untuk mengambil/menampilkan nilai field dari suatu data. Eval(“field”,format) berguna untuk mengambil/menampilkan nilai field dari suatu data dengan menggunakan format tertentu. Format yang dapat digunakan sebagai berikut :

www.muningmini.wordpress.com

Halaman 1


B. Membuat halaman produk 1. Buka project website anda. 2. Perhatikan pada jendela SQL Explorer koneksi yang sudah anda lakukan. 3. Klik Menu Website  Add New Item 4. Pilih webform. Beri nama utama.aspx. 5. Centang pilihan master page. 6. Klik tombol Add. 7. Pilih masterpage yang sudah dibuat sebelumnya. 8. Klik OK 9. Ganti “Untitled Page” menjadi “Halaman Utama Toko Online” 10. Pindah ke mode Design dengan cara klik tab Design di bagian bawah layer. 11. Ketik teks berikut ini : Selamat Datang di Toko Online Bikin Pintar Kami menyediakan berbagai macam sarana pembelajaran interaktif, buku dan Produk inovatif lainnya. 12. Tambahkan Tabel 3 baris 1 kolom. 13. Pada Baris Pertama Ketik : New Release. Atur tampilannya menjadi lebih menarik. 14. Pada Baris Kedua, tambahkan control : SQLDataSource dari toolbox kelompok data. 15. Konfigurasikan SQLDatasource sbb:


Halaman 2


Pilih tombol WHERE, akan tampil jendela dibawah ini. Column isi dengan :statusbaru Operator := Source : none Value :1 Isian ini dimaksudkan untuk menyeleksi record agar yang ditampilkan hanya data dengan status baru bernilai 1.

Klik tombol Add. Hasilnya seperti tampak pada gambar berikut :


Halaman 3

Materi Kuliah Pemrograman Web Klik Ok, akan kembali ke halaman Configure Data Source seperti tampak pada gambar berikut :

Klik Next

Klik Finish. 16. Tambahkan Repeater, letakkan dibawah SQLDataSource.

17. Pada datasource pilih :SQLDatasource1. 18. Tambahkan sebuah tabel dengan 3 Baris dan 3 Kolom. Kolom pertama lebarnya : 10%, kolom kedua lebarnya : 1 px dan kolom ketiga lebarnya=89% www.muningmini.wordpress.com

Halaman 4

Materi Kuliah Pemrograman Web 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.

Ketiga kolom pada baris kedua di lakukan merge Cell Atur properties table untuk align=left, valign=top Tambahkan kontrol image pada kolom pertama baris pertama. Tambahkan Label pada baris pertama kolom ketiga beri ID KodeBarang. Tambahkan Label lagi pada baris pertama kolom ketiga beri ID NamaBarang. Tambahkan Label lagi pada baris pertama kolom ketiga beri ID Harga. Tambahkan Textbox pada baris pertama kolom ketiga beri ID Jumlah. Tambahkan Button lagi pada baris pertama kolom ketiga beri ID ButBeli. Tambahkan Label pada baris kedua beri ID Keterangan. Hasilnya adalah sbb:

29. Langkah selanjutnya klik Source dan memperbaiki sourcenya. Source yang ditebalkan adalah perbaikan yang harus dilakukan :

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="kuis.aspx.vb" Inherits="kuis" title="Halam Utama" %>

Selamat Datang di Bamboomedia ShoppingCart
Disini kami menyediakan produk-produk Media Pembelajara Interaktif

New Release " www.muningmini.wordpress.com

Halaman 5

Materi Kuliah Pemrograman Web SelectCommand="SELECT [KodeBarang], [NamaBarang], [Harga], [FileGambar], [Keterangan] FROM [TBLBarang]">


Halaman 6



Halaman 7

Materi Kuliah Pemrograman Web

Recommend Documents