Nightwalker Team » uzuma http://www.night-walker.org Official Site resmi Nightwalker Team , yang memberikan tutorial seputar web development , jaringan komputer , sistem operasi , disain grafis , programming dan artikel-artikel lainnya tentang free open source software Fri, 13 Jan 2012 23:04:05 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Membangun Aplikasi Sms Berbasis Web [Part 2] http://www.night-walker.org/membangun-aplikasi-sms-berbasis-web-part2.nw http://www.night-walker.org/membangun-aplikasi-sms-berbasis-web-part2.nw#comments Wed, 14 Dec 2011 16:25:51 +0000 uzuma http://www.night-walker.org/?p=1367 Beberapa waktu lalu kita telah membahas cara “Membangun Aplikasi SMS Berbasis Web“.
Disini kita melanjutkan pembuatan aplikasi SMS kita , disini kita akan mencoba membuat halaman Tulis Pesan, Pesan Masuk, dan Pesan Terkirim.
Buatlah sebuah folder di Xampp-htdocs dengan nama sesuka Anda.
Selanjutnya kita buat file koneksi.php simpan di folder yang Anda buat tadi.

 

<?php
$host    = "localhost";
$user    = "root";
$pass    = "";
$database = "sms";
mysql_connect($host,$user,$pass);
mysql_select_db($database);
?>

Kemudian Anda buat file tulis_pesan.php adapun skipnya seperti dibawah ini..

<html>
<head>
<title> Pesan Single </title>
<script>
function Count(){
var karakter,maksimum;
maksimum = 160
karakter = maksimum-(document.form1.isi_pesan.value.length);
if (karakter < 0) {
alert("Jumlah Maksimum Karakter:  " + maksimum + "");
document.form1.isi_pesan.value = document.form1.isi_pesan.value.substring(0,maksimum);
karakter = maksimum-(document.form1.isi_pesan.value.length);
document.form1.counter.value = karakter;
}
else {
document.form1.counter.value =  maksimum-(document.form1.isi_pesan.value.length);
}
}
</script>
</head>
<body>

<form name="form1" method="post" action="proses_tulis.php">
<h3> Kirim Pesan Single </h3>
<table width="800" border="0" cellspacing="0" cellpadding="3">
<tr>
<td width="100"> Nomor Tujuan </td><td width="10"> : </td>
<td><input name="hp" type="text" size="20"></td>
</tr>
<tr valign="top">
<td> Isi Pesan </td><td> : </td>
<td>
<textarea name="isi_pesan" cols="40" rows="7" OnFocus="Count();"
OnClick="Count();" onKeydown="Count();" OnChange="Count();"
onKeyup="Count();"></textarea>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td><input name="counter" type="text" size="5" maxlength="5" value="160" /></td>
</tr>
<tr>
<td><input type="submit" value="Kirim Pesan" /></td>
</tr>
</table>
</form>
</body>
</html>

Lihat pada contoh tulis_pesan.php skrip <form name=”form1″ method=”post” action=”proses_tulis.php”> action dari form tersebut bahwa setelah button kirim pesan diklik maka akan menuju proses_tulis.php jadi kita akan membuat file dengan nama proses_tulis.php untuk proses pengiriman pesan kita. Adapun skripnya seperti ini.

<?php
include "koneksi.php";
$hp = $_POST['hp'];
$isi_pesan = $_POST['isi_pesan'];

