Programming

Bahasa pemrograman, atau sering diistilahkan juga dengan bahasa komputer, adalah teknik instruksi standar untuk memerintah komputer

Sistem Telekomunikasi

Sistem Telekomunikasi adalah sistem untuk mengkomunikasikan data atau informasi dari satu lokasi ke lokasi yang lain dengan menggunakan Komponen Telekomunikasi

Web Programming

Web programming adalah proses pembuatan program yang outputnya disajikan oleh Web Browser. Yang dimana web programming secara detail terdiri atas program berupa server side dan client side

Multimedia

Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar,animasi, audio dan video dengan alat bantu dan koneksi sehingga pengguna dapat melakukan navigasi, interaksi, karya dan komunikasi

About This Blog

Blog ini dikembangkan oleh Dimicko Asghary, yang saat ini sedang menjalankan studi di SMK Telkom Malang.

Sabtu, 07 Desember 2013

Tutorial ASP 6

Pada kali ini kita akan membahas praktikum ASP modul 6, yang mencakup tentang Validation Control

1. Pertama buatlah project Bab 3, dengan solution yang sama














2. Setelah itu buatlah web form dengan nama Val Summary






















3. Jika sudah inputkan script seperti ini
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValSummary.aspx.cs" Inherits="Bab3.ValSummary" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Validation Summary</title>
    <link href="MyStyle.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .auto-style3 {
            width: 160px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ValidationSummary ID="vsSumm" CssClass="div" runat="server" Width="286px"
        ShowMessageBox="true" />
    </div><br />
        <table style="width: 100%;">
            <tr><th colspan="3">INPUT DATA DIRI</th></tr>
            <tr>
                <td class="auto-style1">Username: </td>
                <td class="auto-style3">
                    <asp:TextBox ID="txtUser" runat="server" Width="165px"
                        Height="30px"></asp:TextBox></td>
                <td>&nbsp;<asp:RequiredFieldValidator ID="rfvUser" ControlToValidate="txtUser"
                    CssClass="RequiredFieldValidator" runat="server"
                    ErrorMessage="Username Wajib Diisi"
                    Text="<img width=40 src='warning.png' class='center'/> Username Wajib Diisi" />
                    </td>
            </tr>
            <tr>
                <td class="auto-style1">Password: </td>
                <td class="auto-style3">
                    <asp:TextBox TextMode="Password" ID="txtPass" runat="server" Width="165px"
                        Height="30px"></asp:TextBox></td>
                <td>&nbsp;<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="txtPass"
                    CssClass="RequiredFieldValidator" runat="server"
                    ErrorMessage="Password Wajib Diisi"
                    Text="<img width=40 src='warning.png' class='center'/> Password Wajib Diisi" />
                    </td>
            </tr>
            <tr>
                <td class="auto-style1">Umur: </td>
                <td class="auto-style3">
                    <asp:TextBox ID="txtUmur" runat="server" Width="165px"
                        Height="30px"></asp:TextBox></td>
                <td>&nbsp;<asp:RangeValidator ID="RangeValidator1" ControlToValidate="txtUmur"
                    CssClass="RequiredFieldValidator" runat="server"
                    ErrorMessage="Range Umur 17-99 tahun" MinimumValue="17"
                    MaximumValue="99" Type="Integer"
                    Text="<img width=40 src='warning.png' class='center'/> Range Umur 17-99 tahun" />
                    </td>
            </tr>
        </table>
        <br />
        <asp:Button ID="KIRIM" runat="server" Text="Buton" Height="36px" Width="145px" />
    </form>
</body>
</html>

4. Setelah itu tambahkan stylesheet (css) dengan nama MyStyle.css







