Tutorial CSS Dasar

Penulis : DIKNI BLOG on Thursday 26 February 2015 | 18:06

Thursday 26 February 2015

Tutorial CSS Dasar

Sebelum mempelajari CSS anda harus mengetahui HTML DASAR terlebih dahulu . CSS singkatan dari Cascading Style Sheet . CSS merupakan sebuah bahasa pemrograman yang fungsinya untuk menstrukturkan komponen-komponen web yang beragam sesuai dengan keinginan kita .

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).

Selector adalah HTML element yang ingin dibuat style nya.

Declaration merupakan isi dari property dan nilai dari CSS.

Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )

Contoh CSS
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :

p {color:red;text-align:center;}

CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″

#para1
{
text-align:center;
color:red;
}

nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox

Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .

Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :

.center {text-align:center;}

kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :

p.center {text-align:center;}

nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.

Cara CSS

Tiga Cara untuk Insert CSS :

1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>

dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :

hr {color:sienna;}

p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}

nb: JANGAN meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.

2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :

<head>
<style type=”text/css”>

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>

</head>

3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

4. Multiple Style Sheet

Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.

contoh style sheet eksternal untuk pemilih h3 :

h3
{
color:red;
text-align:left;
font-size:8pt;
}

contoh style sheet internal untuk pemilih h3 :

h3
{
text-align:right;
font-size:20pt;
}

Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
text-align:right;
font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.

Beberapa Styles Akan Cascade ke Satu :
gaya dapat ditentukan :

didalam sebuah elemen HTML
didalam bagian kepala halaman HTML
didalam sebuahj file CSS eksternal

Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:

Browser default
Eksternal style sheet
Internal style sheet (di bagian kepala)
Inline style (di dalam elemen HTML)

Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).

nb: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!

comments | CSS | Read More...

Cara membuat menu drop down select dengan php

kali ini saya akan sedikit memberi tahu tentang bagaimana cara membuat menu drop down dengan php.

maksudnya bila drop down <select> kaya gini

Kalo dalam html kita harus mengetik
<select>
       <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
</select>

Tentu kita kerepotan bila angka option yang kita butuhkan lebih banyak bisa ratusan bahkan ribuan.
ratusan pula kita harus membuat <option>

maka dari itu mari kita gunakan php
berikut adalah kode php untuk select drop down dari 1 sampai 100

<select name="drop">

      <option value="">-------Judul drop------</option>

     <?php for($i=1;$i<=100;$i++){

       echo" <option>$i</option>";

       } ?>

</select>

hasil:

kalo buat input select tahun tinngal gannti ajah angka 1 menjadi tahun yang diinginkan sebagai awal tahun dan ganti juga 100 sebagai akhir tahun inputan
Contoh:

<select name="tahun">

      <option value="">-------pilih tahun------</option>

     <?php for($i=1970;$i<=2050;$i++){

       echo" <option>$i</option>";

       } ?>

</select>

Hasilnya :

Selesai.........!!!! mudahkan.

comments (1) | PHP | Read More...

Cara membuat auto complete dengan PHP PDO

Cara membuat input text Auto complete dengan php PDO,
Hal ini memudahkan kita untuk menginput sesuai dengan nama yang ada di database
baiknya cara ini sudah PDO Extension maka Suport ke tingkat php yang lebih tinggi , misal php 5.5.5 dan ke atas yang katanya akan menghpus Extension mysql_connect

Baiklah kita lihat layar tembaknya di bawah ini:

Baiklahhh kalian bisa download Filenya dengan databasenya di

comments | PHP | Read More...

CRUD PHP PDO dengan MYSQL

Hay Kawan saya akan berbagi pengetahuan tentang bagai mana cara membuat CRUD create,read,update,delete Mysql dengan php PDO.

pertama hal yang dibutuhkan adalah mengaktifkan Apache dan mysql, cukup untuk mengaktifkan Wamp server atau Xammp.

Buatlah database dengan nama yang sesuai dengan ke inginan anda atau anda bisa mendownload backup database saya di Akhir postingan ini lengkap dengan file php pdonya.

pertama buatlah database dengan nama pdo_ret
lalu buat table bernama members
seperti contoh dibawah ini.

CREATE TABLE IF NOT EXISTS `members` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`fname` varchar(100) NOT NULL,
`lname` varchar(100) NOT NULL,
`age` int(5) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Isi lah dulu table table tersebut.

Buat koneksi database dengan php kita buat file php dengan nama connect.php
dan isi file connect.php seperti dibawah ini.

<?php
$db_host        = 'localhost';
$db_user        = 'root';
$db_pass        = '';
$db_database    = 'pdo_ret';

