WARKOP IT: desain web

Showing posts with label desain web. Show all posts

Sunday, 1 May 2011

Cara Setting PHP untuk Mengupload File Berukuran Besar ke Localhost

Wah sudah lama aku nggak ngisi dagangan di warung.. :-) Ditinggal repot skripsian soalnya.Jadi dagangannya cuma stok lama. Mudah2an gak kadaluarsa... hehe
Untuk postingan kali ini saya hanya ingin berbagi pengalaman kepada pembaca semua mengenai masalah yang saya hadapi. Karena skripsi saya adalah membuat media pembelajaran berbasis website. Maka pasti akan berkaitan dengan kegiatan mengupload data2, file2 , photo, dsb..
Ini adalah problem yang saya hadapi dan menghantui pikiran saya berhari2...
Yakni, bagaimana cara mengupload file berukuran besar kedalam website. Soalnya ketika saya upload file berukuran kecil <2MB proses upload berjalan dengan lancar. Namun ketika upload file2 besar terjadi error. Huft...
Akhirnya setelah bersemedi berhari2 dan dengan dibantu Prof. Google, maka saya menemukan jawaban yang mengatasi masalah yang saya hadapi.
FYI :
1. Bahwa Maksimal file yang dapat diupload ke dalam PHP (default) adalah 2MB.
2. Di dalam PHP ada maksimal waktu eksekusi setiap file PHP. kalau gak salah defaultnya 60 second.
3. Kemudian ada Input Max time : waktu maksimal untuk menginput file ke PHP.
4. Ada juga nilai maksimal untuk kegiatan $_POST (kegiatan untuk mengirim informasi ke dari form HTML ke PHP).
Dengan setting default dari PHP tersebut maka kita hanya dimungkinkan untuk mengupload data dalam ukuran maksimal 2 MB. Oleh karena itu agar kita dapat mengupload file berukuran besar maka kita harus melakukan setting di PHP.ini. Untuk merubah value2 di parameter2 diatas.
To do List
1. Buka file PHP.ini (bisa melalui WAMP atau XAMPP atau server lokal lain yang anda gunakan terus cari PHP.ini buka dengan text editor (notepad,mis)
2. Cari Parameter2 sebagai berikut :
POST_MAX_VALUE
MAX_INPUT_TIME
max_execution_time
upload_max_filesize
3. Ganti nilai default dari variabel2 tersebut menjadi seperti ini
POST_MAX_VALUE = 100M (or bigger) // maksimal file yang dikirim ke proses POST adalah 100megabyte
MAX_INPUT_TIME = -1 (unlimited) //waktu maksimal untuk input file adalah unlimited
max_execution_time = 201 //waktu eksekusi untuk setiap file PHP adalah 200 second
upload_max_filesize = 200M // ukuran maksimal yang diupload adalah 200 megabyte.
4. Kemudian save PHP.ini dan restart WAMP atau XAMPP anda.
5. Setelah itu silahkan dicoba untuk upload file2 gede itu. Insyaallah gak ada masalah. (kalau kode PHP anda benar. :-p)
* setting nilai max_execution_time selalu lebih besar dari upload_max_filesize.

Oke silahkan mencoba...
Note: tips ini hanya untuk setting PHP yang dijalankan pada sistem localhost, standalone, atau jaringan lokal aja. Untuk yang sudah di-hosting-ingkan. Settingannya pasti lain, tapi saya belum pernah nyoba jadi takut nanti kalau gak jalan. Sebagai klue-nya buat file .httaccess yang berisi kode2 untuk menyetting variabel2 diatas...

Terimakasih sebelumnya.. semoga bermanfaat....
Dan do'akan saya segera lulus ya (T_T)V
Best regards... love you all guys..
================================================= kurangin tidur banyakin ngopi

Monday, 7 June 2010

Desain Situs Web Distro

Pada semester ini saya ngambil matakuliah desain web. Pertama-tama ekspetasi saya tentang matakuliah ini adalah matakuliah yang enteng karena memiliki koding yang gampang dan paling-paling cuma berkutat di desain-desain tampilan gitu. Ternyata eh ternyata, isinya sama aja sebagian besar ya coding. Dan aspek desainnya cuma sedikit. Maklum anak Informatika, kalau desain-desain gitu memang agak-agak lelet. Terus desain khan lahannya anak diskomvis, jadi anak it gag boleh makan lahan orang laen... bukan begitu??

Ok cukup intermezzonya... ni saya mau share tentang hasil karya saya n temen2 satu kelompok. Kami mengangkat tema tentang distro clothing online. Kami ngambil judul ini karena saat ini distro cloting banyak menjamur. Oleh karena itu, butuh media promosi online dengan website. Selain itu distro online telah memenuhi aspek penilaian yakni harus menangani transaksi secara semi online....
Chek it dot tampilan homenya :

tampilan agak katrok ya? memang ini ada masalah. Seharusnya di background terdapat image berwarna abu2 gag putihg gitu. Terus headernya itu pake animasi flash jadinya agak keren gitu. hehe

Terus ini adalah tampilan ketika menu new product di klik

tampilannya masih mirip2 dihome cuman ada menubanner yang menunjukkan lokasi anda sekarang. Terus disini juga bisa beli barang secara online yang ditandai dengan keranjang belanja.

Untuk lebih jelasnya silahkan mampir kealamat http://mywebexperiment.co.cc/index.php

Terus untuk ngetest halaman adminnya mampir ke http://mywebexperiment.co.cc/4dm1n3w3b/

dengan username admin dan password 131313

Tolong informasi ini hanya untuk belajar. Bagi anda yang kepingin berniat jahat mending urungkan. Kasian saya... Silahkan kasih masukan di coment di bawah ini atau sukur ada yang mau pesan situs semacam ini bisa hubungi saya di gielangoyi@gmail.com....

Ok sekian dulu postingan dari saya..;

Ps: untuk admin maaf saat ini proses upload belum berhasil mengupload gambar karena ada error di hostingnya... maklum hosting gratisan. Lain kali akan saya coba ganti ke hosting lain....

Salam ngopi... cheers...
Btw saya lagi di kampung... Trenggalek tercinta.. Ternyata inetnya cepet juga.. Gag kalah ama yang dikontrakan saya... Ni rekomended buat para internetter :alamat nya sebelah perempatan sumberingin dee.net kalau gag salah... Hasil speedtestnya buat 277 ms... cepet lho.. (bukan promosi., just share ;-) )
================================================= kurangin tidur banyakin ngopi

