Badrussani

PENERAPAN METODE ECONOMIC ORDER QUANTITY (EOQ) UNTUK PENGENDALIAN STOK BARANG

2026-03-31T13:59:00.000+07:00

ABSTRAK

Klinik Pratama Dwi Puspita Semarang menyediakan berbagai macam obat-obatan. Pengendalian persediaan obat yang dilakukan hanya dengan memantau stok tiap-tiap obat yang tersedia dan jumlah pemesanan berdasarkan perkiraan saja tidak ada pengelompokkan dan perhitungan khusus untuk menentukan jumlah pemesanan kembali sehingga sering terjadinya kehabisan stok obat.

Penelitian ini bertujuan untuk menerapkan metode Economic Order Quantity (EOQ) untuk pengendalian stok obat dan menentukan waktu pemesanan obat yang paling tepat sehingga tidak terjadi kelebihan atau kekurangan stok obat pada Klinik Pratama Dwi Puspita Semarang.

Hasil penelitian ini adalah tercapainya sebuah sistem pengendalian stok obat pada Klinik Pratama Dwi Puspita Semarang yang dapat digunakan untuk menentukan waktu yang tepat untuk pemesanan obat sehingga tidak terjadi lagi Stock Out Cost (SOC) maupun biaya penyimpanan yang berlebih Extra Carrying Cost (ECC).

DOWNLOAD FILE DIBAWAH !!!

COVER UNISBANK SEMARANG

BAB I PENDAHULUAN

BAB II TINJAUAN PUSTAKA

BAB III ANALISA DAN PERANCANGAN SISTEM

BAB IV IMPLEMENTASI SISTEM

BAB V HASIL PENELITIAN DAN EVALUASI SISTEM

BAB VI PENUTUP

DAFTAR PUSTAKA

CARA MEMBUAT FORM LOGIN RESPONSIF DENGAN BOOTSTRAP GERATIS

2026-03-31T13:57:00.001+07:00

Membuat Login dengan PHP MySQL – Login untuk memastikan bahwa sebuah sistem hanya berguna digunakan oleh pengguna yang berhak menggunakan aplikasi yang sobat buat, misalnya bagian keuangan dalam sebuah perusahaan hanya bisa mengakses modul yang berhubungan keuangan saja dan lain sebagainya.

pada kali ini kita akan membuat sebuah form login dimana pengguna hanya bisa mengakses aplikasi yang sobat buat jika sudah berhasil melakukan login. jika gagal maka pengguna akan dialihkan ke halaman form login untuk melakukan proses login ataupun jika pengguna melakukan bypass ke halaman index.php tapi dia belum login maka pengguna tersebut akan di kembalikan ke halaman login.

pada tutorial sebelumnya kita sudah membahas mengenai pembuatan database untuk login dan mengkoneksikan database dengan Php Klik disini.

Tampilan Form login dari scrip dibawah akan menjadi seperti ini

contoh database yang saya buat :
baca tutorial saya sebelumnya membuat koneksi ke database sebagai form login disini !

nama databse mayba dan nama table user
database diatas sebagai data login yang akan di baca oleh form login yang akan kita buat dibawah

Setelah kalian menyiapkan database untuk login, selanjutnya buat file dengan nama login.php
Copas kode dibawah !

<?php
session_start();
include_once 'dbconnect.php';

if(isset($_POST['btn-login']))
{
 $user = $MySQLi_CON->real_escape_string(trim($_POST['user']));
 $pass = $MySQLi_CON->real_escape_string(trim($_POST['pass']));
 $check_user = "select * from user WHERE username='$user' AND password='$pass'";  
 $run = $MySQLi_CON->query($check_user); 
 $query = $MySQLi_CON->query("SELECT * FROM user WHERE username='$user'");
 $row = $query->fetch_array();
 $id = $row['id_user'];
 
   if(mysqli_num_rows($run)){
       if($id == "1"){
        $_SESSION['userSession'] = $row['id_user'];
		header("Location: index.php");
       }else{
        $_SESSION['userSession'] = $row['id_user'];
		header("Location: index2.php");
       }
    }else{  
     $msg = "username atau password salah !";
    }   
 $MySQLi_CON->close();
}
?>
<html>
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="icon" type="jpg" href="images/logo.jpg">
<title>Login</title>
</head>
<BR><BR><BR>
<body>
	<center>
	<img width=100 height=100 src='images/logo.jpg' />
	<h2>MayBa Lampung</h2>
	<form method="post" class="form-inline">
		<div class="form-group container">
		<label>
			<p><input type="text" name="user" class="form-control" placeholder="Username" required></p>
			<p><input type="password" name="pass" class="form-control" placeholder="Password" required></p></label>
			<p><button type="submit" name="btn-login" class="btn btn-primary">Login <span class="glyphicon glyphicon-log-in"></span></button></p>
		</div>
	</form>
	</center>
</body>
</html>

session_start();

adalah untuk memulai eksekusi session pada server dan kemudian menyimpannya pada browser. Dengan intruksi ini menunjukkan pada saat session di mulai, semua session akan diaftarkan selanjutnya akan disimpan. Penyimpanan ini terjadi sampai jangka waktu tertentu.

include_one 'dbconnect.php';

Berfungsi sebagai koneksi kedalam database yang kalian buat sebelumnya.

disini saya membuat pemisah hak akses untuk admin dan pengunjung
masing - masing user akan mempunyai hak akses yang berbeda.

if(isset($_POST['btn-login']))
{
 $user = $MySQLi_CON->real_escape_string(trim($_POST['user']));
 $pass = $MySQLi_CON->real_escape_string(trim($_POST['pass']));
 $check_user = "select * from user WHERE username='$user' AND password='$pass'";  
 $run = $MySQLi_CON->query($check_user); 
 $query = $MySQLi_CON->query("SELECT * FROM user WHERE username='$user'");
 $row = $query->fetch_array();
 $id = $row['id_user'];
 
   if(mysqli_num_rows($run)){
       if($id == "1"){
        $_SESSION['userSession'] = $row['id_user'];
		header("Location: index.php");
       }else{
        $_SESSION['userSession'] = $row['id_user'];
		header("Location: index2.php");
       }
    }else{  
     $msg = "username atau password salah !";
    }   
 $MySQLi_CON->close();
}

Jika button yang bernama btn-login di klik maka akan memproses data pada database sobat apakah tersedia atau tidak. Apabila username dan password tersedia maka akan di alihkan ke header("Location: index.php"); untuk user admin dan header("Location: index.php"); sebagai user pengunjung jika tidak maka akan menampilkan "username atau password salah !"

download file loigin disini !

Sekian pembahasan dari saya
sampai bertemu di pembahasan selanjutnya, membuat halaman index.php

PANDUAN PRAKTIS PENULIASAN DAFTAR PUSTAKA YANG BENAR

2026-03-31T13:56:00.000+07:00

DAFTAR PUSTAKA-Dalam penulisan suatu karya ilmiah, kita dituntut untuk menyajikan informasi dengan disertai sumber yang benar. Tuntutan menyajikan informasi dengan sumber yang benar itulah yang membuat penulisan daftar pustaka dibutuhkan bahkan diwajibkan. Nah, dalam kiriman ini, akan dibahas tentang cara menulis sumber kutipan dan daftar pustaka, serta contohnya!

Daftar pustaka yaitu daftar yang berisi tentang semua buku atau tulisan yang dijadikan acuan atau landasan dalam penelitian. Ada beberapa manfaat pencantuman daftar pustaka atau catatan kaki, baik bagi penulis, pembaca atau penyumbang data/sumber yang diambil, yaitu:
1. memenuhi etika penulisan;
2. sebagai ucapan terima kasih penulis kepada penyumbang data;
3. sebagai pendukung ide seorang penulis karena biasanya sumber yang diambil ditulis oleh pakar yang terkenal;
4. sebagai petunjuk untuk melacak kebenaran data yang diambil;
5. sebagai referensi silang, yaitu menunjukkan pada halaman atau bagian mana data itu diambil.

Tujuan penulisan sumber kutipan dan daftar pustaka:

1. Agar terhindar dari tuduhan penjiplakan (plagiarism)

Salah satu fungsi kutipan adalah untuk menguatkan atau mendukung tulisan ilmiah Anda. Oleh karena itu, Anda harus mencantumkan sumber kutipan Anda secara singkat di bagian akhir setelah kalimat kutipan atau tepat sebelum kalimat kutipan (paling dekat dengan kalimat kutipan) dan menuliskan sumbernya secara lengkap pada daftar pustaka. Dengan melakukan ini sebenarnya Anda sedang menghindarkan diri dari masalah di kemudian hari terkait dengan mengambil hak cipta karya tulis seseorang tanpa ijin.

2. Menghargai penulis sebelumnya

Ketika Anda menuliskan secara lengkap sumber kutipan dan daftar pustaka, sebenarnya Anda sedang menghargai orang yang mempunyai ide tersebut. Selain itu, juga pengakuan bahwa teks pada bagian tersebut adalah dari ide, argumen, dan atau analisa orang lain.

3. Membantu pembaca yang ingin tahu lebih dalam mengenai sumber kutipan

Salah satu manfaat dari menuliskan sumber kutipan dan daftar pustaka secara lengkap adalah membantu pembaca yang ingin mengetahui lebih dalam tentang kutipan tersebut. Kadang-kadang pembaca tertarik untuk membaca lebih dalam tulisan yang Anda kutip. Dengan demikian, pembaca dapat menelusuri informasi dari sumber kutipan dan kemudian mendapatkan rincian lengkapnya pada daftar pustaka.

Penulisan Sumber Kutipan

Berdasarkan cara mengutipnya, kutipan dibedakan menjadi 2 jenis (Universitas Kristen Petra, 2008) yaitu:

1. Kutipan tidak langsung

Yaitu penulis mengambil ide orang lain, kemudian merangkainya dengan kalimat sendiri. Hal ini berarti penulis tidak menulis sama persis dengan kalimat asli yang dikutip. Penulis merangkai dan merangkum kalimat berdasarkan artikel atau sumber lain.

2. Kutipan langsung

Yaitu menulis ulang ide orang lain sesuai dengan aslinya. Hal ini berarti penulis langsung menggunakan teknik copy lalu paste tanpa mengubah kalimat aslinya.Ada dua jenis kutipan langsung, yaitu kutipan langsung panjang dan kutipan langsung pendek. Kedua kutipan ini berbeda cara menuliskan dan syaratnya.

a. Kutipan langsung pendek

Syarat: i. APA Style(American Psychological Association)

Jika panjang kalimat yang dikutip tidak lebih dari 40 kata.

ii. MLA Style (Modern Language Asociation)

Jika panjang kalimat yang dikutip tidak lebih dari 4 baris

Cara menuliskan: Kutipan langsung pendek dituliskan menjadi satu dalam paragraf karya tulis Anda, tambahkan tanda petik pada kutipan sehingga tanda petik ini menjadi pemisah antara kalimat Anda dengan kalimat kutipan. Sumber kutipan ditulis sedekat mungkin dengan kalimat kutipan.

b. Kutipan langsung panjang

Jenis kutipan ini dikenal juga dengan istilah block quote. Syarat:

i. APA Style(American Psychological Association)

Jika panjang kalimat yang dikutip lebih dari 40 kata.

ii. MLA Style (Modern Language Asociation)

Jika panjang kalimat yang dikutip lebih dari 4 baris

Cara menuliskan: Sesuai dengan istilah yang mengikutinya, yaitu dengan cara membuat blok kalimat yang dikutip tanpa tanda petik, ukuran font, dan spasi sesuai dengan karya tulis tetapi ditulis menjorok/masuk 1 cm (5 spasi) dari batas margin kiri tulisan Anda. Oleh karena kalimat yang dikutip ini tergolong banyak/panjang maka kalimat kutipan dipisahkan dari kalimat Anda.

Selanjutnya, berikutlah tata cara penulisan dan contoh daftar pustaka dibagi berdasarkan sumbernya:

A. Penulisan Daftar Pustaka dari Sumber Buku

Ada beberapa hal yang perlu diperhatikan dalam menulis daftar pustaka dari sumber buku. Namun, hal paling utama adalah memperhatikan urutan dan tanda bacanya. Berikut adalah urutan sebuah referensi dari buku.

1. Nama

Nama penulis ditulis paling awal. Ingatlah untuk selalu menuliskan nama belakang penulis terlebih dahulu, kemudian dilanjutkan dengan tanda koma (,) setelah itu cantumkan nama depan dan tengah penulis buku tersebut. Jika buku tersebut merupakan karya dari dua penulis atau lebih, hanya penulis pertama yang urutan namanya dibalik. Penulis kedua dan seterusnya berada setelahnya dengan urutan yang sesuai nama aslinya. Jika pada buku tersebut nama penulis dicantumkan lengkap dengan gelar pendidikan atau gelar lain, gelar-gelar tersebut tidak perlu dituliskan.

Jika dalam buku yang diacu itu tercantum nama editor, penulisannya dilakukan dengan menambahkan singkatan (Ed.).

Contoh:
• Mahaso, Ode (Ed.). 1997.

Jika pengarang terdiri dari dua atau tiga orang, nama pengarang dituliskan semuanya dengan ketentuan nama orang pertama dibalik sedangkan nama orang kedua dan ketiga tetap. Di antara kedua nama pengarang itu digunakan kata penghubung “dan”.

Contoh:
• Sumardjan, Selo dan Marta Susilo.
• Kusmadi, Ismail. Dini A., dan Eva R.

Jika lebih dari tiga orang, ditulis nama pengarang pertama yang dibalik lalu ditambahkan singkatan “dkk” (dan kawan-kawan) atau et all.

Contoh:
• Kartika, Salma dkk.
• Susan, Alberta et. all.

Jika beberapa buku ditulis oleh seorang pengarang, nama pengarang cukup ditulis sekali pada buku yang disebut pertama. Selanjutnya cukup dibuat garis sepanjang 10 ketukan dan diakhiri dengan tanda titik. Setelah nama penga-rang, cantumkan tahun terbit dengan dibubuhkan tanda titik. Jika tahunnya berbeda, penyusunan daftar pustaka dilakukan dengan urutan berdasarkan yang paling lama ke yang paling baru.

Contoh:
• Keraf, Gorys. 1979.
• _________ . 1982.
• _________ . 1984.

Jika diterbitkan pada tahun yang sama, penempatan urutannya berdasarkan pola abjad judul buku. Kriteria pembedaannya adalah setelah tahun terbit dibubuhkan huruf, misalnya a, b, c tanpa jarak.

Contoh:
• Bakri, Oemar. 1987a.
• __________ . 1987b.

2. Tahun Terbit

Setelah nama, cantumkan tahun terbit dari buku yang teman-teman gunakan sebagai referensi. Jangan terkecoh pada angka tahun cetakan awal sebab bisa saja buku yang kamu pakai merupakan cetakan kedua, ketiga, ataupun terakhir.

3. Judul Buku

Tuliskan judul bukumu secara lengkap. Jangan lupa, penulisan judul dibuat dengan italic (miring).

4. Kota dan Nama Penerbit

