Hypertext prepocessor

Perbedaan echo,print,print-f serta format dan fungsi echo date dalam PHP

Untuk menampilkan output di monitor, kita bisa menggunakan perintah echo, print dan printf. Namun ada perbedaan dari ketiga metode tersebut. Apa saja perbedaan tersebut?

			1.	Echo
				Echo bisa menampilkan output satu string atau lebih yang dipisahkan dengan tanda koma. Perintah echo() secara pengoperasiannya sama dengan print(), namun terdapat 2 buah perbedaan. Pertama, tidak dapat digunakan untuk suatu bagian dari sebuah ekspresi yang kompleks, karena return echo adalah void, sementara return print adalah Boolean. contohnya adalah $temp = “This string”; if(echo $temp) maka akan muncul pesan error : Parse error: syntax error, unexpected ‘echo’ (T_ECHO) in … namun berbeda jika kita menggunakan print if(print $temp) echo ‘ accepted’; maka hasilnya adalah : This string accepted yang kedua, perintah echo() memungkinkan mengeluarkan hasil dengan menggunakan banyak string, maksudnya adalah dengan menggunakan operator “,”. Sebagai contoh <?php $heavyweight = “Lennox Lewis”; $lightweight = “Floyd Mayweather”; echo $heavyweight, ” and “, $lightweight, ” are great fighters.”; ?> maka hasilnya adalah Lennox Lewis and Floyd Mayweather are great fighters. Banyak orang yang bertanya mana yang lebih cepat, echo() atau print() ?  jawabannya adalah fungsi echo() jauh lebih cepat, karena return echo adalah void yang artinya tidak perlu mendefinisikan hasil keluaran datanya, sedangkan print() adalah boolean ini perlu melakukan pengecekan agar dapat diketahui hasil keluaran datanya. Void itu sama dengan kosong / tidak mengeluarkan apa – apa, sedangkan Boolean bisa berupa true atau false.
			2.	Print
				Tidak jauh berbeda dengan echo, namun perintah print hanya dapat menampilkan output dari satu string saja. boolean print (argument) Perintah print() berguna untuk menampilkan suatu feedback sesuai dengan argument yang di kirim kepada user, dan print() juga dapat menampilkan antara string dan variable secara bersamaan. Contoh <?php print(“<p> Saya suka tidur.</p>”); ?> <?php $variable = “Tidur”; print “<p>Saya suka $variable.</p>”; ?> <?php print “<p> Saya suka $variable.</p>”; ?> <?php print “<p> Saya suka “.$variable.”.</p>”; ?> dari contoh diatas semua sama akan menampilkan : Saya suka tidur untuk urutan dari 1 – 3 sangat mudah dimengerti karena memiliki variasi yang sama, namun di bagian terakhir urutan penampilannya agak sedikit berbeda. 3 string digabungkan bersama – sama dengan sebuah operator, yang dalam konteks ini biasa disebut concatenation operator. Cara ini umumnya digunakan pada saat concatenating variables, constants, dan static string digunakan secara bersama – sama. Contoh : print ("Halo selamat datang");
			3.	Print-f
				Tidak berbeda dengan fungsi-fungsi sebelumnya, namun perintah printf dapat mengatur format tipe data yang akan ditampilkan di browser. printf() boolean printf (string format [, mixed args]). Perintah printf() secara functional sangat mirip dengan print(), hasil output ditentukan didalam args, kecuali hasil output sudah diberikan format tertentu. Parameter format memungkinkan Anda untuk memegang kendali besar atas data output, baik itu dalam hal penyelarasan , presisi , jenis, atau posisi . Argumen terdiri dari hingga lima komponen Contoh: printf ("%s %d %0.02f \n","teks saya", 10, 2.75);

Yang dimaksud dengan tipe date and time adalah tipe data yang berguna untuk menyimpan tanggal dan waktu di database. Untuk memudahkan user dalam membaca tipe data date dan time ini digunakan fungsi untuk melakukan format terhadap tipe data ini.Sintaks untuk melakukan format terhadap tipe data date dan time ini adalah sebagai berikut $nama_variabel = date(“format”,$timestamp);