Thursday, 11 March 2010

Aplikasi Nota Berbasis Web Dengan Javascript

Aplikasi web seringkali harus mampu menangani action yang berhubungan dengan input dari user dan mampu memproses permintaan tersebut. Dalam pemrograman HTML untuk dapat melakukan itu diperlukan javascript sebagai actionhandler untuk kegiatan input output.
Berikut ini kita akan belajar contoh aplikasi javascript sederhana, yakni nota pemesanan. Dibawah ini adalah contoh aplikasinya :

NOTA WARUNG ANDA

NO	Makanan/Minuman	Harga
1	Bakso Istimewa	@
2	Soto Spesial	@
3	Mie Ayam Super	@
4	Es Degan	@
5	Es Campur	@
JUMLAH TOTAL
DISKON
JUMLAH DIBAYAR

Source code program secara lengkap adalah sebagai berikut:

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title> Nota Digital </title>
</head>

<body>
    <script language="Javascript" type="text/javascript">

</script>
<h2 align="left">NOTA WARUNG ANDA</h2>
<form name="form1" action="#">
<table border="1px">
<tr bgcolor="blue">
    <th>NO</th>
    <th>Makanan/Minuman</th>
    <th>Harga</th>
    <th>Jumlah Pesan</th
</tr>
<tr>
    <td width="10">1</td>
    <td width="250">Bakso Istimewa</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price1" value="12000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan1" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">2</td>
    <td width="250">Soto Spesial</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price2" value="10000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan2" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">3</td>
    <td width="250">Mie Ayam Super</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price3" value="15000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan3" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">4</td>
    <td width="250">Es Degan</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price4" value="5000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan4" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr>
    <td width="10">5</td>
    <td width="250">Es Campur</td>
    <td width="90" bgcolor="yellow">@<input type="text" name="price5" value="7000" size="7" disabled="true"/></td>
    <td width="200"><input type="text" name="pesan5" value="0" size="30" Onchange="calculate()"/></td>
</tr>
<tr bgcolor="red">
    <td colspan="3" align="right">JUMLAH TOTAL</td>
    <td><input type="text" name="total" value="0" size="30" disabled="true"/></td>
</tr>
<tr bgcolor="orange">
    <td colspan="3" align="right">DISKON</td>
    <td><input type="text" name="diskon" value="0" size="30" disabled="true"/></td>
</tr>
<tr bgcolor="pink">
    <td colspan="3" align="right">JUMLAH DIBAYAR</td>
    <td><input type="text" name="bayar" value="0" size="30" disabled="true"/></td>
</tr>

</table>
<input type="submit" name="clear" value="clear" size="5" Onclick="reset()"/>
</form>
</body>
</html

