MODUL 1

Pengenalan Bahasa C++ , Algoritma Pemrograman,

Integrated Development Equipment (IDE) Visual C++
Dan Dasar-Dasar Bahasa C++

A. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
§ Memahami sejarah perkembangan bahasa C++.
§ Mengenal dan memahami algoritma program dengan flowchart.
§ Mengenal dan menggunakan IDE C++ dengan baik.
§ Mengenal dan memahami penggunaan Identifier, tipe data, variable,
assignment, komentar, dan konstanta.
§ Membuat program sederhana menggunakan bahasa C++.

B. Dasar Teori
Sejarah Perkembangan Bahasa C++

C++ adalah bahasa pemrograman komputer yang di buat oleh Bjarne

Stroustrup, yang merupakan perkembangan dari bahasa C dikembangkan di
Bong Labs (Dennis Ritchie) pada awal tahun 1970-an, Bahasa itu diturunkan dari
bahasa sebelumnya, yaitu B, Pada awalnya, bahasa tersebut dirancang sebagai
bahasa pemrograman yang dijalankan pada sistem Unix, Pada perkembangannya,
versi ANSI (American National Standart Institute). Bahasa pemrograman C menjadi
versi dominan, Meskipun versi tersebut sekarang jarang dipakai dalam
pengembangan sistem dan jaringan maupun untuk sistem embedded, Bjarne
Stroustrup pada Bel labs pertama kali mengembangkan C++ pada awal 1980-an.
Untuk mendukung fitur-fitur pada C++, dibangun efisiensi dan sistem support untuk
pemrograman tingkat rendah (low level coding). Pada C++ ditambahkan konsep-
konsep baru seperti class dengan sifat-sifatnya seperti inheritance dan overloading.
Salah satu perbedaan yang paling mendasar dengan bahasa C adalah dukungan
terhadap konsep pemrograman berorientasi objek (Object Oriented Programming).
Algoritma Pemrograman

Algoritma adalah metode dan tahapan sistematis yang digunakan untuk

memecahkan suatu permasalahan. Sedangkan pemrograman adalah proses
pembuatan program dengan menerapkan algoritma dan struktur data tertentu
menggunakan bahasa pemrograman. Struktur data adalah tempat tatanan
penyimpanan data yang dibutuhkan program pada komputer.

Gambar 1.1 Bagan Struktur Program

Kode program yang telah ditulis kemudian akan di-compile dan dieksekusi
untuk menjalankannya. Compile adalah menerjemahkan kode program yang ditulis
menggunakan bahasa pemrograman, ke bahasa mesin yang dapat dimengerti oleh
komputer sehingga komputer mengerti apa yang diperintahkan.

Gambar 1.2 Mekanisme Eksekusi Program

Flowchart

Flowchart atau diagram alir merupakan sebuah diagram dengan simbol-

simbol grafis yang menyatakan aliran algoritma atau proses yang menampilkan
langkah-langkah, secara berurutan dengan menghubungkan masing masing langkah
tersebut menggunakan tanda panah. Diagram ini bisa memberi solusi selangkah demi
selangkah untuk penyelesaian masalah yang ada di dalam proses atau algoritma
tersebut.

Gambar 1.3 Simbol-simbol flowchart

Berikut ini adalah contoh flowchart program sederhana :

Gambar 1.4 Contoh flowchat program sederhana

Mengenal IDE ( Integrated Development Equipment) MinGW Developer Studio

IDE (Integrated Development Equipment) adalah program komputer yang

memiliki beberapa fasilitas yang diperlukan dalam pembangunan perangkat lunak.
Tujuan dari IDE adalah untuk menyediakan semua utilitas yang diperlukan dalam
membangun perangkat lunak. IDE pada MinGW Developer Studio terbagi menjadi
lima bagian yaitu
 Menu Toolbar
Toolbar

File View Window Code Editor Window

Message Window

Gambar 1.5 Tampilan IDE MinGW Developer Studio

a) Menu Toolbar. Menu utama yang terdiri dari ; File,Edit,View,Project,

Build,Debug ,Tools ,Windows dan Help.
b) Toolbar. Menampilkan beberapa tool dari menu toolbar maupun sub menu-
nya.
c) Code Editor Window. Tempat dituliskannya kode program.
d) Message Window. Menampilkan pesan-pesan pada proses kompilasi dan
link program.
e) File View Window. Menampilkan program yang sedang dibuka dan
dikerjakan.
Pengoperasian MinGW Developer Studio

1. Membuka aplikasi MinGW

Gambar 1.6 Tampilan awal MinGW

2. Membuat Project baru

Klik menu File dan pilih new (Ctrl + N)

Gambar 1.7 Tampilan membuat project baru

Pilih tab “Projects” dan pilih “Win32Console..” . Beri nama project pada Project
name dan pilih letak penyimpanan project tersebut di Location. Klik OK.
3. Membuat File baru
Klik menu File dan pilih new (Ctrl + N)

Gambar 1.8 Tampilan membuat file baru

Pilih tab “Files” dan pilih “C/C++ Source File” . Beri nama file pada File name dan pilih
letak penyimpanan file tersebut di Location. Klik OK.

4. Membuat program sederhana

Gambar 1.9 Program Sederhana

5. Mengcompile dan eksekusi file

Klik tombol “compile” pada toolbar atau Ctrl + F7.

Gambar 1.10 Message Window

Pastikan tidak ada peringatan error atau warning yang membuat program tidak dapat
di jalankan. Kemudian kik tombol “execute program” atau Ctrl + F5.

Gambar 1.11 Compile dan Execute

 6. Hasilnya

Gambar 1.12 Output program

Struktur Sederhana Program C++

Header File

Deklarasi Fungsi Utama

Baris Program

Gambar 1.13 Stuktur sederhana program C/C++

Komponen Bahasa C++

1. Header

File Header adalah file yang berisi deklarasi untuk berbagai fungsi yang
dibutuhkan oleh program baik itu sebagai standar Input/Output maupun sebagai
syntax. File Header dalam C++ digunakan untuk memanggil library- library yang ada
sehingga suatu fungsi dapat digunakan secara baik dan benar. Beberapa contoh file
header di dalam C++ sebagi berikut :
 Gambar 1.14 Contoh file header

2. Fungsi Utama

Setiap program yang ditulis dengan menggunakan bahasa C harus mempunyai

fungsi utama, fungsi tersebut bernama main(). Fungsi inilah yang akan dipanggil
pertama kali pada saat eksekusi program. Apabila ada fungsi lain yang dibuat, maka
fungsi tersebut akan dijankan ketika dipanggil di fungsi utama. Hal ini karena bahasa
C/C++ merupakan bahasa procedural yang menerapkan konsep runtutan (program
dieksekusi baris-perbaris dari atas ke bawah secara berurutan).

3. Identifier / Pengenal

Identifier adalah suatu nama yang biasa dipakai dalam pemrograman untuk
menyatakan variabel, konstanta, tipe data, dan fungsi. Aturan untuk penulisan
identifier antara lain:
1. Tidak boleh dimulai dengan karakter non huruf
2. Tidak boleh ada spasi
3. Tidak boleh menggunakan karakter-karakter ~ ! @ # $ % ^ & * ( ) + ` - = {
}[]:";'<>?,./|
4. Tidak boleh menggunakan reserved words yang ada dalam C/C++.
Reserved Word atau Keyword merupakan kata-kata yang telah ada/ didefinisikan oleh
bahasa pemrograman yang bersangkutan. Kata-kata tersebut telah memiliki definisi
yang sudah tetap dan tidak dapat diubah. Karena telah memiliki definisi tertentu, maka
kata-kata ini tidak dapat digunakan sebagai identifier.

