Jagowebdev

Berbagai Cara Memasukkan Script PHP ke Dalam HTML Dengan Aman

Sebelumnya telah kita bahas bagaimana cara membuat dan menjalankan kode php untuk pertama kali, kali ini, kita akan membahas bagaimana cara memasukkan script PHP ke dalam HTML

Dalam mengembangkan aplikasi berbasis PHP, bisa jadi memasukkan script PHP ke dalam HTML adalah hal yang mutlak dilakukan,  karena memang PHP ditujukan untuk aplikasi berbasis web dan aplikasi berbasis web tidak mungkin lepas dari HTML.

Memasukkan Script PHP Ke Dalam HTML

Pada dokumen HTML, kita dapat memasukkan script PHP di bagian mana saja, baik di atas tengah maupun bawah. Agar server dapat membedakan dokumen HTML dengan script PHP, maka kita perlu mendefinisikan open tag PHP  

Telah kita bahas pada artikel: Membuat dan Menjalankan Script PHP Pertama Kali Dengan Aman  bahwa untuk memulai PHP, kita perlu menggunakan open tag php. Dan open tag yang paling aman dan direkomendasikan untuk digunakan adalah <?php dan Shorthand echo <?=

Jika Server menemukan open tag ini, maka server akan memproses script PHP yang ada di dalam tag tersebut, selain kode tersebut, server akan membiarkan apa adanya.

1 Membuat File PHP

Pertama tama, buat file php dan simpan dalam direktori htdocs yang ada di dalam folder xampp, pada contoh ini, saya akan menyimpan semua file ke dalam direktori  E:\xampp\htdocs

Jika belum menginstall xampp:  Cara Install XAMPP di Windows – Panduan Lengkap

2 Menjalankan File PHP

Contoh 1:

Untuk contoh pertama, copy script berikut ini kemudian paste ke dalam sebuah file. Pada contoh ini, file saya beri nama  latihan.php  dan saya letakkan pada direktori htdocs:

<!DOCTYPE HTML>
<html>
<head>
	<title><?php echo 'Menggabungkan Script PHP ke Dalam HTML'?></title>
	<style>
		label {
			width: 100px;
			display: inline-block;
		}
		div {
			margin-bottom: 5px;
		}
	</style>
</head>
<body>
	<h2><?='Form Login'?></h2>
	<form method="post" action="">
		<div>
			<label>Email</label><input type="text" name="email" value="<?=@$_POST['email']?>"/>
		</div>
		<div>
			<label>Password</label><input type="password" name"password"/>
		</div>
		<input type="submit" value="Log In"/>
	</form>
</body>
</html>

Selanjutnya buka browser kemudian jalankan url http://localhost/latihan.php. Jika berhasil, maka hasil yang kita peroleh adalah sebagai berikut:

Menggabungkan Script PHP ke Dalam HTML

Jika kita lihat sourcenya (view-source) maka akan kita dapatkan output seperti ini:

Memasukkan Script PHP ke Dalam HTML - Source

Dari contoh diatas, terlihat bahwa script PHP berubah menjadi dokumen HTML biasa

Bagaimana browser tahu bahwa output yang dihasilkan kode HTML? hal ini dikarenakan setelah mengolah file PHP, server mengirim data ke browser berupa dokumen HTML biasa dengan identifikasi header  Content-Type: text/html

Contoh 2:

Contoh selanjutnya, kita akan menggunakan struktur kontrol  if dan else. Buka text editor dan copy-paste script berikut ini, kemudian simpan kedalam file latihan-2.php  pada direktori htdocs

<!DOCTYPE HTML>
<html>
<head>
	<title><?php echo 'Menggabungkan Script PHP ke Dalam HTML'?></title>
</head>
<body>
	<?php
	$email = 'user_email@gmail.com';
	// atau $email = $_SESSION['email'];
	
	// Jika user belum login
	if ($email == '')
	{
		?>
		<h2><?='Form Login'?></h2>
		<form method="post" action="">
			<div>
				<label>Email</label><input type="text" name="email" value="<?=@$_POST['email']?>"/>
			</div>
			<div>
				<label>Password</label><input type="password" name"password"/>
			</div>
			<input type="submit" value="Log In"/>
		</form>
		<?php
	} else {
	// Jika login, tampilkan halaman user
		?>
		<h2>Selamat datang <?=$email?></h2>
		<ul>
			<li><a href="#">Lihat atau edit profil</a></li>
			<li><a href="#">Ubah Password</a></li>
			<li><a href="#">Logout</a></li>
		</ul>
		<?php
	}?>
