Tampilkan postingan dengan label Web Design. Tampilkan semua postingan
Tampilkan postingan dengan label Web Design. Tampilkan semua postingan

Rabu, 19 Agustus 2015

Cetak Halaman Web Sekali Klik Tombol, Tanpa Muncul Window Opsi Printer dan Tanpa Mencetak Header dan Footer

The story behind... ada kebutuhan membuat aplikasi berbasis web menggunakan PHP untuk mencetak struk pembelian oleh kasir (struk yang dicetak sama dengan tampilan pada web browser). Kebutuhannya adalah, kasir tinggal "menekan tombol" untuk mencetak struk pembelian. Kenyataannya aplikasi berbasis web menggunakan PHP sulit melakukan hal demikian. Putar otak... aha! pakai bantuan JavaScript. Searching dikit... voila! ketemu perintahnya yaitu : window.print(). Terus kutak-katik program... berhasil... tapi... header dan footer halaman web-nya tercetak terus "tombol"-nya ikut tercetak juga!!! Searching lagi... hmm, dapet... kutak-katik programmnya lagi... tes lagi... berhasil!

Algoritmanya : saat kasir klik "tombol" yang berupa link maka akan menjaankan suatu function yang isinya; a) perintah untuk menghapus "tombol" (link) dan, b) perintah untuk mencetak halaman web. Sedangkan header dan footer disembunyikan dengan menambahkan atribut pada tag <html> (lihat gambar).

Berikut ini gambar source code sederhana agar bisa mencetak halaman web sekali klik, "tombol"-nya (link) tidak ikut tercetak, demikian pula header dan footer tidak ikut tercetak pula. Perhatikan baik-baik baris yang di-highlight warna kuning. Klik gambar untuk memperbesar. WARNING : source code jalan dengan baik di Mozilla Firefox dan belum pernah diuji coba di web browser lainnya.


Semoga bermanfaat

Update : Di bawah ini tambahan CSS pada blok <head> yang katanya berfungsi pada web browser Chrome dan Safari... katanya lho :p coba sendiri aja ya :)
<style media="print" type="text/css">
  @page {
    size: auto;   /* nilai awal ukuran halaman */
    margin: 0mm;  /* mengubah margin printer */
  }

  body {
    background-color:#FFFFFF; 
    margin: 0px;  /* mengubah margin konten */
    padding: 0.25in 0.5in; /* mengubah padding konten */
  }
</style>
Selamat belajar!

Selasa, 21 Januari 2014

Panduan Mengatasi Masalah-Masalah Uji Coba Aplikasi PHP MySQL di Web Host

Note : diasumsikan program aplikasi PHP dan database MySQL sudah dapat dijalankan pada localhost atau 127.0.0.1 tanpa ada kesalahan
berikut pertanyaan-pertanyaan yg memandu agar bisa menjalankan situs web pada web host

sudah bisa membuat database di web host? (bukan di localhost)
jika ya lanjutkan ke pertanyaan berikut, jika belum, buat dulu database di web host (bukan di localhost)
sudah bisa membuat tabel-tabel di dalam database yang sudah dibuat di dlm web host? (bukan di localhost)
jika ya lanjutkan ke pertanyaan berikut, jika belum, buat dulu tabel-tabel di dalam database yg ada di web host (bukan di localhost)

sudah mengisi data pada tabel-tabel di dalam database yang sudah dibuat di dlm web host? (bukan di localhost)
jika ya lanjutkan ke pertanyaan berikut, jika belum, isi dulu data ke dlm tabel-tabel di dalam database yg ada di web host (bukan di localhost)

sudah upload file-file .php ke web host? (bukan di localhost)
jika ya lanjutkan ke pertanyaan berikut, jika upload dulu file-file .php ke web host (bukan di localhost)

sudah mengganti nilai-nilai parameter pada fungsi mysql_connect()?
jika ya lanjutkan ke pertanyaan berikut, jika belum, pada fungsi mysql_connect() ganti "localhost" atau "127.0.0.1" dengan nama domain database / IP address yg diberikan oleh web host, ganti "root" dengan nama akun yg diberikan oleh web host, ganti "" (password) dengan password yg diberikan oleh web host
jika aplikasi dan database tidak dapat digunakan, cari tahu :
- nama domain database atau IP address webhost
- user name database milik anda yg berasal dari web host
- dan passwordnya
jika nama domain database / IP addres user name dan password telah digunakan pada fungsi mysql_connect tapi belum bisa juga, baca panduan / help yang disediakan oleh web host

Sabtu, 12 Februari 2011

Alur Kerja Pembuatan Situs Web

Alur kerja atau workflow pembuatan situs web, umumnya sebagai berikut :
  • Di komputer lokal (komputer sendiri) :
    • Desain dan buat database
    • Desain dan buat file template dan CSS-nya
    • Buat file program untuk mengakses database
    • Integrasikan file template dengan file program
  • Daftar web hosting (gratis boleh, bayar oke)
  • Ubah nama host database, user, dan passwordnya dalam file program disesuaikan dengan nama host, user dan password pada web host
  • Di web host :
    • Buat database seperti yang ada di komputer lokal
    • Upload folder dan file-file
    • Dites. Jika tidak ada masalah berarti pembuatan situs selesai



Senin, 07 Februari 2011

Membuat Tag Cloud Animasi pada Blogspot

Tag cloud adalah sekumpulan tag (topik) atau label yang disematkan pada artikel yang kita posting pada blog. Gunanya untuk mempermudah pengunjung mencari tag / topik yang diinginkan.

