CRUD PHP. Workshop 1

CRUD PHP Workshop 1

Sejarah Website Sebuah situs, adalah kumpulan terkait halaman web, termasuk multimedia konten, biasanya diidentifikasi dengan umum nama domain, dan diterbitkan pada setidaknya satu web server. Sebuah situs web dapat diakses melalui jaringan Internet Protocol (IP) publik, seperti Internet, atau jaringan area lokal pribadi (LAN), dengan merujuk pencari sumber daya seragam (URL) yang mengidentifikasi situs tersebut. The World Wide Web (WWW) diciptakan pada tahun 1990 oleh CERN fisikawan Inggris Tim Berners-Lee. Pada tanggal 30 April 1993, CERN mengumumkan bahwa World Wide Web akan bebas digunakan untuk siapa saja. Sebelum pengenalan HTML dan HTTP, protokol lain seperti File Transfer Protocol dan protokol gopher digunakan untuk mengambil file individual dari server. Protokol ini menawarkan struktur direktori sederhana dimana pengguna menavigasi dan memilih file yang akan diunduh. Dokumen paling sering disajikan sebagai file teks biasa tanpa format, atau dikodekan dalam format pengolah kata. Workshop 2

Client Side Scripting Biasanya, klien adalah aplikasi komputer, seperti browser web, yang berjalan di komputer lokal pengguna, smartphone, atau perangkat lain, dan terhubung ke server seperlunya. Operasi dapat dilakukan sisi klien karena mereka memerlukan akses terhadap informasi atau fungsionalitas yang tersedia pada klien namun tidak di server, karena pengguna perlu mengamati operasi atau memberikan masukan, atau karena server tidak memiliki kekuatan pemrosesan untuk melakukan Operasi pada waktu yang tepat untuk semua klien yang dilayaninya. Selain itu, jika operasi dapat dilakukan oleh klien, tanpa mengirim data melalui jaringan, mereka mungkin memerlukan sedikit waktu, kurang menggunakan bandwidth, Dan menimbulkan risiko keamanan yang lebih rendah. Ketika server menyajikan data dengan cara yang umum digunakan, misalnya sesuai dengan protokol standar seperti HTTP atau FTP, pengguna mungkin memiliki pilihan dari sejumlah program klien (misalnya, peramban web modern dapat meminta dan menerima data menggunakan HTTP dan FTP ). Dalam kasus aplikasi yang lebih khusus, pemrogram dapat menulis server, klien, dan protokol komunikasi mereka sendiri yang hanya dapat digunakan satu sama lain. Program yang berjalan di komputer lokal pengguna tanpa pernah mengirim atau menerima data melalui jaringan tidak dianggap sebagai klien, sehingga operasi program semacam itu tidak akan disebut operasi sisi klien. Workshop 3

Client Side Scripting Dalam konteks World Wide Web, bahasa komputer yang sering ditemui yang dievaluasi atau dijalankan di sisi klien meliputi: Cascading Style Sheets (CSS) HTML JavaScript Workshop 4