</body>
</html>

Selanjutnya, jalankan file tersebut dengan menuliskan alamat http://localhost/latihan-2.php pada browser. Jika berhasil, maka hasil yang kita peroleh adalah sebagai berikut:

Cara Menulis Script PHP ke Dalam HTML

Pada contoh diatas terlihat bahwa hanya kode HTML yang ada di blok else yang ditampilkan.

Jika sobat belum paham tentang struktur kontrol  if dan  else,  sobat dapat mempelajarinya lebih lanjut pada artikel:  Memahami If Else Pada PHP (dan Elseif)

Contoh  3:

Pada contoh ketiga ini kita akan memasukkan script PHP ke Dalam HTML menggunakan perintah include.

Melanjutkan contoh nomor 1, kita akan memisah script PHP pada contoh tersebut menjadi dua bagian kemudian menggabungkannya menggunakan perintah include.

Pertama kita buat file form.php  yang berisi kode berikut ini dan letakkan pada direktori htdocs:

<h2>Form Login</h2>
<form method="post" action="">
	<div>
		<label>Email</label><input type="text" name="email" value="<?=@$_POST['email']?>"/>
	</div>
	<div>
		<label>Password</label><input type="password" name"password"/>
	</div>
	<input type="submit" value="Log In"/>
</form>

Kemudian buat file latihan-3.php dan copy-paste script berikut:

<!DOCTYPE HTML>
<html>
<head>
	<title><?php echo 'Menggabungkan Script PHP ke Dalam HTML'?></title>
	<style>
		label {
			width: 100px;
			display: inline-block;
		}
		div {
			margin-bottom: 5px;
		}
	</style>
</head>
<body>
	<?php include 'form.php'; ?>
</body>
</html>

Selanjutnya buka browser dan jalankan alamat http://localhost/latihan-3.php. Jika berhasil, maka hasil yang kita peroleh adalah

Memasukkan Script PHP ke Dalam HTML Dengan Perintah Include

Contoh diatas menunjukkan bahwa script PHP pun dapat ditulis secara terpisah.

Jika sobat belum paham tentang include ini tidak apa apa, intinya, contoh diatas menunjukkan banyak cara memasukkan script PHP ke dalam HTML.

Lebih lanjut tentang include pada PHP:  Memahami Include, Include_once, Require, dan Require_once Pada PHP

3 Penggunaan echo

Pada contoh diatas kita banyak menggunakan perintah echo. Perintah ini sendiri merupakan perintah utama untuk mencetak string/output ke dokumen html.

Apa itu string? string adalah tipe data berupa teks. Komputer berbeda dengan manusia, jika kita menyebut tulisan adalah teks, maka program / komputer menyebutnya string.

String dengan echo dapat ditulis menggunakan satu tanda kutip maupun dua tanda kutip, misal:

<?php
	echo 'Mencetak string menggunakan satu tanda kutip';
	echo "Mencetak string menggunakan dua tanda kutip";
?>

Lebih lanjut tentang string:  Cara Penulisan String Pada Pada PHP

Penutup

Banyak variasi untuk memasukkan script PHP ke dalam HTML,  contoh yang kita bahas diatas merupakan contoh riil yang bisa jadi sobat jumpai di kemudian hari.

Demikian pembahasan mengenai cara memasukkan script PHP ke dalam HTML, semoga bermanfaat.

Subscibe Now

Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com

Komitmen Kami: Kami senantiasa menghargai privasi Anda dan tidak akan membagikan identitas Anda ke pihak manapun.