5. Isikan stylesheet dengan script berikut
body {
    text-align: center;
    vertical-align: central;
}
.div {
    margin: 0px auto;
    text-align: left;
    padding: 15px;
    border: 1px dashed #333;
    background-color: #ffd800;
}
table {
    color: #333; /*warna font*/
    font-family: Harrington, Arial, sans-serif;
    width: 510px;
    border-collapse: collapse;
    border-spacing: 0;
    margin-right: 49px;
    text-align: left;
}
td, th {
    border: 1px solid #CCC;
    height: 30px;
    transition: all 0.3s; /*hover efek*/
}
th {
    background: #F3F3F3;
    font-weight: bold;
    text-align: center;
}
td {
    background: #FAFAFA;
    vertical-align: central;
}
.td {
    text-align: center;
}
tr td:hover {
    background: #666;
    color: #FFF;
}
/*hover sel efek*/
TEXTAREA, INPUT[type="text"] {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: #808080;
    padding: 3px;
    background: #EEEfff;
    border-left: solid 1px #c1c1c1;
    border-top: solid 1px #cfcfcf;
    border-right: solid 1px #cfcfcf;
    border-bottom: solid 1px #6f6f6f;
}
    INPUT[type="text"]:focus, INPUT[type="text"]:active {
        border-color: #646464;
        background-color: #ffcf03;
}
.rfv {
    color: red;
}
.rfv:hover {
        color: white;
}
.center {
    vertical-align: top;
}

6. Jika sudah tinggal Run program dengan Ctrl+f5, dan akan muncul result tampilan berikut di browser






Catatan: 
- Range Umur adalah 17-99
- Semua Form wajib diisi

7. Jika data yang diinputkan tidak lengkap maka akan muncul notif seperti ini








8. Jika Range umur kurang dari 17 maka akan muncul notif seperti ini

Tutorial ASP 5

Pada kali ini kita akan mengerjakan praktikum ASP modul 5 yang membahas tentang Control Event pada Server Control

1. Pertama buatlah project Bab 2 dengan Solution yang sama














2. Setelah itu tambahkanlah web form dengan nama Tugas























