Tampilkan postingan dengan label PHP. Tampilkan semua postingan
Tampilkan postingan dengan label PHP. Tampilkan semua postingan

Belajar CSS 2: ID dan Class CSS

Materi belajar css selanjutnya adalah tentang id CSS dan class CSS. Id CSS digunakan untuk menentukan style dari elemen yang unik. Id selector menggunakan atribut id elemen dan didefinisikan dengan “#” html. Sebagai contoh aturan id dibawah ini akan diaplikasikan pada id elemen “belajar1” :

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

CSS juga mengijinkan kita untuk menyatukan elemen-elemen html secara bersamaan didalam sebuah kelas (classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class CSS. Selector class CSS menggunakan atribut html dan didefinisikan dengan “.”Pada contoh di bawah, semua elemen HTML dengan class = “center” akan menjadi center-aligned:

.center {text-align:center;}
 

Anda juga bisa menentukan hanya pada elemen html khusus yang akan dibuat class CSS, Pada contoh di bawah, semua elemen p dengan class = “center” akan menjadi center-align :

p.center {text-align:center;}
 
Satu dari beberapa kehebatan tekhnologi css ini adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site anda. Jadi jika anda ingin merubah tampilan situs anda tinggal mengedit satu file saja. Maka jangan ragu-ragu untuk terus belajar css.
Okey, mari kita lanjutkan tentang bagaimana cara kode css ke dalam situs kita. Ada 3 jalan untuk memasukkan style sheet yaitu external style sheet, internal style sheet dan inline style.
External sheet ideal diaplikasikan pada banyak halaman. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian head:

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

Style sheet eksternal dapat ditulis dalam editor teks apapun. File tersebut seharusnya tidak berisi tag html. Style sheet Anda harus disimpan dengan ekstensi css.. Seperti contoh di bawah ini:
 
Hr {color:sienna;}
 
p {margin-left:20px;}
 
body {background-image:url("images/back40.gif");}


Internal style sheet digunakan pada dokumen tunggal yang unik. Kita mendefinisikan internal style pada head dalam halaman html menggunakan <style> seperti contoh dibawah ini :

<head>
 
<style type="text/css">
 
hr {color:sienna;}
 
p {margin-left:20px;}
 
body {background-image:url("images/back40.gif");}
 
</style>
 
</head>
 

Sedangkan untuk menggunakan Inline style kita dapat menggunakan atribut style yang dalam tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan bagaimana untuk mengubah warna dan margin kiri paragraf:

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


Ayo sekarang dicoba! Sampai disini kalian masih bersemangat belajar css kan? Nah css juga menawarkan berbagai macam cara untuk mengganti warna. Penasaran kan bagaimana caranya? Kalau begitu kita lanjutkan ke belajar css seri 3.
Label: ,

Belajar CSS Online

Belajar CSS itu sulit nggak sih? Banyak pengunjung Foolishness yang menanyakan tentang tutorial belajar CSS ini. Untuk apa sebenarnya kita belajar CSS? mari kita bahas bersama.
Bagi anda yang ingin berkecimpung dalam bisnis online tidak ada salahnya untuk mulai belajar membuat web sendiri, paling tidak bisa mengutak atik atau mengedit template hasil download menjadi template yang sesuai keinginan kita. Caranya dengan mulai belajar css (Cascading Style Sheet).
Disini kami menyediakan tutorial cara belajar CSS lengkap yang akan membantu anda untuk mengelola tampilan web anda. Tapi perlu digaris bawahi, sebelum melangkah untuk belajar CSS, anda harus sudah memahami pengertian tentang elemen HTML dan tag HTML. Saya sarankan Anda untuk belajar HTML terlebih dahulu menggunakan tutorial-tutorial HTML ini sebelum melanjutkan ke tutorial belajar CSS ini.
Jadi, secara singkat, CSS akan membantu kita untuk membuat website kita yang berbasis HTML menjadi lebih baik.
Baiklah untuk memulai materi pengenalan css terlebih dahulu saya akan menjelaskan tentang arti dari CSS. CSS adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Singkatnya dengan menggunakan Methode CSS ini anda dengan mudah mengubah secara keseluruhan sekaligus memformat ulang situs anda.
CSS mempunyai 2 bagian utama yaitu selectors dan deklarasi. Yang dimaksud selectors biasanya element html yang ingin anda ubah, sedangkan deklarasi biasanya terdiri dari property dan nilai, properti sendiri adalah atribut style yang ingin anda ubah, dan setiap properti memiliki nilai. Untuk lebih jelasnya kita lihat contoh dibawah ini :

Setiap syntax css selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal {}
?
1
p {color:red;text-align:center;}
Untuk membuat css mudah dibaca, anda bisa menempatkan deklarasi pada satu baris seperti ini :
?
1
p {color:red;text-align:center;}
Selanjutnya adalah membuat komentar dalam CSS (CSS comment), comment digunakan untuk menjelaskan kode anda dan membantu ketika mengedit script. Namun, comment akan diabaikan oleh browser jadi kita harus menyembunyikannya. Coment ditandai dengan “/*” dan diakhiri dengan “*/”, perhatikan contoh pengaplikasian comment dibawah :
/*Ini adalah comment*/

p
 
{
 
text-align:center;
 
/*Ini adalah comment*/
 
color:black;
 
font-family:arial;
 
}
 

Bagaimana? Mudah dimengerti bukan? Okey, sebagai pengenalan belajar css saya rasa cukup. Selanjutnya Kita akan ke materi belajar css lain yaitu CSS Id dan Class
Label: ,

Tutorial PHP 10:Operator PHP Perbandingan dan logika

Tutorial PHP 10 : Operator PHP Perbandingan dan Logika
Untuk melengkapi ilmu kita tentang operator percabangan, kita perlu mengetahui di dalam if kita bisa memakai apa saja. Nah, untuk itu kita akan mempelajari tentang operator. Siap ?

Kita sudah melihat bagaimana penggunaan tanda “=” saat kita mengisi variabel dalam skrip yang sudah kita tulis (misalnya $WarnaFavorite=”biru”). Tanda sama dengan tersebut disebut dengan “assignment operator” dan merupakan operator paling sederhana yang sudah kita miliki: $a = b berarti “variabel a diisi dengan nilai b (untuk saat ini)”.

Tetapi anda dapat memperoleh lebih banyak dari PHP dengan apa yang disebut dengan “comparison operator” (operator perbandingan) , “logical operator” (operator logika) dan “arithmetic operator” (operator aritmatika). Berikut adalah operator-operator tersebut diambil dari PHP.net

Operator Perbandingan

Operator ini membuat anda bisa melakukan pembandingan apakah beberapa elemen sama, identik, kurang dari atau lebih besar dari yang lain.

Contoh
Name
Result
$a == $b
Sama dengan
BENAR jika $ a sama dengan $b.
$a === $b
Identik
BENAR jika $a sama dengan $b, dan keduanya memiliki tipe yang sama.
$a != $b
Tidak sama dengan
BENAR jika $a tidak sama dengan $b.
$a <> $b
Tidak sama dengan
BENAR jika $a tidak sama dengan $b.
$a !== $b
Tidak identik
BENAR jika $a tidak sama dengan $b, atau tidak memiliki tipe yang sama.
$a < $b
Kurang dari
BENAR jika $a kurang dari $b.
$a > $b
Lebih besar dari
BENAR jika $a lebih besar dari $b.
$a <= $b
Kurang dari atau sama dengan
BENAR jika $a kurang dari atau sama dengan $b.
$a >= $b
Lebih besar dari atau sama dengan
BENAR jika $a lebih besar dari atau sama dengan $b.
Kesalahan yang cukup sering saya lakukan adalah menggunakan operator assignment (“=”) untuk membandingkan, sehingga untuk mambandingkan apakah 2 variabel sama atau tidak dalam sebuah percabangan saya tuliskan:

If ($a = $b)

Yang seharusnya

If ($a == $b)

Operator Logika

Di sini anda dapat membandingkan elemen-elemen menggunakan pembandingan logika and dan or.

Contoh
Nama
Hasil
$a and $b
And
BENAR jika baik $a dan $b keduanya BENAR.
$a or $b
Or
BENAR jika salah satu dari $a atau $b BENAR.
$a xor $b
Xor
BENAR jika salah satu dari $a atau $b BENAR, tetapi tidak keduanya.
! $a
Not
BENAR jika $a tidak BENAR.
$a && $b
And
BENAR jika baik $a dan $b keduanya BENAR.
$a || $b
Or
BENAR jika salah satu dari $a atau $b BENAR.
 
Operator Aritmatika

Persis seperti namanya, operator ini melakukan matematika dasar (artinya, kalau anda menginginkan operasi matematika lainnya misalnya integral atau differensial ya harus bikin sendiri, lagian siapa yang mau pake ya?)

Contoh
Nama
Hasil
$a + $b
Penjumlahan
Jumlah $a dan $b.
$a – $b
Pengurangan
Selisih $a dan $b.
$a * $b
Perkalian
Perkalian $a dan $b.
$a / $b
Pembagian
Pembagian $a dan $b.
$a % $b
Modulus
Sisa $a dibagi $b.
OK, sampai di sini dulu untuk urusan operator ini. Nest, kita akan belajar tentang Loop.
Label: ,

Belajar Elemen HTML5

Pada artikel serial html5 kali ini kita akan membahas tentang elemen – elemen yang ada pada html5. Oh iya sebelumnya saya jelaskan dulu kenapa HTML 4.01 diperbaharui ialah karena beberapa elemen dalam HTML 4.01 sudah usang, tidak pernah digunakan, atau tidak banyak memberikan manfaat, maka lahirlah HTML5. Silakan baca dultutorial tentang perbedaan HTML dengan HTML5 ini untuk lebih memperkaya latar belakang perubahan HTML menjadi HTML5.
Seperti contohnya pada elemen HTML5 untuk mendefinisikan video, seperti klip video atau video stream lainnya menggunakan tag <video>, mendefinisikan tag suara, seperti musik atau audio lain menggunakan tag <audio>, mendefinisikan konten tertanam, seperti plug-in menggunakan tag <embed>.
Ok, untuk lebih jelasnya berikut ini contoh – contoh elemen pada html5 :
Elemen Markup
Tag Penjelasan
<article> Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal
<aside> Untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya
<command> Sebuah tombol, atau radiobutton, atau sebuah kotak centang
<details> Untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen
<summary> Sebuah keterangan, atau ringkasan, dalam rincian elemen
<figure> Untuk pengelompokan bagian dari konten berdiri sendiri, bisa video
<figcaption> Keterangan dari tokoh bagian
<footer> Untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta
<header> Untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi
<hgroup> Untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul
<mark> Untuk teks yang harus disorot
<meter> Untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui
<nav> Untuk bagian navigasi atau menu
<progress> Keadaan pekerjaan berlangsung
<ruby> Untuk penjelasan ruby (catatan Cina atau karakter)
<rt> Untuk penjelasan tentang penjelasan ruby
<rp> Apa untuk menunjukkan browser yang tidak mendukung elemen ruby
<section> Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen
<time> Untuk menentukan waktu atau tanggal, atau keduanya
Elemen Media
Tag Penjelasan
<audio> Untuk konten multimedia , suara, musik atau streaming audio lainya
<video> Untuk konten video , seperti klip film atau Streaming video lainya
<source> Untuk sumber suatu media pada elemen media, menjelaskan didalam video atau media audio
<embed> Untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari Youtube.
Elemen Kanvas
Elemen kanvas menggunakan JavaScript untuk membuat gambar pada halaman web.
Tag Penjelasan
<canvas> Untuk membuat gambar pada halaman web
Elemen Form
Tag Penjelasan
<datalist> Daftar pilihan untuk nilai input
<keygen> Hasilkan kunci untuk mengotentikasi pengguna
<output> Untuk berbagai jenis output, seperti output yang ditulis oleh script
Input Type Attribute Values
Untuk kontrol input yang lebih baik sebelum mengirimnya ke server:
Tipe Penjelasan
tel Nilai input untuk nomor telepon
search Untuk bidang pencarian
url Nilai input untuk memasukkan URL
email Untuk mengisi email atau lebih dari 1 email
datetime Untuk pengisian waktu dan tanggal
date Untuk pengisian tanggal
month Untuk pengisian bulan
week Untuk pengisian minggu
time Untuk pengisian waktu
datetime-local Untuk pengisian lokal waktu/tanggal
number Untuk pengisian nomer
range Untuk pengisian rentang waktu
color Untuk pengisian heksadesimal sebuah warna, contohnya #FF8800

Seperti yang saya jelaskan bahwa pada html5 ini adalah menyederhanakan html versi sebelumnya, untuk artikel selanjutnya adalah membahas struktur penyederhanaan pada html5.
Label: ,

Belajar HTML5

Ok, kali ini kita akan memulai Belajar Tentang HTML5. Mungkin bagi anda yang sudah mengenal HTML bertanya-tanya, apa bedanya HTML dan HTML5? Dan apa keistimewaan HTML5 dibanding dengan HTML?
Baiklah, sebelum kita mulai tutorial belajar HTML5 kita, ada baiknya kita lihat dulu apa keistimiewaan dan perbedaan HTML dibanding HTML5.
HTML5 ini adalah standar baru dari HTML, yang dikembangkan oleh World Wide Web Consortium (W3C) dan Web Hypertext Aplikasi Teknologi Working Group (WHATWG). ebagaimana pendahulu sebelumnya yaitu: HTML 4.01 dan XTHML 1.1, HTML5 adalah sebuah standar untuk menstrukturkan dan menampilkan isi pada World Wide Web. Standar ini memperkenalkan fitur baru seperti memutar video serta drag and drop, Sebelumnya fitur ini bergantung pada plugins pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft Silverlight.
Nah, untuk itu ada beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :
  • Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
  • Mengurangi kebutuhan untuk plugin eksternal (seperti Flash)
  • Lebih baik penanganan kesalahan
  • Lebih banyak penggunaakn markup untuk mengganti scripting.
  • HTML5 harus independen
  • Proses development-nya harus terlihat untuk umum (visible)
Dalam HTML5 hanya ada satu <DOCTYPE> deklarasi, dan sangat sederhana, yaitu :
<!DOCTYPE html>
Dengan belajar HTML5 sebenarnya kamu akan mendapat banyakmanfaat. Misalnya kita akan mempelajari bahwa HTML 5 menyederhanakan banyak praktek coding yang digunakan dalam versi sebelumnya dari HTML. Sebagai contoh, ketika memulai sebuah file, Anda sebelumnya harus memulai dokumen sehingga tampak seperti ini:
-----------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/
Disederhanakan menjadi seperti dibawah ini:
<!DOCTYPE html><html lang=”en”>

Dibawah ini adalah contoh dari kesederhanaan HTML5 :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>
 ---------------------------------------------------------------------------------------------------------
Okey, saya rasa cukup untuk pengenalannya sebelum kita mulai belajar HTML5. Jangan lewatkan untuk pantau terus ya , karena saya akan membahas HTML5 lanjutan seperti Tutorial tentang Elemen HTML5 ini yang pasti sangat berguna dalam membangun web anda.
Selamat belajar HTML5!
Label: ,

Mengolah Database di web Hosting Menggunakan phpMyAdmin

Merujuk dari artikel yang lalu tentang cara membuat database di web hosting dengan phpMyAdmin, maka kali ini saya akan membahas cara mengelola database di phpmyadmin. Okey, yang pertama akan saya bahas adalah langkah – langkah backup database melalui phpymyadmin. Ikuti langkah – langkah berikut ini :
  • Login dicpanel dan klik phpmyadmin.
  • Pilih database yang ingin dibackup yang terdapat di sebelah kiri layar monitor anda.
  • Masuk ke tab export pada bagian atas yang sejajar dengan tab-tab seperti Structure | SQL | Search | Query | Export | Import | Operations | More . Jika sudah berada di tab export, maka bisa langsung di klik GO.
  • Save databasenya ke hardisk PC anda, pastikan file yang di simpan sudah benar dengan ekstensi file .sql (seharusnya nama_database.sql, nama database yang di export dengan ekstensi .sql)

Nah, untuk importnya hampir sama caranya yaitu :
  • login ke cPanel, cari baris kolom Databases , maka langsung klik menu phpMyAdmin . Maka anda akan di redirect sevara otomatis dari cPanel anda ke phpMyAdmin.
  • Setelah berada di phpMyAdmin hostingnya, maka selanjutnya adalah memilih nama database yang sudah di buat di cPanel pada MySQL Dtabases/Wizard, lalu klik untuk masuk ke database yang masih kosong tersebut (sehingga posisi saat ini berada di localhost >> nama_databasenya).
  • Klik Import pada tab bagian atas, lalu browse file SQL yg sudah dibackup / export.
  • Temukan lokasi dimana penyimpanan file SQL nya yang sudah di backup/export tadi lalu Enter atau klik Open.
  • Scrolling ke bawah lalu langsung klik GO , jika file SQL tadi sudah di browse.
  • tunggu load SQL uploadnya, jika sudah maka akan tampil bahwa database telah berhasil di import ke phpMyAdmin hostingnya.
Bagaimana? Mudah bukan cara export dan import database melalui phpmyadmin? Selamat mencoba ya..!
Label: ,

Membuat Hyperlink di PHP

Story of Biography Danger Ranger >>> Click Here

Bagaimana cara membuat script untuk menampilkan link otomatis dalam postingan artikel bila terdapat URL. Sebagai contoh misalkan saya menuliskan string berikut ini pada form:
“Hallo.. selalu kunjungi http://blog.rosihanari.net ya untuk mendapatkan info programming yang OK punya.”
Nah.. setelah disubmit, maka secara otomatis URL ‘http://blog.rosihanari.net’ yang terdapat dalam string di atas akan menjadi link secara otomatis tanpa kita memberikan tag html untuk link <a href=”…”>…</a> pada URL tersebut. Untuk memudahkan dalam menyebutkan, mungkin lebih enak kalau saya sebut hal ini dengan istilah ‘auto hyperlink’ saja ya.
Bila Anda menggunakan WordPress, maka auto hyperlink ini secara otomatis terjadi yaitu pada bagian comment. Namun, bagaimana bila kita ingin membuat sendiri auto hyperlink ini? So.. simak artikel ini baik-baik ya, mudah kok membuatnya :-)
Kita dapat membuat script auto hyperlink di atas dengan menggunakan PHP. Bagaimana dengan idenya? Idenya adalah langkah pertama kita pisah atau split terlebih dahulu string aslinya ke dalam substring berdasarkan karakter spasinya.
Sebagai contoh, misalkan ada string berikut ini:
“Situs http://blog.rosihanari.net dan http://rosihanari.net benar-benar OK punya.”

