Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Cara Mengulas Daftar Yang Harus Dilakukan Dengan PHP dan AJAX

by
Read Time:16 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Nindya Novita (you can also view the original English article)

Untuk tutorial Tuts + Premium minggu ini, kami akan bekerja dengan banyak teknologi yang berbeda. Pada akhirnya, kami akan membuat daftar tugas yang akan memungkinkan Anda, atau pengguna Anda, untuk membuat, memperbarui, dan menghapus item secara asinkron. Untuk menyelesaikan tugas kami, kami akan menggunakan kemampuan AJAX dari PHP dan jQuery. Saya pikir Anda akan menemukan bahwa itu tidak sesulit yang mungkin Anda pikirkan sebelumnya. Saya akan menunjukkan kepada Anda bagaimana tepatnya!

Tutorial ini mencakup screencast yang tersedia untuk anggota Tuts + Premium.



Langkah 1: Membuat Database baru

Seperti yang Anda bayangkan, kami tidak dapat menyimpan, menghapus, dan memperbarui catatan dalam lingkungan statis. Jadi, kita harus membuat database MySql yang akan menyimpan informasi.

Jika Anda menggunakan PHPMyAdmin, akses panel kontrol dengan mengunjungi https: // localhost / phpmyadmin.


Dalam kotak teks "Buat Database Baru", ketik "db" dan klik "Buat". Selanjutnya, Anda harus membuat tabel. Ketik "todo", dan '3' untuk "jumlah bidang".


Membuat Kolom Kami

Sekarang kita perlu menambahkan kolom yang sesuai.

  • id: id unik untuk mengidentifikasi setiap baris.
  • title: Judul barang kami.
  • description : Deskripsi yang menjelaskan apa yang perlu kita lakukan!

Pastikan bahwa opsi setiap bidang cocok dengan yang ditampilkan dalam gambar berikut.


Masukkan Baris Uji

Sekarang setelah kami membuat database kami, mari kita tambahkan beberapa baris pengujian dengan cepat. Klik pada database "db" Anda; kemudian pilih "Browse". Anda akan dibawa ke layar yang berisi daftar isi setiap baris dalam database Anda. Tentunya, bagian ini kosong sekarang. Pilih "Sisipkan" dan tambahkan beberapa kolom. Ketik apa pun yang Anda inginkan di sini.




Screencast Lengkap



Langkah 2: Kelas Db


Meskipun tidak diharuskan dengan cara apa pun, saya merasa paling mudah untuk mengelola fungsi saya ketika mengelompokkan mereka ke dalam kelas. Mempertimbangkan ini, kita sekarang akan membuat kelas "Db" yang akan berisi beberapa fungsi.

  • __construct: Fungsi ini secara otomatis berjalan segera setelah objek dibuat.
  • delete_by_id(): Menghapus baris yang diperlukan dengan meneruskan id unik baris.
  • update_by_id(): Perbarui baris dengan meneruskan dalam id uniknya.

Buka editor kode pilihan Anda, dan buat file baru bernama "db.php". Di dalam dokumen kosong ini, tempelkan di baris kode berikut.

Untuk membuat kelas baru, kami menggunakan sintaks yang ditunjukkan di bawah ini.

Hanya dengan menggunakan kode di atas, kami berhasil membuat kelas baru. Itu belum melakukan apa-apa dulu, tapi itu tetap kelas!

__construct()

Metode __construct() (pembicaraan kelas untuk "fungsi") dikenal sebagai "metode ajaib". Ini akan segera dijalankan setelah kelas dibuat. Kami akan menggunakan metode ini untuk membuat koneksi awal kami ke database MySql.

Jika Anda tidak akrab dengan OOP, itu bisa sedikit menakutkan pada awalnya. Untungnya, tidak terlalu sulit untuk dipahami. Kami ingin koneksi mysql kami tersedia untuk semua metode di kelas kami. Mempertimbangkan ini, itu tidak akan menjadi ide yang baik untuk menyimpan variabel $ mysql dalam fungsi tertentu. Sebaliknya, itu harus menjadi properti kelas.

Mengakses Properti Dari Metode

Dalam suatu metode, kita tidak bisa hanya mengakses properti kita dengan mengetik, "$ mysql". Pertama-tama kita harus merujuk ke objek.

Pastikan untuk memperhatikan fakta bahwa, ketika mengakses properti, kita dapat meninggalkan tanda dolar.

Mysqli


Lebih baik menggunakan mysql ditingkatkan (mysqli) daripada metode mysql_connect tradisional saat menghubungkan ke database. Tidak hanya lebih cepat, tetapi juga memungkinkan kita untuk menggunakan pendekatan OOP.

Saat membuat instance baru dari kelas mysqli, kita harus memasukkan empat parameter.

  • host : 'localhost'
  • username : root
  • password : 'yourPassword'
  • database name : db