Gambar 1.15 Reserved Words C/C++

4. Tipe Data
Tipe Data adalah jenis nilai yang dapat ditampung oleh suatu variabel.
Berikut ini tipe data yang terdapat dalam C++ :

Gambar 1.16 Jenis – jenis tipe data

5. Deklarasi Variabel
Variabel merupakan suatu tempat untuk menampung data atau konstanta di
memori yang mempunyai nilai atau data yang dapat berubah – ubah selama proses
program. Variabel yang digunakan dalam program harus dideklarasikan terlebih
dahulu. Pengertian deklarasi di sini yaitu mengenalkan variabel ke program dan
menentukan tipe datanya. Berikut ini contoh pendeklarasian variabel:

int jumlah;
float harga_satuan,
char angka, huruf;

6. Assigment
Proses assignment adalah proses pemberian nilai kepada suatu variabel yang
telah dideklarasikan. Berikut adalah contoh assignment:
jumlah = 10;
harga_satuan = 23.456;
angka = ‘1’;
huruf = ‘B’;

Berikut ini contoh program yang menggambarkan deklarasi variabel dan assignment:
Contoh 1 :

Gambar 1.17 Contoh deklarasi variable dan assignment

7. Konstanta
Konstanta adalah identifier yang terkait nilai tidak bisa biasanya diubah oleh
program selama pelaksanaannya. Untuk pendeklarasian konstanta dalam C++ mirip
dengan Pascal. Contoh penulisan kode program (sintaks) adalah seperti berikut :

const tipe_data nama_konstanta = value;

const int mhs = 20;

8. Komentar
Komentar digunakan untuk memberikan penjelasan pada program dan tidak akan
dieksekusi dalam program. Contoh penulisan komentar dalam program adalah
sebagai berikut:

Gambar 1.19 Contoh komentar

LATIHAN

1. Tuliskan kembali kode program di bawah ini dan identifikasi (header, variable,
assignment dsb ) ?

2. Buatlah program sederhana untuk menghitung luas lingkaran !

3. Tuliskan kembali program di bawah ini dan simpan dengan ekstensi :
a. Ekstensi .cpp
b. Ekstensi .c

4. Adakah perbedaan output kedua program pada no 3 ? Jelaskan !

TUGAS

1. Buatlah sebuah program yang menampilkan hal-hal berikut:

a. tulisan “Halo, siapa namamu?”, lalu meminta pengguna memasukkan
namanya;
b. tulisan “Berapa usiamu?”, lalu meminta pengguna memasukkan usianya, ;
c. tulisan “Dimanakah tempat tinggalmu?”, lalu meminta pengguna memasukkan
alamat tempat tinggalnya;
d. tulisan “Dimanakah tempat kuliahmu?”, lalu meminta pengguna memasukkan
nama kampus tempat kuliah;
e. tulisan “Program studimu apa?”, lalu meminta pengguna memasukkan nama
program studinya;

dan akhirnya menuliskan pesan “Hallo <nama>, senang berteman denganmu.

Usiamu sekarang sudah <usia> tahun ya? Makin keren aja kamu, apalagi sekarang
kamu kuliah di <nama kampus> di program studi <nama prodi>. Rumah kamu di
<alamat rumah> kan? Kapan-kapan kita pergia sama-sama ya ke kampus? Aku
juga mahasiswa <nama kampus>”.

Keterangan:
<nama> , <usia>, <nama kampus>, <nama prodi>, dan <alamat rumah> adalah
data yang dibaca dari hasil input sebelumnya.

2. Menghitung luas dan keliling persegi panjang. Data masukan dibaca dari piranti
masukan dan luas dan keliling bangun persegi panjang ditampilkan sebagai
keluaran.

3. Mengkonversikan total detik menjadi jam menit detik. Petunjuk: 1 menit = 60 detik
dan 1 jam = 3600 detik.
MODUL 2
Operator Bahasa Pemrograman C++

A. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
§ Menjelaskan tentang jenis-jenis operator.
§ Menjelaskan masing-masing fungsi operator.
§ Memahami cara penggunaan masing-masing operator.
§ Membuat program dengan mengaplikasikan operator.
§ Mengevaluasi kesalahan pada program.

B. Dasar Teori
1. Pendahuluan
Operator merupakan simbol atau karakter yang biasa dilibatkan dalam program
untuk melakukan sesuatu operasi atau manipulasi. Contohnya Penjumlahan,
pengurangan, pembagian dan lain-lain.
Operator mempunyai sifat:
Unary
Sifat unary pada operator hanya melibatkan sebuah operand pada suatu operasi
aritmatik. Contoh : -5

Binary
Sifat binary pada operator melibatkan dua buah operand pada suatu operasi aritmatik.
Contoh : 4 + 8

Ternary
Sifat tenary pada operator melibatkan tiga buah operand pada suatu operasi aritmatik.
Contoh : (10 : 3) + 4 + 2
2. Jenis-jenis operator
2.1 Operator Aritmatika
Operator untuk operasi aritmatika yang tergolong sebagai binary adalah:

Tabel 2.1.1 Operator Aritmatika

Tabel 2.1.2 Operator Unary

2.1.1 Hierarki Operator Aritmatika

Di dalam suatu akspresi arotmatika dapat kita jumpai beberapa operator
aritmatika yang berbeda secara bersamaan. Urutan operator aritmatika adalah
sebagai berikut:
Tabel 2.1.3 Tabel Hierarki Operator Aritmatika

Contoh:
A=8+2*3/6

Langkah perhitungannya :
A = 8 + 6/6 dimana 6/6 = 1 A = 8 + 1
A=9

Tingkatan operator ini dapat diabaikan dengan penggunaan tanda kurung ( dan )
Contoh:
A = (8 + 2) * 3 / 6
Langkah perhitungannya :
A = 10 * 3/6 dimana 8 + 2 = 10
A = 30 / 6
A=5

2.2 Operator Penugasan

Operator penugasan (Assignment operator) dalam bahasa C++ berupa tanda
sama dengan (“=”).
Contoh :
nilai = 80; A = x * y;
Penjelasan :
variable “nilai” diisi dengan 80 dan variable “A” diisi dengan hasil perkalian antara x
dan y.

2.3 Operator Increment & Decrement

Pada pemrograman C++, menyediakan operator penambah dan pengurang
Increment & Decrement).

Tabel 1.4 Operator Increment & Decrement

A = A + 1 atau A = A – 1; dapat disederhanakan menjadi A + = 1 atau A - = 1. Dan

dapat disederhanakan menjadi A++ atau A--. Notasi ++ atau -- dapat diletakkan di
depan atau di belakang variabel.

Contoh: A-- atau --A atau ++ A atau A++

Kedua bentuk penulisan di atas mempunyai arti yang berbeda:
• Jika diletakkan di depan variabel. Maka proses penambahan atau pengurangan
akan dilakukan sesaat sebelum atau langsung pada saat menjumpai ekspresi ini
sehingga nilai variabel tadi akan langsung berubah begitu ekspresi ini di temukan.
• Jika diletakkan di belakang variabel. Maka proses penambahan atau
pengurangan akan dilakukan setelah ekspresi ini di jumpai atau nilai variabel akan
tetap pada saat ekspresi ini ditemukan

2.4 Operasi Relasi (Perbandingan)

Operator relasi ini digunakan untuk membandingkan dua buah nilai. Hasil dari
perbandingan operator ini menghasilkan nilai numeric 1 (True) atau 0 (False).
 Tabel 1.5. Operator relasi (Perbandingan)

2.5 Operator Logika

Operator logika digunakan untuk menghubungkan dua atau lebih ungkapan
menjadi sebuah ungkapan berkondisi.