Bagian terakhir dalam penulisan daftar pustaka sebuah buku adalah mencantumkan kota penerbitan dan nama penerbit yang mencetak buku tersebut. Dahulukan penulisan nama kota, baru diikuti dengan nama penerbit yang dibatasi dengan tanda titik dua (:).

Hal lain yang perlu diperhatikan adalah tanda batas dari tiap urutan. Pastikan teman-teman menggunakan tanda titik (.) untuk membatasi urutan nama, tahun terbit, judul buku, hingga kota dan nama penerbit.

Contoh Daftar Pustaka dari Buku
Data Buku:
Judul : Family Medical Care Volume 4
Penulis : Dr. John F. Knight
Penerbit : Indonesia Publishing House
Kota Penerbit : Bandung
Tahun Terbit : 2001

Cara Penulisan:
Knight, John F. 2001. Family Medical Care Volume 4. Bandung: Indonesia Publishing House.

B. Penulisan Daftar Pustaka dari Artikel dalam Jurnal, Koran, atau Majalah

Tidak berbeda jauh dengan penulisan dari sumber berupa buku, teman-teman pun perlu mencantumkan nama penulis, tahun terbit, judul artikel, hingga kota dan nama penerbit. Hanya saja, ada perbedaan penulisan untuk beberapa urutan tersebut, yakni sebagai berikut.

1. Nama

Pastikan nama yang teman-teman tulis dalam daftar pustaka artikel tersebut adalah penulis artikelnya, bukan editor dari jurnal, koran, ataupun majalah yang menjadi sumber referensi.

2. Judul

Dahulukan penulisan judul artikel yang menjadi sumber referensi. Penulisan tidak dengan format italic, melainkan tegak lurus dengan pemberian tanda kutip (“) pembuka dan penutup. Setelah itu, lanjutkan dengan penulisan sumber jurnal ataupun majalah yang memuat artikel tersebut. Penulisan nama jurnal, majalah, atau koran baru dicetak miring. Ikutkan di halaman berapa artikel tersebut dimuat yang ditulis dalam tanda kurung [(…)].

Contoh Penulisan Daftar Pustaka dari Artikel Jurnal
Data Artikel:
Judul Jurnal : Sirok Bastra: Jurnal Kebahasaan dan Kesastraan Volume 1
Judul Artikel : Bahasa Indonesia dalam Informasi dan Iklan di Ruang Publik Kota Pangkalpinang
Penulis : Umar Solikhan
Penerbit : Kantor Bahasa Provinsi Bangka Belitung Kementerian Pendidikan dan Kebudayaan
Kota Terbit : Pangkalpinang
Tahun Terbit : 2013

Cara Penulisan:
Solikhan, Umar. 2013. “Bahasa Indonesia dalam Informasi dan Iklan di Ruang Publik Kota Pangkalpinang” dalam Sirok Bastra: Jurnal Kebahasaan dan Kesastraan Volume 1 (hlm. 123-129). Pangkalpinang: Kantor Bahasa Provinsi Bangka Belitung Kementerian Pendidikan dan Kebudayaan.

Contoh Jika Majalah sebagai Acuan

Jika majalah menjadi sumber acuan, kita harus memperhatikan unsur-unsur beserta urutannya yang perlu disebutkan dalam daftar pustaka sebagai berikut:

nama pengarang,
tahun terbit,
judul artikel,
judul majalah,
bulan terbit (kalau ada),
tahun terbitan yang keberapa (kalau ada),
tempat terbit.

Contoh:

Nasution, Anwar. 1975. “Sistem Moneter Internasional”. Dalam Prisma, Desember, IV. Jakarta.

Paranggi, Umbu Landu. 2006. “Puisi: Bagian Terpenting dari Darah Hidupku” dalam Horison Majalah Sastra. Jakarta: PT Metro Pos.

Contoh Jika Surat Kabar sebagai Acuan

Jika surat kabar menjadi sumber acuan, kita harus memperhatikan unsur-unsur beserta urutannya yang perlu disebutkan dalam daftar pustaka sebagai berikut:

nama pengarang,
tahun terbit,
judul artikel,
judul surat kabar,
tanggal terbit, dan
tempat terbit.

Contoh:

Tabah, Anton. 1984. “Polwan semakin efektif dalam Penegakan Hukum”. Dalam Sinar Harapan, 1 September 1984. Jakarta.

Contoh Jika Antologi sebagai Sumber Acuan

Jika antologi menjadi sumber acuan, kita harus memperhatikan unsur-unsur beserta urutannya yang perlu disebutkan dalam daftar pustaka sebagai berikut:

nama pengarang,
tahun terbit karangan,
judul karangan,
nama penghimpun (Ed.),
tahun terbit antologi,
judul antologi,
tempat terbit, dan
nama penerbit.

Contoh:

Amin, I.H.A., Ardhianto, E., (2014). Model Informasi Monitoring Inventarisasi

dan Keuangan guna Memperbaiki Fungsi Manajemen pada UKM Agen Koran, Semarang, Universitas Stikubank.

Dyatmika, S.B, (2017), Pengendalian Persediaa obat Generik dengan Metode

Analisis ABC, EOQ dan ROP di Apotek XYZ, Skripsi, Universitas Atma

Jaya Yogyakarta

Hidetotakarai (2017). EOQ, ROP, Safety Stock, Total Cost [Online]. Diakses dari

https://www.scribd.com/doc/58414097/Eoq-Rop-Safety-Stock-TotalCost

Indonesia Nomor Hk.02.02/Menkes/068/I/2010 Tentang Kewajiban

Menggunakan Obat Generik Di Fasilitas Pelayanan Kesehatan Pemerintah

Kustiyahningsih, Yeni. 2011. “Pemrograman Basis Data Berbasis Web

Menggunakan PHP & MySQL”. Jakarta: GrahaIlmu

Luthfi, M,. Amin, I.H.A,. Cahyono, T.W,. (2014). Sistem Informasi Inventory

dengan Metode First In First Out berbasis Web Mobile pada PR. SIYEM

MANDALA, Semarang, Universitas Semarang.

Peraturan Menteri Kesehatan Republik Indonesia Nomor 35 Tahun 2014 Tentang

Standar Pelayanan Kefarmasian di Apotek

Prihandoyo, M.T, (2018) Unified Modeling Language (UML) Model Untuk

Pengembangan Sistem Informasi Akademik Berbasis Web, Skripsi, Politeknik Harapan Bersama Tegal

Ryando, D ., Susanti, W., (2019), Penerapan Metode Economic Order Quantity

(EOQ) untuk menentukan Safety Stock dan Reorder Point (Studi Kasus : PT.Sinar Glassindo Jaya), Skripsi, STIKOM Pelita Indonesia

Badrussani, M, (2020), Penerapan Metode Economic Order Quantity untuk Pengendalian Stok Obat pada Klinik Pratama Dwi Puspita Semarang, Skripsi, Unisbank Semarang

Demikianlah cara penulisan sumber kutipan dan daftar pustaka serta contoh-contohnya. Semoga cara penulisan dan contoh-contoh daftar pustaka di atas dapat membantu para penulis dan calon penulis dalam proses menulis buku, sehingga proses penulisan dapat lebih cepat dan mudah.

Tutorial Koneksi Database PHP ke MySQL untuk pemula GERATIS

2026-03-31T13:43:00.004+07:00

Tutorial ini berguna untuk Anda yang akan memulai belajar membuat website. Anda akan belajar cara melakukan koneksi PHP ke MySQL. Hal ini diperlukan jika Anda ingin memodifikasi, menampilkan, menghapus atau mengelola tabel yang telah dibuat pada database Anda.

Buat Database MySQL

Langkah ini diperlukan ketika Anda belum memiliki database MySQL. Pertama-tama, silakan buat database dengan nama database Anda sendiri, silakan sesuaikan dengan nama database yang Anda inginkan.

contoh :
Nama database mayba dengan table user,
pada table user saya gunakan sebagai data untuk login. siapkan databse seperti dibawah ini.

CREATE TABLE `user` (
`id_user` int(11) NOT NULL,
`username` varchar(100) COLLATE utf8mb4_general_ci NOT NULL,
`password` varchar(100) COLLATE utf8mb4_general_ci NOT NULL,
`akses` int(11) NOT NULL
)

Buat File Koneksi PHP untuk Dihubungkan ke Database MySQL

Contoh : Save File dibawah dengan nama dbconnect.php

<?php
  $DB_host = "localhost";
  $DB_user = "root";
  $DB_pass = "123";
  $DB_name = "mayba";
  
  $MySQLi_CON = new MySQLi($DB_host,$DB_user,$DB_pass,$DB_name);
    
     if($MySQLi_CON->connect_errno)
     {
         die("ERROR : -> ".$MySQLi_CON->connect_error);
     }

?>

Sesuaikan data di atas dengan data pada database yang kalian buat

download file konesi disini !

file database user disini!

Kesimpulan

Pada tutorial ini, saya telah membahas pengetahuan dasar mengenai database berikut cara melakukan koneksi PHP ke database MYSQL. Anda dapat menggunakan tutorial ini sebagai panduan dasar ke tahap script serta konfigurasi PHP lanjutan. Melakukan koneksi database php adalah langkah pertama yang paling penting Anda lakukan.

Apakah Anda masih memiliki pertanyaan? Jangan ragu untuk menyampaikannya pada kolom komentar di bagian akhir halaman ini! Terus dapatkan ulasan terbaru seputar dunia online dari kami langsung melalui inbox email Anda dengan klik Subscribe sekarang ?

TUTORIAL LANJUTAN

Membuat menu login pada Php

Tutorial Membuat Sidebar Responsif dengan HTML, CSS, dan Javascript GERATIS

2026-03-31T13:39:00.002+07:00

Halo, Teman - teman semua . .

Kalian pasti pernah mendengar kata sidebar, saya yakin di antara teman - teman terutama lulusan S.Kom ataupun calon S.Kom sudah tidak asing lagi dengan yang namanya Sidebar.

Sidebar adalah sebuah kolom yang tampil pada aplikasi di bagian samping kiri atau kanan konten utama. Kali ini saya tidak akan membahas terlalu detail mengenai apa itu Sidebar, yang akan saya bahas adalah bagaimana cara membuat Sidebar tersebut.

Sebelum itu, saya asumsikan sobat sudah memenuhi prasyarat yang dibutuhkan untuk memulai pembuatan Sidebar ini diantaranya:

1. Laptop,

2. Web Browser,

3. Code Editor, dan

4. Sedikit pemahaman mengenai HTML, CSS, dan Javascript.

Selanjutnya, buat struktur folder belajar kita sebagai berikut, dengan tujuan agar terpisah antara html, script, dan style.

Buka file index.html dan buat syntax-syntax dasar HTML dengan sebuah tombol sebagai Toggle Sidebar, jangan lupa juga untuk menghubungkan index.html dengan script.js dan style.css.

<!DOCTYPE html>

<head>

<title>Belajar membuat Sidebar dengan HTML, CSS, dan Javascript</title>

</head>

<body>

<button class="toggle-sidebar" id="toggle-sidebar">Toggle Sidebar</button>

</body>

</html>

Selanjutnya, masih di index.html buatlah elemen Sidebar kita dengan beberapa link didalamnya. Letakkan kode berikut di bawah tombol Toggle Sidebar.

...

<button class="toggle-sidebar" id="toggle-sidebar">Toggle Sidebar</button>

<li><a href="#">Beranda</a></li>

<li><a href="#">Portofolio</a></li>

<li><a href="#">Galeri</a></li>

<li><a href="#">Tentang</a></li>

<li><a href="#">Kontak</a></li>

</ul>

...

Berikut adalah preview sementara Sidebar kita, selanjutnya kita perlu memberikan style supaya tampilannya menarik.

Buka file style.css dan isikan code berikut :

* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
.toggle-sidebar {
border: none;
background-color: #3097af;
color: white;
font-weight: bold;
padding: 10px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
.sidebar {
height: 100vh;
width: 200px;
list-style: none;
background-color: #3097af;
}
.sidebar li a {
display: block;
padding: 25px;
text-decoration: none;
color: white;
font-weight: bold;
text-transform: uppercase;
border-bottom: 1px solid silver;
transition: background-color 0.5s;
}
.sidebar li a:hover {
background-color: rgba(255, 255, 255, 0.3);
}

Sekarang lihatlah hasilnya dengan membuka di browser, saya asumsikan tampilan punya sobat sudah terlihat lebih baik seperti berikut.

Wah, sudah menarik bukan? tetapi kita belum selesai sampai di sini. Kita masih perlu menambahkan sedikit style lagi agar Sidebar bisa muncul dan bisa disembunyikan.

Tambahkan kode sedikit berikut pada selector .sidebar dan setelahnya

...

.sidebar {

height: 100vh;

width: 200px;

list-style: none;

background-color: #3097af;

/* tambahkan kode ini */

position: fixed;

left: -200px;

transition: 0.5s;

}

/* tambahkan selector .sidebar-open di css */

.sidebar-open {

left: 0;

}

...

Setelah menambahkan kode tersebut kamu akan mendapati bahwa Sidebar sobat hilang, tetapi tenang saja sebenarnya Sidebar tersebut bukan hilang, tetapi disembunyikan. Selector .sidebar-open merupakan class untuk menampilkan kembali Sidebar sobat, dengan bantuan javascript kita akan menampilkan dan menyembunyikan sidebar kita melalui class ini dengan menekan tombol Toggle Sidebar.

Selanjutnya, isikan file script.js kita dengan kode berikut.

const toggleSidebar = document.querySelector("#toggle-sidebar");

const sidebar = document.querySelector(".sidebar");

toggleSidebar.addEventListener("click", () => {

sidebar.classList.toggle("sidebar-open");

});

Sekarang, coba sobat preview hasil belajar kita. Seharusnya tombol Sidebar dan elemen Sidebar berfungsi layaknya Sidebar pada umumnya.

Saya hanya ingin menunjukkan cara mudahnya agar sobat mudah memahami, untuk selanjutnya silahkan sobat kembangkan Sidebar ini sesuka sobat agar lebih menarik lagi. :)

Aplikasi Stok Barang Responsive PHP MySqli Gratis Download

2023-04-15T10:58:00.004+07:00

Halo teman teman , kali ini saya mau membagikan Source Code Aplikasi Stok Barang Berbasis Web. yang bisa kalian gunakan untuk skripsi, Belajar, dll.

Aplikasi stok barang berfungsi untuk mempermudah pengguna dalam mengolah data barang seperti melihat jumlah barang, melihat transaksi data barang masuk dan keluar serta membuat cetak laporan harian maupun bulanan. Fitur lainnya yang sangat menarik dan ada di dalam paket aplikasi ini adalah sebagai berikut : Berbasis WEB Menggunakan bahasa pemograman PHP Menggunakan database MySql Disain responsive dan mobile friendly Menggunakan Halaman login dan logout Halaman transaksi terdiri dari data barang masuk dan keluar Print laporan stok barang Print laporan barang masuk Print laporan barang keluar Multi level user

Tampilan Login :

Tampilan menu transaksi :

Tampilan data pengguna :

Tampilan Logout

Install Aplikasi

Seperti biasa, untuk menjalankan aplikasi ini anda akan membutuhkan XAMPP sebagai web server yang akan dijadikan localhost-nya. Saya tidak akan menjelaskan apa itu XAMPP karena jika anda sudah sampai disini artinya anda sudah paham prosedur dasar menjalankan aplikasi berbasis web.