Tag cloud ada yang non-animasi dan animasi. Tag cloud animasi biasa digunakan untuk mempercantik tampilan blog dan menghemat ruang. Tag cloud animasi bisa dibuat menggunakan bahasa pemrograman untuk web.

Tag cloud animasi khusus untuk Blogspot ini dibuat menggunakan Flash dan JavaScript. Yang masih bisa diutak-atik adalah kombinasi warna, background dan ukurannya.

Untuk membuat tag cloud animasi pada Blogspot seperti di sebelah kanan cara-caranya bisa dibaca di http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html

Kamis, 25 November 2010

HTML 5, HTML dengan Berbagai Kelebihan

Bagi yang baru belajar atau yang baru mau belajar pemrograman web, berikut ini sejarah versi-versi HTML :
  1. HTML 1
  2. HTML 2
  3. HTML 3
  4. HTML 4
  5. HTML 4.01
  6. XHTML 1.0
  7. XHTML 1.1
  8. HTML 5
HTML 5 saat tulisan ini dibuat belum dirilis secara resmi oleh W3C (WWW Consortium) dan masih dalam tahap pengujian. Namun beberapa situs telah mengenalkan kelebihan-kelebihan HTML 5 dibandingkan dengan versi pendahulunya. Untuk contoh-contoh pemakain HTML 5 dapat dilihat di sini. Have enjoy it! Eh tunggu... tidak semua web browser mengenali HTML 5! disarankan sih pakai firefox 3.6+, Chrome 4+, Opera 10+ and Safari 4+

Selasa, 02 November 2010

Alasan Mengapa (Lebih Baik) Tidak Menggunakan Table sebagai Layout

  1. W3C mendefinisikan table dibuat untuk menampilkan data bukan untuk menyusun layout. Jika kita menggunakan XHTML berarti pemakaian table untuk penyusunan layout tidak valid. (Komentar : selama masih bisa membantu, kenapa tidak)
  2. JIka penyusunan layout-nya "kompleks" biasanya dengan memakai table akan sulit diedit dan dicari kesalahannya serta kemungkinan kurangan tag penutup semakin besar. (Komentar : Pakai perangkat lunak HTML/CSS WYSYWIG yang canggih dong)
  3. Table tidak luwes. Pemakaian satuan % untuk lebar table dapat "menghancurkan" tampilan. Tetapi jika tidak menggunakan % untuk lebar table (fixed width), lebarnya ya segitu aja meskipun lebar browser-nya berubah. (Komentar : tergantung kasus dan kompleksitas layout, terkadang memakai table yang berukuran "fixed" lebih nyaman -walaupun nggak selalu-)
  4. Pemakaian table bersarang (nested table) dapat mengurangi kecepatan tampil (Komentar : ya iyalah. Soalnya tag tr dan td jadi banyak)
  5. Pemakaian table dapat mengurangi SEO (Search Engine Optimization). Karena SEO biasanya menganggap isi halaman web paling awal adalah yang paling penting. Sedangkan jika menggunakan table maka baris-baris awal akan diisi dengan menu-menu untuk ditampilkan "bagian kiri". (Komentar : Ok)
  6. Berkaitan dengan alasan no. 5 di atas, jika memakai table akan membuat "bagian isi" di-load setelah "bagian kiri" (menu). Jika user tidak sabar, bisa-bisa dia akan berpindah kelain halaman. (Komentar : Oh gitcyu to)
  7. Table apabila dicetak ke printer, hasilnya belum tentu memuaskan. Bisa terpotong atau tampilannya berantakan sama sekali. (Komentar : bener ih!)
Kesimpulannya : belajarlah menggunakan CSS untuk menyusun layout! ... keep learning! :)

(Diterjemahkan secara asal-asalan dari : http://webdesign.about.com)

Rabu, 22 Juli 2009

Menjadi Web Programmer dan Web Desainer

Banyak pertanyaan yang diajukan di dunia maya bagaimana cara menjadi web desainer dan web programmer. Apa yang harus dipelajari agar dapat menjadi web desainer maupun web programmer. Berikut materi-materi yang harus dipelajari bagi calon web desainer dan web programmer.

  • Web Desainer :
    1. Konsep internet
    2. XHTML
    3. CSS
    4. Javascript
    5. image editing
    6. Flash
    7. Konsep desain visual

  • Web Programmer :
    1. Konsep internet
    2. XHTML
    3. CSS
    4. Javascript / VBscript + Logika dan algoritma
    5. PHP / ASP / JSP
    6. MySQL / SQL Server / XML + konsep database
    7. Konsep jaringan komputer
    8. Instalasi dan administrasi web server


Memperkecil Ukuran File Gambar

Tiga cara yang dapat memperkecil ukuran file gambar :
  1. Memperkecil dimensi gambar yaitu lebar dan tingginya.
  2. Memperkecil jumlah warna gambar.
  3. Mengurangi kualitas gambar.
Ketiga cara di atas dapat dilakukan dengan menggunakan software untuk image editing seperti PhotoShop, PhotoPaint dsb.

Pada saat memperkecil jumlah warna gambar, akan terjadi penurunan kualitas gambar. Tetapi pada saat mengurangi kualitas gambar, jumlah warna tetap, hanya saja gambar akan terlihat kabur, buram, atau pecah.

Pengurangan kualitas gambar hanya dapat dilakukan pada file gambar berformat JPG. Agar hasil pengurangan kualitas gambar optimal, lakukan penurunkan nilai kualitasnya tahap demi tahap dan setiap tahapnya dilakukan preview gambarnya. Jika kualitas gambar berubah, langsung hentikan penurunan nilai kualitas gambar dan naikkan satu.