Tabel 1.6 Operator Relasi Logika

Latihan

1. Latihan 1
Tuliskan kode program di bawah ini dengan menggunakan IDE Anda. kemudian
compile dan simpan dengan nama Latihan1_operator, execute kode program
tersebut., jika ada error perbaiki program tersebut. Jelaskan & simpulkan hasil execute
program Latihan1_operator!
2. Latihan 2
Tuliskan kode program di bawah ini dengan menggunakan aplikasi IDE Anda,
kemudian compile dan simpan dengan nama Latihan2_operator, execute kode
program tersebut., jika ada error perbaiki program tersebut. Jelaskan & simpulkan
hasil execute program Latihan2_operator!
3. Latihan 3
Tuliskan kode program di bawah ini dengan menggunakan aplikasi IDE Anda,
kemudian compile dan simpan dengan nama Latihan3_operator, execute kode
program tersebut., jika ada error perbaiki program tersebut. Jelaskan & simpulkan
hasil execute program Latihan3_operator!
4. Latihan 4
Tuliskan kode program di bawah ini dengan menggunakan aplikasi IDE, kemudian
compile dan simpan dengan nama Latihan4_operator, execute kode program
tersebut., jika ada error perbaiki program tersebut. Jelaskan & simpulkan hasil execute
program Latihan4_operator.

5. Latihan 5
a. Tuliskan kode program di bawah ini dengan menggunakan aplikasi IDE Anda,
kemudian compile dan simpan dengan nama Latihan5a_operator, execute
kode program tersebut., jika ada error perbaiki program tersebut. Jelaskan &
simpulkan hasil execute program Latihan5a_operator!

b. Tuliskan kode program di bawah ini dengan menggunakan aplikasi IDE Anda,
kemudian compile dan simpan dengan nama Latihan5b_operator, execute
kode program tersebut., jika ada error perbaiki program tersebut. Jelaskan &
simpulkan hasil execute program Latihan5b_operator!
MODUL 3
Operator Kondisi (Percabangan)

A. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
§ Menjelaskan tentang fungsi operasi kondisi.
§ Menjelaskan tentang fungsi if, if else, if else bertingkat, dan switch case.

B. Dasar Teori
Pernyataan percabangan pada pemrograman digunakan untuk memecahkan
persoalan untuk mengambil suatu keputusan diantara sekian pernyataan yang ada,
dimana sebuah instruksi (pernyataan) akan dilaksanakan jika sebuah
kondisi/persyaratan terpenuhi.

1. Pernyataan If
Pernyataan if mempunyai pengertian” jika kondisi bernilai benar, maka pernyataan
akan dikerjakan dan jika tidak memenuhi syarat maka program akan mengabaikan
pernyataan ”. Dari pengertian tersebut diatas maka dapat dilihat diagram alir seperti
pada gambar 1.

Gambar 1. Diagram Alir If

Bentuk umum dari pernyataan if adalah:

