Membuat Server Lokal pada Laptop atau PC

Pada tutorial Website kali ini kita akan sedikit belajar tentang bagaimana cara membuat komputer atau laptop kita menjadi sebuah server (web server lokal atau dikenal dengan localhost). Server ini gunanya untuk menjalankan pemrograman PHP yang disertai DATABASE dan MySQL, JQUERY, maupun AJAX karena untuk menjalankan program - program scripting kita perlu menggunakan SERVER. Nah sebagai pemula maka kita terlebih dahulu belajar membuat website secara offline bukan? untuk itulah perlunya membuat server di PC atau Laptop kita sehingga kita bisa mengetes Program maupun Script yang telah kita buat.

Sebagai contoh, dalam keadaan OFFLINE web berformat *.Php dengan berformat *.Html. keduanya sama - sama bentuk extensi dari sebuah halaman website, namun ketika kita mengakses web dengan extensi php maka file web tersebut tidak akan terbuka pada browser kita. coba jika extensi tersebut adalah html (web statis) maka meskipun tanpa bantuan server, halaman web tersebut akan tetap bisa terbaca oleh browser kita.

Disini saya memberikan contoh file php dan contoh file html. bisa Didownload disini, agar tahu perbedaannya buka kedua file tersebut menggunakan browser anda (bisa firefox, chrome, internet explorer, safari, opera, dll)

Nah sekarang kembali ke cara membuatnya severnya (web server lokal atau localhost) bagaimana?
Ada beberapa jenis Software untuk Membangun Web Server lokal atau Localhost yang support Windows diantaranya adalah :

1. WampServer, Download di http://www.wampserver.com
2. XAMPP, Download di http://www.apachefriends.org/en/xampp-windows.html
3. AppServ, Download di http://www.appservnetwork.com
4. Php Triad, bisa dicari di Google Search atau http://sourceforge.net/projects/phptriad/

Software di atas merupakan gabungan dari php, mysql database dan apache. Semuanya memiliki fungsi dan kemampuan yang sama untuk membangun sebuah Webserver lokal pada Komputer PC maupun Laptop anda. Tidak perlu di instal semuanya, cukup pilih salah satu saja program dari 4 program yang saya contohkan di atas, disini saya menggunakan XAMPP. Program XAMPP merupakan sebuah paket instalasi untuk PHP, APACHE dan MySQL. Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah.

Bagaimana cara instalasinya? Seperti biasa tinggal download lalu instal seperti program windows pada umumnya.

Setelah selesai instalasi Langkah selanjutnya adalah menjalankan servicenya, maka Jalankan file xampp
Caranya:
1. klik kiri2x XAMPP Control Panel yang ada di desktop. Atau anda juga dapat menjalankan XAMPP Control Panel dari menu Start -> All Programs -> apachefriends -> xampp -> xampp control panel

Tekan Start pada Apache dan MySql

2. Buka web browser anda, lalu ketikkan ---> http://localhost <lalu tekan enter>. Jika tampilannya seperti di bawah ini, maka apache sudah terinstall dengan benar

3. Dari tampilan yang muncul Anda dapat melakukan berbagai administrasi untuk server Anda termasuk membuat database SQL di Phpmyadmin, pilih English


4. Untuk menonaktifkan server lokal Anda, keluar dari XAMPP Control Panel. Caranya, pada XAMPP Control Panel, klik [Stop] pada masing-masing [Apache] dan [MySql], lalu tutup jendela kontrol panel (klik X pada pojok kanan atas)

5. Agar terbaca pada server maka kita harus meletakkan file - file php kita di document root milik XAMPP terletak pada folder
(jika anda menginstal di directory file C) maka C:\Program Files\apachefriends\xampp\htdocs\(folder web anda)\index.php
Contoh: disini saya membuat offline www.ilmugrafis.com , maka di dalam htdocs saya membuat folder bernama "www.ilmugrafis.com" untuk project saya
(catatan penting: index.php --> file pertama yang dibaca oleh browser adalah index jadi untuk halaman utama wajib diberi nama index.php)

Untuk mengakses filenya, di browser tinggal ketik, http://localhost/(nama folder yang ada di htdocs)/index.php
Contoh: http://localhost/www.ilmugrafis.com/index.php

Maka di browser akan tampil isi dari index.php yang ada di folder www.ilmugrafis.com

Menarik bukan bermain web server di Komputer / Laptop. hehehe... Tunggu tutorial selanjutnya yang lebih seru, seperti membuat database sederhana di Server lokal, JQuery, dll
Terima kasih, Semoga Bermanfaat ^_^/