Ok, sekian dulu postinga kali ini. Selamat mencoba... Bila ada yang kurang jelas, silahkan tinggalkan komentar.

.
=================================================
kurangin tidur banyakin ngopi

Thursday, 4 March 2010

Tutorial CSS dan HTML untuk Membuat Sebuah Desain Web

Kalau pada postingan mengenai web desain yang sebelumnya, kita belajar mengenai dasar-dasar html. Maka untuk kali ini kita akan sedikit bermain-main dengan CSS.
CSS?
CSS memiliki kepanjangan cascading style sheet. Yang merupakan pelengkap dari script html. Dengan adanya CSS ini maka desain akan lebih mudah dilakukan dan juga script html terlihat relatif "bersih". CSS dapat mengatur mengenai tata letak, style font, warna dan lain sebagainya.
Cara penyantuman CSS terdapat 2 cara yakni css yang embedded dengan script html dan css yang terpisah. Untuk saat ini penggunaan css yang menjadi satu dengan script html menjadi opsi yang sering digunakan para programmer web.
Ok, kita sudahi intermezzonya. Dan mari kita langsung menuju ke TKP. :-)
Goal yang ingin kita capai pada tutorial kali ini adalah sebuah halaman awal website sederhana dengan gambaran secara garis besar seperti berikut :

(note: klik untuk memperjelas gambar)
Yang pertama kita lakukan adalah menganalisis komponen2 dasar dari halaman tersebut :
1. Header.
2. Sidebar.
3.Content.
4.Footer.
Perlu diingat bahwa didalam komponen dasar masih terdapat komponen2 turunan dari masing-masing komponen.
1. Untuk header komponen turunannya adalah Logo, Teks "teknik Elektro","menu" dan search field serta search button.
2. Sedangkan untuk sidebar, adalah menu navigasi utama.
3. Content terdiri dari, content gambar, content posting dan content event.
4. Untuk footer tidak terdapat turunan komponen.
Setelah melakukan dokumentasi dan analisis komponen halaman web maka hal yang selanjutnya dilakukan adalah membuat layout awal (sketsa desain yang masih berupa border2). Gambarnya seperti berikut :

Layout tersebut kita buat dengan memanfaatkan script HTML dan CSS. Pada tutorial ini saya memakai sistem embedded. Jadi penulisan CSS berada pada head script html.

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Teknik Elektro UM</title>
<style type="text/css">
    
</style>
</head

-Langkah pertama yang dilakukan adalah membuat sebuah style wrapper atau bingkai utama dalam desain.Untuk wrapper ini lebarnya ditentukan terserah anda dan dengan margin auto. Margin auto ini dibuat karena wrapper digunakan untuk menampung konten lainnya.

#wrapper {
    margin:auto;
    width: 1260px;
    border: 3px solid red;
    background: yellow;
    }

- Kemudian kita menginjak ke bagian header. Didalam header kita akan membentuk 5 style css sesuai dengan hasil analisis. Properties yang ada kita sesuaikan dengan kebutuhan yang diinginkan.
-header

#header {
    margin: 2px 0;
    height: 100px;
    border: 1px solid blue;
    }

-logo

#boxlogo {
    float: left;
    margin: 10px 10px 0 50px;
    width: 75px;
    height: 75px;
    border: 1px solid blue;
    }

-text "teknik elektro"

#textheader {
    float: left;
    margin: 10px 10px 0 0;
    width: 600px;
    height: 75px;
    padding: 10px 0 0 0;
    font-size: 35px;
    font-weight: bold;
    text-align : left;
    font-family: "Tahoma", Times, serif;
    color: black;
    border: 1px solid blue;
    }

- Menu navigasi header. Untuk menu ini style css berfungsi untuk mengatur posisi dari menu (#menuheader ul) dan fontase dari menu (#menuheader ul li a). Berikut kodenya,

#menuheader ul {
   float: right;
    width: 350px;
    margin: 0;
    padding: 0 27px 0 0;
    list-style: none;
   }

   #menuheader ul li a{
   float: left;
    width: 50px;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #00034b;
    border-right: 1px solid #5f3b11;
   }

- Style untuk search, terdapat dua style untuk menentukan properties kontainer (menusearch dan menusearchbutton) dan dua style untuk mengatur tentang searchbutton dan searchfield.