XAMPP yang saya gunakan adalah XAMPP Version 3.3.0. Selanjutnya Jika anda ingin menggunakan aplikasi ini silahkan ikuti langkah-langkah instalasi berikut:

Download aplikasi stok barang.rar (Pada deskripsi video sudah termasuk source code dan file database).
Setelah selesai mendownload, ekstrak terlebih dahulu file yang masih dalam bentuk rar tersebut
Pindahkan file yang sudah di ekstrak ke dalam folder htdocs pada komputer anda, biasanya di C:\xampp\htdocs
Jangan lupa! pastikan XAMPP anda sudah jalan.
Import database ke database MySql, file database ada di dalam folder database
Terakhir ketikkan alamat localhost/stokBarang/ pada browser anda, tekan enter untuk membuka
Selesai

Video Tutorial Penggunaan Aplikasi Stok Barang :

MEMBANGUN WEBSITE DARI AWAL

2023-04-07T17:26:00.001+07:00

Website adalah elemen penting yang kalian butuhkan saat akan membuat profil online maupun membangun bisnis.
Pada artikel ini, kita akan membahas tuntas cara membuat website mulai dari awal hingga dapat di gunakan, sehingga kamu dapat mengerti cara pembuatan website itu ternyata tidak sesulit yang sobat fikirkan, Mari kita mulai.

Tentukan Website yang akan kaliat buat, seperti toko online, data stok barang perusahaan, data siswa dll.
Buat program, saya sarankan disini menggunakan localhost kalo saya biasa menggunakan AMPPS atau XAMPP dan Notepad++.
Pilih Hosting dan Nama Domain

Langkah 1: Tentukan Website yang akan kaliat buat

Silakan website apa yang akan saudara buat dan untuk siapa website itu akan di gunakan. Tujuan ini akan berdampak pada saat kalian mulai membuat website yang kalian inginkan. Biasanya, ada beberapa tujuan yang bisa kamu tentukan sesuai dengan ketertarikan atau niche-mu. Contohnya, membuat website untuk pribadi (portfolio), website bisnis, website toko online, dll.

Langkah 2: Pilih Hosting dan Nama Domain

Pilih hosting terbaik jangan asal memilih penyedia jasa hosting.
Hosting terbaik harus memiliki 3 poin utama berikut yaitu:

Keamanan yang tinggi
Kecepatan load yang baik
Dapat diandalkan 24/7

Selanjutnya kamu juga harus menentukan nama domain yang pas untuk website-mu. Pilih nama domain yang unik dan mudah untuk di ingat oleh pengguna lain yang ingin mencari website-mu. itu sangat berpengaruh dengan traffic website-mu.

Setelah menentukan nama domain yang cocok, segera daftarkan hosting dan domain yang sudah kalian daftarkan. pilih paket cloud hosting yang diinginkan. Kamu bebas memilih paket yang sesuai dengan budget dan kebutuhan kalian.

TUTORIAL MENGURUTKAN DATA DI DATABASE BERDASARKAN KRITERIA DENGAN HTML PHP

2021-04-10T16:27:00.004+07:00

Mengurutkan data berdasarkan kriteria pada database dan halaman php merupakan tutorial bagaimana cara agar dapat mengurutkan data sesuai yang diinginkan sehingga data yang tampilkan akan lebih ter-urut pada halaman web. Seperti mengurutkan berdasarkan ID atau nama dll. Menampilkan data berdasarkan id dengan php dari database misalnya adalah biodata karyawan secara lengkap ditampilkan pada halaman, contoh lain misalnya menampilkan informasi ketersediaan barang berdasarkan id barang atau nama barang, tanggal barang masuk atau keluar dll.

Tutorial yang saya buat ini menggunakan sistem operasi Windows 10 menggunakan web server AMPPS dengan mysql ekstensi database mysqli. Untuk mengikuti tutorial ini pada komputer kalian harus sudah terinstal AMPPS dan menggunakan bahasa pemrograman php versi 7. Oke, sepertinya pembahasan cara membuat script php untuk menampilkan data berdasarkan kriteria dari database dapat dimulai.

Berikut langkah-langkah menampilkan data berdasarkan kriteria.

1. Buat Database.

Ini hanya sebagai contoh database mysql yang saya buat. saya akan membuat website untuk mengelola data absensi dari mesin finger kehadiran karyawan.
buat databse dengan nama db_klinik dan nama tabel tb_data, dimana pada tabel tb_data berisi biodata karyawan klinik seperti nik, nama, jabatan, dan lain-lain. Yang perlu diperhatikan dan sangat penting adalah pastikan bahwa id disetup sebagai primary key dan unik, karena id tersebut akan digunakan sebagai referensi untuk menampilkan data yang lain dalam baris data yang sama.

2. Menampilkan Data ke Halaman.

Pada tutorial cara membuat script php menampilkan data berdasarkan kriteria ini, data yang ada di database ditampilkan terlebih dulu kemudian baru ditampilkan detailnya sesuai dengan kriteria yang diinginkan. Oleh karena itu, pada langkah ini kita akan menampilkan data yang ada pada database.
Simpan sebagai index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<link rel="icon" type="jpg" href="images/logo.jpg">
  <title>badrussani.blogspot.com</title>
</head>		
<body>
   <nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.php">badrussani.blogspot.com</a>
		</div>
			    <li class="active dropdown">
			    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-hand-right"></span> Data Pegawai
					<span class="caret"></span></a>
			        <ul class="dropdown-menu">
				        <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Jam Praktek</a></li>
				        <li class="active"><a href="data_pegawai.php"><span class="glyphicon glyphicon-list-alt"></span> Rincian Gaji</a></li>
	    	    		<li><a href="#"><span class="glyphicon glyphicon-plus"></span> Tambah Data</a></li>
			        </ul>
			    </li>
			    </ul>
			    <ul class="nav navbar-nav navbar-right">
				<li><a href="#" onclick="return confirm('Anda Ingin Keluar ?')"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
			    </ul>
		    </div>
	    </div>
    </nav>

<div class="container">
<p><center><h4>DATA RINCIAN GAJIH PEGAWAWI<br>
badrussani.blogspot.com</h4></center></p>

 <div class="table-responsive">
    <table class="table table-bordered" style="font-size : 10px">
	<tr style="background-color : yellow;">
            <th><a href="data_pegawai.php"> &#x2771;|<fone style="color:black">NO </fone></a></th>
            <th><a href="data_pegawai.php?id=nama_pegawai">
                <? if($id == "nama_pegawai"){
                      echo "&#x2714|";
                      }else{
                      echo "&#x2771|";
                      }?><fone style="color:black">NAMA PEGAWAI</fone></a></th>
            <th><a href="data_pegawai.php?id=nip">
                <? if($id == "nip"){
                      echo "&#x2714|";
                      }else{
                      echo "&#x2771|";
                      }?><fone style="color:black">NIP</fone></a></th>
            <th><a href="data_pegawai.php?id=jabatan">
                <? if($id == "jabatan"){
                      echo "&#x2714|";
                      }else{
                      echo "&#x2771|";
                      }?><fone style="color:black">JABATAN</fone></a></th>
            <th><a href="data_pegawai.php?id=klinik">
                <? if($id == "klinik"){
                      echo "&#x2714|";
                      }else{
                      echo "&#x2771|";
                      }?><fone style="color:black">NAMA KLINIK</fone></a></th>
            <td><b>REKENING BANK</b></td>
            <th><b>SHIFT PAGI</b></th>
            <th><b>SHIFT SORE</b></th>
            <th><b>HONOR</b></th>
        </tr>
<?php 
include "koneksi.php";
$id= $_GET['id'];
if($id == ""){
$sql = $pdo->prepare("SELECT * FROM data ORDER BY klinik, nama_pegawai"); 
}else{
$sql = $pdo->prepare("SELECT * FROM data ORDER BY $id");
}
$sql->execute(); // Eksekusi querynya
$no = 1; // Untuk penomoran tabel, di awal set dengan 1
while($data = $sql->fetch()){ // Ambil semua data dari hasil eksekusi $sql
$id_pegawawi = $data['id'];
$nama = $data['nama_pegawai'];
$jabatan = $data['jabatan'];
$nip = $data['nip'];
$jabatan = $data['jabatan'];
$klinik = $data['klinik'];
$rekening = $data['rekening'];
$insentif_shift1 = $data['insentif_shift1'];
$insentif_shift2 = $data['insentif_shift2'];
$honor = $insentif_shift1 + $insentif_shift2;
$pj = $data['pj'];
$pasien = $data['insentif_pasien'];
$variable = $data['tambahan'];
?>
<tr>
    <td><center><? echo $no++ ?></center></td>
    <td><? echo $nama ?></td>
    <td><? echo $nip ?></td>
    <td><? echo $jabatan ?></td>
    <td><? echo $klinik ?></td>
    <td><? echo $rekening ?></td>
    <td><? if($insentif_shift1 == "0"){
            echo '<center>-</center>';
            }else{
            echo ($insentif_shift1);
            } ?></td>
    <td><? if($insentif_shift2 == "0"){
            echo '<center>-</center>';
            }else{
            echo ($insentif_shift2);
            } ?></td>
    <td><? if($honor == "0"){
            echo '<center>-</center>';
            }else{
            echo ($honor);
            } ?></td>
</tr>
<?php
} ?>
</table>
</div>
</body>
</html>

ini adalah perintah sql untuk mengurutkan data berdasarkan kriteria

include "koneksi.php";
$id= $_GET['id'];
if($id == ""){
$sql = $pdo->prepare("SELECT * FROM data ORDER BY klinik, nama_pegawai"); 
}else{
$sql = $pdo->prepare("SELECT * FROM data ORDER BY $id");
}

$id = $_GET['id'];

adalah untuk mennentuan data mana yang akan di urutkan pada perintah sql ("SELECT * FROM data ORDER BY $id");

jika perintah $id kosong makan dia akan mengurutkan berdasarkan nama klinik dan nama pegawai.

Sekian tutorial dari saya, semoga bermanfaat, sampai bertemu dengan tutorial saya selanjutnya, terimaksih.

Cara Mudah Download File di Scribd

2019-07-30T14:12:00.001+07:00

Para pelajar sudah tidak asing lagi dengan situs Scribd. Scribd adalah sebuah situs web yang diperuntukan untuk berbagi dokumen dengan format iPaper. Anda bisa download file di scribd lewat hp maupun pc dengan berbagai cara lho!.

Scribd memiliki pengguna aktif dengan angka lebih dari 50 juta dan lebih dari 50 ribu dokumen yang dimuat setiap harinya.

Kita bisa menemukan berbagai macam file dokumen seperti makalah, dokumen presentasi, dokumen skripsi, dan banyak dokumen lain.

Tidak hanya memudahkan kita untuk saling berbagi dokumen. Namun juga sangat berdampak bagi lingkungan yaitu mengurangi penggunaan kertas.

Namun sayangnya banyak yang belum tau bagaimana cara download file di scribd tanpa login secara gratis di android dan pc.

Sehingga banyak dari kita yang sudah tidak mengunjungi lagi situs scribd. Padahal sangat banyak dokumen yang berguna dan menarik.

Ada beberapa cara download dokumen dari scribd yang bisa kita lakukan baik dari hp maupun komputer.

Cara pertama yang akan kita lakukan adalah menggunakan situs DLSCRIB. Situs ini selain mudah untuk digunakan server download nya pun cukup cekap. Dan tentunya bebas dari virus.

Cara download file di Scribd terbaru:

Jalankan web browser
Setelah itu cari file dokumen scribd yang ingin kita download.
Salin alamat URL dari file dokumen tersebut.
masukan Link ke kotak di bawah
Centang di kotak bertulisan. “By using this tool, you are agreeing to the disclaimer and you agree not to hold us for any liability“.
Selanjutnya klik tombol yang bertuliskan Generate Download Link.
Maka akan muncul Captcha. Centang pada I’m not a robot, selanjutnya klik Download PDF.
Tunggu hingga muncul keterangan ukuran pdf. Jika sudah Klik untuk mengunduhnya.

Account 180.246.86.29

Search

Cara Membuat halaman kontak di blogspot

2018-10-23T23:50:00.003+07:00

Slamat datang di postingan saya kali ini

postingan kali ini saya akan menjelaskan cara membuat kolom Kontak pada blog sobat

kolom kontak ini bertujuan apabila sewaktu-waktu ada pengunjung yang ingin bertanya lansung kepada pengguna blog tersebut.

langsung saja simak penjelasanya dari saya:

Download file Html untuk Kontak disini

1. Login ke Blog sobar

2. Buat halaman baru dan masukan kode Html di bawah, beri nama kontak agar mudah untuk di ingat

3. buat halam baru unruk membuat halaman kontak.

4. Copy semua Kode html yang bernama Kontak Blog yang sudah sobat download ke dalam halaman kontak pada mode HTML dan simpan.

ini hasilnya :

5. masuk ke ( Tata Letak - footer & Tambahkan Tatget + Formulir Kontak )

6. Masukan kode Css ke dalam Tenplad sobat

Tema - Edit Html cari kode " ]]></b:skin> " tanpa tanda petik, agar lebih mudah pada kybord Shift + F dan copas kode " ]]></b:skin> " tanpa tanda petik.

7. setelah kode itu di temukan,copas kode di bawah ini di atas kode " ]]></b:skin> " tanpa tanda petik.

( Tujuan memasukan Css di bawah agar tidak tidak menampilkan 2 kolom kontak atau agak tidak tampil padahalaman postingan dan halamanlainya )

#ContactForm1,#ContactForm1 br{display:none;visibility:hidden}

janagn lupa Simpan!!!😁😁😁😁

Contoh gambar peletakan kode di atas :

Semoga bermanfaat,

jika ada kesalahan atau ada kata yang kurang jelas bisa tulis komentar di bawah atau kirim pesan email di kolom kontak, atau bisa juga chat live di bagian pojok kanan bawah.

sekian dari saya terimakasih

MEMBUAT TEMPLAT BLOG SENDIRI

2018-10-23T12:18:00.001+07:00

Simak langkah demi langkah pembuatanya :

Kita siapkan bahan yang akan kita gunakan
Download Kode Html disini
Login Blog sobat
Langsung Pilih : Tema – Edit Html
Blok Semua dan Hapus semua kode Html templat bawaan blog sobat
Menuju File Html yang sudah sobat download tadi pada link di atas
Sobat buka file word yg bernama Paketdropdown copy semua dan pastekan pada tema blog sobat.
Lalu Pilih Simpan tema
Lihat hasilnya !!
Timpan tema - kembali dan pilih Sesuaikan (di sebelah edit Html)
sobat bisa atur sendiri tampilan seperti apa yang di inginkan.
Kalau saya memilih warna seperti ini 😁😁😁😁
Bagaimana dengan sobat sendiri.
simpan dengan cara pilih terapkan ke blog di bagian pojok kanan atas. dan pilih
<<Kembali ke blog dan lihathasilnya.
Ini hasil tampilan yang saya edit, sobat bisa coba sendiri, dan buat tampilan yang lebih bagus dari punyaku 😁😁😁😁
Untuk merubah nama dari navbar Tata Letak - Saluran Kolom - EditDisitu rubah sesuai keinginan sobat sendiri.

