Search This Blog

Wednesday 16 November 2016

Contoh web design

Pada materi kali ini Goomilar97 ingin berbagi sedikit mengenai contoh design web dengan menggunakan HTML, CSS dan JavaScript, dimana design tersebut akan diberikan dengan percuma dan dapat dicopy untuk kebutuhan Anda jika memang ingin menggunakan desain tersebut dalam web yang Anda buat. Design web pada contoh yang Goomilar97 berikan antara lain seperti berikut ini hasilnya:

contoh design web goomilar97

Dengan code sebagai berikut:




Namun jika ingin sama persis dengan yang tertera pada gambar diatas, maka Anda harus menyisipkan beberapa gambar berikut:


medali goomilar logo goomilar goomilar97 keyboard goomilar97 bahasa pemrograman goomilar97 program goomilar97

dan gambar tersebut harus disimpan dalam sebuah direktori/folder dimana direktori tersebut harus berada satu direktori dengan code HTMLnya, terkecuali jika Anda mau mengganti url img-nya dengan url yang baru sesuai dengan penempatan file gambar tersebut.

untuk penyesuaian dengan yang Goomilar97 buat, Anda dapat membuat direktori / penempatan file sebagai berikut:

direktori goomilar97

dalam contoh gambar tersebut terdapat sebuah file gumilar.html dan sebuah direktori dengan nama Background yang ditempatkan dalam sebuah direktori yang sama.

Monday 14 November 2016

Selectors CSS

Ada beberapa selector dasar CSS yang diambil dari tag HTML itu sendiri, misalnya pada penggunaan tag body yang ingin dijadikan sebagai selector dengan alasan bahwa efek yang diberikan ialah untuk keseluruhan, atau untuk beberapa tag lainnya yang memang pada setiap tag tersebut ingin diberi efek yang sama. Seperti halnya pada penerapan tag paragraf yang biasa kita kenal dengan <p>, atau untuk heading dengan tag yang biasa kita kenal dengan <h1> - <h6>, atau mungkin untuk tag li dan link.
untuk penerapan dari apa yang penulis sebutkan tadi, mari perhatikan contoh program berikut:




pada contoh program diatas kita dapat melihat bahwa penerapan efek yang digunakan dalam CSS tersebut menggunakan tag HTML itu sendiri, dengan kata lain tidak dibuatkannya selector baru. Namun ada pula teknik lain untuk penerapan style pada HTML dengan menggunakan bantuan CSS. Salah satunya dengan bantuan selector yang dibuat sendiri secara bebas. Untuk hal tersebut, disini terbagi menjadi dua hal, yaitu untuk Class dan ID, namun sebelum kesana, mari perkenalkan terlebih dahulu mengenai costum selector, apa perbedaan class dan ID.


Costum Selector

