21 March 2016

HTML wal CSS

Agar terlihat menarik, tampilan file html dapat dipercantik dengan css, baik itu internal css maupun eksternal css. Kali ini saya akan memosting html dengan eksternal css dengan fitur link. yaitu jika kita klik tombol atau menu tertentu, maka muncul tampilan halaman sesuai dengan link yang sudah di tentukan.
Disini saya menyimpan file html dan css dalam satu folder agar pemanggilan file css itu mudah.


Dalam membuat kodingnya, pada file html, kita tambahkan <link rel="stylessheet" href="namafilecss.css">  di bawah tag <title> </title>. untuk namafilecss.css sesuai dengan nama file css yang Anda buat, berserta ekstensi .css. Lihat Gambar!


Sebagai Pembelajaran Silahkan klik html dan css

Ingatlah selalu!! Kesungguhan itu Jauh Dari Kopas san!! Semangat dengan kemampuan jari anda sendiri!!

19 March 2016

Membuat Kalkulator Lewat PHP

Sekarang saya akan memposting cara membuat operasi kalkulator pada PHP.
Kalkulator ini sangat sederhana, hanya terdiri dari 5 operasi, yaitu penambahan, pengurangan, perkalian, pembagian dan modulus.
Berikut tampilannya.
Tampilan awal


Operasi penambahan. Saya mencontohkan 100 + 50 maka hasilnya 150





Operasi pengurangan. Saya mencontohkan 100 – 50 maka hasilnya 50


Operasi perkalian. Saya mencontohkan 100 x 50 maka hasilnya 5000


Operasi pembagian. Saya mencontohkan 100 : 50 maka hasilnya 2


Operasi modulus. Modulus (dilambangkan “%”) adalah hasil sisa dari pembagian. Saya mencontohkan 100 % 50 maka hasilnya 0. Karena 100 dibagi 50 = 2 dengan sisa bagi = 0 sehingga hasil yang ditampilkan adalah 0.


Cara menyimpan file php berbeda dengan html. karena php tidak dapat dijalankan di folder sembarang. file php harus disimpan di folder /htdocs. Folder tersebut berada di folder instalan XAMPP. Lihat Gambar!


Dan... Inilah koding PHP nya. Cobalah untuk tidak mengkopast. Usahakan untuk mengetik manual di Notepad++ dengan melihat contoh koding. Agar “jari-jari” anda hafal untuk mengetik kodingan PHP.
Optimalkan usaha Anda dengan mengetik manual kodingnya. Semangat!!!


<!DOCTYPE html>
<html>
<head><title>Kalkulator di PHP</title>
<style type="text/css">
body{
background: url('eltsa 7.jpg') no-repeat scroll;
background-size: 100% 100%;
min-height: 660px;
}
</style></head>
<body>
<main>
<article style="background-color:green; width:30%;float:left;margin:40px 30%;text-align:center">
<h1>Kalkulator Sederhana</h1>
<form method="post" action="kalkulator.php">
<br>Angka 1 
<input type="number" name="angka1" value="<?php echo $_POST['angka1'];?>" required><br>
<br>Angka 2
<input type="number" name="angka2" value="<?php echo $_POST['angka2'];?>" required><br>
   <?php
     if(isset($_POST["jumlah"])){
        $hasil = $_POST["angka1"] + $_POST["angka2"];   
     }
     if(isset($_POST["kurang"])){
        $hasil = $_POST["angka1"] - $_POST["angka2"];   
     }
     if(isset($_POST["kali"])){
        $hasil = $_POST["angka1"] * $_POST["angka2"];   
     }
     if(isset($_POST["bagi"])){
        $hasil = $_POST["angka1"] / $_POST["angka2"];   
     }
if(isset($_POST["mod"])){
        $hasil = $_POST["angka1"] % $_POST["angka2"];   
     }
   ?>
   <br>
   Operasi = 
   <input type="submit" name="jumlah" value="+"> &nbsp
   <input type="submit" name="kurang" value="-"> &nbsp
   <input type="submit" name="kali" value="*"> &nbsp
   <input type="submit" name="bagi" value="/"> &nbsp
   <input type="submit" name="mod" value="%"><br>
   <br> Hasilnya 
   <input type="number" name="hasil" disabled value="<?php echo $hasil;?>">
<br><br><br>
</form>
</article>
</main>
by El Araya
</body>
</html>

05 March 2016

Membuat HTML Murni

HTML murni ini dibuat dengan sederhana sebagai awalan pengenalan terhadap HTML. Bagi yang tidak sabar langsung saja lihat gambar.

 

Ya gambar diatas adalah koding HTML murni yang sangat sederhana. Jika kita perhatikan,koding HTML ini harus diawali oleh kode2 khusus yang diapit kurung siku. contohnya <html> dan diakhiri dengan kode itu juga namun ditambah garis miring. contoh </html>. Jangan lupa untuk menyimpan file koding dengan format .html !!!

dan dibawah ini adalah hasilnya

Tutorial Penginstalan XAMPP



Tutorial kali ini saya akan menjelaskan tatacara penginstalan aplikasi XAMPP. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

1. Klik 2 kali pada XAMPP INSTALLER. Disini saya menggunakan XAMPP versi 1.8.1.

 

2. Pilih bahasa yang anda pahami…

 

3. Maka akan muncul tampilan XAMPP Setup. Klik Next saja.



4. Pilih folder tempat penginstalannya dan tekan Install

 



5. Tunggu hingga proses penginstalan selesai.

 

6. Setelah selesai klik Finish. Maka akan muncul jendela pemberitahuan.

 

7. Jika anda ingin melihat XAMPP Control Panel klik Yes.  klik No jika tidak.

 

Inilah tampilan XAMPP Control Panel. Jika penginstalan berjalan dengan baik maka Apache dan MySQL akan bertanda conteng hijau. 

 

Tutorial Penginstalan Notepad++



Notepad++ adalah aplikasi text editor yang sangat berguna karena memberikan fitur-fitur yang lebih lengkap daripada aplikasi text editor lainnya. Jadi sangat disarankan agar aplikasi ini wajib ada disetiap komputer. Langsung saja dalam tutorial ini akan sedikit menjelaskan tata cara penginstalannya. Oke langsung saja kita ikuti langkah-langkah di bawah ini :

1. Klik 2 kali pada Notepad++ installer nya



2. Pilih bahasa yang akan anda mengerti...


3. Maka akan muncul jendela Notepad++ Setup, klik next.



4. Pilih I Agree



5. Pillih folder tempat penginstalan.  Klik next 



6. Pilih komponen apa saja yang akan diinstal. Klik next



7. Klik Install dan tunggu hingga proses penginstalan selesai

 
8. Horeee Notepade++ sudah terinstal dikomputer Anda. Klik finish untuk melanjutkan.



9. Nah inilah tampilan dari Notepade++. Simpel kan..




*Catatan : Notepad++ adalah aplikasi text editor yangdapat digunakan untuk membuat aplikasi dengan berbagai bahasa pemrograman dengan menambahkan beberapa komponen atau plugin yang diperlukan agar bahasa pemrograman tersebut dapat dicompile and run melalui notepad++. Mungkin dalam postingan selanjutnya akan saya bahas masalah ini. Salam.