Membuat Form Pendaftaran Menggunakan HTML

Berikut ini adalah bentuk HTML dari gambar web form pendaftaran diatas :

<html>
<head>
    <title> Form Pendaftaran </title>
</head>
<body>
    <table border="1" align="center">
        <tr> <td colspan = "2" align="center" bgcolor="black"> <img  src ="adidas.jpg" width="600" height="400"> </td> </tr>
        <td width="25%,40%" bgcolor="#3090c7" >
            <ul >
            <li>Home </li>
            <li>About</li>
            <li>Pendaftaran</li>
            </ul>     </font>
        <td bgcolor="#cccccc">
        <b align="center">Selamat Datang di Pendaftaran </b> <br><br>
        <table>
        <form action="proses.php" method="POST">
            <tr>
                <td> Nama            :</td><td> <input type="text" size="30" name="Nama" placeholder="Nama Lengkap"> </td>
            </tr>
           
            <tr>
                <td> Tempat Lahir    :</td> <td><input type="text" size="30" name="Tempat" placeholder="Tempat Lahir"> </td>
            </tr>
           
            <tr>
                <td> Tanggal Lahir    :</td> 
                    <td>
                    <select name="selectionField">
                        <option value="Tanggal">Tanggal</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>
                    <select>
                        <option value="Bulan">Bulan</option>
                        <option value="Januari">Januari</option>
                        <option value="Februari">Februari</option>
                        <option value="Maret">Maret</option>
                        <option value="April">April</option>
                        <option value="Mei">Mei</option>
                        <option value="Juni">Juni</option>
                        <option value="Juli">Juli</option>
                        <option value="Agustus">Agustus</option>
                        <option value="September">September</option>
                        <option value="Oktober">Oktober</option>
                        <option value="November">November</option>
                        <option value="Desember">Desember</option>
                    </select>
                    <input type="text" size="4" placeholder="Tahun" >
                </td>
            </tr>
           
            <tr>
                <td> Alamat            : </td><td><input type="text" size="50" name="Alamat" placeholder="Alamat"> </td>
            </tr>

            <tr>
            <td> Agama             : </td>
                <td>
                <form method="post" action="#">
                    <input type="radio" name="jk" value="Islam"> Islam
                    <input type="radio" name="jk" value="Protestan"> Protestan
                    <input type="radio" name="jk" value="Katolik"> Katolik
                    <input type="radio" name="jk" value="Konghucu"> Konghucu
                    <input type="radio" name="jk" value="Budha"> Budha
                    <input type="radio" name="jk" value="Hindu"> Hindu
                </td>
            <tr>
                <td>
            </tr>
        </table>
        <input type="submit" name="submit" value="SUBMIT">
        <input type="reset" name="reset" value="RESET">   
        </td>       
        </tr>
       
        <tr>
            <td colspan="2" align="center" bgcolor="#d5a253" style="color:white"><h2> Terima Kasih </h2></td>
        </tr>
    </table>

</body>
</html>

Materi Kuliah : Workshop 4

7. Seorang dosen ingin mengkonversi nilai angka hasil ujian mahasiswa menjadi nilai huruf denfan ketentuan :

• Analisis : menggunakan satu inputan untuk memasukkan nilai mahasiswa. dan menggunakan percabangan untuk setiap nilai dari A sampai D dan F.

• Algoritma konversi{inoutan nilai angka di konversi ke bentuk nilai huruf}

Deklarasi:

   n = integer;

   huruf = integer;

Deskripsi:

   read(n)

   if(n>=o && n<=60) then

      huruf : "F"

   else if(n>=61 && n<=70) then

      huruf : "D"

   else if(n>=71 && n<=80) then

      huruf : "C"

   else if(n>=81 && n<=90) then

     huruf : "B"

   else if(n>=91 && n<=100) then

     huruf : "A"

   else

      huruf : "Nilai Kosong"

write(huruf)

• Flowchart (Raptor)

Hasil Flowchart

• Generate ke C++ menggunakan Class OOP

#include <iostream>

#include <string>

using namespace std;

class Konversi{

friend ostream& operator<< (ostream&, const Konversi&);

friend istream& operator >> (istream&, Konversi&);

public:

void rumus();

int n;

};

istream& operator >> (istream& in, Konversi& masukan){

cout << "Masukkan Nilai Mahasiswa = ";

in >> masukan.n;

return in;

}