Sekian penjelasan dari saya
Saya Badrus sampai bertemu di postingan saya selanjutnya 😁😁
Semoga bermanfaat, kalau ada salah kata atau ada yang kurang jelas bisa komentar di bawah atau kirim email di bagian kontak atau bisa juga langsung kirim live chat di bagian pojok bawah blog ini,

Materi Html ke :

. . . . . . . . . . . . . . . . . . . . . . 1 2 3 4 5 6 7 8 9 10 . . . . . . . . . . . . . . . . . . . . . .

Mengenal Designer dan Blocks Editor Pada App Inventor 2

2018-10-21T14:39:00.000+07:00

Designer

Designer merupakan area kerja App Inventor 2 untuk mendesain tampilan (user interface) aplikasi. Area ini terdiri dari beberapa panel yaitu Pallate, Viewer, Components, dan Properties.

Berikut ini adalah penjelasan dari beberapa panel tersebut:

1.Menu Bar, terdiri dari barisan menu-menu yang tersedia di App Inventor 2. Menu bar terbagi dua baris yaitu Menu Projects, Connect, Build, Help, My Projects, Gallery, Guide, Report an Issue, English dan User Profile. Sedangkan baris menu kedua terdiri dari Add Screen, Designer and Blocks.

Menu Projects memiliki banyak sub menu yang berfungsi untuk mengatur proyek aplikasi. Sub menu tersebut seperti gambar dibawah ini.
Menu Connect berfungsi untuk menguji coba beberapa jenis koneksi aplikasi. Uji coba dilakukan melalui tiga buah koneksi yaitu: emulator, kabel data, atau WiFi.
Menu Build berfungsi terdiri dari 2 sub menu yaitu App (Provide QR Code for. apk) dan App (Save .apk to my computer). sub menu App (Provide QR Code for. apk) berfungsi untuk membuat kode QR dari Aplikasi. Sedangkan sub menu app berfungsi untuk membuat file paket aplikasi yaitu file .apk. Berikut ini adalah gambar dari menu tersebut.
Menu Help berfungsi untuk membantu pengguna (user) jika mengalamai masalah. Tampilan sub-sub menu help dapat dilihat pada gambar berikut ini.
Menu My Projects berfungsi untuk menampilkan semua proyek aplikasi.
Menu Gallery berisikan galeri proyek aplikasi yang sudah jadi dan proyek tersebut bisa langsung dibuka di App Inventor. Berikut adalah tampilan menu Gallery.
Menu Guide berfungsi untuk membuka pustaka/library App Inventor. Tampilan menu Guide dapat dilihat pada gambar dibawah ini.
Menu Report An Issue berfungsi untuk menyampaikan berbagai permasalahan melalui MIT App Inventor Support Forum.
Menu English berfungsi untuk memilih bahasa yang digunakan di App Inventor. Pada menu ini terdiri dari beberapa pilihan yang dapat dilihat pada gambar di bawah ini.
Menu User Profile berfungsi untuk menampilkan alamat email yang digunakan pengguna untuk melakukan login ke App Inventor.
Menu Add Screen berfungsi untuk menambah screen baru.
Menu Remove Screen berfungsi untuk menghapus screen terpilih.
Menu Designer berfungsi untuk membuka area designer, yaitu area untuk mendesain tampilan aplikasi.
Menu Blocks berfungsi untuk membuka area blocks editor, yaitu area untuk mendesain susunan kode-kode program.

2.Panel Palette merupakan panel yang berisi berbagai jenis komponen yang disediakan oleh App Inventor 2. Panel paletteini dibagi menjadi beberapa tab yaitu User Interface, Layout, Media, Drawing & Animation, Sensors, Social, Storage, Connectivity, LEGO MINDSTORMS, Experimental, dan Extension. Berikut ini adalah tampilan dari panel palette.

Tab-tab tersebut dapat dijelaskan sebagai berikut:

Tab User Interface merupakan tab yang berisi komponen-komponen untuk mendesain tampilan aplikasi. Komponen-komponen tersebut dapat dilihat pada gabmar berikut.
Tab Layout merupakan tab yang berisi komponen-komponen visible di layar aplikasi. Komponen-kompenen tersebut dapat dilihat pada gambar berikut.
Tab Media merupakan tab yang berisi komponen-komponen multimedia, seperti kamera, pemutar video, pemutar musik, perekam suara, dan lain-lain. Tampilan nya dapat dilihat pada gambar berikut.
Tab Drawing and Animation merupakan tab yang berisi komponen-komponen untuk membuat objek bergambar dan animasi. Tampilannya dapat dilihat pada gambar berikut.
Tab Sensors meruapakan tab yang berisi komponen-komponen sensor, seperti sensor lokasi, orientasi, jarak dan lain-lain. Tampilannya dapat dilihat pada gambar berikut.
Tab Social merupakan tab yang berisi komponen-komponen untuk membuat aplikasi sosial seperti sms, email, twitter, panggilan telepon dan lain-lain. Tampilannya dapat dilihat pada gambar berikut.
Tab Storage merupakan tab yang berisi komponen-komponen untuk menyimpan file dan membuat aplikasi-aplikasi database. Tampilannya dapat dilihat pada gambar berikut.
Tab Connectivity merupakan tab yang berisi komponen-komponen untuk koneksi perangkat. Tampilannya dapat dilihat pada gambar berikut.

3.Panel Viewer merupakan panel yang berisi tampilan layar perangkat. Tampilan tersebut berfungsi untuk tempat mendesain user interface. Untuk tampilannya rekan-rekan bisa lihat langsung di interface App Inventor 2.

4.Panel Components merupakan panel yang berfungsi untuk menampilkan seluruh komponen yang digunakan dalam mengembangkan aplikasi. Untuk tampilannya rekan-rekan bisa lihat juga langsung di interface App Inventor 2.

5.Panel Properties merupakan panel yang berfungsi untuk menampilkan properti/atribut screen maupun komponen. Untuk tampilannya rekan-rekan bisa lihat langsung di interface App Inventor 2.

6.Panel Media merupakan panel yang berfungsi sebagai media untuk mengunggah file-file suara maupun gambar yang diperlukan aplikasi ke server App Inventor 2. Untuk tampilannya rekan-rekan bisa lihat langsung di interface App Inventor 2.

Blocks Editor

Blocks editor merupakan area kerja App Inventor 2 yang berfungsi untuk menyusun blok-blok kode program. Area ini terdiri dari 2 panel yaitu, panel blocks dan panel block viewer.

Berikut ini adalah penjelasan dari kedua Panel:

Panel Blocks berisikan daftar blok kode program built-in (default) maupun kode program yang tersedia di masing-masing komponen. Daftar blok built-in dibagi ke dalam beberapa group yaitu Control, logic, math, text, list, colors, variables dan procedures. Kelompok ini muncul di panel blocks. Sedangkan daftar blok komponen akan muncul jika pengguna menambahkan komponen tersebut ke program aplikasi yang dibuat.

Panel Block Viewer merupakan panel yang berfungsi sebagai temapat mendesain susunan blok-blok kode program. Panel ini memilki area yang laus dan kita bebas meletakkan susunan blok-blok kode program di area ini.

Membuat Navbar pada HTML dan CSS

2018-10-20T23:28:00.002+07:00

Hallo semua, kali ini Kami akan membuat sebuah tutorial untuk membuat navbar sederhana pada HTML dan CSS. Sebelumnya, Kamu harus paham dulu konsep dari HTML itu sendiri.

HTML memiliki beberapa element, salah satunya yaitu <nav>. Nav adalah element pada HTML yang dibuat untuk mempresentasikan link navigasi. Bisa dibilang, nav adalah wadah dari link yang akan men direct kita ke halaman lain. Tetapi link yang berada pada element <nav> biasanya adalah link major yang merujuk kepada halaman lain pada website kita. Misalkan menunjukan link halaman utama,gallery dll.

Pada pengetikan sintaks kita dapat menggunakan berbagai macam code editor, misalkan Notepad++ atau Sublime. Pemilihan code editor bisa bebas sesuai dengan yang kita inginkan.

Implementasi

Berikut adalah contoh sederhana penulisan kode HTML untuk navigation bar.

<nav>
 <a href="/home/">Halaman Utama</a> |
 <a href="/gallery/">Gallery</a> |
 <a href="/contact/">Contact Us</a> |
</nav>

Berikut adalah contoh lain dari pembuatan nav pada HTML:

Membuat Navbar dengan menambahkan CSS

Setelah Kita selesai mencoba membuat navbar sederhana, Kita dapat menambahkan CSS untuk membuat navbar lebih bagus dan enak dilihat.

Berikut Contoh Penggunaan Nav dengan ditambahkan CSS

Berikut adalah kode untuk menampilkan navbar seperti gambar di atas:

Penjelasan:

display: block; Digunakan untuk membuat display link menjadi sebuah bentuk.

:hover pada CSS maksudnya adalah action yang kita buat pada selector hover akan berjalan saat cursor kita diarahkan pada object tersebut.

display: inline-table; Berfungsi untuk membuat object sejajar dengan object lainnya.

Pembuatan Dropdown Pada Nav

Setelah membuat navbar yang sederhana, sekarang Kita akan mencoba menambahkan fitur dropdown pada navbar. Dropdown adalah fitur dimana saat Kita menggerakan mouse kepada link nav tersebut, akan muncul daftar - daftar link lain yang terdapat didalam link pertama.

Berikut adalah kode programnya:

Bagaimana Dropdown bisa terjadi ?

Karena saat pertama dijalankan, CSS pada selector nav ul ul ber-display none. Dan pada saat kita hover akan berubah menjadi block. Perubahan tersebut akan memunculkan konten nav ul ul saat kita hover. Dan ditambahkan property-property lain agar rapih.

Demikianlah tutorial yang bisa Kami share kali ini, semoga tutorial kali ini bermanfaat untuk kedepannya. Semoga wawasan kalian tentang HTML dan CSS bertambah. Janganlah berhenti belajar karena hidup tak pernah berhenti mengajarkan.

Sumber : http://www.w3schools.com/tags/tag_nav.asp

Materi Html ke :

. . . . . . . . . . . . . . . . . . . . . . 1 2 3 4 5 6 7 8 9 10 . . . . . . . . . . . . . . . . . . . . . .

Cara Menambahkan Gambar di HTML

2018-10-20T20:45:00.001+07:00

Penambahan media berupa gambar pada suatu website tentunya akan menciptakan tampilan halaman web yang menarik dan informasi yang disampaikan menjadi lebih informatif. Ada beberapa macam format gambar yang didukung oleh HTML, seperti GIF, PNG, JPG, JPEG, WMF, PCX, BMP, TIFF dan lain sebagainya. Namun, format gambar PNG dan JPG/ JPEG yang paling sering digunakan dan merupakan format yang paling cocok karena dikenali oleh mayoritas browser.

Sebelum Anda memasukkan gambar ke sebuah website, Anda harus mempertimbangkan apakah penempatan gambar tersebut sudah cocok atau malah merusak tampilan dan konten website (tidak sesuai dengan isi website dan menyulitkan pembaca untuk membaca informasi di dalamnya). Pada materi kali ini, saya tidak hanya menjelaskan mengenai cara menambahkan gambar di HTML melainkan juga menjelaskan bagaimana cara mengatur posisi gambar atau mempercantik gambar dengan bingkai atau garis tepi.

Penggunaan tag <img>

Untuk menambahkan gambar ke HTML, Anda dapat menggunakan tag <img>. Berikut atribut – atribut yang terdapat pada tag <img> :

Atribut	Fungsi
src	Menunjukkan URL atau direktori lokasi file gambar berada
width	Lebar gambar (default : pixel)
height	Tinggi gambar (default : pixel)
align	Menentukan posisi teks di sekitar gambar
alt	Sebagai kata kunci gambar di search engine semisal Google dan menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan misalnya karena koneksi lambat
title	Memberikan keterangan gambar ketika cursor diarahkan ke gambar tersebut
border	Memberikan bingkai (garis tepi) pada gambar dengan nilai menggunakan satua pixel (default)

Berikut contoh kode penggunaan tag <img> di HTML:

<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar di HTML</title>
</head>
<body>
Dibawah ini merupakan gambar pantai:
<img src="pantai.jpg" alt="gambar pantai">
</body>
</html>

Ketika kode HTML dijalankan, tampilannya di browser akan seperti ini:

Jika Anda sudah membaca materi belajar HTML sebelumnya (materi tentang local link), Anda tidak akan bingung mengenai penulisan atribut src=”direktori/namafile.jpg”. Saya akan sedikit menyinggungnya agar Anda tidak bingung. Misalkan saya mempunyai 1 file html (webku.html), 1 file gambar (pantai.jpg) dan 1 folder (Gambar) yang berisi 1 gambar (dinosaurus.jpg). Strukturnya seperti ini:

Anggap saja saat ini saya sedang mengedit file webku.html dan ingin menambahkan pantai.jpgdi file html tersebut. Maka penulisan kode HTMLnya sebagai berikut:

Dan jika Anda ingin menambahkan dinosaurus.jpg, maka penulisan kode HTMLnya seperti ini:

Menambahkan gambar dari website lain

Jika Anda ingin menambahkan gambar dari website lain, Anda harus menuliskan lokasi direktori gambar tersebut secara lengkap. Selain itu, Anda harus membutuhkan koneksi internet jika ingin menambahkan gambar dari website lain.

Untuk cara mengetahui lokasi direktori gambar suatu website bisa dilakukan dengan cara klik kanan gambar yang dinginkan, kemudian pilih Copy Image Address.

Setelah Anda menyalin direktori gambarnya, pastekan pada atribut src=”lokasi direktori gambar”. Untuk contoh penulisan kode HTMLnya seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar dari Website Lain</title>
</head>
<body>
Dibawah ini merupakan gambar yang saya ambil dari website Nesaba Media:
<img src="https://www.nesabamedia.com/wp-content/uploads/2016/02/login.png"alt="gambar nesaba media">
</body>
</html>

Jika Anda jalankan di browser, hasilnya seperti ini:

Atribut alt

Mungkin Anda bertanya-tanya kenapa saya selalu menggunakan atribut alt ini ketika ingin menambahkan gambar di file html. Atribut alt ini digunakan sebagai kata kunci gambar tersebut di search engine Google atau untuk menampilkan teks sebagai pengganti gambar jika gambar tersebut tidak ada dikarenakan lokasi direktori gambar salah, format gambar tidak didukung atau gangguan internet.

Meskipun Anda tidak menambahkan atribut ini pada tag img, gambar akan tetap muncul. Tetapi saya tetap menyarankan Anda untuk menambahkan atribut alt ini. Contoh penulisan kode HTMLnya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar di HTML</title>
</head>
<body>
Dibawah ini merupakan gambar pantai:
<img src="pantaiku.jpg" alt="gambar pantai">
</body>
</html>

Jika Anda menjalankan di browser, maka tampilannya seperti ini:

Seperti yang Anda lihat, yang muncul hanyalah text “gambar pantai” yang merupakan nilai alt dari gambar tersebut. Saya sengaja menyalahkan nama filenya agar browser gagal memuat gambar (saya tidak punya file gambar bernama pantaiku.jpg pada folder BelajarHTML).

