News Update :
Diberdayakan oleh Blogger.

Kamis, 30 Agustus 2012

Cara Membuat Gambar Transparan dengan Photoshop

Ada dua jenis gambar yang mendukung format gambar/logo transparan. Pertama jenis gambar GIF(Graphics Interchange Format) dan kedua jenis gambar PNG (Portable Network Graphics). Perbedaan keduanya adalah : file GIF memiliki lebih sedikit warna (256 warna), mendukung transparan, mendukung animasi bergerak, dan ukuran file lebih kecil. Sedangkan PNG memiliki warna yang lengkap, mendukung tranparan tapi tidak mendukung animasi bergerak dan ukuran file lebih besar.
Anda lihat dua gambar diatas, yang bergerak dibuat dengan jenis gif dan yang disampingnya dibuat dengan jenis png. Keduanya menggunakan mode yang sama yaitu transparan sehingga warna latarnya mengikuti warna dimana gambar tersebut diletakkan.
Bagaimana membuat file transparan dengan bantuan adobe photoshop?? Ini yang akan saya jelaskan langkahnya berikut ini.
  1. Jalankan adobe photoshop, versi apa aja bisa.
  2. Kemudian kita buat kanvas/file baru dengan memilih menu file new atau ctrl+n
    Gambar Transparan - Langkah 1
    Isikan nama filenya misal gambar-transparan (lihat lingkaran merah), isikan widh dan height (lebar dan tinggi gambar sesuai keinginan dalam ukuran pixel), kemudian pilih jenis background Transparent, lalu tekan oke.
  3. Hasilnya akan muncul sebuah kanvas baru dengan mode transparan seperti gambar berikut
    Gambar Transparan - Langkah 2
  4. Sekarang kita akan membuat sebuah tulisan pada kanvas yang sudah ada, caranya tekan tombol dengan lambang T (Horizontal Type Tool) pada toolbar
    Gambar Transparan - Langkah 3
  5. Kemudian tentukan warna tulisan dengan menekan tombol warna (Set Foreground Color)

    Gambar Transparan - Langkah 4  
  6. Kemudian arahkan kursor mouse anda kearah kanvas tranparan tadi dan tekan klik 1 kali, kemudian ketikkan sesuka anda.
    Gambar Transparan - Langkah 5
  7. Jika sudah kemudian blok tulisan anda dengan menggeser kursor mouse dari huruf terakhir sampai yang pertama, kemudian kita memilih jenis dan ukuran tulisan
    Gambar Transparan - Langkah 6
  8. Sekarang objek gambar sudah selesai, klik tombol panah (Move Tools) yang ada pada toolbar paling atas. Anda juga bisa menggeser tulisan jika belum sesuai.
  9. Kemudian kita akan menyimpanya dengan format yang mendukung transparan, caranya : Tekan menu file, pilih save as for web
    Gambar Transparan - Langkah 7
    Pilih gambar dengan hasil optimized (Lihat lingkaran atas) dan pilih jenis gambar (bisa png atau gif), lihat ukuran file hasil akhir gambarnya (pada lingkaran kiri gambar) ini berguna untuk menentukan hasil yang optimal. Pilih jenis gambar yang tidak merubah kualitas hasil, tapi dengan ukuran file hasil kecil sehingga jika dipasang diweb akan lebih ringan.
  10. Tekan tombol save dan arahkan ke tempat penyimpanan dalam hardisk anda. Selesai, silahkan buka file hasil tersebut.
Inilah Hasilnya :
Gambar Transparan dengan photoshop
Begitulah kira-kira langkah singkat membuat gambar/logo transparan dengan adobe photoshop. Anda juga bisa gunakan aplikasi lain seperti GIMP (lisensi gratis) untuk menghasilkan gambar transparan seperti ini (mungkin langkahnya sedikit berbeda). Yang perlu anda ingat bahwa yang mendukung gambar transparan sementara ini (mungkin besok2 ada jenis file baru) cuman dua jenis file yaitu GIF dan PNG.
Semoga bermanfaat, jika ada salah dalam penilisan ini harap dikoreksi lewat box komentar dibawah. Jika anda suka artikel ini, tolong dibagikan kepada yang lain.

Jenis Aplikasi Pengolah Desain grafis

Desain diterjemahkan sebagai seni terapan, arsitektur, dan berbagai pencapaian kreatif lainnya. Dalam sebuah kalimat, kata “desain” bisa digunakan baik sebagai kata benda maupun kata kerja. Sebagai kata kerja, “desain” memiliki arti “proses untuk membuat dan menciptakan obyek baru”. Sebagai kata benda, “desain” digunakan untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau berbentuk obyek nyata.

