Program Pembelajaran Web

COVER
PRODUK
PEKERTI-AA
Program Peningkatan Keterampilan Dasar
Teknik Instruksional dan Applied Approach
(PEKERTI - AA)
Analisis Instruksional dan Peta Konsep; Profil Lulusan, SK, KD dan

LO; Rekonstruksi Mata Kuliah; RPS; SAP; Kontrak Perkuliahan;
Bahan Ajar; Media Pembelajaran; Rancangan Tugas dan Praktikum;
Kisi-Kisi Tes, Tes Hasil Belajar, dan Kunci Jawaban; Platform LMS;
Video Pembelajaran
Nama : Chairul Imam , S. Kom ., M. Kom

NIDN : 0131039302
Instansi : Universitas Battuta
Mata Kuliah : Pemograman Web
Penyelengara
UNIT LAYANAN PEKERTI-AA
UNIVERSITAS NEGERI MEDAN
2021
LEMBAR PENGESAHAN
Tugas Akhir Pelatihan Program Peningkatan Keterampilan Dasar Teknik
Instruksional– Applied Approach
(PEKERTI-AA)
Oleh
Nama : Chairul Imam, S. Kom., M. Kom

NIDN : 0131039302
Jurusan/Prodi : Teknologi Informasi
Medan, 13 September 2021

Pembimbing, Peserta PEKERTI – AA
Prof. Dr. Efendi Napitupulu, M.Pd Chairul Imam, S. Kom., M. Kom

NIP. 196311271987031001 NIDN. 0131039302
Mengetahui,
Rektor Koordinator
Universitas Battuta PEKERTI-AA UNIMED
Dr. Sugito, M.Si. Prof. Dr. Efendi Napitupulu, M.Pd

NIDN.0102026902 NIP. 196311271987031001
Produk Pekerti – AA i
KATA PENGANTAR
Puji dan syukur kepada Allah Subhanahu Wata’ ala atas tersusunnya tugas akhir
pada “Pelatihan Pengembangan Keterampilan Dasar Teknik Instruksional dan Applied
Approach (PEKERTI - AA) yang diadakan oleh Universitas Battuta bekerjasama dengan
Universitas Negeri Medan berupa produk PEKERTI – AA. Produk PEKERTI – AA ini
merupakan tugas terstruktur yang memuat analisis instruksional dan peta konsep, profil
lulusan, sk, kd, lo, rekonstruksi mata kuliah, rps, sap, kontrak perkuliahan, bahan ajar,
media pembelajaran, rancangan tugas dan praktikum, kisi-kisi tes, kunci jawaban, tes hasil
belajar, platform, video pembelajaran
Penulis mengucapkan terima kasih kepada Universitas Battuta, Universitas Negeri
Medan yang telah memberi kesempatan kepada penulis untuk mengikuti pelatihan
PEKERTI - AA. Pelatihan ini sangat bermanfaat serta dapat meningkatkan kualitas dan
efektifitas serta profesionalitas dalam proses belajar-mengajar.Penulis juga menyampaikan
terima kasih kepada Rektor Universitas Negeri Medan serta koordinator PEKERTI-AA
dari Lembaga Pengembangan Pendidikan dan Aktivitas Instruksional Universitas Negeri
Medan sekaligus selaku pembimbing yaitu Prof. Dr. Efendi Napitupulu, M.Pd yang telah
membimbing penulis sehingga produk PEKERTI-AA ini bisa diselesaikan. Penulis
menyadari bahwa masih terdapat kekurangan dalam penyusunan tugas akhir ini, oleh
karenanyakritik dan saran yang membangun sangat penulis perlukan.
Medan, 13 September 2021

Penulis,
Chairul Imam, S. Kom., M. Kom
Produk Pekerti – AA ii
DAFTAR ISI
COVER.................................................................................................................................1
LEMBAR PENGESAHAN..................................................................................................i
KATA PENGANTAR.........................................................................................................ii
DAFTAR ISI.......................................................................................................................iii
ANALISIS INSTRUKSIONAL ,PETA KOMPETENSI, PETA KONSEP...................1
PROFIL LULUSAN, SK, KD, LO.....................................................................................6
REKONSTRUKSI MATA KULIAH................................................................................9
RENCANA PERKULIAHAN SEMESTER (RPS) SILABUS......................................11
SATUAN ACARA PERKULIAHAN (SAP)...................................................................18
KONTRAK PERKULIAHAN.........................................................................................36
BAHAN AJAR...................................................................................................................42
MEDIA PEMBELAJARAN.............................................................................................57
RANCANGAN TUGAS DAN PRAKTIKUM..............................................................138
KISI-KISI TES, TES SOAL ESSAY DAN KUNCI JAWABAN................................144
PLATFORM....................................................................................................................161
VIDEO PEMBELAJARAN............................................................................................162
Produk Pekerti – AA iii

ANALISIS INSTRUKSIONAL, PETA KOMPETENSI, PETA KONSEP
I. Profil Lulusan dan Standar Kompetensi Pemrograman Web

Tahun Akademik 2020/2021
A. Struktur Kompetensi
Profil lulusan: Memiliki kemampuan bersaing sebagai tenaga profesional teknologi informasi di
dunia kerja. Mampu bersikap profesional dalam menjalankan profesinya di bidang teknologi
informasi. Tangguh dan tanggap dalam menghadapi permasalahan di bidang teknologi informasi,
yaitu:
1. Mampu dibidang Developer sistem integratif dan midleware .
2. Mampu dibidang Administrator jaringan, administrator system, serta Pengelola keamanan
sistem.
3. Mampu dibidang Database administrator, database programmer, informasi bisnis analis, dan
datawarehouse desainer.
4. Mampu dibidang Konsultan TI, Penganalisis Sistem Informasi perusahaan, dan Manajer
Proyek TI.
Dengan adanya profil lulusan diatas, maka standar kompetensi yang diharapkan dari lulusan
Sarjana Teknologi Informasi (dinyatakan dalam capaian pembelajaran lulusan) sebagai berikut :
Dimensi Rumusan Capaian Pembelajaran
Kode
Pengetahuan
Menguasai konsep teoritis matematika terapan, algoritma dan
P1 konsep dasar rekayasa perangkat lunak secara umum untuk dapat
mengembangkan perangkat lunak;
Menguasai konsep teoritis tentang metode pengujian unit perangkat
P2 lunak aplikasi meliputi pendekatan black–box dan white-box
functional testing;
Menguasai pengetahuan prosedural dan praktikal tentang analisis

P3 kebutuhan data dan desain basis data dalam pengembangan perangkat
lunak;
Menguasai pengetahuan tentang standar pengkodean dalam menjaga

P4 kualitas pengembangan perangkat lunak dan teknik penyusunan
dokumentasi perangkat lunak;
Menguasai prinsip dan isu terkini dalam masalah etika, sosial

P5
organisasi, legal dan ekonomi terkait perangkat lunak;
Menguasai pengetahuan tentang teknik komunikasi interpersonal baik
P6 lisan maupun tulisan;
Menguasai pengetahuan tentang perkembangan teknologi dan kakas
P7 terkini, dan tren ke masa depan untuk pengembangan perangkat lunak;
1
Kode
Menguasai prinsip dan cara mengumpulkan, menyimpan, dan
mengelola informasi dengan mempertimbangkan permasalahan
P8
keamanan data, integritas data dan inovasi teknologi informasi;
Keterampilan Mampu memanfaatkan matematika terapan, algoritma, dan prinsip
Khusus rekayasa perangkat lunak sesuai prosedur dan praktik teknikal untuk
KK1 menyelesaikan masalah rekayasa yang terdefinisi dengan jelas dalam
pengembangan perangkat lunak;
Mampu berpikir komputasi untuk mengidentifikasi dan
menyelesaikan persoalan dan solusinya ke dalam representasi data
KK2
dan algoritma didasarkan pada pemikiran logis, kritis, dan inovatif;
Mampu merancang, mengimplementasikan, dan mengevaluasi model
proses dan model data secara konseptual, logikal dan fisikal serta
KK3 mampu melakukan instalasi konfigurasi, pemutakhiran, adaptasi,
monitoring dan mengelola basis data;
Mampu melakukan transformasi algoritma menjadi source program

dengan bahasa pemrograman terkini yang sesuai dengan platform
KK4
teknologi yang dipersyaratkan pada Software Requirements
Specifications (SRS);
Mampu melakukan pengujian pada source code perangkat lunak
KK5 menggunakan pendekatan black–box dan white-box functional
testing dan bertanggung jawab atas hasilnya secara mandiri;
Mampu menerapkan teknologi dan kakas terkini dalam memecahkan
KK6 masalah- masalah (problem solving) terkait pengembangan
perangkat lunak.
Sikap Bertakwa kepada Tuhan Yang Maha Esa dan mampu menunjukkan
S1 sikap religius;
Menjunjung tinggi nilai kemanusiaan dalam menjalankan tugas
S2 berdasarkan agama, moral, dan etika;
Berkontribusi dalam peningkatan mutu kehidupan bermasyarakat,
S3 berbangsa, bernegara, dan kemajuan peradaban berdasarkan
Pancasila;
Berperan sebagai warga negara yang bangga dan cinta tanah air,
S4 memiliki nasionalisme serta rasa tanggungjawab pada negara dan
bangsa
Menghargai keanekaragaman budaya, pandangan, agama, dan
S5 kepercayaan, serta pendapat atau temuan orisinal orang lain;
Bekerja sama dan memiliki kepekaan sosial serta kepedulian
S6
terhadap masyarakat dan lingkungan;
S7 Taat hukum dan disiplin dalam kehidupan bermasyarakat dan
bernegara;
2
Kode
S8 Menginternalisasi nilai, norma, dan etika akademik;
Menunjukkan sikap bertanggungjawab atas pekerjaan di bidang
S9
keahliannya secara mandiri;
Menginternalisasi semangat kemandirian, kejuangan, dan
S10
kewirausahaan.
Bersikap inklusif, bertindak objektif, serta tidak diskriminatif karena
S11 pertimbangan jenis kelamin, agama, ras, kondisi fisik, latar belakang
keluarga, dan status sosial ekonomi.
Berkomunikasi secara efektif, empatik, dan santun dengan sesama
S12
pendidik, tenaga kependidikan, orang tua, dan masyarakat.
Beradaptasi di tempat bertugas di seluruh wilayah Republik
S13
Indonesia yang memiliki keragaman sosial budaya.
Keterampilan Mampu menyelesaikan pekerjaan berlingkup luas dan menganalisis
Umum KU1 data dengan beragam metode yang sesuai, baik yang belum maupun
yang sudah baku;
Mampu menunjukkan kinerja bermutu dan terukur;
KU2
Mampu memecahkan masalah pekerjaan dengan sifat dan konteks
yang sesuai dengan bidang keahlian terapannya didasarkan pada
KU3 pemikiran logis, inovatif, dan bertanggung jawab atas hasilnya
secara mandiri;
Mampu menyusun laporan hasil dan proses kerja secara akurat dan
KU4 sahih serta mengomunikasikannya secara efektif kepada pihak lain
yang membutuhkan;
Mampu bekerja sama, berkomunikasi, dan berinovatif dalam
KU5 pekerjaannya;
Mampu bertanggungjawab atas pencapaian hasil kerja kelompok
dan melakukan supervisi dan evaluasi terhadap penyelesaian
KU6 pekerjaan yang ditugaskan kepada pekerja yang berada di bawah
tanggungjawabnya;
Mampu melakukan proses evaluasi diri terhadap kelompok kerja
KU7 yang berada dibawah tanggung jawabnya, dan mengelola
pengembangan kompetensi kerja secara mandiri;
Mampu mendokumentasikan, menyimpan, mengamankan, dan
KU8 menemukan kembali data untuk menjamin kesahihan dan mencegah
plagiasi.
B.
3
B. Peta Kompetensi
Membuat web dinamis sampai operasi CMS

Wordpress pada database
Melakukan Instalasi Melakukan operasi Melakukan operasi Melakukan operasi

CMS Wordpress Editing Theme pada Editing Plugin CMS Update data posts dan
CMS Wordpress Wordpress pages CMS Worpress
Menggunakan mysql untuk Mengkoneksikan CMS

pembuatan database Wordpress & mysql
Menggunakan syntax Menggunakan struktur Menggunakan struktur Menggunakan Menggunakan form

PHP percabangan perulangan array
Menggunakan tag-tag dasar HTML Menggunakan CSS
Mahasiswa mampu
memahami konsep web
secara umum
4
C. Peta Konsep
Mempresentasikan
Peta Konsep
Pemograman Web
Konsep Word Wide Teknologi Aplikasi Jenis-Jenis Web

Konsep Web Server Instalasi Web Server Jenis Editor Teks
Web Web Browser
Web Statis Cara Kerja Web Jenis-Jenis Web

Client side Server Side Web Dinamis
Server SerVer
5
PROFIL LULUSAN, SK, KD, LO
A. Profil Lulusan
No Profil Utama Lulusan Deskripsi
1 Developer Sistem Peran yang memiliki kemampuan yang dapat mengintegrasikan
Integratif Dan sistem, integrasi antara unsur-unsur teknologi (hardware, jaringan,
Midleware Programmer software dan data) serta orang-orang dan proses integrasi antara
beberapa sistem yang terpisah, mengintegrasikan komponen ke
dalam satu sistem dan akhirnya melakukan validasi sistem.
2 Administrator jaringan, Peran yang memiliki kemampuan dapat memilih, merancang,
administrator system, mendeploy, mengintegrasikan dan mengelola (administrator)
serta Pengelola jaringan dan infrastruktur komunikasi di dalam sebuah organisasi.
keamanan system Pengetahuan ini meliputi komunikasi data, telekomunikasi,
inter/intranetworking dan keamanan infrastruktur. Yang dibahas juga
meliputi data multimedia, media penyimpanan dan distribusi
informasi, serta World Wide Web.
3 Database administrator, Peran yang memiliki kemampuan untuk membuat kebijakan-

database programmer, kebijakan, prosedur-prosedur dan cara paling efektif (best practices)
informasi bisnis analis, dalam mengelolah informasi dan data untuk memastikan bahwa data
dan datawarehouse dapat dipahami, dipercaya, visible, dapat diakses dan dioptimasi
desainer. untuk penggunaanya serta dapat dioperasikan.
4 Konsultan TI, Peran yang memiliki kemampuan untuk dapat melakukan analisis
Penganalisis Sistem kebutuhan dan persyaratan, perancangan, implementasi dan evaluasi
Informasi perusahaan, aplikasi (atau sistem informasi, sistem berbasis komputer atau solusi
dan Manajer Proyek TI. teknologi) untuk mendukung pencapaian tujuan organisasi.
B. Standar Kompetensi
Terdapat 5 standar kompetensi pada mata kuliah Pemograman Web, diantaranya;
1) Mahasiswa mampu memahami konsep dan dapat implementasikan kerja web
2) Mahasiswa mampu memahami fungsi aplikasi-aplikasi web.
3) Mahasiswa mengetahui bahasa-bahasa dalam pemprograman web.
4) Mahasiswa mampu merancang dan mendesain web.
5) Mahasiswa mampu memahami konsep dan dapat implementasikan domain/hosting
C. Kompetensi Dasar
Terdapat 8 jenis kompetensi dasar dalam mata kuliah Pemograman Web, diantaranya;
1) Mahasiswa dapat menguasai prinsip-prinsip dan terminologi web sehingga dapat
menjelaskannya dengan cara yang mudah dimengerti.
2) Mahasiswa dapat menguasai pengetahuan teknologi yang mendasari internet dan web
sehingga dapat mengidentifikasi teknologi-teknologi dasar yang diperlukan dalam suatu
situs atau aplikasi web.
3) Mahasiswa dapat menguasai bahasa HTML sehingga dapat menggunakannya untuk
membuat halaman web.
4) Mahasiswa dapat menguasai CSS sehingga dapat menggunakannya untuk mengatur style
halaman web.
.
6
5) Mahasiswa dapat menguasai membangun halaman web dengan PHP.
6) Mahasiswa dapat mengunakan aplikasi Xampp data di dalam database dan dapat proses
phpmyadmin.
7) Mahasiswa dapat Implementasi CMS Wordpress dan menerapkan CMS Wordpress.
8) Mahasiswa dapat mengelola Cpanel Hosting.
D. Capaian Pembelajaran (Learning Outcome)

Capaian pembelajaran lulusan program studi Teknologi Informasi
1. Sikap dan Tata Nilai
a) Bertaqwa kepada Tuhan Yang Maha Esa dan mampu menunjukkan sikap religius;
b) Menjunjung tinggi nilai kemanusiaan dalam menjalankan tugas berdasarkan agama,
moral dan etika;
c) Berkontribusi dalam peningkatan mutu kehidupan bermasyarakat, berbangsa, bernegara,
dan peradaban berdasarkan Pancasila;
d) Berperan sebagai warga negara yang bangga dan cinta tanah air, memiliki nasionalisme
serta rasa tanggung jawab pada negara dan bangsa;
e) Menghargai keanekaragaman budaya, pandangan, agama, dan kepercayaan, serta
pendapat atau temuan orisinal orang lain;
f) Bekerja sama dan memiliki kepekaan sosial serta kepedulian terhadap masyarakat dan
lingkungan;
g) Taat hukum dan disiplin dalam kehidupan bermasyarakat dan bernegara;
h) Menginternalisasi nilai, norma, dan etika akademik;
i) Menunjukkan sikap bertanggung jawab atas pekerjaan di bidang Teknologi Informasi;
j) Menginternalisasi semangat kemandirian, kejuangan, dan kewirausahaan;
2. Keterampilan Umum
Setiap lulusan Prodi Teknologi Informasi memiliki keterampilan kerja secara umum
sebagaimana berikut:
a) Memiliki kemampuan yang dapat mengintegrasikan sistem;
b) integrasi antara sistem yang sedang dikembangkan dengan sistem yang sudah ada
(mengintegrasikan teknologi yang ada dan baru);
c) Memiliki kemampuan dapat memilih, merancang, mendeploy, mengintegrasikan dan
mengelola (administrator) jaringan dan infrastruktur komunikasi di dalam sebuah
organisasi. Pengetahuan ini meliputi komunikasi data, telekomunikasi,
inter/intranetworking dan keamanan infrastruktur. Yang dibahas juga meliputi data
multimedia, media penyimpanan dan distribusi informasi, serta World Wide Web;
d) Memiliki jiwa mandiri, disiplin, jujur, tanggung jawab,dan kemampuan berpikir secara
ilmiah, kritis, kretif,dan inovatif;
e) memiliki kemampuan untuk membuat kebijakan-kebijakan, prosedur-prosedur dan cara
paling efektif (best practices) dalam mengelolah informasi dan data untuk memastikan
bahwa data dapat dipahami, dipercaya, visible, dapat diakses dan dioptimasi untuk
penggunaanya serta dapat dioperasikan;
f) Memiliki kemampuan untuk dapat melakukan analisis kebutuhan dan persyaratan,
perancangan, implementasi dan evaluasi aplikasi (atau sistem informasi, sistem berbasis
komputer atau solusi teknologi) untuk mendukung pencapaian tujuan organisasi.
7
3. Keterampilan Khusus
Mampu menerapkan pemikiran logis, kritis, sistematis, dan inovatif dalam konteks
a) Mampu merancang dan mengembangkan algorithma untuk berbagai keperluan dalam
bidang Network, Network Security, Data Solution, dan Artificial Intelligence;
b) Memiliki kemampuan sebagai tenaga profesional System Administrator pada bidang
Network Specialist atau sebagai seorang Database Administrator pada bidang Data
Solution Specialist, sebagai upaya untuk memenuhi kebutuhan Dunia Industri;
c) Mampu merancang dan menghasilkan sebuah inovasi dalam bidang kewirausahaan yang
berbasis teknologi atau sebagai Technopreneur dalam rangka menciptakan knowledge
based economy masyarakat sehingga dapat menciptakan lapangan pekerjaan untuk
berkontribusi pada kemajuan bangsa dan negara serta dalam menghadapi Persaingan
Global;
4. Penguasaan Pengetahuan
a) Menguasai konsep teoritis bidang pengetahuan Ilmu Komputer /Informatika secara

umum dan konsep teoritis pada bidang Network atau Data Solution secara mendalam,
serta mampu memformulasikan penyelesaian masalah procedural;
b) Memiliki pengetahuan dan keahlian sebagai seorang System Administrator dalam
bidang Network Specialist atau Database Administrator dalam bidang Data Solution
Specialist;
c) Memiliki pengetahuan terkait dengan cara kerja sistem komputer dan mampu
merancang dan mengembangkan berbagai algorithma /metode untuk memecahkan
masalah.
d) Mempunyai pengetahuan dalam mengem-bangkan algorithma/metode yang diimple-
mentasikan dalam perangkat lunak berbasis komputer;
8
REKONSTRUKSI MATA KULIAH
Dalam rangka mempersiapkan peserta didik yang tidak hanya memiliki kedalaman
keilmuan dalam bidang Teknologi Informasi akan tetapi memiliki horizon berfikir global –
sehingga mampu bertahan dan berkompetisi dalam era yang sangat kompetitif, maka
diperlukan kurikulum yang berorientasi akademik dan praktis.
Tim perumus telah berusaha keras dalam melakukan kaji ulang kurikulum
sebelumnya, melakukan kajian terhadap pasar kerja sebagai pengguna dan bertukar pikiran
dengan para ahli dan alumni guna mewujudkan kurikulum yang sesuai dengan kebutuhan
pasar. Tentunya, kurikulum ini dirancang tidak hanya untuk memenuhi kebutuhan pasar
yang sangat subject to change; akan tetapi pada tataran keilmuan juga mendapat porsi yang
cukup. Dengan demikian, alumni yang ingin melanjutkan studi ke jenjang yang lebih
tinggi sudah dibekali dengan ontologi, epistimologi dan aksiologi keilmuan yang cukup.
Maka dari itu, rekonstruksi mata kuliah disusun dengan sebaran sebagai berikut;
MATAKULIAH PROGRAM S1 TEKNOLOGI INFORMASI
A. Matakuliah Keilmuan dan Keterampilan (MKK)
Sem Kode MK Mata Kuliah SKS Total
UNIV3101 Pancasila dan Anti Korupsi 2
UNIV3102 Agama 2
UNIV3103 Bahasa Inggris I 2
UNIV3104 Bahasa Indonesia 2

1 20
FAKT3101 Pengantar Teknologi Informasi 3
FAKT3102 Matematika Diskrit 3
FAKT3103 Algoritma dan Pemograman 3
FAKT3104 Praktikum Algoritma dan Pemograman 3
2 UNIV3201 Kewarganegaraan & Anti Narkoba 2 22
UNIV3202 Bahasa Inggris II 2
FAKT3201 Statistika dan Probabilitas I 3
FAKT3202 Struktur Data 3

9
FAKT3203 Praktikum Struktur Data 3
FAKT3204 Aljabar Linear 3
FAKT3205 Sistem Basis Data 3
FAKT3206 Praktikum Sistem Basis Data 3
FAKT3301 Organisasi Dan Arsitektur Komputer 3
FAKT3302 Statistika dan Probabilitas II 3
FAKT3303 Pemograman Berorientasi Objek 3
Praktikum Pemograman Berorientasi

3 FAKT3304 3 21
Objek
FAKT3305 Sistem Operasi 3
PTIF3301 Arsitektur Perangkat Lunak 3
PTIF3302 Sistem Mikroprosesor 3
FAKT3401 Jaringan Dan Komunikasi Data 3
FAKT3402 Teknopreneur 3
PTIF3401 Perencanaan Rekayasa 3
4 PTIF3402 Teknologi Multimedia 3 21
PTIF3403 Teknik Antar Muka dan Periferal 3
PTIF3404 Sistem Terdistribusi 3
PTIF3405 Pemograman Web 3
FAKT3501 Interaksi Manusia Dan Komputer 3
PTIF3501 Sistem Cerdas 3
PTIF3502 Jaringan Enterprise 3
5 PTIF3503 Forensik Sistem 3 21
PTIF3504 Kecerdasan Buatan 3
PTIF3505 Keamanan dan Integritas Data 3
PTIF3506 Audit IT dan Tata Kelola 3
10
FAKT3601 Metodologi Penelitian 3
FAKT3602 Manajemen Projek 3
FAKT3603 Etika dan Profesi Teknologi 3
Sistem Integrator
PTIF3601 Projek Pengembangan Perangkat Lunak 3
PTIF3602 Perancang dan Analisis Algoritma 3 21

PTIF3603 Mobile Rekayasa Perangkat Lunak 3
PTIF3604 Pemeliharaan Perangkat Lunak 3
Database Engineer
6
PTIF3605 Administrasi Basis Data 3
PTIF3606 Teknik Penambangan Database 3
Teknologi Big Data dan Cloud