if (kondisi)
Pernyataan;
Penulisan kondisi harus di dalam kurung (……) dan berupa ekspresi boolean (hasil
logika true atau false, dan pernyataan dapat berupa sebuah pernyataan tunggal,
pernyataan majemuk atau pernyataan kosong.

Jika pemakaian if diikuti dengan pernyataan majemuk, bentuk penulisannya sebagai

berikut:

2. Pernyataan If – Else
Pernyataan if mempunyai pengertian, “ jika kondisi bernilai benar, maka
pernyataan-1 yang akan dieksekusi dan jika tidak memenuhi syarat maka akan
dieksekusi pernyataan-2”. Dari pengertian tersebut dapat dilihat di diagram alir pada
gambar 2.

Gambar 2. Diagram Alir If-Else

Bentuk umum dari pernyataan if-else adalah

Pada Gambar 2, diagram alir if-else pernyataan-1 dan pernyataan-2 dapat

berupa sebuah pernyataan tunggal, pernyataan majemuk atau pernyataan kosong.
Jika if- else diikuti dengan pernyataan majemuk, bentuk penulisannya adalah:

3. If – Else Bertingkat
Bentuk If-Else dapat digunakan secara bertingkat. Ada beberapa bentuk If-Else
bertingkat, antara lain nested if dan if – else if.

i. Nested If
Nested if merupakan bentuk pernyataan if yang ada di dalam pernyataan if yang
lain. Disebut juga if bersarang. Eksekusinya memperhatikan pernyataan if yang
mewadahi pernyataan if yang ada.

Bentuk umum dari pernyataan ini adalah:

ii. If – Else If
Bentuk ini merupakan penggunaan bentuk if else secara majemuk. Pernyataan if
pada else if akan dieksekusi jika hasil pernyataan if sebelumnya bernilai false.
Bentuk umum dari pernyataan ini adalah:

4. Pernyataan Switch – Case

Bentuk switch – case merupakan pernyataan yang dirancang khusus untuk
menanggani pengambilan keputusan yang melibatkan sejumlah atau banyak
alternatif. Pernyataan switch – case ini memiliki kegunaan yang sama seperti if – else
bertingkat, tetapi dengan kondisi yang bertipe karakter atau integer.

Bentuk umum dari pernyataan ini adalah sbb.

Setiap cabang akan dijalankan jika syarat nilai konstanta terpenuhi dan default akan
dijalankan jika semua cabang diatasnya tidak terpenuhi. Pernyataan break
menunjukkan setelah eksekusi pernyataan, maka program akan keluar dari switch.
jika pernyataan ini tidak ada, maka program akan diteruskan ke cabang-cabang yang
lainnya.

C. Latihan
1. Latihan 1

2. Latihan 2
3. Latihan 3

4. Latihan 4
5. Latihan 5
 6. Latihan 6

TUGAS PRAKTIKUM
1. Soal 1
Sebuah toko dengan nama ”MAJU MUNDUR” dalam melayani pembeli, mempunyai
ketentuan dalam memberikan potongan harga. Besarnya potongan harga dari
pembelian barang adalah sebagai berikut:
1. jika total pembelian barang kurang dari Rp75.000, maka potongan yang diterima
sebesar 10% dari total pembelian.
2. jika total pembelian barang lebih atau sama dengan Rp75.000 – Rp100.000, maka
potongan yang diterima sebesar 20% dari total pembelian.
3. jika total pembelian barang lebih dari Rp100.000, maka potongan yang diterima
sebesar 30% dari total pembelian.
4. konsumen ingin anda membuatkan program dengan mencantumkan juga label
toko, nama kasir dan pembeli.
Buatlah program untuk menyelesaikan masalah di atas!

2. Soal 2
Suatu Perusahaan dengan nama ”PT. MAKMUR SUKSES JAYA” memberikan komisi
kepada para salesmannya dengan ketentuan sebagai berikut:
1. bila salesman dapat menjual barang hingga Rp60.000, maka akan diberikan uang
jasa sebesar Rp15.000 ditambah dengan komisi 15% dari pendapatan yang
diperoleh hari itu.
2. bila salesman dapat menjual barang diatas Rp60.000, maka akan diberikan uang
jasa sebesar Rp30.000, ditambah dengan uang komisi 20% dari pendapatan yang
diperoleh pada hari itu.
3. bila salesman dapat menjual barang diatas Rp100.000, maka akan diberikan uang
jasa sebesar Rp50.000, ditambah dengan uang komisi 30% dari pendapatan yang
diperoleh pada hari itu.
4. perusahaan itu ingin anda membuatkan program dengan mencantumkan juga
label nama perusahaan, nama kasir dan salesman.

Buatlah program untuk menyelesaikan masalah di atas!

MODUL 4
Perulangan (Looping)

A. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
§ Mengenal dan memahami penggunaan statement perulangan.
§ Membuat program sederhana dengan menerapkan konsep perulangan.

B. Dasar Teori

1. Definsi Perulangan
Dalam bahasa C++ tersedia suatu fasilitas yang digunakan untuk melakukan
proses yang berulang-ulang sebanyak keinginan kita. Misalnya saja, bila kita ingin
menginput dan mencetak bilangan dari 1 sampai 100 bahkan 1000, tentunya kita akan
merasa kesulitan. Namun dengan struktur perulangan proses, kita tidak perlu
menuliskan perintah sampai 100 atau 1000 kali, cukup dengan beberapa perintah
saja.
Struktur perulangan dalam bahasa C mempunyai bentuk yang bermacam- macam.
Sebuah/kelompok instruksi diulang untuk jumlah pengulangan tertentu. Baik yang
terdifinisikan sebelumnya ataupun tidak. Struktur pengulangan terdiri atas dua bagian
:
(1). Kondisi pengulangan yaitu ekspresi boolean yang harus dipenuhi untuk
melaksanakan pengulangan;
(2). Isi atau badan pengulangan yaitu satu atau lebih pernyataan (aksi) yang akan
diulang.

1. Statement For
Struktur perulangan for biasa digunakan untuk mengulang suatu proses yang
telah diketahui jumlah perulangannya. Dari segi penulisannya, struktur perulangan for
tampaknya lebih efisien karena susunannya lebih simpel dan sederhana.
Pernyataan for digunakan untuk melakukan looping. Pada umumnya looping
yang dilakukan oleh for telah diketahui batas awal, syarat looping dan perubahannya.
Selama kondisi terpenuhi, maka pernyataan akan terus dieksekusi.
Bentuk umum perulangan for adalah sebagai berikut :

For ( inisialisasiNilai; SyaratPerulangan;

PerubahanNilai )
{
Statement yang diulang;
Ungkapan1 merupakan statement awal (inisialisasi)
• Ungkapan2 merupakan kondisi/syarat perulangan dilakukan
• Ungkapan3 merupakan statement control untuk perulangan
• Statement merupakan pernyataan/perintah yang dijalankan jika syarat
terpenuhi.

for(a=1;a<=5;a++) {
cout<<”Hello World! \n”
}
Perintah diatas menampilkan kalimat “Hello World!” sebanyak 5 baris.

Tanda “a=1” adalah nilai awal variabel

a. Tanda “a<=5” syarat pengulangan.
Tanda “a++” kondisi pengulangan.

for(huruf=‟Z‟;huruf>=‟A‟;huruf--)
{
Cout<<Abjad ”<<huruf<<”\n”;
}
Perintah diatas menampilkan abjad Z – A.

Perhatikan perintah operator --, operator – digunakan untuk decrement

Contoh lain :
for (angka = 1; angka <= 6; angka+=2)
{
cout << “Isi dari angka = “ << angka << endl;
}

Perintah di atas akan menampilkan angka 1, 3, 5. Mengapa terjadi

demikian? Perhatikan perintah angka+=2 !
Di bawah ini adalah program untuk mencetak bilangan genap yang kurang dari n (n
diperoleh dari input).
#include <iostream.h>
#include <conio.h>
void main(){
int bil, n;
cout << “Masukkan n = “;
cin >> n;
for (bil = 0; bil < n; bil++)
{
if (bil % 2 == 0) cout << bil << “ ”;
}
}
2. Statement While
Perulangan WHILE banyak digunakan pada program yang terstruktur.
Perulangan ini banyak digunakan bila jumlah perulangannya belum diketahui. Proses
perulangan akan terus berlanjut selama kondisinya bernilai benar (≠0) dan akan
berhenti bila kondisinya bernilai salah (=0).
Berikut gambaran umumnya:

while (syarat pengulangan)

{
statement yang dijalankan;
statement control:
}

Dua perintah di bawah ini adalah identik.

a = 1;
for (a = 1; a <= 5; a++)
while (a <= 5){
{ cout << “Hello world \n”;
cout << “Hello world \n”; a++;
} }
Contoh program di bawah ini digunakan untuk menjumlahkan sejumlah data angka.
Angka yang akan dijumlahkan diinputkan satu-persatu. Proses pemasukan data
angka akan berhenti ketika dimasukkan angka –1. Setelah itu tampil hasil
penjumlahannya.

#include <iostream.h>
#include <conio.h>
void main()
{
int data, jumlah,cacah;
jumlah = 0;
data = 0;
cacah = 0;
while (data != -1)
{
cout << “Masukkan data angka : “;
cin >> data; jumlah += data; cacah++;
}
cout << “Jumlah data adalah : “ << jumlah” << endl;
cout << “Rata-rata : ” << jumlah/cacah;
}

Kondisi dalam WHILE juga dapat menggunakan operator logika. Misalnya:

while((kondisi 1) && (kondisi2))

{
Blok Pernyataan;
}
3. Statement Do-While
Perintah DO ... WHILE hampir sama dengan WHILE sebelumnya. Gambaran
secara umum:
do
{
Blok Pernyataan;
}
while(kondisi);

Perbedaan dengan WHILE sebelumnya yaitu bahwa pada DO WHILE

statement perulangannya dilakukan terlebih dahulu baru kemudian di cek kondisinya.
Sedangkan WHILE kondisi dicek dulu baru kemudia statement perulangannya
dijalankan. Akibat dari hal ini adalah dalam DO WHILE minimal terdapat 1x
perulangan. Sedangkan WHILE dimungkinkan perulangan tidak pernah terjadi yaitu
ketika kondisinya langsung bernilai FALSE.

Contoh:
a = 1;
do
{
cout << “Hello world \n”;
a++;
}
while(a==0);

Perintah di atas akan muncul satu buah Hello World. Bandingkan dengan yang berikut
ini:
a = 1;
while(a==0)
{
cout << “Hello world \n”;
a++;
}

Perintah di atas sama sekali tidak menampilkan Hello World, karena kondisinya
langsung FALSE.
LATIHAN

1. Latihan 1
Buatlah program untuk menampilkan bilangan bulat 1 s/d 10

2. Latihan 2
Buatlah program untuk menampilkan bilangan genap dari besar ke kecil dengan
batas awal dan batas akhir bilangan dengan menggunakan perulangan WHILE.
3. Latihan 3
Buatlah program untuk menampilkan bentuk segitiga seperti output dibawah ini
dengan memasukkan tinggi segitiga dan menggunakan perulangan FOR.

4. Latihan 4
Buatlah simulasi menu program seperti output dibawah ini dengan menggunakan
DO WHILE.
Tugas Praktikum
1. Tugas Praktikum 1
Buatlah program untuk mencetak kata seperti dibawah ini dengan menggunakan
perulangan WHILE atau FOR.

2. Tugas Praktikum 2
Buatlah program untuk menampilkan * seperti output dibawah ini.
MODUL 5
Database MySQL

A. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
§ Mengenal dan memahami penggunaan MySQL untuk manajemen database
§ Membuat database relasional sederhana menggunakan MySQL

B. Dasar Teori

1. Pengenalan MySQL
Berbicara mengenai mysql, tidak lepas dari berbicara mengenai sql (structured
query language) yakni bahasa yang berisi perintah-perintah untuk memanipulasi
database, mulai dari melakukan perintah select untuk menampilkan isi database,
menginsert atau menambahkan isi kedalam database, mendelete atau menghapus isi
database dan mengedit database. Beberapa sistem database yang menggunakan sql
diantaranya ada Ms. Access, MsSQL Server, Oracle, PostgresSQL, DB2, MySQL,
Interbase dan lain sebagainya.
Untuk menjadi seorang web developer yang handal, anda harus menguasai
perintah-perintah sql. Meskipun tidak mutlak, tapi saya sangat menganjurkan anda
untuk mnguasai perintah mysql untuk memudahkan dalam developer aplikasi
nantinya. Secara garis besar berbagai sistem database menggunakan bahasa yang
sama untuk memanipulasi isi dalam database. Sama-sama menggunakan bahasa sql.
MySQL itu merupakan salah satu sistem database yang menggunakan sql.
MySQl pun dapat digunakan secara langsung dengan mengetikkan perintah atau
syntaxnya melalui console.

2. Struktur dan Syntax MySQL

MySQL sama dengan bahasa pemrogaman lainnya yang juga sama-sama
memiliki tipe data.
Syntax MySQL
Pada bagian ini akan dijelaskan beberapa syntax MySQL yang sering
digunakan dalam membuat website, maupun aplikasi-aplikasi berbasis website, baik
dalam melakukan pembuatan database, penambahan isi database, untuk menghapus
isi database, ataupun untuk menghapus database itu sendiri.

Syntax yang kita gunakan adalah :

create
use
show
drop
alter
select
insert
Create
update
delete
Create ini digunakan untuk membuat database maupun table. Database yang memiliki
sistem RDBMS berisi informasi dalam bentuk table-table yang saling berkaitan. Jadi
langkah awal dalam membuat database adalah menggunakan fungsi create;
syntaxnya seperti ini :

Use
Ini digunakan untuk menggunakan database yang telah dibuat sebelumnya, yang
nantinya database ini akan di edit atau di modifikasi.
syntaxnya seperti ini :

Drop
Ini digunakan untuk menghapus database ataupun table yang ada. Syntaxnya adalah
seperti ini :

Alter
Alter berfungsi untuk memodifikasi table yang telah di buat, modifikasi nya seperti
menambahhkan field, mengganti size dari suatu field, menghapus field, dan
mengganti nama field.

Sebagai contoh untuk mengganti size dari suatu field adalah seperti ini :

alter table mahasiswa change nama nama_mahasiswa varchar(75)

ini berarti, ganti tipe dari field nama menjadi nama_mahasiswa dengan tipe varchar
yg memiliki ukuran 75
Select
Di gunakan untuk menampilkan isi dari suatu table, bisa dengan kriteria tertentu bisa
juga dapat menampilkan keseluruhan tanpa adanya kriteria. Penggunaan standarnya
seperti ini:

select * from nama_table

Penggunaan ketika ingin menampilkan berdasarkan kriteria adalah seperti ini :

select * from nama_table where field=kriteria

Untuk menampilkan nilai terbanyak :

select max(field) from tablenya

Untuk menjumlah isi record salah satu field dari suatu table :

select sum(field) from tablenya

untuk menghitung berapa jumlah record yang ada dari suatu table :

select count(*) from tablenya

Insert
insert ini digunakan untuk mengisi record suatu table, syntaxnya seperti ini

insert into nama_table(field1, field2, ...) values(nilai1, nilai2, ...)

contoh penggunaanya seperti ini :

insert into mahasiswa(nama, nilai) values('Loka Dwiartara','B');

ini berarti masukkan kedalam table mahasiswa, kedalam field id berisi Loka Dwiartara,
dan kedalam field nilai berisi B.
Update
digunakan untuk memperbarui isi dari suatu record, syntaxnya seperti ini :

update nama_table set field=nilaibaru where field=kriteria

contoh penggunaannya adalah seperti ini :

update mahasiswa set nilai='A' where nama='Loka Dwiartara';

ini berarti perbarui atau update table mahasiswa ganti nilainya menjadi A dari
mahasiswa bernama Loka Dwiartara.

Delete

digunakan untuk menghapus suatu record dari suatu table penggunaannya seperti ini:

delete from namatable where field=kriteria;

Oke, saya telah menjelaskan semua fungsi dari syntax mysql, kita akan coba praktikan
semuanya.
LATIHAN

Membuat Database, membuat table

Dalam membuat suatu aplikasi berbasis web, dibutuhkanlah database yang dapat
menyimpan data-data yang nantinya di oleh untuk dijadikan informasi yang
bermanfaat. Sebelumnya kita telah belajar bagaimana membuat database, di sini kita
akan praktikan semuanya, mulai dari membuat database.

Tapi sebelum membuat database kita pastikan terlebih dahulu apakah services
mysqlnya telah running melalui xampp control panel.

Setelah semuanya berjalan, kita akan coba masuk kedalam start | run | cmd. Kemudian
masuk ke direktori :

c:\xampp\mysql\bin

dengan cara :

cd c:\xampp\mysql\bin

Gambar 3.1 (Dos 1)

kemudian ketik :

mysql -u root
 Gambar 3.2 (Dos 2)

Sehingga nanti akan tampil :

Gambar 3.2 (Dos 2)

Oke berhasil, kita akan buat satu buah database bernama mahasiswa, kenapa
mahasiswa? karena nantinya database ini kita akan kembangkan menjadi suatu sistem
informasi yang cukup besar, dan akan saya jelaskan bagaimana membuat suatu
sistem informasi berikut membuat blog dengan data-data mahasiswa.
Oke kita akan buat database, cara nya seperti (cukup ketik yang di cetak tebal saja):

mysql> create database mahasiswa ;

Kemudian kita akan menggunakan database tersebut untuk di buat table nya. Caranya
seperti ini :

mysql> use mahasiswa;

lalu untuk melihat database tersebut sudah memiliki table apa saja, kita cukup gunakan
syntaks seperti ini :

mysql> show tables;

Gambar 3.3 (Dos 3)

kita buat table-nya contohnya : strukturnya seperti ini :
nama table : tbl_mhsiswa

field tipe size

id_mhs int 5
nama_mhs varchar 50
jenis_kelamin varchar 10
tgl_lahir date -
alamat varchar 200

Kita lihat disini id_mhs nya adalah int yakni hanya untuk bilangan bulat saja, dan
besarnya adalah 5, ini mengartikan bahwa maksimal jumlah mahasiswa adalah
sebanyak 5 digit, yakni 99.999 record mahasiswa id_mhs ini berfungsi sebagai
penomoran dari mahasiswa, urutan mulai dari 1 hingga sekian.

Selanjutnya ada nama_mhs, bertipe varchar, karena mahasiswa itu terdiri huruf,
memiliki ukuran 50 ini digunakan sebagai perwakilan nama mahasiswa, seperti
misalnya 'Loka Dwiartara' terdapat 14 digit huruf, dan asumsi saya adalah paling
banyak itu nama orang adalah berjumlah 50. Misalnya ... "Sukaryo Mangunkusumo
SungTolodo Makan Cokor Kebo" berjumlah 49 digit huruf, termasuk spasi
didalamnya.

Begitu juga dengan jenis_kelamin dan alamat, namun untuk tgl_lahir, kita
menggunakan tipe nya date. date sudah otomatis berisi 10 digit, bentuk defaultnya
adalah seperti ini 0000-00-00 sehingga jika menulis 24 Januari 1987 adalah seperti ini
1987-01-24.

Oke anda mengerti? kita lanjut, untuk merubah struktur di atas menjadi query mysql
bentuknya seperti ini :

create table tbl_mhsiswa (id_mhs int(5) primary key auto_increment, nama_mhs

varchar(50), jenis_kelamin varchar(10), tgl_lahir date, alamat varchar(200));
tampilannya ...

Gambar 3.3 (Dos 3)

Kita lihat di sini, id mhs int(5) primary key auto_increment ini berarti id_mhs ini akan di
jadikan sebagai index dari tbl_mhsiswa, dan auto_increment berfungsi membuat no
urut secara otomatis, sehingga hasil akhirnya adalah mulai dari 1, 2, 3, 4 dan
seterusnya.

Untuk melihat apakah table yang sudah di buat sudah ada kita jalankan perintah :

show tables;

mysql> show tables;

+---------------------+
| Tables_in_mahasiswa |
+---------------------+
| tbl_mhsiswa |
+---------------------+
1 row in set (0.01 sec)
mysql>
Kemudian bagaimana jika kita ingin melihat isi dari table yang sudah di buat :

select * from tbl_mhsiswa;

mysql> select * from tbl_mhsiswa;

Empty set (0.00 sec)
mysql>

setelah membuat table, kadang anda mungkin tidak sreg dengan nama tablenya, anda
bisa merubah namanya dengan syntax alter ; caranya seperti ini :

alter table tbl_mhsiswa rename tbl_mahasiswa;

mysql> alter table tbl_mhsiswa rename tbl_mahasiswa;

Query OK, 0 rows affected (0.01 sec)
mysql>

kemudian lakukan show tables;

show tables;

mysql> show tables;

+---------------------+
| Tables_in_mahasiswa |
+---------------------+
| tbl_mahasiswa |
+---------------------+
1 row in set (0.00 sec)

mysql>

dari tbl_mhsiswa kemudian di rubah menjadi tbl_mahasiswa, kita coba kembalikan

seperti nama table yang awal :

alter table tbl_mahasiswa rename tbl_mhsiswa;

mysql> alter table tbl_mahasiswa rename tbl_mhsiswa;

Query OK, 0 rows affected (0.03 sec)
mysql>
kemudian show tables; kembali :

show tables;

mysql> show tables;

+---------------------+
| Tables_in_mahasiswa |
+---------------------+
| tbl_mhsiswa |
+---------------------+
1 row in set (0.00 sec)

mysql>

misalkan kita ingin menambahkan field yang tadinya cuma id_mhs, nama_mhs,
jenis_kelamin, tgl_lahir, alamat, sekarang kita akan menambahkan dengan satu field
baru misalnya status, caranya adalah:

alter table tbl_mhsiswa add column status varchar(30);

mysql> alter table tbl_mhsiswa add column status varchar(30);

Query OK, 0 rows affected (0.13 sec)
Records: 0 Duplicates: 0 Warnings: 0

mysql>

ini berarti tambahkan field status dengan tipe varchar dan memiliki ukuran 30 kedalam
tbl_mhsiswa. Ada contoh lain misalkan kita ingin merubah nama dan ukuran dari
suatu field, ingin di perbesar ukurannya atau ingin di perkecil kita cukup menggunakan
perintah seperti ini :

alter table tbl_mhsiswa add change id_mhs id_mahasiswa int(10);

mysql> alter table tbl_mhsiswa change id_mhs id_mahasiswa int(10);

Query OK, 0 rows affected (0.06 sec)
Records: 0 Duplicates: 0 Warnings: 0
ini berarti ganti field id_mhs menjadi id_mahasiswa bertipe integer dengan ukuran
10 digit.

Oke kita kembalikan ke awal :

alter table tbl_mhsiswa change id_mahasiswa id_mhs int(5) not null auto_increment;

mysql> alter table tbl_mhsiswa change id_mahasiswa id_mhs int(5) not null auto_increment;
Query OK, 0 rows affected (0.08 sec)
Records: 0 Duplicates: 0 Warnings: 0

Bagaimana caranya jika kita hanya ingin merubah ukurannya saja ? Cara nya seperti
ini:

alter table tbl_mhsiswa modify id_mhs int(20) not null auto_increment;

mysql> alter table tbl_mhsiswa modify id_mhs int(20) not null auto_increment;
Query OK, 0 rows affected (0.06 sec)
Records: 0 Duplicates: 0 Warnings: 0

memodifikasi id_mhs menjadi tipe integer dengan sizenya 20.

Dan untuk mengapus field yang ada caranya seperti ini, misalnya kita ingin mendelete
field status :

mysql> alter table tbl_mhsiswa drop status;

Query OK, 0 rows affected (0.06 sec) Records:
0 Duplicates: 0 Warnings: 0

Anda bisa melihat struktur yang ada dengan :

mysql> desc tbl_mhsiswa;

+---------------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+---------------+--------------+------+-----+---------+----------------+
| id_mhs | int(20) | NO | PRI | NULL | auto_increment |
| nama_mhs | varchar(50) | YES | | NULL | |
| jenis_kelamin | varchar(10) | YES | | NULL | |
| tgl_lahir | date | YES | | NULL | |
 | alamat | varchar(200) | YES | | NULL | |
+---------------+--------------+------+-----+---------+----------------+
5 rows in set (0.11 sec)

mysql>

kita coba isi terlebih dahulu dengan menggunakan perintah insert :

mysql> insert into tbl_mhsiswa(nama_mhs, jenis_kelamin, tgl_lahir, alamat) values('Loka Dwiartara', 'pria', '1987-01-
24', 'Jawa Barat');
Query OK, 1 row affected (0.05 sec)
mysql>

kemudian kita tampilkan lagi isi dari tbl_mhsiswa :

mysql> select * from tbl_mhsiswa;
+--------+----------------+---------------+------------+------------+
| id_mhs | nama_mhs | jenis_kelamin | tgl_lahir | alamat |
+--------+----------------+---------------+------------+------------+
| 1 | Loka Dwiartara | pria | 1987-01-24 | Jawa Barat |
+--------+----------------+---------------+------------+------------+
1 row in set (0.00 sec)

mysql>

kita coba isi kembali dengan record yang lain :

mysql> insert into tbl_mhsiswa(nama_mhs, jenis_kelamin, tgl_lahir, alamat) values('Anggie Jatrasmara', 'pria', '1985-
10-29', 'Jawa Timur');
Query OK, 1 row affected (0.00 sec)

mysql>

tampilkan kembali isinya :

mysql> select * from tbl_mhsiswa;
+--------+-------------------+---------------+------------+------------+
| id_mhs | nama_mhs | jenis_kelamin | tgl_lahir | alamat |
+--------+-------------------+---------------+------------+------------+
| 1 | Loka Dwiartara | pria | 1987-01-24 | Jawa Barat |
| 2 | Anggie Jatrasmara | pria | 1985-10-29 | Jawa Timur |
+--------+-------------------+---------------+------------+------------+
bagaimana jika kita ingin menampilkan record berdasarkan kriteria, misalkan ingin
melihat mahasiswa yang alamatnya di jawa barat saja :

select * from tbl_mhsiswa where alamat='Jawa Barat';

mysql> select * from tbl_mhsiswa where alamat='Jawa Barat';

+--------+----------------+---------------+------------+------------+
| id_mhs | nama_mhs | jenis_kelamin | tgl_lahir | alamat |
+--------+----------------+---------------+------------+------------+
| 1 | Loka Dwiartara | pria | 1987-01-24 | Jawa Barat |
+--------+----------------+---------------+------------+------------+
1 row in set (0.08 sec)

mudah ya?? apalagi jika anda sering berlatih untuk mengulang perintah-perintah yang
tadi. Kita coba isi kembali sebuah record kedalam tbl_mhsiswa :

insert into tbl_mhsiswa(nama_mhs, jenis_kelamin, tgl_lahir, alamat) values('Deny

Sarwono', 'Pria', '1986-12-09','Jawa Barat');

mysql> insert into tbl_mhsiswa(nama_mhs, jenis_kelamin, tgl_lahir, alamat) values('Deny Sarwono', 'Pria', '1986-12-
09','Jawa Barat');
Query OK, 1 row affected (0.00 sec)

tampilkan kembali :

select * from tbl_mhsiswa;

mysql> select * from tbl_mhsiswa;

+--------+-------------------+---------------+------------+------------+
| id_mhs | nama_mhs | jenis_kelamin | tgl_lahir | alamat |
+--------+-------------------+---------------+------------+------------+
| 1 | Loka Dwiartara | pria | 1987-01-24 | Jawa Barat |
| 2 | Anggie Jatrasmara | pria | 1985-10-29 | Jawa Timur |
| 3 | Deny Sarwono | Pria | 1986-12-09 | Jawa Barat |
+--------+-------------------+---------------+------------+------------+

Kita akan coba mendelete mahasiswa yang tanggal lahirnya '1986-12-09' :

delete from tbl_mhsiswa where tgl_lahir = '1986-12-09';

mysql> delete from tbl_mhsiswa where tgl_lahir = '1986-12-09';

Query OK, 1 row affected (0.06 sec)

mysql>
kemudian untuk membuktikan sudah atau belum didelete cukup lakukan perintah
yang tadi, untuk menampilkan isi table:

select * from tbl_mhsiswa;

mysql> select * from tbl_mhsiswa;

+--------+-------------------+---------------+------------+------------+
| id_mhs | nama_mhs | jenis_kelamin | tgl_lahir | alamat |
+--------+-------------------+---------------+------------+------------+
| 1 | Loka Dwiartara | pria | 1987-01-24 | Jawa Barat |
| 2 | Anggie Jatrasmara | pria | 1985-10-29 | Jawa Timur |
+--------+-------------------+---------------+------------+------------+
2 rows in set (0.00 sec)

kita juga bisa melakukan modifikasi record yang ada dengan perintah update, sebagai
contohnya, kita akan coba mengganti Nama Mahasiswa dari Anggie Jatrasmara
menjadi Jatrasmara :

update tbl_mhsiswa set nama_mhs='Jatrasmara' where alamat='Jawa Timur';

mysql> update tbl_mhsiswa set nama_mhs='Jatrasmara' where alamat='Jawa Timur';

Query OK, 1 row affected (0.00 sec)
Rows matched: 1 Changed: 1 Warnings: 0

kita buktikan :

select * from tbl_mhsiswa;

mysql> select * from tbl_mhsiswa;

+--------+----------------+---------------+------------+------------+
| id_mhs | nama_mhs | jenis_kelamin | tgl_lahir | alamat |
+--------+----------------+---------------+------------+------------+
| 1 | Loka Dwiartara | pria | 1987-01-24 | Jawa Barat |
| 2 | Jatrasmara | pria | 1985-10-29 | Jawa Timur |
+--------+----------------+---------------+------------+------------+
2 rows in set (0.00 sec)
MODUL 6 dan 7
HTML, JAVASCRIPT DAN CSS

A. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
§ Mengenal dan memahami penggunaan Bahasa pemrograman HTML,
Javascript dan CSS untuk merancang website
§ Membuat tampilan website sederhana menggunakan HTML, Javascript dan
CSS

B. Dasar Teori
1. Hypertext Markup Languge (HTML)
Hypertext Markup Language (HTML) adalah bahasa pemrograman yang
digunakan untuk menampilkan sebuah website. HTML termasuk dalam bahasa
pemrograman gratis, artinya tidak dimiliki oleh siapapun, pengembangannya
dilakukan oleh banyak orang di banyak negara dan bisa dikatakan sebagai sebuah
bahasa yang dikembangkan bersama-sama secara global.
Dokumen HTML adalah dokumen teks yang dapat diedit oleh editorteks
apapun. Dan disimpan dengan file extension .html. Dokumen HTML punya beberapa
elemen yang dikelilingi oleh tag-teks yang dimulai dengan symbol “ < ” dan berakhir
dengan sebuah symbol “ > ”.

a. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag
akhir. Tag berakhir termasuk simbol / diikuti oleh tipe elemen, misalnya </HEAD>.
Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. Sebuah dokumen
HTML standar terlihat seperti ini :

Keterangan :
1) Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan
</HTML>.
 2) Tag <HEAD> ... </HEAD> merupakan tag kepala sebelum badan. Tag
kepala ini akan terlebih dulu dieksekusi sebelum tag badan. Di dalam
tag ini berisi tag <META> dan <TITLE>. Tag <META> merupakan
informasi atau header suatu dokumen HTML. Atribut yang dimiliki oleh
tag ini antara lain:
• HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen
HTML secara otomatis dalam jangka waktu tertentu.
• CONTENT, atribut ini berisi informasi tentang isi document HTML
yang akan dipanggil.
• NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag
<META> dalam suatu document HTML boleh ada maupun tidak.

3) Tag <TITLE> ... </TITLE> adalah tag judul. Sebaiknya setiap halaman
web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> ...
</TITLE>. Judul ini akan muncul dalam titlebar dari browser.
4) Tag <BODY> ... </BODY> adalah tag berisi content dari suatu
halaman web.

b. Penggunaan Script HTML

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini.
Simpan dengan nama Contoh01.html

Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\buat folder baru untuk
menyimpan file di dalam folder htdocs. Simpan file dengan nama contoh01.html.
Pembuatan nama file pada saat penyimpanan harus diakhiri dengan extention
“.html”.

c. Penggunaan TAG HTML

Kode-kode dalam HTML biasanya disebut TAG. Tag dalam HTML dituliskan diapit
oleh tanda lebih kecil ( < ), tanda lebih besar ( > ), dan garis miring ( / ). Tag dituliskan
berpasangan, jika tidak menggunakan tanda garis miring( / ) setelah penulisan
namanya, disebut sebagai tag pembuka. Namun, jika menggunakan tanda garis
miring ( / ) sebelum nama tag, maka disebut sebagai tag penutup. Tag bersifat
incasesensitiv yang dimana penulisan dengan huruf besar, huruf kecil dan campuran
tidak masalah.
Namun, untuk standarisasinya tag di tuliskan dalam huruf kecil.
 Beberapa jenis tag yang dapat di pergunakan dalam penulisan skrip html,
antara lain sebagai berikut :

Tabel 1. Jenis-jenis Tag HTML

Contoh script penggunaan Tag HTML

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan
dengan nama Contoh02.html
Contoh tampilan contoh02 di browser

Gambar 1. Hasil tampilan contoh2

Latihan

1. Latihan Tag 1

Contoh Tampilan

Gambar 2. Hasil tampilan Latihan tag 1

2. Latihan Tag 2

Gambar 3. Hasil tampilan Latihan tag 2

2. JAVASCRIPT
Javascript merupakan suatu bahasa script yang banyak digunakan dalam dunia
teknologi terutama internet, bahasa ini dapat bekerja di sebagian besar web browser
seperti Mozilla Firefox, Google Chrome dan web browser lainnya. bahasa javascript
dapat dideskripsikan dalam bentuk fungsi (Function) yang ditaruh di bagian dalam tag
<head> yang dibuka dengan tag <script language =” javascript”> Isi dari script
javascript sama dengan konsep yang sudah dipelajari dalam materi PHP, yakni ada
deklarasi Variable, penggunaan operator, percabangan, looping, dan fungsi. Di dalam
java script juga sebuah komponen Alert yang digunakan untuk menampilkan kotak
pesan pada browser ketika fungsinya di jalankan. Untuk berlatih deklarasi script pada
javascript, salin contoh-contoh berikut ini pada editor anda. Dan jalankan pada
browser, amati tampilannya.

a. Pembuatan Coding Javascript Sederhana

Berikut merupakan contoh-contoh sederhana penulisan script penggunaan
perintah javascript.
1) Contoh 1

2) Contoh 2
 3) Contoh 3