#menusearch {
    float: right;
    margin : 50px 50px 0 0;
    width: 150px;
    height : 30px;
    border : 2px solid black;
    }
    #menusearchbutton {
    float: right;
    margin : 50px 0 0 0;
    width: 50px;
    height : 30px;
    border: 1px solid blue;
    }
    #searchfield{
    border: 1px solid #ffffff;
    color: #000000;
    font-size: 13px;
    font-variant: normal;
    height: 25px;
    line-height: normal;
    width: 148px;
    }
    #searchbutton{
    float: right;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    height: 30px;
    margin: 0 0 0 7px;
    text-align: center;
    vertical-align: bottom;
    white-space: pre;
    width: 50px;
    }

-Selanjutnya kita melangkah untuk style content. Didalam content kita akan membuat kontainer untuk isi dari sidebar dan content yang kita berinama style inner. Style inner ini akan menampung isi dari konten2 sebaiknya kita kasih nilai height yang auto.

#inner {
    width: 1260px
    height: auto;
    float: left;
    margin: 0 0;
    border: 2px solid orange;
    }

- Next step is sidebar. Di sidebar ini kita buat dua tipe style, satu untuk mengatur positioning (sidebar) dan satu lagi mengatur tentang menu-menu navigasi.Style2 menu navigasi ini berguna untuk menganimasikan menu bila kita lakukan manipulasi kepadanya (click atau sorot).

#sidebar {
    float: left;
    margin-right: 30px;
    width: 200px;
    height: 350px;
    border: 1px solid yellow;
    background: yellow;
    border: 1px solid blue;
    }
    #leftmenu ul{
    width:200px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

    #leftmenu a:link, #leftmenu a:visited, leftmenu a:active {
    padding-left: 15px;
    text-decoration: none;
    }

    #leftmenu a{
    padding: 5px 0px 5px 15px;
    display: block;
    background: #f6b446 no-repeat left center;
    margin: 0px 0px 1px;
    color: black ;
    }

#leftmenu a:hover{
    background: #f89806 no-repeat left center;
    color: black;
    }

Sampai disini masih bisa ngikutin khan??? Harus bisa...hehe (note: kalau gag bisa hubungi aja authornya :-p)

-Lanjut gan, Kita menuju ke content atau isi. Disini kita aka membuat beberapa style antara lain style content, top content (ini buat gambar2 yang diatas postingan), main content (isi postingan) left content (event). Dalam style2 ini kita mengatur mengenai positioning dan fontase serta warna2 yang akan digunakan.

#content {
    float: left;
    width: 1015px;
    height: 350px;
    border: 1px solid black;
    background : white;
    }

    #topcontent {
    float: left;
    width: 1014px;
    height: 100px;
    border: 2px solid orange;
    }
    #maincontent {
    float: left;
    width: 750px;
    height: 248px;
    border: 1px solid blue;
    }

    #rightcontent {
    float: right;
    width : 220px;
    height : 243px;
    border : 1px solid black;
    background: orange;
    }

-Baiklah, kita hampir selesai dalam membuat css style. Apakah anda ingat? Bagian mana yang belum dibuatkan style? Yups, benar... Jawabannya adalah footer. Ini scriptnya...

#footer {
   clear: both;
   height: 50px;
   border: 1px solid blue;
   background: black;
   padding: 10px 0 0 0;
   font-size: 15px;
   font-weight: bold;
   text-align : center;
   font-family: "comic sans series", Times, serif;
   color: orange;
}

Untuk style css dasar (layout) telah selesai. Anda dapat menambahkan style2 terkait fontase untuk melengkapinya. jadi ketika menulis script html anda tinggal memanggil style yang telah anda buat tersebut. CSS ini semacam fungsi pada bahasa pemrograman...
Kesulitan yang dialami pada css ini adalah tata letak. Karena kita menggunakan full script tanpa bantuan CSS editor macam dreamweaver, maka tata letak layout adalah flowlayout. Yakni layout yang mengalir sesuai aliran atau float yang ada. Untuk dapat mengetahui mengenai ini, silahkan anda ubah nilai2 float dan margin atau padding pada style2 tertentu. Lama kelamaan anda akan mengerti mengenai cara pengaturan tata letak dari CSS ini.
Ok setelah kita membuat style tersebut, langkah yang dikerjakan berikutnya adalah membuat script htmlnya. Kita harus mengingat kembali komponen2 dasar dari halaman ini dan turunannya. Karena kita akan memanggilnya dengan membuat divisi2 (div) dengan style yang telah kita buat. Sebagai contoh untuk header, maka div terluar adalah div style header lalu didalamnya terdapat div style logo, teks, menu navigasi, dan search. Begitu pula bagian yang lain. Bila kita salah melakukan peletakkan ini maka akan terjadi penumpukan yang salah.
Berikut ini adalah script html untuk body. Kita tinggal membuat divisi(div) dan memberinya style dengan cara memanggil style CSS yang telah kita buat diatas.
<body>
    <div id="wrapper">
        <div id="header">
        header
            <div id="boxlogo">
                <img src="um.png" height="75" width="75" />
            </div>
            <div id="textheader">
                TEKNIK ELEKTRO
            </div>
            <div id="menuheader">
                <ul>
                       <li><a href="#home">Home</a></li>
                       <li><a href="#Situs_Map">Situs Map</a></li>
                       <li><a href="#RSS">RSS</a></li>
                       <li><a href="#Contact">Contact</a></li>
                       <li><a href="#About_US">About Us</a></li>
                </ul>
            </div>
            <div id="menusearch">
                search field
            </div>
            <div id="menusearchbutton">
                search
            </div>
        </div>
        <div id="separateheader">
        </div>
    <div id="inner">
        <div id="sidebar">
            sidebar
            <div id="leftmenu">
         </div>
        </div>
        <div id="content">
            <div id="topcontent">
                topcontent
            </div>
            <div id="maincontent">
                maincontent
            </div>
            <div id="rightcontent">
                rigthcontent
            </div>
        </div>
    </div>

    <div id="footer">
        footer
    </div>
      </div>