Grafik adalah segala cara pengungkapan dan perwujudan dalam bentuk huruf, tanda, dan gambar yang diperbanyak melalui proses percetakan guna disampaikan kepada khalayak. Contohnya adalah: foto, gambar/drawing, Line Art, grafik, diagram, tipografi, angka, simbol, desain geometris, peta, gambar teknik, dan lain-lain. Seringkali dalam bentuk kombinasi teks, ilustrasi, dan warna.

Desain grafik adalah suatu bentuk komunikasi visual yang menggunakan gambar untuk menyampaikan informasi atau pesan seefektif mungkin. Dalam disain grafis, teks juga dianggap gambar karena merupakan hasil abstraksi simbol-simbol yang bisa dibunyikan. disain grafis diterapkan dalam disain komunikasi dan fine art. Seperti jenis disain lainnya, disain grafis dapat merujuk kepada proses pembuatan, metoda merancang, produk yang dihasilkan (rancangan), atau pun disiplin ilmu yang digunakan (disain).

Jenis Aplikasi Pengolah Grafis

Aplikasi pengolah grafis dibedakan dalam beberapa kelompok sesuai bentuk hasil dan keperluanya, yaitu :
  1. Aplikasi Pengolah Gambar Vektor/Garis
    Program yang termasuk dalam kelompok ini dapat digunakan untuk membuat gambar dalam bentuk vektor/garis sehingga sering disebut sebagai Illustrator Program. Seluruh objek yang dihasilkan berupa kombinasi beberapa garis, baik berupa garis lurus maupun lengkung. Aplikasi yang termasuk dalam kelompok ini adalah :
    1. Adobe Illustrator
    2. Beneba Canvas
    3. CorelDraw
    4. Macromedia Freehand
    5. Metacreations Expression
    6. Micrografx Designer
  2. Aplikasi Pengolah Bitmap/Pixel/Gambar
    Program yang termasuk dalam kelompok ini dapat dimanfaatkan untuk mengolah gambar/manipulasi foto (photo retouching). Semu objek yang diolah dalam program-program tersebut dianggap sebagai kombinasi beberapa titik/pixel yang memiliki kerapatan dan warna tertentu, misalnya, foto. Gambar dalam foto terbentuk dari beberapa kumpulan pixel yang memiliki kerapatan dan warna tertentu.
    Meskipun begitu, program yang termasuk dalam kelompok ini dapat juga mengolah teks dan garis, akan tetapi dianggap sebagai kumpulan pixel. Objek yang diimpor dari program pengolah vektor/garis, setelah diolah dengan program pengolah pixel/titik secara otomatis akan dikonversikan menjadi bentuk pixel/titik. Yang termasuk dalam aplikasi ini adalah:
    1. Adobe Photoshop
    2. Corel Photo Paint
    3. Macromedia Xres
    4. Metacreations Painter
    5. Metacreations Live Picture
    6. Micrografx Picture Publisher
    7. Microsoft Photo Editor
    8. QFX
    9. Wright Image
    10. Pixelmator
    11. Manga studio
    12. Gimp
  3. Aplikasi Pengolah Audio Visual
    Program yang termasuk dalam kelompok ini dapat dimanfaatkan untuk mengolah film dalam berbagai macam format. Pemberian judul teks (seperti karaoke, teks terjemahan, dll) juga dapat diolah menggunakan program ini. Umumnya, pemberian efek khusus (special effect) seperti suara ledakan, desingan peluru, ombak, dan lain-lain juga dapat dibuat menggunakan aplikasi ini. Yang termasuk dalam kategori ini adalah:
    1. Adobe After Effect
    2. Adobe Premier
    3. Final Cut
    4. Adobe Flash, atau sebelumnya Macromedia Flash
    5. Ulead Video Studio
    6. Magic Movie Edit Pro
    7. Power Director
Mungkin masih ada aplikasi lain yang sekarang digunakan dinegara-negara yang maju perkembangan teknologi infomasinya.

Rabu, 29 Agustus 2012

Cara Membuat Form Menggunakan HTML

