MAKALAH

Perancangan dan Pemograman Web

Pncangan dan Pemr
Perancann darograman Web
Perangan dan

Oleh :

Febrinsanasari Simangunsong

310122023683

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

(STMIK BANJARBARU)

BANJARBARU

2023
 MATERI 1

PENGANTAR WEB
 Sejarah Web

Web diciptakan oleh Tim Berners-Lee pada tahun 1989. Berners-Lee adalah seorang ilmuwan
komputer yang bekerja di European Organization for Nuclear Research (CERN). Berners-Lee
menciptakan web untuk memudahkan para ilmuwan CERN untuk berbagi informasi.

Web pertama kali dirilis ke publik pada tahun 1991. Pada awalnya, web hanya digunakan
oleh para ilmuwan dan akademisi. Namun, pada pertengahan tahun 1990-an, web mulai digunakan
oleh masyarakat umum.

 Cara Kerja Web

Web bekerja dengan menggunakan sistem client-server. Client adalah komputer yang
digunakan oleh pengguna untuk mengakses web. Server adalah komputer yang menyimpan halaman
web.
Ketika pengguna ingin mengakses halaman web, client akan mengirimkan permintaan ke
server. Server kemudian akan mengirimkan halaman web ke client. Client kemudian akan
menampilkan halaman web kepada pengguna.

 Komponen-komponen Web

Komponen-komponen web terdiri dari:

 HTML (HyperText Markup Language): HTML adalah bahasa markup yang digunakan untuk
membuat halaman web. HTML menentukan struktur dan konten halaman web.

 CSS (Cascading Style Sheets): CSS adalah bahasa pemrograman yang digunakan untuk menentukan
tampilan halaman web. CSS menentukan warna, font, ukuran, dan tata letak elemen halaman web.

 JavaScript: JavaScript adalah bahasa pemrograman yang digunakan untuk menambahkan

interaktivitas ke halaman web. JavaScript dapat digunakan untuk membuat animasi, efek, dan form
interaktif.

 Browser: Browser adalah aplikasi yang digunakan untuk mengakses halaman web. Browser akan
membaca kode HTML, CSS, dan JavaScript dari halaman web dan menampilkannya kepada
pengguna.

 Server web: Server web adalah komputer yang menyimpan halaman web dan mengirimkan halaman
web ke client ketika diminta.

 Manfaat Web

Web memiliki banyak manfaat, antara lain:

1
 Informasi: Web dapat digunakan untuk mengakses informasi dari seluruh dunia.

 Komunikasi: Web dapat digunakan untuk berkomunikasi dengan orang lain dari seluruh dunia.

 Pendidikan: Web dapat digunakan untuk belajar dan mengajar.

 Hiburan: Web dapat digunakan untuk hiburan, seperti menonton video, mendengarkan musik, dan
bermain game.

 Bisnis: Web dapat digunakan untuk berbisnis, seperti menjual produk atau jasa secara online.

 Web Browser Popular

Web Browser paling populer adalah Google Chrome. Statistik diambil pada agustus 03 oleh
“STATISTA” https://www.statista.com/statistics/6899/most-popular-internet-browsers/

 Web Server

2
Web Server merupakan perangkat lunak yang memberikan layanan data yang berfungsi menerima
permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan
kembali hasilnya dalam bentuk halaman - halaman web yang umumnya berbentuk dokumen HTML.

Bahasa Pemrograman Web

Front End

- HTML (HyperText Markup Language)

- XML (eXtensible Markup Language)
- XHTML (eXtensible HyperText Markup Language)
- CSS(Cascading Style Sheets )
- JavaScript

Back End

- PHP (PHP Hypertext Preprocessor)

- PERL
- CFM (Cold Fusion Markup)
- PHYTON
- NODE.JS
- ASP.NET With C#, VB and F#
- JSP (JAVA SERVER PAGES)

 WEBSITE

Website adalah sebuah halaman atau sekumpulan halaman web yang saling terhubung dan dapat
diakses dari seluruh dunia, selama terkoneksi ke jaringan internet.

Website memiliki tujuan utama untuk menyampaikan sebuah informasi kepada penggunanya yang
bisa diakses dari mana saja, bisa saja di dalamnya tidak terdapat fitur tambahan untuk berinteraksi,
baik dengan admin atau dengan pengunjung web yang lain.

 Element Utama Website

Client-side website adalah bagian situs yang terlihat oleh pengguna melalui browser, seperti Google
Chrome atau Internet Explorer. Bagian ini tersusun atas HTML, CSS, dan JavaScript untuk
merancang dan menampilkan halaman web.

Server-side website adalah bagian website yang tersembunyi oleh pengguna, dan berisi file dan data
yang diolah oleh web server. Bagian server-side ini terdiri dari bahasa pemrograman, seperti PHP,
Python, atau Ruby on Rails.

3
  Jenis-jenis Website

Ada berbagai jenis website, antara lain:

 Website statis: Website statis adalah website yang tidak berubah-ubah kontennya. Website statis
biasanya dibuat dengan menggunakan HTML dan CSS saja.

 Website dinamis: Website dinamis adalah website yang kontennya dapat berubah-ubah. Website
dinamis biasanya dibuat dengan menggunakan HTML, CSS, dan JavaScript. Website dinamis dapat
menggunakan database untuk menyimpan kontennya.

 Website e-commerce: Website e-commerce adalah website yang digunakan untuk menjual produk
atau jasa secara online. Website e-commerce biasanya menggunakan sistem pembayaran online.

 Website blog: Website blog adalah website yang digunakan untuk menulis dan berbagi informasi.
Website blog biasanya menggunakan sistem komentar untuk memungkinkan pengguna untuk
memberikan tanggapan.

 Website portofolio: Website portofolio adalah website yang digunakan untuk menampilkan karya atau
proyek. Website portofolio biasanya menggunakan gambar, video, dan teks untuk menampilkan karya
atau proyek.

 Bagaimana Website Bekerja?

4
cara kerja web diatas adalah USER atau pengguna yang akan mengakses suatu website berupa URL
melalui Web Browser (media untuk menuju URL yang diakses).

WWW, HTTP, HTTPS dan HTML

Jika Internet menjelaskan struktur teknis sebuah jaringan, maka WWW (World Wide Web) adalah
sebuah “ruang global informasi” yaitu sebuah “ruang abstrak” yang menyimpan informasi. Protokol
utama yang dipakai untuk “ruang abstrak” web adalah HTTP (HyperText Transfer Protocol) . HTTP
yang dienkripsi dengan nama HTTPS (S-> Secure), sesorang tidak dapat melihat data paket dalam
jaringan publik. HTTPS biasanya digunakan untuk perbankan atau transaksi di internet, dan halaman
juga login atau halaman lain perlu untuk mengenkripsi data. Informasi dalam web disimpan dalam
format tertentu berupa HTML (Hypertext Markup Language).

 Unsur-unsur Website

5
Dua point utama perbedaan Web App dengan Website

1. Kemampuan interaksi yang berbeda. Website hanya memungkinkan penggunanya untuk

membaca dan melihat informasi di dalam website. Berbeda dengan web app yang memiliki
fitur agar users dapat berinteraksi di dalam website.

2. Sebagian besar web application membutuhkan authentication. Dalam beberapa kasus,