PTIF3607 3
Computing
PTIF3608 Analisis Big Data 3
Network Engineer
PTIF3609 Routing dan Switching 3
PTIF3610 Jaringan Nirkabel 3
PTIF3611 Pemograman Jaringan 3
PTIF3612 Keamanan Jaringan 3
7 FAKT3701 Enrichment Program 12 12
8 FAKT3801 Skripsi 6 6
TOTAL 144
11
RENCANA PERKULIAHAN SEMESTER (RPS) SILABUS
Kode
Dokumen:
UNIVERSITAS BATTUTA
FAKULTAS TEKNOLOGI
PROGRAM STUDI TEKNOLOGI INFORMASI
Tgl
MATA KULIAH KODE Rumpun MK BOBOT (sks) SEMESTER
Penyusunan
Pemograman Web PTIF3405 Pemograman Web 3 4
OTORISASI Pengembang RPS: Koordinator RMK: Ketua Prodi:
Chairul Imam ,S.Kom.,M.Kom Aripin Rambe, S.Kom., M.Kom
CPL Prodi
Capaian 1. Mampu menerapkan solusi dengan memanfaatkan teknologi informasi terkini.
Pembelajara 2. Memiliki kemampuan kepribadian sosial yang baik.
n 3. Memiliki kemampuan dasar di bidang rekayasa perangkat lunak/sistem informasi, bidang perancangan multimedia, atau
bidang-bidang komunikasi data/jaringan Komputer.
4. Mampu menerapkan matematika, sains, dan prinsip rekayasa (engineering principles) untuk menyelesaikan masalah rekayasa
kompleks pada bidang teknologi informasi.
5. Mampu menemukan sumber masalah rekayasa pada sistem perangkat lunak, jaringan komputer, dan multimedia
6. Mampu melakukan riset yang mencakup identifikasi, formulasi, dan analisis masalah rekayasa pada teknik informatika dan
komputer.
7. Mampu merancang program sesuai permintaan pelanggan dengan algoritma yang tepat dan pelkuang pengembangan
program/perangkat lunak, atau produk-produk multimedia/grafis atau merancang terkait jaringan komputer baik skala kecil
dan luas beserta seluruh kebutuhan keamanan jaringan sesuai dengan model berbagai teknologi jaringan yang berkembang
dan peluang pengembangan jaringan.
CPMK
1) Mahasiswa mampu untuk mampu mengimplementasikan konsep dan teori dasar web, HTML dan memiliki kemampuan untuk mempersiapkan
kebutuhan software dan hardware sistem dan melakukan optimasi web.
12
2) Mahasiswa mampu untuk mengidentifikasi jenis-jenis variabel dan variabel internal PHP, Menejelaskan control structures dalam PHP.
3) Memiliki pengetahuan terhadap alat bantu (tools , framework, template) berbasis object dengan bentuk model, view , controller yang diperlukan
untuk membuat aplikasi yang baik dan cepat.
4) Mahasiswa mampu memahami tentang konsep database.
5) Mahasiswa mampu memahami dan mengaplikasikan pemrograman CMS Wordpress untuk mengakses data base MySql.
6) Mahasiswa mampu merancang dan membangun suatu sistem berbasis web dengan menggunakanpemrograman prosedural dan berorientasi objek
untuk menyelesaikan masalah dengan menggunakan fungsdan class.
7) Mahasiswa mampu mendesain system manajemen database berbasis Web untuk menyelesaikan masalah di
8) lapangan.
Deskripsi Materi Kuliah Pemograman web mempelajari tentang bahasa pemrograman dasar untuk membangun sebuah website dan melakukan
Singkat MK koneksi ke basisdata. Dasar-dasar Pemrograman web HTML dan mengaplikasikan pemrograman HTML untuk kasus
sederhana.Dasar-dasar CSS dan mengaplikasikan untuk kasus sederhana. Pemrograman server scripting language menggunakan
PHP. Dasar-dasar basis data dan pemrograman web untuk mengakses basis data mysql menggunakan CMS Wordpress. Mendesain
system manajemen basisdata berbasis web untuk menyelesaikan masalah tertentu di lapangan.
Bahan
Kajian/ 1. Abdulloh, Rohi. 2016. Trik Mudah Membuat CMS Website dari Nol. Jakarta: Elex Media Komputindo.
Materi
Pembelajara 2. Andi, Kristanto. 2018. Perancangan Sistem Informasi dan Aplikasinya.Yogyakarta: Gava Media.
n
3. Ardhana, YM Kusuma. 2012. PHP Menyelesaikan Website 30 Juta. Jasakom.
4. Bowo, Eri. 2014. Cpanel Panduan Wajib untuk Web Master.Jasakom.
5. Daldi, N. A., Jebeng, R., dan Dulkifli, O., 2011. Strategi Peningkatan Daya Saing Bisnis Melalui Pemanfaatan E-commerce
pada Klaster Kerajinan Tanah Liat dan Mainan Anak . Badan Penelitian dan Pengembangan Provinsi Jawa Barat, Bandung.
6. E. Wibowo (2014). cPanel : Panduan Wajib Untuk Web Master. Jakarta: Jasakom.
7. Madcoms. 2016. Sukses Membangun Toko Online dengan PHP & MySQL. Yogyakarta: Andi.
8. Rerung, R.R. (2018). Pemrograman Web Dasar. Yogyakarta: Deeppublish.
9. Rusli, Ansari Saleh Ahmar dan Abdul Rahman. , 2019, Pemrograman Website Dengan PHP-MySQL untuk Pemula, Sulawesi
13
Selatan : Yayasan Ahmar.Cendikia Indonesia.
10. Rizkita, N., Rosely, E., & Nugroho, H. (2018). Aplikasi Pendaftaran dan Transaksi Pasien Klinik Hewan di Bandung
Berbasis Web. EProceedings of Applied Science, 4(3), 1512–1520.
11. Sambas Sahidah. Jurnal Sistem dan Teknologi Informasi, 1.
12. Solichin, A. (2016). Pemrograman Web Dengan PHP dan MySQL. Jakarta: Budi Luhur.
13. Supono and V. Putratama, Pemrograman Web dengan Menggunakan PHP dan Framework Codeigniter, 1st ed. Yogyakarta:
Deepublish, 2018.
14. Wardana. (2016). Aplikasi Website Profesional dengan PHP dan jQuery. Jakarta: PT. Elex Media Komputindo.
15. Wijianto, R., Anggoro, A., Informasi, S., & Informatika, M. (2018). Sistem Informasi Pendaftaran Seleksi Kerja Berbasis
Web Pada Bkk ( Bursa Kerja Khusus ) Tunas Insan Karya Smk Negeri 2, 6(1), 76–84.
16. Wiga Ariani, dkk (2014). E-commerce web development in wiga art.International Journal of Science and Research (IJSR).1-
2.
17. Yeni Susilowati. Modul E-Commerce-Teaching Factory For Students. Mutiara Publisher, 2019.
Utama:
Pustaka
1. Andre. 2013. Tutorial Belajar CSS Part 1: Pengertian CSS, Apa yang Dimaksud dengan CSS? [Online]. Tersedia:
http://www.duniailkom.com/tutorial-belajar-css-part-1-pengertian-css-apa-yang-dimaksud-dengan-css/ .
2. Atom. (2017, November 10) About WooCommerce. Retrivied Desember 2, 2017 from Atom : https://atom.io/
3. Cpanel. (2017, November 10) About Cpanel. Retrivied Desember 2, 2017 from Cpanel : https://cpanel.com/
4. J, Warren, C, Connor, L, Brown, M, Pollard, R & O’Connor, T 2008, Life in the clickstream: the future of journalism, Media
Entertainment and Arts Alliance, viewed 27 May 2020, <http://www.alliance.org.au/documents/jurnal_ilmiah.pdf>..
14
5. PHP: www.php.net
6. Riyadi, A.S. 2012. Perancangan Sistem Informasi Berbasis Website Subsistem Guru di Sekolah Pesantren Persatuan
Islam 99 Rancabango [Online]. Vol 09(40) 11 halaman. Tersedia:
http://www.sttgarut.ac.id/jurnal/index.php/algoritma/article/viewFile/49/45
7. Wordpress. (2017, November 10) About Wordpress. Retrivied Desember 2, 2017 From Wordpress :
https://wordpress.org/about/Este,
8. http://www.w3.org
9. http://id.wikipedia.org/wiki/Cascading_Style_Sheets
Idwebhost. 2014. Pengertian Space Hosting dan Bandwith [Online]. Tersedia:

10.
https://blog.idwebhost.com/cpanel/pengertian-space-hosting-dan-bandwith/
Dosen Chairul Imam , S.Kom., M.Kom
Pengampu:
Mata Kuliah Pemograman Web

Syarat
Tatap Standar Kompetensi Kompetensi Dasar Indikator Kegiatan Bahan Kajian Waktu Referensi Evaluasi
Muka( Belajar (Materi Pelajaran) Belajar
MK) (Menit)
1 Mahasiswa dapat Mahasiswa dapat menggunakan Ketepatan Diskusi, a. Pengertian Website 100’ 1.Rusli, Ansari Saleh 1. Pekerjaan pribadi
memahami konsep konsep dasar web untuk menjelaskan Tanya Jawab, b. Pengertian Ahmar dan Abdul 2. Pekerjaan sesama
dasar web. mengetahui tentang website konsep dasar Praktik Pemrograman Web Rahman. , 2019,
web c. Bahasa Skrip Pemrograman Website
Pemrograman Web Dengan PHP-MySQL
15
d. Istilah-Istilah dalam untuk Pemula, Sulawesi
Pemrograman Web Selatan : Yayasan
e. Struktur Navigasi Ahmar.Cendikia
f. Text Editor Indonesia.
2.Yeni Susilowati.
Modul E-Commerce-
Teaching Factory For
Students. Mutiara
Publisher, 2019.
3.Supono and V.
Putratama,
Pemrograman Web
dengan Menggunakan
PHP dan Framework
Codeigniter, 1st ed.
Yogyakarta:
Deepublish, 2018.
4.Rizkita, N., Rosely,
E., & Nugroho, H.
(2018). Aplikasi
Pendaftaran dan
Transaksi Pasien
Klinik Hewan di
Bandung Berbasis Web.
EProceedings of
Applied Science, 4(3),
1512–1520.
2-3 Mahasiswa dapat Mahasiswa mampu memahami Ketepatan Ceramah, 2. Pengertian HTML: 100’ 1. Rerung, R.R. 1.Mandiri/Terstruktur
memahami scripting scripting HTML menjelaskan diskusi, 1) Pengertian Hypertext (2018).Pemrograman 2. Tes Formatif
HTML scripting HTML pratikum dan Markup Language Web Dasar.
tugas. (HTML) Yogyakarta:
2) Struktur Dasar HTML Deeppublish.
3. Format HTML dan
Tabel HTML:
1) Html Format teks
2) Pembuatan Tabel
Menggunakan HTML
16
4-5 Mahasiswa dapat Mahasiswa mampu memahami Ketepatan: Diskusi, 4. Bagian-bagian CSS 100’ 1. http://www.w3.org 1.Mandiri/Terstruktur
memahami cara membuat frame dan 1.menjelaska Tanya Jawab, dan Basic Element: 2. http://id.wikipedia.o 2. Tes Formatif
penggunaan CSS dan mengelola CSS pada form n penggunaan Praktik 1) Pengenalan CSS rg/wiki/Cascading_Styl
dapat halaman web CSS 2) BASIC ELEMENT e_Sheets
mengimplementasikan 2.mengimple STYLING
nya mentasikan 5. CSS Box Model
CSS
6-7 Mahasiswa dapat Mahasiswa mampu memahami Ketepatan Ceramah, 6. Tentang PHP Dan 100’ 1.Mandiri/Terstruktur
memahami PHP perancangan halaman web menjelaskan diskusi, Instalasi: 1. Wardana. (2016). 2. Tes Formatif
menggunakan PHP PHP pratikum dan 1.Tentang PHP Aplikasi Website
tugas 2.Instalasi Apache dan Profesional dengan
PHP PHP dan jQuery.
7. memahami tag pada Jakarta: PT. Elex
PHP serta mengetahui Media Komputindo.
struktur kontrol:
1.Memahami tag-tag 2. Solichin, A. (2016).
dalam PHP Pemrograman Web
2.Memahami tentang Dengan PHP dan
struktur kontrol MySQL. Jakarta:
Budi Luhur.
8 Mahasiswa mampu Mahasiswa mampu mengerjakan Ketepatan Buku Ujian Tengah Semester 100’ 1.Mandiri/Terstruktur
memahami materi soal sesuai dengan materi yang dalam Tertutup 2. Tes Formatif
yang telah diberikan & telah diberikan menjawab soal.
dapat mengerjakan
soal yang diberikan
9-10 Mahasiswa dapat Mahasiswa mampu: Ketepatan : Diskusi, 9. Database MySQL 100’ 1. Wijianto, R., 1. Pekerjaan pribadi
memahami 1.memahami Administrasi 1.menjelaskan Tanya Jawab, 1) Mengenal MySQL Anggoro, A., Informasi, 2. Pekerjaan sesama
Administrasi MySQL MySQL untuk membuat konsep relasi. Praktik 2) Fungsi – Fungsi S., &Informatika, M.
17
dan menggunakan database 2.menjelaskan Pada MySQL (2018). Sistem
GUI untuk membuat 2.menggunakan GUI untuk proses 3) Administrasi Informasi Pendaftaran
database membuat database pemodelan data MySQL Seleksi Kerja Berbasis
logik. 10. Membahas tentang Web Pada Bkk ( Bursa
DDL dan DML serta Kerja Khusus ) Tunas
seleksi data: Insan Karya Smk
1) DDL ( Data Negeri 2, 6(1), 76–84.
Definiton Language ) 2. Madcoms. 2016.
2) DML (Data Sukses Membangun
Manipulation Toko Online dengan
Language) PHP & MySQL.
3) Seleksi Data Yogyakarta: Andi.
3. Andi, Kristanto.
2018. Perancangan
Sistem Informasi dan
Aplikasinya.Yogyakarta
: Gava Media.
11-12 Mahasiswa dapat Mahasiswa mampu membuat Ketepatan Diskusi, 11. Pengenal CMS 100’ 1. Abdulloh, Rohi. 1. Pekerjaan pribadi
memahami pembuat koneksi database dan mampu membuat Tanya Jawab, wordpress serta 2016. Trik Mudah 2. Pekerjaan sesama
koneksi database dan membuat aplikasi dengan CMS koneksi Praktik database dan Membuat CMS
mampu membuat Wordpress dan MySQL database dan instalasi Xammp : Website dari Nol.
aplikasi dengan CMS mampu 1) Pengenal CMS Jakarta: Elex Media
Wordpress dan membuat wordpress Komputindo
MySQL aplikasi 2) Pembuatan 2. Andi, Kristanto.
dengan CMS Database WEB 2018. Perancangan
Wordpress 3) Instalasi Xampp Sistem Informasi dan
dan Mysql 12. Instalasi wordpress Aplikasinya.Yogyakart
a: Gava Media.
3. Rusli, Ansari Saleh
Ahmar dan Abdul
Rahman. , 2019,
Pemrograman Website
Dengan PHP-MySQL
untuk Pemula, Sulawesi
Selatan : Yayasan
Ahmar.Cendikia
Indonesia.
13-14 Mahasiswa dapat Mahasiswa mampu memahami Ketepatan Diskusi, 13. Pengenalan dan 100’ 1. Cpanel. (2017, 1.Mandiri/Terstruktu
18
memahami mengelola mengelola Cpanel Hosting membuat Tanya Jawab, proses pengelola November 10) About 2.Formatif tes
Cpanel Hosting koneksi Praktik domain: Cpanel. Retrivied
domain dan 1. Pengenalan Cpanel Desember 2, 2017 from
hosting ke 2. Mengelola Domain Cpanel :
cpanel dalam Cpanel https://cpanel.com/
pembuatan 14. proses pengelola file 2. Idwebhost. 2014.
website. website dan instal Pengertian Space
aplikasi di cpanel : Hosting dan Bandwith
1. Mengelola File [Online]. Tersedia:
Website Di Cpanel https://blog.idwebhost.c
2. Instal Aplikasi Di om/cpanel/pengertian-
Cpanel space-hosting-dan-
bandwith/
15 Mahasiswa dapat Mahasiswa mampu memahami Komunikasi/ 1.Project KUIS 100’ 1.Mandiri/Terstruktu
memahami materi materi yang telah diberikan & Presentasi Based 2.Formatif tes
yang telah diberikan & dapat mengerjakan website yang Tugas Learning
dapat mengerjakan diberikan Kelompok: 2.Focus
website yang 1.Mahasiswa Group
diberikan mencari dan Discussion
merangkum
serta
mempresenta
sikan projek
website yang
dibuat
16 Mahasiswa dapat Mahasiswa mampu memahami Ketepatan Buku Ujian akhir Semester 100’ 1.Mandiri/Terstruktu
memahami materi materi yang telah diberikan & dalam Tertutup 2.Formatif tes
yang telah diberikan & dapat mengerjakan soal yang mengerjakan
dapat mengerjakan diberikan soal.
soal yang diberikan
19
SATUAN ACARA PERKULIAHAN (SAP)
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Alamat: No.15 M, Jl. Gajah Mada, Babura, Medan Baru, Medan City, North
Sumatra 20154,Telepon: (061) 80514277
Satuan Acara Pembelajaran
Disusun Oleh Disetujui Oleh
Chairul Imam, S.Kom., M.Kom Aripin Rambe, S.Kom., M.Kom

Program Studi : Teknologi Informasi
Kode : PTIF3405
SKS :3
Dosen Pengampu : Chairul Imam, S.Kom., M.Kom
Pertemuan Ke I (Pertama)
Pokok Bahasan konsep dasar web
a. Pengertian Website
b. Pengertian Pemrograman Web
c. Bahasa Skrip Pemrograman Web
Sub Pokok Bahasan
d. Istilah-Istilah dalam Pemrograman Web
e. Struktur Navigasi
f. Text Editor
Standar Kompetensi Mahasiswa dapat memahami konsep dasar web.
Mahasiswa dapat menggunakan konsep dasar web untuk
Kompetensi Dasar
mengetahui tentang website
Indikator Keberhasilan Ketepatan menjelaskan konsep dasar web
Website adalah suatu kumpulan-kumpulan halaman yang
menampilkan berbagai macam informasi teks, data, gambar,
video maupun gabungan dari semuanya bersifat statis dan
Deskripsi Materi Pembelajaran
dinamis. Dengan dokumen digunakan sebagai media untuk
menampilkan teks, gambar, multimedia dan lainnya pada
jaringan internet.
20
Peta Konsep
Mempresentasi
kan Peta
Konsep
Pemograman
Web
Sumber Bacaan Buku , Jurnal , Ebook,

Konsep Word
Blogger
Teknologi
Dan Website
Jenis-Jenis Web Konsep Web Instalasi Web Jenis Editor
MembahasWidemengenai Web Aplikasi Webkonsep Browser dasar Server pemrograman Server web,Teks
istilah-istilah dalam pemrograman web, menggunakan text

Uraian Materi
editor, mengenal dan mengimplementasikan struktur
navigasiClient side Server Side Web Statis Web Dinamis
Cara Kerja Web
Server
Jenis-Jenis Web
SerVer
1. Pembukaan dengan salam pembuka dan membaca do’a
menurut agama dan kepercayaan masing-masing
2. Apersepsi mengulang atau membahas kembali materi
yang telah diajarkan sebelumnya untuk dapat dikaitkan
dengan materi yang akan diajarkan.
3. penanaman Konsep proses menjelaskan materi pokok
pembahasan yang akan diajarkan.
4. pemahaman konsep kepada mahasiswa terhadap konsep
yang telah diajarkan dengan cara melatih tanya jawab
Tahap Pembelajaran
dan sharing materi yang diajarkan.
5. latihan dan keterampilan melancarkan mahasiswa
dengan cara mengulang-ulang kembali pembuatan
website pada pelatihan yang sudah diajarkan.
6. evaluasi terhadap mahasiswa dalam kemampuan dan
kualitas pembelajaran website yang diajarkan.
7. penutup materi pembelajaran dengan membaca doa
menurut agama dan kepercayaan masing-masing dan
salam.
1. Memberi penguatan terhadap respon yang diberikan oleh
mahasiswa.
2. Menjelaskan metoda yang digunakan
3. Menjelaskan tentang tugas, struktur tujuan,peran, fungsi,
Pendahuluan
kriteria keberhasilan, dan kegiatan belajar mahasiswa
4. Membagi kelompok
Penyajian 1. Presentasi Materi oleh dosen

Kegiatan Inti: 2. Mahasiswa bekerja/belajar dalam kelompok
1. Uraian 3. Presentasi hasil diskusi kelompok (peer pre assessment)
2. Contoh 4. Mahasiswa diberi latihan secara individu (independent
3. Latihan practice)
5. Mahasiswa mendiskusikan/mempresentasikan hasil
21
kerjanya (independent practice)
6. Mahasiswa diberi latihan tambahan (add assessment)
7. Tes formative
1. Merefleksi materi perkuliahan
2. Menanyakan hal-hal yang kurang jelas terkait materi
Penutup 3. Menyimpulkan materi
4. Memberikan gambaran umum terkait materi pada
pertemuan berikutnya
1. Rusli, Ansari Saleh Ahmar dan Abdul Rahman. , 2019,
Pemrograman Website Dengan PHP-MySQL untuk
Pemula, Sulawesi Selatan : Yayasan Ahmar.Cendikia
Indonesia.
2. Yeni Susilowati. Modul E-Commerce-Teaching Factory
For Students. Mutiara Publisher, 2019.
Sumber Belajar 3. Supono and V. Putratama, Pemrograman Web dengan
Menggunakan PHP dan Framework Codeigniter, 1st ed.
Yogyakarta: Deepublish, 2018.
4. Rizkita, N., Rosely, E., & Nugroho, H. (2018). Aplikasi
Pendaftaran dan Transaksi Pasien Klinik Hewan di
Bandung Berbasis Web. EProceedings of Applied
Science, 4(3), 1512–1520.
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277
22

Kode : PTIF3405
SKS :3
Pertemuan Ke 2 dan 3
Pokok Bahasan HTML
2. Pengertian HTML:
1) Pengertian Hypertext Markup Language (HTML)
2) Struktur Dasar HTML
Sub Pokok Bahasan 3. Format HTML dan Tabel HTML:
1) Html Format teks
2) Pembuatan Tabel Menggunakan HTML
Standar Kompetensi Mahasiswa dapat memahami scripting HTML
Kompetensi Dasar Mahasiswa mampu memahami scripting HTML
Indikator Keberhasilan Ketepatan menjelaskan scripting HTML
Mampu mengenal skrip html, menggunakan ragam tag dan
Deskripsi Materi Pembelajaran pendeklarasian tabel beserta atributnya, mampu menuliskan
skrip dalam html
Peta Konsep
Mempresentasi
kan Peta
Konsep
Pemograman
Web
Sumber Bacaan Buku , Jurnal , Ebook,

Konsep Word
Blogger
Teknologi
Dan Website
Jenis-Jenis Web Konsep Web Instalasi Web Jenis Editor
HTML (HyperText Markup Language) adalah
Wide Web Aplikasi Web Browser Server suatu Server bahasaTeks
yang menggunakan tanda-tanda tertentu (tag) untuk

Uraian Materi
menyatakan kode-kode yang harus ditafsirkan oleh browser
agar halaman
Client side tersebut
Server Side dapat ditampilkan
Web Statis Web Dinamis secara benar.
Cara Kerja Web
Server
Jenis-Jenis Web
SerVer
Tahap Pembelajaran 1. Pembukaan dengan salam pembuka dan membaca do’a
23
5. latihan dan keterampilan melancarkan mahasiswa dengan
cara mengulang-ulang kembali pembuatan website pada
pelatihan yang sudah diajarkan.
salam.
1. Melakukan review materi pada pertemuan sebelumnya.
2. Memberikan pertanyaan terkait materi pada pertemuan
sebelumnya.
Pendahuluan
mahasiswa.
6. Membagi kelompok.
1. Presentasi Materi oleh dosen
2. Mahasiswa bekerja/belajar dalam kelompok
Penyajian
3. Presentasi hasil diskusi kelompok (peer pre assessment)
Kegiatan Inti:
4. Mahasiswa diberi latihan secara individu (independent
1. Uraian
practice)
2. Contoh
3. Latihan
7. Tes formative
Rerung, R.R. (2018). Pemrograman Web Dasar. Yogyakarta:
Deeppublis
Sumber Belajar
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277

24
Kode : PTIF3405
SKS :3
Pokok Bahasan CSS
4. Bagian-bagian CSS dan Basic Element:
1) Pengenalan CSS
Sub Pokok Bahasan
2) BASIC ELEMENT STYLING
5. CSS Box Model
Mahasiswa dapat memahami penggunaan CSS dan dapat
Standar Kompetensi
mengimplementasikannya
Mahasiswa mampu memahami cara membuat frame dan
Kompetensi Dasar
mengelola CSS pada form halaman web
Ketepatan:
Indikator Keberhasilan 1.menjelaskan penggunaan CSS
2.mengimplementasikan CSS
CSS merupakan bahasa yang digunakan untuk mengatur
tampilan suatu dokumen yang ditulis dalam bahasa markup /
Deskripsi Materi Pembelajaran markup language. apabila kita membahasnya dalam konteks
web, bisa di artikan sebagai bahasa yang digunakan untuk
mengatur tampilan / desain sebuah halaman HTML.
Mempresentasi
kan Peta
Konsep
Pemograman
Web
Peta Konsep
Konsep Word Teknologi Jenis-Jenis Web Konsep Web Instalasi Web Jenis Editor
Wide Web Aplikasi Web Browser Server Server Teks
Cara Kerja Web Jenis-Jenis Web

Client side Server Side Web Statis Web Dinamis
Server SerVer
Sumber Bacaan Buku , Jurnal , Ebook, Blogger Dan Website

CSS adalah kepanjangaan dari Cascading Style Sheets yang
berguna untuk menyederhanakan proses pembuatan website
dengan mengatur elemen yang tertulis di bahasa markup.
Uraian Materi
CSS dipakai untuk mendesain halaman depan atau tampilan
website (front end). CSS menangani tampilan dan 'rasa' dari
halaman website.
25
salam.
sebelumnya.
Pendahuluan
mahasiswa.
Penyajian
Kegiatan Inti:
1. Uraian
practice)
2. Contoh
3. Latihan
7. Tes formative
1. http://www.w3.org
Sumber Belajar 2. http://id.wikipedia.org/wiki/Cascading_Style_Sheets
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277
26
Kode : PTIF3405
SKS :3
Pokok Bahasan PHP
6. Tentang PHP Dan Instalasi:
1) Tentang PHP
2) Instalasi Apache dan PHP
Sub Pokok Bahasan 7. memahami tag pada PHP serta mengetahui struktur
kontrol:
1) Memahami tag-tag dalam PHP
2) Memahami tentang struktur kontrol
Standar Kompetensi Mahasiswa dapat memahami PHP
Mahasiswa mampu memahami perancangan halaman web
Kompetensi Dasar
menggunakan PHP
Indikator Keberhasilan Ketepatan menjelaskan PHP
PHP tergolong dalam bahasa pemrograman berbasis server-
side, maka script yang digunakan akan diproses oleh server.
Jenis server yang sering dipakai adalah Apache, Nginx, dan
LiteSpeed.
Mempresentasi
kan Peta
Konsep
Pemograman
Web
Peta Konsep

Server SerVer

PHP (PHP: Hypertext Preprocessor) adalah sebuah bahasa
pemrograman server side scripting yang bersifat open
source.Jenis server yang sering digunakan bersama dengan
Uraian Materi
PHP antara lain Apache, Nginx, dan LiteSpeed. Selain itu,
PHP juga merupakan bahasa pemrograman yang bersifat
open source.
27
salam.
sebelumnya.
Pendahuluan
mahasiswa.
Penyajian
Kegiatan Inti:
1. Uraian
practice)
2. Contoh
3. Latihan
7. Tes formative
1. Wardana. (2016). Aplikasi Website Profesional dengan
PHP dan jQuery. Jakarta: PT. Elex Media Komputindo.
Sumber Belajar 2. Solichin, A. (2016). Pemrograman Web Dengan PHP dan
MySQL. Jakarta: Budi Luhur.
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277
28
Kode : PTIF3405
SKS :3
Pokok Bahasan Database MySQL
9. Database MySQL
1) Mengenal MySQL
2) Fungsi – Fungsi Pada MySQL
3) Administrasi MySQL
Sub Pokok Bahasan 10. Membahas tentang DDL dan DML serta seleksi data:
1) DDL ( Data Definiton Language )
2) DML (Data Manipulation Language)
3) Seleksi Data
Mahasiswa dapat memahami phpMyAdmin sebagai GUI dan
Standar Kompetensi
menggunakan GUI untuk membuat database
Mahasiswa mampu:
1.memahami phpMyAdmin sebagai GUI untuk membuat
Kompetensi Dasar
database.
2.menggunakan GUI untuk membuat database
Ketepatan :
Indikator Keberhasilan 1.menjelaskan konsep relasi
2.menjelaskan proses pemodelan data logic
MySQL adalah sebuah database management system
(manajemen basis data) menggunakan perintah dasar SQL
(Structured Query Language) yang cukup terkenal. SQL
sendiri merupakan suatu bahasa yang dipakai di dalam
pengambilan data pada relational database atau database yang
terstruktu
Mempresentasi
kan Peta
Konsep
Pemograman
Web
Peta Konsep

Server SerVer
29
MySQL adalah salah satu jenis DBMS yang menggunakan
bahasa SQL untuk mengelola sistem basis data secara
terstruktur. Fungsi dari MySQL yang paling penting adalah
Uraian Materi
memudahkan pengguna dalam mengakses data dalam bentuk
String dan dapat diakses secara personal maupun publik di
website.
yang telah diajarkan dengan cara melatih tanya jawab dan
Tahap Pembelajaran
sharing materi yang diajarkan.
salam.
sebelumnya.
Pendahuluan mahasiswa.

Penyajian
Kegiatan Inti:
1. Uraian
practice)
2. Contoh
3. Latihan
7. Tes formative
Penutup 1. Merefleksi materi perkuliahan
3. Menyimpulkan materi
30
1. Andi, Kristanto. 2018. Perancangan Sistem Informasi
dan Aplikasinya.Yogyakarta: Gava Media. Insan Karya
Smk Negeri 2, 6(1), 76–84.
2. Wijianto, R., Anggoro, A., Informasi, S., &Informatika,
Sumber Belajar M. (2018). Sistem Informasi Pendaftaran Seleksi Kerja
Berbasis Web Pada Bkk ( Bursa Kerja Khusus ) Tunas
3. Madcoms. 2016. Sukses Membangun Toko Online
dengan PHP & MySQL.Yogyakarta: Andi.
31
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277

Kode : PTIF3405
SKS :3
Pokok Bahasan CMS Wordpress dan Database Kulitas model data
1.Membuat koneksi database ke CMS Wordpress
Sub Pokok Bahasan 2.membuat aplikasi website dengan CMS Wordpress dan
Mysql
Mahasiswa dapat memahami pembuat koneksi database dan
Standar Kompetensi mampu membuat aplikasi dengan CMS Wordpress dan
MySQL
Mahasiswa mampu membuat koneksi database dan mampu
Kompetensi Dasar
membuat aplikasi dengan CMS Wordpress dan MySQL
Ketepatan membuat koneksi database dan mampu membuat
Indikator Keberhasilan
aplikasi dengan CMS Wordpress dan Mysql
WordPress merupakan salah satu CMS ( Content
Management System ) bersifat open source yang digunakan
untuk membuat website. Sifatnya yang open source membuat
WordPress memiliki banyak komunitas dan dukungan.
Karenanya wordpress menjadi software paling mudah untuk
membuat website atau blog yang kuat.
32
Mempresentasi
kan Peta
Konsep
Pemograman
Web
Peta Konsep

Server SerVer

CMS WordPress merupakan perangkat lunak yang
mempunyai fasilitas untuk pengelolaan konten situs web.
Uraian Materi Menggunakan CMS WordPress mengizinkan Anda untuk
melakukan pengelolaan keseluruh file, dokumen, serta desain
dan tampilan konten.
Tahap Pembelajaran
salam.
Pendahuluan 1. Melakukan review materi pada pertemuan sebelumnya.
sebelumnya.
mahasiswa.
33
Penyajian
Kegiatan Inti:
1. Uraian
practice)
2. Contoh
3. Latihan
7. Tes formative
Penutup
1. Abdulloh, Rohi. 2016. Trik Mudah Membuat CMS