ostream& operator << (ostream& out, const Konversi& keluaran){

out << "\n\nJadi Itu Nilai Mahasiswa dalam Bentuk Huruf";

return out;

}

void Konversi::rumus(){

if (n>=0 && n<=60){

    cout << "Nilainya adalah F" << endl;   

}

else if (n>=61 && n<=70){

cout << "Nilainya adalah D" << endl;      

}

else if (n>=71 && n<=80){

    cout << "Nilainya adalah C" << endl;         

}

else if (n>=81 && n<=90){

        cout << "Nilainya adalah B" << endl;            

}

else if (n>=91 && n<=100){

        cout << "Nilainya adalah A" << endl;               

}

else{

cout << "Nilai Kosong" << endl;

    }

}

int main()

{

Konversi x;

cin >> x;

x.rumus();

cout << x;

   

   return 0;

}

• Hasil Generate ke C++ Class OOP

Postest Praktikum 2 : Menghitung Luas Permukaan Dan Volume Dalam Bola Dan Tabung

Buatlah pragram untuk menghitung luas permukaan dan volume bola (Raptor). Input, proses, output pakai subchart.

Dalam bentuk C++

Buatlah class Bola dan class Tabung.

outputan :

Selamat datang di program

1. Program Bola

2. Prgram Tabung

Masukkan pilihan anda :

Jika user pilih 1:

Program Bola

Masukkan Jari-jari = ....

Luas Permukaan Bola = ...

Volume Bola = ....

Jika user pilih 2 :

Program Tabung 

Masukkan Jari-jari = ....

Masukkan Tinggi = ....

Luas Permukaan Tabung = ...

Volume Tabung = ...

• Analisis

Input :

1. Membuat raptor

2. Bentuk C++

Materi Kuliah : Workshop 3

1. Buatlah analisis dan logaritma untuk mencari titik tengah sebuah garis yang ujung titiknya adalah A(x1,y1) dan B(x2,y2)

• Gambar 

• Analisis

menginputkan nilai x1, y1, x2, y2. Dan menggunakan rumus:

xt = (x2 + x1) / 2

yt = (y2 + y1) / 2

• Algoritma titik_tengah{menentukan titik tengah C(xt,yt)}

Deklarasi :

   x1, x2, y1, y2 : integral

   xt, yt : float

Deskripsi :

   read(x1, x2, y1, y2)

   xt = (x2 + x1) / 2

   yt = (y2 + y1) / 2

  write(xt, yt)

• Flowchart (Raptor)

Hasil Uji coba flowchart :

•  Generate ke bentuk C++ Class OOP

#include <iostream>

#include <string>

using namespace std;

class Tengah {

friend ostream& operator << (ostream&, const Tengah&);

friend istream& operator >> (istream&, Tengah&);

public:

void rumus();

int x1;

int y1;

int x2;

int y2;

float xt;

float yt;  

};

istream& operator >> (istream& in, Tengah& masukan){

   cout << "Masukkan Nilai X1 = ";

   in >> masukan.x1;

   cout << "Masukkan Nilai Y1 = ";

   in >> masukan.y1;

   cout << "Masukkan Nilai X2 = ";

   in >> masukan.x2;

   cout << "Masukkan Nilai Y2 = ";

   in >> masukan.y2;

   

   return in;

}

ostream& operator << (ostream& out, Tengah& keluaran){

cout << "Jadi nilai titik tengahnya adalah C(" << keluaran.xt << "," << keluaran.yt << ")";

return out;

}

void Tengah::rumus(){

xt =(x2+x1)/(float)2;

yt =(y2+y1)/(float)2;

}

int main()

{

Tengah t;

cin >> t;

t.rumus();

cout << t; 

return 0;

}

• Hasil C++ Class OOP

3. Buatlah analisis dan algoritma untuk mencari hipotenusa dari segitiga Pythagoras bila diketahui sisi siku-sikunya. (Petunjuk : gunakan fungsi sqrt yang menyatakan akar dari).

• Analisis

menginputkan dua sisi segitiga siku-siku, dan menggunakan rumus = sqrt(s1*s1 + s2*s2)

• Algoritma hipotenusa{menghitung hipotenusa dari dua sisi segitiga siku-siku}

Deklarasi:

   s1, s2 : integral

   rms : float

Deskripsi :

   read(s1, s2)

   rms = sqrt(s1*s1 + s2*s2)

   write(rms)