Read more »

Membuat Bola Api Realistic

Bosan dengan Tutorial Membuat Api dengan brush yang kurang realistic??? Mau yang tampak seperti nyata??? Kemaren saya mikir dikit, gimanya caranya biar bisa bikin bola api yang tampak nyata dan tidak menggunakan brush, akhirnya dapet ide deh. Kali ini mas Fariz akan sharing tentang cara membuat bola api di tangan tampak realistic. Ori loh ide sendiri, hehe. Langsung saja tanpa banyak basa-basi, ni caranya :

1. Yang pertama dan paling pertama yaitu buka program photoshop sobat sekalian
2. Trus, buka gambar yang mau di kasi bola api, saya memakai foto saya sendiri, hehe

3. Setelah itu, gunakan “Magnetic Lasso Tool” atau pencet “L” , arahkan pada area object yang akan diseleksi, setelah itu tekan Inverse (untuk membalik seleksi) = CTRL + Shift + I


4. Seleksi bagian background, dan delete saja. Dan untuk memperhalus pojok-pojoknya gunakan “Blur Tool” atau pencet “B”


5. Nah, sekarang beri effect pencahayaan, supaya terihat seperti terkena cahaya api gitu loh. Gunakan “Filter>Render>Lighting Effects…” dan atur seperti yang ada dalam gambar di bawah… lalu “OK”


6. Nah, sudah terlihat terang cahaya api kan??? Sekarang adalah cara yang di tunggu-tunggu. Membuat bola api. Caranya, buat layer baru atur “Foreground Color” menjadi #ff6coo dan buat lingkaran di posisi yang di tentukan dengan menggunakan “Ellipse tool” atau pencet “U” dan setelah itu klik kanan pada layer tempat bola tersebut dan klik “Rasterize Layer”


7. Trus seleksi lingkaran tersebut dan ikuti langkah berikut “Select>Modify>Feather” atau pencet “Alt+Ctrl+D” lalu atur value nya menjadi “20”. Lalu tekan “OK” setelah itu “Delete”


8. beri brush pada sekeliling lingkaran tersebut dengan “Opacity” 34%


9. Nah bolanya uda jadi, sekarang silahkan buka gambar apinya, saya ambil dari api unggun seperti di bawah ini,
bisa Save as gambar di bawah ini untuk latihan


10. Setelah di buka, sobat sekalian seleksi api tersebut dengan menggunakan “Select > Color Range…” dan geser “Fuzziness”nya hingga mendapatkan bentuk yang sesuai dengan apa yang di inginkan. Lalu klik “OK”


11. Setelah terseleksi, lakukan langkah berikut “Select > Modify > Feather” atau pencet “Alt+Ctrl+D” dang anti valuenya menjadi “10”


12. Nah setelah itu drag hasil selection tadi ke project yang sebelumnya alias foto yang mau di kasi bola api. Atau bisa gunakan “Ctrl+C” dan pastekan di layer foto yang mau di edit.


13. Seteah itu geser api tersebut tepat di atas bolanya. Untuk penghalusan, gunakan eraser brush di bagian yang kasar dan mencolok


14. Selanjutnya gunakan “Smudge Tool” untuk memperhalus dan menarik gambar apinya sehingga terlihat seperti sedang membakar dan melilit bolanya.

Hasilnya:

Nah, mudah bukan. Untuk effect-effect yang lain juga bisa digunakan agar hasilnya menjadi lebih baik dan lebih realistic.

Read more »