Website dari Nol. Jakarta: Elex Media Komputindo
2. Andi, Kristanto. 2018. Perancangan Sistem Informasi dan
Aplikasinya.Yogyakarta: Gava Media.
Sumber Belajar
3. Rusli, Ansari Saleh Ahmar dan Abdul Rahman. , 2019,
Pemrograman Website Dengan PHP-MySQL untuk
Pemula, Sulawesi Selatan : Yayasan Ahmar.Cendikia
Indonesia.
34
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277

Kode : PTIF3405
SKS :3
Pokok Bahasan Cpanel
13. Pengenalan dan proses pengelola domain:
1. Pengenalan Cpanel
2. Mengelola Domain Cpanel
Sub Pokok Bahasan 14. proses pengelola file website dan instal aplikasi di
cpanel :
1. Mengelola File Website Di Cpanel
2. Instal Aplikasi Di Cpanel
Standar Kompetensi Mahasiswa dapat memahami mengelola Cpanel Hosting
Kompetensi Dasar Mahasiswa mampu memahami mengelola Cpanel Hosting
Ketepatan membuat koneksi domain dan hosting ke cpanel
Indikator Keberhasilan
dalam pembuatan website.
panel kontrol yang digunakan untuk melakukan pengaturan
pada layanan web hosting yang meliputi manajemen file,
database, domain, security, software dan konfigurasi lainnya.
Deskripsi Materi Pembelajaran Tanpa cPanel, pengaturan web hosting hanya bisa dilakukan
melalui perintah teks. cPanel memudahkan pengguna untuk
melakukan berbagai macam konfigurasi melalui tampilan
user interface yang menarik dan mudah dioperasikan.
35
Mempresentasi
kan Peta
Konsep
Pemograman
Web
Peta Konsep

Server SerVer

cPanel adalah suatu kontrol panel dari web hosting memiliki
fungsi untuk mengelola pengaturan domain, hosting ataupun
Uraian Materi website. Aplikasi-aplikasi yang didukung cPanel meliputi
Apache, PHP, mySQL,Postgres, Perl, Python, and BIND,
dengan email seperti POP3, IMAP, layanan-layanan SMTP.
Tahap Pembelajaran
salam.
Pendahuluan 1. Melakukan review materi pada pertemuan sebelumnya.
sebelumnya.
mahasiswa.
36
Penyajian
Kegiatan Inti:
1. Uraian
practice)
2. Contoh
3. Latihan
7. Tes formative
Penutup
1. Cpanel. (2017, November 10) About Cpanel. Retrivied

Desember 2, 2017 from Cpanel : https://cpanel.com/
2. Idwebhost. 2014. Pengertian Space Hosting dan
Sumber Belajar
Bandwith[Online].Tersedia:
https://blog.idwebhost.com/cpanel/pengertian-space-
hosting-dan-bandwith/
37
KONTRAK PERKULIAHAN
Nama Mata Kuliah : Pemograman Web
Kode Mata Kuliah : PTIF3405
Bobot SKS : 3 SKS
Semester : IV (empat)
Hari Pertemuan : Selasa
Jam / Pukul : IV (13.30 – 15.10)
Tempat Perkuliahan : Ruangan Kelas C1 FTI
Dosen Pengampu : Chairul Imam ,S.Kom.,M.Kom
No HP / email : 082277636382/ chairulimam313@gmail.com
1. Manfaat Mata Kuliah

Mata kuliah ini merupakan mata kuliah wajib yang diberikan pada
mahasiswa semester IV ; Setelah mengikuti perkuliahan ini mahasiswa
diharapkan mampu meningkatkan kemampuan berpikir secara logis,
mengembangkan cara berpikir dengan sistematis, melatih teliti terhadap detail,
meningkatkan kemampuan dalam mengatasi masalah, sesuai dengan jenisnya
masalahnya. Disamping itu juga diharapkan mahasiswa mampu merancang dan
mengimplementasikan web dengan baik. Diakhir perkuliahan diharapkan
mahasiswa mampu melakukan analisis terhadap masalah dalam pembuatan web
dan mampu menjelaskan programan yang digunakannya.
2. Deskripsi Mata Kuliah
Didalam mata kuliah ini dipelajari pengetahuan tentang web beserta
teknologinya serta keahlian untuk mengembangkan situs web menggunakan
metode dan cara yang tepat. Pengetahuan dan teknologi web yang akan dipelajari
termasuk didalamnya teknologi jaringan internet, terminologi web, bahasa
standar web HTML, CSS, dan Javascript, DOM, bahasa PHP, prinsip-prinsip
desain dan interaksi web, konsep arsitektur informasi, aksesibilitas, usabilitas,
dan findabilitas, serta proses hosting dan manajemen situs secara online..
3. Kompetensi Umum
Mahasiswa memahami HTML, CSS, dan Javascript, DOM, bahasa PHP,
CMS Wordpress, database, Cpanel .
4. Kompetensi Khusus
Mahasiswa yang telah menyelesaikan mata kuliah ini akan dapat
mengembangkan situs web berdasarkan tahapan pengembangan arsitektur
informasi, menggunakan prinsip-prinsip desain web dan interaksi yang benar,
menggunakan bahasa standar web seperti HTML untuk menyusun struktur
halaman web, CSS untuk mengatur tampilan halaman, Javascript untuk
menambahkan elemen interaktif dan dinamis, dan PHP untuk memperluas
fungsional situs web sehingga dapat mengolah data yang disimpan dalam
database mysql, yang pada akhirnya situs web yang dihasilkan akan memenuhi
tingkat aksesibilitas, usabilitas, dan findabilitas yang memadai. Dengan cara
demikian, ketika aplikasi atau situs web dipublikasikan oleh mahasiswa, maka
diharapkan akan memenuhi kriteria web yang standar dan mampu menarik target
audiens.
38
5. Strategi Pembelajaran
Strategi pembelajaran yang digunakan dalam pembelajaran ini bervariasi;
seperti:
a. Kelompok diskusi
b. Penyelidikan dan khasus
c. Pertanyaan dan Jawaban
d. Pembelajaran Ilmiah
e. Berbagi Ide
f. Dan lain – lain
6. Materi Pokok
Materi yang disajikan dalam mata kuliah ini adalah:
1. a. Pengertian Website.
b. Pengertian Pemrograman Web.
c. Bahasa Skrip Pemrograman Web.
d. Istilah-Istilah dalam Pemrograman Web.
e. Struktur Navigasi.
f. Text Editor.
2-3. 2. Pengertian HTML:
1) Pengertian Hypertext Markup Language (HTML)
2) Struktur Dasar HTML
3. Format HTML dan Tabel HTML:
1) Html Format teks
2) Pembuatan Tabel Menggunakan HTML
4-5.4. Bagian-bagian CSS dan Basic Element:
1) Pengenalan CSS
2) BASIC ELEMENT STYLING
5. CSS Box Model
6-7. 6. Tentang PHP Dan Instalasi:
1) Tentang PHP
2) Instalasi Apache dan PHP
7. memahami tag pada PHP serta mengetahui struktur kontrol:
1) Memahami tag-tag dalam PHP
2) Memahami tentang struktur kontrol
8. Ujian Tengah Semester
9-10. 9. Database MySQL
1) Mengenal MySQL
2) Fungsi – Fungsi Pada MySQL
3) Administrasi MySQL
10. Membahas tentang DDL dan DML serta seleksi data:
1) DDL ( Data Definiton Language )
2) DML (Data Manipulation Language)
3) Seleksi Data
39
11-12. 11. Pengenal CMS wordpress serta database dan instalasi Xammp :
1) Pengenal CMS wordpress
2) Pembuatan Database WEB
3) Instalasi Xampp
12. Instalasi wordpress
13-14. 13. Pengenalan dan proses pengelola domain:
1) Pengenalan Cpanel
2) Mengelola Domain Cpanel
14. proses pengelola file website dan instal aplikasi di cpanel :
1) Mengelola File Website Di Cpanel
2) Instal Aplikasi Di Cpanel
15. KUIS
16. Ujian Akhir Semester
7. Bahan Bacaan / Referensi
Bahan Referensi dari mata kuliah ini adalah sebagai berikut:
1) Andi, Kristanto. 2018. Perancangan Sistem Informasi dan
Aplikasinya.Yogyakarta: Gava Media.
2) Madcoms. 2016. Sukses Membangun Toko Online dengan PHP & MySQL.
Yogyakarta: Andi.
3) Rerung, R.R. (2018). Pemrograman Web Dasar. Yogyakarta: Deeppublish.
4) Rusli, Ansari Saleh Ahmar dan Abdul Rahman. , 2019, Pemrograman Website
Dengan PHP-MySQL untuk Pemula, Sulawesi Selatan : Yayasan
Ahmar.Cendikia Indonesia.
5) Rizkita, N., Rosely, E., & Nugroho, H. (2018). Aplikasi Pendaftaran dan
Transaksi Pasien Klinik Hewan di Bandung Berbasis Web. EProceedings of
Applied Science, 4(3), 1512–1520.
6) Solichin, A. (2016). Pemrograman Web Dengan PHP dan MySQL. Jakarta:
Budi Luhur.
7) Supono and V. Putratama, Pemrograman Web dengan Menggunakan PHP dan
Framework Codeigniter, 1st ed. Yogyakarta: Deepublish, 2018.
8) Wardana. (2016). Aplikasi Website Profesional dengan PHP dan jQuery.
Jakarta: PT. Elex Media Komputindo.
9) Wijianto, R., Anggoro, A., Informasi, S., & Informatika, M. (2018). Sistem
Informasi Pendaftaran Seleksi Kerja Berbasis Web Pada Bkk ( Bursa Kerja
Khusus ) Tunas Insan Karya Smk Negeri 2, 6(1), 76–84.
10) Yeni Susilowati. Modul E-Commerce-Teaching Factory For Students. Mutiara
Publisher, 2019.
8. Tugas-tugas
Tugas – tugas yang diberikan kepada mahasiswa adalah berupa:
1) Praktek Pembuatan web sederhana.
2) Praktek Pembuatan web menggunakan database.
3) Praktek Pembuatan web cms wordpress.
4) Praktek Pembuatan web online
5) Analisis Artikel pemprograman web dari jurnal
40
9. Kriteria dan Standar Penilaian
Penilaian dilakukan sesuai dengan aturan yang ada di Universitas Battuta,
yakni meliputi Sikap (15%), Tugas (terstruktur: 15% & mandiri:15%), Mid
– Test (25%), dan Ujian Akhir Semester (30%). Namun selain hal wajib
tersebut, dosen juga menilai proses yang terjadi selama perkuliahan, kehadiran,
keaktifan dalam memberikan respon selama perkuliahan, kerapian, tingkah laku,
presentase kelompok, serta kesopanan. Standar penilaian yang digunakan
untuk:
a. Sikap = 15 % diperoleh mahasiswa dari sikap, perbuatan, tingkah
laku, serta keaktifan mahasiswa merespon perkuliahan pada saat
dosen memberikan pertanyaan setiap masuk perkuliahan, dan pada
saat presentase tugas kelompok.
b. Tugas = 30% diperoleh mahasiswa dari tugas-tugas yang diberikan
kepada mahasiswa selama proses perkuliahan, baik dalam bentuk
individu maupun kelompok baik itu terstruktur maupun tidak, dan
(15%), ditambah dengan tugas akhir (15%);
c. Mid – Tes = 25% diperoleh dari hasil mid semester mahasiswa setelah
mengikuti perkuliahan selama 6 – 7 pertemuan.
d. Ujian Akhir Semester = 30% diperoleh dari nilai ujian akhir semester
yang dilakukan setelah pertemuan memenuhi batas 14 – 16 x
pertemuan.
e. Pertemuan ke – 16 merupakan ujian akhir semester yang dilakukan
setelah proses pembelajaran berakhir.
Nilai akhir mahasiswa terdiri dari empat komponen di atas, kemudian
ditambah dengan hal – hal lain yang menjadi perhatian seperti disebutkan di
atas yang digunakan untuk menambahi nilai Quis, Tugas, sehingga nilai akhir
mahasiswa dapat memenuhi target yang ditentukan.
Seluruh komponen penilaian (4 aspek) harus lengkap, apabila tidak
melengkapi sampai 1 (satu) minggu setelah ujian akhir berlangsung,
mahasiswa dinyatakan tidak lulus mata kuliah yang bersangkutan.
10. Tata Tertib Siswa dan Dosen
Dalam mengikuti perkuliahan mahasiswa harus mematuhi segala
aturan yang ditetapkan oleh dosen, seperti di bawah ini:
a. Terdaftar sebagai mahasiswa pada mata kuliah Pemograman web
(Dibuktikan dengan KRS).
b. Memasuki perkuliahan ON TIME! Hanya diberikan 30 menit dispensasi
bagi kelas yang mulai kuliah 13.30 WIB bagi mahasiswa yang terlambat
datang; bagi yang melewati waktu yang telah ditentukan, tidak
dibenarkan lagi mengikuti perkuliahan, kecuali hanya satu kali
keterlambatan.
c. Harus menghadiri perkuliahan sebanyak 75% dari pertemuan yang telah
ditetapkan! Bagi mahasiswa yang hanya memiliki kehadiran 70 – 74%
maka diberikan tugas tambahan berupa resume materi pembelajaran,
41
makalah, atau yang lainnya.
d. Mahasiswa yang tidak bisa menghadiri perkuliahan pada hari yang
telah ditetapkan dapat memberikan informasi melalui kosma,
menelepon dan / atau mengirim sms / chats kepada dosen yang
bersangkutan!
e. Tidak mengaktifkan handphone (HP) selama masa perkuliahan!
f. Memiliki tingkah laku, perbuatan, dan sikap yang baik; baik di dalam
perkuliahan, di lingkungan kampus, maupun di luar kampus, selama
menjadi mahasiswa yang mengikuti perkuliahan.
g. Berpakaian dan bertingkah laku Islami.
h. Bagi mahasiswi tidak mengenakan perhiasan yang berlebihan, serta
menggunakan make up.
i. Memiliki grup Whats App sehingga diskusi dan informasi dapat
dilakukan dengan kondusif dan aktif.
j. Memiliki kelompok presentasi, aktif dalam diskusi, dan tidak mengganti
anggota kelompok tanpa izin dari dosen bersangkutan.
k. Makalah yang ditulis, harus memiliki minimal 5 sumber referensi,
sumber tersebut harus terbitan di atas tahun 2015, dengan format
penulisan makalah ilmiah.
l. Makalah selain dikirimkan ke grup WA satu hari sebelum presentase
juga didistribusikan kepada seluruh mahasiswa yang ada di kelas, “bukan
satu makalah per- grup” sementara kepada dosen “menyerahkan makalah
dan powerpoint”.
m. Makalah disajikan dengan menggunakan infokus yang telah
disediakan oleh dosen; namun apabila kondisi tidak memungkinkan
dapat menggunakan media lainnya seperti papan tulis maupun karton
manila.
n. Makalah yang telah direvisi atas koreksian dosen dan saran mahasiswa
lain di up-load ke classroom, atau blog.
o. Semua makalah, power point serta tugas, baik pribadi maupun
kelompok di akhir semester dikumpulkan oleh kosma dan dikirimkan
secara kolektif ke email dosen.
p. Mahasiswa yang tidak menyerahkan tugas yang diberikan pada
waktunya, akan berakibat pengurangan nilai atau bahkan penolakan
terhadap tugas yang diserahkan!
q. Mahasiswa berhak memberikan pertanyaan, ide, kritik, saran, koreksi,
atau masukan kepada kelompok penyaji, juga tidak menutup
kemungkinan kepada dosen yang memberikan perkuliahan, secara
sopan!
r. Mahasiswa yang ingin berbicara di dalam kelas untuk memberikan
masukan, pertanyaan, kritik dan lain-lain, haruslah dengan sopan
serta dengan menyebutkan identitas!
s. Penilaian akhir berdasarkan:
1. Keaktifan dalam memberikan pertanyaan, ide, saran, kritik, dan
lainnya.
2. Kehadiran perkuliahan.
3. Tugas-tugas.
4. Sikap dan tingkah laku.
42
5. Quis
6. Ujian Pertengahan Semester.
7. Ujian Hasil Semester.
t. Hal lain yang berkembang dalam perkuliahan akan disepakati

dalam perkuliahan! Disamping aturan yang harus diikuti oleh
mahasiswa, dosen juga harus:
1. Hadir tepat waktu perkuliahan!
2. Memberikan kabar berita atas ketidakhadiran dalam perkuliahan.
3. Apabila proses pembelajaran tidak dapat berlangsung karena hal
tertentu, maka dosen harus memberikan informasi serta
memberikan bahan perkuliahan yang dibutuhkan.
4. Menerima kritik dan saran mahasiswa secara terbuka.
5. Penilaian dilakukan harus bersifat objektif.
11. Jadwal Kuliah
Jadwal perkuliahan tatap muka dilaksanakan setiap minggu pada:
a. Hari Selasa, Pukul 13.00 – 14.15 WIT
b. Disamping tatap muka juga dilakukan kuliah terstruktur dan tugas kelompok.
12. Lain-lain
Apabila ada hal-hal di luar kesepakatan ini yang perlu disepakati, dapat
dibicarakan secara teknis pada setiap acara perkuliahan. Apabila ada
perubahan isi kontrak perkuliahan, akan ada pemberitahuan terlebih dahulu.
Kontrak Perkuliahan ini dilaksanakan mulai dari disampaikannya
kesepakatan ini.
Mengetahui Medan, 13 September 2021

Ketua Program Studi Dosen Pemograman Web
Teknologi Informasi
Aripin Rambe, S.Kom., M.Kom Chairul Imam, S.Kom., M.Kom

NIDN. 0118027201 NIDN. 0131039302
43
BAHAN AJAR
MATERI 1
1.1 Pengertian Website

Sebuah situs web (sering pula disingkat menjadi situs saja, website atau site )
adalah sebutan bagi sekelompok halaman web ( web page ), yang umumnya merupakan
bagian dari suatu nama domain ( domain name ) atau subdomain di World Wide
Web (WWW) di Internet. Sebuah web page adalah dokumen yang ditulis dalam
format HTML (Hyper Text Markup Language), yang hampir selalu bisa diakses
melalui HTTP, yaitu protokol yang menyampaikan informasi dari server website untuk
ditampilkan kepada para pemakai melalui web browser baik yang bersifat statis maupun
dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-
masing dihubungkan dengan jaringan-jaringan halaman (hyperlink) (Rusli, Ansari
Saleh Ahmar dan Abdul Rahman. , 2019 ).
Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi
informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi
website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari
pemilik serta pengguna website. Contoh website statis adalah berisi profil
perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply, dll. Dalam sisi
pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja.
Halaman-halaman sebuah situs web diakses dari sebuah URL yang menjadi
“akar” ( root ), yang disebut homepage (halaman induk; sering diterjemahkan menjadi
“beranda”, “halaman muka”), dan biasanya disimpan dalam server yang sama.
Tidak semua situs web dapat diakses dengan gratis. Beberapa situs web memerlukan
pembayaran agar dapat menjadi pelanggan, misalnya situs-situs yang menampilkan
pornografi, situs-situs berita, layanan surat elektronik ( e-mail ), dan lain-lain. Website ini
dibuka melalui sebuah program penjelajah (Browser) yang berada di sebuah komputer.
Program penjelajah yang bisa digunakan dalam komputer diantaranya: IE (Internet
Explorer), Mozilla, Firefox, Netscape, Opera dan yang terbaru adalah Google Chrome.
44
1.1. Internet Explorer
1.2 Jenis-Jenis Website
Menurut Yeni Susilowati (2019). Seiringan dengan perkembangan teknologi
informasi yang begitu cepat, website juga mengalami perkembangan yang sangat berarti.
Dalam pengelompokkan jenis web, lebih diarahkan berdasarkan kepada fungsi, sifat atau
style dan bahasa pemrograman yang digunakan.
1. Adapun Jenis-jenis web berdasarkan sifat atau style nya yaitu:
a. Website Dinamis, merupakan sebuah website yang menyediakan content atau isi
yang selalu berubah –ubah setiap saat. Bahasa pemrograman yang digun akan
antara lain PHP,ASP, NET dan memanfaatkan database MySQL atau MS SQL.
Misalnya website www.artikel.com, www.detik.com, www.tecnomobile.co.cc ,
dan lain-lain.
b. Website Statis, merupakan website yang contentnya sangat jarang diubah. Bahasa
pemrograman yang digunakan adalah HTML dan belum memanfaatkan database.
Misalnya: web profile organisasi, dan lain -lain.
c. Website interaktif pada dasarnya termasuk dalam kategori website dinamis,
dimana isi informasinya selalu diperbaharui dari waktu ke waktu. Hanya saja, isi
informasi tidak hanya diubah oleh pengelola website tetapi lebih banyak dilakukan
oleh pengguna website itu sendiri. Contoh website jenis ini yaitu website jejaring
sosial seperti facebook dan twitter atau website marketplace seperti bukalapak,
tokopedia, dan sebagainya.
1.3 Pengertian Pemrograman Web
Menurut Supono dan Putratama (2018). Pemrograman web (web programming)
terdiri dari kata pemrograman dan web. Permograman sendiri dapat diartikan sebagai
proses atau cara pembuatan program menggunakan bahasa pemrograman. Adapun bahasa
permograman merupakan bahasa yang digunakan untuk memberikan intruksi kepada
komputer sehingga komputer dapat memproses data dan menampilkan informasi sesuai
yang dikehendaki oleh pemrogram. Dengan demikian pemrograman web dapat diartikan
sebagai kegiatan pembuatan program atau aplikasi berbasis web menggunakan bahasa
pemrograman tertentu sehingga dapat memproses data dan menghasilkan informasi sesuai
yang dikehendaki oleh pemilik website.
45
1.4 Bahasa Pemrograman Web
Bahasa pemrograman web terdiri dari beberapa unsur bahasa. Setidaknya terdapat
5 bahasa utama yang biasa digunakan dalam membuat website dinamis dimana masing-
masing memiliki perannya sendiri-sendiri, yaitu sebagai berikut:
1. HTML, berperan sebagai pembentuk strukutur halaman website yang
menempatkan setiap elemen website sesuai layout yang diinginkan.
2. CSS, berperan sebagai pembentuk desain website dengan mengatur setiap elemen
HTML agar tampil menarik pada browser.
3. PHP, berperan sebagai pemroses data pada sisi server sesuai yang diminta oleh
client menjadi informasi yang siap ditampilkan, juga sebagai penghubung aplikasi
web dengan database. Selain PHP, dapat juga menggunakan bahasa pemrograman
lain seperti ASP, Java, dan sebagainya.
4. JavaScript, berperan sebagai bahasa yang memproses data pada sisi client serta
dapat memanipulasi HTML dan CSS secara dinamis.
1.5 Aplikasi Pengembang Web
Menurut Rizkita et al.,( 2018). Untuk pengembangan apikasi web tentu dibutuhkan
berbagai macam aplikasi yang membantu web programer dalam merancang, menuliskan
skrip program maupun menampilkan hasil program. Berikuti ini berbagai jenis aplikasi
yang digunakan dalam pengembangan aplikasi web:
1.5.1 Web Authoring
Web Authoring merupakan perangkat lunak yang biasanya bersifat ”WYSIWYG”
(What You See Is What You Get) yaitu apa yang dilihat merupakan apa yang akan
dihasilkan. Aplikasi jenis ini sangat memudahkan bagi pemula, karena setiap mengetikkan
skrip program langsung terlihat hasilnya. Bahkan biasanya tersedia juga tool drag & drop
yang memudahkan web designer dalam membuat elemen website. Yang termasuk jenis
aplikasi ini diantaranya: Adobe Dreamweaver, Microsoft Expression Web, Nvu dan
sebagainya dibagian halaman dibawah ini.
46
1.2. Jenis Aplikasi Web Authoring
1.5.2 Text Editor
Text editor memiliki fungsi yang sama dengan web authoring yaitu untuk
mengetikkan skrip program, hanya saja tidak bersifat WYSIWYG, sehingga untuk
menampilkan hasilnya memerlukan web browser. Namun, karena lebih ringan dan
lisensinya yang kebanyakan open source banyak juga yang lebih memilih menggunakan
text editor dibanding aplikasi sekelas Adobe Dreamweaver. Yang termasuk dalam aplikasi
jenis ini yaitu Notepad, Notepad++, Sublime Text, Bracket, dan sebagainya. Dalam
pembuatan buku ini, penulis lebih banyak menggunakan Sublime Text dan beberapa
menggunakan Notepad++.
1.3. Jenis Aplikasi Text Editor
47
1.5.3 Web Browser
Web browser digunakan untuk menampilkan dan mengetes hasil program.
Beberapa skrip CSS3 dan HTML5 ada yang hanya support pada web browser tertentu dan
tidak support pada yang lain, sehingga menggunakna lebih dari satu web browser akan
lebih baik. Walaupun untuk kebanyakan browser versi terbaru sudah support hampir
semua fitur CSS3 dan HTML5.
1.4. Jenis Aplikasi Web Browser
1.5.4 Web Server

Web server merupakan perangkat lunak yang berfungsi untuk menerima
permintaan (request) melalui protokol HTTP atau HTTPS dari client kemudian
mengirimkan kembali dalam bentuk halaman-halaman web. Contoh yang termasuk web
server adalah Apache. Dalam penggunaanya, biasanya sudah jadi satu paket dengan PHP
dan MySQL. Contoh paket yang sudah berisi Apache, PHP dan MySQL diantaranya
Xampp dan Appserv. Dalam buku ini, penulis menggunakna Xampp versi 5.6.30 yang di
dalamnya berisi Apache 2.4.25 dan PHP 5.6.30.
1.5. Jenis Aplikasi Web Server
48
1.6 Istilah-Istilah Pemrograman Web
Sebelum lebih jauh belajar pemrograman web, alangkah baiknya kenali dulu
berbagai istilah yang berkaitan dengan pemrograman web. Sehingga, akan lebih mudah
dalam memahami setiap keterangan yang menggunakan istilah-istilah tersebut. Beberapa
istilah yang sering digunakan diantaranya:
1. Domain, merupakan nama unik yang mewakili alamat IP dari server website
berupa kata yang mudah diingat sehingga lebih mudah dalam menemukan atau
memanggil alamat sebuah website pada internet.
2. URL, merupakan singkatan dari Uniform Resources Locator yaitu nama unik yang
mengidentifikasi letak sumber daya website berupa file HTML, gambar, video dan
sebagainya yang biasanya akan tampil pada addres bar browser ketika sumber daya
tersebut diakses.
3. HTTP, merupakan singkatan dari Hypertext Transfer Protocol yaitu protokol yang
mengatur pengiriman data dari client ke server atau sebaliknya dan
menejemahkanya menjadi informasi yang dapat dibaca oleh pengguna website.
49
BAHAN AJAR
MATERI 2-3
2.1 Mengenal HTML
Menurut Rerung, (2018). HTML merupakan singkatan dari Hypertxt Markup
Language yaitu bahasa standar web yang dikelola penggunaanya oleh W3C (World Wide
Web Consortium) berupa tag-tag yang menyusun setiap elemen dari website. HTML
berperan sebaga penyusun struktur halaman website yang menempatkan setiap elemen
website sesuai layout yang diinginkan. HTML biasanya disimpan dalam sebuah file
berekstensi .html. Untuk mengetikkan skrip HTML dapat menggunakan text editor seperti
Notepad sebagai bentuk paling sederhana atau text editor khusus yang dapat mengenali
setiap unsur skrip HTML dan menampilkanya dengan warna yang berbeda sehingga
mudah dibaca, seperti Notepad++, Sublime Text, dan masih banyak lagi aplikasi lain yang
sejenis.
2.1.2 Unsur HTML