authentication juga digunakan untuk memberi opsi yang lebih banyak kepada pengguna yang
telah terdaftar. Jika pengguna yang tidak terdaftar hanya dapat melihat artikel dan semisalnya.

 PROFESI DALAM PENGEMBANGAN WEBSITE

Ada banyak ragam dalam profesi di dalam bidang Teknologi Informasi, bagaimana dengan profesi
yang berada dalam lingkungan pengembangan aplikasi web ?

Berikut ini adalah profesi-profesi yang langsung terkait dalam pengembangan aplikasi web,
diantaranya :

 Web Designer

Desainer Web adalah orang yang bertanggung jawab untuk menentukan tampilan sebuah
website. Tugasnya adalah pendisainan tampilan situs (web) mulai dari pengolahan gambar, tata letak,
warna, dan semua aspek visual situs. Fokus utama mereka adalah tampilan / layout dari web.

Mereka lebih konsen dengan bagaimana halaman terlihat dan apakah berfungsi sempurna
ketika sudah diberikan bahasa pemrograman. Didalam pendandanan suatu situs seorang Web
Designer harus menguasai : – HTML, DHTML – Pengolah Gambar – Animasi, Movie (Film)

 Web Programmer

Web Programmer bertugas dalam melakukan pengcodingan atau pemograman sebuah website
agar dinamis. dimana agar sebuah web tersebut dapat telihat mudah bagi seorang web admin. Jika
situs yang akan dibuat mempunya fasilitas interaksi antara pengunjung dan situs misalnya
menyangkut dengan transaksi, input output data dan database maka seorang Web Programmer yang
akan mengerjakannya dengan membuat aplikasi-aplikasi yang berkerja diatas situs (web).

 Web Administrator

6
 Tugasnya adalah untuk memaintenance suatu server, mengerti akan Sistem Operasi Server,
baik itu mulai dari instalasi sampai kepada masalah (troubleshooting), biasanya seorang Web
Administrator harus menguasai :

– OS Unix (LInux, FreeBSD, dll)

– OS NT – Jaringan (LAN, WAN, Intranet)

– Keamanan Server

 Web Master

Seorang Web Master adalah seorang yang mengerti akan kesemua hal mulai dari disain,
program dan keamanan server namun tidak terlalu turut mencampuri ke masing-masing divisi, cukup
dengan mempertanggun jawabkan atas jalannya suatu situs (web).

Penguasaan yang harus dimiliki :

– HTML, DHTML

– CGI Perl, PHP, MySQL, ASP, Java

– Penguasaan bermacam OS (Operating System)

– Keamanan Server – Jaringan (LAN, WAN, Intranet)

 Web Developer

Kegiatan diatas secara keseluruhan dinamakan suatu team yang dinamakan Web Developer.
Web developer memberi bantuan seperti konsultasi web, konsep web yang akan di buat, membangun
sebuat website..

Dari semua jenis pekerjaan diatas tidak semua adalah sebuah profesi karena tidak semua
orang ahli dalam bidang tersebut. Yang bisa dikatakan sebagai sebuah profesi yaitu jika seseorang
sudah ahli di dalam bidang pekerjaan tersebut. Jika di pekerjaan diatas yang bisa dikatakan sebagai
sebuah profesi adalah web designer, web programmer, web administrator, web master dan web
developer karena dalam bidang tersebut seseorang memang sudah memiliki keahlian di dalamnya.

 PERAN-PERAN DALAM PENGEMBANGAN SOFTWARE

Pengembangan software adalah proses yang kompleks dan membutuhkan berbagai peran dan
keahlian untuk menghasilkan produk yang berkualitas. Berikut adalah beberapa peran penting dalam
pengembangan software:

- Project Manager

7
 Project Manager bertanggung jawab untuk mengelola keseluruhan proyek, termasuk
perencanaan, pelaksanaan, dan kontrol. Mereka bertanggung jawab untuk memastikan bahwa proyek
berjalan sesuai jadwal, anggaran, dan persyaratan.

- System Analyst

System Analyst bertanggung jawab untuk memahami kebutuhan pengguna dan

mendefinisikan kebutuhan sistem. Mereka bekerja sama dengan pengguna untuk memahami
kebutuhan mereka, dan kemudian menggunakan informasi tersebut untuk mengembangkan spesifikasi
sistem.

- UI/UX Designer

UI/UX Designer bertanggung jawab untuk mendesain antarmuka pengguna (UI) dan
pengalaman pengguna (UX) yang intuitif dan menarik. Mereka bekerja sama dengan System Analyst
untuk memahami kebutuhan pengguna, dan kemudian menggunakan informasi tersebut untuk
mengembangkan desain UI/UX yang memenuhi kebutuhan tersebut.

- Technical Writer

Technical Writer bertanggung jawab untuk mendokumentasikan sistem, termasuk spesifikasi,

manual, dan tutorial. Dokumentasi yang baik penting untuk memastikan bahwa pengguna dapat
menggunakan sistem dengan benar dan efektif.

- Quality Assurance

Quality Assurance bertanggung jawab untuk memastikan kualitas sistem, termasuk pengujian
dan jaminan kualitas. Mereka bekerja untuk menemukan dan memperbaiki bug, dan memastikan
bahwa sistem memenuhi persyaratan.

- Frontend Developer

Frontend Developer bertanggung jawab untuk mengembangkan antarmuka pengguna sistem.

Mereka menggunakan bahasa pemrograman dan teknologi untuk membuat tampilan dan nuansa
sistem yang terlihat dan terasa menarik.

- Backend Developer

Backend Developer bertanggung jawab untuk mengembangkan logika bisnis sistem. Mereka
menggunakan bahasa pemrograman dan teknologi untuk membuat sistem yang dapat memenuhi
kebutuhan pengguna.

- Database Administrator

8
 Database Administrator bertanggung jawab untuk mengelola database sistem. Mereka
memastikan bahwa database aman, efisien, dan dapat diakses oleh pengguna.

Selain peran-peran utama tersebut, ada juga peran-peran pendukung yang dapat membantu
pengembangan software, seperti:

 Data Scientist bertanggung jawab untuk mengumpulkan, menganalisis, dan memvisualisasikan data.

 Machine Learning Engineer bertanggung jawab untuk mengembangkan dan menerapkan model
pembelajaran mesin.

 Security Engineer bertanggung jawab untuk memastikan keamanan sistem.

 DevOps Engineer bertanggung jawab untuk menyatukan tim pengembangan dan operasi.

Pengembangan software adalah proses yang dinamis dan terus berkembang. Peran-peran yang terlibat
dalam pengembangan software juga terus berkembang seiring dengan perkembangan teknologi.

 TAHAPAN MEMBUAT WEBSITE YANG PERLU DIKETAHUI

RESEARCH

Melakukan pengumpulan data yang diperlukan dan menganalisa data yang didapat untuk
membangun website, menempatkan beberapa kebutuhan tsb ke dalam website yang akan
dikembangkan.

PLANNING

Dalam proses pembuatan sistem website harus didahului dengan perancaan yang baik, Pada
tahap ini Anda menentukan tujuan dari website yang akan dibuat, menentukan ftatform, tools, dsb.

DESIGN