• Flowchart (Raptor)

Hasil uji coba Flowchart

• Generate ke C++ Class OOP

• Hasil C++ Class OOP

5. Buatlah analisis dan algoritna menghitung konversi dari jam:menit:detik ke detik. Buatlah contoh kasus, misalkan konversi 3 jam 17 menit 07 detik menjadi ... detik.

• Analisis

• Algoritma konversi{mengubah jam, menit detik dalam bentuk detik}

Deklarasi:

   j, m, d, jam, menit, detik : integer

   rumus : float

Deskripsi:

   read(j, m, d, jam, menit)

   jam = j * 3600;

   menit = m * 60;

   detik = jam + menit + d;

   write(detik)

• Flowchart (Raptor)

Hasil Uji coba Flowchart

 

• Generate ke C++ Class OOP

#include <iostream>

#include <string>

using namespace std;

class Waktu{

friend ostream& operator << (ostream&, const Waktu&);

friend istream& operator >> (istream&, Waktu&);

public:

void rumus();

// private:

int j;

int m;

int d;

int jam;

int menit;

int detik;

};

istream& operator >> (istream& in, Waktu& masukan){

cout << "Masukkan Jam = ";

in >> masukan.j;

cout << "\nMasukkan Menit = ";

in >> masukan.m;

cout << "\nMasukan Detik = ";

in >> masukan.d;

return in;

}

ostream& operator << (ostream& out, const Waktu& klr){

out << "\n\nJadi Konversi Waktu ke Detik dari " << klr.j << ":" << klr.m << ":" << klr.d <<" adalah " << klr.detik << " detik" << endl;

return out;

}

void Waktu::rumus(){

jam = j * 3600;

menit = m * 60;

detik = jam + menit + d;

}

int main()

{

Waktu x;

cin >> x;

x.detik;

cout << x;

return 0;

}

• Hasil C++ Class OOP

Materi Kuliah : Workshop Bab 2

2. Buatlah program yang meminta user memasukkan bagian penyebut dan pembilang dari sebuah bilangan rasional berbentuk P/Q. Setiap memasukkan bilangan rasional outputnya berbentuk P?Q. Misalnya, masukan 1 dan 2 maka tampilan outputnya 1/2.

• Analisis :

untuk mengerjakannya kita membuat 2 inputan pertama untuk pembilang (P) dan yang kedua untuk penyebut (Q). Bikin format bilangan pecahan P/Q

• Algoritma

Deklarasi:

    p, q : integer

Deskripsi:

    read(p,q)

    write(p,q)

• Membuat program pada raptor

 hasil run pada raptor:

• Generate ke C++

Hasil run di C++ :

5. Buatlah program untuk mempresentasikan bilangan bulat menjadi bilangan scientific number berbentuk 1.23E1 untuk menyatakan bilangan 12.3 . Masukan bilangan bulat 4 dijit, keluaran berbentuk aEb, dengan a adalah bilangan antara 0 dan 10, sedangkan b dari 0 sampai 4 .

• Analisis

• Algoritma bil_ilmiah {mengubah bilanga blat menjadi bilangan ilmiah}

Deklarasi:

   

• Flowchart (Raptor)

Hasil Uji coba Flowchart :

• Generate ke C++ Class OOP

#include <iostream>

#include <string>

using namespace std;

class Ilmiah{

friend ostream& operator << (ostream&, const Ilmiah&);

friend istream& operator >> (ostream&, Ilmiah&);

public:

void rumus();

//private:

float n;

float b;

float a;

};

istream& operator >> (istream& in, Ilmiah& masukan){

cout << "Masukkan Bilangan = ";

in >> masukan.n;

return in;

}

ostream& operator << (ostream& out, const Ilmiah& keluaran){

out << "\nJadi Bilangan ILmiah dari x adalah " << keluaran.a << "e" <<keluaran.b << endl;

return out;

}

void Ilmiah::rumus(){

if (n>999){

    b = 3;

a = n/(float)1000;

   }

else if (n>99){

    b = 2;

a = n/(float)100;

    }

else if (n>9){

        b = 1;

    a = n/(float)10;

    }

    else{

        b = 0;

        a = n;

}   

}

int main()

{

Ilmiah m;

cin >> m;

m.rumus();

cout << m;

return 0;

}

• Hasil C++ Class OOP

Materi Kuliah : Workshop 1