$masuk = mysql_query("insert into outbox (InsertIntoDB,SendingDateTime,DestinationNumber,TextDecoded,SendingTimeOut,DeliveryReport,CreatorID)
values (sysdate(),sysdate(),'$hp','$isi_pesan',sysdate(),'yes','system')");
if ($masuk){
echo "<h4> Pesan Dikirim </h4>";
}
else {
echo "<h4> Pesan gagal dikirim </h4>";
}
?>

Jika selesai maka buka browser Anda dengan mengetikkan localhost/sms/tulis_pesan.php dan tampilannya seperti gambar dibawah ini.

Selanjutnya kita akan membuat halaman pesan masuk , buatlah file pesanmasuk.php seperti dibawah ini.

<link href="paging.css" rel="stylesheet" type="text/css">

<?
include "koneksi.php";
$sql = mysql_query("select * from inbox");
$hitung = mysql_num_rows($sql);

$offset = $_GET['offset'];

//Jumlah data yang ditampilkan per halaman
$limit = 5;
if (empty ($offset) ){
$offset = 0;
}
if ($hitung == 0){
echo "<br><font face=tahoma size=2><div align=center>Tidak Ada Pesan Masuk</div></font>";
}
else {
?>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="70%">
<tr >
<td height="30" width=100%>
<div align="left"><font size="3" face="tahoma">Semua Data Pesan Masuk (Inbox)<br></font>
<font face="tahoma" size="2">Jumlah Data : <?php echo "$hitung";?><hr color=#CCCCFF></font></div></td>
</tr>
</table>
<table border="1" cellpadding="0" cellspacing="0" width="70%">
<tr bgcolor="#999999" align="center">
<td width="2%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">No</font></div></td>
<td width="20%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">Time</font></div></td>
<td width="18%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">Pengirim</font></div></td>
<td width="50%"><div align="center"><font size="2" face="tahoma" color="#FFFFFF">Isi Pesan</font></div></td>
<td><div align="center"><font size="2" face="tahoma" color="#FFFFFF"> Aksi </font></div></td>
</tr>
<?
echo "<div>";

if ($offset != 0){
$prevoffset = $offset - 5;
echo "<span><a href=pesanmasuk.php?offset=$prevoffset>Back</a></span>";
}
else {
echo "<span>Back</span>"; //cetak halaman tanpa link
}

//hitung jumlah halaman
$halaman = intval($hitung/$limit); //Pembulatan

if ($hitung%$limit){
$halaman++;
}
for ($i=1; $i<=$halaman; $i++) {
$newoffset = $limit*($i-1);
if ($offset != $newoffset){
echo "<a href=pesanmasuk.php?offset=$newoffset>$i</a>";
}
else {
echo "<span>".$i."</span>";//cetak halaman tanpa link
}
}

//cek halaman akhir
if (! (($offset/$limit) + 1 == $halaman) && $halaman !=1){
//jika bukan halaman terakhir maka berikan next
$newoffset = $offset + $limit;
echo "<span><a href=pesanmasuk.php?offset=$newoffset>Next</a></span>";
}
else {
echo "<span>Next</span>";//cetak halaman tanpa link
}
echo "</div>";
?>
<?
$hasil = mysql_query("select * from inbox limit $offset,$limit");
$k = 1 + $offset;
while($data = mysql_fetch_array($hasil)){
echo"
<tr valign=top>
<td height=24><div align=center><font size=2 face=tahoma>$k</font></div></td>
<td><div align=center><font size=2 face=tahoma>$data[UpdatedInDB]</font></div></td>
<td><div align=center><font size=2 face=tahoma>$data[SenderNumber]</font></div></td>
<td><font size=2 face=tahoma>$data[TextDecoded]</font></div></td>
<td><div align=center><font size=2 face=tahoma><a href='hapuspesanmasuk.php?id=$data[ID]'> Hapus</a></font></div></td>
</tr>
";
$k++;
}
echo"</table>";
}
?>

Kemudian buat paging.css untuk tampilan pagingnya.

div.paging {
padding:2px;
margin:2px;
text-align:left;
font-family:Tahoma;
font-size:12px;
}

div.paging a{
padding:2px 5px 2px 5px;
margin-right:2px;
border:1px solid #DEDFDE;
text-decoration:none;
color:#0061DE;
}

div.paging a:hover{
border:1px solid #2B66A5;
color:#000000;
background-color:#FFFF80;
}

div.paging span.current{
padding:2px 5px 2px 5px;
margin-right:2px;
border:1px solid navy;
font-weight:bold;
background-color:#2E6AB1;
color:#FFFFFF;
}

div.paging span.disabled{
padding:2px 5px 2px 5px;
margin-right:2px;
border:1px solid #999999;
color:#999999;
}

div.paging span.prevnext{
font-weight:bold;
}

Dan yang terakhir kita akan membuat file dengan hapuspesanmasuk.php

<?php
include "koneksi.php";
$id = $_GET['id'];

$hapus = mysql_query("delete from inbox where ID='$id'");
if ($hapus){
echo "<h4> Pesan Berhasil Dihapus </h4>";
}
else {
echo "<h4> Pesan Gagal Dihapus </h4>";
}
?>

Jika semua selesai lihat dibrowser Anda tampilannya seperti ini.

Mudah bukan ? sekarang kita akan membuat Pesan Terkirim (sentitems)
Buka file pesanmasuk.php cari semua tulisan pesanmasuk.php dan ganti dengan pesanterkirim.php dan cari tulisan hapuspesanmasuk.php dan ganti dengan hapuspesanterkirim.php setelah semua diganti maka save as dengan nama pesanterkirim.php
Kemudian buka file hapuspesanmasuk.php dan cari skrip $hapus= mysql_query (delete from inbox where ID=$id); ubah menjadi $hapus= mysql_query (delete from sentitems where ID=$id); jika selesai save as dengan hapuspesanterkirim.php

Gambar tampilan pesan terkirim, selesaii . kita telah berhasil membuat halaman tulis pesan , inbox , dan sentitems. Maaf saya tidak bisa mempraktekkan pengiriman pesan karena modem yang dipake buat artikel part 1 udah diambil yang punya , hahaha (ketauan minjem) tapi percaya aja kok , ini berhasil :D , ntar kita lanjut lagi yaaa… dadahhh.. masih banyak kerjaan lain xD~~

]]> http://www.night-walker.org/membangun-aplikasi-sms-berbasis-web-part2.nw/feed 4 Membangun Aplikasi Sms Berbasis Web [Part 1] http://www.night-walker.org/membangun-aplikasi-sms-berbasis-web-part1.nw http://www.night-walker.org/membangun-aplikasi-sms-berbasis-web-part1.nw#comments Sat, 03 Dec 2011 09:51:32 +0000 uzuma http://www.night-walker.org/?p=1352 Assalamualaikum Wr.wb.. Disini saya ingin berbagi sedikit cara pembuatan aplikasi SMS berbasis web. Sebelum kita memulai membuat aplikasi ini kita perlu menyiapkan sebuah handphone / mobile modem agar kartu sim kita bisa terhubung dengan PC. Kita juga perlu menyiapkan aplikasi xampp yang bisa Anda download secara gratis di sini http://www.apachefriends.org/en/xampp.html dan juga aplikasi gammu yang bisa anda download disini http://wammu.eu/download/gammu/ .

