Archive for the 'Education' Category

04
Jul
10

ASP.Net – Popup menu dengan Simple Modals

By Lambang Adi (Mbanx) 1 Comment
Categories: Education
Tags: , , , , , , ,

Popup menu merupakan salah satu bentuk penyajian menu yang sering digunakan pada aplikasi” baik desktop maupun web. Hal ini karena popup memiliki kesan yang unik dan berkelas.

Pada postingan kali ini saya akan memberikan sedikit tips dan tutorial dalam membuat popup menu pada ASP.Net dengan menggunakan bantuan jQuery bernama Simple Modals. Namun sebelum anda membuat popup tersebut, terlebih dahulu anda harus menyiapkan beberpa file yang dibutuhkan untuk membuat simple modal tersebut. (Pada akhir postingan akan diberikan direct link untuk mendownload).

Langkah-langkah yang dibutuhkan dalam membuat popup menu.

1. Copy 3 folder simple modals (“css”, “img”, “js”) kedalam folder project website anda.
2. Buat dan perhatikan code aspx berikut

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/>

<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div id='basic-modal'>
        <input type=\"button\" value=\"modals\" class='basic' name='basic' >
    </div>

    <div id=\"basic-modal-content\" style=display:none;>
        Anda Berhasil
    </div>
</body>
</html>
3. Jalankan web dan tekan button yang telah dibuat kemudian lihat hasilnya

Hal yang perlu diperhatikan adalah…

1. link yang diletakan diatas head, merupakan link untuk me-reference css dan behind code  yang digunakan untuk menampilkan basic modal. (mutlak disertakan)
2. terdapat dua “div”.
* Div pertama berikan ID=’basic-modal’ bertujuan sebagai trigger untuk memunculkan popup. Dapat diisi dengan button / link
* Div kedua berikan ID=’basic-modal-content’ ditujukan sebagai penampung / popup yang akan dimunculkan. Dapat diisi berbagai component yang akan dimunculkan

Sangat mudah bukan dan untuk hasilnya silahkan anda coba sendiri.
berikut link untuk mendownload component yang dibutuhkan. (DOWNLOAD DISINI)

02
Jul
10

ASP.Net – mengambil data POST dan GET sekaligus

By Lambang Adi (Mbanx) 1 Comment
Categories: Education
Tags: , , , , , , , ,

Pada postingan yang lalu.. saya telah memberikan tips untuk membentuk form dengan fungsi Submit dengan metode POST atau GET. Pada postingan kali ini saya akan memberikan sebuah tips.. dimana kita dapat mengambil atau meritrive data yang dikirimkan oleh sebuah form.. yang didalamnya terkandung dua metode sekaligus.. yaitu POST dan GET.

Buatlah form seperti ini :

<body>
    <form id="form1" action=Default2.aspx?nama=oke method=post>
    <input id="Text1" type="text" name="text1" /><br/>
    <input id="Text2" type="text" name="text1" /><br/>
    <input id="Text3" type="text" name="text1" /><br/>
    <input id="Text4" type="text" name="text1" /><br/>
    <input id="Submit1" type="submit" value="submit" />
    </form>
</body>

form tersebut akan membuat sejumlah textboxt yang diakhiri dengan sebuah button submit. namun perhatikan pada bagian action..!! selain terdapat link yang dituju, namun kita menambahkan sejumlah string variable dan value, yang dapat diambil dengan cara melakukan querystring dan tidak lupa kita memberikan method post dalam melakukan proses submit ini.
Perlu diperhatikan…!! jika anda menambahkan sejumlah informasi pada bagian link action, jangan sekali” anda menggunakan method get, karena informasi yang anda tambahkan secara manual akan tertimpa dengan komponen” yang anda dapat dari metode get tersebut.

