MODUL 6 FORM ACTION
6.1. Tujuan Praktikum
1. Mahasiswa mampu membuat form pada dokumen HTML.
2. Mahasiswa mampu memahami cara penggunaan dari fasilitas Form.
3. Mahasiswa mampu menginputkan field sesuai dengan kegunaan.
4. Mahasiswa mampu menggunakan methode get dan post dalam mengirim data.
6.2. Dasar Teori
Sebuah website dinamis seringkali memerlukan interaksi antara browser client dan server bisa berupa pemasukan data teks, angka, atau upload file untuk diproses oleh server. Untuk mewadahi suatu data yang dikirimkan oleh browser client, dibutuhkan adanya FORM HTML.
Form dalam HTML adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Pada penulisan form "nama form" adalah nama form yang sedang digunakan, method adalah metode atau cara yang digunakan untuk menyimpan data ke server sedangkan action adalah alamat atau bisa juga file lain yang digunakan untuk memproses input dari form kedalam server. Pada bagian form tersedia kontrol-kontrol input yang digunakan untuk masingmasing keperluan dalam memasukan data input.
Form di HTML dikenal dengan adanya tag <form> dan ditutup dengan tag
</form>. Di dalam tag </form> pembuka diikuti dengan atribut action dan method. Pada atribut action menerangkan ke halaman yang akan digunakan pada proses input, sedangkan method digunakan untuk mengatur cara mem-parsing konten. Pada halaman web akan menerima inputan dari user atau para pengunjung dengan menggunakan metode GET dan POST. GET akan mengirimkan data bersama dengan URL, sedangkan POST akan mengirimkannya secara terpisah.
30
User mengirimkan data input dengan mengisi teks atau pilihan pada attibut form html.
31
32
6.3. Praktikum
Langkah pertama buatlah folder dengan nama “praktikum6”, lalu buka kode editor dan buatlah 2 file baru dengan nama “form1.php” dan “contoh.php”.
Setelah itu lakukan pengkodingan sesuai dengan arahan, dan jalankan programnya.
Dapat dilihat apa yang diinputkan pada halaman form1 akan dikirim ke halaman contoh, hal ini dapat terjadi karena method POST dan GET yang digunakan untuk memproses data yang dikirim, dan identifikasi name inputan yaitu name=”nama” dan name=”umur”. Yang menjadi variabel tempat menampung data pada halaman form1 dan akan ditampilkan pada halaman contoh.
Selanjutnya kita akan membuat form checkbox, pertama buatlah file baru dengan nama “checkbox.php”. lalu lakukan pengkodingan sesuai arahan, dan jalankan program tersebut.
Gambar 6.1 kode dan hasil dari form1.php
Gambar 6.2 kode dan hasil dari contoh.php
33
Gambar 6.3 kode pada checkbox.php
34
Selanjutnya kita akan membuat kalkulator sederhana menggunakan bahasa pemrogaraman web. Pertama buatlah file baru dengan nama “kalkulator.php”, lalu lakukan pemerograman dengan memanfaatkan form HTML dan logika pemrograman sebagai sistem untuk kalkulatornya. Setelah itu jalankan program tersebut.
Gambar 6.4 hasil program dari checkbox.php
35
6.4. Kesimpulan dan Saran 1. Kesimpulan
Form Action adalah salah satu fitur penting dalam HTML yang memungkinkan pengiriman data dari sebuah form ke URL atau file yang ditentukan. Dengan menggunakan atribut action pada tag <form>, kita dapat menentukan tujuan pengiriman data form. Metode pengiriman data dapat ditentukan menggunakan atribut method, seperti GET atau POST.
2. Saran
Gambar 6.5 kode pada file kalkulator.php
Gambar 6.6 hasil dari file kalkulator.php
36
Saran untuk praktikum selanjutnya adalah mempertimbangkan untuk memberikan contoh konkret dan penjelasan step-by-step tentang bagaimana data form dikirim, diterima, dan diproses di sisi server.
LEMBAR PENGESAHAN
JUDUL :FORM ACTION
NAMA : AHMAD PRAYOGI
NIM : 0701202249
PROGRAM STUDI : ILMU KOMPUTER
Medan, 05 Mei 2023 Menyetujui, Asisten Laboratorium
Paris Alvitto
Mengetahui, Laboran
Muhammad Fahri Syuhada, S.Kom
37
MODUL 7
PHP (PDO CONSTRUCTOR) DENGAN DATABASE MYSQL
7.1. Tujuan Praktikum
1. Mahasiswa mampu memahami konsep koneksi MySQL menggunakan PDO.
2. Mahasiswa mampu menggunakan PDO untuk menjalankan query SQL.
3. Mahasiswa mampu memahami konsep CRUD (Create, Read, Update, Delete).
7.2. Dasar Teori
MySQL merupakan sebuah sistem database open-source yang saat ini sangat populer digunakan. Berbagai data di dalam MySQL disimpan ke dalam objek database yang disebut tabel. Sebuah tabel akan terdiri dari berbagai entri yang saling berhubungan yang disajikan dalam bentuk hubungan kolom dan baris.
MySQL tersedia sebagai perangkat lunak gratis di bawah lisensi GNU General Public License (GPL).
Tidak seperti Apache yang merupakan software yang dikembangkan oleh komunitas umum, dan hak cipta untuk kode sumber dimiliki oleh penulisnya masing-masing, MySQL dimiliki dan disponsori oleh sebuah perusahaan komersial Swedia yaitu MySQL AB. MySQL AB memegang penuh hak cipta hampir atas semua kode sumbernya. Kedua orang Swedia dan satu orang Finlandia yang mendirikan MySQL AB adalah David Axmark, Allan Larsson, dan Michael "Monty" Widenius.
Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik merupakan struktur dua dimensi terdiri dari baris (row atau record) dan kolom(column atau field). Sedangkan dalam sebuah database dapat terdiri dari beberapa table.
PDO Construct adalah metode atau fungsi yang digunakan untuk membuat objek koneksi PDO (PHP Data Objects) dalam PHP. PDO adalah ekstensi PHP yang menyediakan antarmuka untuk berinteraksi dengan berbagai macam sistem manajemen basis data, seperti MySQL.
38
39
7.3. Praktikum
Pada praktikum ini akan membuat sebuah web site dengan database. Langkah pertama buka aplikasi XAMPP dan memulai modul
“Apache” dan “MySql” untuk membuat web serversebagai penyimampan file halaman web.
Setelah itu masuk ke phpmyadmin untuk membuat database, dengan cara ketikan url http://localhost/phpmyadmin/ pada browser. Lalu buatlah database pada halaman create database. Dengan cara pilih “new”
dan ketkan nama database pada kolom database name, lalu pilih create.
Gambar 7.1 Aplikasi XAMPP
Gambar 7.2 Tampilan phpMyadmin
40
Selanjutnya buatlah tabel pada halaman create table lalu masukan nama tabel “barangmasuk” pada kolom name. Dan buatlah tabel sesuai dengan arahan.
Selanjutnya buatlah folder “crud” pada direktor “htdocs”, lalu buatlah file baru dengan nama “koneksi.php” dan ketikan program sesuai arahan dan simpan, jalankan program untuk mengetahui keberhasilan program tersebut. Jika program berhasil maka tampilannya akan kosong.
Gambar 7.3 Membuat tabel
Gambar 7.4 kode pada koneksi.php
41
Selanjutnya buat lagi file baru dengan nama “index.php” lalu ketikan kode program sesuai arahan dan jalankan untuk melihat hasilnya.
Didalam kode terdapat framework tambah untuk desain dari web yang akan dibuat yaitu fontawesome.
42
Selanjutnya buat lagi file baru dan simpan dengan nama
“barang.php”, lalu ketikan kode program sesuai arahan.
Gambar 7.5 kode pada index.php
Gambar 7.6 Hasil dari index.php
Gambar 7.7 kode pada barang.php
43
Setelah itu lanjut masuk ke phpmyadmin untuk memasukan isi pada tabel barangmasuk yang terdapat di database apotek, dengan cara pilih insert.
Terakhir jalankan lagi web yang telah dibuat dan pilih barang masuk untuk melihat nilai dari tabel yang telah dimasukan nilainya.
7.4. Kesimpulan dan Saran 1. Kesimpulan
PDO memungkinkan untuk berinteraksi dengan berbagai sistem manajemen basis data menggunakan antarmuka yang seragam. Dengan menggunakan PDO Construct dapat dengan mudah membuat objek koneksi PDO. Koneksi ini memungkinkan kita untuk terhubung dengan database MySQL dan melakukan operasi database menggunakan PHP.
Konsep dasar CRUD (Create, Read, Update, Delete) dalam konteks penggunaan PDO dengan MySQL. Merupakan cara untuk membuat, membaca, memperbarui, dan menghapus data dalam tabel MySQL.
2. Saran
Saran untuk praktikum selanjutnya adalah menjelaskan dengan singkat tentang keuntungan menggunakan PDO dalam membangun sebuah web dan menjelaskan fungsi dari kode yang mencakup pembuatan objek
Gambar 7.8 Memberi nilai pada tabel
Gambar 7.9 Hasil dari barang.php
44
koneksi, query SQL, dan penggunaan CRUD, serta menjelaskan kelebihan dan kekurangan dari penggunaan PDO.
LEMBAR PENGESAHAN
JUDUL :PHP (PDO CONSTRUCTOR) DENGAN DATABASE
MYSQL
NAMA : AHMAD PRAYOGI
NIM : 0701202249
PROGRAM STUDI : ILMU KOMPUTER
Medan, 12 Juli 2023 Menyetujui, Asisten Laboratorium
Paris Alvitto
Mengetahui, Laboran
Muhammad Fahri Syuhada, S.Kom
45
MODUL 8
PHP (PDO CONSTRUCTOR) DENGAN DATABASE MYSQL LANJUTAN
8.1. Tujuan Praktikum
1. Mahasiswa mampu mengelola data dalam tabel MySQL menggunakan PDO.
2. Mahasiswa mampu mempraktikkan koneksi dan query SQL dengan PDO.
3. Mahasiswa mampu menggunakan framework Bootstrap.
8.2. Dasar Teori
Pada umumnya halaman web didesain dalam format landscape karena dulu halaman web di akses dari PC atau laptop. Pada bagian atas umumnya ditemukan logo dan banner yang dipasang secara horisontal. Dan isi (content) halaman dapat berisi teks dan gambar.
Namun untuk perangkat smartphone, halaman web ditampilkan secara potrait dengan ukuran layar yang jauh lebih kecil jika dibandingkan ukuran layar PC atau laptop. Hal ini mempengaruhi desain halaman web untuk di akses pada perangkat smartphone. Umumnya menu ditampilkan secara vertikal dan hanya ditampilkan jika user memerlukannya saja. Dengan adanya panduan standar yang dibuat oleh para web developer yang berpengalaman yang umumnya dikenal dengan istilah framework.
Bootstrap merupakan framework HTML, CSS, Javascript populer untuk membangun situs web yang responsife. RWD (Responsive Web Design) adalah desain situs yang otomatis akan menyesuaikan diri agar tampil baik di semua perangkat dari ponsel sampai dekstop. Bootstrap terdiri dari satu set file css, javascript, dan jquery.
Framework ini juga dibuat berdasarkan standar pengembangan antarmuka sehingga antarmuka yang dihasilkan akan dapat diterjemahkan dengan baik oleh berbagai web browser. Selain itu juga halaman web yang dihasilkan bersifat responsif mengikuti ukuran layar perangkat yang mengaksesnya.
46
47
8.3. Praktikum
Pada praktikum kali ini akan melanjutkan dari praktikum kemarin yaitu membuat fungsi tambah, edit, dan hapus. Pertama buatlah file baru dengan nama “tambah.php”, lalu masukan kode program untuk membuat fitur penambahan nilai tabel.
Gambar 8.1 Kode pada tambah.php
Gambar 8.2 Hasil dari tambah.php
48
Selanjutnya buat file baru lagi dan simpan dengan nama
“edit.php”, lalu ketikan kode program untuk melakukan edit pada nilai yang sudah ada di tabel barangmasuk.
Gambar 8.3 Kode pada edit.php
Gambar 8.4 Hasil dari edit.php
49
Terakhir untuk membuat fungsi hapus nilai pada tabel. Buatlah file baru dan simpan dengan “hapus.php”, lalu ketik kode program untuk menghapus nilai atau data pada tabel barangmasuk. Dan coba fungsi di web pada bagian
“barang.php” dan coba hapus salah satu data dalam tabel dengan cara pilih ikon tong sampah, jika data terhapus maka program berhasil.
Lanjut membuat navigasi bar saat membuka halaman barang, tambah, dan edit.
Gambar 8.5 Kode pada hapus.php
Gambar 8.6 Penambahan navigasi bar
50
8.4. Kesimpulan dan Saran 1. Kesimpulan
Bootstrap adalah kerangka kerja front-end yang populer yang menyediakan komponen, gaya, dan alat untuk mempercepat proses desain dan pengembangan web responsif. Dalam Bootstrap terdapat komponen seperti navigasi, tombol, dan formulir untuk membangun tata letak dan desain yang responsif. Bootstrap sangant membantu dalam mendesain responsif lainnya, seperti penggunaan media query untuk mengatur tampilan berdasarkan lebar layar dan perangkat yang digunakan.
2. Saran
Saran untuk praktikum kali ini agar memberikan pelaskan secara singkat tentang manfaat dan keunggulan menggunakan Bootstrap dalam pengembangan web. Sertakan beberapa contoh kasus penggunaan Bootstrap di industri nyata dan berikan instruksi langkah demi langkah untuk memudahkan pembaca dalam mengikuti langkah-langkah implementasi.
51
LEMBAR PENGESAHAN
JUDUL :PHP (PDO CONSTRUCTOR) DENGAN DATABASE
MYSQL LANJUTAN
NAMA : AHMAD PRAYOGI
NIM : 0701202249
PROGRAM STUDI : ILMU KOMPUTER
Medan, 12 Juli 2023 Menyetujui, Asisten Laboratorium
Paris Alvitto
Mengetahui, Laboran
Muhammad Fahri Syuhada, S.Kom
52