34 Feedback dari pembaca

  • Saya mau menanyakan soal modifikasi dari fungsi breadcrumbs disini, karena mungkin lebih berkaitan dengan topik artikelnya mengenai penggabungan antara script php dan css dalam 1 file. Cuma kalau saya tuliskan langsung disini tidak bisa di submit, krn akan error 404 webnya mas”

    Jadi saya coba paste kan pertannyaan yang saya maksudkan ke tiny paste: http://pasted.co/8b54aa39

    Reply

    • Coba ini mas:

      $rainbow = array('btn-info','btn-success','btn-warning');
for($i = 0; $i < count($this->location->path); $i++)
{
	echo '<a href="' .$this->makeLink(false, false, null, null, null, 
	$this->location->getDir(false, true, false, count($this->location->path) - $i - 1)). '" class="btn ' . $rainbow[$i] . '">';
	echo $this->location->getPathLink($i, true);
	echo '</a>'; 
}

      Tinggal diganti isi variabel $rainbow nya

      Reply

      • Ok mas terima kasih atas bantuannya. Memang dari script php yang saya temukan perlu banyak hal yang dimodifikasi cssnya menggunakan bootstrap. Hanya saja ketika menemui fungsi yang terdapat “for($i = 0; $i …” saya masih belum memahami bagaimana cara mengartikan/membacanya. Maklum karena memang bukan lulusan programming/IT jadi biasanya hanya coba-coba dari referensi di internet.

        Ada fungsi lain yang saya temukan dalam scriptnya, yaitu menghitung disk usage dalam format B, KB, MB, GB, dst..
        Ini memang banyak saya jumpai, hanya saja apabila hasil perhitungan negatif maka format yang bisa ditampilkan hanya dalam Bytes.

        Saya pun coba-coba membuat fungsi yang bisa menampilkan format B, KB, MB, GB untuk hasil perhitungan yang negatif. Hanya saja masih menggunakan if else. Apakah bisa kalau dibuat menjadi lebih singkat dengan “for($i = 0; $i …”

        Fungsi yang saya maksudkan: http://pasted.co/2a8d61e7

        Jadi bagimana cara membuat fungsi kebalikannya seperti yang function formatSize, atau digabungkan keduanya dalam satu fungsi yang dapat menampilkan baik itu positif maupun negatif.

        Reply

        • For dan if else beda peruntukan mas, masing masing memiliki fungsi sendiri sendiri, tidak bisa saling menggantikan. Intinya for digunakan untuk perulangan, if else untuk menguji kondisi.

          Terkait dengan menghitung disk size, memang bisa menggunakan for atau if else, tergantung teknik yang digunakan. Untuk fungsi formatSize seperti yang ada di contoh, memang tidak menguji kondisi, dia hanya membuat kriteria nilai byte berdasarkan basis 1024 kemudian dicocokkan dengan list yang ada.

          Programming adalah seni untuk menyelesaikan suatu masalah, karena seni, maka tidak ada batasan cara yang harus ditempuh untuk menyelesaikan masalah tersebut. Ada ribuan cara untuk menyelesaikan suatu masalah, tidak perlu meniru gaya orang lain, karena setiap orang memiliki gaya sendiri-sendiri, tetapi mempelajadi coding orang lain penting untuk meningkatkan performa coding kita.

          Untuk yang dicontohkan:

          <?php
function formatSize( $bytes ) {
	$types = array( 'B', 'KB', 'MB', 'GB', 'TB' );
	for( $i = 0; $bytes >= 1024 && $i < ( count( $types ) -1 ); $bytes /= 1024, $i++ );
		return( round( $bytes, 2 ) . " " . $types[$i] );
}
?>

          Banyak diantara kita yang tidak mengerti alur coding diatas, tidak perlu susah, yang penting apa yang dapat dilakukan oleh fungsi tersebut, tulis dengan cara kita, misal:

          <?php
function formatSize( $bytes ) {
	$types = array( 'B', 'KB', 'MB', 'GB', 'TB' );
	for( $i = 0; $bytes >= 1024 && $i < ( count( $types ) -1 ); $i++ ) {
		$bytes /= 1024;
	}
	
	return( round( $bytes, 2 ) . " " . $types[$i] );
}

echo formatSize(10546); // 10,3 KB
?>

          Catatan: untuk peeulangan for bisa dipelajari disini Memahami Perulangan For Pada PHP

          Reply

  • sepertinya ada kesalahan ddi scrip latihan-3.php ,discript dituliskan ‘data.php’,padahal diatas adanya ‘form.php’ terima kasih

    Reply

  • izin bertanya,Kalo input data di html,trs nanti outputnya tuh di php,nah kalo di script php di tambahkan “back” biar kembali ke tampilan HTML nya gimana ???

    Reply

  • bisa bantu saya bang Agus, saya diminta integrasi ini k web saya. bs kah ini diubah ke html?

     'api_key_merchant', // API Key Merchant / Penjual
    'action'   => 'payment',
    'product'  => 'Nama Produk',
    'price'    => '101000', // Total Harga
    'quantity' => 1,
    'comments' => 'Keterangan Produk', // Optional
    'ureturn'  => 'http://websiteanda.com/return.php?q=return',
    'unotify'  => 'http://websiteanda.com/notify.php',
    'ucancel'  => 'http://websiteanda.com/cancel.php',
 
    /* Parameter untuk pembayaran lain menggunakan PayPal
     * ----------------------------------------------- */
    'invoice_number' => uniqid('INV-'), // Optional
    'paypal_email'   => 'email_paypal_merchant',
    'paypal_price'   => 1, // Total harga dalam kurs USD
    /* ----------------------------------------------- */
 
    'format'   => 'json' // Format: xml / json. Default: xml
 );
 
$params_string = http_build_query($params);
 
//open connection
$ch = curl_init();
 
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, count($params));
curl_setopt($ch, CURLOPT_POSTFIELDS, $params_string);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
 