</body>

Maka desain layout awal sudah selesai.
-Hal yang selanjutnya dilakukan adalah dengan memasukkan gambar,tulisan, warna kepada layout tersebut.
Anda juga dapat mempercantik tampilannya sesuai dengan keinginan anda. Dengan cara merubah style CSS yang telah dibuat.

Ini adalah script secara keseluruhan :

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Teknik Elektro UM</title>

    <style type="text/css">
    
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">

            <div id="boxlogo">
                <img src="um.png" height="75" width="75" />
            </div>
            <div id="textheader">
                TEKNIK ELEKTRO
            </div>
            <div id="menuheader">
                <ul>

                       <li><a href="#home">Home</a></li>

                       <li><a href="#Situs_Map">Situs Map</a></li>

                       <li><a href="#RSS">RSS</a></li>

                       <li><a href="#Contact">Contact</a></li>

                       <li><a href="#About_US">About Us</a></li>

                </ul>
            </div>
            <div id="menusearch">
                <input type="text" name="q" size="10" id="searchfield" title="searchfield" />
            </div>
            <div id="menusearchbutton">
                <input type="submit" name="Search" value="Search" alt="Search" id="searchbutton" title="Search" />
            </div>
        </div>
        <div id="separateheader">
        </div>
    <div id="inner">
        <div id="sidebar">
            <div id="leftmenu">
            <ul>
                       <li><a href="#home">Home</a></li>
                       <li><a href="#News_and_Media">News and Media</a></li>
                       <li><a href="#Tutorials">Tutorials</a></li>
                       <li><a href="#Tips_and_Tricks">Tips and Tricks</a></li>
                       <li><a href="#Downloads">Downloads</a></li>
                    </ul>
         </div>
        </div>
        <div id="content">
            <div id="topcontent">
            <img src="mahasiswaum.jpg" align="left" height="100" width="200"></img>
            <img src="gedungelektro.png" align="left" height="100" width="200"></img>
            <img src="pkpt.png" align="left" height="100" width="218"></img>
            <img src="gazebo.png" align="left" height="100" width="200"></img>
            <img src="dosen.png" align="left" height="100" width="196"></img>
            </div>
            <div id="maincontent">
                <h1> Selayang Pandang </h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br />
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />
                nisi ut aliquip ex ea commodo consequat.</p>
                <br/>
                <p>read more</p>
            </div>
            <div id="rightcontent">
            <h3>Event</h3>
            <ul>
                <li>Pelatihan Pembuatan Game</li>
                <li>Seminar Nasional Pembuatan Media Pembelajaran Interaktif</li>
                <li>Seminar pra skripsi</li>
            </ul>
            </div>
        </div>
    </div>

    <div id="footer">
        <p>Design by Gilang Copyright 2010</p>
    </div>

    </div>
</body>
</html>

Untuk dapat mencobanya secara keseluruhan maka anda harus mendonload komponen2 gambar dari web ini. Anda dapat mengunduhnya di http://www.ziddu.com/download/8817080/ScriptCSSHTMLDesainWebtutorial.rar.html

Sekian postingan untuk hari ini, semoga tutorial ini bermanfaat. Berhubung saya masih awam dalam membaut tutorial. Saran dan kritik anda sangat saya harapkan. Silahkan tinggalkan komentar.... terimakasih...
Salam hangat selalu... cheers

=================================================
kurangin tidur banyakin ngopi

Wednesday, 24 February 2010

Pemrograman Web Dengan HTML : Membuat Tabel Dengan Ukuran Border Yang Kecil (Thin)

