Logika Pemrograman: Bab 4: Pemrograman C#.NET: Database dan Web

Tuesday, December 13, 2016

Bab 4: Pemrograman C#.NET: Database dan Web

Menciptakan Aplikasi Web

Bab ini akan mengenalkan ASP.NET, yang menunjukkan bagaimana menggunakan Visual Studio untuk menciptakan situs Web. Anda akan belajar apa yang terjadi ketika halaman ASP.NET diproses oleh sebuah server Web. Anda akan belajar event-event runtime, sejumlah kategori kontrol yang tersedia pada aplikasi-aplikasi ASP.NET, dan perbedaan-perbedaan antara kontrol-kontrol HTML dan kontrol-kontrol ASP.NET. Bab ini akan menjelaskan file aplikasi dan konfigurasi yang diperlukan oleh aplikasi ASP.NET. Terakhir, pada Anda akan ditunjukkan bagaimana menciptakan sebuah aplikasi Web sederhana yang memuat beberapa jenis tombol, label, kepala, dan kotak teks.

4.1 Pemrograman Web

Extended HyperText Markup Language (XHTML)

Ketika Web pertama kali menjadi populer, HyperText Markup Language (HTML) merupakan satu-satunya bahasa markup yang tersedia untuk menciptakan halaman yang memuat teks, tombol, dan form masukan. Setelah itu, Extended HyperText Markup Language (XHTML) diciptakan untuk memenuhi kebutuhan dalam menciptakan situs Web yang lebih kaya. XHTML tidak hanya menjelaskan tampilan dari halaman Web, ia juga memiliki kemampuan dalam menanamkan perintah-perintah yang dapat dieksekusi pada server Web.

Banyak situs Web saat ini merupakan aplikasi fungsional dan interaktif. Pada tahun-tahun sebelumnya, aplikasi Web cenderung merupakan kombinasi kompleks dari HTML, bahasa skript seperti JavaScript, dan program-program yang dapat dieksekusi. Tetapi sekarang, Anda dapat menciptakan situs Web yang mengintegrasikan semua elemen ini dengan cara yang mudah, menggunakan Microsoft ASP.NET.

ASP.NET

ASP.NET merupakan nama yang diberikan untuk platform pengembangan Web dari Microsoft. Ia menyediakan perangkat-perangkat pengembangan, sejumlah pustaka kode, dan sejumlah kontrol untuk aplikasi-aplikasi berbasis browser. Aplikasi ASP.NET dapat dijalankan pada browser Web seperti Internet Explorer, Netscape, Google Chrome, dan Operan. Aplikasi ASP.NET dapat pula dijalankan pada komputer Anda sendiri, atau pada suatu jaringan. ASP.NET menyediakan suatu cara untuk memisahkan HTML biasa dari kode program berorientasi-objek. Ia juga menyediakan banyak kontrol, yang hampir sama dengan kontrol-kontrol Windows Desktop. ASP.NET dapat Anda pakai untuk mengalihkan pengetahuan tentang Visual Basic dan Visual C# ke aplikasi-aplikasi Web. Lebih lagi, ASP.NET menggunakan kompiler untuk memeriksa error sintaksis sebelum program dieksekusi. Kode Visual Basic atau C# dapat disimpan di dalam suatu file yang terpisah dari teks halaman dan HTML, yang mempermudah Anda untuk menuliskan kode dan membuat logika program. Aplikasi Web yang ditulis dengan ASP.NET umumnya memuat bagian-bagian berikut:

· Isi: Form web, kode HTML, kontrol-kontrol ASP.NET, citra-citra, dan multimedia.

· Logika Program: Kode yang ditulis dalam C# atau Visual Basic.

· Informasi Konfigurasi: Disimpan di dalam suatu file dengan nama Web.config.

Visual Web Developer

Visual Studio mempermudah pengeditan halaman dalam Source view (XHTML markup), Design view, atau Split view (baik sumber maupun perancangan). Jika Anda tidak memiliki Microsoft Visual Studio, Anda dapat mengunduh Visual Web Developer, sebuah perangkat pengembang Microsoft yang gratis yang dapat menyederhanakan cara bagaimana Anda menciptakan aplikasi-aplikasi Web. Perangkat ini dapat Anda pakai untuk:

· Menciptakan antarmuka visual yang tangguh, dengan kotak teks, warna, citra, tombol, kotak list, dan kalender.

· Menciptakan koneksi ke database, dengan table adapter dan dataset.

· Menampilkan data di dalam database pada kontrol-kontrol seperti grid.

· Menjalankan dan mendebug program Anda dengan Visual Studio.

· Mempublikasi aplikasi Anda ke Web sehingga dapat dinikmati oleh setiap orang.

Bagaimana Aplikasi Web Bekerja

Aplikasi Web, yang Anda definisikan sebagai situs Web yang memuat kode yang dapat dieksekusi, didesain dengan model client-server, yang berarti bahwa suatu entitas yang dikenal dengan server menghasilkan data yang dikonsumsi oleh entitas lain yang dikenal dengan client.

Ketika Anda menggunakan sebuah browser Web untuk mengakses situs Web, browser Anda merupakan client dan situs Web berperan sebagai server. Sebuah program yang dikenal dengan server Web dijalankan pada komputer yang menjadi lokasi dari situs Web. Browser Web menampilkan data yang dienkode dalam HTML. Browser Web menghubungkan ke situs Web, yang menyebabkan data HTML dikirim ke komputer client. Browser menerjemahkan HTML, menampilkan font, warna, dan citra dari halaman-halaman pada jendela browser.

Uniform Resource Locator (URL)

Uniform Resource Locator (URL) adalah cara universal dalam menangani objek-objek dan halaman-halaman pada sebuah jaringan. URL diawali dengan sebuah protokol seperti http://, https://, atau ftp://, yang diikuti dengan nama domain seperti microsoft.com, mit.edu, atau lainnya. Nama domain yang didefinisikan khusus untuk komputer Anda adalah localhost. URL dapat memuat path folder dan/atau nama file, seperti:

http://localhost/Default.aspx

http://www.microsoft.com

Menampilkan Halaman Web Standar

Ketika Anda menavigasi ke suatu halaman Web pada browser Web Anda, browser tersebut akan terhubung ke sebuah server Web. Pekerjaan dari server Web adalah menunggu permintaan koneksi, yang terjadi dalam dua langkah:

Browser Web melakukan koneksi ke server dengan mengirim sebuah HTTP request kepada server Web. Permintaan itu memuat suatu alamat IP seperti 128.42.96.34, atau sebuah URL seperti http://microsoft.com. Permintaan HTTP tersebut juga memuat nama dari suatu halaman Web, seperti Default.aspx.
Server Web menerjemahkan permintaan HTTP menjadi sebuah direktori dan nama file di dalam sistem file dari komputer server. Server membaca file yang diminta, yang sekarang disebut dengan halaman Web. Server kemudian mengirimkan halaman Web kembali ke browser Web melakukan jaringan. Browser kemudian menerjemahkan HTML dengan menampilkan teks, grafika, dan suara dan dengan mengeksekusi kode skripting.

Setelah mengirim halaman Web ke client, server kemudian memutus koneksi. Ia dapat menangani permintaan halaman Web dari client lain.

Setelah sebuah halaman Web ditampilkan, user dapat mengklik tombol atau menekan kunci Enter, yang menyebabkan isi halaman dikirim kembali ke server Web. Tindakan ini dikenal dengan postback. Server memproses halaman dan mengirim-ulang halaman Web termodifikasi ke browser. Pemrosesan ini melibatkan pembaruan kontrol-kontrol dan pengeksekusian fungsi-fungsi pada kode terkompilasi pada aplikasi.

Web Form ASP.NET

Aplikasi-aplikasi yang ditulis dengan ASP.NET menggunakan halaman-halaman Web yang dikenal dengan Web form. Web form dapat diidentifikasi berdasarkan ekstensi nama file. Web form memuat tag-tag HTML, kontrol-kontrol HTML (seperti tombol dan kotak teks), kontrol-kontrol interaktif spesial yang dinamakan dengan kontrol-kontrol sisi-server (atau kontrol-kontrol server). Kontrol-kontrol ini dapat berupa tombol, kotak list, dan kotak periksa yang dapat dieksekusi di server. Kontrol-kontrol itu tampak seperti kontrol-kontrol HTML tetapi ia lebih tangguh karena menggunakan event handler untuk menjalankan aksi-aksi yang didasarkan pada masukan user. Kontrol-kontrol tersebut berperilaku seperti kontrol-kontrol Windows.

Kode sumber untuk sebuah Web form biasanya disimpan di dalam sebuah file yang berelasi, dengan ekstensi nama file aspx.cs. Bagian dari aplikasi ini disebut pula dengan logika aplikasi.