HTML terdiri atas unsur-unsur yang membentuk struktur skrip HTML, yaitutag,
atribut, dan elemen.
2.1.3 Tag
Tag adalah simbol khusus (markup) berupa dua karakter "<" dan ">" yang
mengapit suatu teks sebagai nama tag. Contohnya tag <body> adalah tag dengan nama
body. Sebagian besar tag memiliki tag pembuka dan tag penutup yang membatasi
pengaruh dari tag tersebut. Namun, terdapat sebagian kecil tag yang tidak memiliki tag
penutup. Penutup tag ditambah simbol “/” setelah tanda “<”, misalnya </body> yang
merupakan penutup tag <body>. Berikut adalah karakteristik dari tag pada HTML:
1. Tag boleh ditulis dengan huruf besar (kapital), kecil atau campuran, karena
sifatnya yang incase sensitive. Misalnya: <BODY>, <body> atau <Body>
semuanya memiliki hasil yang sama. Namun, untuk standarnya lebih baik
menggunakan huruf kecil semua.
2. Tag bisa berisi tag lain. Tag yang dibuka dahulu ditutup terakhir, sedangkan tag
yang dibuka terakhir ditutup pertama. Namun, kesalahan dalam struktur ini tidak
mengakibatkan error. Misalnya: <p>I like <b>HTML</b></p>
50
2.1.4 Atribut
Atribut yaitu property yang mengatur bagaimana elemen dari suatu tag akan
ditampilkan. Atribut ditulis di dalam simbol tag setelah nama tag dengan dipisahkan oleh
spasi. Atribut ada yang memiliki nilai dan ada yang tidak memiliki nilai. Nilai suatu
atribut ditulis di dalam tanda petik ganda (“…”), dipisahkan dengan simbol sama dengan
(=) dari nama atribut. Misalnya: <p align=”center”>.Berikut adalah karakteristik dari
atribut pada HTML:
1. Atribut hanya ditulis pada tag pembuka.
2. Setiap tag memiliki atribut yang berbeda-beda yang dapat diterapkan pada tag
tersebut.
3. Beberapa atribut ada yang dapat diterapkan ke semua tag atau disebut global
attribute, misalnya: class, id, style, dan sebagainya.
4. Sebuah tag dapat ditulis dengan satu atribut, banyak atribut, atau tanpa atribut
sama sekali.
5. Jika tag ditulis dengan banyak atribut, masing-masing atribut dipisahkan oleh
spasi.
2.1.5 Element
Element adalah bagian dari skrip HTML yang terdiri dari tag pembuka, isi element
dan tag penutup. Jika sebuah element ditampilkan pada browser, maka hanya isi element
yang tampil di browser. Misalnya:
<p> Aku senang belajar HTML</p>
Jika ditampilkan pada browser, maka hanya tulisan “Aku senang belajar HTML” yang
akan tampil di browser.
2.2 Struktur Dasar HTML

HTML merupakan singkatan dari HyperText Markup Language adalah script
untuk menyusun dokumen- dokumen Web. Dokumen HTML disimpan dalam format teks
reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi
perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah sebagai berikut:
51
<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>
Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:

a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh
<body> adalah tag dengan nama body. Secara umum tag ditulis secara berpasangan, yang
terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter
"<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body>
ini adalah tag penutup isi dokumen HTML.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser
digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen HTML

Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML

Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling
tumpang tindih dengan pasangan tag-tag lainnya. Contoh penulisan tag-tag yang benar
<p>
<b>
................
</b>
</p>
c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas
nama dan nilai. Penulisannya adalah sebagai berikut:
52
<TAG>
nama-attr="nilai-attr" nama-
attr="nilai-attr"
.................
.................
</TAG>
Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai
contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web
menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
..........
</html>
e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di
antara tag <html> dan tag
</html>. Sintaks:
<head>
...........
</head>
f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag
<title> dan tag
</title> terletak di antara tag
<head> dan tag </head>. Sintaks:
<title>
.........
</title>
53
g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>
terletak di bawah tag <head> dan tag </head>. Element BODY mempunyai attribute-
attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang
akan ditampilkan pada browser. Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">

..............
</body>
3.1. Html Format Teks

Format Teks Dalam HTML digunakan untuk membuat teks yang ada dalam
dokumen html menjadi kelihatan berbeda,menarik dan memiliki arti serta dapat
memberikan kemudahan dalam menuliskan teks yang berupa rumus-rumus atau lambang
dari suatu disiplin ilmu.
a. ELEMENT BR (Line Break)

Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag
penutup. Sintaks:
<br>
b. ELEMENT P (Paragraph)
Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan
akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh
paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan
baris kosong di akhir paragraf.
Element P mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang
menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").Sintaks:
<p align="left"|"center"|"right">
.........................
</p>
54
c. ELEMENT H1,H2,H3,H4,H5,H6 (Header)
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis
ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah
H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right"
yang menspesifikasikan posisi horizontal dari header (default: "left").
Sintaks:
<hx align="left"|"center"|"right">
..........................
</hx>
x : 1 ... 6
ELEMENT B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold). Sintaks:
<b>
..........................
</b>
d. ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic). Sintaks:
<i>
..........................
</i>
e. ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks:
<u>..........................</u>
f. ELEMENT PRE (Preformated text)
Element PRE berfungsi untuk menampilkan teks seperti apa adanya. Sintaks:
<pre>..........................</pre>
h. ELEMENT CENTER
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal
ditengah. Sintaks:
<center>.......................... </center>
55
i. ELEMENT BASEFONT
Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web
browser. Attribute dari element ini adalah size yang merupakan ukuran huruf dengan nilai
"1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3"
pixel. Element ini tidak mempunyai tag penutup.
Sintaks:
<basefont size="pixel"> ELEMENT FONT
j. ELEMENT HR (Horizontal Rule)
Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak
mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara
horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width
untuk ukuran panjang garis ("persen"), dan noshade (garis solid).
Sintaks:
<hr align="left"|"center"|"right" size="pixel" width="persen" noshade>
3.2. Pembuatan Tabel Menggunakan HTML
a. Tabel
Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca Mengatur
tampilan homepage agar lebih menarik. Salah satu fungsi dan atribut dijelaskan
pada tabel dibawah ini
3.2. Tabel Atribut dan Fungsi
Atribut Fungsi
Border Menentukan ukuran border/garis table
Width Menentukan lebar table
Height Menentukan tinggi table
Bgcolor Menentukan background table
Background Menentukan gambar yang digunakan untuk background

table
Color Untuk mengatur warna suatu sel dalam table
56
Align Mengatur bentuk perataan horizontal
Valign Mengatur bentuk perataan vertical
Rowspan Menggabungkan beberapa baris

Colspan Menggabungkan beberapa kolom
Cellspacing dan cellpadding Mengatur spasi antar sel dan spasi dalam sel
b. Membuat tabel sederhana
Tag yang diperlukan:
Membuat baris: <tr> (table row)
Membuat kolom: <td> (table data) Tampilan
<html>
<head>
<title> Belajar Membuat Tabel </title>
</head>
<body>
<table border="1">
<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>
<tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>
</table>
</body>
</html>
c. Menambahkan judul tabel:
Judul tabel: <caption>
Judul baris/kolom: <th> (table header)
<html>
<head>
</head>
<body>
<table border="1">
<caption align="top"> <b> DAFTAR MAHASISWA </b>
</caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td>1</td><td>06.100.001</td><td>Amin A.
Angkasa</td></tr>
<tr><td>2</td><td>06.100.002</td><td>Beni B. 57
Bernardi</td></tr>
</table>
</body>
</html>
d. Membuat warna pada table
Atribut: bgcolor
Contoh:
<body bgcolor="purple">
<font size="3" face="arial" color="yellow"> Tampilan Hasil:
<table border="2" bgcolor="white" align="center">
<caption align="bottom">
<b> Tabel Daftar Mahasiswa </b> </caption>
<tr bgcolor="yellow">
<th>No</th><th>NPM</th><th>Nama</th></tr>
<tr bgcolor="cyan"><td align="center"
width="20">1.</td>
<td align="left" valign="middle“
width="80" height="40">06.100.001</td>
<td align="left" valign="middle“
width="180" height="40">Amin A.
Angkasa</td></tr>
<tr><td bgcolor="blue" width="20">2.</td>
<html>
<td bgcolor="red" align="left" valign="middle"
<head>
width="80" height="40">06.100.002</td>
<td bgcolor="green" align="left" valign="middle"
</head>
width="180" height="40">Beni B.
<body>
Bernardi</td></tr>
<table
e. border=1 bgcolor="green"
Mengatur Lebar Dan Tinggi width=300
Suatu height=100>
Tabel
</table>
<tr height=30>
</body>Atribut: width 1dan height
<td>Baris Kolom 1</td>
ukuran % (max 100%) 2</td>
<td>Baris 1 Kolom
</tr>
ukuran pixel
<tr height=70>
<td>Baris 2 Kolom 1</td>
<td background="./images.jpg">
Baris 2 Kolom 2 <br><br> Background bagus</td>
Tampilan Hasil:
58
</tr>
</table>
</body>
</html>
f. Perataan Dalam Tabel
horisontal: atribut align  utk <caption>, <tr>, <td> dan <th>
vertikal: atribut valign  utk <tr>, <td> dan <th>
<table border="1" align="center">

Tampilan Hasil:
<caption align="top">
<b> DAFTAR MAHASISWA </b> </caption>
<tr><th>No</th><th>NPM</th><th>Nama</th></tr>
<tr><td align="center" width="20">1.</td>
<td align="center" valign="middle"
width="80" height="50">06.100.001</td>
<td align="right" valign="top"
width="180" height="50">Amin A. Angkasa</td></tr>
<tr><td width="20">2.</td>
<td align="left" valign="top"
width="80" height="70">06.100.002</td>
<td align="left" valign="bottom"
width="180" height="70">Beni B. Bernardi</td></tr>
</table>
g. Cellpading dan cellspacing

atribut cellpading: mengatur spasi antara border dengan tulisan
atribut cellspasing: mengatur spasi antar 2 buah sel
<table border="1" bgcolor="white" align="center“ cellpadding="10"

cellspacing="12">
Tampilan Hasil:
<caption align="top">
<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th> 59
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th
colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<tr><td align="center" width="20">1.</td>
<td align="left" valign="middle" width="80"
60
BAHAN AJAR
MATERI 4-5
4.1. Apa itu CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan
merupakan bahasa pemograman. Sama halnya styles dalam aplikasi word processing
seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, sub-bab,
bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman
web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengatur ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf,
spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya
CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang
berbeda. Sumber dan informasi selengkapnya, bisa ditemukan di :
http://www.w3.org
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
4.1.1. Sintaks Dasar pada CSS

Sintaks pada CSS terdiri dari dua bagian, yakni bagian Selector dan bagian
Declaration. Di dalam Declaration terdapat sebuah Property dan Value. Ilustrasinya bisa
dilihat pada gambar di
bawah ini :
Gambar 4.1. Property dan Value

Selector adalah bagian pada HTML yang akan menjadi target dari pemformatan
oleh CSS, umumnya adalah berupa elemen HTML. Sedangkan Declaration adalah bagian
dari sintaks CSS yang berisi format-format (styles) yang dinyatakan dengan Property dan
61
Value. Sebuah baris kode CSS bisa terdapat satu atau banyak Declaration. Aturan
penulisannya :
1) Selector ditulis pada bagian awal baris kode CSS

2) Declaration ditulis antara tanda “{“…. “}”
3) Penulisan Property dan Value pada Declaration dibatasi dengan tanda “:”
4) Setiap Declaration diakhiri dengan tanda “;” sebelum ditulis Declaration baru.
Contoh
Berikut adalah contoh penulisan baris kode CSS :
p {color:blue;text-align:center;}
Atau, agar mudah dibaca bisa ditulis sebagai berikut :

p { color:blue;
text-align:center;
}
Penjelasan
Dari contoh di atas, bisa dijelaskan sebagai berikut :
 Selector yang digunakan adalah “p”, yakni sebuah tag HTML
yang digunakan untuk mendefinisikan sebuah paragraf.
 Declaration pada contoh diatas dinyatakan dengan “color:blue;"dan
“text-
align:center;”
 Maka baris CSS tersebut akan menjadikan elemen paragraph
(p) dalam dokumen HTML sebagai target pemformatan.
Dalam hal ini, konten dalam elemen “p” akan diformat dengan
warna biru dan perataan teksnya adalah center.
4.1.2. Bentuk Komentar pada CSS (CSS Comments)
Komentar (comment) digunakan untuk memberikan penjelasan pada baris kode
CSS yang kita buat, dan akan sangat berguna ketika kita akan mengedit baris kode
tersebut di kemudian hari. Baris kode yang dinyatakan sebagai komentar, tidak akan
/* ini adalah baris komentar */

p {
color:blue;
text-align:center;
}
/* ini adalah baris komentar yang lain */
62
ditampilkan pada browser.Komentar pada CSS dimulai dengan tanda “/*” dan diakhiri
dengan tanda “*/”, contoh :
4.1.3. Jenis-Jenis Selector pada CSS

Selector pada sintaks CSS umumnya adalah berupa tag HTML, namun bisa juga
berupa atribut ID ataupun CLASS pada elemen HTML yang akan dilakukan pemformatan
tampilan (styling).
4.1.4. Selector berupa Tag HTML