3. Inputkan Script seperti berikut
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Tugas.aspx.cs" Inherits="Bab2.Tugas" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .field {
           background-color: aqua;
        }
        .border {
            border-color: brown;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table class="border" border="2">
        <tr>
            <td rowspan="8"><asp:Image ImageUrl="~/Properties/image.jpeg" runat="server" Width="200px" /></td>
            <td class="field" colspan="4"><center>Inputan Biodata</center></td>
        </tr>
         <tr>
            <td>Nama Lengkap</td>
            <td>:</td>
            <td><asp:TextBox ID="txtNama" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
            <td>Jenis Kelamin</td>
            <td>:</td>
            <td>
                <asp:RadioButton ID="rdbtL" runat="server"
                    Text="L" GroupName="gender" />
                <asp:RadioButton ID="rdbtP" runat="server"
                    Text="P" GroupName="gender" />
            </td>
        </tr>
         <tr>
            <td>Email</td>
            <td>:</td>
            <td><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
            <td>Password</td>
            <td>:</td>
            <td><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox></td>
        </tr>
         <tr>
            <td>Alamat</td>
            <td>:</td>
            <td><asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine"></asp:TextBox></td>
        </tr>
         <tr>
            <td>Cita-Cita</td>
            <td>:</td>
            <td>
           <asp:RadioButton ID="rdlPresiden"
           GroupName="cita" Text="Presiden" runat="server" />
           <br />
           <asp:RadioButton ID="rdlMenteri"
           GroupName="cita" Text="Menteri" runat="server" />
           <br />
           <asp:RadioButton ID="rdlLain"
                GroupName="cita" Text="Lainnya" runat="server" AutoPostBack="true" OnCheckedChanged="rdlLain_CheckedChanged"/>
           <br />
        <asp:Panel ID="pnlLain" runat="server" Visible="false">
            <asp:TextBox ID="txtLain" runat="server"/>
            </asp:Panel>

        </td>
        </tr>
         <tr>
            <td colspan="3"><center><asp:Button ID="btnSubmit" runat="server" Text="SUBMIT" BackColor="SkyBlue" OnClick="btnSubmit_Click" /></center></td>
         </tr>
    </table>
    </div>
        <asp:Label ID="lblResult" runat="server"></asp:Label>
    </form>
</body>
</html>

4. Setelah itu klik kanan dan pilih View Code, dan tambahkan script ini
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Bab2
{
    public partial class Tugas : System.Web.UI.Page
    {
        string Jenis;
        string cita;
        protected void btnSubmit_Click(object sender, EventArgs e)
        {

            if (Page.IsValid)
            {

                lblResult.Text = "Nama Lengkap  = " + txtNama.Text + "<br />";
                if (rdbtP.Checked == true)
                {
                    Jenis = "Perempuan";
                }
                else if (rdbtL.Checked == true)
                {
                    Jenis = "Laki-Laki";
                }
                lblResult.Text += "Jenis Kelamin = " + Jenis + "<br />";
                lblResult.Text += "Email         = " + txtEmail.Text + "<br />";
                lblResult.Text += "Password      = " + txtPassword.Text + "<br />";
                lblResult.Text += "Alamat        = " + txtComment.Text + "<br />";

                if (rdlPresiden.Checked == true)
                {
                    cita = "Presiden";
                }
                else if (rdlMenteri.Checked == true)
                {
                    cita = "Menteri";
                }
                else if (rdlLain.Checked == true)
                {
                    cita = txtLain.Text;
                }
                lblResult.Text += "Cita-Cita    =" + cita + "";
            }
        }
        protected void rdlLain_CheckedChanged(object sender, EventArgs e)
            {
                if (rdlLain.Checked)
                    pnlLain.Visible = true;
                else
                    pnlLain.Visible = false;
        }
    }
}

5. Jika sudah semua kita Run dengan Ctrl+f5, maka akan muncul tampilan seperti ini di browser
















6. Jika data yang diinputkan ada yang kosong, maka result akan menampilkan data kosong


















7. Namun jika data lengkap maka akan menampilkan isi seluruhnya


















Sekian tutorial kali ini, semoga bermanfaat...

Tutorial ASP 4

Pada kali ini kita akan mempelajari ASP pada modul 4, materi yang akan dipelajari mencakup Design and Validation Form.

1. Pertama buatlah project yang bernama FormVal














2. Setelah itu maka akan muncul Form kosong seperti ini












3. Klik kanan pada Form dan pilih view code


















4. Inputkan source code seperti ini

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace FormVal
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
       
        private void textBox2_TextChanged(object sender, EventArgs e)
        {
        }
        private void Form1_Load(object sender, EventArgs e)
        {
        }
        private void bar1_Click(object sender, EventArgs e)
        {
        }

        private void button1_Click(object sender, EventArgs e)
        {
            bar1.Value = 0;
            if (a.Text == "")
            {
                x.SetError(a, "Masukan Nama");
            }
            else
            {
                x.SetError(a, "");
            }
            int angka;
            if (b.Text == "")
            {
                x1.SetError(b, "Masukan NIS");
            }                
            else if(!int.TryParse(b.Text, out angka))
            {
            x1.SetError(b, "NIS Harus Berisi Angka");
            }
            else
            {
                x1.SetError(b, "");
            }

            if (c.Text == "")
            {
                x2.SetError(c, "Masukan Kelas");
            }
            else
            {
                x2.SetError(c, "");
            }

            if (d.Text == "")
            {
                x3.SetError(d, "Masukan SMP Asal");
            }
            else
            {
                x3.SetError(d, "");
            }
            for (int i = 0; i < bar1.Maximum; i++)
            {
                bar1.Value++;
            }
            if (a.Text == "" && b.Text == "" && c.Text == "" && d.Text == "")
            {
                MessageBox.Show("Anda belum mengisi sama sekali");
            }
            else if (a.Text == "" || b.Text == "" || c.Text == "" || d.Text == "")
            {
                MessageBox.Show("Mohon mengisi bagian yang kosong");
            }
            

            else
            {
                MessageBox.Show("\nNama\t : " + a.Text + "\nNIM\t : " + b.Text + "\nKelas\t : " + c.Text + "\nSMP\t : " + d.Text);
            }
        }
    }
}

5. Kemudian design form sesuka kalian




















6. Jika sudah, kita bisa meRunning program dengan Ctrl+f5
















7. Apabila data yang diinputkan tidak lengkap, maka akan muncul notif seperti ini















8. Namun jika semua data yang diinputkan lengkap dan valid maka akan muncul result













==> Catatan: Pada TextBox NIS hanya dapat diisi inputan yang bertipe data angka (integer)

Sekian Tutorial kali ini, semoga bermanfaat...