Cara membuat form dengan HTML
Membuat form dalam HTML sangatlah mudah apalagi sekarang bisa dibantu dengan fasilitas WYSIWYG (what you see it's what you get)  atau editor visual yang langsung terlihat hasilnya. Tapi tidak ada salahnya anda mengetahui kode sebenarnya untuk membuat form yang disisipkan dalam barisan kode html dalam sebuah halaman yang mungkin bisa ratusan bahkan ribuan.
Apa kata dunia jika seandainya anda bisa membuat desain halaman web tapi tidak tahu kodenya...
Apa jawaban anda jika anda disuruh atasan membuat form html di komputer yang gak ada editor htmlnya...maaf pak saya lupa bawa softwarenya...hehehhe

Contoh kasus form untuk keperluan membuat fasilitas buku tamu. Lihat kode html berikut :
<form action="simpan.php" method="post" name="FBukuTamu" id="FBukuTamu">
  <p>Nama :
    <input name="nama" type="text" id="nama" size="30" maxlength="30">
    <br>
    Email :
    <input name="email" type="text" id="email" size="40" maxlength="100">
    <br>
    Website :
    <input name="website" type="text" id="website" size="40" maxlength="100">
    <br>
    Pesan : 
    <textarea name="pesan" cols="40" rows="3" id="pesan"></textarea>
  </p>
  <p>
    <input type="submit" name="btnKirim" id="btnKirim" value="Kirim">
    <input type="reset" name="btnUlangi" id="btnUlangi" value="Ulangi">
</p>
</form>

Sebuah form ditandai dengan perintah awal <form> dan diakhiri dengan </form>
Anda perhatikan kode diatas, perintah <form> memiliki beberapa atribut yaitu :
  1. action digunakan untuk menentukan tujuan form dikirim dan diproses
  2. method digunakan untuk menentukan cara pengiriman data bisa post atau get
  3. name dan id digunakan sebagai identitas unik form dalam sebuah halaman
diantara perintah form disisipkan elemen input yang berfungsi sebagai objek visual untuk menerima masukan dari pengguna. Elemen form yang umum digunakan terdiri dari :
  1. <input>
    1. type="text" --> untuk input text satu baris
    2. type="submit" --> untuk membuat tombol kirim
    3. type="reset" --> untuk membuat tombol reset/mengulangi
    4. type="button" --> tombol tanpa fungsi biasanya dipakai dengan bantuan javascript misal untuk tombol close, print dll
    5. type="checkbox" --> untuk checklist banyak pilihan
    6. type="radio" --> untuk satu pilihan dari beberapa pilihan
    7. type="file" --> untuk upload file
    8. type="hidden" --> untuk nilai tersembunyi, biasanya nilainya sudah diset otomatis
    9. type="password" --> bentuk password karakter "*"
  2. <textarea> --> digunakan untuk masukan dengan banyak baris misal untuk pesan seperti contoh diatas
  3. <select> --> digunakan untuk menandai awal dari bentuk list pilihan atau sering disebut pilihan dropdown
  4. <option> --> elemen pilihan dropdown
Jadi form yang tersedia rasanya sudah cukup lengkap untuk semua keperluan jika kita mau bikin aplikasi web ataupun hanya sekedar fasilitas dihalaman web. Tinggal tampilan saja yang perlu kita buat sebagus mungkin agar menarik.

Cara Membuat Tabel Menggunakan HTML

Tabel adalah salah satu objek terpenting yang bisa kita gunakan untuk banyak keperluan.Tabel bisa digunakan untuk membuat laporan dengan HTML, bisa digunakan untuk menyusun objek lain seperti gambar atau tulisan, bahkan tabel juga bisa digunakan untuk menata layout tampilan web. Bagi anda yang sedang belajar bahasa pemrograman web seperti PHP atau yang lainya, tabel ini juga bagian terpenting yang harus anda ketahui karena bentuk laporan dari database tentunya akan disajikan dalam bentuk tabel. Bagaimana cara membuat tabel yang benar? dan bagaimana contohnya?

Pertama kita akan mengenal perintah-perintah yang berhubungan dengan membuat tabel.

Perintah Dasar Membuat Table HTML

Perintah dasar adalah perintah yang harus ada dalam sebuah susunan tabel, yaitu :

<table border="1">
  <tr>
    <th>Nama</th>
    <th>Alamat</th>
  </tr>
  <tr>
    <td>Johan</td>
    <td>Pulau Seribu</td>
  </tr>
</table> 

Jika dilihat dari contoh kode membuat tabel html diatas maka sebuah tabel terdiri dari :
<table>..</table> : digunakan sebagai tanda awal tabel
<tr>..<tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data
Dalam beberapa kasus, mungkin akan ditemui juga penggunaan perintah thead, tbody dan tfoot :

<table border="1" cellpadding=5 cellspacing="0">
  <thead>
    <tr>
      <th>Bulan</th>
      <th>Tanggal</th>
      <th>Jumlah</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jan</td>
      <td>01/01/2012</td>
      <td>100</td>
    </tr>
    <tr>
      <td>Peb</td>
      <td>02/02/2012</td>
      <td>111</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan=2 align=left>Total</th>
      <th>211</th>
    </tr>
  </tfoot>
</table>

<thead>..</thead> : digunakan untuk mengelompokkan bagian header tabel
<tbody>..</tbody> : digunakan untuk mengelompokkan bagian data/isi tabel
<tfoot>..</tfoot> : digunakan untuk mengelompokkan bagian footer tabel
Secara tampilan, 3 perintah diatas tidak berpengaruh, hanya digunakan untuk pengembangan dengan css

Atribut Table HTML

Atribut adalah perintah tambahan yang ditempelkan pada perintah utama/dasar, atribut bersifat tidak pasti hanya digunakan jika diperlukan. Atribut meliputi :
align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom
Referensi warna bisa dilihat pada posting saya Referensi Warna untuk HTML maupun CSS
Memang ada beberapa atribut yang tidak umum (bukan standard) seperti bordercolor, title dan beberapa lainya tapi saya pikir ini tidak perlu.

Berikut ini contoh lengkap dengan atribut :

Rowspan 3 Nama Alamat Telp. Colspan 2
ALI Jl. Ijo 11211

UDIN Jl.biru 23232


Susunan kodenya :

<table width="500" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="53" rowspan="3" bgcolor="#00CCCC">Rowspan 3</th>
<th width="74" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telp.</th>
<th colspan="2" bgcolor="#FF9900">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">ALI</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">11211</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFF00">UDIN</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">23232</td>
<td bgcolor="#FFFF00">&nbsp;</td>
<td bgcolor="#FFFF00">&nbsp;</td>
</tr>
</table>

kesimpulan

Untuk menyusun sebuah tabel, kita harus mendeklarasikan awal dengan <table> dan diakhir dengan </table>
Setiap baris, harus dideklarasikan <tr> dan diakhiri dengan </tr>
Setiap kolom, harus menggunakan <th> dan </th> jika sebagai header, <td> dan </td> jika sebagai data.

Semoga bermanfaat

Cara Membuat Menu menggunakan CSS


Kategori CSS
CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
Kali ini saya akan berbagi tips sedikit tentang bagaimana membuat menu sederhana dengan html+css.
Pertama kita membuat dulu serangkaian hyperlink dalam area <body>..</body> yang disusun dalam sebuah HTML list dengan kode :
<div id="menuku">
<ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
</div>

Jika kita simpan, kode diatas akan menghasilkan tampilan seperti berikut :
Kemudian kita membuat susunan kode css yang nantinya mengubah tampilan dari menu yang sudah dibuat. Untuk css kita letakkan di bagian <head>..</head>, kodenya bisa dilihat berikut :

<style type="text/css">
DIV#menuku {
 /* ini digunakan untuk mengatur bingkai menu */
 width: 400px; /* digunakan untuk mengatur lebar bingkai menu */
 margin: 0 auto; /* digunakan untuk mengatur posisi menu ditengah halaman */
 padding: 10px; /* digunakan untuk mengatur jarak bingkai dengan menu */
 background-color: #404040;
}
DIV#menuku ul {
 /* ini digunakan untuk merubah tampilan list */
 list-style: none; /* digunakan untuk menghilangkan simbol list */
 margin: 0; /* digunakan untuk menghilangkan jarak list dengan bingkai menu */
 padding: 0; /* sda */
}
DIV#menuku ul li {
 display: inline; /* mengubah list menjadi horizontal */
 padding-right: 5px; /* mengatur jarak list item */
}
DIV#menuku ul li a {
 /* digunakan untuk mengatur hyperlink yang sudah dibuat */
 background-color: #aaaaaa; /* warna background tulisan */
 padding: 3px 10px 3px 10px; /* memberi efek kotak pada tulisan */
 color: white; /* memberi warna tulisan */
 border:1px dotted #fff; /* memberi garis luar kotak hyperlink */
 text-shadow: 1px 1px #000; /* efek bayangan pada tulisan */
        text-decoration:none; /* menghilangkan garis bawah */
 /* dengan konfigurasi diatas hyperlink akan terlihat berbentuk kotak */
}
DIV#menuku ul li a:hover {
 /* digunakan untuk mengatur tampilan hyperlink pada saat mouse diatasnya */
 background-color: silver;
}
</style>



