Pendahuluan

Menurut W3schools.com PHP is a server scripting language, and a powerful tool for making dynamic and interactive Web pages.

PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
Sedangkan menurut pemahaman penulis dari sumber tersebut php merupakan bahasa pemrograman yang berjalan disisi server memiliki kelebihan yang sangat banyak untuk membuat web yang interaktif dan php digunakan secara meluas secara gratis tidak seperti pesaingnya bahasa pemrograman ASP yang bisa anda dengan cara berbayar.

Jaminan mutu dan kualitas bahasa php sudah tidak diragukan lagi karena hampir semua situs-situs web paling terkenal didunia ini dibuat dengan bahasa php. berikut beberapa website yang dikembangkan dengan bahasa PHP.

1. Facebook — Facebook merupakan website yang menggunakan PHP sebagai dasar dan Anda tau bahwa Facebook merupakan salah satu situs jejaring sosial terbesar di dunia.

2. VK.com — Situs jejaring sosial nomor satu di eropa yang dibuat oleh developer Rusia ini menggunakan PHP untuk bahasa pemograman web nya.

3. Youtube — Situs video nomor satu didunia ini juga menggunakan teknologi PHP, Youtube saat ini dimiliki oleh Google.

4. Yahoo — Merupakan salah satu website yang paling banyak dikunjungi di dunia dengan lebih dari 627 juta pengunjung unik setiap bulannya.

5. Wikipedia — Sumber ilmu pengetahuan gratis dan terbaik untuk semua jenis informasi yang ada di website. Wikipedia dikembangkan menggunakan perangkat lunak yang disebut MediaWiki yang ditulis dengan PHP

6. Flickr — Website foto nomor satu didunia yang memiliki 2,5 miliar foto ini dibuat dengan menggunakan PHP

7. WordPress.com — WordPress juga dikembangkan dengan PHP dan Javascript dan ditambah dengan jQuery untuk bantuan animasi web dan pengelolaan event.

8. Digg — Website merupakan situs berbagi konten yang juga menggunakan PHP

9. SourceForge.net — Situs berbagi source code dan juga tempat untuk mendownload repositori yang terbesar didunia ini juga menggunakan PHP

10. iStockPhoto — Sebuah website penyedia stok foto terbesar yang juga menggunakan PHP, website ini dimiliki oleh Getty Image yang sudah ternama dalam hal jual beli foto online.

Masih banyak lagi website raksasa yang menggunakan PHP, diantaranya baidu dari china, ada juga blogspot situs blog gratisan yang sangat banyak digunakan oleh para blogger, serta website TED yang merupakan website presentasi berbagai hal yang paling terkenal didunia. sumber:http://www.jurnalweb.com/.

Bagaimana, ingin menjadi seseorang yang mampu membangun situs seperti diatas?. jika ya maka salah satu hal wajib yang harus anda lakukan adalah belajar pemrograman web server,atau server scripting language dan alternatif paling utama adalah mempelajari bahasa PHP. kemudian perlu penulis sampaikan juga bahwa menurut penulis situs yang paling kredibel untuk dipelajari calon programmer website didunia ini adalah w3schools.com disitu segala macam bahasa yang digunakan untuk belajar web disusun secara lengkap dan mendetail termasuk semua materi tentang bahasa pemrograman php. namun situs tersebut memiliki kendala khusunya bagi pengunjung yang tidak menguasai bahasa inggris seperti diindonesia. oleh karena itu penulis berinisiatif untuk mengambil materi pemrograman dari sana khususnya materi tentang dan menyampaikannya untuk pembaca. kemudian penulis berharap pembaca khususnya yang masih benar benar pemula untuk mengikutu materi PHP ini secara bertahap dan terurut. karena  semua materi bahasa pemrograman salah satunya PHP saling saling berkaitan satu dengan yang lainnya. sebagai gambaran anda kedepan mungkin walaupun materi variabel disampaikan diawal materi namun hampir semua project mulai dari tugas kuliah skripsi maupun yang sudah komersil pasti memakai pengetahuan tentangnya, begitupun materi materi pemrograman yang lain. jadi saran penulis ikuti materi pembelajaran bahasa pemrograman secara terurut. ok saya kira cukup pendahuluan dari penulis kali ini dan materi berikutnya adalah Pengenalan Bahasa Pemrograman PHP, terima kasih. 

