Rabu, 19 Oktober 2011

PEMROGRAMAN WEB (pert - 4)

RESUME PEMROGRAMAN WEB
PERTEMUAN 4
Dosen : Kurniawan Jatmika. S. Kom

REPEATER DAN DATALIST 

Repeater 
 
Kontrol Repeater digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol.

Mengikat sebuah DataSet ke Kontrol Repeater

Kontrol Repeater digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol. Kontrol Repeater dapat terikat pada tabel database, file XML, atau daftar item lain. Di sini kita akan menunjukkan bagaimana untuk mengikat sebuah file XML ke Repeater kontrol.
Kami akan menggunakan file XML berikut contoh kami di ("cdcatalog.xml"):
<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>
<cd>
  <title>Empire Burlesque</title>
  <artist>Bob Dylan</artist>
  <country>USA</country>
  <company>Columbia</company>
  <price>10.90</price>
  <year>1985</year>
</cd>
<cd>
  <title>Hide your heart</title>
  <artist>Bonnie Tyler</artist>
  <country>UK</country>
  <company>CBS Records</company>
  <price>9.90</price>
  <year>1988</year>
</cd>
<cd>
  <title>Greatest Hits</title>
  <artist>Dolly Parton</artist>
  <country>USA</country>
  <company>RCA</company>
  <price>9.90</price>
  <year>1982</year>
</cd>
<cd>
  <title>Still got the blues</title>
  <artist>Gary Moore</artist>
  <country>UK</country>
  <company>Virgin records</company>
  <price>10.20</price>
  <year>1990</year>
</cd>
<cd>
  <title>Eros</title>
  <artist>Eros Ramazzotti</artist>
  <country>EU</country>
  <company>BMG</company>
  <price>9.90</price>
  <year>1997</year>
</cd>
</catalog>
Lihatlah file XML: cdcatalog.xml
Pertama, impor "System.Data" namespace. Kita perlu namespace ini untuk bekerja dengan objek DataSet. Sertakan direktif berikut pada bagian atas sebuah halaman aspx.:
<%@ Import Namespace="System.Data" %>
Selanjutnya, ciptakan sebuah DataSet untuk file XML dan load file XML ke dalam DataSet saat halaman pertama dimuat:
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub
Kemudian kita membuat kontrol Repeater dalam sebuah halaman. Aspx. Isi dari elemen <HeaderTemplate> tersebut diberikan pertama dan hanya sekali dalam output, maka isi dari elemen <ItemTemplate> diulang untuk setiap "catatan" dalam DataSet, dan terakhir, isi dari elemen <FooterTemplate> yang diberikan sekali dalam output:
<html>
<body>

<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>
...
</HeaderTemplate>

<ItemTemplate>
...
</ItemTemplate>

<FooterTemplate>
...
</FooterTemplate>

</asp:Repeater>
</form>

</body>
</html>
Lalu kita tambahkan script yang menciptakan mengikat DataSet dan DataSet mycdcatalog ke kontrol Repeater. Kami juga mengisi kontrol Repeater dengan tag HTML dan mengikat data item ke sel-sel di bagian <ItemTemplate> dengan <% # Container.DataItem ("fieldName")%> metode:

Contoh

<%@ Import Namespace="System.Data" %>

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>

<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>

<FooterTemplate>
</table>
</FooterTemplate>

</asp:Repeater>
</form>

</body>
</html>

Tampilkan contoh »

Menggunakan <AlternatingItemTemplate>

Anda dapat menambahkan elemen <AlternatingItemTemplate> setelah elemen <ItemTemplate> untuk menggambarkan penampilan bolak-baris output. Pada contoh berikut setiap baris lain dalam tabel akan ditampilkan dalam warna abu-abu muda:

Contoh

<%@ Import Namespace="System.Data" %>

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>
<table border="1" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>

<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>

<AlternatingItemTemplate>
<tr bgcolor="#e8e8e8">
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</AlternatingItemTemplate>

<FooterTemplate>
</table>
</FooterTemplate>

</asp:Repeater>
</form>

</body>
</html>

Tampilkan contoh »

Menggunakan <SeparatorTemplate>

Unsur <SeparatorTemplate> dapat digunakan untuk menggambarkan pemisah antara setiap record. Contoh berikut menyisipkan sebuah garis horisontal antara setiap baris tabel:

Contoh

<%@ Import Namespace="System.Data" %>

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat="server">
<asp:Repeater id="cdcatalog" runat="server">

<HeaderTemplate>
<table border="0" width="100%">
<tr>
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</HeaderTemplate>

<ItemTemplate>
<tr>
<td><%#Container.DataItem("title")%></td>
<td><%#Container.DataItem("artist")%></td>
<td><%#Container.DataItem("country")%></td>
<td><%#Container.DataItem("company")%></td>
<td><%#Container.DataItem("price")%></td>
<td><%#Container.DataItem("year")%></td>
</tr>
</ItemTemplate>

<SeparatorTemplate>
<tr>
<td colspan="6"><hr /></td>
</tr>
</SeparatorTemplate>