Mungkin bagi anda yang telah belajar mengenai pemrograman html, membuat tabel dengan border standat dapat dilakukan dengan mudah. Namun seringkali permintaan dari user membutuhkan pemikiran lebih atau lebih tepatnya cara manipulasi yang baik. Untuk kali ini saya ingin berbagi tentang bagaimana cara membuat tabel yang garis-garis pemisahnya tidak beraturan dan memiliki ukuran yang kecil (thin).
Contoh tabel yang akan dihasilkan adalah sebagai berikut :

Untuk pertama kali kita analisis dulu mengenai propertis tabel yang akan dibuat. Dari gambar diatas diketahui bahwa tabel memiliki :
1. 8 baris dengan 5 Kolom. Yang diatasnya memiliki border yang tebal.
2. Border untuk kolom No tidak bergaris (bagian kiri) dan border diantara kolom pro dan free juga tidak ada, begitu juga dengan kolom paling kanan tidak terdapat garis .
3. Untuk baris header terdapat border di bagian bawah.
4. Border untuk baris-baris tidak ada kecuali untuk baris ke lima dan ke tujuh.

Ok, kita melangkah ke level selanjutnya. Kita harus memikirkan bagaimana cara untuk memanipulasi tabel tersebut. hehe...(programer harus pandai merekayasa)
1. Kita buat tabel dengan lebar sembarang dan border = 0. (kita menset border agar tidak terlihat)

<table border="0" width="600" align="center">