Atribut align

Jika Anda ingin mengatur posisi gambar sesuai keinginan, Anda bisa menggunakan atribut align. Pada atribut align terdapat beberapa nilai (value) diantaranya adalah :

Nilai	Fungsi
left	Meletakkan gambar di sebelah kiri teks
right	Meletakkan gambar di sebelah kanan teks
middle	Meratakan teks dengan bagian tengah gambar
top	Meratakan teks dengan bagian atas gambar
bottom	Meratakan teks dengan bagian bawah gambar

Untuk contoh kode HTMLnya seperti ini:

<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar dari Website Lain</title>
</head>
<body>
Ini adalah gambar PC:<img src="gambarpc.png" align="left">dengan align="left"
Ini adalah gambar PC:<img src="gambarpc.png" align="right">dengan align="right"
Ini adalah gambar PC:<img src="gambarpc.png" align="middle">dengan align="middle"
Ini adalah gambar PC:<img src="gambarpc.png" align="top">dengan align="top"
Ini adalah gambar PC:<img src="gambarpc.png" align="bottom">dengan align="bottom"
</body>
</html>

Ketika Anda jalankan di browser, tampilannya seperti ini:

Pastikan juga format file gambarnya tidak salah. Pada gambar diatas (gambarpc.png), saya menggunakan gambar yang memiliki format .png bukan .jpg. Jadi pastikan Anda tidak salah menulis formatnya agar gambar berhasil tampil di browser.

Property float

Jika menentukan posisi gambar menggunakan align masih terasa kurang, Anda dapat menggunakan syntax CSS, yaitu menggunakan property float. Selain atribut align tidak didukung lagi di HTML5, penggunaan property float ini membuat gambar terlebih lebih rapi. Dibawah ini merupakan contoh penggunaan property float:

<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar di HTML</title>
</head>
<body>
<img src="soekarno.jpg" alt="gambar bung karno" title="gambar bung karno"style="float:left; margin:8px">Ir. H. Soekarno merupakan Presiden Indonesia pertama di Indonesia yang menjabat
pada periode 1945 sampai 1966. Beliau merupakan tokoh penting dalam memerdekakan bangsa Indonesia dari penjajahan Belanda.
Beliau juga merupakan Proklamator Kemerdekaan Indonesia (bersama dengan Mohammad Hatta)
yang terjadi pada tanggal tanggal 17 Agustus 1945. Selain itu, Bung Karno (panggilan akrab beliau) adalah orang yang pertama kali mencetuskan
konsep mengenai Pancasila sebagai dasar negara Indonesia dan beliau sendiri yang menamainya
</body>
</html>

Di browser tampilannya kurang lebih seperti ini:

Saya juga sengaja memberikan property margin untuk memberikan jarak antara gambar dan text. Dengan menggunakan property float dan margin ini, posisi gambar menjadi jauh lebih rapi dibanding menggunakan atribut align.

Atribut width dan height

Nilai pada atribut width dan height yang ditampilkan secara default adalah pixel. Jadi, jika Anda tidak menuliskan satuannya maka ukuran gambar ditetapkan dalam pixel. Berikut contoh kode HTMLnya:

<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar dari Website Lain</title>
</head>
<body>
<img src="pantai.jpg" width="300px" alt="gambar pantai">
<img src="pantai.jpg" width="200px" alt="gambar pantai">
<img src="pantai.jpg" width="100px" alt="gambar pantai">
</body>
</html>

Jika anda jalankan di browser, maka tampilannya seperti ini:

Pada kode diatas, saya hanya menggunakan atribut width. Jadi, tinggi (height) dari gambar tersebut secara otomatis disesuaikan dengan lebar gambarnya (width). Sama halnya jika Anda hanya menggunakan atribut height tanpa menggunakan atribut width, maka lebar gambar tersebut secara otomatis disesuiakan dengan tinggi gambar (height).

Tapi jika Anda ingin merubah lebar dan tinggi gambar tanpa memperdulikan rasio perbandingannya, tampilan gambarnya bisa jadi jelek. Berikut contoh kode HTMLnya :

<!DOCTYPE html>
<html>
<head>
<title>Cara Menambahkan Gambar dari Website Lain</title>
</head>
<body>
<img src="pantai.jpg" width="500px" height="200px" alt="gambar pantai">
</body>
</html>

Pada kode HTML diatas saya menggunakan atribut width dan height secara bersamaan tanpa memperhatikan rasio perbandingannya. Jika Anda jalankan d browser, gambar yang dimuat akan seperti ini:

Atribut title

Atribut title ini berfungsi memberikan keterangan gambar ketika cursor diarahkan ke gambar tersebut. Atribut ini boleh Anda tambahkan atau tidak karena bersifat opsional. Berikut contoh kode HTMLnya:

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan atribut title pada gambar</title>
</head>
<body>
<img src="pantai.jpg" alt="gambar pantai" title="Ini merupakan gambar pantai">
</body>
</html>

Jika Anda jalankan di browser dan Anda mengarahkan kursor pada gambar, maka tampilannya seperti ini:

Atribut border

Untuk membuat gambar menjadi lebih menarik, Anda dapat memberikan garis tepi pada gambar tersebut dengan menggunakan atribut border. Contoh kode penggunaannya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Menambahkan gambar di HTML</title>
</head>
<body>
<img src="pantai.jpg" alt="gambar pantai" title="gambar pantai" border="5">
</body>
</html>

Jika dijalankan di browser, tampilannya seperti ini:

Nilai “5” pada atribut border merupakan besar bingkai atau gari tepi yang dihitung dalam satuan pixel. Jika Anda ingin membuat bingkai menjadi lebih menarik lagi, Anda perlu menggunakan syntax CSS seperti contoh berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Menambahkan gambar di HTML</title>
</head>
<body>
<img src="pantai.jpg" style="border:6px groove #FD008D;" alt="gambar pertama"title="gambar pertama" width="200px">
<img src="pantai.jpg" style="border:6px double #B01A6E;" alt="gambar kedua"title="gambar kedua" width="200px">
<img src="pantai.jpg" style="border:6px outset #B01A6E;" alt="gambar ketiga"title="gambar ketiga" width="200px">
 
<img src="pantai.jpg" style="border:6px inset #B01A6E;" alt="gambar keempat"title="gambar keempat" width="200px">
<img src="pantai.jpg" style="border:6px ridge #B01A6E;" alt="gambar kelima"title="gambar kelima" width="200px">
<img src="pantai.jpg" style="border:6px dashed #B01A6E;" alt="gambar keenam"title="gambar keenam" width="200px">
 
<img src="pantai.jpg" style="border-color:#B01A6E;border-style:dotted dashed solid double;" alt="gambar ketujuh" title="gambar ketujuh" width="200px">
<img src="pantai.jpg" style="border:2px dotted #B01A6E;" alt="gambar kedelapan" title="gambar kedelapan" width="200px">
</body>
</html>

Di browser tampilannya akan seperti ini:

Itulah tutorial cara menambahkan gambar di HTML. Semoga anda menjadi lebih paham penggunaan tag img beserta atribut-atribut yang ada di dalamnya. Selanjutnya simak materi selanjutnya mengenai cara menambahkan audio di HTML.

Materi Html ke :

. . . . . . . . . . . . . . . . . . . . . . 1 2 3 4 5 6 7 8 9 10 . . . . . . . . . . . . . . . . . . . . . .

Pengantar awal Html

2018-10-20T20:31:00.002+07:00

Materi Html ke :

. . . . . . . . . . . . . . . . . . . . . . 1 2 3 4 5 6 7 8 9 10 . . . . . . . . . . . . . . . . . . . . . .

ETIKA PROFESI DALAM DUNIA BISNIS

2018-10-20T14:42:00.002+07:00

ETIKA PROFESI DALAM DUNIA BISNIS

Diajukan untuk Memenuhi Tugas Matakuliah Etika Profesi Membuat Makalah Etika Profesi pada Perusahaan Bisnis

Oleh :

M. BADRUSSANI

( 14.01.53.0127 )

FAKULTAS TEKNOLOGI INFORMASI

UNIVERSITAS STIKUBANK (UNISBANK)

SEMARANG

(2018)

KATA PENGANTAR

Dengan menyebut nama Allah SWT yang Maha Pengasih lagi Maha Penyayang, Kami panjatkan puja dan puji syukur kehadirat-Nya, yang telah melimpahkan rahmat, hidayah, dan inayah-Nya kepada kami, sehingga kami dapat menyelesaikan makalah tentang Etika-etika didalam Dunia Bisnis.

Makalah ini telah kami susun dengan maksimal dan mendapatkan bantuan dari berbagai pihak sehingga dapat memperlancar pembuatan makalah ini. Untuk itu kami menyampaikan banyak terima kasih kepada semua pihak yang telah berkontribusi dalam pembuatan makalah ini.

Terlepas dari semua itu, Kami menyadari sepenuhnya bahwa masih ada kekurangan baik dari segi susunan kalimat maupun tata bahasanya. Oleh karena itu dengan tangan terbuka kami menerima segala saran dan kritik dari pembaca agar kami dapat memperbaiki makalah ini.

Semoga makalah tentang etika-etika didalam dunia bisnis ini dapat memberikan manfaat maupun inpirasi terhadap pembaca.

Semarang, 28 Agustus 2018

Penyusun

BAB I

PENDAHULUAN

1.1 LATAR BELAKANG

Banyak faktor yang mempengaruhi dan menentukan kegiatan berbisnis. Sebagai kegiatan sosial, bisnis dengan banyak cara terjalin dengan kompleksitas masyarakat modern.Dalam kegiatan berbisnis, mengejar keuntungan adalah hal yang wajar, asalkan dalam mencapai keuntungan tersebut tidak merugikan banyak pihak. Jadi, dalam mencapai tujuan dalam kegiatan berbisnis ada batasnya. Kepentingan dan hak-hak orang lain perlu diperhatikan.

Etika perilaku dalam kegiatan berbisnis adalah sesuatu yang penting demi kelangsungan hidup bisnis itu sendiri. Bisnis yang tidak etis akan merugikan bisnis itu sendiri bahkan terutama jika dilihat dari perspektif jangka panjang. Bisnis yang baik bukan saja bisnis yang menguntungkan, tetapi bisnis yang baik adalah bisnis tersebut selain menguntungkan juga bisnis yang baik secara moral. Perilaku yang baik, juga dalam konteks bisnis, merupakan perilaku yang sesuai dengan nilai-nilai moral.

Keterkaitan bisnis dengan badan hukum tidak dapat dipisahkan, banyak permasalahan timbul yang berhubungan dengan bisnis, baik pada taraf nasional bahkan internasional. Terdapat hubungan erat antara norma hukum dan norma etika namun dua macam hal ini tidaklah sama. Badan hukum yang sedikit tertinggal dibandingkan dengan etika tidak terbatas pada masalah-masalah baru, seperti halnya disebabkan oleh berkembangnya teknologi saat ini.

Pelanggaran etika bisnis merupakan hal yang biasa dan wajar pada saat ini. Secara tidak sadar, kita telah menyaksikan banyaknya pelanggaran dalam etika bisnis dalam kegiatan berbisnis khususnya kegiatan bisnis di Indonesia. Banyak pelanggaran bisnis yang dilakukan oleh pebisnis yang tidak bertanggung jawab di Indonesia. Hal ini disebabkan karena adanya proses persaingan diantara para pebisnis, dan ini adalah sebuah persaingan yang tidak sehat dan mempunyai ambisi untuk menguasai sebuah pasar. Selain untuk menguasai pasar, ada faktor lain yang mempengaruhi pebisnis melakukan sebuah pelanggaran etika bisnis, antara lain untuk memperluas pangsa pasar, serta mendapatkan banyak keuntungan. Keterangan sebelumnya jelas alasan umum para pebisnis melakukan pelanggaran etika bisnis dengan berbagai cara.

1.2 Identifikasi Masalah

Berdasarkan latar belakang tersebut rumusan masalah pada karya tulis ilmiah sebagai berikut:

1. Apa sajakah etika dunia bisnis itu?

2. Apa tujuan etika dalam dunia bisnis?

3. Bagaimana peran etika dalam dunia bisnis?

4. Faktor apa sajakah yang mempengaruhi para pembisnis melakukan pelanggaran etika dalam bisnisnya?

1.3 Tujuan

Merujuk pada rumusan masalah tersebut tujuan penulisan ilmiah ini sebagai berikut:

1. Mengetahui etika-etika dalam dunia bisnis

2. Mengetahui tujuan etika dalam dunia bisnis

3. Mengidentifikasi peran etika dalam dunia bisnis

4. Mengidentifikasi faktor yang disebut sebagai pelanggaran dalam dunia bisnis

1.4 Ruang Lingkup

Berdasarkan latar belakang tersebut ruang lingkup pada karya tulis ilmiah sebagai berikut:

1. Menjelaskan etika-etika dalam dunia bisnis

2. Menjelaskan tujuan etika dalam dunia bisnis

3. Menjelaskan peran etika bisnis dalam dunia bisnis

4. Hanya menyebutkan faktor-faktor yang disebut pelanggaran dalam dunia bisnis

1.5 Sistematika Penulisan

Dalam penyusunan dan penulisan laporan ini penulis memerlukan dan menggunakan sistematika penulisan agar dalam penyusunan lebih terarah, berikut adalah sistematika penyusunan laporan ini:

Bab I Pendahuluan, berisi mengenai mengenai uraian latar belakang, identifikasi masalah, tujuan, ruang lingkup dan sistematika penulisan.

Bab II Pembahasan, berisi mengenai teori – teori penunjang yang di pergunakan dalam penyelesain makalah ini.

BAB III KESIMPULAN DAN SARAN, berisi mengenai kesimpulan dari pembahasan yang telah di bahas.

BAB II

PEMBAHASAN

II.1 Pengertian Etika

Etika berasal dari bahasa Yunani kuno, yaitu ethos yg berarti : kebiasaan/adat, akhlak,watak, perasaan, sikap, cara berpikir. Menurut Kamus Bahasa Indonesia (Poerwadarminta) etika adalah “ilmu pengetahuan tentang asas-asas akhlak (moral)”. Menurut Drs. O.P. SIMORANGKIR "etika atau etik sebagai pandangan manusia dalam berprilaku menurut ukuran dan nilai yang baik. "

Untuk menganalisis arti-arti etika, dibedakan menjadi dua jenis etika (Bertens, 2000):

1. Etika sebagai Praktis

a. Nilai-nilai dan norma-norma moral sejauh dipraktekkan atau justru tidak dipraktekkan walaupun seharusnya dipraktekkan.

b. Apa yang dilakukan sejauh sesuai atau tidak sesuai dengan nilai dan norma moral.

2. Etika sebagai Refleksi

a. Pemikiran moral à berpikir tentang apa yang dilakukan dan khususnya tentang apa yang harus dilakukan atau tidak boleh dilakukan.

b. Berbicara tentang etika sebagai praksis atau mengambil praksis etis sebagai objeknya.

c. Menyoroti dan menilai baik buruknya perilaku orang.

d. Dapat dijalankan pada taraf populer maupun ilmiah.

