Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Belajar Penggunaan Background di Css



Belajar Penggunaan Background di Css - Pada bagian ini kita akan membahas tentang Penggunaan background untuk memperindah tampilan Web. Untuk elemen-elemen background di html dan css adalah Sebagai berikut:
  •  background-color property ini biasanya digunakan untuk warna latar belakang elemen.
  •  background-image property ini digunakan untuk memasang background gambar.
  •  background-repeat property ini untuk mengatasi pengulangan background (gambar).
  •  background-position property ini biasanya digunakan untuk meletakan posisi background (gambar).
  •  background-attachment property ini mengatur bagaimana background diatur.
  •  background property mencakup semua yang diatas, jadi dengan satu property kamu bisa memasukan semua yg diatas.


<html>
   <head>
   <body>
      <p style = "background-color:yellow;">
      This text has a yellow background color.</p>
   </body>
   </head>
<html>

Hasilnya

This text has a yellow background color.

Kita juga bisa menggunakan Background gambar untuk mempercantik, contohnya sebagai berikut:


<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
      <body>
         <h1>Hello World!</h1>
      </body>
   </head>
<html>

Hasilnya

This text has a yellow background color.

Sekian Tutorial singkat dari saya :D

Cara Cepat Menggunakan Color warna Di css



Cara Cepat Menggunakan Color warna Di css - CSS menggunakan nilai warna untuk menentukan warna. Biasanya, ini digunakan untuk mengatur warna background atau warna elemen atau kata (yaitu, teksnya). Selain itu color di css juga bisa digunakan untuk mempengaruhi warna border elemen dan efek dekoratif lainnya.

Dalam penulisan warna di css ada 5 jenis cara penulisan yaitu:

Format Syntax Example
Hex Code #RRGGBB p{color:#FF0000;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
keyword aqua, black, etc. p{color:teal;}


Cara Cepat Menggunakan Color warna Di css - Untuk penggunaan warna di css biasanya admin sering menggunakan hex kode hex ini memang sangat mudah digunakan. terdiri dari 6 huruf dari 0 sampai f, yang dua huruf dari awal adalah merah dan dari huruf 3 sampai 4 adalah hijau dan huruf ke 5 dan 6 adalah warna biru RRGGBB

untuk warna hexadesimal ini sendiri bisa kamu dapatkan di photoshop dan software editing lainnya, atau juga bisa di google atau website warna html.
sebelum penulisan kode hexa desimal biasanya diawali dengan tanda #.

Contoh Color hex

Color Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF

Cara Cepat Menggunakan Color warna Di css - Untuk pemasangan di css itu sangat mudah yaitu hanya menambah property yang ingin kita warnai seperti background kita hanya perlu menambahkan property background-color:#000000 atau warna text kita bisa menggunakan kata property color:#000000 dan warna border atau warna pinggir elemen kita bisa menggunakan border-color:#000000 dan masih banyak lagi elemen yang bisa kita gunakan. untuk elemen-elemen di css akan kita bahas setelah postingan ini jadi tetap kunjungi website ini ya.

Menggunakan Session di Php


Menggunakan Session di Php. Fungsi session yaitu untuk menyimpan informasi yang dibutuhkan oleh aplikasi dan dapat dibagi keseluruh halaman web, dan session ini tersipan di dalam file pada lingkungan server web. dalam arti kita bisa menggunakan suatu variabel dalam setiap halaman selama broser tidak dinonaktifkan atau di session_destroy.

cara menggunakan session harus ditambah session_start() sebelum  menggunakan kode.

<?php
session_start();
?>

Membuat dan Mengakses SESSION


start_session();
$_SESSION['nama_session'] = "value";

Contoh:
start_session();
$_SESSION['username'] = "julian";

Jika ingin mengimplementasikan di halaman tinggal dikasih echo

start_session();
$_SESSION['username'] = "julian";
echo $_SESSION['username'];

Jika ingin menghapus session tinggal dikasih session_destroy();
Sekian Tutorial Dari saya semoga bermanfaat

Membuat Alert Box atau Kotak Peringatan Dengan Javascript



Hello Gan :D
Ketemu lagi dengan Saya, kali ini kita akan membahas tentang javascript, tutorial kali ini juga tergolong sangat mudah untuk dipelajari untuk pemula.