Membuat Efek Avatar (Bangsa Na'vi)

Siapa yang tidak tahu Film Avatar (bukan Avatar the legend of aang) tapi ini mahkluk avatar (Bangsa Na'vi) itu loh :). Pada tutorial Photoshop kali ini saya membuat mencoba menjelaskan cara membuat efek AVATAR dari bangsa Na'vi yang hidup di suatu Planet bernama Pandora. Salah satu Film terbaik karya James Cameron. jika tutorialnya kurang julas mohon dimaafkan karena saya juga baru Designer pemula. OK ayo kita mulai ..

Berikut Tutorialnya:
1. Saya disini menggunakan photoshop CS3 tapi ini bisa untuk photoshop apa saja. Buka photo yang mau diedit
(Klik File>open>pilih foto>OK.

Disini saya menggunakan foto saya sendiri sebagai contoh

2. Buat Layer baru dengan menekan CTRL + Shift + N, tekan OK

3. Aktifkan Brush Tool (tekan tombol B pada keyboard) , atur besar kecil brush dengan "[" atau dengan "]".
(catatan: Jika ukuran besar kecil brush tidak muncul coba matikan Caps Lock di Keyboard anda)

Ada 5 pilihan warna menurut saya yang bisa digunakan, anda bisa menggunakan warna biru #54809b atau # 5d7a99 atau # 32576a atau # 3c6986 atau # 54809b . Namun akhirnya saya menggunakan # 3c6986

Nah, sekarang waktunya memBirukan seluruh wajah dan telinga kecuali mata dan gigi dan rambut. Hal ini butuh ketelatenan!! Jika ada yang tidak pas (brush melenceng dll ) segera tekan Undo (CTRL + Z). Bisa juga dihapus pakai Eraser Tool

Awas ini ada pahlawan bertopeng, hihihi...

4. Ubah turunkan opacitinya menjadi sekitar 80 - 90 tergantung selera, Lalu ubah modenya menjadi "color"


5. Tambahkan telinga pada gambar, telinganya bisa anda cari di Google search

Jika kesulitan mencari di Google, bisa menggunakan (Donwload) Telinga gambar di atas DISINI

6. Setelah dapat, masukkan telinga ke photoshop, (Klik File>open>pilih foto>OK). Crop telinga, Pilih salah satu saja. Lalu Drag and Drop gambar telinganya ke gambar wajah kita. Tekan File >> Transform untuk mengatur ukuran telinga.

Tekan CTRL + J untuk menggandakan telinga ( membuat telinganya menjadi dua) kemudian , Klik CTRL + T lalu klik kanan telinga dan lakukan flip horizontal, seperti dibawah:

Gunakan move tool. lalu letakkan di telinga yang satunya. Gunakan fungsi transform untuk mengatur kembali rotasi dan ukuran. Wah saya pusing? apa sih Transform itu? Klik penjelasan dasar Photoshop judulnya penjelasan fitur Transform

Hasilnya:


7. Sekarang kita balik ke layer 1 (background). lalu kita tekan CTRL + J untuk menggandakan layer. (klik Filter > Liquify) pakai Forward Warp Tool (W) lalu kita Liquify kan mata (drag dari bawah ke atas) bagi yang ingin memperkecil mata atau bisa juga diperbesar menggunakan Bloat Tool bagi yang ingin memperbesar area mata, pokoknya yang penting kalian improvisasi saja sendiri mana yang lebih baik.

Sekarang edit juga bagian hidung memakai tool - tool yang disediakan di Liquify mulai dari Forward Warp Tool (W) hingga Bloat Tool (B). Jika masih bingun bisa membaca tutorial Memancungkan hidung
Hasilnya:

wah ada bagian yang belum berwarna biru nih, ok brush kembali arsiran biru pada wajah yg telah mengalami perubahan akibat liquify tadi (metamoforsis) hehehe...

8. atur agar lebih DARK (gelap) levelnya dengan menekan CTRL + L

Hasilnya:


9. Gabungkan semua layer dengan menekan Ctrl + Shift + Alt + E , sehingga muncul layer baru hasil penggabungan layer
nah sekarang di layer baru tersebut beri titik2 putih dengan menggunakan Dogde Tool (tekan huruf O pada keyboard), sesuaikan ukuran dodge tool (sama seperti menyesuaikan ukuran brush) lalu klik kiri 3 - 4 kali agar bintik-bintik muncul putih bersinar, seperti ini:

Tambahkan tulisan di gambarnya seperti "DIMAS AVATAR". Dengan type huruf "Papyrus" , jika tidak ada bisa download di Koleksi Fonts ilmugrafis.

Ya ini lah Efek avatar pada wajah saya sendiri... ayo saatnya bikin AVATAR kamu sendiri!!!
simak juga Effect Terminator di wajah buatan teman - teman yang lain. Terima kasih semoga bermanfaaaaaat gan...

Read more »

Mengubah Klise Negative Film ke Foto Berwarna

Tutorial Photoshop kali ini sesuai judulnya yaitu bagaimana cara mengubah foto negative atau bisa disebut klise atau foto Negative ke foto Postitive yaitu foto berwarna pada umumnya. Kalau jaman dahulu belum secanggih saat ini, foto masih menggunakan roll film (klise). Nah sekarang bagaimana sih cara mengubahnya ke foto berwarna. "pergi ke studio foto lah" wah klo itu sih saya sudah tahu, hahaha... tapi saya cuma ingin image aja tanpa dicetak di kertas jadi bisa disimpan di hard disk, bagaimana caranya? oke mari kita bersama - sama membuat sebuah keajaiban dengan Sotosop eh maksud saya Photoshop...

Tutorialnya:
1. Buka Program Photoshop anda. Scan Klise yang akan kita edit, disini anda bisa menggunakan scanner pada umumnya yang menggunakan 48 bits color mode. Masukkan hasil scan ke photoshop. (pastikan anda sudah memasang scanner dengan benar dan menginstal driver scanner).
Caranya: Pada menu utama Photoshop Klik File >> Import >> Pilih Jenis Scanner Anda
*) Jika anda tidak punya scanner bisa menggunakan jasa penyedia scan di rental komputer terdekat dan menyimpannya ke CD atau Flash disk

Saya masih awam layout dan tampilan photoshop dan tidak tahu menu utama dan lain - lain, ok belajar dahulu Tutorial Dasar Photoshop

Ok ini contoh hasil scann Klise kita

Gambar: Klise (foto Negative)

2. Pada menu utama Klik Image >> Adjustment >> Invert
Hasilnya:

Gambar: Inverted Negative

Selesai? belum, warnanya masih perlu dikoreksi sedikit, Bagaimana? ok lanjutkan...

3. Koreksi warna
Klik Image >> Adjustment >> Level

Gambar : RGB Channel

Ubah Channel nya ke RED, gerak - gerakkan panah dari histogram

Jangan di OK dulu tapi langsung pindah ke Green

Pindah lagi ke Blue Channel

jangan di OK dulu, kembali ke Channel RGB, anda bisa mengatur shadownya (gelap terang gambar)

Nah baru kalau sudah sesuai selera kita klik OK

Hasilnya:

Yesssss!!! tapi bagi yang menginginkan hasil yang maksimal jangan berhenti sampai disini, foto ini masih bisa di make over lagi... Lanjuuuuut

4. Langkah terakhir yaitu menaikkan contrast dari gambar
Klik Image >> Adjustment >> Curves...
Atur kurva menjadi seperti huruf "S" sederhana

Klik OK, Dan Hasil akhirnya seperti ini

Amazing... hehehe, simpan foto di komputer anda

Demikian Rahasia Photoshop kategori Photo Effect mengubah foto negative (klise) menjadi foto Positive (berwarna) dengan menggunakan Photoshop. Untuk tutorial grafis yang lain bisa cek di koleksi tutorial ilmugrafis atau bisa juga belajar melalui video tutorial di IG Store. Terima kasih, semoga bermanfaat... Selamat belajar photoshop

Read more »

Membuat Game Tebak Angka

Pada tutorial Flash Games sebelumnya kita sudah belajar bagaimana dan seperti apa dasar pembuatan Games di Flash. Pada tutorial kali ini kita akan membahas dan praktik cara membuat game dengan pemrograman flash. Sedikit tambahan materi bisa dibaca dulu di bawah ini :

BEHIND THE SCENE : KONSEP DASAR PEMOGRAMAN GAME PART 1

Adobe Flash atau sebelumnya bernama Macromedia Flash adalah sebuah perangkat lunak besutan Adobe Inc. (Dulu milik Macromedia Inc.) yang diperuntukan untuk membuat animasi digital dan  website interaktif. Terlepas dari itu, ternyata flash memiliki perkembangan yang cukup pesat sehingga flash menjadi software multimedia yang luar biasa. Kehadiran action script sebagai bahasa pemograman dasar pada flash menjadikan flash lebih powerful sebagai software pengembang game yang mudah dan efektif. Berikut ini adalah konsep-konsep dasar pemograman game dengan menggunakan action script 3.0

Pernyataan Kondisi IF
Pernyataan IF dalam kehidupan nyata dapat diartikan menjadi  “Jika… maka,..” dengan kata lain pernyataan if bisa menghasilkan 2 kemungkinan atau lebih. Contoh : Jika poin nol maka game berakhir.

Format penulisan if sebagai berikut:

if(kondisi) {             //perintah dijalankan jika kondisi benar } else {             //perintah dijalankan jika kondisi salah }

Berikut ini adalah contoh game sederhana dengan menggunakan pernyataan if, yaitu game “ Tebak Angka ”

Berikut tutorial cara pembuatannya :

1. Buat file baru dengan memilih action script 3.0 file.
Buatlah desain game seperti di bawah ini.


3. Ketikan script di bawah ini pada frame 1 dengan mengaktifkan panel action (F9).

//variable awal var angkaMisteri:uint; var angkaPrediksi:uint; //kondisi awal permainan display.text="Tebak angka yang aku pikirkan, dari 1-100!"; //menghasilkan angka acak dari 1 sampai 100 angkaMisteri=Math.ceil(Math.random()*100); //event pada tombol cek cekBtn.addEventListener(MouseEvent.CLICK, cekAngka); function cekAngka(event:MouseEvent):void {                 angkaPrediksi=uint(inputTeks.text);                                 //jika angka yang ditebak kurang dari target                 if(angkaPrediksi < angkaMisteri)                 {                                 display.text="Angka terlalu kecil! coba lagi";                 }                 //jika angka yang ditebak lebih dari target                 else if(angkaPrediksi > angkaMisteri)                 {                                 display.text="Angka terlalu besar! coba lagi";                 }                                 //jika angka yang ditebak sama dengan target                 else                 {                                 display.text="Anda benar!!!";                 } }

Hasilnya sebagai berikut:

Coba tebak ANGKA BERAPA yang ada di pikiran Komputermu!! Asik kan.

Ok, Tutorial dan logika cara pembuatan game tebak angka dengan Adobe Flash. Terima kasih, Selamat belajar pemrograman Flash, Untuk file mentah atau source codenya bisa di download disini. Semoga Bermanfaat

Read more »

Dasar - Dasar Macromedia Flash

Pernahkah anda melihat suatu animasi mungkin dalam benak anda berkata bagaimana cara membuat gambar animasi atau pernahkah anda melihat kartun yang setiap hari ditayangkan di televisi? salah satu aplikasi pembuat animasi dan kartun tersebut adalah Macromedia Flash. Pada pembahasan kali ini saya akan sedikit menerangkan tentang basic dari Flash


Sebelum melangkah lebih jauh sebaiknya anda kenali dulu dasar-dasar FLASH

Di bawah ini merupakan window dari Flash MX

Di bawah ini merupakan keterangan dari kegunaan masing-masing komponen Flash MX secara detail:

- Timeline, digunakan untuk mengatur dan mengontrol isi keseluruhan movie Anda.

- Stage, merupakan tempat dimana Anda bekerja dalam membuat sebuah animasi.

- Tools Box, berisi alat-alat yang digunakan untuk menggambar objek pada stage.

- Color Window, merupakan window yang digunakan untuk mengatur warna pada objek yang Anda buat.

- Actions – Frame, merupakan window yang digunakan untuk menuliskan Action Script untuk Flash MX.
Biasanya Action Script digunakan untuk mengendalikan objek yang Anda buat sesuai dengan keinginan Anda.

- Properties, merupakan window yang digunakan untuk mengatur property dari objek yang Anda buat.

- Components, digunakan untuk menambahkan objek untuk web application yang nantinya di publish ke internet.

OK sampai ketemu di tutorial Multimedia Selanjutnya... "Export Animasi". Terima kasih, Semoga bermanfaat

Read more »

Membuat Animasi Ombak

Tutorial kali ini adalah Tutorial Membuat ombak di flash, disini saya menggunakan Macromedia Flash 8. Kalo kita berbicara tentang debur ombak penulis jadi ingat Pantai Indonesia yang Indah nih.

1. Buka program flash 8
Ubah ukuran stage menjadi 768 x 576 pixels.
Ganti warna bacground menjadi warna hitam


2. Ganti warna fill color menjadi #336699 dan warna stroke dijadikan none

3. Klik rectangle tool   untuk membuat airnya dengan mendragnya ke stage seperti gambar dibawah ini.



4. Klik kanan di frame 15 lalu  klik insert keyframe, Ubah gambar airnya dengan cara tarik ke atas menggunakan selection tool yang sebelah kiri
Gambarnya :



7. Klik di frame 1  lalu pilih tween shape

gambarnya


Di frame 35 klik kanan insert keyframe, Ubah gambarnya seperti ini>>



8. Klik Di frame 15 pilih tween shape


9. Lalu copy frame 1
caranya : klik kanan pada frame 1 dan pilih Copy Frames
kemudian Pastekan di frame 60


10. Klik Di frame 35 pilih tween shape
Seperti gambar dibawah ini:

Selamat mencoba...(@_@)

Jika semua sudah selesai tinggal kita menekan ctrl + enter  dan nikmati hasilnya

animasi ombak

Selamat mencoba Tutorial Flash
Semoga berhasil…
SEMOGA BERMANFAAT

Read more »