Panduan Menggunakan Backend WEB Aplikasi Toko Online Simulator

Seperti janji penulis sebelumnya pada kesempatan kali ini penulis akan menjelaskan cara penggunaan backend web aplikasi toko online simulator namun tidak semua fitur akan dijelaskan karena hanya bagian bagian pokok saja yang sangat mungkin bisa untuk membantu pelajar/mahasiswa yang mendapat tugas dimata perkuliahan mereka dan kebetulan mengambil tema makalah tentang ecommerce termasuk toko online ini.kemudian setelah berhasil user berhasil login kehalaman admin maka menjumpai halaman dashboard/home dan langsung bisa melihat semua data produk yang sudah dientri berikut gambaran halaman dashboard aplikasi toko online ini

setelah itu tentunya suatu saat pemilik toko memiliki produk baru yang harus ditampilkan ke layar pembeli bukan?, mulai dari menampilkan foto produk yang baru, promosi produk unggulan, memberikan diskon dan meng update stok. beberapa hal tersebutlah yang hanya bisa ditangani oleh admin tentunya dan tidak bisa dilakukan oleh user manapun kecuali telah dibuatkan hak akses. pada tutorial kali ini penulis akan memberitahaukan bahwa kita hanya akan membahas tatacara pemilik toko untuk megontrol produk  mulai dari entri produk baru sampai data benar benar  bisa tampil ke layar pembeli tepatnya dibagian frontend web yang telah dijelaskan dan didemokan sebelumnya.

langkah pertama sebelum menginput data baru user harus terlebih dahulu menginput data kategori klik menu produk terletak dideretan menu samping kiri menu paling atas kemudian pilih kategori maka akan muncul daftar kategori berbentuk tabel.

berikut tampilannya

kemudian klik tombol berwarna hijau lalu akan muncul form data kategori dan silahkan isi datanya kebetulan cuma satu data saja yang perlu diinputkan. berikut contoh tampilan form input data kategory.

selanjutnya isi data produk caranya seperti yang telah dijelaskan sebelumnya pada saat input kategory namun pilihlah submenu list produk berikut tampilannya

kemudian klik tombol berwarna biru dan berlogo tambah . mohon maaf tidak konsisten dengan desain sebelumnya karena sampai saat artikel ini ditulis aplikasi masih dalam proses pengembangan. kemudian akan tampil form data produk maka isikan seluruh kotak isian yang tersedia dengan satu catatan pada pilihan kategori pilihlah  kategori produk yang baru saja diinputkan berikut ilustrasinya formnya

dan langkah terakhir untuk bisa menampilkan data produk dihalaman web pembeli maka harus mengisi data stok khususnya produk yang baru saja isikan langkah dan caranya sama dan kembali saya ingatkan pada saat ada pilihan produk diform isian maka pilihlah produk yang baru saja anda input tadi dan simpanlah data. berikut bentuk tampilan form input data stok.

setelah stok berhasil diisi segera kembali kehalaman pembeli untuk memeriksa apakah data sudah tampil dilayar pembeli silahkan kunjungi link ini halaman pembeli dan mohon untuk diperiksa dengan cermat perhatikan juga kategory dan stoknya jika semua arahan kami pembaca ikuti dengan benar maka data akan tampil disana. sebenarnya ada satu fitur yang sangat perlu penulis sampaikan disini yakni fitur transaksi. namun harus saya akhiri sampai disini. namun penulis janji untuk bisa menuliskannya untuk pembaca harap ditunggu dan akan penulis sampaikan diartikel ini jadi tunggu update kami ya :D, sekian dulu

Integrasi HTML CSS

Alhamdulillah, setelah sempat terputus akibat posting tentang aplikasi  toko online kini penulis dapat kembali menuliskan artikel tentang pengintegrasian satu kompen web dengan komponen web lainnya. seperti terlihat pada judul post ini kedepan penulis akan menyampaikan materi tentang Integrasi antara css dengan html. sebelumnya apa itu css ?, menurut situs www.w3schools.com CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. CSS describes how elements must be rendered on screen, on paper, or in other media.