Server Side Scripting Server side scripting adalah teknik yang digunakan dalam pengembangan web yang melibatkan penggunaan skrip pada server web yang menghasilkan respons yang disesuaikan untuk permintaan setiap pengguna (klien) ke situs web. Alternatifnya adalah untuk web server itu sendiri untuk mengantarkan sebuah halaman web statis. Skrip dapat ditulis dalam beberapa bahasa script sisi server yang tersedia (lihat di bawah). Skrip sisi server dibedakan dari skrip sisi klien di mana skrip tertanam, seperti JavaScript, dijalankan dengan sisi klien di browser web, namun kedua teknik tersebut sering digunakan bersamaan. Server side scripting sering digunakan untuk menyediakan antarmuka yang disesuaikan bagi pengguna. Skrip ini dapat mengumpulkan karakteristik klien untuk digunakan dalam menyesuaikan respons berdasarkan karakteristik, persyaratan pengguna, hak akses, dsb. Skrip sisi server juga memungkinkan pemilik situs menyembunyikan kode sumber yang menghasilkan antarmuka, sedangkan dengan sisi klien Scripting, pengguna memiliki akses ke semua kode yang diterima oleh klien. Sebuah sisi bawah untuk penggunaan script sisi server adalah bahwa klien perlu melakukan permintaan lebih lanjut melalui jaringan ke server untuk menunjukkan informasi baru kepada pengguna melalui browser web. Permintaan ini dapat memperlambat pengalaman bagi pengguna, menempatkan lebih banyak beban pada server, dan mencegah penggunaan aplikasi saat pengguna diputuskan dari server. Ketika server menyajikan data secara umum digunakan, misalnya menurut HTTP atau FTP protokol, pengguna dapat memiliki pilihan mereka dari sejumlah program klien (paling web browser modern dapat meminta dan menerima data menggunakan kedua dari mereka protokol). Dalam kasus aplikasi yang lebih khusus, pemrogram dapat menulis server, klien, dan protokol komunikasi mereka sendiri, yang hanya dapat digunakan satu sama lain. Program yang berjalan di komputer lokal pengguna tanpa pernah mengirim atau menerima data melalui jaringan tidak dianggap sebagai klien, sehingga operasi program semacam itu tidak akan dianggap sebagai operasi sisi klien. Workshop 5

Ada sejumlah bahasa Server side scripting yang tersedia: PHP Perl Python Java ASP Ruby Dll Workshop 6

Website Statis Situs statis adalah situs yang memiliki halaman web yang tersimpan di server dalam format yang dikirim ke browser web klien. Ini terutama dikodekan dalam Hypertext Markup Language (HTML); Cascading Style Sheets(CSS) digunakan untuk mengontrol tampilan diluar basic HTML. Gambar biasanya digunakan untuk mempengaruhi penampilan yang diinginkan dan sebagai bagian dari konten utama. Audio atau video mungkin juga dianggap konten "statis" jika diputar secara otomatis atau umumnya tidak interaktif. Workshop 7

Website Dinamis Situs dinamis adalah situs yang mengubah atau menyesuaikan dirinya sendiri secara sering dan otomatis. Halaman dinamis sisi server dihasilkan "on the fly" dengan kode komputer yang menghasilkan HTML (CSS bertanggung jawab atas tampilan dan dengan demikian, adalah file statis). Ada berbagai macam sistem perangkat lunak, seperti CGI, Java Servlets dan Java Server Pages (JSP), Active Server Pages dan ColdFusion (CFML) yang tersedia untuk menghasilkan sistem web dinamis dan situs dinamis. Berbagai kerangka aplikasi web dan sistem templat web tersedia untuk bahasa pemrograman penggunaan umum seperti Perl,PHP, Python dan Ruby membuatnya lebih cepat dan mudah untuk membuat website dinamis yang kompleks. Workshop 8

Perangkat Lunak untuk membuat Website Xampp Server Notepad++ Workshop 9

Tata Letak Penyimpanan berkas website Pada Xampp Workshop 10

Tata Cara Pemanggilan url (untuk mengakses web yang akan dibuat) Buatlah Direktori pada htdocs dengan nama pemrograman_web Buatlah berkas dengan ekstensi file.php (beri nama coba.php ) Lalu ketikan Code berikut: <h3>hi, Peserta Workshop</h3> Atau anda bisa membuat dengan tag html form (menu isian) atau table menu tampil data dengan tag table (Dibuat contoh oleh Pemateri) Dan untuk mengaksesnya anda bisa menggunakan seperti berikut: 127.0.0.1/pemrograman_web/coba.php localhost/pemrograman_web/coba.php Workshop 11