Semua tag HTML bisa digunakan sebagai Selector pada CSS, penulisannya adalah
dengan menyebutkan nama dari tag tersebut.
Contoh :
body {background:#ff0000;}
h1 {font-size: 36px;color:blue;}
p {color:#333333;text-align:justify;}
4.1.5. Selector berupa atribut ID
Selector ID digunakan untuk melakukan pendefinisian style pada element HTML
tunggal dan bersifat unique. Selector ID menggunakan atribut ID pada tag HTML, yang
kemudian penyebutan dalam sintaks CSS menggunakan tanda “#” (tanda pagar).
Contoh :
File [index.html]
<p>artikel pada paragraf</>
<p>artikel pada paragraf</>
<p id=”penting”>artikel pada paragraf</>
Style.css
P {
text-align:justify;
color:grey;
}
#penting {
text-align:center;
color:red;
Pemformatan dokumen HTML dengan bentuk CSS tersebut akan menghasilkan
tampilan halaman web dimana dua paragraf pertama berwarna abu-abu (grey) dengan
alignment “justify”, sedangkan paragraf ketiga, yang memiliki atribut ID=”penting”
akan terformat dengan alignment “center” dan warna teksnya adalah merah (CSS
dengan selector “#penting”). Artinya paragraf ketiga, akan berbeda dengan dua
63
paragraf diatasnya yang tidak memiliki atribut ID.
}
color: blue;
.biru{
}
color: red;
.merah{
}
text-alignment:justify;
font-size: 12px;
p{
4.1.6. Selector berupa atribut CLASS
Selector CLASS digunakan untuk mendefinisikan pemformatan elemen HTML
dengan membaca atribut CLASS pada tag HTML. Berbeda dengan Selector ID yang
digunakan untuk pemformatan elemen tunggal, Selector CLASS umumnya digunakan
untuk melakukan pemformatan pada satu atau lebih elemen HTML (group of elements).
Selector CLASS pada penulisan baris kode CSS menggunakan tanda “.” (tanda titik).
Contoh :
File [index.html]
<p class="merah">konten pada paragraf ke-1</p>
<p class="biru"> konten pada paragraf ke-2</p>
<p class="merah"> konten pada paragraf ke-3</p>
Style.css
Dengan bentuk seperti di atas, maka akan dihasilkan sebuah halaman web sejumlah
empat paragraf, dimana tiap paragraf memiliki ukuran huruf sebesar 12px dan alignment
teksnya adalah justify (CSS dengan selector “p”).
Dari keempat paragraf tersebut, juga akan dihasilkan tampilan berupa :
a. Paragraf ke-1 dan ke-3 memiliki warna teks merah (CSS dengan selector
“.merah”)
64
b. Paragraf ke-2 dan ke-4 memiliki warna teks biru (CSS dengan selector
“.biru”)
Namun, perlu diingat bahwa bentuk penulisan CSS seperti di atas (contoh pada
Selector Class) akan mengakibatkan semua elemen HTML yang memiliki atribut
class=”biru” akan ditampilkan dengan warna biru, dan semua elemen HTML yang
memiliki atribut class=”merah” akan ditampilkan dengan warna merah juga, tidak hanya
berlaku pada elemen “p”.
Sebagai contoh, apabila dokumen HTML berbentuk seperti di bawah ini :

<p class="merah">konten pada paragraf ke-1</p>
<p class="merah"> konten pada paragraf ke-3</p>
<div class=”biru”>konten dalam div......</div>
Maka, apabila penulisan CSS seperti pada contoh di atas, akan menghasilkan
tampilan konten pada elemen div juga berwarna biru, karena elemen div memiliki atribut
class=”biru”. Untuk mengindari hal terserbut, atau agar pemformatan pada CSS hanya
berlaku pada elemen paragraf, maka penulisan pada CSSnya adalah sebagai berikut :
p{
font-size: 12px;
text-alignment:justify;
}
p.merah{
color: red;
4.1.7. Selector untuk Elemen Turunan

Dalam dokumen HTML, konten sebuah elemen bisa berupa elemen lainnya.
Maka diperlukan cara penulisan tersendiri untuk memilih sebuah elemen HTML yang
akan ditetapkan sebagai target pemformatan dengan CSS. Mari kita lihat contoh di bawah
<h1>Judul dengan <em>bagian penting</em> di dalamnya</h1>
<p>Artikel yang terdapat <em>bagian penting</em> di dalamnya</p>
ini :
Apabila kita ingin melakukan pemformatan pada elemen “em” yang berada pada elemen
“h1”, maka penulisan CSSnya adalah sebagai berikut :
65
4.1.8. Pengelompokan Selector (Grouping)
Declaration pada CSS bisa diterapkan untuk satu jenis atau beberapa jenis elemen
sekaligus. Caranya adalah dengan menuliskan beberapa Selector dalam satu baris kode
CSS yang dipisahkan dengan tanda “,” (koma) sebelum penulisan Declaration.
Contohnya, pada CSS dinyatakan :
h1, h2, h3, h4{

color:red;
}
Maka akan mengasilkan tampilan halaman web dimana konten pada elemen
“h1”, “h2”, “h3” dan “h4” memiliki warna yang sama, yakni merah. Demikian juga
body {background:lavender;color:#333333;}
h1{color:red;}
pemformatan untuk elemen yang lain bisa dilakukan dengan cara yang sama.
4.1.9. Mengintegrasikan CSS pada Dokumen HTML
Ada tiga cara untuk menerapkan pemformatan CSS pada dokumen HTML, yakni
dengan metode External Style Sheet, Internal Style Sheet dan Inline Style Sheet.Cara
pertama disebut denganExternal Style Sheet, yaitu dengan cara membuat dokumen CSS
yang terpisah, kemudian dibuat tautan dengan tag <link> pada elemen header dalam
dokumen HTML yang akan diterapkan pemformatan dengan CSS tersebut.
h1 em { color:red; }
Dengan penulisan CSS seperti di atas (menambahkan spasi antar Selector), maka hanya bagian elemen “em”
yang berada di dalam elemen “h1” saja yang akan ditampilkan dengan warna merah, sedangkan elemen “em”
Sebagai contoh,
diluar elemen baris
“h1” akankode
tetapCSS dinyatakan
tampil mengikuti sebagai
tampilanberikut
default.:
Disimpan dalam sebuah dokumen berformat style sheet dengan nama : mystyle.css
Maka, untuk menerapkan pemformatan tersebut ke dalam dokumen HTML, digunakan tag
<link> yang dituliskan pada elemen head sebagai berikut :
66
<head>
<title>Contoh penggunaan CSS External</title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
<head>
Note: Dalam contoh ini, file mystyle.css berada dalam satu folder dengan file HTML-nya.
Dengan cara ini, kita bisa menerapkan pemformatan CSS tersebut ke banyak
dokumen HTML, dan cukup menambahkan tautan untuk tiap masing-masing dokumen.
Keuntungan lainnya, adalah apabila suatu saat kita ingin mengganti format tampilan
halaman web dengan format tampilan yang baru, cukup mengganti tautan tersebut ke file
CSS baru yang akan. Digunakan.
4.1.10. Internal Style Sheet

Cara kedua adalah dengan menggunakan Internal Style Sheet, yakni dengan
cara menuliskan baris kode CSS pada elemen head menggunakan tag <style> seperti di
bawah ini :
<head>
<style>
body {background:lavender;color:#333333;}
h1{color:red;}
</style>
<body>
Cara ini biasa digunakan untuk melakukan pemformatan pada sebuah halaman
web yang akan ditampilkan berbeda dengan halaman web lainnya. Misalnya, apabila kita
memiliki lima halaman web yang sudah dihubungkan dengan sebuah file CSS, namun ada
satu halaman web yang memiliki format yang sedikit berbeda, maka digunakanlah
Internal style sheet.
4.1.11. Inline Style Sheet
Cara ketiga adalah menggunakan Inline Style Sheet, yaitu dengan menggunakan
atribut “style” pada tag-tag HTML yang akan ditambahkan pemformatan CSS. Misal, kita
akan membuat tampilan elemen h1 menjadi berwarna merah, maka penulisan elemen h1-
nya adalah sebagai berikut :
<h1 style=”color:red” >Ini adalah judul artikel</h1>
67
Atribut “style” pada tag HTML tersebut, bisa diberikan lebih dari satu property
CSS sama halnya dengan menggunakan Internal Style Sheet ataupun External Style Sheet.
4.2. BASIC ELEMENT STYLING
Pada bagian ini akan dibahas bagaimana cara melakukan pemformatan ( styling )
pada elemen HTML dengan menggunakan baris kode CSS. Terdapat 6 (enam) hal
mendasar yang akan dibahas, yakni : Background styling, Text styling, Font styling, List
styling, Link styling dan Table styling.
4.2.1. Background-color
Property “background-color” digunakan untuk mengatur latar belakang sebuah
elemen dengan nilai berupa warna.
Sintaks-nya :
background-color: color-value;
Keterangan :
a. Nilai warna (color-value) pada CSS biasanya menggunakan kode warna

dalam beberapa varian, yakni Hexadesimal color, RGB color dan Color-
name.
b. Untuk mengetahui kode warna yang bisa digunakan, bisa dilihat dari tabel
warna dasar (basic color) di bawah ini.
68
Tabel 4.1. Basic Color Keywords
Selain warna-warna dasar tersebut, kita juga bisa memilih warna-warna lain yang
lebih spesifik dan sesuai dengan kebutuhan desain website kita. Untuk mendapatkan nilai
warna yang diinginkan, kita bisa menggunakan aplikasi-aplikasi yang menyediakan fitur
color picker, seperti pada aplikasi Adobe Photoshop dan sejenisnya.
Contoh penerapan Property "background” : [ Index.html ]

<body>
<div class="artikel">
<h1>Judul Artikel</h1>
<p>text text text text text text text text text text text text
text text text text text text text text text text text text
</p>
</div>
</body>
[ Style.CSS ]
body { 69
background-color:rgb(153,204,255);
}
.artikel {
background-color: #CC6666;
Dengan bentuk file HTML dan deklarasi CSS seperti contoh diatas, akan
dihasilkan sebuah tampilan halaman web seperti gambar berikut :
Gambar 4.2. Hasil HTML dan deklarasi CSS

4.2.2. Background-image
Property “background-image” digunakan untuk menjadikan sebuah file gambar
(image) menjadi latar belakang pada sebuah elemen HTML.
Sintaks-nya :
background-image: url(‘url-file-gambar’);
Keterangan :
1. File gambar yang digunakan bisa berupa file *.jpg, *.png ataupun *.gif.
2. Secara default, gambar yang dijadikan background akan ditampilkan
berulang, secara horizontal dan vertikal.
3. Url file gambar bisa menggunakan relative path ataupun absolute url.
Contoh :
Edit Declaration untuk Selector “body” pada file CSS, sehingga menjadi seperti berikut :
body {
background-image : url(wallpaper.jpg);
}
Note : file “wallpaper.jpg” berada dalam folder yang sama dengan file “index.html”,
dengan ukuran file 200 x 200 pixel.
70
Hasilnya akan terlihat seperti gambar berikut :
Gambar 4.3. Hasil Selector “body” pada file CSS

4.2.3. Background-repeat
Property “background-repeat” digunakan untuk mengatur perulangan
(repeatation) pada gambar yang ditampilkan sebagai background dengan Property
“background-image”. Perulangan tampilan gambar tersebut, bisa diatur ke arah horizontal
(sumbu x ) ataupun ke arah vertikal (sumbu y).
Sintaks-nya :
Background-repeat: repeat | no-repeat | repeat-x | repeat-y;
Keterangan :
1. Value defaultnya adalah “repeat”, yaitu gambar ditampilkan berulang secara

horizontal dan vertikal.
2. No-repeat; gambar sebagai background hanya ditampilkan satu kali, tidak ada
perulangan.
3. Repeat-x; gambar ditampilkan berulang secara horizontal (sumbu x).
4. Repeat-y; gambar ditampilkan berulang secara vertikal (sumbu y).
body {
background-image : url(‘wallpaper.jpg’);
background-repeat : repeat-x;
}
71
Contoh :
Edit Declaration untuk Selector “body” pada file CSS, sehingga menjadi seperti berikut :
Dengan penulisan CSS seperti di atas, akan menghasilkan tampilan halaman web
dengan background berupa file image seperti pada gambar berikut ini :
Gambar 4.4. Hasil Tampilan Halaman Web Dengan Background

4.2.4. Text Styling
Konten elemen HTML berupa teks bisa diatur tampilannya dengan melakukan
pemformatan pada CSS. Property pada CSS yang digunakan untuk pemformatan teks
antara lain : color, text- align, text-decoration, text-indent, dan text-transform.
Color
Property “color” digunakan untuk mengatur tampilan warna konten / teks pada elemen
HTML. Sintaks-nya :
color: color-value;
Keterangan :
 Color-value bisa menggunakan Hexadecimal, RGB ataupun color name.
Contoh :
Masing menggunakan file pada contoh sebelumnya (background styling), editlah
Declaration pada bagian Selector “.artikel h1”, sehingga menjadi seperti berikut :
.artikel h1 {
background-color: maroon;
color: #ffffff;
}
Note : ditambahkan property “color”
72
Hasilnya, konten pada elemen H1 akan berwarna putih (#FFFFFF) seperti terlihat
pada gambar di bawah ini :
Gambar 4.5. Hasil Konten Pada Elemen H1 Akan Berwarna Putih

4.2.5. Text-align
Property “text-align” digunakan untuk mengatur perataan teks secara horizontal
(mendatar). Sintaks-nya :
text-align: left | center | right | justify;
Keterangan :
1. Left : teks ditampilkan dengan rata kiri

2. Center : teks ditampilkan dengan rata tengah
3. Right : teks ditampilkan dengan rata kanan
4. Justify : teks ditampilkan dengan perataan kanan-kiri
5. Inherit : format perataanya mengikuti nilai alignment elemen induknya
.artikel {
background-color: #CC6666;
text-align:justify;
}
.artikel h1 {
background-color:maroon;
color:#ffffff;
text-align:center;
}
73
Contoh :
Edit Declaration untuk Selector “.artikel” dan “.artikel h1”, sehingga menjadi seperti
berikut :
Note : masing-masing Selector ditambahkan Property “text-align” dengan nilai yang

berbeda.
Hasilnya akan terlihat seperti gambar berikut :
Gambar 4.6. Hasil Selector ditambahkan Property “text-align”

4.2.6. Text-decoration
Property “text-decoration” digunakan untuk menambah atau membuang ornamen
tertentu pada teks.
Sintaks-nya :
text-decoration : none | underline | overline | line-through | blink;
Property ini biasa digunakan untuk menghilangkan ornamen underline pada

hyperlink, atau memberikan efek tertentu untuk bagian-bagian yang dianggap perlu pada
sebuah artikel.
Contoh :
Edit file HTML pada contoh sebelumnya sehingga menjadi seperti berikut :
<div id="artikel">
<h1>Judul Artikel<sup>Penting</sup></h1>
<p>text text text text text text text text text text text text
text text text text text text <br> 74
<a href="#">Baca Selengkapnya...</a>
</p>
</div>
Editlah file CSS dengan menambahkan baris berikut :
.artikel h1 sup {
color:#FF0;
text-decoration:blink;
}
.artikel p a {
color:#ffffff;
text-decoration:none;
}
Dari struktur dokumen HTML dan pemformatan CSS seperti di atas, akan
dihasilkan tampilan halaman web seperti gambar di bawah ini:
Gambar 4.7.Hasil
HTML dan pemformatan CSS
Catatan : Ada beberapa browser yang tidak bisa menampilkan teks Blink
4.2.7. Font Styling
CSS juga memungkinkan kita untuk melakukan pemformatan pada font, seperti
menentukan ukuran font atau memilih jenis font yang akan digunakan. Property pada CSS
yang digunakan untuk melakukan pemformatan font antara lain : font-size, font-family,
font-style dan font- weight.
A. Font-size
Property “font-size” digunakan untuk menentukan ukuran dari font (huruf) yang akan
ditampilkan. Property ini bisa diterapkan untuk elemen-elemen HTML yang
berhubungan
75
Namun perlu dicatat bahwa, meskipun kita bisa melakukan pemformatan pada ukuran
font, tetapi sangat tidak dianjurkan untuk menggunakan Property ini untuk menjadikan
heading terlihat seperti paragraf dengan mengecilkan ukuran font-nya ataupun sebaliknya,
menjadikan paragraf seperti heading dengan memperbesar ukuran font-nya. Tetap gunakan
Tag Heading untuk membuat heading pada artikel.
Sintaks-nya :
font-size: <absolute-size> | <relative-size> | <lenght> | <percent>;
Keterangan :
 Value pada Property “font-size” bisa berupa :
1. Absolute-size, yakni ditentukan dengan nilai : xx-small, x-small, small, medium,
large, x-large, dan xx-large.
2. Relative-size, yakni ditentukan dengan nilai : larger atau smaller
3. Lenght, yakni dengan menentukan ukuran font dalam satuan pixel atau dalam em.
4. Percent, yakni menentukan ukuran font dengan nilai persen (%)
5. Jika ukuran font tidak ditentukan, maka akan digunakan nilai default, yakni
untuk teks normal seperti paragraf akan memiliki nilai 16px (1em = 16px = 100%).
B. Mengatur Ukuran Font dalam Satuan Pixel
Berikut ini adalah contoh penentukan ukuran font pada CSS dengan satuan Pixel :
h1 { font-size: 40px; }
h2 { font-size: 30px; }
p { font-size: 14px; }
Dengan menentukan ukuran font seperti di atas, maka akan dihasilkan tampilan halman
web dengan ukuran font untuk h1 sebesar 40px, h2 sebesar 30px dan font normal untuk
paragraf sebesar 14px.
Pada contoh di atas, memungkinkan browser (seperti Internet Explorer 9, Firefox,
Chrome, Opera, dan Safari ) untuk me-resize ukuran font apabila user mengaktifkan
fungsi zoom-in ataupun zoom-out pada browser. Khusus untuk Internet Explorer, hanya
berlaku untuk versi IE9.
C. Mengatur Ukuran Font dalam Satuan Em
Berikut ini adalah contoh penentuan ukuran font pada CSS dengan satuan Em.
h1 { font-size: >> 40px/16 = 2.5em

2.5em; } h2 { font- >> 30px/16 =
size: 1.875em; } p 1.875em
{ font-size: 0.875em; } >> 14px/16 =
0.875em 76
Untuk menghitung nilai pixel ke dalam satuan em, yaitu dengan berpatokan bahwa
1em adalah ukuran normal untuk sebuah teks, dimana 1em = 16px. Sehingga untuk
mengkonversi nilai pixel ke dalam em bisa dihitung dengan rumus em = pixel/16. Dengan
menggunakan satuan em, memungkinkan semua browser (termasuk IE versi sebelum IE9)
untuk me-resize ukuran font saat user mengaktifkan fungsi zoom-in ataupun zoom-out.
Penggunaan satuan em ini juga telah direkomendasikan oleh W3C.
Namun, pada contoh diatas masih terdapat satu kekurangan. Yakni apabila user
menggunakan IE versi yang lebih lama, ukuran font akan lebih besar dari seharusnya
apabila di zoom-in dan lebih kecil dari seharusnya apabila di zoom-out.
Sebagai solusi untuk kedua masalah di atas, agar ukuran Font sesuai dengan
pengaturan yang ditetapkan dan berlaku untuk seluruh browser, adalah dengan
menyatakan ukuran Font default dalam satuan persen pada elemen <body>.
Contoh :
Masih menggunakan file HTML dan CSS pada contoh sebelumnya, tambahkan dan
editlah baris kode CSS seperti pada contoh di bawah ini:
body {
font-size:100%; }
.artikel h1 {
font-size:2.5em; }
.artikel p {
font-size: 0.875em; }
Dengan penulisan CSS seperti di atas, akan dihasilkan sebuah halaman web dengan
ukuran font normal adalah 100% (16px / 1em). Sedangkan untuk h1 pada Class “artikel”
ukuran font-nya adalah 2.5em (40px) dan untuk paragraf pada Class “artikel” ukuran font-
nya adalah 0.875em 4px).
Tampilan pada browser akan terlihat seperti pada gambar di bawah ini :
77
Gambar 4.8. Hasil Tambahkan Dan Editlah Baris Kode CSS
D. Font-family
Pada CSS, dikenal dua jenis nama font family, yakni :
1. Font Family; yaitu sebuah nama jenis font yang spesifik, seperti : “Times
New Roman” atau “Arial”.
2. Generic Family; yaitu kelompok font family yang memiliki kemiripan
tampilan, seperti “serif”, “sans-serif” atau “monospace”.
Perhatikan tabel di bawah ini !
Tabel 4.2. Font Family dan Generic Family
Generic family Font family Keterangan
Times New Roman Font “Serif” mempunyai bentuk ujung
Serif Georgia yang runcing pada beberapa bentuk
karakternya
“Sans” berarti “tidak dengan/tanpa”,
Sans-serif Arial artinya jenis huruf ini tidak mempunyai
Verdana
bentuk ujung runcing pada tiap
karakternya.
Courier New Semua karakter jenis font ini memiliki
Monospace Lucida Console ukuran lebar yang sama.
Perbedaan antara font Serif dan font Sans-serif.

Untuk mengatur jenis font agar sesuai dengan yang diinginkan, pada CSS
digunakan Property “font-family”.
Sintaks-nya :
font-family: <family-name> | <generic-family>;
Keterangan :
1. Value pada Property ini harus dinyatakan lebih dari satu jenis font (font-family),
sebagai cadangan apabila font pertama tidak ditemukan, akan dicari font kedua,
apabila tidak ditemukan juga akan dicari yang sejenis dengannya (generic-family)
2. Jika nama font-family terdiri dari dua kata atau lebih, ditulis dengan
menggunakan tanda petik ( “contoh nama font” ).
78
Contoh :
Edit Declaration untuk Selector “.artikel h1” dan “.artikel p”, sehingga menjadi seperti
berikut :
.artikel h1 {
font-size:2.5em;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.artikel p {
font-size: 0.875em;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }
Hasilnya, font pada elemen H1 akan ditampilkan dengan jenis font “Trebuchet MS”
sedangkan pada elemen P dengan font “Palatino Linotype”. Perhatikan gambar di bawah
ini:
Gambar 4.9. Hasil

Elemen P Dengan
Font “Palatino
Linotype”
79
Gambar 4.10. Tampilan Skema Web
5.1. CSS Box Model
Pada bagian ini, kita akan membahas sebuah bentuk styling dalam CSS yang
disebut dengan istilah “Box Model”. Apa itu CSS Box Model ? Bagaimana prinsip kerja
dan cara implementasinya dalam desain web? Ikuti pembahasannya pada bagian ini
dengan seksama dan jangan lupa untuk langsung mencobanya.
Keterangan :
1. Margin, adalah area kosong yang berada di bagian paling luar dari sebuah elemen
HTML. Nilai yang dinyatakan dalam bagian ini, menyatakan jarak atau batas dari
elemen HTML tersebut dengan elemen HTML lainnya. Margin tidak memiliki
nilai background warna, tetapi selalu bersifat transparent.
2. Border, adalah sebuah garis pembatas yang mengelilingi sebuah elemen HTML
namun berada didalam wilayah Margin.
3. Padding, adalah sebuah area kosong yang berada diantara Border dan Content dari
elemen HTML. Berbeda dengan Margin yang tidak memiliki warna, unsur warna
dari Padding didapatkan dari nilai background element HTML yang bersangkutan.
4. Content, adalah bagian utama dari elemen HTML yang berisi teks atau gambar
yang akan ditampilkan.
Perlu diketahui bahwa posisi dari Margin, Border dan Padding berada diluar dari
Content, sehingga nilai yang diberikan untuk ketiganya akan berpengaruh menambah luas
area dari elemen HTML. Simak baik-baik pembahasan berikut ini!
5.1.1. Menetapkan Ukuran Sebuah Elemen ( Width dan Height )

Sebuah elemen HTML dalam halaman web bisa kita atur nilai lebar dan tingginya.
Property yang digunakan untuk menetapkan ukuran dari sebuah elemen HTML ini adalah
Property “width” dan “height”.
Sintaks-nya :
width: auto | length | percent ;

height: auto | length | percent ;
80
Keterangan :
1. Value default dari Property “width” dan “height” adalah auto, yang berarti browser
akan melakukan perhitungan secara otomatis untuk menentukan nilainya.
2. Value berupa lenght, bisa menggunakan nilai desimal dengan satuan px, em atau
cm, namun yang paling umum digunakan adalah dengan satuan pixel (px).
3. Value berupa percent, akan diterjemahkan oleh browser dengan menghitung
persentasi dari nilai lebar atau tinggi elemen induknya.
Contoh :
<!DOCTYPE html>
<title>CSS Box Model</title>
.container {
background: #06F;
width:400px;
height:300px;
.artikel {
background: #CCF;
img {
width:340px;
height:180px;
</style>
<body>
<div class="container">
Hasilnya akan terlihat seperti pada gambar berikut ini :
81
Gambar 5.2. Hasil CSS Box Model
Penjelasan :
1. Elemen div dengan atribut Class=”container” ditentukan dengan nilai
width:400px; nilai height:300px; dan background:#06F; sehingga
menghasilkan sebuah tampilan area kotak berukuran 400x300px dengan latar
belakang warna biru.
2. Elemen div dengan atribut Class=”artikel” ditentukan dengan nilai
background:#CCF; namun tidak diberikan deklarasi untuk width dan height,
sehingga nilai keduanya adalah auto. Dalam hal ini nilai width mengikuti
nilai width dari elemen induk (Container), sedangkan untuk nilai height
mengikuti kebutuhan content-nya (teks didalamnya).
3. Elemen img ditentukan dengan nilai width:340px; dan nilai height:180px;
sehingga menghasilkan tampilan gambar dengan ukuran lebar 340x180px.
5.1.3. Margin
Jarak sebuah elemen HTML dengan elemen HTML lain yang bersinggungan
disebut dengan “margin”. Tiap elemen HTML memiliki empat sisi margin yaitu margin
atas, margin kanan, margin bawah dan margin kiri.
Luas area dari masing-masing margin bisa diatur dengan menggunakan Property berikut :
 “margin-top” - untuk margin atas,
 “margin-right” - untuk margin kanan,
 “margin-bottom” - untuk margin bawah, dan
 “margin-left” - untuk margin kiri.
Sintaks-nya :
margin-top: auto | length | percent; margin-right: auto | length | percent; margin-bottom:
auto | length | percent;|margin-left: auto | length | percent;
82
Keterangan :
1. Value default untuk masing-masing Property adalah “0”
2. Value yang bisa digunakan untuk mengatur nilai margin bisa berupa nilai
auto, length dan percent.
3. Value berupa auto, akan menghasilkan nilai margin yang diperhitungkan secara
otomatis oleh browser mengikuti keadaan disekeliling elemen.
4. Value berupa length, bisa menggunakan satuan px, em atau cm. Namun
yang umum digunakan adalah menggunakan satuan px (pixel).
5. Value berupa percent, akan menghasilkan nilai margin yang dihitung dari
persentasi area yang berada di sekelilingnya.
Jika pada penjelasan sebelumnya kita menentukan nilai margin dengan
menggunakan Property untuk masing-masing sisi elemen, berikut ini kita akan
menggunakan satu Property untuk mengatur ke-empat sisi dari elemen HTML. Property
yang digunakan adalah “margin”.
BAHAN AJAR
MATERI 6-7
6.1. PENGENALAN PHP

Menurut Wardana (2016). PHP merupakan akronim dari ”PHP : Hypertext
Presprocessor”. PHP merupakan bahasa script yang biasa digunakan untuk web
development yang dapat diselipkan dalam HTML. Berbeda dengan script-script lainnya
seperti Java Script atau VB script, PHP dieksekusi di lingkungan server, client hanya
menerima hasil dari script yang telah dieksekusi, tanpa bisa mengetahui kode yang
digunakan.
Apa saja yang dapat dilakukan PHP?
PHP difokuskan pada scripting server-side, jadi Anda dapat melakukan apa yang
bisa dilakukan CGI dengan menggunakan PHP seperti mengambil data inputan
form,meng- generate konten halaman dinamis, mengirim dan menerima cookies dan
masih banyak lagi. Kemampuan dan supportnya untuk database juga sangat dapat
diandalkan.
Sekarang ini, PHP bahkan dikembangkan untuk menjadi bahasa pemrograman. Untuk
lebih jelasnya, Anda dapat mencari informasi lebih lanjut di distro-distro Linux keluaran
baru.
83
Di lingkungan mana PHP bekerja?
Awalnya, PHP bekerja di lingkungan Linux, karena merupakan ’turunan’ bahasa
PEARL yang merupakan bahasa pemrograman native di lingkungan Linux dan Unix.
Namun seiring perkembangan dan kebutuhan maka PHP dibuat secara cross platform.
PHP dapat bekerja di lingkungan Windows maupun Linux.
PHP mengeksekusi server script lebih cepat dari server script manapun. PHP
menempati ranking pertama dalam hal kecepatan eksekusi, diikuti oleh ASP dan JSP.
Dengan kemampuannya, apakah PHP gratis? PHP dapat anda Download secara free atau
cuma-cuma. Kunjungi saja situs www.php.net , dan download versi terbarunya.
Gambar 6.1. Sistem Kerja program PHP

6.2. Tahapan Instalasi Apache
Merupakan tahapan instalasi program apache yang dibutuhkan untuk pemogrman
web berikut langkah-langkah menginstalan dibawah ini:.
1. Jalankan apache_2.0.48-win32-x86-no_ssl.msi
2. Klik next, sampai ada isian seperti berikut dan isikan :
domain anda seperti : zensoft.com
server name : faruq.zensoft.com
administrator email address : admin@zensoft.com
84
Gambar 6.2. Tampilan Apache
3. Pilih Typical dan klik next.
4. Klik finish, dan di kanan bawah akan muncul tanda ikon apache.
Gambar 6.3. Tampilan Ikon Apache
5. Test koneksi dengan mengetikkan : http://localhost di internet explorer
85
Gambar 6.4. Tampilan http://localhost
6.3. Tahapan Instalasi php

Merupan salah satu proses penginstalan php yang dilakukan pada langkah-langkah
dibawah ini:
1. Ekstrak php-4.3.4-Win32.zip ke drive c:/
2. Ganti nama c:/php-4.3.4-Win32.zip dengan c:/php
3.Copykan file php.ini-dist ke C:/windows
4. Ubah nama file diatas menjadi php.ini
5. Edit httpd.conf di C:/Program Files/Apache Group/Apache2/conf
a. Tambahkan script alias berikut ini :
ScriptAlias /cgi-bin/ "C:/Program Files/Apache Group/Apache2/cgi-bin/"
ScriptAlias /php/ "C:/php/"
b. Tambahkan addtype :
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .php
Action application/x-httpd-php "/php/php.exe"

c. Tambahkan index.php untuk pathnya :
DirectoryIndex index.html index.html.var index.php
6. Restart Apache
86
7. Buat file php, simpan dengan nama phpinfo.php dan masukkan di C:/Program
Files/Apache Group/Apache2/htdocs
<? phpinfo(); ?>
8. Test apakah php sudah terinstal dengan baik :

http://localhost/phpinfo.php
Gambar 6.5. Tampilan http://localhost/phpinfo.php
7.1. TAG DALAM PHP

Banyak cara untuk menyisipkan PHP dalam script HTML, ada berbagai macam
bentuk tag yang dapat digunakan, antara lain :
 Cara I
<?php menandai awal tag
...
?> menandai akhir tag
 Cara II
<? menandai awal tag
...
87
?> menandai akhir tag
 Cara III
<% menandai awal tag
...
%> menandai akhir tag
Cara ini sama dengan tag pada ASP. Opsi ini bisa dilakukan jika nilai
asp_tags pada php.ini bernilai on.
 Cara IV
<script language=”php”> menandai awal script
...
</script> menandai akhir script
Namun untuk lebih mudahnya, kita akan menggunakan cara II mulai
sekarang dan seterusnya. Ada kalanya kita sebagai pemrogram, karena banyaknya kode
program atau variabel dalam program, perlu menandai atau memberi komentar pada
program. Komentar pada program merupakan tulisan pada program yang tidak
dieksekusi. Pada PHP, ada 3 macam cara penulisannya :
1. /* komentar */
Tulisan apapun yang berada di antara ’/*’ dan ’*/’ akan dianggap sebagai
komentar. Cara seperti ini sangat berguna dan efisien untuk pemberian komentar
yang memakan banyak baris.
2. // komentar
Tulisan di baris yang sama setelah ’//’ akan dianggap sebagai komentar. Cara ini
berguna untuk pemberian komentar singkat yang tak lebih dari 1 baris saja.
3. # komentar
4. Sama seperti ’//’, tulisan di baris yang sama setelah ’#’ akan dianggap sebagai
komentar. Cara ini berguna untuk pemberian komentar singkat yang tak lebih dari
1 baris saja.
A. VARIABEL DAN TIPE DATA

Dalam PHP, penulisan variabel diawali dengan karakter ‘$’, kemudian diikuti
dengan huruf sebagai karakter pertama. Setelah itu, dapat dilajutkan dengan kombinasi
huruf dan angka. Variabel tidak boleh mengandung spasi maupun tanda baca di
dalamnya, kecuali underscore (’_’).
88
Variabel pada PHP bersifat “case sensitif”, yang berarti Anda harus memperhatikan
penulisan huruf besar dan huruf kecil. Variabel $jumlah berbeda dengan $Jumlah.
Contoh penamaan variabel yang benar :
$nama_pemakai
$kota_3
$user1
Contoh penamaan variabel yang salah :

$nama pemakai
$3kota
$us\er1
B. Tipe Data
Tipe data yang dapat diolah menggunakan PHP, antara lain :
1. Boolean
Nilai boolean menyatakan nilai kebenaran. Suatu variabel boolean dikatakan salah
(FALSE) jika :
1. Variabel boolean bernilai FALSE
2. Variabel integer 0 (nol)
3. Variabel float 0.0 (nol)
4. Varaibel string kosong atau string “0”
5. Variabel array dengan nol elemen
6. Variabel objek dengan nol anggota
7. Dan tipe spesial yaitu NULL
Selain hal-hal tersebut di atas, maka nilai boolean dianggap TRUE.
2. Integer
5
-9
1500
0123 octal
0xfb hexadecimal
3. Floating Point 0.8998
89
23e2
4. String
’Teks menggunakan aphostof’ ...menggunakan tanda petik tunggal ”Teks
menggunakan quote” ...menggunakan tanda kutip Pada tipe data string,
terdapat escape character, yaitu karakter khusus yang digunakan mewakili karakter
ASCII dengan fungsi khusus. Untuk mendefinisikan karakter yang akan ditampilkan jika
karakter tersebut merupakan escape character yaitu dengan mengawali karakter tersebut
dengan tanda \ (backslash).
Daftar escape character :
5. Array
Tipe data array akan dibahas pada suatu bab tersendiri.
6. Object
Ini merupakan pengembangan PHP berorientasi objek. Tipe data objek merupakan
tipe data yang didalamnya mempunyai data dan method. Data tersebut didefinisikan
sebagai class terlebih dahulu.
C. Operator
Operator merupakan suatu tool/alat untuk keperluan manipulasi data. Operator
dapat dibedakan menjadi :
1. Operator Aritmetika
2. Operator String Menggunakan ’.’ (tanda titik)
$a = "Hello ";
$b = $a . "World!"; // sekarang $b berisi "Hello World!"
Menggunakan ‘.=’ (tanda titik dan sama dengan)

$a = "Hello ";
$a .= "World!"; // sekarang $a berisi "Hello World!"
3. Operator Increment/Decrement
4. Operator Logika
5. Operator Ternary
Menggunakan tanda ’?’, dengan syntax :
(ekspresi1) ? (ekspresi2) : (ekspresi3)
90
Operator ternary malakukan pengujian pada ekspresi1, jika hasilnya TRUE, maka
ekspresi 2 yang dijalankan, jika hasil ekspresi1 FALSE, maka ekspresi3 yang
dijalankan.
Contoh :
<?
$a = 2;
$hasil = ($a<4) ? ($a*2) : ($a*3) echo ”$hasil”;
?>
Dari contoh di atas, maka hasil yang terlihat adalah 4, namun jika nilai $a
diganti 5, maka hasilnya adalah 15.
6. Operator Perbandingan
7. Operator Assignment Contoh :
$a = 4; //$a diisi dengan nilai 4
$a += 5; //sama dengan $a = $a + 5;
8. Operator Kontrol Error
Dengan memberikan tanda ’@’ pada ekspresi PHP, maka pesan error yang
dihasilkan oleh suatu ekspresi akan diabaikan. Jika fitur track_error enable,
maka setiap pesan error yang diterima akan disimpan dalam variabel global
$php_errormsg.
Contoh :
<?php
$my_file = @file ('non_existent_file') or
die ("Failed opening file: error was '$php_errormsg'");
?>
9. Operator Eksekusi
Operator ini hanya bekerja di lingkungan sistem operasi Linux dan Unix, dengan
webserver yang digunakan adalah Apache.
Operator eksekusi menggunakan karakter `...perintah...` (perintah di antara
backticks), dimana hasilnya ditampung pada sebuah variabel dan kemudian
ditampilkan di halaman web.
91
7.2. STRUKTUR KONTROL
Struktur kontrol merupakan inti dari logika pemrograman. Secara mendasar ada 3
struktur kontrol yaitu :
1. Sequence atau urutan
2. Selection atau pilihan
3. Iteration atau pengulangan
A. if / if else
Sintaks untuk stuktur kontrol menggunakan if else/ifelse :
if (ekspresi) {
perintah1;
perintah2;
...
}
Struktur kontrol if memeriksa isi ekspresi, dimana jika terpenuhi atau bernilai
benar, maka ia akan menjalankan perintah-perintah yang ada dalam blok. Untuk banyak
kondisi, bisa dilakukan dengan sintaks :
if (ekspresi1) {
perintah1;
perintah2;
...
}
elseif(ekspresi2) {
perintah3;
perintah4;
...
}
else {
perintah5;
perintah6;
...
92
Dimana jika ekspresi1 tidak tercapai, maka struktur kontrol akan memeriksa apakah
ekspresi berikutnya tercapai, hingga ia mencapai struktur else sebagai pilihan default atau
terakhir.
B. switch
Dapat dikatakan kalu switch adalah merupakan penyederhanaan dari bentuk if
else ataupun ifelse. Sintaks dari struktur kontrol menggunakan switch antara lain :
switch($variabel) {
case nilai1 :
perintah_jika_nilai1; break;
case nilai2 :
case nilai3 :
… [default :
perintah_untuk_nilai_default;
]
}
Untuk nilai default, tidaklah harus ada.
C. While
Sintaks :
while(ekspresi) {
perintah1;
perintah2;
...
}
D. do .. while
Sintaks :
do {
perintah1; perintah2;
...
} while (ekspresi);
E. for
Sintaks :
for(nilai_awal ;syarat_terjadinya_loop ; inc_atau_dec)
93
{
perintah1;
perintah2;
...
}
F. foreach
Struktur kontrol foreach digunakan untuk pengulangan terhadap variabel array. Struktur
kontrol foreach akan melakukan loop mulai dari awal indeks array hingga indeks
terakhir array tersebut, meskipun array itu bersifat assosiatif.
Sintaks :
foreach (var_array as value) {
perintah1;
perintah2;
…
}
Untuk array asosiatif :
foreach (var_array as key => value) {
perintah1;
perintah2;
…
}
G. break
Perintah break digunakan untuk keluar dari suatu pengulangan/loop. Contoh :
for($a = 0; $a < 100 ; $a++)
if($a == 30) { break; } else

echo ”$a ,”;
Pada contoh di atas, akan memunculkan tulisan berupa nilai variabel a, mulai dari
0,1,2,3...hingga ketika mencapai nilai 30 maka loop akan berhenti karena perintah
break.
94
BAHAN AJAR
MATERI 9-10
9.1. Mengenal MySQL

MySQL adalah Sebuah program database server yang mampu menerima dan
mengirimkan datanya sangat cepat, multi user serta menggunakan peintah dasar SQL
( Structured Query Language ).
MySQL merupakan dua bentuk lisensi, yaitu FreeSoftware dan Shareware.
MySQL yang biasa kita gunakan adalah MySQL FreeSoftware yang berada dibawah
Lisensi GNU/GPL ( General Public License ).
MySQL Merupakan sebuah database server yang free, artinya kita bebas
menggunakan database ini untuk keperluan pribadi atau usaha tanpa harus membeli atau
membayar lisensinya. MySQL pertama kali dirintis oleh seorang programmer database
bernama Michael Widenius . Selain database server, MySQl juga merupakan program
yang dapat mengakses suatu database MySQL yang berposisi sebagai Server, yang berarti
program kita berposisi sebagai Client. Jadi MySQL adalah sebuah database yang dapat
digunakan sebagai Client mupun server.
Database MySQL merupakan suatu perangkat lunak database yang berbentuk
database relasional atau disebut Relational Database Management System ( RDBMS )
yang menggunakan suatu bahasa permintaan yang bernama SQL (Structured Query
Language ).
9.2. Kelebihan MySQL
Database MySQL memiliki beberapa kelebihan dibanding database lain, diantaranya :
1. MySQL merupakan Database Management System ( DBMS )
2. MySQL sebagai Relation Database Management System ( RDBMS ) atau disebut
dengan database Relational
3. MySQL Merupakan sebuah database server yang free, artinya kita bebas
menggunakan database ini untuk keperluan pribadi atau usaha tanpa harus
membeli atau membayar lisensinya
4. MySQL merupakan sebuah database client
5. MySQL mampu menerima query yang bertupuk dalam satu permintaan atau Multi-
Threading.
95
6. MySQL merupakan Database yang mampu menyimpan data berkapasitas sangat
besar hingga berukuran GigaByte sekalipun.
7. MySQL diidukung oleh driver ODBC, artinya database MySQL dapat diakses
menggunakan aplikasi apa saja termasuk berupa visual seperti visual Basic dan
Delphi.
8. MySQL adalah database menggunakan enkripsi password, jadi database ini cukup
aman karena memiliki password untuk mengakses nya.
9. MySQL merupakan Database Server yang multi user, artinya database ini tidak
hanya digunakan oleh satu pihak orang akan tetapi dapat digunakan oleh banyak
pengguna.
10. MySQL mendukung field yang dijadikan sebagai kunci primer dan kunci uniq
( Unique ).
11. MySQL memliki kecepatan dalam pembuatan table maupun peng-update an table.
9.3. Mengenal SQL ( Structured Query Language )
SQL ( Structured Query Language ) adalah sebuah bahasa permintaan database
yang terstruktur. Bahasa SQL ini dibuat sebagai bahasa yang dapat merelasikan beberapa
tabel dalam database maupun merelasikan antar database. SQL dibagi menjadi tiga bentuk
Query, yaitu :
9.3.1. DDL ( Data Definition Language )
DDL adalah sebuah metode Query SQL yang berguna untuk mendefinisikan data
pada sebuah Database, Query yang dimiliki DDL adalah :
1. CREATE : Digunakan untuk membuat Database dan Tabel
2. Drop : Digunakan untuk menghapus Tabel dan Database
3. Alter : Digunakan untuk melakukan perubahan struktur tabel yang telah dibuat,
baik menambah Field ( Add ), mengganti nama Field ( Change ) ataupun
menamakannya kembali ( Rename ), dan menghapus Field ( Drop ).
9.3.2. DML ( Data Manipulation Language )
DML adalah sebuah metode Query yang dapat digunakan apabila DDL telah
terjadi, sehingga fungsi dari Query DML ini untuk melakukan pemanipulasian database
yang telah dibuat. Query yang dimiliki DML adalah :
1. INSERT : Digunakan untuk memasukkan data pada Tabel Database
2. UPDATE : Digunakan untuk pengubahan terhadap data yang ada pada Tabel
Database
96
3. DELETE : Digunakan untuk Penhapusan data pada tabel Database
9.3.3. DCL ( Data Control Language )

DCL adalah sebuah metode Query SQL yang digunakan untuk memberikan hak
otorisasi mengakses Database, mengalokasikan space, pendefinisian space, dan
pengauditan penggunaan database. Query yang dimiliki DCL adalah :
1. GRANT : Untuk mengizinkan User mengakses Tabel dalam Database.
2. REVOKE : Untuk membatalkan izin hak user, yang ditetapkan oleh perintah
GRANT
3. COMMIT : Mentapkan penyimpanan Database
4. ROLLBACK : Membatalkan penyimpanan Database
9.2. Fungsi – Fungsi Pada MySQL
Fungsi dari MySQL adalah untuk membuat dan mengelola database pada sisi server
yang memuat berbagai informasi dengan menggunakan bahasa SQL. Fungsi lain yang
dimiliki adalah memudahkan pengguna dalam mengakses data berisi informasi dalam
bentuk String (teks), yang dapat diakses secara personal.
9.2.1. Mengaktifkan Direktori MySQL Server
Untuk dapat menggunakan MySQL terlebih dahulu aktifkan Server MySQL dengan
menghidupkan daemond MySQL. Program MySQL yang digunakan pada modul ini
adalah XAMPP 1.7, maka untuk menjalankan daemond MySQL terdapat pada direktori
yaitu C:\Program Files\Xampp\Mysql\Bin
Untuk masuk kedalam server MySQL, bukalah MS-DOS Prompt anda melalui Run
kemudian ketik Command atau cmd. Maka anda dapat masuk ke dalam direktori MySQL
melalui MS-DOS Promtp seperti dibawah ini.
Gambar 9.1. Tampilan MS-DOS
97
9.2.2. Masuk dan Keluar dari Server MySQL
MySQL adalah sebuah database server yang sangat aman. MySQL memiliki
kemampuan memanajemen user dalam mengakses. Jadi, tidak sembarang user dapat
mengakses sebuah database yang diciptakan MySQL. Maka sebelum anda memiliki User
untuk mengakses MySQL anda juga dapat Mengakses database MySQL menggunakan
User Root.
Berikut adalah perintah yang digunakan untuk mengkoneksikan kedalam Server
Mysql : Shell > MySQL –u Root –p
Enter Password: *********
Keterangan : Tanda –u menerangkan bahwa kita akan masuk menggunakan User Name
bernama Root.
Tanda –p menyatakan kita akan masuk menggunakan Password. Berikut adalah perintah
yang digunakan untuk mengkoneksikan kedalam Server Mysql melalui Root : Shell>
Mysql –u root
Gambar 9.2. Tampilan Root : Shell> Mysql –u root

Untuk dapat keluar dari Server MysQL kita dapat mengetikkan Intruksi quit ata \q :
Mysql> quit
Bye
Mysql> \q Bye
9. 2.3 Bantuan dalam MySQL
Database MySQL menyediakan beberapa fasilitas bantuan yang berguna untuk
mendokumentasikan atau memanipulasikan server yaitu dengan cara mengetikan
intruksi \h atau \?.
Mysql> \?
Semua Query harus diakhiri dengan tanda titik koma ( ; ). Tanda ini menunjukkan
bahwa query telah berakhir dan siap dieksekusi.
Help ( \h ) : Digunakan untuk menampilkan file bantuan pada MySQL
98
? ( \? ) : Perintah ini sama dengan perintah Help
Clear ( \c ) : Berguna untuk membersihkan atau menggagalkan semua perintah yang
telah
berjalan dalam suatu prompt

Connect
( \r )
: untuk melakukan penyegaran koneksi ke dalam database yang ada pada
Server Host
Ego ( \G ) : berguna untuk menampilkan data secara horizontal.
Go ( \g ) : member perintah server untuk mengeksekusi
tee ( \T ) : mengatur tempat file yang akan didokumentasikan.
Contoh :
mysql> \T d:\belajar mysql.doc Logging to file ‘d:\data.doc;’
Note ( \t ) : akhir dari ( \T ) yang berguna untuk mendokumentasikan semua query.
Print ( \p ) : mencetak semua query yang telah kita perintahkan kelayar.
Prompt( \R ) : Mengubah prompt standar sesuai keinginan.
Source ( \. ) : berguna untuk mengeksekusi query dari luar yang berbentuk .sql
Use ( \u ) : berguna untuk memasuki database yang akan digunakan maupun
mengganti database yang akan di gunakan.
9.3. Administrasi MySQL
MySQL Selaku database server yang mampu berjalan pada jaringan, tentu saja
MySQL harus memiliki kemampuan khusus yang berguna untuk melakukan manajemen
user atau mendukung system databaseyang bersifat client/server.
9.3.1. Membuat User baru
Untuk dapat menciptkan user baru pada database mysql yang terdapat pada tabel
user. Dapat dilakukan dengan menggunakan pernyataan SQL bernama INSERT. Sintax
seperti berikut :
INSERT INTO user(host,user,password) VALUES(‘%’,’nama_user’,’password’);
Contoh :
mysql> INSERT INTO user(host,user,password)
VALUES('localhost','haris',MD5('if060017')); Query OK, 1 row affected, 4 warnings
(0.00 sec)
99
Seteleh anda memberikan perintah diatas, berikan perintah :
FLUSH PRIVILEGES;
Contoh :
mysql> FLUSH PRIVILEGES;
Query OK, 0 rows affected (0.00 sec)
9.3.2. Memberikan Wewenang Untuk User
Apabila User telah dibuat terlebih dahulu dan lupa untuk memberikan Hak
Wewenang untuk User. Kita dapat memberikan hak wewenang dengan menggunakan
Perintah Query UPDATE. Sintax yang digunakan seperti berikut :
UPDATE user
SET select_priv =’y’, Insert_priv =’y’, Update_priv =’y’, Delete_priv =’y’, Create_priv
=’y’, Drop_priv =’y’, Alter_priv =’y’
WHERE user =’haris’;
10.1. DDL ( DATA DEFINITON LANGUAGE )
DDL adalah sebuah metode Query SQL yang berguna untuk mendefinisikan data
pada sebuah Database.
10.1.1 Type Data pada MySQL
Tipe data adalah suatu bentuk pemodelan data yang dideklarasikan pada saat
melakukan pembuatan tabel. Tipe data ini akan mempengaruhi setiap data yang akan
dimasukkan ke dalam sebuah tabel. Data yang akan dimasukkan harus sesuai dengan tipe
data yang dideklarasikan.
Berbagai type data pada MySQL dapat dilihat pada tabel berikut :
Tabel 10.1.Type Data untuk Bilangan (Number)
Type Data Keterangan
TINYINT Ukuran 1 byte. Bilangan bulat terkecil, dengan jangkauan untuk bilangan
bertanda: -128 sampai dengan 127 dan untuk yang tidak bertanda : 0 s/d
255. Bilangan tak bertandai dengan kata UNSIGNED
SMALLINT Ukuran 2 Byte. Bilangan bulat dengan jangkauan untuk bilangan bertanda :
-32768 s/d 32767 dan untuk yang tidak bertanda : 0 s/d 65535
MEDIUMINT Ukuran 3 byte. Bilangan bulat dengan jangkauan untuk bilangan bertanda
: -8388608 s/ d 8388607 dan untuk yang tidak bertanda : 0 s/d 16777215
INT Ukuran 4 byte. Bilangan bulat dengan jangkauan untuk bilangan bertanda :
-2147483648 s/d 2147483647 dan untuk yang tidak bertanda : 0 s/d
100
4294967295
INTEGER Ukuran 4 byte. Sinonim dari int
BIGINT Ukuran 8 byte. Bilangan bulat terbesar dengan jangkauan untuk bilangan
bertanda :
-9223372036854775808 s/d 9223372036854775807 dan untuk yang tidak
bertanda : 0 s/d 1844674473709551615
FLOAT Ukuran 4 byte. Bilangan pecahan
DOUBLE Ukuran 8 byte. Bilangan pecahan
DOUBLEPRECI Ukuran 8 byte. Bilangan pecahan
SION
REAL Ukuran 8 byte. Sinonim dari DOUBLE
DECIMAL Ukuran M byte. Bilangan pecahan, misalnya DECIMAL(5,2 dapat
(M,D) digunakan untuk menyimpan bilangan -99,99 s/d 99,99
NUMERIC Ukuran M byte. Sinonim dari DECIMAL, misalnya NUMERIC(5,2) dapat
(M,D) digunakan untuk menyimpan bilangan -99,99 s/d 99,99
Tabel 10.2. Type Data untuk Tanggal dan Jam

DATETIME Ukuran 8 byte. Kombinasi tanggal dan jam, dengan jangkauan dari
‘1000-01-01 00:00:00’ s/d ‘9999-12-31 23:59:59’
DATE Ukuran 3 Byte. Tanggal dengan jangkauan dari ‘1000-01-01’ s/d ‘9999-12-
31’
TIMESTAMP Ukuran 4 byte. Kombinasi tanggal dan jam, dengan jangkauan dari
‘1970-01-01 00:00:00’ s/d ‘2037’
TIME Ukuran 3 byte. Waktu dengan jangkauan dari ‘839:59:59’ s/d ‘838:59:59’
YEAR Ukuran 1 byte. Data tahun antara 1901 s/d 2155
Tabel 10.3. Type Data untuk Karakter dan Lain-lain

CHAR Mampu menangani data hingga 255 karakter. Tipe data
CHAR mengharuskan untuk memasukkan data yang
telah ditentukan oleh kita.
VARCHAR Mampu menangani data hingga 255 karakter. Tipe data
VARCHAR tidak mengharuskan untuk memasukkan
data yang telah ditentukan oleh kita.
TINYBLOB, TINYTEXT Ukuran 255 byte. Mampu menangani data sampai 2^8-1
data.
BLOB, TEXT Ukuran 65535 byte. Type string yang mampu menangani
101
data hingga
2^16-1 (16M-1) data.

MEDIUMBLOB, Ukuran 16777215 byte. Mampu menyimpan data hingga
MEDIUMTEXT 2^24-1 (16M-1) data.
LONGBLOB, LONGTEXT Ukuran 4294967295 byte. Mampu menyimpan data
hingga berukuran GIGA BYTE. Tipe data ini memiliki
batas penyimpanan hingga 2^32-1 (4G-1) data.
ENUM(‘nilai1’,’nilai2’, Ukuran 1 atau 2 byte. Tergantung jumlah nilai
…,’nilaiN’) enumerasinya (maksimum 65535 nilai)
SET(‘nilai1’,’nilai2’, 1,2,3,4 atau 8 byte, tergantung jumlah anggota himpunan
…,’nilaiN’) (maksimum 64 anggota)
10.1.2. Menciptakan Database

Database adalah sebuah media utama yang harus dibuat dalam membangun
sebuah basis data agar nantinya dapat kita letakkan beberapa tabel dengan field-fieldnya.
Perintah yang digunakan untuk menciptakan database pada MySQL dengan Syntax
berikut :
CREATE DATABASE nama_database;
Contoh :
mysql> create database pendaftaran; Query OK, 1 row affected (0.11 sec)
Pada contoh diatas, query OK menyatakan bahwa pembuatan database dengan nama
pendaftaran berhasil dibuat, untuk melihat database yang ada pada MySQl dapat
menggunakan SIntax berikut ;
Contoh :
Gambar 10.1. SHOW DATABASES

102
10.1.3. Menghapus Database
Untuk menghapus Database yang telah dibuat dapat menggunakan query SQL
berikut :
DROP DATABASE nama_database;
Drop berarti menghapus. Query SQL ini berfungsi untuk menghapus sebuah database,
seperti contoh berikut :
mysql> drop database pendaftaran; Query OK, 0 rows affected (0.02 sec)
10.1.4. Menciptakan Tabel
Tabel adalah obyek utama yang harus ada pada sebuah basis data karena di
dalamnya semua data akan disimpan. Tabel terletak pada sebuah database, sehingga
pembuatan tabel dilakukan setelah sebuah database telah dibuat. Dalam tabel terdapat bari
dan kolom. Baris diistilahkan dengan recordset dan kolom dengan field.
Tabel 10.4. Recordset dan kolom dengan field
Untuk membuat sebuah tabel atau lebih, database harus diaktifkan dulu karena
tabel akan dimasukkan ke dalam database yang akan diaktifkan. Sintax untuk
mengaktifkan Database adalah :
USE nama_database;
Contoh :
mysql> use pendaftaran;
Database changed
103
Setelah masuk ke dalam database anda dapat membuat sebuah tabel atau lebih. Untuk
membuat tabel dapat menggunakan sintax dibawah ini :
CREATE TABLE nama_tabel ( field-1 type(length), field-2 type(length), field-3
type(length), (….));
104
Contoh:
mysql> create table data_diri (
-> no int(3),
-> nama varchar(35),
-> alamat varchar(60),
-> email varchar(40),
-> no_telepon varchar(15),
-> sex char(1));
Pada contoh diatas, query OK menyatakan bahwa pembuatan tabel dengan nama data_diri berhasil
dibuat, untuk melihat tabel yang ada pada database dapat menggunakan SIntax berikut ;
Contoh :
Gambar 10.2. SHOW TABLES
10.1.5. Melihat Struktur Tabel

Setelah tabel dibuat, anda dapat melihat tipe data dan panjang recordset dengan cara
menampilkan struktur tabel. Perintah yang digunakan untuk menampilkan struktur tabel adalah :
DESC nama_tabel; Atau
DESCRIBE nama_tabel;
Contoh :
Gambar 10.3. Perintah

Struktur Tabel
105
10.1.6. Menghapus Tabel
Untuk menghapus Tabel yang telah dibuat dapat menggunakan query SQL berikut :
DROP TABLE nama_tabel;
Drop berarti menghapus. Query SQL ini berfungsi untuk menghapus sebuah Tabel, seperti contoh
berikut :
mysql> drop table data_diri;
10.1.7. Membuat Kunci Primer ( Primary Key )
Dalam membuat sebuah database, kita akan menemukan sebuah record yang data nya tidak
boleh sama dengan record yang lain. Agar data tidak kembar maka harus membuat sebuah kolom
yang di deklarasikan sebagai kunci primer (primary key), Primary key hanya diperboleh kan dibuat
satu kunci. Syntax untuk menciptakan kunci primer (primary key) adalah :
CREATE TABLE nama_tabel ( field-1 type(length)PRIMARY KEY, field-2 type(length),
(….));
Contoh :
Gambar 10.4. Tampilan CREATE TABLE

10.1.8.Membuat Kolom Unik ( Unique )
Kolom Unique adalah sebuah bentuk kolom yang tidak mengizinkan adanya data kembar.
Apabila pada proses input terdapat data kembar maka proses tersebut akan digagalkan atau ditolak
oleh database. Syntax untuk menciptakan Kolom unik (Unique) adalah :
CREATE TABLE nama_tabel ( field-1 type(length), field-2 type(length), (….),UNIQUE (field-
1,field-
2));
106
Contoh:
mysql> Create table pribadi (
-> kd_pribadi CHAR(3),
-> panggilan char(4),
-> nama varchar(35),
-> email varchar(50),
-> sex char(1),
-> UNIQUE (kd_pribadi,panggilan)); Query OK, 0 rows affected (0.08 sec)
10.1.9. Manipulasi Tabel
Perubahan tabel yang telah dibuat akan selalu dilakukan mengingat perkembangan
database, termasuk diantaranya menambahkan beberapa field pada tabel, mengganti nama field
maupun tabel.
10.1.9.1.Mengganti Nama Tabel
Query SQL untuk merubah nama tabel dengan menggunakan RENAME, Sintax seperti
berikut :
RENAME TABLE tabel_lama TO tabel_baru;
Contoh :
mysql> rename table pribadi to data_pribadi; Query OK, 0 rows affected (0.02 sec)
10.1.9.2.Menambah Field pada Tabel
Menambah kolom dapat diartikan sebagai langkah untuk menyisipkan field baru pada
sebuah tabel. Untuk melakukan penambahan Field maka ALTER spesifikasi yang digunakan
adalah ADD. Sintax yang digunakan adalah :
ALTER TABLE nama_tabel ADD nama_field Type_data(length);
Contoh :
mysql> alter table data_diri add gol_darah char(1); Query OK, 0 rows affected (0.14 sec)
Records: 0 Duplicates: 0 Warnings: 0
10.1.9.3.Menghapus Field pada Tabel
Pada pembuatan database pasti terdapat kesalahan seperti pada field tabel yang berlebihan
dan lain-lain. Untuk melakukan Penghapusan Field maka ALTER spesifikasi yang digunakan
adalah DROP. Sintax yang digunakan adalah :
107
ALTER TABLE nama_tabel DROP nama_field;
Contoh :
mysql> alter table data_diri drop gol_darah; Query OK, 0 rows affected (0.05 sec) Records: 0
Duplicates: 0 Warnings: 0
10.2. DML (DATA MANIPULATION LANGUAGE)
DML adalah sebuah metode Query yang dapat digunakan apabila DDL telah terjadi,
sehingga fungsi dari Query DML ini untuk melakukan pemanipulasian database yang telah dibuat.
Buatlah Database Buku_tamu dan didalamnya terdapat tabel tb_tamu dengan Struktur tabel berikut
Tabel 10.5. Buku_tamu
Field Type Length Keterangan
No Int 3 Primary key
Nama Varchar 35
Alamat Varchar 60
Email Varchar 40
No_telp Varchar 15
10.2.1.Memasukkan Data pada tabel ( INSERT )

Memasukkan data atau entry data, dalam semua program yang menggunakan query SQL
sebagai standar permintaannya, digunakan perintah INSERT. Syarat untuk memasukkan data
adalah telah terciptanya tabel pada sebuah database. Sintax yang digunakan adalah :
INSERT INTO nama_tabel VALUES (‘isi_field1’, ‘isi_field2’, ‘isi_field3’,….., ‘isi_fieldN’);
Contoh :
mysql> insert into tb_tamu values('1','Boi trimoyo','ujung
berung','bo_i77@yahoo.com','085613548789');
Query OK, 1 row affected (0.05 sec).
Maka data telah masuk ke dalam tabel seperti berikut :
Gambar 10.5. Tampilan Tabel INSERT
108
10.2.2. Memperbarui Isi Data ( UPDATE )
Memperbarui isi data atau update data adalah sebuah proses meremajakan data lama
menjadi data yang lebih baru. Namun tidak semua data dalam database yang perlu diremajakan,
melainkan sebagian data yang dianggap perlu untuk diremajakan. Query SQL yang digunakan
adalah UPDATE yang di ketikkan seperti berikut :
UPDATE nama_tabel SET field_1 = ‘data_baru’, field_2 =’data_baru’,
……………………………. , Field_N =’data_baru’;
Contoh :
mysql> update tb_tamu set
-> nama='irfan nurhudin' where nama="Boi trimoyo"; Query OK, 1 row affected (0.08 sec)
Rows matched: 1 Changed: 1 Warnings: 0
Maka hasilnya akan berubah seperti berikut :
Gambar 10.6.hasil Tampilan Update

Data yang asalnya bernama Boi trimoyo berubah menjadi irfan nurhudin yang dihasilkan dari query
SQL UPDATE.
10.2.3. Menghapus Data ( DELETE )
Untuk menghapus data, MySQL memiliki query bernama DELETE. Penggunaannya diikuti
dengan nama data yang akan dihapus. Berikut Sintax untuk menghapus semua data yang terdapat
pada tabel :
DELETE FROM nama_tabel;
Sedangkan berikut sintax untuk menghapus data yang diinginkan dari sebuah tabel :
Gambar 10.7. Tampilan Tabel Delete

Untuk menghapus data nomor 4 yang terdapat pada tabel tb_tamu maka gunakan query
sepertin dibawah ini :
mysql> delete from tb_tamu where no='4'; Query OK, 1 row affected (0.03 sec)
Maka hasilnya akan seperti dibawah ini bahwa data nomor 4 yang bernama ridwan telah dihapus
menggunakan query DELETE :
109
DELETE FROM nama_tabel WHERE kondisi;
Contoh :
Isikan data pada tabel tb_tamu seperti dibawah ini :
Gambar 10.8. Tampilan Select * From tb_tamu

10.3. SELEKSI DATA
Menampilkan data adalah hal yang sangat penting karena kita harus melihat dan menyeleksi
suatu data dalam table maupun antar table. Untuk Melihat data atau Selection, Query yang
digunakan adalah SELECT yang diikuti beberapa pernyataan khusus berkenaan dengan tabel yang
diseleksi.
10.3.1.Menampilkan Data Dari sebuah Tabel
Untuk menampilkan dari sebuah tabel dapat menggunakan Sintax berikut :
SELECT (Field1, field2, ……, FieldN) FROM nama_tabel;
Query diatas mengartikan bahwa data yang akan ditampilkan didalam tabel hanya filed – filed
tertenu.Atau SELECT * FROM nama_tabel;
Query diatas mengartikan bahwa data dari seluruh Field yang terdapat dalam tabel akan
ditampilkan.Contoh :
Gambar 10.9. Tampilan SELECT * FROM nama_tabel

atau
Gambar 10.10. Tampilan hasil ke 2 SELECT * FROM nama_tabel
110
111
10.3.2.Menampilkan Data dengan Perintah WHERE
WHERE yang artinya dimana, untuk menampilkan data menggunakan perintah where
(dimana) dapat menggunakan perintah berikut :
SELECT * FROM nama_tabel WHERE kondisi
Contoh :
Data sebelumnya yang ada pada tabel tb_tamu seperti berikut :
Gambar 10.11. Tampilan SELECT * FROM nama_tabel WHERE kondisi

Maka akan menampilkan data menggunakan perintah where :
SELECT * FROM tb_tamu WHERE alamat=’ujung berung’;
Gambar 10.12. Tampilan SELECT * FROM tb_tamu WHERE alamat=’ujung berung

Contoh diatas mengartikan bahwa sintax meminta untuk menampilkan semua data yang ada
pada tabel tb_tamu yang dimana akan ditampilkan dari field alamat yang isi data dari field alamat
hanya ujung berung. Maka yang keluar adalah data ang filed alamatnya hanya ujung berung.
10.3.3. Menampilkan Data dengan BETWEEN
Between artinya diantara, between befungsi untuk menampilkan data yang tertentu
misalnya diantara 2000 dan 5000. Untuk menampilkan data dengan between dapat menggunakan
sintax berikut:
SELECT * FROM nama_tabel WHERE kondisi BETWEEN nilai_1 AND nilai_2;
Buatlah sebuah DATABASE dengan nama db_stock kemudian buatlah tabel didalamnya dengan
nama tabel t_barang kemudian isi data seperti berikut :
Gambar 10.12. Tampilan From t_barang

112
BAHAN AJAR
MATERI 11-12
11.1. Pengenal CMS wordpress
WordPress merupakan salah satu CMS (Content Management System) yang digunakan
untuk membuat sebuah blog atau website. Di dunia ini, ada berbagai macam CMS, seperti misalnya
Joomla, Drupal, DotNetNuke, WordPress, Moodle, dll. Disini kita menggunakan WordPress,
karena memang penggunaannya yang mudah dan juga user-friendly, WordPress bisa digunakan
untuk blog pribadi maupun website perusahaan, berbeda dengan Joomla yang memang di
khususkan untuk membuat website perusahaan dan Moodle di khususkan untuk pembelajaran
melalui internet atau e-learning.
WordPress tidak hanya digunakan di Indonesia, akan tetapi digunakan oleh para blogger di
seluruh penjuru dunia dan sebagian dari mereka sudah mengetahui keunggulan maupun kemudahan
yang dimiliki WordPress.Kita bisa membuat sebuah blog menggunakan wordpress baik secara
online langsung (melalui www.wordpress.com) maupun melalui server lokal yang nantinya harus
di upload ke sebuah web server untuk bisa dipublikasikan ke internet, tetapi jika membuat sebuah
blog secara online (www.wordpress.com), kita tidak bisa sepenuhnya menggunakan fitur yang ada
di dalam dashboard WordPress, misalnya jika kita membuat sebuah blog dengan WordPress versi
online, itu kita tidak bisa menggunakan ataupun menambah plug-in, plug-in itu sendiri merupakan
salah satu tool atau alat yang ada di dalam WordPress yang berguna untuk menambah suatu
software pembantu atau fitur tambahan untuk dapat menambah dan mempercantik konten yang ada
di dalam blog, dikarenakan WordPress itu sendiri merupakan CMS berbayar yang berarti kita harus
membayar atau dalam kata lain membeli WordPress itu untuk bisa menggunakan seluruh fitur yang
ada di dalamnya, tetapi di sisi lain, kita tidak perlu menggunakan web server kita sendiri karena
jika kita membuat WordPress online, secara otomatis WordPress kita akan masuk ke dalam web
server mereka, sehingga kita hanya perlu mendaftar saja. Akan tetapi jika kita membuat sebuah
blog melalui
WordPress
versi lokal
(dibuat di dalam
komputer
kita sendiri tanpa akses internet lalu di upload ke web server), kita bisa menggunakan fitur-fitur
113
yang ada di dalam WordPress secara keseluruhan Cara bagaimana membuat WordPress versi
online maupun lokal akan dibahas di artikel yang lain.
11.2. Pembuatan Database WEB

Cara membuat database web adalah sebagai berikut : Copy file .rar file Wordpress cari
dimana Anda meletakan instalasi XAMPP pilih htdocs lalu paste lalu klik kanan pada file .rar tadi
pilih exstrac here dan tunggu hingga proses ekstraksi selesai klik kanan pada hasil ekstraksi file tadi
lalu pilih rename dan ganti sesuai nama web yang saya inginkan ( contoh: trijokosaputro )
Buka web browser Anda lalu ketikan localhost/phpmyadmin klik database pada crate
database tuliskan nama file .rar yang telah kita extrac dan direname klik create dan tunggu proses
hingga selesai buka web browser lalu ketikan localhost/nama database ( localhost/trijokosaputro )
klik crate a configuration file klik lets go pada database name ketikan nama database pertama, user
name isikan root, pasword kosongkan saja klik submit. Klik run the instal pada site title isikan judul
web yang akan Anda buat, masukan username, pasword dan email Anda klik instal wordpress
klik login masukan username dan pasword yang sebelumnya telah Anda buat maka Anda akan
masuk kedalah dashboard web Anda untuk melihat web Anda ketikan pada adress bar
localhost/nama database (contoh: localhost/trijokosaputro).
11.3. Instalasi XAMPP
Sebelum melakukan pembuatan WEB langkah awal adalah melakukan instalasi WEB
server, dan ditutorial ini menggunakan XAMPP sebagai WEB server. Cara melakukan instalasi
XAMPP yaitu, Buka File XAMPP tentukan dimana akan meletakan hasil instalasi Xampp lalu klik
instal dan tunggu proses instalasi hingga selesai Bila proses instalasi sudah selesai maka akan
muncul icon Xampp pada dekstop lalu dibuka berilah tanda chek list pada Apache lalu klik start
lakukan hal yang sama pada MySql dan FileZilla Untuk melihat apakah XAMPP sudah terinstal
dengan baik ataukah belum buka aplikasi browser Anda lalu pada Adress Bar ketikan localhost.
Contoh hasil instalasi XAMPP pada web browser dan Aplikasi XAMPP dibawah ini.
114
Gambar 11.1. Tampilan Xampp
12.1. Instalasi Wordpress
Tahapan instalasi CMS Wordpress di localhost. Tahap silahkan install
software local server seperti XAMPP, WAMPP, dsb. Berikutnya lakukan instalasi CMS
Wordpress sebagaimana langkah-langkah berikut:
1. Download CMS Wordpress dari https://wordpress.org/download/
Gambar 12.1. Tampilan Website CMS Wordpress

2. Kemudian extract file yang sudah anda download tersebut.
Gambar 12.2. Tampilan Extract File
115
Gambar 12.3. Tampilan Hasil Extract File
3. Kemudian copy folder yang sudah di extract tersebut ke folder htdocs yang ada di drive C:
(atau tempat lain sesuai instalasi anda)
Gambar 12.4. Tampilan Copy Folder
Gambar 12.5. Tampilan Proses Copy Folder

4. Rubah nama folder sesuai dengan nama web yang anda inginkan. Sebagai contoh, dalam
tutorial ini kita ganti dengan nama websiteku.
116
Gambar 12.6. Tampilan Ubah Nama Folder
5. Buka browser, kemudian ketikkan alamat berikut: http://localhost/websiteku/
Gambar 12.7. Tampilan Browser

6. Kemudian anda akan masuk ke konfigurasi awal CMS. Pilih bahasa yang diinginkan untuk
halaman dashbord. Dalam tutorial ini dipilih English (United States).
117
Gambar 12.8. Tampilan Ke Konfigurasi Awal CMS
7. Kemudian akan muncul halaman konfigurasi database untuk CMS wordpress yang kita
install.
Gambar 12.9. Konfigurasi Database

8. Buka sebuah halaman browser lagi, lalu ketikkan localhost/phpmyadmin/
Gambar 12.10. Tampilan Localhost/Phpmyadmin

9. Kemudian klik Databases
118
Gambar 12.11. Tampilan klik Databases
10. Kemudian ketikkan nama database sesuai keinginan. Agar lebih mudah, berikan nama
sesuaidengan nama folder web anda, dalam tutorial ini diberi nama websiteku. Lalu klik
tombol create.
Gambar 12.12. Tampilan Klik Tombol Create.

11. Silahkan kembali ke halaman browser konfigurasi CMS Wordpress anda, lalu klik tombol
Let's Go.
119
Gambar 12.13. Tampilan Konfigurasi CMS Wordpress
12. .Isi form yang ada sesuai dengan konfigurasi Database. Pada tutorial ini Database Name:
websiteku, Username: root, password: (kosong/tidak diisi), Database Host: localhost, Table
Prefix: wp_ kemudian klik tombol submit.
Gambar 12.14. Tampilan Konfigurasi Database

13. Lalu klik tombol run install
120
Gambar 12.15. Tampilan tombol run install
14. Kemudian kita masuk pada halaman konfigurasi login administrator web. Beri nama Situs,
userna, dan password (silahkan ganti password sesuai keinginan anda). Lalu klik tombol
Install Wordpress.
Gambar 12.16. Tampilan Install Wordpress
Gambar 12.17. Tampilan Konfigurasi Login Administrator

15. Instalasi CMS wordpress berhasil! silahkan klik login.
121
Gambar 12.18.Tampilan Instalasi CMS wordpress berhasil
122
16. Masukkan username dan password sesuai dengan yang sudah anda konfigurasi sebelumnya
Gambar 12.19. Tampilan Login

17. Anda akan masuk ke halaman dashboard. Halaman dashbord ini berfungsi untuk mengelola
web dan hanya bisa dilihat oleh pengelola.
Gambar 12.20. Tampilan Dashbord

18. Untuk melihat halaman yang diakses oleh pengunjung web, silahkan ketikkan di halaman
browser localhost/websiteku
123
Gambar 12.21. Tampilan Halaman Browser Localhost/Websiteku
124
BAHAN AJAR
MATERI 13-14
13.1. Pengenalan Cpanel
Cpanel adalah sebuah aplikasi control panel berbasis linux untuk mengatur web hosting
secara online. Dibanding dengan menggunakan console, Cpanel menggunakan GUI ( Graphical
User Interface ) melalui browser untuk menggunakanya. Dengan menggunakan GUI melalui
browser hal ini dapat memudahkan pengguna dalam melakukan pengaturan dengan mudah dan
cepat. Pengguna awam pun dapat langsung melakukan pengaturan dengan mudah karena
tempilanya yang simple dan jelas. cPanel mempunyai banyak fitur menarik contohnya menambah
email, menambahkan subdomain, pengaturan DNS, dll.
13.1.1. Login cPanel
Inilah dua cara untuk mengakses cPanel menggunakan browser Anda.
Melalui Halaman Login cPanel Untuk mengakses cPanel, Anda bisa mengetikkan alamat:
http://www.namadomain.com/cpanel di browser yang Anda gunakan. Jika berhasil, akan muncul
halaman berikut:
Gambar 13.1. Login Cpanel

Silakan masukkan username dan password yang Anda terima saat membeli layanan hosting
dan domain.
13.1.2 Melalui Member Area Niagahoster
Khusus bagi pengguna layanan hosting Niagahoster, Anda juga bisa mengakses cPanel
melalui halaman Member Area Niagahoster. Silakan ketikkan https://panel.niagahoster.co.id/login
dan masukkan username dan password untuk masuk ke Member Area.
125
Gambar 13.2. Tampilan https://panel.niagahoster.co.id/login
Selanjutnya, pilih menu Kelola Hosting
Gambar 13.3. Tampilan Menu Hosting

Pada menu Pengaturan Hosting di bagian cPanel, pilih All Features seperti ditunjukkan gambar
berikut:
Gambar 13.4. Menu Pengaturan Hosting
126
Selanjutnya, pilih menu Kelola Hosting. Pada menu Pengaturan Hosting di bagian cPanel, pilih All
Features seperti ditunjukkan gambar berikut: Jika sudah berhasil, Anda akan menemukan halaman
dashboard cPanel Anda.
Gambar 13.5. Tampilan Menu Kelola Hosting

13.2. Mengelola Domain Cpanel
Selanjutnya mari mulai dengan mengelola domain. Caranya, silakan masuk ke bagian
Domains di cPanel.
Gambar 13.6. Mengelola Domain

Pada bagian ini, Anda akan menemukan beberapa fitur antara lain:
a. Site Publisher. Di menu ini, Anda bisa dengan mudah membuat website
menggunakan berbagai template yang tersedia.
b. Domains. Halaman domain menunjukkan daftar domain yang Anda gunakan. Menu
ini juga dilengkapi beberapa pengaturan untuk melakukan kustomisasi domain-
domain tersebut.
c. Addon Domains. Menu ini digunakan untuk menambah dan memodifikasi Addon
domain Anda. Addon domain adalah nama domain baru yang bisa Anda tambahkan
pada direktori Anda.
d. Subdomains. Di menu ini, Anda bisa menambahkan subdomain, yaitu sebuah
subdirectory dari folder utama Anda, public_html.
127
e. Aliases. Menu ini memudahkan Anda untuk mengelola alias domain, yaitu domain
yang mengarah ke domain lain, biasanya domain utama.
f. Redirects. Menu memungkinkan Anda untuk melakukan redirect dari satu domain
ke domain lain. Berbeda dengan alias, redirect dilakukan jika domain yang dialihkan
sudah tidak lagi digunakan.
g. Zone Editor. Pada menu Zone Editor, Anda bisa membuat dan mengelola DNS Zone
record. Setelah mengetahui menu-menu domain tersebut, Anda akan mulai belajar
beberapa fungsi penting. Apa saja.
13.2.1. Cara Membuat Addon Domain
Untuk membuat addon domain, Anda bisa pilih menu Addon Domain dan akan melihat
tampilan berikut: Pada halaman tersebut, terdapat beberapa informasi yang diperlukan untuk
menambah addon domain:
1. New Domain Name
2. Subdomain
3. Document Root
Pada dasarnya, saat Anda menuliskan sebuah nama domain, otomatis kolom subdomain dan
document root akan terisi. Pastikan nama domain Anda ketikkan dengan benar, lalu klik Add
Domain.
128
Gambar 13.7. Tampilan Addon Domain
129
13.2.2. Cara Menambah Subdomain
Sesuai namanya, Anda tidak menambahkan domain baru, tapi hanya bagian tambahan dari
sebuah domain utama. Contohnya,jika nama domain utama adalah jilbabstore.com,maka sub
domain Anda bisa berupa blog.jilbabstore.com. Artinya, blog menjadi bagian dari domain utama
jilbabstore.com. Untuk menambah subdomain, silakan pilih menu Subdomain dari bagian
Domains di cPanel.
Gambar 13.8. Tampilan Subdomain

Seperti halnya Addon Domain, di bagian subdomain, Anda akan diminta informasi:
Subdomain, Domain, dan Document Root. Nama domain secara otomatis akan diarahkan ke
domain utama, kecuali Anda menentukannya secara manual. Isikan nama subdomain, dan
document root akan terisi otomatis. Selanjutnya, klik Create.
Gambar 13.9. Tampilan Bagian Subdomain
130
13.2.3. Cara Membuat Alias Domain
Anda bisa menggunakan fitur Alias jika ingin website Anda memiliki nama domain lain.
Sebagai contoh, jilbab.store dan jilbabstore.com adalah dua domain milik Anda. Website toko
online Anda yang aktif menggunakan jilbabstore.com. Nah, pada saat seseorang mengetikkan
jilbab.store, akan secara otomatis diarahkan ke domain utama Anda yaitu jilbabstore.com. Untuk
membuat domain alias, lakukan langkah berikut:
Gambar 13.10. Tampilan Alias Domain

1. Pilih menu Aliases dari bagian Domains di cPanel.
2. Isikan nama domain lain Anda di kolom Domain.
3. Klik Add Domain.
13.2.4. Cara Mensetting Redirect Domain
Dengan melakukan redirect domain, pada saat ada pengguna mengakses sebuah halaman
website dengan domain tertentu, akan secara otomatis diarahkan ke domain lain. Misalnya,
jilbabstore.com diarahkan ke jilbabstore.id. Untuk melakukannya, silakan klik pada menu Redirects
di bagian Domains cPanel. Lalu, isikan informasi berikut:
Gambar 13.11. Tampilan Mensetting Redirect Domain
131
1. Tipe Redirects. Pilihlah Permanen (301) untuk perubahan tetap dan browser maupun
searchengine akan mengarahkan ke domain baru.Pilih Temporary (302) untuk perubahan
sementara di mana pengunjung akan diarahkan ke URL lama terlebih dahulu.
2. https?://(www.)?. Pilihlah All Public Domains untuk mengarahkan domain yang ada di
cPanel kealamat domain yang baru. Atau, Anda bisa menentukan domain mana yang secara
spesifik ingin di-redirect.
3. /. Bagian ini bisa Anda kosongkan apabila berniat untuk meredirect domain utama. Jika
hanya salah satu subfolder, maka tulis nama subfolder tersebut.
4. Redirects to. Isikan alamat domain yang menjadi tujuan redirect. Pastikan Anda
menuliskannya dengan protokol yang digunakan, misalnya http://jilbabstore.id.
5. www. redirection. Biarkan dalam keadaan default, Redirect with or without www, untuk
meredirect permintaan domain baik menggunakan www atau tanpa www. Setelah semua
informasi dipastikan benar, silakan klik Add.
14.1. Mengelola File Website Di Cpanel
cpanel memiliki fitur file manager yang memungkinkan anda untuk mengelola file website
dengan mudah. baik untuk menambahkan folder atau file baru maupun untuk mengedit file yang
sudah ada. namun, perlu diingat bahwa langkah mengelola file dari cpanel harus anda lakukan
dengan benar agar tidak menyebabkan kendala pada website tersebut. untuk melakukannya, silakan
pilih file manager pada bagian files di cpanel.
Gambar 14.1. Tampilan Mengelola File Website

Setelah itu, Anda akan diarahkan ke halaman File Manager cPanel yang berisi daftar folder
dan file penting di website Anda, seperti terlihat di gambar berikut:
Gambar 14.2. Tampilan File Manager
132
14.1.1.Cara Menambah Folder di File Manager Cpanel
Untuk menambah sebuah folder ke website Anda, silakan klik + Folder di bagian kiri atas
halaman File Manager.
Gambar 14.3. Tampilan Cara Menambah Folder di File Manager Cpanel

Selanjutnya, Anda akan diminta mengisikan informasi nama folder dan lokasi folder
tersebut akan disimpan. Untuk contoh ini, kami menggunakan nama folder testing yang akan
disimpan di folder utama website yaitu public_html. Jangan lupa, klik Create Folder jika sudah
selesai.
Gambar 14.4. Tampilan Public_html

Apabila berhasil, folder Anda akan tersimpan di folder public_html sebagai berikut:
Gambar 14.5. Tampilan Folder Public_html
133
14.1.2. Cara Mengupload File ke File Manager cPanel
Selain menambahkan file secara manual, Anda juga bisa melakukan upload file yang sudah
dibuat sebelumnya. Caranya, masih pada folder yang dituju untuk menyimpan file, silakan pilih
menu Upload.
Gambar 14.6.Tampilan Menu Upload

Selanjutnya, Anda akan diarahkan ke halaman upload file. Silakan pilih Select File, atau drag-and-
drop file yang akan diupload ke halaman tersebut. Pastikan Anda masih memiliki ruang
penyimpanan yang cukup pada saat melakukan upload file.
14.1.3. Cara Mengelola File Menggunakan FTP
Selain dengan ketiga cara di atas, Anda juga bisa mengelola file menggunakan FTP (File
Transfer Protocol). Sesuai namanya, tool ini digunakan melakukan transfer file, baik untuk
mengupload file dari komputer ke server atau mendownload file dari server ke komputer Anda.
Untuk dapat menggunakan FTP, Anda harus membuat sebuah akun FTP terlebih dahulu. Caranya
silakan pilih FTP Accounts dari bagian Files di cPanel. Anda akan diarahkan untuk masuk ke
halaman FTP, dan diminta untuk memasukkan berbagai data untuk akun FTP Anda.
1. Login merupakan username dari akun FTP yang dibuat.
2. Password adalah kata sandi yang akan digunakan.
3. Strength menunjukkan seberapa kuat password yang dibuat.
4. Directory adalah direktori utama yang akan digunakan untuk kegiatan transfer
file.
5. Quota adalah banyaknya ruang penyimpanan yang akan digunakan.Jika semua
data sudah diisi dengan benar, klik Create FTP Account. Setelahberhasil, Anda
perlu melakukan konfigurasi FTP client untuk langkah selanjutnya.
Silakan klik Configure FTP client. Anda bisa mendownload konfigurasi file dari dua FTP
client yang sudah disediakan yaitu CoreFTP untuk Windows dan Cyberduck untuk MacOS. Atau,
Anda bisa mencatat informasi konfigurasi manual yang bisa digunakan untuk melakukan setting
pada FTP client favorit Anda, misalnya FileZilla. Kami memiliki Panduan untuk Menggunakan
FileZilla untuk dapat membantu Anda melakukan setting manual.
134
14.2. Instal Aplikasi Di Cpanel
Setelah melakukan berbagai pengaturan terkait file dan database, Anda juga biasa
melakukan instalasi aplikasi di cPanel. Aplikasi berguna bagi Anda untuk menjalankan website,
blog dan toko online. Untuk menginstal aplikasi, cPanel menyediakan tool Softaculous Installer
bagian Software.
Gambar 14.7. Tampilan Tool Softaculous Installer Bagian Software

Anda akan diarahkan ke halaman Softaculous, dan melihat berbagai aplikasi yang
disediakan seperti WordPress, Abante Cart, Prestashop, Joomla, dan lainnya.
Gambar 14.8. Tampilan WordPress, Abante Cart, Prestashop, Joomla
14.2.1. Cara Melakukan Instalasi Aplikasi di cPanel

Berikut ini adalah langkah untuk melakukan instalasi aplikasi di cPanel. Kami akan
menggunakan WordPress sebagai contoh. Silakan klik pada ikon WordPress, dan Anda akan
melihat halaman untuk menginstall WordPress. Lalu, pilih menu Install Now.
Gambar 14.9. Tampilan Instalasi Aplikasi di cPanel
135
Selanjutnya, Anda akan diarahkan ke halaman pengisian data untuk website/ blog Anda
sebagai berikut:
Gambar 14.10. Tampilan Halaman Pengisian Data

Informasi yang harus Anda isikan antara lain:
a. Choose Installation URL. Pada bagian ini tentukan protokol yang akan Anda
gunakan, www atau non-www dan http atau https. Selain itu, pilih domain
yang akan digunakan jika memiliki lebih dari satu.
b. Site Name. Tentukan nama untuk website/blog Anda.
c. Site Description. Tentukan deskripsi untuk website/blog Anda secara
singkat.
d. Enable Multisite. Jika Anda ingin mengelola banyak website/blog dalam satu
dashboard WordPress, centang pilihan ini.
e. Admin Username. Tuliskan username yang akan Anda gunakan tiap kali
login ke dashboard WordPress.
f. Admin Password. Tuliskan kata sandi untuk login ke dashboard WordPress.
g. Admin Email. Tuliskan alamat email yang Anda gunakan sebagai admin
email untuk website tersebut.
h. Select Language. Ganti dengan bahasa Indonesia apabila tidak ingin
menggunakan bahasa Inggris.
i. Limit Login Attempts (Loginizer). Plugin tambahan yang membatasi
kesalahan dalam melakukan login demi keamanan website.
136
j. Classic Editor. Plugin tambahan untuk menampilkan halaman editor
WordPress klasik, bukan Gutenberg.
k. Select plugins/themes sets. Biarkan dalam keadaan tercentang untuk
menggunakan plugin LiteSpeed Cache untuk menambah kecepatan
website/blog.
l. Select Theme. Pilih tema yang sesuai untuk tema blog/website Anda. Setelah
mengisikan data di atas, dan memilih tema sesuai keinginan, Anda bisa klik
Install.
Gambar 14.15. Tampilan Tema

Tunggu prosesnya beberapa saat hingga dinyatakan WordPress sudah berhasil terinstall dan
website/blog Anda sudah dapat diakses.
137
MEDIA PEMBELAJARAN
A. Online
1. Google Sites
https://sites.google.com/view/chairulimam
A. Latar Belakang
Seiring dengan perkembangan teknologi yang semakin maju sehingga metode
pembelajaran harus menyesuaikan dengan perkembangan zaman. Hal ini dikarenakan teknologi
internet dapat memudahkan dan mengoptimalkan pembelajaran sehingga bisa dilakukan secara
jarak jauh yang tidak terhalang oleh jarak dan waktu.
Salah satu teknologi yang mempengaruhi pembelajaran adalah teknologi internet.
Teknologi Internet tidak dibatasi pada waktu dan jarak, keunggulan internet mempermudah proses
138
pembelajaran yang bisa dilakukan dimana saja dan dilakukan kapan saja. Ditambah lagi jika
terdapat hal-hal yang tidak memungkinkan untuk melakukan pembelajaran di dalam kelas,
contohnya seperti ketika sedang terjadi pandemic COVID- 19 seperti sekarang ini. Penggunaan
teknologi sebagai media pembelajaran jarak jauh akan sangat membantu proses pembelajaran.
Media website pada internet sangat cocok untuk dijadikan alternatif pilihan media
pembelajaran jarak jauh. Media website dapat juga digunakan sebagai sarana pembelajaran untuk
meningkatkan dampak positif penggunaan internet. Yang tentu saja dalam hal ini membutuhkan
peran yang baik dari para tenaga pendidik dalam mengelola pembelajaran daring ini agar dapat
digunakan secara terarah dengan baik dan sesuai dengan pada proses pembelajaran.
Google sites adalah salah satu media webstite yang bisa dimanfaatkan dalam proses
pembelajaran. Google sites adalah sebuah website yang digunakan untuk keperluan kelompok
ataupun pribadi. Google Sites merupakan cara termudah dalam membuat informasi yang bisa
diakses oleh orang yang membutuhkan sceara cepat, dan orang-orang dapat bekerja sama dalam
situs untuk menambahkan berkas file lampiran serta informasi dari aplikasi google lainnya seperti
google docs, sheet, forms, calender, awesome table dan lain sebagainya. Dengan fitur-fitur yang
ditawarkan google sites dapat menunjang pembelajaran.
B. Pengertian Google Sites
Perkembangan teknologi dewasa ini telah berkembang dengan pesat. Penggunaan teknologi
khususnya perkembangan teknologi internet dapat dimanfaatkan sebagai fasilitas pembelajaran
berbasis online. Google memiliki produk yang bisa dimanfaatkan untuk keperluan pendidikan
secara gratis, salah satunya adalah google sites. Google sites digunakan untuk membuat situs
webite untuk pribadi ataupun kelompok, baik untuk keperluan personal ataupun korporat.
Google Sites merupakan cara termudah dalam membuat informasi yang bisa diakses oleh orang
yang membutuhkan secara cepat, dan orang-orang dapat bekerja sama dalam situs untuk
menambahkan berkas file lampiran serta informasi dari aplikasi google lainnya seperti google docs,
sheet, forms, calender, awesome table dan lain sebagainya. Google sites adalah produk yang dibuat
oleh google sebagai alat untuk membuat situs. Google sites sangat mudah digunakan terutama
untuk menunjang pembelajaran dengan memaksimalkan fitur-fitur seperti google docs, sheet,
forms, calender, awesome table dan lain sebagainya.
C. Pemanfaatan Google Sites Sebagai Media Pembelajaran

139
Pembelajaran menggunakan google sites memberikan manfaat bagi dosen ataupun mahasiswa,
manfaat dari pemanfaatan google sites ini adalah:
1. Pembelajaran lebih menarik
Dengan menggunakan google sites pembelajaran akan lebih lengkap dan menarik
dikarenakan bisa memanfaatkan fitur-fitur di dalam google sites.
Seperti; google docs, sheet, forms, calender, awesome table dan lain sebagainya.
2. Lebih mudah mendapatkan materi pembelajaran
Dengan adanya google sites maka materi pembelajaran akan diunggah ke dalam google
sites sehingga mahasiswa ataupun dosen tidak perlu menggunakan flashdisk yang bisa
menyebabkan banyaknya virus yang masuk ke dalam computer.
3. Materi pembelajaran tidak mudah hilang
Materi yang telah diunggah ke dalam google sites akan tetap berada di google sites dan
tidak akan terpengaruh dengan gangguan virus atau yang lainnya.
4. Mahasiswa dapat mendapatkan informasi pembelajaran dengan cepat
Dengan menggunakan google sites, penggunananya baik mahasiswa ataupun dosen dapat
mendapatkan informasi mengenai pembelajaran dengan cepat dengan menggunakan
informasi yang diunggah oleh dosen.
5. Dapat menyimpan silabus di google sites
Silabus pembelajaran dapat diunggah oleh dosen ke dalam google sites, Mahasiswa
mengetahui topik dan tema pembelajaran pada setiap pertemuan selanjutnya.
6. Tugas melalui google sites
Tugas pembelajatn dapat diberikan oleh dosen melalui google sites, sehingga peserta didik
tidak tertinggal informasi dan tugas-tugasnya. Tugas perkuliahan dapat diberikan dan
dikumpulkan melalui google sites.
D. Mekanisme Penggunaan Google Sites dalam Pembelajaran

Penggunaan google sites dalam proses pembelajaran dapat dioptimalkan menjadi
140
pembelajaran yang lengkap dan menarik, cara mengoptimalkan penggunaan google sites dalam
pembelajaran adalah.
1. Mengunggah Materi Pembelajaran
Materi pembelajaran yang diunggah pada google sites akan memudahkan mahasiswa
sehingga mereka tidak perlu copy file menggunakan flashdisk yang dapat merepotkan dan tertular
virus. Mahasiswa hanya mengunjungi google sites dosen, kemudian mengunduh materi
pembelajaran.
2. Memberikan Tugas
Pengumuman tugas diberikan melalui google sites. Mahasiswa didorong untuk
mengunjungi google sites dosen secara berkala agar tidak tertinggal informasi mengenai tugas.
Sehingga tidak ada alasan bagi mahasiswa jika tidak mengetahui mengenai tugas yang diberikan
dosen.
3. Memberi Pengumuman
Memberikan pengumuman terbaru pada mahasiswa melalui googgle sites. Seperti
memberi link internet yang terkait dengan materi pembelajaran ataupun memberikan informasi
referensi buku yang digunakan pada materi pembelajaran.
4. Mengunduh dan Melihat Tugas Mahasiswa
Mahasiswa bisa mengunggah tugas pada google sites yang kemudian dapat dilihat oleh
dosen. Pada google sites terdapat keterangan mengenai waktu pengumpulan tugas yang dilakukan
oleh mahasiswa kemudian dosen juga dapat mengatur waktu pengumpulan tugas yang
ditetetapkan pada waktu tertentu.
2. BBC Podcast
https://www.bbc.co.uk/learningenglish/
3. Audiobooks
141
https://www.audible.com/ep/FreeListens
4. ABC Podcast
https://www.abc.net.au/radio/podcasts/
5. VOA Learning English Podcast
https://learningenglish.voanews.com/podcasts
6. You Tube Channel
142
https://www.youtube.com/watch?v=W7BW9gv_OkU
B. Off-line
Power Point Presentation
143
144
145
RANCANGAN TUGAS DAN PRAKTIKUM
Rancangan Tugas Terstruktur
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277
Rancangan Tugas dan Praktikum


Kode : PTIF3405
SKS :3
Tugas Ke I (Pertama)
 Tujuan Tugas Melatih mahasiswa untuk mencapai kemampuan akhir pokok
bahasan pada Materi 2-3
1) Menampilkan teks dengan ganti baris (element
BR):Belajar bahasa pemrograman web. Dengan materi
dasar HTML. Dan JSP Belajar bahasa pemrograman web.
 Uraian Tugas
Dengan materi dasar HTML. Dan JSP.
2) Menampilkan teks dalam bentuk paragraf (element
P):Tampilan teks sebelum paragraf. Tampilan teks
paragraf pertama. Tampilan teks paragraf kedua.
Tampilan teks setelah paragraf.
 Kriteria Penilaian Ketepatan, kelengkapan dan kejelasan jawaban
1. Kuis (0-100) Bobot Nilai 20, Nilai Individu

2. Tugas terstuktur 1 (75-100) Bobot Nilai 5, Nilai
Kelompok
 Bobot Penilaian 3. Tugas terstruktur 2 (75-100) Bobot Nilai 5, Nilai
Kelompok
4. UTS (0-100) Bobot Nilai 30, Nilai Individu
5. UAS (0-100) Bobot Nilai 40, Nilai Individu
146
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277


Kode : PTIF3405
SKS :3
Tugas Ke II (Kedua)
1. Tujuan Tugas Melatih mahasiswa untuk mencapai kemampuan akhir pokok
2. Uraian Tugas 1) Jenis-Jenis Selector Pada CSS di dalam website.
2) Jelaskan cara membuat code tabel pemograman website
3. Kriteria Penilaian Ketepatan, kelengkapan dan kejelasan jawaban

Kelompok
4. Bobot Penilaian 3. Tugas terstruktur 2 (75-100) Bobot Nilai 5, Nilai
Kelompok
147
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277


Kode : PTIF3405
SKS :3
Tugas Ke III (Ketiga)

2. Uraian Tugas 1) Jelaskan cara membuat Sintact PHP Koneksi Ke Database !
2) Jelaskan cara membuat Sintact PHP Memanggil Data Dari
Database!

Kelompok
Kelompok
148
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277


Kode : PTIF3405
SKS :3
Tugas Ke IV (Keempat)
bahasan pada Unit Materi 9-10
1) Jelaskan cara membuat sintact syntax subquery
2. Uraian Tugas
2) Jelaskan cara membuat SQL Query untuk menampilkan
last name, department number, dan department name
untuk semua pegawai.

Kelompok
Kelompok
149
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277


Kode : PTIF3405
SKS :3
Tugas Ke V (Kelima)
bahasan pada materi 11-12
1) Jelaskan cara membuat website cms wordpress dengan
2. Uraian Tugas
kombinasi mysql.
2) Jelaskan cara membuat website ecommerce pada cms
wordpress

Kelompok
Kelompok
150
UNIVERSITAS BATTUTA
FAKULTA TEKNOLOGI
Sumatra 20154,Telepon: (061) 80514277


Kode : PTIF3405
SKS :3
Tugas Ke VI (Keenam)
1) Jelaskan bagaimana mengelola akun hosting
2) Sebutkan salah satu persyaratan membuat domain,
2. Uraian Tugas
misalkan :
a. Domain .com. apa syaratnya?
b. Domain .co.id, apa syaratnya?
c. Domain .org, apa syaratnya?

Kelompok
Kelompok
151
KISI-KISI TES, TES SOAL ESSAY DAN KUNCI JAWABAN
A. Kisi-Kisi Tes
Kode : PTIF3405
SKS :3
No Standar Kunci Jml
Bentuk No
Kompetensi Aspek Jawaba Soa
Kompetensi Dasar Materi Indikator Soal Soal
n l
C1 C2 C3 C4 C5 C6
2-3 Mahasiswa Mahasiswa mampu 2. Pengertian Ketepatan 1
dapat memahami scripting HTML: menjelaskan √ Essay Soa
memahami HTML 1)Pengertian scripting l
scripting Hypertext Markup HTML
HTML Language (HTML)
2)Struktur Dasar
HTML 1
3. Format HTML √ Essay Soa
dan Tabel HTML: l
1)Html Format teks
2)Pembuatan Tabel
Menggunakan HTML
4-5 Mahasiswa Mahasiswa mampu 4.Bagian-bagian CSS Ketepatan: 1
dapat memahami cara membuat dan Basic Element: 1.menjelaska √ Essay Soa
memahami frame dan mengelola CSS 1)Pengenalan CSS n penggunaan l
penggunaan pada form halaman web 2)BASIC ELEMENT CSS