Setelah selesai menulis cssnya dan kita simpan maka hasil akhir akan berubah seperti berikut :


Kita juga bisa menggunakan background gambar atau model-model lainya yang dipasang melalui css, insyaallah lain kali dibahas.

Selasa, 28 Agustus 2012

Cara Membuat CSS Menggunakan Dreamweaver


Editor untuk membuat CSS (Cascading Style Sheet) sebenarnya sudah banyak tersedia, baik dalam bentuk aplikasi yang gratis, berbayar, maupun yang secara online. Bahkan jika sudah mengerti cara penulisan dan penyimpanannya, kita bisa gunakan editor yang sangat sederhana dan mendukung penyimpanan format text seperti notepad. Kali ini saya akan sedikit berbagi tentang bagaiman cara membuat css dengan dreamweaver.

Sekilas info, Dreamweaver adalah sebuah perangkat lunak yang digunakan untuk membuat atau menyunting halaman web yang dinamis maupun statis. Editor ini mendukung semua bahasa pemrograman web seperti ASP, PHP, XML, JSP, JS, CSS dan lainya. Program ini banyak digunakan oleh para pengembang web karena fitur-fitur yang disediakan sangat membantu dan mudah untuk digunakan.

Masih sekilas info, Dreamweaver pada awal kemunculanya diberi nama Macromedia Dreamweaver karena mulanya dikembangkan oleh sebuah perusahaan yang bernama Macromedia, sampai dengan versi 8 masih menggunakan nama yang sama. Setelah itu, sekitar tahun 2005 Macromedia Dreamweaver bersama dengan produk yang lainya seperti Macromedia Flash, Macromedia Firework dll dikembangkan oleh Adobe System dengan sedikit perubahan nama menjadi Adobe Macromedia CS (Creative Suite). Dimulai dari Macromedia CS 1 atau versi 9, sampai sekarang tahun 2012 sudah CS 6.

Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver. cara yang termudah diantaranya adalah :

  1. Mengetikkan langsung kode css pada bagian layar code view (kalau sudah banyak hafal perintah dan atributnya cara ini recomended)
    dreamweaver tutorial

    Dengan cara ini kita akan dibantu dengan auto complete sehingga walaupun tidak sepenuhnya hafal tinggal memilih perintah yang sesuai.
  2. Menambahkan css dengan menggunakan fitur tab css yang ada dikanan layar dreamweaver, lihat gambar dengan lingkaran merah.
    dreamweaver tutorial

    Pada lingkaran merah ke 2, ada beberapa tombol kecil yang dapat digunakan untuk mengelola css. Klik gambar rantai jika anda ingin melampirkan file css yang sudah jadi, klik gambar yang ada tanda  plus (+) untuk menambah css baru, gambar pensil untuk mengedit dan gambar tong sampah untuk menghapus.
    Untuk menambahkan css, kita harus menekan tombol +, nanti akan muncul seperti gambar berikut :
    dreamweaver tutorial

    Di layar tersebut kita diminta memilih jenis css yang akan dibuat. Pilihan pertama untuk membuat css class yang dapat digunakan oleh banyak objek/tag (silahkan nanti cari referensi tentang css class), pilihan kedua jika anda ingin menempelkan css pada tag html, dan pilihan ketiga untuk membuat ID khusus sesuai dengan nama objek yang nanti dibuat. Trus ada pilihan define in, pilih yang pertama (New Style..) jika ingin cssnya tersimpan di file tersendiri, atau pilihan kedua This document only jika anda ingin cssnya diletakkan dalam bagian header (<head>) dokumen yang aktif.
    Saya akan pandu untuk membuat dengan pilihan selector type yang kedua yaitu tag.
    Kita akan coba menambahkan pada tag H1, dan This documen only.
    dreamweaver tutorial

    Kemudian tekan oke, maka akan muncul tampilan seperti gambar berikut :

    dreamweaver tutorial

    Semua isian tidak harus diisi, jika tidak perlu boleh dibiarkan kosong. Karena contoh ini membuat css untuk tag H1 maka diantaranya yang diubah adalah jenis font, dan ukuran. Jika anda ingin menambahkan yang lainya seperti kotak, warna latar, silahkan buka tab pilihan selanjutnya. Setelah semuanya selesai, tekan tombol ok.
    Hasil cssnya bisa anda lihat di bagian code view seperti berikut :

    dreamweaver tutorial

  3. Menambahkan css lewat page properties, ini standard penggunaan css di dreamweaver versi 8 sd CS 6. Pada saat kita mengubah pengaturan halaman melalui page properties dreamweaver otomatis menambahkan css pada halaman yang kita buat. Page Properties bisa dibuka dimenu Modify atau Tombol Page Properties pada bagian bar properties dibagia bawah layar. Lihat gambar :

    dreamweaver page properties