Dari informasi dan data yang dikumpulkan pada tahap seleumnya, maka tahap berikutnya
adalah melakukan desain terhadap tampilan halaman depan dan halaman-halaman dalam website.

SCRIPTING

Scripting atau penulisan coding program dan menghubungkan dengan kebutuhan lainnya
seperti database, tahap ini merealisasikan ide-ide dari tahap-tahap sebelumnya ke website yang dibuat.

TESTING

Testing Uji Coba, pengujian dilakukan untuk meyakinkan jikalau semua halaman website
telah terhubung dengan benar dan semua link eksternal website terjaga.

9
MAINTENENCE

Tak kalah penting setelah website diluncurkan dan dioeprasikan, maka diperlukan tahap
pemeliharaan terhadap situs tersebut, seperti backup dan sebagainya.

 BEBERAPA FRAMEWORK PHP TERPOPULER DI TAHUN 03

Menurut hasil survei dari Stack Overflow Developer Survey 03, framework PHP terpopuler di
tahun 03 adalah:

1. Laravel adalah framework PHP yang paling populer di dunia. Framework ini dikenal
karena memiliki sintaks yang mudah dibaca dan digunakan, serta komunitas yang
besar dan aktif.
2. Symfony adalah framework PHP yang berorientasi objek dan memiliki fitur yang
lengkap. Framework ini cocok untuk proyek-proyek skala besar dan kompleks.
3. Yii adalah framework PHP yang berorientasi objek dan memiliki kinerja yang tinggi.
Framework ini cocok untuk proyek-proyek yang membutuhkan kinerja yang optimal.
4. CodeIgniter adalah framework PHP yang ringan dan mudah digunakan. Framework
ini cocok untuk proyek-proyek kecil dan menengah.
5. Zend Framework adalah framework PHP yang berorientasi objek dan memiliki fitur
yang lengkap. Framework ini cocok untuk proyek-proyek skala besar dan kompleks.
6. Phalcon adalah framework PHP yang menggunakan teknologi C++ untuk
meningkatkan kinerja. Framework ini cocok untuk proyek-proyek yang
membutuhkan kinerja yang tinggi.
7. Slim Framework adalah framework PHP yang ringan dan mudah digunakan.
Framework ini cocok untuk proyek-proyek API dan mikro-layanan.
8. FuelPHP adalah framework PHP yang memiliki fitur yang lengkap dan fleksibel.
Framework ini cocok untuk berbagai jenis proyek. Berikut adalah beberapa faktor
yang perlu dipertimbangkan dalam memilih framework PHP:
 Kebutuhan proyek
 Tingkat pengalaman developer
 Lingkungan pengembangan
 Komunitas

Dengan mempertimbangkan faktor-faktor tersebut, Anda dapat memilih framework PHP yang tepat
untuk proyek Anda.

10
 HOSTING DAN DOMAIN

 Hosting

Hosting atau biasa disebut sebagai web hosting adalah layanan penyewaanruang simpan data (space)
yang digunakan untuk menyimpan data-data websiteagar halaman tersebut bisa diakses dari mana
saja. Data web tersebut meliputifile-file html, php script, cgi script, css, image, database dan file lain
yang dibutuhkan untuk menampilkan halaman web.Selain menyimpan file-file tersebut diatas web
hosting juga memberikan fasilitase-mail. Untuk menghubungkan domain dan hosting agar dapat
bekerja optimal,kita harus men-sinkronkan nameserver yang ada pada hosting ke domainmanager.

Contoh:

nameserver

adalah

ns1.hosting.com

dan

ns.hosting.com.

Server Hosting bisa diletakan dimana saja, asal memiliki penyimpanan yanglayak dan baik. Server
hosting dapat menggunakan sistem operasi Linux danWindows dan di support dengan beberapa
software lain, serta hardware khususkendali server hosting. Untuk menjalankan sebuah server
spesifikasi yang dibutuhkan seperti anda menggunakan Xampp dan software lainnya.Dalam memilih
Hosting ada beberapa hal yang harus diperhatikan,diantaranya:

1) Kapasitas (Space Hosting)

Anda perlu memperhatikan berapa kapasitas yang dibutuhkan, apakah100MB, 50MB, 1GB atau
bahkan Unlimited. Anda harus memilih dengancermat sesuai kebutuhan karena tentu saja semaikin
besar kapasitasbiayanya semakin mahal.

) Teknologi yang digunakan

Apakah servernya Linux atau Windows, dan jika kita membuat file PHPapakah hostingnya
mendukung file PHP ?. Demikian juga apabila kitamembuat web menggunakan ASP, JSP, Perl, Phyton dan
Ruby apakahhostingnya mendukung?. Karena itu kita harus teliti sebelum
membeli, jangan sampai kita membuat website dengan PHP tetapi kita membelihosting yang tidak
mendukung PHP.

3) Support

11
Periksa apakah perusahaan hosting yang ingin kita beli memiliki layanansupport yang baik selama 4
jam, jadi apabila tengah malam tiba-tiba kitamendapat masalah dengan website kita maka dapat
menanyakanlangsung kepada perusahaan hosting.

4) Database

Apabila kita membuat website dinamis, pastikan kita memeriksa apakahmereka menyediakan
database. Periksa juga berapa jumlah database yang disediakan dan menyediakan support database
apa saja apakah MySQL, PostgreSQL, Access dan lain-lain.

5) Backup

Apakah hosting kita membackup data website kita setiap hari ?. Inipenting karena ada banyak
hosting yang tidak melakukan backup dana pabila data kita tiba-tiba hilang atau mengalami masalah
mereka tidakmau tahu.

6) Bandwidth (Data Transfer)

Kita harus memeriksa kapasitas bandwidth yang disediakan. Bandwidthmerupakan besarnya data
transfer dalam sebulan. Apabila sebuahperusahaan hosting menyediakan bandwidth 1GB sebulan,
maka apabilakita memiliki sebuah file HTML dengan ukuran 0 KB dan pengunjungwebsite kita
perhari sekitar 100 orang, maka kita menghabiskanbandwidth perhari 0 KB x 100 orang = 000 KB =
MB. Perbulan MB x30 hari = 60 MB, apabila kita memiliki 10 halaman maka 60 MB x 10 =600 MB.
Jadi perhatikan bandwidth yang disediakan dengan ukuran filewebsite kita. Semakin banyak
pengunjung website maka tentu sajabandwidthnya akan semakin besar. Hal ini akan berpengaruh
terhadapkecepatan akses website kita, bahkan apabila penggunaan bandwidthnya melebihi batas
bukan tidak mungkin website kita tidak bisa diakses sama sekali.

Jenis Layanan Hosting

Ada beberapa jenis layanan hosting diantaranya sebagai berikut.1.
 Shared Hosting
dimana satu server hosting digunakan secara bersamasama oleh banyak pengguna. Dalam satu server
tersebut terdapat accountuntuk masing-masing pengguna yang dibedakan dengan username
danpassword.Contoh (Wordpress, Blogspot, Hosting gratisan).
 Virtual Private Server (VPS)