3. Cascading Style Sheet (CSS)

CSS = Cascading Style Sheets. CSS merupakan Bahasa yang digunakan untuk
mengatur tampilan suatu dokumen yang ditulis dalam Bahasa markup / markup
language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai
: CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu
halaman HTML.
Beberapa hal yang dapat dilakukan dengan CSS adalah 1) Perancangan desain
text dapat dilakukan dengan mendefinisikan fonts (huruf), colors (warna), margins
(ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-
elemen seperti colors (warna), fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut
juga “styles”. 2) Cascading Style Sheets juga bisa berarti meletakkan styles yang
berbeda pada layers (lapisan) yang berbeda.

a. Jenis-jenis CSS
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
External Style Sheet
Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML.
Kemudian tambahkan kode pemanggilan file CSS dalam dokumen HTML.
Internal CSS
Aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag
<style>.

Inline Style Sheet

Aturan CSS ditulis langsung pada tag HTML yang akan diatur tampilannya
menggunakan atribut style.

b. Penulisan CSS

Gambar 4. Struktur penulisan CSS

Penjelasan:
Aturan CSS terdiri 2 bagian:
1) Selector
Biasanya berupa tag HTML, id, class
• id menggunakan tanda # didepan nama selector
• class menggunakan tanda titik didepan nama selector
contoh :
h1 { color : blue ; } ➔ tag html h1
#teks { color :green; } ➔ id
.warna { color : red; } ➔ class
2) Declaration
Berisi aturan-aturan css yang terdiri dari properti dan nilainya yang dipisahkan
oleh tanda titik dua. Setiap aturan css harus diakhiri dengan tanda titik koma.