$db = new PDO('mysql:host='.$db_host.';dbname='.$db_database, $db_user, $db_pass);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>

lalu buatlah file php dengan nama index.php
isikan file dengan kode di bawah ini sekaligus dengan CSSNya yah.

<style>
table { border-collapse: separate; background-color: #FFFFFF; border-spacing: 0; width: 50%; color: #666666; text-shadow: 0 1px 0 #FFFFFF; border: 1px solid #CCCCCC; box-shadow: 0; margin: 0 auto; }
table thead tr th { background: none repeat scroll 0 0 #EEEEEE; color: #222222; padding: 10px 14px; text-align: left; border-top: 0 none; font-size: 12px; }
table tbody tr td{
    background-color: #FFFFFF;
    font-size: 11px;
    text-align: left;
    padding: 10px 14px;
    border-top: 1px solid #DDDDDD;
}
#pagination {
    text-align: center;
    margin-top: 20px;
}
#pagination a {
    border: 1px solid #CCCCCC;
    padding: 5px 10px;
    font-family: arial;
    text-decoration: none;
    background: none repeat scroll 0 0 #EEEEEE;
    color: #222222;
}
#pagination a:hover {
    background-color: #FFFFFF;
}
a#active{
    background-color: #FFFFFF;
}
#sample thead tr th {
    font-size: 20px;
}
input {
    border: 1px solid #CCCCCC;
}
#secret {
    margin-top: 19px; width: 168px;
}
</style>
<?php
session_start();
?>
<?php
if( isset($_SESSION['ERRMSG_ARR']) && is_array($_SESSION['ERRMSG_ARR']) && count($_SESSION['ERRMSG_ARR']) >0 ) {
    echo '<ul style="padding:0; color:red;">';
    foreach($_SESSION['ERRMSG_ARR'] as $msg) {
        echo '<li>',$msg,'</li>';
    }
    echo '</ul>';
    unset($_SESSION['ERRMSG_ARR']);
}
?>
<form action="reg.php" method="POST" style="width: 50%; margin: 15px auto; height: 54px;">
<div style="float:left;width:25%;">
First Name<br>
<input type="text" name="fname" />
</div>
<div style="float:left;width:25%;">
Last Name<br>
<input type="text" name="lname" />
</div>
<div style="float:left;width:25%;">
Age<br>
<input type="text" name="age" />
</div>
<div style="float:left;width:25%;">
<input type="submit" value="Save" id="secret" />
</div>
</form>
<table cellspacing="0" cellpadding="2" id="sample" >
<thead>
    <tr>
        <th> First Name </th>
        <th> Last Name </th>
        <th> Age </th>
        <th> Action </th>
    </tr>
</thead>
<tbody>
    <?php
        include('connect.php');
        if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
        $start_from = ($page-1) * 6;
        $result = $db->prepare("SELECT * FROM members ORDER BY id ASC LIMIT $start_from, 6");
        $result->execute();
        for($i=0; $row = $result->fetch(); $i++){
    ?>
    <tr class="record">
        <td><?php echo $row['fname']; ?></td>
        <td><?php echo $row['lname']; ?></td>
        <td><?php echo $row['age']; ?></td>
        <td><a href="editform.php?id=<?php echo $row['id']; ?>"> edit </a> | <a href="delete.php?id=<?php echo $row['id']; ?>"> delete </a></td>
    </tr>
    <?php
        }
    ?>
</tbody>
</table>
<div id="pagination">
    <?php

    $result = $db->prepare("SELECT COUNT(id) FROM members");
    $result->execute();
    $row = $result->fetch();
    $total_records = $row[0];
    $total_pages = ceil($total_records / 6);

    for ($i=1; $i<=$total_pages; $i++) {
                echo "<a href='index.php?page=".$i."'";
                if($page==$i)
                {
                echo "id=active";
                }
                echo ">";
                echo "".$i."</a> ";
    };
    ?>
</div>

dan buat juga proses untuk menambahnya beri nama dengan reg.php

<?php
session_start();
$errmsg_arr = array();
$errflag = false;
// configuration
$dbhost    = "localhost";
$dbname       = "pdo_ret";
$dbuser       = "root";
$dbpass       = "";

// database connection
$conn = new PDO("mysql:host=$dbhost;dbname=$dbname",$dbuser,$dbpass);

// new data

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$age = $_POST['age'];