yang dapat penulis simpulkan sebagai berikut css merupakan bahasa yang digunakan untuk meghias elemen html maupun xml yang hai akhirnya dapat ditampilkan dilayar web yang anda beri css sebelumnya print out kertas maupun media lainnya. tidak seperti javascript maupun php css tidak bisa berdiri sendiri sebagai komponen pendukung web dan seperti yg telah dijelaskan minimal anda harus membuat format html maupun xml untuk bisa mempraktekan materi tentang css ini. sebenarnya tag html sendiri sudah mampu menghias dirinya tanpa melalui css tapi seperti memberi warna,mengubah ukuran form memberi sedikit efek animasi dsb. namun cara itu sudah angat ketinggalan dan hampir bisa dipastikan pemrograman web moderen sudah meninggalkan cara tersebut, karena terlalu kaku dan sudah tidak sejalan dengan prinsip pemrograman dinamis yang menjadi trend sekaligus pada era moderen ini.

contoh script berikut akan manampilkan sebuah elemen html yang dihias dengan properti milik tag html itu sendiri tidak melalui css

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1 text color=red >

<marquee>

<font color="red">Animasi dan ornamen ini tampil tanpa menggunakan CSS</font >

</marque>

</h1>

</body>

</html>

Silahkan copy paste script diatas kedalam notepad atau notepad ++ dan simpan dengan ekstensi ".html" tanpa tanda petik dan buka file tersebut dengan cara klik ganda maka akan muncul tampilan running text berwarna merah dilayar pembca. mungkin itu sedikit gambaran tentang html styling/pemberian ornamen pada elemen html tanpa css. kemudian untuk bisa mempelajari materi tentang css secara utuh pembaca dapa mengunjungi link ini. karena pada artikel ini penulis hanya akan membahas cara pengintegrasian antara css dan html saja. kemudian untuk bisa mengintegrasikan antara html dan css ada beberapa teknik beberapa teknik yang umum diantarannya

• Inline style
• Internal line style
• dan external line style

namun karena menyesuaikan dengan struktur artikel ini yang  yang disampaikan secara berkelanjutan  dan tahap demi tahap penulis hanya akan membahas mengenai inline saja dan mudah mudahan kedepan 2 tekniklainnya bisa penulis terbitkan.

teknik penulisan css secara inline dilakukan dengan cara memasukan script css secara lansung kedalam tag elemen html html.
 contoh 1 menyisipkan script css ke tag <h1></h1>
<!DOCTYPE html>
<html>
<body>
<h1>text ini belum diformat dengan css.</h1>
<h1 style="color:blue;margin-left:30px;"> text ini telah diformat dengan css.</h1>
</body>
</html>
kode yang berwarna merah ini  style="color:blue;margin-left:30px;" merupakan code css cara disampingkan merupakan salah satu cara membuat ornamen pada elemen html tepatnya untuk merubah text yang diharapkan berwarna biru. kemudian dengan cara seperti artikel artikel sebelumnya tentang cara menentukan extensi file maka simpan kode tersebut dengan extensi .html contoh  integrasike4.html. kemudian. jika berhasil akan tampil halaman seperti berikut:
gambar contoh 1

selain memformat text yang ada didalam tag html css juga memformat tagnya itu  sendiri contoh tag <p> </p> berikut akan kami format menjadi border

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Menambahkan border ke elemen/tag html</h2>
<p>This property specifies the width of the four borders:</p>
<p style ="  border-style: solid;   border-width: 5px; height:100px;">Bisa dsisipkan text disini.</p>
</body>
</html>
jika script tersebut dijalankan akan muncul tampilan seperti ini
gambar contoh 2

dari 2 contoh yang ada bisa dijadikan salah satu trik untuk membuat layout website ataupun blog jika anda mau sedikit berkreasi disana contoh :

gambar contoh 3

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h2>Membuat layout web sederhana</h2>
<!---tag induk---->
<div style ="  border-style: solid;   border-width: 5px; height:400px;"> 
    <div style ="float:left;border-style: solid;  height:10%; width:100%;"> 