Penanganan Basis Data Jika anda ingin membuat situs dinamis yang harus anda buat adalah struktur basis data. Untuk pembuatan Basis Data, anda bias menggunakan menu yang telah disediakan oleh Xampp, yaitu phpmyadmin. Cara mengaksesnya anda dapat mengetikan url pada browser anda 127.0.0.1/phpmyadmin/ Workshop 12

Tata Cara Pembuatan Basis Data dengan phpmyadmin Klik menu SQL CREATE DATABASE pem_web Setelah sudah diisikan klik Go Maka akan tercipta database dengan nama pem_web. Lalu klik database pem_web tersebut dan buatlah query untuk membuat table mahasiswa. Workshop 13

Query Pembuatan table mahasiswa: CREATE TABLE mahasiswa ( npm char(15) NOT NULL, nama varchar(50) NOT NULL, kelamin enum( Laki-Laki, Perempuan ) DEFAULT NULL, lahir varchar(20) NOT NULL, tgl_lahir date DEFAULT NULL, telp char(14) NOT NULL, UNIQUE KEY npm (npm) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; Workshop 14

Query Pembuatan table users: CREATE TABLE users ( id int(5) NOT NULL AUTO_INCREMENT, username char(10) NOT NULL, password varchar(50) NOT NULL, PRIMARY KEY ( id ) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO users ( id, username, password ) VALUES (1, admin, admin123 ); Workshop 15

Hasil Query membentuk 2 table mahasiswa dan table users, bisa anda klik Database pem_web seperti pada gambar berikut: Workshop 16

Create Read Update Delete dengan PHP Studi Kasus: Membuat Login, Menambah, mengubah, menghapus dan mencari data. Workshop 17

Membuat File koneksi.php Workshop 18

Penjelasan koneksi.php Pada baris ke 1 dan baris ke 13 merupakan tag pembuka & tag penutup pada php Pada baris ke 2, ke 3, ke 4 & ke 5 merupakan variable pada php dan yang mempunyai nilai atau Value dalam tanda petik dua ( ). Pada baris ke 7 terdapat variable $koneksi dan mempunyai value new mysqli($servername,$username,$password,$database); merupakan fungsi untuk menghubungkan ke databse pem_web dengan fungsi dari php new mysqli Dan perlu anda ketahui variable $koneksi ini nantinya akan digunakan untuk membuat objek dan fungsi php pada langkah berikutnya (Select, Insert, Update, Delete). Workshop 19

Membuat form login.php Workshop 20

Membuat penanganan cek_login.php Workshop 21

Otoritas data index.php Pada baris ke 1 memanggil file koneksi.php Pada Baris ke 2 ob_start(); merupakan fungsi pada php untuk mengaktifkan output buffering atau memory yang digunakan sebagai penyimpanan sementara hasil output. Pada Baris ke 3 session_start(); merupakan fungsi untuk memulai sesi (login) yang diset sebelumnya pada file cek_login.php di baris ke 11 dengan fungsi $_SESSION['username']=$username;!isset merupakan fungsi php untuk memeriksa variable yang didefinisikan bernilai FALSE dalam kasus ini kita menggunakan struktur kontrol if(). Jika nilai session tidak sesuai akan dialihkan ke file login.php dengan fungsi header(). Workshop 22

Menampilkan isi data index.php Workshop 23

Penjelasan Index.php Pada baris ke 43 merupakan tag PHP dan fungsi dimana terdapat variable $sql untuk menampung result set query berdasarkan Query SELECT * FROM mahasiswa yang berfungsi untuk menampilkan seluruh field dari table mahasiswa. Dan pada baris ke 44 pada variable $result = $koneksi->query($sql) merupakan hasil dari fungsi php, dan variable $result ini yang nantinya akan ditampilkan berdasarkan array, maka harus kita gunakan struktur kontrol foreach. Yang nanti ditampilkan berdasarkan nama field dari table mahasiswa dengan menyisipkan tag HTML table. Bisa terlihat baris ke 49 hingga baris ke 58. Untuk baris ke 45 kita menggunakan increment atau penambahan secara otomatis dimana $no=1; jika terdapat data pertama maka akan bernilai 1 dan berikutnya. Workshop 24

Penjelasan index.php baris ke 26 hingga baris ke 28 Bisa terlihat pada gambar <a href= form.php > ini merupakan hyperlink atau rujukan kehalaman lain, dalam kasus tersebut merujuk ke form.php Baris ke 27 merupakan tag HTML untuk membuat tombol Workshop 25

Penjelasan index.php baris ke 56 & 57 Dapat dilihat bahwa tag hyperlink merujuk ke file form_ubah.php dan mengirimkan data dengan value npm yang nantinya aka ditangkap di file form_ubah.php Untuk yang hapus.php juga sama seperti diatas kasusnya Workshop 26

Membuat formulir dan validasi. form.php Workshop 27

Penjelasan form.php Label untuk menuliskan judul Input type= text merupakan tag HTML untuk menu isi Select merupakan menu pilihan Name= placeholder= required= required ini merupakan atribut html Name= untuk mengirimkan isian data jika tombol simpan diklik Placeholder= merupakan text berbayang Required= merupakan atribut html untuk validasi. Pada baris ke 14 & baris ke 32 merupakan tag pembuka & tag penutup HTML form. Dimana atribut action= mirip dengan hyperlink. Workshop 28

Menyimpan data dari formulir, Simpan.php Workshop 29

Penjelasan simpan.php Pada baris ke 3 merupakan fungsi dari php try{} catch{} fungsi ini merupakan proses penanganan kesalahan. Dapat anda lihat dari baris ke 4 hingga baris ke 9 merupakan variable yang dibuat dan fungsi $_POST ini berdasarkan value dari atribut name dari formulir form.php yang harus disesuaikan dengan value nya. Pada baris ke 8 fungsi date( Y-m-d ) merupakan konversi entri berdasar tahun bulan dan hari, yang diharuskan sebab format dari mysql dengan tipe data date harus dengan format Y-m-d. Dan untuk strtotime fungsi dari php string ke waktu berdasar atribut name. Pada baris ke 10 INSERT INTO mahasiswa merupakan query untuk mengisi ke kolom yang ditentukan VALUES() merupakan nilai yang kita berikan sesuai dengan variable yang kita deklarasi tadi diatas... untuk tanda seperti ini merupakan penghubung atau penggabungan string dan sering disebut dengan concatenate. Workshop 30

Menampilkan data yang akan diubah, form_ubah.php Workshop 31

Penjelasan form_ubah.php Pada baris ke 3 $npm = $_REQUEST[ npm ], ini yang kita tangkap dari menu index.php jika hyperlink ubah kita klik bisa dilihat seperti berikut <?php echo '<a href="form_ubah.php?npm='.$rows['npm'].'">ubah</a>';?> Anda bisa menggunakan fungsi php $_REQUEST[] atau $_GET[] Setelah anda buat kondisi beserta query nya anda bisa menampilkan isi data tersebut kedalam tag input pada atribut value, dapat terlihat pada gambar. Dalam formulir proses action kita alihkan ke simpan_ubah.php Workshop 32

Proses menghapus data Proses ini hamper mirip dengan ubah hanya berbeda querynya saja, jika ubah kita harus menampilkan isi data ke atribut value= pada tag input. Karena dalam kasus ini proses menghapus berarti anda langsung melakukan query DELETE FROM dan value WHERE berdasarkan string npm pada menu index.php Workshop 33

Proses keluar atau mengakhiri sesi logout.php Terlihat fungsi pada baris ke 3 dimana menggunakan session_destroy(); nah fungsi ini lah yang dimaksud untuk menghentikan sesi login. Untuk baris ke 4 kita menampilkan menu notifikasi dengan javascript, dapat anda lihat fungsi javascript alert( ) inilah fungsi untuk menampilkan kotak dialog. Workshop 34

Terima Kasih. Semoga Bermanfaat. Workshop 35