Untuk Anda yang baru mengenal dunia programming, kemungkinan Anda akan kesulitan dalam melakukan coding. Ada banyak bahasa pemrograman, konsep baru, hingga berbagai istilah teknis yang harus dipahami.
Namun, jangan khawatir! Belajar coding sebenarnya tidak serumit yang dibayangkan–terutama jika Anda mulai dengan contoh coding sederhana yang bisa langsung dipraktikkan. Dengan begini, Anda dapat mengembangkan keterampilan ini untuk pengembangan website hingga pembuatan aplikasi.
Dalam artikel ini, kami akan memberikan 4 contoh coding sederhana dengan bahasa pemrograman HTML, JavaScript, PHP, dan C++.
1. Contoh Coding Sederhana PHP dan HTML
Contoh kode ini menunjukkan bagaimana cara membuat formulir kontak sederhana menggunakan HTML dan PHP, sangat cocok bagi Anda yang baru mulai belajar pengembangan web.
Berikut adalah kode HTML-nya:
<!DOCTYPE html>
<html>
<head>
<title>Form Kontak Sederhana</title>
</head>
<body>
<h2>Form Kontak</h2>
<form action="proses_form.php" method="post">
<label for="nama">Nama:</label><br>
<input type="text" id="nama" name="nama" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="pesan">Pesan:</label><br>
<textarea id="pesan" name="pesan" rows="4" required></textarea><br><br>
<input type="submit" value="Kirim">
</form>
</body>
</html>
Di file form_contact.html ini, terdapat tiga kolom input berupa nama, email, dan pesan yang harus diisi sebelum dikirim. Data yang diinput akan dikirim ke file proses_form.php menggunakan metode POST untuk diproses lebih lanjut. Hasil dari kode tersebut akan tampak seperti ini:
Sementara itu, berikut adalah kode yang harus Anda tulis dalam file PHP-nya:
<!DOCTYPE html>
<html>
<head>
<title>Hasil Form Kontak</title>
</head>
<body>
<h2>Terima Kasih Telah Mengisi Form</h2>
<?php
// Memeriksa apakah form telah disubmit
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Mengambil nilai dari form
$nama = htmlspecialchars($_POST['nama']);
$email = htmlspecialchars($_POST['email']);
$pesan = htmlspecialchars($_POST['pesan']);
// Menampilkan data yang diterima
echo "<p><strong>Nama:</strong> $nama</p>";
echo "<p><strong>Email:</strong> $email</p>";
echo "<p><strong>Pesan:</strong> $pesan</p>";
// Biasanya di sini Anda akan menyimpan data ke database atau mengirim email
echo "<p>Pesan Anda telah diterima. Kami akan segera menghubungi Anda!</p>";
} else {
// Jika seseorang mencoba mengakses file ini langsung tanpa mengisi form
echo "<p>Error: Tidak ada data yang diterima.</p>";
}
?>
<a href="form_contact.html">Kembali ke Form</a>
</body>
</html>
Di file proses_form.php, data dari formulir akan ditampilkan kembali kepada pengguna sebagai konfirmasi bahwa pesannya telah diterima. Sementara itu, fungsi htmlspecialchars() digunakan untuk mencegah serangan XSS dan menjaga keamanan dasarnya.
Baca juga: Perbedaan PHP dan JavaScript: Panduan Lengkap untuk Pemula
2. Contoh Coding Sederhana JavaScript
Apakah Anda ingin membuat sebuah aplikasi web? Contohlah proyek To-Do-List sederhana di bawah ini.
Berikut adalah contoh kodenya:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List Sederhana</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
#daftar-tugas {
margin-top: 20px;
}
.tugas {
padding: 10px;
margin: 5px 0;
background-color: #f9f9f9;
display: flex;
justify-content: space-between;
}
.hapus {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<h2>To-Do List Sederhana</h2>
<input type="text" id="tugas-baru" placeholder="Masukkan tugas baru">
<button onclick="tambahTugas()">Tambah Tugas</button>
<div id="daftar-tugas"></div>
<script>
// Fungsi untuk menambahkan tugas baru
function tambahTugas() {
const input = document.getElementById('tugas-baru');
const tugas = input.value.trim();
if (tugas === "") {
alert("Masukkan tugas terlebih dahulu!");
return;
}
const daftar = document.getElementById('daftar-tugas');
const divTugas = document.createElement('div');
divTugas.className = 'tugas';
divTugas.innerHTML = `
<span>${tugas}</span>
<span class="hapus" onclick="hapusTugas(this)">✕</span>
`;
daftar.appendChild(divTugas);
input.value = ""; // Mengosongkan input
}
// Fungsi untuk menghapus tugas
function hapusTugas(element) {
if (confirm("Apakah Anda yakin ingin menghapus tugas ini?")) {
element.parentElement.remove();
}
}
// Tambahkan tugas ketika menekan Enter
document.getElementById('tugas-baru').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
tambahTugas();
}
});
</script>
</body>
</html>
Anda dapat menambahkan daftar tugas melalui kolom input dan klik Enter atau tekan tombol “Tambah Tugas”.
Setiap tugas yang ditambahkan akan memiliki tombol hapus kecil berbentuk tanda silang (✕). Jika Anda ingin menghapus tugas, cukup klik tombol ini dan sistem akan menghadirkan pertanyaan konfirmasi untuk memastikan bahwa Anda benar-benar ingin menghapusnya.
Hasil dari kode tersebut akan menghasilkan tampilan seperti ini:
3. Contoh Coding Sederhana Python
Sebagai salah satu contohnya, mari kita belajar membuat daftar belanja sederhana. Gunakan kode seperti di bawah ini:
daftar_belanja = []
print("Daftar Belanja Sederhana")
print("1. Tambah item")
print("2. Lihat daftar")
print("3. Hapus item")
print("4. Keluar")
while True:
pilihan = input("Pilih menu (1/2/3/4): ")
if pilihan == '1':
item = input("Masukkan item yang ingin ditambahkan: ")
daftar_belanja.append(item)
print(f"'{item}' telah ditambahkan ke daftar.")
elif pilihan == '2':
print("nDaftar Belanja:")
for i, item in enumerate(daftar_belanja, 1):
print(f"{i}. {item}")
print()
elif pilihan == '3':
if not daftar_belanja:
print("Daftar belanja kosong!")
else:
print("Daftar Belanja:")
for i, item in enumerate(daftar_belanja, 1):
print(f"{i}. {item}")
nomor = int(input("Masukkan nomor item yang ingin dihapus: ")) - 1
if 0 <= nomor < len(daftar_belanja):
item_hapus = daftar_belanja.pop(nomor)
print(f"'{item_hapus}' telah dihapus dari daftar.")
else:
print("Nomor tidak valid!")
elif pilihan == '4':
print("Terima kasih telah menggunakan program ini!")
break
else:
print("Pilihan tidak valid. Coba lagi.")
Di dalam daftar belanja ini, Anda dapat menambahkan, melihat, dan menghapus item melalui terminal. Kode ini menggunakan konsep dasar Python seperti list, perulangan, dan percabangan, sehingga cocok untuk pemula.
Kira-kira berikut adalah hasil output dari kode tersebut:
4. Contoh Coding Sederhana C++
Sebagai salah satu contoh coding sederhana dengan bahasa C++ berikut kami contohkan jika Anda ingin membuat projek untuk mengecek bilangan ganjil atau genap. Gunakan kode seperti di bawah ini:
#include <iostream>
using namespace std;
int main() {
int num;
cout << "Masukkan sebuah bilangan: ";
cin >> num;
if(num % 2 == 0)
cout << num << " adalah bilangan genap";
else
cout << num << " adalah bilangan ganjil";
return 0;
}
Contoh ini dibuat untuk membantu Anda mengecek apakah sebuah bilangan termasuk ganjil atau genap. Hanya dengan memasukkan angka, program akan menampilkan hasilnya.
Dengan memanfaatkan operator modulus (%) untuk melihat sisa bagi, kode ini sangat sederhana namun efektif. Jika dipraktikkan, Anda akan mendapatkan hasil output seperti ini:
Baca juga: 3 Tips Belajar Coding untuk Pemula
Saatnya Tingkatkan Skill Anda Bersama Coding Studio!
Itulah contoh coding sederhana yang dapat menjadi referensi Anda. Meskipun simpel, kode-kode di atas merupakan sebagian kecil dari pengaplikasian ilmu pemrograman yang dapat dibuat–bahkan untuk pemula. Ingatlah untuk terus berlatih hingga memahami logika pemrograman yang mendasarinya!
Apakah Anda ingin belajar programming dari dasar? Yuk, daftarkan diri Anda ke dalam kelas basic programming dari Coding Studio!
Apa yang membuat kelas ini spesial? Selain menggunakan kurikulum internasional, Anda akan belajar langsung bersama mentor berpengalaman. Lakukan konsultasi kepada mereka jika masih ada materi yang kurang dipahami!
Untuk kelasnya sendiri, kami menghadirkan dua pilihan: belajar secara offline ataupun online yang dapat dipilih menyesuaikan kebutuhan. Bahkan, Anda juga akan ditugaskan untuk menyelesaikan proyek atau studi kasus hingga mendapatkan sertifikat yang kredibel!
Sudah cukup tertarik? Yuk, tingkatkan kemampuan coding Anda sekarang juga bersama Coding Studio!