if($fname == '') {
    $errmsg_arr[] = 'You must enter your First Name';
    $errflag = true;
}
if($lname == '') {
    $errmsg_arr[] = 'You must enter your Last Name';
    $errflag = true;
}
if($age == '') {
    $errmsg_arr[] = 'You must enter your Age';
    $errflag = true;
}
if($errflag) {
    $_SESSION['ERRMSG_ARR'] = $errmsg_arr;
    session_write_close();
    header("location: index.php");
    exit();
}
// query
$sql = "INSERT INTO members (fname,lname,age) VALUES (:sas,:asas,:asafs)";
$q = $conn->prepare($sql);
$q->execute(array(':sas'=>$fname,':asas'=>$lname,':asafs'=>$age));
header("location: index.php");

?>

buat lagi file php dengan nama editform.php

<?php
    include('connect.php');
    $id=$_GET['id'];
    $result = $db->prepare("SELECT * FROM members WHERE id= :userid");
    $result->bindParam(':userid', $id);
    $result->execute();
    for($i=0; $row = $result->fetch(); $i++){
?>
<form action="edit.php" method="POST">
<input type="hidden" name="memids" value="<?php echo $id; ?>" />
First Name<br>
<input type="text" name="fname" value="<?php echo $row['fname']; ?>" /><br>
Last Name<br>
<input type="text" name="lname" value="<?php echo $row['lname']; ?>" /><br>
Age<br>
<input type="text" name="age" value="<?php echo $row['age']; ?>" /><br>
<input type="submit" value="Save" />
</form>
<?php
    }
?>

Untuk proses editnya buat file dengan nama edit.php
<?php
// configuration
include('connect.php');

// new data
$lname = $_POST['lname'];
$fname = $_POST['fname'];
$age = $_POST['age'];
$id = $_POST['memids'];
// query
$sql = "UPDATE members
        SET fname=?, lname=?, age=?
        WHERE id=?";
$q = $db->prepare($sql);
$q->execute(array($fname,$lname,$age,$id));
header("location: index.php");

?>

Untuk menghapus buat lagi file delete.php

<?php
    include('connect.php');
    $id=$_GET['id'];
    $result = $db->prepare("DELETE FROM members WHERE id= :memid");
    $result->bindParam(':memid', $id);
    $result->execute();
    header("location: index.php");
?>

selesai maka anda sudah membuat CRUD php PDO dengan mysql.
Jika anda masih gagal terus saya juga melampirkan filenya juga bisa di download di
disini

comments | PHP | Read More...

Belajar Bahasa Pemrograman PHP

Penulis : DIKNI BLOG on Wednesday 25 February 2015 | 23:06

Wednesday 25 February 2015

Pengertian PHP

PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum (wikipedia). PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.
PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).
Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla, dll.
Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.
PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public License (GPL) yang biasa digunakan untuk proyek Open Source.
Kemudahan dan kepopuleran PHP sudah menjadi standar bagi programmer web di seluruh dunia. Menurut wikipedia pada februari 2014, sekitar 82% dari web server di dunia menggunakan PHP. PHP juga menjadi dasar dari aplikasi CMS (Content Management System) populer seperti Joomla, Drupal, dan WordPress.
Dikutip dari situs w3techs.com, (diakses pada 18 Desember 2014), berikut adalah market share penggunaan bahasa pemrograman server-side untuk mayoritas website di seluruh dunia :

Dapat dilihat dari tampilan diatas bahwa mayoritas website modern saat ini menggunakan PHP.

Fungsi PHP Dalam Pemrograman Web

Untuk membuat halaman web, sebenarnya PHP bukanlah bahasa pemrograman yang wajib digunakan. Kita bisa saja membuat website hanya menggunakan HTML saja. Web yang dihasilkan dengan HTML (dan CSS) ini dikenal dengan website statis, dimana konten dan halaman web bersifat tetap.
Sebagai perbandingan, website dinamis yang bisa dibuat menggunakan PHP adalah situs web yang bisa menyesuaikan tampilan konten tergantung situasi. Website dinamis juga bisa menyimpan data ke dalam database, membuat halaman yang berubah-ubah sesuai input dari user, memproses form, dll.
Untuk pembuatan web, kode PHP biasanya di sisipkan kedalam dokumen HTML. Karena fitur inilah PHP disebut juga sebagai Scripting Language atau bahasa pemrograman script.
Sebagai contoh penggunaan PHP, misalkan kita ingin membuat list dari nomor 1 sampai nomor 10. Dengan menggunakan HTML murni, kita bisa membuatnya secara manual seperti kode berikut ini:

<!DOCTYPE html>
<html>
   <head>
      <title>Contoh list dengan HTML</title>
   </head>