dimana satu server hosting juga digunakansecara bersama-sama oleh beberapa pengguna, namun
setiap penggunamemiliki lingkungan sistem operasi virtual sendiri. Biasanya jumlah pengguna dalam
VPS lebih dibatasi, karena alokasi sumber daya Serverseperti CPU dan RAM sudah dialokasikan per
pengguna.Kelebihannya dibanding Shared Hosting adalah di sisi stabilitas, yaitutertutupnya
kemungkinan untuk penggunaan sumber daya berlebih olehsatu pengguna yang dapat mengacaukan
pengguna lainnya.Sedangkan kekurangannya adalah di sisi performance, dimana seorangpengguna

12
hanya bisa menggunakan sumber daya server sesuai yang telahdialokasikan, meskipun sumber daya tersebut
tidak sedang digunakan olehpengguna lainnya.3.

 Dedicated Server
dimana satu server hosting hanya digunakan oleh satupengguna, yang biasanya dikhususkan untuk
aplikasi yang lebih besar atauwebsite yang membutuhkan sumber daya yang besar. Dalam hal
ini,penyediaan server ditanggung oleh perusahaan hosting.4.
 Colocation Server
, dimana server yang digunakan disediakan sendiri olehpengguna/pelanggan. Jadi perusahaan hosting
hanya memberikanlayanan berupa penyewaan koneksi internet dan tempat untuk meletakkanserver
yang dipergunakan untuk hosting.

Nama Domain (Domain Name)

Pengertian domain menurut wikipedia adalah Nama unik yang diberikan untuk mengidentifikasi nama
server komputer seperti web server atau email server di jaringan komputer ataupun internet. Nama
domain berfungsi untuk mempermudahpengguna internet pada saat melakukan akses ke server, selain
itu juga dipakaiuntuk mengingat nama server yang dikunjungi tanpa harus mengenal deretanangka
yang rumit yang dikenal sebagai IP address. Nama domain juga dikenal sebagai sebuah kesatuan dari
sebuat situs web seperti contohnya “wikipedia.org”,“politeknikcilcap.ac.id”.

Nama domain kadang-kadang kita sebut pula dengan istilah URL atau alamat website.
- .com : comersial
- .co.id : corporation indonesia
- .org. : organisasi
- ac.ic : academic indonesia localhost/aplikasi ( offline )
- .net : network www.aplikasi.com. (online )
- .store : toko
- my.id : saya indonesia
- go.id : goverment indonesia

13
 MATERI 2

HTML

 Pengertian HTML

HTML atau Hypertext Markup Language adalah bahasa markup yang digunakan untuk membuat
struktur halaman website agar dapat ditampilkan pada web browser. Jadi, HTML dapat dianalogikan
sebagai pondasi awal dalam menyusun kerangka halaman web secara terstruktur sebelum membahas
terkait tampilan desain dan sisi fungsionalitas.

 Sejarah HTML

Sejarah HTML pertama kali dibuat oleh Tim Berners-Lee yang merupakan fisikawan di lembaga
penelitian CERN, Swiss. Berners-Lee mempunyai ide atau pemikiran mengenai sistem hypertext
berbasis internet. Sekitar tahun 1991, Tim merilis versi HTML pertama yang di dalamnya terdalam
sekitar 18 tag.

Untuk sekarang, HTML mengalami beberapa pengembangan dari sisi fitur serta informasi yang
disajikan hingga versi terbaru, yaitu HTML5. Setiap tahunnya, bahasa ini mempunyai tingkat
popularitas yang cukup tinggi sehingga dijadikan sebagai web standard resmi di dunia pemrograman.

Selanjutnya, HTML juga mengalami tahap perbaikan (maintain) dan dikembangkan oleh World Wide
Web Consortium (W3C). Pada tahun 014, merupakan waktu dimana HTML mengalami upgrade yang
cukup signifikan dan terdapat fitur semantic untuk memudahkan pengembang website dalam
menyusun kode dan memberitahukan makna dari konten tersebut, sebagai contoh <article>,
<footer>, dan <header>.

 Fungsi HTML

Setelah mengenal sejarah singkat dari bahasa markup HTML, selanjutnya kita juga harus mengetahui
kegunaannya. Berikut ini beberapa fungsi dan tujuan dari penerapan HTML untuk pembuatan situs
atau web app.

Fungsi utama penggunaan HTML sendiri adalah membangun tampilan website yang telah
menerapkan metode semantik untuk memudahkan setiap pengembang dalam
proses development dan maintenance. Kemudian, HTML juga dapat dikolaborasikan dengan
penggunaan bahasa CSS (Cascade Style Sheet) serta JavaScript.

14
Dimana, peran dari HTML 5 berfungsi untuk menyusun kerangka dan struktur halaman website.
Kemudian, CSS membantu dalam memberikan tampilan desain meliputi warna, font, outline, dan lain
sebagainya. Dan Tugas dari bahasa pemrograman JavaScript adalah memberikan sentuhan interaksi
untuk memberikan pengalaman yang berbeda kepada user.

Berikut ini merupakan beberapa macam kerangka inti yang membentuk struktur bahasa markup mulai
tag, elemen, dan atribut.

1. Tag, merupakan perintah atau awalan instruksi yang nantinya akan dibaca pada web browser.
Misalnya adalah penggunaan tag <strong>, yang berfungsi untuk memberikan ketebalan pada
teks paragraf.

2. Element, merupakan proses keseluruhan kode yang dimulai dari tag pembuka (< >) dan
diakhiri dengan tag penutup (</>), sebagai contoh element <p>Ini adalah website saya</p>.

3. Attribute, merupakan informasi atau perintah tambahan yang dimasukkan ke dalam sebuah
elemen. Misalnya saja <img class=”gambar” src=”komputer.jpg” alt=”komputer1” />,
sehingga atributnya adalah class, src dan alt image.

Setelah mengetahui informasi terkait struktur awal dari HTML, selanjutnya kita akan mengenal
kerangka intinya.

1. <!DOCTYPE html>

Berfungsi untuk mendeklarasikan kepada komputer bahwa anda menuliskan sebuah perintah di dalam
kode HTML.

. <html></html>

Berfungsi untuk tag yang menandakan proses mulai menuliskan kode program pada dokumen HTML.

3. <head></head>

Tag ini digunakan untuk menambahkan metadata ke dalam dokumen html yang berisi judul, deskripsi,
library dan lain sebagainya.

4. <body></body>

Dan yang terakhir, tag body digunakan sebagai tempat untuk menuliskan setiap elemen atau lebih
tepatnya disebut juga dengan konten pada HTML itu sendiri.

15
  Jenis – Jenis Tag HTML dan Kode Warna

Untuk saat ini, terdapat dua jenis tag yang sering digunakan, yaitu sebagai berikut:

1. Block Level

Untuk elemen yang menggunakan block level menggunakan ruang (space) tersedia dan
membuat line atau baris baru untuk mendeklarasikan elemen berikutnya. Contoh dari
penggunaan block level adalah struktur heading dan paragraf.

. Inline Tags

Inline tags berarti menggunakan ruang yang lebih sedikit dan sempit. Sehingga kebutuhannya lebih ke
arah memformat isi konten pada block level.

Selain itu, di dalam struktur HTML juga dapat mengolah dan memberikan beberapa macam
warna untuk memperbaiki tampilan pada halaman situs agar lebih menarik.

INTELLISENSE

Saat Anda mengetik HTML, kami menawarkan saran melalui HTML IntelliSense. Pada gambar di
bawah, Anda dapat melihat penutupan elemen HTML yang disarankan </div>serta daftar elemen
yang disarankan sesuai konteks.