dimana : $nama_variabel adalah variabel yang digunakan untuk menyimpan nilai output hasil format fungsi date.

Format adalah bentuk format yang digunakan untuk mengubah format output nilai  variabel date dan time yang disimpan pada variabel $timestamp. $timestamp adalah variabel dengan tipe data timestamp.  Biasanya variabel ini digunakan untuk menyimpan nilai waktu atau tanggal yang akan diformat dengan menggunakan fungsi date ini.  Untuk penjelasan bagaimana cara menyimpan nilai waktu atau tanggal tertentu. Jika variabel $timestamp tidak disertakan pada fungsi date diatas, maka PHP akan memasukkan tanggal dan waktu sekarang yang terdapat pada sistem operasi. sebagai contoh perhatikan script PHP berikut ini

<?php
$hari_ini = date(“d/m/Y”);
echo “hari ini tanggal :” .$hari_ini;
?>

Apabila kamu menjalankan script PHP diatas pada browser, maka browser kamu akan menampilkan tanggal hari ini sesuai dengan tanggal yang terdapat pada sistem operasi.d/m/Y yang terdapat pada fungsi date tersebut merupakan salah satu contoh format yang dapat digunakan untuk menampilkan nilai variabel date dan time. Berhubung PHP merupakan bahasa pemrograman case sensitive yang berarti penulisan huruf besar dan huruf kecil dibedakan maka penulisan Y dengan y akan menghasilkan output yang berbeda. Untuk mengetahui lebih jelas coba ganti huruf Y dengan y pada fungsi date diatas.

Berikut ini saya akan memberikan tabel karakter-karakter yang dapat digunakan untuk melakukan format nilai variabel dengan tipe data date dan time (saya berikan tabel dalam bentuk bahasa Inggris soalnya saya agak bingung untuk menemukan kata-kata yang pas dalam bahasa Indonesia dan juga agak males untuk menerjemahkannya, supaya pembaca dapat belajar bahasa Inggris sedikit-sedikit selain bahasa pemrograman. Ibarat peribaha sambil menyelam minum air). Untuk keterangan lebih lanjut mengenai karakter-karakter apa saja yang dapat digunakan untuk menformat tipe data date dan time ini.

Fungsi echo date dan format yang terdapat dalam echo date

1.     Fungsi date

Date digunakan untuk menampilkan format tanggal dan waktu lokal sesuai dengan tanggal sistem komputer.

2.     Format dalam echo date