header 
    </div>
    <div style ="float:left; border-style: solid;  height:75%; width:25%;">
           menu/navigasi 
    </div>
    <div style ="float:left; border-style: solid;  height:75%; width:73%;">
           content blog/artikel 
    </div>
    <div style ="float:left; border-style: solid;  height:10%; width:100%;"> 
     footer
    </div>
</div>
</body>
</html>

pada contoh diatas penulis sengaja memakai tag <div > </div> agar menambah wawasan lain bagi pembaca dan sebenarnya hampir semua tag html bisa disisipi script css namun penulis pilihkan secara acak untuk contoh program selanjutnya jalankan script yang penulis berikan kedalam browser maka akan tampil tampilan seperti berikut:

gambar contoh ke 3 implementasi untuk layout web/blog

demikian materi tentang integrasi antara komponen html dengan css yang bisa penulis sampaikan selanjutnya materi tentang integrasi akan penulis sambung setelah artikel tentang native php,native javascript dan native html penulis berikan. namun dalam bentuk framework maupun contoh pada sebuah project pembuatan web didalam web developement. jika ada yang masih bingung bisa tinggalkan comment dan akan hadir materi selanjutnya Native PHP. terimakasih

Panduan Demo Toko Online Simulator

Tujuan penulisan demo toko online ini sebagai upaya untuk memberi langkah-langkah yang benar dalam pemakaian aplikasi ini, karena satu langkah saja user mengabaikan atau tertukar dari urutannya bisa dipastikan aplikasi ini tidak akan memberikan hasil seperti yang diinginkan pemakaiannya. dan akan dan cukup menimbulkan  rasa frustasi terutama bagi tipe pengguna yang ceroboh dan terburu-buru kayak penulis sendiri :D.

dalam pemaparan yang akan dituliskan kedepannya akan menggunakan  sekenario yang terjadi antara pembeli yang hendak memesan dan membayar barang secara online diformulir pemesanan aplikasi lebih umumnya disebut sistem keranjang belanja digital  dengan pihak pemilik toko yang memberikan pelayanannya secara online juga seperti mengetahui daftar pemesan, mengetahui pengunjung/calon pembeli mana saja yang tertarik dengan produknya saat itu juga dan masih banyak aktifitas lainnya. dan posisi pemakai harus menjalani 2 peran ini sekaligus  jika memang sendiri dan lebih baik lagi bisa diperankan banyak kelompok orang/user supaya proses simulasinya terlihat lebih natural dan akan lebih dipahami manfaat pemakaian aplikasi ini bagi yang membutuhkan.

tahap pertama jika hanya user sendirian untuk mendemokan  maka langkah pertama user harus berperan sebagai pembeli dan silahkan kunjungi link berikut: link demo kemudian lihatlah beberapa produk yang ada dan pilih salah satu produk yang ingin dibeli. ketika ingin membeli produk .maka untuk sementara user dalam hal ini pembeli harus melakukan login terlebih dahulu

tampilan menu login

 kemudian jika belum pernah mendaftar sebelumnya maka harus register terlebih dahulu di 

form register sebelah kanan layar 

jika registrasi sukses ingat kembali password dan username sebagai pembeli bila perlu buat catatan untuk menyimpannya atau foto menggunakan kamera sebagai antisipasi supaya tidak lupa.

jika registrasi berhasil anda akan mendapat pemberitahuan semacam ini: perhatikan tulisan yang ditandai

jika gagal akan muncul pesan query empty penyebabnya kemungkinan ada data yang tidak valid namun dipaksa untuk diinputkan atau karena masalah trafic jaringan hosting kami. untuk penyebab terakhir harap dimaklumi hosting gratisan :D heheee

kemudian jika berhasil jangan pindah halaman atau melakukan apapun dahulu dan segara  login dengan mengisi form pada layar sebelah kiri dengan akun yang dibuat sebelumnya jadi pada aplikasi ini form login dan registrasi dibuat menggunakan model yang menyatu seperti facebook. kemudian klik button login 