Bila kita split string tersebut ke dalam substring berdasarkan karakter spasi, maka akan kita dapatkan substring sbb:
Substring ke-0 : Situs
Substring ke-1 : http://blog.rosihanari.net
Substring ke-2 : dan
Substring ke-3 : http://rosihanari.net
Substring ke-4 : benar-benar
Substring ke-5 : OK
Substring ke-6 : punya.
Dengan demikian totalnya ada 7 buah substring. Kemudian untuk setiap substring tersebut kita cek apakah diawali dengan ‘http://’. Bila ada substring yang diawali dengan ‘http://’ maka substring tersebut nantinya akan direplace dengan

1.<a href="substring">substring</a>.
Sehingga hasil string setelah proses replacing selesai semua menjadi

1.Situs <a href="http://blog.rosihanari.net">http://blog.rosihanari.net<;/a> dan <a href="http://rosihanari.net">http://rosihanari.net<;/a> benar-benar OK punya.
Mudah-bukan idenya? :-) Tapi.. eh tunggu dulu, bagaimana bila ada substring yang hanya terdiri dari ‘http://’ saja? Misalkan string berikut ini.

“Contoh beberapa situs http://blog.rosihanari.net dan http://rosihanari dan http://”
Apa yang terjadi bila kita terapkan ide di atas? Ya… hasilnya akan rusak karena semua teks ‘http://’ dalam string aslinya nantinya akan dibuat link sehingga hasilnya adalah sbb:

1.Contoh beberapa situs <a href='<a href='http://'>http://<;/a>blog.rosihanari.net'><a href='http://'>http://<;/a>blog.rosihanari.net</a> dan <a href='<a href='http://'>http://<;/a>rosihanari'><a href='http://'>http://<;/a>rosihanari</a> dan <a href='http://'>http://<;/a>
Oleh karena itu, proses replacing tidak boleh diberlakukan pada substring hasil pecahan yang hanya terdiri dari ‘http://’ saja.
OK sudah paham ya? Nah.. sekarang kita buat script PHP sebagai implementasi ide di atas. Ini dia script nya

01.<?php
02. 
03.// string asli
04.$string = "Contoh beberapa situs http://blog.rosihanari.net dan http://rosihanari dan http://";
05. 
06.// proses splitting ke dalam substring
07.$pecah = explode(" ", $string);
08. 
09.// proses replacing
10.for ($i=0; $i<=sizeof($pecah)-1; $i++)
11.{
12.if ((substr($pecah[$i], 0, 7) == 'http://') && ($pecah[$i] != 'http://'))
13.$string = str_replace($pecah[$i], "<a href='".$pecah[$i]."'>".$pecah[$i]."</a>", $string);
14.}
15. 
16.echo $string;
17.?>
Hasil dari script di atas tampak seperti di bawah ini.

auto hyperlink php script
Mudah bukan membuatnya? Script di atas hanya script sample dan simple saja dimana input stringnya bukan dari form. Nah.. Anda bisa memodifikasi script di atas bila input string berasal dari form. Anda dapat pula memodifikasinya bila ingin menyimpan string hasil auto hyperlink nya ke dalam database.
Selamat mencoba ya !! =Jangan Lupa Komentar nya  ^_^

 First Time Unforgertable Bali >>> Click Here
Label:
Langganan: Postingan (Atom)