Format karakter	Deskripsi	Contoh Hasil
Day	—	—
d	Tanggal dalam satu bulan 2 digit	01 sampai 31
D	Nama hari dalam seminggu, 3huruf	Mon sampai Sun
j	Tanggal dalam satu bulan, tanpa 0 didepannya	1 to 31
l (lowercase ‘L’)	Nama hari dalam seminggu	Minggu sampai Sabtu
N	ISO-8601 Angka yang menunjukan hari (PHP 5.1.0)	1 (senin) sampai 7 (minggu)
S	Suffix bahasa inggris untuk tanggal, 2 huruf	st, nd, rd or th.
w	Angka yang menunjukan hari dalam seminggu	0 (minggu) sampai 6 (sabtu)
z	Angka dalam satu tahun	0 sampai 365
Minggu	—	—
W	Nomor minggu dalam satu tahun, minggu/ week dimulai dari hari senin	24( minggu ke 24 dalam tahun)
Bulan	—	—
F	Nama bulan	January sampai December
m	Angka yang menunjukan bulan sampai bulan 12	01 sampai12
M	Nama bulan 3 huruf	Jan sampai Dec
n	Angka yang menunjukkan  bulan, tanpa nol didepannya	1 sampai12
t	Jumlah  hari bulan yang ditentukan	28 sampai 31
Tahun	—	—
L	Whether it’s a leap year	1 if it is a leap year, 0 otherwise.
o	ISO-8601 year number. This has the same value as Y, except that if the ISO week number (W) belongs to the previous or next year, that year is used instead. (added in PHP 5.1.0)	Examples: 1999 or 2003
Y	Tahun 4 digit	Contoh: 1999 atau 2003
y	Tahun 2 digit	Contoh: 99 atau 03
waktu	—	—
a	Huruf kecil	am or pm
A	Huruf besar	AM or PM
B	Swatch Internet time	000 sampai 999
g	Format 12 jam, tanpa 0	1 sampai 12
G	Format 24 jam, tanpa 0	0 sampai 23
h	Format 12 jam, 2 digit	01 sampai  12
H	Format 24 jam, 2 digit	00 sampai 23
i	Menit	00 sampai 59
s	Detik	00 sampai 59
u	Milliseconds (added in PHP 5.2.2)	contoh: 54321
Timezone	—	—
e	Pengidentifikasi timezone(PHP 5.1.0)	Asia/jakarta
I (capital i)	Whether or not the date is in daylight saving time	1 if Daylight Saving Time, 0 otherwise.
O	Perbedaan terhadap waktu Greenwich (GMT ) dalam jam	Econtoh: +0200
P	Perbedaan terhadap waktu Greenwich time (GMT)  dalam jam ada titik dua antara jam dan menit(PHP 5.1.3)	Contoh: +02:00
T	Singkatan Timezone	Contoh: EST, MDT …
Z	Timezone offset in seconds. The offset for timezones west of UTC is always negative, and for those east of UTC is always positive.	-43200 through 50400
Full Date/Time	—	—
c	Tanggal ISO 8601 (PHP 5)	2004-02-12T15:19:21+00:00
r	Format tanggal RFC 2822	Fri, 18 jul 2016 17:10:22 +0800
U	Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT)	See also time()

Cascading Style Sheets

Cascading Style Sheets

1.    Pengertian CSS

            CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

Css di ada 3 macam:

1.      Inline = elemen html, penulisannya terdapat dalam tagnya.

contoh: <a style=”color:blue;>

Kekurangan Inline : Jika memiliki element yang sama proprti yang lain akan mengikuti atau bisa di bilang selektornya tidak boleh sama.

2.      Internal = Dokument Html, penulisanya di dalam dokumen html.

contohnya : <style>Internal css</style>

3.      Eksternal = Css dan HTML terpisah, menghubungkan css dan link dengan HTML.

Strucktur Penulisan CSS

Selektor{property:value;}

1.      Selektor adalah element apa yang ingin kamu ubah, berupa tag html,class atau  id.

·         HTML cara memanggilnya langsung saja. Contohnya a{color:green;}

·         CLASS cara memanggilnya harus menggunakan (.). Contohnya .a{color:green;}