Informasi konfigurasi umumnya disimpan pada dua file berbeda. File Web.config memuat informasi yang diperlukan tentang runtime environment. File lain (opsional), yang dinamakan dengan cascading style sheet (CSS), memuat sejumlah nama style atau gaya yang dapat dipakai untuk mengubah karakteristik-karakteristik pada halaman, termasuk warna, font, penyejajaran, dan penataan ruang.

Server Web

Anda dapat mengeksekusi aplikasi ASP.NET dengan tiga cara:

· ASP.NET Development Server diinstal secara otomatis dengan Visual Studio dan Visual Web Developer. Server ini mudah digunakan dan tanpa pengaturan sekuritas spesial, tetapi ia tidak terlihat oleh semua komputer lain pada sebuah jaringan. Anda tidak bisa, misalnya, menjalankan suatu situs Web pada satu mesin dan menggunakan mesin lain untuk membrowser ke situs tersebut.

· Internet Information Services (IIS) adalah sebuah server Web profesional yang dapat Anda jalankan di komputer Anda. Server ini perlu dikonfigurasi dengan hati-hati untuk memastikan sekuritas. Server ini terlihat pada sebuah jaringan (atau pada Internet), sehingga Anda dapat menggunakannya untuk menempatkan sebuah situs Web publik.

· Remote Web Server adalah sebuah situs Web yang dijalankan di suatu komputer di suatu tempat pada sebuah jaringan. Anda dapat menyalin aplikasi Anda ke server tersebut sebelum menjalankannya. Umumnya, Anda perlu menyediakan nama user dan password untuk mempulikasikan situs Web di server jenis ini. Banyak perusahaan menawarkan layanan ini.

HTML Designer

HTML Designer merupakan perangkat interaktif pada Visual Studio yang dapat Anda pakai untuk merancang dan mengkode halaman-halaman Web. Designer ini membangkitkan kode sumber HTML dan menanamkan kode-kode spesial yang mengidentifikasi kontrol-kontrol ASP.NET. Adalah dimungkinkan untuk menciptakan Web form menggunakan editor teks sederhana, tetapi hal itu memerlukan latihan yang cukup tinggi. HTML Designer menawarkan tiga view dari sebuah halaman Web:

Design view: Anda dapat secara visual mengedit halaman Web, menggunakan mouse untuk menggeret kontrol-kontrol dan batas-batas tabel. View ini sangat mirip dengan editor untuk Windows form pada Visual Studio.
Source view: Anda menggunakan view ini untuk secara langsung mengedit kode sumber HTML yang membangun suatu Web form.
Split view: Jendela dibagi antara panel Design dan panel Source. Perubahan yang dilakukan pada satu panel akan mengubah isi dari panel lain.

Web Browser Support

Sejumlah browser Web sangat popular belakangan ini, masing-masing dengan kapabilitas dan karakteristiknya. Untuk mempermudah beradaptasi dengan browser-browser yang berbeda, server Web yang kompatibel dengan ASP.NET secara otomatis akan mendeteksi jenis browser dari user dan menghasilkan HTML standar yang sesuai dengan browser tersebut.

Menggunakan Kelas Pada Aplikasi Web

Anda dapat menciptakan kelas-kelas yang berdiri sendiri seperti Siswa, Orang, atau Akun pada aplikasi Web. Pada dasarnya, hal itu merupakan hal yang baik sehingga Anda dapat menciptakan aplikasi-aplikasi Web multi-tingkat. Anda sebaiknya selalu menempatkan kelas-kelas itu pada suatu folder khusus di dalam projek Anda dengan nama App_Code. Ketika aplikasi dijalankan, server Web akan memeriksa apakah ada file di dalam folder yang telah dimodifikasi sejak terakhir dikompilasi. Kelas harus dideklarasikan public agar dapat diakses oleh halaman-halaman Web lain pada aplikasi Anda.

Jenis-Jenis Kontrol

Ketika Anda merancang Web form pada Visual Studio, jendela Toolbox memuat sejumlah kontrol yang berkaitan dengan Web yang ditempatkan pada grup-grup berikut:

Standard: Juga dengan kenal dengan kontrol-kontrol Web form. Grup ini memuat kontrol-kontrol yang paling umum digunakan pada Web form. Beberapa di antaranya yang ada pada Windows form adalah Label, Button, ListBox, CheckBox, CheckBoxList, dan RadioButton. Yang unik pada pemrograman Web adalah kontrol LinkButton dan RadioButton.
Data: Kontrol-kontrol untuk menghubungkan ke sumber data; menampilkan tabel-tabel database dan data XML pada grid dan list.
Validation: Kontrol-kontrol untuk memvalidasi masukan user ke dalam kontrol-kontrol seperti kotak teks.
Navigation: Kontrol-kontrol untuk menavigasi antar halaman Web.
Login: Kontrol-kontrol yang berkaitan dengan pengotentikasian user ketika ia melakukan login ke sebuah situs Web dengan nama user dan password.
WebParts: Kontrol-kontrol yang dapat dipakai user untuk memodifikasi isi, tampilan, dan watak dari halaman Web secara langsung dari sebuah browser.
AJAX Extensions: Mengendalikan kegunaan teknologi Ajax sisi-server, suatu cara dalam memperbaiki pengalaman user pada browser Web.
Dynamic Data: Kontrol DynamicControl, DynamicDataManager, dan lainnya.
Reporting: Kontrol ReportViewer.
HTML: Kontrol-kontrol yang ditemukan pada halaman Web, seperti tombol, kotak periksa, tombol radio, list, dan kotak teks. Kontrol-kontrol ini kompatibel dengan HTML standar dan memiliki properti yang terbatas, tanpa penanganan event, dan tidak ada kelas pendukung.
General: Memuat teks yang dapat Anda geret dari area pengkodean ke jendela ToolBox.

4.2 Menciptakan Aplikasi ASP.NET

Jenis Situs Web

Empat situs Web, yaitu File System, Local IIS, FTP Site, dan Remote Site, ada pada jendela Open Web Site, seperti ditunjukkan pada Gambar 4.1. Aplikasi ASP.NET juga dikenal sebagai aplikasi Web atau situs Web. Untuk menemukan jendela ini, pilih Open dari menu FILE, dan kemudian pilih Web Site.

Gambar 4.1 Jendela Open Web Site

Situs Web File System dijalankan secara langsung pada ASP.NET Development Server yang disediakan oleh Visual Studio dan Visual Web Developer. File-file aplikasi dapat disimpan di dalam direktori manapun. Server mudah digunakan dan tidak menyebabkan sistem operasi mengalami serangan-serangan sekuritas. Jenis situs Web ini sangat cocok untuk lingkungan laboratorium di kampus. Anda akan menggunakan situs Web File System pada buku ini.

Situs Local IIS dijalankan pada utilitas sistem operasi Windows dengan nama Internet Information Services (IIS). Ia adalah server Web profesional dengan konfigurasi dan sekuritas yang tangguh, tetapi server ini memerlukan keahlian yang cukup dalam membuat sejumlah pengaturan. IIS mensyaratkan Anda untuk memiliki hak administratif pada komputer yang menjalankan server agar dapat menguji dan mendebug aplikasi-aplikasi Web.

FTP Site dan Remote Site mengacu pada situs-situs Web ASP.NET yang berada di suatu komputer (pada jaringan atau Web). Anda perlu menyediakan nama user dan password untuk mengunggah salinan aplikasi Anda. Kedua situs ini berguna ketika Anda ingin mempublikasikan aplikasi Anda ke situs Web publik.

Menciptakan Sebuah Aplikasi Web

Untuk menciptakan aplikasi Web pada Visual Studio, Anda memilih New dari menu FILE, kemudian memilih Web Site. Jendela New Web Site akan memberikan anda sejumlah opsi situs Web, seperti ditunjukkan pada Gambar 4.2. Pilih ASP.NET Empty Web Site.

Gambar 4.2 Jendela New Web Site

Pada list dropdown di pojok kiri bawah dari jendela, pilih File System. Kotak edit tepat di kanan dari lokasi dapat Anda pakai untuk memilih path dan nama folder untuk projek Anda. Dimisalkan bahwa Anda menciptakan sebuah aplikasi dengan nama Klik pada folder c:\data\WebKu. Maka, sebuah folder projek dengan nama c:\data\WebKu\Klik secara otomatis akan diciptakan oleh Visual Studio.

Nama situs Web akan ditampilkan pada jendela Solution Explorer. Sebuah situs Web ASP.NET kosong hanya memiliki satu file dengan nama Web.config, yang dikenal sebagai file konfigurasi Web. Nanti, Anda akan mulai memodifikasi file ini.

Menambahkan Sebuah Halaman Pada Situs Web

Pada setiap situs Web, Anda tentu ingin memiliki sedikitnya satu halaman (yang dikenal dengan Web form pada ASP.NET). Untuk menambahkan sebuah halaman, klik kanan pada nama situs Web pada jendela Solution Explorer, dan pilih Add, dan kemudian pilih Add New Item. Jendela yang ditunjukkan pada Gambar 4.3 akan ditampilkan. Untuk halaman pertama yang Anda tambahkan pada situs Anda, nama Default.aspx biasanya adalah pilihan umum.