Cara Membuat Koneksi php dan mysql Database

Kode singkat melakukan koneksi php dengan mysql database

<?php
	mysql_connect("nama_server","nama_user","pass_user"); //Ini untuk koneksi mysql server database
  	mysql_select_db("nama_database"); //Ini untuk memilih databas yang dipakai
?>

Bisa juga sedikit dikembangkan seperti berikut :

<?php 
	$nama_server="localhost";  
	$nama_database="db_tokoonline";  //nama database
	$nama_user="root";  
	$pass_user="12345";  
	mysql_connect($nama_server,$nama_user,$pass_user) or die("<h1 align=center>Gagal</h1>");  
	mysql_select_db($nama_database) or die("<h1 align=center>Gagal</h1>");
?>

Cara Menampilkan Gambar dari Database mysql dengan PHP


memasukan gambar ke dalam database mysql

Saya sebelumnya sudah tulis artikel bagaimana Cara upload gambar dengan php dan menyimpan kedalam database mysql, kali ini akan saya lanjutkan bagaimana cara menampilkan gambar dari database mysql dengan php. Cara yang saya gunakan cukup sederhana, saya kembangkan dari kode membuat laporan dengan php biasa. Saya yakin anda akan mudah memahami dan dapat mengembangkannya sesuai keperluan. Hasilnya mungkin akan mendekati cara membuat galleri photo dengan php. Silahkan simak artikel berikut.
Caranya sangat mudah, sama seperti layaknya kita membuat laporan dengan php. Ini saya kembangkan dari kode membuat laporan pada artikel cara membuat laporan sederhana dengan php, mari kita lihat berikut :