costum selector merupakan sebuah selector dalam CSS yang dapat ditentukan secara bebas oleh web-designer itu sendiri. Untuk penerapannya sendiri tidak berpatok pada tag HTML, namun dapat diterapkan sesuai dengan keinginan dan kenyamanan designer.
Untuk maksud bebas itu sendiri ialah bebas dalam penamaan desain yang ingin diberi style CSS, namun untuk penulisannya itu sendiri tidak sepenuhnya bebas, tetap saja terdapat aturan penulisan yang berlaku disetiap penamaan desain. seperti halnya ingin memberi nama desain dengan Class CSS, maka untuk penulisan harus diawali dengan tanda baca (.) / "titik". Tanda baca titik tersebut merupakan ciri khas sekaligus aturan dalam pembuatan class pada sebuah desain dengan CSS. Begitupun dengan ID, pada ID pun sama, terdapat aturan yang sekaligus menjadi ciri khas baginya dalam pembuatan desain dalam CSS. Pada ID, penulisan nama desain harus diawali dengan tanda baca (#) / "pagar". Tanda baca tersebut ialah penanda bahwa desain yang dibuat ialah menggunakan ID.

Satu hal yang tidak kalah pentingnya untuk Anda ketahui mengenai ID dan Class ialah perbedaannya. Kapan harus menggunakan ID dan kapan kita harus menggunakan Class? itu merupakan sebuah pertanyaan yang terlihat sederhana namun sungguh penting perannya untuk dipahami. Untuk penerapan ID sendiri digunakan pada saat desain yang dibuat memang Unique atau dengan kata lain tidak sama dengan yang lain, atau berbeda sendiri. Maksud dari unique sendiri ialah pada saat kita membuat selector dan selector tersebut memang hanya akan digunakan pada satu desain, maka disitulah kita menggunakan ID. Bukan karena ID tidak dapat digunakan dalam beberapa desain ataupun Class tidak dapat digunakan hanya untuk satu desain, namun memang peraturan dalam penulisannya seperti itu. Biasa penulis menyebutnya "hanya untuk cari aman". Namun ada pula alasan lain ialah karena ke'efektifan seorang programmer dalam menuliskan codenya pada saat membuat program itu penting, alasannya sudah jelas, karena setiap program yang dibuat memang akan menjadi tanggung jawab programmer dan memang semua program (baik dan buruknya) bergantung pada programmer. Maka dengan demikian untuk menghindari penilaian/anggapan sepele pada suatu code itu wajib dihindari.

Kembali pada topik, tadi sudah dibahas secara ringkas mengenai ID, dan kini perlu dipahami mengapa Class digunakan hanya untuk desain yang selectornya digunakan secara bersamaan. Semua itu sebenarnya sudah jelas, ialah karena untuk apa ada sebuah ID dan Class jika antara kedua itu digunakan untuk hal yang sama. Dengan demikian, perbedaan yang terlihat sederhana tersebut alangkah lebih baiknya untuk selalu diperhatikan, selagi memang perbedaannya pun hanya sedikit dan tidak memerlukan waktu lama untuk memahami dan menghafalnya.

Untuk penerapan materi yang penulis sampaikan mengenai Class dan ID, mari perhatikan contoh program berikut:


Saturday 12 November 2016

Pengenalan CSS


*CSS
CSS merupakan kumpulan format yang digunakan untuk memformat website agar dapat lebih flexibel.

Elemen Dasar
1. Selector (Tag / elemen pada HTML).
2. Declaration (Perintah CSS untuk menjelaskan desain selector, yang isinya antara lain property dan value.

Format penulisan : Selector { property: value;}


*Penulisan CSS

Inline CSS
<p style=’color: blue’>Text ini berwarna biru</p>

Internal / Embedded CSS
<style>
p{color: blue;}
</style>

External CSS
<link rel=’stylesheet’ type=’text/css’ href=’file_CSS.css’>

*Jenis CSS

a). Font CSS
b). Text CSS
c). Padding CSS
d). Margin CSS
e). Border CSS
f). Background CSS

a). Font CSS
1. font-family
2. font-size-adjust
3. font-weight
4. font-variant
5. font-style
6. font-size
7. font-stretch

<style>
p{
font-family: Georgia;
font-size: 12pt;
}
</style>

b). Text CSS
1. Color
2. Direction
3. Letter-spacing
4. Text-align
5. Text-Decoration
6. Text-shadow
7. Text-indent
8. Word-spacing
9. White-space
10. Text-transform

<style>
p{
color: red;
text-align: center;
letter-spacing: 2px;
}
</style>

c). Padding CSS

<style>
p{
padding: 10px 5px 10px 5px;
}
</style>

d). Margin CSS

<style>
p{
margin-top: 20px;
}
</style>

e). Border CSS

1. Border (none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset).
2. Border-color.
3. Border-style.
4. Border-width.

<style>
p{
border: 2px dotted gray;
}
</style>

f). Background CSS

1. Background-attachment
2. Background-color
3. Background-image
4. Background-position
5. Background-repeat

<style>
p{
Background-image: url(‘img/1.jpg’);
Background-attachment: fixed;
}
</style>

Wednesday 9 November 2016

FORM

Dalam materi kali ini penulis ingin menyampaikan beberapa hal mengenai form, baik itu untuk input ataupun button. Namun sebelum kita menuju ke kodingan, alangkah lebih baiknya kita memahami terlebih dahulu apa itu form dan untuk apa form tersebut digunakan.