dan jangan lupa kita harus menginstall dreamweaver / notepad ++ untuk membantu pekerjaan kita.
jika semuanya sudah dipersiapkan mari kita memulai pelajaran kita.
Pertama – tama kita akan mencoba menginstall aplikasi web server (XAMPP) yang telah kita download tadi.

-klik dua kali pada aplikasi yang telah kita download tadi
-kita klik install , dan tunggu proses instalasi sampai selesai

ikuti saja perintah yang muncul disana jika sudah tutup saja jendelanya kita karena telah berhasil menginstall aplikasi xampp di PC kita..
Mudah bukan :) , langkah pertama sudah selesai mari kita lanjutkan langkah berikutnya..

Langkah selanjutnya kita akan menghubungkan Handphone / mobile modem kita ke PC. ada banyak tipe handphone / modem yang didukung oleh Gammu, anda bisa melihat di sini http://wammu.eu/phones
sebelum saya menjelaskan cara penggunaan gammu kita harus menginstall Driver Handphone / Modem yang akan kita gunakan terlebih dahulu disini saya menggunakan modem ZTE MF-627. setelah anda tancapkan USB modem kedalam komputer ataupun laptop secara otomatis komputer akan mengenali sebuah perangkat baru jangan lupa untuk memasukkan SIM Card kedalam modem kita.

jika jendela instalasi driver telah terbuka, maka silahkan lakukan instalasi program di windows seperti biasa. Kita tunggu sampai proses instalasi selesai, jika selesai maka akan tampil jendela instalasi berhasil dilakukan. klik tombol Finish. gambar dibawah ini merupakan user interface Mobile modem ZTE MF-627 :

instalasi driver sudah selesai , sekarang kita lanjut ke materi selanjutnya yaitu membaca port koneksi modem kita untuk kita koneksikan ke Gammunya.
sebelum kita melihat port kita buka dulu info koneksi modem di http://wammu.eu/phones/zte/


kemudian klik start – mycomputer “klik kanan” dan pilih “properties” , setelah itu pilih “hardware” dan klik pada “device manager”.
kemudian pada jendela device manager pilih “Modem” cari yang nama “zte proprietary USB Modem” klik kanan kemudian pilih “properties”.
pilih “modem” dan lihat Port kita pada contoh ini modem yang digunakan di Port “com14″ dan pada maximum port speed ubah menjadi “19200″ sesuai info yang kita dapat dari http://wammu.eu/phones/zte/ tadi..

oke sekarang kita akan memulai mengkonfigurasikan “Gammu” nya…
kita extract gammu yang telah kita download sebelumnya. setelah diextract kita masuk ke folder gammu tersebut dan masuk ke “share/doc/gammu/examples/config” , kita “COPY” file “Gammurc” dan “Smsdrc” ke dalam folder “E:\Gammu-1.30.0-Windows\bin” <- “contoh”

setelah kita copy kedua file tersebut kedalam folder bin , sekarang kita akan mengedit keduanya , pertama kita akan mengedit file “Gammurc” terlebih dahulu.  disini saya menggunakan “Notepad ++” klik kanan pada “gammurc” dan pilih “edit with notepad++” kita ubah “DEVICE = com14″ <- port yang kita dapat dari device manager tadi dan ubah “Connection = at19200″ <- yang kita dapat dari link sebelumnya.


jika selesai simpan , kemudian kita akan mengidentifikasi modem kita apakah sudah terbaca oleh gammu.
buka “command prompt” dan masuk kelokasi gammu kita tadi seperti gammbar dibawah ini