c. Padding, Margin, Border

Dalam CSS dikenal istilah ‘Box Model’. Perhatikan gambar berikut ini:

Gambar 5. Box Model pada CSS

Keterangan gambar :
Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian
dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

CSS menggunakan konsep ini dalam mengatur tag-tag HTML. Pada gambar,
bayangkan area ‘Content’ misalnya adalah sebuah paragraph. Obyek paragraph ini
akan dianggap CSS memiliki area padding, border, dan margin disekitarnya.
Keberadaan area-area ini berguna untuk pengaturan tata letak. Misalnya ingin diatur
agar 2 buah gambar yang terletak berdampingan tidak terlalu rapat, maka kita dapat
memperbesar lebar dari area margin agar jarak antara gambar lebih lebar.
Latihan Membuat Tampilan Web Responsive

Gambar 6. Rancangan tampilan website

1. Web responsive berarti web yang tampilannya mengikuti ukuran layar gadget
yang di gunakan untuk akses web tersebut
a) Buat folder di xampp/htdocs dengan nama : perpus
b) Didalam folder perpus, siapkan 2 buah folder :
• images ➔ untuk simpan gambar
• css ➔ untuk simpan file css
c) Buka editor, salin script css berikut : simpan di folder css dengan nama
style.css
2. Tampilan index yang akan akan kita buat seperti gambar dibawah ini