setelah login sukses dan ingin kembali melihat barang dan membeli produk yang yang anda sukai/pilih maka klik icon/logo geek inovation studio letaknya di pojok kiri paling atas. kemudian klik tombol beli untuk membeli produknya maka anda akan menuju layar keranjang belanja dan melihat barang yang anda inginkan sudah ada di keranjang, jika masih ingin membeli barang lagi kembeli klik icon geek inovation studio dan lakukan hal yang sama seperti sebelumnya. 

berikut tampilan keranjang belanja digital aplikasi ini

jika sudah sudah selesai dan ingin membayar klik check out, seketika itu juga data belanjaan anda secara lengkap sekarang sudah masuk invoice dan keranjang belanja telah dikosongkan. jika ingin menambah belanjaan lakukan langkah seperti sebelumnya sampai melakukan check out setiap ingi nmengakhiri sesi. berikut contoh tampilan invoice. 

terakhir anda perlu transfer kerekening yang diminta jika sudah pasti membeli produk produk yang diinginkan. jika transfer sudah selesai bisa langsung kontak administrator untuk dicheck pembayaran anda dan segera dilakukan pengiriman.heeeem melelahkan juga buat dokumentasi program. makannya ane mikir perlu 1000 kali jika harus memiliki pekerjaaan pokok selain penulis. kecuali terpaksa untuk update blog ini.ok lanjut!

sampai disini saya yakin sebenarnya prosesnya sama seperti toko online manapun dan sebenarnya bisa didemokan ditoko online yg nyata , tapi ada satu hal penting yang tidak akan anda tahu, yakni apa yang dilakukan admin web/pemilik toko disana sehingga sebanyak apapun pembeli yang memilih secara online bisa dilayani dengan begitu cepat dan akurat sampai proses pengiriman, mudah 2xhan anda memahami ini :D, pada pembahasan inilah jawabannya.

 ok sekarang kita akan mendemokan aplikasi toko online ini disisi penjual atau backend side. sebelumnya buka url ini untuk masuk sebagai admin masuk admin dan demi menghindari perusakan situs demo ini oleh pihak 2x yang tidak bertanggung jawab silahkan pengguna kirim email ke penulis dialamat email ini alimin1313@gmail.com atau add dan kirim permohonan lewat inbox facebook penulis disini facebook penulis  setelah mendapatkan passwordnya harap menjaga kepercayaan penulis untuk tidak mencoba berbuat jahil di aplikasi demo online ini karena anda menjadi pengguna secara mutlak dan memiliki akses untuk melakukan apapun berbeda dari demo sebelumnya. 

untuk demo back end penulis akan lanjutkan dientri post berikutnya jadi jika ada pertanyaan khususnya tentang masalah pemakaian frontend bisa tinggalkan komentar, artikel berikutnya insya Allah lebih penting kontentnya karena menyangkut masalah hak akses admin web yang jarang  sekali diketahui masyarakat awam, next post panduan menggunakan backend web aplikasi toko online..

Toko Online Simulator gisecoomerce

Toko Online Simulator yang penulis namakan dengan gisecommerce merupakan produk turunan yang pertama kali dikembangkan oleh Developer asal jogjakarta candra adiputra. Toko online beliau bernama Candralab eCommerce, adapun penulis  memodifikasi dan berusaha mengembangkan sistem yang ada ini ditujukan untuk keperluan study sekaligus  untuk memberikan gambaran yang konkret dan komprehensif tentang sebuah alur sistem yang berjalan pada aplikasi-aplikasi e-commerce walaupun tidak secanggih dan selengkap toko-toko online besar yang ada sekarang ini baik lokal maupun internasional seperti lazada.com, lamido.com, dan juga amazone.com dan lain sebagainya namun aplikasi yang dikembangkan   kami ini insya Allah sudah memiliki fitur-fitur pokok atau dalam istilah dunia sistem informasi disebut kebutuhan fungsional dan aplikasi yang kami kembangkan ini sudah melengkapi persyaratan kebutuhan fungsional yang paling penting seperti 

frontend /

