Software Tools: sederhana

Showing posts with label sederhana. Show all posts

Tuesday, August 30, 2016

Tutorial Coding Cara Membuat Script Html CSS Sederhana tapi Menarik menggunakan Notepad

Kali ini saya akan membuat sebuah tampilan web sederhana menggunakan html dan css menggunakan Notepad++.

Berikut tampilan html sederhana :

Pada gambar diatas, Saya menggunakkan elemen css box-shadow, border-radius dan :hover pada div panel.

Berikut script html nya :

<html lang="id">
<head>
<title>Biodata Saya</title>
<style>
body{
color:#000;
background-color:#fff;
font-size:1.2em;
margin:auto;
padding:0;
}
.panel{
color:#000;
background-color:#add8e6;
text-align:center;
padding:18px;
margin:6px auto;
max-width:50%;
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
box-shadow:0 2px 4px #888;
}
.panel:hover{
box-shadow:0 2px 8px #00008b;
}
</style>
</head>
<body>
<div class="panel"><b>BIODATA</b></div>
<div class="panel">
<p>
<img src="img.png" height="150" width="150"/>
</p>
<p align="center">
<table>
<tr><td><b>Nama Lengkap</b></td><td>: Syahrul Adiguna Kurniawan</td></tr>
<tr><td><b>NIM</b></td><td>: 14090018</td></td></tr>
<tr><td><b>Kelas</b></td><td>: 4A</td></td></tr>
<tr><td><b>Alamat</b></td><td>: Jl. Mawar No.04 Perumnas Gandasuli Brebes</td></td></tr>
<tr><td><b>Jenis Kelamin</b></td><td>: Laki-laki</td></td></tr>
<tr><td><b>E-Mail</b></td><td>: syahrulzzadie@gmail.com</td></td></tr>
<tr><td><b>Prodi</b></td><td>: D4-INFORMATIKA</td></td></tr>
</table>
</p>
</div>
</body>
</html>

Atau juga bisa memodifikasinya sendiri. Silahkan download saja script nya pada link dibawah ini.

Terimakasih atas kunjungan anda. Semoga Bermanfaat. :-)

Get

Cara Membuat Kalkulator Menggunakan Script PHP dan CSS Sederhana

Assalammualaikum Wr. Wb.

Kali ini saya akan share Cara Membuat Kalkulator Menggunakan Script PHP dan CSS Sederhana. sebelumnya kita harus menginstall XAMPP terlebih dahulu agar bisa membuka file .php nya.. jika sudah langsung saja saya bagi scriptnya.

Script PHP Kalkulator:

<html>
<head>
<title>Kalkulator Sederhana</title>
<style>
body{
color:#000;
background-image:url(background.jpg);
background-size:full;
background-color:#fff;
font-family:Tahoma, sans-serif;
font-size:18px;
margin:0;
padding:0;
}
input{
font-size:24px;
padding:6px;
border: 1px solid #000;
}
.panel{
background-color:skyblue;
box-shadow:0 2px 5px #000;
padding:18px;
line-height:28px;
margin:150px auto 2px;
max-width:380px;
}
.tombol{
color:#fff;
font-size:14px;
background-color:#212121;
boder-bottom:2px solid #000;
padding:8px;
margin:2px;
}
.tombol:hover{
background-color:orange;
}
a{
text-decoration:none;
color: #F57C00;
}
.footer{
max-width: 100%;
padding: 10px;
color: lime;
}
</style>
</head>
<body>
<?php
$bil1 = isset($_POST[bil1]) ? $_POST[bil1] : NULL;
$bil2 = isset($_POST[bil2]) ? $_POST[bil2] : NULL;
$hasil = isset($hasil) ? $hasil : 0;
if(isset($_POST[tambah])){
$hasil = $bil1+$bil2;
}
if(isset($_POST[kurang])){
$hasil = $bil1-$bil2; }
if(isset($_POST[kali])){
$hasil = $bil1*$bil2;
}
if(isset($_POST[bagi])){
$hasil = $bil1/$bil2;
}
if(isset($_POST[clear])){
$hasil=;
$bil1=;
$bil2=;
}
if(isset($_POST[sqrt])){
$hasil=sqrt($bil1);
}
if(isset($_POST[^2])){
$hasil=($bil1*$bil1);
}
if(isset($_POST[%])){
$hasil=($bil1*$bil2)/100;
}
if(isset($_POST[1/x])){
$hasil=(1/$bil1);
}
echo <div class="panel">.
<form action="" method="post">.
<div align="center"> KALKULATOR SEDERHANA </div>.
<div align="center">=============================</div>.
<b>MASUKAN BILANGAN KE-1:</b><br/>.
<input type="text" name="bil1" value=".$bil1."/><br/>.
<b>MASUKAN BILANGAN KE-2:</b><br/>.
<input type="text" name="bil2" value=".$bil2."/><br/>.
<input class="tombol" type="submit" name="tambah" value="+"/>.
<input class="tombol" type="submit" name="kurang" value="-"/>.
<input class="tombol" type="submit" name="kali" value="X"/>.
<input class="tombol" type="submit" name="bagi" value=":"/>.
<INPUT class="tombol" type="submit" name="clear" value="C"/>.
<input class="tombol" type="submit" name="sqrt" value="sqrt"/>.
<input class="tombol" type="submit" name="^2" value="^2"/>.
<input class="tombol" type="submit" name="%" value="%"/>.
<input class="tombol" type="submit" name="1/x" value="1/X"/><br/>.
</form>.
<b>HASIL:</b><br/>.
<input type="text" value=".$hasil." readonly/><br/>.
</div>;
?><br/><br/><br/><br/><br/>
<div class="footer">
Copyright © 14090008 & 14090018 | <a href="https://naufalhanifalbani.wordpress.com/">naufalhanifalbani.wordpress.com</a>, <a href="https://syahrulzzadie.blogspot.com/">syahrulzzadie.blogspot.com</a> | Jangan Lupa Kunjungi Blog Kami yaaa..
</div>
</body>
</html>

Atau download saja Scriptnya disini (Download ZIP)

Copy dan Paste di Notepad++ lalu Simpan Sebagai index.php di folder C:/xampp/htdocs/kalkulator/"taruh disini" (kalau belum ada folder kalkulator, buat sendiri saja).

Setelah disimpan, buka browser anda lalu ketikan http://localhost/kalkulator/ kemudian enter.

Berikut beberapa screenshot tampilan kalkulatornya :