<body>
<h2>Daftar Absensi Mahasiswa</h2>
   <ol>
      <li>Nama Mahasiswa ke-1</li>
      <li>Nama Mahasiswa ke-2</li>
      <li>Nama Mahasiswa ke-3</li>
      <li>Nama Mahasiswa ke-4</li>
      <li>Nama Mahasiswa ke-5</li>
      <li>Nama Mahasiswa ke-6</li>
      <li>Nama Mahasiswa ke-7</li>
      <li>Nama Mahasiswa ke-8</li>
      <li>Nama Mahasiswa ke-9</li>
      <li>Nama Mahasiswa ke-10</li>
   </ol>
</body>
</html>

Halaman HTML tersebut dapat dibuat dengan mudah dengan cara men-copy-paste tag <li> sebanyak 10 kali dan mengubah sedikit angka-angka no urut di belakangnya. Namun jika yang kita inginkan adalah menambahkan list tersebut menjadi 100 atau 1000 list, cara copy-paste tersebut menjadi tidak efektif.
Jika menggunakan PHP, kita tinggal membuat perulangan for sebanyak 1000 kali dengan perintah yang lebih singkat seperti berikut ini:

<!DOCTYPE html>
<html>
   <head>
      <title>Contoh list dengan PHP</title>
   </head>
<body>
<h2>Daftar Absensi Mahasiswa</h2>
   <ol>
      <?php
      for ($i= 1; $i <= 1000; $i++) 
         {
            echo "<li>Nama Mahasiswa ke-$i</li>";
         }
      ?>
   </ol
</body>
</html>

Dengan menggunakan kode baris yang bahkan lebih sedikit, kita dapat membuat list tersebut menjadi 1000 kali, bahkan 100.000 kali dengan hanya mengubah sebuah variabel $i.
PHP tidak hanya dapat melakukan pengulangan tersebut, masih banyak hal lain yang bisa kita lakukan dengan PHP, seperti menginput data ke database, menghasilkan gambar, menkonversi halaman text menjadi PDF, management cookie dan session, dan hal lainnya yang akan kita pelajari di dalam tutorial belajar PHP di duniailkom.

Dalam tutorial PHP kali ini, kita telah mempelajari pengertian PHP, dan fungsi PHP dalam pembuatan website. Pada tutorial selanjutnya kita akan membahas tentang sejarah PHP dan perkembangan versinya, dari awal kemunculannya pada tahun 1994, hingga menjadi salah satu bahasa pemrograman paling populer saat ini.

comments (1) | PHP | Read More...

Belajar HTML Dasar

Dalam bahasa pemrograman WEB ada yang disebut dengan istilah TAG Tag adalah bagian dimana elemen dalam bahasa pemrograman web memiliki pembuka dan penutup. pembuka dalam dokumen menandakan bahwa elemen itu dimulai dan penutup menandakan bahwa elemen itu di tutup. sebagai contoh tag pembuka html adalah <html> dan tag penutupnya adalah </html>.

ketikan kode ini di utiliti web programming contohnya:

Notepad
Notepad + +
Dreamweaver
Netbeans
dan lain sebagainya..
berikut adalah pembangun dari dokumen html. dan tag penutupnya adalah

<html>
<head>
<title>Disini bagian Judul WEB</title>
</head>
<body>
Disini bagian isi dokumen HTML....!
</body>
</html>

pengertian dari kode di atas.
<html> = Menandakan bahwa bahasa yang digunakan adalah bahasa html
<head> = bagian kepala dari halama web .
<title> = Bagian judul dari halaman web yang nantinya akan muncul di TAB brouser anda.
<body> = adalah bagian isi dari sebuah halaman web.

dan yang </html> itu adalah bagian penutup dari tag html.

comments | html | Read More...

Aplikasi pengolahan lab SIMlab (Sistem Informasi lab)

Penulis : DIKNI BLOG on Tuesday 24 February 2015 | 22:39

Tuesday 24 February 2015

Aplikasi Yang gua buat saat menjadi teknisi TKJ di SMKN 2 pandeglang yang minat Hubungi ajah kontak gua di menu Contact Us...

Aplikasi ini Menggunakan :

saya membuat di PHP Versi 5.5.5 Menggunakan Extension PDO dan apabila anda mengguanakan versi php yang lebih rendah makan Extensi PDO nya harus diaktifkan terlebih dahulu.
Menggunakan Bootstrap METRO UI CSS 2.

Fitur :

Laporan Pemakaian Lab
Administrasi Peminjaman Barang
Inventaris Lab
Laporan Tugas Teknisi
Chating.

Aplikasi ini bertujuan untuk Mempermudah pengelolaan Lab
Menyajikan Laporan penggunaan lab dan tugas Teknisi, Menjadi lebih mudah.

comments | aplikasi | Read More...

TABLECK DIKNI SHARE

Adversitement