apa sih alert box atau kotak peringatan itu, alert box atau kotak peringatan itu adalah suatu fungsi di javascript yang menampilkan sejenis kotak ada suatu browser.

untuk mengetahui lebih mengenai alert box atau kotak peringatan itu sendiri alangkah baiknya jika kita praktekan secara langsung.


<script>
 alert("Contoh Perigatan yang ingin ditampilkan");
</script>

script diatas dipasang di dalam kode html website anda supaya bisa menampilkan lert box atau kotak peringatan.
sebagai contoh script berikut ini

<html>
<head>
</head>
<body>
<script>
 var tanggal=Date();
 alert("Assalamualaikum! Waktu sekarang adalah: "+tanggal);
</script>
</body>
</html>

Hasilnya akan muncul seperti gambar dibawah ini:

jika sudah muncul seperti gambar diatas berarti script anda sudah berhasil.

Sekian posting dari saya untuk hari ini tunggu posting selanjutnya ya :D

Mengabungkan HTML dengan Php



Hallo Guys :)
hari ini saya akan membagikan tutorial singkat banget, tapi mohon maaf dulu karena sudah saya sudah lama vakum blog, sekarang blog ini akan aktif terus minimal posting dua kali dalam seminggu.

Ok kita kembali ke pembahasan yaitu cara menggabungkan html dengan php yang menurut saya adalah tutorial yg sangat mudah untuk dipahamai bahkan bagi para newbie sekalipun, tutorial ini hanya menggunakan satu fungsi echo, apa itu fungsi echo??? fungsi echo itu adalah fungsi di php yg berguna untuk menampilkan data kedalam browser, sebenarnya ada banyak fungsi lain selain fungsi echo tersebut yg akan admin bahas dilain waktu.

coba kalian perhatikan kode dibawah ini.

<?php echo "Selamat Belajar di Tukomnet"; ?> 

Hasilnya: Selamat Belajar di Tukomnet
ok kode selanjutnya kita akan menggunakan HTML:
<?php echo "Selamat Belajar di <b&gtTukomnet</b&gt"; ?> 

Hasilnya: Selamat Belajar di Tukomnet


Sekarang Mungkin kalian sudah paham jika belum paham siahkan tanyakan kepada saya di facebook. sekian tutorial dari saya terima kasih

Cara memotong Text dengan SubStr() pada PHP



Pada kesempatan kali ini TukomNet akan memberikan posting yang sederhana dalam penanganan string di ddalam php yaitu cara memotong text atau bisa dibilang mengambil sebagian string untuk ditampilkan. Fungsi ini banyak digunakan seperti pembuatan readmore pada posting.

Mengenal Fungsi SubStr()

Fungsi substr() adalah fungsi yang digunakan dalam pemotongan string, cara kerjanya adalah dengan memotong string dengan banyak huruf yang ditentukan pada fungsinya.

Sebagai contoh kitamemiliki string "Belajar SubStr di TukomNet". bagaimana cara mengambil sebagian text sebagai contoh "TukomNet".

Dalam kasus ini kita membutuh kan fungsi subStr().

Fungsi substr() membutuhkan 2 buah argumen dan 1 argumen tambahan (opsional). Arguman pertama adalah string asal yang ingin diambil nilainya. Argumen kedua berupa posisi awal pemotongan, dan argumen ketiga diisi jumlah karakter yang akan diambil. Argumen kedua dan ketiga bertipe integer dan bisa positif maupun negatif.

Untuk pemahaman lebih lanjut akan kita bahas dibawah ini.

Memotong Dari Awal String

Penggunaan pertama dalam substr() akan kita bahas di bawah ini:
<?php
$text = "belajar fungsi substr di tukomnet";
$sub_text = substr($text,3);
echo $sub_text;
// ajar fungsi substr di tukomnet
?>

Pada contoh diatas adalah kita mengambil tiga huruf di depan lalu kita potong dan mendapatkan output "ajar fungsi substr di tukomnet".

Contoh kedua adalah kita menambahkan optional pada substrnya:

<?php
$text = "belajar fungsi substr di tukomnet";
$sub_text = substr($text,8,6);
echo $sub_text;
// fungsi
?> 

Pada contoh diatas akan menghasilkan output " fungsi". dengan penjelasan yaitu kita memotong sebanyak 8 huruf di depan lalu kita hanya mengambil  7 huruf setelah hasil pemotongan tersebut.