FORM merupakan area yang digunakan untuk menampung beberapa objek khusus dalam HTML sehingga dapat diproses secara dinamis. Form sendiri memiliki beberapa artibut yang harus disisipkan dalam membantu dalam prosesnya. Atribut itu sendiri terdiri dari: name, action, method. Name berisikan nama objek yang nantinya menjadi jembatan panggilan saat proses dilakukan. Misalnya pada saat kita ingin memprosesnya menggunakan PHP, maka form tersebut akan dipanggil berdasarkan namenya. Sedangkan untuk action berisikan URL file yang akan melakukan prosesnya itu sendiri. Misalkan pada saat kita ingin memprosesnya menggunakan PHP sedangkan file PHP itu sendiri diletakan di halaman yang berbeda dengan halaman form HTML ini, maka url tempat PHP itu disisipkan harus diletakan dalam action. Tetapi untuk file PHP yang diletakan dalam satu halaman dengan form HTML ini tidak perlu disisipkan URLnya, atau  dengan kata lain actionnya dikosongkan seperti dalam contoh  program yang  penulis berikan. Dan yang terakhir ialah mengenai method. Method merupakan metode untuk pengiriman data yang isinya antara GET atau POST. Untuk penggunaan GET dan POST sendiri memang sama saja yaitu untuk pengiriman data, namun untuk membedakannya sendiri ialah pada saat kita menggunakan GET dalam method, maka apa yang kita inputkan akan tampil bersamaan dengan URL dari halaman tersebut, sedangkan untuk POST maka inputan yang dimasukan tidak akan terlihat dalam URL. Semua penggunaan sesungguhnya kembali pada kebutuhan. Namun untuk inputan (terutama password) diharapkan untuk tidak menggunakan method GET, karena jika nanti menggunakan method tersebut sangat berbahaya terhadap akun yang digunakan. Misalnya contoh sederhana jika Anda sedang membuka akun disamping teman Anda dan terrnyata password Anda ditampilkan diatas layar bersamaan dengan URL dari halaman yang sedang Anda buka, maka teman Anda akan dapat melihat password yang Anda gunakan. Maka dengan demikian penulis sangat menyarankan untuk penggunaan method POST pada saat membuat inputan password.

Selain mengenai form, penulis ingin menjelaskan pula sedikit mengenai isi form, yaitu sebuah inputan yang diantaranya meliputi name, type, value. Untuk name sendiri sama halnya seperti pada form, yaitu untuk dipanggil pada saat proses berjalan. Untuk type sendiri ialah menentukan tipe dari inputan yang akan dibuat, misalkan kita ingin membuat inputan password, maka kita kita akan menggunakan inputan password. Walau memang dapat menggunakan inputan text atau  yang lainnya, namun untuk password yang menggunakan tulisan alangkah lebih baiknya jika menggunakan input type=”password” seperti dalam program yang sudah penulis berikan. Dan untuk type sendiri bukan hanya ada text dan password, namun juga ada: hidden (yang nantinya inputan tersebut tidak akan terlihat di layar / auto), radio, checkbox dan beberapa tombol yang meliputi: submit, button, reset. Untuk submit digunakan untuk memproses data pada form menuju file yang ditunjuk atribut action pada form. Untuk button tidak memerlukan action dan biasanya digabung dengan javascript. Dan yang terakhir ialah reset  yang mana pasti sudah Anda tahu kegunaannya yang hanya mereset inputan sebelum diproses jika memang ingin semua yang ingin Anda input dibersihkan kembali.

Selain input, ada juga form inputan lain yang biasanya digunakann untuk menyisipkan komentar, dan untuk hal itu penulis yakin tidak perlu dijelaskan panjang lebar seperti apa bentuk formnya, yang jelas namanya textarea. Untuk penyisipannya agar tidak bingung maka lebih baik jika menyesuaikan terlebih dahulu antara teori dengan contohnya, dengan demikian perhatikan contoh program berikut ini:

<html>
    <head/>
    <body>
       <br/>
       <button name='out'>Logout</button
       <br/><br/>
       <center>
                    <form name ='form_html' action='' method='post'>
                           Nama : <input type='text' name='nama'><br/><br/>
                                        <input type='hidden' name='jabatan' value='karyawan'>
                           Password: <input type='password' name='password'><br/><br/>
                           Jenis kelamin : <input type='radio' name='jenkel' value='P' checked>Pria
                                                    <input type='radio' name='jenkel' value='W'>Wanita<br/><br/>
                           Hobby : <input type='checkbox' name='hobby' value='basket'>Basket
                                         <input type='checkbox' name='hobby' value='futsal'>Futsal<br/><br/><br/>
                           Motto : <textarea name='motto' cols='50' rows='5'>Masukan motto Anda</textarea><br/><br/><br/>

          <input type='submit' name='submit' value='SUBMIT'/> <input type='reset' value='RESET'/>
                               
                    </form>
      </center>
  </body>