Kode dibawah bisa anda simpan dengan nama galleri.php

<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<table width="400" align="center" border="1">';  
   echo '<tr>';  
   echo '<th>Judul Gambar</th>';  
   echo '<th>Gambar</th>';  
   echo '</tr>';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<tr>';     
     echo '<td>'.$rec->judul_gambar.'</td>';     
     echo '<td>';
     //ini bagian memanggil file gambar
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</td>';     
     echo '</tr>';  
   }  
   echo '</table>';  
   mysql_close();//tutup koneksi database  
?>

Untuk koneksi database, anda bisa baca artikel saya tentang membuat koneksi database mysql dengan php.
Dengan sedikit perubahan kode dari model laporan yang hanya menampilkan tulisan, sekarang diubah menjadi menampilkan gambar. Format menampilkan gambar bisa bervariasi tergantung keperluan, contoh diatas menggunakan tabel html biasa. Kalo sudah faham cara kerjanya untuk kode diatas, sekarang saya kembangkan dengan memadukan model lebih modern yaitu pakai css. Anda bisa simpan dengan nama file berbeda misal galleri-baru.php.
<style type="text-css">
   #gallery { witdh:500px; margin: 0 auto; }
   #gallery .kotak { float:left; width:240px; text-align:center; }
   #gallery .judul { padding:5px;font-size:15px; }
   #gallery img { border:5px solid #fff; width:230px;}

</style>

<?php
//Masukkan koneksi database disini
   $datatamu = mysql_query("select judul_gambar,nama_file from tb_gambar order by judul_gambar asc;") or die("Gagal :".mysql_error());  
   echo '<div id="gallery">';  
   while ($rec=mysql_fetch_object($datatamu))   
   {      
     echo '<div class="kotak">';     
     echo '<p class="judul">'.$rec->judul_gambar.'</p>';     
     echo '<img src="'.$rec->nama_file.'" alt="'.$rec->judul_gambar.'" title="'.$rec->judul_gambar.'" width="100" />';
     echo '</div>';  
   }  
   echo '</div>';  
   mysql_close();//tutup koneksi database  
?>

Cara kerja sama, hanya cara menuliskan hasil berbeda. Kode model kedua ini lebih sederhana dan jauh lebih optimal. Silahkan mencoba. Semoga bermanfaat. Jika ada pertanyaan atau koreksi, jangan sungkan mengisi komentar. Dan jika ini berguna untuk anda silahkan dishare ke teman2 anda.
 

Cara Upload gambar dengan PHP dan Menyimpan kedalam Database mysql

memasukan gambar ke dalam database mysql  
Ada dua cara dalam php agar kita bisa upload gambar dan memanggilnya kembali. Cara pertama dengan menyimpan objek gambarnya kedalam database  dan cara kedua adalah menyimpan objek gambar dalam folder dan menyimpan nama filenya didalam database mysql.


Masing-masing punya kekurangan dan kelebihanya diantaranya :

Cara pertama dengan menyimpan objek gambar dalam database :
Kelebihan :lebih praktis karena proses menyimpan langsung kedalam database
Kekurangan :Performa database lebih lambat dan ukuran database tentunya semakin besar,
Sulit untuk membackup fisik gambar karena gambar tersimpan dalam format database

Cara kedua dengan menyimpan objek gambar dalam folder dan menyimpan nama file dalam mysql :
Kelebihan : proses pembacaan file lebih cepat karena tersimpan dalam folder yang berada di server
Kekurangan : proses agak ribet karna harus mengambil alamat dan nama file terlebih dahulu dalam database dan kemudian mengaksesnya dalam folder
Saya pribadi lebih senang dengan cara kedua karena jika membackup database otomatis lebih kecil dan jika ingin membackup file gambarnya cukup dengan mengambil foldernya saja. Oleh karena itu saya akan membahas dengan cara kedua.

Langkah pertama kita siapkan databasenya dulu bisa seperti contoh berikut :