II.2 Pengertian Bisnis

Bisnis adalah suatu organisasi yang menjual barang atau jasa kepada konsumen atau bisnis lainnya, untuk mendapatkan laba. Secara historis kata bisnis dari bahasa Inggris “business”, dari kata dasar busy yang berarti “sibuk” dalam konteks individu, komunitas, ataupun masyarakat. Dalam artian, sibuk mengerjakan aktivitas dan pekerjaan yang mendatangkan keuntungan. Di dalam melakukan bisnis, kita wajib untuk memperhatikan etika agar di pandang sebagai bisnis yang baik. Bisnis beretika adalah bisnis yang mengindahkan serangkaian nilai-nilai luhur yang bersumber dari hati nurani, empati, dan norma. Bisnis bisa disebut etis apabila dalam mengelola bisnisnya pengusaha selalu menggunakan nuraninya.

Berikut beberapa pengertian bisnis menurut para ahli :

1. Allan afuah (2004)

Bisnis adalah suatu kegiatan usaha individu yang terorganisasi untuk menghasilkan dana menjual barang ataupun jasa agar mendapatkan keuntungan dalam pemenuhan kebutuhan masyarakat dan ada di dalam industry.

2. T. chwee (1990)

Bisnis merupaka suatu sistem yang memproduksi barang dan jasa untuk memuaskan kebutuhan masyarakat.

II.3 Pengertian Etika Bisnis

Etika bisnis merupakan studi yang dikhususkan mengenai moral yang benar dan salah. Studi ini berkonsentrasi pada standar moral sebagaimana diterapkan dalam kebijakan, institusi, dan perilaku bisnis (Velasquez, 2005).

Dalam menciptakan etika bisnis, ada beberapa hal yang perlu diperhatikan, antara lain :

1. Pengendalian diri.

2. Pengembangan tanggung jawab social (social responbility).

3. Mempertahankan jati diri dan tidak mudah untuk terombang-ambing oleh pesatnya perkembangan informasi dan teknologi.

4. Menciptakan persaingan yang sehat.

5. Menerapkan konsep “pembangunan berkelanjutan”.

6. Menghindari sifat 5K (Katabelece, Kongkalikong, Koneksi, Kolusi, dan Komisi).

7. Mampu menyatakan yang benar itu benar.

8. Menumbuhkan sikap saling percaya antara golongan pengusaha kuat dan golongan pengusaha ke bawah.

9. Konsekuen dan konsisten dengan aturan main yang telah disepakati bersama.

10. Menumbuhkembangkan kesadaran dan rasa memiliki terhadap apa yang telah disepakati.

11. Perlu adanya sebagian etika bisnis yang dituangkan dalam suatu hokum positif yang berupa peraturan perundang-undangan.

II.4 Tujuan Etika Dalam Dunia Bisnis

Pengertian Etika Bisnis dan Tujuan Dibuatnya Etika Bisnis. Pada dasarnya sebuah etika bisnis ini digalakkan karena memiliki maksud dan tujuan tertentu dalam dunia bisnis. Adapun tujuan etika bisnis adalah untuk menjalankan dan menciptakan sebuah bisnis seadil mungkin serta menyesuaikan hukum yang sudah dibuat. Selain itu, juga dimaksudkan untuk menghilangkan ketergantungan pada sebuah kedudukan individu maupun perusahaan.

Etika bisnis ini tingkatannya lebih luas jika dibanding dengan ketentuan yang sudah diatur berdasarkan hukum yang berlaku, bahkan jika dibandingkan dengan standar minimal dari ketentuan hukum maka etika bisnis menjadi standar atau ukuran yang lebih tinggi. Hal ini dikarenakan, dalam kegiatan berbisnis tidak jarang kita jumpai adanya bagian abu-abu dan tidak diatur berdasarkan ketentuan hukum.

II.5 Peran Etika Dalam Dunia Bisnis

Etika dalam dunia bisnis memiliki peran yang sangat penting, yaitu untuk membentuk sebuah perusahaan yang sangat kokoh dan memiliki daya saing yang tinggi serta mempunyai kemampuan menciptakan nilai (value-creation) yang tentu tinggi, dimana etika ini diperlukan sebagai suatu landasan yang kokoh untuk mencapai itu semua. Dimana proses ini dimulai dari perencanaan strategi, organisasi yang baik, sistem prosedur yang transparan didukung oleh budaya perusahaan yang handal serta etika perusahaan yang dilaksanakan secara konsisten dan konsekuen.

Menurut Richard De George, bila perusahaan ingin sukses/berhasil maka perusahaan itu memerlukan 3 hal pokok yakni :

1. Memiliki produk yang baik.

2. Memiliki managemen yang baik

3. Memiliki etika

Serta tiga aspek pokok dari bisnis yaitu : dari sudut pandang ekonomi, hukum dan etika.

II.6 Prinsip Etika dalam Dunia Bisnis

Dalam dunia bisnis, sebuah perusahaan haruslah memiliki prinsip-prinsip etika yang harus ditempuh oleh perusahaan tersebut untuk mencapai tujuannya dan harus dijadikan pedoman agar memiliki standar baku yang mencegah timbulnya ketimpangan dalam memandang etika moral sebagai standar kerja atau operasi perusahaan. Seorang ahli mengemukakan prinsip-prinsip etika dalam dunia bisnis , Muslich (1998:31-33) :

1. Prinsip Otonomi

Prinsip otonomi adalah sikap dan kemampuan manusia untuk mengambil keputusan dan bertindak berdasarkan kesadarannya tentang apa yang dianggapnya baik untuk dilakukan. Atau mengandung arti bahwa perusahaan secara bebas memiliki wewenang sesuai dengan bidang yang dilakukan dan pelaksanaannya dengan visi dan misi yang dimilikinya. Kebijakan yang diambil perusahaan harus diarahkan untuk pengembangan visi dan misi perusahaan yang berorientasi pada kemakmuran dan kesejahteraan karyawan dan komunitasnya.

2. Prinsip Kejujuran

Kejujuran merupakan nilai yang paling mendasar dalam mendukung keberhasilan perusahaan. Kejujuran harus diarahkan pada semua pihak, baik internal maupun eksternal perusahaan. Jika prinsip kejujuran ini dapat dipegang teguh oleh perusahaan, maka akan dapat meningkatkan kepercayaan dari lingkungan perusahaan tersebut.Terdapat tiga lingkup kegiatan bisnis yang bisa ditunjukkan secara jelas bahwa bisnis tidak akan bisa bertahan lama dan berhasil kalau tidak didasarkan atas kejujuran. Pertama, jujur dalam pemenuhan syarat-syarat perjanjian dan kontrak. Kedua, kejujuran dalam penawaran barang atau jasa dengan mutu dan harga yang sebanding. Ketiga, jujur dalam hubungan kerja intern dalam suatu perusahaan.

3. Prinsip Tidak Berniat Jahat

Prinsip ini ada hubungan erat dengan prinsip kejujuran. Penerapan prinsip kejujuran yang ketat akan mampu meredam niat jahat perusahaan itu.

4. Prinsip Keadilan

Perusahaan harus bersikap adil kepada pihak-pihak yang terkait dengan sistem bisnis. Contohnya, upah yang adil kepada karywan sesuai kontribusinya, pelayanan yang sama kepada konsumen, dan lain-lain,menuntut agar setiap orang diperlakukan secara sama sesuai dengan aturan yang adil dan sesuai kriteria yang rasional obyektif, serta dapat dipertanggung jawabkan.

5. Prinsip Hormat pada diri Sendiri

Perlunya menjaga citra baik perusahaan tersebut melalui prinsip kejujuran, tidak berniat jahat dan prinsip keadilan.

II.7 Faktor – Faktor Yang Mempengaruhi Kecurangan Dalam Dunia Bisnis

Faktor-faktor pebisnis melakukan pelanggaran etika bisnis Pelanggaran-pelanggaran yang dilakukan pebisnis dilatarbelakangi oleh berbagai hal. Salah satu hal tersebut adalah untuk mencapai keuntungan yang sebanyak-banyaknya, tanpa memikirkan dampak buruk yang terjadi selanjutnya.Faktor lain yang membuat pebisnis melakukan pelanggaran antara lain :

1. Banyaknya kompetitor baru dengan produk mereka yang lebih menarik

2. Ingin menambah pangsa pasar

3. Ingin menguasai pasar. Dari ketiga faktor tersebut, faktor pertama adalah faktor yang memiliki pengaruh paling kuat. Untuk mempertahankan produk perusahaan tetap menjadi yang utama, dibuatlah iklan dengan sindiran-sindiran pada produk lain.

Menurut Gwynn Nettler dalam bukunya Lying, Cheating and Stealing memberikan kesimpulan tentang sebab-sebab seseorang berbuat curang, yaitu :

1. Orang yang sering mengalami kegagalan cenderung sering melakukan kecurangan.

2. Orang yang tidak disukai atau tidak menyukai dirinya sendiri cenderung menjadi pendusta.

3. Orang yang hanya menuruti kata hatinya, bingung dan tidak dapat menangguhkan keinginan memuaskan hatinya, cenderung berbuat curang.

4. Orang yang memiliki hati nurani (mempunyai rasa takut, prihatin dan rasa tersiksa) akan lebih mempunyai rasa melawan terhadap godaan untuk berbuat curang.

5. Orang yang cerdas (intelligent) cenderung menjadi lebih jujur dari pada orang yang dungu (ignorant).

6. Orang yang berkedudukan menengah atau tinggi cenderung menjadi lebih jujur.

7. Kesempatan yang mudah untuk berbuat curang atau mencuri, akan mendorong orang melakukannya.

8. Masing-masing individu mempunyai kebutuhan yang berbeda dan karena itu menempati tingkat yang berbeda, sehingga mudah tergerak untuk berbohong, berlaku curang atau menjadi pencuri.

9. Kehendak berbohong, main curang dan mencuri akan meningkat apabila orang mendapat tekanan yang besar untuk mencapai tujuan yang dirasakannya sangat penting.

10. Perjuangan untuk menyelamatkan nyawa mendorong untuk berlaku tidak jujur.

BAB III

KESIMPULAN dan SARAN

III.1 Kesimpulan

Etika dalam berbisnis sangatlah penting karena untuk membangun perusahaan yang kokoh dalam menghadapi persaingan bisnis. Etika bisnis sendiri memiliki tujuan yaitu untuk menjalankan dan menciptakan sebuah bisnis seadil mungkin serta menyesuaikan hukum yang sudah dibuat. Selain itu, prinsip-prinsip etika dalam berbisnis harus dipegang dan dijalankan agar tidak merugikan diri sendiri dan orang lain. Kejujuran dan tanggung jawab dalam kegiatan bisnis akan mempengaruhi keberhasialan dari usaha yang dijalankan dan untuk mempersiapkan diri dalam menghadapi faktor-faktor kecurangan dalam berbisnis.

III.2 Saran

1. Dalam hubungan berbisnis sebaiknya dilengkapi dengan etika yang baik dalam berkomunikasi

2. Etika yang baik dapat menciptakan situasi menguntungkan bagi pebisnis

3. Hindari faktor-faktor pelanggaran dalam etika berbisnis

DAFTAR PUSTAKA

[1] http://dianavia.blogspot.co.id/2011/10/prinsip-prinsip-etika-bisnis.html

[2] http://handyleonardoetikabisnis.blogspot.co.id/2012/09/pengertian-etika-etika-bisnis-dan.html

[3] http://adheirma309.blogspot.co.id/2014/12/makalah-etika-bisnis.html

[4] http://rianrenjo.blogspot.co.id/2012/10/faktor-faktor-pebisnis-melakukan.html

2018-10-19T08:44:00.001+07:00

Membuat perangkat USB bootable dengan mudah

Rufus adalah alat yang membantu untuk memformat dan membuat perangkat USB flash menjadi bootable, seperti flashdisk, kartu memori, dll.

Rufus sangat berguna bagi kasus dimana:

Anda perlu membuat media instalasi USB dari ISO bootable (Windows, Linux, UEFI, dll.)
Anda perlu bekerja pada sistem yang tidak memiliki OS yang terinstal
Anda perlu melakukan flash BIOS atau firmware lain dari DOS
Anda ingin menjalankan utilitas tingkat-rendah

Meskipun ukurannya kecil, Rufus menyediakan semua yang Anda butuhkan!

Satu lagi, Rufus sangatlah cepat. Buktinya, Rufus kurang lebih dua kali lebih cepat dibanding UNetbootin, Universal USB Installer atau Windows 7 USB download tool, dalam membuat media instalasi USB Windows 7 dari sebuah ISO. Rufus juga sedikit lebih cepat dalam membuat USB bootable Linux dari berkas ISO.
Daftar beberapa ISO yang didukung oleh Rufus juga disediakan di bawah halaman ini.

Unduh

Terakhir diperbarui 2018.09.17:

Bahasa yang didukung:

Azərbaycanca

Bahasa Indonesia

Bahasa Malaysia

Български

Čeština

Dansk

Deutsch

Ελληνικά

English

Español

Français

Hrvatski

Italiano

Latviešu

Lietuvių

Magyar

Nederlands

Norsk

Polski

Português

Português do Brasil

Русский

Română

Slovensky

Slovenščina

Srpski

Suomi

Svenska

Tiếng Việt

Türkçe

Українська

简体中文

正體中文

日本語

한국어

ไทย

עברית

العربية

فارسی

Persyaratan Sistem:

Windows 7 atau setelahnya, 32 atau 64 bit tidak masalah. Setelah diunduh, aplikasi ini siap digunakan.

Saya akan menggunakan kesempatan ini untuk mengucapkan terima kasih kepada para penerjemah yang membuat terjemahan bagi Rufus, serta halaman web ini ke dalam berbagai bahasa. Jika Anda dapat menggunakan Rufus dalam bahasa Anda, berterima kasihlah kepada mereka!

Penggunaan

Unduh berkas .exe dan jalankan – instalasi tidak diperlukan.

Berkas .exe telah ditandatangai secara digital dan tandatangan harus menyatakan:

"Akeo Consulting" (v1.3.0 atau setelahnya)
"Pete Batard - Open Source Developer" (v1.2.0 atau sebelumnya)

Catatan untuk dukungan DOS:

Jika Anda membuat perangkat bootable DOS dan menggunakan keyboard non-US, Rufus akan mencoba untuk memilih tata letak keyboard sesuai dengan locale sistem Anda. Dalam hal ini, FreeDOS yang merupakan pilihan standar dan lebih direkomendasikan daripada MS-DOS, karena mendukung lebih banyak tata letak keyboard.

Catatan pada dukungan ISO:

Semua versi Rufus sejak versi v1.1.0 memungkinkan pembuatan USB bootable dari sebuah ISO image (.iso).

Membuat ISO image dari cakram fisik atau dari kumpulan berkas sangat mudah dilakukan, namun memerlukan aplikasi pembakar CD, misalnya yang tersedia secara gratis: CDBurnerXP atau ImgBurn.

Pertanyaan yang sering diajukan (FAQ)

FAQ Rufus tersedia DISINI.

Untuk menyediakan umpan balik, laporan bug atau permintaan perbaikan, silakan gunakan pelacak masalah di github. Atau Anda dapat mengirimkan e-mail.

