DORIF: Oktober 2011

Minggu, 23 Oktober 2011

Resume 6

Resume : 6

Mata Kuliah : Pemrograman Web

Dosen : Kurniawan Jatmika, S.KO

Login

Membuat Menu Login dibuat pada MasterPage dengan menambahkan TextBox dan Button seperlunya..
Untuk Button Login klik 2 kali dan masukkan kode berikut ini :

Pada even Load untuk memunculkan menu agar berbeda sebelum kita login masukkan kode berikut ini :

Untuk Logout menggunakan Kode berikut ini :

Resume 5

Resume : 5

Mata Kuliah : Pemrograman Web

Dosen : Kurniawan Jatmika, S.KOM

Insert Data

Untuk Insert Data ikuti langkah berikut ini :

1. Clik Configure Data Source

2. Langkah selanjutnya

Automatic Primarykey
Untuk Generid Id agar id terisi secara automatic masukkan kode ini.

Resume 4

Resume : 4

Mata Kuliah : Pemrograman Web

Dosen : Kurniawan Jatmika, S.KOM

I/O Database

GridView merupakan web control pada ASP.NET yang digunakan untuk menampilkan data dalam format tabel, disajikan dalam format baris dan kolom. GridView akan dirender pada browser sebagai HTML table. GridView memiliki kemampuan untuk menampilkan, megubah (edit) dan menghapus (delete) data hanya dengan beberapa langkah tanpa menuliskan satu baris kode pun. GridView dapat dengan mudah dikonfigurasi untuk membuat tampilan yang dibagi menjadi beberapa halaman (pagging), pengurutan (sorting) dan pengubahan (editing) tanpa menuliskan banyak kode.

GridView tidak memiliki kemampuan untuk melakukan penambahan data (insert), maka untuk melakukan penambahan data digunakan DetailsView control. DetailsView control digunakan untuk menampilkan satu record data dalam format tabel. Tiap field dalam row ditampilkan sebagai baris pada tabel.

