Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pert 2 - Web Form

    Diunggah oleh

    Rusdiansyah Gunawan
    10 tayangan10 halaman
    Web form adalah model pemrograman ASP.Net yang menggabungkan HTML, server control, dan server kode untuk membangun antarmuka pengguna website yang berinteraksi dengan aplikasi web server."

    Deskripsi Asli:

    Judul Asli

    Pert 2_Web Form

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Web form adalah model pemrograman ASP.Net yang menggabungkan HTML, server control, dan server kode untuk membangun antarmuka pengguna website yang berinteraksi dengan aplikasi web server."

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    10 tayangan10 halaman

    Pert 2 - Web Form

    Diunggah oleh

    Rusdiansyah Gunawan
    Web form adalah model pemrograman ASP.Net yang menggabungkan HTML, server control, dan server kode untuk membangun antarmuka pengguna website yang berinteraksi dengan aplikasi web server."

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 10

    2 WEB FORM

    Objektif :

    • Pengertian Web Form


    • Anatomi Web Form

    Pengertian Web Form

    Web form merupakan istilah yang ditawarkan dalam visual studio.Net. Aplikasi web dapat
    dibangun dengan konsep pemrograman WYSWYG seperti membangun aplikasi berbasiskan
    windows.

    Web form dapat dibuat untuk menghasilkan user interface yang akan berinteraksi dengan
    aplikasi web. Hasil dari halaman web form dapat bervariasi, hampir semua jenis dokumen
    format yang sering digunakan dalam HTTP didukung oleh web form, seperti HTML, XML,
    WML dan ECMAScript(Jscript, JavaScript).

    Dalam ASP.Net terdapat pemisah antara user interface dengan program logis. Program logis
    dari halaman web form disimpan dalam file terpisah dari file user interface. Hal ini yang
    dimaksud dengan ‘code behind’. Halaman yang berisi program logis mempunyai ekstensi
    ‘.aspx.cs’ atau ‘.aspx.vb’dan untuk halaman yang berisi user interface mempunyai ekstensi
    ‘.aspx’ . File ini akan di compile dalam bentuk file ‘.dll’.

    Web form adalah model pemrograman ASP.Net yang paling tua. Web yang dibuat dengan
    menggunakan gabungan HTML, server control dan server kode. Web form di compile dan di

    1
    eksekusi di server yang menghasilkan HTML yang menampilkan halaman web. Web form
    dilengkapi dengan ratusan web control dan web components untuk membangun website
    dengan data akses.

    Anatomi Web Form

    a. Markup Web Form

    Jika tidak pernah menulis HTML page maka source code terlihat agak menakutkan. Dan
    jika sebelumnya pernah menulis HTML page maka source code terlihat agak aneh. Source code
    dari web yang menggunakan ASP.Net tidak sepenuhnya menggunakan HTML, tetapi HTML
    yang ditambahkan dengan web control ASP.Net.

    Setiap web form ASP.Net memiliki standar tag HTML seperti <html>, <head> dan
    <body> yang menggambarkan bagian dasar dari halaman web. Lalu juga bisa menambahkan
    tag HTML tambahan seperti teks paragraph (menggunakan <p>), judul (menggunakan <h1>,
    <h2>, <h3>), table (menggunakan <table>) dan sebagainya. Selain tag HTML standar, bisa
    juga menambahkan tag ASP.Net untuk halaman web. Seperti contoh, <asp:Button> merupakan
    tombol yang dapat di klik untuk menjalankan tugas pada server. Ketika menambahkan Asp.Net
    web control maka dapat menambahkan objek yang dapet berinteraksi dengan halaman web
    yang dibuat.

    Lihat dibawah ini terdapat beberapa potongan kode web ASP.Net

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"


    Inherits="WebApplication3.WebForm1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title>Untitled Page</title>
    </head>
    <body>
    <form ID="form1" runat="server">
    <div>
    <asp:Label ID="Label1" runat="server" Text="Type something here:" />
    <br />
    <asp:TextBox ID="TextBox1" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
    </body>
    </html>

    2
    Pada kode diatas (lihat bagian tebal), tidak mempunyai arti bagi web browser karena kode
    tersebut bukan kode HTML yang valid. Ini tidak jadi masalah karena ASP.NET membuat
    engine yang berjalan diserver agar kode diatas dapat berjalan.

    b. Page Directive

    Halaman default file aspx. Terbagi menjadi tiga bagian. Bagian pertama adalah Page
    Directive:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebForm1.aspx.cs"


    Inherits="WebApplication3.WebForm1" %>

    Page Directive memberikan ASP.NET informasi dasar bagaimana mengompile halaman


    tersebut. Ini mengindikasikan bahasa yang dipakai dalam kode dan cara untuk mengkoneksikan
    ke event handler. Jika menggunaka konsep code-behind, Page Directive juga mengindikasikan
    dimana file kode berada dan nama dari class yang telah di kostumisasi. Page directive secara
    otomatis diberikan oleh visual studio.

    c. Doctype

    Pada umumnya, Halaman web yang non ASP.NET, Doctype terdapat di baris pertama. Dalam
    ASP.NET web form, doctype berada di tempat kedua dan muncul dibawah page directive.

    Doctype mengindikasikan tipe dari markup (HTML atau XHTML) yang digunakan dalam
    membuat web. Secara teknis, Doctype bisa tidak dipakai atau opsional tapi visual studio
    menambahkan secara otomatis. Ini sangat penting, karena ketergantungan tipe markup yang
    digunakan, ada beberapa cara yang tidak bisa gunakan.

    Selain itu Doctype juga mempengaruhi bagaimana browser menafsirkan halaman web. Sebagai
    contoh jika tidak menggunakan doctype maka secara otomatis Internet Exploler merubah
    dirinya menjadi mode legacy atau biasa disebut quirks mode. Ketika Internet Exploler dalam
    mode tersebut beberapa format tertentu tidak diproses secara konsisten dan tidak menggunakan
    cara yang standar. Tapi versi terbaru dari internet exploler tidak mencoba untuk berubah
    menjadi mode tersebut.

    Secara default ketika membuat halaman web di visual studio maka akan terbentuk doctype
    seperti:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    3
    Doctype diatas mengindikasikan web tersebut menggunakan XHTML 1.0 transitional. Kata
    transitional mengacu pada versi dari XHTML yang di design untuk menjadi batu loncatan
    antara HTML dan XHTML. XHTML transitional memaksa semua struktur aturan dari
    XHTML tapi membolehkan fitur format HTML yang telah diganti oleh CSS dan yang dianggap
    telah usang.

    Jika tidak menggunakan doctype diatas, dapat menggunakan XHTML sebagai doctype:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Dua doctype tersebut yang sering digunakan. Ingat, dalam ASP.NET server controls akan
    bekerja secara baik disemua doctype. Semua itu terserah pada programmer ingin menggunakan
    doctype yang mana.

    d. Elemen

    Hal yang paling penting dalam web adalah elemen. Elemen adalah wadah yang berisi
    potongan-potongan pada halaman web. Sebagai contoh jika ingin menambahkan teks paragraf
    dalam sebuah web, maka masukkan dalam elemen paragraf. Dalam sebuah web terdapat
    beberapa gabungan dari elemen. Elemen mendefinisikan struktur dari sebuah web. Elemen juga
    bisa menjadi awal untuk memformat halaman web. Sebagai contoh, elemen heading dalam web
    berbeda dengan elemen paragraf dan elemen tabel berbeda dengan elemen list.

    Bahasa XHTML mendefinisikan kumpulan elemen yang digunakan. XHTML juga


    mendefinisikan syntax untuk menggunakan elemen. Sebuah elemen terbagi menjadi tiga
    potongan: tag awal, konten, tag akhir. Contohnya:

    <p> Ini adalah kalimat dalam elemen paragaf</p>

    Ini adalah contoh yang digunakan dalam elemen paragraf. Elemen diawali dengan <p>, dan
    diakhiri dengan </p> dan konten terdapat diantara tag tersebut. Tag sangat mudah dikenali
    karena menggunakan simbol bracket (< dan >). Dan ini beberapa gabungan dengan
    menambahkan elemen heading dan diikuti dengan elemen paragraf.

    <h1> Ini Heading </h>

    <p> Ini adalah kalimat dalam elemen paragaf</p>

    4
    Beberapa elemen XHTML dapat ditambahkan dengan elemen lain. Sebagai contoh,
    menambahkan elemen bold <b> didalam elemen paragraf <p>.

    <p> Ini adalah <b>kalimat</b> dalam paragraf</p>

    Beberapa elemen dapat digunakan seperti <img> untuk menambahkan gambar, <hr> untuk
    menambahkan garis horizontal dan masih banyak lagi.

    Dibawah ini adalah daftar dari beberapa elemen yang sering digunakan. Pada kolom tipe
    terbagi menjadi dua yaitu container dan stand alone. Untuk tipe container, elemen tersebut
    dapat berdiri sendiri dan digabung dengan elemen yang lain. Lalu untuk tipe stand alone
    elemen tersebut tidak memiliki konten.

    Tag Nama Tipe Deskripsi


    <b>, <i>, <u> Bold, Container Elemen ini biasanya digunakan untuk
    Italic, membuat teks menjadi tebal (bold),
    Underline miring (italic) dan garis bawah
    (underlined).
    <p> Paragraph Container Membuat blok paragraf yang
    didalamnya bebas ditulis.
    <h1>, <h2>, <h3>, Heading Container Ini adalah elemen heading, yang
    <h4>, <h5>, <h6> membuat teks menjadi tebal (bold)
    dan ukuran huruf menjadi besar.
    Semakin kecil angkanya semakin
    besar ukuran teksnya. Jadi <h1>
    adalah heading terbesar. <h5> adalah
    heading untuk normal teks.
    <img> Image Stand-alone untuk menampilkan file gambar
    dengan menggunakan atribut src.
    <br> Line Break Stand-alone Menambahkan baris baru.
    <hr> Horizontal Stand-alone Menambahkan garis horizontal .
    Line
    <a> Anchor Container Elemen anchor adalah membuat teks
    menjadi link ke halaman yang tuju.

    5
    menggunakan attribut href untuk
    menuju halman yang dituju
    <ul>, <li> Unordered Container Elemen ini membuat bulleted list.
    List, List Elemen <ul> menjelaskan daftar yang
    Item dibuat. Elemen <li> menjelaskan item
    pada daftar.
    <ol>, <li> Ordered Container Elemen ini membuat daftar angka.
    List, List Elemen <ul> menjelaskan daftar yang
    Item dibuat. Elemen <li> menjelaskan item
    pada daftar.
    <table>, <tr>, <td>, Table Container Elemen ini digunakan untuk membuat
    <th> tabel. Untuk membuat baris
    menggunakan <tr>. Setiap isi dalam
    baris diisi dengan menggunakan
    elemen <td>.
    <div> Division Container Elemen ini adalah wadah yang
    berguna untuk elemen yang lain.
    digunakan untuk memisahkan
    berbagai daerah. Sebagai contoh
    membuat kotak dalam grup.
    <span> Span Container Elemen ini adalah wadah yang
    berguna untuk potongan teks didalam
    elemen yang lain(seperti heading atau
    paragraf). Sebagai contoh merubah
    warna pada huruf dalam kalimat.
    <form> Form Container Elemen ini digunakan untuk
    mengontrol web. Control adalah
    elemen html yang dapat mengirim
    informasi kepada server ketika web
    tersebut di submit.

    6
    e. Attribut

    Setiap halaman web tergabung dari dua tipe informasi yaitu konten dari web tersebut dan
    informasi bagaimana konten tersebut harus ditampilkan. Untuk mengatur konten yang
    ditampilakan terdapat tiga cara yaitu menggunakan elemen yang benar, mengatur elemen
    tersebut dengan struktur yang benar dan menambahkan atribut dalam elemen tersebut.

    Atribut adalah potongan informasi yang dapat dimasukkan dalam elemen dalam tag awal.
    Atribut mempunyai banyak kegunaan. Sebagai contoh

    Tag <img> membutuhkan dua potongan informasi. Destinasi gambar dan alternatif text untuk
    mendeskripsikan gambar tersebut. Dua potongan informasi tersebut secara spesifik
    menggunakan dua atribut, yaitu src dan alt:

    <img src=”happy.gif” alt=”Happy Face”>

    Dalam menggunakan tag kontrol ASP.Net setiap atribut masuk ke properti dalam kelas
    kontrol.

    Writing Code

    f. Menambahkan Web Form pada Visual Studio

    Berikut ini merupakan cara untuk menambahkan web form pada project website di visual
    studio.

    1. Buka Visual Studio, lalu pilih File -> New ->Project

    7
    2. Bagian kiri window terdapat tipe project yang dapat dibuat. Pilih Visual C# -> Web -
    > ASP.Net Empty Web Application. Jangan lupa untuk memberi nama project dan
    direktori penyimpanan project. Lalu tekan OK.

    3. Untuk menambahkan web form pada web empty project, lihat solution exploler. Klik
    kanan pada nama project -> Add -> New Item. Setelah itu akan muncul window yang
    menampilkan semua item yang dapat dibuat, Pilih Web Form dan klik OK.

    8
    g. Code-behind Class

    Dalam visual studio, terdapat fitur code view (melihat semua code). Sebagai contoh jika
    membuat halaman web dengan nama SimplePage.aspx, Pada solution exploler lihat file
    SimplePage.aspx klik kanan pada file tersebut lalu pilih code view, maka secara otomatis kode
    dibawah akan muncul:

    using System;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    public partial class SimplePage:
    System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
    }
    }
    Code behind adalah fitur dari ASP.NET yang memisahkan antara desain dan kode program.

    9
    h. Menambahkan Event Handler

    Kebanyakan kode dalam web ASP.NET diletakkan di event handler untuk bereaksi terhadap
    web control yang telah diletakkan. Dengan menggunakan visual studio ada tiga cara untuk
    menambahkan event handler dalam kode:

    Tulis secara manual: Jika menggunakan cara ini, tambahkan subroutine langsung ke
    kelas halaman dan harus menentukan parameter yang tepat.

    Double click pada control di design view: Jika menggunakan cara ini, visual studio akan
    membuat event handler untuk kontrol secara default. Misalnya, jika terdapat tombol
    dalam web form, lalu klik dua kali pada tombol tersebut maka secara default akan
    terbentuk event.Button.Click. Contoh lain jika klik dua kali pada control texbox maka
    secara otomatis event yang terjadi adalah Textbox.TextChanged.

    Memilih event dari window properties:Klik pada kontrol yang telah dimasukkan dan
    click lightning bolt pada properties window. Dalam window tersebut terdapat semua
    daftar event yang disediakan dan secara otomatis visual studio secara otomatis
    menghasilkan event handler yang dipilih.

    Sebagai contoh jika mengklik dua kali pada kontrol Button, Visual studio akan membuat event
    handler seperti dibawah ini:

    protected void Button1_Click(object sender, EventArgs e)


    {
    // Your code for reacting to the button click goes here.
    }

    10

    Anda mungkin juga menyukai