frontend frontendside adalah bentuk tampilan aplikasi yang nantinya secara langsung diakses oleh calon pembeli atau customer pada bagian front ini dirancang sitem antarmuka yang mudah pemakaiannya user/ friendly baik melalui proses login atau tidak adapun bagian  frontend aplikasi toko online ini memiliki memiliki fasilitas atau fitur sebagai berikut:

• fasilitas untuk menampilkan produk produk secara online untuk semua calon pembeli 
• fasilitas untuk untuk monitoring/melihat stock ketersedian produk yang ditampilkan serta secara otomastis memperbaharuinya meyesuaikan dengan transaksi penjualan
• fasilitas menampilkan berita untuk promosi  toko pemilik web
• fasilitas untuk mengupdate diskon dari tiap 2x produk toko pemilik web
• kedepan insayallah akan bisa menampilkan best sellerproduk toko pemilik web
• dan beberapa kebutuhan pokok bagian frontend lainnya 

contoh tampilan frontend web

backend

backend side adalah bentuk tampilan aplikasi yang nantinya hanya bisa diakses oleh pemilik web toko online yang bersangkautan. sebagai contoh kecil untuk gambaran pembaca tentang relasi antara fitur fitur yang dimiliki antara backend dan frontend  seperti ini, semisal menu aplikasi bagian frontend memiliki fasilitas yakni mampu menampilkan produk produk yang dimiliki toko pemilik web kepada pembeli. tentu saja produk-produk yang akan ditampilkan perlu di entri terlabih dahulu toh", kemudian siapa yang akan meng input produk - produk yang tampil difasilitas frontend tadi ? oleh karena itu maka dibuatlah backend dimana secara terpisah memiliki sistem login sendiri yang ditujukan hanya untuk pemilik toko yang menggunakan layanan web dibagian backend inilah apa yang ada dibagian frontend secara berkala selalu diperbaharui baik penghapusan penambahan pengubahan pengubahan data produk.

adapun fasilitas atau fitur-fitur yang dimiliki backend web pada aplikasi toko online ini sebagai berikut

• fasilitas input data kategory produk
• fasilitas untuk menginput data produk
• fasilitas untuk menginput data persediaan jumlah/stock produk digudang
• fasilitas untuk menginput data berita 
• dan beberapa kebutuhan pokok bagian backend lainnya 

contoh tampilan backend web

point penting lainnya yang akan pembaca sampaikan yakni kepada siapa saja khususnya mahasiswa yang memiliki kepentingan pembelajaran, pihak yang berminat menggunakan produk toko online sejenis ini dan ingin mengetahui keseluruhan sistem kerjannya dan pihak 2x yang berkepentingan lainnya bisa menuju link berikut ini untuk mendemokan secara langsung demo toko online dan silahkan mengikuti tutorial berikutnya tentang panduan untuk demo toko online ini. materi selanjutnya Demo Toko Online Simulator

Integrasi PHP dengan HTML

sudah capek mikir dan nulis posting  seharian eeeh, postingan yang sudah terpublish kehapus terpaksa ane nulis lagi demi konsistensi dan memperbaiki struktur content blog ane yang rusak, sory curhatnya sist/bro :D, langsung saja ke pokok masalah yang akan disampaikan. 
php adalah salah satu bahasa pemrograman yang ada didunia ini dan masuk dalam kategory bahasa pemrograman server side artinya scipt yang kita tuliskan harus dijalankan di server web seperti apache, nginx, dan sebagainya sebenarnya masih ada banyak bahasa pemrograman sejenis php seperti asp untuk platform windows yang berbayar,jsp dan masih beberapa lagi namun yang paling populer adalah php bahkan faktanya hampir semua website besar yang ada dan kita tahu sekarang ini seperti google,facebook amazone seuanya memakai php sehingga bisa berdiri seperti sekarang. mungkin itu sedikit gambaran tentang php dari saya jika masih ingin mengetahui secara lebih mendetail tentang php bisa pelajari disitus berbahasa inggris w3schools.com pada pembahasan kali ini kita hanya akan membatasi topiknya sampai cara integrasi dengan html dan teknis bersangkutan lainnya untuk kepentingan praktik pembaca saja supaya bisa konsisten dengan tujuan pembuatan artikel ini.
sedangkan html adalah HTML adalah bahasa untuk memarkup (memformat) . HTML memberitahu Web Browser bagaimana cara menampilkan konten. HTML memisahkan "konten" (kata-kata, gambar, audio, video dan lainnya) sumber : https://developer.mozilla.org/id/docs/Web/Guide/HTML/Pengenalan untuk belajar lebih mendetail tentang html dan aturan aturannya lebih lengkap silahkan kunjungi link ini ok langsung saja ke proses codding. sebelum nya komputer anda minimal harus punya text editor notepad dan aplikasi webserver apache yang terdapat pada paket instalasi xampp untuk bisa instal xampp silahkan kunjungi link ini dan ikuti tutorialnya sampai selesai dan xampp benar benar terinstal.
jika sudah terinstal segera jalankan xampp dengan mengklik tombol start seperti ilustrasi berikut ini.