Gambar 4.3 Menambahkan sebuah halaman pada situs Web

Sebuah file kedua dengan nama Default.aspx.cs (kode di balik file) juga secara otomatis diciptakan. Ia memuat kode C# yang Anda gunakan untuk event handler dan logika program lain. Gambar 4.4 menunjukkan jendela Solution Explorer untuk sebuah aplikasi dengan nama WebSite1.

Gambar 4.4 File-file diciptakan untuk aplikasi WebSite1

Source, Design, dan Split View

Ketika Anda membuka sebuah projek Web atau menambahkan sebuah halaman pada suatu projek, halaman akan ditampilkan pada Source view. Pada Gambar 4.5, di dekat bawah, perhatikan tiga tab dengan label Design, Split, dan Source. Ketiganya merupakan tiga view, atau tiga cara dalam melihat sebuah halaman Web.

Gambar 4.5 Menampilkan sebuah halaman dengan Source view

Design View

Jika Anda berpindah ke Design view pada sebuah halaman kosong, maka Anda tidak akan melihat apapun. Tetapi Anda dapat mengetikkan teks secara langsung ke dalam suatu Web form ketika ia dibuka dengan Visual Studio. Teks yang Anda ketikkan dikenal dengan teks statis, dan ia mengalir dari atas ke bawah, kiri ke kanan. Dengan kata lain, ia berperilaku seperti dokumen teks biasa. Pada Gambar 4.6, misalnya, tiga baris teks diketikkan secara langsung ke dalam sebuah Web form pada Design view.

Gambar 4.6 Teks statis yang diketikkan secara langsung pada sebuah form pada Design view

Source View

Anda dapat melihat dan mengetikkan teks ke dalam sebuah form ketika berada pada Source view. Pada kasus itu, Anda perlu mengetikkan teks di antara penanda yang dikenal dengan tag HTML. Pada contoh berikut, teks Anda ditampilkan di antara tag <div> dan tag </div>:

<body>

<div>

Selamat Datang ke Situs Webku<br />

Semoga Anda menikmatinya.<br />

Sangat mudah untuk menciptakan situs Web sendiri.</div>

</form>

</body>

Bagian-bagian diawali dengan sebuah tag seperti <body> dan diakhiri dengan tag yang sama dengan sebuah slash (karakter /) yang ada sebelum nama tag, misalnya </body>. Setiap Web form memiliki sebuah tag <form>. Tag <div> opsional disisipkan secara otomatis pada setiap halaman baru yang diciptakan oleh Visual Studio. Anda dapat menggunakan <div> untuk menugaskan properti font dan warna (yang disebut dengan style atau gaya) yang bisa diterapkan pada semua teks yang mengikuti tag <div> sampai ditemukannya tag </div>.

Setiap baris teks pada contoh ini diakhiri dengan pemutus baris, yang diekspresikan sebagai <br />. Ada satu jenis pemutu baris lain yang akan sering Anda temui, yaitu <p />, sebuah pemutus paragraf. Untuk melihat perbedaannya, Anda akan memodifikasi teks berikut:

<body>

<div>

Selamat Datang ke Situs Webku<p />

Semoga Anda menikmatinya.<p />

Sangat mudah untuk menciptakan situs Web sendiri.</div>

</form>

</body>

Dengan menukar ke Design view pada Gambar 4.7, Anda dapat melihat bahwa setiap baris merupakan suatu paragraf yang terpisah. Anda pada umumnya bekerja pada Design view. Tetapi Anda secara bertahan akan bekerja pada Source view, untuk memberikan Anda kendali untuk mengontrol keluaran halaman.

Gambar 4.7 Setiap baris diakhiri dengan pemutus paragraf

Split View

Split view, seperti ditunjukkan pada Gambar 4.8, menunjukkan bagaimana teks pada panel Design diterjemahkan ke dalam HTML pada panel Source. Ketika Anda memodifikasi isi dari satu panel, panel lain akan diperbarui secara otomatis.

Gambar 4.8 Panel Split

Menjalankan Aplikasi Web

Untuk menjalankan sebuah aplikasi Web yang dibuka pada Visual Studio, klik kanan pada nama dari form startup dari aplikasi pada jendela Solution Explorer dan pilih View in Browser dari menu yang ditampilkan. Browser Web default akan dipilih bagi Anda, tetapi Anda dapat memilih browser lain. Untuk melihat sejumlah browser Web yang tersedia, klik kanan pada Web form pada jendela Solution Explorer dan pilih Browser With… dari menu. Jendela, seperti ditunjukkan pada Gambar 4.9, dapat Anda pakai untuk memilih browser default. Pada Tutorial 4.1, Anda akan menciptakan aplikasi Web pertama Anda.

Gambar 4.9 Memilih sebuah browser Web

Tutorial 4.1: Menciptakan Aplikasi Klik

Pada tutorial ini, Anda menciptakan sebuah aplikasi Web dengan nama Klik yang memuat sebuah kontrol Button dan sebuah label yang menampilkan teks ketika tombol diklik.

Sebagai langkah persiapan, Anda perlu memutuskan direktori mana yang akan Anda gunakan untuk menyimpan projek-projek Web Anda.

Langkah-Langkah Tutorial

Langkah 1: Awali Visual Studio dan, dari menu FILE, pilih New, dan kemudian pilih Web Site. Seperti pada Gambar 4.10, pilih Empty ASP.NET Web Site dari sejumlah opsi jenis projek yang disediakan, namai dengan Klik, dan klik tombol OK untuk menutup jendela.

Gambar 4.10 Jendela New Web Site

Langkah 2: Anda akan menambahkan sebuah Web form baru dengan nama Default.aspx pada situs Web. Untuk melakukannya, klik kanan pada nama situs Web pada jendela Solution Explorer, pilih Add New Item, pilih Web Form, dan namai form dengan Default.aspx.

Langkah 3: Anda sedang melihat Source view dari sebuah Web form kosong. Klik tab Design di bawah untuk berpindah ke Design view.

Langkah 4: Selanjutnya, Anda akan menciptakan sebuah judul yang akan ditampilkan pada batang judul dari browser Web ketika aplikasi dijalankan. Pilih DOCUMENT pada jendela Properties dan tetapkan properti Title menjadi Aplikasi Klik.

Langkah 5: Pindah ke Source view dan verifikasi bahwa teks berikut ditampilkan di antara tag <title> dan </title>:

<title>Aplikasi Klik</title>

Kembali ke Design view.

Gambar 4.11 List pull-down dari toolbar pemformatan

Langkah 6: Lihat dropdown list di sisi kiri dari toolbar pemformatan tepat di atas jendela Toolbox (lihat Gambar 4.11). List ini memuat sejumlah format HTML yang memengaruhi ukuran font, warna, dan atribut lainnya. Pilih Heading 1 <H1>.

Langkah 7: Klik mouse pada baris pertama dari form dan ketikkan Aplikasi Klik Saya. Tekan Enter untuk pindah ke baris berikutnya. Gambar 4.12 menunjukkan contoh pekerjaan Anda sejauh ini.

Gambar 4.12 Setelah penambahan gaya Heading 1

Langkah 8: Geret sebuah kontrol Button dari jendela Toolbox ke dalam form Anda. Gunakan mouse untuk memperbesarnya. Tetapkan properti Text-nya menjadi Klik Di Sini. Tetapkan properti ID-nya menjadi tombolKlik.

Langkah 9: Klik mouse tepat di kanan Button dan tekan Enter untuk pindah ke baris berikutnya. Sisipkan sebuah kontrol Label pada baris selanjutnya. Tetapkan properti ID-nya menjadi labelPesan dan kosongkan properti Text-nya.

Langkah 10: Selanjutnya, Anda akan menambahkan kode pada event handler Click dari tombol. Klik ganda pada Button dan tambahkan statemen berikut pada event handler Click-nya:

labelPesan.Text = "Ini adalah event handler Click";

Anda telah membuka file dengan nama Default.aspx.cs, yang merupakan file kode di belakang halaman Web ini. Kode yang dituliskan pada file ini akan dikompilasi oleh Visual C#. Ia dapat memuat kelas-kelas dan objek-objek dengan cara yang sama seperti Windows form.

Gambar 4.13 Setelah mengklik tombol pada aplikasi Klik

Langkah 11: Simpan projek. Untuk membuka Default.aspx pada browser Web, klik kanan pada namanya pada jendela Solution Explorer dan pilih View in Browser. Ketika browser membuka aplikasi Anda, klik pada tombol Klik Di Sini. Sebuah pesan akan ditampilkan di bawah tombol, seperti ditunjukkan pada Gambar 4.13.

Langkah 12: Tutup jendela browser.

Menjalankan dengan Mode Debug