CSS dan dapat 2.mengimple Essay 1
STYLING Soa
mengimplemen mentasikan √.
5. CSS Box Model
152
tasikannya CSS l
6-7 Mahasiswa Mahasiswa mampu 6. Tentang PHP Dan Ketepatan Essay 1
dapat memahami perancangan Instalasi: menjelaskan √ Soa
memahami halaman web 1.Tentang PHP PHP l
PHP menggunakan PHP 2.Instalasi Apache dan
PHP
7. memahami tag Essay
pada PHP serta
√ 1
mengetahui struktur Soa
kontrol: l
1.Memahami tag-tag
dalam PHP
2.Memahami tentang
struktur kontrol
9-10 Mahasiswa Mahasiswa mampu: 9. Database MySQL Ketepatan : √ Essay 1
dapat 1.memahami Administrasi 1)Mengenal MySQL 1.menjelaska Soa
memahami MySQL untuk membuat 2)Fungsi – Fungsi n konsep l
Administrasi database Pada MySQL relasi.
MySQL dan 2.menggunakan GUI 3)Administrasi 2.menjelaska √ Essay 1
menggunakan untuk membuat database MySQL n proses Soa
GUI untuk 10. Membahas pemodelan l
membuat tentang DDL dan data logik.
database DML serta seleksi
data:
1)DDL ( Data
Definiton Language )
2)DML (Data
Manipulation
Language)
3)Seleksi Data
153
11-12 Mahasiswa Mahasiswa mampu 11.Pengenal CMS Ketepatan √ Essay 1
dapat membuat koneksi wordpress serta membuat Soa
memahami database dan mampu database dan koneksi l
pembuat membuat aplikasi dengan instalasi Xammp : database dan
koneksi CMS Wordpress dan 1)Pengenal CMS mampu
database dan MySQL wordpress membuat √ Essay 1
mampu 2)Pembuatan Database aplikasi Soa
membuat WEB dengan CMS l
aplikasi dengan 3)Instalasi Xampp Wordpress dan
CMS 12.Instalasi Mysql
Wordpress dan wordpress
MySQL
13-14 Mahasiswa Mahasiswa mampu 13.Pengenalan dan Ketepatan √ Essay 1