Itu harus dilakukan sekarang. Kami akan kembali ke kelas kami selama tutorial ini untuk menambahkan metode baru. Ingat, ketika kita membuat instance baru dari kelas ini ...

... kami secara otomatis membuka koneksi ke database kami, berkat metode ajaib __construct ().

Markup


Sekarang, kita perlu membuat markup kami untuk halaman beranda. Tambahkan halaman baru ke solusi Anda, dan simpan sebagai "index.php". Selanjutnya, tempel berikut ini.

Analisis

Di dalam kepala dokumen kami, saya merujuk CDN Google untuk mengakses jQuery. Ini mudah metode yang disukai saat menggunakan jQuery. Selanjutnya, saya mereferensikan file 'scripts.js' yang akan kita buat nanti di tutorial ini.

Mari kita segera tinjau untuk apa masing-masing div.

  • container: Standar pembungkus div.
  • ul # tabs: Navigasi kami. Kami akan menggunakan Javascript untuk menambahkan tab tambahan. Saya akan menjelaskan mengapa segera.
  • main: Bungkus untuk konten utama.
  • todo : Tab 1.
  • addNewEntry : Tab 2

Langkah 4: CSS


Ini bukan tutorial CSS, per se. Anda bebas untuk meninjau stylesheet yang saya gunakan. Ini ada dalam paket unduhan. Jika Anda ingin review lebih dalam, tontonlah screencast.


Langkah 5: Mengambil Rekaman

Sekarang setelah kami terhubung ke database, dan telah membuat markup / CSS kami, mari menulis beberapa kode yang akan mengambil baris database.

Di dalam div "todo", masukkan berikut ini.

Analisis

  • Gunakan 'require' untuk mengakses kelas Db kami.
  • Buat instance baru dari kelas Db.
  • Buat kueri. Ini akan mengambil semua catatan dari tabel "todo", dan mengurutkannya dalam urutan menaik.
  • Kami sekarang harus mengeksekusi pertanyaan kami. $ db-> mysql-> query ($ query). $ db mereferensikan objek. $ mysql mengacu pada kelas mysqli. $ query adalah metode kelas mysqli yang memungkinkan kita untuk lulus dalam sebuah query. Di sini, kita melewati string yang baru saja kita buat.
  • $ results-> num_rows akan mengembalikan total jumlah baris yang diambil dari database. Jika satu atau lebih dikembalikan, kami akan menggunakan pernyataan waktu untuk mengulang melalui baris.
  • Buat variabel sementara yang disebut $ row yang akan merujuk ke informasi, untuk setiap iterasi. Kami kemudian membuat tiga variabel yang merujuk ke rekan-rekan masing-masing dalam database.
  • Setiap item akan dibungkus dalam div dengan kelas "item".
  • Selanjutnya, kami menggunakan heredocs untuk memformat item to-do kami. Heredocs memungkinkan cara yang mudah dan teratur untuk mencampur html dan php. Untuk mempelajari lebih lanjut, pastikan untuk meninjau screencast ini.
  • Bungkus judul dalam tag h4; deskripsi dalam tag p.
  • Pengguna membutuhkan cara untuk mengedit dan menghapus setiap item. Jadi, kami telah membuat dua tag anchor yang akan memungkinkan kami untuk melakukannya. Kami akan kembali ke ini nanti.
  • Gali info heredocs kami, dan tutup div ".item".
  • Jika baris nol dikembalikan dari database, gema "Ada nol item. Tambahkan satu sekarang!".

Semoga semua itu masuk akal. Pada titik ini, Anda harus memiliki sesuatu seperti berikut:


Langkah 6: Tambahkan Item Baru


Kami juga ingin pengguna memiliki kemampuan untuk memasukkan catatan baru. Mari buat formulir yang akan memungkinkan untuk hal ini.

Ini adalah bentuk standar 'run-of-the-mill' Anda. Kami telah menambahkan masukan untuk judul dan deskripsi. Ketika tombol submit diklik, informasi yang dimasukkan akan diposting ke "addItem.php". Mari buat halaman itu sekarang.


Langkah 7: AddItem.php

Buat dokumen baru, dan simpan sebagai "addItem.php". Sisipkan di kode berikut:

  • Lihat kelas db kami.
  • Instantiasikan kelas.
  • Jika tombol submit dengan nama "addEntry" ada, kemudian jalankan kode berikut.
  • Buat kueri baru. Anda akan melihat bahwa saya menggunakan tanda tanya sebagai nilainya. Ini adalah metode yang disukai untuk menggunakan pernyataan siap ketika memperbarui database kami. Ini cara terbaik untuk melindungi diri terhadap injeksi sql.
  • Persiapkan variabel mysql kami dengan meneruskan permintaan yang baru saja kami buat.
  • Jika sudah siap berhasil, ikat parameter yang sesuai. Parameter pertama meminta tipe data untuk setiap item. Saya telah menggunakan 's' untuk merujuk ke "string". Dua parameter kedua mengambil nilai judul dan deskripsi dari array global super POST.
  • Jalankan pernyataan.
  • Akhirnya, mengarahkan pengguna kembali ke halaman beranda.