ketik “gammu –identify” dan enter , jika tampil tulisan seperti gambar diatas maka step ini berhasil :D ~~
lanjut ke step berikutnya yaitu mengedit file “smsdrc” nya. oh saya lupa sebelum mengedit file “smsdrc” nya kita harus mengimpor databasenya terlebih dahulu pertama kita jalankan aplikasi “XAMPP” nya  , dan buka browser Anda…

buka “localhost/phpmyadmin” seperti gambar dibawah ini dan buat database baru. disini saya membuat database dengan nama “sms”.
pada database sms kita buat kita klik tab “Import” – “Browse” lokasi file mysql ada di “Gammu-1.30.0-Windows\share\doc\gammu\examples\sql”.
oke lanjut lagi buka folder bin dan edit file “smsdrc” nya menjadi seperti ini..


setelah diedit , simpan file tadi..
buka command prompt dan masuk ke direktori “E:\Gammu-1.30.0-Windows\bin>” <- contoh disini..
dan ketikkan perintah “gammu-smsd -c smsdrc”.
jika ada tulisan “gammu-smsd[2924]: mysql service is deprecated. Please use SQL service with correct driver.” cuekin aja , karena penulis jg belum
mengetahui penyebabnya tapi setelah dicoba mengirim sms tetap bisa dilakukan buka “smsdlog” di folder “bin” didalam gammu kita untuk mengetahui apakah modem kita berjalan.


jika didalam file smsdlognya seperti gambar diatas maka modem kita telah terhubung dengan gammu dan siap untuk digunakan.
sekarang kita akan melakukan test sms , buka browser anda dan ketikkan “localhost/phpmyadmin” jangan lupa jalankan service “apache dan mysqlnya”..
masuk ke database “sms” yang telah kita buat sebelumnya klik pada tabel “outbox” dan klik pada tab “insert”

Destinationnumber adalah nomor tujuan..
dan textdecoded “isi pesan” kita…
dan klik “go” ada pada bagian bawah…


gambar diatas bahwa pesan kita sudah di insert ke outbox , tunggu beberapa detik/menit dan klik refresh page jika pesan tersebut sudah tidak ada lagi di outbox berarti sudah dikirim ketabel “sentitems” , klik tabel sentitems dan akan tampil seperti gambar dibawah ini..

jika status pengirimanya pada tabel sentitems = “sendingOK” berarti pesan kita berhasil dikirim…
seperti gambar dibawah ini


ok, selesai..
saya kira sampai sini dulu ya semua nanti akan saya lanjutkan kepart berikutnya..
Terima Kasih.. :)

]]> http://www.night-walker.org/membangun-aplikasi-sms-berbasis-web-part1.nw/feed 0 Membuat Login Form Dengan Visual Basic 6.0 http://www.night-walker.org/membuat-login-form-dengan-visual-basic-6-0.nw http://www.night-walker.org/membuat-login-form-dengan-visual-basic-6-0.nw#comments Fri, 16 Apr 2010 12:50:05 +0000 uzuma http://www.night-walker.org/?p=836 Selamat malam para penggemar Night Walker Team. Dengan menghirup secangkir kopi dan menghisap sebatang rokok. Saya bersama teman – teman night walker team mengisi waktu luang dengan menulis artikel – aktikel yang mungkin menjadi spam – spam bagi anda semua.

Pada tutorial sebelumnya anda sudah mendapatkan dasar -dasar penggunaan visual basic, Dan pada tutorial kali ini saya ingin membagi kepada semua teman -teman semua cara membuat login di visual basic 6.0.

Oke Pertama Kita Membuat New File Standard seperti gambar dibawah ini.pilih standard exe.

Buat label dengan nama “User” dan “Password” setelah itu kita Buat 2 “text box” di samping “User” dan “Password”. Pada text box untuk user ganti namanya menjadi “txt1” lihat gambar 1. Nama dilakukan untuk pemanggilan. Nama tidak harus “txt1” supaya lebih mudah diingat. Jadi kamu boleh memberi nama apa saja asal kamu bisa lebih mudah mengingatnya. Dan pada text box untuk password kamu ganti dengan nama “txt2” lihat gambar 2. masih pada pada bagian password char kamu isi dengan tanda bintang. Itu digunakan ketika melakukan pengisian password semua tulisan menjadi “bintang”.lihat gambar 3.

Gambar 1

Gambar 2

Gambar 3

Setelah anda melakukan kegiatan diatas anda diwajibkan untuk membuat sebuah “command button” dengan nama Login. Lihat gambar dibawah ini.

Dan kamu klik 2 kali di command button tersebut, dan tulis script dibawah ini. Maksud dari kata kata dibawah ini adalah.

Jika “tx1” / text box pada user = “uzuma” dan “txt2” / text box pada password = “123456” maka tampilkan pesan “Password anda benar” jika tidak tampilkan pesan “Password Anda Salah”. “end if” yaitu digunakan untuk penutup perintah tersebut. Perintah.