Lisensi

Lisensi Publik Umum GNU (GPL) versi 3 atau yang lebih baru.
Anda bebas mendistrubusikan, memodifikasi atau bahkan menjual software ini, selama Anda menghormati lisensi GPLv3.

Rufus diproduksi secara transparan 100% dari sumber publik, menggunakan lingkungan MingW32.

Catatan perubahan

Versi 3.3 (2018.09.17) [BUGFIX RELEASE]
- Fix a regression when processing uncompressed bootable DD images
- Fix Windows To Go drive creation for ARM64 Windows ISOs

Versi 3.2 (2018.09.11)
- Add RSA-2048 signature validation on all the server downloads
- Add "Fast zeroing" cheat mode (courtesy of René van der Zee)
- Add support for XP/Server 2003 x64 ISOs (courtesy of Mattiwatti)
- Improve ISO extraction performance by preallocating files (courtesy of Mattiwatti)
- Improve bad blocks check algorithm (from suggestions by AL.Skywalker)
- Fix progress not being displayed for Sylinux or GRUB downloads
- Fix unwanted application close when cancelling an image scan
- Fix an issue where FAT32 could still be selected for ISOs containing a >4GB file

NOTE: THIS VERSION IS NOT COMPATIBLE WITH WINDOWS XP OR WINDOWS VISTA.

Versi lain

Kode Sumber

Rufus 3.3 (2.8 MB)
Alternatif lain, Anda dapat melakukan clone repositori git ini menggunakan:
```
$ git clone git://github.com/pbatard/rufus
```
Untuk informasi lebih lanjut, lihat proyek github.

Jika Anda seorang pengembang, Anda sangat disarankan untuk memperbaiki Rufus dan mengirimkan patch.

Donasi

Karena saya sering ditanya tentang hal ini, saya katakan bahwa tidak ada tombol donasi pada halaman ini.

Alasan utama adalah karena saya merasa bahwa sistem donasi tidak benar-benar membantu pengembangan software dan lebih buruknya dapat memberi rasa bersalah bagi pengguna yang memilih tidak memberi donasi.

Jika Anda benar-benar bersikeras, Anda dapat memberikan donasi kepada Free Software Foundation, karena mereka-lah alasan utama software seperti Rufus ada.

Bagaimanapun juga, Saya menggunakan kesempatan ini untuk mengucapkan terima kasih untuk dukungan dan antusias Anda terhadap program kecil ini: itu sangat saya hargai!

Tetapi, mohon untuk tetap merasa bebas menggunakan Rufus tanpa merasa bersalah, walaupun Anda tidak berkontribusi secara finansial – Anda seharusnya jangan merasa demikian!

(1) Perbandingan kecepatan antara Rufus dan aplikasi lain

Berikut ini ujicoba pada platform Windows 7 x64 Core 2 duo/4 GB RAM, dengan USB 3.0 controller dan sebuah 16 GB USB 3.0 ADATA S102 flash drive.

•

Windows 7 x64

en_windows_7_ultimate_with_sp1_x64_dvd_618240.iso

Windows 7 USB/DVD Download Tool v1.0.30	00:08:10
Universal USB Installer v1.8.7.5	00:07:10
UNetbootin v1.1.1.1	00:06:20
RMPrepUSB v2.1.638	00:04:10
WiNToBootic v1.2	00:03:35
Rufus v1.1.1	00:03:25

•

Ubuntu 11.10 x86

ubuntu-11.10-desktop-i386.iso

UNetbootin v1.1.1.1	00:01:45
RMPrepUSB v2.1.638	00:01:35
Universal USB Installer v1.8.7.5	00:01:20
Rufus v1.1.1	00:01:15

•

Slackware 13.37 x86

slackware-13.37-install-dvd.iso

UNetbootin v1.1.1.1	01:00:00+
Universal USB Installer v1.8.7.5	00:24:35
RMPrepUSB v2.1.638	00:22:45
Rufus v1.1.1	00:20:15

(2) Daftar beberapa ISO yang diketahui didukung oleh Rufus

NT Password Registry Editor

Contoh Program Sederhana dengan HTML

2018-10-17T09:23:00.004+07:00

Script Hal-1:

<html>

<head>
<title>Biodata Diri</title>
</head>
<body>
 <div style="background: #40E0D0"> Biodata Diri SiAnu</div>

 <h3><img src="images/x.jpg" width="140" height="240"></img></h3>

 Nama : Mudji

 Tempat Tanggal Lahir : Tuban, 16 Juli 1991

 Alamat Rumah : Jalan Swadaya 1 rt 06/09 no.25 Pejaten Timur

 No.HP / Telp : 0213456789

 Pendidikan : S1 Sistem Informasi

 Kegiatan : Menjalani perkuliahan, bla bla bla...

 Cek Jadwal Perkuliahan ATA <a href="Hal-2.html">Masuk</a>
</body>
</html>

Tampilan sebagai berikut :

Script Hal-2

<html>

<head>
<title>Perkuliahan ATA</title>
</head>
<body bgcolor="aqua">
Jadwal Perkuliahan ATA
<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>
Kembali ke Biodata klik <a href="Hal-1.html">disini</a>
</body>
</html>

Tampilan:

Belajar HTML Lengkap untuk Pemula

2018-10-17T09:17:00.001+07:00

Tutorial ini dibuat bagi Anda yang ingin belajar HTML untuk membuat website dari dasar. Supaya Anda memahaminya, pastikan membacanya dan praktek dengan urut mulai dari awal.

Untuk Anda yang beranggapan jika membuat website itu sulit, dengan menyelesaikan tutorial yang kami buat, anggapan tersebut tidak akan berlaku.

Siapapun bisa belajar bagaimana caranya membuat website, yaitu diawali dengan mempelajari HTML terlebih dahulu sebagai pondasinya.

Setelah Anda menguasai HTML, kami pastikan Anda bisa membuat halaman website hanya kurang dari satu jam.

Banyak yang beranggapan untuk belajar membuat website perlu software yang mahal. Sebenarnya, dengan software yang sudah tersedia secara gratis, untuk menguasainya tidak memerlukan biaya yang mahal, bahkan bisa gratis.

Untuk langkah pada tutorial ini kami buat sesederhana mungkin, supaya Anda mudah memahaminya.

Meskipun tutorial ini belum membahas secara keseluruhan bagaimana membuat website, tapi Anda akan memahami bagaimana dasar membuat website dengan cara yang benar.

Berikut adalah Langkah Belajar HTML

1. Persiapan

Pada langkah ini Anda akan mengetahui hal apa saja yang harus dipersiapkan.

Apa yang Anda Butuhkan?

Hal yang pertama dibutuhkan untuk mempelajari HTML tentunya adalah sebuah browser, seperti yang Anda gunakan untuk membuka artikel ini.

Anda dapat menggunakan berbagai jenis browser yang biasa digunakan, seperti Mozilla, Chrome, dll.

Untuk aplikasi lain Anda hanya memerlukan editor sederhana yang ada pada Windows, yaitu Notepad. Aplikasi ini dapat Anda buka melalui Start Menu. Tapi, untuk memudahkan Anda mengelola code HTML, kami menyarankan Anda menggunakan Notepad++

ntuk sistem operasi selain Windows, Anda dapat menggunakan text editor sejenis seperti Pico untuk Linux atau TextEdit untuk Mac.

Jadi untuk mempelajari HTML Anda hanya memerlukan sebuah browser dan text editor saja.

Apakah Perlu Koneksi Internet?

Untuk menjalankan HTML, tidak perlu koneksi internet, kecuali untuk artikel yang sedang Anda baca ini.

2. Pahami Web Browser

Web browser adalah sebuah aplikasi yang dapat digunakan untuk mengakses dan menampilkan halaman website.

Untuk halaman website biasanya dibuat dengan HTML, XML dan lainnya.

Browser akan menerjemahkan sebuah halaman website yang dikirimkan melalui HTTP (Hypertext Transfer Protocol) ke dalam tampilan yang dipahami manusia.

Meskipun setiap web browser memiliki fitur dan tampilan yang berbeda, tapi untuk fungsi secara umum sama.

3. Sejarah HTML

HTML dibuat pada tahun 1990 oleh seorang ilmuan yang bernama Tim Berners-Lee. Tujuan awal dibuatnya HTML ini untuk memudahkan para ilmuan ketika akan mengakses dokumen mereka satu sama lain.

Ternyata hasilnya lebih dari yang dibayangkannya, HTML menjadi pondasi untuk website seperti yang dikenal saat ini.

HTML adalah sebuah bahasa markup standar singkatan dari Hyper Text Markup Language. Dengan HTML memungkinakan Anda untuk menampilkan informasi di internet.

Browser akan menampilkan code HTML dengan tampilan seperti yang Anda baca saat ini, untuk melihat code HTML silakan klik kanan kemudian pilih View page source (ctrl+u).

ahami Element, Tag, dan Attribut

Element pada HTML membentuk sebuah struktur dan memberitahu browser untuk halaman website yang akan ditampilkan. Biasanya untuk element terdiri dari tag pembuka, konten, dan tag penutup.

Tag sendiri digunakan untuk menandai sebuah element pada bagian awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan >.

Jika dibedakan, untuk tag terdapat dua jenis, yaitu tag pembuka <html> dan tag penutup </html>. Dua jenis tag ini hanya dibedakan dengan tanda garis miring.

Contoh

Sebagai contoh untuk element em (emphasis) terdiri dari semua code mulai dari tag pembuka dan tag penutup .

Berikut untuk contoh codenya:

<em>Contoh element.</em>

Untuk hasilnya akan terlhat seperti tulisan di bawah:

Contoh element.

Untuk membuat sebuah heading atau subjudul, digunakan element h1, h2, h3, h4, h5, atau h6. Dimana kepanjangan h adalah heading. Untuk ukuran paling besar diawali dengan h1 sampai h6 adalah ukuran terkecil.

Berikut adalah codenya:

<h1>Ini adalah h1</h1>
<h2>Ini adalah h2</h2>
<h3>Ini adalah h3</h3>
<h4>Ini adalah h4</h4>
<h5>Ini adalah h5</h5>
<h6>Ini adalah h6</h6>

Untuk tampilan di browser akan terlihat seperti gambar di bawah:

Seperti yang terlihat dari code di atas, pada sebuah element terdapat tag pembuka dan tag penutup. Ini tidak berlaku untuk beberapa element seperti code untuk membuat enter atau baris baru, yaitu .

Menggunakan huruf besar atau huruf kecil?

Mungkin Anda memiliki pertanyaan mengenai penulisan tag, apakah harus menggunakan huruf besar atau huruf kecil. Meskipun browser tidak membedakan mengenai hal tersebut, untuk pembuatan tag pada umumnya menggunakan huruf kecil.

Itulah sedikit pengenalan mengenai element dan tag.

Attribute

Setelah Anda memahami element dan tag, Anda perlu memahami apa itu attribute. Seperti diketahui jika sebuah element berupa sturktur pada HTML yang berfungsi untuk memberitahu browser mengenai apa yang akan ditampilkan.

Aturan penulisan sebuah attribute:

Nama attribute diikuti oleh tanda sama dengan.
Nilai attribut diapit oleh dua tanda petik pembuka dan penutup.
Jika lebih dari satu attribut, diberi jarak dengan spasi.

Berikut adalah contoh element yang disertai sebuah attribute:

<p>Berikut adalah <a href="https://www.niagahoster.co.id/" title="Halaman hosting terbaik" target="_blank">hosting terbaik</a>.</p>

Berikut adalah tampilan pada browser:

Berikut adalah hosting terbaik.

Penjelasan:

Dari contoh di atas untuk element <a> berguna untuk memberikan batasan pada hyperlink dengan beberapa attribute di dalamnya:

href – Ini adalah attribute untuk menentukan alamat sebuah website, dimana ketika tautan diklik akan diarahkan ke halaman sesuai dengan tautan yang diisi, pada contoh ini adalah halaman href=”https://www.niagahoster.co.id/”.
title – Attribute ini berguna untuk menambahkan informasi pada tautan ketika kursor mouse diarahkan pada tautan. Pada contoh ini untuk title yang digunakan adalah title=”Halaman hosting terbaik”.
target – Untuk attribute ini berguna untuk memberitahu browser jika tautan diklik akan dibuka pada tab baru. Pada contoh ini adalah target=”_blank”. Jika attribut ini dihilangkan, untuk tautan tidak akan dibuka di tab baru.

Untuk mempercepat pemahaman Anda dalam belajar HTML dasar ini, silakan ikuti langkah selanjutnya.

5. Struktur HTML

Setelah Anda memehami elemet HTML, selanjutnya adalah menggabungkannya menjadi satu di dalam dokumen HTML.

Coba perhatikan code berikut ini:

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Halaman pertamaku</title>
     </head>
     <body>
          <p>Ini adalah halaman pertamaku</p>
     </body>
</html>

Penjelasan:

<!DOCTYPE html> – Merupakan deklarasi dari type dokumen
<html></html> – Dikenal dengan element utama karena semua element berada di dalamnya.
<head></head> – Element ini berfungsi untuk memasukkan konten yang tidak ingin ditampilkan. Konten tersebut dapat berupa keyword, deskripsi, CSS, dll.
<meta charset=”utf-8″> – Berfungsi untuk memberitahu browser mengenai pengkodean karakter yang sesuai dengan ketentuan UTF-8, mengenai UTF-8 silakan baca artikel berikut.
<title></title> – Merupakan judul dari halaman website yang muncul pada bagian tab browser.
<body></body> – Berisi konten yang ditampilkan pada browser ketika pengunjung mengakes halaman tersebut, contohnya seperti artikel yang sedang Anda baca saat ini.

6. Buat Halaman Website Pertama Anda

Dengan HTML Anda dapat membuat website sendiri dengan memahami dasarnya, berbeda ketika Anda membuat website dengan WordPress. Meskipun website WordPress jauh lebih bagus, tapi Anda belum tentu memahami strukturnya seperti apa.

Pada bagian pertama, Anda sudah mengetahui hal yang dibutuhkan untuk membuat website dengan HTML, yaitu sebuah browser dan text editor seperti Notepad.

Text editor yang kami sarankan adalah Notepad++, karena Anda akan lebih mudah dalam membaca code, silakan download melalui tautan ini, kemudian lakukan instalasi.

Setelah Anda selesai melakukan instalasi Notepad++, silakan ikuti langkah di bawah ini:

1. Buka Notepad++, kemudian buat halaman baru.

2. Copy code di atas ke dalam halaman baru.

3. Kemudian simpan dengan Save as type pilih html.

Untuk melihat hasilnya, silakan buka file index.html yang telah Anda buat melalui browser. Berikut adalah tampilannya:

7. Lengkapi Halaman Website Anda

Setelah Anda selesai membuat halaman website sederhana dan memahami strukturnya, selanjutnya adalah menambahkan beberapa elemen yang dibutuhkan pada sebuah halaman website pada umumnya.

Untuk sebuah halaman website biasanya terdari dari judul, subjudul, list, link, gambar, tabel, komentar untuk code, dan form.

Untuk lebih detailnya, silakan ikuti langkah di bawah ini:

1. Silakan edit code yang Anda buat sebelumnya, pertama adalah membuat judul, silakan tambahkan code di bawah ini ke dalam tag <body>.

<h1>Hosting Indonesia</h1>

2. Setelah menambahkan judul, Anda dapat menambahkan paragraf pertama dibagian bawah tag h1.

<p>Kami menyediakan berbagai paket hosting dengan fitur lengkap</p>

3. Selanjutnya adalah menambahkan subjudul, untuk subjudul Anda dapat menggunakan h2, h3 dst, letakkan code di bawah ini setelah tag p.

<h2>Pilihan Paket Hosting Indonesia:</h2>

4. Untuk menambahkan list, silakan masukkan code berikut:

<ul>
<li>Paket Bayi</li>
<li>Paket Pelajar</li>
<li>Paket Personal</li>
<li>Paket Bisnis</li>
</ul>

5. Seperti yang sudah kami bahas sebelumnya, untuk menambahkan link Anda perlu menggunakan attribute href yang ada di dalam element <a>, untuk lebih jelasnya silakan tambahkan code berikut pada list setiap paket hosting di nomor 4, sehingga codenya akan terlihat seperti berikut. Jangan lupa untuk mengecek hasilnya dengan merefresh halaman index.html:

<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bayi</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Pelajar</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Personal</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bisnis</a></li>

Berikut tampilannya:

6. Untuk membuat tampilan sedikit menarik, Anda silakan tambahkan gambar pada halaman tersebut. Pada contoh ini gambar akan diletakkan di bagian bawah judul, yaitu element h1. Silakan taruh gambar menjadi satu folder dengan file index.html. Kemudian beri nama, misalnya hosting-indonesia. Kemudian tambahkan code berikut:

<img alt="Hosting Indonesia" src="hosting-indonesia.png" height="200" />

Keterangan:

Untuk gambar hanya menggunakan satu tag, sehingga untuk elementnya hanya <img />.
alt adalah nama untuk gambar supaya dapat dipahami oleh mesin pencari seperti Google.
src nama file dari gambar yang ditampilkan, jika file tidak di folder yang sama, atau berada di alamat website tertentu, Anda perlu menulisnya dengan lengkap, misalnya: https://namadomain.com/nama-file.png.
Untuk ukuran, supaya bentuknya proporsional, silakan gunakan salah satu diantara height atau width, pada contoh ini kami menggunakan height.

Berikut tampilannya:

7. Selanjutnya adalah cara membuat tabel di HTML, silakan tambahkan code di bawah ini setelah code untuk list yaitu di bawah tag </ul>.

<table border="1">
<tr>
<td>Bayi</td>
<td>Pelajar</td>
<td>Personal</td>
<td>Bisnis</td>
</tr>
<tr>
<td>Rp 19.800/ bln</td>
<td>Rp 44.800/ bln</td>
<td>Rp 67.800/ bln</td>
<td>Rp 91.800/ bln</td>
</tr>
<tr>
<td>500 MB Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
</tr>
<tr>
<td>1 Domain</td>
<td>10 Addon Domains</td>
<td>Unlimited Addon Domains</td>
<td>Unlimited Addon Domains</td>
</tr>
</table>

Untuk tampilan tabel akan terlihat seperti gambar di bawah:

7. Supaya mudah dalam mengetahui fungsi code yang dibuat, Anda dapat menambahkan keterangan atau komentar pada bagian atas code yang ingin diberi keterangan. Pada contoh ini adalah komentar untuk memberi keterangan pada code tabel.

<!-- Untuk tabel harga -->

Berikut adalah code yang akan terlihat pada editor Notepad++:

8. Selanjutnya adalah menambahkan form pada halaman HTML. Silakan tambahkan code berikut pada bagian bawah tag </table>.

<div>
 <h2>Hubungi Kami</h2>
  <form action=" index.html" method="get">
 <div>
  <input type="text" name="nama" placeholder="Nama Anda" required="" />
 </div><br>
 <div>
  <input type="text" name="email" placeholder="Masukkan Email Anda" required="" >
 </div><br>
 <div>
  <input type="text" name="subject" placeholder="Subjek" required="">
 </div><br>
 <div>
  <textarea type="text" name="pesan" rows="10" cols="30" placeholder="Pertanyaan"></textarea> 
 </div><br>
 <div>
 <input type="submit" value="Kirim Sekarang" >
 </div>
 </form>
</div>

Untuk form yang dibuat pada contoh ini berfungsi untuk form kontak yang terdiri dari form nama, email, subjek, isi pertanyaan, dan tombol kirim.

Untuk tampilannya akan terlihat seperti gambar di bawah ini:

Pada langkah ini Anda sudah berhasil menyelesaikan tutorial belajar HTML, untuk memperbaiki tampilannya dibutuhkan script tambahan yaitu CSS yang akan kami bahas pada tutorial selanjutnya.

Untuk code secara keseluruhan pada artikel ini akan terlihat seperti berikut:

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Halaman pertamaku</title>
     </head>
     <body>
<h1>Hosting Indonesia</h1>
<img alt="Hosting Indonesia" src="hosting-indonesia.png" height="200" />
<p>Kami menyediakan berbagai paket hosting dengan fitur lengkap</p>
<h2>Pilihan Paket Hosting Indonesia:</h2>
<ul>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bayi</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Pelajar</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Personal</a></li>
<li><a href="https://www.niagahoster.co.id" target="_blank">Paket Bisnis</a></li>
</ul>
<!-- Untuk tabel harga -->
<table border="1">
<tr>
<td>Bayi</td>
<td>Pelajar</td>
<td>Personal</td>
<td>Bisnis</td>
</tr>
<tr>
<td>Rp 19.800/ bln</td>
<td>Rp 44.800/ bln</td>
<td>Rp 67.800/ bln</td>
<td>Rp 91.800/ bln</td>
</tr>
<tr>
<td>500 MB Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
<td>Unlimited Disk Space</td>
</tr>
<tr>
<td>1 Domain</td>
<td>10 Addon Domains</td>
<td>Unlimited Addon Domains</td>
<td>Unlimited Addon Domains</td>
</tr>
</table>
<br>
<div>
<h2>Hubungi Kami</h2>
<form action=" index.html" method="get">
<div>
<input type="text" name="nama" placeholder="Nama Anda" required="" />
</div><br>
<div>
<input type="text" name="email" placeholder="Masukkan Email Anda" required="" >
</div><br>
<div>
<input type="text" name="subject" placeholder="Subjek" required="">
</div><br>
<div>
<textarea type="text" name="pesan" rows="10" cols="30" placeholder="Pertanyaan"></textarea> 
</div><br>
<div>
<input type="submit" value="Kirim Sekarang" >
</div>
</form>
        </div>
     </body>
</html>

view raw index.html hosted with by GitHub

Sedangkan untuk tampilan akhir akan terlihat seperti gambar di bawah ini:

Kesimpulan

Setelah Anda menyelesaikattan tutorial belajar HTML langkah demi langkah pada artikel ini, Anda akan memahami beberapa hal seperti cara membuat judul, memasukkan gambar, membuat link, sampai membuat kontak form. Jika Anda memiliki masukkan atau pertanyaan mengenai artikel ini, jangan ragu untuk berkomentar melalui kolom komentar yang tersedia. Silakan Subscribe untuk mendapatkan artikel terbaru langsung di inbox email Anda.

Referensi:

https://www.w3schools.com/html

http://html.net/tutorials/html

https://www.duniailkom.com/tutorial-belajar-html-dasar-untuk-pemula

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

Materi Html ke :

. . . . . . . . . . . . . . . . . . . . . . 1 2 3 4 5 6 7 8 9 10 . . . . . . . . . . . . . . . . . . . . . .

Pengertian HTML

2018-10-17T01:35:00.003+07:00

Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Sejarah

Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi dokumen. Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem markah berbasis internet. Berners-Lee menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya di akhir 1990. Pada tahun yang sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN berkolaborasi dalam sebuah permintaan untuk pendanaan, namun tidak diterima secara resmi oleh CERN. Di catatan pribadinya sejak 1990 dia mendaftar "beberapa dari banyak daerah yang menggunakan hypertext" dan pertama-tama menempatkan sebuah ensiklopedia.

Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah dokumen yang disebut "Tanda HTML", pertama kali disebutkan di Internet oleh Tim Berners-Lee pada akhir 1991. Tanda ini menggambarkan 18 elemen awal mula, versi sederhana dari HTML. Kecuali untuk tag hyperlink, yang sangat dipengaruhi oleh SGMLguid, in-house Standard Generalized Markup Language (SGML) berbasis format dokumen di CERN. Sebelas elemen ini masih ada di HTML 4.

HTML adalah bahasa markah yang digunakan peramban untuk menafsirkan dan menulis teks, gambar dan bahan lainnya ke dalam halaman web secara visual maupun suara. Karakteristik dasar untuk setiap item dari markah HTML didefinisikan di dalam peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan menggunakan tambahan halaman web desainer CSS. Banyak elemen teks ditemukan di laporan teknis ISO pada tahun 1988 TR 9537 Teknik untuk menggunakan SGML, yang pada gilirannya meliputi fitur bahasa format teks awal seperti yang digunakan oleh komandan RUNOFF dikembangkan pada awal 1960-an untuk sistem operasi: perintah-perintah format ini berasal dari perintah yang digunakan oleh pengetik untuk memformat dokumen CTSS secara manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-unsur daripada hanya efek cetak, dengan pemisahan struktur dan markah juga; HTML telah semakin bergerak ke arah ini dengan CSS.

Sejarah versi HTML

24 November 1995

HTML 2.0 dipublikasikan sebagai IETF RFC 1866. Penambahan RFC memperbanyak kemampuan untuk:

November 25, 1995: RFC 1867 (mengunggah file berdasarkan bentuk)
Mei 1996: RFC 1942 (tabel)
Agustus 1996: RFC 1980 (peta gambar berbasis klien)
Januari 1997: RFC 2070 (internasionalisasi)

14 Januari 1997

HTML 3.2 dipublikasikan sebagai Konsorsium World Wide Web. Versi ini merupakan versi pertama yang dikembangkan dan distandarisasi secara khusus oleh Konsorsium World Wide Web, sebagaimana IETF sudah menutup kelompok kerja HTMLnya pada 12 September, 1996.

Pada awalnya disebut "Wilbur", HTML 3.2 menghilangkan rumus matematika sama sekali yang sedang berkonsiliasi atas kasus tumpang tindih antara berbagai kepemilikan dan mengadopsi sebagian besar tanda markah visual dari Netscape. Elemen kedip dari Netscape dan elemen marquee besutan Microsoft dihilangkan karena kesepakatan bersama antara kedua perusahaan. Sebuah markup untuk rumus matematika serupa dengan yang ada dalam HTML tidak memiliki standar sampai 14 bulan kemudian di MathML.

18 December 1997

HTML 4.0 dipublikasikan sebagai rekomendasi W3C. Versi ini memiliki 3 variasi, yaitu:

Ketat, di mana elemen terdeprekasi dilarang.
Transisional, di mana elemen terdeprekasi diperbolehkan.
Frameset, di mana sebagian besar hanya elemen yang berkaitan dengan frame diperbolehkan.

Dulunya memiliki kode nama "Cougar", HTML 4.0 mengadopsi banyak tipe elemen dan atribut yang spesifik untuk peramban.HTML 4 adalah sebuah aplikasi SGML sesuai dengan ISO 8879 – SGML.

Kegunaan

Dokumen HTML mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara:  TAMPIL TEBAL. Tanda  digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda  untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

Kegunaan lain

Mengintegerasikan gambar dengan tulisan.
Membuat Pranala.
Mengintegerasikan berkas suara dan rekaman gambar hidup.
Membuat form interaktif.

Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
Menampilkan tulisan dalam bentuk cetakan tebal
Menampilkan sekelompok kata dalam bentuk miring
Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah/Tanda

Secara garis besar, terdapat 4 jenis elemen dari HTML:

Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, boldface akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan:

Pranala menuju bagian lain dari page.
Pranala menuju page lain dalam satu web site.
Pranala menuju resource atau web site yang berbeda.

Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

Contoh dokumen HTML sederhana

Untuk HTML 4 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head bgcolor=black text=white>
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

Untuk HTML 5 ^[18]

<!DOCTYPE HTML>
<html>
 <head style="background-color: black; color: white;">
  <title>Selamat Datang HTML</title>
 </head>
 <body>
  <p>Halo dunia!</p>
 </body>
</html>

Head

Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Contoh:

<meta name="author" content="ubuntu-online">

Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML di mana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

Tag biasanya merupakan suatu pasangan yang disebut dengan:

Tag awal, dinyatakan dalam bentuk <nama tag>
Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML Teks ini terlihat miring di browser Anda

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya,  digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah  dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.

Materi Html ke :

. . . . . . . . . . . . . . . . . . . . . . 1 2 3 4 5 6 7 8 9 10 . . . . . . . . . . . . . . . . . . . . . .

Tutorial membuat aplikasi android sederhana

2017-04-29T18:49:00.001+07:00

Salam sehat kawan-kawan semua

kali ini saya akan memberikan tutorial membuat aplikasi android sederhana
menggunakan App Inventor 2.
mungkin sudah banyak yang tau tentang App Inventor
tetapi gakada salahnyakan kalo kita berbagi ilmu.

ini ada sedikit ilmu yang aku punya. silahkan simak video tutorialnya!!!

untuk file apk yg sudah jadi
disini!!

Fungsi Web Browser

2017-04-28T08:31:00.003+07:00

Pengertian Web Browser

Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima, menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia). Dan salah satu informasi itu dibuat dalam format HTML.

Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap browser memiliki beberapa perbedaan.

HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web, yaitu W3C (World Wide Web Consortium). Hal ini dikarenakan tiap-tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di perlukan sebuah standar yang sama untuk seluruh browser.

Namun pada penerapannya, standar ini hanya merupakan rekomendasi. Beberapa web browser membuat aturannya sendiri.

Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an. Hampir 90% web browser yang digunakan saat itu adalah Internet Explorer, dan IE tidak sepenuhnya mengikuti rekomendasi W3C. Sedangkan web browser Opera yang mencoba menerapkan standar W3C tidak terlalu populer. Perbedaan aturan penerjemahan HTML di antara web browser inilah yang terus menjadi tantangan bagi programmer web.

Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser Mozilla Firefox dan Google Chrome telah menguasai lebih dari 50%, dan IE juga telah berusaha menerapkan standar W3C.

Fungsi Web Browser

Untuk mempelajari HTML, Web Browser adalah perangkat utama yang kita butuhkan. Ibarat bahasa pemograman lainnya, Web Browser adalah compiler dan intrepreter HTML. Anda bebas menggunakan web browser yang disukai, namun dalam tutorial kali ini Belajar HTML ini saya akan menggunakan Google Crome.

Untuk mendapatkan versi terbaru dari web browser populer saat ini, salahkan klik tombol dibawah:

Google chrome mozilla firefox opera internet explorer

Selain web browser, aplikasi lain yang kita butuhkan untuk mempelajari HTML adalah sebuah text editor, untuk pembahasan mengenai text editor HTML ini akan kita bahas pada Tutorial selanjutnya: Memilih Aplikasi Editor HTML.