//execute post
$request = curl_exec($ch);
 
if ( $request === false ) {
    echo 'Curl Error: ' . curl_error($ch);
} else {
 
    $result = json_decode($request, true);
 
    if( isset($result['url']) )
        header('location: '. $result['url']);
    else {
        echo "Error ". $result['Status'] .":". $result['Keterangan'];
    }
}
 
//close connection
curl_close($ch);
    Reply

  • Mau tanya pak, bagaimana membuat pilihan “PJU 1” dan “PJU2” yang kemudian apabila di klik di “PJU1” dia akan masuk dan ada tampilan nya. untuk tampilannya udh ada. tinggal cara membuat pilihan klik di PJU1 dan PJU2
    terimakasih pak

    Reply

    • Itu tinggal dibuatkan form options nya saja mas, selanjutnya menggunakan javascript event onchange untuk menangkap event ketika options berubah dan menggunakan ajax untuk menampilkan data

      Reply

  • kalau misalkan begini mas,
    saya punya sebuah theme blog berupa file PHP, lalu ingin digunakan dalam bentuk file html apakah bisa?
    Jika bisa mohon pencerahannya

    Reply

  • Mau nanya pak, untuk form ini format file typenya apakah harus php?
    bagaimana klo form yg saya buat ada di file type html?
    bagaimana cara merubah file format html ke php?

    terima kasih.

    Reply

  • pak saya kok ga bisa tag php di script html ya ,saya pakai code editor sablime text 3, mohon bntuannya pak

    Reply

    • Script PHP hanya bisa digunakan di file.php dan di file PHP tersebut bisa diberi script HTML. Jika file nya HTML tidak bisa mas, karena server (apache) tidak memparsing file selain php, HTML akan ditampilkan apa adanya.

      Reply

Silakan tinggalkan komentar

Newsletter

Jadilah yang pertama tahu berita terbaru dari Jagowebdev.com

Social

  1. Tutorial Grocery CRUD Lengkap
  2. Implementasi HMVC Pada Codeigniter 4
  3. Trik Coding Cepat dan Efisien Pada PHP
  4. PHP Admin Template Dashboard
  5. Prefix Tabel Pada Database, Perlukah?
  6. Same Origin Policy – Apa dan Bagaimana Mengatasinya?
  7. JSONP Dengan Javascript dan jQuery – Lintas Domain
  8. JSON Pada Javascript – Panduan Lengkap
  9. JSON Pada Dokumen HTML
  10. JSON Dari Database – PHP dan MySQL

Kategori