Simbol dokumen juga tersedia untuk HTML, memungkinkan Anda menavigasi dengan cepat ke node
DOM berdasarkan id dan nama kelas.

Anda juga dapat bekerja dengan CSS dan JavaScript yang tertanam. Namun, perhatikan bahwa skrip
dan gaya yang disertakan dari file lain tidak diikuti, dukungan bahasa hanya melihat konten file
HTML.

Anda dapat memicu saran kapan saja dengan menekan Ctrl+Spasi .

16
Anda juga dapat mengontrol penyedia penyelesaian kode bawaan mana yang aktif. Ganti saran ini di
pengaturan pengguna atau ruang kerja Anda jika Anda memilih untuk tidak melihat saran terkait.

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.

"html.suggest.html5": true

TUTUP TAG

Elemen tag secara otomatis ditutup ketika >tag pembuka diketik.

Elemen tag secara otomatis ditutup ketika >tag pembuka diketik.

17
Anda dapat mematikan tag autoclosing dengan pengaturan sebagai berikut :

"html.autoClosingTags": false

TAG PEMBARUAN OTOMATIS

Saat memodifikasi tag, fitur pengeditan tertaut secara otomatis memperbarui tag penutup yang
cocok. Fitur ini opsional dan dapat diaktifkan dengan mengatur:

"editor.linkedEditing": true

PEMILIH WARNA

UI pemilih warna VS Code sekarang tersedia di bagian gaya HTML.

Ini mendukung konfigurasi rona, saturasi dan opasitas untuk warna yang diambil dari editor. Ini juga
memberikan kemampuan untuk memicu antara mode warna yang berbeda dengan mengklik string
warna di bagian atas pemilih. Pemilih muncul saat Anda mengarahkan kursor ke definisi warna.

18
ARAHKAN KRUSOR
Gerakkan mouse ke atas tag HTML atau gaya yang disematkan dan JavaScript untuk mendapatkan
informasi lebih lanjut tentang simbol di bawah kursor.

VALIDASI
Dukungan bahasa HTML melakukan validasi pada semua JavaScript dan CSS yang tertanam.

Anda dapat menonaktifkan validasi tersebut dengan pengaturan berikut:

// Configures if the built-in HTML language support validates embedded scripts.

"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.

"html.validate.styles": true

MELIPAT
Anda dapat melipat wilayah kode sumber menggunakan ikon lipat di selokan antara nomor baris dan
awal baris. Wilayah lipat tersedia untuk semua elemen HTML untuk komentar multibaris di kode
sumber.

Selain itu, Anda dapat menggunakan penanda wilayah berikut untuk menentukan wilayah lipat: <!--
#region -->dan<!-- endregion -->

Jika Anda lebih memilih untuk beralih ke pelipatan berbasis indentasi untuk penggunaan HTML:

"[html]": {

"editor.foldingStrategy": "indentation"

},

19
PEMFORMATAN
Untuk meningkatkan pemformatan kode sumber HTML, Anda dapat menggunakan perintah Format
Dokumen Shift+Alt+F untuk memformat seluruh file atau Format Pilihan Ctrl+K Ctrl+F untuk
sekadar memformat teks yang dipilih.

Pemformat HTML didasarkan pada js-beautify . Opsi pemformatan yang ditawarkan oleh
perpustakaan tersebut muncul di pengaturan VS Code :

 html.format.wrapLineLength: Jumlah maksimum karakter per baris.

 html.format.unformatted: Daftar tag yang tidak boleh diformat ulang.
 html.format.contentUnformatted: Daftar tag, dipisahkan koma, yang kontennya tidak boleh
diformat ulang.
 html.format.extraLiners: Daftar tag yang harus memiliki baris baru tambahan di depannya.
 html.format.preserveNewLines: Apakah jeda baris yang ada sebelum elemen harus
dipertahankan.
 html.format.maxPreserveNewLines: Jumlah maksimum jeda baris yang harus dipertahankan
dalam satu bagian.
 html.format.indentInnerHtml: Indentasi <head>dan <body>bagian.
 html.format.wrapAttributes: Strategi pembungkusan untuk atribut:
o auto: Bungkus bila panjang garis terlampaui
o force: Bungkus semua atribut, kecuali yang pertama
o force-aligned: Bungkus semua atribut, kecuali yang pertama, dan ratakan atribut
o force-expand-multiline: Bungkus semua atribut
o aligned-multiple: Bungkus ketika panjang garis terlampaui, sejajarkan atribut secara
vertikal
o preserve: Mempertahankan pembungkusan atribut
o preserve-aligned: Pertahankan pembungkusan atribut tetapi sejajarkan
 html.format.wrapAttributesIndentSize: Ukuran penyelarasan saat menggunakan force
aligneddan aligned multipledalam html.format.wrapAttributesatau nullmenggunakan ukuran
indentasi default.
 html.format.templating: Hormati tag bahasa templating Django, erb, setang dan php.
 html.format.unformattedContentDelimiter: Menyatukan konten teks di antara string ini.

Tip: Pemformat tidak memformat tag yang tercantum dalam

pengaturan html.format.unformatteddan html.format.contentUnformatted. JavaScript yang tertanam
diformat kecuali tag 'skrip' dikecualikan.

20
Marketplace memiliki beberapa pemformat alternatif untuk dipilih. Jika Anda ingin menggunakan
pemformat lain, tentukan "html.format.enable": falsedi pengaturan Anda untuk mematikan pemformat
bawaan.

MATERI 3

CSS

21
  Cascading Style Sheets (CSS)

Cascading Style Sheet (CSS) adalah suatu teknologi yang digunakan untuk menggambarkan tampilan
dan format dari dokumen yang ditulis dalam bahasa markup. u Dengan CSS keseluruhan style dan
tampilan yang ada di situs web dapat dirubah/diformat dengan cepat. u CSS telah di standartkan oleh
World Wide Web Consortium (W3C).

CSS digunakan untuk mengelompokkan dan menata halaman web, misalnya untuk mengubah
font, warna, ukuran, dan jarak spasi konten Anda, membaginya menjadi beberapa kolom, atau
menambahkan animasi dan fitur dekoratif lainnya.

 Konsep Dasar CSS

1- Penulisan CSS

- internal CSS
- External CSS
- Inline CSS
 Internal CSS

Menuliskan langsung script CSS di file HTML-nya.jh