dapat memahami mengelola proses pengelola membuat Soa
memahami Cpanel Hosting domain: koneksi l
mengelola domain dan
Cpanel Hosting hosting ke
154
1.Pengenalan Cpanel cpanel dalam √ Essay 1
2.Mengelola Domain pembuatan Soa
Cpanel website. l
14.proses pengelola
file website dan instal
aplikasi di cpanel :
1.Mengelola File
Website Di Cpanel
2.Instal Aplikasi Di
Cpanel
155
B. Tes Soal Essay
Dalam mata kuliah pemograman web, disimpulkan bahwa tes hasil belajar
pemograman web yang dilakukan dengan tes essay yang digunakan untuk mengukur
penguasaan mahasiswa terhadap materi yang telah diajarkan serta dapat mengukur
perkembangan kemajuan belajar peserta didik. Adapun bagian-bagian dari tes soal essay
dibawah ini dengan pertemuan 2 sampai 14.
Soal Bagian 2-3.
1) Menampilkan teks dengan ganti baris (element BR):Belajar bahasa pemrograman
web. Dengan materi dasar HTML. Dan JSP Belajar bahasa pemrograman web.
2) Menampilkan teks dalam bentuk paragraf (element P):Tampilan teks sebelum
paragraf. Tampilan teks paragraf pertama. Tampilan teks paragraf kedua. Tampilan
teks setelah paragraf.
Soal Bagian 4-5.
1) Jenis-Jenis Selector Pada CSS di dalam website.
2) Jelaskan cara membuat code tabel pemograman website.
Soal Bagian 6-7.
1) Jelaskan cara membuat Sintact PHP Koneksi Ke Database !
2) Jelaskan cara membuat Sintact PHP Memanggil Data Dari Database!
Soal Bagian 9-10.
1) Jelaskan cara membuat sintact syntax subquery.
2) Jelaskan cara membuat SQL Query untuk menampilkan last name, department
number, dan department name untuk semua pegawai.
Soal Bagian 11-12.
1) Jelaskan cara membuat website cms wordpress dengan kombinasi mysql.
2) Jelaskan cara membuat website ecommerce pada cms wordpress
Soal Bagian 13-14.
1) Jelaskan bagaimana mengelola akun hosting
2) Sebutkan salah satu persyaratan membuat domain, misalkan :
a. Domain .com. apa syaratnya?
b. Domain .co.id, apa syaratnya?
c. Domain .org, apa syaratnya?
C. Kunci Jawaban
156
Kunci Jawab Bagian 2-3.
Jawaban 1:
Menampilkan teks dengan ganti baris (element BR):
Belajar bahasa pemrograman web. Dengan materi dasar HTML. Dan JSP Belajar bahasa
pemrograman web.
Nama file: latihan2_1.html
<html>
<head>
<title>Latihan2-1</title>
</head>
<body>
Belajar bahasa pemgrograman web. Dengan mater dasar HTML. Dan JSP. <br>
<br>Belajar bahasa pemrograman web.<br>Dengan materi dasar HTML.<br>Dan JSP.
</body>
</html>
Jawaban 2:
Menampilkan teks dalam bentuk paragraf (element P):
Tampilan teks sebelum paragraf. Tampilan teks paragraf pertama. Tampilan teks paragraf
kedua. Tampilan teks setelah paragraf.
Nama file: latihan2_2.html
<html>
<head>
<title>Latihan2-2</title>
</head>
<body>
Tampilan teks sebelum paragraf.
<p>Tampilan teks paragraf pertama.</p>
<p>Tampilan teks paragraf kedua.</p> Tampilan
teks setelah paragraf.
</body>
</html>