</html>
Dan hasil  yang akan didapat dari contoh program diatas antara lain sebagai berikut:



Ada sedikit perintah yang lupa penulis sisipkan dalam contoh, ialah untuk SELECT yang digunakan untuk membuat dropdown option. Namun tetap saja penulis akan memberikan contoh penggunaannya. Untuk penggunaan select sendiri memiliki atribut yang terdiri dari name dan multiple. Untuk name sama seperti biasanya ialah untuk memanggil form pada saat proses, sedangkan untuk multiple ialah untuk membuat pilihan yang dapat memilih lebih dari satu. Contohnya pada saat kita ingin memberikan pilihan Agama yang dianut, maka kita tidak memerlukan multiple, karena sudah dapat dipastikan setiap orang hanya memiliki satu agama untuk dianutnya, sedangkan untuk hobby kiita dapat memilih beberapa maka dengan demikian kita memerlukan multiple. Dan untuk SELECT sendiri memiliki yang disebut additional tags, yang nama terdiri dari OPTION yang berguna untuk menambahkan item pilihan dengan atributnya ialah value yang digunakan untuk member nilai pada setiap item. Untuk contoh programnya sendiri sebagai berikut:

<form name=’form’ method=’post’ action=’’>

Hobby:
<select name=’hobi’ multiple>
      <option value=’B’>Basket</option>
      <opton value=’F’>Futsal</option>
</select>

<input type=’submit’ name=’submit’ value=’SUBMIT’/>


</form>

Sunday 9 October 2016

Membuat table dengan HTML


Untuk membuat sebuah tabeldengan HTML dapat dilakukan dengan menggunakan sebuah <tag> yaitu <table>. Tag ini merupakan sebuah tag yang memang  fungsinya khusus untuk digunakan dalam pembuatan tabel, jelas nama tagnya pun tag <table> sudah pasti fungsinya untuk membuat tabel.  Banyak sekali efek yang dapat diterapkan pada tag <table> ini, sama seperti banyak perintah lain dalam HTML yang dapat dberi efek seperti warna, bentuk, dan hal lainnya sesuai denngan keinginan/kebutuhan. Namun yang ingin dijelaskan oleh penulis dalam hal ini ialah untuk masalah judul, baris dan kolom dari tabel tersebut. Perhatikan, sesuaikan dan pahami antara contoh program dengan hasil dalam gambar d berikut:

<html>

<head>

                <title>Goomilar table</title>

</head>

<body>

<center><table border="1" width="400px" height="700px">

                <tr><td>

                <center>

                <h1><font color="brown">Membuat top heading table dengan HTML</font></h1>

                <table border="1" width="300px" height="200px">

                                <tr>

                                                <th>menu1</th>

                                                <th>menu2</th>

                                                <th>menu3</th>

                                                <th>menu4</th>

                                                <th>menu5</th>

                                </tr>

                                <tr>

                                                <td>isi1.a</td>

                                                <td>isi2.a</td>

                                                <td>isi3.a</td>

                                                <td colspan="2"><center>isi4-5.a</center></td>

                                </tr>

                                <tr>

                                                <td>isi1.b</td>

                                                <td>isi2.b</td>

                                                <td>isi3.b</td>

                                                <td>isi4.b</td>

                                                <td>isi5.b</td>

                                </tr>

                                <tr>

                                                <td rowspan="2">isi1.c-d</td>

                                                <td>isi2.c</td>

                                                <td>isi3.c</td>

                                                <td>isi4.c</td>

                                                <td>isi5.c</td>

                                </tr>

                                <tr>

                                                <td>isi2.d</td>

                                                <td>isi3.d</td>

                                                <td>isi4.d</td>

                                                <td>isi5.d</td>

                                </tr>

                </table><br/><br/>

               

                <h1><font color="orange">Membuat left heading table dengan HTML</font></h1>

               

                <table border="1" width="300px" height="200px">

                                <tr>

                                                <th>menu1</th>

                                                <td>isi1.a</td>

                                                <td>isi1.b</td>

                                                <td>isi1.c</td>

                                                <td colspan="2"><center>isi1.d-e</center></td>

                                </tr>

                                <tr>

                                                <th>menu2</th>

                                                <td>isi2.a</td>

                                                <td>isi2.b</td>

                                                <td>isi2.c</td>

                                                <td>isi2.d</td>

                                                <td>isi2.e</td>

                                </tr>

                                <tr>

                                                <th>menu3</th>

                                                <td rowspan="2">isi3-4.a</td>

                                                <td>isi3.b</td>

                                                <td>isi3.c</td>

                                                <td>isi3.d</td>

                                                <td>isi3.e</td>

                                </tr>

                                <tr>

                                                <th>menu4</th>

                                                <td>isi4.b</td>

                                                <td>isi4.c</td>

                                                <td>isi4.d</td>

                                                <td>isi4.e</td>

                                </tr>

                                <tr>

                                                <th>menu5</th>

                                                <td>isi4.a</td>

                                                <td>isi4.b</td>

                                                <td>isi4.c</td>

                                                <td>isi4.d</td>

                                                <td>isi4.e</td>

                                </tr>

                </table>

                </center>

                </td></tr></table>

                </center>

