Contoh Program Sederhana dengan HTML
Script Hal-1:
<html>
<head><title>Biodata Diri</title>
</head>
<body>
<div style="background: #40E0D0"><p align="center"><font size="18" color="black"> Biodata Diri SiAnu</font></p></div>
<h3><p align="center"><img src="images/x.jpg" width="140" height="240"></img></p></h3>
<p align="center"><i><b><font size="5"><font color="#FF0000">Nama : Mudji</font></font></b></i></p>
<p align="center"><i><b><font size ="5"><font color="lime">Tempat Tanggal Lahir : Tuban, 16 Juli 1991</font></font></b></i></p>
<p align="center"><i><b><font size ="5"><font color="#FF00FF">Alamat Rumah : Jalan Swadaya 1 rt 06/09 no.25 Pejaten Timur</font></font></b></i></p>
<p align="center"><i><b><font size="5"><font color="#000080">No.HP / Telp : 0213456789</font></font></b></i></p>
<p align="center"><i><b><font size="5" color="yellow">Pendidikan : S1 Sistem Informasi</font></b></i></p>
<p align="center"><i><b><font size="5" color="#800000">Kegiatan : Menjalani perkuliahan, bla bla bla...</font></b></i></p>
<p align="center">Cek Jadwal Perkuliahan ATA <a href="Hal-2.html">Masuk</a></p>
</body>
</html>
Tampilan sebagai berikut :
Script Hal-2
<html>
<head><title>Perkuliahan ATA</title>
</head>
<body bgcolor="aqua">
<p align="center"><b><font size="8">Jadwal Perkuliahan ATA</font></b></p>
<table align="center" width="50%" border="10" style="background:white">
<tr>
<td>Kelas</td>
<td>Ruang</td>
<td>Mata Kuliah</td>
<td>Dosen</td>
<td>Waktu</td>
<td>Ruang</td>
</tr>
<tr>
<td>4KA09</td>
<td>Rabu</td>
<td>Pemrograman Berbasis WEB **</td>
<td>Aviariani</td>
<td>1/2/3</td>
<td>D337</td>
</tr>
<tr>
<td>4KA09</td>
<td>Rabu</td>
<td>Sistem Informasi SDM</td>
<td>Reza Chandra</td>
<td>4/5</td>
<td>D337</td>
</tr>
<tr>
<td>4KA09</td>
<td>Rabu</td>
<td>Pengelolaan Proyek Sistem Informasi</td>
<td>Farida</td>
<td>7/8</td>
<td>D023</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Sistem Informasi Perbankan</td>
<td>Veranita</td>
<td>1/2</td>
<td>D003</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Testing dan Implementasi Sistem *</td>
<td>Harjanto Sutejo</td>
<td>3/4/5</td>
<td>D003</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Etika dan Profesionalisme TSI #</td>
<td>Robby Chandra</td>
<td>78</td>
<td>D005</td>
</tr>
<tr>
<td>4KA09</td>
<td>Kamis</td>
<td>Sistem Informasi Geografis</td>
<td>Avinanta Tarigan</td>
<td>9/10</td>
<td>D005</td>
</tr>
<tr>
<td>4KA09</td>
<td>Sabtu</td>
<td>Aplikasi Bisnis Teknologi Informasi</td>
<td>Dewi Anggraini Puspa Hapsari</td>
<td>2/3/4</td>
<td>D031</td>
</tr>
<tr>
<td>4KA09</td>
<td>Sabtu</td>
<td>Bahasa Inggris Bisnis 2</td>
<td>Sastri Lindawati</td>
<td>6/7</td>
<td>D037</td>
</tr>
</table>
<p align="center"><font size="5"><b>Kembali ke Biodata klik <a href="Hal-1.html">disini</a></b></font></p>
</body>
</html>
Tampilan:
Cara Membuat Aplikasi Hitung Umur Sederhana dengan JavaScript
Pada kesempatan kali ini, saya ingin membahas bagaimana cara membuat perhitungan umur bedasarkan tahun kelahiran dengan menggunakan JavaScript. Nantinya user akan memasukkan tanggal lahir mereka, dan dengan menggunakan fungsi new Date (), program akan menghitung usia dengan membandingkan antara hari ini dan inputan tanggal.
Tak perlu berlama-lama lagi, berikut merupakan langkah-langkah untuk membuat aplikasi sederhana perhitungan umur bedasarkan tahun kelahiran :
1. Buka XAMPP Control Panel dan aktifkan Apache dan MySql.
2. Buka text editor, seperti Notepad++, atau Dreamweaver dan ketiklah script code berikut.
Simpan script code di atas, simpan di folder xampplite → htdocs → buat folder baru (disini saya buat folder baru dengan nama “inwepo”) → saya simpan dengan nama file “tanggal.php”.
3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/inwepo/tanggal.php
4. Untuk dapat menjalankan programnya, di bawah </div> diatas </body> tambahkan kode JavaScript di bawah ini.
5. Reload kembali http://localhost/inwepo/tanggal.php, dan berikut hasilnya:
Hasil:
Catatan:
1. Mungkin ada yang masih bingung kenapa harus disimpan di htdocs? Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/inwepo/tanggal.php. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. Inwepo menunjuk pada folder inwepo saya di xampplite → htdocs. Dan, tanggal.php adalah nama file yang tersimpan script code di atas.
Sekian tutorial “Cara Membuat Aplikasi Hitung Umur Sederhana dengan JavaScript”. Selamat mencoba.
Komentar
Posting Komentar