Jawaban 1:
Jenis-Jenis Selector Pada CSS di dalam website
> Type Selector
p{
font-family: arial, helvetica, sans-serif;
font-size: 13px;
157
color : #333;
}
> Class Selector
.beda {
font-size: 15px;
color : red;
}
> Id Selector
#khusus {
font-size: 12px;
color: blue;
}
> Descendant Selector
.konten p{
color: blue;
}
> Universal Selector
*{
color: #fff;
background-color: #333;
}
Jawaban 2 :
Jelaskan cara membuat code tabel pemograman website
<body>
<table width="800" border="1">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</body>

Jawaban 1.
Jelaskan cara membuat Sintact PHP Koneksi Ke Database !
<?php
$servername = "localhost";
$database = "niagahos_namadatabase";
$username = "niagahos_user";
158
$password = "passworddatabase";
// untuk tulisan bercetak tebal silakan sesuaikan dengan detail database Anda
// membuat koneksi
$conn = mysqli_connect($servername, $username, $password, $database);
// mengecek koneksi
if (!$conn) {
die("Koneksi gagal: " . mysqli_connect_error());
}
echo "Koneksi berhasil";
mysqli_close($conn);
?>
Jawaban 2.
Jelaskan cara membuat Sintact PHP Memanggil Data Dari Database!
CREATE TABLE `mahasiswa` (
`nim` varchar(13) NOT NULL,
ìd_mahasiswa` int(11) NOT NULL,
`nama` varchar(40) NOT NULL,
`jenis_kelamin` enum('P','L') NOT NULL,
`jurusan` varchar(30) NOT NULL,
àlamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `mahasiswa`

ADD PRIMARY KEY (ìd_mahasiswa`);
ALTER TABLE `mahasiswa`
MODIFY ìd_mahasiswa` int(11) NOT NULL AUTO_INCREMENT,
AUTO_INCREMENT=4;

Jawaban 1.
Jelaskan cara membuat sintact syntax subquery.
SELECT select_list FROM table WHERE expr_operator(SELECT select_list FROM table
WHERE expr_operator)
Jawaban 2.
Jelaskan cara membuat SQL Query untuk menampilkan last name, department number, dan
department name untuk semua pegawai.
159
SELECT e.last_name, e.departement_id,
d.departement_name
FROM tbemployee e, tbdepartement d
WHERE e.departement_id = d.departement_id;

Jawaban 1,
Jelaskan cara membuat website cms wordpress dengan kombinasi mysql.
1) Install WordPress
2) Mengelola Dashboard WordPress
3) Install Tema WordPress
4) Install Plugin
5) Posting Artikel
6) Membuat Halaman WordPress
7) Optimasi WordPress
8) Setting keamanan WordPress
Jawaban 2.
Jelaskan cara membuat website ecommerce pada cms wordpress.
1) Kunjungi halaman administrator (WP-Admin) ...
2) Login dengan username dan password. ...
3) klik Plugins – Add new. ...
4) Ketik WooCommerce pada kotak Pencarian. ...
5) Klik Activate Plugin. ...
6) Akhiri dengan klik Install WooCommerce Pages.
Jawaban 1.
Jelaskan bagaimana mengelola akun hosting
160
1) Langkah pertama yaitu cek email anda. Ketika membeli web hosting dan domain, anda
akan menerima beberapa email yang isinya meliputi informasi mengenai
pemesananhosting dan domain,konfirmasi pembayaran dan pengaturan hosting dan
domain anda. Bacalah dengan seksama setiap email dari penyedia jasa web hosting anda.
Silahkan anda juga mengecek nama situs anda untuk memastikan apakah situs web anda
sudah siap digunakan atau belum. Jika masih tertulis index of/ berarti situs web anda
sudah siap digunakan namun belum ada isinya.
2) Langkah kedua login ke situs anda dengan cara mengetikkan pada web browser anda
http://www.nama-situs-anda.com/cpanel jika anda membeli paket hosting dan domain.
Namun bila anda hanya membeli paket hosting tanpa membeli nama domain, maka anda
hanya bisa masuk dengan mengetikkan nama IP server hosting anda seperti ini
xxx.xxx.xxx.xxx/cPanel. Alamat IP ini tercantum dalam email yang anda terima.
3) Kemudian akan login dengan username dan password anda seperti yang tertera pada
email anda. Jika berhasil, anda akan ditampilkan menu cPanel. Menu cPanel inilah yang
nantinya untuk mengatur situs web anda. Anda cek terlebih dahulu keberadaan fasilitas
seperti email, ftp, statistik web, backup sampai dengan aplikasi web server pendukung
lainnya apakah sudah sesuai dengan yang dijanjikan atau belum. Jika tidak, anda dapat
komplain ke penyedia jasa web hosting tersebut.
4) Langkah berikutnya yaitu menginstal aplikasi web server seperti wordpress, joomla, web
forum atau yang lainnya sesuai dengan rancang bangun situs web anda. Namun jika anda
berencana membuatnya sendiri anda dapat langsung menguploadnya melalui FTP. Untuk
menginstal aplikasi wordpress, joomla, web forum atau program web server lain, anda
dapat menggunakan Fantastico yang tersedia di menu cPanel. Pada contoh kali ini kita
akan menginstal aplikasi wordpress ke dalam situs web anda. WordPress merupakan
sebuah aplikasi web yang dapat memudahkan kita dalam membuat sebuah blog/situs
web. Dukungan template dan plugin yang melimpah memudahkan kita dalam
pengoperasiannya. Kemudian, ketika anda menginstal wordpress pastikan direktori
program yang anda install terletak pada direktori utama yaitu di http://www.nama-situs-
anda.com.
5) Setelah anda install aplikasi wordpress, langkah selanjutnya yaitu mengisi situs web anda
dengan berbagai informasi, gambar dan lain-lain. Anda dapat login ke situs anda dengan
mengetikkan url : http://www.nama-situs-anda/wp-admin/. Setelah itu anda login dengan
memasukkan username dan password anda ketika anda membuat wordpress. Ingat,
161
username dan password yang anda buat di wordpress berbeda dengan username dan
password cPanel anda. Sedikit tips bagi anda belum mengerti cara menggunakan
wordpress, anda dapat mencari tutorialnya di google.com dengan mengetikkan kata
kunci “tutorial wordpress”. Sekarang, situs web anda sudah dapat digunakan. Silahkan
anda buka situs web anda http://www.nama-situs-anda.com.
6) Untuk membuat email situs anda seperti admin@nama-situs-anda.com, support@nama-
situs-anda.com dan sebagainya, anda dapat membuatnya di menu mail pada cPanel.
Anda klik Email Accounts. Pada menu tersebut anda dapat membuat email dengan
username dan password serta kapasitas penyimpanan yang anda tentukan sendiri. Hampir
semua penyedia jasa web hosting sudah mensupport untuk membuat email accounts tak
terbatas. Anda juga dapat membuat mailinglist, autoresponder email, forwarding email
dan lain-lain.
7) Untuk mengupload file ke situs web, anda dapat dengan mudah mengirimnya melalui
FTP (File Transfer Protocol). Untuk melakukannya, terlebih dahulu anda membuat FTP
accounts di menu Files pada cPanel. Setelah anda membuat FTP accounts, sekarang anda
dapat bertukar file dari komputer anda ke situs anda. Walaupun sudah ada program File
Manager di menu Files pada cPanel, namun performanya kurang menggembirakan. Anda
memerlukan program FTP Client agar proses transfer file dapat dilakukan dengan cepat
dan mudah. Program FTP yang gratis dan mudah digunakan yaitu FileZilla yang dapat
anda download dihttp://filezilla-project.org/download.php.Setelah anda download anda
install di komputer anda. Kemudian anda login dengan FTP account anda, jangan lupa
pastikan alamat server situs web anda benar. Setelah login, anda tinggal drag file yang
ingin upload ataupun di download. Anda juga dapat melakukan perubahan nama
file/folder.
8) Untuk mem-backup situs anda, anda dapat menggunakan menu Files pada cPanel.
Kemudian anda pilih Backup Wizard. Backup Wizard merupakan fasilitas untuk
membuat file cadangan/backup agar sewaktu-waktu ketika server sedang bermasalah file
situs anda tidak ikut hilang. Sebaiknya anda rutin mem-backup situs anda, minimal 1
bulan sekali. Setelah anda backup file situs anda, kemudian anda download file backup
tersebut.
9) Untuk menjaga situs web anda dari serangan pencurian data oleh para hacker, sebaiknya
anda atur juga keamanannya melalui menu security pada cPanelhostinganda. Dengan
adanya proteksi data pada situs web, maka keamanan data anda akan lebih terjamin.
162
Anda juga dapat memblokir IP address yang kerap digunakan hacker untuk menyerang
situs anda.
10) Langkah terakhir dalam mengelola cPanelhostingyaitu dengan mengecek statistik situs
web anda. Dengan statistik tersebut, anda dapat dengan mudah mengetahui :
a. kapasitas bandwidth dan space yang telah anda habiskan
b. history pengunjung situs anda secara lengkap yang meliputi : rekap pengunjung
harian, mingguan dan bulanan, IP pengunjung, jumlah halaman yang di klik, dan
lain-lain.
c. tersedia statistik yang dapat membantu anda menganalisis kunjungan situs
anda.Pada menu cPanel hosting anda akan menjumpai berbagai menu statistik,
antara lain: latest visitors, bandwidth, raw access logs, analog stats, error log,
choose log program dan awstats. Program awstats merupakan program yang
banyak digunakan karena menunya lebih lengkap dan menarik.
Jawaban 2.
Sebutkan salah satu persyaratan membuat domain, misalkan :
d. Domain .com. apa syaratnya?
e. Domain .co.id, apa syaratnya?
f. Domain .org, apa syaratnya?
Syarat Untuk Daftar Domain .com, co.id dll

Cara atau syarat daftar domain, Domain adalah alamat website atau blog yang kita gunakan
untuk menempatkan file-file yang akan kita gunakan atau akan kita bagikan kepada orang-
orang. Harga domain berbeda-beda serta syarat atau cara untuk mendaftarkan domain juga
berbeda, tergantung domain apa yang akan di beli, kalau .com, net, web.id, dll cenderung
bebas, Berikut ini akan saya bahas cara mendaftarkan atau beli domain, apa saja yang di
perlukan, dan type domain tersebut di biasanya digunakan untuk apa. Sebenarnya, untuk
membuat domain, bebas aja kok, kita bisa membuat domain dengan nama apa saja, tetapi
yang akan di bahas pada artikel ini adalah, domain yang lazim atau biasa digunakan.
Ketentuan Umum
1. Pendaftaran berdasarkan prinsip “nama domain diberikan pada yang mendaftar lebih
dahulu dan memenuhi ketentuan” – first come first served.
2. Pendaftaran dapat dilakukan oleh pemakai nama domain sendiri atau diwakili oleh
pihak lain yang ditunjuk oleh pemakai nama domain
163
3. Pendaftaran domain .ID hanya mendapat nama domain dan tidak mendapatkan tools
untuk mengelola alamat IP, in-addr domain, dan konektivitas internet pemakai nama
domain.
4. Penyelesaian sengketa nama domain (dispute resolution) diselesaikan oleh Pemerintah
Indonesia.
Kriteria Pemilihan Nama Domain
 Pilih nama domain yang singkat dan jelas.
 Ada kaitan jelas antara nama domain dengan nama organisasi yang didaftarkan.
 Tidak menggunakan nama yang menunjukkan nama geografis.
 Tidak melanggar HaKI.
 Tidak menggunakan kata-kata yang menimbulkan dampak SARA.
 Tidak menggunakan kata-kata yang melanggar norma-norma dan kaidah hukum dan
agama yang berlaku di Indonesia.
 Nama domain terdiri dari Alphabet “A-Z”,”a-z”, angka “0-9”, dan karakter “-“.
(RFC819)
 Nama domain selalu diawali dengan alphabet. (RFC819)
 Nama domain minimum dua karakter
 Direkomendasikan panjang nama domain tidak lebih dari 26 karakter.
Syarat Untuk Buka Domain.com Anda daftar dan bayar itu saja, tetapi harus memenuhi
kriteria diatas.
Syarat atau cara registrasi Untuk Domain id
Syarat dan Dokumen Yang dipenuhi untuk co.id adalah:
 Domain CO.ID ditujukan untuk organisasi komersial yang pada ketentuan dan
kebijakan selanjutnya hanya diperuntukan bagi perusahaan swasta yang memiliki
badan hukum.
 Perusahaan yang dapat mendaftarkan dalam “CO.ID” harus merupakan badan hukum
sah yang memiliki SIUP (Surat Izin Usaha Perdagangan) atau badan hukum sah yang
berbentuk PT, PK, atau Firma yang memiliki akte serta izin usaha yang terkait.
 Perusahaan yang mendaftarkan dalam merek dagang harus merupakan perusahaan
pemilik hak merek dagang yang bersangkutan. Identitas yang digunakan untuk
pendaftaran adalah Surat Bukti Kepemilikan Merk yang disahkan oleh Departemen
Kehakiman RI.
164
Dokumen identitas yang dapat digunakan untuk pendaftaran ialah:
 Akte Notaris (bila tidak ada SIUP)
 SIUP
 Surat Bukti Kepemilikan Merk atau Hak Paten (bila memakai merek terkenal)
 Kartu Identitas Penerima Kuasa (KTP/ SIM/ Pasport).
Domain Untuk Pemerintahan .GO.ID (go adalah goverment)
Ketentuan khusus pendaftaran domain .GO.ID:
 Yang mendaftar dan memiliki nama domain go.id hanyalah instansi/lembaga
penyelenggara negara (eksekutif, legislatif, dan yudikatif) dan lembaga independen
yang di bentuk oleh pemerintah.
 Setiap instansi/lembaga penyelenggara negara hanya menggunakan dan memiliki satu
Nama Domain go.id, yang mengacu kepada singkatan resmi yang ditetapkan melalui
Surat Keputusan Menteri Pemberdayaan Aparatur Negara.
 Sebagai contoh, Instansi Departemen menggunakan dep, seperti :
http://www.depdagri.go.id,http://www.depkominfo.go.id,http://www.kembudpar.go.id
, http://www.bpn.go.id, dst.
 Untuk tingkat pemerintah daerah, digunakan nama resmi daerah atau singkatan
resminya, diikuti status sebagai provinsi,kabupaten, atau kota. Sebagai contoh :
http://www.sumutprov.go.id,http://www.palukota.go.id,http://www.bandungkab.go.id,
dst;
 Untuk instansi yang memiliki lebih dari satu situs web, penamaan situs web lainnya
harus menggunakan sub direktori yang diletakkan di belakang Nama Domain dengan
didahului tanda/.Sebagai contoh http://www.bandungkota.go.id/dispenda,
http://www.jatengprov.go.id/kpde, dst;
 Untuk instansi pusat yang memiliki kantor di daerah, nama situs webnya
menggunakan nama domain instansi pusatnya, diikuti sub domain dari lokasi
keberadaan instansi tersebut. Sebagai contoh : situs web Kantor Wilayah Badan
Pertanahan Nasional Jawa Timur, adalah http://www.jatim.bpn.go.id.
 Untuk Perwakilan Luar Negeri, menggunakan nama Ibu Kota negara yang
bersangkutan diikuti singkatan kbri, sedangkan untuk tingkat konsulat jenderal
menggunakan subdomain kbri yang bersangkutan. Sebagai contoh :
http://www.ottawakbri.go.id, http://www.newyork.washingtonkbri.go.id, dst;
165
Pendaftaran permohonan nama go.id dengan persyaratan :
 Pendaftaran dapat dilakukan secara online dengan melampirkan surat kuasa yang
harus ditandatangani oleh Sekretaris Jenderal/Sekretaris/ Sekretaris Utama untuk
tingkat pusat, atau
 Sekretaris daerah propinsi/sekretaris daerah tingkat pemerintahan daerah.itu dilarang
dipergunakan.
 Untuk tingkat pemerintah daerah, digunakan nama resmi daerah atau singkatan
resminya, diikuti status sebagai provinsi,kabupaten, atau kota. Sebagai contoh:
http://www.sumutprov.go.id,http://www.palukota.go.id,http://www.bandungkab.go.id,
dst ;
 Untuk instansi yang memiliki lebih dari satu situs web, penamaan situs web lainnya
harus menggunakan sub direktori yang diletakkan di belakang Nama Domain.
 Pengecualian dan permintaan dapat dipertimbangkan sesuai dengan bobot keperluan
dari pemerintah.
 Segala kegiatan yang berkaitan dengan sebuah kantor pemerintah atau kegiatan yang
berkaitan dengan beberapa kantor pemerintah harus berada dibawah sebuah domain
dari kantor pemerintah mengingat tanggung jawab dari kelompok kerja tersebut harus
jelas penanggung jawabnya.
Catatan: Semua dokumen harus ditujukan kepada Menteri Komunikasi dan Informatika.
 KTP Penanggung Jawab
 Surat permohonan di tanda tangani oleh Sekjen/Sekut/Sekmen untuk Pemerintah
Pusat atau Sekda untuk Pemda (sesuai Permen No. 28/PER/M.KOMINFO/9/2006)
 Surat kuasa
Domain .net.id
Ketentuan khusus pendaftaran domain .NET.ID:
 NET.ID khusus diberikan ke perusahaan yang memiliki ijin usaha telekomunikasi
(ISP, Telco, VSAT, Seluler dll.) dari Pemerintah. Satu ijin berhak mendapatkan satu
domain NET.
 Izin Usaha Telekomunikasi (ISP, Telco, VSAT, Seluler, dll.) dari Pemerintah
166
 Surat Bukti Kepemilikan Merk atau Hak Paten (bila memakai merek terkenal)
Domain untuk Organisasi or.id
Ketentuan khusus pendaftaran domain .OR.ID:
 Domain OR.ID ditujukan bagi lingkungan segala macam organisasi / yayasan /
perkumpulan / komunitas.
 Pendelegasian OR.ID berdasarkan nama organisasi yang diwakili, bukan berdasarkan
merek dagang. Untuk pendaftaran merek dagang, pengelola berhak untuk meminta
informasi tambahan seperlunya. Penentuan atas melanggar atau tidaknya merek
dagang sepenuhnya merupakan tanggung jawab dari pemohon pendelegasian.
 Akte Notaris Yayasan/Organisasi atau Surat Keputusan Organisasi
Domain Untuk Sekolah SCH.ID
Ketentuan khusus pendaftaran domain .SCH.ID:
 Domain SCH.ID khusus untuk Lembaga Pendidikan yang menyelenggarakan
pendidikan seperti SD, SMP dan atau SMU, serta beroperasi sesuai dengan
perundangan yang berlaku, termasuk didalamnya Lembaga Pendidikan yang bukan di
bawah naungan Ditjen DikDasmen Depdikbud, seperti Madrasah Ibtidaiyah,
Tsanawiyah, Aliyah, dan lain-lain.
 Surat Pengajuan Resmi dari Kepala Sekolah yang Bersangkutan (Diatas Kop Surat,
ditandatangani dan dibubuhi stempel sekolah)
 Kartu Identitas (KTP / SIM) dari Kepala Sekolah / Kepala UPT/ Pejabat yang
ditunjuk sebagai penanggung jawab
 Surat Kuasa
Domain Web.id
Ketentuan khusus pendaftaran domain .WEB.ID:
 Domain WEB.ID ditujukan bagi organisasi umum atau pribadi diluar ac, co, go, net,
or, sch, war.net.id. .
 Kartu Identitas (KTP / SIM) dari Kepala Sekolah / Kepala UPT/ Pejabat yang
ditunjuk sebagai penanggung jawab
167
168
PLATFORM
1. Google Sites: https://sites.google.com/view/chairulimam
2. Google Classroom: https://classroom.google.com/u/0/c/MzE3NTM3ODUyNDc1
169
VIDEO PEMBELAJARAN
Video pembelajaran dapat diakses melaui channel you tube.

https://www.youtube.com/channel/UCZDb5NV7DUVBlT3mxq8eBxg
1. Video pembelajaran Luring Pemograman Web! https://youtu.be/7x4rGkVctjM
2. Video pembelajaran Daring Pemograman.
170

Program Pembelajaran Web

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Program Pembelajaran Web

Diunggah oleh

Hak Cipta:

Format Tersedia

COVER

Analisis Instruksional dan Peta Konsep; Profil Lulusan, SK, KD dan

Nama : Chairul Imam , S. Kom ., M. Kom

Nama : Chairul Imam, S. Kom., M. Kom

Medan, 13 September 2021

Prof. Dr. Efendi Napitupulu, M.Pd Chairul Imam, S. Kom., M. Kom

Dr. Sugito, M.Si. Prof. Dr. Efendi Napitupulu, M.Pd

Medan, 13 September 2021

Chairul Imam, S. Kom., M. Kom

Produk Pekerti – AA iii

I. Profil Lulusan dan Standar Kompetensi Pemrograman Web

Menguasai pengetahuan prosedural dan praktikal tentang analisis

Menguasai pengetahuan tentang standar pengkodean dalam menjaga

Menguasai prinsip dan isu terkini dalam masalah etika, sosial

Mampu melakukan transformasi algoritma menjadi source program

Membuat web dinamis sampai operasi CMS

Melakukan Instalasi Melakukan operasi Melakukan operasi Melakukan operasi

Menggunakan mysql untuk Mengkoneksikan CMS

Menggunakan syntax Menggunakan struktur Menggunakan struktur Menggunakan Menggunakan form

Menggunakan tag-tag dasar HTML Menggunakan CSS

Konsep Word Wide Teknologi Aplikasi Jenis-Jenis Web

Web Statis Cara Kerja Web Jenis-Jenis Web

3 Database administrator, Peran yang memiliki kemampuan untuk membuat kebijakan-

D. Capaian Pembelajaran (Learning Outcome)

a) Menguasai konsep teoritis bidang pengetahuan Ilmu Komputer /Informatika secara

MATAKULIAH PROGRAM S1 TEKNOLOGI INFORMASI

A. Matakuliah Keilmuan dan Keterampilan (MKK)

Sem Kode MK Mata Kuliah SKS Total

UNIV3101 Pancasila dan Anti Korupsi 2

UNIV3103 Bahasa Inggris I 2

UNIV3104 Bahasa Indonesia 2

FAKT3102 Matematika Diskrit 3

FAKT3103 Algoritma dan Pemograman 3

FAKT3104 Praktikum Algoritma dan Pemograman 3

2 UNIV3201 Kewarganegaraan & Anti Narkoba 2 22

UNIV3202 Bahasa Inggris II 2

FAKT3201 Statistika dan Probabilitas I 3

FAKT3202 Struktur Data 3

FAKT3204 Aljabar Linear 3

FAKT3205 Sistem Basis Data 3

FAKT3206 Praktikum Sistem Basis Data 3

FAKT3301 Organisasi Dan Arsitektur Komputer 3

FAKT3302 Statistika dan Probabilitas II 3

FAKT3303 Pemograman Berorientasi Objek 3

Praktikum Pemograman Berorientasi

FAKT3305 Sistem Operasi 3

PTIF3301 Arsitektur Perangkat Lunak 3

PTIF3302 Sistem Mikroprosesor 3

FAKT3401 Jaringan Dan Komunikasi Data 3

PTIF3401 Perencanaan Rekayasa 3

4 PTIF3402 Teknologi Multimedia 3 21

PTIF3403 Teknik Antar Muka dan Periferal 3

PTIF3404 Sistem Terdistribusi 3

PTIF3405 Pemograman Web 3

FAKT3501 Interaksi Manusia Dan Komputer 3

PTIF3501 Sistem Cerdas 3

PTIF3502 Jaringan Enterprise 3

5 PTIF3503 Forensik Sistem 3 21

PTIF3504 Kecerdasan Buatan 3

PTIF3505 Keamanan dan Integritas Data 3

PTIF3506 Audit IT dan Tata Kelola 3

FAKT3602 Manajemen Projek 3