Your mind is Your Weapon

Kamis, 06 Juni 2013

Atraktif Dengan CSS

Kalau di ibaratkan, CSS ( Cascading Style Sheets ) adalah make-up, pemanis yang ,mempercantik sebuah halaman web, sebuah website dengan isi berbobot mungkin akan kurang peminatnya jika tampilannya biasa-biasa saja.
CSS sendiri bisa di artikan suatu kumpulan kode-kode untuk mengatur format atau tampilan suatu halaman HTML. CSS digunakan untuk mengumpulkan suatu blok perintah pemformatan yang sering dilakukan berulang-ulang sehingga dapat mempercepat proses kerja pendesainan halaman web. CSS dapat juga digunakan untuk membuat efek-efek dinamis dan atraktif yang tidak mungkin dilakukan oleh HTML biasa. Sejak pertama kali di publikasikan pada tahun 1996, CSS sudah mengalami perkembangan dari CSS 1 sampai yang terbaru yaitu CSS 3.
Kekurangan atau kelemahan dari penggunaan CSS adalah tidak semua browser mengartikan kode CSS dengan cara yang sama, artinya tampilan web dengan CSS yang terlihat baik di browser yang satu, bisa terlihat berantakan di browser lainnya. Jadi kita harus memeriksa tampilan web di semua browser untuk memeriksa tampilan agar terlihat baik dan menambahkan kode-kode tertentu jika dibutuhkan agar tampilan web terlihat baik di semua browser.

Syntax CSS.

Syntax/perintah dalam CSS terdiri atas selector, property dan value.

Format penulisan syntax CSS :

h2 { color : green; }

h2 dari syntax di atas adalah selector, color adalah property dan green adalah valuenya.

Untuk menggunakan CSS ada beberapa cara yang bisa dilakukan antara lain :

a. Inline CSS.

Kode CSS dituliskan langsung dengan menambahkan atribut style=”..” pada tag tersebut. Style hanya akan mempengaruhi tag yang bersangkutan dan tidak mempengaruhi tag lainnya. Cara ini dilakukan jika kita ingin memformat suatu elemen satu kali saja.

Kode:

Hasilnya:

b. Embedded CSS.

Kode CSS di letakkan di antara tag <head>...</head>

Contoh : Kode:

save kode di atas, jalankan di browser

c. Ekternal CSS.

Kode CSS di tulis dalam satu file terpisah dengan ekstensi *.css, yang kemudian akan kita panggil ke dalam halaman web yang yang kita buat. Cara ini lebih praktis karena kita hanya membutuhkan satu set kode CSS untuk semua halaman web kita. Langkah-langkahnya sebagai berikut:

-Buatlah satu file dengan text editor (notepad, notepad++ dll) berisakan kode-kode CSS,lalu save as dengan ekstensi .css, misalnya meong.css

kode:

body {background:#a5f962; color:#FFFF00;

margin-left:0.5in}

h1 {font-size:18pt; color:#000fff}

p {font-size:12pt; font-family:arial;

color:red; text-indent:0.5in}

Langkah selanjutnya adalah memanggil file meong.css yang telah kita buat tadi dari halaman web yang akan kita format. Caranya adalah dengan memasukkan kode dibawah ini di antara tag <head>

kjalankan dibrowser dan liat hasilnya.

Class dan ID selector

Class selector adalah selector yang dapat di gunakan oleh lebih dari satu tag HTML, artinya beberapa tag HTML bisa menggunakan css dari class tersebut. Contohnya :

Kode CSS:

.tulisan{

font-size:17px;

color=blue;

}

Penggunaan pada HTML:

<h1 class=”tulisan”> contoh class selector</h1>

<div class=”tulisan”>ini juga contoh class selector</div>

Sedangkan ID selector adalah selector yang hanya digunakan untuk satu tag HTML saja, biasanya digunakan untuk memformat tag HTML yang kegunanannya hanya sekali saja, misalnya header,wrapper,menu navigasi dan lain-lain.

Kode CSS:

#header {

background-color:green;

width:900px;

height:50px;

}

Penggunaan pada HTML

Selasa, 04 Juni 2013

Edit dan Hapus Data dari Database dengan PHP

Kali ini kita akan membahas tentang cara mengedit dan menghapus data yang ada di database MySQL dengan menggunakan PHP. Untuk itu kita perlu sedikit mengubah file tampil_data.php yang kita gunakan pada tutorial sebelumnya ( Menampilkan Data dari Database dengan PHP ).
Perhatikan perubahan kode yang berada dalam kotak merah:

Hasilnya akan terlihat seperti gambar dibawah ini :

Selanjutnya kita akan membuat file yang bernama ubah_data.php yang berfungsi untuk mengedit data dan hapus_data.php yang berfungsi untuk menghapus data yang tersimpan dalam database.

a. ubah_data.php

/*==============Code======================*/

<?php

author :Didon Pramatawa

blog :donprama.blogspot.com

//koneksi ke database

$server = 'localhost';

$username = 'root';

$password = '';

$database = 'belajar';

$koneksi=mysql_pconnect ($server,$username,$password) or die ('Koneksi Gagal !');

mysql_select_db ($database) or die ('Database tidak bisa dibuka');

//mengambil data dari database yang ingin di ubah

$id=$_GET['id'];

$sql=mysql_query("SELECT * FROM tb_data WHERE id='$id' ");

$data=mysql_fetch_array($sql);

//proses mengupdate data

if (isset($_POST['submit']))

{

$judul=$_POST['judul'];

$isi=$_POST['isi'];

$ubah=mysql_query("UPDATE tb_data SET

judul='$judul',

isi='$isi' WHERE id='$id' ");

//untuk mengetahui apakah data berhasil di ubah atau tidak

if($ubah)

{

echo "<script language=javascript>alert('Berhasil');</script>";

print '<meta http-equiv=refresh content=1;url=tampil_data.php>';

}

else

{

echo "<script language=javascript>alert('gagal');</script>";

print '<meta http-equiv=refresh content=1;url=tampil_data.php>';

}

<html>

<body>

<tr>

</tr>

<tr>

<td>Judul</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</body>

</html>

/*=============EndOfCode============================*/

b. Hapus_data.php

/*==============Code======================*/

<?php

author :Didon Pramatawa

blog :donprama.blogspot.com

//koneksi ke database

$server = 'localhost';

$username = 'root';

$password = '';

$database = 'belajar';

$koneksi=mysql_pconnect ($server,$username,$password) or die ('Koneksi Gagal !');

mysql_select_db ($database) or die ('Database tidak bisa dibuka');

//mengambil data dari database yang ingin dihapus

$id=$_GET['id'];

$sql=mysql_query("DELETE from tb_data WHERE id='$id' ");

if ($sql)

{

echo "<script language=javascript>alert('Berhasil');</script>";

print '<meta http-equiv=refresh content=1;url=tampil_data.php>';

}

else

{

echo "<script language=javascript>alert('gagal');</script>";

print '<meta http-equiv=refresh content=1;url=tampil_data.php>';

}

/*=============EndOfCode============================*/

Coba jalankan kedua script diatas dengan menklik masing-masing linknya.

Senin, 03 Juni 2013

Menampilkan Data dari Database dengan PHP

Tutorial kali ini akan membahas bagaimana menampilkan data yang telah kita simpan di database menggunakan PHP. (untuk teknik menyimpan data ke dalam database silahkan membaca artikel ini). Database yang kita gunakan masih sama dengan database yang kita buat pada tutorial sebelumnya.
Buka editor kesayangan anda lalu tulislah kode-kode dibawah ini..

/*=====================Code============================*/
<?php
/*
author :Didon Pramatawa
blog :donprama.blogspot.com
*/
//koneksi ke database
$server = 'localhost';
$username = 'root';
$password = '';
$database = 'belajar';
$koneksi=mysql_pconnect ($server,$username,$password) or die ('Koneksi Gagal !');
mysql_select_db ($database) or die ('Database tidak bisa dibuka');

//proses menampilkan data
$sql=mysql_query("SELECT * FROM tb_data ORDER by id ASC");

//memeriksa apakah ada data dalam tabel td_data
$cek=mysql_num_rows($sql);
if($cek==0)
{
echo "tidak ada data";
}
else
{
echo " <table border=1 align=center>
<tr>
<td>Judul</td>
<td>Isi</td>
</tr>";
while ($data=mysql_fetch_array($sql))
{
?>
<tr>
<td><?php echo $data['judul'];?></td>
<td><?php echo $data['isi'];?></td>
</tr>
<?php
}
}
echo "</table>";
?>
/*==================EndOfCode=======================*/

Save as tampil_data.php lalu buka dengan browser "localhost/belajar/tampil_data.php"
hasilnya akan terlihat seperti gambar di bawah ini