Langkah 7: Perbarui Item


Menggunakan kemampuan AJAX jQuery, mari memungkinkan pengguna untuk memperbarui setiap item tanpa postback. Buat file baru dalam folder "js", dan beri nama "scripts.js". Ingat, kami sudah mereferensikan file ini di markup kami.

Jika Anda akan kembali ke markup kami di index.php, Anda akan melihat:

Decoding Setiap Baris

Dengan menggunakan jQuery, kita perlu mendengarkan ketika tag anchor dengan kelas "editEntry" diklik.

Selanjutnya, kita caching $(this) - yang mengacu pada tag anchor yang diklik.

Kita perlu menyimpan deskripsi asli. Kami memberi tahu tag anchor untuk menemukan div induk, dan mencari tag p - yang menaungi teks deskripsi. Kami mengambil nilai itu dengan menggunakan "text()".

Untuk memperbarui baris yang benar dalam database kami, saya perlu tahu apa itu id baris tertentu. Jika Anda merujuk kembali ke kode Anda, Anda akan melihat bidang input tersembunyi yang berisi nilai ini.

Sekali lagi, kami menggunakan "temukan" untuk mengakses masukan tersembunyi ini, lalu ambil nilainya.

Sekarang, kita perlu mengizinkan pengguna untuk memasukkan deskripsi baru. Itu sebabnya mereka mengklik "Edit Entry", bukan !? Kami menemukan deskripsi tag P, mengosongkannya, dan kemudian menambahkan textarea. Kami menggunakan "empty()" untuk memastikan bahwa kami menyingkirkan semua teks; itu tidak diperlukan lagi. Nilai textarea ini akan sama dengan oldText - sebagai kenyamanan.


Temukan textarea baru ini, dan ketika pengguna meninggalkan kotak teks, jalankan fungsi.

Tangkap teks baru yang dimasukkan pengguna ke dalam textarea ini.

Panggil fungsi .ajax, dan berikan beberapa parameter. Jenisnya akan "POST". Url untuk mengakses adalah "updateEntry.php". Data yang dilewatkan ke halaman ini adalah newText yang dimasukkan pengguna, dan id unik dari baris tersebut dalam database. Ketika pembaruan berhasil dilakukan, jalankan fungsi, dan perbarui teks lama dengan teks baru!

Kembalikan false untuk memastikan bahwa mengklik anchor tag tidak mengarahkan pengguna ke tempat lain.


Langkah 7b: PHP

Ingat, kami telah memanggil halaman PHP 'updateEntry' kami dengan jQuery, tetapi kami belum benar-benar membuatnya! Ayo lakukan itu sekarang. Buat halaman baru yang disebut "updateEntry.php" dan tempelkan yang berikut ini.

Seperti sebelumnya, kami mereferensikan kelas db kami, dan kemudian kami memberi contoh. Selanjutnya, kita membuat variabel baru, yang disebut $ response, dan membuatnya sama dengan apa pun yang dikembalikan dari metode "update_by_id ()". Kami belum membuat metode ini dulu. Sekarang adalah saat yang tepat untuk melakukannya.

Menambahkan Metode Baru ke Kelas Kami

Kembali ke halaman db.php Anda dan tambahkan metode baru di bagian bawah.

Metode ini menerima dua parameter: id, dan deskripsi item. Jadi, ketika kita memanggil metode ini, kita harus ingat untuk meneruskan kedua parameter itu! Kami mulai dengan membuat kueri kami: perbarui tabel "todo" dan ubah deskripsi menjadi apa pun yang diteruskan - tetapi hanya perbarui baris di mana id sama dengan parameter yang dilewatkan.

Seperti terakhir kali, kami akan menggunakan pernyataan siap untuk memperbarui basis data kami. Ini cara teraman! Siapkan permintaan kami, ikat parameter (string dan integer, atau 'si'), dan jalankan. Kami mengembalikan string umum, tetapi sebenarnya tidak diperlukan sama sekali. Sekarang pembaruan kami harus bekerja dengan sempurna!


Langkah 8: Menghapus item


Mari kita juga membuat cara asynchronous yang bagus bagi pengguna untuk menghapus entri. Ketika mereka mengklik tombol hapus untuk suatu item, kita akan memudarkan div dan memperbarui database untuk mencerminkan penghapusan. Buka file javascript Anda dan tambahkan yang berikut:

Decoding

Ketika tag anchor dengan kelas "deleteEntryAnchor" diklik, jalankan fungsi.

Cache $ (ini) sebagai thisparam.

Ubah teks deskripsi menjadi "Please Wait". Kami harus melakukan ini untuk memberikan umpan balik kepada pengguna, untuk berjaga-jaga jika diperlukan lebih lama dari yang diperkirakan.

Kami tidak memerlukan parameter "DATA", karena semua informasi yang tepat ada di dalam querystring url. Setelah penghapusan berhasil dilakukan, kami menemukan div orangtua .item ', dan memudar perlahan-lahan.

Kami tidak memerlukan parameter "DATA", karena semua informasi yang tepat ada di dalam querystring url. Setelah penghapusan berhasil dilakukan, kami menemukan div orangtua .item ', dan memudar perlahan-lahan.

Delete.php

Kami telah memanggil halaman hapus kami dengan jQuery, tetapi kami belum membuat PHP. Buat halaman baru Anda dan tambahkan kode berikut.

Anda harus terbiasa dengan prosedur ini sekarang. Buat instance baru dari kelas kami, dan panggil metode "delete_by_id". Setelah itu selesai dengan sukses, arahkan kembali pengguna ke "index.php". Seperti yang Anda duga, kita perlu membuat metode baru dalam kelas db kami. Kembali ke db.php dan tambahkan fungsi baru Anda.

delete_by_id () Metode

Metode ini akan menerima satu parameter - id. Ingat: untuk memperbarui baris, kita HARUS tahu bahwa id unik baris. Jika tidak, ini akan memperbarui setiap baris. Kami menghapus semua baris dari tabel, di mana id sama dengan yang diteruskan. Karena setiap baris memiliki id uniknya sendiri, hanya satu yang akan terpengaruh. Selanjutnya, kami meneruskan kueri ini ke objek mysql kami. Sekali lagi, pengembalian itu tidak perlu; itu hanya untuk bersenang-senang.


Langkah 9: Ekstra jQuery

Kami telah menyelesaikan semua pekerjaan PHP kami! Langkah terakhir adalah menambahkan sedikit jQuery agar semuanya berjalan sedikit lebih baik. Di bagian atas file Javascript Anda, tepat setelah metode document.ready, tambahkan kode berikut:

Saya telah berkomentar setiap langkah dengan cukup baik. Jadi, aku akan menahan diri untuk tidak mengulangi diriku sendiri. File scripts.js terakhir Anda akan terlihat seperti ini.


Langkah 10: Tunggu! Tata Letaknya Aneh di IE6.

Kami belum bisa menyebutnya hari ini! Internet Explorer 6 yang menyenangkan itu menyebabkan beberapa masalah tata letak.


  1. Pngs latar belakang adalah 24 bit. IE6 tidak mendukung ini secara native. Kita perlu mengimpor skrip untuk memperbaikinya.
  2. Tab navigasi tidak muncul di tempat yang tepat.
  3. Setiap div.item tidak ditampilkan dengan benar ketika diperluas.
  4. Pengeditan kami, dan tombol hapus terlalu jauh di sebelah kanan div kami.

Solusi

Meskipun kita mungkin ingin, kita tidak bisa mengabaikan browser ini dulu. Untungnya, Anda akan menemukan bahwa sebagian besar masalah IE6 dapat diperbaiki dengan mudah. Pertama, kita perlu mengimpor skrip yang akan memperbaiki masalah transparansi alpha kami. Dean Martin memiliki file Javascript fantastis yang membawa IE6 hingga memenuhi standar. Cukup dengan menambahkan "-trans" ke akhir nama file png 24 bit kami, kami dapat memperbaiki masalah kami. Pastikan untuk mengunjungi folder gambar, dan edit nama.

CDN Google datang untuk menyelamatkan lagi dengan menyediakan versi host dari skrip IE7. Itu memperbaiki masalah transparansi kami, tetapi kami masih memiliki beberapa quirks lagi.


Perhatikan bahwa, dalam pernyataan kondisional kami, kami juga mengimpor file "ie.css". Buat file itu sekarang, dan tempelkan yang berikut:

Anda akan menemukan bahwa menambahkan "position: relative", "overflow: hidden", dan "height: 100%" akan memperbaiki 90% masalah IE6 Anda. Sekarang, tata letak kami berfungsi dengan sempurna di semua browser!


Anda selesai!


Ada BANYAK untuk dibahas di sini. Mudah-mudahan, saya menjelaskan diri saya secara mendalam. Jika tidak, itulah tujuan dari screencast terkait! Pastikan untuk memeriksanya untuk membersihkan area yang buram. Jika Anda masih memiliki pertanyaan, tanyakan saja pada saya! Terima kasih banyak telah membaca.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.