Okeh… setelah anda sudah membuat form tersebut… permasalahan berikutnya adalah bagaimana cara mengambil kedua informasi tersebut secara bersamaan. Untuk itu di code behind pada “Default2.aspx” ketikan code berikut.. :

 protected void Page_Load(object sender, EventArgs e)
    {
        //Information GET
        Response.Write("Nama : "+Request.QueryString["nama"]+"<br/>");

        //Information POST
        //Get information Dynamicly
        for (int i = 0; i < Request.Form.Keys.Count; i++ )
        {
            Response.Write(Request.Form.Keys[i] + " = " + Request.Form[i] + "<br/>");
        }
    }

Langkah selanjutnya adalah.. anda tinggal menjalakan code” diatas. Ingat..!! buat dua webform “Default.aspx” dan “Default2.aspx”. Setelah anda menjalakannya anda akan segera mengerti fungsi dari code” diatas.
Hal perlu diingat dan dan diperhatikan adalah.. Untuk mengambil informasi dengan metode “GET” gunakan “Request.QueryString” dan untuk metode “POST” gunakan “Request.Form“.

Dengan menggunakan cara tersebut, ASP.NET memberikan kemudahan bagi anda untuk mendapatkan informasi yang di-POST dan di-GET sekaligus. Karena dalam pemograman aplikasi yang kompleks, hal seperti ini sangat sering terjadi.

Okeh…!! sekian dulu tips dan trik dari saya. semoga postingan singkat ini bisa membantu teman-teman semua.. Selamat Mencoba..!!!

12
Jun
10

ASP.Net – Java Script in Page Load

By Lambang Adi (Mbanx) Leave a Comment
Categories: Education
Tags: , , , , , , , , , , ,

JavaScript merupakan sebuah script yang pasti digunakan di sebuah pemograman web. Semua bahasa pemograman web dapat menggunakan  javascript, walaupun untuk setiap bahasa pemograman memiliki cara dan trick” tertentu.

ASP.Net merupakan salah satu bahasa pemograman web yang memiliki cara tersendiri dalam menggunakan javascript. So.. How To Use Javascript in ASP.Net..?? postingan kali ini saya, akan memberikan tips dan trick-nya.

Pada umumnya penggunaan Tag HTML  <body onload = script> merupakan cara yang umum digunakan, namun dengan cara tersebut dilakukan selalu saat body di load. Namun bagaimana jika di letakan pada Page Load dengan catatan harus melewati sebuah kondisi tertentu (If- Else) baru javascript tersebut diaktifkan. Berdasarkan berbagai percobaan, saya  menemukan cara sebagai berikut.

Pada Bagian  Pageload tuliskan kode berikut :

    protected void Page_Load(object sender, EventArgs e)
    {
        for (int i = 1; i < 4; i++)
        {
            setValueScript("Text" + i, "Value-" + i, i);
        }
        for (int i = 1; i < 4; i++)
        {
            alertScript("Text" + i, i);
        }
    }

    //JAVA SCRIPT METHOD PAGE LOAD
    public void setValueScript(string elementId, string value, int loop)
    {
        string script = "";

        //SET Value
        script += "<script language='javascript'>";
        script += "document.getElementById('";
        script += elementId;
        script += "').value='";
        script += value;
        script += "'";
        script += "</script>";

        //Register Script
        Page.RegisterStartupScript("setValueScript-" + loop, script);
    }
    public void alertScript(string elementId, int loop)
    {
        string script = "";

        //SET Value
        script += "<script language='javascript'>";
        script += "alert(document.getElementById('";
        script += elementId;
        script += "').value)";
        script += "</script>";

        //Register Script
        Page.RegisterStartupScript("alertScript-" + loop, script);
    }

Dan pada bagian “ASPX” siapkan 3 buat HTML TextBox dengan ID : Text1, Text2, Text3. Jalankan dan hasilnya javascript yang dibuat telah berjalan.

Bingung..??? Berikut ini penjelasannya dari Trick diatas :

  1. Buat method void, yang didalamnya terdapat string yang akan membangun / membentuk serangkaian java script.
  2. Pada bagian akhir kita harus meregister script yang telah dibuat. Pada parameter register pertama, isikan nama (bebas namun tidak boleh sama), disinilah peran variable loop, seandainya kita akan menggunakan javascript tersebut berulang”.
  3. siapkan parameter void, sesuai dengan parameter javascript