<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p{color: white;}
body {background-color:
</style>
</head>
<body>
<p>Belajar CSS</P>
</body>
</html>

 External CSS

Memanggil file CSS dari tempat lain, file CSS terpisah dengan file HTML.
<html>
<head>

22
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
</body>
<h3>Belajar CSS</h3>
</body>
</html>

 Inline CSS
Menuliskan kode CSS dalam tag HTML
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: pink; color: white;
font:arial;”>Belajar CSS</p>
</body>
</html>

- Elemen Dasar CSS

 Selector, Property and Value

23
Selector pada CSS sama dengan tag atau komponen pada HTML, yang terdapat antara tanda < dan
tanda > misalnya <h1>, <p>, <b> dll. Property pada CSS sama dengan atribut pada HTML, berfungsi
untuk memberi nilai dari selector. Value adalah nilai yang kita berikan kepada property.

Jika di HTML kita memformat paragraf dengan < p align=”right”>

maka dengan CSS menjadi p {text-align: right;}

 p adalah selector dan text-align adalah property, right; adalah value atau nilai dari
property.
 jika di HTML kita menggunakan tanda <> tetapi pada CSS kita menggunakan tanda
{}
 p dalam CSS tidak terdapat dalam tanda { dan tanda } tetapi sebelum tanda tersebut.
 Jika dalam HTML untuk menunjukan Value atau nilai dari atribut kita menggunakan
sama dengan (=) sedangkan dalam CSS untuk menunjukan value atau nilai dari
property kita menggunakan tanda titik dua (:).
 setelah memberi value di CSS, kita harus menambahkan tanda titik koma (;) di
belakangnya.
 Jika selector lebih dari satu dan memiliki property dan value yang sama maka
gunakan tanda koma (,)

 Class Selector

24
Class Selector mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya dua type
paragraf, peragraf pertama menggunakan align-left dan yang paragraf satu lagi menggunakan align-
center.

<p class=”left”> Paragraf ini rata kiri </p>

<p class=”center”> paragraf ini rata tengah </p>

Maka penulisan pada file CSS-nyya menjadi :

.left {text-align: left}

.center {text-align: center}

Keterangan : Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.). Tidak
dianjurkan memberi nama class dengan angka. Nama class tidak boleh menggunakan spasi, jika nama
class lebih dari dua suku kata maka berikan tanda hubung (-) atau (_)

 ID Selector

ID selector digunakan dengan tujuan mendefinisikan per-elemen dasar. Setiap halaman id selector
hanya boleh digunakan dengan satu id unik, itulah yang menjadi perbedaannya dengan class selector.
Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
tetapi dengan id selector kita hanya diperbolehkan memanggil satu id untuk satu elemen yang sama.

<p id=”tebal”>Paragraf ini ditulis dengan huruf tebal dan warna merah </p>

<p id=”miring”> Paragraf ini ditulis dengan huruf miring dan warna biru </p>

maka penulisan pada file CSS-nya menjadi :

#tebal { font-weight : bold; color : red; }

#miring { font-style : italic; color: blue; }

Keterangan :