1. Buatlah program untuk menghitung luas dan keliling lingkaran beserta volume bola. Buat deklarasi terpisah antara variabel dan konstanta yang diperlukan.

Langkah pertama akan dibuat dalama bentuk flowchart (raptor)

Saya hanya membuat 1 inputan yaitu jari-jari karena jari-jari dapat mewakili luas dan keliling lingkaran serta volume bola. Pada proses terdapat rumus luas lingkaran, keliling lingkaran, dan volume bola dan juga phi. Dan terakhir ada 3 outputan untuk mengoutputkan masing masing rumus yang telah diproses.

Saat uji coba saya memasukan nilai jari jari = 3. Dan otomatis flowchart akan memproses dan hasil outputnya seperti dibawah ini.

Langkah kedua yaitu melakukan generate pada flowchart ke bentuk C++

Gambar diatas adalah generate dalam bentuk C++ yang telah diperbaiki. Pada saat pertama kali di generate ke bentuk C++ maka akan terdapat tanda tanya (??) dan tanda tambah (+). Jika dicompile akan menimbulkan error. Lalu tanda tanda tersebut harus diganti , tanda tanya (??) diganti dengan tipe data yang kita perlukan dan tanda tambah (+) diganti dengan tanda lebih kecil (<<). Setelah semua tanda tersebut diganti dan dicompile tidak akan ada error seperti gambar dibawah ini.

2. Buatlah program yang merepsensikan cerita berikut. Ibu memberi uang kepada adik sebesar 20 ribu rupiah. Ibu meminta adik untuk membeli 3 kg beras. Setiap kilogram beras harganya Rp. 5500,- Berapakah uang kembalian yang diterima adik ?

a. Dalam bentuk flowchart

Pada kasus diatas saya hanya menggunakan 1 inputan yaitu berat beras, Lalu dalam proses ada uang dan harga karena jumlah uang dan harga beras perkilogramnya sudah ditentukan atau pasti. Dan proses selanjutnya menetukan jumlah harga beras yang dibeli, baru kemudian mencari jumlah uang kembalian dengan mengurangkan uang yang diberikan ibu dengan jumlah harga beras yang dibeli.

Uji coba flowchart saya lakukan dengan menginputkan berat berasnya yaitu 3 kg. Dengan flowchar akan memproses proses selanjutnya dengan otomatis. dan di akhir akan didapatkan kembalian yang diterima adik sebesar Rp. 3500,- seperti gambar dibawah ini.

b. Generate dalam bentuk C++

Ini adalah bentuk generate raptor ke C++. Jika codingan ini di compile maka akan error. Seperti Sebelum-sebelumnya error tersebut terdapat pada baris yang memiliki tanda tanya(??) dan tanda tambah (+) dan kemudian diperbaiki. Setelah diperbaiki hasilnya akan seperti gambar dibawah ini .  

Codingan yang telah diperbaiki ini saya compile dan muncul tulisan "Masukkan Berat Beras" dan saya menginputkan angka 3. Maka akan langsung muncul "Kembalian yang diterima adik = 3500".

3. Ulangi untuk kasus no. 2. apabila banyak beras tidak diketahui,berapa kg maksimal beras yang dapat dibeli ?

a. Dalam bentuk raptor

Kasus yang ini sama dengan kasus sebelumnya hanya saja yang akan ditanyakan atau diinputkan adalah jumlah uangnya. Yang akan diproses adalah harga perkilogram beras dan berapa banyak beras yang dapat dibeli. Untuk mendapatkan banyak beras yang dapat dibeli saya membagi jumlah uang dengan dengan harga beras perkilogram.

Uji coba :

input : "Masukkan Jumlah Uang" = 20000

Proses : Beras yang dapat dibeli = Jumlah uang / harga beras perkilogram yaitu 20000 / 5500

output : "Banyaknya beras yang dapat dibeli" = 3.6 kg

b. Generate dalam Bentuk C++

Gambar diatas adalah bentuk generate ke bentuk C++ yang telah diperbaiki sebelumnya. Saat dicompile akan muncul inputan "Masukkan Jumlah Uang" dan diinputkan 20000. Dan langsung akan muncul outputnya yaitu "Jadi beras yang daoat dibeli sebanyak = 3,63636 kg". 

Formatting Teks HTML

 

    Gambar pertama merupakan teks html yang saya gunakan untuk membuat web dan hasil web nya terdapat pada gambar kedua.