Tuesday, June 14, 2016

Membuat Website Sederhana Menggunakan ASP.NET-Web Form - Part 1

Okie...Pertama-tama kita akan membuat project web baru di visual studio. Di sini Hyosoka pake VS 2013. So Silahkan ikuti langkah2 berikut ini :


Setelah Selese, struktur projectnya kyk gini :
Berikutnya kita tambain file buat tampilan default web-nya. Caranya klik kanan projectnya pilih "Add--New Item" kyk gambar di bawah : {Tapi sebenarnya bisa lgnsung piilih "Web Form" tapi gpp pake cara yg agk panjang biar bisa ngeliad... :D}
Setelah tekan tombol "Add", file seperti ini :
Terus biar pas projectnya kita run ada sesuatu yang bisa dilihat... Silahkan tambain title dan sesuatu di bagian body html-nya, klu Hisoka kek gini :
Naah..terus kita run....
Hasilnya :
Yaaaps...baru segitu... eheheh.. :D
Okieee....berikutnya kita tambain folder baru, namanya "Styles" folder ini nantinya dipake buat nyimpen2 file yg dibutuhkan untuk mengatur tampilan, posisi, warna di webnya. So klik kanan solution, add new folder terus kasih nama "Styles" kyk gini {Jangan lupa setop projectnya klu masih running}:

Okiee...setelah itu, klik kanan folder Styles, terus tambain file css baru, namain sesuai kesukaan...Klu Hisoka kek gini :

Filenya kek gini :
Abis itu beralih ke file Default.aspx. Di dalam tag <form> tambain kode ini :
Naaah... sampe sini kita udah punya lahan, wrapper yang isinya banner, navigation, dst... Klu pengen liad posisi2nya... silahkan split atau pindah ke mode desain...
Dari gambar diatas, kursor mousenya Hisoka taro dibagian banner, dibagian desain kliatan tuuh...Oooh bannernya itu diatas,... dan seterusnya untuk navigation smpe "All right reserved" :D

Terus beralih ke file stylesheet.css...tambain kode ini :
Naaah... itu pananya nunjukin hubungan masing2 element difile stylesheet.css... Jadi nnti klu misalkan kita nambain sesuatu didalam #banner, maka di efeknya akan terlihat di dalam <div id="banner"> dan seterusnya... ;)
Naaah...Silahkan tambahkan kode berikut ke dalam masing2 bagian di stylesheet.css : 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body 
{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color:#e9e9e9;
}

#wrapper {
    width: 1080px;
    margin: 0 auto;
    padding: 10px;
    border: 5px solid #dedede;
    background-color: #ffffFF;
}

#banner {
    height:200px;
    border: 3px solid #E3E3E3;    
}

#navigation {
    height: 60px;
    border: 3px solid #E3E3E3;
    margin-top: 20px;
   
}

#content_area {
    float:left;
    width: 750px;
    height: 550px;
    margin: 20px 0 20px 0;
    border: 3px solid #4cff00;
}


#sidebar {
    float:right;
    width: 250px;
    height: 400px;
    margin: 20px 10px 20px 10px;
    border: 3px solid #ff0000;
}


#footer {
    clear:both;
    width: auto;
    height:40px;
    margin-top:20px;
}

Terus biar Default.aspx-nya bisa kehubung dengan css-nya, tambain kode ini didalam header aspx : 
1
<link rel="stylesheet" type="text/css" href="~/Styles/stylesheet.css" />


Kalo kita run... hasilnya jadi kek gini :
Yaaaps... lemayan laaaah... :D
{Sekadar tambahan, klu kita ngubah2 sesuatu di file css-nya, kita g' prlu stop projectnya biar bisa liad hasil perubahannya, divisual studio tuuh bisa langsung ke update otomatis hasilnya, jadi g' prlu disetop trs dirunn lagi .. :)}

Untuk melanjutkan step berikutnya... Silahkan download gambar2 dari link ini. Tapi klu punya gambar2 lain yang lebih enakeun.. Yaah.. silahkan dipake.. :)
Setelah didownload, silahkan di extract, terus yang folder image, lngsung didrag ke solution projectnya {biar bisa ngedrag and drop projectnya g' boleh dalam kondisi running}, dan jadinya kek gini :
Naaah...setelah itu tambain lagi kode bacgkround-image di dalam file css-nya kek gini : 
1
2
3
4
5
6
background-image:url(../Images/banner.jpg); /* #banner */

background-image:url(../Images/bar_background.png); /* #navigation */


background-image:url(../Images/bar_background.png); /* #footer */

Daaan... Tampilannya jadi kyk gini :
Sip sip... Lemayan... :D
Terus tambain kode ini didalam div id="navigation" 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div id="navigation">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Akatsuki</a>
                    <ul>
                        <li><a href="#">Hyosoka</a></li>
                        <li><a href="#">Poipo</a></li>
                        <li><a href="#">Itachi</a></li>
                        <li><a href="#">Izanami</a></li>
                    </ul>
                </li>
                <li><a href="#">Jutsu</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </div>
Naaah... itu hasilnya langsung keliatan di bawahnya... :D
Terus beralih ke file css,,, daan.. bkin yg ini : 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#nav {
    list-style: none;
}

#nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width:auto;
    display: none;
}

#nav li{
    font-size: 24px;
    float:left;
    position: relative;
    width: 180px;
    height:50px;
}



Sampe sini dulu... *ngantuk... :v

Untuk part I ini,,, Kodenya bisa didownload ataupun hanya dilihat di sini....


*Semoga bermanfaat... :)

Ke Part II...

Diposkan oleh di
Label: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)