Contoh ketiga adalah dengan menggunakan optional minus:

<?php
$text = "belajar fungsi substr di tukomnet";
$sub_text = substr($text,8,-8);
echo $sub_text;
// fungsi substr di
?> 

Pada contoh ketiga diatas akan menampilkan output "fungsi substr di".
penjelasannya adalah kita memotong 8 huruf di depan dan memotong 7 huruf dibelakang dan menampilkan yang tidak dipotong.

Memotong Dari Awal String

Pada pemotongan dari belakang kita hanya mengubah nilai pemotong menjadi minus.

Contoh pertama

<?php
$text = "belajar fungsi substr di tukomnet";
$sub_text = substr($text,-11);
echo $sub_text;
// tukomnet
?>

Pada contoh diatas kita akan mendapatkan hasil "tukomnet". dengan penjelasan kita memotong 11 huruf dibelakang.

Contoh kedua

<?php
$text = "belajar fungsi substr di tukomnet";
$sub_text = substr($text,-18,11);
echo $sub_text;
// substr
?>

Pada contoh kedua diatas kita akan mendapatkan hasil output "substr". Dengan penjelasan kita memotong 18 huruf di belakang kecuali sebanyak 11 huruf dibelakang.

Contoh ketiga

<?php
$text = "belajar fungsi substr di tukomnet";
$sub_text = substr($text,-18,-11);
echo $sub_text;
// substr
?>

Tidak jauh beda dari contoh kedua yaitu hasilnya "substr".


Pengambilan sebagian nilai string cukup sering kita gunakan. PHP menyediakan fungsi substr() untuk keperluan ini. fungsi substr sangat praktis untuk memotong sebuah string atau mengambil sebagian nilai dari sebuah string di dalam PHP.

Tutorial membuat Css Speech Bubble


Kali ini kita akan membahas cara membuat speech bubble dengan css yang tergolong tidak sulit untuk dipahami, yaitu hanya menggunaakan box-shadow,border-radius dan permainan border.

Untuk scriptnya lihat di bawah ini:
index.html
<html>
<head>
 <title>CSS Speech Bubble Comment by TUTORIALWEB.NET</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>Css Speech Bubble By TUkomNet</h3>
 <div class="bubble-list">
  <div class="bubble clearfix">
   <div class="bubble-content">
    <div class="point"></div>
    <p>Pellentesque at nibh gravida, vehicula felis sed, sollicitudin lectus. Donec quis dapibus nisi. Maecenas sit amet faucibus massa. Phasellus pulvinar nisi quis lectus sodales, at aliquam est commodo. Nunc erat purus, viverra lobortis blandit vel, dictum quis urna. Etiam vitae consectetur nibh.</p>
   </div>
  </div>
  <div class="bubble clearfix">
   <div class="bubble-content">
    <div class="point"></div>
    <p>Phasellus pulvinar nisi quis lectus sodales, at aliquam est commodo. Nunc erat purus, viverra lobortis blandit vel, dictum quis urna. Etiam vitae consectetur nibh.</p>
   </div>
  </div>
 </div>

</body>
</html>

Dan untuk Script untuk mempercantik Speech Cssnya silahkan dicopy dibawah ini
style.css
body {
 background: #DDD;
 font: 1em "Trebuchet MS";
}

.clearfix {
 display: inline-block;
}

* html .clearfix {
 height: 1%;
}

.clearfix {
 display: block;
}

.bubble-list .bubble {
 margin-bottom: 20px;
}


.bubble-list .bubble .bubble-content {
 position: relative;
 margin-left: 20px;
 width: 400px;
 padding: 10px 20px;
 border-radius: 10px;
 background: #fff;
 box-shadow: 1px 1px 5px rgba(0,0,0,.2);
 color: #333
}

.bubble-list .bubble:nth-child(even) .bubble-content .point {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 12px solid #fff;
 position: absolute;
 left: -12px;
 top: 12px;
}
.bubble-list .bubble:nth-child(odd) .bubble-content .point {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 12px solid #fff;
 position: absolute;
 right: -12px;
 top: 12px;
}
h3 {
 background: #f4778f;
 text-align: center;
 padding: 10px;
 color: #fff;
 font-size: 18px;
 width: 400px;
 margin-left:20px 
}

