Showing posts with label Belajar dasar PHP. Show all posts
Showing posts with label Belajar dasar PHP. Show all posts

Tuesday, August 27, 2013

Cara Menerjemah / Decrypt MD5 dengan software CainAbel

Hy selamat malam semua sahabat ILMU BLOGGER pada malam ini saya akan memposting tentang "Cara Menerjemah / Decrypt MD5 dengan software CainAbel" yah dilihat dari situ CainAbel adalah sebuah software jika anda belum punya silahkan DOWNLOAD DISINI.
nah karna saya lagi malas jadi gk bnayak bacot ayo kita simak langsung saja caranya:
Pertama
Buka program Cainabel, lalu buka tab menu Cracker, dan pilih MD5 Hashes.
Kedua

Klik tombol Add to list, yang berbentuk tanda plus seperti iniCara menggunakan Cainable
Ketiga
Setelah anda klik tombol plus tadi, maka akan muncul kotak input yang meminta anda untuk memasukkan password MD5 yang ingin anda decrypt. Untuk percobaan, mari kita decrypt password ini 87040259bc02544d3e3c71f87ca94d32. Password tersebut bila didecrypt hasilnya adalah hedizone. Masukkan password tersebut dalam input box, lalu klik OK.
Ketiga
Setelah anda klik tombol plus tadi, maka akan muncul kotak input yang meminta anda untuk memasukkan password MD5 yang ingin anda decrypt. Untuk percobaan, mari kita decrypt password ini 87040259bc02544d3e3c71f87ca94d32. Password tersebut bila didecrypt hasilnya adalah hedizone. Masukkan password tersebut dalam input box, lalu klik OK.
Cara menggunakan Cainable
Keempat
Klik kanan pada list password yang akan didecrypt, dan pilih Brute-Force Attack.
Cara menggunakan Cainable
Kelima
Selanjutnya akan muncul kotak Brute-Force Attack. Langsung anda klik Start, dan proses decrypt akan berjalan. Lama proses ini tergantung dari panjang dan kerumitan password yang didecrypt. Semakin panjang dan rumit sebuah password yang akan didecrypt, semakin lama pula proses Bruteforce decryptnya berjalan. 
Cara menggunakan Cainable
Keenam
Jika proses decrypt sudah selesai, maka passwordnya akan terlihat seperti pada gambar berikut.
Cara menggunakan Cainable
Jadi begitulah cara menggunakan Cainabel sebagai MD5 Decrypt. Bagaimana? Mudah kan
Cuma nunggu prosesnya lama, butuh kesabaran. Selain untuk decrypt md5, Cainable juga bisa digunakan untuk mendecrypt hhash yang lainnya. Silahkan anda coba-coba sendiri. Selamat berjuang mendecrypt password.

mungkin sampai sinilah postingan saya kali ini semoga bermanfaat, Salam ILMU BLOGGER.

Friday, July 5, 2013

Download Dreamweaver dengan Crack dan Dengan Serial Number

Buat LPFriend`s yang mungkin saat ini sedang mencoba belajar membuat Website Hosting khususnya Localhost. Ada software webserver yang cocok untuk pemula yaitu XAMPP. Yap, dalam software ini sudah termasuk Apache, MySQL, MercuryMail, FileZilla dan Tomcat. (Itu sebabnya saya sudah lama nggak bikin postingan, karena saya saat ini sedang sibuk mempelajari cara membuat website localhost). 
Untuk LPFriend`s yang ingin belajar juga cara membuat website hosting download XAMPPnya dulu ya. berikutnya nanti LightPumpkins akan memposting cara-cara membuat script PHP untuk membuat website hosting. Ditunggu ya..
Size      : 97 Mb
Source : Mediafire

Cara membuat from Login PHP dengan Hosting Xampp