</body>

</html>


Dalam gambar tersebut kita dapat melihat dua buah tabel yang mana pada kedua tabel tersebut terdapat tulisan menu 1, menu2 dan seterusnya, yang mana tulisan tersebut memiliki efek bold atau  dengan kata lain terdapat efek tulisan tebal yang diterapkan. Namun yang perlu diketahui disini ialah pada tulisan tersebut tidaklah diberi efek bold manual dengan tag <b>, namun efek tersebut dihasilkan dari tag <th> yang mana <th> tersebut bias diartikan sebagai table heading / judul  dari setiap baris dan kolom yang terdapat didalamnya. Mengapa diberi efek bold? ya karena jika antara judul dengan isinya sama saja maka untuk apa adanya judul dengan isi, sudah saja isi semua, karena tidak mempengaruhi apapun didalamnya, untuk itu maka efek bold tersebut ditujukan untuk pembeda antara judul dengan isi.

Selain tag <th>sebagai judul dari setiap isi  tabel tersebut, ada juga tag <tr> yang gunanya ialah untuk membuat baris pada tabel tersebut dan tag <td> sebagai kolomnya. Sebagai contoh, pada saat ingin membuat sebuah tabel dengan sebuah baris dan 3 kolom didalamnya, maka Anda dapat menuliskan programnya sebagai berikut:

<table>

<tr>

<td>kolom satu</td>

<td>kolom dua</td>

<td>kolom tiga</td>

</tr>

</table>

Namun dengan catatan, kolom tersebut diletakan didalam baris, atau dengan kata lain tag <td> tersebut diletakan didalam tag <tr>. Bagaimana jika ingin membuat beberapa kolom tapi tidak memiliki baris atau membuat baris tanpa adanya kolom? Itu tidak mungkin seminimal mungkin setiap kolom terdapat dalam satu baris ataupun sebaliknya. Dan termasuk pula dengan tag <th>, iapun harus diletakan dalam tag <tr> karena memang ia pun harus memiliki barisan dalam pembuatannya atau pengalokasiannya.