contoh xampp yang sudah dijalankan

kemudian buka text editor pembaca seperti yang sudah saya jelaskan sebelumnya dan copy paste script berikut ini ke text editor yang telah disiapkan:

contoh 1 integrasi php html
<!DOCTYPE html>
<html>
<body>

<?php
echo "My first PHP script!";
?>
</body>
</html>

script kode yang berwarna biru merupakan format html sedangkan script merah antara pada blok <?php ....?>  merupakan syntak/script dari  bahasa pemrograman php.
ok  selanjutnya buat folder dan berinam integrasike1 tanpa sepasi pada lokasi  ini.tapi ingat sesuaikan dengan folder htdocs yang ada setelah terinstalnya xampp pada komputer saya folder htdocs berada di alamat folder ini "C:\xampp\htdocs" dan bisa saja berbeda dikarenakan faktor lainnya seperti pengaturan file sistem dan customisasi pengaturan folder saat pengisntalan xamp dan saya pastikan folder htdocs ada pada komputer pembaca. setelah folder integrasike1 berhasil dibuat sesuai ketentuan selanjutnya simpan sourcecode/script yang telah ditulis didalam folder integrasike1 tersebut dengan nama index.php dan ingat saat ada pilihan extensi file  pada saat muncul popup penyimpanan khusunya untuk text editor notepad pilih all berikut ilustrasinya

kemudian buka webbrowser contoh mozila,internet explorer atau browser lainnya dan tulis alamat url ini dibrowser, tanpa tanda petik ya! "http://localhost/integrasike1/ " jika arahan yang diberikan penulis diikuti dengan benar maka akan tampil seperti ini silahkan dizoom

jika sukses,maka pembaca benar-benar telah memulai pengalaman awal sebagai programmer php baik secara teknis codding maupun konfigurasi kebutuhan sistem. ok selanjutnya saya akan memberikan contoh cara integrasi php dan html dengan cara yang berbeda untuk menambah ilustrasi dan lebih luas pembaca.

lakukan preparasi atau persiapan codding seperti yang telah dijelaskan sebelumnya mulaidari penyiapan folder namun beri nama yang berbeda pada foldernya contoh integrasike2. siapkan juga text editor  save dengan nama index.php seperti biasa kemudian jalankan dibrowser berikut
script nya:

copy dan paste script berikut

<!DOCTYPE html>
<html>

<head>

<title>

<?php

echo "title ini dibuat dengan php";

?>

</title>

</head>

<body>

    saya dibuat dengan html

    <?php
    echo "<p style='color:red'>dan saya dibuat dengan php</p>";
    ?>

 </p>

</body>
</html>
sebenarnya script php bisa disisipkan diantara tag html apapun menyesuaikan dengan tujuan anda dengan catatan jangan sampai script atau sourcecode html dituliskan didalam blok programphp dengan sengaja atau tidak senganja karena bisa menimbulkan error yang berakibat tidak akan bisa menampilkan tampilan sama sekali output program kecuali pesan error, contoh pengabungan script php yang salah
contoh integrasi php html yang salah
<!DOCTYPE html>
<html>
<body>
<?php
<p>
echo "pesan ini tidak akan keluar";
<p>
?>
</body>
</html>