Masih pada gambar diatas, pada bagian dibawah end if yang kutip dua tersebut untuk menghapus / clear setelah semua perintah selesai dilakukan. Misalkan kita sudah memasukan user dan password, dan mengklik OK pada pesan maka secara otomatis user dan password akan menjadi kosong kembali. Dan setfocus merupakan posisi tempat pengetikan awal. Pokoknya gitulah bingung gw jelasinnya gimana..haha ;)

Setelah semuanya telah kamu lakukan, coba deh kamu “run” tuh program, masukan user sama passwordnya. Terus klik login klo passwordnya bener munculnya seperti gambar diatas. Tapi klo salah dia akan tampil seperti gambar dibawah ini.


Wah akhirnya selesai juga, banyak yang bisa dilakukan dengan program diatas misalkan anda ingin membuat sebuah program dengan 2 form / lebih. Tapi untuk melewati form kedua / seterusnya kamu harus melewati form 1 dulu dengan memasukkan login / password dengan tujuan tidak semua orang bisa mengakses tu program. Jadi klo kejadian nya seperti itu kamu harus bikin 2 form/lebih, terus isi deh perintahnya.kalo mau tau caranya gimana tetep bersama Nightwalker Team.

Kyaknya itu aja buat semua penggemar Nightwalker soalnya gw dah banyak lupa, yang inget cuma ini belum sempet buat baca – baca lagi, maklum udah bawaan tua terus pelajaran waktu di SMA jadi lupa – lupa inget.

Semoga nih tutorial bermanfaat bagi kita semua, Oke Keep Share And Learn.

]]> http://www.night-walker.org/membuat-login-form-dengan-visual-basic-6-0.nw/feed 55 Cara Mengganti Gambar Xsplash Pada Ubuntu 9.10 http://www.night-walker.org/cara-mengganti-gambar-xsplash-pada-ubuntu-9-10.nw http://www.night-walker.org/cara-mengganti-gambar-xsplash-pada-ubuntu-9-10.nw#comments Sat, 20 Feb 2010 18:04:17 +0000 uzuma http://www.night-walker.org/?p=440 Selamat malam NightWalker Team.. Dengan pengetahuan yang masih Newbie dalam Sistem Operasi Linux saya ingin berbagi dengan semua Teman – Teman disini. Distro Linux yang pertama saya pake adalah Zenwalk, tetapi sekarang saya menggunakan Ubuntu 9.10. ini pengalaman saya ketika saya ingin merubah tampilan xsplash pada ubuntu kesayangan saya. Mungkin ini bad tutorial tapi mungkin dari rekan-rekan ada yang belum tau juga.
Oke gambar xsplash pada ubuntu 9.10 terdapat pada

/usr/share/images/xsplash

Dalam Tutorial ini saya mengedit gambar xsplash yang ada pada /usr/share/images/xsplash tersebut.

Pertama login ke root dan copy semua gambar /usr/share/images/xsplash

root@xcrasys:/usr/share/images/xsplash# ls

bg_2560x1600.jpg logo_large.png logo_medium.png logo_small.png logo_xtra_large.png
throbber_large.png throbber_medium.png throbber_small.png throbber_xtra_large.png

root@xcrasys:/usr/share/images/xsplash# cp *.* /root/Gambar/xsplash

Perintah diatas berarti kita mengkopi semua file yang terdapat di /usr/share/images/xsplash kedalam /root/gambar/xsplash setelah itu editlah semua gambar tersebut sesuai hati anda, bisa menggunakan Gimp / Adobe Photoshop di Windows. Untuk mempersingkat saya tidak menjelaskan cara pengeditan gambarnya.
Pertama-tama, komponen xsplash ada pada /etc/gdm/Init/Default dan /etc/gdm/PreSession/Default. Oke, itu berarti dia diload dari init.

root@xcrasys:~$ cat /etc/gdm/Init/Default

#!/bin/sh
# Stolen from the debian kdm setup, aren’t I sneaky
# Plus a lot of fun stuff added
# -George
PATH=/usr/bin:$PATH
OLD_IFS=$IFS…..

Setelah melakukan pengeditan gambar kamu perhatikan ini. Ini adalah cara untuk melihat hasil dari yang kita bikin.
Kamu masuk kedalam Folder gambar xsplah yang kamu bikin tadi.
Contoh :

root@xcrasys:~/Gambar/xsplash# ls

bg_2560x1600.jpg logo_large.png logo_medium.png logo_small.png
logo_xtra_large.png throbber_large.png throbber_medium.png
throbber_small.png throbber_xtra_large.png

Diatas tempat saya menyimpan gambar xsplash yang telah saya edit. Untuk Previewnya saya lakukan perintah ini.

sudo xsplash -b bg_2560x1600.jpg -l logo_medium.png -t throbber_medium.png