CREATE TABLE `tb_gambar` (`id` INT NOT  NULL  AUTO_INCREMENT  PRIMARY  KEY ,
 `judul_gambar` VARCHAR( 30  )  NOT  NULL ,
 `nama_file` VARCHAR( 50  )  NOT  NULL
) ENGINE = MYISAM ; 

Silahkan jalankan query diatas dalam database yang sudah anda buat. Kemudian kita 
membuat form uploadnya, bisa disimpan dalam kirim-gambar.html :

<h2>Contoh Upload Gambar</h2>
<form action="upload.php" method="post" enctype="multipart/form-data" name="FUpload" id="FUpload">
  <p>Judul Gambar :
    <input name="judul_gambar" type="text" id="judul_gambar" size="30" maxlength="30" />
</p>
  <p>File Gambar :
    <input name="nama_file" type="file" id="nama_file" size="30" />
</p>
  <p><input type="submit" name="btnSimpan" id="btnSimpan" value="Simpan" /></p>
</form> 

Jangan lupa form yang anda buat sudah menggunakan enctype="multipart/form-data". Anda bisa baca artikel saya tentang Cara Membuat form dengan HTML. Setelah itu kita siapkan lagi sebuah file PHP dengan nama upload.php dengan kode seperti berikut :

<?php
$namafolder="gambar/"; //tempat menyimpan file
$con=mysql_connect("localhost","namauser","pass") or die("Gagal");
mysql_select_db("db_latihan")  or die("Gagal");
if (!empty($_FILES["nama_file"]["tmp_name"]))
{
    $jenis_gambar=$_FILES['nama_file']['type'];
    $judul_gambar=$_POST['judul_gambar'];
    if($jenis_gambar=="image/jpeg" || $jenis_gambar=="image/jpg" || $jenis_gambar=="image/gif" || $jenis_gambar=="image/x-png")
    {           
        $gambar = $namafolder . basename($_FILES['nama_file']['name']);       
        if (move_uploaded_file($_FILES['nama_file']['tmp_name'], $gambar)) {
            echo "Gambar berhasil dikirim ".$gambar;
            $sql="insert into table (judul_gambar,nama_file) values ('$judul_gambar','$gambar')";
            $res=mysql_query($sql) or die (mysql_error());
        } else {
           echo "Gambar gagal dikirim";
        }
   } else {
        echo "Jenis gambar yang anda kirim salah. Harus .jpg .gif .png";
   }
} else {
    echo "Anda belum memilih gambar";
}
?> 

Catatan :
  1. Folder gambar dibuat satu folder dengan file kirim-gambar.html, upload.php 
  2. Upload diatas hanya menyimpan file jenis jpg, gif, dan png 
  3. Yang disimpan dalam mysql hanya judul gambar, nama folder dan nama file gambar saja 
Jika menemui error, mungkin artikel saya tentang Masalah seputar upload file dengan php bisa membantu anda.

Bagaimana menampilkan gambar yang sudah disimpan dalam database mysql? Silahkan baca artikel Cara menampilkan gambar dari database mysql dengan php

Cara Membuat Form Login Menggunakan CSS

Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form pendaftaran yang pasti isiannya cukup merepotkan. Sekarang saya akan berbagi tentang cara membuat form login dengan css.
Banyak variasi form login css yang bisa kita buat, baik nanti beda warna, posisi maupun ataupun gambar latarnya. Langkah pertama adalah membuat susunan kode form html ditempatkan dibagian dalam <body>...</bodu>, lihat kode berikut :

<div id="form-login">
<form id="FLogin" name="FLogin" method="post" action="">
<h1>Login Member</h1>
  <label>Username </label> : <input name="username" type="text" id="username" size="20" maxlength="20" class="txt" /><br />
  <label>Password </label> : <input name="password" type="password" id="password" size="20" maxlength="20" class="txt" />
  <div id="tombol"><input name="btnLogin" type="submit" value="Login" class="button" /><input name="btnLogin" type="reset" value="Reset" class="button" /></div>
</form>
</div>

kemudian kita buat kode css agar semua objek yang ada pada form disesuikan posisi serta pewarnaanya. letakkan css dalam file css yang sudah ada atau letakkan di bagian dalam <head>..</head>.