Form Login? apaan tuh..? Coba LPFriend`s bayangin tiap kali buka Facebook, Twitter, G+, atau sebangsanya (Jin kali :p) pasti yang bakalan tampil duluan adalah dua kolom dan satu tombol, satu kolom bertulis 'username' dan satunya lagi 'password'. Nah itu dia yang namanya form login. Fungsinya sendiri untuk membatasi hak akses untuk para pengunjung website. Intinya hanya member terdaftar saja yang bisa mengakses 'halaman tertentu' ini.
Emang website profesional doang yang bisa bikin form ini? Ya nggak lah, website kelas teri alias newbie juga bisa bikin beginian, tertarik? ini dia tipsnya...
1.  Aktifkan Apache dan MySQL. Caranya buka C:/xampp/ lalu buka file xampp_control.exe lalu klik 'start' pada apache dan MySQL
2.  Buka browser dan ketik http://localhost/phpmyadmin
3.  Buat nama database, disini kita pakai nama "db_cc" (tanpa tanda petik)
4.  Buat tabel dengan nama admin lalu isi dengan ketentuan seperti gambar dibawah dan kalo sudah klik 'save'
5.  Klik Insert pada tabel admin dan isi kolom disebelah kanan terserah mau diisi apa, gambar dibawah sebagai contohnya
6.  Buka aplikasi script editor seperti dreamweaver, notepad, atau apa saja lalu copas empat file php dibawah

form_admin.php

<html>
<head><title>Form Login Admin</title></head>
<body>
<form action="login.php" method="post">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username" size="20"></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size="20"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="Login" value="Proses"></td>
</tr>
</table>
</form>
</body>
</html>

login.php
<?php session_start();
include "koneksi.php";
$username=$_POST['username'];
$password=$_POST['password'];
$query=mysql_query("select * from admin where username='$username' and password='$password'");
$cek=mysql_num_rows($query);
if($cek){
$_SESSION['username']=$username;
?>Anda berhasil login. silahkan menuju <a href="home.php">Halaman HOME</a><?php
}else{
?>Anda gagal login. silahkan <a href="form_admin.php">Login kembali</a><?php
echo mysql_error();
}
?> 

koneksi.php
<?php
$host="localhost";
$user="root";
$password="";
$database="db_cc";
$koneksi=mysql_connect($host,$user,$password);
mysql_select_db($database,$koneksi);
//cek koneksi
if($koneksi){
//echo "berhasil koneksi";
}else{
echo "gagal koneksi";
}
?> 

home.php
<?php session_start();
if(ISSET($_SESSION['username'])){
include "koneksi.php";
?>
<h1>isi dengan script yang dinginkan</h1>
<a href="logout.php">Logout</a>
<?php
}else{
?>Anda tidak boleh mengakses halaman ini. silahkan<a href="form_admin.php">Login
dahulu</a><?php
}
?>

logout.php
<?php session_start();
session_destroy();
echo "Anda berhasil logout. silahkan menuju <a href='http://localhost/admin/'>Halaman Utama</a>"
?>


7.  Buka folder C:/xampp/htdocs lalu buat folder baru terserah namanya apa, disini sebagai contoh namanya adalah folder 'admin'
8.  Pindahkan empat file yang tadi kita buat ke folder admin tadi

Yappss...semua udah beres sekarang kita praktekindan kalo semua langkah-langkah diatas dilakukan dengan benar maka tampilannya akan jadi seperti ini

form_admin.php
login.php

home.php (dengan login)
logout.php

home.php (tanpa login)

 Oh iya, sebagai catatan script bertulisan isi dengan script yang diinginkan boleh diganti dengan script HTML apapun yang jelas apapun scriptnya script itu hanya akan tampil jika user sudah login

Kalo ada yg masih bingung atau langkah-langkahnya salah silahkan komen dibawah asal jangan nyampah ya

Friday, June 14, 2013

Pengertian dan Fungsi XAMPP


XAMPP adalah sebuah software web server apache yang didalamnya sudah tersedia database server mysql dan support php programming. XAMPP merupakan software yang mudah digunakan, gratis dan mendukung instalasi di Linux dan Windows. Keuntungan lainnya adalah cuma menginstal satu kali sudah tersedia Apache Web Server, MySQL Database Server, PHP Support (PHP 4 dan PHP 5) dan beberapa module lainnya. Hanya bedanya kalau yang versi untuk Windows sudah dalam bentuk instalasi grafis dan yang Linux dalam bentuk file terkompresi tar.gz. Kelebihan lain yang berbeda dari versi untuk Windows adalah memiliki fitur untuk mengaktifkan sebuah server secara grafis, sedangkan Linux masih berupa perintah-perintah di dalam console. Oleh karena itu yang versi untuk Linux sulit untuk dioperasikan. Dulu XAMPP untuk Linux dinamakan LAMPP, sekarang diganti namanya menjadi XAMPP FOR LINUX.


1. Mengenai APACHE

Apache sudah berkembang sejak versi pertamanya. Sampai saat ditulisnya artikel ini versi terakhirnya yang ada yaitu Apache ver 2.0.54. Apache bersifat open source, artinya setiap orang boleh menggunakannya, mengambil dan bahkan mengubah kode programnya. Tugas utama apache adalah menghasilkan halaman web yang benar kepada peminta, berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan.

2. Mengenai PHP


Bahasa pemrograman PHP merupakan bahasa pemrograman untuk mebuat web yang bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web yang bersifat dinamis. PHP dapat dijalankan pada berbagai macam Operating System (OS), misalnya Windows, Linux dan Mac OS. Selain Apache, PHP juga mendukung beberapa web server lain, misalnya Microsoft IIS, Caudium, PWS dan lain-lain.
Seperti pernah disinggung sebelumnya bahwa PHP dapat memanfaatkan database untuk menghasilkan halaman web yang dinamis. Sistem manajemen database yang sering digunakan bersama PHP adalah MySQL. Namun PHP juga mendukung system manajemen Database Oracle, Microsoft Acces, Interbase, d-Base, PostgreSQL dan sebagainya.
Hingga kini PHP sudah berkembang hingga versi ke 5. PHP 5 mendukung penuh Object Oriented Programing(OOP), integrasi XML, mendukung semua ekstensi terbaru MySQL, pengembangan web services dengan SOAP dan REST, serta ratusan peningkatan kemampuan lainnya dibandingkan versi sebelumnya. Sama dengan web server lainnya PHP juga bersifat open source sehingga setiap orang dapat menggunakannya dengan gratis.

3. Mengenai MySQL

Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang khusus digunakan untuk mengolah database. SQL pertama kali didefinisikan oleh American National Standards Institute (ANSI) pada tahun 1986. MySQL adalah sebuah sistem manajemen database yang bersifat open source. MySQL adalah pasangan serasi dari PHP. MySQL dibuat dan dikembangkan oleh MySQL AB yang berada di Swedia.
MySQL dapat digunakan untuk membuat dan mengola database beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah dan menghapus data yang berada dalam database. MySQL merupakan sisitem manajemen database yang bersifat at relational. Artinya data-data yang dikelola dalam database akan diletakkan pada beberapa tabel yang terpisah sehingga manipulasi data akan menjadi jauh lebih cepat.
MySQL dapat digunakan untuk mengelola database mulai dari yang kecil sampai dengan yang sangat besar. MySQL juga dapat menjalankan perintah-perintah Structured Query Language (SQL) untuk mengelola database-database yang ada di dalamnya. Hingga kini, MySQL sudah berkembang hingga versi 5. MySQL 5 sudah mendukung trigger untuk memudahkan pengelolaan tabel dalam database.

4. Mengenai PHPMyAdmin

Pengelolaan database dengan MYSQL harus dilakukan dengan mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika anda ingin membuat database, ketikkan baris perintah yang sesuai untuk membuat database. Jika kita ingin menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu cukup menyulitkan karena kita harus hafal dan mengetikkan perintahnya satu persatu.
Banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola data base dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin kita dapat membuat tabel, mengisi data dan lain-lain dengan mudah tanpa harus hafal perintahnya. Untuk mengaktifkan phpMyAdmin langkah-langkahnya adalah : yang pertama setelah XAMP kita terinstall, kita harus mengaktifkan web server Apache dan MySQL dari control panel XAMPP. Yang kedua, jalankan browser kesayangan Anda (IE, Mozilla Firefox atau Opera) lalu ketikkan alamat web berikut : http://localhost/phpmyadmin/ pada address bar lalu tekan Enter. Langkah ketiga apabila telah nampak interface (tampilan antar muka) phpMyAdmin anda bisa memulainya dengan mengetikkan nama database, nama tabel dan seterusnya.

Tatacara Penggunaan dan Pengujian
Pengujian :
  1. Buka Web Browser
  2. Ketikkan http://localhost dalam Web Browser
  3. Bila masuk ke dalam Web XAMPP berarti semua langkah telah berhasil dilakukan.
Pengamanan :
Secara default, ada beberapa faktor keamanan yang harus dikonfigurasi. Faktor keamanan yang masih harus dikonfigurasi adalah :
  1. MySQL Administrator (root) tidak memiliki password.
  2. MySQL Daemon dapat diakses dari jaringan
  3. ProFTPD menggunakan password “lampp” untuk user “nobody”
  4. PHPMyAdmin dapat diakses dari jaringan
  5. Semua contoh dapat diakses dari jaringan
  6. MySQL dan Apache bekerja dalam konfigurasi user yang sama (nobody)

Friday, May 17, 2013

Belajar Dasar-dasar PHP

Untuk Belajar Dasar-dasar PHP, anda mesti membaca sedikit tutorial Dasar-dasar PHP ini...
Yang dibutuhkan untuk menjalankan PHP
Untuk dapat menjalankan PHP Anda membutuhkan sebuah web server.
untuk pertama kalinya belajar PHP anda mesti mepersiapkan server local untuk di PC or laptop anda...
disini akan dijelaskan untuk PC ber SO windows (98,XP, dll)
anda bisa memilih beberapa angine server seperti XAMPP, AppServNetwork, PHP Triad...
mengapa memilih ini anda bisa membaca artikel sebelumnya..(dari pada capek instal satu perasu untuk pernagkatnya).
1. XAMPP
2. AppServ
3. PHPTRIAD
pilih salah satu dan instal DI PC anada..(penulis tidak akan menjelaskan car instalasinya, karena seperti layaknya instal sofware biasa)
kemudian cek di broser dengan memasukkan http://localhost jika sudah ada informasi mengenai server local maka anda sudah berhasil insatl server localhost untuk PC ana...
setelah anda mempunyai server untuk menjalan kan code2 PHP dan sudah memiliki basisdata (MySql) maka yag anda perlukan selanjutnya adalah editor PHP
editor PHP bisa menggunakan Notepad,Rapid PHP 2005, dreamwaver dan lain2 tergantung minat anda

Jika semua sudah tersedia saya akn jelaskan mengenai Sintaks dasar PHP
4 macam cara penulisan kode PHP, yaitu :


1. di awali
2. di awali
3. di awali
4. di awali <% diakhiri %>

Pilih salah satu dari empat cara tersebut. Yang sering digunakan adalah cara pertama dan kedua. Tiap akhir baris harus selalu diberi tanda titik koma (;).

Sama Seperti pada bahasa pemrograman lain Anda pun bisa meletakkan baris komentar pada program Anda. Pada PHP caranya adalah dengan meletakkan komentar tersebut di sebelah kanan tanda // jika komentar satu baris dan di antara /* dan */ jika komentarnya lebih dari satu baris.

/* kalau yang ini adalah komentar
lebih dari satu baris komentar*/
echo ("memang mudah kan...");
?>


Tipe Data
PHP mengenal tiga macam tipe data, yaitu :
1. Integer
2. Floating point number
3. String
Integer
Yang termasuk dalam tipe data ini adalah bilangan bulat (tidak pakai koma). contoh :
$a = 1234 // desimal
$b = - 1234 // negatif
$c = 0123 // oktal
$d = 0x12 // heksadesimal
pernyataan seperti $a = 1234 disebut pernyataan penugasan. Dalam contoh tersebut maksudnya adalah memberikan nilai 1234 ke variabel $a.

Floating point number
Disebut juga bilangan pecahan. Terdapat tanda titik yang merupakan pemisah antara bagian bulat dan pecahan.

$a = 1.234 // bentuk biasa
$b = 1.2e3 // bentuk eksponensial

Strings
$a = "ini adalah tipe data string"


Array
Array merupakan tipe data terstruktur yang berguna untuk menyimpan sejumlah data yang bertipe sama. Bagian yang menyusun array disebut elemen array, yang masing-masing elemen dapat diakses tersendiri melalui indeks array.

Array berdimensi satu
$kota[0] = "Yogyakarta";
$kota[1] = "Jakarta";
$kota[2] = "Malang";
$kota[3] = "Purwokerto";

print ("Kota favorit saya adalah $kota[2]");
?>

Kode di atas bila dijalankan pada browser, akan muncul tulisan :
Kota favorit saya adalah Malang.
Indeks array dimulai dari 0. Jadi indeks array 0 menyatakan elemen pertama dari array, indeks array 1 menyatakan elemen array kedua, dan seterusnya.

Array multidimensi
Yang termasuk dalam tipe data ini adalah bilangan bulat (tidak pakai koma). contoh :
$buaht = array (
"apel" => array(
"warna" => "merah",
"rasa" => "manis"
),
"pisang" => array(
"warna" => "kuning",
"rasa" => "manis"
)
);

print ("Warna buah apel adalah ");
print ($buah["apel"]["warna"])."
";
print ("Rasa buah pisang adalah ");
print ($buah["pisang"]["rasa"]);
?>

Kode di atas akan menghasilkan tulisan
Warna buah apel adalah merah
Rasa buah pisang adalah manis

VARIABLE
Dalam PHP setiap nama variable diawali tanda dollar ($). Misalnya nama variable a
dalam PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat jalannya
program dan tergantung pada konteks yang digunakan.
File contoh2.php:
$a=”5”;
$b=”2”;
$hasil=$a+$b;
echo($hasil);
?>
hasilnya adalah: 7

STRUKTUR KONTROL
IF
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat.
Cara penulisannya adalah sebagai berikut:
if (syarat)
{
statement
}
atau:
if (syarat)
{
statement
}
else
{
statement lain
}
atau:
if (syarat pertama)
{
statement pertama
}
elseif (syarat kedua)
{
statement kedua
}else
{
statement lain
}

WHILE
Bentuk dasar dari statement While adalah sebagai berikut:
while (syarat)
{
statement
}
Arti dari statemant While adalah memberikan perintah untuk menjalankan statement
dibawahnya secara berulang-ulang, selama syaratnya terpenuhi.

FOR
Cara penulisan statement FOR adalah sebagai berikut:
for (ekspresi1; ekspresi2 ; ekspresi3)
statement
ekspresi1 menunjukkan nilai awal untuk suatu variable
ekspresi2 menunjukkan syarat yang harus terpenuhi untuk menjalankan statemant
ekspresi3 menunjukkan pertambahan nilai untuk suatu variable
File contoh7.php:
for ($a=0;$a<10;$a++)
{
echo(“Nilai A = ”);
echo(“$a”);
echo(“
”);
}
?>

SWITCH
Statement SWITCH digunakan untuk membandingkan suatu variable dengan beberapa
nilai serta menjalankan statement tertentu jika nilai variable sama dengan nilai yang
dibandingkan.
Struktur Switch adalah sebagai berikut:
switch (variable)
case nilai:
statement
case nilai:
statemant
case nilai:
statement
.
.
.
File contoh8.php:
$a=2;
switch($a)
{
case 1:
echo(“Nilai variable a adalah satu”);
break;
case 2:
echo(“Nilai variable a adalah dua”);
break;
case 3:
echo(“Nilai variable a adalah tiga”);
break;
}
?>

REQUIRE
Statement Require digunakan untuk membaca nilai variable dan fungsi-fungsi dari
sebuah file lain. Cara penulisan statement Require adalah:
require(namafile);
Statement Require ini tidak dapat dimasukkan diadalam suatu struktur looping misalnya
while atau for. Karena hanya memperbolehkan pemangggilan file yang sama tersebut
hanya sekali saja.
File contoh9.php:
$a=”Saya sedang belajar PHP”;
function tulistebal($teks)
{
echo(“$teks”);
}
?>
File contoh10.php:
require(“contoh9.php”);
tulistebal(“Ini adalah tulisan tebal”);
echo(“
”);
echo($a);
?>

INCLUDE
Statement Include akan menyertakan isi suatu file tertentu. Include dapat diletakkan
didalam suatu looping misalkan dalam statement for atau while.
File contoh11.php:
echo(“--------------------------------------
”);
echo(“PHP adalah bahasa scripting
”);
echo(“--------------------------------------
”);
echo(“
”);
?>
File contoh12.php:
for ($b=1; $b<5; $b++)
{
include(“contoh11.php”);
}
?>

Friday, March 1, 2013

Cara membuat From pencarian / Search di PHP My SqL

Posting kali ini saya akan berbagi ilmu lagi khusus untuk yang belajar pemrograman php .
salah satu pertanyaan bagi seorang pemula yang sudah berhasil membuat report tentunya tidak akan lengkap kalau tidak ada form pencarian .
(cara membuat form pencarian dengan php)
Tanpa basi basi lagi langsung Praktek SOB bloger.
ini dia codingnya.
langkah pertama bikin form index.php

Selanjutnya bikin form cari.php

Untuk tablenya saya rasa lebih baik bikin sendiri ini hanya untuk queryna saja.
namanya juga belajar harus ada tantangannya.

Friday, February 1, 2013

Mengatur format tulisan di Dreamweaver

mengatur format <a href=tulisan dengan dreamweaver" />
Mungkin masih ada yang bingung cara pengoperasian serta fungsi property bar untuk tulisan yang ada pada dreamweaver. Pada tutorial berikut ini saya akan menjelaskan langkah-langkah untuk membuat tulisan serta cara mengaturnya dengan dreamweaver.
Langkah pertama buatlah tulisan pada area kerja dreamweaver.
membuat tulisan
Kemudian tulisannya dipilih semua
memilih tulisan
kemudian lihat pada bagian property bar yang ada pada bagian bawah.
property bar
Property bar seperti gambar diatas, digunakan untuk mengatur semua objek yang kita sudah pilih di area kerja.
Di Property bar tersedia banyak pilihan yaitu :
  1. Format 
    pilihan format
    Bagian ini digunakan untuk mengatur format tulisan dengan pilihan paragraf (<p>), heading 1 (<h1>..</h1>) s/d heading 6 (<h6>..<h6>) dan preformatted (untuk menampilkan jeniskode)
  2. Font dan Size
    jenis tulisan
    Font digunakan untuk mengatur jenis tulisan, sedangkan size untuk ukuran tulisannya.
  3. Style
    pilihan style
    Ini digunakan untuk mengatur objek tulisan sesuai dengan css yang sudah dibuat. Pada bagian ini kita juga bisa menyisipkan style eksternal yang ada di file css lain.
  4. Warna, posisi tulisan
    warna dan posisi tulisan
    Bagian ini digunakan untuk mengatur warna tulisan, tebal dan miring tulisan, pengaturan rata kiri, rata tengah, kanan dan rata kiri kanan (justify). Pada bagian kanan bawahnya jga ada fasilitas untuk membuat list item dengan simbol atau angka. Kemudian mengatur tulisan masuk ke kanan dan ke kiri. Dan terakhir dibagian gambar terlihat page properties yang digunakan untuk mengatur tampilan halaman secara keseluruhan.
 Sekarang pilih salah satunya, misal kita pilih heading 1 untuk megatur tulisan menjadi heading yang biasanya dibuat untuk judul halaman, kemudian pilih warnanya. Hasilnya :
hasil tulisan
Anda bisa coba fasilitas yang lain seperti paragraf, heading, pilihan font/bentuk tulisan serta tombol lainya.
Semoga bermanfaat

Membuat menu dropdown dengan css

Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.
Oke langsung saja langkah-langkanya sebagai berikut :
Membuat susunan list menu untuk  dropdown dalam html, kodenya berikut ini :
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#11">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#21">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    <li><a href="#23">Sub Menu 3</a></li>
    <li><a href="#24">Sub Menu 4</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#31">Sub Menu 1</a></li>
    <li><a href="#32">Sub Menu 2</a></li>
    <li><a href="#33">Sub Menu 3</a></li>
    <li><a href="#34">Sub Menu 4</a></li>
    </ul>
</li>
</ul>
Dari kode html tersebut akan dihasilkan sementara tampilan seperti berikut :
membuat dropdown
Kemudian kita buat kode css berikut, dengan menambahkannya pada bagian <head>..</head>
<style type="text/css">
.dropmenu {
    background: #616161;
    height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 1px white;
    float: left;
    height: 30px;
}
.dropmenu li a {
    color: #fff;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
    background-color: #3f4a54;
    border: 1px solid grey;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #778899;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: silver;
    border: solid 1px #444;
    color: #000;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>

Dari kode-kode tersebut maka akan dihasilkan tampilan seperti berikut :
membuat dropdown
Ini hasilnya, coba anda arahkan pilihan ke menu dibawah ini :

Menu ini sudah saya test menggunakan firefox, google chrome, dan internet explorer. Semuanya bisa berjalan dengan normal yang artinya menu dropdown yang dibuat dengan css lebih kompatibel dan lebih ringan jika ditampilkan.
Gimana, mudah kan?? Ada masukan, komentar atau pertanyaan silahkan kirimkan melalui box komentar dibawah.
Semoga Bermanfaat

Sunday, December 2, 2012

Cara Membuat CSS Versi ILMU BLOGGER

Dalam pelajaran ini Anda akan membuat stylesheet pertama Anda / style sheet. Anda akan mempelajari dasar-dasar CSS dan model dasar yang kode apa yang harus digunakan untuk CSS dalam dokumen HTML.

Banyak sifat yang digunakan dalam Cascading Style Sheets (CSS), mirip dengan HTML. Jadi, jika Anda menggunakan HTML untuk desain halaman, Anda mungkin tahu, banyak kode. Mari kita lihat contoh konkret.

Sintaks dasar dari CSS

Katakanlah kita membutuhkan warna latar belakang merah:

Dalam HTML, Anda dapat melakukannya dengan cara ini:

<body bgcolor="#FF0000">

Dengan CSS hasil yang sama dapat dicapai sebagai berikut:

body {background- color: # FF0000;}

Seperti yang anda lihat, kode-kode ini lebih atau kurang identik dengan HTML dan CSS. Contoh ini juga memperlihatkan mendasar Model CSS:

selector {propery: value;}

selector (pemilih) - untuk setiap tag HTML (tag) menggunakan properti (tubuh misalnya)
property (properti) - properti yang, misalnya bisa menjadi warna latar belakang (background-color)
value (nilai) - nilai warna latar belakang properti dapat berupa, misalnya merah (# FF0000)

Tapi di mana untuk menempatkan kode-CSS? Itu adalah masalah yang akan kita lakukan sekarang.

Menerapkan CSS untuk HTML-dokumen

Ada tiga cara untuk menerapkan aturan CSS ke HTML-dokumen. Di bawah ini kita mempertimbangkan tiga metode. Kami menyarankan fokus pada ketiga - yaitu, asing / stylesheet eksternal.

Metode 1: Inline / In-line (gaya atribut)

Anda dapat menerapkan CSS ke HTML menggunakan gaya HTML-atribut. Warna latar belakang merah dapat diatur sebagai berikut:

<html>
<head>
<title>Example</ title>
</head>
<body>
<p> Ini adalah halaman merah </p>
</Body>
</Html>

Metode 2: Internal (gaya tag)

Cara kedua untuk memasukkan kode-CSS - HTML-tag <style>. Sebagai contoh:

<html>
<head>
<title>Example</ title>
<style>
body {background- color: # FF0000;}
</Style>
</head>
<body>
<p> Ini adalah halaman merah </p>
</Body>
</Html>

Metode 3: Eksternal (link ke stylesheet)

Metode yang disarankan - membuat referensi ke style sheet disebut eksternal. Dalam tutorial ini kita akan menggunakan metode ini dalam semua contoh.

style sheet eksternal hanyalah sebuah file teks dengan ekstensi. Css. Anda dapat membuat style sheet langsung pada situs Anda.

Misalnya, stylesheet Anda disebut style.css dan terletak di folder style.

Caranya adalah dengan membuat link dari dokumen-HTML (index.html) pada stylesheet ( style.css ) .

Hal ini dapat dilakukan dalam kode HTML baris tunggal:

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

Perhatikan bagaimana href menjalankan stylesheet atribut Anda.

Baris kode ini untuk menyisipkan di header bagian HTML, yaitu, antara <head> dan </ head>. Sebagai contoh: br>
<html>
<head>
<title> dokumen Saya </title>
<link/>
</head>
<body>
...

Link ini memberitahu browser bahwa harus menggunakan aturan tampilan file HTML dari berkas-CSS.

Yang paling penting di sini adalah bahwa beberapa HTML- dokumen dapat merujuk kepada satu stylesheet. Dengan kata lain, salah satu CSS-file dapat digunakan untuk mengontrol tampilan dari himpunan-dokumen HTML. Artinya, perubahan dalam satu file style sheet eksternal mempengaruhi semua HTML-dokumen, kotoryeh dihubungkan.

Hal ini dapat menghemat banyak waktu dan usaha. Jika, misalnya, ingin mengubah warna latar belakang 100 halaman situs, stylesheet menyelamatkan Anda dari harus mengubah secara manual seratus HTML- dokumen. Menggunakan CSS, perubahan ini dapat dilakukan dalam beberapa detik, hanya dengan mengubah satu kode pada style sheet pusat.

Mari kita lihat bagaimana melakukannya. Cobalah sendiri.

Dibuat file style.css dan menggunakan by-line editor, masukkan sebagai berikut:

body {
background-color: # FF0000;
}

Buka Blok Editor, pilih "Edit" di wExplorer pada file index.html (jika tidak ada itu Anda harus membuat). Kemudian pilih Edit Header dan dalam "URL File dengan CSS-gaya" masukkan "style.css";

Dalam editor, sepanjang garis dari file index.html akan menjadi seperti berikut:

<html>
<head>
<title> index.html </title>
<link/>
</head>
<body>
<b> stylesheet pertama saya </b>
</Body>
</Html>

Kedua file (index.html dan style.css) dalam kasus kami harus berada dalam satu folder.

Pilih "View" pada editor, atau ketik alamat lengkap dari halaman Anda dengan nama situs pada browser Anda dan Anda akan melihat Halaman yang memiliki latar belakang merah. Selamat! Anda telah membuat style sheet pertama Anda!

Bacalah pelajaran berikutnya, di mana kita melihat beberapa sifat dari CSS.

Thursday, November 22, 2012

Mendesain WEB dengan ARTISTEER

Seperti yang biasa kita lakukan, untuk memiliki sebuah template kita bisa mencarinya di internet. Banyak situs-situs yang menyediakan template blogger baik yang berbayar maupun yang gratis. Tapi, kita akan banyak mendapat masalah jika kita menggunakan yang gratis. Kebanyakan template yang gratis tak sesuai dengan selera kita. Dan karena tidak sesuai itulah kita pasti mencoba untuk memodifikasi template tersebut.

Tapi, apakah mudah memodifikasi template blogger? Tentu tidak bukan. Secara manualnya aja, kita harus punya koneksi ke internet yang bagus untuk menggonta ganti tampilan template blog kita. Kita harus punya skill CSS dan HTML yang baik pula untuk melakukan semua itu. Hahh (–_+’) ,, lama jadinya bukan..



Nah, pada postingan kali ini saya ingin memberi solusi bagaimana memodifikasi template blog blogger dengan mudah secara offline dan tanpa perlu skill CSS dan HTML yang baik. Kita menggunakan SOFTWARE. Dengan software ini, kita bebas berkreasi sesuai dengan kesukaan kita tanpa perlu online. Pokonya mudah banget. Software ini namanya Artisteer.

WHAT IS EXACTLY ARTISTEER?

Artisteer adalah sebuah software yang dirancang khusus untuk memudahkan pekerjaan para blogger merancang maupun memodifikasi sebuah template. Artisteer adalah software yang compatible untuk berbagai blog editor. Di antaranya: Blogger, Wordpress, Joomla, Drupal, dan DotNetNuke. Kita juga dapat merancang sebuah template HTML untuk hosting sendiri.

WHAT ARE THE FEATURES OF ARTISTEER?

Hingga saat ini, artisteer masih merupakan software perancang template terbaik yang pernah ada. Mungkin, hal ini disebabkan oleh kelengkapan fitur dari software ini sendiri. Saya sendiri yang sudah mencoba software ini akan bilang, “Ini software luar biasa punya!”. Bagi seorang blogger yang sudah memiliki software ini, berani jamin akan merasakan kemudahan dalam merancang sebuah template.

Berikut ini merupakan fitur-fitur yang dimiliki oleh artisteer template designer :

1. Kemudahan merancang template untuk berbagai blog editor.

2. Memiliki menu-menu yang akan membuat kita leluasa untuk mengedit setiap bagian dari template. Mulai mengedit Header hingga ke footer. Di sana sudah termasuk mengedit tampilan blackquote dan tabel serta button. Bayangin, sampai merancang tampilan yang ke hal kecilnya aja bisa dilakukan oleh software pintar ini.

Untuk lebih jelasnya lihat screenshot menu-menu yang ada di artisteertemplate designer berikut ini: ( Klik untuk memperbesar )

artisteer software perancang template

Pada gambar di atas, saya ambil ketika sedang membuka menu Ideas. Look at the picture carefuly! Menu Ideas aja punya submenu sebanyak itu, belum lagi menu yang lain. Bayangin, betapa banyak hal yang dapat kita lakukan dengan menu-menu yang ada di software perancang template artisteer ini. Ibarat kalau sobat bekerja dengan Microsoft Word, seperti itulah kalau kita bekerja di software yang satu ini. Apa-apa yang tampil seperti apa-apa yang telah dibuat. Karena, makin Banyak menu, makin banyak mudah :-D . Makanya jangan heran kalau software ini beratnya minta ampun.

3. Kita dapat mengatur sendiri dimana setiap gambar yang digunakan template dihosting

4. Kita dapat melakukan preview template pada browser-browser berikut :
- Internet Explorer ( Ctrl + Shift + I )
- Mozilla ( Ctrl + Shift + M )
- Chrome ( Ctrl + Shift + C )
- Opera ( Ctrl + Shift + O )
- Safari ( Ctrl + Shift + S )

5. Banyak lagi hal lain yang bisa sobat cobain. Pokoknya, mwanteb dech..


Bagaimana dengan review Raffkhan mengenai software perancang template blog Artisteer ini? Apakah sobat tertarik untuk mencobanya? Jika tertarik, silahkan mendownload aja melalui link di bawah ini.

ARTISTEER


type: application
size: 76,3 MB

Maka, sobat akan langsung dibawa ke situs artisteer. Sobat dapat mendownloadnya secara gratis. Boleh juga membayar. Semua tergantung sobat. Sobat juga akan tahu sendiri nanti. dan klo sobat juga tidak sanggup untuk membeli software yg lumayan mahal ini, sobat semua juga bs mendownload keygennya disini,,, hehehe,,, ssssstttt tp jangan jgn blg siapa-siapa yah,, ilegal ne,, oke deh lanjut aja kalo enggak sabar lagi,, silah kan donwload disini.... keygen. kata-kuncinya : 123456

Untuk mempermudah proses pendownloadan, saya menyarankan sobat untuk mendownload software ini dengan menggunakan IDM ( Internet Download Manager ) , boleh juga dengan DAP (Download Accelarator Plus). Tidak lupa juga agar mendownloadnya di warnet yang koneksinya baik.

Salam blogger dan selamat berkreasi dengan software perancang template ini.
luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com