-b merupakan elemen background
dan nama = bg_2560x1600.jpg – nama dari backgroundnya.
-l merupakan elemen logo
dan nama = logo_medium.png – nama dari logonya.
-t merupakan elemen throber/loading itul
dan nama = throbber_medium.png – nama dari throbbernya.

itu tampilan preview xsplash image kita yang telah dibikin. Jika kamu rasa semua nya sudah jadi. Tinggalah kamu ganti gambar xsplash pada /usr/share/images/xsplash

Dengan gambar xsplash yang telah kamu bikin tadi. Sekarang kamu bisa menikmati xsplash image bikinan sendiri.bagi yang udah tau dan ada kesalahan dalam tutorial ini saya minta masukan anda.

Soalnya nih cara saya juga belajar dari forum – forum linux. Kayaknya itu aja deh dari Uzuma doneza soalnya mau mandii,
nyuci, nyari makan, secara anak kost saya nieh.hahaha
oke teman – teman semoga berhasil ya.
G’d luck..

]]> http://www.night-walker.org/cara-mengganti-gambar-xsplash-pada-ubuntu-9-10.nw/feed 4 Dasar – dasar Mendesign Website Dengan Microsoft FrontPage 2003 http://www.night-walker.org/dasar-%e2%80%93-dasar-mendesign-website-dengan-microsoft-frontpage-2003.nw http://www.night-walker.org/dasar-%e2%80%93-dasar-mendesign-website-dengan-microsoft-frontpage-2003.nw#comments Sat, 20 Feb 2010 14:51:01 +0000 uzuma http://www.night-walker.org/?p=436 Uzuma Doneza Here.. setelah melakukan editing foto, saya kembali lagi di dunia kegelapan dengan membawa oleh-oleh untuk penggemar setia Nightwalker Team. dengan secangkir kopi dan rokok saya berfikir tutorial apa yang akan saya beri untuk Nightwalker tercinta ini. dan Pada Suatu malam hari saya melihat sesosok bufferdie “Muka Kusut” + “rada Pusing” dengan amat serius membaca kode-kode php, html, jquery,dkk. dihadapan Laptop tercintanya, saya mendapatkan ide bagaimana jika saya berbagi pengalaman mendesign web dengan menggunakan Microsoft FrontPage 2003.
so dalam tutorial ini saya akan menjelaskan dasar – dasar mendesign website dengan Microsoft FrontPage tersebut.

1. Oke yang kita lakukan sekarang adalah buka Program Microsoft FrontPage Anda.
dan pilih table- layout tables and cells
pada Layout Tables and cells box anda bisa memilih langsung di bagian “Table Layout” dan anda juga bisa membuat Layout sendiri dengan cara memilih gambar seperti dibawah ini.

Pada Bagian Yang berwarna “Merah” (pada Gambar) = itu digunakan untuk membuat Layout Table, dan bagian bewarna biru digunakan untuk membuat layout cell. Jadi sebelum kita membuat layout cell untuk web kita, kita diharuskan untuk membuat layout table terlebih dahulu.

Oke tapi dalam tutorial ini saya mengambil layout dari “Table Layout” aja supaya gag terlalu banyak ngejelasinnya. :)

Pilih layout sesuai selera anda karena “Pria Punya Selera” disini saya memilih layout seperti gambar dibawah ini.

klik pada layout kita dan pada bagian seperti gambar dibawah ini merupakan ukuran dari layout cells kita (warna Biru).

oke disini saya akan membuat web yang amat sederhana,
pilih satu cells dari layout kita trus klik kanan – cell formatting. saya ingin menggunakan borders dalam tutorial ini.

color: merupakan warna border.
Gambar dibawah Apply itu merupakan bagian yang ingin kita kasih border

saya menggunakan warna ijo pada tutorial ini.
setelah membuat border warna ijo saya ingin membuat background dalam web ini menjadi warna hitam.
yaitu dengan cara:
Format – Background
pada bagian background saya memilih warna hitam sesuai dengan “kegelapan” dan warna “kopi” tercinta Nightwalker.haha

haha, layoutnya udah mulai kebentuk.

oke bukan web klo gag ada “button”
nih cara buat nambahin button di layout kita.
Insert – Interactive Button
pilih button sesuka hati anda dikarenakan “gratis”
dan Pada bagian “Text” merupakan nama dari button anda.


dalam tutorial ini saya menggunakan “Frame” dalam layout saya, mengapa saya menggunakan frame, dikarenakan saya pengen webnya gag berat.

oke pilih cells dari layout anda untuk tempat “frame” anda.
dan pilih
“insert – inline Frame”
dan tinggal kamu resize adjah ukurannya sesukamu..

selelah itu kamu pilih “new page” pada button di InlineFrame
karena frame itu membuat halaman baru jadi background framenya bewarna “putih” sedangkan frame pada web kita “hitam”
jadi cara gantinya sama seperti tadi : klik Framenya Pilih “Format-Background”

