Wednesday, February 28, 2024

Belajar Pemograman PHP (Membuat Aplikasi Perhitungan Rumus matematika/fisika) sederhana.

  


1. Buat Folder baru dalam project masing masing dengan nama 'aplikasiku'.

2. Buka sublime text dan buka project masing masing.

3. buat file baru dengan nama index.php (dalam folder aplikasiku)

tulis kode berikut dalam index.php


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Aplikasi</title>

    <style>

        body {

            margin: 0;

            font-family: 'Arial', sans-serif;

            background-color: #f4f4f4;

        }


        header {

            background-color: #3498db;

            color: #fff;

            text-align: center;

            padding: 15px;

        }


        .frame {

            border: 2px solid #3498db;

            border-radius: 10px;

            overflow: hidden;

            background-color: #fff;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            margin: 20px;

        }


        .button-container {

            text-align: center;

            padding: 20px;

        }


        .app-button {

            display: inline-block;

            padding: 15px 30px;

            margin: 15px;

            font-size: 18px;

            text-align: center;

            text-decoration: none;

            background-color: #3498db;

            color: #fff;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            transition: background-color 0.3s ease;

        }


        .app-button:hover {

            background-color: #2980b9;

        }


        footer {

            background-color: #3498db;

            color: #fff;

            text-align: center;

            padding: 10px;

            position: fixed;

            bottom: 0;

            width: 100%;

        }

    </style>

</head>

<body>


<header>

    <h1>Aplikasiku</h1>

</header>


<div class="frame">

    <br>

    <center>Silakan pilih apa yang ingin kamu kerjakan!</center><br>

    <div class="button-container">

        <a href="form.php" class="app-button">Luas Segitiga</a>

        <a href="#" class="app-button">Luas Lingkaran </a>

        <a href="#" class="app-button">Luas Ketupat</a>

        <br>

        <a href="#" class="app-button">Luas Persegi</a>

        <a href="#" class="app-button">Luas Persegi Panjang</a>

        <a href="#" class="app-button">Luas Layangan</a>

        <!-- Tambahkan tombol-tombol aplikasi sesuai kebutuhan -->

    </div>

</div>


<footer>

    &copy; 2024 Aplikasiku Karya Aisyah

</footer>

</body>

</html>


4. Buat file baru dengan nama disesuaikan dengan rumus apa yang akan dibuat , dapat menggunakan kode dibawah ini sebagai contoh :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tombol Aplikasi</title>
    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
        }

        header {
            background-color: #3498db;
            color: #fff;
            text-align: center;
            padding: 15px;
        }

        .frame {
            border: 2px solid #3498db;
            border-radius: 10px;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin: 20px;
        }

        .button-container {
            text-align: center;
            padding: 20px;
        }

        .app-button {
            display: inline-block;
            padding: 15px 30px;
            margin: 15px;
            font-size: 18px;
            text-align: center;
            text-decoration: none;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .app-button:hover {
            background-color: #2980b9;
        }

        footer {
            background-color: #3498db;
            color: #fff;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        form {
            padding: 20px;
        }

        label {
            display: block;
            margin-bottom: 10px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }

        button {
            background-color: #3498db;
            color: #fff;
            border: none;
            padding: 15px 30px;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>

<header>
    <h1>Tombol Aplikasi</h1>
</header>

<div class="frame">
    <form>
        <label for="appName">Masukan A :</label>
        <input type="text" id="appName" name="a" required>

        <label for="appLink">Masukan B:</label>
        <input type="url" id="appLink" name="b" required>

        <button type="submit">Hitung</button>
    </form>

    <div class="button-container">
        <a href="index.php" class="app-button">Kembali</a>
        
        <!-- Tambahkan tombol-tombol aplikasi sesuai kebutuhan -->
    </div>
</div>

<footer>
    &copy; 2024 Tombol Aplikasi
</footer>

</body>
</html>

Selamat mengerjakan.

Wednesday, January 31, 2024

Membuat Kalkulator Sederhana dengan PHP

 


Kali ini saya akan membuat kalkulator cendekia, kenapa namanya kalkulator cendekia? karena yang membuat adalah anak anak SMP Cendekia Ambon.

1. Buat file dengan nama index.php.

<!DOCTYPE html>

<html>

<head>

<title>Kalkulator Cendekia</title>

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

</head>

<body>

Disini Coding PHP

<div class="kalkulator">

<h2 class="judul">KALKULATOR CENDEKIA</h2>

<a class="brand" href="https://www.ydprog.com">By. Aisyah</a>

<form method="post" action="index.php">

<input type="number" required name="bil1" class="bil" autocomplete="off" placeholder="Kas Maso Angka Pertama">

<input type="number" required name="bil2" class="bil" autocomplete="off" placeholder="Kas Maso Angka Kedua">

<select class="opt" required name="operasi">

<option value="">Pilih Dolo</option>

<option value="tambah">(+)Tamba Akang</option>

<option value="kurang">(-)Kurang Akang</option>

<option value="kali">(x)Kali Akang</option>

<option value="bagi">(/)Bage Akang</option>

</select>

<input type="submit" name="hitung" value="ITONG" class="tombol">

</form>

<?php if(isset($_POST['hitung'])){ ?>

<input type="text" value="<?php echo $hasil; ?>" class="bil">

<?php }else{ ?>

<input type="text" placeholder="Dia Pung Hasil Disini" value="Dia Pung Hasil Disini" class="bil">

<?php } ?>

<br>

<br>

<a href="index.php" type="reset" class="kosong">KAS KOSONG KAKA</a>

</div>

</body>

</html>


2. Buat file dengan nama 'proses.php'

<?php 

if(isset($_POST['hitung'])){

$bil1 = $_POST['bil1'];

$bil2 = $_POST['bil2'];

$operasi = $_POST['operasi'];

switch ($operasi) {

case 'tambah':

$hasil = $bil1+$bil2;

break;

case 'kurang':

$hasil = $bil1-$bil2;

break;

case 'kali':

$hasil = $bil1*$bil2;

break;

case 'bagi':

$hasil = $bil1/$bil2;

break;

}

}

?>

3. Buat Cssnya , simpan file css dengan nama 'style.css'

body{

background: #F2F2F2;

font-family: sans-serif;

}

 

.kalkulator{

width: 335px;

background: #4B0082;

margin: 100px auto;

padding: 10px 20px 50px 20px;

border-radius: 5px;

box-shadow: 0px 10px 20px 0px #D1D1D1;

}

 

.bil{

width: 300px;

margin: 5px;

border: none;

font-size: 16pt;

border-radius: 5px;

padding: 10px;

}

 

.opt{

font-size: 16pt;

border: none;

width: 215px;

margin: 5px;

border-radius: 5px;

padding: 10px;

}

.tombol{

background: #EC5159;

border-top: none;

border-right: none;

border-left: none;

border-radius: 5px;

padding: 10px 20px;

color: #eee;

font-size: 15pt;

border-bottom:4px solid #BF3D3D;

}


.kosong{

background: #FFFF00;

border-top: none;

border-right: none;

border-left: none;

border-radius: 5px;

padding: 5px 100px;

color: #BF3D3D;

font-size: 10pt;

border-bottom:4px solid #FFFF00;

}

 

.brand{

color: #eee;

font-size: 11pt;

float: right;

text-decoration: none;

margin: 12px;

}

 

.judul{

text-align: center;

color: #eee;

font-weight: normal;

}


Setelah itu jalankan dengan mengakses : 

localhost/nama/project . Contoh localhost/aini/kalkulator/


Catatan : Ganti pada index.php pada bagian 'Disini Coding PHP' dengan include ''proses.php".