Gambar 7. Hasil tampilan web responsive

a) Buka file baru di aplikasi anda

b) Untuk membuat tampilan seperti diatas berikut adalah kodingan yang perlu
kita ketikan
c) Setelah selesai mengetikan kodingan diatas, simpanlah file tersebut di
dalam folder perpus dengan nama index.html
d) Lalu panggil file index.html diatas di browser anda
MODUL 8
CMS WORDPRESS

A. Tujuan
Setelah mempelajari bab ini diharapkan mahasiswa akan mampu :
§ Mengenal dan memahami penggunaan CMS Wordpress untuk membuat
website sederhana
§ Membuat dan mengelola website sederhana menggunakan CMS Wordpress

B. Dasar Teori
1. CMS Wordpress
CMS adalah singkatan dari content management system, yaitu software yang
memungkinkan pengguna untuk membuat dan mengelola website dengan mudah.
Umumnya, sebuah CMS akan memberikan sebuah antarmuka (user interface) di
mana para pengguna bisa mengatur tampilan, fitur dan isi website dengan praktis.
Antarmuka ini berisi berbagai menu yang diperlukan untuk mengutak-atik website
sesuai dengan yang pengguna inginkan. Singkatnya, pengguna tidak perlu memiliki
keahlian coding untuk mengelola website dengan CMS.
Dengan banyaknya pengguna WordPress, tidak heran jika pengguna bisa
menemukan tutorial CMS tersebut dengan sangat mudah. Oleh karena itu, pengguna
akan dengan cepat belajar membuat dan mengelola website WordPress.
Namun, kemudahan mendapatkan bantuan bukan satu-satunya keunggulan
WordPress. Content management system ini terkenal dengan ribuan tema dan plugin
gratisnya. Berkat itu, WordPress bisa digunakan untuk berbagai jenis website. Di
samping itu, editor konten WordPress mengusung prinsip what you see is what you
get (WYSIWYG). Artinya, pengguna bisa melihat langsung tampilan halaman website
sebelum mempublikasikannya.