Anda dapat memulai sebuah program dengan mode Debug dengan memilih Start Debugging dari menu DEBUG. Pertama kali Anda menjalankan sebuah aplikasi Web pada mode Debug, Anda akan melihat kotak pesan seperti ditunjukkan pada Gambar 4.14. Ketika Anda mengklik tombol OK, sebuah file konfigurasi dengan nama Web.config akan ditambahkan pada projek Anda, yang memuat sebuah opsi untuk mengijinkan debugging.

<system.web>

</system.web>

Gambar 4.14 Mendebug suatu aplikasi

Beberapa Saran

Saran 1: Mengganti nama kelas di balik sebuah Web form

Jika Anda mengganti nama kelas dari sebuah Web form di dalam file kode-belakang, Anda perlu melakukan secara manual untuk memodifikasi baris pertama dari kode XHTML dari Web form. Dimisalkan bahwa kelas form bernama Default:

public partial class _Default : System.Web.UI.Page

Dan Anda mengganti nama kelas menjadi FormUtama:

public partial class FormUtama : System.Web.UI.Page

Kemudian, Anda perlu memastikan file aspx dari form dan melihat direktif Page pada baris pertama:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="FormUtama" %>

Saran 2: Menciptakan Situs Web HTTP

Pada opsi Web location pada jendela Add New Web, jika Anda seleksi opsi HTTP, situs Web Anda akan dijalankan di bawah Internet Information Services (IIS). Anda perlu memasukkan URL dari situs Web baru Anda. Server harus dijalankan pada salah satu dari dua tempat:

· Pada komputer lokal Anda. Anda perlu menginstal dan mengkonfigurasi IIS agar dapat memilih jenis situs Web ini untuk menjalankannya pada komputer lokal Anda. Anda perlu mengkonfigurasi lokasi basis untuk semua situs Web Anda, menggunakan opsi-opsi pada IIS.

· Pada remote Web server dimana Anda akan memiliki sebuah akun dengan penyedia layanan Internenet yang mendukung ASP.NET. Anda menggunakan sebuah nama domain pada server tersebut sebagai lokasi basis untuk situs HTTP Anda. Sebagai contoh, dimisalkan nama domain Anda adalah domainku.com. Anda dapat menciptakan sebuah aplikasi baru dengan nama WebKu dengan menetapkan URL berikut: http://domainku.com/WebKu. Penyedia layanan Internet akan meminta nama user dan password Anda.

4.3 Kontrol-Kontrol ASP.NET

Kontrol-kontrol ASP.NET, yang juga dikenal dengan kontrol-kontrol server Web, membuat aplikasi Web dinamis dan interaktif. Kontrol-kontrol ini jauh lebih tangguh daripada kontrol-kontrol HTML standar karena tiap kontrol didefinisikan oleh suatu kelas dengan sejumlah properti, metode, dan event. Tampilan LAF (look and feel) dari tiap kontrol menyerupai kontrol Windows, yang membuatnya mudah untuk dipelajari.

Kontrol-kontrol ASP.NET merupakan kontrol-kontrol yang akan sering Anda gunakan. Kecuali yang ditandai dengan asterisk (*), semua kontrol memiliki kontrol sepupu pada Windows form.

Button

ImageButton

LinkButton

Text Box

Label

RadioButton

RadioButtonList*

CheckBox

CheckBoxList*

ListBox

DropDownList (sama dengan kontrol ComboBox)

Image (sama dengan kontrol PictureBox)

Calendar (sama dengan kontrol MonthCalendar)

Kontrol ASP.NET memiliki properti-properti yang hampir sama dengan kontrol-kontrol sepupunya pada Windows Form. Contohnya adalah properti Text, Enabled, Visible, Font, BorderStyle, ReadOnly, dan TableIndex. Ada sedikit perbedaan antara kontrol-kontrol ASP.NET dan kontrol-kontrol Windows:

Properti ID dari kontrol-kontrol ASP.NET ekivalen dengan properti Name dari kontrol-kontrol Windows.
Kontrol-kontrol ASP.NET memiliki sebuah properti penting baru dengan nama AutoPostBack.
Kontrol-kontrol ASP.NET akan kehilangan nilai-nilai runtime-nya ketika user berpindah halaman ke halaman lain. Teknik pemrograman spesial dapat mengatasi kelemahan ini.

Kontrol-kontrol server Web hanya diperuntukkan bagi ASP.NET. Ketika user terhubung ke sebuah halaman Web ASP.NET, suatu proses khusus terjadi, seperti ditunjukkan pada Gambar 4.15. Pada langkah (2), server Web membaca dan menginterpretasi kontrol-kontrol ASP.NET pada halaman dan mengeksekusi statemen-statemen Visual C Sharp atau Visual Basic pada file kode-belakang dari aplikasi. Pada langkah (3), server menciptakan sebuah halaman Web termodifikasi yang memuat kontrol-kontrol dan tag-tag HTML. Pada langkah (4), halaman Web termodifikasi dikirim kembali ke user dan ditampilkan pada browser Web.

Gambar 4.15 Melakukan koneksi ke halaman Web ASP.NET

Kontrol Label

Kontrol Label ASP.NET sangat identik dengan kontrol Label pada aplikasi Windows. Ketika menampilkan teks, Anda perlu menggunakan kontrol Label hanya ketika isinya akan berubah ketika aplikasi Web dijalankan, atau ketika Anda ingin mengubah properti Visible-nya. Anda bisa menugaskan sebuah nama ke properti ID dari kontrol Label jika Anda berencana mengaksesnya pada statemen-statemen kode.

Berikut adalah bagaimana kontrol Label dideklarasikan di dalam kode sumber XHTML:

<asp:Label

ID="Label1"

runat="server"

Text="Ini adalah sebuah label">

</asp:Label>

Berikut adalah beberapa hal penting yang perlu diperhatikan:

· Nilai-nilai atribut diapit dengan tanda kutip.

· Tidak ada aturan terkait indentasi atau pemutus baris. Programer seringkali menatap tiap nilai properti pada baris terpisah, seperti ditunjukkan di atas, untuk mempermudah pengeditan.

· Kontrol-kontrol ASP.NET selalu diawali dengan prefiks asp:.

· Semua kontrol ASP.NET memerlukan atribut runat = “server”.

· Sebuah nilai default ditugaskan kepada properti ID, tetapi Anda bisa menggantinya jika Anda perlu mengaksesnya pada statemen kode.

· Properti Text memuat sebuah string yang akan ditampilkan pada label saat aplikasi dijalankan.

Gambar 4.16 menunjukkan bagaimana label ditampilkan ketika dijalankan pada browser. Jika Anda ingin membuat salinan dari sebuah kontrol, Anda dapat melakukannya pada Source view dengan menyalin kode. Anda hanya perlu memastikan bahwa properti ID dari tiap kontrol memiliki nilai yang berbeda.

Gambar 4.16 Sebuah kontrol Label pada saat aplikasi Web dijalankan

Kontrol TextBox

Kontrol TextBox ASP.NET pada sejumlah cara sama dengan kontrol TextBox untuk aplikasi Windows. Properti Text memuat teks yang akan dimasukkan oleh user. Properti MaxLength membatasi banyak karakter yang bisa diketikkan user. Properti TextMode memiliki tiga opsi nilai:

· SingleLine: Dipakai user untuk hanya memasukkan satu baris masukan.

· MultiLIne: Dipakai user untuk memasukkan sejumlah baris masukan ke dalam kotak teks.

· Password: Karakter-karakter yang diketikkan user akan ditampilkan sebagai asterisk-asterisk.

Internet Explorer dan sejumlah browser lain berperilaku berbeda ketika menggunakan kontrol TextBox. Agar sebisa mungkin kompatibel dengan semua browser Web, Anda sebaiknya menggunakan properti Columns untuk mengendalikan lebar dari TextBox. Jika Anda ingin user memasukkan beberapa baris masukan, Anda bisa menetapkan properti Rows sesuai kebutuhan. Pada kode berikut, Anda mendeklarasikan dua kotak teks, satu SingleLine dan satu lagi MultiLine, dengan suatu teks statis di antara keduanya:

TextMode = SingleLine:

<asp:TextBox

ID="TextBox1"

BorderWidth="1"

runat="server">

</asp:TextBox>

<p />

TextMode = Multiline:<br />

<asp:TextBox

ID="TextBox2"

runat="server"

Columns="40"

TextMode="MultiLine"

BorderWidth="1"Rows="15">

</asp:TextBox>

Perhatikan bahwa Anda juga menetapkan properti BorderWidth dari kedua kotak teks menjadi satu piksel untuk membuatnya lebih mudah dilihat.

Gambar 4.17 menunjukkan bagaimana tampilan dari kedua kontrol TextBox ini pada browser.

Visual Studio tidak menyediakan sebuah perangkat untuk menetapkan urutan Tab pada Web form. Secara default, semua kontrol memililiki properti TabIndex menjadi 0, dan urutan tab pada saat aplikasi dijalankan akan berpindah secara sekuensial ke bawah halaman. Jika Anda ingin menetapkan urutan tab tertentu, Anda perlu menetapkan TabIndex untuk tiap kontrol menjadi sebuah nilai yang lebih besar dari 0.