2. Untuk membuat garis tebal yang paling atas. Kita buat sebuah baris dengan satu kolom. Kita atur stylenya dengan membuat border bagian bawah berwarna hitam (#000000) dan format thick.

<tr>
<td colspan="8" style="border-bottom:#000000 solid thick;"></td>
</tr>

3. Selanjutnaya untuk membaut header tabel, diperlukan 4 kolom yang terlihat. Hal yang dilakukan sama dengan membuat baris dengan 5 kolom biasa. Namun kita harus membuat 3 kolom tambahan untuk membuat garis horizontal antara kolom 1 dan 2, 2 dan 3, serta 3 dan 4. Untuk membuat garis horizontal, kita dapat melakukan rowspan seluruh jumlah baris. Selanjutnya kita ubah style kolom tersebut dengan border left atau right yang berwarna hitam dan berukuran thin (tipis). Dan untuk garis dibawah header, sama seperti membuat garis yang pertama hanya ukurannya diubah jadi thin.

<tr>
        <th><strong>No</strong></th>
        <td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
        <th align="center" ><strong>Fitur</strong></th>
        <td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
        <th align="center"><strong>Enterprise</strong></th>
        <td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
        <th align="center"><strong>Pro</strong></th>
        <th align="center"><strong>Free</strong></th>
    </tr>
    <tr>
        <td colspan="8" style="border-top:#000000 solid thin;"></td>
    </tr>

4. Selanjutnya tinggal membuat baris-baris dan mengisinya dengan nilai-nilai yang ingin dimasukkan.

<tr>
        <td align="center">1</td>
        <td style="align:left">Garansi seumur hidup</td>
        <td align="center">X</td>
        <td align="center">-</td>
        <td align="center">-</td>
    </tr>

5. Untuk membuat garis diantara baris kelima dan keenam serta dibawah yang ketujuh. Kode yang digunakan sama seperti yang pada poin no 2. Kode ini diletakkan pada posisi yang ingin dikasih garis.

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

Setelah semua tahapan dilakukan, maka tabel insyaallah akan sudah jadi.
Walaupun teknik yang digunakan berbau manipulasi penglihatan tapi itu juga dapat dijadikan salah satu solusi untuk membuat jenis tabel yang neko-neko...

Untuk yang pengen tahu script utuhnya adalah sebagai berikut :

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Belajar Tentang Table</title>
</head>

<body>

    <h1 align="center">Tabel Fitur</h1>
    <table border="0" width="600" align="center">
    <tr>
        <td colspan="8" style="border-bottom:#000000 solid thick;"></td>
    </tr>

    <tr>
        <th><strong>No</strong></th>
        <td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
        <th align="center" ><strong>Fitur</strong></th>
        <td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
        <th align="center"><strong>Enterprise</strong></th>
        <td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
        <th align="center"><strong>Pro</strong></th>
        <th align="center"><strong>Free</strong></th>
    </tr>
    <tr>
        <td colspan="8" style="border-top:#000000 solid thin;"></td>
    </tr>

    <tr>
        <td align="center">1</td>
        <td style="align:left">Garansi seumur hidup</td>
        <td align="center">X</td>
        <td align="center">-</td>
        <td align="center">-</td>
    </tr>
    <tr>
        <td align="center">2</td>
        <td align="left">Multiuser</td>
        <td align="center">X</td>
        <td align="center">-</td>
        <td align="center">-</td>
    </tr>
        <tr>
        <td align="center">3</td>
        <td align="left">Update otomatis</td>
        <td align="center">X</td>
        <td align="center">-</td>
        <td align="center">-</td>
    </tr>
        <tr>
        <td align="center">4</td>
        <td align="left">Cetak Laporan</td>
        <td align="center">X</td>
        <td align="center">X</td>
        <td align="center">-</td>
    </tr>
        <tr>
        <td align="center">5</td>
        <td align="left">Notifikasi Error</td>
        <td align="center">X</td>
        <td align="center">X</td>
        <td align="center">-</td>
    </tr>
    <tr>
        <td colspan="8" style="border-top:#000000 solid thin;"></td>
    </tr>
        <tr>
        <td align="center">6</td>
        <td align="left">Ubah tema</td>
        <td align="center">X</td>
        <td align="center">X</td>
        <td align="center">X</td>
    </tr>
        <tr>
        <td align="center">7</td>
        <td align="left">Try Icon</td>
        <td align="center">X</td>
        <td align="center">X</td>
        <td align="center">X</td>
    </tr>
    <tr>
        <td colspan="8" style="border-top:#000000 solid thin;"></td>
    </tr>

</table>

</body>
</html>

Oke, mari belajar pemrograman html secara bersama-sama. Jangan lupa kopi untuk teman belajar pemrograman html.... cheers...
=================================================
kurangin tidur banyakin ngopi

HTML Designer : Membuat Diagram Dengan Memanfaatkan Tabel

Untuk belajar pemrograman kali ini, kita akan belajar untuk menggunakan performatan tabel untuk berbagai keperluan. Dengan menggunakan tabel kita bisa membuat chart atau diagram batang yang menarik seperti gambar berikut ini :

Dari gambar diatas mungkin kita berfikir akan sulit untuk merekayasa tabel menjadi grafik batang seperti diatas. Hal yang perlu dilakukan adalah sebagai berikut :

Buat tabel dengan style border = 0 (jadi tabel akan terlihat polos)=> untuk header. Atur row pertama dengan memberi nama pada header tabel, perusahaan dan pendapatan. Kita harus mengatur lebar colom sesuai dengan lebar tabel tabel. Berikut ini adalah code yang harus dibuat.

<hr align="left" width="640"></hr>
<table width ="634" border="0">
<tr>
<td width="321"><strong>Perusahaan</strong></td>
<td width="303"><strong>Pendapatan</strong></td>
</tr>
</table>
<hr align="left" width="640"></hr>
Kita buat tabel baru untuk membuat grafik batang.

<table width="643" border="0">

     3.Lalu kita membuat sebuah baris baru dengan 4 kolom
     4. Untuk grafik pertama, kolom pertama digunakan untuk menuliskan nama perusahaan. Kolom kedua adalah spasi, kolom ketiga adalah grafik batang (beri ukuran lebar 150 dan warna ). Sedangkan kolom ke 4 digunakan untuk menuliskan teks tentang persentase.
     5.Pada baris kedua, cara yang digunakan sama, namun kita tinggal mengubah ukuran lebar dan warna dari grafik.
Berikut ini adalah kode untuk membuat ketiga langkah diatas (membuat chart 1 dan 2)

<tr>
        <td width="151">Angin Reboot, Ltd</td>
        <td colspan="3"> </td>
        <td colspan="2"><table width="150" border="0" bgcolor="#FF6600">
    <tr>
        <td> </td>
    </tr>
</table></td>
<td width="171">+150%</td>
</tr>

6.Untuk grafik ketiga dan keempat caranya sama hanya saja kolom kedua digunakan sebagai penampung teks presentase sedangkan kolom ketiga untuk chart dan yang terakhir spasi
Kode html yang digunakan adalah sebagai berikut :

<tr>
    <td>Shutdown,Ltd</td>
    <td width="44"><div align="right">

    </div></td>
    <td width="10"><div align="right">-75%</div></td>

    <td width="10"><div align="right">
       <table width="75" border="0" bgcolor="#f1231c">
    <tr>
          <td> </td>
    </tr>
      </table></div></td>

</tr>

Sekian postingan mengenai cara pembuatan grafik dengan menggunakan tabel. Semoga postingan ini dapat bermanfaat untuk semua. Mari belajar web programming dengan html bersama...
Untuk html secara lengkap adalah sebagai berikut :

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Tugas Praktikum 1</title>
</head>

<body>
<p> Grafik Batang Penghasilan Perusahaan </p>
<hr align="left" width="640"></hr>
<table width ="634" border="0">
<tr>
   <td width="321"><strong>Perusahaan</strong></td>
   <td width="303"><strong>Pendapatan</strong></td>
</tr>
</table>
<hr align="left" width="640"></hr>
<table width="643" border="0">
    <tr>
        <td width="151">Angin Reboot, Ltd</td>
        <td colspan="3"> </td>
        <td colspan="2"><table width="150" border="0" bgcolor="#FF6600">
    <tr>
        <td> </td>
    </tr>
</table></td>
<td width="171">+150%</td>
</tr>
<tr>
    <td>Command Prompt,Inc</td>
    <td colspan="3"></td>
    <td width="59"><table width="55" border="0" bgcolor="#ff6859">
    <tr>
          <td> </td>
    </tr>
      </table></td>
      <td width="87"><+55%</td>
</tr>
<tr>
    <td>Hibernate,Ltd</td>
    <td width="60"><div align="right">

    </div></td>
    <td width="10"><div align="right">-23%</div></td>

    <td width="60"><div align="right">
       <table width="23" border="0" bgcolor="#e2001a">
    <tr>
          <td> </td>
    </tr>
      </table></div></td>

</tr>
<tr>
    <td>Shutdown,Ltd</td>
    <td width="44"><div align="right">

    </div></td>
    <td width="10"><div align="right">-75%</div></td>

    <td width="10"><div align="right">
       <table width="75" border="0" bgcolor="#f1231c">
    <tr>
          <td> </td>
    </tr>
      </table></div></td>

</tr>
</table>
<hr align="left" width="640"></hr>

</body>
</html>

Selamat malam dan jangan lupa ngopi...
Nb: buat para readers mohon bantuan doa'nya supaya inter bisa menang lawan chelsea nanti malam... :-P Nite
=================================================
kurangin tidur banyakin ngopi

Friday, 12 February 2010

Tugas 1: Pengaturan teks, font, warna ,tata letak dan import gambar dengan HTML

Tugas studi kasus pada pertemuan pertama ini relatif mudah dan sederhana. Materi yang harus dikuasai adalah pengaturan teks, fontase, warna, import gambar dan tata letak. Hal yang dipelajari masih merupakan dasar-dasar dari pemrograman web.
Berikut ini adalah screenshot dari tugas yang saya buat :

Sedangkan listing programnya adalah sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><br><head><br>    <title> MULAI BERKARYA</title><br></head><br><br><body background="images.jpg"><br>    <br>    <h1 align="center" style=" color:#fffffff">The Special One Website</h1><br>    <br>    <hr style="color:black"> </hr><br>    <p><br>     <font color="blue">Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun<br /><br>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun <br /><br>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun, <br /><br>    <br /><br>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun. <br /><br>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun <br /><br>    Lorem ipsum dolor sit amet, consectetur adipisicing elit, set do tempura nan de baskai lian tia we sio kun <br /><br>    <br>    </font><br>    <hr style="color:yellow"></hr><br>    <br /><br>    <br /><br>    <br /><br>    <hr align="right" style= "color:blue" width="200"></hr><br>    <hr align="right" style= "color:#ff0657" width="180"></hr><br>    <hr align="right" style= "color:#f09845" width="160"></hr><br>    <img src="http://localhost/myweb/communicate.GIF" border="8" align="right"/><br></body><br><br></html>

Untuk melihat gambar secara lebih jelas, silahkan untuk men-klik pada gambar yang ingin diperbesar. :-p

Sekian, postingan kali ini. Semoga bermanfaat dan jangan lupa untuk terus berkarya.

===============================================================
Kurangin tidur banyakin ngopi

Wednesday, 24 June 2009

Desain template web-site jurusan teknik sipil

Ini adalah salah satu hasil desain yang saya buat ketika mendapat tugas magang. Di dalam web ini saya menggunakan komposisi warna coklat. Hal ini saya pilih karena selama ini jurusan teknik sipil identik dengan warna2 coklat. Selain itu di bannernya terdapat garis yang berwarna kuning yang melambangkan "intelligence". Dan juga ada unsur kayu, yang juga masih identik dengan jurusan ini.

Di dalam desain ini belum sepenuhnya selesai karena saya masih kesulitan dalam mencari logo jurusan ini.

Silahkan anda memberikan komentar terhadap desain ini, sebagai sarana kritikan yang membangun untuk dapat menyempurnakan hasil dari web desain jurusan teknik mesin.