Tutorial ini memperkenalkan kerangka kerja aplikasi web Prado dan mengajarkan Anda bagaimana untuk - membangun aplikasi web sederhana dalam beberapa langkah sederhana. Tutorial - ini menganggap bahwa Anda terbiasa dengan PHP dan Anda telah mengakses + membangun aplikasi web sederhana dalam beberapa langkah sederhana. Tutorial + ini menganggap bahwa Anda terbiasa dengan PHP dan Anda telah mengakses server web yang dapat melayani naskah PHP5.

Cara tercepat dan termudah untuk membuat aplikasi web Prado baru adalah menggunakan piranti perintah prado-cli.php yang ditemukan dalam direktori framework pada distribusi Prado. Kita membuat aplikasi baru dengan menjalankan perintah berikut dalam prompt perintah atau konsol Anda. Perintah membuat direktori baru bernama currency-converter dalam direktori kerja Anda saat ini. Anda perlu mengubahnya ke direktori yang benar terlebih dahulu. - Lihat Piranti Baris Perintah - untuk lebih jelasnya. -

Membuat Antarmuka Pengguna Pengubah Kurs

Kita mulai dengan mengedit file Home.page yang ditemukan dalam direktori currency-converter/protected/pages/. File yang berakhiran dengan ".page" adalah template halaman yang berisi HTML dan kontrol Prado. - Kita cukup menambah dua kotak teks, tiga label dan satu tombol seperti berikut. + Kita cukup menambah dua kotak teks, tiga label dan satu tombol seperti berikut.

Jika Anda menyegarkan halaman, Anda akan melihat sesuatu mirip dengan gambar berikut. Ia mungkin terlihat tidak cukup bagus atau berurut, tapi kita akan mengubahnya nanti dengan menggunakan CSS. @@ -82,7 +82,7 @@ php prado/framework/prado-cli.php -c currency-converter yang pada dasarnya mendefinisikan sebuah label dan kotak teks bagi pengguna aplikasi untuk memasukan nilai pertukaran kurs. - Nilai properti ForControl property menentukan komponen mana label + Nilai properti ForControl property menentukan komponen mana label diperuntukan. Ini membolehkan pengguna aplikasi mengklik pada label untuk memfokuskan pada field (hal yang baik). Anda mungkin telah menggunakan elemen biasa HTML <label> untuk melakukan hal yang sama, tapi @@ -109,7 +109,7 @@ php prado/framework/prado-cli.php -c currency-converter

Jika Anda mencoba mengklik pada tombol "Convert" kemudian halaman akan menyegarkan dan tidak melakukan apapun. Agar tombol melakukan beberapa pekerjaan, kita perlu menambahkan "Home.php" ke di mana "Home.page" berada. Kelas Home harus - memperluas , basis kelas standar untuk semua halaman Prado. + memperluas , basis kelas standar untuk semua halaman Prado.

Prado menggunakan metode PHP __autoload untuk mengambil kelas. Konvensi adalah untuk menggunakan nama kelas dengan ekstensi ".php" sebagai nama file. @@ -134,14 +133,14 @@ class Home extends TPage nilai dalam kotak teks, melakukan beberapa perhitungan dan menyajikan kepada pengguna dengan total nilai yang dikonversi. Untuk menangani pengguna mengklik pada tombo "Convert", kita cukup menambahkan sebuah properti OnClick ke tombol "Convert" dalam - template "Home.page" dan menambahkan metode pengendali event terkait dalam "Home.php". + template "Home.page" dan menambahkan metode pengendali event terkait dalam "Home.php".

Nilai dari OnClick, "convert_clicked", akan menjadi nama metode - dalam "Home.php" yang akan dipanggil saat pengguna mengklik tombol "Convert". + dalam "Home.php" yang akan dipanggil saat pengguna mengklik tombol "Convert".

+ +

Jika Anda menjalankan aplikasi dalam web browser Anda, masukkan beberapa nilai dan klik tombol "Convert" kemudian Anda akan melihat nilai yang dihitung ditampilkan @@ -168,24 +167,24 @@ class Home extends TPage

Sekarang kita akan memeriksa, tiga baris yang mengimplementasikan konversi - kurs sederhana dalam metode "convert_clicked". -

+ kurs sederhana dalam metode "convert_clicked". +

$rate = floatval($this->currencyRate->Text); - +

Pernyataan $this->currencyRate berhubungan dengan komponen TTextBox dengan nilai ID "currencyRate" dalam template "Home.page". Properti Text dari TTextBox berisi nilai yang dimasukan oleh pengguna. Maka kita memperoleh nilai ini dengan $this->currencyRate->Text yang kita konversi nilainya ke nilai - pecahan. + pecahan.

$dollars = floatval($this->dollars->Text); - -

+ +

Baris berikutnya melakukan hal yang mirip, ia mengambil nilai pengguna dari TTextBox dengan nilai ID "dollars dang mengubahnya @@ -194,9 +193,9 @@ $dollars = floatval($this->dollars->Text);

Baris ketiga menghitung jumlah baru dan menyetel nilai ini dalam properti Text dari TLabel dengan ID="total". - Selanjutnya, kita tampilkan jumlah baru ke pengguna dalam label. + Selanjutnya, kita tampilkan jumlah baru ke pengguna dalam label.

$this->total->Text = $rate * $dollars; @@ -210,11 +209,11 @@ $this->total->Text = $rate * $dollars;