<style type="text/css">
div#form-login {
width:400px; margin:0 auto;
padding:20px; background-color:#009900;
border-radius:15px; -moz-border-radius:15px; 
-webkit-border-radius:15px;border:1px solid #666;
text-align:center;font-size: small;
font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
letter-spacing: .01em;
color:#009900;
}
div#form-login form { 
margin:0;padding:0;border-radius:15px; -moz-border-radius:15px; 
-webkit-border-radius:15px;border:1px solid #666;
background-color:#E7FCD8;
-webkit-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
-moz-box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
box-shadow: rgba(0,0,0,0.25) 5px 5px 10px;
}
div#form-login form label { float:left; width:120px;}
div#form-login form .txt { padding:3px;margin:3px;}
div#form-login h1 { font:20px "Trebuchet MS"; border-bottom:1px dotted #009900;padding:5px;margin:10px;}
div#tombol { clear:both;padding:10px;}
.button{ box-shadow: rgba(0,0,0,0.1) 0px 1px 1px;padding:3px 20px; }
.button:hover,.button:focus{
color: #000; -webkit-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px; 
-moz-box-shadow: rgba(0,0,0,0.25) 1px 1px 3px; box-shadow: rgba(0,0,0,0.25) 1px 1px 3px;
}
</style>

Selesai, tinggal kita lihat hasilnya berikut..

form login dengan cs

Membuat Kalender Menggunakan kode PHP

Di bawah ini adalah Cara bagaimana cara membuat Kalender dengan PHP.
Pastikan sebelum anda menggunakan koding dibawah ini kalian sudah instal Web Server seperti Wamp atau Xampp di komputer anda. kemudian anda copy script dibawah ini dan di simpan dengan ekstension .php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>K A L E N D E R</title>
</head>

<body>
<? class kalender{
    public static function tampil($bln='', $th=''){
        $bln=is_int($bln) ? $bln : date('m');
        $th=is_int($th) ? $th : date('Y');
       
        $time=mktime(0,0,0, $bln, 1, $th);
        $days=date('t', $time);
       
        ?>

<table  border="1" cellspacing="3" cellpadding="5">
  <tr>
    <td colspan="7" align="center" bgcolor="#999999"><b>
    <? echo strftime('%B %Y', $time);?></b>
    </td>
  </tr>
  <tr>
    <th bgcolor="#CCCCCC">M</th>
    <th bgcolor="#CCCCCC">S</th>
    <th bgcolor="#CCCCCC">S</th>
    <th bgcolor="#CCCCCC">R</th>
    <th bgcolor="#CCCCCC">K</th>
    <th bgcolor="#CCCCCC">J</th>
    <th bgcolor="#CCCCCC">S</th>
    <?
    for ($i=0;$i<6;$i++){
        echo'<tr bgcolor="#999999" align="center">';
        for ($j=1;$j<=7;$j++){
         $d=$j + $i*7 - date('w',$time);
        echo'<td';
    if($d>0 && $d<=$days){
        echo($d==date('d') && $bln==date('m') && $th==date('Y'))? ' style="background: #FFFF33;">' : '>';
    echo $d;
    }else{
        print'>';
        print '&nbsp;</td>';
    }
    }
 echo'</tr>';
 if ($d>=$days && $i !=6){
     break;
 }
    }
    ?>
</table>
<?
}
}
kalender::tampil();
?>

</body>
</html> 

Cara Menampilkan Tabel Dalam Database dengan PHP

Berikut ini adalah script cara menampilkan tabel dalam database dengan PHP yang lengkap dengan penjelasannya yang dapat membantu anda dalam menampilkan tabel dari database mysql dengan bahasa pemrograman PHP. Untuk menampilkan tabel, kita tentunya harus menguasai html terlebih dahulu kemudian ditambah script dari PHP yang memanggil database untuk ditampilkan. Oke langsung saja, sebelumnya kita buat dahulu databasenya.

1.  masuk ke localhost/phpmyadmin

2.  buat database dengan nama db_coba

3.  kemudian buatlah tabel dengan nama tb_user

4.  tabel tersebut terdiri dari 3 field (id,username,password)

5.  copy paste script dibawah ini lalu simpan dengan nama koneksi.php 


<?php
     $host="localhost";//nama server
     $user="root";//username
     $pass="";//password
     $dbnama="db_coba";//nama database yang dipilih
     mysql_connect($host, $user, $pass) or die ("Database tidak dapat di akses");//koneksi  ke database
     mysql_select_db($dbnama); //database yang dipilih
?>
    
6.  copy paste script 
dibawah ini lalu simpan dengan nama lihat.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<?php
     include "koneksi.php";
     $query="select * from tb_user";
     $hasil=mysql_query($query);
     ?>
     <table border="1">
     <tr>
     <td>ID</td>
     <td>Username</td>
     <td>Password</td>
     </tr>
     <? while ($data=mysql_fetch_array($hasil)){
     echo ("<tr>
     <td>$data[id]</td>
     <td>$data[username]</td>
     <td>$data[password]</td>
     </tr>");}
     ?>
</body>
</html>
    
7.  Jalankan dilocalhost dan lihat hasilnya.
 

© Copyright BlogSTTQ 2012 | Powered by Blogger.com.