ketika script dijalankan dibrowser bisa dipastikan akan tampil pesan kesalah dibrowser karena tag <p></p> hanya dimiliki php dan dengan terlarang masuk ke blok program php oleh karena itu berhati-hatilah ketika ingin mengintegrasikan bahasa yang satu dengan bahasa lainnya.
oke demikian perbaikan materi ke 2 ini silahkan lanjut ke materi selanjutnya yang sama pentingnya untuk dipelajari yakni tentang Integrasi html dengan css. dan mudah-mudahan ketika anda membaca artikel sudah diterbitkan jika belum harap bersabar untuk menunggu update penulis terimakasih jangan lupa beri komentar yang membangun demi perbaikan tentang penulisan kami.

Integrasi HTML dan Javascript

Javascript merupakan salah satu komponen pendukung pemrograman web yang sangat penting hampir setiap website yang ada sekarang ini memakai teknologi ini,.Apa sih javascript itu?, mungkin pertanyaan tersebut sempat terlintas dibenak pembaca ketika belum pernah mempelajarinya dan mendangar istilah tersebut. sebagai gambaran pembaca yang benar benar awam dalam hal ini bisa mencoba link berikut ini coba disini, ingatkah ketika halaman yang anda kunjung terbuka akan ada sapaan berbentuk alert yang berisi "hi saya adalah..... dst", contoh program sederhana tersebut merupakan salah satu kemampuan javascript sebagai bahasa pemrograman berbasis web yang tidak akan anda temui di php dan itu baru sebagian saja. javascript memiliki kemampuan untuk memanipulasi elemen web seperti membuat animasi memberikan validasi dan masih banyak lagi. yang istimewa lagi anda tidak perlu instal aplikasi pemrograman apapun untuk mempelajarinya cukup memiliki sebuah text editor seperti notepad dan juga web browser apapun browsernya. pada artikel ini saya tidak akan secara mendetail menjelaskan javascript supaya lebih bisa fokus ke tujuan utama yaitu belajar mengintegrasikan berbagai macam komponen pemrograman web. mungkin jika pembaca ingin secara mendetail untuk mempelajarinya silahkan kunjungi tutorial ini kunjungi disini. ok kemudian kita akan menuju contoh langsung script cara menggabungkannya

contoh 1 :menyisipkan sesudah tag </body>
buat folder integrasike2 lokasinya bebas, tapi lebih baik didalam folder htdocs seperti contoh artikel sebelumnya php
copy dan paste script contoh 1 ini kemudian simpan  difolder integrasike1 dengan nama contoh1.html
script contoh 1:  menyisipkan setelah tag penutup </body>
 <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>

<!--contoh 1--->

<script>

alert("hi, programmer!");

</script>
</html>
jika memakai text editor notepad ketika muncul dialog saat akan menyimpan file lakukan seperti gambar berikut

intinya pada pagian save as type pilih yang all

setelah itu, buka folder kerja dan klik contoh 1.html sampai muncul dibrowser dan jika arahan yang diberikan penulis diikuti dengan benar maka akan tampil seperti ini

cara integrasi html dan javascript juga bisa dilakukan seperti ini

script contoh 1:  menyisipkan diantara tag <body> ....</body>

 <!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>

<script>

alert("hi, programmer!");

</script>

</body>

</html>

sebenarnya bisa diantara tag apapun menyesuaikan dengan tujuan anda dengan catatan jangan sampai script atau  html dituliskan didalam blok program javascript dengan sengaja atau tidak senganja karena bisa menimbulkan error 

contoh penulisan yang salah

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>
<body>

<!--contoh 1--->

<p>

<body>

alert("hi, programmer!");

</p>

</script>

</body>

</html>

ketika sampai menuliskan kodeprogram/script seperti contoh diatas popup alert tidak akan tampil karena <p> bukan merupakan keyword atau syntak javascript mungkin jika anda mempelajari link yang penulis sarankan sebelumnya pembaca akan mendapatkan penjelasan lebih banyak lagi dan keterangan yang lebih akurat. jika artikel sudah terbit harap kunjungi materi/bab selanjutnya tentang integrasi html dengan css, jangan lupa tinggalkan komentar untuk perbaikan artikel ini jika masih ada kekurangan, terimakasih.