Itulah salah satu trick dalam menggunakan javascript dalam ASP.Net. Mudah bukan..!!! semoga postingan ini membantu anda semua.

-Thx Mbanx-

10
Jun
10

ASP.Net – Layout Konsisten Tanpa MasterPage

By Lambang Adi (Mbanx) Leave a Comment
Categories: Education
Tags: , , , , , , , , ,

ASP.Net adalah sebuah bahasa pemograman web yang dikembangkan oleh Microsoft. Dengan berbekal .Net Framework, maka ASP.Net memiliki berbagai macam kelebihan, terutama dari form” yang khusus dimiliki oleh ASP.Net.

Salah satunya adalah MasterPage. Dengan MasterPage, layout atau tampilan konsisten yang dibutuhkan dalam sebuah web gampang dibuat. Tinggal buat MasterPage dan halaman lain dapat menggunakannnya. Namun berdasarkan pengalaman saya, MasterPage memiliki beberapa BUG yang dapat menyulitkan anda. Seperti fungsi CrossPage yang tidak berjalan dan Metode POST / GET dan SUBMIT yang pasti tidak akan berjalan jika anda menggunakan MasterPage.

Lantas bagaimana dalam membuat sebuah tampilan utama yang konsisten pada ASP.Net, padahal metode penambahan file seperti INCLUDE pada PHP tidak dikenal pada ASP.Net. Setelah beberpa kali eksperimen (karena terpaksa), saya mendapatkan sedikit trik untuk mengatasi hal tersebut, dan saya akan membaginya dengan anda semua.

Langkah – Langkah :