Gambar 4.17 Contoh TextMode: SingleLine dan MultiLine

Kontrol CheckBox

Kontrol CheckBox ASP.NET hampir identik dengan kontrol CheckBox pada aplikasi Windows. Gunakan properti Text-nya untuk menetapkan teks yang akan ditampilkan, dan evaluasi properti Checked pada saat aplikasi dijalankan. Properti TextAlign dapat Anda pakai untuk memosisikan teks ke kiri atau ke kanan kotak.

<asp:CheckBox

ID="chkSavePassword"

Text="Save my password"

runat="server" />

Perhatikan bahwa tag </asp:CheckBox> penutup tidak diperlukan.

Pada Tutorial 4.2, Anda akan menciptakan sebuah Web form yang menggunakan label, kotak teks, tombol, dan kotak periksa.

Tutorial 4.2: Aplikasi Piknik Siswa

Pada tutorial ini, Anda akan menciptakan sebuah aplikasi online untuk piknik siswa. Gambar 4.18 menunjukkan bagaimana aplikasi ketika dijalankan pada Web browser.

Gambar 4.18 Aplikasi Piknik Siswa ketika dijalankan

Langkah-Langkah Tutorial

Langkah 1: Ciptakanlah sebuah situs Web ASP.NET kosong dengan nama Piknik Siswa dan tambahkan sebuah form dengan nama Default.aspx pada situs.

Langkah 2: Buka Default.aspx pada Source view dan hapus tag <div> dan </div>.

Langkah 3: Tambahkan kode berikut antara tag <form id=”form1” runat=”server”> dan tag </form>:

<h2>Piknik Siswa Jurusan Komputer</h2>

Nama Depan

<asp:TextBox

ID="teksPertama"

runat="server">

</asp:TextBox>

Baris pertama menciptakan sebuah heading level-dua dengan judul aplikasi. Baris kedua memuat teks statis. Di awal baris ketiga, sebuah kontrol TextBox dinamai dengan teksPertama.

Langkah 4: Tambahkan sebuah kotak teks kedua untuk nama belakang. Untuk menghemat waktu, Anda bisa menyalin kotak teks pertama:

<p />

Nama Belakang

<asp:TextBox

ID="teksBelakang"

runat="server">

</asp:TextBox>

Baris pertama menyisipkan sebuah pemecah paragraf.

Langkah 5: Tambahkan kode berikut, yang menyisipkan sebuah pemecah paragraf yang diikuti dengan sebuah kontrol CheckBox:

<p />

<asp:CheckBox

ID="chkVegetarian"

runat="server"

Text="Saya seorang vegetarian"/>

Langkah 6: Tambahkan pemecah paragraf dan kontrol Button berikut:

<p />

<asp:Button

ID="tombolKonfirmasi"

runat="server"

Text="Konfirmasi" />

Langkah 7: Tambahkan sebuah kontrol Label yang akan memuat pesan respon kepada user:

<p />

<asp:Label

ID="labelPesan"

runat="server">

</asp:Label>

Selanjutnya, Anda akan menuliskan kode di dalam file kode-belakang dari form.

Langkah 8: Buka file dengan nama Default.aspx.cs dan tambahkan event handler Page_Load berikut:

protected void Page_Load(object sender, EventArgs e)

{

teksPertama.Focus();

}

Statemen ini menetapkan fokus masukan pada TextBox ketika browser memuat halaman.

Langkah 9: Ciptakan event handler Click berikut:

protected void tombolKonfirmasi_Click(object sender, EventArgs e)

{

//user mengklik tombol Konfirmasi

labelPesan.Text = "Terimakasih telah mendaftar untuk " +

"piknik, " + teksPertama.Text + " " + teksBelakang.Text + ".";

if (chkVegetarian.Checked)

labelPesan.Text += "Anda akan menerima makanan " +

"vegetarian.";

}

Kode ini tampak familiar karena ia identik dengan event handler Click yang ditulis untuk aplikasi Windows. Tujuan Microsoft adalah dengan membuat transisi dari pemrograman desktop ke pemrograman Web sehalus mungkin.

Langkah 10: Lihat halaman Default.aspx pada browser Anda. Masukkan nama seseorang, centang kotak periksa, dan klik tombol Konfirmasi. Keluaran akan tampak seperti pada Gambar 4.19. Perhatikan bahwa ketika

Gambar 4.19 Program Piknik Siswa, setelah mengklik tombol Konfirmasi

Langkah 11: Hapus centang pada kotak periksa dan klik tombol Konfirmasi kembali. Porsi vegetarian dari pesan akan hilang.

Event-Event Web Form

Programer C# biasanya merasa senang ketika mengetahui bahwa ia dapat menuliskan kode pada halaman-halaman ASP.NET dengan cara yang hampir sama dengan ketika ia menuliskannya untuk aplikasi Windows. Sebagai contoh, setiap tombol menghasilkan event Click:

protected void tombolOK_Click(object sender, EventArgs e)

{

}

Event Page_Load

Mungkin event Web form yang paling penting dari semuanya adalah event Page_Load, yang hampir sama dengan event Form_Load pada aplikasi Windows Form. Event Page_load dipicu ketika sebuah halaman pertama kali dimuat ke browser user dan dikirim ke server.

Anda umumnya menempatkan kode di dalam Page_load yang menginisialisasi kontrol-kontrol dan variabel-variabel level-kelas. Pada Tutorial 4.2, misalnya, Anda menyisipkan kode yang menetapkan fokus masukan awal pada kontrol TextBox teksDepan.

teksDepan.Focus()

Page_Load juga dipicu ketika suatu halaman dikirim kembali ke server. Ini terjadi, misalnya, ketika user mengklik sebuah kontrol Button.

Properti IsPostBack

Kadangkala kode perlu dieksekusi hanya sekali ketika sebuah halaman dimuat tetapi bukan setiap kali halaman dikirim kembali. Sebagai contoh, Anda bisa saja ingin mempraseleksi sebuah item ListBox ketika form dimuat. Ada satu cara untuk mengetahui apakah halaman sedang dikirim kembali dan tidak dimuat. Objek Page memiliki sebuah properti dengan nama IsPostBack yang bernilai true ketika halaman dikirim kembali bukan pada saat halaman dimuat pertama kalinya. Kode berikut menunjukkan bagaimana Anda dapat secara selektif mengeksekusi kode ketika halaman dimuat untuk pertama kalinya atau ketika ia dikirim kembali:

protected void Page_Load(object sender, EventArgs e)

{

if(IsPostBack)

//kode ini hanya dieksekusi ketika pengiriman kembali

else

//kode ini hanya dieksekusi ketika halaman pertama kali dimuat

//kode di sini dieksekusi ketika halaman dimuat dan

//ketika halaman dikirim kembali

}

Tutorial 4.3: Menjejak Event-Event Server

Pada tutorial ini, Anda akan menciptakan sebuah aplikasi yang menjejak sejumlah event server berbeda ketika terjadi pada sebuah halaman Web. Event-event yang Anda jejak adalah Page_Load, Click, dan TextChanged.

Event-event dipicu dengan runtun berbeda dari Windows form. Web form yang ditunjukkan pada Gambar 4.20 menyisipkan sebuah pesan pada kontrol ListBox setiap kali event Page_Load dipicu. Dari yang ditampilkan, Anda dapat melihat bahwa Page_Load dipicu ketika halaman dimuat pada browser.

Langkah-Langkah Step

Langkah 1: Ciptakanlah sebuah situs Web ASP.NET kosong dengan Demo Event dan tambahkan sebuah Web form dengan nama Default.aspx pada situs.

Langkah 2: Buka Default.aspx pada Source view dan hapus tag <div> dan </div>.

Gambar 4.20 Saat Web form baru saja selesai dimuat

Langkah 3: Tambahkan kode berikut di antara tag <form id=”form1” runat=”server”> dan tag </form>:

<h1>Event-Event</h1>

Masukkan Nama Anda:

<asp:TextBox

ID="teksNama"

Columns="25"

runat="server">

</asp:TextBox>

<asp:Button

ID="tombolOK"

runat="server"

Text="OK" />

<p />

<asp:ListBox

ID="listEvent"

runat="server"

Width="250px"

Height="109px">

</asp:ListBox>

Kontrol ListBox pertama-tama kosong, tetapi ia akan diisi dengan nama-nama event.

Langkah 4: Buka file kode-belakang dari form dan sisipkan kode berikut di dalam kelas:

protected void Page_Load(object sender, EventArgs e)

{

listEvent.Items.Add("Page_Load");

}

protected void teksNama_TextChanged(object sender, EventArgs e)

{

listEvent.Items.Add("TextChanged");

}

protected void tombolOK_Click(object sender, EventArgs e)

{

listEvent.Items.Add("Button Click");

}