LINQ ( Language Integrated Query ) merupakan komponen pada .NET Framework 3.5 yang memungkinkan menambahkan kemampuan query data seperti perintah SQL pada bahasa yang digunakan pada .NET Framework (seperti pada C# 3.0 atau VB.NET 5.0)

berikut langkah-langkah yg harus di lakukan :

1. Buka visual studio 2005

2. Buat sebuah website / web application

3. Klik kanan pada solution, kemudian add new item ==> SQLDatabase

4. drag and drop tabel yg ada pada server exlporer ke dalam DataClasses.dbml (seperti gambar di bawah ini)

Resume 3

Resume : 3

Mata Kuliah : Pemrograman Web

Dosen : Kurniawan Jatmika, S.KOM

1. Buat Web Form dengan nama ValidasiInsert.aspx, kemudian tambahkan LinqDataSource dan DetailsView

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Valdiasi Insert</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinqDataSource ID="ldsKategori" runat="server"
            ContextTypeName="MhsDataClassesDataContext" EnableInsert="True"
            EntityTypeName="" oninserting="ldsKategori_Inserting" TableName="Kategoris">
        </asp:LinqDataSource>
        <asp:DetailsView ID="dvKategori" runat="server" Height="50px"
            AutoGenerateRows="False" DataKeyNames="id_kat" DataSourceID="ldsKategori"
            DefaultMode="Insert">
            <Fields>
                <asp:BoundField DataField="id_kat" HeaderText="id_kat" InsertVisible="False"
                    ReadOnly="True" SortExpression="id_kat" />
                <asp:BoundField DataField="nama_kat" HeaderText="Nama Kategori"
                    SortExpression="nama_kat" />
                <asp:CommandField ShowInsertButton="True" />
            </Fields>
        </asp:DetailsView>
        <br />
        <asp:Label ID="lblError" runat="server" ForeColor="Red" />
    </div>
    </form>
</body>
</html>

2. Tambahkan Kode pada event ldsKategori_Inserting untuk mengecek inputan pada saat perintah insert akan dijalankan.

private MhsDataClassesDataContext db = new MhsDataClassesDataContext();

   
 protected void ldsKategori_Inserting(object sender, LinqDataSourceInsertEventArgs e)
    {

        //cek apakah data kosong atau tidak ditambahkan
        var objKategori = (Kategori)e.NewObject;
        if (string.IsNullOrEmpty(objKategori.nama_kat))
        {
            lblError.Text = "Nama Kategori harus diisi !";
            e.Cancel = true;
        }

        //cek apakah kategori sudah ada
        var cekKategori = (from k in db.Kategoris
                           where k.nama_kat == objKategori.nama_kat
                           select k.nama_kat).FirstOrDefault<string>();
        if (!string.IsNullOrEmpty(cekKategori))
        {
            lblError.Text = "Nama Kategori Sudah Ada..";
            e.Cancel = true;
        }
    }

Minggu, 09 Oktober 2011

Resume 2

Resume : 2

Mata Kuliah : Pemrograman Web

Dosen : Kurniawan Jatmika, S.KOM

Web Form

Web Form pada ASP.NET mempunyai exteni aspx. File ini digunakan sebagai container untuk text dan kontrol-kontrol yang akan ditampilkan di browser. Web Form mempunyai 3 atribut yaitu page, body dan form.

Membuat Web Form

Aplikasi baru ASP .NET membuat defaut Web From yaitu WebForm1.aspxWeb
Membuat Web Form yang lain dalam aplikasi dapat dilakukan dengan click kanan pada project dan pilih add Item ataupilih add Web From
ASP .NET mampu meng-upgrade HTML yang sudah ada menjadi Web Form

Membuat Master Page

Master Pages adalah desain dan tampilan web yang konsisten, bisa dipakai di semua webForm. Selain itu, master pages adalah halaman tunggal yang menangani struktur dari situs web Anda. Kebanyakan situs Web sekarang ini memiliki elemen umum yang sama yang terdapat di keseluruhan atau sebagian besar halaman dalam project website anda. Elemen umum itu misalnya elemen header yang berada di atas, elemen navigasi yang berada di kiri, dan elemen footer yang berada di bawah halaman.

langkah Pertama kita akan membuat aplikasi web dengan cara klik kanan pada solution explorer, caranya begini..pilih solutin yang baru anda buat terus click kanan >add/new item

kemudian pilih master page

TABLE

Tabel HTML

Apel	44%
Pisang	23%
Jeruk	13%
Lainnya	10%

Tabel HTML

Tabel didefinisikan dengan tag <table>.

Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi ke dalam sel data (dengan tag <td>). td singkatan dari "data tabel," dan memegang isi sel data. Sebuah tag <td> dapat berisi teks, link, gambar, daftar, formulir, tabel lain, dll

Tabel Contoh

Bagaimana kode HTML di atas terlihat dalam browser:

baris 1, sel 1	baris 1, sel 2
baris 2, sel 1	baris 2, sel 2

Tabel HTML dan Atribut Perbatasan

Jika Anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas. Kadang-kadang ini dapat berguna, tetapi sebagian besar waktu, kita ingin menunjukkan perbatasan.

Untuk menampilkan tabel dengan perbatasan, menentukan atribut border:

HTML Tabel Header

Informasi header dalam sebuah tabel didefinisikan dengan tag <th>.

Semua browser utama akan menampilkan teks dalam elemen <th> sebagai berani dan terpusat.

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Bagaimana kode HTML di atas terlihat pada browser Anda:

Header 1	Header 2
baris 1, sel 1	baris 1, sel 2
baris 2, sel 1	baris 2, sel 2

HTML Tabel Tags

Tag	Keterangan
<table>	Mendefinisikan tabel
<th>	Mendefinisikan sebuah header tabel
<tr>	Mendefinisikan sebuah baris tabel
<td>	Mendefinisikan sebuah sel tabel
<caption>	Mendefinisikan sebuah tabel keterangan
<colgroup>	Mendefinisikan kelompok kolom dalam sebuah tabel, untuk format
<col />	Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel
<thead>	Grup isi header dalam sebuah tabel
<tbody>	Grup isi tubuh dalam sebuah tabel
<tfoot>	Kelompok footer konten dalam sebuah tabel

Sumber : ------

FONT-FAMILY

Contoh

Tentukan font untuk paragraf:

p
{
font-family:"Times New Roman",Georgia,Serif;
}

Definisi dan Penggunaan

Properti font-family menentukan font untuk suatu elemen.

Properti font-keluarga dapat terus beberapa nama font sebagai sistem "fallback". Jika browser tidak mendukung font pertama, ia mencoba font berikutnya.

Ada dua jenis nama keluarga font:

keluarga-nama - Nama keluarga font-, seperti "kali", "kurir", "Arial", dll
generik keluarga - Nama keluarga generik, seperti "serif", "sans-serif", "kursif", "fantasi", "monospace".

Mulailah dengan font yang Anda inginkan, dan selalu diakhiri dengan sebuah keluarga generik, agar browser memilih font yang sama dalam keluarga generik, jika tidak ada font lain yang tersedia.

Catatan: Pisahkan setiap nilai dengan koma.

Catatan: Jika nama font mengandung putih-ruang, itu harus dikutip. Tanda kutip tunggal harus digunakan ketika menggunakan "gaya" atribut dalam HTML.

Nilai default:	tidak ditentukan
Warisan:	ya
Versi:	CSS1
JavaScript sintaks:	objek style.fontFamily = "arial, sans-serif".

Properti Font

Properti	Keterangan	CSS
Font	Mengatur semua properti font dalam satu deklarasi	1
font-family	Menentukan keluarga fonta untuk teks	1
font-size	Menentukan ukuran font teks	1
font-style	Menentukan gaya font untuk teks	1
font-varian	Menentukan apakah atau tidak teks yang harus ditampilkan dalam small-caps font yang	1
font-weight	Menentukan berat font	1
@ Font-face	Sebuah aturan yang memungkinkan situs untuk mendownload dan menggunakan font lain daripada "web-aman" font	3
font-size-menyesuaikan	Mempertahankan pembacaan teks ketika fallback font yang terjadi	3
font-stretch	Memilih wajah, normal kental, atau diperluas dari keluarga font	3

Warna Properti

Properti	Keterangan	CSS
warna-profil	Ijin spesifikasi warna profil sumber lain selain default	3
kegelapan	Mengatur tingkat opacity untuk elemen	3
render-maksud	Ijin spesifikasi maksud warna profil render selain default	3

Sumber : ------ , -----

HYPERLINK

Definisi dan Penggunaan

Kontrol HyperLink digunakan untuk membuat suatu hyperlink.

Properti

Properti	Keterangan	. NET
ImageUrl	URL dari image untuk ditampilkan untuk link	1.0
NavigateUrl	URL target link	1.0
runat	Menentukan bahwa kontrol adalah kontrol server. Harus diatur ke "server"	1.0
Target	Bingkai target URL	1.0
Teks	Teks untuk menampilkan untuk link	1.0

Web Kontrol Standar Properti

AccessKey, Attributes, BackColor, BorderColor, BorderStyle, BorderWidth, CssClass, Enabled, Font, EnableTheming, ForeColor, Height, IsEnabled, SkinID, Style, TabIndex, ToolTip, Width

Kontrol Standar Properti

AppRelativeTemplateSourceDirectory, BindingContainer, ClientID, Controls, EnableTheming, EnableViewState, ID, NamingContainer, Page, Parent, Site, TemplateControl, TemplateSourceDirectory, UniqueID, Visible

IMAGE-BACKGROUND

Contoh

Mengatur latar belakang-gambar untuk elemen body:

body
{
background-image:url('paper.gif');
}

Definisi dan Penggunaan

Properti background-image menentukan gambar latar belakang untuk elemen.

Latar belakang dari sebuah unsur memiliki ukuran total dari elemen, termasuk padding dan perbatasan (tetapi tidak margin).

Secara default, latar belakang-gambar ditempatkan di sudut kiri atas dari suatu elemen, dan diulang baik secara vertikal dan horizontal.

Nilai default:	none
Warisan:	tidak ada
Versi:	CSS1
JavaScript sintaks:	objek style.backgroundImage =. "url (stars.gif)"

Tips dan Catatan

Tips: Selalu mengatur latar belakang-warna yang akan digunakan jika gambar tidak tersedia.

Nilai Properti

Nilai	Keterangan
url (' URL ')	URL ke gambar
none	Tidak ada gambar latar belakang akan ditampilkan. Ini adalah default
mewarisi	Menentukan gambar latar belakang yang harus diwarisi dari elemen induk