Satu hal yang ingin diberi tahukan oleh penulis, ya sebatas untuk tambahan diluar topik yang dibicarakan melalui tag <html> disini ialah mengenai table itu sendiri. Tabel html tidak hanya dapat digunakan untuk membuat sebuah list atau data seperti pada umumnnya yang biasa dilihat di Ms.Word atau Ms.Excel, karena pada tabel HTML ini Anda dapat membuatnya menjadi sebuah  template atau rangka sebuah halaman HTML. Terutama untuk pemula yang duduk dikalangan sekolah biasanya masih menggunakan tag <table> sebagai template/rangka dari halaman htmlnya. Entah untuk generasi sekarang, penulis hanya mengambil contoh dari generasi penulis sendiri, jujur saja pada saat penulis masih duduk di bangku sekolah dulu, penulis hanya dapat membuat sebuah rangka dari halaman html dengan memanfaatkan tag <table>, mengapa demikian? Karena mungkin dahulu Guru yang mengajar penulis merasa terlalu jauh jika belajar web designing dengan penggunaan CSS dan JavaScript. Dan memang benar yang dirasakan penulispun seperti itu, dengan membuat sebuah halaman HTML dengan pemanfaatan tag <table> pun terasa sulit, maklum saja untuk usia sekolah, hal seperti itu masih dianggap sulit karena mata dibalik mata pelajaran yang begitu banyaknya dan sebagian besar diisi dengan hafalan, maka terasa agak sulit untuk banyak memperdalam diluar mengenai pemrograman. Dahulu penulis sekolah di SMK dengan jurusan Teknik Komputer dan Jaringan, disana penulis sempat belajar pemrograman dengan Visual Basic, designing dengan Photoshop, Corel Draw, HTML, dan jaringan dengan Linux Debian dalam satu semester yang sama, belum lagi kalau tidak salah waktu itupun mempelajari animasi dengan Macromedia Flash MX, ditambah lagi mata pelajaran yang diluar produktif. Maka memang terlalu berat jika murid di kelas harus mempelarai pula mengenai CSS, JavaScript dan sebagainya, termasuk PHP dan MySQL. Namun dari pengalaman penulis dalam membuat design web menggunakan pemanfaatan tag <table> ialah dapat mengasah logika pula, karena bagaimana tidak, membuat design web hanya dengan penggunaan tag <table>, baik itu untuk header, sidebar, content, footer dll. Tidak seperti pada saat meggunakan CSS yang sudah tersedia banyak perintah yang dapat digunakan, dengan begitu sang designer hanya perlu mencari tahu perintahnya dan menerapkannya pada program yang ia buat. Jika hanya menggunakan tag <table> maka harus berpikir kapan harus menggunakan colspan, rowspan termasuk ketelaban / penggunaan garis border. Dan yang paling menantang ialah bagaimana membuat tampilannya menarik dengan tag sederhana tersebut.

Namun ya kembali lagi, sebaik apapun pembuatan halaman web dengan hanya menggunakan tag <table> tidak akan dapat lebih baik/efektif jika dibandingkan dengan penggunaan style dari css. Tetapi penulis mengakui, pembuatan design dengan hanya bermodalkan tag <table> tersebut sungguh seru dan menantang, walau hasilnya memang tidak seberapa dan mendominasikan tidak laku dijual, tetapi program itu cukup menantang dan menguji logika pemrograman. Entah pendapat yang lain seperti apa, karena penulis dapat berkata seperti ini karena memang memiliki hobi dalam bidang web, baik itu designing maupun programming. Karena ya kembali lagi pada diri masing-masing, jika memang tidak hobi, maka semua itu akan terasa biasa saja, lain halnya dengan  hobi, sebagaimanapun yang ia lakukan dengan adanya rintangan yang dialami, maka semua itu akan dirasa happy untuk dijalani. Bahkan dulu, penulis gemar sekali membuat sebuah blog, ganti-ganti blog untuk menuliskan apapun yang ingin penulis tuliskan, tetapi ya tidak sembarangan pulla yang ditulisnya. Dulu penulis sering sekali membuat artikel dan video tutorial yang diupload ke blog dengan berisikan materi sekolah yang didapat oleh penulis pribadi. Tetapi sekarang blog tersebut sudah penulis hapus karena saat itu penulis merasa kurang srek dengan design webnya. Ya memang sangat sederhana kreasi penulis saat itu, hanya membuat rangka dengan pemanfaatan tag <table> tadi, dan memang hanya design seperti itu yang dapat penulis buat saat itu. Dan sekarang penulis menyesali akan penghapusan blog tersebut, karena sangat banyak ilmu yang tidak disangka sangat bermanfaat. Penulis dulu menyangka apa yang penulis tulis di blog tersebut hanya akan bermanfaat untuk anak IT dikalangan sekolah saja, namun ternyata sekarang-sekarang penulis sering kali mencari materi seperti yang pernah penulisbuat tersebut dan nyatanya sulit untuk mendapatkan yang sesuai dengan keinginan. Seperti pembuatan animasi, konfgurasi jaringan dll, itu ternyata cukup penting, karena penulis kini sudah tidak lagi mempelajari akan hal tersebut.