Event Page_Load, TextChanged, dan Click semuanya direpresentasikan pada kode ini. Setiap handler menuliskan sebuah baris untuk kontrol ListBox yang mengidentifikasi nama event.

Langkah 5: Ketikkan sebuah nama dan klik tombol OK. Seperti ditunjukkan pada Gambar 4.21, event Page_Load dieksekusi kembali karena sebuah event postback dipicu. Kemudian event handler TextChanged dieksekusi, yang diikuti oleh event Click dari tombol.

Gambar 4.21 Setelah memasukkan nama dan mengklik tombol OK

4.4 Kontrol-Kontrol Jenis-List

Kontrol ListBox, DropDownList, CheckBoxList, dan RadioButtonList dapat diklasifikasikan sebagai kontrol-kontrol jenis-list. Semuanya memiliki karakteristik-karakteristik yang sama:

· Semuanya menggunakan tag <ListItem> untuk mengidentifikasi item-item di dalamnya.

· Semuanya memiliki koleksi Items, dan Anda dapat menambahkan item-item ke dalamnya menggunakan jendela ListItem Collection Editor, seperti ditunjukkan pada Gambar 4.22.

· Semuanya memiliki sebuah properti ValueMember.

· Semuanya memiliki sebuah event SelectedIndexChanged.

Gambar 4.22 Jendela ListItem Collection Editor

Semuanya memiliki properti-properti runtime (saat aplikasi dijalankan):

· Properti SelectedIndex menghasilkan indeks dari item terseleksi.

· Properti SelectedItem menghasilkan item terseleksi, sebuah objek ListItem.

· Properti SelectedValue menghasilkan isi bidang yang diidentifikasi oleh properti ValueMember.

Properti SelectedIndex bernilai 0 ketika tidak ada item yang diseleksi.

Kontrol ListBox

Pada banyak cara, kontrol ListBox ASP.NET sama dengan kontrol ListBox untuk aplikasi Windows Form. Perbedaan utamanya adalah bahwa item pertama (pada indeks 0) secara otomatis diseleksi ketika halaman Web ditampilkan. Berikut adalah bagaimana sebuah ListBox kosong dengan nama listWarna akan dikode pada XHTML:

<asp:ListBox

ID="listWarna"

runat="server"

</asp:ListBox>

Opsi lain adalah dengan menambahkan properti Width dan Height, diukur dalam piksel, seperti berikut:

<asp:ListBox

ID="listWarna"

runat="server"

Width="150px"

Height="50px">

</asp:ListBox>

Menambahkan Item ListBox

Sebuah ListBox memiliki suatu koleksi Items, yang dapat diisi pada saat aplikasi dijalankan dengan memanggil metode Items.Add. Atau pada Design view, Anda dapat membuka jendela ListBox Tasks yang ditampilkan pada Gambar 4.23, dan memilih Edit Items. Ini akan membuka jendela ListItem Collection Editor.

Gambar 4.23 Jendela ListBox Tasks

Atau Anda dapat menyisipkan item-item secara langsung pada kode XHTML, seperti ditunjukkan berikut. Setiap item dienkode sebagai kontrol ListItem ASP.NET:

<asp:ListBox

ID="listWarna"

runat="server">

<asp:ListItem>Biru</asp:ListItem>

<asp:ListItem>Merah</asp:ListItem>

<asp:ListItem>Hijau</asp:ListItem>

<asp:ListItem>Lavender</asp:ListItem>

</asp:ListBox>

SelectionMode

Anda dapat menggunakan properti SelectionMode untuk menentukan apakah user dapat menyeleksi satu item atau beberapa item dari sebuah ListBox. Dua opsi yang ada adalah Single dan Multiple. Pada mode Multiple, user dapa menahan kunci Ctrl untuk memilih beberapa item atau menahan kunci Shit untuk menyeleksi suatu rentang item.

Event SelectedIndexChanged dan Properti AutoPostBack

Anda dapat menggunakan event handler SelectedIndexChanged untuk merespon seleksi oleh user pada sebuah kontrol jenis-list. Ada satu pertimbangan penting: properti AutoPostBack harus bernilai true jika Anda ingin seleksi user dideteksi dengan segera. Jika tidak, event SelectedIndexChanged tidak akan dipicu sampai form dikirim kembali ke server oleh kontrol lain (seperti tombol). Secara default, properti AutoPostBack bernilai false.

Ketika properti AutoPostBack bernilai true untuk sebuah kontrol jenis-list, user akan mengalami tunda sinkat setiap kali ia mengklik list. Tergantung dari waktu tanggap dari server Web, tunda bisa membuat user tidak nyaman. Kebanyakan aplikasi tidak mengirim kembali ke server setiap kali user menyeleksi item di dalam list. Tetapi, membuat properti AutoPostBack bernilai default false untuk kontrol CheckBox, CheckBoxList, DropDownList, ListBox, ListControl, RadioButton, dan TextBox. Kontrol-kontrol lain, seperti Button, LinkButton, dan ImageButton secar otomatis mengirim halaman terkini kembali ke server, sehingga kontrol-kontrol tersebut tidak perlu memiliki properti AutoPostBack.

Kontrol

Kontrol CheckBoxList tampak seperti sebuah grup kotak periksa tetapi bekerja seperti layaknya ListBox. Pada dasarnya, kode berikut identik dengan ListBox, kecuali bahwa Anda mengubah ListBox menjadi CheckBoxList:

<asp:CheckBoxList

ID="listWarna"

runat="server">

<asp:ListItem>Biru</asp:ListItem>

<asp:ListItem>Merah</asp:ListItem>

<asp:ListItem>Hijau</asp:ListItem>

<asp:ListItem>Lavender</asp:ListItem>

</asp:CheckBoxList>

Gambar 4.24 Kontrol CheckBoxList

Sama seperti ListBox, sebuah CheckBoxList memiliki properti SelectedIndex, SelectedItem, dan SelectedValue. Ia juga memiliki koleksi Items, dan setiap item memiliki properti Selected (yang bernilai true atau false).

Gambar 4.24 menunjukkan CheckBoxList saat aplikasi dijalankan. Anda dapat beriterasi pada koleksi Items untuk mengetahui kotak periksa mana yang telah dicentang. Kode berikut adalah contoh untuk melakukannya:

foreach (ListItem item in listWarna.Items)