OUpss Lupa..
Save aja dulu Layout yang udah dibikin, caranya sperti biasa2nya..hwakwak…

setelah itu bikin New File Lagii..
“File-New”
isii tu tulisan apa aja dah..
.ganti backgroundnya lagi cara “sama”
setelah selesaii save dengan nama “Home” – (nama gag Wajib kayak ntu)

Sekarang kita link halaman home dilayout kita.
pilih button (klik kanan- Hyperlink)

oke Minum Kopi dulu ,,
dan pilih “home.htm” tempat kita menyimpan Halaman home tadi.

perhatikan gambar diatas , setelah mencari tempat home.htm tadi, kita pilih Target Frame dan pilih “I1″ itu menyatakan bahwa home.htm akan ditampilkan pada Inline Frame Kita tadii.. :) setelahitu, save dan kamu coba tes hasil web kamu di broser atau preview bagian bawah kiri pd Ms. Front page..
coba klik button “Home” secara otomatis dia akan menampilkan home.htm di Frame
yang kita bikin tadi.

Maaf Previewnya gag dibikin kebetulan saya bikinnya jam 3.00 so bawaan ngantuk,
rokok dan kopi udah abis mana warung gag ada yang buka. Saya kelupaan buat
Screenshot hasilnya, mana hasilnya udah gw apuzz lagii..wkkwkkw

oh iya ini kamu bisa tambahin pada bagian headernya gambar , kamu liat ukuran cells
kamu tadi dan bikin gambar sesuaii cellsnya tadii ya… :) ..

sedikit info

no.1 = tampilan design web kita
no.2 = tampilan design dan kode html kita
no.3 = tampilan kode html kita
no.4 = untuk melihat hasil web kita yang telah dibuat. :)
oke saya rasa itu aja dulu oleh – oleh dari saya untuk night walker team kebetulan
kemaren malem begadang ampe pagi sama omz bufferdie dan besoknya pergi ampe
malem, trus bikin tutorial ini jam 3.00 pagi.
Jadi kalo gag jelas tinggal tanya aja, maaf tutorialnya gag terlalu detail…
Hilangkan rasa lelah dan tataplah masa depan yang cerah..
A bad plan is Better than no plan at all…

Uzuma doneza

]]> http://www.night-walker.org/dasar-%e2%80%93-dasar-mendesign-website-dengan-microsoft-frontpage-2003.nw/feed 6 Membuat Efek Api Pada Tulisan http://www.night-walker.org/membuat-efek-api-pada-tulisan.nw http://www.night-walker.org/membuat-efek-api-pada-tulisan.nw#comments Mon, 08 Feb 2010 08:56:54 +0000 uzuma http://www.night-walker.org/?p=337 Hallo para pengunjung Night-Walker.Org. eh ketemu lagi dengan saya Uzuma Doneza Pejalan Malam :D . saya datang kembali dengan tutorial Adobe Photoshop yaitu “Membuat Efek Api pada Tulisan”, sebelum melakukan tutorial ini ada baiknya kalian semua menyiapkan Secangkir Kopi, dan Sebungkus Rokok supaya anda tidak mengantuk dalam melakukan tutorial ini.. :)
Pepatah Mengatakan Sedia payung Sebelum hujan dan NightWalker Mengatakan Sedia Kopi Sebelum Ngantuk…!

Oke Pertama Anda buat New File Seperti gambar Dibawah ini..

Perhatikan Mode Pada Gambar diatas. Ubah modenya menjadi Grayscale..
Oke Next, Kamu pilih “text” pada “toolbox” dan kamu pilih “Horizontal Type Mask Tool”

Pada bagian selanjutnya kamu tulis apa yang ingin kamu tulis, jangan kepanjangan jika hal tersebut kamu lakukan berarti kamu membuat sebuah cerita bukan membuat Efek api.. :)
Perhatikan Gambar Dibawah ini…

selelah itu, kamu liat gambar dibawah itu dengan cara klik kanan – Select Invers

oke, Step selanjutnya adalah kamu minum kopi anda supaya lebih semangat..haha
lakukan seperti gambar dibawah ini.

setelah itu klik kanan pada box dan pilih deselect..

Putar gambar yang telah kita bikin dengan cara
Pilih Image – rotate canvas – 90derajad CCW..

Setelah itu kamu harus menyiapkan korek buat membakar tulisan tersebut, supaya efek apinya jadi.. :)
Next kamu pilih filter-stylize-wind

lakukan gambar diatas beberapa kali supaya efek apinya lebih jelas… :)
Putar lagi Gambarnya dengan cara.
Pilih Image – rotate canvas – 90derajad CW.

Kemudian yang anda lakukan adalah dengan cara memilih Filter-Distort-Ripple