pengguna memasukan sebuah nilai,

kurs mata uang adalah angka yang benar,

kurs mata uang adalah positif.

- +

Untuk memastikan poin 1 kita menambahkan satu . Untuk memastikan poin 2 dan 3, kita menambahkan satu . Kita dapat menambahkan validator ini di mana saja di dalam template "Home.page". Perincian selanjutnya mengenai validator ini dan validator lainnya dapat ditemukan dalam halaman - Validation Controls. + Validation Controls.

<com:TRequiredFieldValidator @@ -232,11 +231,11 @@ $this->total->Text = $rate * $dollars;

pengguna memasukan sebuah nilai,
nilai adalah angka yang benar (tidak menyertakan tanda kurs atau dolar).

Untuk memastikan 1 kita cukup menambahkan TRequiredFieldValidator lainnya, untuk 2 kita dapat menggunakan - . Untuk memudahkan kita hanya membolehkan pengguna untuk memasukan sebuah angka untuk jumlah yang ingin mereka ubah. + . Untuk memudahkan kita hanya membolehkan pengguna untuk memasukan sebuah angka untuk jumlah yang ingin mereka ubah.

<com:TRequiredFieldValidator @@ -249,8 +248,8 @@ $this->total->Text = $rate * $dollars;

Sekarang jika Anda mencoba memasukan beberapa data tidak benar dalam aplikasi atau membiarkan field kosong - validators akan diaktifkan dan menyajikan pesan kesalahan kepada pengguna. Catatan bahwa pesan kesalahan disajikan tanpa mengambil ulang halaman. Validator Prado standarnya memvalidasi javascript dan di dalam server. Validasi di dalam server selalu dilakukan. Untuk sisi server, kita harus melewati perhitungan jika validator tidak memuaskan. Ini dapat dilakukan seperti berikut. +

Sekarang jika Anda mencoba memasukan beberapa data tidak benar dalam aplikasi atau membiarkan field kosong + validators akan diaktifkan dan menyajikan pesan kesalahan kepada pengguna. Catatan bahwa pesan kesalahan disajikan tanpa mengambil ulang halaman. Validator Prado standarnya memvalidasi javascript dan di dalam server. Validasi di dalam server selalu dilakukan. Untuk sisi server, kita harus melewati perhitungan jika validator tidak memuaskan. Ini dapat dilakukan seperti berikut.

public function convert_clicked($sender, $param) @@ -276,7 +275,7 @@ memperbaiki pengalaman pengguna dengan meningkatkan tanggapan aplikasi. Satu car , yang dapat memicu event klik di dalam server tanpa mengambil ulang halaman. Sebagai tambahan, kita dapat mengubah "total" TLabel dengan pasangan Kontrol Aktif, - , dengan demikian di dalam server dapat memutakhirkan browser tanpa mengambil ulang halaman. + , dengan demikian di dalam server dapat memutakhirkan browser tanpa mengambil ulang halaman.

@@ -286,10 +285,10 @@ memperbaiki pengalaman pengguna dengan meningkatkan tanggapan aplikasi. Satu car

<com:TActiveButton Text="Convert" OnClick="convert_clicked" />

- +

Logika di dalam server tetap sama, kita hanya perlu mengimpor - ruang nama Kontrol Aktif karena secara standar tidak disertakan. Kita menambahkan baris berikut ke awal "Home.php". + ruang nama Kontrol Aktif karena secara standar tidak disertakan. Kita menambahkan baris berikut ke awal "Home.php".

Prado::using('System.Web.UI.ActiveControls.*'); @@ -300,7 +299,7 @@ Prado::using('System.Web.UI.ActiveControls.*'); Selanjutnya kita bisa memperbaiki pengalaman pengguna dengan mengunah label teks "total" menjadi "calculating..." saat pengguna mengklik tombol "Convert". Label teks "total" masih dimutakhirkan dengan jumlah perhitungan baru seperti sebelumnya.

Untuk mengindikasikan bahwa perhitungan sedang berlangsung, kita dapat mengubah label teks "total" sebagai berikut. Kita menambahkan properti ClientSide.OnLoading ke tombol "Convert" (karena tombol ini bertanggung jawab terhadap permintaan perhitungan). +

<com:TActiveButton Text="Convert" OnClick="convert_clicked" > @@ -325,7 +324,7 @@ Prado::using('System.Web.UI.ActiveControls.*');

Kita cukup dengan membuat file CSS bernama "common.css" dan menyimpannya dalam direktori - themes/Basic. Kemudian kita menambahkan kode berikut ke awal "Home.page" (kita menambahkan sedikit kode HTML juga). + themes/Basic. Kemudian kita menambahkan kode berikut ke awal "Home.page" (kita menambahkan sedikit kode HTML juga).

<%@ Theme="Basic" %> @@ -334,10 +333,10 @@ Prado::using('System.Web.UI.ActiveControls.*'); <com:THead Title="Currency Converter" /> - +

Baris pertama <%@ Theme="Basic" %> mendefinisikan tema - yang dipakai untuk halaman ini. + yang dipakai untuk halaman ini. merujuk ke elemen HTML <head>. Sebagai tambahan terhadap tampilan properti Title pada THead, semua file CSS -- cgit v1.2.3

Membangun Pengubah Kurs Sederhana

Membuat Antarmuka Pengguna Pengubah Kurs