{

if (item.Selected)

{

//lakukan sesuatu

}

Kontrol DropDownList

Kontrol DropDownList dapat dipakai user untuk memilih satu item dari sebuah list. Berikut adalah bagaimana kontrol ini dikodekan:

<asp:DropDownList

ID="listWarna"

runat="server">

<asp:ListItem>Biru</asp:ListItem>

<asp:ListItem>Merah</asp:ListItem>

<asp:ListItem>Hijau</asp:ListItem>

<asp:ListItem>Lavender</asp:ListItem>

</asp:DropDownList>

Sekali lagi, Anda hanya perlu meminjam kode ListBox sebelumnya dan mengubah tag <asp:ListBox> menjadi tag <asp:DropDownList>.

Kontrol DropDownList tampak seperti kontrol ComboBox pada aplikasi Windows, tetapi ada dua perbedaan penting. Pada kontrol DropDownList, nilai awal dari SelectedIndex adalah 0, yang menyebabkan item pertama ditampilkan. Selain itu, user tidak dapat memasukkan sembarang string ke dalam DropDownList, tetapi ia dapat melakukannya pada ComboBox.

Gambar 4.25 menunjukkan sebuah contoh kontrol ini pada saat aplikasi dijalankan.

Gambar 4.25 User mengekspansi sebuah kontrol DropDownList

Kontrol RadioButtonList

Kontrol RadioButtonList menampilkan suatu grup tombol radio, seperti ditunjukkan pada Gambar 4.26. Anda dapat menciptakan sejumlah kontrol RadioButton satu per satu, tetapi kontrol RadioButtonList lebih mudah digunakan. Pada kontrol list ini, hanya boleh satu item diseleksi pada suatu waktu. Berikut adalah contoh bagaimana Anda mengkode kontrol ini:

<asp:RadioButtonList

ID="listWarna"

runat="server">

<asp:ListItem>Biru</asp:ListItem>

<asp:ListItem>Merah</asp:ListItem>

<asp:ListItem>Hijau</asp:ListItem>

<asp:ListItem>Lavender</asp:ListItem>

</asp:RadioButtonList>

Anda dapat menata tombol-tombol secara horisontal atau vertikal, menggunakan properti RepeatDirection (defaultnya adalah vertikal).

Gambar 4.26 Contoh RadioButtonList

Kontrol Calendar

Kontrol Calendar dapat dipakai user untuk memilih satu atau lebih tanggal dari sebuah grid kalender. Kontrol ini sama dengan kontrol MonthCalendar pada aplikasi Windows. Format defaultnya ditunjukkan pada Gambar 4.27 saat aplikasi dijalankan. Berikut adalah kode yang menciptakannya:

<asp:Calendar

ID="kalender1"

runat="server">

</asp:Calendar>

Gambar 4.27 Kontrol Calendar pada format default

Ada sejumlah gaya pustaka (font, warna) untuk kontrol ini. Untuk memilih salah satu, klik pada Smart Tag dari kontrol pada Design view, pilih AutoFormat, dan pilih salah satu format standar. Gambar 4.28 menunjukkan hasil setelah memilih sebuah format dengan nama Professional 1.

Gambar 4.28 Kontrol Calendar, menggunakan format Professional 1

Beberapa properti dari kontrol Calendar perlu diperhatikan berikut:

· Properti SelectedDate mendapatkan atau menetapkan tanggal terseleksi. Nilai defaultnya adalah tanggal hari ini.

· Properti VisibleDate menentukan bulan mana yang ditampilkan.

· Properti IsSelectable menentukan apakah user dapat menyeleksi tanggal atau tidak.

Event SelectionChanged dipicu ketika user memilih sebuah tanggal. Sebagai contoh, kode berikut menyalin tanggal terseleksi dari sebuah kontrol Calendar ke sebuah kontrol Label:

labelTanggal.Text = kalender1.SelectedDate.ToString("d");

Memilih Minggu

Dengan mengubah properti SelectionMode menjadi DayWeek, user dapat memilih satu hari atau satu minggu pada kontrol Calendar, seperti ditunjukkan pada Gambar 4.29. Properti SelectedDate menghasilkan hanya hari pertama dari minggu terseleksi. Tetapi Anda bisa beriterasi pada koleksi SelectedDates untuk membaca semua tanggal di dalam rentang.

Gambar 4.29 Memilih satu minggu pada kontrol Calendar

Statemen berikut menampilkan sejumlah tanggal terseleksi pada sebuah kontrol Label:

foreach (System.DateTime dt in kalender1.SelectedDates)

{

labelTanggal.Text += dt.Year.ToString() + " " +

dt.Month.ToString() + " " + dt.Day.ToString() + "|| ";

}

Tutorial 4.4: Mendaftar Tur Tarabunga

Aplikasi Penjadwalan Tur Tarabunga dapat dipakai user untuk mendaftar tur tarabunga, seperti ditunjukkan pada Gambar 4.30. User memilih salah satu jenis tur dari sebuah kontrol RadioButtonList, jenis perjalanan dari sebuah kontrol DropDownList, dan item-item opsional dari sebuah kontrol CheckBoxList. Tanggal diseleksi dari sebuah kontrol Calendar. Ketika tombol Konfirmasi diklik, pilihan-pilihan user akan ditampilkan pada sebuah kontrol Label di bawah jendela.

Gambar 4.30 Aplikasi Penjadwalan Tur Tarabunga

Langkah-Langkah Tutorial

Langkah 1: Ciptakanlah sebuah situs Web ASP.NET kosong dengan nama Penjadwalan Tur Tarabunga dan tambahkan sebuah Web form dengan nama Default.aspx pada situs.

Langkah 2: Buka Default.aspx pada Source view dan modifikasi tag <body> sehingga ia tampak seperti ini:

Properti style yang ditunjukkan di sini menetapkan nama font (Arial), dan ukuran font (.9em atau 90% dari ukuran font standar pada browser user).

Langkah 3: Pada baris setelah tag <form>, tambahkan heading level-dua dan sebuah kontrol RadioButtonList yang memuat empat jenis tur:

<h2>Mendaftar Tur Tarabunga!</h2>

Pilih Jenis Tur:

<asp:RadioButtonList

ID="listJenisTur"

RepeatDirection="Horizontal"

runat="server">

<asp:ListItem>Setengah Hari</asp:ListItem>

<asp:ListItem>Sehari Penuh</asp:ListItem>

<asp:ListItem>Bermalam</asp:ListItem>

</asp:RadioButtonList>

<p />

Langkah 4: Tambahkan sebuah kontrol DropDownList yang memuat jenis perjalanan.

Pilih Jenis Perjalanan:

<asp:DropDownList

ID="listJenisPerjalanan"

runat="server">

<asp:ListItem>Mengelilingi Danau Toba</asp:ListItem>

<asp:ListItem>Mengelilingi Pulau Samosir</asp:ListItem>

<asp:ListItem>Mandi dan Berenang Di Danau Toba</asp:ListItem>

<asp:ListItem>Menginap di Hotel</asp:ListItem>

</asp:DropDownList>

<p />

Langkah 5: Tambahkan sebuah kontrol CheckBoxList yang dapat dipakai user untuk memilih item-item peralatan opsional.

Di atas, sebuah tag <div> mengelompokkan teks statis dengan kontrol CheckBoxList untuk menghindari baris kosong ditampilkan saat aplikasi dijalankan.

Langkah 6: Tambahkan sebuah kontrol Calendar agar user dapat memilih tanggal tur. Properti VisibleDate menentukan tanggal pertama yang ditampilkan oleh Calendar.

<p />

<div>

Pilih Tanggal:

<asp:Calendar

ID="kalTanggalTur"

VisibleDate="2/1/2016"

runat="server">

</asp:Calendar>

</div>

Langkah 7: Tambahkan sebuah tombol Konfirmasi dan sebuah Label yang akan menampilkan informasi tentang reservasi.

<p />

<asp:Button

ID="tombolKonfirmasi"

runat="server"

Text="Konfirmasi" />

<p />

<asp:Label

ID="labelKomentar"

runat="server">

</asp:Label>

File Kode-Belakang

Langkah 8: Buka file kode-belakang dari form dan tambahkan event handler Click untuk tombol Konfirmasi:

protected void tombolKonfirmasi_Click(object sender, EventArgs e)

{

//user mengklik tombol Konfirmasi

labelKomentar.Text =

"Anda telah memilih tur "

+ listJenisTur.SelectedItem.ToString()

+ " dengan jenis perjalanan "

+ listJenisPerjalanan.SelectedItem.ToString()

+ " pada tanggal "

+ kalTanggalTur.SelectedDate.ToString("d");

//membuat daftar peralatan

string peralatan = String.Empty;

foreach(ListItem item in listPeralatan.Items)

{

if (item.Selected)

peralatan += item.ToString() + ", ";

}

//menampilkan daftar peralatan

if (peralatan.Length > 0)

{

//menghapus koma dan spasi terakhir

peralatan = peralatan.Remove(peralatan.Length - 2);

//menempelkan pada Label

labelKomentar.Text += ", dengan peralatan berikut: " + peralatan;

}

Baris 4-10 membangun sebuah string yang memuat item-item yang diseleksi user dari daftar tur (listJenisTur) dan daftar jenis perjalanan (listJenisPerjalanan), dan tanggal terseleksi dari kalender (kalTanggalTur). Baris 14-18 menjelajah kontrol CheckBoxList listPeralatan dan untuk setiap item terseleksi, menambahkan namanya pada sebuah string. Baris 21 memeriksa apakah string yang memuat daftar peralatan tidak kosong. Pada baris 26, string ditempelkan pada kontrol Label.

Langkah 9: Simpan dan lihat halaman pada sebuah browser. Ketika Anda mengubah nilai-nilai kontrol, klik tombol Konfirmasi, dan amati bahwa halaman dikirim kembali ke server.

Anda tentu mengamati bahwa banyak kode Visual C# untuk aplikasi Web identik dengan untuk aplikasi Windows. Oleh karena itu, Anda direkomendasikan untuk belajar lebih banyak tentang kontrol-kontrol lain yang ada pada jendela Toolbox

4.5 Merancang Web Form

Menggunakan Panel Untuk Menyembunyikan dan Menunjukkan Grup Kontrol

Salah satu kontrol yang paling mudah digunakan dan tangguh adalah Panel. Kontrol ini adalah kontainer kosong yang dapat menampung kontrol-kontrol lain dan teks statis. Kontrol ini didefinisikan seperti ini:

<asp:Panel

ID="Panel1"

runat="server">

</asp:Panel>

Biasanya, properti Visible dari kontrol Panel bernilai false ketika sebuah halaman pertama kali ditampilkan, dan Anda menggunakan kode runtime untuk mengubah Visible menjadi true. Pada user, panel akan tampak seperti jendela popup karena ia dapat ditampilkan di mana saja pada halaman. Pada mode Design, semua panel dan kontrol dapat dilihat, tanpa memandang nilai dari properti Visible. Anda dapat menggunakan panel untuk mengendalikan urutan masukan user.

Contoh Pembimbingan Sekolah

Dimisalkan Anda memiliki sebuah kontrol Panel dengan nama panelSiswaBaru yang memuat informasi bagi siswa-siswi yang baru masuk ke suatu sekolah. Sebuah kontrol Panel lain dengan nama panelSiswaPindahan memiliki informasi bagi siswa pindahan. Jika sebuah variabel integer dengan nama jenisSiswa memuat nilai 0 atau 1, Anda dapat memutuskan panel mana yang akan ditampilkan:

switch (jenisSiswa)

{

case 0:

panelSiswaBaru.Visible = true;

break;

case 1:

panelSiswaPindahan.Visible = true;

break;

}

Atau dengan cara yang lebih baik, Anda dapat mendeklarasikan sebuah tipe enumerasi untuk kedua jenis siswa:

enum StatusSiswa {SiswaBaru, SiswaPindahan};

Kemudian statemen switch dapat dikode seperti ini:

switch (jenisSiswa)

{

case StatusSiswa.SiswaBaru:

panelSiswaBaru.Visible = true;

break;

case StatusSiswa.SiswaPindahan:

panelSiswaPindahan.Visible = true;

break;

}

Pada Tutorial 4.5, Anda akan menciptakan sebuah aplikasi pendek yang menampilkan dan menyembunyikan kontrol Panel sesuai dengan pilihan user.

Tutorial 4.5: Aplikasi Pembimbingan Siswa

Pada tutorial ini, Anda akan menciptakan sebuah aplikasi pendek yang mengawali proses pembimbingan online untuk siswa-siswa sekolah. Di awal, siswa akan diminta untuk membuat pilihan, seperti ditunjukkan pada Gambar 4.31. Jika siswa mengklik tombol Siswa baru, maka panel pada Gambar 4.32 akan ditampilkan. Perhatikan bahwa pertanyaan awal, yang juga berada di dalam sebuah panel, tidak ditampilkan. Jika siswa mengklik tombol Siswa pindahan ketika halaman dimuat, maka panel pada Gambar 4.33 akan ditampilkan.

Langkah-Langkah Tutorial

Langkah 1: Ciptakan sebuah situs Web ASP.NET kosong dengan nama Aplikasi Pembimbingan Sekolah dan tambahkan sebuah Web form dengan nama Default.aspx pada situs.

Gambar 4.31 Pertanyaan awal

Gambar 4.32 Siswa baru

Gambar 4.33 Siswa pindahan

Langkah 2: Tambahkan kode berikut pada Default.aspx, pada Source view. Ini akan menciptakan sebuah judul (Pembing Sekolah) dan sebuah kontrol Panel yang memuat pertanyaan awal dan sebuah RadioButtonList:

<h2>Pembimbing Sekolah</h2>

<asp:Panel ID="panelAwal" runat="server">

Apakah status pendaftaran Anda?

<asp:RadioButtonList ID="listJenisSiswa" runat="server"

AutoPostBack="true">

<asp:ListItem>Siswa Baru</asp:ListItem>

<asp:ListItem>Siswa Pindahan</asp:ListItem>

</asp:RadioButtonList>

</asp:Panel>

<p />

Langkah 3: Tambahkan kode berikut:

<asp:Panel ID="panelSiswaBaru" runat="server" Visible="false">

Anda telah menyatakan bahwa Anda adalah siswa baru. Mana yang telah

Anda selesaikan?

<asp:CheckBoxList

ID="listTugasSiswabaru" runat="server">

<asp:ListItem>Menghadiri Orientasi</asp:ListItem>

<asp:ListItem>Mengisi Form Imunisasi</asp:ListItem>

<asp:ListItem>Menemui Pembimbing Akademik</asp:ListItem>

</asp:CheckBoxList>

</asp:Panel>

Langkah 4: Tambahkan kode berikut:

<asp:Panel ID="panelSiswaPindahan" runat="server" Visible="false">

Anda telah menyatakan bahwa Anda adalah siswa pindahan. Mana yang telah

Anda perlukan?

<asp:CheckBoxList

ID="listTugasSiswaPindahan"

runat="server">

<asp:ListItem>Ujian Keterampilan Akademik</asp:ListItem>

<asp:ListItem>Pembimbingan akademik</asp:ListItem>

<asp:ListItem>Ujian Probasi Akademik</asp:ListItem>

</asp:CheckBoxList>

</asp:Panel>

File Kode-Belakang

Langkah 5: Tambahkan kode Visual C# berikut pada kelas di dalam file kode-belakang. Seperti yang dapat Anda lihat, tidak perlu banyak kode yang perlu dituliskan:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

enum StatusSiswa {SiswaBaru, SiswaPindahan};

public partial class _Default : System.Web.UI.Page

{

protected void listJenisSiswa_SelectedIndexChanged(…)

{

panelAwal.Visible = false;

switch (listJenisSiswa.SelectedIndex)

{

case (int)StatusSiswa.SiswaBaru:

panelSiswaBaru.Visible = true;

break;

case (int)StatusSiswa.SiswaPindahan:

panelSiswaPindahan.Visible = true;

break;

}

Langkah 6: Lihat Web form pada browser dan uji operasinya. Jika Anda menambahkan beberapa langkah lagi pada aplikasi ini, masing-masing dengan panel sendiri, maka Web form akan semakin kompleks. Pada suatu titik, Anda perlu menyebar aplikasi pada sejumlah form yang berbeda. Tetapi untuk sejumlah pilihan yang sederhana, kontrol Panel merupakan perangkat yang berguna.

Menggunakan Kontrol Table untuk Menyejajarkan Teks dan Kontrol

Kontrol Table HTML merupakan perangkat yang berguna dalam menata tataletak dari Web form. Anda dapat menggunakannya untuk menyenjajarkan teks, grafika, dan kontrol dalam baris dan kolom.

HTML berikut mendefinisikan sebuah tabel dengan satu baris (diidentifikasi dengan <tr>…</tr> dan dua sel di dalam baris:

<table>

<tr>

</tr>

</table>

Tag yang dipakai untuk mendefinisikan sebuah sel di dalam suatu baris adalah <td>. Jika Anda melihat tabel ini pada sebuah browser, ia akan ditampilkan sebagai dua kata sisi demi sisi. Namun, Anda dapat menambahkan batas dan memperlebar sel pertama dengan menetapkan properti style-nya:

<tr>

</tr>

</table>

Berikut adalah dua tabel yang ditampilkan saat aplikasi dijalankan:

Gambar 4.34 Dua tabel yang berbeda

Panambahan border berguna ketika menata tataletak kontrol-kontrol karena Anda dapat melihat batas-batas sel ketika melihat halaman pada Design view.

Menggunakan Visual Studio Table Designer

Mengkode tabel HTML secara manual merupakan pekerjaan yang melelahkan, jadi Anda lebih baik menggunakan table designer pada Visual Studio. Anda perlu melihat Design view dari sebuah halaman untuk menggunakannya. Ada dua cara dalam menyisipkan sebuah tabel ketika melihat design dari sebuah form:

· Pilih Insert Table dari menu TABLE. Ketika Anda melakukannya, jendela Insert Table akan ditampilkan, sehingga Anda dapat menetapkan sejumlah opsi tataletak tabel (Lihat Gambar 4.35).

· Pilih kontrol Table dari bagian HTML pada jendela Toolbox. Sebuah tabel dengan 3 baris dan 3 kolom akan ditempatkan pada form, yang dapat Anda ubah ukurannya dengan menggeretnya pada sisi kanan dan sisi bawahnya.

Gambar 4.35 Jendela Insert Table

Menyesuaikan Tinggi Baris dan Lebar Kolom

Untuk menyesuaikan atau mengubah lebar kolom, Anda menempatkan mouse di atas batang ganda di sepanjang batas kanan dari kolom. Ketika kursor mouse berubah menjadi batang vertikal dengan anak panah menunjuk ke kiri dan ke kanan, Anda bisa menekan tombol mouse dan menggeret batasnya ke lokasi baru. Ketika Anda melakukannya, lebar kolom (dalam piksel) akan ditampilkan di dalam kolom. Seringkali, nilai yang ditampilkan memberikan Anda ide akurat tentang lebar kolom.

Untuk menyesuaikan tinggi baris, tempatkan mouse di atas batas bawah dari baris. Ketika kursor mouse berubah menjadi suatu garis horisontal dengan anak panah menunjuk ke atas dan ke bawah, Anda bisa menggeret mouse dan batas dapat digeser ke atas atau ke bawah. Ketika Anda melakukannya, tinggi kolom (dalam piksel) akan ditampilkan di dalam kolom. Seringkali, nilai yang ditampilkan memberikan Anda ide akurat tentang tinggi baris.

Menyisipkan Baris dan Kolom

Untuk menyisipkan sebuah baris atau kolom baru ke dalam sebuah tabel, Anda mengklik tabel pada Design view. Kemudian pilih Insert dari menu TABLE, dan pilih salah satu dari opsi yang ada seperti ditunjukkan pada Gambar 4.36. Pada tiap kasus, baris atau kolom yang disisipkan akan memiliki atribut-atribut yang sama dengan baris atau kolom yang diseleksi.

Gambar 4.36 Menyisipkan baris dan kolom pada tabel

Logika Pemrograman

Tuesday, December 13, 2016

Bab 4: Pemrograman C#.NET: Database dan Web

No comments:

Post a Comment

About Me