Pada Ripple Box kamu atur sesuai keinginan anda.. :)
Selanjutnya kamu ubah Mode gambar dengan cara.
Pilih Image-Mode-Indexed Color

Dan kamu pilih Image-mode-color table

Pada Color Table Box Kamu Pilih “Black Body”
setelah Semuanya Kamu lakukan Maka Terjadilah Sebuah hasil seperti gambar dibawah ini..

Perhatian : Jangan Dekatkan gambar Kepada anak dibawah usia 2 tahun.

Semoga Berhasil :)

UzumaDonezaArt

]]> http://www.night-walker.org/membuat-efek-api-pada-tulisan.nw/feed 6 Menggabungkan Dua Gambar Dengan Adobe Photoshop http://www.night-walker.org/menggabungkan-dua-gambar-dengan-adobe-photoshop.nw http://www.night-walker.org/menggabungkan-dua-gambar-dengan-adobe-photoshop.nw#comments Fri, 05 Feb 2010 13:27:49 +0000 uzuma http://www.night-walker.org/?p=313 selamat malam para pengunjung Night-Walker.Org. Bertemu lagi dengan saya Uzuma Doneza Pejalan Malam :D . Kalau pada artikel sebelum nya saya memberikan sebuah tutorial tentang “Membuat Efek Pelangi dengan Adobe Photoshop”, maka Pada Artikel saya yang kedua kali nya ini, saya akan mencoba memberikan sebuah tutorial bagaimana “Menggabungkan Dua Gambar dengan Adobe Photoshop” . Ok, dari pada kelamaan, ada baiknya kita langsung mulai…

Pertama Kita Tentuin dulu gambar yang ingin digabungkan…

Trus Pilih Select -> Color Range tinggal kamu pilih bagian mana yang mau diambil, pada box color rang yang bewarna putih berarti gambar yang akan diselection… :)

Pada gambar dibawar kita bisa lihat bahwa bagian gambar yang akan kita ambil sudah terseleksi, tapi belum semua yang kita inginkan terseleksi, jadi kita pilih magic tool seperti gambar dibawah. Kita seleksi bagian yang belum terseleksi dengan cara menekan SHIFT+Klik Kiri :)

Pada Gambar dibawah ini dapat kita lihat bahwa semua gambar yang kita inginkan terseleksi.. :)

selelah itu pilih move tool , dan tarik gambar yang telah kita seleksi tadi ke gambar 2

pada gambar diatas atur gambar supaya lebih kelihatan menyatu dengan move tool tadi.

Pada bagian diatas dapat anda lakukan dengan cara memilih image – adjustment – selective color

setelah itu anda atur warna supaya gambar lebih menyatu… :)

kita perlu mengatur warna gambar 2, supaya warna benar-benar seperti menyatu. Perhatikan gambar dibawah..

semua gambar diatas dilakukan seperti gambar 1.

Semoga Berhasil, selamat mencoba… :)

]]> http://www.night-walker.org/menggabungkan-dua-gambar-dengan-adobe-photoshop.nw/feed 2 Membuat Efek Pelangi dengan Adobe Photoshop http://www.night-walker.org/membuat-efek-pelangi-dengan-adobe-photoshop.nw http://www.night-walker.org/membuat-efek-pelangi-dengan-adobe-photoshop.nw#comments Wed, 03 Feb 2010 18:55:47 +0000 uzuma http://www.night-walker.org/?p=270 Pada artikel saya yang pertama ini , saya akan memberikan sebuah tutorial “Membuat Efek Pelangi dengan Photoshop”. Sebagaimana kita ketahui , Photoshop merupakan salah satu software image editting sejuta umat yang begitu banyak di gunakan oleh para pekerja IT khususnya pada bidang graphic design. Bahkan kini para anggota di situs-situs jejaring sosial pun ikut tertarik untuk mempelajari software Photoshop ini untuk memperindah foto-foto yang mereka miliki :) .

Pilih Pen Tool Untuk Membuat Garis-garis Gambar Berbentuk Pelangi. Lihat Gambar Disamping Kiri bawah ini dan Kemudian Kamu pilih Add Anchor Point Tool seperti Disamping kanan bawah ini :)

Perhatikan gambar di bawah ini :

Trus kamu pilih di layer box, perhatikan gambar dibawah dan pilih “solid color” , Trus Duplicate gambar yang telah kamu  beri warna untuk membuat gambar dengan warna yang berbeda..

Jadilah Seperti gambar dibawah ini , oke sekarang kita lanjutin ke step berikutnya…

Kamu pilih Gambar yang telah kamu buat pada layer box, and kamu pilih Filter – Blur – Gaussian Blur :)

Setelah Semuanya Kamu Lakukan Terjadilah sebuah hasil seperti gambar diatas…
selamat mencoba… :)

]]> http://www.night-walker.org/membuat-efek-pelangi-dengan-adobe-photoshop.nw/feed 5