<FooterTemplate>
</table>
</FooterTemplate>

</asp:Repeater>
</form>

</body>
</html>

Sumber : http://www.w3schools.com/aspnet/aspnet_repeater.asp


Datalist

Kontrol DataList adalah, seperti kontrol Repeater, digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol. Namun, kontrol DataList menambah tabel di item data secara default.

Mengikat sebuah DataSet ke Kontrol DataList

Kontrol DataList adalah, seperti kontrol Repeater, digunakan untuk menampilkan daftar ulang item yang terikat untuk kontrol. Namun, kontrol DataList menambah tabel di item data secara default. Kontrol DataList dapat terikat pada tabel database, file XML, atau daftar item lain. Di sini kita akan menunjukkan bagaimana untuk mengikat sebuah file XML ke kontrol DataList.
Kami akan menggunakan file XML berikut contoh kami di ("cdcatalog.xml"):
<?xml version="1.0" encoding="ISO-8859-1"?>

<catalog>
<cd>
  <title>Empire Burlesque</title>
  <artist>Bob Dylan</artist>
  <country>USA</country>
  <company>Columbia</company>
  <price>10.90</price>
  <year>1985</year>
</cd>
<cd>
  <title>Hide your heart</title>
  <artist>Bonnie Tyler</artist>
  <country>UK</country>
  <company>CBS Records</company>
  <price>9.90</price>
  <year>1988</year>
</cd>
<cd>
  <title>Greatest Hits</title>
  <artist>Dolly Parton</artist>
  <country>USA</country>
  <company>RCA</company>
  <price>9.90</price>
  <year>1982</year>
</cd>
<cd>
  <title>Still got the blues</title>
  <artist>Gary Moore</artist>
  <country>UK</country>
  <company>Virgin records</company>
  <price>10.20</price>
  <year>1990</year>
</cd>
<cd>
  <title>Eros</title>
  <artist>Eros Ramazzotti</artist>
  <country>EU</country>
  <company>BMG</company>
  <price>9.90</price>
  <year>1997</year>
</cd>
</catalog>
Lihatlah file XML: cdcatalog.xml
Pertama, impor "System.Data" namespace. Kita perlu namespace ini untuk bekerja dengan objek DataSet. Sertakan direktif berikut pada bagian atas sebuah halaman aspx.:
<%@ Import Namespace="System.Data" %>
Selanjutnya, ciptakan sebuah DataSet untuk file XML dan load file XML ke dalam DataSet saat halaman pertama dimuat:
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub
Kemudian kita membuat DataList dalam sebuah halaman. Aspx. Isi dari elemen <HeaderTemplate> tersebut diberikan pertama dan hanya sekali dalam output, maka isi dari elemen <ItemTemplate> diulang untuk setiap "catatan" dalam DataSet, dan terakhir, isi dari elemen <FooterTemplate> yang diberikan sekali dalam output:
<html>
<body>

<form runat="server">
<asp:DataList id="cdcatalog" runat="server">

<HeaderTemplate>
...
</HeaderTemplate>

<ItemTemplate>
...
</ItemTemplate>

<FooterTemplate>
...
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>
Lalu kita tambahkan script yang menciptakan mengikat DataSet dan DataSet mycdcatalog ke kontrol DataList. Kami juga mengisi kontrol DataList dengan <HeaderTemplate> yang berisi header dari tabel, sebuah <ItemTemplate> yang berisi item data untuk menampilkan, dan <FooterTemplate> yang berisi teks. Perhatikan bahwa atribut gridlines dari DataList diatur ke "baik" untuk menampilkan perbatasan tabel:

Contoh

<%@ Import Namespace="System.Data" %>

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat="server">
<asp:DataList id="cdcatalog"
gridlines="both" runat="server">

<HeaderTemplate>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>

<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>

Tampilkan contoh »

Menggunakan Styles

Anda juga dapat menambahkan gaya ke kontrol DataList untuk membuat output lebih mewah:

Contoh

<%@ Import Namespace="System.Data" %>

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat="server">
<asp:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="true"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
footerstyle-font-size="9pt"
footerstyle-font-italic="true">

<HeaderTemplate>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>

<FooterTemplate>
Copyright Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>

Tampilkan contoh »

Menggunakan <AlternatingItemTemplate>

Anda dapat menambahkan elemen <AlternatingItemTemplate> setelah elemen <ItemTemplate> untuk menggambarkan penampilan bolak-baris output. Anda mungkin gaya data dalam bagian <AlternatingItemTemplate> dalam kontrol DataList:

Contoh

<%@ Import Namespace="System.Data" %>

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>

<html>
<body>

<form runat="server">
<asp:DataList id="cdcatalog"
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="True"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">

<HeaderTemplate>
My CD Catalog
</HeaderTemplate>

<ItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>

<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" of
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>

<FooterTemplate>
&copy; Hege Refsnes
</FooterTemplate>

</asp:DataList>
</form>

</body>
</html>


Sumber : http://www.w3schools.com/aspnet/aspnet_datalist.asp
Diposting oleh M. Arif Afandi di 08.04

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Laundry Detergent Coupons