·         ID cara memanggilnya menggunakan (#). Contohnya #a{color:green;}

2.      Property adalah elemen apa yang ingin di ubah, contohnya misalnya element a yang mau di ubah  adalah font,color, dll.

3.      Value adalah nilai dari property yang ingin di ubah.

2.    Definisi CSS

Apa itu CSS ?

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web. 

fungsi css

fungsi utama css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.

4.    Cara kerja css

cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html.

Konten

            Konten pada dasarnya memiliki border

Ø Jarak antara border dan konten di sebut padding

Ø Jarak antara border dengan element-element yang lain di sebut margin

Ø jenis border ada 3 macam :

a.         solid (______)

b.        Dash (- - - - - -)

c.         dot (. . . . . .)

Berikut adalah beberapa warna dalam css

                         

·                     red	·                     lime
·                     maroon	·                     aqua
·                     yellow	·                     blue
·                     orange	·                     navy
·                     green	·                     fuchsia
·                     olive	·                     purple
·                     gray	·                     black
·                     silver	·                     white

           

Cara Membuat Table Dengan Css tipe Eksternal

Kode CSS :

a{

  border: 1px solid red;

  padding: 1px 0px;

  background-color:grey;

  color: black;

  font-weight: bold;

  font-family: arial;

  text-decoration: none;

  display: block;

  width: 100px;

  text-align: center;

 }

 a:hover{

  color: black;

  background-color: skyblue;

 }

 a:active{

  background-color: red;

 }

 table {

  border-collapse: collapse;

  width: 500px;

  margin: 25px;

  font-family: arial;

 }

tr, td {

 border: 1px solid red;

}

 .no1{

  background-color: violet;

  border-radius: 1px 1px; a{

  border: 1px solid red;

  padding: 1px 0px;

  background-color:grey;

  color: black;

  font-weight: bold;

  font-family: arial;

  text-decoration: none;

  display: block;

  width: 100px;

  text-align: center;

 }

 a:hover{

  color: black;

  background-color: skyblue;

 }

 a:active{

  background-color: red;

 }

 table {

  border-collapse: collapse;

  width: 500px;

  margin: 25px;

  font-family: arial;

 }

tr, td {

 border: 1px solid red;

}

 .no1{

  background-color: violet;

  border-radius: 1px 1px;

 }

 .no2{

  background-color: white; 

 }

 .no2:hover{

  background-color: grey;

 }

 .no3{

  background-color: yellow;

 }

 .no3:hover{

  background-color: red;

 }

.no4{

  background-color: brown;

 }

 .no4:hover{

  background-color: blue;

 }

.no5{

  background-color: green;

 }

 .no5:hover{

  background-color: purple;

}

 }

 .no2{

  background-color: white; 

 }

 .no2:hover{

  background-color: grey;

 }

 .no3{

  background-color: yellow;

 }

 .no3:hover{

  background-color: red;

 }

.no4{

  background-color: brown;

 }

 .no4:hover{

  background-color: blue;

 }

.no5{

  background-color: green;

 }

 .no5:hover{

  background-color: purple;

}

ul li{

list-style:none;

display: inline-block;

}

Code Html :

 <html>

<head>

<title>mey.html</title>

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

</head>

<body>

<table border="1">

    <th class="no1">No</th>

    <th class="no1">Nama Lengkap</th>

    <th class="no1">Umur</td>

    <th class="no1">Pekerjaan</th>

    <tr class="no2">

         <td>1</td>

         <td>Sukarjono</td>

         <td>56 tahun</td>

         <td>Karyawan KNE</td>

    </tr>

    <tr class="no3">

         <td>2</td>

         <td>Rubiyati</td>

         <td>52 tahun</td>

         <td>Ibu Rumah Tangga</td>

    </tr>

    <tr class="no2">

         <td>3</td>

         <td>Sigit Saputro</td>

         <td>24 tahun</td>

         <td>Karyawan YUM</td>

    </tr>

    <tr class="no3">

         <td>4</td>

         <td>Mey Dwi Nurcahyani</td>

         <td>19 tahun</td>

         <td>Kuliah</td>

    </tr>

    <tr class="no2">

         <td>5</td>

         <td>Nor Ares Prastiyo</td>

         <td>15 tahun</td>

         <td>Smp</td>

    </tr>

    <tr class="no3">

         <td>6</td>

         <td>Devi Putri Wardani</td>

         <td>10 tahun</td>

         <td>Sd</td>

    </tr>

</table>

<ul>

         <li><a href="mey" class="menu">Beranda</a></li>

         <li><a href="mey" class="menu">Profil</a></li>

         <li><a href="mey" class="menu">Galeri</a></li>

</ul>

</body>

</html>

Hasil output dari tipe eksternal

Catatan: Yang harus kalian ingat dari tipe eksternal ini css dan html terpisah, beda dengan table css tipe internal. Berikut adalah cara membuat table dengan tipe external .Caranya buat table terdahulu dengan menyimpan file dengan (.html), lalu buka file yang sama dan buat folder baru dengan ctrl+n atau klik new file pada sublime dan menyimpan file dengan (.css)

Berikut adalah script Table CSS tipe internal

<html>

<head>

<title>mey.html</title>

</head>

<body>

   <h2 style="background-color:black;color:white;">

   Contoh Table Cascading Style Sheets

   </h2>

</body>

<style>

 a{

  border: 1px solid red;

  padding: 1px 0px;

  background-color:grey;

  color: black;

  font-weight: bold;

  font-family: arial;

  text-decoration: none;

  display: block;

  width: 100px;

  text-align: center;

 }

 a:hover{

  color: black;

  background-color: skyblue;

 }

 a:active{

  background-color: red;

 }

 table {

  border-collapse: collapse;

  width: 500px;

  margin: 25px;

  font-family: arial;

 }

tr, td {

 border: 1px solid red;

}

 .no1{

  background-color: violet;

  border-radius: opx opx;

 }

 .no2{

  background-color: white; 

 }

 .no2:hover{

  background-color: grey;

 }

 .no3{

  background-color: yellow;

 }

 .no3:hover{

  background-color: red;

 }

.no4{

  background-color: brown;

 }

 .no4:hover{

  background-color: blue;

 }

.no5{

  background-color: green;

 }

 .no5:hover{

  background-color: purple;

}

</style>

<body>

<table border="1">

   <th class="no1">No</th>

   <th class="no1">Nama Lengkap</th>

   <th class="no1">Umur</th>

   <th class="no1">Pekerjaan</th>

   <tr class="no2">

        <td>1</td>

        <td>Sukarjono</td>

        <td>56 tahun</td>

        <td>Karyawan KNE</td>

   </tr>

   <tr class="no3">

        <td>2</td>

        <td>Rubiyati</td>

        <td>52 tahun</td>

        <td>Ibu Rumah Tangga</td>

   </tr>

   <tr class="no2">

        <td>3</td>

        <td>Sigit Saputro</td>

        <td>24 tahun</td>

        <td>Karyawan YUM</td>

   </tr>

   <tr class="no3">

        <td>4</td>

        <td>Mey Dwi Nurcahyani</td>

        <td>19 tahun</td>

        <td>Kuliah</td>

   </tr>

   <tr class="no2">

        <td>5</td>

        <td>Nor Ares Prastiyo</td>

        <td>15 tahun</td>

        <td>Smp</td>

   </tr>

   <tr class="no3">

        <td>6</td>

        <td>Devi Putri Wardani</td>

        <td>10 tahun</td>

        <td>Sd</td>

   </tr>

</table>

</body>

<body>

   <a href="mey.html" class="Menu"> Profil</a>

</body>

</html>

Keterangan :

1.      Dalam inputan saya  ini saya menggunakan padding: 2px 5px; yang di maksud untuk mengukur jarak antar konten dan border 2px pertama untuk mengkur atas dan bawah sedangkan 5px yang kedua untu menggukur kanan dan kiri.

2.      Border-radius berfungsi untuk membuat lengkungan pada box tag html

3. .no2{

  background-color: white; 

 } Perintah seperti ini untuk mengubah tampilan warna.

4. .no5:hover{

  background-color: purple;

} Perintah seperti ini berfungsi ketika kursor menyentuh link warna akan berubah sesuai dengan inputan yang telah kita masukkan.

5. a:active{

  background-color: red;

 } ini digunakan untuk mengaktifkan atau saat kita meng klik warna tampilan akan berubah.

6.      <tr class="no4"> menentukan warna baris cell agar dapat selang-seling menggunakan atribut class atau id.

7.      Margin berfungsi untuk menentukan posisi tabel tersebut sedangkan width berfungsi untuk mengubah lebar dari table.

8.      Display ada tiga macam

a. display: inline; berfunggsi mendefinisikan elemen yang sama dengan elemen yang lain.

b. display: none;berfungsi untuk tidak menampilkan elemen atau di anggap hilang

c. display: block; berfungsi untuk membuat baris baru pada elemen

Dandalam hal ini saya menggunakan display model block

9.      Border-collapse adalah properti css yang digunakan untuk menentukan tipe border. Ada border collapse (satu border) ,border separate (terpisah).

Output Dari Table Css tipe Internal

Selamat Mencoba ya