Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Visual Studio Code - https://code.visualstudio.com/
Telegram Desktop - https://desktop.telegram.org/
Node JS - https://nodejs.org/en/
Chrome - https://www.google.com/chrome/?brand=CHBD&gclid=Cj0KCQjwoaz3BRDnARIsAF1RfLdnIVg2JlQmRVi_kLd_7uWlfoSz9uNvcIOZ32Msk0vzWJUSIqaLNGkaAopqEALw_wcB&gclsrc=aw.ds
Git - https://git-scm.com/downloadsSilahkan melakukan pre test selama 20 menit terlebih dahulu
Akses link google form untuk pre test pada link berikut ini :
DOM atau Document Object Model adalah suatu antarmuka untuk merepresentasikan dokumen web sebagai objek. Dengan DOM, seluruh komponen dari halaman web dapat diakses dan dimanipulasi sesuai keinginan kita. Komponen-komponen pada halaman website yang dapat dimanipulasi mencakup elemen HTML, atribut pada elemen, text, dll.
DOM dapat dimanipulasi seperti dibuat baru, diubah, dan dihapus dengan menggunakan javascript.
Membuat selektor artinya kita ingin mengakses sebuah element atau komponen pada halaman web untuk kemudian kita dapat lakukan manipulasi di dalamnya. biasanya kita menampung hasil selektor pada sebuah variabel agar dapat mudah dipanggil kembali.
document.getElementById()
untuk mengakses sebuah elemen berdasarkan id dari elemen kita dapat gunakan selector getElemenById() . Hasil selektor ini adalah sebuah elemen yang dapat kita lakukan manipulasi.
cara membuat selektor dengan id yaitu dengan sintaks sbb:
document.getElementsByClassName()
Untuk mengakses beberapa element sekaligus , kita dapat gunakan selektor menggunakan class. hasil selektor ini yaitu berupa HTML Collection atau kumpulan element HTML yang bisa kita akses sebagai array.
Melakukan manipulasi DOM adalah salah satu cara agar tampilan web menjadi interaktif. beberapa contoh manipulasi yaitu dengan cara membuat element baru, mengubahnya atau menghapusnya. Terdapat beberapa metode untuk memanipulasi DOM di antaranya :
.innerHTML
metode innerHTML yaitu metode untuk mengisi atau mengganti isi dari sebuah element HTML dengan apapun yang kita inginkan. Kita dapat isi dengan sebuah teks node atau bahkan kita isi dengan element HTML di dalam DOM yang sedang kita akses.
Metode lainnya
metode lainnya dapat dipelajari dari playlist channel Web Pemrograman Unpas berikut:
manipulasi style, menambahkan atribute, menambahkan class
manipulasi node
Event adalah sebuah aktivitas atau sebuah kejadian yang terjadi di dalam sebuah DOM. Kejadian tersebut dapat kita tangkap atau didengarkan(listen) untuk kemudian kita lakukan sesuatu hal yang lain. hal ini tentunya membuat halaman web kita menjadi sangat interaktif.
Cara menangkap sebuah event ada 2 cara yaitu:
inline atribute dengan tag HTML
beberapa tag pada HTML memiliki atribute bawaan berupa event, contohnya <input onchange="alert('hello')"> atau <button onclick="alert('i am clicked')"> Klik button </button>
menambahkan addEventListener()
1. menangkap event submit pada form
untuk menangkap kejadian ketika sebuah form disubmit kita dapat tambahkan addEventListener untuk event submit. contohnya di bawah ini sebuah form dengan id formConditional ditangkap event submit nya.
di dalam function addEventListener terdapat dua parameter yaitu nama eventnya dan function handler nya.
nama event yang ingin ditangkap adalah “submit”. function handler adalah function yang dijalankan ketika event tersebut didengarkan. function handler akan punya satu parameter yaitu event. Agar form tersebut tidak merefresh halaman maka kita gunakan event.preventDefault().
Web Programing Unpas : https://www.youtube.com/playlist?list=PLFIM0718LjIWB3YRoQbQh82ZewAGtE2-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="judul">Berlatih DOM</h1>
<script>
var judul = document.getElementById("judul")
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li class="list-menu">goreng tempe</li>
<li class="list-menu">mendoan</li>
<li class="list-menu">tahu bulat</li>
</ul>
<script>
var listMenu = document.getElementsByClassName("list-menu")
// Hasil selektor yaitu berupa array collection HTML
console.log(listMenu.length) // 3
var gorengTempe = listMenu[0]
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="menu-makanan">
</div>
<script>
var menuMakanan = document.getElementById("menu-makanan")
// menambahkan sebuah teks
menuMakanan.innerHTML = "Ini adalah menu makanannya"
// menambahkan element HTML
menuMakanan.innerHTML = "<h2>Ini adalah menu makanannya<h2>"
// menambahkan banyak element HTML dengan banyak baris dapat gunakan tanda petik backtic ``
menuMakanan.innerHTML = ` <h2>Ini adalah menu makanannya<h2>
<ul>
<li class="list-menu">goreng tempe</li>
<li class="list-menu">mendoan</li>
<li class="list-menu">tahu bulat</li>
</ul>`
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Conditional HTML</title>
</head>
<body>
<h1>Berlatih Kondisional</h1>
<h3>Masukkan nama dan peranmu!</h3>
<form action="#" id="formConditional">
<input type="text" id="name" placeholder="Isi nama di sini">
<input type="text" id="role" placeholder="Isi peran di sini">
<input type="submit" value="Mulai Permainan">
</form>
<h3>Jawaban dari console game: </h3>
<div id="jawaban">
</div>
</body>
<script>
var form = document.getElementById("formConditional")
var jawaban = document.getElementById("jawaban")
form.addEventListener("submit", function(event) {
event.preventDefault()
var name = document.getElementById("name").value
var role = document.getElementById("role").value
console.log(name) // nama yang disubmit akan tampil di console
})
</script>
</html> Ketentuan-ketentuan yang diharuskan dalam pembelajaran ... :v
Sebenarnya untuk melatih diri sendiri menjadi PROGRAMMER YANG HANDAL itu sangatlah simple, tidak diperlukan kebutuhan yang muluk-muluk. Asalkan ada niat pasti semuanya tercapai. Meskipun tidak ada basic dalam pemrograman, anda tetap dapat belajar ... sttttt asalkan ada niatan.
Bahasa inggris akan membantumu lebih mudah:
Membaca dokumentasi;
Memahami pesan error;
Bertanya di forum global;
Belajar dari web luar;
Minimal kamu bisa bebahasa inggris secara pasif, maka sudah bisa menikmati kemudahan di atas. Atau bagi yang kesulitan untuk membaca dokumentasi atau web luar negeri kalian bisa kok mentranslatenya dengan menggunakan fitur yang ada di chrome. Cara nya bagaimana ya ?
Kalian tinggal klik icon translate yang ada di sebelahnya bintang pojok kanan atas pada gambar berikut.
Kemudian anda pilih Indonesia :) Mudah bukan ? eitssss tapi, minimal anda tetap harus bisa berbahasa inggris dikarenakan bahasa hasil dari translate ini sulit untuk dipahami.
Nah, membaca dokumentasi sangatlah sulit. Untuk itu perlu dilakukan latihan setiap harinya supaya terbiasa dengan membaca dokumentasi. Mengapa saya bilang bahwa membaca dokumentasi itu sulit ? karena :
Dikemas dengan bahasa teknis yang membosankan untuk dibaca
Screenshot kurang lengkap (karena pemula butuh screenshot meskipun itu hanya perintah CLI)
Menggunakan bahasa inggris
Lagi - lagi bahasa inggris bukan ?
Oiya sedikit tips nih dari Doyatama Code anda bisa mencari dokumentasi di mesin telusur dengan kata kunci x documentation, x adalah nama teknologinya.
Membaca source code kelihatannya mudah. Iya mudah kalau baca source code yang kita tulis sendiri. Logikanya sudah kita pahami, karena logika berpikir kita sendiri.
Tapi…
Saat membaca source code milik orang lain, nggak paham apa-apa.
Skill membaca source code ternyata skill yang harus dimiliki selain skill menulisnya. Karena kita tidak akan menulis kode sendirian. Akan ada source code dari anggota tim yang lain.
Lalu bagaimana agar bisa membaca source code orang lain?
Ada beberapa tips yang pernah saya dengar:
Baca source code dari bawah ke atas
Baca bagian yang kamu pahami dulu
Baca keterangan pada komentarnya
Proses debugging ini bisa jadi lebih lama dari proses menulis kode. Bahkan ada yang sampai berminggu-minggu tidak menemukan sumber masalahnya.
Untuk itu anda harus mampu :
Mamahami maksud pesan error dan masalah lainnya
Mencari di baris ke berapa letak errornya
Analisis penyebabnya
Mengatasi error
Skil bertanya dan browsing merupakan suatu keharusan yang wajib anda miliki. Mengapa ya? Ketika anda tidak tahu atau stuck saat debugging, mau minta bantuan ke mana? ya browsing dulu, kemudian kalau masih tetap stuck bisa tanya ke teman-teman . Untuk itu saya sediakan grup telegram di link ini : untuk tanya-tanya.
Mencari referensi;
dll.
Jika HTML bisa dianalogikan sebagai kerangka/pondasi web, lalu CSS berfungsi untuk mempercantik, maka javascript (js) membuat web lebih interaktif. Agar lebih mudah kita analogikan website sebagai manusia. Kerangka = HTML, daging sampai dengan pakaian = CSS, kemampuan gerak = javascript (js).
Ada dua cara memasukkan kode javascript ke dalam HTML , dengan langsung membuat javascript langsung di kode HTML dan bisa juga dengan menambahkan file javascript secara terpisah
1.Membuat javascript langsung kedalam kode HTML. Membuat javascript langsung ke kode HTML dilakukan dengan cara menambahkan kode JavaScript di HTML kedalam tag <script>”kode javacript”</script> . Kode JavaScript yang ditambahkan bisa diletakkan didalam tag <head> atau tag <body>. Cara pertama ini cocok dipakai untuk penggunaan javascript untuk satu halaman
2.Menambahkan kode JavaScript ke file terpisah. Cara kedua ini cocok dipakai kalau kita memerlukan penggunaan JavaScript di berbagai halaman.File JavaScript ditulis dengan ektensi namefile.js . File ini di-reference dari dalam dokumen HTML, sama seperti mereferensikan dokumen CSS.
Tipe Data
substring berfungsi menampilkan string dari karakter awal pada parameter pertama ke berapa sampai ke karakter akhir pada parameter kedua kaberapa contoh:
substr berfungsi manampilkan string dari karakter awal pada parameter pertama dan panjang karakter pada parameter kedua
replace berfungsi mengganti string yang diganti dari parameter pertama dan pada parameter kedua string yang menganti contoh:
toUpperCase berfungsi mengubah string menjadi huruf kapital(Hrruf besar) contoh:
toLowerCase berfungsi mengubah string menjadi huruf kecil contoh:
length berfungsi menapilkan jumlah karakter pada string
Function atau Fungsi adalah sebuah blok kode yang dibuat untuk menyederhanakan pemrograman agar proses-proses logika yang sering diperlukan dapat dipanggil kembali dengan hanya memanggil nama fungsi tersebut.
contoh:
Contoh Lain:
Operator Pembanding
Operator Aritmatika
Operator AND, OR
Kondisional atau percabangan merupakan logika dasar untuk membuat sebuah program. Dengan kondisional, kita dapat mengarahkan suatu program dengan pengecekan suatu kondisi, oleh karena itu kondisional sering disebut juga control flow.
if statement cara penulisan
if(condition){ //output }
contoh :
If else statement cara penulisan
if(condition) { //output }else{ //output }
contoh:
if..else if.. else
cara penulisan if(condition){ //ouput } else if(condition){ //output }else{ //output }
contoh :
looping atau perulangan adalah melakukan suatu proses secara berulang sampai dengan suatu kondisi tertentu. Terdapat beberapa cara di Javascript untuk melakukan looping yaitu for, while
for loop
cara penulisan for (mulai, akhir, operator aritmatika){ //output }
contoh :
Referensi lain :
Sekolah koding :
lebih kecil sama dengan
decrement
===
sama dangan (dengan tipe data sama)
!=
tidak sama dengan
>
lebih besar
<
lebih kecil
>=
lebih besar sama dengan
–
pengurangan
*
perkalian
/
pembagian
%
modulus(sisa hasil bagi)
++
increment
Logika and
Nilai
true && true
true
true && false
false
false && true
false
false && false
false
Logika Or
Nilai
true || true
true
true || false
true
false || true
true
false || false
false
<=
--
var kalimat = “Hello World”; //string
var angka = 25; //integer
var is_true = true; //boolean
var decimal = 1,2; //double
var motor = [“Yamaha”, “Honda”, “Suzuki”]; //array
var biodata = {first_name:”rezky”, last_name:”putra”, age:24} ; //object<script>
var str = “Hello world”;
var res = str.subtring(6,11);
//outputnya world
</script><script>
var kalimat = “Selamat Datang”;
var output = kalimat.substr(8,6);
//output Datang
</script><script>
var kalimat = “Selamat Datang”;
var output = kalimat.replace(“Datang”,”Pagi”);
//output Selamat Pagi
</script><script>
var kalimat = “Selamat Datang”;
var output = kalimat.toUpperCase();
//output SELAMAT DATANG
</script><script>
var kalimat = “Selamat Datang”;
var output = kalimat.toLowerCase();
//output selamatdatang
</script><script>
var abjad = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
var jumlah = text.length
//output 26
</script><html>
<body>
<p id="demo"> </p>
<script>
function penjumlahan(angka1, angka2) {
return angka1 + angka2;
}
document.getElementById("demo"),innerHTML = penjumlahan(4, 4);
//output 8
</script><html>
<body>
<p id="demo"> </p>
<script>
function bio(nama, umur) {
return "Nama Saya " + nama + "Umur saya " + umur;
}
document.getElementById("demo"),innerHTML = bio("Rezky Putra", 24);
//output Nama Saya Rezky Putra Umur saya 24
</script>var age=9;
if (age<10) {
"sudah memasuki usia balita";
} //output sudah mamasuki usia balitaage=17;
if (age<10)
{
"masih balita";
}else{
"sudah bukan balita";
}
//output
sudah bukan balitavar nilai=66;
if (nilai>90)
{
"Sangat baik";
}else if(nilai<90 && nilai>=75){
"Baik";
}else if(nilai<75 && nilai>=65){
"Cukup";
}else if(nilai<65 && nilai>=55){
"Kurang";
}else{
"Error";
}
//output
Cukupvar output = "";
for(i=1; i<10; i++){
output += i + "- urutan 1 sampai 10 <br>"
}
//output
1 - urutan 1 sampai 10
2 - urutan 1 sampai 10
3 - urutan 1 sampai 10
4 - urutan 1 sampai 10
5 - urutan 1 sampai 10
6 - urutan 1 sampai 10
7 - urutan 1 sampai 10
8 - urutan 1 sampai 10
9 - urutan 1 sampai 10
10 - urutan 1 sampai 10
while loop
cara penulisan
while (condition){
//output
}contoh :
var i=1;
var text ="";
while(i<10){
text += i + " urutan ke- " + i + "<br>";
i++;
}
//output
1 uratan ke- 1
2 urutan ke- 2
3 urutan ke- 3
4 urutan ke- 4
5 urutan ke- 5
6 urutan ke- 6
7 urutan ke- 7
8 urutan ke- 8
9 urutan ke- 9
10 urutan ke- 10Cascading Style Sheet atau dikenal dengan CSS merupakan bahasa style sheet yang berguna untuk membantu menyajikan dokumen yang ditulis dengan HTML. CSS dipakai untuk mendesain halaman depan atau tampilan website (front end). Menggunakan CSS kita bisa mengatur warna , ukuran , posisi , background, dan lain lain. Sehingga ada nilai estetika yang ditambahkan dalam tampilan suatu website.
Pada CSS ada beberapa istilah biasa kita temukan diantara : selector , properti, dan value . Kita mempelajari terlabih dahulu pengertian dari ketiga istilah tersebut.
Selektor adalah metode pengelompokan syntax didalam CSS. Selector juga dapat diartikan sebagai aturan yang digunakan untuk memisahkan beberapa syntax dengan target yang berbeda.
Properti adalah suatu jenis style CSS yang berfungsi memberikan style pada selector yang telah ditentukan. Property pada CSS sangat banyak sekali. Banyak contoh properti css seperti : background-color, color, font-family, font-size, margin, padding dan lain lain.
Value adalah nilai dari property . Dan value harus bersesuaian dengan properti, misalnya properti "font-family" tidak bisa diisi "red" karena "red" adalah value untuk property "color".
Ada bentuk baku penulisan selektor , properti dan value :
selektor pada contoh diatas adalah h2
properti pada contoh diatas adalah font-family dan color
value pada contoh diatas adalah
Internal CSS
Penulisan CSS didalam tag <head> atau <body> HTML. Penulisannya ditulis dalam tag <style> .
Eksternal CSS
Penulisan CSS terpisah dengan file HTML. File CSS ditulis dan disimpan dengan file berekstensi .css .Untuk memasukkan ekstensi CSS ke HTML menggunakan tag <link href="dirfolder/namefile.css">. href diisi direktori folder dan nama file CSS untuk mengarahkan halaman html menemukan file CSS tersebut.
Inline CSS Penulisan CSS langsung di atribut HTML tersebut. Contoh cara pemakaian inline CSS:
Refensi lain :
Tutorial CSS dari Sekolah Coding:
CSS Dasar dari Web Programming Unpas :
Sumber:
Bootstrap adalah sebuah framework untuk membangun website di sisi front-end . framework yang disediakan oleh Bootstrap yaitu framework CSS dan Javascript. Untuk saat ini kita hanya akan pakai CSS nya saja. Keunggulan penggunaan Bootstrap di antaranya :
sistem grid yang responsive yang berarti menyesuaikan lebar layar atau viewport sehingga jika website kita dibuka dengan berbagai macam device seperti laptop, tablet dan handphone tampilannya dinamis dapat menyesuaikan agar tetap nyaman dilihat.
sans rgb(10, 8, 8)mempunyai banyak elemen UI (User Interface) seperti pop-up modal, tombol buttons, card dan lain-lain yang dapat dimanfaatkan untuk mempercantik tampilan web.
class yang reusable atau dapat kita pakai berulang kali yang artinya kita tidak usah repot membuat style di berbagai halaman, cukup panggil classyang diinginkan untuk dapat memberikan styling pada element atau tag.
kompatibel dengan berbagai macam browser
Dalam dokumentasi ini akan digunakan Bootstrap 4 sebagai contoh kasus. Bootstrap 4 memiliki halaman dokumentasi tersendiri yang dipakai sebagai pedoman pemakaian di link berikut.
Terdapat beberapa cara untuk memasangkan Bootstrap pada halaman web atau html:
memasangkan file CDN
mendownload source file Bootstrap
File CDN yaitu segala file yang dibutuhkan untuk menggunakan Bootstrap yang bersumber dari suatu pranala atau link tertentu. Keuntungannya adalah cara ini merupakan cara termudah untuk memasangkan Bootstrap pada project web kita dan tidak usah mendownload apapun. Kekurangannya adalah dalam pengembangan project web kita harus selalu terhubung dengan internet karena file CDN tersebut diperoleh dari website luar.
Di halaman dokumentasi bootstrap kita dapat copy bagian CSS:
setelah copy lalu paste di halaman html yang sudah kita buatkan misalkan index.html. (pastikan paste di bagian element <head>
setelah itu di bagian body kita dapat mulai menuliskan element-element HTML. contohnya berikan saja sebuah heading untuk melihat perubahan style yang diberikan bootstrap:
<h1 class="text-primary">Header ini ditulis dengan class Bootstrap</h1>
file Bootstrap dapat didownload di halaman berikut. Pada bagian “Compiled CSS and JS” terdapat tombol download.
setelah terdownload maka akan terdownload sebuah file .zip, ekstraksi file zip tersebut lalu kita akan dapati dua buah folder yaitu css dan js.
tempatkan index.html sejajar dengan folder css dan js
kita dapat tempatkan file css dan js di satu folder terpisah misalkan folder dengan nama public atau assets atau kita cukup saja tempatkan kedua folder tersebut sejajar dengan index.html kita.
Di dalam folder css terdapat file seperti berikut:
dari list file tersebut kita cukup ambil satu file saja untuk bisa dipasangkan di index.html, misalkan dipilih bootstrap.min.css . maka kita hubungkan index html kita dengan file css tersebut seperti berikut:
pastikan href yang kita berikan sesuai dengan tempat file css berada
setelah itu kita siap untuk mulai menulis elemen-elemen HTML di bagian body dengan Bootstrap. contohnya kita tulis sebuah heading maka akan tampil di browser sebuah heading yang sudah diberikan styling oleh Bootstrap:
Setelah pemasangan Bootstrap berhasil, kita dapat lanjutkan untuk mulai berkenalan dengan sistem grid dan komponen-komponen yang disediakan oleh Bootstrap. Hal ini berguna agar kita dapat berlatih membuat layout web dengan lebih mudah menggunakan bantuan CSS Bootstrap.
Berikut beberapa tutorial yang dapat diikuti:
Referensi Lain :
Tutorial Bootstrap 4 Net Ninja (berbahasa inggris) : https://www.youtube.com/playlist?list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv
h2 {
font-family: sans;
color: rgb(10, 8, 8);
}<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
font-family: Helvetica;
line-height: 2.00 em;
font-size: 20px;
color: orange;
}
</style>
</head>
<body>
<style type="text/css">
h2 {
font-family: sans;
color: rgb(10, 8, 8);
}
</style>
<h2>Hello CSS</h2>
<p>Hello aku bisa CSS</p>
</body>
</html><h1 class="text-primary">Heading ini ditulis dengan class Bootstrap</h1>HTML merupakan singkatan dari Hyper Text Markup Language. HTML adalah sebuah bahasa standar untuk pembuatan halaman web. Dengan adanya HTML, kita dapat membedakan struktur yang tersusun dari sebuah halaman melalui tag atau elemen-elemen penyusunnya.
Elemen atau tag pada HTML dikenali oleh browser seperti google chrome, firefox atau Ms Edge, dll. Browser tersebut mengidentifikasi setiap elemen penyusun HTML dan ditampilkan sesuai karakteristik elemen tersebut. Contohnya sebuah elemen paragraph akan ditampilkan sebagai tulisan panjang, atau sebuah elemen pranala/link akan dicetak dengan warna biru dan ketika mouse mendekat kursornya berubah menjadi telunjuk, dsb.
Contoh sebuah halaman HTML sederhana:
Dari contoh di atas kita dapat mengidentifikasi elemen-elemen nya seperti berikut
element <!DOCTYPE html> mengartikan bahwa dokumen ditulis dengan versi HTML5
elemen <html> adalah elemen induk atau elemen utama yang sering disebut juga root element dari sebuah halaman HTML.
elemen <head> berisi informasi tentang halaman HTML yang sedang dibuat
Elemen atau sering disebut dengan tag pada HTML adalah penyusun dari sebuah halaman web yang dapat dikenali oleh browser dan ditampilkan oleh browser sesuai karakteristik masing-masing.
Sebuah elemen HTML terdiri dari tag pembuka(start/open tag), atribut (attribute), isi (content), dan tag penutup(close tag).
Pada ilustrasi di atas merupakan sebuah elemen paragraph dibuka dengan tag pembuka <p> . Di dalam tag pembuka tersebut terdapat atribut class yang disematkan ke dalam tag. Isi atau content dari sebuah tag paragraph <p> akan ditampilkan sebagai paragraf. lalu terakhir sebuah tag ditutup dengan sebuah tag penutup.
catatan
Tidak semua elemen HTML memiliki tag penutup seperti <input> <img> <meta> .
Elemen di dalam elemen (nested element)
sebuah elemen HTML dapat terisi dengan elemen-elemen lain di dalamnya. Semua dokumen HTML yang kita lihat di halaman web terdiri dari kumpulan elemen bersarang atau elemen yang mengandung elemen lain di dalamnya.
Contohnya halaman berikut:
Pada contoh di atas elemen <html> adalah root element dan merupakan elemen utama di dokument HTML. elemen tersebut dibuka dengan tag pembuka <html> dan
ditutup dengan </html>. Lalu di dalam elemen <html> terdapat elemen <body> . elemen <body> merupakan elemen yang akan ditampilkan ke halaman web yang
diawali dengan tag pembuka <body> dan ditutup dengan sebuah tag penutup </body> , dan seterusnya sehingga terciptalah sebuah halaman web yang utuh.
Heading HTML
Heading Pada HTML berfungsi untuk membuat judul atau subtitle pada tampilan website
List HTML
Terdapat 2 jenis list di HTML yaitu Unordered dan Ordered
Beberapa Input type yang bisa di gunakan di HTML:
<input type="button">
<input type="checkbox">
<input type="color">
Input Form HTML
Dropdown
Berfungsi untuk menampilkan dropdown list kedalam tampilan website
Textarea
Berfungsi Membuat inputan yang jauh lebih lebar
attribute cols untuk lebar nilai kolom dari inputan dan attribute rows untuk besar nilai baris dari inputan
Link Download Text Editor
Visual Studio Code :
Atom :
Sublime Text :
* pilih salah satu
Referensi lain :
Belajar HTML dari Dasar oleh Sekolah Koding:
sumber
tulisan ini disarikan dari halaman dokumentasi W3schools :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
elemen <title> adalah judul dari halaman HTML yang akan tampil di tab browser.
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Selamat Datang di channel materi Laravel - Web Development.
Training ini dijalankan oleh Doyatama Code. Adapun tujuan diadakan training ini, utamanya sebagai bentuk kontribusi kami kepada bangsa untuk meningkatkan kualitas SDM khususnya di bidang skill programming. Tanpa berpanjang lebar, kami mengucapkan terimakasih atas dukungannya dan selamat menikmati pelatihan dalam gitbook ini.
Di channel ini anda mendapatkan penjelasan materi, tugas, dan info secara satu arah. Jika anda ingin bertanya bisa disampaikan di grup diskusi. Grup diskusi dapat teman-teman klik di link berikut ini : https://t.me/doyatama_code. Dimohon untuk tidak membahas bahasan jauh diluar materi training di grup diskusi.
Mengerti tentang Selektor pada DOM
Mengerti dan mengaplikasikan event pada DOM
Terdapat sebuah template html bernama index.html. Halaman ini adalah sebuah mini-ecommerce sederhana. Pada halaman tersebut sudah tersedia beberapa element awal yaitu navbar dan bagian content utama. Tugas kamu adalah melengkapi halaman tersebut agar menjadi lebih interaktif menggunakan DOM Javascript.
Halaman index html ketika pertama diload akan menampilkan seluruh barang yang tersedia di mini-ecommerce. Misalkan terdapat data yang kita peroleh dari Database seperti berikut:
Tampilkanlah setiap barang tersebut dengan menggunakan Card yang sudah ditentukan seperti berikut:
Petunjuk : Lakukan looping/perulangan terhadap items yang menghasilkan element Card. Setiap Card berisi data sesuai dengan data di variable items.
File gambar-gambar item bisa kamu download dari sini :
Ketika semua item berhasil tampil selanjutnya kamu diminta agar User dapat melakukan pencarian item melalui form search pada Navbar. Misalkan ketika User mengetik “Mouse” maka akan ditampilkan item Mouse saja. Jika mengetik “Keyboard” maka akan ditampilkan item Keyboard saja. Selain itu tidak akan menampilkan apapun.
Petunjuk : Tangkaplah event submit pada form id=”formItem”. Di dalam event tersebut dapatkan value dari input search. Setelah itu lakukan filter pada items yang nama itemnya sesuai dengan kata kunci pencarian.
Pada Card Item terdapat button “Tambahkan ke Keranjang”, buatlah event ketika diklik button tersebut maka pada button Icon keranjang di navbar (id = "cart") akan bertambah +1.
Berikut contoh hasil untuk release 0 dan release 1:
Release 0 dan Release 1 : Menampilkan barang dengan DOM dan memfilternya melalui form search
Berikut contoh hasil untuk release 2 (Opsional)
Release 2: menambahkan barang ke keranjang
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Latihan DOM</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"
integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">Mini Ecommerce</a>
<form class="form-inline" id="formItem">
<input class="form-control mr-sm-2" type="search" placeholder="Search" id="keyword" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="searchItem">Search</button>
</form>
<button class="btn btn-primary" id="cart"><i class="fas fa-shopping-cart"></i>(0)</button>
</nav>
<div class="row">
<div class="row col-md-12 mt-2" id="listBarang" >
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>var items = [
['001', 'Keyboard Logitek', 60000, 'Keyboard yang mantap untuk kantoran', 'logitek.jpg'],
['002', 'Keyboard MSI', 300000, 'Keyboard gaming MSI mekanik', 'msi.jpg'],
['003', 'Mouse Genius', 50000, 'Mouse Genius biar lebih pinter', 'genius.jpeg'],
['004', 'Mouse Jerry', 30000, 'Mouse yang disukai kucing', 'jerry.jpg']
]<!-- Component Card dari Bootstrap --> <div class ="col-4 mt-2"> <div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" height="200px" width="200px" alt="...">
<div class="card-body">
<h5 class="card-title" id="itemName">Nama</h5>
<p class="card-text" id="itemDesc">Deskripsi barang</p>
<p class="card-text">Rp Harga</p>
<a href="#" class="btn btn-primary" id="addCart">Tambahkan ke keranjang</a>
</div>
</div></div>A list of awesome Indonesia groups related to programming language on Telegram.
Android
Agile
Assembly
Bash
C/C++
Crystal
Dart
Elixir
Golang
Haskell
Java
JavaScript
Kotlin
Microsoft
Pascal - Delphi
PHP
Python
Ruby
Rust
Swift
Typescript
MongoDB
MySQL
Geographic Information System and Remote Sensing
PostgreSQL
Command line interface atau yang biasa kita kenal cmd atau command prompt atau terminal adalah software atau antar muka untuk memberikan perintah-perintah dasar pada komputer kita. Biasanya kita mengoperasikan komputer seperti browsing media, mencari file, membuat file atau folder, dan lain-lain dengan GUI (Graphical User Interface) yang sudah disediakan pengembang Sistem Operasi seperti Windows, Linux, atau OSX. Namun pada dasarnya kita juga bisa melakukan operasi-operasi tersebut dalam suatu perintah yang kita kirimkan melalui cmd/terminal. Berikut ini beberapa contohnya:
Catatan: Contoh perintah ditulis dengan awalan
$(tapi tidak usah ditulis tanda$pada terminal/command prompt nya) . Tanda//berarti menandakan baris tersebut adalah komentar atau keterangan, tidak perlu ditulis di perintah terminal.
Untuk menuju folder atau direktori tertentu bisa gunakan perintah cd atau kepanjangan dari change directory.
Terkadang kita butuh tahu sedang dimana posisi terminal kita berjalan. Perintah untuk fungsi ini yaitu pwd/cd atau kependekan dari path of working directory
Kamu bisa gunakan perintah ls atau dir . contohnya sebagai berikut
Perintahnya adalah mkdir atau kependekan dari make directory. contohnya sebagai berikut
Gunakan perintah touch untuk membuat file baru
Untuk OS Windows, terminal bawaannya adalah command prompt atau cmd yang relatif kurang nyaman untuk dipakai dalam tahap development. Oleh karena itu saya rekomendasikan untuk install terminal di bawah ini agar lebih optimal dalam mengerjakan project.
Cmder, link download: (Terdapat dua pilihan versi : mini dan full. Mini adalah versi yang minimum dan yang full adalah versi mini ditambah Git dari windows)
Git bash, Git bash biasanya terinstall jika kita menginstall git di pc/laptop kita.
Git adalah sebuah Version Control System yaitu sistem yang mengelola perubahan dari sebuah dokumen, program komputer, website dan kumpulan informasi lain.
Selain itu, Git memungkinkan para pengembang perangkat lunak dari berbagai belahan dunia mengerjakan banyak projek bersama-sama tanpa mengharuskan bertatap muka.
Untuk menginstall git ke dalam windows, download terlebih dahulu file instalasi nya dari halaman . Jika menggunakan OS selain windows bisa menyesuaikan installasi dengan dokumentasi yang sudah tersedia
jika sudah terdownload, klik file instalasi lalu ikuti instruksi instalasi (klik next saja sampai selesai).
setelah instalasi selesai, kita dapat mengecek apakah Git sudah terinstall dengan cara membuka cmd atau command prompt lalu ketikkan perintah git --version.
git initgit init adalah perintah untuk memasangkan git pada sebuah direktori atau folder yang sedang terbuka di command prompt atau terminal.
memasangkan git pada folder git-demo
Pada contoh di atas, setelah memberikan perintah git init akan muncul keterangan “Initialized empty Git repository in . . . ” yang berarti folder git-demo yang sedang dibuka di cmd sudah dapat menggunakan Git di dalamnya.
Jika diberikan perintah di cmd dir /ah maka akan ditampilkan bahwa pada direktori sudah terdapat folder yang hidden dengan nama folder .git . Di dalam folder .git itu lah terdapat sistem Git sehingga kita dapat menggunakan perintah-perintah git untuk mengatur project di dalam direktori .
git add git add yaitu perintah git untuk menambahkan perubahan-perubahan pada direktori project sebelum menyimpan perubahan tersebut. Misalkan di folder project kita terdapat file index.html yang ingin kita simpan perubahannya.
git commit setelah memberikan git add untuk menambahkan file-file yang ingin disimpan sebagai perubahan(update), selanjutnya kita berikan perintah git commit. git commit berfungsi untuk memberikan catatan atau pesan yang menandai perubahan yang sudah dibuat. contohnya seperti berikut
Contoh di atas menunjukkan bahwa kita memberikan pesan yaitu “sudah menambahkan HTML dan CSS” pada perubahan yang kita buat di project kita.
Pastikan sudah install git di komputer anda. Jika belum terinstall silakan ikuti langkah-langkahnya di sini:
Pada materi ini akan diberikan contoh membuat repositori Git dan mengelola menggunakan layanan Gitlab.
Repository atau repo di Gitlab biasa disebut dengan project. Berikut langkah-langkah untuk membuat repository baru:
Setelah login anda akan menuju halaman Projects yang berisi semua repository yang anda miliki. Jika Anda user baru maka belum ada repository yang tersedia. Di halaman tersebut anda akan melihat tombol New Project di sebelah kanan atas. Klik tombol tersebut.
Pada halaman membuat project baru, isi kolom project-name dengan nama yang Anda inginkan, misalkan: my first repo.
Pada kolom visibility level Anda akan melihat tiga pilihan yaitu Private, Internal, dan Public. Private artinya repo yang akan kita buat bersifat rahasia, hanya Anda dan orang yang Anda beri akses saja yang bisa membukanya. Sedangkan pilihan Internal berarti repo Anda akan dapat dilihat oleh semua user Gitlab. Pilihan “Public” berarti repo Anda akan terlihat oleh orang dari mana saja walaupun dia tidak memiliki akun gitlab. Pilih yang sesuai kebutuhan misalkan : Public.
Di bagian bawahnya terdapat pilihan checkbox “Initialize repository with a README”. Centang saja jika anda ingin langsung clone repository nya setelah dibuat dan jangan cenang jika ingin repositorinya benar benar kosong.
Jika berhasil maka Anda akan diarahkan menuju halaman project atau repo yang telah dibuat. Jika sebelumnya kita centang “Initialize repository with a README” maka repository kita akan berisi file README.md.
Pada Bagian kanan atas terdapat tombol clone. Ketika diklik maka akan keluar dua pilihan “Clone with SSH” dan “Clone with HTTPS”. Jika ingin clone dengan SSH maka anda harus setting dulu akun anda agar terhubung dengan komputer Anda. Atau pilih saja clone dengan HTTPS. Klik tombol salin/copy supaya langsung otomatis tercopy pada clipboard.
Setelah itu menuju ke terminal atau cmd. Arahkan menuju folder dimana anda ingin menyimpan repository yang sudah Anda buat. Berikan perintah git clone <link_anda_yang_barusan_dicopy> (tanda <> hanyalah sebagai penanda template tidak usah ditulis di perintah cmd)
Jika sudah berhasil diclone maka akan ditemukan folder dengan nama repository di Gitlab. Cara mengeceknya dengan perintah “ls” atau “dir”.
Ketika kita sudah berhasil clone repository kita di Gitlab maka tentu kita ingin melakukan update atau penambahan code pada project kita. Agar perbaruan yang kita simpan di local (komputer) kita dapat kita perbaharui juga di repository Gitlab maka kita bisa lakukan dengan git push. Berikut langkah-langkahnya:
Ketika kita sudah memberikan perubahan terhadap suatu file atau membuat folder-folder baru pada folder project kita maka cara mengecek status perbaruan adalah dengan git status
Setelah git status maka akan ditampilkan list file yang “modified” atau “untracked”. “modified” artinya adalah kita mengubah file yang sebelumnya ada sedangkan “untracked” artinya file tersebut sama sekali baru di repository. Dalam contoh di atas terdapat perubahan pada file “README.md”.
Untuk menaikkan perubahan (stage) yang kita buat maka berikan perintah git add
Sekarang perubahan tadi sudah pada tahap “staged”. jika kita cek status nya lagi maka akan didapati berbeda:
Selanjutnya adalah memberikan laporan atau commit terhadap perubahan yang kita buat dengan git commit.
tanda “-m” pada perintah commit artinya kita ingin memberikan pesan atau laporan terhadap perubahan yang sudah dibuat. Dalam hal ini laporannya adalah “Pesan saya: mengubah README.md”
Selanjutnya adalah push untuk mengirim /upload perubahan yang ada di local computer kita menuju repository yang ada di Gitlab. Jika kita berada di branch bernama master maka perintahnya adalah:
Jika branch yang sedang kita miliki di local adalah branch lain selain master maka cara push nya adalah exit: Ctrl+
Jika langkah tersebut sudah maka kita sudah berhasil mengupload perubahan yang kita buat di repository kita.
NB : jika terjadi error permission denied
cara 1 :
cara 2 :
Sebelum mengerjakan challenge ini, buatlah sebuah folder dengan nama “oop” di dalam direktori htdocs kalian. Di dalam folder oop tersebut buatlah sebuah file index.php sebagai entry dari program yang akan dibuat.
Terdapat sebuah class Animal yang memiliki sebuah constructor name, default property legs = 4 dan cold_blooded = no.
Buatlah class Animal tersebut di dalam file animal.php.Lakukan instance terhadap class Animal tersebut di file index.php. Lakukan import class Animal dari animal.php di dalam index.php menggunakan require atau require once (mengenai require bisa baca dari ).
Tampilkan nama dari Animal yang baru dibuat tersebut.
Buatlah class Frog dan class Ape yang merupakan inheritance dari class Animal. Masing-masing class dibuat ke dalam satu file (Frog.php & Ape.php). Perhatikan bahwa Ape (Kera) merupakan hewan berkaki 2, hingga dia tidak menurunkan sifat jumlah kaki 4. class Ape memiliki function yell() yang mengeprint “Auooo” dan class Frog memiliki function jump() yang akan mengeprint “hop hop”.
output akhir
SQL atau Structured Query Language) adalah sebuah bahasa yang digunakan untuk mengakses data dalam basis rasional. sumber wikipedia
Pangkalan data (disebut juga basis data; : database) adalah kumpulan data yang terorganisir, yang umumnya disimpan dan diakses secara elektronik dari suatu sistem komputer. Pada saat pangkalan data menjadi semakin kompleks, maka pangkalan data dikembangkan menggunakan teknik perancangan dan pemodelan secara formal. sumber wikipedia
Cara Menjalankan Mysql xammp di command prompt
nyalakan dulu mysql dan apache di xammp
setelah itu cd folder xampp/mysql/bin
lalu setealah masuk di folder bin ketik di cmd/terminal mysql -uroot
Membuat database di sql
create database nama_databasenya;
Menampilkan semua database
show databases;
Memanggil database
use nama_databasenya;
Membuat table
CREATE TABLE nama_tabel ( kolom1 tipedata, kolom2 tipedata, kolom3 tipedata, …. );
Melihat deskripsi tabel
DESCRIBE nama_tabel;
Insert data pada table
INSERT INTO table_name (kolom1, kolom2, kolom3, …) VALUES (value1, value2, value3, …);
Menampilkan semua data pada table
SELECT * FROM nama_tabel;
Memanpilkan data pada table berdasarkan kolomnya
SELECT kolom1, kolom2, … FROM table_name;
Mempilkan data dengan kondisi
SELECT * FROM nama_tabel WHERE condition;
Update data pada table
UPDATE nama_table SET kolom1 = value1, kolom2 = value2, … WHERE condition;
Hapus data pada table
DELETE FROM nama_table WHERE condition;
Referensi Lainnya :
Referensi Lain sanbercode :
Referensi lain WPU :
Referensi lain Sekolah koding :
// Menuju Desktop
$ cd Desktop
// Menuju ke direktori parent (sebelumnya)
$ cd ..$ pwd
/home/users
// sedang berada di folder
home/users$cd/home/users
// sedang berada di folder
home/users$ ls
Document Desktop Image index.html
$ dir
Document Desktop Image index.html // membuat folder baru bernama new-folder
$ mkdir new-folder
// mengecek apakah sudah berhasil buat folder baru
$ ls
new-folder ... ...// membuat file index.html
$ touch index.html
// mengecek apakah sudah berhasil buat file baru
$ ls index.html ... ... $ git add index.html$ git commit -m "sudah menambahkan HTML dan CSS"git clone <your_repository_link_url> $ ls my-first-repo $ git statusOn branch masterYour branch is up to date with 'origin/master'.
Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git checkout -- <file>..." to discard changes in working directory)
modified: README.md
no changes added to commit (use "git add" and/or "git commit -a")$ git add README.md
// Jika ada terdapat banyak file dan kita ingin naikkan semuanya maka perintahnya:
$ git add . $ git status
On branch master
Your branch is up to date with 'origin/master'.
Changes to be committed: (use "git reset HEAD <file>..." to unstage)
modified: README.md$ git commit -m "Pesan saya: Mengubah README.md"$ git push origin master $ git push origin <nama_branch>$sheep = new Animal("shaun");
echo $sheep->name; // "shaun"
echo $sheep->legs; // 4
echo $sheep->cold_blooded; // "no"
// NB: Boleh juga menggunakan method get (get_name(), get_legs(), get_cold_blooded()) // index.php
$sungokong = new Ape("kera sakti");
$sungokong->yell() // "Auooo"
$kodok = new Frog("buduk");
$kodok->jump() ; // "hop hop"Sebuah web yang kita telusuri sehari-hari di internet dapat kita lihat sebagai penggabungan dua sisi yaitu sisi klien dan sisi server. Sisi klien adalah yang terlihat secara langsung oleh pengguna sehingga kaitannya erat dengan tampilan semisal HTML, CSS danJavascript. Sisi server merupakan bagian website yang tidak tampil ke pengguna, namun bagian ini lah yang mengolah logika bisnis dan data yang ditampilkan sehingga membuat website tersebut lebih dinamis.
PHP merupakan bahasa pemrograman yang berjalan di sisi server. Saat ini PHP masih populer dalam dunia pengembangan website karena komunitasnya yang sangat banyak di penjuru dunia. Penggunaan PHP dalam pengembangan web juga tergolong mudah karena sudah banyak tersedia hosting yang terjangkau dengan pengaturan yang familiar.
Sebelum mulai untuk menggunakan PHP kita persiapkan terlebih dahulu environment yang dibutuhkan di antaranya: Apache, MySql, PHP, dan Perl.
Apache adalah web server agar seolah-olah PC/laptop kita menjadi server lokal. Mysql akan digunakan sebagai database, sedangkan PHP adalah bahasa pemrograman yang akan dipakai untuk membangun web, terakhir Perl membantu agar server dapat menjalankan PHP.
Untuk menginstall semuanya tidak perlu diinstall terpisah satu per satu, kita dapat menginstall aplikasi yang all-in-one seperti XAMPP, WAMPP, LAMPP atau MAMP.
Pilihlah aplikasi yang sesuai dengan Sistem Operasi yang kita pakai:
Windows : atau
Mac OS : atau
Linux :
Ikuti perintah instalasi sampai selesai, jika ada kendala pada saat instalasi kita dapat mencari solusi lewat Google.
Ketika sudah selesai menginstall XAMPP, buka aplikasi Xampp lalu akan tampil panel seperti berikut
tampilan XAMPP
Nyalakan module Apache dan Mysql dengan cara menge-klik tombol start pada panel. Jika tidak terdapat error, maka kita dapat mengecek ke browser lalu buka alamat url localhost . Tampilan localhost pertama kali akan menunjukkan seperti berikut
Pada folder instalasi XAMPP , WAMP atau MAMP terdapat folder htdocs. Lokasi nya biasanya dapat kita akses ke C:/xampp/htdocs .
Di dalam folder htdocs ini adalah tempat kita dapat membuat direktori folder yang berisi project-project PHP.
Misalkan kita buat satu folder di dalam htdocs dengan nama berlatih-php.
Di dalam folder berlatih-php, buatlah satu file index.php lalu tulislah code seperti berikut
Maka dengan begitu kita mempunyai halaman baru di localhost yang dapat kita akses dengan menempatkan alamat url : localhost/berlatih-html
Sintaks PHP ditulis di dalam tag php seperti berikut:
Tag Komentar
Tag Komentar dipakai untuk menandai judul atau bagian dari kode yang sedang ditulis, hal ini membantu penulis kode agar mudah mencari kembali bagian-bagian kode tertentu. Cara menulis komentar yaitu dengan membubuhkan // untuk komentar satu baris, dan /* */ untuk komentar lebih dari satu baris.
Variabel dan titik koma ;
Untuk menulis satu variabel di dalam PHP digunakan tanda $ . Aturannya adalah
tidak boleh menggunakan angka di depan nama variabel tapi boleh menggunakan angka di tempat lain.
tidak boleh memuat spesial karakter (~!@#$%. dan lain lain)
Setiap baris kode wajib menggunakan semikolon atau titik koma di akhir baris kode.
Output Standar
Kita akan sering menampilkan output dari kode yang kita buat ke halaman browser. Terdapat beberapa pilihan sintaks untuk menampilkan output yaitu echo, print, print_r, dan var_dump.
Untuk menampilkan output berupa tipe data string biasanya digunakan echo atau print . Sedangkan print_r dapat juga digunakan untuk menampilkan tipe data array. var_dump akan menampilkan output berupa nilai dari yang ingin ditampilkan dilengkapi dengan informasi berupa tipe data dan panjang data.
Tipe data String yaitu tipe data yang berisi karakter-karakter dan biasa ditandai dengan pasangan tanda petik ganda (” “) atau tanda petik tunggal (‘ ‘).
Pada tipe data string terdapat metode yang melekat padanya. kita akan membahas beberapa di antara metode string.
Metode strlen dipakai untuk mengetahui panjang dari sebuah string :
Metode strcmp digunakan untuk membandingkan kesamaan di antara dua variabel string. output dari metode ini yaitu berupa tipe data logika boolean (true atau false).
boolean di PHP
boolean di PHP yaitu true dan false bisa juga ditulis dengan integer 1 untuk true, integer 0 untuk false
metode strtoupper digunakan untuk membuat sebuah string menjadi ditulis ke dalam karakter kapital.
metode strtolwer kebalikan dari strtoupper yaitu membuat suatu string ditulis menjadi karakter-karakter non-kapital.
metode strpos untuk mengakses suatu karakter atau kumpulan karakter tertentu pada string.
str_word_count
metode str_word_count berfungsi untuk menghitung jumlah kata pada string
metode substr untuk mengambil beberapa karakter pada string. menerima 3 parameter (<string yang ingin dipotong>, <indeks mulai potong>, <panjang yang ingin dipotong>).
indeks mulai potong dapat bernilai minus yang berarti mulai indeks dari karakter paling belakang.
tipe data array adalah tipe data yang mampu menampung lebih dari satu data. Elemen dari array ditandai dengan indeks agar dapat diakses. indeks array selalu diawali dengan indeks 0.
membuat array baru dengan cara seperti berikut:
ingat! untuk menampilkan array ke output gunakan sintaks print_r.
untuk mengakses elemen pada array kita dapat arahkan dengan menunjuk indeks elemen yang kita inginkan:
terkadang kita ingin menambahkan isi dari array dengan suatu data. caranya adalah dengan $array[] = <data yang ingin ditambahkan>
jika data yang ingin ditambahkan lebih dari satu data, kita bisa gunakan metode array_push(). berikut ini
metode count digunakan untuk menghitung panjang dari sebuah array.
Array Asosiatif adalah tipe array yang dapat menyimpan banyak data sebagai pasangan key dan value. Berbeda dengan array biasa yang menggunakan angka untuk menandai indeks, array asosiatif menggunakan key sebagai indeks yang dapat kita set sendiri.
penulisan array asosiatif yaitu dengan memasangkan key dan value dengan pemisah tanda panah => .
Contohnya sebagai berikut
Array Multidimentional adalah tipe array yang dapat menyimpan array dalam sebuah array
Contohnya sebagai berikut:
Metode string :
Metode array :
Referensi lainnya :
Playlist Sekolah Koding (Intro PHP, string dan Array) :
Playlist WPU Belajar PHP untuk Pemula:
<?php
$hello ="Hello World!";
// echo
echo $hello;
// print
print $hello;
// print_r
print_r($hello);
// var_dump
var_dump($hello);
?><?php
$sapa = "Halo Guys!"
$hello = 'Hello World!'
?><?php
$jargon = "Tetap Santai dan Berkualitas";
// akan menampilkan panjang variabel $jargon yaitu 28 karakter
echo strlen($jargon);
// akan menampilkan panjang string 11
echo strlen("Halo semua!")
?><?php
$passwordasli = "belajarPHP";
$passwordinput = "belajarPHP";
$output = strcmp($passwordasli, $passwordinput);
if ($output !== 0) {
echo "Password anda salah!";
}else {
echo "Password anda benar.";
}
?><?php
$statement = "ini gak marah, cuman caps";
// menampilkan INI GAK MARAH, CUMAN CAPS
echo strtoupper($statement);?><?php
$marah = "INI MARAH";
// menampilkan ini marah
echo strtolower($marah);?><?php
$kalimat = "Saya sedang belajar PHP";
$katayangdicari = "PHP";
$posisi = strpos($kalimat, $katayangdicari);
echo $posisi;
?><?php
$kalimat = "Selamat Datang Di Sanbercode";
//menampilkan 4 bersarkan jumlah kata pada variabel kalimat
echo str_word_count($kalimat);
?><?php
$string = "Saya suka PHP";
// akan menampilkan suka PHP
echo substr($string, 5, 8);
// akan menampilkan PH
echo substr($string, -3, 2);
?><?php
$siswa = array("regi", "bobby", "ahmad");
print_r($siswa);
$trainer = ["abduh", "aghnat", "yoga"];
print_r($trainer);
?><?php
$nilai = [12, 14, 19];
// akan menampilkan 12 yang merupakan elemen array indeks ke 0
echo $nilai[0];
?><?php
$siswa = array("regi", "bobby", "ahmad");
// siswa awal sebelum ditambah
print_r($siswa);
$siswa[] = "putri";
// menampilkan siswa setelah ditambah data baru "putri"
print_r($siswa);
?><?php
$stack = array("orange", "banana");
array_push($stack, "apple", "raspberry");
print_r($stack);
?><?php
$keranjang = ["pisang", "apel", "mangga"];
// menampilkan panjang array $keranjang
echo count($keranjang);<?php
$siswa1 = [ "nama" => "abduh",
"kelas" => "laravel",
"nilai" => 70
];
print_r($siswa1);
// menambahkan key value baru ke array $siswa1
$siswa1["nama"] = "abduh";
print_r($siswa1);<?php
$trainer = array (
array("Rezky","Laravel"),
array("Abduh","Adonis"),
array("Iqbal","VueJs"),
);
echo "<pre>";
print_r($trainer);
echo "</pre>";
?>
//output
Array
(
[0] => Array
(
[0] => Rezky
[1] => Laravel
)
[1] => Array
(
[0] => Abduh
[1] => Adonis
)
[2] => Array
(
[0] => Iqbal
[1] => VueJs
)
)OOP (Object Oriented Programming) atau pemrograman berbasis objek merupakan paradigma pemrograman yang berorientasikan objek. Semua data dan fungsi di dalam paradigma ini dibungkus dalam kelas-kelas atau objek-objek.
Di dalam OOP, kita dapat memetakan persoalan-persoalan dalam program dengan memecah masalah ke dalam class-class yang lebih kecil dan simpel agar solusi yang dibuat lebih spesifik.
Setiap class dalam OOP mempunyai method atau fungsi serta property atau atribut. method adalah kemampuan dari class untuk melakukan sesuatu. sedangkan property adalah segala sesuatu yang dimiliki oleh class.
class adalah cetakan atau blueprint dari objek. Di dalam class terdapat property dan method. contohnya di bawah ini, terdapat class car yang merupakan cetakan dari objek-objek mobil. Pada gambar sebelumnya class car bisa memiliki method yaitu refuel(), getSpeed(), setSpeed(), drive() dan memiliki property fuel, maxspeed.
Contoh class
Pada contoh di atas, terdapat class Mobil yang di dalamnya terdapat method jalan() dan propery $roda.
pada penjelasan sebelumnya bahwa class merupakan blueprint atau cetakan dari objek. Untuk membuat objek dari cetakan tersebut kita harus melakukan instansiasi atau pembuatan objek. caranya adalah seperti berikut:
Pada contoh di atas dibuat sebuah object baru dengan nama $mini yang merupakan hasil instansiasi dari class Mobil. Karena $mini dihasilkan dengan cetakan mobil maka dia memiliki property dan method yang sama dengan class Mobil. Cara memanggil property dan method yaitu dengan tanda panah ->.
$this pada ClassDi dalam class kita akan sering menulis $this yang berarti merujuk kepada class itu sendiri. scope atau ruang lingkup $this adalah segala sesuatu yang ada di dalam tanda kurung kurawal { } setelah penamaan class NamaClass.
contohnya seperti berikut
pada contoh di atas, di dalam function jumlah_roda() dipanggil $this->roda yang merujuk kepada property $roda pada class Mobil
Dalam PHP, visibilitas dibagi menjadi 4 yaitu private, protected, public dan default. visibilitas digujnakan untuk mengatur hak akses terhadap property dan method pada class. Hal ini dimaksudkan agar menjamin keamanan informasi yang terdapat pada property maupun method.
property atau method dengan visibilitas private maka property atau method tersebut hanya dapat diakses dari lingkup class dimana propery atau method tersebut didefinisikan. contohnya:
bila program di atas dijalankan, maka akan muncul error PHP Fatal error: Uncaught Error: Call to private method Mobil::jalan() from context . Error tersebut muncul karena method jalan() hanya boleh diakses di dalam class Mobil dan tidak bisa diakses dari luar.
method atau property yang diberikan visibilitas protected maka method atau property tersebut dapat diakses dari lingkup class dimana propery atau method tersebut didefinisikan dan pada class turunan (inheritance) dari class tersebut.
pada contoh di atas, class MobilSport merupakan inheritance atau turunan dari class Mobil. property $roda yang dimiliki oleh class Mobil diturunkan ke class MobilSport dan tetap bisa dipakai di class MobilSport jika menggunakan visibilitas protected.
Jika property atau method diberikan visibilitas public maka method atau property tersebut dapat diakses baik dari lingkup class maupun object yang sudah diinstasiasi.
constructor pada class yaitu method atau function yang akan dipanggil pertama kali ketika class tersebut diinstansiasi menjadi object. untuk membuat constructor kita buat method dengan nama __construct(). contohnya sebagai berikut:
pada contoh di atas, property $merk pada class Mobil hanya didefinisikan tanpa diberikan nilai. Lalu pada method construct dilakukan assign nilai merk diisi dengan parameter $merk pada method construct tersebut.
Ketika object $xeniya dibuat, cara instansiasinya adalah dengan mengetik new Mobil("Xeniya") . parameter “Xeniya” pada instansiasi tersebut adalah parameter yang akan terbaca pada metode construct sehingga object $xeniya memiliki propery $merk yang bernilai “Xeniya”.
Referensi lain :
Sekolah Koding:
Web Programming UNPAS:
Database atau basis data merupakan kumpulan berbagai informasi yang disimpan secara sistematis pada komputer agar informasi tersebut dapat diolah kembali dengan mudah. Dalam pengembangan sebuah website, Database berperan penting sebagai penyimpanan dan penyedia informasi yang ditampilkan ke pengguna.
Semakin kompleks logika bisnis dan semakin banyak jumlah pengguna sebuah website maka akan membutuhkan database yang baik dalam menyimpan dan menyediakan data.
Kriteria database yang baik ditinjau dari beberapa faktor yakni:
kecepatan
akurasi
availability
terhindar dari duplikasi dan inkonsistensi data
keamanan
Database ditinjau dari sifat relasional nya terbagi menjadi dua yaitu: relational database dan non-relational database. Pada artikel ini akan dipelajari relational database SQL menggunakan mysql.
Pada relational database, tabel-tabel berhubungan satu sama lain menggunakan Primary Key (PK). Primary Key adalah nilai yang dipakai untuk mengidentifikasi suatu baris data pada database. PK bersifat unik sehingga tidak dapat ditemukan dua data dengan PK yang sama.
PK juga digunakan sebagai patokan atau reference untuk menggabung data dari dua tabel menggunakan JOIN.
Entity Relationship Diagram (ERD), yaitu sebuah model untuk menyusun database agar dapat menggambarkan data yang mempunyai relasi dengan database yang akan didesain.(1)
Tujuan pembuatan ERD adalah memvisualisasikan keterhubungan (relasi) antar tabel dan membuat cetak biru dari database yang akan dibuat.
Sebelum membahas lebih jauh tentang ERD, ada beberapa istilah umum yang harus diketahui yaitu :
Entitas adalah sebuah objek yang merepresentasikan suatu baris data pada tabel. satu entitas akan memiliki karakteristik tersendiri berdasarkan atribut-atribut yang dimiliki. Contohnya pada sebuah database toko online terdapat entitas pelanggan, profil, barang, transaksi, dan kategori
contoh entitas di dalam database toko online
Atribut adalah kolom-kolom data yang terdapat pada sebuah entitas dan berfungsi untuk mendeskripsikan karakteristik entitas tersebut. Di dalam sebuah entitas biasanya terdapat atribut kunci (primary key) yang merupakan pembeda antara satu entitas dengan entitas lainnya.
Contohnya pada entitas pelanggan terdapat atribut id_pelanggan, nama, dan email. Setiap atribut dapat kita definisikan tipe data nya.
Relasi yaitu representasi dari hubungan antar entitas. terdapat tiga jenis relasi yaitu : one to one, one to many, many to many. Pada ERD biasanya relasi digambarkan dengan garis. Setiap satu jenis relasi memiliki jenis garis yang berbeda dengan jenis relasi lainnya.
One to One
relasi one to one berarti satu entitas memiliki hubungan dengan satu entitas lainnya. Relasi ini digambarkan dengan garis seperti berikut
Contohnya adalah seorang pelanggan akan memiliki satu profil saja. Begitu pula sebaliknya satu profile hanya dimiliki oleh seorang pelanggan saja.
Pada contoh di atas, terdapat foreign key yaitu suatu nilai pada suatu entitas yang berfungsi sebagai referensi dari entitas lain ketika data dari kedua entitas tersebut digabungkan (sql JOIN). Dalam hal ini entitas pelanggan mempunyai foreign key yaitu profil_id yang nilainya diperoleh dari primary key pada entitas profil.
One To Many
Relasi One To Many yaitu ketika satu entitas memiliki hubungan dengan banyak entitas lainnya. Contohnya dalam hal ini adalah di dalam satu kategori terdapat banyak barang yang terkait dengan kategori tersebut. Sebaliknya, untuk satu barang dapat kita klasifikasikan ke satu kategori saja.
Relasi ini biasanya digambarkan dengan simbol garis seperti berikut
simbol garis one to many
pada contoh di atas, entitas barang akan memiliki foreign key yang mereferensi ke primary key pada entitas kategori.
Many To Many
Relasi Many To Many adalah ketika banyak entitas terhubung dengan banyak entitas lainnya. Contohnya adalah seorang pelanggan dapat membeli banyak barang yang berbeda jenis. Sebaliknya satu jenis barang dapat dibeli oleh banyak pelanggan yang berbeda.
Untuk merepresentasikan hubungan antar dua entitas yang memiliki relasi ini maka dibutuhkan satu entitas tambahan yang biasa disebut dengan pivot. Dalam kaitannya dengan contoh antara entitas pelanggan dan barang maka entitas penghubungnya yaitu transaksi.
Pada entitas transaksi terdapat dua foreign key yaitu pelanggan_id dan barang_id yang terhubung masing-masing ke primary key pada entitas pelanggan dan entitas barang.
Pada dokumentasi ini akan dibahas materi lanjutan PHP di antaranya: operator, boolean, conditional, function, dan looping.
Boolean adalah tipe data untuk pengecekan nilai suatu kebenaran. nilai dari boolean ada dua yaitu true dan false. Di PHP, nilai true sering dinyatakan sebagai integer dengan nilai 1, sedangkan nilai false dinyatakan sebagai integer dengan nilai 0.
Operator adalah karakter khusus yang merepresentasikan sebuah tindakan. Operator terbagi ke dalam beberapa jenis:
operator yang melibatkan operasi matematika seperti tambah, kurang, kali, bagi, dan sisa bagi.
tambah (+)
kurang (-)
kali (*)
Operator assignment merupakan operator yang berguna untuk memasukkan nilai kedalam suatu variable. Dan jangan lupa, setiap baris code harus di tutup dengan ‘;’ atau script menjadi error.
Operator yang membandingkan suatu nilai dengan nilai yang lain. Hasil dari perbandingan ini akan dikembalikan dalam tipe data boolean true atau false. Di PHP, true sering juga dinyatakan sebagai integer dengan nilai 1 sedangkan false dinyatakan sebagai integer dengan nilai 0.
Equal Operator ( == )
membandingkan kedua nilai apakah bernilai sama atau tidak.
membandingkan kedua nilai apakah bernilai tidak sama.
Strict Equal ( === )
membandingkan kesamaan kedua nilai dan tipe data nya.
kurang dari, lebih dari ( < , > , <= , >= )
Operator yang mengkombinasikan dua nilai kebenaran . Terdapat operator dan (&&) dan atau (||). nilai kebenaran dari kondisional ini mengikuti .
Kondisional atau percabangan merupakan logika dasar untuk membuat sebuah program. Dengan kondisional, kita dapat mengarahkan suatu program dengan pengecekan suatu kondisi, oleh karena itu kondisional sering disebut juga control flow.
Sintaksnya adalah sebagai berikut:
Contoh nya seperti ini:
ternary operator untuk conditional
salah satu cara singkat untuk melakukan kondisional adalah dengan ternary operator. Cara ini lebih sederhana dan dapat ditulis dalam satu baris saja.
Sintaks nya adalah seperti berikut
Statemen1 akan diisi jika Kondisi bernilai benar atau true, Sedangkan Statemen2 akan diisi jika Kondisi bernilai salah atau false.
Contohnya sebagai berikut:
Function atau Fungsi adalah sebuah blok kode yang dibuat untuk menyederhanakan pemrograman agar proses-proses logika yang sering diperlukan dapat dipanggil kembali dengan hanya memanggil nama fungsi tersebut.
Sintaks untuk deklarasi function seperti berikut :
Contohnya sebuah function untuk mengeprint <br>
Sebuah function dapat menerima parameter sebagai input yang akan diolah sebelum memberikan ouput.
return dalam function
Sebuah function biasanya memberikan nilai kembalian dari proses yang dilakukan agar dapat ditampung ke dalam variabel atau agar dapat dipanggil dalam sintaks function lainnya secara fleksibel.
contohnya sebagai berikut
looping atau perulangan adalah melakukan suatu proses secara berulang sampai dengan suatu kondisi tertentu. Terdapat beberapa cara di PHP untuk melakukan looping yaitu for, while, do while.
for loop
sintaks for seperti berikut:
contohnya :
While Loop
sintaks while seperti berikut:
while (Kondisi) {
pertanyaan yang akan di proses;
}
contohnya :
Do While Loop
sintaks while do seperti berikut:
contohnya
Foreach Loop
sintaks foreach do seperti berikut:
contohnya
contoh lainnya:
Referensi lain :
Sekolah koding :
<?php
class Mobil
{
public $roda = 4;
public function jalan()
{
echo "Mobil berjalan";
}
}
?>$mini = new Mobil();<?php
$mini = new Mobil();
$mini->jalan(); // menampilkan echo 'Mobil berjalan'
echo $mini->roda; // 4
?>class Mobil {
protected $roda = 4;
public function jumlah_roda() {
echo $this->roda;
}
}
$mini = new Mobil;
$mini->jumlah_roda(); // 4 <?php
class Mobil
{
private $roda = 4;
private function jalan()
{
echo 'Mobil berjalan';
}
}
$avanza = new Mobil();
echo $avanza->jalan();
echo PHP_EOL;
echo $avanza->roda;
echo PHP_EOL;?><?php
class Mobil
{
protected $roda = 4;
}
class MobilSport extends Mobil
{
protected $maxSpeed;
}
$ferrari = new MobilSport;
echo $ferrari->roda ; // 4 ?><?php
class Mobil
{
private $roda = 4;
public function jumlahRoda()
{
echo $this->roda;
}
}
$kijang = new Mobil();
$kijang->jumlahRoda(); // menampilkan 4<?php
class Mobil {
protected $roda= 4;
public $merk;
public function __construct($merk)
{
$this->merk= $merk;
}
}
?>
$xeniya = new Mobil("Xeniya");
echo $xeniya->merk; // Xeniyabagi (/)
modulus atau sisa bagi (%)
<?php
// contoh operator assignment
$panjang = 10; // contoh assignment
$lebar = 8; // contoh assignment
$luas = $panjang * $lebar ; // contoh assignment juga
// tanda '=' mewakili proses assignment,
// ada beberapa tanda lagi yang dapat
// melakukan assignment,
// assignment penjumlahan diwakili tanda '+=' contohnya
$tamabahdua=2;$tambahdua += 2;
echo $tambahdua."<br>" ;
// hasilnya 2
// hal ini sama dengan pernyatan :
// $tambahdua = $tambahdua + 2;
// assignment pengurangan diwakili tanda '-=' contohnya
$clip = 22;
$clip -= 2; // sama dengan $clip = $clip - 2;
echo $clip;
?><?php
$angka = 10;
echo $angka == 10; // true atau 1
var_dump($angka == 9); // bool(false) atau 0
?><?php
$sifat= "rajin";
var_dump($sifat != "malas"); // bool(true)
echo $sifat <> "bandel"; // 1
?><?php
$angka = 10;
var_dump($angka === "10");// bool(false)
var_dump($angka === 10);// bool(true)
?>
<?php
$angka = 17;
var_dump($angka < 20); // bool(true)
var_dump($angka <= 17); // bool(true)
var_dump($angka >= 15); // bool(true)
var_dump($angka > 12); // bool(true)
?><?php
var_dump(true && true); // bool(true)
var_dump(true && false);// bool(false)
var_dump(false && true);// bool(false)
var_dump(false && false);// bool(false)
var_dump(true || true); // bool(true)
var_dump(true || false); // bool(true)
var_dump(false || true); // bool(true)
var_dump(false || false); // bool(false)
?>if (<kondisi benar>) {
// blok kode ini akan dieksekusi jika kondisi benar
} else {
// blok kode ini akan dieksekusi jika kondisi salah
}<?php
$hari_ini = "senin";
if($hari_ini == "senin") {
echo "I Love Monday";
} else {
echo "Ini bukan hari senin"
}
?>(Kondisi) ? (Statement1) : (Statemen2);<?php
$materi= "PHP";
echo ($materi == "PHP") ?
"Hari ini belajar PHP" :
"Hari ini bukan materi PHP";
?>function <nama_function> (<parameter>) {
<blok kode yang dijalankan>
}// Deklarasi Function
function printBr() {
echo "<br>";
}
// Menjalankan function atau pemanggilan function
printBr() function kenalkan($nama) {
echo "kenalkan nama saya $nama";
}
// panggil function kenalkan
kenalkan("abduh");function buat_nama_kapital($nama) {
return ucwords($nama);
}
$nama_lengkap = buat_nama_kapital("muhamad abduh");
echo $nama_lengkap; // "Muhamad Abduh"
// memanggil function di dalam function lain
function perkenalan($nama, $asal) {
echo "perkenalkan nama saya buat_nama_kapital($nama), asal saya dari $asal";
}
perkenalan("muhamad abduh", "bandung");for(nilai awal; batas nilai; operator increment/decrement)
{
pernyataan yang akan di proses
}<?php
for($i = 1; $i < 5 ; $i++ ){
echo "ini adalah looping ke $i <br>";
}
?><?php
$x = 1;
while($x <= 5) {
echo "$x - satu Sampai lima<br>";
$x++;
}
?> do {
pertanyaan yang akan diproses;
} while (kondisi);<?php
$x = 1;
do {
echo "$x - satu Sampai lima<br>";;
$x++;
} while ($x <= 5);
?>foreach ($array as $value) {
pertanyaan yang akan diproses;
}<?php
$animals = array("cat", "dog", "snake", "ant", "lion");
foreach ($animals as $animal) {
echo "$animal <br>";
}
?> <?php
$age = array("Rezky"=>"25", "Abduh"=>"29", "Iqbal"=>"33");
foreach($age as $x => $val) {
echo "$x = $val<br>";
}
?>
Sisi tampilan depan (frontend) pada web merupakan bagian yang penting dalam menyajikan informasi kepada pengguna. Website yang baik salah satunya adalah karena mengedepankan nilai estetika pada sisi tampilan depannya. Namun, bagi para pengembang tentunya sangat penting membuat tampilan depan yang mudah dikembangkan kembali dan desain yang konsisten.
Permasalahan pada pengembangan sisi frontend contoh kasusnya adalah jika kita menginginkan banyak halaman HTML yang memiliki layout yang serupa dan hanya unik pada bagian kontennya saja maka kita tidak usah menulis ulang bagian-bagian HTML yang layoutnya statis (tidak berubah).
Contohnya di bawah ini, terdapat tiga halaman yaitu index, create dan show yang semuanya memiliki layout yang sama yaitu dibuka dengan tag <html>, memiliki bagian <head> <navbar> dan <sidebar> yang layoutnya sama persis. Hal yang unik dari masing-masing halaman adalah konten yang ada di dalamnya yaitu bagian table di halaman index, bagian form di halaman create, dan bagian card untuk halaman show.
Daripada menulis ulang kode untuk bagian yang sama seperti <head>, <navbar>, <sidebar>, lebih baik jika kita buat sebuah template utama yang di dalam nya terdapat layout yang dapat dipakai kembali oleh halaman-halaman lainnya sehingga meminimalisasi perulangan.
Contoh di atas kita buat sebuah template utama atau parent template dengan nama master.blade.php dan kita akan buat halaman anak atau children dengan nama index.blade.php . Di dalam master.blade.php tersebut kita menulis kode HTML dari tag pembuka <html> sampai akhir, juga terdapat bagian navbar dan sidebar yang akan bisa dipakai di halaman lain.
Bagian penting dari parent template yaitu kita sediakan satu tempat atau slot untuk dapat diisi oleh halaman children. cara memberikan slot nya adalah dengan menggunakan directive atau sintaks di Blade Laravel dengan nama @yield di dalam function yield tersebut kita masukkan parameter berupa string yaitu nama dari slot yang akan dibuat. Kali ini kita namai slot tersebut dengan 'content' sehingga menjadi @yield('content').
Sama seperti pada materi OOP untuk membuat class child dari sebuah class lain yaitu menggunakan extends, maka pada halaman index.blade.php kita tinggal gunakan sintaks @extends('master') agar halaman index mendapatkan seluruh layout dari master template dan mendapatkan slot 'content' untuk bisa diisi.
Untuk mengisi slot 'content' pada halaman index.blade.php, kita gunakan sintaks @section('content') . Namun sintaks section memiliki sintaks penutupnya yaitu @endsection .
Di antara pembuka @section('content') dan penutup @endsection kita bisa sisipkan konten dari halaman index, misalkan kita isi dengan <table>.
Latihan templating:
Materi pembahasan kali ini kita akan berkenalan dengan Laravel. Laravel adalah sebuah framework berbasis PHP untuk membangun web. Sebelum kita mulai mencoba Laravel kita harus menginstall terlebih dahulu composer .
Composer adalah dependency manager PHP atau software untuk mengatur project-project yang menggunakan PHP. Untuk menginstall composer di Windows, download terlebih dahulu dari halaman download composer. Selanjutnya install dengan mengikuti petunjuk install dari composer-setup.exe.
Bagi pengguna Mac atau Linux silakan ikuti petunjuk penginstallan menggunakan command-line
petunjuk penginstallan Composer di Linux atau Mac
Untuk memastikan jika composer sudah terpasang atau belum silakan buka terminal/command prompt lalu ketikkan perintah composer -v jika tidak ada error maka terminal akan memberikan jawaban seperti berikut
mengecek versi composer (versi composer anda mungkin berbeda)
Petunjuk pembuatan project web Laravel dapat dibaca selengkapnya di (Laravel Versi 6 yang akan kita gunakan)
Setelah menginstall composer, kita dapat langsung membuat project Laravel baru di dalam folder htdocs atau di tempat lain di komputer kita. Untuk membuat project Laravel dengan nama project “blog” kita gunakan perintah composer seperti berikut:
jika kita ingin memberikan nama yang lain untuk project yang ingin dibuat maka kita sesuaikan untuk mengganti namanya pada bagian “blog”. lalu tekan enter untuk mengeksekusi perintahnya.
Composer akan mendownload semua file dan folder yang dibutuhkan untuk project Laravel.
setelah selesai mendownload maka sudah terdapat folder baru dengan nama “blog” atau nama yang sesuai dengan yang kita berikan di perintah composer create-project .
Jika kita masuk ke dalam folder “blog” tersebut dapat kita lihat bahwa di dalam foldernya sudah terdapat banyak file dan folder.
Pada folder “blog”, kita dapat jalankan perintah berikut pada terminal :
maka terminal akan memberikan pesan seperti berikut:
Dalam pesan tersebut kita diberitahu bahwa kita sudah memiliki server development lokal yaitu di alamat http://127.0.0.1:8000 atau nama lainnya adalah http://localhost:8000. Buka browser dengan mengetikkan alamat tersebut maka akan tampil halaman awal Laravel seperti berikut:
halaman awal Laravel di alamat http://localhost:8000
Route adalah tempat menyimpan alamat-alamat url pada website yang sedang kita kembangkan. Sesuai dengan namanya, route berarti juga rute atau jalur yang tersedia untuk menjelajahi website kita.
Untuk mencari tahu route di project Laravel kita, buka project “blog” yang sudah dibuat di text editor. pada folder routes terdapat file dengan nama web.php. Di dalam file tersebut sudah tersedia satu route yaitu route dengan url '/'.
route '/' yang sudah tersedia di web.php merupakan route yang dapat dilihat di browser dengan alamat url localhost:8000/
Route '/' tersebut adalah route yang mewakili alamat url localhost:8000/ yang berarti alamat url route pada browser adalah kombinasi alamat localhost:8000 ditambah url '/'. Untuk selanjutnya kita dapat mendefinisikan route baru dengan pola yang serupa.
Untuk mendefinisikan route baru, rumusnya seperti berikut:
Route::<http-method>('<url>', <function callback>)
bagian yang ditandai dengan '<>' adalah template yang dapat kita isi sesuai keinginan kita.
http-method adalah yang kita definisikan untuk route tersebut. Berbeda metode maka berbeda juga tujuan atau peruntukkan dari route tersebut.
url atau $uri adalah alamat dari route yang ditulis dalam string. kita dapat definisikan url yang sesuai untuk mencoba membuat route baru.
$callback atau function callback adalah sebuah function yang akan dijalankan ketika suatu route dipanggil, function tersebut dapat berupa Closure atau metode pada Controller (akan dibahas di bagian selanjutnya).
Di dalam function callback kita dapat menulis sintaks apa saja dalam PHP seperti echo atau deklarasi variabel dan lain-lain. Di akhir function selalu kita berikan kembalian dengan menuliskan return. Jika kita arahkan browser menuju route '/hello-laravel' maka akan menghasilkan tampilan seperti berikut ini
Membuat Controller didalam laravel dengan terminal/cmd
untuk default penyimpanan file controller biasanya berada pada file app/http/controller
Cara menggunakan Controller di route web
home berfungsi sebagai url
pegawaiController adalah nama controller yang telah dibuat
index merupakan method/function yang terdapat di pegawaiController.php
Referensi Lain WPU:
php artisan serve
php artisan make:controller nama_controllernya
contoh:
php artisan make:controller PegawaiController
composer global require laravel/installer
laravel new blog
cd blog
php artisan serve
Koneksikan project laravel dengan database dengan mengatur .env
Buat controller nya php artisan make:controller nama_controllernya
Web Route
4. buat databasenya 5. buat table menggunakan migration nama tabel : post
Create Data
PostController.php
public function create berfungsi menreturn link menuju resources/views/post/create.blade.php public function store(Request $request) berfungsi mengambil request inputan attibute name pada resources/views/post/create.blade.php
$request->validate([ ‘title’ => ‘required|unique:post’, ‘body’ => ‘required’, ]);
berfungsi melakukan validasi jika title kosong atau title tidak boleh sama dengan data yang telah terinput maka akan menampilkan error dan jika body inputan kosong maka akan menampilkan error
$query = DB::table(‘post’)->insert([ “title” => $request[“title”], “body” => $request[“body”] ]); return redirect(‘/posts’);
berfungsi melakukan insert data pada kolom title dan body berdasarkan request inputan attribute name ‘title’ dan ‘body’ seperti pada sintax sql INSERT INTO post (title, body) VALUES ($request[‘title’], $request[‘body’]); setelah proses insert berhasil maka akan menuju ke URL /post
resources/views/post/create.blade.php
@error(‘body’) <div class=”alert alert-danger”> {{ $message }} </div> @enderror
berfungsi menapilkan error validasinya pada @error body
Tampil Data
PostController.php
$post = DB::table(‘post’)->get(); berfungsi mengambil semua ada pada table post fungsi seperti pada sintax sql “SELECT * FROM post” return view(‘post.index’, compact(‘post’)); berfungsi menreturn menuju resources/views/post/index.blade.php beserta melempar variabel post
resources/views/post/index.blade.php
@forelse adalah fungsi pada blade yang berfungsi melakukan loop foreach dan jika data nya kosong maka akan mereturn @empty
Tampil data berdasarakan id
PostController.php
$post = DB::table(‘post’)->where(‘id’, $id)->first(); Berfungsi memanpilkan data berdasarkan $id yang terdapat pada parameter public funtion show($id) sintax sqlnya SELECT * FROM post WHERE id = $id
resources/views/post/show.blade.php
PostController.php
$post = DB::table(‘post’)->where(‘id’, $id)->first(); return view(‘post.edit’, compact(‘post’)); $post berfungsi membuat variabel yang menampung fungsi mengambil semua data berdasarkan paramenter variabel di pada public function edit($id) sintax sqlnya SELECT * FROM post WHERE id = $id dan menreturn menuju resources/views/post/edit.blade.php beserta melempar variabel post
$query = DB::table(‘post’) ->where(‘id’, $id) ->update([ ‘title’ => $request[“title”], ‘body’ => $request[“body”] ]); return redirect(‘/posts’); berfungsi melakukan update pada inputan attribute name title dan body berdasarkan id pada kolom database sintax sql UPDATE post SET title = $request[‘title], body= $request[‘body’] WHERE id = $id
resources/views/post/edit.blade.php
PostController.php
$query = DB::table(‘post’)->where(‘id’, $id)->delete(); berfungsi menghapus data pada table post berdasarkan $id sintax sqlnya DELETE FROM post WHERE id = $id
/post/{post_id}/edit
GET
PostController@edit
menampilkan form untuk edit pertanyaan dengan id tertentu
/post/{post_id}
PUT
PostController@update
menyimpan perubahan data pertanyaan (update) untuk id tertentu
/post/{post_id}
DELETE
PostController@destroy
menghapus pertanyaand dengan id tertentu
/post
GET
PostController@index
menampilkan list data pertanyaan-pertanyaan (boleh menggunakan table html atau bootstrap card)
/post/create
GET
PostController@create
menampilkan form untuk membuat pertanyaan baru
/post
POST
PostController@store
menyimpan data baru ke tabel pertanyaan
/post/{post_id}
GET
PostController@show
Title
string
–
Body
text
–
menampilkan detail pertanyaan dengan id tertentu
public function create()
{
return view('post.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required|unique:post',
'body' => 'required',
]);
$query = DB::table('post')->insert([
"title" => $request["title"],
"body" => $request["body"]
]);
return redirect('/posts');
}<div> <h2>Tambah Data</h2>
<form action="/posts" method="POST">
@csrf
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" id="title" placeholder="Masukkan Title">
@error('title')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="body">body</label>
<input type="text" class="form-control" name="body" id="body" placeholder="Masukkan Body">
@error('body')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Tambah</button>
</form>
</div> public function index()
{
$post = DB::table('post')->get();
return view('post.index', compact('post'));
}<a href="/posts/create" class="btn btn-primary">Tambah</a>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Body</th>
<th scope="col" style="display: inline">Actions</th>
</tr>
</thead>
<tbody>
@forelse ($post as $key=>$value)
<tr>
<td>{{$key + 1}}</th>
<td>{{$value->title}}</td>
<td>{{$value->body}}</td>
<td>
<a href="/posts/{{$value->id}}" class="btn btn-info">Show</a>
<a href="/posts/{{$value->id}}/edit" class="btn btn-primary">Edit</a>
<form action="/posts/{{$value->id}}" method="POST">
@csrf
@method('DELETE')
<input type="submit" class="btn btn-danger my-1" value="Delete">
</form>
</td>
</tr>
@empty
<tr colspan="3">
<td>No data</td>
</tr>
@endforelse
</tbody>
</table>public function show($id)
{
$post = DB::table('post')->where('id', $id)->first();
return view('post.show', compact('post'));
}<h2>Show Post {{$post->id}}</h2>
<h4>{{$post->title}}</h4>
<p>{{$post->body}}</p>public function edit($id)
{
$post = DB::table('post')->where('id', $id)->first();
return view('post.edit', compact('post'));
}
public function update($id, Request $request)
{
$request->validate([
'title' => 'required|unique:post',
'body' => 'required',
]);
$query = DB::table('post')
->where('id', $id)
->update([
'title' => $request["title"],
'body' => $request["body"]
]);
return redirect('/posts');
}<div>
<h2>Edit Post {{$post->id}}</h2>
<form action="/posts/{{$post->id}}" method="POST">
@csrf
@method('PUT')
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" value="{{$post->title}}" id="title" placeholder="Masukkan Title">
@error('title')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="body">body</label>
<input type="text" class="form-control" name="body" value="{{$post->body}}" id="body" placeholder="Masukkan Body">
@error('body')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Edit</button>
</form>
</div>public function destroy($id)
{
$query = DB::table('post')->where('id', $id)->delete();
return redirect('/posts');
}app/User.php
berfungsi membuat fungsi yang bernama profile yang memiliki method hasOne yang berfungsi membuat relasi user memiliki setiap satu user memiliki satu profile
app/Profile.php
berfungsi membuat fungsi yang bernama user yang memiliki method belongsTo yang berfungsi membuat relasi profile dimiliki oleh user
routes/web.php
Controller
App/controller/UserController.php
View
resource/views/user.blade.php
<td>{{$value->profile->name}} berfungsi menampilkan data name dari table profile berdasarkan method profile pada model App/user/php
erd one to many
app/Kategori.php
berfungsi membuat fungsi yang bernama buku yang memiliki method hasMany yang berfungsi membuat relasi kategori memiliki banyak buku
app/Buku.php
routes/web.php
app/controller/KategoriController.php
resource/views/kategori.blade.php
Relasi Many to Many
App/Transaksi.php
public function pelanggan() { return $this->belongsToMany(‘App\Pelanggan’); }
berfungsi membuat fungsi yang bernama pelanggan yang memiliki method belongsToMany yang berfungsi membuat relasi Transaksi dimiliki oleh banyak Pelanggan
Pengetian Migration di laravel
migrate adalah fitur pada laravel yang berfungsi mengelolah database
mengkonesikan laravel dengan database
cara mengkoneksikan laravel dan database adalah dengan cara mengatur file .env
Membuat migration
cara membuat migration dapat dibuat di terminal/cmd
php artisan make:migration create_profile_tablejika selesai maka filenya akan berbentuk 2020_10_09_0930_create_profile_table yang biasa terletak pada folder database/migrations nb: 2020_10_0930 merupakan tanggal dan waktu pembuatan migration
Migration
Screma::create(‘profile’,……….); berfungsi membuat table dengan nama users $table->bigIncrement(‘id’); berfungsi membuat kolom dengan nama ‘id’ dan bertipe data bigint dan ter auto increment & primary key $table->string(’nama_lengkap’); berfungsi membuat kolom dengan nama ’nama_lengkap’ yang pertipe data string $table->timestamps(); berfungsi membuat kolom created_at yang bertipe data timestaps yang berfungsi mencatat waktu dan tanggal saat pembuatan data dan updated_at berfungsi mencatat waktu dan tanggal saat data di update
Tipe data Migration
Membuat foreign key di migrate
$table->unsignedBigInteger(‘user_id’) berfungsi membuat kolom dengan nama user_id dengan type data unsigned bigint $table->foreign(‘user_id_id’)->references(‘id’)->on(‘users’); berfungsi membuat kolom role_id menjadi foreign key yang berefences ke kolom id pada tabel users
NB: sebelum membuat references ke table sebaiknya buat dulu tabel yang dituju
Cara menjalankan migrate
cara menjalankan migrate dapat dijalankan di cmd/terminal
class User extends model
{
public function profile(){
return $this->hasOne('App\Profile');
}
}class profile extends model
{
public function user(){
return $this->belongsTo('App\User');
}
}Route::get('user','UserController@index');....
use App\User;
class UserController extends Controller
{
public function index(){
$user=User::all();
return view('user', compact('user'));
}
}...
<h3>One to one</h3>
<table>
<thead>
<tr>
<th>username</th>
<th>email</th>
<th>nama</th>
</tr>
<tbody>
@foreach($user as $value)
<tr>
<td>{{$value->username}}</td>
<td>{{$value->email}}</td>
<td>{{$value->profile->name}}</td>
</tr>
@endforeach
<tbody>
</thead>
</table>
...class Kategori extends Model{
public function buku()
{
return $this->hasMany('App\Buku');
}
}class Buku extends Model{
public function kategori()
{
return $this->belongsTo('App\Kategori');
}
}Route::get('kategori','KategoriController@index');...
use App\Kategori;
class KategoriController extends Controller{
public function index()
{
$kategori=Kategori::all();
return view('kategori',compact('kategori'));
}
}...
<h3>One to Many</h3>
<table>
<thead>
<tr>
<th>kategori</th>
<th>title</th>
</tr>
<tbody>
@foreach($kategori as $value)
<tr>
<td>{{$value->name}}</td>
<td>
@foreach($value->buku as $b)
{{$b->title}}
@endforeach
</td>
</tr>
@endforeach
<tbody>
</thead>
</table>
...class Transaksi extends Model{
public function pelanggan()
{
return $this->belongsToMany('App\Pelanggan');
}
public function barang()
{
return $this->belongsToMany('App\Barang');
}
}$table->unsignedBigInteger('');
$table->foreign('role_id')->references('id')->on('users');php artisan migrate
1.Koneksikan project laravel dengan database dengan mengatur .env
2. Buat controller nya
3..buat routes nya
/post
GET
PostController@index
4. buat databasenya 5. buat table menggunakan migration
6. buat modelnya
Post.php
protect $table = “post”; berfungsi mengarahkan model ke table post di database protect $fillable berfungsi Kolom apa saja yang akan di manipulasi
PostController.php
use App\Post; berfungsi import model yang berada si direktori folder app Post::create([ ‘title’ => $request->nama, ‘body’ => $request->alamat ]);
berfungsi melakukan pengimputan data ke database fitur eloquent dengan method create()
resources/views/post/create.blade.php
PostController.php
Post::all(); berfungsi mengambil semua data di database fitur eloquent dengan method all()
resources/views/post/index.blade.php
PostController.php
Post::find($id); berfungsi mengambil semua data berdasarkan variabel id $id di database fitur eloquent dengan method find()
resources/views/post/show.blade.php
$post = post::find($id); $post->title = $request->title; $post->body = $request->body; $post->update(); berfungsi mengubah data bedasarkan method find($id) ke database fitur eloquent dengan method update()
resources/views/post/edit.blade.php
PostController.php
Berfungsi menghapus data berdasarkan method find($id) ke database fitur eloquent dengan method delete()
php artisan make:controller PostController --resourceRoute::resource('post', 'PostController');menampilkan list data pertanyaan-pertanyaan (boleh menggunakan table html atau bootstrap card)
/post/create
GET
PostController@create
menampilkan form untuk membuat pertanyaan baru
/post
POST
PostController@store
menyimpan data baru ke tabel pertanyaan
/post/{post_id}
GET
PostController@show
menampilkan detail pertanyaan dengan id tertentu
/post/{post_id}/edit
GET
PostController@edit
menampilkan form untuk edit pertanyaan dengan id tertentu
/post/{post_id}
PUT
PostController@update
menyimpan perubahan data pertanyaan (update) untuk id tertentu
/post/{post_id}
DELETE
PostController@destroy
menghapus pertanyaand dengan id tertentu
Id
bigIncrements
pk auto_increment
Title
string
–
Body
text
–
php artisan make:model Postclass post extends model
{
protected $table = "post";
protected $fillable = ["title", "body"];
}<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class PostController extends Controller
{
public function create()
{
return view('post.create');
}
public function store(Request $request)
{
$this->validate($request,[
'title' => 'required',
'body' => 'required'
]);
Post::create([
'title' => $request->title,
'body' => $request->body
]);
return redirect('/post');
} <h2>Tambah Data</h2>
<form action="/posts" method="POST">
@csrf
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" id="title" placeholder="Masukkan Title">
@error('title')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="body">body</label>
<input type="text" class="form-control" name="body" id="body" placeholder="Masukkan Body">
@error('body')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Tambah</button>
</form>public function index()
{
$post = Post::all();
return view('post.index', compact('post'));
}<a href="/posts/create" class="btn btn-primary mb-3">Tambah</a>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Title</th>
<th scope="col">Body</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
@forelse ($post as $key=>$value)
<tr>
<td>{{$key + 1}}</th>
<td>{{$value->title}}</td>
<td>{{$value->body}}</td>
<td>
<a href="/posts/{{$value->id}}" class="btn btn-info">Show</a>
<a href="/posts/{{$value->id}}/edit" class="btn btn-primary">Edit</a>
<form action="/posts/{{$value->id}}" method="POST">
@csrf
@method('DELETE')
<input type="submit" class="btn btn-danger my-1" value="Delete">
</form>
</td>
</tr>
@empty
<tr colspan="3">
<td>No data</td>
</tr>
@endforelse
</tbody>
</table>public function show($id)
{
$post = Post::find($id);
return view('post.show', compact('post'));
}<h2>Show Post {{$post->id}}</h2>
<h4>{{$post->title}}</h4>
<p>{{$post->body}}</p>Update Datapublic function edit($id)
{
$post = Post::find($id);
return view('post.edit', compact('post'));
}
public function update($id, Request $request)
{
$request->validate([
'title' => 'required|unique:post',
'body' => 'required',
]);
$post = post::find($id);
$post->title = $request->title;
$post->body = $request->body;
$post->update();
return redirect('/post');
}<div>
<h2>Edit Post {{$post->id}}</h2>
<form action="/posts/{{$post->id}}" method="POST">
@csrf
@method('PUT')
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" value="{{$post->title}}" id="title" placeholder="Masukkan Title">
@error('title')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group">
<label for="body">body</label>
<input type="text" class="form-control" name="body" value="{{$post->body}}" id="body" placeholder="Masukkan Body">
@error('body')
<div class="alert alert-danger">
{{ $message }}
</div>
@enderror
</div>
<button type="submit" class="btn btn-primary">Edit</button>
</form>
</div>public function destroy($id)
{
$post = Post::find($id);
$post->delete();
return redirect('/post');
}$post = Post::find($id);$post->delete();Untuk deploy aplikasi laravel di Heroku, kita memerlukan beberapa tools seperti berikut ini,
Buat Akun Gratis Heroku. : https://signup.heroku.com/login
Unduh/Instal Heroku CLI. :
Siapkan aplikasi Laravel.
Minta repo git diinisialisasi secara lokal.
Setelah kita menginstal CLI, kita bisa login ke Heroku melalui CLI. Untuk melakukannya, kita akan menggunakan perintah login heroku di terminal kita. Browser Anda akan terbuka dan Anda akan diarahkan ke halaman login di mana Anda dapat memasukkan kredensial Anda. Jika semuanya berhasil maka Anda masuk dan sekarang Anda dapat menggunakan Heroku CLI.
Heroku Login CLIHeroku Login PromptLogged in Status
Di dalam folder Laravel Root, buat file bernama Procfile.
Tulis baris berikut di dalam Procfile
Kita dapat membuat aplikasi Heroku dengan dua cara: melalui dashboard Heroku atau melalui Heroku CLI. Untuk membuat aplikasi melalui dasbor Heroku, masuk ke akun Heroku Anda dan buat aplikasi baru.
Dengan itu, Anda memiliki aplikasi Heroku yang dibuat.
Untuk membuat aplikasi melalui Heroku CLI, kita akan menggunakan perintah heroku create. Saat menggunakan perintah ini, kita harus memberikan nama aplikasi. Jika tidak, Heroku akan menghasilkan nama dan URL acak. Dengan menggunakan perintah heroku create app-name.
Anda dapat mengetik git remote -v dan memeriksa apakah aplikasi Laravel lokal kami terhubung ke repo git Heroku.
Setelah membuat aplikasi Heroku, sekarang kita dapat memasukkan kode kita ke Heroku. Untuk push kode jalankan perintah, git push heroku main. Setelah selesai, sekarang kita dapat memeriksa apakah aplikasi kita terlihat di dasbor Heroku. Dengan itu, aplikasi dikirim ke Heroku. Klik pada Tombol "Buka Aplikasi".
Setelah di klik “Open App”, kami disajikan dengan halaman 500 Server Error.
ni adalah hal yang baik dan hal yang buruk. Itu bagus karena menunjukkan aplikasi kita berhasil di-deploy ke Heroku dan itu buruk karena kita tidak dapat berinteraksi dengan aplikasi tersebut. Untuk men-debug masalah ini, kita dapat memeriksa log di Dasbor Heroku untuk melihat apa yang salah.
Ternyata kami belum menambahkan variabel konfigurasi lingkungan yang diperlukan agar aplikasi berfungsi. Variabel-variabel ini ada di file .env di aplikasi kita. Untuk menambahkan kredensial ini, kita dapat mengakses pengaturan dasbor Heroku dan menambahkan variabel APP_DEBUG dan menyetelnya ke true. Ini akan memungkinkan kita untuk melihat apa kesalahannya. Untuk melakukannya, kita akan menuju ke tab pengaturan dan mengatur variabel di config vars.
Setelah kami menambahkan variabel dan memuat ulang halaman, kami dapat dengan jelas melihat apa kesalahannya.
Dari error tersebut, kita dapat melihat bahwa kita belum menambahkan kunci enkripsi yang dibutuhkan oleh Laravel. Kita dapat menambahkannya dengan menyalin kunci enkripsi di aplikasi Laravel lokal kita dan menambahkannya ke variabel env di Heroku.
Jika sekarang kita me-refresh halaman, kita dapat melihat aplikasi kita sekarang aktif dan berjalan.
Kita dapat menambahkan variabel lain dengan dua cara. Cara pertama adalah dengan menambahkan konfigurasi melalui dashboard. Buka pengaturan dan scroll ke opsi Reveal Config Vars. Dari sana kita dapat menambahkan konfigurasi.
Cara kedua untuk menambahkan variabel lingkungan adalah melalui Heroku CLI. Kita akan menggunakan perintah heroku config:add key=value. Sebagai contoh, kita dapat menambahkan konfigurasi Laravel lainnya menggunakan perintah heroku config:add APP_ENV=production, heroku config:add APP_NAME=heroku-laravel dan seterusnya.
Setelah kami menambahkan semua konfigurasi, kami siap melakukannya.
Persyaratan umum untuk setiap aplikasi adalah memiliki database. Kami dapat menghubungkan aplikasi kami yang baru digunakan ke database. Heroku menyediakan beberapa database seperti MySQL, MongoDB, PostgreSQL antara lain. Secara default, Heroku merekomendasikan PostgreSQL dan mudah untuk menambahkan dan terhubung dengan aplikasi kita. Mereka juga menyediakan paket gratis di database yang juga cukup mengagumkan.
Untuk menambahkan database, kami akan menambahkannya sebagai add-on ke aplikasi kami.
Setelah kita menambahkan add-on PostgreSQL, kita perlu menghubungkannya ke aplikasi kita. Untungnya, kita dapat menggunakan perintah heroku pg:credentials:url untuk melihat kredensial. Kemudian kita perlu mengatur DB_CONNECTION yang benar ke pgsql untuk menginstruksikan Laravel menggunakan driver database PostgreSQL untuk aplikasi kita. Kami dapat menambahkan semua kredensial basis data lainnya ke aplikasi kami.
Setelah koneksi database selesai, kita dapat melakukan migrasi dan seed database kita. Kita dapat menggunakan perintah run heroku di mesin lokal kita untuk menjalankan perintah artisan dari jarak jauh di platform heroku. Untuk memigrasi database kita, kita bisa menggunakan perintah heroku run php artisan migration --seed.
Dengan itu, database kami dimigrasikan dan diunggulkan dan sekarang siap digunakan. Kita dapat menjalankan perintah artisan lain dengan cara yang sama menggunakan perintah run heroku. Misalnya, kita dapat menjalankan perintah heroku run php artisan cache:clear untuk membangun kembali cache aplikasi kita.
Itu cukup banyak. Kami telah menerapkan aplikasi Laravel kami ke Heroku dalam hitungan menit. Anda telah mempelajari cara memindahkan aplikasi dari pengembangan ke produksi melalui Heroku. Ada cara lain untuk menyebarkan aplikasi Laravel seperti menggunakan aplikasi Laravel di Server Ubuntu dengan server Apache antara lain. Saya harap artikel ini bermanfaat dalam membantu Anda menyebarkan aplikasi Anda ke Heroku. Jika Anda memiliki pertanyaan, jangan ragu untuk menanyakannya di bagian komentar di bawah.
1. Install node js LTS : https://nodejs.org/en/ 2. Berfungsi untuk melakukan install package laravel ui
3. Berfungsi menginstall package node modules
jika terjadi error silahkan pisah jalankan telebih dahulu npm install setelahnya jalakn perintah npm run dev
Route Middleware
Controller Middleware
composer require laravel/ui
php artisan ui bootstrap --authnpm install && npm run devRoute::get('/', function () {
//
})->middleware('web');
Route::group(['middleware' => ['web']], function () {
//
});
Route::middleware(['web', 'subscribed'])->group(function () {
//
});class UserController extends Controller
{
/**
* Instantiate a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('auth');
$this->middleware('log')->only('index');
$this->middleware('subscribed')->except('store');
}
}web: vendor/bin/heroku-php-apache2 public/Menguasai dasar-dasar HTML
Menguasai tag-tag pada HTML
Buat File HTML index
Buatlah sebuah file index.html yang akan menampilkan halaman seperti berikut:
Buat halaman form
Buatlah file baru bernama form.html yang berisi form seperti berikut :
nb: Gunakan Element Form untuk Menuju ke welcome.html
Buat halaman selamat datang
Setelah user berhasil mendaftar, berikan halaman welcome.html yang memberikan ucapan selamat datang seperti berikut:
Hasil Akhir
Setelah semua file html yang kita perlukan siap, maka website kita sudah berjalan jika kita mulai dari index.html
Enter a caption for this image (optional)
Catatan : Jika gambar tidak begitu jelas silakan klik kanan pada gambar lalu pilih buka gambar pada tab baru (Open image in a new tab) atau simpan gambar sebagai (Save image as).
Mengerti Routing Laravel
Handle Request dari URL dan form
Masih ingat dengan challenge hari pertama materi HTML? hari ini kita akan pakai halaman tersebut di project laravel. Kamu diminta untuk membuat sebuah project Laravel. Di dalam project tersebut terdapat 3 route yaitu: Home, Register, dan Welcome.
Langkah-langkahnya adalah:
Buatlah route terlebih dahulu untuk setiap halaman yang ingin dibuat.
Buat halaman blade untuk masing-masing route yang ingin dibuat. simpanlah di folder resources/views
Route Home diatur oleh HomeController, sedangkan route Register dan Welcome diatur oleh AuthController.
Alur program: dimulai dari halaman Home(route: '/'
Jika sudah berhasil, berikut output yang diinginkan:
'/register''/welcome'
Silahkan melakukan post test selama 20 menit terlebih dahulu
Akses link google form untuk post test pada link berikut ini :