Jangan lupa untuk menyimpan dengan nama style.css dan index.html dan lihat hasilnya :)

Cara membuat layout masonry css3 tanpa plugin jquery


Apa itu masonry layout? masonry layout adalah sistem grid dengan kolom yang memiliki baris dan tinggi yang tidak tetap, biasanya masonry ini di buat menggunakan plugin jquery masonry tetapi sekarang css3 sudah bisa digunakan untuk membuat layout masonry.

Yang harus anda pelajari hanya css3 multiple columns:
  • column-count:
  • column-gap:

Keterangan:

  • column-count: untuk memberi banyak kolom
  • column-gap: untuk memberi jarak antara kolom

Example:

div {
column-count:4;
column-grap:10px;
}
Hasilnya adalah Empat Kolom dengan margin atau jarak setiap kolom adalah 10px

Untuk contoh lainnya bisa dilihat dibawah ini:
HTML
<div class="item-konten">
    <ul>
        <div class="isi">
            <li><img ="#" /></li>
            <li>Dekripsi yang disini</li>
        </div>
    </ul>
</div>
CSS
.item-konten {
 padding:20px;
}
ul {
 column-count:3;
 column-grap:10px;
 border:1px solid #333;
}

Sekian tutorial singkat yang dapat saya sampaikan, jika ada kekuranngan mohon kritik di kolom komentar.

Tutorial membuat kategori tag di Blogger Blogspot

Apa itu kategori? mungkin anda sudah mangetahuinya jika anda belum mengetahuinya akan saya beri penjelasan singkat tentang kategori, Kategori adalah pengelompokan atau suatu klasifikasi untuk mengelompokan sesuatu atau lebih dari satu baik itu menurut fungsi, makna, bentuk dan lain-lain supaya lebih teratur.

Bagaimana cara memasang kateori di blogger atau blogspot? seperti yang anda ketahui kalau di dashboard blogger itu tidak memiliki fitur kategori melainkan fitur Tag label yang fungsinya hampir sama dengan kategori, lalu bagaimana cara memasang tag label ini di blogger atau blogspot, untuk langkah-langkah ikuti dibawah ini:

  • Login ke Blogger
  • Masuk ke posting anda lalu klik edit jika postingan sudah ada
  • Klik Label di Sidebar kanan
  • Masukan tagnya (gunakan tanda, koma untuk membuat lebih dari satu)
  • Setelah itu Klik Selesai
  • Lalu kembali ke dashboard dan masuk ke Layout atau Tata Letak dan klik edit di Gadget Label
  • Pada tampilkan pilih label yang dipilih setelah itu klik edit
  • Centang label yang akan ditampilkan di blog anda
  • Setelah itu klik selesai
  • Dan lihat hasilnya di halaman blogspot kalian masing-masing.
Sekian tutorial dari saya semoga bermanfaat dan tetap kunjungi tukomnet karena akan ada update tutorial yang lebih keren lagi dari ini.
Fungsi isset empty dan unset di php

Fungsi isset empty dan unset di php


Tutorial - Di dalam php kita banyak mengenal fungsi terutama isset empty serta unset,
merupakan pengolahan sebuah variable, dan berikut penjelasannya lebih rinci. Mengelola variabel. Jika anda belajar php, dipastikan anda selalu akan menemui variabel. Maka dari itu dituntut dalam blajar php, diharuskan bisa mengelola variabel. implemetasi pembuatan kode program php, secara garis besar ada tiga konstruksi bahasa digunakan untuk mengelola suatu variabel, yaitu isset(), unset(), empty() Yang masing-masing mempunyai pengertian sbb:

1. isset
isset() digunakan untuk menyatakan variabel sudah diset atau tidak. Jika variabel sudah diset makan variavel akan mengembalikan nilai true, sebaliknya akan bernilai false


2. unset
unset()merupakan kebalikan dari isset(), yaitu untuk meng-unsetvariabel, dan membebaskan memory yang sudah digunakan.

3. empty
empty(), digunakan untuk memerikasa apakah variabel form tidak dikirim atau tidak berisi data alias kosong. berbeda denagn isset(), yang mengembalikan nilai false pada variabel yang di-unset, empty() akan mengembalikan nilai true