C. Install Wordpress di Localhost

1. Aktifkan service apache dan mysql melalui fitur xampp control panel seperti
gambar berikut:

Gambar 1. XAMPP Control Panel

2. Download file WordPress melalui link berikut: download Wordpress

3. Buka folder XAMPP di komputer Anda. Kemudian buka folder htdocs. Copy-
kan file WordPress ke dalam folder ini. Lebih mudahnya, silahkan buka
 Windows Explorer, lalu ketikkan C:\xampp\htdocs pada bagian folder address
seperti terlihat pada gambar di bawah ini.

Gambar 2. Folder XAMPP pada Windows Explorer

4. Apabila file masih dalam bentuk compress, silahkan ekstrak terlebih dahulu.
Default folder hasil ekstrak bernama ‘wordpress’. Anda bisa merubah nama
WordPress menggunakan nama lain dan pada panduan ini kami contohkan
dengan menggantinya dengan nama ‘blogku’. Bila diakses, hasilnya akan
terlihat seperti gambar di bawah ini:

Gambar 3. Hasil ekstraksi file wordpress

5. Membuat database di PhpMyAdmin

 Gambar 4. Membuat database di PhpMyAdmin

6. Sekarang bukalah browser Anda untuk membuka situs WordPress offline ini,
nantinya kita bisa mengaksesnya dengan alamat http://localhost/namafolder.
Jika milik Anda tetap memakai folder default, maka alamatnya menjadi
http://localhost/wordpress. Pada contoh ini Kami merubahnya menjadi blogku.
Selantjutnya silahkan Ketikkan di address bar alamat website dilocalhost (
http://localhost/blogku ). Lalu pilih bahasa dan klik ‘Continue’.

7. Klik Let’s Go

Gambar 5. Halaman welcome instalasi wordpress

8. Selanjutnya isikan nama database, user name, dan password yang sudah
Anda buat sebelumnya.
 Gambar 6. Koneksi database dan wordpress

9. Klik Run the Install.

Gambar 6. Koneksi database dan wordpress berhasil.

10. Selanjutnya isikan data-data yang dibutuhkan untuk admin dan nama website.
Setelah itu klik install WordPress
 Gambar 6. Formulir data website wordpress

11. Selamat! WordPress offline Anda sudah jadi. Silahkan Login.

Gambar 7. Instalasi berhasil

12. Masukkan username dan password yang telah Anda buat pada langkah
sebelumnya untuk login ke Dashboard.
 Gambar 8. Login ke wordpress

13. Setelah berhasil install WordPress di localhost, Anda akan mengelola tampilan
dan konten website Anda. Langkah pertama, silahkan akses ke link
http://localhost/blogku/wp-admin dan lakukan konfigurasi website Anda.

Gambar 9. Halaman dashboard wordpress