Pada penulisan nama id dalam file CSS diawali dengan tanda pagar (#). Nama id dapat ditulis dengan
angka, huruf atau garis bawah. Karakter pertama sebaiknya huruf atau garis bawah (_)

MATERI 4

25
 BOOSTRAP

Bootstrap
Bootstrap merupakan framework HTML, CSS, Javascript populer untuk membangun situs web yang
responsive. RWD (Responsive Web Design) adalah desain situs yang otomatis akan menyesuaikan
diri agar tampil baik di semua perangkat dari ponsel sampai dekstop. Bootstrap terdiri dari satu set file
css, javascript, dan jquery. File Bootstrap Satu set file bootstrap dapat diperoleh di situs
getbootstrap.com yang terdiri dari: direktori css: bootstrap.css direktori js: bootstrap.js direktori
font: file-file font glyphicons Ditambah 1 file jquery.js yang dapat diperoleh di jquery.com. Letakkan
file jquery.js ini di direktori js bersama file bootstrap.js. Letakkan semua direktori file di atas di
direktori htdocs.

Menggunakan Bootstrap Setelah semua file diperoleh selanjutnya mentambahkan beberapa perintah
di bagian head dokumen html untuk menggunakannya:

Penjelasan: Baris ke-6 mengatur agar lebar laman web mengikuti lebar layar perangkat  (dekstop,
tablet, ponsel) dengan skala awal normal, artinya tampilan tidak diperbesar atau sebaliknya.
Pengaturan ini membentuk sifat responsive Bootstrap. Baris ke-7 memanggil file css bootstrap.
Baris ke-8 memanggil file jquery. File ini diperlukan bootstrap untuk menjalankan berbagai animasi,
misalnya animasi silde jumbotron. Baris ke-9 memanggil file javascript bootstrap. Baris ke-1
contoh penggunaan kelas ‘container-fluid’ dalam bootstrap agar semua elemen ‘terbungkus’
mengumpul di satu wadah.

Grid Bootstrap Untuk memahami cara kerja bootstrap, Anda perlu tahu tentang grid bootstrap. Pada
dasarnya grid bootstrap adalah tentang bagaimana bootstrap membagi-bagi suatu laman web sehingga
proses layout menjadi mudah dan sistematis. Bootstrap membagi laman web menjadi 1 grid (daerah
vertikal laman web). Setiap grid dapat digabungkan untuk membuat grid yang lebih besar:

26
 Span4 merupakan gabungan dari 4 grid, span8 gabungan 8 grid, dan seterusnya. Saat menggabungkan
grid perlu diingat bahwa setiap baris harus terdiri dari total 1 grid.

Kelas Grid Bootstrap memiliki 4 buah kelas grid: 1. xs : grid untuk layout di layar ponsel . sm : grid
untuk layout di layar tablet 3. md : grid untuk layout di layar dekstop 4. lg : grid untuk layout di layar
dekstop besar Artinya ketika Anda ingin mengatur grid untuk tampilan di layar ponsel maka gunakan
kelas xs, untuk tablet gunakan kelas sm, dan seterusnya. Ketika menggunakan sistem grid bootstrap:
Baris-baris harus berada didalam sebuah kelas container atau container-fluid agar obyek-obyek
dalam laman teratur rapi. Gunakan kelas row untuk membuat kelompok kolom Tempatkan konten
laman dalam kolom Setiap kolom memiliki jarak dengan kolom lain Berikut contoh penerapan grid
bootstrap:

Dokumen diatas akan membagi laman web menjadi dua kolom dengan kelas grid ‘col-sm-6’ yang
artinya ini pengaturan untuk layar tablet. Lalu bagaimana dengan layar dekstop, dan ponsel? Di layar
desktop, laman web ini juga akan terbagi dua kolom karena pengaturan dalam kelas grid ini bersifat
naik keatas, artinya kelas grid md (desktop) dan lg (desktop besar) akan mengikuti pengaturan kelas
sm. Sedangkan kelas xs (ponsel) tidak mengikuti aturan ini. Form Bootstrap Ada 3 jenis tampilan
form dalam bootstrap: Form vertical Form horisontal Form inline Pengaturan tampilan form
dalam bootstrap mengikuti aturan: Gunakan elemen label untuk teks setiap inputan Gunakan kelas
form-control untuk semua elemen input, select, dan textarea Bungkus elemen label dan input dengan
elemen div berkelas form-group

 Form vertical adalah tampilan form yang paling umum digunakan. Form ini memiliki label dan form
control yang disusun secara vertikal.

27
 Form horisontal adalah tampilan form yang memiliki label dan form control yang disusun secara
horizontal. Tampilan ini lebih hemat ruang dan cocok untuk form yang memiliki banyak elemen.

 Form inline adalah tampilan form yang memiliki label dan form control yang disusun dalam satu
baris. Tampilan ini lebih ringkas dan cocok untuk form yang memiliki elemen yang sedikit.

Berikut adalah contoh dari ketiga jenis tampilan form tersebut:

<form>

<div class="form-group">

<label for="name">Name</label>

<input type="text" class="form-control" id="name" placeholder="Enter your name">

</div>

<div class="form-group">

<label for="email">Email</label>

<input type="email" class="form-control" id="email" placeholder="Enter your email">

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

<form>

<div class="form-row">

<div class="col-md-6">

<label for="name">Name</label>

<input type="text" class="form-control" id="name" placeholder="Enter your name">

</div>

28
 <div class="col-md-6">

<label for="email">Email</label>

<input type="email" class="form-control" id="email" placeholder="Enter your email">

</div>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

<form>

<label for="name">Name</label>

<input type="text" class="form-control" id="name" placeholder="Enter your name">

<label for="email">Email</label>

<input type="email" class="form-control" id="email" placeholder="Enter your email">

<button type="submit" class="btn btn-primary">Submit</button>

</form>

29
 MATERI 5

MYSQL

 Pengertian MySQL

MySQL adalah program database server yang mampu menerima dan mengirimkan datanya dengan
cepat,multi user serta menggunakan perintah standar SQL(Structure Query Language).

MySQL adalah sebuah database yang dapat digunakan baik sebagai client maupun server.

Database MySQL adalah sebuah perangkat lunak database yg berbentuk relasional atau dalam bahasa
basis data disebut sebagai Relational Database Management System (RDBMS) yang menggunakan
suatu bahasa permintaan SQL.

 Kelebihan MySQL
- MySQL sebagai Database Management System (DBMS)
- MySQL sebagai Relational Database Management System(RDBMS)
- MySQL adalah sebuah software database yang bersifat open source, artinya program
ini bersifat free atau bebas digunakan oleh siapa saja tanpa harus membeli atau
membayar lisensi kepada pembuatnya.
- MySQL merupakan sebuah database server yang melayani permintaan dari client.
- MySQL merupakan sebuah database client yang dapat melakukan query yang
mengakses database pada server.
- MySQL mampu menerima query yang bertumpuk dalam satu permintaan atau disebut
multi-threading.
- MySQL merupakan sebuah database yang mampu menyimpan data berkapasitas
sangat besar hingga berukuran gigabyte sekalipun.
- MySQL didukung oleh driver ODBC, artinya database MySQL dapat diakses
menggunakan aplikasi apa saja termasuk berupa visual seperti delphi dan Visual
Basic.
- MySQL adalah database yang menggunakan enkripsi password
- MySQL merupakan server database yang multiuser artinya database ini dapat
digunakan oleh banyak pemakai.
- MySQL dapat menggunakan kuci lebih dari 16 kunci per tabel dan dalam satu kunci
memungkinkan beberapa field
- MySQL mendukung field yang dijadikan sebagai kunci primer dan kunci unique

30
 - MySQL dudukung oleh sebuah komponen C dan perl API, sehingga dapat diakses
melalui sebuah program aplikasi yang berada dibawah protokol internet berupa web.
- MySQL menggunakan suatu bahasa permintaan standar yang bernama SQL.

 Perbedaan MySQL dan SQL

MySQL adalah program database server sedangkan SQL adalah bahasa yang digunakan
didalamnya. SQL dibedakan menjadi dua bentuk query yaitu:

1. DDL (Data Definition Language) adalah sebuah metode query yg berguna untuk
mendefinisikan data pada sebuah database yaitu :

a. CREATE digunakan untuk pembuatan table dan database.

b. DROP, untuk penghapusan table maupun database.

c. ALTER, untuk melakukan pengubahan struktur tabel yang telah dibuat, baik menambah
filed(add), mengganti nama field(change) ataupun menamakannya kembali(rename) serta
menghapus (drop).

. DML (Data Manipulation Language) adalah sebuah metode query SQL yang digunakan apabila
DDL telah terjadi, sehingga fungsi dari query ini adalah untuk melakukan manipulasi database yg
telah ada atau telah dibuat sebelumnya.yaitu:

a. INSERT, digunakan untuk pemasukan data pada tabel database.

b. UPDATE, digunakan untuk melakukan pengubahan terhadap data yang ada pada tabel

c. DELETE digunakan untuk penghapusan data pada tabel.

 Tipe Data MySQL

Beberapa tipe data dalam MySQL yang sering dipakai:

Tipe Data Keterangan

INT Angka -147483648 s/d 147483647

FLOAT Angka Pecahan

DATE Tanggal Format:YYYY-MM-DD

31
 DATETIME Tanggal dan waktu format:

CHAR String dan panjang tetap sesuai dg yg

ditentukan,panjangnya 1-55 karakter

VARCHAR String dg panjang yg berubah-ubah sesuai dg

yg disimpan saat itu.Panjangnya 1-55 karakter

BLOB Teks dg panjang maksimum 65535 karakter

LONGBLOB Teks dengan panjang maksimum 49496795

karakter

 Cara mengaktifkan MySQL

 Pilih Start All programs PHPTriad MySQL MySQL-D-NT

 Pilih Start All programs Accessories Command Prompt

 Ketikkan perintah berikut :

C:\Apache\mysql\bin\mysql

32
Mendefinisikan database

Menciptakan database baru:

create database nama_database;

Ex:

create database privatdb;

 Menampilkan seluruh database yg ada:

show databases;

 Menghapus database:

drop database nama_database;

 Mengaktifkan database:

use nama_database;

Ex:

use privatdb;

 Menciptakan table baru:

create table nama_table

(field-1 type(length),field- type(length),……field-n

type(length));

 Menciptakan tabel baru dengan kolom tidak boleh kosong:

create table nama_table

(field-1 type(length)not null,field- type(length) not

null,……field-n type(length)not null);

 Menciptakan tabel baru dengan primary key

create table nama_table

(kolom_primer type(length)primary key, ….,field-n type(length));

33
Atau

create table nama_table

(kolom_primer type(length),…….,field type(length),primary key(kolom_primer));

Ex:

create table anggota(nomor int(6) not null

primary key,nama varchar(40)not null,email

varchar(40)not null,alamat varchar(80)not

null,kota varchar(0) not null);

 Menampilkan tabel-tabel yang ada dalam database:

show tables;

 Melihat struktur tabel:

desc nama_table;

Ex:

desc anggota;

 Menghapus tabel:

drop table nama_table;

Memanipulasi Tabel

 Mengganti nama tabel:

rename table table_lama to table_baru;

 Menambah kolom kedalam tabel:

alter table nama_table add nama_field type(length);

 Mengubah kolom menjadi primary key:

alter table nama_table add primary key(nama_kolom);

 Menghapus primary key:

34
 alter table nama_table drop primary key;

 Mengubah nama dan tipe kolom:

alter table nama_table change kolom_lama kolom_baru type(length);

 Menghapus kolom:

alter table nama_table drop nama_field;

Memasukkan data ke tabel

 Memasukkan data kesemua field:

insert into nama_table values(‘isi_field1’,’isi_field’,’….’,’isi_fieldn’);

 Memasukkan data kefield-field tertentu:

Insert into nama_table

(‘field1,’field’,’….’,’fieldn’)values(‘isi_field1’,’isi_field’,’…’,’isi_fieldn’);
Menampilkan data dari table

 Menampilkan isi seluruh tabel:

select *from nama_table;

 Menampilkan isi field-field tertentu dari tabel:

select field1,field,…,fieldn from nama_table;

 Menampilkan isi-isi field tertentu dari tabel dengan memberikan judul untuk kolom:

select nama_kolom as”judul” from nama_table;

Memperbaharui Isi data

Update nama_table set field=‘data baru’ where [kondisi];

Menghapus Isi Data

 Menghapus keseluruhan isi data

delete from nama_table;

 Menghapus sebagian isi data:

35
Delete from nama table where[kondisi];

36
 MATERI 6

Cara instalasi laravel - tampil data

 INSTALASI MIGRASI

PROSES INSTALASI

-----------------------------

- Install composer

- cek dengan tulis composer di command prompt

- Install laravel

- composer create-project --prefer-dist laravel/laravel nama-proyek-anda

- Masuk kedalam folder

- php artisan serve

- Tes di browser

- http://localhost:8000/

- Buat link storage

- php artisan storage:link

- Koneksi database

- buka file .env

- DB_DATABASE, isi nama databasenya

- Buat database dan tabel

- php artisan make:migration create_buku

- Buka file migrasinya di database/migration, isi dengan

public function up(): void

Schema::create('buku', function (Blueprint $table) {

37
 $table->id();

$table->string('kode_buku', 10)->unique();

$table->string('judul_buku', 00)->nullable();

$table->string('jenis_buku', 00)->nullable();

$table->string('pengarang', 00)->nullable();

$table->integer('tahun_terbit')->nullable();

$table->tinyInteger('status_buku')->nullable();

$table->timestamps();

});

- Eksekusi file migrasinya

- php artisan migrate

- Isi tabelnya sebagai contoh

 MEMAHAMI ROUTE

- Eksekusi file migrasinya

- php artisan migrate

- Isi tabelnya sebagai contoh

 MENAMBAH DATA _1

- Tambahkan tombol/link menambah data pada file index.blade.php, letakkan diatas tabel

- <a href="{{ route('buku.tambah') }}">Tambah Data</a>

- Tambahkan route untuk tambah data di web.php

- Route::get('/buku/tambah', [Cbuku::class, 'create'])->name('buku.tambah');

- Tambahkan class create data di controller

public function create()

38
 {

return view('buku.tambah_data');

- Buat file view baru, misal tambah_data.blade.php, isinya :

<form method="POST" action="{{ route('buku.simpan') }}" enctype="multipart/form-data">

@csrf

Kode Buku : <input type="text" name="kode">

@error('kode')

{{ $message }}

@enderror

<br />

Judul Buku : <input type="text" name="judul">

@error('judul')

{{ $message }}

@enderror

<br />

Jenis Buku :

<select name="jenis">

<option value="">~Pilih~</option>

<option value="Komik">Komik</option>

<option value="Majalah">Majalah</option>

<option value="Pelajaran">Pelajaran</option>

</select>

@error('jenis')

39
 {{ $message }}

@enderror

<br />

Pengarang : <input type="text" name="pengarang">

@error('pengarang')

{{ $message }}

@enderror

<br />

Tahun Terbit : <input type="number" name="tahun">

@error('tahun')

{{ $message }}

@enderror

<br />

Status Buku :

<select name="status">

<option value="">~Pilih~</option>

<option value="1">Ada</option>

<option value="0">Dipinjam</option>

</select>

@error('status')

{{ $message }}

@enderror

<br /><br />

40
 <button type="submit">Simpan Data</button>

<a href="{{ route('buku.index') }}">Kembali</a>

</form>

- Buat route baru untuk proses simpan di web.php

- Route::post('/buku/simpan', [Cbuku::class, 'store'])->name('buku.simpan');

- Tambahkan class store pada controller

public function store(Request $request)

$this->validate($request, [

'kode' => 'required',

'judul' => 'required',

'jenis' => 'required',

'pengarang' => 'required',

'tahun' => 'required',

'status' => 'required',

]);

$data = [

'kode_buku' => $request->kode,

'judul_buku' => $request->judul,

'jenis_buku' => $request->jenis,

'pengarang' => $request->pengarang,

'tahun_terbit' => $request->tahun,

41
 'status_buku' => $request->status,

];

Mbuku::create($data);

return redirect()->route('buku.index')->with(['success' => 'Data Berhasil Disimpan!']);

----------------------------------

Beberapa Validate

----------------------------------

- 'keterangan' => 'required',

- 'tanggal_lahir' => 'required|date',

- 'umur' => 'required|numeric',

- 'jenis_kelamin' => 'required|in:Laki-laki,Perempuan',

- 'email' => 'required|email',

- 'username' => 'required|alpha_num', (hanya boleh huruf dan angka)

- 'kode_pos' => 'required|size:10',

- 'nama' => 'required|min:3',

- 'judul' => 'required|max:55',

- 'password' => 'required|confirmed',

- 'email' => 'required|unique:users,email',

- 'product_id' => 'required|exists:products,id',

- 'tanggal' => 'required|date_format:Y-m-d',

- range

'tanggal_awal' => 'required|date|before:tanggal_akhir',

'tanggal_akhir' => 'required|date|after:tanggal_awal',

42
  MENAMBAH DATA_

- Buat Controller dengan cara

- php artisan make:controller

- What should the controller be named?

- Cbuku

- ketik resource

- What model should this resource controller be for? (Optional):

- Mbuku

- A App\Models\Mbuku model does not exist. Do you want to generate it? (yes/no) [yes]

- Yes

- akan tercipta file (1 controller, 1 model)

- Cbuku di dalam : app/Http/Controllers

- Mbuku di dalam : app/Models

- Isi file model (Mbuku)

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Mbuku extends Model

use HasFactory;

protected $table = 'buku';

protected $fillable = ['kode_buku', 'judul_buku', 'jenis_buku', 'pengarang',

'tahun_terbit', 'status_buku'];

43
 }

- Isi file controller (Cbuku)

public function index()

$buku = Mbuku::get();

return view('buku.index', compact('buku'));

//pejelasan : buku.index (dalam folder resource/view/buku ada file index.blade.php)

- Buat folder buku didalam folder resource/view

- Buat file index.blade.php, isi filenya dengan

- Isi dengan teks sementara dahulu

- Buat routingnya di file web.php, isinya :

- Route::get('/buku', [Cbuku::class, 'index'])->name('buku.index');

- Jangan lupa tambahkan link controller ke web.php, letakkan diatas

- use App\Http\Controllers\Cbuku;

- Lengkapi file index.blade.php nya, dengan kode berikut :

<table>

<thead>

<tr>

<th>No</th>

44
 <th>Kode Buku</th>

<th>Judul Buku</th>

<th>Jenis Buku</th>

<th>Pengarang</th>

<th>Tahun Terbit</th>

<th>Status Buku</th>

</tr>

</thead>

<tbody>

@foreach ($buku as $row)

<tr>

<td>{{ $loop->iteration }}</td>

<td>{{ $row->kode_buku }}</td>

<td>{{ $row->judul_buku }}</td>

<td>{{ $row->jenis_buku }}</td>

<td>{{ $row->pengarang }}</td>

<td>{{ $row->tahun_terbit }}</td>

<td>

@if ($row->status_buku == 1)

Ada

@elseif ($row->status_buku == 0)

Dipinjam

@else

Tidak Diketahui

45
 @endif

</td>

</tr>

@endforeach

</tbody>

</table>

46