1. Pilih New Item dan Pilih Class File. (C# sebagai contoh)
2. Buatlah sebuah Method, yang didalamnya anda membuat sebuah string HTML 
    public string layout()
    {
        string code = "";
        code += "<div id=layout1 class=body>";
        code += "   <a href=default.aspx>Click Here</a>";
        code += "   <input id=tb_nama type=text value='Helow Word'>";
        code += "</div>";
        return(code);
    }
3. Siapkan Sebuah File WebForm (misalnya Default.aspx)
4. Tempatkan sebuah Label ASP.Net kemudian pada code (C#) tuliskan kode berikut 
public partial class _Default : System.Web.UI.Page
{
    //Class Variable
    Class1 cs;
    protected void Page_Load(object sender, EventArgs e)
    {
        //Object & Inisialisasi
        cs = new Class1();
        Label1.Text = "";

        //Create Layout
        Label1.Text = cs.layout();
        Label2.Text = cs.layout2();
    }
}

Note : Sebagai catatan buat juga sebuah style CSS dan beri nama .body.

Setelah mengikuti langkah diatas maka Load default.aspx, dan liat apa yang terjadi. Dengan menggunakan kreatifitas anda dalam membentuk layout dengan menuliskan Tag” HTML pada file Class dan Methodnya yang telah dibuat sebelumnya anda dapat menciptakan Layout yang konsisten untuk semua halaman. Karena semua WebForm dapat menggunakan Class tersebut.

09
Jun
10

ASP.Net – Menggunakan Method POST/GET

By Lambang Adi (Mbanx) 2 Comments
Categories: Education
Tags: , , , , , , , ,

Jika anda terbiasa menggunakan teknik submit disertai metode POST / GET pada PHP misalnya, mungkin anda akan menemui sedikit kesulitan jika menggunakan ASP.Net.

ASP.Net dengan WebForm Framework, memberikan form-form tersendiri selain menyediakan form” HTML biasa. Hal ini secara umum merupakan kelebihan dari ASP.Net, karena form”-nya yang sangat Powerfull dan Usefull. Namun bisa juga hal ini merupakan kekurangan ASP.NET tersebut, terutama untuk masalah POST dan GET.

Hal ini akan dicontohkan pada code berikut.

CODE  : Tag Form ASP.Net 

<pre><em> </em>
<pre><em><body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>

CODE : Tag Form HTML dengan POST/GET

<body>
<form id="form2" action="page.aspx" method=get>
    <div>
        <input id="Submit1" type="submit" value="submit" />
        <input id="Text1" type="text" name="Text1"/>
    </div>
</form>
</body>

Tedapat perbedaan penulisan Tag Form. Pada ASP.Net terdapat runat=server dan itu mutlak harus ada. Jika anda meletakan sebuah ASP.Net WebControl diluar form dengan runat=server, maka dipastikan akan eror. Namun penggunaan Tag Form ASP.Net hanya boleh satu buah. Sedangkan untuk Tag Form tanpa runa=server dapat lebih dari satu dan ini berarti anda tidak dapat meletakan ASP.Net WebControl didalamnya.

Kembali ke permasalahan POST / GET. Untuk melakukan metode tersebut, anda harus melakukannya pada Tag Form yang memiliki action dan method. Hal inilah yang menjadi permasalahan pada ASP.Net.

Anda tidak dapat menggabungkan kedua tag form tersebut.  Tag yang menjadi root akan meniadakan fungsi dari tag child. Contoh jika form ASP.net didalam tag POST, maka semua control ASP.net akan berfungsi sebagai submit dan beberapa action handler tidak berjalan dengan benar. Jika kasus yang terjadi sebaliknya, maka fungsi POST / GET tidak akan berjalan.

Hal ini lah yang menjadi kelemahan dari ASP.Net, karena sifatnya yang tidak flexible.

Namun satu hal menarik adalah, Label ASP.Net merupakan ASP.Net Control yang dapat diletakan pada Form selain tag form ASP.Net dan hal ini sangat menguntungkan (Label ASP.Net sangat berguna dalam ASP.Net Web Programming).

CODE : Tag Form ASP.NET dan Method POST / GET

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
    </form>

    <form id="form2" action="page.aspx" method=get>
    <div>
        <input id="Submit1" type="submit" value="submit" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>

09
Jun
10

ASP.Net – Mengambil Variable Dan Value Dari URL Secara Dinamis

By Lambang Adi (Mbanx) Leave a Comment
Categories: Education
Tags: , , , , , ,

Seringkali pada pemograman Web kita mendapatkan informasi yang diletakan pada URL, lebih dikenal dengan method POST dan GET. Cara yang umum untuk mendapatkan value dari nilai yang tersimpan pada URL adalah dengan kondisi kita sudah mengetahui nama variable dari value tersebut.

Pada ASP.Net dimungkinkan kita mendapatkan valu tersebut secara dinamis, tanpa perlu tahu terlebih dahulu nama” variable yang di POST atau di GET. Berikut adalah codenya.

CODE : Mengambil Key dan Value yang terdapat pada URL secara dinamis

  protected void Page_Load(object sender, EventArgs e)
  {
        int totalKey = Page.Request.QueryString.Keys.Count;
        for (int i = 0; i < totalKey; i++)
        {
            string key = Request.QueryString.Keys[i].ToString();
            string value = Request.QueryString[i].ToString();
            Response.Write("Key : "+key+" - Value : "+value);
        }
    }

« Previous Entries

The Date Of Today

May 2012
M T W T F S S
« Jul    
 123456
78910111213
14151617181920
21222324252627
28293031  

Sekilas Tentang Saya..

Saya hanyalah seorang anak manusia dan seorang hamba Allah yang senantiasa berusaha untuk menjadi lebih baik...
Melalui blog ini, berusaha berbagi cerita dengan teman-teman diluar sana...

My Facebook

Lambang Mbanx Adi

Create Your Badge

Tips Biar Nyaman

Buat para pengunjung blog ini..
Karena postingan saya terdiri dari macam-macam jenis dan kategori, enaknya gunakan fasilitas kategori aja, agar dengan mudah dapat menemukan jenis postingan yang dicari.
-Thx-

My Yahoo Messenger

Blog Stats

  • 17,612 hits

My Rank

Where Do You Come From..?

free counters
Follow

Get every new post delivered to your Inbox.